@ui5/webcomponents 2.0.0-rc.4 → 2.0.0-rc.6

package/dist/MenuItem.js

@@ -14,7 +14,6 @@ import { isPhone } from "@ui5/webcomponents-base/dist/Device.js";
 import AriaHasPopup from "@ui5/webcomponents-base/dist/types/AriaHasPopup.js";
 import ListItem from "./ListItem.js";
 import ResponsivePopover from "./ResponsivePopover.js";
-import "./types/PopoverPlacement.js";
 import List from "./List.js";
 import Icon from "./Icon.js";
 import BusyIndicator from "./BusyIndicator.js";
@@ -57,6 +56,9 @@ let MenuItem = MenuItem_1 = class MenuItem extends ListItem {
     get hasSubmenu() {
         return !!(this.items.length || this.loading);
     }
+    get hasEndContent() {
+        return !!(this.endContent.length);
+    }
     get hasIcon() {
         return !!this.icon;
     }
@@ -168,6 +170,9 @@ __decorate([
 __decorate([
     slot({ "default": true, type: HTMLElement, invalidateOnChildChange: true })
 ], MenuItem.prototype, "items", void 0);
+__decorate([
+    slot({ type: HTMLElement })
+], MenuItem.prototype, "endContent", void 0);
 MenuItem = MenuItem_1 = __decorate([
     customElement({
         tag: "ui5-menu-item",

package/dist/MenuItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"MenuItem.js","sourceRoot":"","sources":["../src/MenuItem.ts"],"names":[],"mappings":"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","sourcesContent":["import customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport Integer from \"@ui5/webcomponents-base/dist/types/Integer.js\";\nimport { getI18nBundle } from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport { isPhone } from \"@ui5/webcomponents-base/dist/Device.js\";\nimport AriaHasPopup from \"@ui5/webcomponents-base/dist/types/AriaHasPopup.js\";\nimport ListItem from \"./ListItem.js\";\nimport ResponsivePopover from \"./ResponsivePopover.js\";\nimport PopoverPlacement from \"./types/PopoverPlacement.js\";\nimport List from \"./List.js\";\nimport Icon from \"./Icon.js\";\nimport BusyIndicator from \"./BusyIndicator.js\";\nimport MenuItemTemplate from \"./generated/templates/MenuItemTemplate.lit.js\";\nimport {\n\tMENU_BACK_BUTTON_ARIA_LABEL,\n\tMENU_CLOSE_BUTTON_ARIA_LABEL,\n} from \"./generated/i18n/i18n-defaults.js\";\nimport type { ResponsivePopoverBeforeCloseEventDetail } from \"./ResponsivePopover.js\";\n\n// Styles\nimport menuItemCss from \"./generated/themes/MenuItem.css.js\";\n\ntype MenuBeforeOpenEventDetail = { item?: MenuItem };\ntype MenuBeforeCloseEventDetail = { escPressed: boolean };\n\n/**\n * @class\n *\n * ### Overview\n *\n * `ui5-menu-item` is the item to use inside a `ui5-menu`.\n * An arbitrary hierarchy structure can be represented by recursively nesting menu items.\n *\n * ### Usage\n *\n * `ui5-menu-item` represents a node in a `ui5-menu`. The menu itself is rendered as a list,\n * and each `ui5-menu-item` is represented by a list item in that list. Therefore, you should only use\n * `ui5-menu-item` directly in your apps. The `ui5-li` list item is internal for the list, and not intended for public use.\n *\n * ### ES6 Module Import\n *\n * `import \"@ui5/webcomponents/dist/MenuItem.js\";`\n * @constructor\n * @extends ListItem\n * @since 1.3.0\n * @public\n */\n@customElement({\n\ttag: \"ui5-menu-item\",\n\ttemplate: MenuItemTemplate,\n\tstyles: [ListItem.styles, menuItemCss],\n\tdependencies: [...ListItem.dependencies, ResponsivePopover, List, BusyIndicator, Icon],\n})\nclass MenuItem extends ListItem {\n\tstatic async onDefine() {\n\t\tMenuItem.i18nBundle = await getI18nBundle(\"@ui5/webcomponents\");\n\t}\n\n\t/**\n\t * Defines the text of the tree item.\n\t * @default \"\"\n\t * @public\n\t */\n\t@property()\n\ttext!: string;\n\n\t/**\n\t * Defines the `additionalText`, displayed in the end of the menu item.\n\t *\n\t * **Note:** The additional text would not be displayed if the item has a submenu.\n\t * @default \"\"\n\t * @public\n\t * @since 1.8.0\n\t */\n\t@property()\n\tadditionalText!: string;\n\n\t/**\n\t * Defines the icon to be displayed as graphical element within the component.\n\t * The SAP-icons font provides numerous options.\n\t *\n\t * **Example:**\n\t *\n\t * See all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).\n\t * @default \"\"\n\t * @public\n\t */\n\t@property()\n\ticon!: string;\n\n\t/**\n\t * Defines whether a visual separator should be rendered before the item.\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tstartsSection!: boolean;\n\n\t/**\n\t * Defines whether `ui5-menu-item` is in disabled state.\n\t *\n\t * **Note:** A disabled `ui5-menu-item` is noninteractive.\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tdisabled!: boolean;\n\n\t/**\n\t * Defines the delay in milliseconds, after which the loading indicator will be displayed inside the corresponding ui5-menu popover.\n\t *\n\t * **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.\n\t * @default false\n\t * @public\n\t * @since 1.13.0\n\t */\n\t@property({ type: Boolean })\n\tloading!: boolean;\n\n\t/**\n\t * Defines the delay in milliseconds, after which the loading indicator will be displayed inside the corresponding ui5-menu popover.\n\t * @default 1000\n\t * @public\n\t * @since 1.13.0\n\t */\n\t@property({ validator: Integer, defaultValue: 1000 })\n\tloadingDelay!: number;\n\n\t/**\n\t * Defines the accessible ARIA name of the component.\n\t * @default \"\"\n\t * @public\n\t * @since 1.7.0\n\t */\n\t@property()\n\taccessibleName!: string;\n\n\t/**\n\t * Defines the text of the tooltip for the menu item.\n\t * @default \"\"\n\t * @public\n\t * @since 1.23.0\n\t */\n\t@property({ type: String })\n\ttooltip!: string;\n\n\t/**\n\t * Indicates whether any of the element siblings have icon.\n\t */\n\t@property({ type: Boolean, noAttribute: true })\n\t_siblingsWithIcon!: boolean;\n\n\t/**\n\t * Defines the items of this component.\n\t * @public\n\t */\n\t@slot({ \"default\": true, type: HTMLElement, invalidateOnChildChange: true })\n\titems!: Array<MenuItem>;\n\n\tget placement(): `${PopoverPlacement}` {\n\t\treturn this.isRtl ? \"Start\" : \"End\";\n\t}\n\n\tget isRtl() {\n\t\treturn this.effectiveDir === \"rtl\";\n\t}\n\n\tget hasSubmenu() {\n\t\treturn !!(this.items.length || this.loading);\n\t}\n\n\tget hasIcon() {\n\t\treturn !!this.icon;\n\t}\n\n\tget isSubMenuOpen() {\n\t\treturn this._popover?.open;\n\t}\n\n\tget ariaLabelledByText() {\n\t\treturn `${this.text} ${this.accessibleName}`.trim();\n\t}\n\n\tget menuHeaderTextPhone() {\n\t\treturn this.text;\n\t}\n\n\tget isPhone() {\n\t\treturn isPhone();\n\t}\n\n\tget labelBack() {\n\t\treturn MenuItem.i18nBundle.getText(MENU_BACK_BUTTON_ARIA_LABEL);\n\t}\n\n\tget labelClose() {\n\t\treturn MenuItem.i18nBundle.getText(MENU_CLOSE_BUTTON_ARIA_LABEL);\n\t}\n\n\tonBeforeRendering() {\n\t\tconst siblingsWithIcon = this.items.some(item => !!item.icon);\n\n\t\tthis.items.forEach(item => {\n\t\t\titem._siblingsWithIcon = siblingsWithIcon;\n\t\t});\n\t}\n\n\tget _focusable() {\n\t\treturn true;\n\t}\n\n\tget _accInfo() {\n\t\tconst accInfoSettings = {\n\t\t\trole: \"menuitem\",\n\t\t\tariaHaspopup: this.hasSubmenu ? AriaHasPopup.Menu.toLowerCase() as Lowercase<AriaHasPopup> : undefined,\n\t\t};\n\n\t\treturn { ...super._accInfo, ...accInfoSettings };\n\t}\n\n\tget _popover() {\n\t\treturn this.shadowRoot!.querySelector<ResponsivePopover>(\"[ui5-responsive-popover]\")!;\n\t}\n\n\t_closeAll() {\n\t\tif (this._popover) {\n\t\t\tthis._popover.open = false;\n\t\t}\n\t\tthis.selected = false;\n\t\tthis.fireEvent(\"close-menu\", {});\n\t}\n\n\t_close() {\n\t\tif (this._popover) {\n\t\t\tthis._popover.open = false;\n\t\t}\n\t\tthis.selected = false;\n\t}\n\n\t_beforePopoverOpen(e: CustomEvent) {\n\t\tconst prevented = !this.fireEvent<MenuBeforeOpenEventDetail>(\"before-open\", {}, true, false);\n\n\t\tif (prevented) {\n\t\t\te.preventDefault();\n\t\t}\n\t}\n\n\t_afterPopoverOpen() {\n\t\tthis.items[0]?.focus();\n\t\tthis.fireEvent(\"open\", {}, false, false);\n\t}\n\n\t_beforePopoverClose(e: CustomEvent<ResponsivePopoverBeforeCloseEventDetail>) {\n\t\tconst prevented = !this.fireEvent<MenuBeforeCloseEventDetail>(\"before-close\", { escPressed: e.detail.escPressed }, true, false);\n\n\t\tif (prevented) {\n\t\t\te.preventDefault();\n\t\t\treturn;\n\t\t}\n\n\t\tthis.selected = false;\n\t\tif (e.detail.escPressed) {\n\t\t\tthis.focus();\n\t\t}\n\t}\n\n\t_afterPopoverClose() {\n\t\tthis.fireEvent(\"close\", {}, false, false);\n\t}\n}\n\nMenuItem.define();\n\nexport default MenuItem;\n\nexport type {\n\tMenuBeforeCloseEventDetail,\n\tMenuBeforeOpenEventDetail,\n};\n"]}
+{"version":3,"file":"MenuItem.js","sourceRoot":"","sources":["../src/MenuItem.ts"],"names":[],"mappings":"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","sourcesContent":["import customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport Integer from \"@ui5/webcomponents-base/dist/types/Integer.js\";\nimport { getI18nBundle } from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport { isPhone } from \"@ui5/webcomponents-base/dist/Device.js\";\nimport AriaHasPopup from \"@ui5/webcomponents-base/dist/types/AriaHasPopup.js\";\nimport ListItem from \"./ListItem.js\";\nimport ResponsivePopover from \"./ResponsivePopover.js\";\nimport type PopoverPlacement from \"./types/PopoverPlacement.js\";\nimport List from \"./List.js\";\nimport Icon from \"./Icon.js\";\nimport BusyIndicator from \"./BusyIndicator.js\";\nimport MenuItemTemplate from \"./generated/templates/MenuItemTemplate.lit.js\";\nimport {\n\tMENU_BACK_BUTTON_ARIA_LABEL,\n\tMENU_CLOSE_BUTTON_ARIA_LABEL,\n} from \"./generated/i18n/i18n-defaults.js\";\nimport type { ResponsivePopoverBeforeCloseEventDetail } from \"./ResponsivePopover.js\";\n\n// Styles\nimport menuItemCss from \"./generated/themes/MenuItem.css.js\";\n\ntype MenuBeforeOpenEventDetail = { item?: MenuItem };\ntype MenuBeforeCloseEventDetail = { escPressed: boolean };\n\n/**\n * @class\n *\n * ### Overview\n *\n * `ui5-menu-item` is the item to use inside a `ui5-menu`.\n * An arbitrary hierarchy structure can be represented by recursively nesting menu items.\n *\n * ### Usage\n *\n * `ui5-menu-item` represents a node in a `ui5-menu`. The menu itself is rendered as a list,\n * and each `ui5-menu-item` is represented by a list item in that list. Therefore, you should only use\n * `ui5-menu-item` directly in your apps. The `ui5-li` list item is internal for the list, and not intended for public use.\n *\n * ### ES6 Module Import\n *\n * `import \"@ui5/webcomponents/dist/MenuItem.js\";`\n * @constructor\n * @extends ListItem\n * @since 1.3.0\n * @public\n */\n@customElement({\n\ttag: \"ui5-menu-item\",\n\ttemplate: MenuItemTemplate,\n\tstyles: [ListItem.styles, menuItemCss],\n\tdependencies: [...ListItem.dependencies, ResponsivePopover, List, BusyIndicator, Icon],\n})\nclass MenuItem extends ListItem {\n\tstatic async onDefine() {\n\t\tMenuItem.i18nBundle = await getI18nBundle(\"@ui5/webcomponents\");\n\t}\n\n\t/**\n\t * Defines the text of the tree item.\n\t * @default \"\"\n\t * @public\n\t */\n\t@property()\n\ttext!: string;\n\n\t/**\n\t * Defines the `additionalText`, displayed in the end of the menu item.\n\t *\n\t * **Note:** The additional text will not be displayed if there are items added in `items` slot or there are\n\t * components added to `endContent` slot.\n\t *\n\t * The priority of what will be displayed at the end of the menu item is as follows:\n\t * sub-menu arrow (if there are items added in `items` slot) -> components added in `endContent` -> text set to `additionalText`.\n\t * @default \"\"\n\t * @public\n\t * @since 1.8.0\n\t */\n\t@property()\n\tadditionalText!: string;\n\n\t/**\n\t * Defines the icon to be displayed as graphical element within the component.\n\t * The SAP-icons font provides numerous options.\n\t *\n\t * **Example:**\n\t *\n\t * See all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).\n\t * @default \"\"\n\t * @public\n\t */\n\t@property()\n\ticon!: string;\n\n\t/**\n\t * Defines whether a visual separator should be rendered before the item.\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tstartsSection!: boolean;\n\n\t/**\n\t * Defines whether `ui5-menu-item` is in disabled state.\n\t *\n\t * **Note:** A disabled `ui5-menu-item` is noninteractive.\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tdisabled!: boolean;\n\n\t/**\n\t * Defines the delay in milliseconds, after which the loading indicator will be displayed inside the corresponding ui5-menu popover.\n\t *\n\t * **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.\n\t * @default false\n\t * @public\n\t * @since 1.13.0\n\t */\n\t@property({ type: Boolean })\n\tloading!: boolean;\n\n\t/**\n\t * Defines the delay in milliseconds, after which the loading indicator will be displayed inside the corresponding ui5-menu popover.\n\t * @default 1000\n\t * @public\n\t * @since 1.13.0\n\t */\n\t@property({ validator: Integer, defaultValue: 1000 })\n\tloadingDelay!: number;\n\n\t/**\n\t * Defines the accessible ARIA name of the component.\n\t * @default \"\"\n\t * @public\n\t * @since 1.7.0\n\t */\n\t@property()\n\taccessibleName!: string;\n\n\t/**\n\t * Defines the text of the tooltip for the menu item.\n\t * @default \"\"\n\t * @public\n\t * @since 1.23.0\n\t */\n\t@property({ type: String })\n\ttooltip!: string;\n\n\t/**\n\t * Indicates whether any of the element siblings have icon.\n\t */\n\t@property({ type: Boolean, noAttribute: true })\n\t_siblingsWithIcon!: boolean;\n\n\t/**\n\t * Defines the items of this component.\n\t *\n\t * **Note:** If there are items added to this slot, an arrow will be displayed at the end\n\t * of the item in order to indicate that there are items added. In that case components added\n\t * to `endContent` slot or `additionalText` content will not be displayed.\n\t *\n\t * The priority of what will be displayed at the end of the menu item is as follows:\n\t * sub-menu arrow (if there are items added in `items` slot) -> components added in `endContent` -> text set to `additionalText`.\n\t * @public\n\t */\n\t@slot({ \"default\": true, type: HTMLElement, invalidateOnChildChange: true })\n\titems!: Array<MenuItem>;\n\n\t/**\n\t * Defines the components that should be displayed at the end of the menu item.\n\t *\n\t * **Note:** It is highly recommended to slot only components of type `ui5-button`,`ui5-link`\n\t * or `ui5-icon` in order to preserve the intended design. If there are components added to this slot,\n\t * and there is text set in `additionalText`, it will not be displayed. If there are items added to `items` slot,\n\t * nether `additionalText` nor components added to this slot would be displayed.\n\t *\n\t * The priority of what will be displayed at the end of the menu item is as follows:\n\t * sub-menu arrow (if there are items added in `items` slot) -> components added in `endContent` -> text set to `additionalText`.\n\t * @public\n\t * @since 2.0.0\n\t */\n\t@slot({ type: HTMLElement })\n\tendContent!: Array<HTMLElement>;\n\n\tget placement(): `${PopoverPlacement}` {\n\t\treturn this.isRtl ? \"Start\" : \"End\";\n\t}\n\n\tget isRtl() {\n\t\treturn this.effectiveDir === \"rtl\";\n\t}\n\n\tget hasSubmenu() {\n\t\treturn !!(this.items.length || this.loading);\n\t}\n\n\tget hasEndContent() {\n\t\treturn !!(this.endContent.length);\n\t}\n\n\tget hasIcon() {\n\t\treturn !!this.icon;\n\t}\n\n\tget isSubMenuOpen() {\n\t\treturn this._popover?.open;\n\t}\n\n\tget ariaLabelledByText() {\n\t\treturn `${this.text} ${this.accessibleName}`.trim();\n\t}\n\n\tget menuHeaderTextPhone() {\n\t\treturn this.text;\n\t}\n\n\tget isPhone() {\n\t\treturn isPhone();\n\t}\n\n\tget labelBack() {\n\t\treturn MenuItem.i18nBundle.getText(MENU_BACK_BUTTON_ARIA_LABEL);\n\t}\n\n\tget labelClose() {\n\t\treturn MenuItem.i18nBundle.getText(MENU_CLOSE_BUTTON_ARIA_LABEL);\n\t}\n\n\tonBeforeRendering() {\n\t\tconst siblingsWithIcon = this.items.some(item => !!item.icon);\n\n\t\tthis.items.forEach(item => {\n\t\t\titem._siblingsWithIcon = siblingsWithIcon;\n\t\t});\n\t}\n\n\tget _focusable() {\n\t\treturn true;\n\t}\n\n\tget _accInfo() {\n\t\tconst accInfoSettings = {\n\t\t\trole: \"menuitem\",\n\t\t\tariaHaspopup: this.hasSubmenu ? AriaHasPopup.Menu.toLowerCase() as Lowercase<AriaHasPopup> : undefined,\n\t\t};\n\n\t\treturn { ...super._accInfo, ...accInfoSettings };\n\t}\n\n\tget _popover() {\n\t\treturn this.shadowRoot!.querySelector<ResponsivePopover>(\"[ui5-responsive-popover]\")!;\n\t}\n\n\t_closeAll() {\n\t\tif (this._popover) {\n\t\t\tthis._popover.open = false;\n\t\t}\n\t\tthis.selected = false;\n\t\tthis.fireEvent(\"close-menu\", {});\n\t}\n\n\t_close() {\n\t\tif (this._popover) {\n\t\t\tthis._popover.open = false;\n\t\t}\n\t\tthis.selected = false;\n\t}\n\n\t_beforePopoverOpen(e: CustomEvent) {\n\t\tconst prevented = !this.fireEvent<MenuBeforeOpenEventDetail>(\"before-open\", {}, true, false);\n\n\t\tif (prevented) {\n\t\t\te.preventDefault();\n\t\t}\n\t}\n\n\t_afterPopoverOpen() {\n\t\tthis.items[0]?.focus();\n\t\tthis.fireEvent(\"open\", {}, false, false);\n\t}\n\n\t_beforePopoverClose(e: CustomEvent<ResponsivePopoverBeforeCloseEventDetail>) {\n\t\tconst prevented = !this.fireEvent<MenuBeforeCloseEventDetail>(\"before-close\", { escPressed: e.detail.escPressed }, true, false);\n\n\t\tif (prevented) {\n\t\t\te.preventDefault();\n\t\t\treturn;\n\t\t}\n\n\t\tthis.selected = false;\n\t\tif (e.detail.escPressed) {\n\t\t\tthis.focus();\n\t\t}\n\t}\n\n\t_afterPopoverClose() {\n\t\tthis.fireEvent(\"close\", {}, false, false);\n\t}\n}\n\nMenuItem.define();\n\nexport default MenuItem;\n\nexport type {\n\tMenuBeforeCloseEventDetail,\n\tMenuBeforeOpenEventDetail,\n};\n"]}

package/dist/MultiComboBox.d.ts

@@ -22,8 +22,8 @@ import List from "./List.js";
 import type { ListSelectionChangeEventDetail } from "./List.js";
 import ComboBoxFilter from "./types/ComboBoxFilter.js";
 import type ListItemBase from "./ListItemBase.js";
-import { InputEventDetail } from "./Input.js";
-import PopoverHorizontalAlign from "./types/PopoverHorizontalAlign.js";
+import type { InputEventDetail } from "./Input.js";
+import type PopoverHorizontalAlign from "./types/PopoverHorizontalAlign.js";
 /**
  * Interface for components that may be slotted inside a `ui5-multi-combobox` as items
  * @public
@@ -33,6 +33,8 @@ interface IMultiComboBoxItem extends UI5Element {
     selected: boolean;
     isGroupItem?: boolean;
     stableDomRef: string;
+    _isVisible?: boolean;
+    items?: Array<IMultiComboBoxItem>;
 }
 type ValueStateAnnouncement = Record<Exclude<ValueState, ValueState.None>, string>;
 type ValueStateTypeAnnouncement = Record<Exclude<ValueState, ValueState.None>, string>;
@@ -322,6 +324,12 @@ declare class MultiComboBox extends UI5Element implements IFormInputElement {
     static _groupItemFilter(item: IMultiComboBoxItem, idx: number, allItems: Array<IMultiComboBoxItem>, filteredItems: Array<IMultiComboBoxItem>): boolean | undefined;
     _afterOpenPicker(): void;
     _toggle(): void;
+    /**
+     * Retrieves a flat structure of all MultiComboBox items from the slotted nodes.
+     *
+     * @private
+     */
+    _getItems(): Array<IMultiComboBoxItem>;
     _getSelectedItems(): Array<MultiComboBoxItem>;
     _listSelectionChange(e: CustomEvent<ListSelectionChangeEventDetail>): void;
     syncItems(listItems: Array<ListItemBase>): void;

package/dist/MultiComboBox.js

@@ -30,15 +30,15 @@ import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/Ari
 import { getScopedVarName } from "@ui5/webcomponents-base/dist/CustomElementsScope.js";
 import { submitForm } from "@ui5/webcomponents-base/dist/features/InputElementsFormSupport.js";
 import MultiComboBoxItem, { isInstanceOfMultiComboBoxItem } from "./MultiComboBoxItem.js";
-import MultiComboBoxGroupItem from "./MultiComboBoxGroupItem.js";
-import ListItemGroupHeader from "./ListItemGroupHeader.js";
+import MultiComboBoxItemGroup, { isInstanceOfMultiComboBoxItemGroup } from "./MultiComboBoxItemGroup.js";
+import ListItemGroup from "./ListItemGroup.js";
 import Tokenizer, { getTokensCountText } from "./Tokenizer.js";
 import Token from "./Token.js";
 import Icon from "./Icon.js";
 import Popover from "./Popover.js";
 import ResponsivePopover from "./ResponsivePopover.js";
 import List from "./List.js";
-import StandardListItem from "./StandardListItem.js";
+import ListItemStandard from "./ListItemStandard.js";
 import ToggleButton from "./ToggleButton.js";
 import * as Filters from "./Filters.js";
 import Button from "./Button.js";
@@ -54,7 +54,6 @@ import MultiComboBoxPopover from "./generated/themes/MultiComboBoxPopover.css.js
 import ComboBoxFilter from "./types/ComboBoxFilter.js";
 import CheckBox from "./CheckBox.js";
 import Input from "./Input.js";
-import "./types/PopoverHorizontalAlign.js";
 import SuggestionItem from "./SuggestionItem.js";
 /**
  * @class
@@ -171,7 +170,7 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
     _mobileInputChange(e) {
         this._inputChange.call(this);
         const { value } = e.target;
-        const matchingItem = this.items.find(item => item.text === value);
+        const matchingItem = this._getItems().find(item => item.text === value);
         if (!matchingItem) {
             return;
         }
@@ -201,7 +200,7 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
     filterSelectedItems(e) {
         this.filterSelected = e.target.pressed;
         const selectedItems = this._filteredItems.filter(item => item.selected);
-        this.selectedItems = this.items.filter((item, idx, allItems) => MultiComboBox_1._groupItemFilter(item, ++idx, allItems, selectedItems) || selectedItems.indexOf(item) !== -1);
+        this.selectedItems = this._getItems().filter((item, idx, allItems) => MultiComboBox_1._groupItemFilter(item, ++idx, allItems, selectedItems) || selectedItems.indexOf(item) !== -1);
     }
     /**
      * Indicates whether the dropdown is open. True if the dropdown is open, false otherwise.
@@ -388,7 +387,7 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
     }
     _handleTokenCreationUponPaste(pastedText, e) {
         const separatedText = pastedText.split(/\r\n|\r|\n|\t/g).filter(t => !!t);
-        const matchingItems = this.items.filter(item => separatedText.includes(item.text) && !item.selected);
+        const matchingItems = this._getItems().filter(item => separatedText.includes(item.text) && !item.selected);
         if (matchingItems.length > 1) {
             e.preventDefault();
             this._selectItems(matchingItems);
@@ -405,18 +404,18 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
         this._handleTokenCreationUponPaste(pastedText, e);
     }
     _handleShow(e) {
-        const items = this.items;
+        const items = this._getItems();
         const selectedItem = this._getSelectedItems()[0];
         const focusedToken = this._tokenizer.tokens.find(token => token.focused);
         const value = this.value;
-        const matchingItem = this.items.find(item => item.text.localeCompare(value, undefined, { sensitivity: "base" }) === 0);
+        const matchingItem = this._getItems().find(item => item.text.localeCompare(value, undefined, { sensitivity: "base" }) === 0);
         e.preventDefault();
         if (this.readonly) {
             return;
         }
         this._isOpenedByKeyboard = true;
         this._shouldFilterItems = false;
-        this._filteredItems = this.items;
+        this._filteredItems = this._getItems();
         this._togglePopover();
         if (!focusedToken && matchingItem) {
             this._itemToFocus = matchingItem;
@@ -429,7 +428,7 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
             this._itemToFocus = items.find(item => item.text === focusedToken.text);
         }
         else {
-            this._itemToFocus = items[0];
+            this._itemToFocus = items.find(item => isInstanceOfMultiComboBoxItem(item));
         }
     }
     _handlePageUp(e) {
@@ -596,7 +595,7 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
     }
     _handleArrowNavigation(e, isDownControl) {
         const isArrowDown = isDownControl || isDown(e);
-        const hasSuggestions = this.items.length;
+        const hasSuggestions = this._getItems().length;
         const isOpen = this._getRespPopover().open;
         e.preventDefault();
         if (this.hasValueStateMessage && !this.valueStateHeader) {
@@ -635,7 +634,7 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
         }
     }
     _handleItemRangeSelection(e) {
-        const items = this.items;
+        const items = this._getItems();
         const listItems = this.list?.items;
         const currentItemIdx = Number(listItems?.indexOf(e.target));
         const nextItemIdx = currentItemIdx + 1;
@@ -655,7 +654,7 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
         }
     }
     _navigateToNextItem() {
-        const items = this.items;
+        const items = this._getItems();
         const itemsCount = items.length;
         const previousItemIdx = this.currentItemIdx;
         if (previousItemIdx > -1 && items[previousItemIdx].text !== this.value) {
@@ -664,9 +663,9 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
         if (previousItemIdx >= itemsCount - 1) {
             return;
         }
-        let currentItem = this.items[++this.currentItemIdx];
+        let currentItem = this._getItems()[++this.currentItemIdx];
         while ((this.currentItemIdx < itemsCount - 1 && currentItem.selected) || currentItem.isGroupItem) {
-            currentItem = this.items[++this.currentItemIdx];
+            currentItem = this._getItems()[++this.currentItemIdx];
         }
         if (currentItem.selected === true || currentItem.isGroupItem) {
             this.currentItemIdx = previousItemIdx;
@@ -677,7 +676,7 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
         this._innerInput.setSelectionRange(0, currentItem.text.length);
     }
     _navigateToPrevItem() {
-        const items = this.items;
+        const items = this._getItems();
         let previousItemIdx = this.currentItemIdx;
         if ((!this.value && previousItemIdx !== -1) || (previousItemIdx !== -1 && this.value && this.value !== items[previousItemIdx].text)) {
             previousItemIdx = -1;
@@ -689,9 +688,9 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
             this.currentItemIdx = 0;
             return;
         }
-        let currentItem = this.items[--this.currentItemIdx];
+        let currentItem = this._getItems()[--this.currentItemIdx];
         while ((currentItem && this.currentItemIdx > 0) && (currentItem.selected || currentItem.isGroupItem)) {
-            currentItem = this.items[--this.currentItemIdx];
+            currentItem = this._getItems()[--this.currentItemIdx];
         }
         if (!currentItem) {
             return;
@@ -706,7 +705,7 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
     }
     _handleEnter() {
         const lowerCaseValue = this.value.toLowerCase();
-        const matchingItem = this.items.find(item => (item.text.toLowerCase() === lowerCaseValue && !item.isGroupItem));
+        const matchingItem = this._getItems().find(item => (item.text.toLowerCase() === lowerCaseValue && !item.isGroupItem));
         const oldValueState = this.valueState;
         const innerInput = this._innerInput;
         if (this._internals?.form) {
@@ -769,10 +768,10 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
         }
     }
     _filterItems(str) {
-        const itemsToFilter = this.items.filter(item => !item.isGroupItem);
+        const itemsToFilter = this._getItems().filter(item => !item.isGroupItem);
         const filteredItems = (Filters[this.filter] || Filters.StartsWithPerTerm)(str, itemsToFilter, "text");
         // Return the filtered items and their group items
-        return this.items.filter((item, idx, allItems) => MultiComboBox_1._groupItemFilter(item, ++idx, allItems, filteredItems) || filteredItems.indexOf(item) !== -1);
+        return this._getItems().filter((item, idx, allItems) => MultiComboBox_1._groupItemFilter(item, ++idx, allItems, filteredItems) || filteredItems.indexOf(item) !== -1);
     }
     /**
      * Returns true if the group header should be shown (if there is a filtered suggestion item for this group item)
@@ -804,11 +803,36 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
     }
     _toggle() {
         this._open = !this._open;
-        this.fireEvent("open-change");
+        // Fire event for the new state
+        if (this._open) {
+            this.fireEvent("open");
+        }
+        else {
+            this.fireEvent("close");
+        }
+    }
+    /**
+     * Retrieves a flat structure of all MultiComboBox items from the slotted nodes.
+     *
+     * @private
+     */
+    _getItems() {
+        const items = [];
+        const slottedItems = this.getSlottedNodes("items");
+        slottedItems.forEach(item => {
+            if (isInstanceOfMultiComboBoxItemGroup(item)) {
+                const groupItems = [item, ...item.items].filter(Boolean);
+                items.push(...groupItems);
+            }
+            else {
+                items.push(item);
+            }
+        });
+        return items;
     }
     _getSelectedItems() {
         // Angular 2 way data binding
-        this.selectedValues = this.items.filter(item => item.selected);
+        this.selectedValues = this._getItems().filter(item => item.selected);
         return this.selectedValues;
     }
     _listSelectionChange(e) {
@@ -848,7 +872,7 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
     }
     syncItems(listItems) {
         listItems.forEach(item => {
-            this.items.forEach(mcbItem => {
+            this._getItems().forEach(mcbItem => {
                 if (mcbItem._id === item.getAttribute("data-ui5-token-id")) {
                     mcbItem.selected = item.selected;
                 }
@@ -898,7 +922,7 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
         this.filterSelected = false;
     }
     _beforeOpen() {
-        this._itemsBeforeOpen = this.items.map(item => {
+        this._itemsBeforeOpen = this._getItems().map(item => {
             return {
                 ref: item,
                 selected: item.selected,
@@ -910,7 +934,7 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
         this._innerInput.value = this.value;
         if (this.filterSelected) {
             const selectedItems = this._filteredItems.filter(item => item.selected);
-            this.selectedItems = this.items.filter((item, idx, allItems) => MultiComboBox_1._groupItemFilter(item, ++idx, allItems, selectedItems) || selectedItems.indexOf(item) !== -1);
+            this.selectedItems = this._getItems().filter((item, idx, allItems) => MultiComboBox_1._groupItemFilter(item, ++idx, allItems, selectedItems) || selectedItems.indexOf(item) !== -1);
         }
     }
     _handleTypeAhead(item, filterValue) {
@@ -926,7 +950,7 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
         this._shouldAutocomplete = false;
     }
     _getFirstMatchingItem(current) {
-        if (!this.items.length) {
+        if (!this._getItems().length) {
             return;
         }
         const matchingItems = this._startsWithMatchingItems(current).filter(item => !item.isGroupItem && !item.selected);
@@ -935,7 +959,7 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
         }
     }
     _startsWithMatchingItems(str) {
-        return Filters.StartsWith(str, this.items, "text");
+        return Filters.StartsWith(str, this._getItems(), "text");
     }
     _revertSelection() {
         this._filteredItems.forEach(item => {
@@ -957,9 +981,9 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
         this._inputLastValue = value;
         if (input && !input.value) {
             this.valueBeforeAutoComplete = "";
-            this._filteredItems = this.items;
+            this._filteredItems = this._getItems();
         }
-        this.items.forEach(item => {
+        this._getItems().forEach(item => {
             item._getRealDomRef = () => this._getRespPopover().querySelector(`*[data-ui5-stable=${item.stableDomRef}]`);
         });
         this.tokenizerAvailable = this._getSelectedItems().length > 0;
@@ -979,7 +1003,7 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
             this._filteredItems = this._filterItems(this._shouldAutocomplete || !!autoCompletedChars ? this.valueBeforeAutoComplete : value);
         }
         else {
-            this._filteredItems = this.items;
+            this._filteredItems = this._getItems();
         }
     }
     async onAfterRendering() {
@@ -1265,7 +1289,7 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
         return MultiComboBox_1.i18nBundle.getText(INPUT_CLEAR_ICON_ACC_NAME);
     }
     get selectAllCheckboxLabel() {
-        const items = this.items.filter(item => !item.isGroupItem);
+        const items = this._getItems().filter(item => !item.isGroupItem);
         const selected = items.filter(item => item.selected);
         return MultiComboBox_1.i18nBundle.getText(MCB_SELECTED_ITEMS, selected.length, items.length);
     }
@@ -1422,7 +1446,7 @@ MultiComboBox = MultiComboBox_1 = __decorate([
         ],
         dependencies: [
             MultiComboBoxItem,
-            MultiComboBoxGroupItem,
+            MultiComboBoxItemGroup,
             Tokenizer,
             Token,
             Icon,
@@ -1430,8 +1454,8 @@ MultiComboBox = MultiComboBox_1 = __decorate([
             ResponsivePopover,
             Popover,
             List,
-            StandardListItem,
-            ListItemGroupHeader,
+            ListItemStandard,
+            ListItemGroup,
             ToggleButton,
             Button,
             CheckBox,
@@ -1451,12 +1475,19 @@ MultiComboBox = MultiComboBox_1 = __decorate([
     ,
     event("input")
     /**
-     * Fired when the dropdown is opened or closed.
-     * @since 1.0.0-rc.5
+     * Fired when the dropdown is opened.
+     * @since 2.0.0
+     * @public
+     */
+    ,
+    event("open")
+    /**
+     * Fired when the dropdown is closed.
+     * @since 2.0.0
      * @public
      */
     ,
-    event("open-change")
+    event("close")
     /**
      * Fired when selection is changed by user interaction.
      * @param {IMultiComboBoxItem[]} items an array of the selected items.