@six-group/ui-library 0.0.0-insider.b26fdef → 0.0.0-insider.b2db78f

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

@@ -1,12 +1,10 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-3baddcdc.js');
-const popover = require('./popover-1e7c09f1.js');
-const eventListeners = require('./event-listeners-9fb878f1.js');
-const slot = require('./slot-9821749e.js');
-const executionControl = require('./execution-control-d728da70.js');
+var index = require('./index-B_stPhJp.js');
+var popover = require('./popover-BUVXXnz7.js');
+var eventListeners = require('./event-listeners-BrSR7arL.js');
+var executionControl = require('./execution-control-oU0MWBWI.js');
+var slot = require('./slot-DBK7c7jH.js');
 
 function isTabbable(el) {
     const tabIndex = el.tabIndex;
@@ -31,48 +29,106 @@ function getNearestTabbableElement(el) {
     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-y:auto;overflow-x:hidden;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}";
+const sixDropdownCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}.sr-only{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}: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{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);border:1px solid var(--six-color-web-rock-300);box-shadow:var(--six-shadow-small);opacity:0;pointer-events:none;transform:scale(0.9);transition:var(--six-transition-fast) opacity, var(--six-transition-fast) transform;max-width:90vw}.dropdown__panel__scroll{max-height:18.75rem;overflow-y:auto;overflow-x:hidden;overscroll-behavior:none}.dropdown__panel__scroll--virtual{overflow-y:hidden;overflow-x:hidden}.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}.filter{border-bottom:1px solid var(--six-color-web-rock-300)}.filter__icon{color:var(--six-color-web-rock-600)}";
 
-const isTagName = (name) => (el) => (el === null || el === void 0 ? void 0 : el.tagName.toLowerCase()) === name.toLowerCase();
-const isSixMenu = isTagName('six-menu');
-const isSixMenuItem = isTagName('six-menu-item');
 let id = 0;
 const SixDropdown = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.sixShow = index.createEvent(this, "six-dropdown-show", 7);
-        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.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.sixShow = index.createEvent(this, "six-dropdown-show");
+        this.sixAfterShow = index.createEvent(this, "six-dropdown-after-show");
+        this.sixHide = index.createEvent(this, "six-dropdown-hide");
+        this.sixAfterHide = index.createEvent(this, "six-dropdown-after-hide");
+        this.sixAutoFilter = index.createEvent(this, "six-dropdown-auto-filter-fired");
+        this.sixAsyncFilterFired = index.createEvent(this, "six-async-filter-fired");
+        this.sixScroll = index.createEvent(this, "six-dropdown-scroll");
         this.componentId = `dropdown-${++id}`;
         this.isVisible = false;
-        this.hasBeenInitialized = false;
+        this.resizeObserver = new ResizeObserver(executionControl.debounce(() => this.updatePanelPosition(), 100));
+        /** Indicates whether the dropdown is open. You can use this in lieu of the show/hide methods. */
+        this.open = false;
+        /**
+         * The preferred placement of the dropdown panel. Note that the actual placement may vary as needed to keep the panel
+         * inside the viewport.
+         */
+        this.placement = 'bottom-start';
+        /** Determines whether the dropdown should hide when a menu item is selected. */
+        // eslint-disable-next-line @stencil-community/ban-default-true
+        this.closeOnSelect = true;
+        /** The distance in pixels from which to offset the panel away from its trigger. */
+        this.distance = 4;
+        /** The distance in pixels from which to offset the panel along its trigger. */
+        this.skidding = 0;
+        /**
+         * Enable this option to prevent the panel from being clipped when the component is placed inside a container with
+         * `overflow: auto|scroll`.
+         */
+        this.hoist = false;
+        /**
+         * Set to true to allow auto filtering for entries in the dropdown.
+         * With this flag the dropdown will automatically filter itsel.
+         * If you need to coordinate the shown elements yourself,
+         * e.g. because you need to call an endpoint use asyncFilter instead
+         */
+        this.filter = false;
+        /**
+         * Set to true to allow async filtering.
+         * When you enter something in the search field the component will only emit an event but not filter any elements itself.
+         * You can then simply listen to the 'six-async-filter-fired' event to manage the shown menu-items yourself
+         */
+        this.asyncFilter = false;
+        /** The filter's placeholder text. */
+        this.filterPlaceholder = 'Filter...';
+        /** By default the search field will be focused when opening a dropdown with filtering enabled. */
+        // eslint-disable-next-line @stencil-community/ban-default-true
+        this.autofocusFilter = true;
+        /** The debounce for the filter callbacks. */
+        this.filterDebounce = 0;
+        /** The panel can be opend/closed by pressing the spacebar or the enter key. In some cases you might want to avoid this */
+        this.disableHideOnEnterAndSpace = false;
+        /** Set the options to be shown in the dropdown (alternative to setting the elements via html)*/
+        this.options = [];
+        /** Defines whether the menu list will be rendered virtually i.e. only the elements actually shown (and a couple around)
+         *  are actually rendered in the DOM. If you use virtual scrolling pass the elements via prop instead of via slot. */
+        this.virtualScroll = false;
+        /**
+         * Determines if the dropdown panel's width should match the width of the trigger element.
+         *
+         * If set to `true`, the panel will resize its width to align with the trigger's width.
+         * If `false` or omitted, the panel will maintain its default width.
+         */
+        this.matchTriggerWidth = false;
         this.eventListeners = new eventListeners.EventListeners();
+        // internal representation of options, so we don't have to make options mutable
+        this.renderedOptions = [];
         this.getMenuItems = () => {
-            if (this.filteredOptions.length > 0) {
-                return this.filteredOptions.map((option) => index.h("six-menu-item", { value: option.value }, option.label));
+            var _a, _b, _c, _d;
+            if (this.options.length > 0) {
+                return {
+                    sixMenuItems: this.renderedOptions.map((option) => (index.h("six-menu-item", { value: option.value }, option.label))),
+                    selectionContainerItems: [],
+                };
             }
             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.filteredOptions.length > 0) {
-                this.handleFilteringForAttributeItems(lowerCaseFilterTerm);
+                return { sixMenuItems: [], selectionContainerItems: [] };
+            // Relies on the implementation of six-select. Its dropdown slot contains two elements,
+            // one for the selected menu items, and one for the other items.
+            const selectionContainer = (_a = this.panelSlot) === null || _a === void 0 ? void 0 : _a.assignedElements({ flatten: true }).filter(isSelectionContainer).at(0);
+            const sixMenuElement = (_b = this.panelSlot) === null || _b === void 0 ? void 0 : _b.assignedElements({ flatten: true }).filter(isSixMenu).at(0);
+            const selectionContainerItems = (selectionContainer === null || selectionContainer === void 0 ? void 0 : selectionContainer.querySelectorAll('six-menu-item')) || [];
+            let sixMenuItems = ((_c = sixMenuElement === null || sixMenuElement === void 0 ? void 0 : sixMenuElement.querySelector('slot')) === null || _c === void 0 ? void 0 : _c.assignedElements().filter((el) => isSixMenuItem(el))) || [];
+            if (sixMenuItems.length === 0) {
+                sixMenuItems = Array.from(((_d = sixMenuElement === null || sixMenuElement === void 0 ? void 0 : sixMenuElement.shadowRoot) === null || _d === void 0 ? void 0 : _d.querySelectorAll('six-menu-item')) || []);
+            }
+            if (selectionContainerItems.length > 0 || sixMenuItems.length > 0) {
+                return { sixMenuItems, selectionContainerItems: [...selectionContainerItems] };
             }
             else {
-                this.handleFilteringForSlotItems(lowerCaseFilterTerm);
+                return {
+                    sixMenuItems: sixMenuElement ? Array.from(sixMenuElement.querySelectorAll('six-menu-item')) : [],
+                    selectionContainerItems: [],
+                };
             }
-            this.sixAutoFilter.emit({ filterValue: lowerCaseFilterTerm });
         };
         this.handleDocumentKeyDown = (event) => {
             var _a;
@@ -85,7 +141,8 @@ const SixDropdown = class {
             }
             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');
+                    const { sixMenuItems, selectionContainerItems } = this.getMenuItems();
+                    const item = [...selectionContainerItems, ...sixMenuItems].find((item) => item.style.display !== 'none');
                     if (item != null) {
                         item.setFocus();
                     }
@@ -192,33 +249,17 @@ const SixDropdown = class {
             this.updateAccessibleTrigger();
         };
         this.handleDropdownScroll = () => {
-            if (this.panel == null)
+            if (this.scrollPanel == 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),
+                scrollHeight: this.scrollPanel.scrollHeight,
+                scrollTop: this.scrollPanel.scrollTop,
+                scrollbarHeight: this.scrollPanel.offsetHeight * (this.scrollPanel.offsetHeight / this.scrollPanel.scrollHeight),
+                scrollRatio: this.scrollPanel.scrollTop / (this.scrollPanel.scrollHeight - this.scrollPanel.clientHeight),
             });
         };
-        this.open = false;
-        this.placement = 'bottom-start';
-        this.closeOnSelect = true;
-        this.distance = 0;
-        this.skidding = 0;
-        this.hoist = false;
-        this.containingElement = undefined;
-        this.filter = false;
-        this.asyncFilter = false;
-        this.filterPlaceholder = 'Filter...';
-        this.autofocusFilter = true;
-        this.filterDebounce = executionControl.DEFAULT_DEBOUNCE_FAST;
-        this.disableHideOnEnterAndSpace = false;
-        this.options = [];
-        this.virtualScroll = false;
-        this.filteredOptions = [];
     }
-    get hasFilterEnabled() {
+    get filterEnabled() {
         return this.filter || this.asyncFilter;
     }
     get container() {
@@ -229,9 +270,9 @@ const SixDropdown = class {
         this.updateAccessibleTrigger();
     }
     handlePopoverOptionsChange() {
-        if (this.popover == null)
+        if (this.popoverHelper == null)
             return;
-        this.popover.setOptions({
+        this.popoverHelper.setOptions({
             strategy: this.hoist ? 'fixed' : 'absolute',
             placement: this.placement,
             distance: this.distance,
@@ -239,116 +280,132 @@ const SixDropdown = class {
         });
     }
     handleOptionsChange() {
-        if (Array.isArray(this.options)) {
-            this.filteredOptions = [...this.options];
-        }
+        this.validateOptions();
     }
-    connectedCallback() {
-        if (this.virtualScroll && this.options === null) {
-            console.error('Options must be defined when using virtual scrolling');
+    validateOptions() {
+        if (!Array.isArray(this.options)) {
+            this.options = [];
         }
-        if (Array.isArray(this.options)) {
-            this.filteredOptions = [...this.options];
+        if (this.virtualScroll && this.options.length === 0) {
+            console.error('Options must be defined when using virtual scrolling');
         }
-        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,
-            // to re-initialize the popover in case the component has already been initialized but the popover is undefined.
-            this.initializePopover();
+        this.renderedOptions = [...this.options];
+    }
+    componentWillLoad() {
+        this.validateOptions();
+        if (this.asyncFilter) {
+            this.filterDebounce = executionControl.DEFAULT_DEBOUNCE_FAST;
         }
     }
     componentDidLoad() {
-        this.hasBeenInitialized = true;
-        this.initializePopover();
-        // Show on init if open
+        this.init();
         if (this.open) {
             void this.show();
         }
+    }
+    connectedCallback() {
+        this.init();
+    }
+    init() {
+        this.initPopover();
+        // listen to filter
+        const filterInputElement = this.filterInputElement;
+        if (filterInputElement != null) {
+            this.eventListeners.add(filterInputElement, 'six-input-input', executionControl.debounce(() => {
+                var _a;
+                const filterValue = (_a = filterInputElement.value) !== null && _a !== void 0 ? _a : '';
+                if (this.filter) {
+                    this.applyFilter(filterValue);
+                }
+                this.emitFilterEvents(filterValue);
+            }, this.filterDebounce));
+        }
+    }
+    applyFilter(filterTerm) {
+        var _a;
+        const lowerCaseFilterTerm = ((_a = filterTerm.toLowerCase()) === null || _a === void 0 ? void 0 : _a.trim()) || '';
+        if (this.options.length > 0) {
+            this.renderedOptions = 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)));
+            });
+        }
+        else {
+            const { selectionContainerItems, sixMenuItems } = this.getMenuItems();
+            const selectionContainerValues = selectionContainerItems.map((s) => s.value);
+            // Filter items in selection container
+            selectionContainerItems.forEach(async (menuItem) => {
+                menuItem.style.display = (await containsFilterTerm(menuItem, lowerCaseFilterTerm)) ? 'unset' : 'none';
+            });
+            // Filter other items. Always hide items which contained in the selection container.
+            sixMenuItems.forEach(async (menuItem) => {
+                menuItem.style.display =
+                    (await containsFilterTerm(menuItem, lowerCaseFilterTerm)) &&
+                        !selectionContainerValues.includes(menuItem.value)
+                        ? 'unset'
+                        : 'none';
+            });
+        }
+    }
+    resetFilter() {
+        if (this.filterInputElement != null) {
+            this.filterInputElement.value = '';
+            this.emitFilterEvents('');
+        }
+        if (this.options.length > 0) {
+            this.renderedOptions = [...this.options];
+        }
+        else {
+            const { selectionContainerItems, sixMenuItems } = this.getMenuItems();
+            [...selectionContainerItems, ...sixMenuItems].forEach((item) => (item.style.display = 'unset'));
+        }
+    }
+    emitFilterEvents(filterValue) {
         if (this.filter) {
-            this.setupFiltering(this.handleFilterInputChange);
+            this.sixAutoFilter.emit({ filterValue });
         }
         else if (this.asyncFilter) {
-            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 : '' }); });
+            this.sixAsyncFilterFired.emit({ filterValue });
         }
     }
-    initializePopover() {
+    initPopover() {
         if (this.trigger == null || this.positioner == null)
             return;
-        const onAfterHide = () => {
-            if (this.filter && this.filterInputElement != null) {
-                this.filterInputElement.value = '';
-                if (this.filteredOptions.length > 0) {
-                    this.filteredOptions = [...this.options];
-                }
-                else {
-                    const menuItems = this.getMenuItems();
-                    menuItems.forEach((item) => (item.style.display = 'unset'));
-                }
-            }
-            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 ((_a = this.filterInputElement) === null || _a === void 0 ? void 0 : _a.setFocus());
-            }
-            this.sixAfterShow.emit();
-        };
-        const onTransitionEnd = () => {
-            if (!this.open && this.panel != null) {
-                this.panel.scrollTop = 0;
-            }
-        };
-        this.popover = new popover.Popover(this.trigger, this.positioner, {
+        this.popoverHelper = new popover.Popover(this.trigger, this.positioner, {
             strategy: this.hoist ? 'fixed' : 'absolute',
             placement: this.placement,
             distance: this.distance,
             skidding: this.skidding,
             transitionElement: this.panel,
-            onAfterHide,
-            onAfterShow,
-            onTransitionEnd,
-        });
-    }
-    setupFiltering(callback) {
-        if (this.filterInputElement != null) {
-            this.eventListeners.add(this.filterInputElement, 'six-input-input', executionControl.debounce(callback, this.filterDebounce));
-        }
-    }
-    handleFilteringForAttributeItems(lowerCaseFilterTerm) {
-        if (lowerCaseFilterTerm === '' && Array.isArray(this.options)) {
-            this.filteredOptions = [...this.options];
-            return;
-        }
-        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)));
-        });
-    }
-    handleFilteringForSlotItems(lowerCaseFilterTerm) {
-        const menuItems = this.getMenuItems();
-        menuItems.forEach(async (menuItem) => {
-            var _a, _b, _c, _d;
-            // hide all elements which don't contain the entered substring
-            const elementContainsFilterTerm = ((_b = (_a = menuItem === null || menuItem === void 0 ? void 0 : menuItem.value) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === null || _b === void 0 ? void 0 : _b.includes(lowerCaseFilterTerm)) ||
-                ((_d = (_c = (await (menuItem === null || menuItem === void 0 ? void 0 : menuItem.getTextLabel()))) === null || _c === void 0 ? void 0 : _c.toLowerCase()) === null || _d === void 0 ? void 0 : _d.includes(lowerCaseFilterTerm));
-            menuItem.style.display = elementContainsFilterTerm ? 'unset' : 'none';
+            onAfterHide: () => {
+                if (this.filterEnabled) {
+                    this.resetFilter();
+                }
+                this.sixAfterHide.emit();
+            },
+            onAfterShow: async () => {
+                this.sixAfterShow.emit();
+            },
+            onTransitionEnd: () => {
+                if (!this.open && this.scrollPanel != null) {
+                    this.scrollPanel.scrollTop = 0;
+                }
+            },
         });
     }
     disconnectedCallback() {
         var _a;
+        this.resizeObserver.disconnect();
         this.eventListeners.removeAll();
         void this.hide();
-        (_a = this.popover) === null || _a === void 0 ? void 0 : _a.destroy();
-        this.popover = undefined;
+        (_a = this.popoverHelper) === null || _a === void 0 ? void 0 : _a.destroy();
+        this.popoverHelper = undefined;
     }
     /** Shows the dropdown panel */
     async show() {
         // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher
-        if (this.isVisible || this.popover == null || this.panel == null) {
+        if (this.isVisible || this.popoverHelper == null || this.panel == null) {
             return;
         }
         const sixShow = this.sixShow.emit();
@@ -361,12 +418,38 @@ const SixDropdown = class {
         this.eventListeners.add(document, 'mousedown', this.handleDocumentMouseDown);
         this.isVisible = true;
         this.open = true;
-        this.popover.show();
+        if (this.trigger != null) {
+            this.resizeObserver.observe(this.trigger);
+        }
+        this.updatePanelPosition();
+        this.popoverHelper.show();
+        if (this.filterEnabled && this.autofocusFilter) {
+            requestAnimationFrame(() => {
+                var _a;
+                (_a = this.filterInputElement) === null || _a === void 0 ? void 0 : _a.setFocus();
+            });
+        }
+    }
+    /**
+     * Set min width of dropdown panel to the width of the trigger element
+     */
+    updatePanelPosition() {
+        if (!this.open) {
+            return;
+        }
+        if (this.matchTriggerWidth && this.trigger != null && this.panel != null) {
+            const width = this.trigger.getBoundingClientRect().width;
+            this.panel.style.minWidth = `${width}px`;
+        }
+        if (this.popoverHelper != null) {
+            this.popoverHelper.reposition();
+        }
     }
     /** Hides the dropdown panel */
     async hide() {
+        this.resizeObserver.disconnect();
         // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher
-        if (!this.isVisible || this.panel == null || this.popover == null) {
+        if (!this.isVisible || this.panel == null || this.popoverHelper == null) {
             return;
         }
         const sixHide = this.sixHide.emit();
@@ -379,12 +462,13 @@ const SixDropdown = class {
         this.eventListeners.remove(document, 'mousedown', this.handleDocumentMouseDown);
         this.isVisible = false;
         this.open = false;
-        this.popover.hide();
+        this.popoverHelper.hide();
     }
     focusOnTrigger() {
+        var _a;
         if (this.trigger == null)
             return;
-        const [trigger] = slot.getSlotChildren(this.trigger);
+        const trigger = (_a = this.triggerSlot) === null || _a === void 0 ? void 0 : _a.assignedElements({ flatten: true }).at(0);
         if (trigger != null) {
             if (typeof trigger.setFocus === 'function') {
                 trigger.setFocus();
@@ -395,19 +479,8 @@ const SixDropdown = class {
         }
     }
     getMenu() {
-        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 || this.popover == null) {
-            return;
-        }
-        this.popover.reposition();
+        var _a;
+        return (_a = this.panelSlot) === null || _a === void 0 ? void 0 : _a.assignedElements({ flatten: true }).filter(isSixMenu).at(0);
     }
     //
     // Slotted triggers can be arbitrary content, but we need to link them to the dropdown panel with `aria-haspopup` and
@@ -420,24 +493,30 @@ const SixDropdown = class {
     // To determine this, we assume the first tabbable element in the trigger slot is the "accessible trigger."
     //
     updateAccessibleTrigger() {
+        var _a;
         if (this.trigger == null)
             return;
-        const accessibleTrigger = slot.getSlotChildren(this.trigger).map(getNearestTabbableElement).at(0);
+        const assignedElements = (((_a = this.triggerSlot) === null || _a === void 0 ? void 0 : _a.assignedElements({ flatten: true })) || []);
+        const accessibleTrigger = assignedElements.map(getNearestTabbableElement).at(0);
         if (accessibleTrigger != null) {
             accessibleTrigger.setAttribute('aria-haspopup', 'true');
             accessibleTrigger.setAttribute('aria-expanded', this.open ? 'true' : 'false');
         }
     }
     render() {
-        return (index.h("div", { part: "base", id: this.componentId, class: {
+        return (index.h("div", { key: '04210ff1a4689e32c72f73ee76a94cbe9867b0de', part: "base", id: this.componentId, class: {
                 dropdown: true,
                 'dropdown--open': this.open,
-            } }, index.h("span", { part: "trigger", class: "dropdown__trigger", ref: (el) => (this.trigger = el), onClick: this.handleTriggerClick, onKeyDown: this.handleTriggerKeyDown, onKeyUp: this.handleTriggerKeyUp }, index.h("slot", { name: "trigger", onSlotchange: this.handleTriggerSlotChange })), index.h("div", { ref: (el) => (this.positioner = el), class: {
+            } }, index.h("span", { key: '9eb3c0e703b08734e9458b25021c0844d255ec6e', part: "trigger", class: "dropdown__trigger", ref: (el) => (this.trigger = el), onClick: this.handleTriggerClick, onKeyDown: this.handleTriggerKeyDown, onKeyUp: this.handleTriggerKeyUp }, index.h("slot", { key: '5cec1b43f07f830dfdebb3a71eb56f3233a539c4', name: "trigger", ref: (el) => (this.triggerSlot = el), onSlotchange: this.handleTriggerSlotChange })), index.h("div", { key: '8761367cfff9b66fdd4a7733f1c59440a507178b', ref: (el) => (this.positioner = el), class: {
                 dropdown__positioner: true,
                 dropdown__positioner__filtered: (this.filter || this.asyncFilter) && !this.hoist,
-            } }, this.hasFilterEnabled && (index.h("six-input", { class: {
+            } }, index.h("div", { key: '2ab6c7166cea3892e429db21f3b56e7a81e94735', ref: (el) => (this.panel = el), part: "panel", class: "dropdown__panel", role: "menu", "aria-hidden": this.open ? 'false' : 'true', "aria-labelledby": this.componentId }, this.filterEnabled && (index.h("six-input", { key: 'f7425daad22c1a756dfda4ecefa6293ac5cdcca5', class: {
+                filter: true,
                 '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.filteredOptions.length > 0 && (index.h("six-menu", { part: "menu", items: this.filteredOptions, virtualScroll: this.virtualScroll }))))));
+            }, "dropdown-search": true, "aria-hidden": this.open ? 'false' : 'true', ref: (el) => (this.filterInputElement = el), placeholder: this.filterPlaceholder }, index.h("six-icon", { key: '6416f4e28bc437c18b1cff0e0a9eaa54c9aba3d5', class: "filter__icon", slot: "suffix", size: "small" }, "search"))), index.h("div", { key: '479140f2107baad72960b415bd69d9ac80bb6f64', class: {
+                dropdown__panel__scroll: true,
+                'dropdown__panel__scroll--virtual': this.virtualScroll,
+            }, onScroll: this.handleDropdownScroll, ref: (el) => (this.scrollPanel = el) }, index.h("slot", { key: '539cda534eb5ef042526b66487bec3d22c89fdd7', ref: (el) => (this.panelSlot = el) }), this.options.length > 0 && (index.h("six-menu", { key: '6294182636491e13514380d9516f904f8a9b2204', part: "menu", items: this.renderedOptions, virtualScroll: this.virtualScroll }))), index.h("slot", { key: '9029f9f9a69d2b6fd19b36755ab9771181a7d1c6', name: "dropdown-footer" })))));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {
@@ -446,38 +525,77 @@ const SixDropdown = class {
         "hoist": ["handlePopoverOptionsChange"],
         "placement": ["handlePopoverOptionsChange"],
         "skidding": ["handlePopoverOptionsChange"],
-        "options": ["handleOptionsChange"]
+        "options": ["handleOptionsChange"],
+        "virtualScroll": ["handleOptionsChange"]
     }; }
 };
+function isSixMenu(el) {
+    return (el === null || el === void 0 ? void 0 : el.tagName.toLowerCase()) === 'six-menu';
+}
+function isSixMenuItem(el) {
+    return (el === null || el === void 0 ? void 0 : el.tagName.toLowerCase()) === 'six-menu-item';
+}
+function isSelectionContainer(el) {
+    var _a;
+    return ((_a = el === null || el === void 0 ? void 0 : el.getAttribute('class')) === null || _a === void 0 ? void 0 : _a.includes('selection-container')) || false;
+}
+async function containsFilterTerm(menuItem, lowerCaseFilterTerm) {
+    return (menuItem.value.toLowerCase().includes(lowerCaseFilterTerm) ||
+        (await menuItem.getTextLabel()).toLowerCase().includes(lowerCaseFilterTerm));
+}
 SixDropdown.style = sixDropdownCss;
 
-const sixMenuCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{display:block}.menu{padding:0 0;border:none;box-shadow:var(--six-elevation-2dp)}.menu:focus{outline:none}.menu--noshadow{box-shadow:none}.menu__wrapper--scrollable{overflow-y:auto}";
+const sixMenuCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}.sr-only{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:host{display:block}.menu{padding:var(--six-spacing-xx-small) 0;border:none;box-shadow:var(--six-shadow-small);overflow-y:auto;overflow-x:hidden}.menu:focus{outline:none}.no-shadow{box-shadow:none}";
 
 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 }) => index.h("six-menu-item", { value: value }, label);
+const mapToMenuItem = ({ value, label }) => (index.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;
 const SixMenu = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.sixMenuItemSelected = index.createEvent(this, "six-menu-item-selected", 7);
+        this.sixMenuItemSelected = index.createEvent(this, "six-menu-item-selected");
         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);
-        };
+        /** Set to true to remove the box-shadow */
         this.removeBoxShadow = false;
+        /** Set the options to be shown in the dropdown */
         this.items = null;
-        this.itemsShown = undefined;
+        /** Defines whether the menu list will be rendered virtually i.e. only the elements actually shown (and a couple around)
+         *  are actually rendered in the DOM. If you use virtual scrolling pass the elements via prop instead of via slot. */
         this.virtualScroll = false;
+        /**
+         * Used for virtual scrolling
+         * Define how many items should be rendered in the DOM when using virtual scrolling
+         */
         this.itemSize = 10;
+        /**
+         * Used for virtual scrolling
+         * Define the debounce for listening on scrolling changes in milliseconds.
+         * The lower the number the more sensitive the component reacts to scrolling changes.
+         */
         this.scrollingDebounce = 15;
+        /**
+         * Internal: Disables handling of key presses.
+         */
+        this.disableKeyboardHandling = false;
+        /**
+         * Used to calculate which items should be rendered in the DOM
+         */
         this.scrollingIndex = 0;
-        this.sixMenuItemHeight = DEFAULT_SIX_MENU_ITEM_HEIGHT;
+        // set a default item height, this variable will be updated with the real value after the first render.
+        // However, it's necessary to have a default value because we can only fetch the proper height after the first render
+        this.sixMenuItemHeight = this.virtualScroll
+            ? DEFAULT_SIX_MENU_ITEM_HEIGHT_FOR_VIRTUAL_SCROLLING
+            : DEFAULT_SIX_MENU_ITEM_HEIGHT;
+        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);
+        };
     }
     connectedCallback() {
         this.handleClick = this.handleClick.bind(this);
@@ -520,6 +638,9 @@ const SixMenu = class {
     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() {
@@ -579,6 +700,9 @@ const SixMenu = class {
         }
     }
     handleKeyDown(event) {
+        if (this.disableKeyboardHandling) {
+            return;
+        }
         // Make a selection when pressing enter
         if (event.key === 'Enter') {
             const activeItem = this.getActiveItem();
@@ -626,6 +750,9 @@ const SixMenu = class {
             // 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);
     }
     getMenuContainerStyle() {
@@ -638,7 +765,7 @@ const SixMenu = class {
     }
     getScrollbarGhostStyle() {
         const styles = {};
-        if (this.virtualScroll && this.items !== null) {
+        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);
@@ -652,14 +779,13 @@ const SixMenu = class {
         }
         return this.items
             .slice(this.scrollingIndex, Math.min(this.items.length, this.itemSize + this.scrollingIndex))
-            .map(mapToMenuItem);
+            .map(({ value, label }) => (index.h("six-menu-item", { checkType: "check", key: value, value: value }, label)));
     }
     render() {
-        return (index.h("div", { ref: (el) => (this.menuWrapper = el), style: this.getMenuWrapperStyle(), part: "wrapper", class: {
+        return (index.h("div", { key: 'a346d393b279517ec252289e173e1d2e1ac82147', ref: (el) => (this.menuWrapper = el), style: this.getMenuWrapperStyle(), part: "wrapper", class: {
                 menu: true,
-                'menu--noshadow': this.removeBoxShadow,
-                'menu__wrapper--scrollable': this.getItemsShown() > 0,
-            } }, index.h("div", { ref: (el) => (this.menu = el), part: "base", role: "menu", onClick: this.handleClick, onKeyDown: this.handleKeyDown, tabIndex: 0, style: this.getMenuContainerStyle() }, index.h("slot", null), this.renderItems()), this.virtualScroll && index.h("div", { style: this.getScrollbarGhostStyle() })));
+                '.no-shadow': this.removeBoxShadow,
+            } }, index.h("div", { key: 'eeca9d33ecede486adc958510b2bc7028517a79a', ref: (el) => (this.menu = el), part: "base", role: "menu", onClick: this.handleClick, onKeyDown: this.handleKeyDown, tabIndex: 0, style: this.getMenuContainerStyle() }, index.h("slot", { key: 'c46d98b34ddaec7d041ee2ad4aa40a048a93cc80' }), this.renderItems()), this.virtualScroll && index.h("div", { key: '535cf4f968da60291f420da2722fc1692c0c064a', style: this.getScrollbarGhostStyle() })));
     }
     get host() { return index.getElement(this); }
 };
@@ -667,5 +793,6 @@ SixMenu.style = sixMenuCss;
 
 exports.six_dropdown = SixDropdown;
 exports.six_menu = SixMenu;
+//# sourceMappingURL=six-dropdown.six-menu.entry.cjs.js.map
 
 //# sourceMappingURL=six-dropdown_2.cjs.entry.js.map