diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml index 4b7479ea892..5b5015315c1 100644 --- a/.github/workflows/test.yml +++ b/.github/workflows/test.yml @@ -19,6 +19,7 @@ jobs: - charts - cypress-commands - main/src/components + - main/src/webComponents - main/src/internal - compat react: ['18', '19'] diff --git a/.storybook/custom-element-manifests/ai.json b/.storybook/custom-element-manifests/ai.json index a8dab28a182..d9c5e41bd9f 100644 --- a/.storybook/custom-element-manifests/ai.json +++ b/.storybook/custom-element-manifests/ai.json @@ -110,7 +110,7 @@ ] }, "default": "{}", - "description": "Defines the additional accessibility attributes that will be applied to the component.\n\nThis property allows for fine-tuned control of ARIA attributes for screen reader support.\nIt accepts an object with the following optional fields:\n\n- **root**: Accessibility attributes that will be applied to the root element.\n - **hasPopup**: Indicates the availability and type of interactive popup element (such as a menu or dialog).\n Accepts string values: `\"dialog\"`, `\"grid\"`, `\"listbox\"`, `\"menu\"`, or `\"tree\"`.\n - **roleDescription**: Defines a human-readable description for the button's role.\n Accepts any string value.\n\n- **arrowButton**: Accessibility attributes that will be applied to the arrow (split) button element.\n - **hasPopup**: Indicates the type of popup triggered by the arrow button.\n Accepts string values: `\"dialog\"`, `\"grid\"`, `\"listbox\"`, `\"menu\"`, or `\"tree\"`.\n - **expanded**: Indicates whether the popup controlled by the arrow button is currently expanded.\n Accepts boolean values: `true` or `false`.", + "description": "Defines the additional accessibility attributes that will be applied to the component.\n\nThis property allows for fine-tuned control of ARIA attributes for screen reader support.\nIt accepts an object with the following optional fields:\n\n- **root**: Accessibility attributes that will be applied to the root element.\n - **hasPopup**: Indicates the availability and type of interactive popup element (such as a menu or dialog).\n Accepts string values: `\"dialog\"`, `\"grid\"`, `\"listbox\"`, `\"menu\"`, or `\"tree\"`.\n - **roleDescription**: Defines a human-readable description for the button's role.\n Accepts any string value.\n - **title**: Specifies a tooltip or description for screen readers.\n Accepts any string value.\n- **ariaKeyShortcuts**: Defines keyboard shortcuts that activate or focus the button.\n\n- **arrowButton**: Accessibility attributes that will be applied to the arrow (split) button element.\n - **hasPopup**: Indicates the type of popup triggered by the arrow button.\n Accepts string values: `\"dialog\"`, `\"grid\"`, `\"listbox\"`, `\"menu\"`, or `\"tree\"`.\n - **expanded**: Indicates whether the popup controlled by the arrow button is currently expanded.\n Accepts boolean values: `true` or `false`.", "privacy": "public", "_ui5since": "2.6.0" } @@ -177,7 +177,7 @@ } }, { - "description": "Defines the additional accessibility attributes that will be applied to the component.\n\nThis property allows for fine-tuned control of ARIA attributes for screen reader support.\nIt accepts an object with the following optional fields:\n\n- **root**: Accessibility attributes that will be applied to the root element.\n - **hasPopup**: Indicates the availability and type of interactive popup element (such as a menu or dialog).\n Accepts string values: `\"dialog\"`, `\"grid\"`, `\"listbox\"`, `\"menu\"`, or `\"tree\"`.\n - **roleDescription**: Defines a human-readable description for the button's role.\n Accepts any string value.\n\n- **arrowButton**: Accessibility attributes that will be applied to the arrow (split) button element.\n - **hasPopup**: Indicates the type of popup triggered by the arrow button.\n Accepts string values: `\"dialog\"`, `\"grid\"`, `\"listbox\"`, `\"menu\"`, or `\"tree\"`.\n - **expanded**: Indicates whether the popup controlled by the arrow button is currently expanded.\n Accepts boolean values: `true` or `false`.", + "description": "Defines the additional accessibility attributes that will be applied to the component.\n\nThis property allows for fine-tuned control of ARIA attributes for screen reader support.\nIt accepts an object with the following optional fields:\n\n- **root**: Accessibility attributes that will be applied to the root element.\n - **hasPopup**: Indicates the availability and type of interactive popup element (such as a menu or dialog).\n Accepts string values: `\"dialog\"`, `\"grid\"`, `\"listbox\"`, `\"menu\"`, or `\"tree\"`.\n - **roleDescription**: Defines a human-readable description for the button's role.\n Accepts any string value.\n - **title**: Specifies a tooltip or description for screen readers.\n Accepts any string value.\n- **ariaKeyShortcuts**: Defines keyboard shortcuts that activate or focus the button.\n\n- **arrowButton**: Accessibility attributes that will be applied to the arrow (split) button element.\n - **hasPopup**: Indicates the type of popup triggered by the arrow button.\n Accepts string values: `\"dialog\"`, `\"grid\"`, `\"listbox\"`, `\"menu\"`, or `\"tree\"`.\n - **expanded**: Indicates whether the popup controlled by the arrow button is currently expanded.\n Accepts boolean values: `true` or `false`.", "name": "accessibility-attributes", "default": "{}", "fieldName": "accessibilityAttributes", diff --git a/.storybook/custom-element-manifests/fiori.json b/.storybook/custom-element-manifests/fiori.json index 73b6741d8de..78265833dfd 100644 --- a/.storybook/custom-element-manifests/fiori.json +++ b/.storybook/custom-element-manifests/fiori.json @@ -2210,7 +2210,7 @@ { "kind": "enum", "name": "ViewSettingsDialogMode", - "description": "Different types of Bar.", + "description": "Different types of ViewSettings.", "_ui5privacy": "public", "members": [ { @@ -2232,6 +2232,16 @@ "default": "Filter", "name": "Filter", "readonly": true + }, + { + "kind": "field", + "static": true, + "privacy": "public", + "_ui5since": "2.13.0", + "description": "Group type", + "default": "Group", + "name": "Group", + "readonly": true } ] } @@ -2684,7 +2694,7 @@ "declarations": [ { "kind": "class", - "description": "Header of the DynamicPage.\n\n### Overview\n\nThe DynamicPageHeader `ui5-dynamic-page-header` is part of the DynamicPage family\nand is used to serve as header of the `DynamicPage`.\n\n### Usage\n\nThe `DynamicPageHeader` can hold any layout control and has two states - expanded\nand collapsed (snapped). The switching between these states happens when:\n- the user scrolls below its bottom margin\n- the user clicks on the `DynamicPageTitle`\n- through the `DynamicPage` property `headerSnapped`\n\n### Responsive Behavior\n\nThe responsive behavior of the `DynamicPageHeader` depends on the behavior of the\ncontent that is displayed.", + "description": "Header of the DynamicPage.\n\n### Overview\n\nThe DynamicPageHeader `ui5-dynamic-page-header` is part of the DynamicPage family\nand is used to serve as header of the `DynamicPage`.\n\n### Usage\n\nThe `DynamicPageHeader` can hold any layout control and has two states - expanded\nand collapsed (snapped). The switching between these states happens when:\n- the user scrolls below its bottom margin\n- the user clicks on the `DynamicPageTitle`\n- through the `DynamicPage` property `headerSnapped`\n\n### Responsive Behavior\n\nThe responsive behavior of the `DynamicPageHeader` depends on the behavior of the\ncontent that is displayed.\n\n### Accessibility\n\nThe `DynamicPageHeader` provides an accessible label for the header region.", "name": "DynamicPageHeader", "slots": [ { @@ -3165,12 +3175,12 @@ "declarations": [ { "kind": "class", - "description": "### Overview\n\n### Usage\n\nFor the `ui5-filter-item`\n### ES6 Module Import\n\n`import @ui5/webcomponents-fiori/dist/FilterItem.js\";`", + "description": "### Overview\n\nThe `ui5-filter-item` component defines the filtering criteria for data in `ui5-view-settings-dialog`.\nIt represents a single filter category that contains multiple filter options that users can select.\n\n### Usage\n\nThe `ui5-filter-item` is used within the `ui5-view-settings-dialog` to provide filtering options.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/FilterItem.js\";`", "name": "FilterItem", "slots": [ { "name": "values", - "description": "Defines the `values` list.", + "description": "Defines the filter options available for this filter category.", "_ui5type": { "text": "Array", "references": [ @@ -3191,7 +3201,7 @@ "type": { "text": "string | undefined" }, - "description": "Defines the text of the component.", + "description": "Defines the text of the filter item.", "default": "undefined", "privacy": "public" }, @@ -3201,14 +3211,14 @@ "type": { "text": "string | undefined" }, - "description": "Defines the additional text of the component.", + "description": "Defines the additional text of the filter item.\nThis text is typically used to show the number of selected filter options within this category.", "default": "undefined", "privacy": "public" } ], "attributes": [ { - "description": "Defines the text of the component.", + "description": "Defines the text of the filter item.", "name": "text", "default": "undefined", "fieldName": "text", @@ -3217,7 +3227,7 @@ } }, { - "description": "Defines the additional text of the component.", + "description": "Defines the additional text of the filter item.\nThis text is typically used to show the number of selected filter options within this category.", "name": "additional-text", "default": "undefined", "fieldName": "additionalText", @@ -3263,7 +3273,7 @@ "declarations": [ { "kind": "class", - "description": "### Overview\n\n### Usage\n\nFor the `ui5-filter-item-option`\n### ES6 Module Import\n\n`import @ui5/webcomponents-fiori/dist/FilterItemOption.js\";`", + "description": "### Overview\n\nThe `ui5-filter-item-option` component defines individual filter values within a `ui5-filter-item`.\nIt represents a single selectable option that users can choose to filter data.\n\n### Usage\n\nThe `ui5-filter-item-option` is used as a child component within `ui5-filter-item` in the context\nof `ui5-view-settings-dialog`. Each option represents a specific value that can be used for filtering\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/FilterItemOption.js\";`", "name": "FilterItemOption", "members": [ { @@ -3272,7 +3282,7 @@ "type": { "text": "string | undefined" }, - "description": "Defines the text of the component.", + "description": "Defines the text of the filter option.", "default": "undefined", "privacy": "public" }, @@ -3283,13 +3293,13 @@ "text": "boolean" }, "default": "false", - "description": "Defines if the component is selected.", + "description": "Defines if the filter option is selected.", "privacy": "public" } ], "attributes": [ { - "description": "Defines the text of the component.", + "description": "Defines the text of the filter option.", "name": "text", "default": "undefined", "fieldName": "text", @@ -3298,7 +3308,7 @@ } }, { - "description": "Defines if the component is selected.", + "description": "Defines if the filter option is selected.", "name": "selected", "default": "false", "fieldName": "selected", @@ -3671,6 +3681,87 @@ } ] }, + { + "kind": "javascript-module", + "path": "dist/GroupItem.js", + "declarations": [ + { + "kind": "class", + "description": "### Overview\n\nThe `ui5-group-item` component defines the grouping criteria for data in `ui5-view-settings-dialog`.\nIt represents a single group option that users can select to organize data into logical groups.\n\n### Usage\n\nThe `ui5-group-item` is used within the `ui5-view-settings-dialog` to provide grouping options.\nEach group item represents a column or field by which data can be grouped.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/GroupItem.js\";`", + "name": "GroupItem", + "members": [ + { + "kind": "field", + "name": "text", + "type": { + "text": "string | undefined" + }, + "description": "Defines the text of the group item.", + "default": "undefined", + "privacy": "public" + }, + { + "kind": "field", + "name": "selected", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines if the group item is selected.", + "privacy": "public" + } + ], + "attributes": [ + { + "description": "Defines the text of the group item.", + "name": "text", + "default": "undefined", + "fieldName": "text", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines if the group item is selected.", + "name": "selected", + "default": "false", + "fieldName": "selected", + "type": { + "text": "boolean" + } + } + ], + "superclass": { + "name": "UI5Element", + "package": "@ui5/webcomponents-base", + "module": "dist/UI5Element.js" + }, + "tagName": "ui5-group-item", + "customElement": true, + "_ui5since": "2.13.0", + "_ui5privacy": "public", + "_ui5abstract": true + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "GroupItem", + "module": "dist/GroupItem.js" + } + }, + { + "kind": "custom-element-definition", + "name": "ui5-group-item", + "declaration": { + "name": "GroupItem", + "module": "dist/GroupItem.js" + } + } + ] + }, { "kind": "javascript-module", "path": "dist/IllustratedMessage.js", @@ -9690,7 +9781,7 @@ "declarations": [ { "kind": "class", - "description": "### Overview\n\n### Usage\n\nFor the `ui5-sort-item`\n### ES6 Module Import\n\n`import @ui5/webcomponents-fiori/dist/SortItem.js\";`", + "description": "### Overview\n\nThe `ui5-sort-item` component defines the sorting criteria for data in `ui5-view-settings-dialog`.\nIt represents a single sort option that users can select to organize data in ascending or descending order.\n\n### Usage\n\nThe `ui5-sort-item` is used within the `ui5-view-settings-dialog` to provide sorting options.\nEach sort item represents a column or field by which data can be sorted.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/SortItem.js\";`", "name": "SortItem", "members": [ { @@ -9699,7 +9790,7 @@ "type": { "text": "string | undefined" }, - "description": "Defines the text of the component.", + "description": "Defines the text of the sort item.", "default": "undefined", "privacy": "public" }, @@ -9710,13 +9801,13 @@ "text": "boolean" }, "default": "false", - "description": "Defines if the component is selected.", + "description": "Defines if the sort item is selected.", "privacy": "public" } ], "attributes": [ { - "description": "Defines the text of the component.", + "description": "Defines the text of the sort item.", "name": "text", "default": "undefined", "fieldName": "text", @@ -9725,7 +9816,7 @@ } }, { - "description": "Defines if the component is selected.", + "description": "Defines if the sort item is selected.", "name": "selected", "default": "false", "fieldName": "selected", @@ -12536,6 +12627,21 @@ ] }, "_ui5privacy": "public" + }, + { + "name": "groupItems", + "description": "Defines the list of items against which the user could group data.\n\n**Note:** If you want to use this slot, you need to import used item: `import \"@ui5/webcomponents-fiori/dist/GroupItem.js\";`", + "_ui5type": { + "text": "Array", + "references": [ + { + "name": "GroupItem", + "package": "@ui5/webcomponents-fiori", + "module": "dist/GroupItem.js" + } + ] + }, + "_ui5privacy": "public" } ], "members": [ @@ -12549,6 +12655,17 @@ "description": "Defines the initial sort order.", "privacy": "public" }, + { + "kind": "field", + "name": "groupDescending", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines the initial group order.", + "privacy": "public", + "_ui5since": "2.13.0" + }, { "kind": "field", "name": "open", @@ -12640,6 +12757,38 @@ "_ui5privacy": "public", "description": "The selected sort order (true = descending, false = ascending)." }, + { + "type": { + "text": "String" + }, + "name": "groupOrder", + "_ui5privacy": "public", + "description": "The current group order selected." + }, + { + "type": { + "text": "String" + }, + "name": "groupBy", + "_ui5privacy": "public", + "description": "The currently selected `ui5-group-item` text attribute." + }, + { + "type": { + "text": "HTMLElement" + }, + "name": "groupByItem", + "_ui5privacy": "public", + "description": "The currently selected `ui5-group-item`." + }, + { + "type": { + "text": "Boolean" + }, + "name": "groupDescending", + "_ui5privacy": "public", + "description": "The selected group order (true = descending, false = ascending)." + }, { "type": { "text": "Array" @@ -12700,6 +12849,38 @@ "_ui5privacy": "public", "description": "The selected sort order (true = descending, false = ascending)." }, + { + "type": { + "text": "String" + }, + "name": "groupOrder", + "_ui5privacy": "public", + "description": "The current group order selected." + }, + { + "type": { + "text": "String" + }, + "name": "groupBy", + "_ui5privacy": "public", + "description": "The currently selected `ui5-group-item` text attribute." + }, + { + "type": { + "text": "HTMLElement" + }, + "name": "groupByItem", + "_ui5privacy": "public", + "description": "The currently selected `ui5-group-item`." + }, + { + "type": { + "text": "Boolean" + }, + "name": "groupDescending", + "_ui5privacy": "public", + "description": "The selected group order (true = descending, false = ascending)." + }, { "type": { "text": "Array" @@ -12756,6 +12937,15 @@ "text": "boolean" } }, + { + "description": "Defines the initial group order.", + "name": "group-descending", + "default": "false", + "fieldName": "groupDescending", + "type": { + "text": "boolean" + } + }, { "description": "Indicates if the dialog is open.", "name": "open", diff --git a/.storybook/custom-element-manifests/main.json b/.storybook/custom-element-manifests/main.json index e7b5c1f9e41..696a8b3a082 100644 --- a/.storybook/custom-element-manifests/main.json +++ b/.storybook/custom-element-manifests/main.json @@ -4,30 +4,30 @@ "modules": [ { "kind": "javascript-module", - "path": "dist/colorpicker-utils/ColorValue.js", + "path": "dist/delegate/DragAndDropHandler.js", "declarations": [], "exports": [ { "kind": "js", "name": "default", "declaration": { - "name": "ColorValue", - "module": "dist/colorpicker-utils/ColorValue.js" + "name": "DragAndDropHandler", + "module": "dist/delegate/DragAndDropHandler.js" } } ] }, { "kind": "javascript-module", - "path": "dist/delegate/DragAndDropHandler.js", + "path": "dist/colorpicker-utils/ColorValue.js", "declarations": [], "exports": [ { "kind": "js", "name": "default", "declaration": { - "name": "DragAndDropHandler", - "module": "dist/delegate/DragAndDropHandler.js" + "name": "ColorValue", + "module": "dist/colorpicker-utils/ColorValue.js" } } ] @@ -211,6 +211,21 @@ "declarations": [], "exports": [] }, + { + "kind": "javascript-module", + "path": "dist/features/InputComposition.js", + "declarations": [], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "InputComposition", + "module": "dist/features/InputComposition.js" + } + } + ] + }, { "kind": "javascript-module", "path": "dist/features/InputSuggestions.js", @@ -3482,7 +3497,6 @@ "kind": "enum", "name": "TableGrowingMode", "description": "Growing mode of the <ui5-table> component.", - "_ui5experimental": true, "_ui5privacy": "public", "members": [ { @@ -5581,7 +5595,7 @@ ] }, "default": "{}", - "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **expanded**: Indicates whether the button, or another grouping element it controls, is currently expanded or collapsed.\nAccepts the following string values: `true` or `false`\n\n- **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.\n\n- **controls**: Identifies the element (or elements) whose contents or presence are controlled by the button element.\nAccepts a lowercase string value.", + "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **expanded**: Indicates whether the button, or another grouping element it controls, is currently expanded or collapsed.\nAccepts the following string values: `true` or `false`\n\n- **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.\n\n- **ariaLabel**: Defines the accessible ARIA name of the component.\nAccepts any string value.\n\n - **ariaKeyShortcuts**: Defines keyboard shortcuts that activate or give focus to the button.\n\n- **controls**: Identifies the element (or elements) whose contents or presence are controlled by the button element.\nAccepts a lowercase string value.", "privacy": "public", "_ui5since": "1.2.0" }, @@ -5793,7 +5807,7 @@ } }, { - "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **expanded**: Indicates whether the button, or another grouping element it controls, is currently expanded or collapsed.\nAccepts the following string values: `true` or `false`\n\n- **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.\n\n- **controls**: Identifies the element (or elements) whose contents or presence are controlled by the button element.\nAccepts a lowercase string value.", + "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **expanded**: Indicates whether the button, or another grouping element it controls, is currently expanded or collapsed.\nAccepts the following string values: `true` or `false`\n\n- **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.\n\n- **ariaLabel**: Defines the accessible ARIA name of the component.\nAccepts any string value.\n\n - **ariaKeyShortcuts**: Defines keyboard shortcuts that activate or give focus to the button.\n\n- **controls**: Identifies the element (or elements) whose contents or presence are controlled by the button element.\nAccepts a lowercase string value.", "name": "accessibility-attributes", "default": "{}", "fieldName": "accessibilityAttributes", @@ -25572,7 +25586,7 @@ ] }, "default": "{}", - "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe `accessibilityAttributes` property accepts an object with the following optional fields:\n\n- **root**: Attributes that will be applied to the main (text) button.\n - **hasPopup**: Indicates the presence and type of popup triggered by the button.\n Accepts string values: `\"dialog\"`, `\"grid\"`, `\"listbox\"`, `\"menu\"`, or `\"tree\"`.\n - **roleDescription**: Provides a human-readable description for the role of the button.\n Accepts any string value.\n - **title**: Specifies a tooltip or description for screen readers.\n Accepts any string value.\n\n- **arrowButton**: Attributes applied specifically to the arrow (split) button.\n - **hasPopup**: Indicates the presence and type of popup triggered by the arrow button.\n Accepts string values: `\"dialog\"`, `\"grid\"`, `\"listbox\"`, `\"menu\"`, or `\"tree\"`.\n - **expanded**: Indicates whether the popup triggered by the arrow button is currently expanded.\n Accepts boolean values: `true` or `false`.", + "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe `accessibilityAttributes` property accepts an object with the following optional fields:\n\n- **root**: Attributes that will be applied to the main (text) button.\n - **hasPopup**: Indicates the presence and type of popup triggered by the button.\n Accepts string values: `\"dialog\"`, `\"grid\"`, `\"listbox\"`, `\"menu\"`, or `\"tree\"`.\n - **roleDescription**: Provides a human-readable description for the role of the button.\n Accepts any string value.\n - **title**: Specifies a tooltip or description for screen readers.\n Accepts any string value.\n\t- **ariaKeyShortcuts**: Defines keyboard shortcuts that activate or give focus to the button.\n\n- **arrowButton**: Attributes applied specifically to the arrow (split) button.\n - **hasPopup**: Indicates the presence and type of popup triggered by the arrow button.\n Accepts string values: `\"dialog\"`, `\"grid\"`, `\"listbox\"`, `\"menu\"`, or `\"tree\"`.\n - **expanded**: Indicates whether the popup triggered by the arrow button is currently expanded.\n Accepts boolean values: `true` or `false`.", "privacy": "public", "_ui5since": "2.13.0" } @@ -25648,7 +25662,7 @@ } }, { - "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe `accessibilityAttributes` property accepts an object with the following optional fields:\n\n- **root**: Attributes that will be applied to the main (text) button.\n - **hasPopup**: Indicates the presence and type of popup triggered by the button.\n Accepts string values: `\"dialog\"`, `\"grid\"`, `\"listbox\"`, `\"menu\"`, or `\"tree\"`.\n - **roleDescription**: Provides a human-readable description for the role of the button.\n Accepts any string value.\n - **title**: Specifies a tooltip or description for screen readers.\n Accepts any string value.\n\n- **arrowButton**: Attributes applied specifically to the arrow (split) button.\n - **hasPopup**: Indicates the presence and type of popup triggered by the arrow button.\n Accepts string values: `\"dialog\"`, `\"grid\"`, `\"listbox\"`, `\"menu\"`, or `\"tree\"`.\n - **expanded**: Indicates whether the popup triggered by the arrow button is currently expanded.\n Accepts boolean values: `true` or `false`.", + "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe `accessibilityAttributes` property accepts an object with the following optional fields:\n\n- **root**: Attributes that will be applied to the main (text) button.\n - **hasPopup**: Indicates the presence and type of popup triggered by the button.\n Accepts string values: `\"dialog\"`, `\"grid\"`, `\"listbox\"`, `\"menu\"`, or `\"tree\"`.\n - **roleDescription**: Provides a human-readable description for the role of the button.\n Accepts any string value.\n - **title**: Specifies a tooltip or description for screen readers.\n Accepts any string value.\n\t- **ariaKeyShortcuts**: Defines keyboard shortcuts that activate or give focus to the button.\n\n- **arrowButton**: Attributes applied specifically to the arrow (split) button.\n - **hasPopup**: Indicates the presence and type of popup triggered by the arrow button.\n Accepts string values: `\"dialog\"`, `\"grid\"`, `\"listbox\"`, `\"menu\"`, or `\"tree\"`.\n - **expanded**: Indicates whether the popup triggered by the arrow button is currently expanded.\n Accepts boolean values: `true` or `false`.", "name": "accessibility-attributes", "default": "{}", "fieldName": "accessibilityAttributes", @@ -28078,6 +28092,21 @@ } ] }, + { + "kind": "javascript-module", + "path": "dist/TableCustomAnnouncement.js", + "declarations": [], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "TableCustomAnnouncement", + "module": "dist/TableCustomAnnouncement.js" + } + } + ] + }, { "kind": "javascript-module", "path": "dist/TableDragAndDrop.js", @@ -31651,7 +31680,7 @@ ] }, "default": "{}", - "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **expanded**: Indicates whether the button, or another grouping element it controls, is currently expanded or collapsed.\nAccepts the following string values: `true` or `false`\n\n- **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.\n\n- **controls**: Identifies the element (or elements) whose contents or presence are controlled by the button element.\nAccepts a lowercase string value.", + "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **expanded**: Indicates whether the button, or another grouping element it controls, is currently expanded or collapsed.\nAccepts the following string values: `true` or `false`\n\n- **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.\n\n- **ariaLabel**: Defines the accessible ARIA name of the component.\nAccepts any string value.\n\n - **ariaKeyShortcuts**: Defines keyboard shortcuts that activate or give focus to the button.\n\n- **controls**: Identifies the element (or elements) whose contents or presence are controlled by the button element.\nAccepts a lowercase string value.", "privacy": "public", "_ui5since": "1.2.0", "inheritedFrom": { @@ -31865,7 +31894,7 @@ } }, { - "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **expanded**: Indicates whether the button, or another grouping element it controls, is currently expanded or collapsed.\nAccepts the following string values: `true` or `false`\n\n- **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.\n\n- **controls**: Identifies the element (or elements) whose contents or presence are controlled by the button element.\nAccepts a lowercase string value.", + "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **expanded**: Indicates whether the button, or another grouping element it controls, is currently expanded or collapsed.\nAccepts the following string values: `true` or `false`\n\n- **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.\n\n- **ariaLabel**: Defines the accessible ARIA name of the component.\nAccepts any string value.\n\n - **ariaKeyShortcuts**: Defines keyboard shortcuts that activate or give focus to the button.\n\n- **controls**: Identifies the element (or elements) whose contents or presence are controlled by the button element.\nAccepts a lowercase string value.", "name": "accessibility-attributes", "default": "{}", "fieldName": "accessibilityAttributes", @@ -32268,6 +32297,16 @@ "privacy": "public", "_ui5since": "2.5.0" }, + { + "kind": "field", + "name": "name", + "type": { + "text": "string | undefined" + }, + "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.\n**Note:** When the component is used inside a form element,\nthe value is sent as the first element in the form data, even if it's empty.", + "default": "undefined", + "privacy": "public" + }, { "kind": "field", "name": "showClearAll", @@ -32394,6 +32433,15 @@ "text": "boolean" } }, + { + "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.\n**Note:** When the component is used inside a form element,\nthe value is sent as the first element in the form data, even if it's empty.", + "name": "name", + "default": "undefined", + "fieldName": "name", + "type": { + "text": "string | undefined" + } + }, { "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.", "name": "show-clear-all", @@ -32473,7 +32521,7 @@ "slots": [ { "name": "default", - "description": "Defines the items of the component.\n \n **Note:** Currently only `ui5-toolbar-button`, `ui5-toolbar-select`, `ui5-toolbar-separator` and `ui5-toolbar-spacer` are allowed here.", + "description": "Defines the items of the component.\n\n**Note:** Currently only `ui5-toolbar-button`, `ui5-toolbar-select`, `ui5-toolbar-separator` and `ui5-toolbar-spacer` are allowed here.", "_ui5propertyName": "items", "_ui5type": { "text": "Array", @@ -33048,6 +33096,15 @@ ] }, "_ui5privacy": "public" + }, + { + "name": "label", + "description": "Defines the HTML element that will be displayed in the component input part,\nrepresenting the selected option.", + "_ui5since": "2.15.0", + "_ui5type": { + "text": "Array" + }, + "_ui5privacy": "public" } ], "members": [ @@ -33108,6 +33165,17 @@ "default": "undefined", "privacy": "public" }, + { + "kind": "field", + "name": "value", + "description": "Defines the value of the component:", + "privacy": "public", + "default": "\"\"", + "type": { + "text": "string | undefined" + }, + "_ui5since": "2.15.0" + }, { "kind": "field", "name": "overflowPriority", @@ -33242,6 +33310,15 @@ "text": "string | undefined" } }, + { + "description": "Defines the value of the component:", + "name": "value", + "default": "\"\"", + "fieldName": "value", + "type": { + "text": "any" + } + }, { "description": "Property used to define the access of the item to the overflow Popover. If \"NeverOverflow\" option is set,\nthe item never goes in the Popover, if \"AlwaysOverflow\" - it never comes out of it.", "name": "overflow-priority", diff --git a/config/version-info.json b/config/version-info.json index 46c1c951bae..ac042a05390 100644 --- a/config/version-info.json +++ b/config/version-info.json @@ -56,5 +56,6 @@ "2.11.0": "2.11.0", "2.12.0": "2.12.0", "2.13.1": "2.13.0", - "2.14.0": "2.14.0" + "2.14.0": "2.14.0", + "2.15.0": "2.15.0" } diff --git a/package.json b/package.json index af1d4d8f9a8..b0dc271e8c5 100644 --- a/package.json +++ b/package.json @@ -40,11 +40,11 @@ "@storybook/addon-a11y": "9.1.7", "@storybook/addon-docs": "9.1.7", "@storybook/react-vite": "9.1.7", - "@ui5/webcomponents": "2.14.0", - "@ui5/webcomponents-ai": "2.14.0", - "@ui5/webcomponents-compat": "2.14.0", - "@ui5/webcomponents-fiori": "2.14.0", - "@ui5/webcomponents-icons": "2.14.0", + "@ui5/webcomponents": "2.15.0", + "@ui5/webcomponents-ai": "2.15.0", + "@ui5/webcomponents-compat": "2.15.0", + "@ui5/webcomponents-fiori": "2.15.0", + "@ui5/webcomponents-icons": "2.15.0", "react": "19.1.1", "react-dom": "19.1.1", "remark-gfm": "4.0.1", diff --git a/packages/ai/package.json b/packages/ai/package.json index 7f47d32f416..3e03c25cd1a 100644 --- a/packages/ai/package.json +++ b/packages/ai/package.json @@ -45,7 +45,7 @@ "@ui5/webcomponents-react-base": "workspace:~" }, "peerDependencies": { - "@ui5/webcomponents-ai": "~2.14.0", + "@ui5/webcomponents-ai": "~2.15.0", "react": "^18 || ^19" }, "publishConfig": { diff --git a/packages/ai/src/components/Button/index.tsx b/packages/ai/src/components/Button/index.tsx index 9a0b73d22a1..13de18f1bc4 100644 --- a/packages/ai/src/components/Button/index.tsx +++ b/packages/ai/src/components/Button/index.tsx @@ -19,6 +19,9 @@ interface ButtonAttributes { * Accepts string values: `"dialog"`, `"grid"`, `"listbox"`, `"menu"`, or `"tree"`. * - **roleDescription**: Defines a human-readable description for the button's role. * Accepts any string value. + * - **title**: Specifies a tooltip or description for screen readers. + * Accepts any string value. + * - **ariaKeyShortcuts**: Defines keyboard shortcuts that activate or focus the button. * * - **arrowButton**: Accessibility attributes that will be applied to the arrow (split) button element. * - **hasPopup**: Indicates the type of popup triggered by the arrow button. diff --git a/packages/base/package.json b/packages/base/package.json index 970403876bb..1d0f20d325f 100644 --- a/packages/base/package.json +++ b/packages/base/package.json @@ -88,7 +88,7 @@ }, "peerDependencies": { "@types/react": "*", - "@ui5/webcomponents-base": "~2.14.0", + "@ui5/webcomponents-base": "~2.15.0", "react": "^18 || ^19" }, "peerDependenciesMeta": { diff --git a/packages/charts/package.json b/packages/charts/package.json index 8f5249e9392..7107cbde5cd 100644 --- a/packages/charts/package.json +++ b/packages/charts/package.json @@ -131,8 +131,8 @@ "recharts": "2.15.4" }, "peerDependencies": { - "@ui5/webcomponents-react": "~2.14.0", - "@ui5/webcomponents-react-base": "~2.14.0", + "@ui5/webcomponents-react": "~2.15.0", + "@ui5/webcomponents-react-base": "~2.15.0", "react": "^18 || ^19" }, "publishConfig": { diff --git a/packages/compat/package.json b/packages/compat/package.json index dba389a8de4..25f8ee89a9d 100644 --- a/packages/compat/package.json +++ b/packages/compat/package.json @@ -93,8 +93,8 @@ "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", - "@ui5/webcomponents-compat": "~2.14.0", - "@ui5/webcomponents-react": "~2.14.0", + "@ui5/webcomponents-compat": "~2.15.0", + "@ui5/webcomponents-react": "~2.15.0", "react": "^18 || ^19", "react-dom": "^18 || ^19" }, diff --git a/packages/cypress-commands/package.json b/packages/cypress-commands/package.json index ea789384fa8..a51dc25d548 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.14.0", - "@ui5/webcomponents-base": "~2.14.0", + "@ui5/webcomponents": "~2.15.0", + "@ui5/webcomponents-base": "~2.15.0", "cypress": "^12 || ^13 || ^14 || ^15" }, "peerDependenciesMeta": { diff --git a/packages/main/package.json b/packages/main/package.json index 3f6ff30cd0d..0e8aa47f350 100644 --- a/packages/main/package.json +++ b/packages/main/package.json @@ -308,6 +308,10 @@ "types": "./dist/webComponents/FormItem/index.d.ts", "default": "./dist/webComponents/FormItem/index.js" }, + "./GroupItem": { + "types": "./dist/webComponents/GroupItem/index.d.ts", + "default": "./dist/webComponents/GroupItem/index.js" + }, "./Icon": { "types": "./dist/webComponents/Icon/index.d.ts", "default": "./dist/webComponents/Icon/index.js" @@ -789,10 +793,10 @@ "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", - "@ui5/webcomponents": "~2.14.0", - "@ui5/webcomponents-base": "~2.14.0", - "@ui5/webcomponents-fiori": "~2.14.0", - "@ui5/webcomponents-icons": "~2.14.0", + "@ui5/webcomponents": "~2.15.0", + "@ui5/webcomponents-base": "~2.15.0", + "@ui5/webcomponents-fiori": "~2.15.0", + "@ui5/webcomponents-icons": "~2.15.0", "react": "^18 || ^19", "react-dom": "^18 || ^19" }, diff --git a/packages/main/src/components/AnalyticalTable/AnalyticalTable.module.css b/packages/main/src/components/AnalyticalTable/AnalyticalTable.module.css index 38bd553390d..bd60898a65c 100644 --- a/packages/main/src/components/AnalyticalTable/AnalyticalTable.module.css +++ b/packages/main/src/components/AnalyticalTable/AnalyticalTable.module.css @@ -199,6 +199,9 @@ &:hover:not([data-empty-row]) { background-color: var(--sapList_Hover_Background); } + &[data-is-selected]:hover { + background-color: var(--sapList_Hover_SelectionBackground); + } } .tableGroupHeader.tr { diff --git a/packages/main/src/webComponents/Button/index.tsx b/packages/main/src/webComponents/Button/index.tsx index 50e2f5a5be9..57d87b38715 100644 --- a/packages/main/src/webComponents/Button/index.tsx +++ b/packages/main/src/webComponents/Button/index.tsx @@ -20,6 +20,11 @@ interface ButtonAttributes { * - **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button. * Accepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`. * + * - **ariaLabel**: Defines the accessible ARIA name of the component. + * Accepts any string value. + * + * - **ariaKeyShortcuts**: Defines keyboard shortcuts that activate or give focus to the button. + * * - **controls**: Identifies the element (or elements) whose contents or presence are controlled by the button element. * Accepts a lowercase string value. * diff --git a/packages/main/src/webComponents/DynamicPageHeader/index.tsx b/packages/main/src/webComponents/DynamicPageHeader/index.tsx index 70c6c1f6d1c..46ac71141c0 100644 --- a/packages/main/src/webComponents/DynamicPageHeader/index.tsx +++ b/packages/main/src/webComponents/DynamicPageHeader/index.tsx @@ -37,6 +37,10 @@ interface DynamicPageHeaderPropTypes extends DynamicPageHeaderAttributes, OmitText is handled. If set to true, sequences of white space are preserved. + */ + renderWhitespace?: boolean; +} interface ExpandableTextAttributes { /** @@ -34,7 +64,10 @@ interface ExpandableTextAttributes { interface ExpandableTextDomRef extends Required, Ui5DomRef {} -interface ExpandableTextPropTypes extends ExpandableTextAttributes, Omit {} +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. @@ -52,7 +85,8 @@ interface ExpandableTextPropTypes extends ExpandableTextAttributes, Omit, Ui5DomRef {} interface FilterItemPropTypes extends FilterItemAttributes, Omit { /** - * Defines the `values` list. + * Defines the filter options available for this filter category. * * __Note:__ The content of the prop will be rendered into a [<slot>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot) by assigning the respective [slot](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/slot) attribute (`slot="values"`). * Since you can't change the DOM order of slots when declaring them within a prop, it might prove beneficial to manually mount them as part of the component's children, especially when facing problems with the reading order of screen readers. @@ -36,9 +37,13 @@ interface FilterItemPropTypes extends FilterItemAttributes, Omit {} /** + * The `FilterItemOption` component defines individual filter values within a `FilterItem`. + * It represents a single selectable option that users can choose to filter data. + * * ### Usage * - * For the `FilterItemOption` + * The `FilterItemOption` is used as a child component within `FilterItem` in the context + * of `ViewSettingsDialog`. Each option represents a specific value that can be used for filtering + * * * * __Note:__ This is a UI5 Web Component! [FilterItemOption UI5 Web Component Documentation](https://ui5.github.io/webcomponents/components/fiori/FilterItemOption) | [Repository](https://github.com/UI5/webcomponents) diff --git a/packages/main/src/webComponents/FlexibleColumnLayout/FlexibleColumnLayout.stories.tsx b/packages/main/src/webComponents/FlexibleColumnLayout/FlexibleColumnLayout.stories.tsx index 6faaf106a16..f8c6cbb16b3 100644 --- a/packages/main/src/webComponents/FlexibleColumnLayout/FlexibleColumnLayout.stories.tsx +++ b/packages/main/src/webComponents/FlexibleColumnLayout/FlexibleColumnLayout.stories.tsx @@ -47,6 +47,8 @@ export const Default: Story = { + + } midColumn={ @@ -54,6 +56,8 @@ export const Default: Story = { + + } endColumn={ @@ -61,6 +65,8 @@ export const Default: Story = { + + } /> diff --git a/packages/main/src/webComponents/GroupItem/index.tsx b/packages/main/src/webComponents/GroupItem/index.tsx new file mode 100644 index 00000000000..461ce3ec82a --- /dev/null +++ b/packages/main/src/webComponents/GroupItem/index.tsx @@ -0,0 +1,52 @@ +'use client'; + +import '@ui5/webcomponents-fiori/dist/GroupItem.js'; +import { withWebComponent } from '@ui5/webcomponents-react-base'; +import type { CommonProps, Ui5DomRef } from '@ui5/webcomponents-react-base'; + +interface GroupItemAttributes { + /** + * Defines if the group item is selected. + * @default false + */ + selected?: boolean; + + /** + * Defines the text of the group item. + * @default undefined + */ + text?: string | undefined; +} + +interface GroupItemDomRef extends Required, Ui5DomRef {} + +interface GroupItemPropTypes extends GroupItemAttributes, Omit {} + +/** + * The `GroupItem` component defines the grouping criteria for data in `ViewSettingsDialog`. + * It represents a single group option that users can select to organize data into logical groups. + * + * ### Usage + * + * The `GroupItem` is used within the `ViewSettingsDialog` to provide grouping options. + * Each group item represents a column or field by which data can be grouped. + * + * + * + * __Note:__ This is a UI5 Web Component! [GroupItem UI5 Web Component Documentation](https://ui5.github.io/webcomponents/components/fiori/GroupItem) | [Repository](https://github.com/UI5/webcomponents) + * + * @since [2.13.0](https://github.com/UI5/webcomponents/releases/tag/v2.13.0) of __@ui5/webcomponents-fiori__. + * @abstract + */ +const GroupItem = withWebComponent( + 'ui5-group-item', + ['text'], + ['selected'], + [], + [], +); + +GroupItem.displayName = 'GroupItem'; + +export { GroupItem }; +export type { GroupItemDomRef, GroupItemPropTypes }; diff --git a/packages/main/src/webComponents/SortItem/index.tsx b/packages/main/src/webComponents/SortItem/index.tsx index af4a2406654..3b70af71f5e 100644 --- a/packages/main/src/webComponents/SortItem/index.tsx +++ b/packages/main/src/webComponents/SortItem/index.tsx @@ -6,13 +6,13 @@ import type { CommonProps, Ui5DomRef } from '@ui5/webcomponents-react-base'; interface SortItemAttributes { /** - * Defines if the component is selected. + * Defines if the sort item is selected. * @default false */ selected?: boolean; /** - * Defines the text of the component. + * Defines the text of the sort item. * @default undefined */ text?: string | undefined; @@ -23,9 +23,14 @@ interface SortItemDomRef extends Required, Ui5DomRef {} interface SortItemPropTypes extends SortItemAttributes, Omit {} /** + * The `SortItem` component defines the sorting criteria for data in `ViewSettingsDialog`. + * It represents a single sort option that users can select to organize data in ascending or descending order. + * * ### Usage * - * For the `SortItem` + * The `SortItem` is used within the `ViewSettingsDialog` to provide sorting options. + * Each sort item represents a column or field by which data can be sorted. + * * * * __Note:__ This is a UI5 Web Component! [SortItem UI5 Web Component Documentation](https://ui5.github.io/webcomponents/components/fiori/SortItem) | [Repository](https://github.com/UI5/webcomponents) diff --git a/packages/main/src/webComponents/SplitButton/index.tsx b/packages/main/src/webComponents/SplitButton/index.tsx index fe9207bf797..d9bdc9c6d0e 100644 --- a/packages/main/src/webComponents/SplitButton/index.tsx +++ b/packages/main/src/webComponents/SplitButton/index.tsx @@ -19,6 +19,7 @@ interface SplitButtonAttributes { * Accepts any string value. * - **title**: Specifies a tooltip or description for screen readers. * Accepts any string value. + * - **ariaKeyShortcuts**: Defines keyboard shortcuts that activate or give focus to the button. * * - **arrowButton**: Attributes applied specifically to the arrow (split) button. * - **hasPopup**: Indicates the presence and type of popup triggered by the arrow button. diff --git a/packages/main/src/webComponents/ToggleButton/index.tsx b/packages/main/src/webComponents/ToggleButton/index.tsx index eb19fd492af..0fe92de1603 100644 --- a/packages/main/src/webComponents/ToggleButton/index.tsx +++ b/packages/main/src/webComponents/ToggleButton/index.tsx @@ -20,6 +20,11 @@ interface ToggleButtonAttributes { * - **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button. * Accepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`. * + * - **ariaLabel**: Defines the accessible ARIA name of the component. + * Accepts any string value. + * + * - **ariaKeyShortcuts**: Defines keyboard shortcuts that activate or give focus to the button. + * * - **controls**: Identifies the element (or elements) whose contents or presence are controlled by the button element. * Accepts a lowercase string value. * diff --git a/packages/main/src/webComponents/Tokenizer/index.tsx b/packages/main/src/webComponents/Tokenizer/index.tsx index e962d025c43..0aca70ae46c 100644 --- a/packages/main/src/webComponents/Tokenizer/index.tsx +++ b/packages/main/src/webComponents/Tokenizer/index.tsx @@ -40,6 +40,16 @@ interface TokenizerAttributes { */ multiLine?: boolean; + /** + * Determines the name by which the component will be identified upon submission in an HTML form. + * + * **Note:** This property is only applicable within the context of an HTML Form element. + * **Note:** When the component is used inside a form element, + * the value is sent as the first element in the form data, even if it's empty. + * @default undefined + */ + name?: string | undefined; + /** * Defines whether the component is read-only. * @@ -123,7 +133,7 @@ interface TokenizerPropTypes */ const Tokenizer = withWebComponent( 'ui5-tokenizer', - ['accessibleName', 'accessibleNameRef'], + ['accessibleName', 'accessibleNameRef', 'name'], ['disabled', 'multiLine', 'readonly', 'showClearAll'], [], ['selection-change', 'token-delete'], diff --git a/packages/main/src/webComponents/Toolbar/index.tsx b/packages/main/src/webComponents/Toolbar/index.tsx index b05f7ab849b..7c22ba187b2 100644 --- a/packages/main/src/webComponents/Toolbar/index.tsx +++ b/packages/main/src/webComponents/Toolbar/index.tsx @@ -47,7 +47,7 @@ interface ToolbarPropTypes extends ToolbarAttributes, Omit` */ diff --git a/packages/main/src/webComponents/ToolbarSelect/index.tsx b/packages/main/src/webComponents/ToolbarSelect/index.tsx index b5c36c77c13..443002c3850 100644 --- a/packages/main/src/webComponents/ToolbarSelect/index.tsx +++ b/packages/main/src/webComponents/ToolbarSelect/index.tsx @@ -5,7 +5,7 @@ import type { ToolbarSelectChangeEventDetail } from '@ui5/webcomponents/dist/Too import type ToolbarItemOverflowBehavior from '@ui5/webcomponents/dist/types/ToolbarItemOverflowBehavior.js'; import type ValueState from '@ui5/webcomponents-base/dist/types/ValueState.js'; import { withWebComponent } from '@ui5/webcomponents-react-base'; -import type { CommonProps, Ui5CustomEvent, Ui5DomRef } from '@ui5/webcomponents-react-base'; +import type { CommonProps, Ui5CustomEvent, Ui5DomRef, UI5WCSlotsNode } from '@ui5/webcomponents-react-base'; import type { ReactNode } from 'react'; interface ToolbarSelectAttributes { @@ -43,6 +43,13 @@ interface ToolbarSelectAttributes { */ preventOverflowClosing?: boolean; + /** + * Defines the value of the component: + * + * **Note:** Available since [v2.15.0](https://github.com/UI5/webcomponents/releases/tag/v2.15.0) of **@ui5/webcomponents**. + */ + value?: string | undefined; + /** * Defines the value state of the component. * @default "None" @@ -62,7 +69,7 @@ interface ToolbarSelectDomRef extends Required, Ui5DomR interface ToolbarSelectPropTypes extends ToolbarSelectAttributes, - Omit { + Omit { /** * Defines the component options. * @@ -74,6 +81,22 @@ interface ToolbarSelectPropTypes * __Supported Node Type/s:__ `Array` */ children?: ReactNode | ReactNode[]; + + /** + * Defines the HTML element that will be displayed in the component input part, + * representing the selected option. + * + * __Note:__ The content of the prop will be rendered into a [<slot>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot) by assigning the respective [slot](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/slot) attribute (`slot="label"`). + * Since you can't change the DOM order of slots when declaring them within a prop, it might prove beneficial to manually mount them as part of the component's children, especially when facing problems with the reading order of screen readers. + * + * __Note:__ When passing a custom React component to this prop, you have to make sure your component reads the `slot` prop and appends it to the most outer element of your component. + * Learn more about it [here](https://ui5.github.io/webcomponents-react/v2/?path=/docs/knowledge-base-handling-slots--docs). + * + * **Note:** Available since [v2.15.0](https://github.com/UI5/webcomponents/releases/tag/v2.15.0) of **@ui5/webcomponents**. + * + * __Supported Node Type/s:__ `Array` + */ + label?: UI5WCSlotsNode; /** * Fired when the selected option changes. * @@ -119,9 +142,9 @@ interface ToolbarSelectPropTypes */ const ToolbarSelect = withWebComponent( 'ui5-toolbar-select', - ['accessibleName', 'accessibleNameRef', 'overflowPriority', 'valueState', 'width'], + ['accessibleName', 'accessibleNameRef', 'overflowPriority', 'value', 'valueState', 'width'], ['disabled', 'preventOverflowClosing'], - [], + ['label'], ['change', 'close', 'open'], ); diff --git a/packages/main/src/webComponents/ViewSettingsDialog/ViewSettingsDialog.mdx b/packages/main/src/webComponents/ViewSettingsDialog/ViewSettingsDialog.mdx index 8d4da786b1e..e1fedb5edf6 100644 --- a/packages/main/src/webComponents/ViewSettingsDialog/ViewSettingsDialog.mdx +++ b/packages/main/src/webComponents/ViewSettingsDialog/ViewSettingsDialog.mdx @@ -4,6 +4,7 @@ import { ArgTypes, Canvas, Description, Markdown, Meta } from '@storybook/addon- import { FilterItem } from '../FilterItem/index'; import { FilterItemOption } from '../FilterItemOption/index'; import { SortItem } from '../SortItem/index'; +import { GroupItem } from '../GroupItem/index'; import * as ComponentStories from './ViewSettingsDialog.stories'; import { excludePropsForAbstract } from '@sb/utils'; @@ -73,4 +74,11 @@ const ViewSettingsDialogComponent = () => { +## GroupItem + +**Since v2.15.0** + + + +