@six-group/ui-library 4.0.0-beta.1 → 4.0.0-beta.2

package/dist/cjs/six-dropdown_2.cjs.entry.js

@@ -2,12 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-2f6daa5b.js');
-const scroll = require('./scroll-76e6f5d7.js');
-const popover = require('./popover-f743f62b.js');
-const eventListeners = require('./event-listeners-74715e62.js');
-const slot = require('./slot-ad537f24.js');
-const executionControl = require('./execution-control-46f388e0.js');
+const index = require('./index-900437fc.js');
+const popover = require('./popover-2df7e154.js');
+const eventListeners = require('./event-listeners-fdfe838c.js');
+const slot = require('./slot-6e6a400f.js');
+const executionControl = require('./execution-control-b4707294.js');
 
 function isTabbable(el) {
   const tabIndex = el.tabIndex;
@@ -19,17 +18,17 @@ function getNearestTabbableElement(el) {
     return el;
   }
   // Check the element's shadow root
-  if (el.shadowRoot) {
-    const tabbableShadowChild = [...el.shadowRoot.children].find(isTabbable);
-    if (tabbableShadowChild) {
+  if (el.shadowRoot != null) {
+    const tabbableShadowChild = [...el.shadowRoot.children].find((e) => isTabbable(e));
+    if (tabbableShadowChild != null) {
       return tabbableShadowChild;
     }
   }
   // Check the element's children
-  if (el.children) {
-    return [...el.children].map(getNearestTabbableElement)[0];
+  if (el.children != null) {
+    return [...el.children].map((e) => getNearestTabbableElement(e)).at(0);
   }
-  return null;
+  return undefined;
 }
 
 const sixDropdownCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{display:inline-block}.dropdown{position:relative}.dropdown__trigger{display:block}.dropdown__positioner{position:absolute;z-index:var(--six-z-index-dropdown)}.dropdown__positioner__filtered{width:100%}.dropdown__panel{max-height:50vh;font-family:var(--six-font-sans);font-size:var(--six-font-size-small);font-weight:var(--six-font-weight-normal);color:var(--color);background-color:var(--six-panel-background-color);border-radius:var(--six-border-radius-medium);box-shadow:var(--six-elevation-2dp);opacity:0;overflow:auto;overscroll-behavior:none;pointer-events:none;transform:scale(0.9);transition:var(--six-transition-fast) opacity, var(--six-transition-fast) transform;scrollbar-width:thin}.filter-hidden{display:none}.dropdown__positioner[data-popper-placement^=top] .dropdown__panel{transform-origin:bottom}.dropdown__positioner[data-popper-placement^=bottom] .dropdown__panel{transform-origin:top}.dropdown__positioner[data-popper-placement^=left] .dropdown__panel{transform-origin:right}.dropdown__positioner[data-popper-placement^=right] .dropdown__panel{transform-origin:left}.dropdown__positioner.popover-visible .dropdown__panel{opacity:1;transform:none;pointer-events:all}";
@@ -45,7 +44,7 @@ const SixDropdown = class {
     this.sixAfterShow = index.createEvent(this, "six-dropdown-after-show", 7);
     this.sixHide = index.createEvent(this, "six-dropdown-hide", 7);
     this.sixAfterHide = index.createEvent(this, "six-dropdown-after-hide", 7);
-    this.sixAutoFilterFired = index.createEvent(this, "six-dropdown-auto-filter-fired", 7);
+    this.sixAutoFilter = index.createEvent(this, "six-dropdown-auto-filter-fired", 7);
     this.sixAsyncFilterFired = index.createEvent(this, "six-async-filter-fired", 7);
     this.sixScroll = index.createEvent(this, "six-dropdown-scroll", 7);
     this.componentId = `dropdown-${++id}`;
@@ -53,23 +52,154 @@ const SixDropdown = class {
     this.hasBeenInitialized = false;
     this.eventListeners = new eventListeners.EventListeners();
     this.getMenuItems = () => {
-      if (this._options !== null) {
-        return this._options.map((option) => index.h("six-menu-item", { value: option.value }, option.label));
+      if (this.filteredOptions.length > 0) {
+        return this.filteredOptions.map((option) => index.h("six-menu-item", { value: option.value }, option.label));
       }
+      if (this.panel == null)
+        return [];
       const [panel] = slot.getSlotChildren(this.panel);
       // the menu-items can be in a slot e.g. in six-select or direct children of the panel
       return slot.getSlotChildren(panel) || Array.from(panel.querySelectorAll('six-menu-item'));
     };
     this.handleFilterInputChange = () => {
       var _a, _b;
+      if (this.filterInputElement == null)
+        return;
       const lowerCaseFilterTerm = ((_b = (_a = this.filterInputElement.value) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === null || _b === void 0 ? void 0 : _b.trim()) || '';
-      if (this._options) {
+      if (this.filteredOptions.length > 0) {
         this.handleFilteringForAttributeItems(lowerCaseFilterTerm);
       }
       else {
         this.handleFilteringForSlotItems(lowerCaseFilterTerm);
       }
-      this.sixAutoFilterFired.emit({ filterValue: lowerCaseFilterTerm });
+      this.sixAutoFilter.emit({ filterValue: lowerCaseFilterTerm });
+    };
+    this.handleDocumentKeyDown = (event) => {
+      var _a;
+      const keyboardEvent = event;
+      // Close when escape is pressed
+      if (keyboardEvent.key === 'Escape') {
+        void this.hide();
+        this.focusOnTrigger();
+        return;
+      }
+      if (this.filterInputElement === ((_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.activeElement)) {
+        if (keyboardEvent.key === 'ArrowDown') {
+          const item = this.getMenuItems().find((item) => item.style.display !== 'none');
+          if (item != null) {
+            item.setFocus();
+          }
+        }
+      }
+      // Handle tabbing
+      if (keyboardEvent.key === 'Tab') {
+        // Tabbing within an open menu should close the dropdown and refocus the trigger
+        if (this.open && document.activeElement != null && isSixMenuItem(document.activeElement)) {
+          keyboardEvent.preventDefault();
+          void this.hide();
+          this.focusOnTrigger();
+          return;
+        }
+        // Tabbing outside the containing element closes the panel
+        //
+        // If the dropdown is used within a shadow DOM, we need to obtain the activeElement within that shadowRoot,
+        // otherwise `document.activeElement` will only return the name of the parent shadow DOM element.
+        setTimeout(() => {
+          var _a, _b;
+          const activeElement = this.container.getRootNode() instanceof ShadowRoot
+            ? (_b = (_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.activeElement
+            : document.activeElement;
+          if ((activeElement === null || activeElement === void 0 ? void 0 : activeElement.closest(this.container.tagName.toLowerCase())) !== this.container) {
+            void this.hide();
+            return;
+          }
+        });
+      }
+    };
+    this.handleDocumentMouseDown = (event) => {
+      // Close when clicking outside the containing element
+      const path = event.composedPath();
+      if (!path.includes(this.container)) {
+        void this.hide();
+        return;
+      }
+    };
+    this.handlePanelSelect = (event) => {
+      const target = event.target;
+      // Hide the dropdown when a menu item is selected
+      if (this.closeOnSelect && isSixMenu(target)) {
+        void this.hide();
+        this.focusOnTrigger();
+      }
+    };
+    this.handleTriggerClick = () => {
+      this.open ? this.hide() : this.show();
+    };
+    this.handleTriggerKeyDown = (event) => {
+      // Close when escape or tab is pressed
+      if (event.key === 'Escape') {
+        this.focusOnTrigger();
+        void this.hide();
+        return;
+      }
+      // When spacebar/enter is pressed, show the panel but don't focus on the menu. This let's the user press the same
+      // key again to hide the menu in case they don't want to make a selection.
+      if (!this.disableHideOnEnterAndSpace && [' ', 'Enter'].includes(event.key)) {
+        event.preventDefault();
+        this.open ? void this.hide() : void this.show();
+        return;
+      }
+      const menu = this.getMenu();
+      // When up/down is pressed, we make the assumption that the user is familiar with the menu and plans to make a
+      // selection. Rather than toggle the panel, we focus on the menu (if one exists) and activate the first item for
+      // faster navigation.
+      if (['ArrowDown', 'ArrowUp'].includes(event.key)) {
+        event.preventDefault();
+        // Show the menu if it's not already open
+        if (!this.open) {
+          void this.show();
+        }
+        if (menu == null) {
+          return;
+        }
+        const menuItems = [...menu.querySelectorAll('six-menu-item')];
+        const firstMenuItem = menuItems.at(0);
+        const lastMenuItem = menuItems.at(menuItems.length - 1);
+        // Focus on a menu item
+        if (event.key === 'ArrowDown' && firstMenuItem != null) {
+          firstMenuItem.setFocus();
+          return;
+        }
+        if (event.key === 'ArrowUp' && lastMenuItem != null) {
+          lastMenuItem.setFocus();
+          return;
+        }
+      }
+      // Other keys bring focus to the menu and initiate type-to-select behavior
+      const ignoredKeys = ['Tab', 'Shift', 'Meta', 'Ctrl', 'Alt'];
+      if (this.open && menu != null && !ignoredKeys.includes(event.key)) {
+        void menu.typeToSelect(event.key);
+        return;
+      }
+    };
+    this.handleTriggerKeyUp = (event) => {
+      // Prevent space from triggering a click event in Firefox
+      if (event.key === ' ') {
+        event.preventDefault();
+      }
+    };
+    this.handleTriggerSlotChange = () => {
+      this.updateAccessibleTrigger();
+    };
+    this.handleDropdownScroll = () => {
+      if (this.panel == null)
+        return;
+      this.sixScroll.emit({
+        scrollHeight: this.panel.scrollHeight,
+        scrollTop: this.panel.scrollTop,
+        scrollbarHeight: this.panel.offsetHeight * (this.panel.offsetHeight / this.panel.scrollHeight),
+        scrollRatio: this.panel.scrollTop / (this.panel.scrollHeight - this.panel.clientHeight),
+      });
     };
     this.open = false;
     this.placement = 'bottom-start';
@@ -84,9 +214,9 @@ const SixDropdown = class {
     this.autofocusFilter = true;
     this.filterDebounce = executionControl.DEFAULT_DEBOUNCE_FAST;
     this.disableHideOnEnterAndSpace = false;
-    this.options = null;
+    this.options = [];
     this.virtualScroll = false;
-    this._options = null;
+    this.filteredOptions = [];
   }
   get hasFilterEnabled() {
     return this.filter || this.asyncFilter;
@@ -99,6 +229,8 @@ const SixDropdown = class {
     this.updateAccessibleTrigger();
   }
   handlePopoverOptionsChange() {
+    if (this.popover == null)
+      return;
     this.popover.setOptions({
       strategy: this.hoist ? 'fixed' : 'absolute',
       placement: this.placement,
@@ -107,25 +239,18 @@ const SixDropdown = class {
     });
   }
   handleOptionsChange() {
-    this._options = [...this.options];
+    if (Array.isArray(this.options)) {
+      this.filteredOptions = [...this.options];
+    }
   }
   connectedCallback() {
     if (this.virtualScroll && this.options === null) {
       console.error('Options must be defined when using virtual scrolling');
     }
-    if (this.options !== null) {
-      this._options = [...this.options];
-    }
-    this.handleDocumentKeyDown = this.handleDocumentKeyDown.bind(this);
-    this.handleDocumentMouseDown = this.handleDocumentMouseDown.bind(this);
-    this.handleMenuItemActivate = this.handleMenuItemActivate.bind(this);
-    this.handlePanelSelect = this.handlePanelSelect.bind(this);
-    this.handleTriggerClick = this.handleTriggerClick.bind(this);
-    this.handleTriggerKeyDown = this.handleTriggerKeyDown.bind(this);
-    this.handleTriggerKeyUp = this.handleTriggerKeyUp.bind(this);
-    this.handleTriggerSlotChange = this.handleTriggerSlotChange.bind(this);
-    this.handleDropdownScroll = this.handleDropdownScroll.bind(this);
-    if (this.hasBeenInitialized && !this.popover) {
+    if (Array.isArray(this.options)) {
+      this.filteredOptions = [...this.options];
+    }
+    if (this.hasBeenInitialized && this.popover == null) {
       // there was a weird bug when using six-dropdown inside an ag-grid filter. When closing the ag-grid filter
       // disconnectedCallback() is executed. However, since componentDidLoad() will not be rerendered the popover had
       // no longer a connected transitionEnd callback to the dropdown. To fix this, we have this sanity check here,
@@ -144,15 +269,17 @@ const SixDropdown = class {
       this.setupFiltering(this.handleFilterInputChange);
     }
     else if (this.asyncFilter) {
-      this.setupFiltering(() => this.sixAsyncFilterFired.emit({ filterValue: this.filterInputElement.value }));
+      this.setupFiltering(() => { var _a, _b; return this.sixAsyncFilterFired.emit({ filterValue: (_b = (_a = this.filterInputElement) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : '' }); });
     }
   }
   initializePopover() {
+    if (this.trigger == null || this.positioner == null)
+      return;
     const onAfterHide = () => {
-      if (this.filter) {
+      if (this.filter && this.filterInputElement != null) {
         this.filterInputElement.value = '';
-        if (this._options !== null) {
-          this._options = [...this.options];
+        if (this.filteredOptions.length > 0) {
+          this.filteredOptions = [...this.options];
         }
         else {
           const menuItems = this.getMenuItems();
@@ -162,14 +289,15 @@ const SixDropdown = class {
       this.sixAfterHide.emit();
     };
     const onAfterShow = async () => {
+      var _a;
       if (this.hasFilterEnabled && this.autofocusFilter) {
         // if dropdown filter is enabled we should autofocus the search field
-        await this.filterInputElement.setFocus();
+        await ((_a = this.filterInputElement) === null || _a === void 0 ? void 0 : _a.setFocus());
       }
       this.sixAfterShow.emit();
     };
     const onTransitionEnd = () => {
-      if (!this.open) {
+      if (!this.open && this.panel != null) {
         this.panel.scrollTop = 0;
       }
     };
@@ -185,14 +313,16 @@ const SixDropdown = class {
     });
   }
   setupFiltering(callback) {
-    this.eventListeners.add(this.filterInputElement, 'six-input-input', executionControl.debounce(callback, this.filterDebounce));
+    if (this.filterInputElement != null) {
+      this.eventListeners.add(this.filterInputElement, 'six-input-input', executionControl.debounce(callback, this.filterDebounce));
+    }
   }
   handleFilteringForAttributeItems(lowerCaseFilterTerm) {
-    if (lowerCaseFilterTerm === '') {
-      this._options = [...this.options];
+    if (lowerCaseFilterTerm === '' && Array.isArray(this.options)) {
+      this.filteredOptions = [...this.options];
       return;
     }
-    this._options = this.options.filter((option) => {
+    this.filteredOptions = this.options.filter((option) => {
       var _a, _b, _c, _d;
       return (option.label && ((_b = (_a = String(option.label)) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === null || _b === void 0 ? void 0 : _b.includes(lowerCaseFilterTerm))) ||
         (option.value && ((_d = (_c = String(option.value)) === null || _c === void 0 ? void 0 : _c.toLowerCase()) === null || _d === void 0 ? void 0 : _d.includes(lowerCaseFilterTerm)));
@@ -209,15 +339,16 @@ const SixDropdown = class {
     });
   }
   disconnectedCallback() {
+    var _a;
     this.eventListeners.removeAll();
     void this.hide();
-    this.popover.destroy();
-    this.popover = null;
+    (_a = this.popover) === null || _a === void 0 ? void 0 : _a.destroy();
+    this.popover = undefined;
   }
   /** Shows the dropdown panel */
   async show() {
     // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher
-    if (this.isVisible) {
+    if (this.isVisible || this.popover == null || this.panel == null) {
       return;
     }
     const sixShow = this.sixShow.emit();
@@ -235,7 +366,7 @@ const SixDropdown = class {
   /** Hides the dropdown panel */
   async hide() {
     // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher
-    if (!this.isVisible) {
+    if (!this.isVisible || this.panel == null || this.popover == null) {
       return;
     }
     const sixHide = this.sixHide.emit();
@@ -251,8 +382,10 @@ const SixDropdown = class {
     this.popover.hide();
   }
   focusOnTrigger() {
+    if (this.trigger == null)
+      return;
     const [trigger] = slot.getSlotChildren(this.trigger);
-    if (trigger) {
+    if (trigger != null) {
       if (typeof trigger.setFocus === 'function') {
         trigger.setFocus();
       }
@@ -262,143 +395,20 @@ const SixDropdown = class {
     }
   }
   getMenu() {
-    const [menu] = slot.getSlotChildren(this.panel).filter(isSixMenu);
-    return menu;
+    if (this.panel == null)
+      return;
+    return slot.getSlotChildren(this.panel).filter(isSixMenu).at(0);
   }
   /**
    * Instructs the dropdown menu to reposition. Useful when the position or size of the trigger changes when the menu
    * is activated.
    */
   async reposition() {
-    if (!this.open) {
+    if (!this.open || this.popover == null) {
       return;
     }
     this.popover.reposition();
   }
-  handleDocumentKeyDown(event) {
-    // Close when escape is pressed
-    if (event.key === 'Escape') {
-      void this.hide();
-      this.focusOnTrigger();
-      return;
-    }
-    if (this.filterInputElement === this.host.shadowRoot.activeElement) {
-      if (event.key === 'ArrowDown') {
-        const item = this.getMenuItems().find((item) => item.style.display !== 'none');
-        if (item) {
-          item.setFocus();
-        }
-      }
-    }
-    // Handle tabbing
-    if (event.key === 'Tab') {
-      // Tabbing within an open menu should close the dropdown and refocus the trigger
-      if (this.open && isSixMenuItem(document.activeElement)) {
-        event.preventDefault();
-        void this.hide();
-        this.focusOnTrigger();
-        return;
-      }
-      // Tabbing outside of the containing element closes the panel
-      //
-      // If the dropdown is used within a shadow DOM, we need to obtain the activeElement within that shadowRoot,
-      // otherwise `document.activeElement` will only return the name of the parent shadow DOM element.
-      setTimeout(() => {
-        var _a;
-        const activeElement = this.container.getRootNode() instanceof ShadowRoot
-          ? (_a = document.activeElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.activeElement
-          : document.activeElement;
-        if ((activeElement === null || activeElement === void 0 ? void 0 : activeElement.closest(this.container.tagName.toLowerCase())) !== this.container) {
-          void this.hide();
-          return;
-        }
-      });
-    }
-  }
-  handleDocumentMouseDown(event) {
-    // Close when clicking outside of the containing element
-    const path = event.composedPath();
-    if (!path.includes(this.container)) {
-      void this.hide();
-      return;
-    }
-  }
-  handleMenuItemActivate(event) {
-    const item = event.target;
-    scroll.scrollIntoView(item, this.panel);
-  }
-  handlePanelSelect(event) {
-    const target = event.target;
-    // Hide the dropdown when a menu item is selected
-    if (this.closeOnSelect && isSixMenu(target)) {
-      void this.hide();
-      this.focusOnTrigger();
-    }
-  }
-  handleTriggerClick() {
-    this.open ? this.hide() : this.show();
-  }
-  handleTriggerKeyDown(event) {
-    const menu = this.getMenu();
-    const menuItems = menu ? [...menu.querySelectorAll('six-menu-item')] : null;
-    const firstMenuItem = menuItems[0];
-    const lastMenuItem = menuItems[menuItems.length - 1];
-    // Close when escape or tab is pressed
-    if (event.key === 'Escape') {
-      this.focusOnTrigger();
-      void this.hide();
-      return;
-    }
-    // When spacebar/enter is pressed, show the panel but don't focus on the menu. This let's the user press the same
-    // key again to hide the menu in case they don't want to make a selection.
-    if (!this.disableHideOnEnterAndSpace && [' ', 'Enter'].includes(event.key)) {
-      event.preventDefault();
-      this.open ? void this.hide() : void this.show();
-      return;
-    }
-    // When up/down is pressed, we make the assumption that the user is familiar with the menu and plans to make a
-    // selection. Rather than toggle the panel, we focus on the menu (if one exists) and activate the first item for
-    // faster navigation.
-    if (['ArrowDown', 'ArrowUp'].includes(event.key)) {
-      event.preventDefault();
-      // Show the menu if it's not already open
-      if (!this.open) {
-        void this.show();
-      }
-      // Focus on a menu item
-      if (event.key === 'ArrowDown' && firstMenuItem) {
-        firstMenuItem.setFocus();
-        return;
-      }
-      if (event.key === 'ArrowUp' && lastMenuItem) {
-        lastMenuItem.setFocus();
-        return;
-      }
-    }
-    // Other keys bring focus to the menu and initiate type-to-select behavior
-    const ignoredKeys = ['Tab', 'Shift', 'Meta', 'Ctrl', 'Alt'];
-    if (this.open && menu && !ignoredKeys.includes(event.key)) {
-      void menu.typeToSelect(event.key);
-      return;
-    }
-  }
-  handleTriggerKeyUp(event) {
-    // Prevent space from triggering a click event in Firefox
-    if (event.key === ' ') {
-      event.preventDefault();
-    }
-  }
-  handleTriggerSlotChange() {
-    this.updateAccessibleTrigger();
-  }
-  handleDropdownScroll() {
-    this.sixScroll.emit({
-      scrollHeight: this.panel.scrollHeight,
-      scrollTop: this.panel.scrollTop,
-      scrollbarHeight: this.panel.offsetHeight * (this.panel.offsetHeight / this.panel.scrollHeight),
-      scrollRatio: this.panel.scrollTop / (this.panel.scrollHeight - this.panel.clientHeight),
-    });
-  }
   //
   // Slotted triggers can be arbitrary content, but we need to link them to the dropdown panel with `aria-haspopup` and
   // `aria-expanded`. These must be applied to the "accessible trigger" (the tabbable portion of the trigger element
@@ -410,8 +420,10 @@ const SixDropdown = class {
   // To determine this, we assume the first tabbable element in the trigger slot is the "accessible trigger."
   //
   updateAccessibleTrigger() {
-    const [accessibleTrigger] = slot.getSlotChildren(this.trigger).map(getNearestTabbableElement);
-    if (accessibleTrigger) {
+    if (this.trigger == null)
+      return;
+    const accessibleTrigger = slot.getSlotChildren(this.trigger).map(getNearestTabbableElement).at(0);
+    if (accessibleTrigger != null) {
       accessibleTrigger.setAttribute('aria-haspopup', 'true');
       accessibleTrigger.setAttribute('aria-expanded', this.open ? 'true' : 'false');
     }
@@ -425,7 +437,7 @@ const SixDropdown = class {
         dropdown__positioner__filtered: (this.filter || this.asyncFilter) && !this.hoist,
       } }, this.hasFilterEnabled && (index.h("six-input", { class: {
         'filter-hidden': !this.open,
-      }, "aria-hidden": this.open ? 'false' : 'true', ref: (el) => (this.filterInputElement = el), placeholder: this.filterPlaceholder })), index.h("div", { ref: (el) => (this.panel = el), part: "panel", class: "dropdown__panel", role: "menu", "aria-hidden": this.open ? 'false' : 'true', "aria-labelledby": this.componentId, onScroll: this.handleDropdownScroll }, index.h("slot", null), this._options && (index.h("six-menu", { part: "menu", items: this._options, virtualScroll: this.virtualScroll }))))));
+      }, "aria-hidden": this.open ? 'false' : 'true', ref: (el) => (this.filterInputElement = el), placeholder: this.filterPlaceholder })), index.h("div", { ref: (el) => (this.panel = el), part: "panel", class: "dropdown__panel", role: "menu", "aria-hidden": this.open ? 'false' : 'true', "aria-labelledby": this.componentId, onScroll: this.handleDropdownScroll }, index.h("slot", null), this.filteredOptions.length > 0 && (index.h("six-menu", { part: "menu", items: this.filteredOptions, virtualScroll: this.virtualScroll }))))));
   }
   get host() { return index.getElement(this); }
   static get watchers() { return {
@@ -446,7 +458,6 @@ const isSIXMenuItemElement = (el) => (el === null || el === void 0 ? void 0 : el
 const mapToMenuItem = ({ value, label }) => index.h("six-menu-item", { value: value }, label);
 const DEFAULT_NUMBER_OF_ITEMS_SHOWN_FOR_VIRTUAL_SCROLLING = 5;
 const DEFAULT_SIX_MENU_ITEM_HEIGHT = 64;
-const ITEMS_SHOWN_NOT_SET = undefined;
 const SixMenu = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
@@ -454,12 +465,14 @@ const SixMenu = class {
     this.eventListeners = new eventListeners.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 = ITEMS_SHOWN_NOT_SET;
+    this.itemsShown = undefined;
     this.virtualScroll = false;
     this.itemSize = 10;
     this.scrollingDebounce = 15;
@@ -490,6 +503,8 @@ const SixMenu = class {
   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();
@@ -504,36 +519,39 @@ const SixMenu = class {
   }
   getItemsShown() {
     var _a;
-    const defaultItemsShown = this.virtualScroll
-      ? DEFAULT_NUMBER_OF_ITEMS_SHOWN_FOR_VIRTUAL_SCROLLING
-      : ITEMS_SHOWN_NOT_SET;
+    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) {
+    if (!this.virtualScroll || this.menuWrapper == null)
       return;
-    }
     this.eventListeners.add(this.menuWrapper, 'scroll', executionControl.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 && menuItemHeight > 0) {
+    if (menuItemHeight != null && menuItemHeight > 0) {
       this.sixMenuItemHeight = menuItemHeight;
     }
   }
   getItems() {
-    if (this.items !== null && this.items !== undefined) {
+    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);
   }
   getActiveItemIndex() {
     const items = this.getItems();
     const selectedItem = this.getActiveItem();
-    const itemIndex = items.indexOf(selectedItem);
-    if (itemIndex > -1) {
-      return itemIndex;
+    if (selectedItem != null) {
+      const itemIndex = items.indexOf(selectedItem);
+      if (itemIndex > -1) {
+        return itemIndex;
+      }
     }
     const sixMenuItems = this.extractItemsFromDOM();
     return sixMenuItems.findIndex(isFocusedMenuItem);
@@ -541,17 +559,17 @@ const SixMenu = class {
   getActiveItem() {
     var _a;
     const activeElement = this.getItems().find((i) => i === document.activeElement);
-    if (activeElement) {
+    if (activeElement != null) {
       return activeElement;
     }
     return (_a = this.extractItemsFromDOM()) === null || _a === void 0 ? void 0 : _a.find(isFocusedMenuItem);
   }
   extractItemsFromDOM() {
     var _a, _b;
-    return Array.from((_b = (_a = this.host) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelectorAll('six-menu-item'));
+    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.setFocus();
+    item === null || item === void 0 ? void 0 : item.setFocus();
   }
   handleClick(event) {
     const target = event.target;
@@ -565,7 +583,7 @@ const SixMenu = class {
     if (event.key === 'Enter') {
       const activeItem = this.getActiveItem();
       event.preventDefault();
-      if (activeItem) {
+      if (activeItem != null) {
         this.sixMenuItemSelected.emit({ name: activeItem.value, item: activeItem });
       }
     }
@@ -577,7 +595,7 @@ const SixMenu = class {
     if (['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) {
       const items = this.items === null ? this.getItems() : this.extractItemsFromDOM();
       let indexOfActiveItem = this.getActiveItemIndex();
-      if (items.length) {
+      if (items.length > 0) {
         event.preventDefault();
         if (event.key === 'ArrowDown') {
           indexOfActiveItem++;
@@ -602,10 +620,11 @@ const SixMenu = class {
     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 = `${this.getItemsShown() * this.sixMenuItemHeight}px`;
+      styles.height = `${((_a = this.getItemsShown()) !== null && _a !== void 0 ? _a : 0) * this.sixMenuItemHeight}px`;
     }
     return Object.assign({}, styles);
   }