@six-group/ui-library 0.0.0-insider.e5360cd → 0.0.0-insider.ec3ffc2

package/dist/collection/components/six-menu/six-menu.js

@@ -4,8 +4,9 @@ import { EventListeners } from "../../utils/event-listeners";
 import { debounce } from "../../utils/execution-control";
 const isFocusedMenuItem = (menuItem) => { var _a, _b, _c; return (_c = (_b = (_a = menuItem === null || menuItem === void 0 ? void 0 : menuItem.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.menu-item')) === null || _b === void 0 ? void 0 : _b.classList) === null || _c === void 0 ? void 0 : _c.contains('menu-item--focused'); };
 const isSIXMenuItemElement = (el) => (el === null || el === void 0 ? void 0 : el.tagName.toLowerCase()) === 'six-menu-item';
-const mapToMenuItem = ({ value, label }) => h("six-menu-item", { value: value }, label);
+const mapToMenuItem = ({ value, label }) => (h("six-menu-item", { key: value, value: value }, label));
 const DEFAULT_NUMBER_OF_ITEMS_SHOWN_FOR_VIRTUAL_SCROLLING = 5;
+const DEFAULT_SIX_MENU_ITEM_HEIGHT_FOR_VIRTUAL_SCROLLING = 48;
 const DEFAULT_SIX_MENU_ITEM_HEIGHT = 64;
 /**
  * @since 1.0
@@ -18,391 +19,421 @@ const DEFAULT_SIX_MENU_ITEM_HEIGHT = 64;
  * @part base - The component's base wrapper.
  */
 export class SixMenu {
-  constructor() {
-    this.eventListeners = new EventListeners();
-    this.typeToSelectString = '';
-    this.handleScrolling = () => {
-      if (this.menuWrapper == null)
-        return;
-      // for performance improvements we only update the DOM if the scrollRatio change "enough"
-      this.scrollingIndex = Math.floor(this.menuWrapper.scrollTop / this.sixMenuItemHeight);
-    };
-    this.removeBoxShadow = false;
-    this.items = null;
-    this.itemsShown = undefined;
-    this.virtualScroll = false;
-    this.itemSize = 10;
-    this.scrollingDebounce = 15;
-    this.scrollingIndex = 0;
-    this.sixMenuItemHeight = DEFAULT_SIX_MENU_ITEM_HEIGHT;
-  }
-  connectedCallback() {
-    this.handleClick = this.handleClick.bind(this);
-    this.handleKeyDown = this.handleKeyDown.bind(this);
-  }
-  componentWillLoad() {
-    if (this.items === null) {
-      return;
+    constructor() {
+        this.eventListeners = new EventListeners();
+        this.typeToSelectString = '';
+        this.handleScrolling = () => {
+            if (this.menuWrapper == null)
+                return;
+            // for performance improvements we only update the DOM if the scrollRatio change "enough"
+            this.scrollingIndex = Math.floor(this.menuWrapper.scrollTop / this.sixMenuItemHeight);
+        };
+        this.removeBoxShadow = false;
+        this.items = null;
+        this.itemsShown = undefined;
+        this.virtualScroll = false;
+        this.itemSize = 10;
+        this.scrollingDebounce = 15;
+        this.disableKeyboardHandling = false;
+        this.scrollingIndex = 0;
+        this.sixMenuItemHeight = this.virtualScroll
+            ? DEFAULT_SIX_MENU_ITEM_HEIGHT_FOR_VIRTUAL_SCROLLING
+            : DEFAULT_SIX_MENU_ITEM_HEIGHT;
     }
-  }
-  componentDidLoad() {
-    this.setupForVirtualScrollingAfterRendering();
-  }
-  disconnectedCallback() {
-    this.eventListeners.removeAll();
-  }
-  /**
-   * Initiates type-to-select logic, which automatically selects an option based on what the user is currently typing.
-   * The key passed will be appended to the internal query and the selection will be updated. After a brief period, the
-   * internal query is cleared automatically. This method is intended to be used with the keydown event. Useful for
-   * enabling type-to-select when the menu doesn't have focus.
-   */
-  async typeToSelect(key) {
-    var _a;
-    clearTimeout(this.typeToSelectTimeout);
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    this.typeToSelectTimeout = setTimeout(() => (this.typeToSelectString = ''), 750);
-    this.typeToSelectString += key.toLowerCase();
-    const items = this.getItems();
-    for (const item of items) {
-      const slot = (_a = item.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot:not([name])');
-      const label = getTextContent(slot).toLowerCase().trim();
-      if (label.substring(0, this.typeToSelectString.length) === this.typeToSelectString) {
-        item.setFocus();
-        break;
-      }
+    connectedCallback() {
+        this.handleClick = this.handleClick.bind(this);
+        this.handleKeyDown = this.handleKeyDown.bind(this);
     }
-  }
-  getItemsShown() {
-    var _a;
-    const defaultItemsShown = this.virtualScroll ? DEFAULT_NUMBER_OF_ITEMS_SHOWN_FOR_VIRTUAL_SCROLLING : 0;
-    return (_a = this.itemsShown) !== null && _a !== void 0 ? _a : defaultItemsShown;
-  }
-  setupForVirtualScrollingAfterRendering() {
-    var _a, _b;
-    if (!this.virtualScroll || this.menuWrapper == null)
-      return;
-    this.eventListeners.add(this.menuWrapper, 'scroll', debounce(this.handleScrolling, this.scrollingDebounce));
-    // set menu height to proper height once the item is rendered.
-    const menuItemHeight = (_b = (_a = this.menu) === null || _a === void 0 ? void 0 : _a.querySelector('six-menu-item')) === null || _b === void 0 ? void 0 : _b.clientHeight;
-    if (menuItemHeight != null && menuItemHeight > 0) {
-      this.sixMenuItemHeight = menuItemHeight;
+    componentWillLoad() {
+        if (this.items === null) {
+            return;
+        }
+    }
+    componentDidLoad() {
+        this.setupForVirtualScrollingAfterRendering();
+    }
+    disconnectedCallback() {
+        this.eventListeners.removeAll();
+    }
+    /**
+     * Initiates type-to-select logic, which automatically selects an option based on what the user is currently typing.
+     * The key passed will be appended to the internal query and the selection will be updated. After a brief period, the
+     * internal query is cleared automatically. This method is intended to be used with the keydown event. Useful for
+     * enabling type-to-select when the menu doesn't have focus.
+     */
+    async typeToSelect(key) {
+        var _a;
+        clearTimeout(this.typeToSelectTimeout);
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        this.typeToSelectTimeout = setTimeout(() => (this.typeToSelectString = ''), 750);
+        this.typeToSelectString += key.toLowerCase();
+        const items = this.getItems();
+        for (const item of items) {
+            const slot = (_a = item.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot:not([name])');
+            const label = getTextContent(slot).toLowerCase().trim();
+            if (label.substring(0, this.typeToSelectString.length) === this.typeToSelectString) {
+                item.setFocus();
+                break;
+            }
+        }
+    }
+    getItemsShown() {
+        var _a;
+        const defaultItemsShown = this.virtualScroll ? DEFAULT_NUMBER_OF_ITEMS_SHOWN_FOR_VIRTUAL_SCROLLING : 0;
+        if (this.items && this.items.length === 1) {
+            return 0;
+        }
+        return (_a = this.itemsShown) !== null && _a !== void 0 ? _a : defaultItemsShown;
+    }
+    setupForVirtualScrollingAfterRendering() {
+        var _a, _b;
+        if (!this.virtualScroll || this.menuWrapper == null)
+            return;
+        this.eventListeners.add(this.menuWrapper, 'scroll', debounce(this.handleScrolling, this.scrollingDebounce));
+        // set menu height to proper height once the item is rendered.
+        const menuItemHeight = (_b = (_a = this.menu) === null || _a === void 0 ? void 0 : _a.querySelector('six-menu-item')) === null || _b === void 0 ? void 0 : _b.clientHeight;
+        if (menuItemHeight != null && menuItemHeight > 0) {
+            this.sixMenuItemHeight = menuItemHeight;
+        }
     }
-  }
-  getItems() {
-    if (this.menu == null)
-      return [];
-    if (this.items != null) {
-      return this.items.map(mapToMenuItem);
+    getItems() {
+        if (this.menu == null)
+            return [];
+        if (this.items != null) {
+            return this.items.map(mapToMenuItem);
+        }
+        const slot = this.menu.querySelector('slot');
+        if (slot == null)
+            return [];
+        return [...slot.assignedElements({ flatten: true })].filter((el) => isSIXMenuItemElement(el) && !el.disabled);
     }
-    const slot = this.menu.querySelector('slot');
-    if (slot == null)
-      return [];
-    return [...slot.assignedElements({ flatten: true })].filter((el) => isSIXMenuItemElement(el) && !el.disabled);
-  }
-  getActiveItemIndex() {
-    const items = this.getItems();
-    const selectedItem = this.getActiveItem();
-    if (selectedItem != null) {
-      const itemIndex = items.indexOf(selectedItem);
-      if (itemIndex > -1) {
-        return itemIndex;
-      }
+    getActiveItemIndex() {
+        const items = this.getItems();
+        const selectedItem = this.getActiveItem();
+        if (selectedItem != null) {
+            const itemIndex = items.indexOf(selectedItem);
+            if (itemIndex > -1) {
+                return itemIndex;
+            }
+        }
+        const sixMenuItems = this.extractItemsFromDOM();
+        return sixMenuItems.findIndex(isFocusedMenuItem);
     }
-    const sixMenuItems = this.extractItemsFromDOM();
-    return sixMenuItems.findIndex(isFocusedMenuItem);
-  }
-  getActiveItem() {
-    var _a;
-    const activeElement = this.getItems().find((i) => i === document.activeElement);
-    if (activeElement != null) {
-      return activeElement;
+    getActiveItem() {
+        var _a;
+        const activeElement = this.getItems().find((i) => i === document.activeElement);
+        if (activeElement != null) {
+            return activeElement;
+        }
+        return (_a = this.extractItemsFromDOM()) === null || _a === void 0 ? void 0 : _a.find(isFocusedMenuItem);
     }
-    return (_a = this.extractItemsFromDOM()) === null || _a === void 0 ? void 0 : _a.find(isFocusedMenuItem);
-  }
-  extractItemsFromDOM() {
-    var _a, _b;
-    return Array.from((_b = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('six-menu-item')) !== null && _b !== void 0 ? _b : []);
-  }
-  setActiveItem(item) {
-    item === null || item === void 0 ? void 0 : item.setFocus();
-  }
-  handleClick(event) {
-    const target = event.target;
-    const clickedItem = target.closest('six-menu-item');
-    if (clickedItem && !clickedItem.disabled) {
-      this.sixMenuItemSelected.emit({ name: clickedItem.value, item: clickedItem });
+    extractItemsFromDOM() {
+        var _a, _b;
+        return Array.from((_b = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('six-menu-item')) !== null && _b !== void 0 ? _b : []);
     }
-  }
-  handleKeyDown(event) {
-    // Make a selection when pressing enter
-    if (event.key === 'Enter') {
-      const activeItem = this.getActiveItem();
-      event.preventDefault();
-      if (activeItem != null) {
-        this.sixMenuItemSelected.emit({ name: activeItem.value, item: activeItem });
-      }
+    setActiveItem(item) {
+        item === null || item === void 0 ? void 0 : item.setFocus();
     }
-    // Prevent scrolling when space is pressed
-    if (event.key === ' ') {
-      event.preventDefault();
+    handleClick(event) {
+        const target = event.target;
+        const clickedItem = target.closest('six-menu-item');
+        if (clickedItem && !clickedItem.disabled) {
+            this.sixMenuItemSelected.emit({ name: clickedItem.value, item: clickedItem });
+        }
     }
-    // Move the selection when pressing down or up
-    if (['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) {
-      const items = this.items === null ? this.getItems() : this.extractItemsFromDOM();
-      let indexOfActiveItem = this.getActiveItemIndex();
-      if (items.length > 0) {
-        event.preventDefault();
-        if (event.key === 'ArrowDown') {
-          indexOfActiveItem++;
+    handleKeyDown(event) {
+        if (this.disableKeyboardHandling) {
+            return;
         }
-        else if (event.key === 'ArrowUp') {
-          indexOfActiveItem--;
+        // Make a selection when pressing enter
+        if (event.key === 'Enter') {
+            const activeItem = this.getActiveItem();
+            event.preventDefault();
+            if (activeItem != null) {
+                this.sixMenuItemSelected.emit({ name: activeItem.value, item: activeItem });
+            }
         }
-        else if (event.key === 'Home') {
-          indexOfActiveItem = 0;
+        // Prevent scrolling when space is pressed
+        if (event.key === ' ') {
+            event.preventDefault();
         }
-        else if (event.key === 'End') {
-          indexOfActiveItem = items.length - 1;
+        // Move the selection when pressing down or up
+        if (['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) {
+            const items = this.items === null ? this.getItems() : this.extractItemsFromDOM();
+            let indexOfActiveItem = this.getActiveItemIndex();
+            if (items.length > 0) {
+                event.preventDefault();
+                if (event.key === 'ArrowDown') {
+                    indexOfActiveItem++;
+                }
+                else if (event.key === 'ArrowUp') {
+                    indexOfActiveItem--;
+                }
+                else if (event.key === 'Home') {
+                    indexOfActiveItem = 0;
+                }
+                else if (event.key === 'End') {
+                    indexOfActiveItem = items.length - 1;
+                }
+                if (indexOfActiveItem < 0)
+                    indexOfActiveItem = 0;
+                if (indexOfActiveItem > items.length - 1)
+                    indexOfActiveItem = items.length - 1;
+                this.setActiveItem(items[indexOfActiveItem]);
+                return;
+            }
         }
-        if (indexOfActiveItem < 0)
-          indexOfActiveItem = 0;
-        if (indexOfActiveItem > items.length - 1)
-          indexOfActiveItem = items.length - 1;
-        this.setActiveItem(items[indexOfActiveItem]);
-        return;
-      }
+        void this.typeToSelect(event.key);
     }
-    void this.typeToSelect(event.key);
-  }
-  getMenuWrapperStyle() {
-    var _a;
-    const styles = {};
-    if (this.getItemsShown() > 0) {
-      // calculate the proper height to show the correct number of items
-      styles.height = `${((_a = this.getItemsShown()) !== null && _a !== void 0 ? _a : 0) * this.sixMenuItemHeight}px`;
+    getMenuWrapperStyle() {
+        var _a;
+        const styles = {};
+        if (this.getItemsShown() > 0) {
+            // calculate the proper height to show the correct number of items
+            styles.height = `${((_a = this.getItemsShown()) !== null && _a !== void 0 ? _a : 0) * this.sixMenuItemHeight}px`;
+        }
+        else if (this.items && this.items.length === 1) {
+            styles.height = 'auto';
+        }
+        return Object.assign({}, styles);
     }
-    return Object.assign({}, styles);
-  }
-  getMenuContainerStyle() {
-    const styles = {};
-    if (this.virtualScroll) {
-      // calculate height of content are if all items would be rendered so the scrollbar has the proper size
-      styles.transform = `translateY(${this.sixMenuItemHeight * this.scrollingIndex}px)`;
+    getMenuContainerStyle() {
+        const styles = {};
+        if (this.virtualScroll) {
+            // calculate height of content are if all items would be rendered so the scrollbar has the proper size
+            styles.transform = `translateY(${this.sixMenuItemHeight * this.scrollingIndex}px)`;
+        }
+        return Object.assign({}, styles);
     }
-    return Object.assign({}, styles);
-  }
-  getScrollbarGhostStyle() {
-    const styles = {};
-    if (this.virtualScroll && this.items !== null) {
-      styles.height = `${this.items.length * this.sixMenuItemHeight - this.itemSize * this.sixMenuItemHeight}px`;
+    getScrollbarGhostStyle() {
+        const styles = {};
+        if (this.virtualScroll && this.items !== null && this.items.length > 1) {
+            styles.height = `${this.items.length * this.sixMenuItemHeight - this.itemSize * this.sixMenuItemHeight}px`;
+        }
+        return Object.assign({}, styles);
     }
-    return Object.assign({}, styles);
-  }
-  renderItems() {
-    if (this.items === undefined || this.items === null) {
-      return;
+    renderItems() {
+        if (this.items === undefined || this.items === null) {
+            return;
+        }
+        if (!this.virtualScroll) {
+            return this.items.map(mapToMenuItem);
+        }
+        return this.items
+            .slice(this.scrollingIndex, Math.min(this.items.length, this.itemSize + this.scrollingIndex))
+            .map(({ value, label }) => (h("six-menu-item", { checkType: "check", key: value, value: value }, label)));
     }
-    if (!this.virtualScroll) {
-      return this.items.map(mapToMenuItem);
+    render() {
+        return (h("div", { key: 'a346d393b279517ec252289e173e1d2e1ac82147', ref: (el) => (this.menuWrapper = el), style: this.getMenuWrapperStyle(), part: "wrapper", class: {
+                menu: true,
+                '.no-shadow': this.removeBoxShadow,
+            } }, h("div", { key: 'eeca9d33ecede486adc958510b2bc7028517a79a', ref: (el) => (this.menu = el), part: "base", role: "menu", onClick: this.handleClick, onKeyDown: this.handleKeyDown, tabIndex: 0, style: this.getMenuContainerStyle() }, h("slot", { key: 'c46d98b34ddaec7d041ee2ad4aa40a048a93cc80' }), this.renderItems()), this.virtualScroll && h("div", { key: '535cf4f968da60291f420da2722fc1692c0c064a', style: this.getScrollbarGhostStyle() })));
     }
-    return this.items
-      .slice(this.scrollingIndex, Math.min(this.items.length, this.itemSize + this.scrollingIndex))
-      .map(mapToMenuItem);
-  }
-  render() {
-    return (h("div", { ref: (el) => (this.menuWrapper = el), style: this.getMenuWrapperStyle(), part: "wrapper", class: {
-        menu: true,
-        'menu--noshadow': this.removeBoxShadow,
-        'menu__wrapper--scrollable': this.getItemsShown() > 0,
-      } }, h("div", { ref: (el) => (this.menu = el), part: "base", role: "menu", onClick: this.handleClick, onKeyDown: this.handleKeyDown, tabIndex: 0, style: this.getMenuContainerStyle() }, h("slot", null), this.renderItems()), this.virtualScroll && h("div", { style: this.getScrollbarGhostStyle() })));
-  }
-  static get is() { return "six-menu"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["six-menu.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["six-menu.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "removeBoxShadow": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Set to true to remove the box-shadow"
-        },
-        "attribute": "remove-box-shadow",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "items": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "SixMenuItemData[] | null",
-          "resolved": "SixMenuItemData[] | null",
-          "references": {
-            "SixMenuItemData": {
-              "location": "local",
-              "path": "/home/runner/work/six-webcomponents/six-webcomponents/libraries/ui-library/src/components/six-menu/six-menu.tsx",
-              "id": "src/components/six-menu/six-menu.tsx::SixMenuItemData"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Set the options to be shown in the dropdown"
-        },
-        "defaultValue": "null"
-      },
-      "itemsShown": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Defines how many items should be shown. If the number of items is larger than this property a scrollbar will be shown"
-        },
-        "attribute": "items-shown",
-        "reflect": false
-      },
-      "virtualScroll": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Defines whether the menu list will be rendered virtually i.e. only the elements actually shown (and a couple around)\nare actually rendered in the DOM. If you use virtual scrolling pass the elements via prop instead of via slot."
-        },
-        "attribute": "virtual-scroll",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "itemSize": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Used for virtual scrolling\nDefine how many items should be rendered in the DOM when using virtual scrolling"
-        },
-        "attribute": "item-size",
-        "reflect": false,
-        "defaultValue": "10"
-      },
-      "scrollingDebounce": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Used for virtual scrolling\nDefine the debounce for listening on scrolling changes in milliseconds.\nThe lower the number the more sensitive the component reacts to scrolling changes."
-        },
-        "attribute": "scrolling-debounce",
-        "reflect": false,
-        "defaultValue": "15"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "scrollingIndex": {},
-      "sixMenuItemHeight": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "sixMenuItemSelected",
-        "name": "six-menu-item-selected",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted when a menu item is selected."
-        },
-        "complexType": {
-          "original": "SixMenuItemSelectedPayload",
-          "resolved": "SixMenuItemSelectedPayload",
-          "references": {
-            "SixMenuItemSelectedPayload": {
-              "location": "local",
-              "path": "/home/runner/work/six-webcomponents/six-webcomponents/libraries/ui-library/src/components/six-menu/six-menu.tsx",
-              "id": "src/components/six-menu/six-menu.tsx::SixMenuItemSelectedPayload"
-            }
-          }
-        }
-      }];
-  }
-  static get methods() {
-    return {
-      "typeToSelect": {
-        "complexType": {
-          "signature": "(key: string) => Promise<void>",
-          "parameters": [{
-              "tags": [],
-              "text": ""
-            }],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
+    static get is() { return "six-menu"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["six-menu.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["six-menu.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "removeBoxShadow": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set to true to remove the box-shadow"
+                },
+                "attribute": "remove-box-shadow",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "items": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "SixMenuItemData[] | null",
+                    "resolved": "SixMenuItemData[] | null",
+                    "references": {
+                        "SixMenuItemData": {
+                            "location": "local",
+                            "path": "/home/runner/work/six-webcomponents/six-webcomponents/libraries/ui-library/src/components/six-menu/six-menu.tsx",
+                            "id": "src/components/six-menu/six-menu.tsx::SixMenuItemData"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set the options to be shown in the dropdown"
+                },
+                "defaultValue": "null"
+            },
+            "itemsShown": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines how many items should be shown. If the number of items is larger than this property a scrollbar will be shown"
+                },
+                "attribute": "items-shown",
+                "reflect": false
             },
-            "HTMLSlotElement": {
-              "location": "global",
-              "id": "global::HTMLSlotElement"
+            "virtualScroll": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines whether the menu list will be rendered virtually i.e. only the elements actually shown (and a couple around)\nare actually rendered in the DOM. If you use virtual scrolling pass the elements via prop instead of via slot."
+                },
+                "attribute": "virtual-scroll",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "itemSize": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Used for virtual scrolling\nDefine how many items should be rendered in the DOM when using virtual scrolling"
+                },
+                "attribute": "item-size",
+                "reflect": false,
+                "defaultValue": "10"
+            },
+            "scrollingDebounce": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Used for virtual scrolling\nDefine the debounce for listening on scrolling changes in milliseconds.\nThe lower the number the more sensitive the component reacts to scrolling changes."
+                },
+                "attribute": "scrolling-debounce",
+                "reflect": false,
+                "defaultValue": "15"
+            },
+            "disableKeyboardHandling": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Internal: Disables handling of key presses."
+                },
+                "attribute": "disable-keyboard-handling",
+                "reflect": false,
+                "defaultValue": "false"
             }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Initiates type-to-select logic, which automatically selects an option based on what the user is currently typing.\nThe key passed will be appended to the internal query and the selection will be updated. After a brief period, the\ninternal query is cleared automatically. This method is intended to be used with the keydown event. Useful for\nenabling type-to-select when the menu doesn't have focus.",
-          "tags": []
-        }
-      }
-    };
-  }
-  static get elementRef() { return "host"; }
+        };
+    }
+    static get states() {
+        return {
+            "scrollingIndex": {},
+            "sixMenuItemHeight": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "sixMenuItemSelected",
+                "name": "six-menu-item-selected",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when a menu item is selected."
+                },
+                "complexType": {
+                    "original": "SixMenuItemSelectedPayload",
+                    "resolved": "SixMenuItemSelectedPayload",
+                    "references": {
+                        "SixMenuItemSelectedPayload": {
+                            "location": "local",
+                            "path": "/home/runner/work/six-webcomponents/six-webcomponents/libraries/ui-library/src/components/six-menu/six-menu.tsx",
+                            "id": "src/components/six-menu/six-menu.tsx::SixMenuItemSelectedPayload"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "typeToSelect": {
+                "complexType": {
+                    "signature": "(key: string) => Promise<void>",
+                    "parameters": [{
+                            "name": "key",
+                            "type": "string",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "HTMLSlotElement": {
+                            "location": "global",
+                            "id": "global::HTMLSlotElement"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Initiates type-to-select logic, which automatically selects an option based on what the user is currently typing.\nThe key passed will be appended to the internal query and the selection will be updated. After a brief period, the\ninternal query is cleared automatically. This method is intended to be used with the keydown event. Useful for\nenabling type-to-select when the menu doesn't have focus.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "host"; }
 }
 //# sourceMappingURL=six-menu.js.map