From c147bf7b4d30e606ffab67ed0cbece6c202a8e1c Mon Sep 17 00:00:00 2001 From: Lukas Harbarth Date: Thu, 9 Jan 2025 11:45:59 +0100 Subject: [PATCH] feat: update to UI5 Web Components 2.6.2 (#6792) --- .../custom-element-manifests/fiori.json | 147 ++++++- .storybook/custom-element-manifests/main.json | 412 +++++++++++++++++- config/version-info.json | 3 +- package.json | 10 +- packages/base/package.json | 2 +- packages/base/src/hooks/useStylesheet.ts | 3 +- packages/charts/package.json | 4 +- packages/cli/src/util/referenceResolver.ts | 3 + packages/compat/package.json | 4 +- .../components/Toolbar/OverflowPopover.tsx | 3 + packages/cypress-commands/package.json | 4 +- packages/main/package.json | 8 +- .../ExpandableText/ExpandableText.cy.tsx | 83 ---- .../ExpandableText/ExpandableText.module.css | 31 -- .../ExpandableText/ExpandableText.stories.tsx | 21 - .../src/components/ExpandableText/index.tsx | 107 ----- .../components/ObjectPageAnchorBar/index.tsx | 1 + .../src/components/ThemeProvider/index.tsx | 29 +- .../src/components/VariantManagement/types.ts | 6 +- packages/main/src/index.ts | 1 - .../main/src/internal/withWebComponent.tsx | 25 ++ .../main/src/webComponents/Carousel/index.tsx | 2 - .../DynamicSideContent/index.tsx | 20 +- .../ExpandableText/ExpandableText.cy.tsx | 42 ++ .../ExpandableText/ExpandableText.mdx | 6 +- .../ExpandableText/ExpandableText.stories.tsx | 29 ++ .../webComponents/ExpandableText/index.tsx | 106 +++++ .../src/webComponents/MultiComboBox/index.tsx | 2 +- .../webComponents/NavigationLayout/index.tsx | 24 +- .../webComponents/RatingIndicator/index.tsx | 11 +- .../src/webComponents/SplitButton/index.tsx | 2 +- .../src/webComponents/StepInput/index.tsx | 17 +- .../main/src/webComponents/Table/index.tsx | 41 +- .../webComponents/TableHeaderCell/index.tsx | 6 +- .../main/src/webComponents/TableRow/index.tsx | 12 +- .../webComponents/TableVirtualizer/index.tsx | 2 + .../src/webComponents/Tokenizer/index.tsx | 4 + .../main/src/webComponents/UserMenu/index.tsx | 37 +- packages/main/src/webComponents/index.ts | 1 + scripts/postcss-css-to-esm.mjs | 10 +- yarn.lock | 202 ++++----- 41 files changed, 1024 insertions(+), 459 deletions(-) delete mode 100644 packages/main/src/components/ExpandableText/ExpandableText.cy.tsx delete mode 100644 packages/main/src/components/ExpandableText/ExpandableText.module.css delete mode 100644 packages/main/src/components/ExpandableText/ExpandableText.stories.tsx delete mode 100644 packages/main/src/components/ExpandableText/index.tsx create mode 100644 packages/main/src/webComponents/ExpandableText/ExpandableText.cy.tsx rename packages/main/src/{components => webComponents}/ExpandableText/ExpandableText.mdx (76%) create mode 100644 packages/main/src/webComponents/ExpandableText/ExpandableText.stories.tsx create mode 100644 packages/main/src/webComponents/ExpandableText/index.tsx diff --git a/.storybook/custom-element-manifests/fiori.json b/.storybook/custom-element-manifests/fiori.json index ac292721051..f8868ab0de8 100644 --- a/.storybook/custom-element-manifests/fiori.json +++ b/.storybook/custom-element-manifests/fiori.json @@ -1344,6 +1344,57 @@ } ] }, + { + "kind": "javascript-module", + "path": "dist/types/NavigationLayoutMode.js", + "declarations": [ + { + "kind": "enum", + "name": "NavigationLayoutMode", + "description": "Specifies the navigation layout mode.", + "_ui5privacy": "public", + "members": [ + { + "kind": "field", + "static": true, + "privacy": "public", + "description": "Automatically calculates the navigation layout mode based on the screen device type.\n`Expanded` on desktop and `Collapsed` on tablet and phone.", + "default": "Auto", + "name": "Auto", + "readonly": true + }, + { + "kind": "field", + "static": true, + "privacy": "public", + "description": "Collapsed side navigation.", + "default": "Collapsed", + "name": "Collapsed", + "readonly": true + }, + { + "kind": "field", + "static": true, + "privacy": "public", + "description": "Expanded side navigation.", + "default": "Expanded", + "name": "Expanded", + "readonly": true + } + ] + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "NavigationLayoutMode", + "module": "dist/types/NavigationLayoutMode.js" + } + } + ] + }, { "kind": "javascript-module", "path": "dist/types/NotificationListItemImportance.js", @@ -2566,6 +2617,24 @@ "description": "Defines whether the component is in equal split mode. In this mode, the side and\nthe main content take 50:50 percent of the container on all screen sizes\nexcept for phone, where the main and side contents are switching visibility\nusing the toggle method.", "privacy": "public" }, + { + "kind": "field", + "name": "accessibilityAttributes", + "type": { + "text": "DynamicSideContentAccessibilityAttributes", + "references": [ + { + "name": "DynamicSideContentAccessibilityAttributes", + "package": "@ui5/webcomponents-fiori", + "module": "dist/DynamicSideContent.js" + } + ] + }, + "default": "{}", + "description": "Defines additional accessibility attributes on different areas of the component.\n\nThe accessibilityAttributes object has the following fields:\n\n - **mainContent**: `mainContent.ariaLabel` defines the aria-label of the main content area. Accepts any string.\n - **sideContent**: `sideContent.ariaLabel` defines the aria-label of the side content area. Accepts any string.", + "privacy": "public", + "_ui5since": "2.6.0" + }, { "kind": "method", "name": "toggleContents", @@ -2686,6 +2755,15 @@ "type": { "text": "boolean" } + }, + { + "description": "Defines additional accessibility attributes on different areas of the component.\n\nThe accessibilityAttributes object has the following fields:\n\n - **mainContent**: `mainContent.ariaLabel` defines the aria-label of the main content area. Accepts any string.\n - **sideContent**: `sideContent.ariaLabel` defines the aria-label of the side content area. Accepts any string.", + "name": "accessibility-attributes", + "default": "{}", + "fieldName": "accessibilityAttributes", + "type": { + "text": "DynamicSideContentAccessibilityAttributes" + } } ], "superclass": { @@ -3790,7 +3868,7 @@ "declarations": [ { "kind": "class", - "description": "### Overview\n\nThe `ui5-navigation-layout` is a container component that can be used to\ncreate a layout with a header, a side navigation and a content area.\n\n### Usage\n\nUse the `ui5-navigation-layout` to create whole screen of an application with vertical navigation.\n\n### Responsive Behavior\n\nOn desktop and tablet devices, the side navigation remains visible and can\nbe expanded or collapsed using the `sideCollapsed` property. On phone devices, the side navigation\nis hidden by default but can be displayed using the same `sideCollapsed` property.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/NavigationLayout.js\";`", + "description": "### Overview\n\nThe `ui5-navigation-layout` is a container component that can be used to\ncreate a layout with a header, a side navigation and a content area.\n\n### Usage\n\nUse the `ui5-navigation-layout` to create whole screen of an application with vertical navigation.\n\n### Responsive Behavior\n\nOn desktop and tablet devices, the side navigation is visible\nby default and can be expanded or collapsed using the `mode` property.\nOn phone devices, the side navigation is hidden by default and can\nbe displayed using the `mode` property.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/NavigationLayout.js\";`", "name": "NavigationLayout", "slots": [ { @@ -3829,23 +3907,41 @@ "members": [ { "kind": "field", - "name": "sideCollapsed", - "description": "Indicates whether the side navigation is collapsed.", - "default": "false", - "privacy": "public", + "name": "mode", "type": { - "text": "boolean" - } + "text": "NavigationLayoutMode", + "references": [ + { + "name": "NavigationLayoutMode", + "package": "@ui5/webcomponents-fiori", + "module": "dist/types/NavigationLayoutMode.js" + } + ] + }, + "default": "\"Auto\"", + "description": "Specifies the navigation layout mode.", + "privacy": "public" + }, + { + "kind": "method", + "name": "isSideCollapsed", + "return": { + "type": { + "text": "boolean" + } + }, + "description": "Gets whether the side navigation is collapsed.", + "privacy": "public" } ], "attributes": [ { - "description": "Indicates whether the side navigation is collapsed.", - "name": "side-collapsed", - "default": "false", - "fieldName": "sideCollapsed", + "description": "Specifies the navigation layout mode.", + "name": "mode", + "default": "\"Auto\"", + "fieldName": "mode", "type": { - "text": "any" + "text": "\"Auto\" | \"Collapsed\" | \"Expanded\"" } } ], @@ -8158,6 +8254,30 @@ } ] }, + { + "name": "open", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" + }, + "description": "Fired when a user menu is open.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": false, + "_ui5since": "2.6.0" + }, + { + "name": "close", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" + }, + "description": "Fired when a user menu is close.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": false, + "_ui5since": "2.6.0" + }, { "name": "sign-out-click", "_ui5privacy": "public", @@ -8167,7 +8287,8 @@ "description": "Fired when the \"Sign Out\" button is selected.", "_ui5Cancelable": true, "_ui5allowPreventDefault": true, - "_ui5Bubbles": false + "_ui5Bubbles": false, + "_ui5since": "2.6.0" } ], "attributes": [ diff --git a/.storybook/custom-element-manifests/main.json b/.storybook/custom-element-manifests/main.json index e490f3d7621..ac40a5d310e 100644 --- a/.storybook/custom-element-manifests/main.json +++ b/.storybook/custom-element-manifests/main.json @@ -1356,6 +1356,48 @@ } ] }, + { + "kind": "javascript-module", + "path": "dist/types/ExpandableTextOverflowMode.js", + "declarations": [ + { + "kind": "enum", + "name": "ExpandableTextOverflowMode", + "description": "Overflow Mode.", + "_ui5privacy": "public", + "members": [ + { + "kind": "field", + "static": true, + "privacy": "public", + "description": "Overflowing text is appended in-place.", + "default": "InPlace", + "name": "InPlace", + "readonly": true + }, + { + "kind": "field", + "static": true, + "privacy": "public", + "description": "Full text is displayed in a popover.", + "default": "Popover", + "name": "Popover", + "readonly": true + } + ] + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "ExpandableTextOverflowMode", + "module": "dist/types/ExpandableTextOverflowMode.js" + } + } + ] + }, { "kind": "javascript-module", "path": "dist/types/FormItemSpacing.js", @@ -2677,6 +2719,58 @@ } ] }, + { + "kind": "javascript-module", + "path": "dist/types/RatingIndicatorSize.js", + "declarations": [ + { + "kind": "enum", + "name": "RatingIndicatorSize", + "description": "Types of icon sizes used in the RatingIndicator.\nProvides predefined size categories to ensure consistent scaling and spacing of icons.", + "_ui5privacy": "public", + "_ui5since": "2.6.0", + "members": [ + { + "kind": "field", + "static": true, + "privacy": "public", + "description": "Small size for compact layouts.", + "default": "S", + "name": "S", + "readonly": true + }, + { + "kind": "field", + "static": true, + "privacy": "public", + "description": "Medium size, used as the default option.\nOffers a balanced appearance for most scenarios.", + "default": "M", + "name": "M", + "readonly": true + }, + { + "kind": "field", + "static": true, + "privacy": "public", + "description": "Large size for prominent or spacious layouts.", + "default": "L", + "name": "L", + "readonly": true + } + ] + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "RatingIndicatorSize", + "module": "dist/types/RatingIndicatorSize.js" + } + } + ] + }, { "kind": "javascript-module", "path": "dist/types/SegmentedButtonSelectionMode.js", @@ -6473,7 +6567,7 @@ "text": "boolean" }, "default": "false", - "description": "Defines the visibility of the navigation arrows.\nIf set to true the navigation arrows will be hidden.\n\n**Note:** The navigation arrows are always displayed on touch devices.", + "description": "Defines the visibility of the navigation arrows.\nIf set to true the navigation arrows will be hidden.", "privacy": "public", "_ui5since": "1.0.0-rc.15" }, @@ -6681,7 +6775,7 @@ } }, { - "description": "Defines the visibility of the navigation arrows.\nIf set to true the navigation arrows will be hidden.\n\n**Note:** The navigation arrows are always displayed on touch devices.", + "description": "Defines the visibility of the navigation arrows.\nIf set to true the navigation arrows will be hidden.", "name": "hide-navigation-arrows", "default": "false", "fieldName": "hideNavigationArrows", @@ -11409,6 +11503,138 @@ } ] }, + { + "kind": "javascript-module", + "path": "dist/ExpandableText.js", + "declarations": [ + { + "kind": "class", + "description": "### Overview\n\nThe `ui5-expandable-text` component allows displaying a large body of text in a small space. It provides an \"expand/collapse\" functionality, which shows/hides potentially truncated text.\n\n### Usage\n\n#### When to use:\n- To accommodate long texts in limited space, for example in list items, table cell texts, or forms\n\n#### When not to use:\n- The content is critical for the user. In this case use short descriptions that can fit in\n- Strive to provide short and meaningful texts to avoid excessive number of \"Show More\" links on the page\n\n### Responsive Behavior\n\nOn phones, if the component is configured to display the full text in a popover, the popover will appear in full screen.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/ExpandableText\";`", + "name": "ExpandableText", + "members": [ + { + "kind": "field", + "name": "text", + "type": { + "text": "string | undefined" + }, + "description": "Text of the component.", + "default": "undefined", + "privacy": "public" + }, + { + "kind": "field", + "name": "maxCharacters", + "type": { + "text": "number" + }, + "default": "100", + "description": "Maximum number of characters to be displayed initially. If the text length exceeds this limit, the text will be truncated with an ellipsis, and the \"More\" link will be displayed.", + "privacy": "public" + }, + { + "kind": "field", + "name": "overflowMode", + "type": { + "text": "ExpandableTextOverflowMode", + "references": [ + { + "name": "ExpandableTextOverflowMode", + "package": "@ui5/webcomponents", + "module": "dist/types/ExpandableTextOverflowMode.js" + } + ] + }, + "default": "\"InPlace\"", + "description": "Determines how the full text will be displayed.", + "privacy": "public" + }, + { + "kind": "field", + "name": "emptyIndicatorMode", + "type": { + "text": "TextEmptyIndicatorMode", + "references": [ + { + "name": "TextEmptyIndicatorMode", + "package": "@ui5/webcomponents", + "module": "dist/types/TextEmptyIndicatorMode.js" + } + ] + }, + "default": "\"Off\"", + "description": "Specifies if an empty indicator should be displayed when there is no text.", + "privacy": "public" + } + ], + "attributes": [ + { + "description": "Text of the component.", + "name": "text", + "default": "undefined", + "fieldName": "text", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Maximum number of characters to be displayed initially. If the text length exceeds this limit, the text will be truncated with an ellipsis, and the \"More\" link will be displayed.", + "name": "max-characters", + "default": "100", + "fieldName": "maxCharacters", + "type": { + "text": "number" + } + }, + { + "description": "Determines how the full text will be displayed.", + "name": "overflow-mode", + "default": "\"InPlace\"", + "fieldName": "overflowMode", + "type": { + "text": "\"InPlace\" | \"Popover\"" + } + }, + { + "description": "Specifies if an empty indicator should be displayed when there is no text.", + "name": "empty-indicator-mode", + "default": "\"Off\"", + "fieldName": "emptyIndicatorMode", + "type": { + "text": "\"On\" | \"Off\"" + } + } + ], + "superclass": { + "name": "UI5Element", + "package": "@ui5/webcomponents-base", + "module": "dist/UI5Element.js" + }, + "tagName": "ui5-expandable-text", + "customElement": true, + "_ui5since": "2.6.0", + "_ui5privacy": "public" + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "ExpandableText", + "module": "dist/ExpandableText.js" + } + }, + { + "kind": "custom-element-definition", + "name": "ui5-expandable-text", + "declaration": { + "name": "ExpandableText", + "module": "dist/ExpandableText.js" + } + } + ] + }, { "kind": "javascript-module", "path": "dist/FileUploader.js", @@ -16496,7 +16722,7 @@ "description": "Fired when the dropdown is opened.", "_ui5Cancelable": false, "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, + "_ui5Bubbles": false, "_ui5since": "2.0.0" }, { @@ -20062,6 +20288,24 @@ "privacy": "public", "_ui5since": "1.0.0-rc.15" }, + { + "kind": "field", + "name": "size", + "type": { + "text": "RatingIndicatorSize", + "references": [ + { + "name": "RatingIndicatorSize", + "package": "@ui5/webcomponents", + "module": "dist/types/RatingIndicatorSize.js" + } + ] + }, + "default": "\"M\"", + "description": "Defines the size of the component.", + "privacy": "public", + "_ui5since": "2.6.0" + }, { "kind": "field", "name": "disabled", @@ -20159,6 +20403,15 @@ "text": "number" } }, + { + "description": "Defines the size of the component.", + "name": "size", + "default": "\"M\"", + "fieldName": "size", + "type": { + "text": "\"S\" | \"M\" | \"L\"" + } + }, { "description": "Defines whether the component is disabled.\n\n**Note:** A disabled component is completely noninteractive.", "name": "disabled", @@ -22343,7 +22596,7 @@ "type": { "text": "string | undefined" }, - "description": "Defines the icon to be displayed as graphical element within the component.\nThe SAP-icons font provides numerous options.\n\nExample:\n\nSee all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", + "description": "Defines the icon to be displayed as graphical element within the component.\nThe SAP-icons font provides numerous options.\n\nExample:\n\nSee all available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", "default": "undefined", "privacy": "public" }, @@ -22422,7 +22675,7 @@ ], "attributes": [ { - "description": "Defines the icon to be displayed as graphical element within the component.\nThe SAP-icons font provides numerous options.\n\nExample:\n\nSee all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", + "description": "Defines the icon to be displayed as graphical element within the component.\nThe SAP-icons font provides numerous options.\n\nExample:\n\nSee all available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", "name": "icon", "default": "undefined", "fieldName": "icon", @@ -22668,6 +22921,18 @@ "_ui5allowPreventDefault": false, "_ui5Bubbles": true }, + { + "name": "input", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" + }, + "description": "Fired when the value of the component changes at each keystroke.", + "_ui5Cancelable": true, + "_ui5allowPreventDefault": true, + "_ui5Bubbles": true, + "_ui5since": "2.6.0" + }, { "name": "value-state-change", "_ui5privacy": "public", @@ -24360,6 +24625,94 @@ "description": "The row instance" } ] + }, + { + "name": "move-over", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent", + "references": [ + { + "name": "TableMoveEventDetail", + "package": "@ui5/webcomponents", + "module": "dist/Table.js" + } + ] + }, + "description": "Fired when a movable item is moved over a potential drop target during a dragging operation.\n\nIf the new position is valid, prevent the default action of the event using `preventDefault()`.\n\n**Note:** If the dragging operation is a cross-browser operation or files are moved to a potential drop target,\nthe `source` parameter will be `null`.", + "_ui5Cancelable": true, + "_ui5allowPreventDefault": true, + "_ui5Bubbles": true, + "_ui5parameters": [ + { + "type": { + "text": "Event" + }, + "name": "originalEvent", + "_ui5privacy": "public", + "description": "The original `dragover` event" + }, + { + "type": { + "text": "object" + }, + "name": "source", + "_ui5privacy": "public", + "description": "The source object" + }, + { + "type": { + "text": "object" + }, + "name": "destination", + "_ui5privacy": "public", + "description": "The destination object" + } + ] + }, + { + "name": "move", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent", + "references": [ + { + "name": "TableMoveEventDetail", + "package": "@ui5/webcomponents", + "module": "dist/Table.js" + } + ] + }, + "description": "Fired when a movable list item is dropped onto a drop target.\n\n**Notes:**\n\nThe `move` event is fired only if there was a preceding `move-over` with prevented default action.\n\nIf the dragging operation is a cross-browser operation or files are moved to a potential drop target,\nthe `source` parameter will be `null`.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true, + "_ui5parameters": [ + { + "type": { + "text": "Event" + }, + "name": "originalEvent", + "_ui5privacy": "public", + "description": "The original `drop` event" + }, + { + "type": { + "text": "object" + }, + "name": "source", + "_ui5privacy": "public", + "description": "The source object" + }, + { + "type": { + "text": "object" + }, + "name": "destination", + "_ui5privacy": "public", + "description": "The destination object" + } + ] } ], "attributes": [ @@ -24608,6 +24961,21 @@ } ] }, + { + "kind": "javascript-module", + "path": "dist/TableDragAndDrop.js", + "declarations": [], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "TableDragAndDrop", + "module": "dist/TableDragAndDrop.js" + } + } + ] + }, { "kind": "javascript-module", "path": "dist/TableExtension.js", @@ -24769,7 +25137,7 @@ "text": "string" }, "default": "\"auto\"", - "description": "Defines the minimum width of the column.\n\nIf the table is in `Popin` mode, the column will move into the popin when\nwhen the minimum width does not fit anymore.", + "description": "Defines the minimum width of the column.\n\nIf the table is in `Popin` mode and the minimum width does not fit anymore,\nthe column will move into the popin.\n\n**Note:** If `minWidth` has the `auto` value, the table ensures that the column is wider than at least `3rem`.", "privacy": "public" }, { @@ -24825,7 +25193,7 @@ } }, { - "description": "Defines the minimum width of the column.\n\nIf the table is in `Popin` mode, the column will move into the popin when\nwhen the minimum width does not fit anymore.", + "description": "Defines the minimum width of the column.\n\nIf the table is in `Popin` mode and the minimum width does not fit anymore,\nthe column will move into the popin.\n\n**Note:** If `minWidth` has the `auto` value, the table ensures that the column is wider than at least `3rem`.", "name": "min-width", "default": "\"auto\"", "fieldName": "minWidth", @@ -25047,7 +25415,8 @@ }, "default": "-1", "description": "Defines the position of the row respect to the total number of rows within the table when the ui5-table-virtualizer feature is used.", - "privacy": "public" + "privacy": "public", + "_ui5since": "2.5.0" }, { "kind": "field", @@ -25068,6 +25437,17 @@ "default": "false", "description": "Defines the navigated state of the row.", "privacy": "public" + }, + { + "kind": "field", + "name": "movable", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines whether the row is movable.", + "privacy": "public", + "_ui5since": "2.6.0" } ], "attributes": [ @@ -25106,6 +25486,15 @@ "type": { "text": "boolean" } + }, + { + "description": "Defines whether the row is movable.", + "name": "movable", + "default": "false", + "fieldName": "movable", + "type": { + "text": "boolean" + } } ], "superclass": { @@ -25403,6 +25792,7 @@ "tagName": "ui5-table-virtualizer", "customElement": true, "_ui5experimental": "This component is not intended to be used in a productive enviroment. The API is under development and may be changed in the future.", + "_ui5since": "2.5.0", "_ui5privacy": "public" } ], @@ -27491,7 +27881,8 @@ }, "default": "false", "description": "Defines whether tokens are displayed on multiple lines.\n\n**Note:** The `multiLine` property is in an experimental state and is a subject to change.", - "privacy": "public" + "privacy": "public", + "_ui5since": "2.5.0" }, { "kind": "field", @@ -27501,7 +27892,8 @@ }, "default": "false", "description": "Defines whether \"Clear All\" button is present. Ensure `multiLine` is enabled, otherwise `showClearAll` will have no effect.\n\n**Note:** The `showClearAll` property is in an experimental state and is a subject to change.", - "privacy": "public" + "privacy": "public", + "_ui5since": "2.5.0" }, { "kind": "field", diff --git a/config/version-info.json b/config/version-info.json index da175148cb9..822af02a870 100644 --- a/config/version-info.json +++ b/config/version-info.json @@ -47,5 +47,6 @@ "2.2.0": "2.1.0", "2.3.0": "2.2.0", "2.4.0": "2.4.0", - "2.5.0": "2.5.0" + "2.5.0": "2.5.0", + "2.6.0": "2.6.2" } diff --git a/package.json b/package.json index a7ba0b89486..d8916e8e567 100644 --- a/package.json +++ b/package.json @@ -40,10 +40,10 @@ "@storybook/react": "8.4.5", "@storybook/react-vite": "8.4.5", "@storybook/theming": "8.4.5", - "@ui5/webcomponents": "2.5.1", - "@ui5/webcomponents-compat": "2.5.1", - "@ui5/webcomponents-fiori": "2.5.1", - "@ui5/webcomponents-icons": "2.5.1", + "@ui5/webcomponents": "2.6.2", + "@ui5/webcomponents-compat": "2.6.2", + "@ui5/webcomponents-fiori": "2.6.2", + "@ui5/webcomponents-icons": "2.6.2", "react": "^19.0.0", "react-dom": "^19.0.0", "remark-gfm": "^4.0.0", @@ -65,7 +65,7 @@ "@types/node": "^22.0.0", "@types/react": "^19.0.1", "@types/react-dom": "^19.0.1", - "@ui5/webcomponents-tools": "2.5.1", + "@ui5/webcomponents-tools": "2.6.2", "@vitejs/plugin-react": "^4.2.0", "chromatic": "^11.0.0", "cssnano": "^7.0.0", diff --git a/packages/base/package.json b/packages/base/package.json index c2d2d00a1ba..94af37308ca 100644 --- a/packages/base/package.json +++ b/packages/base/package.json @@ -31,7 +31,7 @@ }, "peerDependencies": { "@types/react": "*", - "@ui5/webcomponents-base": "~2.5.0", + "@ui5/webcomponents-base": "~2.6.2", "react": "^18 || ^19" }, "peerDependenciesMeta": { diff --git a/packages/base/src/hooks/useStylesheet.ts b/packages/base/src/hooks/useStylesheet.ts index 4a9a70b86a9..e72858a570b 100644 --- a/packages/base/src/hooks/useStylesheet.ts +++ b/packages/base/src/hooks/useStylesheet.ts @@ -1,6 +1,5 @@ 'use client'; -import type { StyleDataCSP } from '@ui5/webcomponents-base/dist/ManagedStyles.js'; import { createOrUpdateStyle, removeStyle } from '@ui5/webcomponents-base/dist/ManagedStyles.js'; import { getCurrentRuntimeIndex } from '@ui5/webcomponents-base/dist/Runtimes.js'; import { useSyncExternalStore } from 'react'; @@ -11,7 +10,7 @@ interface UseStyleSheetOptions { alwaysInject?: boolean; } -export function useStylesheet(styles: StyleDataCSP, componentName: string, options?: UseStyleSheetOptions) { +export function useStylesheet(styles: string, componentName: string, options?: UseStyleSheetOptions) { const { staticCssInjected, componentsMap } = useSyncExternalStore( StyleStore.subscribe, StyleStore.getSnapshot, diff --git a/packages/charts/package.json b/packages/charts/package.json index dcd7c0186fd..54b808dafbb 100644 --- a/packages/charts/package.json +++ b/packages/charts/package.json @@ -39,8 +39,8 @@ "recharts": "2.15.0" }, "peerDependencies": { - "@ui5/webcomponents-react": "~2.5.0", - "@ui5/webcomponents-react-base": "~2.5.0", + "@ui5/webcomponents-react": "~2.6.0", + "@ui5/webcomponents-react-base": "~2.6.0", "react": "^18 || ^19" }, "publishConfig": { diff --git a/packages/cli/src/util/referenceResolver.ts b/packages/cli/src/util/referenceResolver.ts index fd31a2293d7..7b3df483589 100644 --- a/packages/cli/src/util/referenceResolver.ts +++ b/packages/cli/src/util/referenceResolver.ts @@ -18,6 +18,9 @@ function resolveReferenceImport(reference: CEM.Reference | undefined): Reference // find module const resolvedModule = customElementManifest.modules.find((mod) => mod.path === modulePath); + if (!resolvedModule) { + console.warn('Resolved Module not found for:', reference.name, 'in', pkgName); + } if (resolvedModule) { const exportDeclaration = resolvedModule.exports?.find((exp) => exp.declaration.name === name); diff --git a/packages/compat/package.json b/packages/compat/package.json index 626bdd3c87f..5a903ca4387 100644 --- a/packages/compat/package.json +++ b/packages/compat/package.json @@ -41,8 +41,8 @@ "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", - "@ui5/webcomponents-compat": "~2.5.0", - "@ui5/webcomponents-react": "~2.5.0", + "@ui5/webcomponents-compat": "~2.6.2", + "@ui5/webcomponents-react": "~2.6.0", "react": "^18 || ^19", "react-dom": "^18 || ^19" }, diff --git a/packages/compat/src/components/Toolbar/OverflowPopover.tsx b/packages/compat/src/components/Toolbar/OverflowPopover.tsx index 2272a627849..02c4f332d42 100644 --- a/packages/compat/src/components/Toolbar/OverflowPopover.tsx +++ b/packages/compat/src/components/Toolbar/OverflowPopover.tsx @@ -77,6 +77,7 @@ export const OverflowPopover: FC = (props: OverflowPopover const handleBeforeOpen = () => { if (toggleBtnRef.current) { + //@ts-expect-error: for some reason these optional attributes are mandatory which is not expected toggleBtnRef.current.accessibilityAttributes = { expanded: true, hasPopup: 'menu' }; } }; @@ -86,6 +87,7 @@ export const OverflowPopover: FC = (props: OverflowPopover const handleClose = (e) => { if (toggleBtnRef.current) { + //@ts-expect-error: for some reason these optional attributes are mandatory which is not expected toggleBtnRef.current.accessibilityAttributes = { expanded: false, hasPopup: 'menu' }; } stopPropagation(e); @@ -96,6 +98,7 @@ export const OverflowPopover: FC = (props: OverflowPopover const tagName = getUi5TagWithSuffix('ui5-toggle-button'); void customElements.whenDefined(tagName).then(() => { if (toggleBtnRef.current) { + //@ts-expect-error: for some reason these optional attributes are mandatory which is not expected toggleBtnRef.current.accessibilityAttributes = { expanded: pressed, hasPopup: 'menu' }; } }); diff --git a/packages/cypress-commands/package.json b/packages/cypress-commands/package.json index b060db6417c..0f0def59066 100644 --- a/packages/cypress-commands/package.json +++ b/packages/cypress-commands/package.json @@ -23,8 +23,8 @@ "clean": "rimraf dist api-commands.json api-queries.json" }, "peerDependencies": { - "@ui5/webcomponents": "~2.5.0", - "@ui5/webcomponents-base": "~2.5.0", + "@ui5/webcomponents": "~2.6.0", + "@ui5/webcomponents-base": "~2.6.0", "cypress": "^12.0.0 || ^13.0.0" }, "peerDependenciesMeta": { diff --git a/packages/main/package.json b/packages/main/package.json index 94ab9654397..cd1014d8f2b 100644 --- a/packages/main/package.json +++ b/packages/main/package.json @@ -57,10 +57,10 @@ "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", - "@ui5/webcomponents": "~2.5.0", - "@ui5/webcomponents-base": "~2.5.0", - "@ui5/webcomponents-fiori": "~2.5.0", - "@ui5/webcomponents-icons": "~2.5.0", + "@ui5/webcomponents": "~2.6.2", + "@ui5/webcomponents-base": "~2.6.2", + "@ui5/webcomponents-fiori": "~2.6.2", + "@ui5/webcomponents-icons": "~2.6.2", "react": "^18 || ^19", "react-dom": "^18 || ^19" }, diff --git a/packages/main/src/components/ExpandableText/ExpandableText.cy.tsx b/packages/main/src/components/ExpandableText/ExpandableText.cy.tsx deleted file mode 100644 index d8024d88250..00000000000 --- a/packages/main/src/components/ExpandableText/ExpandableText.cy.tsx +++ /dev/null @@ -1,83 +0,0 @@ -import { ExpandableText } from './index.js'; -import { cypressPassThroughTestsFactory } from '@/cypress/support/utils'; - -const longText = ` If renderWhitespace is set to true, there will be thirteen white spaces in front and after this sentence. Lorem ipsum dolor st amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat`; - -function getText(text) { - cy.findByTestId('et').should('be.visible').and('have.text', text); -} - -describe('ExpandableText', () => { - it('maxCharacters', () => { - [false, true].forEach((renderWhitespace) => { - cy.mount( - - {longText} - - ); - getText( - renderWhitespace - ? ' If renderWhitespace is set to true, there will be thirteen white spaces in front and af… Show More' - : 'If renderWhitespace is set to true, there will be thirteen white spaces in front and after this sent… Show More' - ); - cy.mount( - - {longText} - - ); - getText( - renderWhitespace - ? ' If renderWhitespace is set to true, there will be thirteen white spaces in front and after this sentence. Lorem ipsum dolor st amet, consetetur sadipscing elitr, sed diam nonu… Show More' - : 'If renderWhitespace is set to true, there will be thirteen white spaces in front and after this sentence. Lorem ipsum dolor st amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt… Show More' - ); - - cy.mount( - - {longText} - - ); - getText( - ' If renderWhitespace is set to true, there will be thirteen white spaces in front and after this sentence. Lorem ipsum dolor st amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat' - ); - }); - }); - - it('expand/collapse', () => { - cy.mount({longText}); - cy.findByText('Show More').click(); - getText( - ' If renderWhitespace is set to true, there will be thirteen white spaces in front and after this sentence. Lorem ipsum dolor st amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat Show Less' - ); - cy.findByText('Show Less').click(); - getText( - 'If renderWhitespace is set to true, there will be thirteen white spaces in front and after this sent… Show More' - ); - }); - - it('showOverflowInPopover', () => { - cy.mount( - - {longText} - - ); - cy.findByText('Show More').should('have.attr', 'accessible-name', 'Show the full text').click(); - - getText( - 'If renderWhitespace is set to true, there will be thirteen white spaces in front and after this sent… Show Less' - ); - cy.get('[ui5-responsive-popover]').should('have.attr', 'open'); - cy.findByText('Show Less').should('have.attr', 'accessible-name', 'Close the popover').realClick(); - cy.realPress('Escape'); - getText( - 'If renderWhitespace is set to true, there will be thirteen white spaces in front and after this sent… Show More' - ); - cy.findByText('Show More').should('have.attr', 'accessible-name', 'Show the full text'); - }); - - cypressPassThroughTestsFactory(ExpandableText); -}); diff --git a/packages/main/src/components/ExpandableText/ExpandableText.module.css b/packages/main/src/components/ExpandableText/ExpandableText.module.css deleted file mode 100644 index 049f437f004..00000000000 --- a/packages/main/src/components/ExpandableText/ExpandableText.module.css +++ /dev/null @@ -1,31 +0,0 @@ -.expandableText { - font-family: var(--sapFontFamily); - font-size: var(--sapFontSize); - font-weight: normal; - color: var(--sapTextColor); - display: inline-block; - box-sizing: border-box; - white-space: pre-line; - word-wrap: break-word; - max-width: 100%; -} - -.text { - display: inline; -} - -.renderWhitespace { - white-space: pre-wrap; -} - -.ellipsis { - word-spacing: 0.125rem; -} - -.popover { - max-width: 30rem; -} - -.popover::part(content) { - padding: 1rem; -} diff --git a/packages/main/src/components/ExpandableText/ExpandableText.stories.tsx b/packages/main/src/components/ExpandableText/ExpandableText.stories.tsx deleted file mode 100644 index a638dcc6fe6..00000000000 --- a/packages/main/src/components/ExpandableText/ExpandableText.stories.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import type { Meta, StoryObj } from '@storybook/react'; -import { ExpandableText } from './index'; - -const meta = { - title: 'Data Display / ExpandableText', - component: ExpandableText, - argTypes: { - children: { - control: 'text' - } - }, - args: { - children: ` If "renderWhitespace" is set to true, there will be thirteen white spaces in front and after this sentence. Lorem ipsum dolor st amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat`, - maxCharacters: 100 - } -} satisfies Meta; - -export default meta; -type Story = StoryObj; - -export const Default: Story = {}; diff --git a/packages/main/src/components/ExpandableText/index.tsx b/packages/main/src/components/ExpandableText/index.tsx deleted file mode 100644 index 4473f2023e8..00000000000 --- a/packages/main/src/components/ExpandableText/index.tsx +++ /dev/null @@ -1,107 +0,0 @@ -'use client'; - -import LinkAccessibleRole from '@ui5/webcomponents/dist/types/LinkAccessibleRole.js'; -import { useI18nBundle, useStylesheet } from '@ui5/webcomponents-react-base'; -import { clsx } from 'clsx'; -import { forwardRef, useId, useState } from 'react'; -import { CLOSE_POPOVER, SHOW_FULL_TEXT, SHOW_LESS, SHOW_MORE } from '../../i18n/i18n-defaults.js'; -import type { CommonProps } from '../../types/index.js'; -import { Link } from '../../webComponents/index.js'; -import { ResponsivePopover } from '../../webComponents/ResponsivePopover/index.js'; -import type { TextPropTypes } from '../../webComponents/Text/index.js'; -import { Text } from '../../webComponents/Text/index.js'; -import { classNames, styleData } from './ExpandableText.module.css.js'; - -export interface ExpandableTextPropTypes extends Omit, CommonProps { - /** - * Determines the text to be displayed. - */ - children?: string; - /** - * Specifies the maximum number of characters from the beginning of the text field that are shown initially. - * - * @default 100 - */ - maxCharacters?: number; - /** - * Determines if the full text should be displayed inside a `ResponsivePopover` or in-place. - */ - showOverflowInPopover?: boolean; - /** - * Defines how white-space inside Text is handled. If set to true, sequences of white space are preserved. - */ - renderWhitespace?: boolean; -} - -/** - * The `ExpandableText` component can be used to display long texts inside a table, list or form. - * - * Initially, only the first characters from the text are shown with a "Show More" link which allows the full text to be displayed. The `showOverflowInPopover` property determines if the full text will be displayed expanded in place (default) or in a popover (`showOverflowInPopover: true`). If the text is expanded a "Show Less" link is displayed, which allows collapsing the text field. - * - * @since 1.23.0 - */ -const ExpandableText = forwardRef((props, ref) => { - const { children, showOverflowInPopover, maxCharacters = 100, renderWhitespace, className, ...rest } = props; - - useStylesheet(styleData, ExpandableText.displayName); - - const [collapsed, setCollapsed] = useState(true); - const [popoverOpen, setPopoverOpen] = useState(false); - const uniqueId = useId(); - const i18nBundle = useI18nBundle('@ui5/webcomponents-react'); - const trimmedChildren = renderWhitespace ? children : children?.replace(/\s+/g, ' ').trim(); - const isOverflow = trimmedChildren?.length >= maxCharacters; - const strippedChildren = - isOverflow && (collapsed || showOverflowInPopover) ? trimmedChildren?.slice(0, maxCharacters) : children; - - const handleClick = () => { - if (showOverflowInPopover) { - setPopoverOpen((prev) => !prev); - } - setCollapsed((prev) => !prev); - }; - - const closePopover = () => { - setCollapsed(true); - setPopoverOpen(false); - }; - - return ( - <> - - - {strippedChildren} - - {isOverflow && ( - <> - {showOverflowInPopover || collapsed ? '… ' : ' '} - - {collapsed ? i18nBundle.getText(SHOW_MORE) : i18nBundle.getText(SHOW_LESS)} - - - )} - - {showOverflowInPopover && popoverOpen && ( - - {children} - - )} - - ); -}); - -ExpandableText.displayName = 'ExpandableText'; - -export { ExpandableText }; diff --git a/packages/main/src/components/ObjectPageAnchorBar/index.tsx b/packages/main/src/components/ObjectPageAnchorBar/index.tsx index 9ca867afd83..3ead7980716 100644 --- a/packages/main/src/components/ObjectPageAnchorBar/index.tsx +++ b/packages/main/src/components/ObjectPageAnchorBar/index.tsx @@ -105,6 +105,7 @@ const ObjectPageAnchorBar = forwardRef { if (showHideHeaderBtn) { + //@ts-expect-error: for some reason these optional attributes are mandatory which is not expected showHideHeaderBtn.accessibilityAttributes = { expanded: !!headerContentVisible }; } }); diff --git a/packages/main/src/components/ThemeProvider/index.tsx b/packages/main/src/components/ThemeProvider/index.tsx index 37c57d89a3d..89628e9c8d6 100644 --- a/packages/main/src/components/ThemeProvider/index.tsx +++ b/packages/main/src/components/ThemeProvider/index.tsx @@ -3,7 +3,6 @@ import { getTheme } from '@ui5/webcomponents-base/dist/config/Theme.js'; import { getScopedVarName } from '@ui5/webcomponents-base/dist/CustomElementsScope.js'; import { attachLanguageChange, detachLanguageChange } from '@ui5/webcomponents-base/dist/locale/languageChange.js'; -import type { StyleDataCSP } from '@ui5/webcomponents-base/dist/ManagedStyles.js'; import { attachThemeLoaded, detachThemeLoaded } from '@ui5/webcomponents-base/dist/theming/ThemeLoaded.js'; import { I18nStore, StyleStore, useIsomorphicLayoutEffect, useStylesheet } from '@ui5/webcomponents-react-base'; import type { FC, ReactNode } from 'react'; @@ -13,13 +12,6 @@ import { styleData } from './ThemeProvider.css.js'; let _versionInfoInjected = false; -function ThemeProviderStyles() { - const uniqueId = useId(); - useStylesheet(styleData, `${ThemeProvider.displayName}-${uniqueId}`); - useStylesheet(ui5WcVariablesStyleData, `${ThemeProvider.displayName}-css-vars-${uniqueId}`, { alwaysInject: true }); - return null; -} - const InternalUI5WCVVarNames = { '--_ui5wcr_card_header_focus_offset': `var(${getScopedVarName('--_ui5_card_header_focus_offset')})`, '--_ui5wcr_card_header_focus_border': `var(${getScopedVarName('--_ui5_card_header_focus_border')})`, @@ -28,15 +20,18 @@ const InternalUI5WCVVarNames = { '--_ui5wcr_popup_header_font_family': `var(${getScopedVarName('--_ui5_popup_header_font_family')})` }; -const ui5WcVariablesStyleData: StyleDataCSP = { - content: `:root {${Object.entries(InternalUI5WCVVarNames) - .map(([key, value]) => { - return `${key}: ${value};`; - }) - .join(' ')}}`, - packageName: '@ui5/webcomponents-react', - fileName: 'ThemeProvider' -}; +const ui5WcVariablesStyle = `:root {${Object.entries(InternalUI5WCVVarNames) + .map(([key, value]) => { + return `${key}: ${value};`; + }) + .join(' ')}}`; + +function ThemeProviderStyles() { + const uniqueId = useId(); + useStylesheet(styleData, `${ThemeProvider.displayName}-${uniqueId}`); + useStylesheet(ui5WcVariablesStyle, `${ThemeProvider.displayName}-css-vars-${uniqueId}`, { alwaysInject: true }); + return null; +} export interface ThemeProviderPropTypes { children: ReactNode; diff --git a/packages/main/src/components/VariantManagement/types.ts b/packages/main/src/components/VariantManagement/types.ts index 31fcf9a6ae3..f4158f7d264 100644 --- a/packages/main/src/components/VariantManagement/types.ts +++ b/packages/main/src/components/VariantManagement/types.ts @@ -1,5 +1,5 @@ -import type { DialogBeforeCloseEventDetail } from '@ui5/webcomponents/dist/Dialog.js'; import type { ListSelectionChangeEventDetail } from '@ui5/webcomponents/dist/List.js'; +import type { PopupBeforeCloseEventDetail } from '@ui5/webcomponents/dist/Popup.js'; import type { ReactNode } from 'react'; import type { SelectedVariant } from '../../internal/VariantManagementContext.js'; import type { CommonProps, Ui5CustomEvent } from '../../types/index.js'; @@ -172,7 +172,7 @@ export interface VariantManagementPropTypes extends Omit; nativeDetail?: number; - } & Partial; + } & Partial; } ) => void; /** @@ -184,7 +184,7 @@ export interface VariantManagementPropTypes extends Omit>[0] ) & { detail: SelectedVariant & { nativeDetail?: number }; - isInvalid?: boolean & Partial; + isInvalid?: boolean & Partial; } ) => void; } diff --git a/packages/main/src/index.ts b/packages/main/src/index.ts index 872627fe8ae..65b1d85d1ca 100644 --- a/packages/main/src/index.ts +++ b/packages/main/src/index.ts @@ -9,7 +9,6 @@ export { ObjectPageHeader } from './components/ObjectPageHeader/index.js'; export type { ObjectPageHeaderPropTypes } from './components/ObjectPageHeader/index.js'; export { ObjectPageTitle } from './components/ObjectPageTitle/index.js'; export type { ObjectPageTitlePropTypes } from './components/ObjectPageTitle/index.js'; -export * from './components/ExpandableText/index.js'; export * from './components/FilterBar/index.js'; export * from './components/FilterGroupItem/index.js'; export * from './components/FlexBox/index.js'; diff --git a/packages/main/src/internal/withWebComponent.tsx b/packages/main/src/internal/withWebComponent.tsx index 8f1a257c62a..e56debd1649 100644 --- a/packages/main/src/internal/withWebComponent.tsx +++ b/packages/main/src/internal/withWebComponent.tsx @@ -192,6 +192,31 @@ export const withWebComponent = , RefType = Ui return null; } + // compatibility wrapper for ExpandableText - remove in v3 + if (tagName === 'ui5-expandable-text') { + const renderWhiteSpace = nonWebComponentRelatedProps['renderWhitespace'] ? true : undefined; + // @ts-expect-error: overflowMode is available + const { ['overflow-mode']: overflowMode, text, ...restRegularProps } = regularProps; + const showOverflowInPopover = nonWebComponentRelatedProps['showOverflowInPopover']; + return ( + + {slots} + + ); + } + return ( ( 'ui5-dynamic-side-content', - ['sideContentFallDown', 'sideContentPosition', 'sideContentVisibility'], + ['accessibilityAttributes', 'sideContentFallDown', 'sideContentPosition', 'sideContentVisibility'], ['equalSplit', 'hideMainContent', 'hideSideContent'], ['sideContent'], ['layout-change'] diff --git a/packages/main/src/webComponents/ExpandableText/ExpandableText.cy.tsx b/packages/main/src/webComponents/ExpandableText/ExpandableText.cy.tsx new file mode 100644 index 00000000000..e123b0f05d6 --- /dev/null +++ b/packages/main/src/webComponents/ExpandableText/ExpandableText.cy.tsx @@ -0,0 +1,42 @@ +import { ExpandableText } from './index.js'; + +const longText = ` If renderWhitespace is set to true, there will be thirteen white spaces in front and after this sentence. Lorem ipsum dolor st amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat`; + +describe('ExpandableText', () => { + it('children as text', () => { + cy.mount({longText}); + cy.get('[ui5-text]').should('have.text', longText).and('be.visible'); + cy.mount( + + Short text + + ); + cy.get('[ui5-text]').should('have.text', longText).and('be.visible'); + }); + + it('showOverflowInPopover', () => { + cy.mount(); + cy.get('[ui5-responsive-popover]').should('not.exist'); + + cy.mount(); + cy.get('[ui5-responsive-popover]').should('exist'); + + cy.mount(); + cy.get('[ui5-responsive-popover]').should('not.exist'); + + cy.mount( + + ); + cy.get('[ui5-responsive-popover]').should('exist'); + }); + + it('renderWhiteSpace', () => { + cy.mount(); + cy.get('[ui5-expandable-text]').should('not.have.attr', 'data-_render-whitespace'); + cy.get('[ui5-text]').should('have.css', 'white-space', 'normal'); + + cy.mount(); + cy.get('[ui5-expandable-text]').should('have.attr', 'data-_render-whitespace'); + cy.get('[ui5-text]').should('have.css', 'white-space', 'pre-wrap'); + }); +}); diff --git a/packages/main/src/components/ExpandableText/ExpandableText.mdx b/packages/main/src/webComponents/ExpandableText/ExpandableText.mdx similarity index 76% rename from packages/main/src/components/ExpandableText/ExpandableText.mdx rename to packages/main/src/webComponents/ExpandableText/ExpandableText.mdx index 6c5d43cc8d5..b96cd5f807c 100644 --- a/packages/main/src/components/ExpandableText/ExpandableText.mdx +++ b/packages/main/src/webComponents/ExpandableText/ExpandableText.mdx @@ -1,10 +1,10 @@ -import { ControlsWithNote, DocsHeader, Footer } from '@sb/components'; import { Canvas, Meta } from '@storybook/blocks'; -import * as ComponentStories from './ExpandableText.stories'; +import { ControlsWithNote, DocsHeader, Footer } from '@sb/components'; +import * as ComponentStories from './ExpandableText.stories.tsx'; - +
diff --git a/packages/main/src/webComponents/ExpandableText/ExpandableText.stories.tsx b/packages/main/src/webComponents/ExpandableText/ExpandableText.stories.tsx new file mode 100644 index 00000000000..817838963ea --- /dev/null +++ b/packages/main/src/webComponents/ExpandableText/ExpandableText.stories.tsx @@ -0,0 +1,29 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import ExpandableTextOverflowMode from '@ui5/webcomponents/dist/types/ExpandableTextOverflowMode.js'; +import TextEmptyIndicatorMode from '@ui5/webcomponents/dist/types/TextEmptyIndicatorMode.js'; +import { ExpandableText } from './index.js'; + +const meta = { + title: 'Data Display / ExpandableText', + component: ExpandableText, + argTypes: { + text: { control: 'text' }, + maxCharacters: { control: 'number' }, + children: { control: { disable: true } }, + showOverflowInPopover: { control: { disable: true } } + //todo: uncomment once white-space can be applied w/o addCustomCSS + // renderWhitespace: { control: { disable: true } } + }, + args: { + emptyIndicatorMode: TextEmptyIndicatorMode.Off, + overflowMode: ExpandableTextOverflowMode.InPlace, + text: ` If "renderWhitespace" is set to true, there will be thirteen white spaces in front and after this sentence. Lorem ipsum dolor st amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat`, + maxCharacters: 100 + }, + tags: ['package:@ui5/webcomponents'] +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +export const Default: Story = {}; diff --git a/packages/main/src/webComponents/ExpandableText/index.tsx b/packages/main/src/webComponents/ExpandableText/index.tsx new file mode 100644 index 00000000000..a159f564979 --- /dev/null +++ b/packages/main/src/webComponents/ExpandableText/index.tsx @@ -0,0 +1,106 @@ +'use client'; + +import '@ui5/webcomponents/dist/ExpandableText.js'; +import type ExpandableTextOverflowMode from '@ui5/webcomponents/dist/types/ExpandableTextOverflowMode.js'; +import type TextEmptyIndicatorMode from '@ui5/webcomponents/dist/types/TextEmptyIndicatorMode.js'; +import { addCustomCSSWithScoping } from '../../internal/addCustomCSSWithScoping.js'; +import { withWebComponent } from '../../internal/withWebComponent.js'; +import type { CommonProps, Ui5DomRef } from '../../types/index.js'; + +//todo: remove once ExpandableText supports setting white-space +addCustomCSSWithScoping( + 'ui5-expandable-text', + ` +:host([data-_render-whitespace]) [ui5-text]{ +white-space: pre-wrap; +}` +); + +interface DeprecatedExpandableTextProps { + /** + * Text of the component. + * + * @deprecated: Please use `text` instead. + */ + children?: string; + /** + * Determines if the full text should be displayed inside a `ResponsivePopover` or in-place. + * + * @deprecated: Please use `overflowMode` instead. + */ + showOverflowInPopover?: boolean; + //todo: deprecate once white-space can be applied w/o addCustomCSS + /** + * Defines how white-space inside Text is handled. If set to true, sequences of white space are preserved. + */ + renderWhitespace?: boolean; +} + +interface ExpandableTextAttributes { + /** + * Specifies if an empty indicator should be displayed when there is no text. + * @default "Off" + */ + emptyIndicatorMode?: TextEmptyIndicatorMode | keyof typeof TextEmptyIndicatorMode; + + /** + * Maximum number of characters to be displayed initially. If the text length exceeds this limit, the text will be truncated with an ellipsis, and the "More" link will be displayed. + * @default 100 + */ + maxCharacters?: number; + + /** + * Determines how the full text will be displayed. + * @default "InPlace" + */ + overflowMode?: ExpandableTextOverflowMode | keyof typeof ExpandableTextOverflowMode; + + /** + * Text of the component. + * @default undefined + */ + text?: string | undefined; +} + +interface ExpandableTextDomRef extends Required, Ui5DomRef {} + +interface ExpandableTextPropTypes + extends ExpandableTextAttributes, + Omit, + DeprecatedExpandableTextProps {} + +/** + * The `ExpandableText` component allows displaying a large body of text in a small space. It provides an "expand/collapse" functionality, which shows/hides potentially truncated text. + * + * ### Usage + * + * #### When to use: + * - To accommodate long texts in limited space, for example in list items, table cell texts, or forms + * + * #### When not to use: + * - The content is critical for the user. In this case use short descriptions that can fit in + * - Strive to provide short and meaningful texts to avoid excessive number of "Show More" links on the page + * + * ### Responsive Behavior + * + * On phones, if the component is configured to display the full text in a popover, the popover will appear in full screen. + * + * __Note:__ For compatibility reasons, `children`, `showOverflowInPopover`, and `renderWhitespace` are added by the UI5 Web Components for React wrapper and are not part of the underlying web component (`ui5-expandable-text`). + * These props will be removed in the next release; see their deprecation notices for alternatives. + * + * __Note__: This is a UI5 Web Component! [Repository](https://github.com/SAP/ui5-webcomponents) | [Documentation](https://sap.github.io/ui5-webcomponents/) + * + * @since [2.6.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.6.0) of __@ui5/webcomponents__. + */ +const ExpandableText = withWebComponent( + 'ui5-expandable-text', + ['emptyIndicatorMode', 'maxCharacters', 'overflowMode', 'text'], + [], + [], + [] +); + +ExpandableText.displayName = 'ExpandableText'; + +export { ExpandableText }; +export type { ExpandableTextDomRef, ExpandableTextPropTypes }; diff --git a/packages/main/src/webComponents/MultiComboBox/index.tsx b/packages/main/src/webComponents/MultiComboBox/index.tsx index 5eaa2fd8e24..a53c441ecf3 100644 --- a/packages/main/src/webComponents/MultiComboBox/index.tsx +++ b/packages/main/src/webComponents/MultiComboBox/index.tsx @@ -204,7 +204,7 @@ interface MultiComboBoxPropTypes * * | cancelable | bubbles | * | :--------: | :-----: | - * | ❌|✅| + * | ❌|❌| */ onOpen?: (event: Ui5CustomEvent) => void; diff --git a/packages/main/src/webComponents/NavigationLayout/index.tsx b/packages/main/src/webComponents/NavigationLayout/index.tsx index c83fd0fc6d6..63bcb9d8d0d 100644 --- a/packages/main/src/webComponents/NavigationLayout/index.tsx +++ b/packages/main/src/webComponents/NavigationLayout/index.tsx @@ -1,19 +1,26 @@ 'use client'; import '@ui5/webcomponents-fiori/dist/NavigationLayout.js'; +import type NavigationLayoutMode from '@ui5/webcomponents-fiori/dist/types/NavigationLayoutMode.js'; import type { ReactNode } from 'react'; import { withWebComponent } from '../../internal/withWebComponent.js'; import type { CommonProps, Ui5DomRef, UI5WCSlotsNode } from '../../types/index.js'; interface NavigationLayoutAttributes { /** - * Indicates whether the side navigation is collapsed. - * @default false + * Specifies the navigation layout mode. + * @default "Auto" */ - sideCollapsed?: boolean; + mode?: NavigationLayoutMode | keyof typeof NavigationLayoutMode; } -interface NavigationLayoutDomRef extends Required, Ui5DomRef {} +interface NavigationLayoutDomRef extends Required, Ui5DomRef { + /** + * Gets whether the side navigation is collapsed. + * @returns {boolean} + */ + isSideCollapsed: () => boolean; +} interface NavigationLayoutPropTypes extends NavigationLayoutAttributes, @@ -56,9 +63,10 @@ interface NavigationLayoutPropTypes * * ### Responsive Behavior * - * On desktop and tablet devices, the side navigation remains visible and can - * be expanded or collapsed using the `sideCollapsed` property. On phone devices, the side navigation - * is hidden by default but can be displayed using the same `sideCollapsed` property. + * On desktop and tablet devices, the side navigation is visible + * by default and can be expanded or collapsed using the `mode` property. + * On phone devices, the side navigation is hidden by default and can + * be displayed using the `mode` property. * * * @@ -68,8 +76,8 @@ interface NavigationLayoutPropTypes */ const NavigationLayout = withWebComponent( 'ui5-navigation-layout', + ['mode'], [], - ['sideCollapsed'], ['header', 'sideContent'], [] ); diff --git a/packages/main/src/webComponents/RatingIndicator/index.tsx b/packages/main/src/webComponents/RatingIndicator/index.tsx index a93e6efe994..800fabc436a 100644 --- a/packages/main/src/webComponents/RatingIndicator/index.tsx +++ b/packages/main/src/webComponents/RatingIndicator/index.tsx @@ -1,6 +1,7 @@ 'use client'; import '@ui5/webcomponents/dist/RatingIndicator.js'; +import type RatingIndicatorSize from '@ui5/webcomponents/dist/types/RatingIndicatorSize.js'; import { withWebComponent } from '../../internal/withWebComponent.js'; import type { CommonProps, Ui5CustomEvent, Ui5DomRef } from '../../types/index.js'; @@ -50,6 +51,14 @@ interface RatingIndicatorAttributes { */ required?: boolean; + /** + * Defines the size of the component. + * + * **Note:** Available since [v2.6.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.6.0) of **@ui5/webcomponents**. + * @default "M" + */ + size?: RatingIndicatorSize | keyof typeof RatingIndicatorSize; + /** * Defines the tooltip of the component. * @@ -115,7 +124,7 @@ interface RatingIndicatorPropTypes */ const RatingIndicator = withWebComponent( 'ui5-rating-indicator', - ['accessibleName', 'accessibleNameRef', 'max', 'tooltip', 'value'], + ['accessibleName', 'accessibleNameRef', 'max', 'size', 'tooltip', 'value'], ['disabled', 'readonly', 'required'], [], ['change'] diff --git a/packages/main/src/webComponents/SplitButton/index.tsx b/packages/main/src/webComponents/SplitButton/index.tsx index 31a8abdc505..2061a2b5957 100644 --- a/packages/main/src/webComponents/SplitButton/index.tsx +++ b/packages/main/src/webComponents/SplitButton/index.tsx @@ -41,7 +41,7 @@ interface SplitButtonAttributes { * * Example: * - * See all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html). + * See all available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html). * @default undefined */ icon?: string | undefined; diff --git a/packages/main/src/webComponents/StepInput/index.tsx b/packages/main/src/webComponents/StepInput/index.tsx index 8cd0bf6cacf..3ec32944ee5 100644 --- a/packages/main/src/webComponents/StepInput/index.tsx +++ b/packages/main/src/webComponents/StepInput/index.tsx @@ -96,7 +96,7 @@ interface StepInputDomRef extends Required, Ui5DomRef {} interface StepInputPropTypes extends StepInputAttributes, - Omit { + Omit { /** * Defines the value state message that will be displayed as pop up under the component. * @@ -121,6 +121,19 @@ interface StepInputPropTypes */ onChange?: (event: Ui5CustomEvent) => void; + /** + * Fired when the value of the component changes at each keystroke. + * + * **Note:** Call `event.preventDefault()` inside the handler of this event to prevent its default action/s. + * + * **Note:** Available since [v2.6.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.6.0) of **@ui5/webcomponents**. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ✅|✅| + */ + onInput?: (event: Ui5CustomEvent) => void; + /** * Fired before the value state of the component is updated internally. * The event is preventable, meaning that if it's default action is @@ -186,7 +199,7 @@ const StepInput = withWebComponent( ], ['disabled', 'readonly', 'required'], ['valueStateMessage'], - ['change', 'value-state-change'] + ['change', 'input', 'value-state-change'] ); StepInput.displayName = 'StepInput'; diff --git a/packages/main/src/webComponents/Table/index.tsx b/packages/main/src/webComponents/Table/index.tsx index f480e15fa3f..1f3632ee683 100644 --- a/packages/main/src/webComponents/Table/index.tsx +++ b/packages/main/src/webComponents/Table/index.tsx @@ -1,7 +1,7 @@ 'use client'; import '@ui5/webcomponents/dist/Table.js'; -import type { TableRowClickEventDetail } from '@ui5/webcomponents/dist/Table.js'; +import type { TableMoveEventDetail, TableRowClickEventDetail } from '@ui5/webcomponents/dist/Table.js'; import type TableOverflowMode from '@ui5/webcomponents/dist/types/TableOverflowMode.js'; import type { ReactNode } from 'react'; import { withWebComponent } from '../../internal/withWebComponent.js'; @@ -57,7 +57,10 @@ interface TableDomRef extends Required, Ui5DomRef {} interface TablePropTypes extends TableAttributes, - Omit { + Omit< + CommonProps, + keyof TableAttributes | 'children' | 'features' | 'headerRow' | 'nodata' | 'onMove' | 'onMoveOver' | 'onRowClick' + > { /** * Defines the rows of the component. * @@ -99,6 +102,38 @@ interface TablePropTypes * Learn more about it [here](https://sap.github.io/ui5-webcomponents-react/v2/?path=/docs/knowledge-base-handling-slots--docs). */ nodata?: UI5WCSlotsNode; + /** + * Fired when a movable list item is dropped onto a drop target. + * + * **Notes:** + * + * The `move` event is fired only if there was a preceding `move-over` with prevented default action. + * + * If the dragging operation is a cross-browser operation or files are moved to a potential drop target, + * the `source` parameter will be `null`. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|✅| + */ + onMove?: (event: Ui5CustomEvent) => void; + + /** + * Fired when a movable item is moved over a potential drop target during a dragging operation. + * + * If the new position is valid, prevent the default action of the event using `preventDefault()`. + * + * **Note:** If the dragging operation is a cross-browser operation or files are moved to a potential drop target, + * the `source` parameter will be `null`. + * + * **Note:** Call `event.preventDefault()` inside the handler of this event to prevent its default action/s. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ✅|✅| + */ + onMoveOver?: (event: Ui5CustomEvent) => void; + /** * Fired when an interactive row is clicked. * @@ -188,7 +223,7 @@ const Table = withWebComponent( ['accessibleName', 'accessibleNameRef', 'loadingDelay', 'noDataText', 'overflowMode'], ['loading'], ['features', 'headerRow', 'nodata'], - ['row-click'] + ['move-over', 'move', 'row-click'] ); Table.displayName = 'Table'; diff --git a/packages/main/src/webComponents/TableHeaderCell/index.tsx b/packages/main/src/webComponents/TableHeaderCell/index.tsx index 000ee21a203..e1397e47d9f 100644 --- a/packages/main/src/webComponents/TableHeaderCell/index.tsx +++ b/packages/main/src/webComponents/TableHeaderCell/index.tsx @@ -33,8 +33,10 @@ interface TableHeaderCellAttributes { /** * Defines the minimum width of the column. * - * If the table is in `Popin` mode, the column will move into the popin when - * when the minimum width does not fit anymore. + * If the table is in `Popin` mode and the minimum width does not fit anymore, + * the column will move into the popin. + * + * **Note:** If `minWidth` has the `auto` value, the table ensures that the column is wider than at least `3rem`. * @default "auto" */ minWidth?: string; diff --git a/packages/main/src/webComponents/TableRow/index.tsx b/packages/main/src/webComponents/TableRow/index.tsx index 485f23e979c..ae9329fd8b4 100644 --- a/packages/main/src/webComponents/TableRow/index.tsx +++ b/packages/main/src/webComponents/TableRow/index.tsx @@ -12,6 +12,14 @@ interface TableRowAttributes { */ interactive?: boolean; + /** + * Defines whether the row is movable. + * + * **Note:** Available since [v2.6.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.6.0) of **@ui5/webcomponents**. + * @default false + */ + movable?: boolean; + /** * Defines the navigated state of the row. * @default false @@ -20,6 +28,8 @@ interface TableRowAttributes { /** * Defines the position of the row respect to the total number of rows within the table when the ui5-table-virtualizer feature is used. + * + * **Note:** Available since [v2.5.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.5.0) of **@ui5/webcomponents**. * @default -1 */ position?: number; @@ -54,7 +64,7 @@ interface TableRowPropTypes extends TableRowAttributes, Omit( 'ui5-table-row', ['position', 'rowKey'], - ['interactive', 'navigated'], + ['interactive', 'movable', 'navigated'], [], [] ); diff --git a/packages/main/src/webComponents/TableVirtualizer/index.tsx b/packages/main/src/webComponents/TableVirtualizer/index.tsx index df94ae8d2a2..99d8deca59f 100644 --- a/packages/main/src/webComponents/TableVirtualizer/index.tsx +++ b/packages/main/src/webComponents/TableVirtualizer/index.tsx @@ -62,6 +62,8 @@ interface TableVirtualizerPropTypes * * * __Note__: This is a UI5 Web Component! [Repository](https://github.com/SAP/ui5-webcomponents) | [Documentation](https://sap.github.io/ui5-webcomponents/) + * + * @since [2.5.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.5.0) of __@ui5/webcomponents__. * @experimental This component is not intended to be used in a productive enviroment. The API is under development and may be changed in the future. */ const TableVirtualizer = withWebComponent( diff --git a/packages/main/src/webComponents/Tokenizer/index.tsx b/packages/main/src/webComponents/Tokenizer/index.tsx index 63dd5581a7b..1e4d59a2d9f 100644 --- a/packages/main/src/webComponents/Tokenizer/index.tsx +++ b/packages/main/src/webComponents/Tokenizer/index.tsx @@ -33,6 +33,8 @@ interface TokenizerAttributes { * Defines whether tokens are displayed on multiple lines. * * **Note:** The `multiLine` property is in an experimental state and is a subject to change. + * + * **Note:** Available since [v2.5.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.5.0) of **@ui5/webcomponents**. * @default false */ multiLine?: boolean; @@ -50,6 +52,8 @@ interface TokenizerAttributes { * Defines whether "Clear All" button is present. Ensure `multiLine` is enabled, otherwise `showClearAll` will have no effect. * * **Note:** The `showClearAll` property is in an experimental state and is a subject to change. + * + * **Note:** Available since [v2.5.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.5.0) of **@ui5/webcomponents**. * @default false */ showClearAll?: boolean; diff --git a/packages/main/src/webComponents/UserMenu/index.tsx b/packages/main/src/webComponents/UserMenu/index.tsx index 42efc1ec09e..1099a9d921c 100644 --- a/packages/main/src/webComponents/UserMenu/index.tsx +++ b/packages/main/src/webComponents/UserMenu/index.tsx @@ -55,8 +55,10 @@ interface UserMenuPropTypes | 'onAddAccountClick' | 'onAvatarClick' | 'onChangeAccount' + | 'onClose' | 'onItemClick' | 'onManageAccountClick' + | 'onOpen' | 'onSignOutClick' > { /** @@ -106,6 +108,17 @@ interface UserMenuPropTypes */ onChangeAccount?: (event: Ui5CustomEvent) => void; + /** + * Fired when a user menu is close. + * + * **Note:** Available since [v2.6.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.6.0) of **@ui5/webcomponents-fiori**. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|❌| + */ + onClose?: (event: Ui5CustomEvent) => void; + /** * Fired when a menu item is selected. * @@ -126,11 +139,24 @@ interface UserMenuPropTypes */ onManageAccountClick?: (event: Ui5CustomEvent) => void; + /** + * Fired when a user menu is open. + * + * **Note:** Available since [v2.6.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.6.0) of **@ui5/webcomponents-fiori**. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|❌| + */ + onOpen?: (event: Ui5CustomEvent) => void; + /** * Fired when the "Sign Out" button is selected. * * **Note:** Call `event.preventDefault()` inside the handler of this event to prevent its default action/s. * + * **Note:** Available since [v2.6.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.6.0) of **@ui5/webcomponents-fiori**. + * * | cancelable | bubbles | * | :--------: | :-----: | * | ✅|❌| @@ -156,7 +182,16 @@ const UserMenu = withWebComponent( ['opener'], ['open', 'showAddAccount', 'showManageAccount', 'showOtherAccounts'], ['accounts'], - ['add-account-click', 'avatar-click', 'change-account', 'item-click', 'manage-account-click', 'sign-out-click'] + [ + 'add-account-click', + 'avatar-click', + 'change-account', + 'close', + 'item-click', + 'manage-account-click', + 'open', + 'sign-out-click' + ] ); UserMenu.displayName = 'UserMenu'; diff --git a/packages/main/src/webComponents/index.ts b/packages/main/src/webComponents/index.ts index 44e672fde9e..80b3b9bf2e7 100644 --- a/packages/main/src/webComponents/index.ts +++ b/packages/main/src/webComponents/index.ts @@ -30,6 +30,7 @@ export * from './DynamicPage/index.js'; export * from './DynamicPageHeader/index.js'; export * from './DynamicPageTitle/index.js'; export * from './DynamicSideContent/index.js'; +export * from './ExpandableText/index.js'; export * from './FileUploader/index.js'; export * from './FilterItem/index.js'; export * from './FilterItemOption/index.js'; diff --git a/scripts/postcss-css-to-esm.mjs b/scripts/postcss-css-to-esm.mjs index 8419d4d7a89..d2a81d6a4fd 100644 --- a/scripts/postcss-css-to-esm.mjs +++ b/scripts/postcss-css-to-esm.mjs @@ -1,4 +1,3 @@ -// copied from https://github.com/SAP/ui5-webcomponents/blob/main/packages/tools/lib/postcss-css-to-esm/index.js import versionInfo from '@ui5/webcomponents-base/dist/generated/VersionInfo.js'; import fs from 'node:fs'; import path, { basename } from 'node:path'; @@ -14,23 +13,22 @@ function scopeVariables(cssText, packageJSON) { } const getTSContent = (targetFile, packageName, css, exportTokens) => { - const typeImport = `import type { StyleDataCSP } from '@ui5/webcomponents-base/dist/types.js';`; - // tabs are intentionally mixed to have proper identation in the produced file - return `${typeImport} -export const styleData: StyleDataCSP = {packageName:'${packageName}',fileName:'${basename(targetFile)}',content:${css}}; + return `export const styleData = \`${css}\`; export const classNames = ${JSON.stringify(exportTokens)} as const; `; }; +// strips the unnecessary theming data coming from @sap-theming/theming-base-content and leaves only the css parameters +// & scope variables const proccessCSS = (css) => { css = css.replace(/\.sapThemeMeta[\s\S]*?:root/, ':root'); css = css.replace(/\.background-image.*{.*}/, ''); css = css.replace(/\.sapContrast[ ]*:root[\s\S]*?}/, ''); css = css.replace(/--sapFontUrl.*\);?/, ''); css = scopeVariables(css, versionInfo); - return JSON.stringify(css); + return css; }; function cssToEsmPostcssPlugin(opts) { diff --git a/yarn.lock b/yarn.lock index e2328a7e963..61440212f0f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3967,10 +3967,10 @@ __metadata: languageName: node linkType: hard -"@sap-theming/theming-base-content@npm:11.17.1": - version: 11.17.1 - resolution: "@sap-theming/theming-base-content@npm:11.17.1" - checksum: 10c0/fcf4ac3f7e81857b26d38c628e7cb546a53d32ff0d71df7a94ceea3b251ab379339f26b8ec41a5374766efd3025401dfc9ae78c67f5daef8d67f524a98c5e40f +"@sap-theming/theming-base-content@npm:11.24.0": + version: 11.24.0 + resolution: "@sap-theming/theming-base-content@npm:11.24.0" + checksum: 10c0/a407711e2a6325106055bfa90c75d2592f1e7462f4f914abedce71c55cd0141ef37d0ed9e10f73a170431f5cf03fa7efc3d290e5323b34e3b95a8a88d0118d75 languageName: node linkType: hard @@ -5597,25 +5597,25 @@ __metadata: languageName: node linkType: hard -"@ui5/webcomponents-base@npm:2.5.1": - version: 2.5.1 - resolution: "@ui5/webcomponents-base@npm:2.5.1" +"@ui5/webcomponents-base@npm:2.6.2": + version: 2.6.2 + resolution: "@ui5/webcomponents-base@npm:2.6.2" dependencies: "@lit-labs/ssr-dom-shim": "npm:^1.1.2" lit-html: "npm:^2.0.1" - checksum: 10c0/7eaf029652ac69d2e3383a96f7861f39d8672f9d4fb1616613420ff860c02eea00efc4bac7a661e0210541c8c4fc48b1b2e2f0b4c3a7f65c42ed5ad24c5ae0fd + checksum: 10c0/a58c553812dabcc4b686a63b16349fbf239e363bf7c6c5d1a66ca9257cff9cfe3fc7f878397323dde67df5885ef7c39cd657a2eabee8601747f30c11ce0d4766 languageName: node linkType: hard -"@ui5/webcomponents-compat@npm:2.5.1": - version: 2.5.1 - resolution: "@ui5/webcomponents-compat@npm:2.5.1" +"@ui5/webcomponents-compat@npm:2.6.2": + version: 2.6.2 + resolution: "@ui5/webcomponents-compat@npm:2.6.2" dependencies: - "@ui5/webcomponents": "npm:2.5.1" - "@ui5/webcomponents-base": "npm:2.5.1" - "@ui5/webcomponents-icons": "npm:2.5.1" - "@ui5/webcomponents-theming": "npm:2.5.1" - checksum: 10c0/804e949879f7dc95a9e3c780941db3bddf748cab58e3707467c7f75992f7b59be19835df61fe015b69901310aba54ead214044dd266eaeb9c9a3531d054ef9a5 + "@ui5/webcomponents": "npm:2.6.2" + "@ui5/webcomponents-base": "npm:2.6.2" + "@ui5/webcomponents-icons": "npm:2.6.2" + "@ui5/webcomponents-theming": "npm:2.6.2" + checksum: 10c0/b00236555d1b27ff2dfdd49f0f1bf34299d5dca06885b70b27be3204da04aa250a95b4c6a38e3cb01e0fa0245bc0858efc8960d87fff4fd0047bcdd61732cae6 languageName: node linkType: hard @@ -5623,8 +5623,8 @@ __metadata: version: 0.0.0-use.local resolution: "@ui5/webcomponents-cypress-commands@workspace:packages/cypress-commands" peerDependencies: - "@ui5/webcomponents": ~2.5.0 - "@ui5/webcomponents-base": ~2.5.0 + "@ui5/webcomponents": ~2.6.0 + "@ui5/webcomponents-base": ~2.6.0 cypress: ^12.0.0 || ^13.0.0 peerDependenciesMeta: "@ui5/webcomponents": @@ -5634,53 +5634,53 @@ __metadata: languageName: unknown linkType: soft -"@ui5/webcomponents-fiori@npm:2.5.1": - version: 2.5.1 - resolution: "@ui5/webcomponents-fiori@npm:2.5.1" +"@ui5/webcomponents-fiori@npm:2.6.2": + version: 2.6.2 + resolution: "@ui5/webcomponents-fiori@npm:2.6.2" dependencies: - "@ui5/webcomponents": "npm:2.5.1" - "@ui5/webcomponents-base": "npm:2.5.1" - "@ui5/webcomponents-icons": "npm:2.5.1" - "@ui5/webcomponents-theming": "npm:2.5.1" + "@ui5/webcomponents": "npm:2.6.2" + "@ui5/webcomponents-base": "npm:2.6.2" + "@ui5/webcomponents-icons": "npm:2.6.2" + "@ui5/webcomponents-theming": "npm:2.6.2" "@zxing/library": "npm:^0.21.3" - checksum: 10c0/e3e2faaafe3bcf41f77d26aa8d229e12525a48b6db7c0de691b0a46dac1c534411f59e2b6b2f41246656f0bc49abf7a39bf224d791df359531068b947b1ac387 + checksum: 10c0/6da09eee232e98c402c89841d90ff5f68b25bdc89993c5f304baaba26be624eb9583c348f637c7231a98cfb98704cb6701d4570ca6a10f3749f06a4c6364d2cd languageName: node linkType: hard -"@ui5/webcomponents-icons-business-suite@npm:2.5.1": - version: 2.5.1 - resolution: "@ui5/webcomponents-icons-business-suite@npm:2.5.1" +"@ui5/webcomponents-icons-business-suite@npm:2.6.2": + version: 2.6.2 + resolution: "@ui5/webcomponents-icons-business-suite@npm:2.6.2" dependencies: - "@ui5/webcomponents-base": "npm:2.5.1" - checksum: 10c0/cb20a5fdbaf70d7d781ad57786e97a96490e5283f124259505c0b848e38d7bfa7161cc7f457d579564bf2cb2065b7905a606ebf2200b10d15c878180a3a5fb20 + "@ui5/webcomponents-base": "npm:2.6.2" + checksum: 10c0/c35fee0272006a8bb88e31584e93a8f686e895b7ab38d77c474df8b974ff44217671463bcbd46b3c8ed143aec5b6c8e39b9a912cb9d016f9ab96fa81273ade5e languageName: node linkType: hard -"@ui5/webcomponents-icons-tnt@npm:2.5.1": - version: 2.5.1 - resolution: "@ui5/webcomponents-icons-tnt@npm:2.5.1" +"@ui5/webcomponents-icons-tnt@npm:2.6.2": + version: 2.6.2 + resolution: "@ui5/webcomponents-icons-tnt@npm:2.6.2" dependencies: - "@ui5/webcomponents-base": "npm:2.5.1" - checksum: 10c0/97f573600fbc2dbe15e00b740d105cac0c399e4e4ff6baa8cd81c19d26a7e7e795b29608f4f0d148a9e36fd575ed93e4bdefcff171e0667228adc96e667b9c06 + "@ui5/webcomponents-base": "npm:2.6.2" + checksum: 10c0/8fc803adba35b7b767e4647d34d22d8e09e0d6050f1149af53f3384622041c0f4697fa9e82cac7402974bbfd3adad67409ad37789a8539425d0ebf9b9245ad34 languageName: node linkType: hard -"@ui5/webcomponents-icons@npm:2.5.1": - version: 2.5.1 - resolution: "@ui5/webcomponents-icons@npm:2.5.1" +"@ui5/webcomponents-icons@npm:2.6.2": + version: 2.6.2 + resolution: "@ui5/webcomponents-icons@npm:2.6.2" dependencies: - "@ui5/webcomponents-base": "npm:2.5.1" - checksum: 10c0/e13f6232ef4916f172ecaf2deef349456d76b7de61a047b3ad7d546859159952577e97a3947340916ed0b188d073bca7862d20f9e79274d0d08630f6e8814bd9 + "@ui5/webcomponents-base": "npm:2.6.2" + checksum: 10c0/196f879ea3dd099f98cde450d619f248d15e59cb9996692020cbaa02a7231edef4073aca0fb59a65c234e4b081c341849217df8c3862213d2f1c4fa02040758f languageName: node linkType: hard -"@ui5/webcomponents-localization@npm:2.5.1": - version: 2.5.1 - resolution: "@ui5/webcomponents-localization@npm:2.5.1" +"@ui5/webcomponents-localization@npm:2.6.2": + version: 2.6.2 + resolution: "@ui5/webcomponents-localization@npm:2.6.2" dependencies: "@types/openui5": "npm:^1.113.0" - "@ui5/webcomponents-base": "npm:2.5.1" - checksum: 10c0/d90ce382c116fff5be68be8f6b90ce8a89dec5ff2bdb31433578c55c34c122226d85ecec9c91839cd764d77a0d2a2929243e6781a0ff2271a5aaa54c402a8705 + "@ui5/webcomponents-base": "npm:2.6.2" + checksum: 10c0/709cfcd9d8e44a5581a3d241e9f080ad12b054ae0e58ff5b7e7d2e092a5571d23f5232ae9821350102e6c55ea0763d5cd5d76a23e5ba739bd2fb0b8d0b172772 languageName: node linkType: hard @@ -5689,7 +5689,7 @@ __metadata: resolution: "@ui5/webcomponents-react-base@workspace:packages/base" peerDependencies: "@types/react": "*" - "@ui5/webcomponents-base": ~2.5.0 + "@ui5/webcomponents-base": ~2.6.2 react: ^18 || ^19 peerDependenciesMeta: "@types/react": @@ -5707,8 +5707,8 @@ __metadata: react-content-loader: "npm:7.0.2" recharts: "npm:2.15.0" peerDependencies: - "@ui5/webcomponents-react": ~2.5.0 - "@ui5/webcomponents-react-base": ~2.5.0 + "@ui5/webcomponents-react": ~2.6.0 + "@ui5/webcomponents-react-base": ~2.6.0 react: ^18 || ^19 languageName: unknown linkType: soft @@ -5731,8 +5731,8 @@ __metadata: peerDependencies: "@types/react": "*" "@types/react-dom": "*" - "@ui5/webcomponents-compat": ~2.5.0 - "@ui5/webcomponents-react": ~2.5.0 + "@ui5/webcomponents-compat": ~2.6.2 + "@ui5/webcomponents-react": ~2.6.0 react: ^18 || ^19 react-dom: ^18 || ^19 peerDependenciesMeta: @@ -5758,10 +5758,10 @@ __metadata: peerDependencies: "@types/react": "*" "@types/react-dom": "*" - "@ui5/webcomponents": ~2.5.0 - "@ui5/webcomponents-base": ~2.5.0 - "@ui5/webcomponents-fiori": ~2.5.0 - "@ui5/webcomponents-icons": ~2.5.0 + "@ui5/webcomponents": ~2.6.2 + "@ui5/webcomponents-base": ~2.6.2 + "@ui5/webcomponents-fiori": ~2.6.2 + "@ui5/webcomponents-icons": ~2.6.2 react: ^18 || ^19 react-dom: ^18 || ^19 peerDependenciesMeta: @@ -5776,19 +5776,19 @@ __metadata: languageName: unknown linkType: soft -"@ui5/webcomponents-theming@npm:2.5.1": - version: 2.5.1 - resolution: "@ui5/webcomponents-theming@npm:2.5.1" +"@ui5/webcomponents-theming@npm:2.6.2": + version: 2.6.2 + resolution: "@ui5/webcomponents-theming@npm:2.6.2" dependencies: - "@sap-theming/theming-base-content": "npm:11.17.1" - "@ui5/webcomponents-base": "npm:2.5.1" - checksum: 10c0/01d3bf30bab8e3d4caa05c3b51979828085507e3d5f137abefea29df119ba4a13f60ca2ad6e993e3778a11091431b2d17cb9a170251fc7c608a143a135c954d1 + "@sap-theming/theming-base-content": "npm:11.24.0" + "@ui5/webcomponents-base": "npm:2.6.2" + checksum: 10c0/830717124421221c9ff0eaeb48c0c0c3df42ed8d4c2f2216543159472c42534342b93555d49e297b71b967d1026058d7854f06ed630d72317eb9a9cab468c15a languageName: node linkType: hard -"@ui5/webcomponents-tools@npm:2.5.1": - version: 2.5.1 - resolution: "@ui5/webcomponents-tools@npm:2.5.1" +"@ui5/webcomponents-tools@npm:2.6.2": + version: 2.6.2 + resolution: "@ui5/webcomponents-tools@npm:2.6.2" dependencies: "@custom-elements-manifest/analyzer": "npm:^0.8.4" "@typescript-eslint/eslint-plugin": "npm:^6.9.0" @@ -5816,7 +5816,7 @@ __metadata: eslint: "npm:^7.22.0" eslint-config-airbnb-base: "npm:^14.2.1" eslint-plugin-cypress: "npm:^3.4.0" - eslint-plugin-import: "npm:^2.22.1" + eslint-plugin-import: "npm:^2.31.0" esprima: "npm:^4.0.1" getopts: "npm:^2.3.0" glob: "npm:^7.1.6" @@ -5847,21 +5847,21 @@ __metadata: bin: wc-create-ui5-element: bin/create-ui5-element.js wc-dev: bin/dev.js - checksum: 10c0/1b59b39cd1e48b4c94dc89d292cc0076ab1a074edc878f0e36878eb871e3305712b8530d1216a6afe7d579b7bc637f46865dc921b84e5353ef6a56b7f12f6e11 + checksum: 10c0/adce8adb2b6c5aafa2d2fce32377b14eff3ed02a37505f15d916739db95beaa981a803e7748794698ab1ed672e4f79396eaf001c36950f5a452d8b079454814c languageName: node linkType: hard -"@ui5/webcomponents@npm:2.5.1": - version: 2.5.1 - resolution: "@ui5/webcomponents@npm:2.5.1" +"@ui5/webcomponents@npm:2.6.2": + version: 2.6.2 + resolution: "@ui5/webcomponents@npm:2.6.2" dependencies: - "@ui5/webcomponents-base": "npm:2.5.1" - "@ui5/webcomponents-icons": "npm:2.5.1" - "@ui5/webcomponents-icons-business-suite": "npm:2.5.1" - "@ui5/webcomponents-icons-tnt": "npm:2.5.1" - "@ui5/webcomponents-localization": "npm:2.5.1" - "@ui5/webcomponents-theming": "npm:2.5.1" - checksum: 10c0/01e82e395800395cf690a2765923ad4d3f027d8cef6cad98388715d68a5cacea33d92c992ecaa345ab9cb349eac7caf968d73528dd4db749ce3e5aadb8a97e66 + "@ui5/webcomponents-base": "npm:2.6.2" + "@ui5/webcomponents-icons": "npm:2.6.2" + "@ui5/webcomponents-icons-business-suite": "npm:2.6.2" + "@ui5/webcomponents-icons-tnt": "npm:2.6.2" + "@ui5/webcomponents-localization": "npm:2.6.2" + "@ui5/webcomponents-theming": "npm:2.6.2" + checksum: 10c0/4837c0c13e64bd9aba86a34458d0749e877de4c39243d86504f1890d0e5e8e51813c688f26ecdca49c479aee03db855a4b92be61891f98f335bbba43de4f9557 languageName: node linkType: hard @@ -10568,18 +10568,6 @@ __metadata: languageName: node linkType: hard -"eslint-module-utils@npm:^2.9.0": - version: 2.11.0 - resolution: "eslint-module-utils@npm:2.11.0" - dependencies: - debug: "npm:^3.2.7" - peerDependenciesMeta: - eslint: - optional: true - checksum: 10c0/c1b02e83429878ab22596f17a5ac138e51a520e96a5ef89a5a6698769a2d174ab28302d45eb563c0fc418d21a5842e328c37a6e8f294bf2e64e675ba55203dd7 - languageName: node - linkType: hard - "eslint-plugin-cypress@npm:^3.4.0": version: 3.5.0 resolution: "eslint-plugin-cypress@npm:3.5.0" @@ -10591,34 +10579,6 @@ __metadata: languageName: node linkType: hard -"eslint-plugin-import@npm:^2.22.1": - version: 2.30.0 - resolution: "eslint-plugin-import@npm:2.30.0" - dependencies: - "@rtsao/scc": "npm:^1.1.0" - array-includes: "npm:^3.1.8" - array.prototype.findlastindex: "npm:^1.2.5" - array.prototype.flat: "npm:^1.3.2" - array.prototype.flatmap: "npm:^1.3.2" - debug: "npm:^3.2.7" - doctrine: "npm:^2.1.0" - eslint-import-resolver-node: "npm:^0.3.9" - eslint-module-utils: "npm:^2.9.0" - hasown: "npm:^2.0.2" - is-core-module: "npm:^2.15.1" - is-glob: "npm:^4.0.3" - minimatch: "npm:^3.1.2" - object.fromentries: "npm:^2.0.8" - object.groupby: "npm:^1.0.3" - object.values: "npm:^1.2.0" - semver: "npm:^6.3.1" - tsconfig-paths: "npm:^3.15.0" - peerDependencies: - eslint: ^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0 || ^8 - checksum: 10c0/4c9dcb1f27505c4d5dd891d2b551f56c70786d136aa3992a77e785bdc67c9f60200a2c7fb0ce55b7647fe550b12bc433d5dfa59e2c00ab44227791c5ab86badf - languageName: node - linkType: hard - "eslint-plugin-import@npm:^2.31.0": version: 2.31.0 resolution: "eslint-plugin-import@npm:2.31.0" @@ -22675,11 +22635,11 @@ __metadata: "@types/node": "npm:^22.0.0" "@types/react": "npm:^19.0.1" "@types/react-dom": "npm:^19.0.1" - "@ui5/webcomponents": "npm:2.5.1" - "@ui5/webcomponents-compat": "npm:2.5.1" - "@ui5/webcomponents-fiori": "npm:2.5.1" - "@ui5/webcomponents-icons": "npm:2.5.1" - "@ui5/webcomponents-tools": "npm:2.5.1" + "@ui5/webcomponents": "npm:2.6.2" + "@ui5/webcomponents-compat": "npm:2.6.2" + "@ui5/webcomponents-fiori": "npm:2.6.2" + "@ui5/webcomponents-icons": "npm:2.6.2" + "@ui5/webcomponents-tools": "npm:2.6.2" "@vitejs/plugin-react": "npm:^4.2.0" chromatic: "npm:^11.0.0" cssnano: "npm:^7.0.0"