diff --git a/.storybook/custom-element-manifests/fiori.json b/.storybook/custom-element-manifests/fiori.json index c98d2fd5dfd..5bcaef6d7c9 100644 --- a/.storybook/custom-element-manifests/fiori.json +++ b/.storybook/custom-element-manifests/fiori.json @@ -380,7 +380,7 @@ "privacy": "public", "description": "\"No Email v1\" illustration type.", "default": "NoMail_v1", - "deprecated": "Since 2.10.0, use NoMail instead", + "deprecated": "Deprecated as of version 2.11.0, use NoMail instead.", "name": "NoMail_v1", "readonly": true }, @@ -417,7 +417,7 @@ "privacy": "public", "description": "\"No Saved Items v1\" illustration type.", "default": "NoSavedItems_v1", - "deprecated": "Since 2.10.0, use NoSavedItems instead", + "deprecated": "Deprecated as of version 2.11.0, use NoSavedItems instead.", "name": "NoSavedItems_v1", "readonly": true }, @@ -445,7 +445,7 @@ "privacy": "public", "description": "\"No Tasks v1\" illustration type.", "default": "NoTasks_v1", - "deprecated": "Since 2.10.0, use NoTasks instead", + "deprecated": "Deprecated as of version 2.11.0, use NoTasks instead.", "name": "NoTasks_v1", "readonly": true }, @@ -455,7 +455,7 @@ "privacy": "public", "description": "\"No Dimensions Set\" illustration type.", "default": "NoDimensionsSet", - "deprecated": "Since 2.10.0, use NoChartData instead", + "deprecated": "Deprecated as of version 2.11.0, use NoChartData instead.", "name": "NoDimensionsSet", "readonly": true }, @@ -501,7 +501,7 @@ "privacy": "public", "description": "\"Add Column\" illustration type.", "default": "AddColumn", - "deprecated": "Since 2.10.0, use AddingColumns instead", + "deprecated": "Deprecated as of version 2.11.0, use AddingColumns instead.", "name": "AddColumn", "readonly": true }, @@ -511,7 +511,7 @@ "privacy": "public", "description": "\"Add People\" illustration type.", "default": "AddPeople", - "deprecated": "Since 2.10.0, use AddPeopleToCalendar instead", + "deprecated": "Deprecated as of version 2.11.0, use AddPeopleToCalendar instead.", "name": "AddPeople", "readonly": true }, @@ -530,7 +530,7 @@ "privacy": "public", "description": "\"Balloon Sky\" illustration type.", "default": "BalloonSky", - "deprecated": "Since 2.10.0, use ReceiveAppreciation instead", + "deprecated": "Deprecated as of version 2.11.0, use ReceiveAppreciation instead.", "name": "BalloonSky", "readonly": true }, @@ -540,7 +540,7 @@ "privacy": "public", "description": "\"Connection\" illustration type.", "default": "Connection", - "deprecated": "Since 2.10.0, use UnableToLoad instead", + "deprecated": "Deprecated as of version 2.11.0, use UnableToLoad instead.", "name": "Connection", "readonly": true }, @@ -550,7 +550,7 @@ "privacy": "public", "description": "\"Empty Calendar\" illustration type.", "default": "EmptyCalendar", - "deprecated": "Since 2.10.0, use NoActivities instead", + "deprecated": "Deprecated as of version 2.11.0, use NoActivities instead.", "name": "EmptyCalendar", "readonly": true }, @@ -560,7 +560,7 @@ "privacy": "public", "description": "\"Empty List\" illustration type.", "default": "EmptyList", - "deprecated": "Since 2.10.0, use NoEntries instead", + "deprecated": "Deprecated as of version 2.11.0, use NoEntries instead.", "name": "EmptyList", "readonly": true }, @@ -579,7 +579,7 @@ "privacy": "public", "description": "\"Error Screen\" illustration type.", "default": "ErrorScreen", - "deprecated": "Since 2.10.0, use UnableToUpload instead", + "deprecated": "Deprecated as of version 2.11.0, use UnableToUpload instead.", "name": "ErrorScreen", "readonly": true }, @@ -589,7 +589,7 @@ "privacy": "public", "description": "\"Filter Table\" illustration type.", "default": "FilterTable", - "deprecated": "Since 2.10.0, use FilteringColumns instead", + "deprecated": "Deprecated as of version 2.11.0, use FilteringColumns instead.", "name": "FilterTable", "readonly": true }, @@ -599,7 +599,7 @@ "privacy": "public", "description": "\"Group Table\" illustration type.", "default": "GroupTable", - "deprecated": "Since 2.10.0, use GroupingColumns instead", + "deprecated": "Deprecated as of version 2.11.0, use GroupingColumns instead.", "name": "GroupTable", "readonly": true }, @@ -645,7 +645,7 @@ "privacy": "public", "description": "\"Reload Screen\" illustration type.", "default": "ReloadScreen", - "deprecated": "Since 2.10.0, use UnableToLoad instead", + "deprecated": "Deprecated as of version 2.11.0, use UnableToLoad instead.", "name": "ReloadScreen", "readonly": true }, @@ -655,7 +655,7 @@ "privacy": "public", "description": "\"Resize Column\" illustration type.", "default": "ResizeColumn", - "deprecated": "Since 2.10.0, use ResizingColumns instead", + "deprecated": "Deprecated as of version 2.11.0, use ResizingColumns instead.", "name": "ResizeColumn", "readonly": true }, @@ -683,7 +683,7 @@ "privacy": "public", "description": "\"Search Earth\" illustration type.", "default": "SearchEarth", - "deprecated": "Since 2.10.0, use BeforeSearch instead", + "deprecated": "Deprecated as of version 2.11.0, use BeforeSearch instead.", "name": "SearchEarth", "readonly": true }, @@ -693,7 +693,7 @@ "privacy": "public", "description": "\"Search Folder\" illustration type.", "default": "SearchFolder", - "deprecated": "Since 2.10.0, use NoSearchResults instead", + "deprecated": "Deprecated as of version 2.11.0, use NoSearchResults instead.", "name": "SearchFolder", "readonly": true }, @@ -712,7 +712,7 @@ "privacy": "public", "description": "\"Simple Balloon\" illustration type.", "default": "SimpleBalloon", - "deprecated": "Since 2.10.0, use ReceiveAppreciation instead", + "deprecated": "Deprecated as of version 2.11.0, use ReceiveAppreciation instead.", "name": "SimpleBalloon", "readonly": true }, @@ -722,7 +722,7 @@ "privacy": "public", "description": "\"Simple Bell\" illustration type.", "default": "SimpleBell", - "deprecated": "Since 2.10.0, use NoNotifications instead", + "deprecated": "Deprecated as of version 2.11.0, use NoNotifications instead.", "name": "SimpleBell", "readonly": true }, @@ -732,7 +732,7 @@ "privacy": "public", "description": "\"Simple Calendar\" illustration type.", "default": "SimpleCalendar", - "deprecated": "Since 2.10.0, use NoActivities instead", + "deprecated": "Deprecated as of version 2.11.0, use NoActivities instead.", "name": "SimpleCalendar", "readonly": true }, @@ -742,7 +742,7 @@ "privacy": "public", "description": "\"Simple CheckMark\" illustration type.", "default": "SimpleCheckMark", - "deprecated": "Since 2.10.0, use KeyTask instead", + "deprecated": "Deprecated as of version 2.11.0, use KeyTask instead.", "name": "SimpleCheckMark", "readonly": true }, @@ -752,7 +752,7 @@ "privacy": "public", "description": "\"Simple Connection\" illustration type.", "default": "SimpleConnection", - "deprecated": "Since 2.10.0, use UnableToLoad instead", + "deprecated": "Deprecated as of version 2.11.0, use UnableToLoad instead.", "name": "SimpleConnection", "readonly": true }, @@ -762,7 +762,7 @@ "privacy": "public", "description": "\"Simple Empty Doc\" illustration type.", "default": "SimpleEmptyDoc", - "deprecated": "Since 2.10.0, use NoData instead", + "deprecated": "Deprecated as of version 2.11.0, use NoData instead.", "name": "SimpleEmptyDoc", "readonly": true }, @@ -772,7 +772,7 @@ "privacy": "public", "description": "\"Simple Empty List\" illustration type.", "default": "SimpleEmptyList", - "deprecated": "Since 2.10.0, use NoEntries instead", + "deprecated": "Deprecated as of version 2.11.0, use NoEntries instead.", "name": "SimpleEmptyList", "readonly": true }, @@ -782,7 +782,7 @@ "privacy": "public", "description": "\"Simple Error\" illustration type.", "default": "SimpleError", - "deprecated": "Since 2.10.0, use UnableToUpload instead", + "deprecated": "Deprecated as of version 2.11.0, use UnableToUpload instead.", "name": "SimpleError", "readonly": true }, @@ -792,7 +792,7 @@ "privacy": "public", "description": "\"Simple Magnifier\" illustration type.", "default": "SimpleMagnifier", - "deprecated": "Since 2.10.0, use BeforeSearch instead", + "deprecated": "Deprecated as of version 2.11.0, use BeforeSearch instead.", "name": "SimpleMagnifier", "readonly": true }, @@ -802,7 +802,7 @@ "privacy": "public", "description": "\"Simple Mail\" illustration type.", "default": "SimpleMail", - "deprecated": "Since 2.10.0, use NoMail instead", + "deprecated": "Deprecated as of version 2.11.0, use NoMail instead.", "name": "SimpleMail", "readonly": true }, @@ -812,7 +812,7 @@ "privacy": "public", "description": "\"Simple No Saved Items\" illustration type.", "default": "SimpleNoSavedItems", - "deprecated": "Since 2.10.0, use NoSavedItems instead", + "deprecated": "Deprecated as of version 2.11.0, use NoSavedItems instead.", "name": "SimpleNoSavedItems", "readonly": true }, @@ -822,7 +822,7 @@ "privacy": "public", "description": "\"Simple Not Found Magnifier\" illustration type.", "default": "SimpleNotFoundMagnifier", - "deprecated": "Since 2.10.0, use NoSearchResults instead", + "deprecated": "Deprecated as of version 2.11.0, use NoSearchResults instead.", "name": "SimpleNotFoundMagnifier", "readonly": true }, @@ -832,7 +832,7 @@ "privacy": "public", "description": "\"Simple Reload\" illustration type.", "default": "SimpleReload", - "deprecated": "Since 2.10.0, use UnableToLoad instead", + "deprecated": "Deprecated as of version 2.11.0, use UnableToLoad instead.", "name": "SimpleReload", "readonly": true }, @@ -842,7 +842,7 @@ "privacy": "public", "description": "\"Simple Task\" illustration type.", "default": "SimpleTask", - "deprecated": "Since 2.10.0, use NoTasks instead", + "deprecated": "Deprecated as of version 2.11.0, use NoTasks instead.", "name": "SimpleTask", "readonly": true }, @@ -852,7 +852,7 @@ "privacy": "public", "description": "\"Sleeping Bell\" illustration type.", "default": "SleepingBell", - "deprecated": "Since 2.10.0, use NoNotifications instead", + "deprecated": "Deprecated as of version 2.11.0, use NoNotifications instead.", "name": "SleepingBell", "readonly": true }, @@ -862,7 +862,7 @@ "privacy": "public", "description": "\"Sort Column\" illustration type.", "default": "SortColumn", - "deprecated": "Since 2.10.0, use SortingColumns instead", + "deprecated": "Deprecated as of version 2.11.0, use SortingColumns instead.", "name": "SortColumn", "readonly": true }, @@ -881,7 +881,7 @@ "privacy": "public", "description": "\"Success Balloon\" illustration type.", "default": "SuccessBalloon", - "deprecated": "Since 2.10.0, use ReceiveAppreciation instead", + "deprecated": "Deprecated as of version 2.11.0, use ReceiveAppreciation instead.", "name": "SuccessBalloon", "readonly": true }, @@ -891,7 +891,7 @@ "privacy": "public", "description": "\"Success CheckMark\" illustration type.", "default": "SuccessCheckMark", - "deprecated": "Since 2.10.0, use KeyTask instead", + "deprecated": "Deprecated as of version 2.11.0, use KeyTask instead.", "name": "SuccessCheckMark", "readonly": true }, @@ -901,7 +901,7 @@ "privacy": "public", "description": "\"Success HighFive\" illustration type.", "default": "SuccessHighFive", - "deprecated": "Since 2.10.0, use ReceiveAppreciation instead", + "deprecated": "Deprecated as of version 2.11.0, use ReceiveAppreciation instead.", "name": "SuccessHighFive", "readonly": true }, @@ -911,7 +911,7 @@ "privacy": "public", "description": "\"Success Screen\" illustration type.", "default": "SuccessScreen", - "deprecated": "Since 2.10.0, use KeyTask instead", + "deprecated": "Deprecated as of version 2.11.0, use KeyTask instead.", "name": "SuccessScreen", "readonly": true }, @@ -930,7 +930,7 @@ "privacy": "public", "description": "\"Tent\" illustration type.", "default": "Tent", - "deprecated": "Since 2.10.0, use NoData instead", + "deprecated": "Deprecated as of version 2.11.0, use NoData instead.", "name": "Tent", "readonly": true }, @@ -940,7 +940,7 @@ "privacy": "public", "description": "\"Upload Collection\" illustration type.", "default": "UploadCollection", - "deprecated": "Since 2.10.0, use DragFilesToUpload instead", + "deprecated": "Deprecated as of version 2.11.0, use DragFilesToUpload instead.", "name": "UploadCollection", "readonly": true }, @@ -6459,6 +6459,22 @@ }, "_ui5privacy": "public" }, + { + "name": "branding", + "description": "Defines the branding slot.\nThe `ui5-shellbar-branding` component is intended to be placed inside this slot.\nContent placed here takes precedence over the `primaryTitle` property and the `logo` content slot.\n\n**Note:** The `branding` slot is in an experimental state and is a subject to change.", + "_ui5since": "2.12.0", + "_ui5type": { + "text": "Array", + "references": [ + { + "name": "ShellBarBranding", + "package": "@ui5/webcomponents-fiori", + "module": "dist/ShellBarBranding.js" + } + ] + }, + "_ui5privacy": "public" + }, { "name": "default", "description": "Defines the `ui5-shellbar` additional items.\n\n**Note:**\nYou can use the ``.", @@ -7136,6 +7152,138 @@ } ] }, + { + "kind": "javascript-module", + "path": "dist/ShellBarBranding.js", + "declarations": [ + { + "kind": "class", + "description": "### Overview\nThe `ui5-shellbar-branding` component is intended to be placed inside the branding slot of the\n`ui5-shellbar` component. Its content has higher priority than the `primaryTitle` property\nand the `logo` slot of `ui5-shellbar`.", + "name": "ShellBarBranding", + "slots": [ + { + "name": "default", + "description": "Defines the title for the ui5-shellbar-branding component.\n\n**Note:** Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.", + "_ui5propertyName": "content", + "_ui5type": { + "text": "Array" + }, + "_ui5privacy": "public" + }, + { + "name": "logo", + "description": "Defines the logo of the `ui5-shellbar`.\nFor example, you can use `ui5-avatar` or `img` elements as logo.", + "_ui5type": { + "text": "Array" + }, + "_ui5privacy": "public" + } + ], + "members": [ + { + "kind": "field", + "name": "href", + "type": { + "text": "string | undefined" + }, + "description": "Defines the component href.\n\n**Note:** Standard hyperlink behavior is supported.", + "default": "undefined", + "privacy": "public" + }, + { + "kind": "field", + "name": "target", + "type": { + "text": "string | undefined" + }, + "description": "Defines the component target.\n\n**Notes:**\n\n- `_self`\n- `_top`\n- `_blank`\n- `_parent`\n- `_search`\n\n**This property must only be used when the `href` property is set.**", + "default": "undefined", + "privacy": "public" + }, + { + "kind": "field", + "name": "accessibleName", + "type": { + "text": "string | undefined" + }, + "description": "Defines the text alternative of the component.\nIf not provided a default text alternative will be set, if present.", + "default": "undefined", + "privacy": "public" + } + ], + "events": [ + { + "name": "click", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" + }, + "description": "Fired, when the logo is activated.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true + } + ], + "attributes": [ + { + "description": "Defines the component href.\n\n**Note:** Standard hyperlink behavior is supported.", + "name": "href", + "default": "undefined", + "fieldName": "href", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines the component target.\n\n**Notes:**\n\n- `_self`\n- `_top`\n- `_blank`\n- `_parent`\n- `_search`\n\n**This property must only be used when the `href` property is set.**", + "name": "target", + "default": "undefined", + "fieldName": "target", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines the text alternative of the component.\nIf not provided a default text alternative will be set, if present.", + "name": "accessible-name", + "default": "undefined", + "fieldName": "accessibleName", + "type": { + "text": "string | undefined" + } + } + ], + "superclass": { + "name": "UI5Element", + "package": "@ui5/webcomponents-base", + "module": "dist/UI5Element.js" + }, + "tagName": "ui5-shellbar-branding", + "customElement": true, + "_ui5experimental": true, + "_ui5since": "2.12.0", + "_ui5privacy": "public" + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "ShellBarBranding", + "module": "dist/ShellBarBranding.js" + } + }, + { + "kind": "custom-element-definition", + "name": "ui5-shellbar-branding", + "declaration": { + "name": "ShellBarBranding", + "module": "dist/ShellBarBranding.js" + } + } + ] + }, { "kind": "javascript-module", "path": "dist/ShellBarItem.js", @@ -8178,7 +8326,7 @@ "text": "boolean" }, "default": "false", - "description": "Defines whether the item is selected", + "description": "Defines whether the item is selected.\n\n**Note:** Items that have a set `href` and `target` set to `_blank` should not be selectable.", "privacy": "public", "inheritedFrom": { "name": "SideNavigationSelectableItemBase", @@ -8206,7 +8354,7 @@ "type": { "text": "string | undefined" }, - "description": "Defines the component target.\n\n**Notes:**\n\n- `_self`\n- `_top`\n- `_blank`\n- `_parent`\n- `_search`\n\n**This property must only be used when the `href` property is set.**", + "description": "Defines the component target.\n\nPossible values:\n\n- `_self`\n- `_top`\n- `_blank`\n- `_parent`\n- `framename`\n\n**Note:** Items that have a defined `href` and `target`\nattribute set to `_blank` should not be selectable.", "privacy": "public", "default": "undefined", "_ui5since": "1.19.0", @@ -8244,7 +8392,7 @@ "text": "boolean" }, "default": "false", - "description": "Indicates whether the navigation item is selectable. By default all items are selectable unless specifically marked as unselectable.\n\nWhen a parent item is marked as unselectable, selecting it will only expand or collapse its sub-items.\nTo improve user experience do not mix unselectable parent items with selectable parent items in a single side navigation.\n\n\n**Guidelines**:\n- External links should be unselectable.\n- Items that trigger actions (with design \"Action\") should be unselectable.", + "description": "Indicates whether the navigation item is selectable. By default, all items are selectable unless specifically marked as unselectable.\n\nWhen a parent item is marked as unselectable, selecting it will only expand or collapse its sub-items.\nTo improve user experience do not mix unselectable parent items with selectable parent items in a single side navigation.\n\n\n**Guidelines**:\n- Items with an assigned `href` and a target of `_blank` should be marked as unselectable.\n- Items that trigger actions (with design \"Action\") should be marked as unselectable.", "privacy": "public", "_ui5since": "2.7.0", "inheritedFrom": { @@ -8343,7 +8491,7 @@ } }, { - "description": "Defines whether the item is selected", + "description": "Defines whether the item is selected.\n\n**Note:** Items that have a set `href` and `target` set to `_blank` should not be selectable.", "name": "selected", "default": "false", "fieldName": "selected", @@ -8369,7 +8517,7 @@ } }, { - "description": "Defines the component target.\n\n**Notes:**\n\n- `_self`\n- `_top`\n- `_blank`\n- `_parent`\n- `_search`\n\n**This property must only be used when the `href` property is set.**", + "description": "Defines the component target.\n\nPossible values:\n\n- `_self`\n- `_top`\n- `_blank`\n- `_parent`\n- `framename`\n\n**Note:** Items that have a defined `href` and `target`\nattribute set to `_blank` should not be selectable.", "name": "target", "default": "undefined", "fieldName": "target", @@ -8395,7 +8543,7 @@ } }, { - "description": "Indicates whether the navigation item is selectable. By default all items are selectable unless specifically marked as unselectable.\n\nWhen a parent item is marked as unselectable, selecting it will only expand or collapse its sub-items.\nTo improve user experience do not mix unselectable parent items with selectable parent items in a single side navigation.\n\n\n**Guidelines**:\n- External links should be unselectable.\n- Items that trigger actions (with design \"Action\") should be unselectable.", + "description": "Indicates whether the navigation item is selectable. By default, all items are selectable unless specifically marked as unselectable.\n\nWhen a parent item is marked as unselectable, selecting it will only expand or collapse its sub-items.\nTo improve user experience do not mix unselectable parent items with selectable parent items in a single side navigation.\n\n\n**Guidelines**:\n- Items with an assigned `href` and a target of `_blank` should be marked as unselectable.\n- Items that trigger actions (with design \"Action\") should be marked as unselectable.", "name": "unselectable", "default": "false", "fieldName": "unselectable", @@ -8668,7 +8816,7 @@ "text": "boolean" }, "default": "false", - "description": "Defines whether the item is selected", + "description": "Defines whether the item is selected.\n\n**Note:** Items that have a set `href` and `target` set to `_blank` should not be selectable.", "privacy": "public" }, { @@ -8688,7 +8836,7 @@ "type": { "text": "string | undefined" }, - "description": "Defines the component target.\n\n**Notes:**\n\n- `_self`\n- `_top`\n- `_blank`\n- `_parent`\n- `_search`\n\n**This property must only be used when the `href` property is set.**", + "description": "Defines the component target.\n\nPossible values:\n\n- `_self`\n- `_top`\n- `_blank`\n- `_parent`\n- `framename`\n\n**Note:** Items that have a defined `href` and `target`\nattribute set to `_blank` should not be selectable.", "privacy": "public", "default": "undefined", "_ui5since": "1.19.0" @@ -8718,7 +8866,7 @@ "text": "boolean" }, "default": "false", - "description": "Indicates whether the navigation item is selectable. By default all items are selectable unless specifically marked as unselectable.\n\nWhen a parent item is marked as unselectable, selecting it will only expand or collapse its sub-items.\nTo improve user experience do not mix unselectable parent items with selectable parent items in a single side navigation.\n\n\n**Guidelines**:\n- External links should be unselectable.\n- Items that trigger actions (with design \"Action\") should be unselectable.", + "description": "Indicates whether the navigation item is selectable. By default, all items are selectable unless specifically marked as unselectable.\n\nWhen a parent item is marked as unselectable, selecting it will only expand or collapse its sub-items.\nTo improve user experience do not mix unselectable parent items with selectable parent items in a single side navigation.\n\n\n**Guidelines**:\n- Items with an assigned `href` and a target of `_blank` should be marked as unselectable.\n- Items that trigger actions (with design \"Action\") should be marked as unselectable.", "privacy": "public", "_ui5since": "2.7.0" }, @@ -8850,7 +8998,7 @@ } }, { - "description": "Defines whether the item is selected", + "description": "Defines whether the item is selected.\n\n**Note:** Items that have a set `href` and `target` set to `_blank` should not be selectable.", "name": "selected", "default": "false", "fieldName": "selected", @@ -8868,7 +9016,7 @@ } }, { - "description": "Defines the component target.\n\n**Notes:**\n\n- `_self`\n- `_top`\n- `_blank`\n- `_parent`\n- `_search`\n\n**This property must only be used when the `href` property is set.**", + "description": "Defines the component target.\n\nPossible values:\n\n- `_self`\n- `_top`\n- `_blank`\n- `_parent`\n- `framename`\n\n**Note:** Items that have a defined `href` and `target`\nattribute set to `_blank` should not be selectable.", "name": "target", "default": "undefined", "fieldName": "target", @@ -8886,7 +9034,7 @@ } }, { - "description": "Indicates whether the navigation item is selectable. By default all items are selectable unless specifically marked as unselectable.\n\nWhen a parent item is marked as unselectable, selecting it will only expand or collapse its sub-items.\nTo improve user experience do not mix unselectable parent items with selectable parent items in a single side navigation.\n\n\n**Guidelines**:\n- External links should be unselectable.\n- Items that trigger actions (with design \"Action\") should be unselectable.", + "description": "Indicates whether the navigation item is selectable. By default, all items are selectable unless specifically marked as unselectable.\n\nWhen a parent item is marked as unselectable, selecting it will only expand or collapse its sub-items.\nTo improve user experience do not mix unselectable parent items with selectable parent items in a single side navigation.\n\n\n**Guidelines**:\n- Items with an assigned `href` and a target of `_blank` should be marked as unselectable.\n- Items that trigger actions (with design \"Action\") should be marked as unselectable.", "name": "unselectable", "default": "false", "fieldName": "unselectable", @@ -8995,7 +9143,7 @@ "text": "boolean" }, "default": "false", - "description": "Defines whether the item is selected", + "description": "Defines whether the item is selected.\n\n**Note:** Items that have a set `href` and `target` set to `_blank` should not be selectable.", "privacy": "public", "inheritedFrom": { "name": "SideNavigationSelectableItemBase", @@ -9023,7 +9171,7 @@ "type": { "text": "string | undefined" }, - "description": "Defines the component target.\n\n**Notes:**\n\n- `_self`\n- `_top`\n- `_blank`\n- `_parent`\n- `_search`\n\n**This property must only be used when the `href` property is set.**", + "description": "Defines the component target.\n\nPossible values:\n\n- `_self`\n- `_top`\n- `_blank`\n- `_parent`\n- `framename`\n\n**Note:** Items that have a defined `href` and `target`\nattribute set to `_blank` should not be selectable.", "privacy": "public", "default": "undefined", "_ui5since": "1.19.0", @@ -9061,7 +9209,7 @@ "text": "boolean" }, "default": "false", - "description": "Indicates whether the navigation item is selectable. By default all items are selectable unless specifically marked as unselectable.\n\nWhen a parent item is marked as unselectable, selecting it will only expand or collapse its sub-items.\nTo improve user experience do not mix unselectable parent items with selectable parent items in a single side navigation.\n\n\n**Guidelines**:\n- External links should be unselectable.\n- Items that trigger actions (with design \"Action\") should be unselectable.", + "description": "Indicates whether the navigation item is selectable. By default, all items are selectable unless specifically marked as unselectable.\n\nWhen a parent item is marked as unselectable, selecting it will only expand or collapse its sub-items.\nTo improve user experience do not mix unselectable parent items with selectable parent items in a single side navigation.\n\n\n**Guidelines**:\n- Items with an assigned `href` and a target of `_blank` should be marked as unselectable.\n- Items that trigger actions (with design \"Action\") should be marked as unselectable.", "privacy": "public", "_ui5since": "2.7.0", "inheritedFrom": { @@ -9161,7 +9309,7 @@ } }, { - "description": "Defines whether the item is selected", + "description": "Defines whether the item is selected.\n\n**Note:** Items that have a set `href` and `target` set to `_blank` should not be selectable.", "name": "selected", "default": "false", "fieldName": "selected", @@ -9187,7 +9335,7 @@ } }, { - "description": "Defines the component target.\n\n**Notes:**\n\n- `_self`\n- `_top`\n- `_blank`\n- `_parent`\n- `_search`\n\n**This property must only be used when the `href` property is set.**", + "description": "Defines the component target.\n\nPossible values:\n\n- `_self`\n- `_top`\n- `_blank`\n- `_parent`\n- `framename`\n\n**Note:** Items that have a defined `href` and `target`\nattribute set to `_blank` should not be selectable.", "name": "target", "default": "undefined", "fieldName": "target", @@ -9213,7 +9361,7 @@ } }, { - "description": "Indicates whether the navigation item is selectable. By default all items are selectable unless specifically marked as unselectable.\n\nWhen a parent item is marked as unselectable, selecting it will only expand or collapse its sub-items.\nTo improve user experience do not mix unselectable parent items with selectable parent items in a single side navigation.\n\n\n**Guidelines**:\n- External links should be unselectable.\n- Items that trigger actions (with design \"Action\") should be unselectable.", + "description": "Indicates whether the navigation item is selectable. By default, all items are selectable unless specifically marked as unselectable.\n\nWhen a parent item is marked as unselectable, selecting it will only expand or collapse its sub-items.\nTo improve user experience do not mix unselectable parent items with selectable parent items in a single side navigation.\n\n\n**Guidelines**:\n- Items with an assigned `href` and a target of `_blank` should be marked as unselectable.\n- Items that trigger actions (with design \"Action\") should be marked as unselectable.", "name": "unselectable", "default": "false", "fieldName": "unselectable", @@ -11124,7 +11272,7 @@ }, { "name": "endContent", - "description": "Defines the components that should be displayed at the end of the menu item.\n\n**Note:** It is highly recommended to slot only components of type `ui5-button`,`ui5-link`\nor `ui5-icon` in order to preserve the intended design. If there are components added to this slot,\nand there is text set in `additionalText`, it will not be displayed. If there are items added to `items` slot,\nnether `additionalText` nor components added to this slot would be displayed.\n\nThe priority of what will be displayed at the end of the menu item is as follows:\nsub-menu arrow (if there are items added in `items` slot) -> components added in `endContent` -> text set to `additionalText`.", + "description": "Defines the components that should be displayed at the end of the menu item.\n\n**Note:** It is highly recommended to slot only components of type `ui5-button`,`ui5-link`\nor `ui5-icon` in order to preserve the intended design. If there are components added to this slot,\nand there is text set in `additionalText`, it will not be displayed. If there are items added to `items` slot,\nnether `additionalText` nor components added to this slot would be displayed.\n\nThe priority of what will be displayed at the end of the menu item is as follows:\nsub-menu arrow (if there are items added in `items` slot) -> components added in `endContent` -> text set to `additionalText`.\n\nApplication developers are responsible for ensuring that interactive elements placed in the `endContent` slot\nhave the correct accessibility behaviour, including their enabled or disabled states.\nThe menu does not manage these aspects when the menu item state changes.", "_ui5since": "2.0.0", "_ui5type": { "text": "Array" @@ -11201,7 +11349,7 @@ "text": "boolean" }, "default": "false", - "description": "Defines whether `ui5-menu-item` is in disabled state.\n\n**Note:** A disabled `ui5-menu-item` is noninteractive.", + "description": "Defines whether menu item is in disabled state.\n\n**Note:** A disabled menu item is noninteractive.", "privacy": "public", "inheritedFrom": { "name": "ListItemBase", @@ -11215,7 +11363,7 @@ "text": "boolean" }, "default": "false", - "description": "Defines the delay in milliseconds, after which the loading indicator will be displayed inside the corresponding ui5-menu popover.\n\n**Note:** If set to `true` a `ui5-busy-indicator` component will be displayed into the related one to the current `ui5-menu-item` sub-menu popover.", + "description": "Defines the delay in milliseconds, after which the loading indicator will be displayed inside the corresponding menu popover.\n\n**Note:** If set to `true` a busy indicator component will be displayed into the related one to the current menu item sub-menu popover.", "privacy": "public", "_ui5since": "1.13.0" }, @@ -11226,7 +11374,7 @@ "text": "number" }, "default": "1000", - "description": "Defines the delay in milliseconds, after which the loading indicator will be displayed inside the corresponding ui5-menu popover.", + "description": "Defines the delay in milliseconds, after which the loading indicator will be displayed inside the corresponding menu popover.", "privacy": "public", "_ui5since": "1.13.0" }, @@ -11260,6 +11408,17 @@ "module": "dist/ListItem.js" } }, + { + "kind": "field", + "name": "checked", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines whether menu item is in checked state.\n\n**Note:** checked state is only taken into account when menu item is added to menu item group\nwith `checkMode` other than `None`.\n\n**Note:** A checked menu item has a checkmark displayed at its end.", + "privacy": "public", + "_ui5since": "2.12.0" + }, { "kind": "field", "name": "accessibilityAttributes", @@ -11381,7 +11540,7 @@ }, "name": "item", "_ui5privacy": "public", - "description": "The `ui5-menu-item` that triggers opening of the sub-menu or undefined when fired upon root menu opening." + "description": "The menu item that triggers opening of the sub-menu or undefined when fired upon root menu opening." } ] }, @@ -11437,6 +11596,18 @@ "_ui5Bubbles": false, "_ui5since": "1.10.0" }, + { + "name": "check", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" + }, + "description": "Fired when an item is checked or unchecked.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true, + "_ui5since": "2.12.0" + }, { "name": "detail-click", "_ui5privacy": "public", @@ -11474,6 +11645,82 @@ } ] }, + { + "kind": "javascript-module", + "path": "dist/UserMenuItemGroup.js", + "declarations": [ + { + "kind": "class", + "description": "### Overview\n\nThe `ui5-user-menu-item-group` component represents a group of items designed for use inside a `ui5-user-menu`.\nItems belonging to the same group should be wrapped by a `ui5-user-menu-item-group`.\nEach group can have an `itemCheckMode` property, which defines the check mode for the items within the group.\nThe possible values for `itemCheckMode` are:\n- 'None' (default) - no items can be checked\n- 'Single' - Only one item can be checked at a time\n- 'Multiple' - Multiple items can be checked simultaneously\n\n**Note:** If the `itemCheckMode` property is set to 'Single', only one item can remain checked at any given time.\nIf multiple items are marked as checked, the last checked item will take precedence.\n\n### Usage\n\n`ui5-user-menu-item-group` represents a collection of `ui5-user-menu-item` components that can have the same check mode.\nThe items are addeed to the group's `items` slot.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/UserMenuItemGroup.js\";`", + "name": "UserMenuItemGroup", + "superclass": { + "name": "MenuItemGroup", + "package": "@ui5/webcomponents", + "module": "dist/MenuItemGroup.js" + }, + "tagName": "ui5-user-menu-item-group", + "customElement": true, + "_ui5experimental": true, + "_ui5since": "2.12.0", + "_ui5privacy": "public", + "members": [ + { + "kind": "field", + "name": "checkMode", + "type": { + "text": "MenuItemGroupCheckMode", + "references": [ + { + "name": "MenuItemGroupCheckMode", + "package": "@ui5/webcomponents", + "module": "dist/types/MenuItemGroupCheckMode.js" + } + ] + }, + "default": "\"None\"", + "description": "Defines the component's check mode.", + "privacy": "public" + } + ], + "slots": [ + { + "name": "default", + "description": "Defines the items of this component.\n**Note:** The slot can hold any combination of components of type `ui5-menu-item` or `ui5-menu-separator` or both.", + "_ui5propertyName": "items", + "_ui5type": { + "text": "Array", + "references": [ + { + "name": "IMenuItem", + "package": "@ui5/webcomponents", + "module": "dist/Menu.js" + } + ] + }, + "_ui5privacy": "public" + } + ] + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "UserMenuItemGroup", + "module": "dist/UserMenuItemGroup.js" + } + }, + { + "kind": "custom-element-definition", + "name": "ui5-user-menu-item-group", + "declaration": { + "name": "UserMenuItemGroup", + "module": "dist/UserMenuItemGroup.js" + } + } + ] + }, { "kind": "javascript-module", "path": "dist/UserSettingsDialog.js", diff --git a/.storybook/custom-element-manifests/main.json b/.storybook/custom-element-manifests/main.json index e2f88553a00..8c7e12d697a 100644 --- a/.storybook/custom-element-manifests/main.json +++ b/.storybook/custom-element-manifests/main.json @@ -25,7 +25,7 @@ "kind": "class", "description": "", "name": "DateRangeRange", - "_ui5since": "2.0.0", + "_ui5since": "2.11.0", "_ui5privacy": "public" } ], @@ -48,7 +48,7 @@ "kind": "class", "description": "", "name": "SingleDate", - "_ui5since": "2.0.0", + "_ui5since": "2.11.0", "_ui5privacy": "public" } ], @@ -71,7 +71,7 @@ "kind": "class", "description": "", "name": "Today", - "_ui5since": "2.0.0", + "_ui5since": "2.11.0", "_ui5privacy": "public" } ], @@ -94,7 +94,7 @@ "kind": "class", "description": "", "name": "Tomorrow", - "_ui5since": "2.0.0", + "_ui5since": "2.11.0", "_ui5privacy": "public" } ], @@ -117,7 +117,7 @@ "kind": "class", "description": "", "name": "Yesterday", - "_ui5since": "2.0.0", + "_ui5since": "2.11.0", "_ui5privacy": "public" } ], @@ -2517,6 +2517,58 @@ } ] }, + { + "kind": "javascript-module", + "path": "dist/types/MenuItemGroupCheckMode.js", + "declarations": [ + { + "kind": "enum", + "name": "MenuItemGroupCheckMode", + "description": "Menu item group check modes.", + "_ui5privacy": "public", + "_ui5since": "2.12.0", + "members": [ + { + "kind": "field", + "static": true, + "privacy": "public", + "description": "default type (items in a group cannot be checked)", + "default": "None", + "name": "None", + "readonly": true + }, + { + "kind": "field", + "static": true, + "privacy": "public", + "description": "Single item check mode (only one item in a group can be checked at a time)", + "default": "Single", + "name": "Single", + "readonly": true + }, + { + "kind": "field", + "static": true, + "privacy": "public", + "description": "Multiple items check mode (multiple items in a group can be checked at a time)", + "default": "Multiple", + "name": "Multiple", + "readonly": true + } + ] + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "MenuItemGroupCheckMode", + "module": "dist/types/MenuItemGroupCheckMode.js" + } + } + ] + }, { "kind": "javascript-module", "path": "dist/types/MessageStripDesign.js", @@ -3397,7 +3449,7 @@ { "kind": "enum", "name": "TableOverflowMode", - "description": "Column mode of the <ui5-table> component.", + "description": "Overflow mode of the <ui5-table> component.", "_ui5experimental": true, "_ui5privacy": "public", "members": [ @@ -3529,6 +3581,49 @@ } ] }, + { + "kind": "javascript-module", + "path": "dist/types/TableSelectionMultiHeaderSelector.js", + "declarations": [ + { + "kind": "enum", + "name": "TableSelectionMultiHeaderSelector", + "description": "Selectors of the table header row in multi-selection scenarios.", + "_ui5privacy": "public", + "_ui5since": "2.12", + "members": [ + { + "kind": "field", + "static": true, + "privacy": "public", + "description": "Renders a checkbox in the table header row that toggles the selection of all rows.", + "default": "SelectAll", + "name": "SelectAll", + "readonly": true + }, + { + "kind": "field", + "static": true, + "privacy": "public", + "description": "Renders an icon in the table header row that removes the selection of all rows.", + "default": "ClearAll", + "name": "ClearAll", + "readonly": true + } + ] + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "TableSelectionMultiHeaderSelector", + "module": "dist/types/TableSelectionMultiHeaderSelector.js" + } + } + ] + }, { "kind": "javascript-module", "path": "dist/types/TagDesign.js", @@ -4467,6 +4562,28 @@ "privacy": "public", "_ui5since": "2.0.0" }, + { + "kind": "field", + "name": "accessibleName", + "type": { + "text": "string | undefined" + }, + "description": "Defines the accessible name of the AvatarGroup.\nWhen provided, this will override the default aria-label text.", + "default": "undefined", + "privacy": "public", + "_ui5since": "2.12.0" + }, + { + "kind": "field", + "name": "accessibleNameRef", + "type": { + "text": "string | undefined" + }, + "description": "Receives id(s) of the elements that describe the AvatarGroup.\nWhen provided, this will be used as aria-labelledby instead of aria-label.", + "default": "undefined", + "privacy": "public", + "_ui5since": "2.12.0" + }, { "kind": "field", "name": "hiddenItems", @@ -4574,6 +4691,24 @@ "text": "AvatarGroupAccessibilityAttributes" } }, + { + "description": "Defines the accessible name of the AvatarGroup.\nWhen provided, this will override the default aria-label text.", + "name": "accessible-name", + "default": "undefined", + "fieldName": "accessibleName", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Receives id(s) of the elements that describe the AvatarGroup.\nWhen provided, this will be used as aria-labelledby instead of aria-label.", + "name": "accessible-name-ref", + "default": "undefined", + "fieldName": "accessibleNameRef", + "type": { + "text": "string | undefined" + } + }, { "description": "Returns an array containing the `ui5-avatar` instances that are currently not displayed due to lack of space.", "name": "hidden-items", @@ -5761,6 +5896,10 @@ "description": "Used to style the day cells in between of selected months in range.", "name": "month-cell-selected-between" }, + { + "description": "Used to style the month picker root container.", + "name": "month-picker-root" + }, { "description": "Used to style the year cells.", "name": "year-cell" @@ -5773,6 +5912,10 @@ "description": "Used to style the year cells in between of selected years in range.", "name": "year-cell-selected-between" }, + { + "description": "Used to style the year picker root container.", + "name": "year-picker-root" + }, { "description": "Used to style the year range cells.", "name": "year-range-cell" @@ -5784,6 +5927,10 @@ { "description": "Used to style the year range cells in between of selected year ranges.", "name": "year-range-cell-selected-between" + }, + { + "description": "Used to style the calendar header middle buttons (month/year/year-range buttons).", + "name": "calendar-header-middle-button" } ], "slots": [ @@ -7611,6 +7758,16 @@ "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.", "default": "undefined", "privacy": "public" + }, + { + "kind": "field", + "name": "value", + "type": { + "text": "string" + }, + "default": "\"on\"", + "description": "Defines the form value of the component that is submitted when the checkbox is checked.\n\nWhen a form containing `ui5-checkbox` elements is submitted, only the values of the\n**checked** checkboxes are included in the form data sent to the server. Unchecked\ncheckboxes do not contribute any data to the form submission.\n\nThis property is particularly useful for **checkbox groups**, where multiple checkboxes with the same `name` but different `value` properties can be used to represent a set of related options.", + "privacy": "public" } ], "events": [ @@ -7734,6 +7891,15 @@ "type": { "text": "string | undefined" } + }, + { + "description": "Defines the form value of the component that is submitted when the checkbox is checked.\n\nWhen a form containing `ui5-checkbox` elements is submitted, only the values of the\n**checked** checkboxes are included in the form data sent to the server. Unchecked\ncheckboxes do not contribute any data to the form submission.\n\nThis property is particularly useful for **checkbox groups**, where multiple checkboxes with the same `name` but different `value` properties can be used to represent a set of related options.", + "name": "value", + "default": "\"on\"", + "fieldName": "value", + "type": { + "text": "string" + } } ], "superclass": { @@ -11853,6 +12019,36 @@ "module": "dist/Popup.js" } }, + { + "kind": "field", + "name": "accessibleDescription", + "type": { + "text": "string | undefined" + }, + "description": "Defines the accessible description of the component.", + "default": "undefined", + "privacy": "public", + "_ui5since": "2.11.0", + "inheritedFrom": { + "name": "Popup", + "module": "dist/Popup.js" + } + }, + { + "kind": "field", + "name": "accessibleDescriptionRef", + "type": { + "text": "string | undefined" + }, + "description": "Receives id(or many ids) of the elements that describe the component.", + "default": "undefined", + "privacy": "public", + "_ui5since": "2.11.0", + "inheritedFrom": { + "name": "Popup", + "module": "dist/Popup.js" + } + }, { "kind": "field", "name": "preventInitialFocus", @@ -12011,6 +12207,32 @@ "module": "dist/Popup.js" } }, + { + "description": "Defines the accessible description of the component.", + "name": "accessible-description", + "default": "undefined", + "fieldName": "accessibleDescription", + "type": { + "text": "string | undefined" + }, + "inheritedFrom": { + "name": "Popup", + "module": "dist/Popup.js" + } + }, + { + "description": "Receives id(or many ids) of the elements that describe the component.", + "name": "accessible-description-ref", + "default": "undefined", + "fieldName": "accessibleDescriptionRef", + "type": { + "text": "string | undefined" + }, + "inheritedFrom": { + "name": "Popup", + "module": "dist/Popup.js" + } + }, { "description": "Indicates whether initial focus should be prevented.", "name": "prevent-initial-focus", @@ -12170,7 +12392,7 @@ "name": "IDynamicDateRangeOption", "description": "Represents a dynamic date range option used by the `ui5-dynamic-date-range` component.\n\nRepresents a dynamic date range option used for handling dynamic date ranges.\nThis interface defines the structure and behavior required for implementing\ndynamic date range options, including formatting, parsing, validation, and\nconversion of date range values.\n\n * Properties:\n- `icon`: The icon associated with the dynamic date range option, typically used for UI representation.\n- `operator`: A unique operator identifying the dynamic date range option.\n- `text`: The display text for the dynamic date range option.\n- `template` (optional): A JSX template for rendering the dynamic date range option.\n\nMethods:\n- `format(value: DynamicDateRangeValue): string`: Formats the given dynamic date range value into a string representation.\n- `parse(value: string): DynamicDateRangeValue | undefined`: Parses a string into a dynamic date range value.\n- `toDates(value: DynamicDateRangeValue): Date[]`: Converts a dynamic date range value into an array of `Date` objects.\n- `handleSelectionChange?(event: CustomEvent): DynamicDateRangeValue | undefined`: (Optional) Handles selection changes in the UI of the dynamic date range option.\n- `isValidString(value: string): boolean`: Validates whether a given string is a valid representation of the dynamic date range value.", "_ui5privacy": "public", - "_ui5since": "2.10.0" + "_ui5since": "2.11.0" }, { "kind": "class", @@ -12204,6 +12426,35 @@ "default": "\"\"", "description": "Defines the options listed as a string, separated by commas and using capital case.\nExample: \"TODAY, YESTERDAY, DATERANGE\"", "privacy": "public" + }, + { + "kind": "method", + "name": "toDates", + "return": { + "type": { + "text": "Array" + }, + "description": "An array of two `Date` objects representing the start and end dates." + }, + "parameters": [ + { + "name": "value", + "type": { + "text": "DynamicDateRangeValue", + "references": [ + { + "name": "DynamicDateRangeValue", + "package": "@ui5/webcomponents", + "module": "dist/DynamicDateRange.js" + } + ] + }, + "description": "The option to convert into an array of date ranges", + "_ui5privacy": "public" + } + ], + "description": "Converts a `value` into concrete `startDate` and `endDate` JavaScript `Date` objects.", + "privacy": "public" } ], "events": [ @@ -12246,6 +12497,7 @@ }, "tagName": "ui5-dynamic-date-range", "customElement": true, + "_ui5since": "2.11.0", "_ui5privacy": "public" } ], @@ -16510,7 +16762,7 @@ }, { "kind": "class", - "description": "### Overview\n\n`ui5-menu` component represents a hierarchical menu structure.\n\n### Structure\n\nThe `ui5-menu` can hold two types of entities:\n\n- `ui5-menu-item` components\n- `ui5-menu-separator` - used to separate menu items with a line\n\nAn arbitrary hierarchy structure can be represented by recursively nesting menu items.\n\n### Keyboard Handling\n\nThe `ui5-menu` provides advanced keyboard handling.\nThe user can use the following keyboard shortcuts in order to navigate trough the tree:\n\n- `Arrow Up` / `Arrow Down` - Navigates up and down the menu items that are currently visible.\n- `Arrow Right`, `Space` or `Enter` - Opens a sub-menu if there are menu items nested\nin the currently clicked menu item.\n- `Arrow Left` or `Escape` - Closes the currently opened sub-menu.\n\nwhen there is `endContent` :\n- `Arrow Left` or `ArrowRight` - Navigate between the menu item actions and the menu item itself\n- `Arrow Up` / `Arrow Down` - Navigates up and down the currently visible menu items\n\nNote: if the text ditrection is set to Right-to-left (RTL), `Arrow Right` and `Arrow Left` functionality is swapped.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Menu.js\";`", + "description": "### Overview\n\n`ui5-menu` component represents a hierarchical menu structure.\n\n### Structure\n\nThe `ui5-menu` can hold two types of entities:\n\n- `ui5-menu-item` components\n- `ui5-menu-separator` - used to separate menu items with a line\n\nAn arbitrary hierarchy structure can be represented by recursively nesting menu items.\n\n### Keyboard Handling\n\nThe `ui5-menu` provides advanced keyboard handling.\nThe user can use the following keyboard shortcuts in order to navigate trough the tree:\n\n- `Arrow Up` / `Arrow Down` - Navigates up and down the menu items that are currently visible.\n- `Arrow Right`, `Space` or `Enter` - Opens a sub-menu if there are menu items nested\nin the currently clicked menu item.\n- `Arrow Left` or `Escape` - Closes the currently opened sub-menu.\n\nwhen there is `endContent` :\n- `Arrow Left` or `ArrowRight` - Navigate between the menu item actions and the menu item itself\n- `Arrow Up` / `Arrow Down` - Navigates up and down the currently visible menu items\n\n**Note:** If the text direction is set to Right-to-left (RTL), `Arrow Right` and `Arrow Left` functionality is swapped.\n\nApplication developers are responsible for ensuring that interactive elements placed in the `endContent` slot\nhave the correct accessibility behaviour, including their enabled or disabled states.\nThe menu does not manage these aspects when the menu item state changes.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Menu.js\";`", "name": "Menu", "slots": [ { @@ -16820,7 +17072,7 @@ "slots": [ { "name": "default", - "description": "Defines the items of this component.\n\n**Note:** The slot can hold `ui5-menu-item` and `ui5-menu-separator` items.\n\nIf there are items added to this slot, an arrow will be displayed at the end\nof the item in order to indicate that there are items added. In that case components added\nto `endContent` slot or `additionalText` content will not be displayed.\n\nThe priority of what will be displayed at the end of the menu item is as follows:\nsub-menu arrow (if there are items added in `items` slot) -> components added in `endContent` -> text set to `additionalText`.", + "description": "Defines the items of this component.\n\n**Note:** The slot can hold menu item and menu separator items.\n\nIf there are items added to this slot, an arrow will be displayed at the end\nof the item in order to indicate that there are items added. In that case components added\nto `endContent` slot or `additionalText` content will not be displayed.\n\nThe priority of what will be displayed at the end of the menu item is as follows:\nsub-menu arrow (if there are items added in `items` slot) -> components added in `endContent` -> text set to `additionalText`.", "_ui5propertyName": "items", "_ui5type": { "text": "Array", @@ -16836,7 +17088,7 @@ }, { "name": "endContent", - "description": "Defines the components that should be displayed at the end of the menu item.\n\n**Note:** It is highly recommended to slot only components of type `ui5-button`,`ui5-link`\nor `ui5-icon` in order to preserve the intended design. If there are components added to this slot,\nand there is text set in `additionalText`, it will not be displayed. If there are items added to `items` slot,\nnether `additionalText` nor components added to this slot would be displayed.\n\nThe priority of what will be displayed at the end of the menu item is as follows:\nsub-menu arrow (if there are items added in `items` slot) -> components added in `endContent` -> text set to `additionalText`.", + "description": "Defines the components that should be displayed at the end of the menu item.\n\n**Note:** It is highly recommended to slot only components of type `ui5-button`,`ui5-link`\nor `ui5-icon` in order to preserve the intended design. If there are components added to this slot,\nand there is text set in `additionalText`, it will not be displayed. If there are items added to `items` slot,\nnether `additionalText` nor components added to this slot would be displayed.\n\nThe priority of what will be displayed at the end of the menu item is as follows:\nsub-menu arrow (if there are items added in `items` slot) -> components added in `endContent` -> text set to `additionalText`.\n\nApplication developers are responsible for ensuring that interactive elements placed in the `endContent` slot\nhave the correct accessibility behaviour, including their enabled or disabled states.\nThe menu does not manage these aspects when the menu item state changes.", "_ui5since": "2.0.0", "_ui5type": { "text": "Array" @@ -16903,7 +17155,7 @@ "text": "boolean" }, "default": "false", - "description": "Defines whether `ui5-menu-item` is in disabled state.\n\n**Note:** A disabled `ui5-menu-item` is noninteractive.", + "description": "Defines whether menu item is in disabled state.\n\n**Note:** A disabled menu item is noninteractive.", "privacy": "public", "inheritedFrom": { "name": "ListItemBase", @@ -16917,7 +17169,7 @@ "text": "boolean" }, "default": "false", - "description": "Defines the delay in milliseconds, after which the loading indicator will be displayed inside the corresponding ui5-menu popover.\n\n**Note:** If set to `true` a `ui5-busy-indicator` component will be displayed into the related one to the current `ui5-menu-item` sub-menu popover.", + "description": "Defines the delay in milliseconds, after which the loading indicator will be displayed inside the corresponding menu popover.\n\n**Note:** If set to `true` a busy indicator component will be displayed into the related one to the current menu item sub-menu popover.", "privacy": "public", "_ui5since": "1.13.0" }, @@ -16928,7 +17180,7 @@ "text": "number" }, "default": "1000", - "description": "Defines the delay in milliseconds, after which the loading indicator will be displayed inside the corresponding ui5-menu popover.", + "description": "Defines the delay in milliseconds, after which the loading indicator will be displayed inside the corresponding menu popover.", "privacy": "public", "_ui5since": "1.13.0" }, @@ -16962,6 +17214,17 @@ "module": "dist/ListItem.js" } }, + { + "kind": "field", + "name": "checked", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines whether menu item is in checked state.\n\n**Note:** checked state is only taken into account when menu item is added to menu item group\nwith `checkMode` other than `None`.\n\n**Note:** A checked menu item has a checkmark displayed at its end.", + "privacy": "public", + "_ui5since": "2.12.0" + }, { "kind": "field", "name": "accessibilityAttributes", @@ -17083,7 +17346,7 @@ }, "name": "item", "_ui5privacy": "public", - "description": "The `ui5-menu-item` that triggers opening of the sub-menu or undefined when fired upon root menu opening." + "description": "The menu item that triggers opening of the sub-menu or undefined when fired upon root menu opening." } ] }, @@ -17139,6 +17402,18 @@ "_ui5Bubbles": false, "_ui5since": "1.10.0" }, + { + "name": "check", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" + }, + "description": "Fired when an item is checked or unchecked.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true, + "_ui5since": "2.12.0" + }, { "name": "detail-click", "_ui5privacy": "public", @@ -17184,7 +17459,7 @@ } }, { - "description": "Defines whether `ui5-menu-item` is in disabled state.\n\n**Note:** A disabled `ui5-menu-item` is noninteractive.", + "description": "Defines whether menu item is in disabled state.\n\n**Note:** A disabled menu item is noninteractive.", "name": "disabled", "default": "false", "fieldName": "disabled", @@ -17193,7 +17468,7 @@ } }, { - "description": "Defines the delay in milliseconds, after which the loading indicator will be displayed inside the corresponding ui5-menu popover.\n\n**Note:** If set to `true` a `ui5-busy-indicator` component will be displayed into the related one to the current `ui5-menu-item` sub-menu popover.", + "description": "Defines the delay in milliseconds, after which the loading indicator will be displayed inside the corresponding menu popover.\n\n**Note:** If set to `true` a busy indicator component will be displayed into the related one to the current menu item sub-menu popover.", "name": "loading", "default": "false", "fieldName": "loading", @@ -17202,7 +17477,7 @@ } }, { - "description": "Defines the delay in milliseconds, after which the loading indicator will be displayed inside the corresponding ui5-menu popover.", + "description": "Defines the delay in milliseconds, after which the loading indicator will be displayed inside the corresponding menu popover.", "name": "loading-delay", "default": "1000", "fieldName": "loadingDelay", @@ -17232,6 +17507,15 @@ "module": "dist/ListItem.js" } }, + { + "description": "Defines whether menu item is in checked state.\n\n**Note:** checked state is only taken into account when menu item is added to menu item group\nwith `checkMode` other than `None`.\n\n**Note:** A checked menu item has a checkmark displayed at its end.", + "name": "checked", + "default": "false", + "fieldName": "checked", + "type": { + "text": "boolean" + } + }, { "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **ariaKeyShortcuts**: Indicated the availability of a keyboard shortcuts defined for the menu item.\n\n- **role**: Defines the role of the menu item. If not set, menu item will have default role=\"menuitem\".", "name": "accessibility-attributes", @@ -17335,6 +17619,99 @@ } ] }, + { + "kind": "javascript-module", + "path": "dist/MenuItemGroup.js", + "declarations": [ + { + "kind": "class", + "description": "### Overview\n\nThe `ui5-menu-item-group` component represents a group of items designed for use inside a `ui5-menu`.\nItems belonging to the same group should be wrapped by a `ui5-menu-item-group`.\nEach group can have an `checkMode` property, which defines the check mode for the items within the group.\nThe possible values for `checkMode` are:\n- 'None' (default) - no items can be checked\n- 'Single' - Only one item can be checked at a time\n- 'Multiple' - Multiple items can be checked simultaneously\n\n**Note:** If the `checkMode` property is set to 'Single', only one item can remain checked at any given time.\nIf multiple items are marked as checked, the last checked item will take precedence.\n\n### Usage\n\n`ui5-menu-item-group` represents a collection of `ui5-menu-item` components that can have the same check mode.\nThe items are addeed to the group's `items` slot.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/MenuItemGroup.js\";`", + "name": "MenuItemGroup", + "slots": [ + { + "name": "default", + "description": "Defines the items of this component.\n**Note:** The slot can hold any combination of components of type `ui5-menu-item` or `ui5-menu-separator` or both.", + "_ui5propertyName": "items", + "_ui5type": { + "text": "Array", + "references": [ + { + "name": "IMenuItem", + "package": "@ui5/webcomponents", + "module": "dist/Menu.js" + } + ] + }, + "_ui5privacy": "public" + } + ], + "members": [ + { + "kind": "field", + "name": "checkMode", + "type": { + "text": "MenuItemGroupCheckMode", + "references": [ + { + "name": "MenuItemGroupCheckMode", + "package": "@ui5/webcomponents", + "module": "dist/types/MenuItemGroupCheckMode.js" + } + ] + }, + "default": "\"None\"", + "description": "Defines the component's check mode.", + "privacy": "public" + } + ], + "attributes": [ + { + "description": "Defines the component's check mode.", + "name": "check-mode", + "default": "\"None\"", + "fieldName": "checkMode", + "type": { + "text": "\"None\" | \"Single\" | \"Multiple\"" + } + } + ], + "superclass": { + "name": "UI5Element", + "package": "@ui5/webcomponents-base", + "module": "dist/UI5Element.js" + }, + "tagName": "ui5-menu-item-group", + "customElement": true, + "_ui5since": "2.12.0", + "_ui5privacy": "public", + "_ui5implements": [ + { + "name": "IMenuItem", + "package": "@ui5/webcomponents", + "module": "dist/Menu.js" + } + ] + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "MenuItemGroup", + "module": "dist/MenuItemGroup.js" + } + }, + { + "kind": "custom-element-definition", + "name": "ui5-menu-item-group", + "declaration": { + "name": "MenuItemGroup", + "module": "dist/MenuItemGroup.js" + } + } + ] + }, { "kind": "javascript-module", "path": "dist/MenuSeparator.js", @@ -19995,6 +20372,36 @@ "module": "dist/Popup.js" } }, + { + "kind": "field", + "name": "accessibleDescription", + "type": { + "text": "string | undefined" + }, + "description": "Defines the accessible description of the component.", + "default": "undefined", + "privacy": "public", + "_ui5since": "2.11.0", + "inheritedFrom": { + "name": "Popup", + "module": "dist/Popup.js" + } + }, + { + "kind": "field", + "name": "accessibleDescriptionRef", + "type": { + "text": "string | undefined" + }, + "description": "Receives id(or many ids) of the elements that describe the component.", + "default": "undefined", + "privacy": "public", + "_ui5since": "2.11.0", + "inheritedFrom": { + "name": "Popup", + "module": "dist/Popup.js" + } + }, { "kind": "field", "name": "preventInitialFocus", @@ -20180,6 +20587,32 @@ "module": "dist/Popup.js" } }, + { + "description": "Defines the accessible description of the component.", + "name": "accessible-description", + "default": "undefined", + "fieldName": "accessibleDescription", + "type": { + "text": "string | undefined" + }, + "inheritedFrom": { + "name": "Popup", + "module": "dist/Popup.js" + } + }, + { + "description": "Receives id(or many ids) of the elements that describe the component.", + "name": "accessible-description-ref", + "default": "undefined", + "fieldName": "accessibleDescriptionRef", + "type": { + "text": "string | undefined" + }, + "inheritedFrom": { + "name": "Popup", + "module": "dist/Popup.js" + } + }, { "description": "Indicates whether initial focus should be prevented.", "name": "prevent-initial-focus", @@ -20397,6 +20830,28 @@ "privacy": "public", "_ui5since": "1.10.0" }, + { + "kind": "field", + "name": "accessibleDescription", + "type": { + "text": "string | undefined" + }, + "description": "Defines the accessible description of the component.", + "default": "undefined", + "privacy": "public", + "_ui5since": "2.11.0" + }, + { + "kind": "field", + "name": "accessibleDescriptionRef", + "type": { + "text": "string | undefined" + }, + "description": "Receives id(or many ids) of the elements that describe the component.", + "default": "undefined", + "privacy": "public", + "_ui5since": "2.11.0" + }, { "kind": "field", "name": "preventInitialFocus", @@ -20541,6 +20996,24 @@ "text": "\"None\" | \"Dialog\" | \"AlertDialog\"" } }, + { + "description": "Defines the accessible description of the component.", + "name": "accessible-description", + "default": "undefined", + "fieldName": "accessibleDescription", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Receives id(or many ids) of the elements that describe the component.", + "name": "accessible-description-ref", + "default": "undefined", + "fieldName": "accessibleDescriptionRef", + "type": { + "text": "string | undefined" + } + }, { "description": "Indicates whether initial focus should be prevented.", "name": "prevent-initial-focus", @@ -21936,6 +22409,36 @@ "module": "dist/Popup.js" } }, + { + "kind": "field", + "name": "accessibleDescription", + "type": { + "text": "string | undefined" + }, + "description": "Defines the accessible description of the component.", + "default": "undefined", + "privacy": "public", + "_ui5since": "2.11.0", + "inheritedFrom": { + "name": "Popup", + "module": "dist/Popup.js" + } + }, + { + "kind": "field", + "name": "accessibleDescriptionRef", + "type": { + "text": "string | undefined" + }, + "description": "Receives id(or many ids) of the elements that describe the component.", + "default": "undefined", + "privacy": "public", + "_ui5since": "2.11.0", + "inheritedFrom": { + "name": "Popup", + "module": "dist/Popup.js" + } + }, { "kind": "field", "name": "preventInitialFocus", @@ -22201,6 +22704,32 @@ "module": "dist/Popup.js" } }, + { + "description": "Defines the accessible description of the component.", + "name": "accessible-description", + "default": "undefined", + "fieldName": "accessibleDescription", + "type": { + "text": "string | undefined" + }, + "inheritedFrom": { + "name": "Popup", + "module": "dist/Popup.js" + } + }, + { + "description": "Receives id(or many ids) of the elements that describe the component.", + "name": "accessible-description-ref", + "default": "undefined", + "fieldName": "accessibleDescriptionRef", + "type": { + "text": "string | undefined" + }, + "inheritedFrom": { + "name": "Popup", + "module": "dist/Popup.js" + } + }, { "description": "Indicates whether initial focus should be prevented.", "name": "prevent-initial-focus", @@ -23717,6 +24246,21 @@ } ] }, + { + "kind": "javascript-module", + "path": "dist/SliderTooltip.js", + "declarations": [], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "SliderTooltip", + "module": "dist/SliderTooltip.js" + } + } + ] + }, { "kind": "javascript-module", "path": "dist/SpecialCalendarDate.js", @@ -24922,6 +25466,17 @@ "default": "undefined", "privacy": "public", "_ui5since": "1.16.0" + }, + { + "kind": "field", + "name": "value", + "type": { + "text": "string" + }, + "default": "\"\"", + "description": "Defines the form value of the component.", + "privacy": "public", + "_ui5since": "2.12.0" } ], "events": [ @@ -25027,6 +25582,15 @@ "type": { "text": "string | undefined" } + }, + { + "description": "Defines the form value of the component.", + "name": "value", + "default": "\"\"", + "fieldName": "value", + "type": { + "text": "string" + } } ], "superclass": { @@ -27692,6 +28256,24 @@ "module": "dist/TableSelectionBase.js" } }, + { + "kind": "field", + "name": "headerSelector", + "type": { + "text": "TableSelectionMultiHeaderSelector", + "references": [ + { + "name": "TableSelectionMultiHeaderSelector", + "package": "@ui5/webcomponents", + "module": "dist/types/TableSelectionMultiHeaderSelector.js" + } + ] + }, + "default": "\"SelectAll\"", + "description": "Defines the selector of the header row.", + "privacy": "public", + "_ui5since": "2.12" + }, { "kind": "method", "name": "getSelectedRows", @@ -27811,6 +28393,15 @@ "module": "dist/TableSelectionBase.js" } }, + { + "description": "Defines the selector of the header row.", + "name": "header-selector", + "default": "\"SelectAll\"", + "fieldName": "headerSelector", + "type": { + "text": "\"SelectAll\" | \"ClearAll\"" + } + }, { "description": "Defines the selection behavior.", "name": "behavior", @@ -29605,7 +30196,7 @@ "description": "Fired after the component is auto closed.", "_ui5Cancelable": false, "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, + "_ui5Bubbles": false, "_ui5since": "2.0.0" } ], diff --git a/package.json b/package.json index 29ab1826aed..5d87078c6f3 100644 --- a/package.json +++ b/package.json @@ -44,11 +44,11 @@ "@storybook/react": "8.6.14", "@storybook/react-vite": "8.6.14", "@storybook/theming": "8.6.14", - "@ui5/webcomponents": "2.11.0", - "@ui5/webcomponents-ai": "2.11.0", - "@ui5/webcomponents-compat": "2.11.0", - "@ui5/webcomponents-fiori": "2.11.0", - "@ui5/webcomponents-icons": "2.11.0", + "@ui5/webcomponents": "2.12.0", + "@ui5/webcomponents-ai": "2.12.0", + "@ui5/webcomponents-compat": "2.12.0", + "@ui5/webcomponents-fiori": "2.12.0", + "@ui5/webcomponents-icons": "2.12.0", "react": "19.1.0", "react-dom": "19.1.0", "remark-gfm": "4.0.1", @@ -70,7 +70,7 @@ "@types/node": "22.15.34", "@types/react": "19.1.8", "@types/react-dom": "19.1.6", - "@ui5/webcomponents-tools": "2.11.0", + "@ui5/webcomponents-tools": "2.12.0", "@vitejs/plugin-react": "4.6.0", "chromatic": "13.0.1", "cssnano": "7.0.7", diff --git a/packages/ai/package.json b/packages/ai/package.json index d28a877a82a..66629ee2253 100644 --- a/packages/ai/package.json +++ b/packages/ai/package.json @@ -33,7 +33,7 @@ "@ui5/webcomponents-react-base": "workspace:~" }, "peerDependencies": { - "@ui5/webcomponents-ai": "~2.11.0", + "@ui5/webcomponents-ai": "~2.12.0", "react": "^18 || ^19" }, "publishConfig": { diff --git a/packages/base/package.json b/packages/base/package.json index 438d9167e89..d6a99176e58 100644 --- a/packages/base/package.json +++ b/packages/base/package.json @@ -32,7 +32,7 @@ }, "peerDependencies": { "@types/react": "*", - "@ui5/webcomponents-base": "~2.11.0", + "@ui5/webcomponents-base": "~2.12.0", "react": "^18 || ^19" }, "peerDependenciesMeta": { diff --git a/packages/base/src/styling/ThemingParameters.ts b/packages/base/src/styling/ThemingParameters.ts index bec26b5728f..2db19c64fb5 100644 --- a/packages/base/src/styling/ThemingParameters.ts +++ b/packages/base/src/styling/ThemingParameters.ts @@ -17,6 +17,7 @@ export const ThemingParameters = { sapTextColor: 'var(--sapTextColor)', sapLinkColor: 'var(--sapLinkColor)', sapCompanyLogo: 'var(--sapCompanyLogo)', + sapFavicon: 'var(--sapFavicon)', sapBackgroundImage: 'var(--sapBackgroundImage)', sapBackgroundImageOpacity: 'var(--sapBackgroundImageOpacity)', sapBackgroundImageRepeat: 'var(--sapBackgroundImageRepeat)', diff --git a/packages/charts/package.json b/packages/charts/package.json index 2482523c9d1..e206feaa67e 100644 --- a/packages/charts/package.json +++ b/packages/charts/package.json @@ -39,8 +39,8 @@ "recharts": "2.15.4" }, "peerDependencies": { - "@ui5/webcomponents-react": "~2.11.0", - "@ui5/webcomponents-react-base": "~2.11.0", + "@ui5/webcomponents-react": "~2.12.0", + "@ui5/webcomponents-react-base": "~2.12.0", "react": "^18 || ^19" }, "publishConfig": { diff --git a/packages/compat/package.json b/packages/compat/package.json index b10746e21b1..4c6e8c31b5b 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.11.0", - "@ui5/webcomponents-react": "~2.11.0", + "@ui5/webcomponents-compat": "~2.12.0", + "@ui5/webcomponents-react": "~2.12.0", "react": "^18 || ^19", "react-dom": "^18 || ^19" }, diff --git a/packages/compat/src/components/Table/index.tsx b/packages/compat/src/components/Table/index.tsx index acc879746a7..c59c09a0e91 100644 --- a/packages/compat/src/components/Table/index.tsx +++ b/packages/compat/src/components/Table/index.tsx @@ -266,6 +266,7 @@ interface TablePropTypes * - `import "@ui5/webcomponents-compat/dist/TableCell.js";` (`TableCell`) * * __Note__: This is a UI5 Web Component! [Repository](https://github.com/SAP/ui5-webcomponents) | [Documentation](https://sap.github.io/ui5-webcomponents/) + * @deprecated Deprecated as of version 2.12.0, use `@ui5/webcomponents/dist/Table.js` instead. */ const Table = withWebComponent( 'ui5-table', diff --git a/packages/compat/src/components/TableCell/index.tsx b/packages/compat/src/components/TableCell/index.tsx index 32caf097886..f9e679461e2 100644 --- a/packages/compat/src/components/TableCell/index.tsx +++ b/packages/compat/src/components/TableCell/index.tsx @@ -20,6 +20,7 @@ interface TableCellPropTypes extends TableCellAttributes, Omit('ui5-table-cell', [], [], [], []); diff --git a/packages/compat/src/components/TableColumn/index.tsx b/packages/compat/src/components/TableColumn/index.tsx index b0a8ce66def..d216b56cd58 100644 --- a/packages/compat/src/components/TableColumn/index.tsx +++ b/packages/compat/src/components/TableColumn/index.tsx @@ -61,6 +61,7 @@ interface TableColumnPropTypes * when rendering the `Table` component. * * __Note__: This is a UI5 Web Component! [Repository](https://github.com/SAP/ui5-webcomponents) | [Documentation](https://sap.github.io/ui5-webcomponents/) + * @deprecated Deprecated as of version 2.12.0, use `@ui5/webcomponents/dist/Table.js` instead. */ const TableColumn = withWebComponent( 'ui5-table-column', diff --git a/packages/compat/src/components/TableGroupRow/index.tsx b/packages/compat/src/components/TableGroupRow/index.tsx index d0dee9cfe70..f415fd2669a 100644 --- a/packages/compat/src/components/TableGroupRow/index.tsx +++ b/packages/compat/src/components/TableGroupRow/index.tsx @@ -24,6 +24,7 @@ interface TableGroupRowPropTypes extends TableGroupRowAttributes, Omit( 'ui5-table-group-row', diff --git a/packages/compat/src/components/TableRow/index.tsx b/packages/compat/src/components/TableRow/index.tsx index 2942e682e12..b49c11822fa 100644 --- a/packages/compat/src/components/TableRow/index.tsx +++ b/packages/compat/src/components/TableRow/index.tsx @@ -50,6 +50,7 @@ interface TableRowPropTypes extends TableRowAttributes, Omit( 'ui5-table-row', diff --git a/packages/cypress-commands/package.json b/packages/cypress-commands/package.json index 25fcb0acd62..7f186ecf499 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.11.0", - "@ui5/webcomponents-base": "~2.11.0", + "@ui5/webcomponents": "~2.12.0", + "@ui5/webcomponents-base": "~2.12.0", "cypress": "^12 || ^13 || ^14" }, "peerDependenciesMeta": { diff --git a/packages/main/package.json b/packages/main/package.json index e49c04991c0..4ca717af70f 100644 --- a/packages/main/package.json +++ b/packages/main/package.json @@ -57,10 +57,10 @@ "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", - "@ui5/webcomponents": "~2.11.0", - "@ui5/webcomponents-base": "~2.11.0", - "@ui5/webcomponents-fiori": "~2.11.0", - "@ui5/webcomponents-icons": "~2.11.0", + "@ui5/webcomponents": "~2.12.0", + "@ui5/webcomponents-base": "~2.12.0", + "@ui5/webcomponents-fiori": "~2.12.0", + "@ui5/webcomponents-icons": "~2.12.0", "react": "^18 || ^19", "react-dom": "^18 || ^19" }, diff --git a/packages/main/src/components/VariantManagement/VariantManagement.cy.tsx b/packages/main/src/components/VariantManagement/VariantManagement.cy.tsx index be212091eb2..e37bcfbb107 100644 --- a/packages/main/src/components/VariantManagement/VariantManagement.cy.tsx +++ b/packages/main/src/components/VariantManagement/VariantManagement.cy.tsx @@ -391,10 +391,10 @@ describe('VariantManagement', () => { it('Save As', () => { const TestComp = ({ onSaveAs }: { onSaveAs: VariantManagementPropTypes['onSaveAs'] }) => { const [saved, setSaved] = useState(undefined); - const handleSaveAs = (e) => { + const handleSaveAs: VariantManagementPropTypes['onSaveAs'] = (e) => { onSaveAs(e); - const { variantItem: _0, ...rest } = e.detail; - setSaved(rest); + const { variantItem: _0, children, global, isDefault, nativeDetail, selected, applyAutomatically } = e.detail; + setSaved({ nativeDetail, selected, children, isDefault, global, applyAutomatically }); }; return ( <> @@ -494,11 +494,15 @@ describe('VariantManagement', () => { showOnlyFavorites?: VariantManagementPropTypes['showOnlyFavorites']; }) => { const [save, setSave] = useState(undefined); - const handleSave = (e) => { + const handleSave: VariantManagementPropTypes['onSaveManageViews'] = (e) => { + const { deletedVariants, prevVariants, updatedVariants, variants, nativeDetail } = e.detail; onSaveManageViews(e); setSave({ - ...e.detail, - variants: e.detail.variants.map((item) => { + nativeDetail, + deletedVariants, + prevVariants, + updatedVariants, + variants: variants.map((item) => { const { variantItem: _0, ...rest } = item; return rest; }), @@ -631,11 +635,15 @@ describe('VariantManagement', () => { onSaveManageViews: VariantManagementPropTypes['onSaveManageViews']; }) => { const [save, setSave] = useState(undefined); - const handleSave = (e) => { + const handleSave: VariantManagementPropTypes['onSaveManageViews'] = (e) => { + const { deletedVariants, prevVariants, updatedVariants, variants, nativeDetail } = e.detail; onSaveManageViews(e); setSave({ - ...e.detail, - variants: e.detail.variants.map((item) => { + nativeDetail, + deletedVariants, + prevVariants, + updatedVariants, + variants: variants.map((item) => { const { variantItem: _0, ...rest } = item; return rest; }), diff --git a/packages/main/src/components/VariantManagement/index.tsx b/packages/main/src/components/VariantManagement/index.tsx index e1c88757446..493219ba783 100644 --- a/packages/main/src/components/VariantManagement/index.tsx +++ b/packages/main/src/components/VariantManagement/index.tsx @@ -208,7 +208,8 @@ const VariantManagement = forwardRef const handleSaveView = (e, selectedVariant) => { if (typeof onSaveAs === 'function') { - onSaveAs(enrichEventWithDetails(e, selectedVariant)); + //todo: remove nativeDetail in next major + onSaveAs(enrichEventWithDetails(e, { ...selectedVariant, nativeDetail: e.detail.originalEvent.detail })); } setSelectedVariant(selectedVariant); if (!e.defaultPrevented) { @@ -218,7 +219,13 @@ const VariantManagement = forwardRef const handleSaveManageViews = (e, payload) => { const { defaultView, updatedRows, deletedRows } = payload; - const callbackProperties = { deletedVariants: [], prevVariants: [], updatedVariants: [], variants: [] }; + const callbackProperties = { + deletedVariants: [], + prevVariants: [], + updatedVariants: [], + variants: [], + nativeDetail: null, + }; setSafeChildren((prev) => Children.toArray( prev.map((child) => { @@ -260,6 +267,8 @@ const VariantManagement = forwardRef ), ); if (typeof onSaveManageViews === 'function') { + //todo: remove in next major + callbackProperties.nativeDetail = e.detail.originalEvent.detail; onSaveManageViews(enrichEventWithDetails(e, callbackProperties)); } if (!e.defaultPrevented) { diff --git a/packages/main/src/webComponents/AvatarGroup/index.tsx b/packages/main/src/webComponents/AvatarGroup/index.tsx index f0e1c6529cc..1782b882278 100644 --- a/packages/main/src/webComponents/AvatarGroup/index.tsx +++ b/packages/main/src/webComponents/AvatarGroup/index.tsx @@ -25,6 +25,24 @@ interface AvatarGroupAttributes { */ accessibilityAttributes?: AvatarGroupAccessibilityAttributes; + /** + * Defines the accessible name of the AvatarGroup. + * When provided, this will override the default aria-label text. + * + * **Note:** Available since [v2.12.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.12.0) of **@ui5/webcomponents**. + * @default undefined + */ + accessibleName?: string | undefined; + + /** + * Receives id(s) of the elements that describe the AvatarGroup. + * When provided, this will be used as aria-labelledby instead of aria-label. + * + * **Note:** Available since [v2.12.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.12.0) of **@ui5/webcomponents**. + * @default undefined + */ + accessibleNameRef?: string | undefined; + /** * Defines the mode of the `AvatarGroup`. * @default "Group" @@ -149,7 +167,7 @@ interface AvatarGroupPropTypes */ const AvatarGroup = withWebComponent( 'ui5-avatar-group', - ['accessibilityAttributes', 'type'], + ['accessibilityAttributes', 'accessibleName', 'accessibleNameRef', 'type'], [], ['overflowButton'], ['click', 'overflow'], diff --git a/packages/main/src/webComponents/CheckBox/index.tsx b/packages/main/src/webComponents/CheckBox/index.tsx index 9007983a217..d9202714e94 100644 --- a/packages/main/src/webComponents/CheckBox/index.tsx +++ b/packages/main/src/webComponents/CheckBox/index.tsx @@ -102,6 +102,18 @@ interface CheckBoxAttributes { */ text?: string | undefined; + /** + * Defines the form value of the component that is submitted when the checkbox is checked. + * + * When a form containing `CheckBox` elements is submitted, only the values of the + * **checked** checkboxes are included in the form data sent to the server. Unchecked + * checkboxes do not contribute any data to the form submission. + * + * This property is particularly useful for **checkbox groups**, where multiple checkboxes with the same `name` but different `value` properties can be used to represent a set of related options. + * @default "on" + */ + value?: string; + /** * Defines the value state of the component. * @default "None" @@ -167,7 +179,7 @@ interface CheckBoxPropTypes extends CheckBoxAttributes, Omit( 'ui5-checkbox', - ['accessibleName', 'accessibleNameRef', 'name', 'text', 'valueState', 'wrappingType'], + ['accessibleName', 'accessibleNameRef', 'name', 'text', 'value', 'valueState', 'wrappingType'], ['checked', 'disabled', 'displayOnly', 'indeterminate', 'readonly', 'required'], [], ['change'], diff --git a/packages/main/src/webComponents/Dialog/index.tsx b/packages/main/src/webComponents/Dialog/index.tsx index 15b62dfdf6b..e9dae5712c6 100644 --- a/packages/main/src/webComponents/Dialog/index.tsx +++ b/packages/main/src/webComponents/Dialog/index.tsx @@ -9,6 +9,22 @@ import type { CommonProps, Ui5CustomEvent, Ui5DomRef, UI5WCSlotsNode } from '@ui import type { ReactNode } from 'react'; interface DialogAttributes { + /** + * Defines the accessible description of the component. + * + * **Note:** Available since [v2.11.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.11.0) of **@ui5/webcomponents**. + * @default undefined + */ + accessibleDescription?: string | undefined; + + /** + * Receives id(or many ids) of the elements that describe the component. + * + * **Note:** Available since [v2.11.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.11.0) of **@ui5/webcomponents**. + * @default undefined + */ + accessibleDescriptionRef?: string | undefined; + /** * Defines the accessible name of the component. * @default undefined @@ -259,7 +275,16 @@ interface DialogPropTypes */ const Dialog = withWebComponent( 'ui5-dialog', - ['accessibleName', 'accessibleNameRef', 'accessibleRole', 'headerText', 'initialFocus', 'state'], + [ + 'accessibleDescription', + 'accessibleDescriptionRef', + 'accessibleName', + 'accessibleNameRef', + 'accessibleRole', + 'headerText', + 'initialFocus', + 'state', + ], ['draggable', 'open', 'preventFocusRestore', 'preventInitialFocus', 'resizable', 'stretch'], ['footer', 'header'], ['before-close', 'before-open', 'close', 'open'], diff --git a/packages/main/src/webComponents/DynamicDateRange/index.tsx b/packages/main/src/webComponents/DynamicDateRange/index.tsx index 79bdb0347fc..3cd3191c966 100644 --- a/packages/main/src/webComponents/DynamicDateRange/index.tsx +++ b/packages/main/src/webComponents/DynamicDateRange/index.tsx @@ -1,10 +1,7 @@ 'use client'; import '@ui5/webcomponents/dist/DynamicDateRange.js'; -import type { - DynamicDateRangeChangeEventDetail, - DynamicDateRangeValue, -} from '@ui5/webcomponents/dist/DynamicDateRange.js'; +import type { DynamicDateRangeValue } from '@ui5/webcomponents/dist/DynamicDateRange.js'; import { withWebComponent } from '@ui5/webcomponents-react-base'; import type { CommonProps, Ui5CustomEvent, Ui5DomRef } from '@ui5/webcomponents-react-base'; @@ -22,7 +19,14 @@ interface DynamicDateRangeAttributes { value?: DynamicDateRangeValue | undefined; } -interface DynamicDateRangeDomRef extends Required, Ui5DomRef {} +interface DynamicDateRangeDomRef extends Required, Ui5DomRef { + /** + * Converts a `value` into concrete `startDate` and `endDate` JavaScript `Date` objects. + * @param {DynamicDateRangeValue} value - The option to convert into an array of date ranges + * @returns {Array} - An array of two `Date` objects representing the start and end dates. + */ + toDates: (value: DynamicDateRangeValue) => Array; +} interface DynamicDateRangePropTypes extends DynamicDateRangeAttributes, @@ -36,7 +40,7 @@ interface DynamicDateRangePropTypes * | :--------: | :-----: | * | ✅|✅| */ - onChange?: (event: Ui5CustomEvent) => void; + onChange?: (event: Ui5CustomEvent) => void; } /** @@ -63,6 +67,8 @@ interface DynamicDateRangePropTypes * * * __Note__: This is a UI5 Web Component! [Repository](https://github.com/SAP/ui5-webcomponents) | [Documentation](https://sap.github.io/ui5-webcomponents/) + * + * @since [2.11.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.11.0) of __@ui5/webcomponents__. */ const DynamicDateRange = withWebComponent( 'ui5-dynamic-date-range', diff --git a/packages/main/src/webComponents/Menu/Menu.mdx b/packages/main/src/webComponents/Menu/Menu.mdx index 59550cf436b..59b490d6eb5 100644 --- a/packages/main/src/webComponents/Menu/Menu.mdx +++ b/packages/main/src/webComponents/Menu/Menu.mdx @@ -2,6 +2,7 @@ import { ArgTypesWithNote, ControlsWithNote, DocsHeader, Footer } from '@sb/comp import { Canvas, Description, Markdown, Meta } from '@storybook/blocks'; import * as ComponentStories from './Menu.stories'; import { MenuItem } from '../MenuItem'; +import { MenuItemGroup } from '../MenuItemGroup'; import SubcomponentsSection from '@sb/docs/SubcomponentsSection.md?raw'; import { excludePropsForAbstract } from '@sb/utils'; @@ -60,4 +61,9 @@ const MyComponentWithMenu = () => { +## MenuItemGroup + + + +