mtrl 0.9.4 → 0.9.6

package/dist/components/badge/api.d.ts

@@ -30,7 +30,6 @@ interface ComponentWithElements {
     };
     getClass: (name: string) => string;
     addClass: (...classes: string[]) => ComponentWithElements;
-    removeClass: (...classes: string[]) => ComponentWithElements;
     on: (event: string, handler: Function) => ComponentWithElements;
     off: (event: string, handler: Function) => ComponentWithElements;
 }

package/dist/components/badge/api.js

@@ -84,9 +84,11 @@ export const withAPI = ({ visibility, lifecycle }) => (component) => {
             component.config.variant = variant;
             if (variant === VARIANT_SMALL) {
                 component.element.textContent = "";
+                component.element.removeAttribute("role");
                 component.element.setAttribute("aria-hidden", "true");
             }
             else {
+                component.element.removeAttribute("aria-hidden");
                 component.element.setAttribute("role", "status");
                 if (component.config.label !== undefined) {
                     badgeComponent.setLabel(component.config.label);
@@ -146,7 +148,7 @@ export const withAPI = ({ visibility, lifecycle }) => (component) => {
             return badgeComponent;
         },
         removeClass: (...classes) => {
-            component.removeClass(...classes);
+            component.element.classList.remove(...classes.filter(Boolean));
             return badgeComponent;
         },
         on: (event, handler) => {

package/dist/components/bottom-app-bar/bottom-app-bar.js

@@ -37,13 +37,11 @@ export const createBottomAppBar = (config = {}) => {
             if (currentScrollY > prevScrollY + 10) {
                 if (isVisible) {
                     bottomBar.hide();
-                    componentConfig.onVisibilityChange?.(false);
                 }
             }
             else if (currentScrollY < prevScrollY - 10) {
                 if (!isVisible) {
                     bottomBar.show();
-                    componentConfig.onVisibilityChange?.(true);
                 }
             }
             prevScrollY = currentScrollY;
@@ -57,6 +55,9 @@ export const createBottomAppBar = (config = {}) => {
     }
     const bottomBar = {
         ...withLifecycleComponent,
+        destroy() {
+            withLifecycleComponent.lifecycle.destroy();
+        },
         addAction(button) {
             actionsContainer.appendChild(button);
             return this;
@@ -69,12 +70,18 @@ export const createBottomAppBar = (config = {}) => {
         },
         show() {
             this.element.classList.remove(`${component.getClass("bottom-app-bar")}--hidden`);
+            const changed = !isVisible;
             isVisible = true;
+            if (changed)
+                componentConfig.onVisibilityChange?.(true);
             return this;
         },
         hide() {
             this.element.classList.add(`${component.getClass("bottom-app-bar")}--hidden`);
+            const changed = isVisible;
             isVisible = false;
+            if (changed)
+                componentConfig.onVisibilityChange?.(false);
             return this;
         },
         isVisible() {

package/dist/components/button/features/progress.d.ts

@@ -17,6 +17,11 @@ interface ProgressEnhancedComponent {
     };
     setText?: (text: string) => unknown;
     getText?: () => string;
+    /** The label manager withText installs; the setText/getText above only exist after withAPI. */
+    text?: {
+        setText: (text: string) => unknown;
+        getText: () => string;
+    };
     showProgress?: () => Promise<ProgressEnhancedComponent>;
     showProgressSync?: () => ProgressEnhancedComponent;
     hideProgress?: () => Promise<ProgressEnhancedComponent>;

package/dist/components/button/features/progress.js

@@ -109,32 +109,36 @@ export const withProgress = (config) => (component) => {
         component.setIndeterminate(indeterminate);
         return component;
     };
+    const readLabel = () => component.text ? component.text.getText() : component.getText?.();
+    const writeLabel = (value) => {
+        if (component.text)
+            component.text.setText(value);
+        else
+            component.setText?.(value);
+    };
     component.setLoading = async function (loading, text) {
         if (loading && !isLoading) {
-            if (component.setText && component.getText) {
-                originalText = component.getText();
-            }
+            originalText = readLabel() ?? "";
             isLoading = true;
+            component.element.setAttribute("aria-busy", "true");
             await component.showProgress();
             if (component.disabled?.disable) {
                 component.disabled.disable();
             }
-            if (text && component.setText) {
-                component.setText(text);
-            }
+            if (text)
+                writeLabel(text);
         }
         else if (!loading && isLoading) {
             isLoading = false;
+            component.element.removeAttribute("aria-busy");
             await component.hideProgress();
             if (component.disabled?.enable) {
                 component.disabled.enable();
             }
-            if (text && component.setText) {
-                component.setText(text);
-            }
-            else if (originalText && component.setText) {
-                component.setText(originalText);
-            }
+            if (text)
+                writeLabel(text);
+            else if (originalText)
+                writeLabel(originalText);
         }
         return component;
     };

package/dist/components/card/api.js

@@ -9,24 +9,27 @@ export const withAPI = ({ lifecycle, config }) => (component) => ({
         return this;
     },
     setHeader(headerElement) {
-        if (headerElement && headerElement.classList.contains(`${component.getClass('card')}-header`)) {
-            const existingHeader = component.element.querySelector(`.${component.getClass('card')}-header`);
+        const card = component.getClass('card');
+        if (headerElement && headerElement.classList.contains(`${card}-header`)) {
+            const title = (header) => header?.querySelector(`.${card}-header-title`)?.id || null;
+            const existingHeader = component.element.querySelector(`.${card}-header`);
             if (existingHeader) {
+                const previous = title(existingHeader);
+                if (previous && component.element.getAttribute('aria-labelledby') === previous) {
+                    component.element.removeAttribute('aria-labelledby');
+                }
                 existingHeader.remove();
             }
-            const mediaElement = component.element.querySelector(`.${component.getClass('card')}-media`);
-            if (mediaElement) {
-                const mediaElements = component.element.querySelectorAll(`.${component.getClass('card')}-media`);
-                const lastMedia = mediaElements[mediaElements.length - 1];
-                if (lastMedia.nextSibling) {
-                    component.element.insertBefore(headerElement, lastMedia.nextSibling);
-                }
-                else {
-                    component.element.appendChild(headerElement);
-                }
+            let before = component.element.firstElementChild;
+            while (before && before.classList.contains(`${card}-media`)) {
+                before = before.nextElementSibling;
             }
-            else {
-                component.element.insertBefore(headerElement, component.element.firstChild);
+            component.element.insertBefore(headerElement, before);
+            const titleId = title(headerElement);
+            if (titleId &&
+                !component.element.hasAttribute('aria-labelledby') &&
+                !component.element.hasAttribute('aria-label')) {
+                component.element.setAttribute('aria-labelledby', titleId);
             }
         }
         return this;

package/dist/components/card/config.js

@@ -75,7 +75,7 @@ export const getElementConfig = (config) => {
     if (config.aria) {
         Object.entries(config.aria).forEach(([key, value]) => {
             if (value !== undefined) {
-                const attrName = key.startsWith("aria-") ? key : `aria-${key}`;
+                const attrName = key === "role" || key.startsWith("aria-") ? key : `aria-${key}`;
                 ariaAttributes[attrName] = value;
             }
         });

package/dist/components/card/content.js

@@ -4,6 +4,7 @@ import { createBase, withElement } from "../../core/compose/component.js";
 import { createElement } from "../../core/dom/create.js";
 import { safeUrl } from "../../core/utils/url.js";
 export const CARD_CONTENT_PADDING = true;
+let headerCount = 0;
 export const createCardContent = (config = {}) => {
     const baseConfig = {
         ...config,
@@ -73,13 +74,9 @@ export const createCardHeader = (config = {}) => {
                 text: config.title,
                 container: textContainer,
                 attributes: {
-                    id: `${header.element.id || 'card-header'}-title`
+                    id: `${header.element.id || `card-header-${++headerCount}`}-title`
                 }
             });
-            const parentCard = header.element.closest(`.${PREFIX}-card`);
-            if (parentCard && !parentCard.hasAttribute('aria-labelledby')) {
-                parentCard.setAttribute('aria-labelledby', `${header.element.id || 'card-header'}-title`);
-            }
         }
         if (config.subtitle) {
             createElement({

package/dist/components/dialog/config.js

@@ -10,7 +10,6 @@ export const defaultConfig = {
     autofocus: true,
     trapFocus: true,
     divider: false,
-    animationDuration: 150,
     buttons: []
 };
 export const createBaseConfig = (config = {}) => createComponentConfig(defaultConfig, config, 'dialog');

package/dist/components/dialog/features.js

@@ -236,7 +236,8 @@ const addButton = (footer, buttonConfig, component) => {
 };
 export const withVisibility = () => (component) => {
     const isOpen = component.config.open === true;
-    const animationDuration = component.config.animationDuration || 150;
+    const openDuration = component.config.animationDuration ?? 500;
+    const closeDuration = component.config.animationDuration ?? 150;
     const focusableElements = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
     let previouslyFocusedElement = null;
     let mouseDownOnOverlay = false;
@@ -370,8 +371,8 @@ export const withVisibility = () => (component) => {
                 const container = component.structure.container || document.body;
                 container.appendChild(component.overlay);
             }
-            addClass(component.overlay, `${component.getClass("dialog-overlay")}--visible`);
             setTimeout(() => {
+                addClass(component.overlay, `${component.getClass("dialog-overlay")}--visible`);
                 addClass(component.element, `${component.getClass("dialog")}--visible`);
                 trapFocus();
                 setupEvents();
@@ -379,7 +380,7 @@ export const withVisibility = () => (component) => {
                     component.emit(DIALOG_EVENTS.OPEN, { dialog: component });
                     setTimeout(() => {
                         component.emit(DIALOG_EVENTS.AFTER_OPEN, { dialog: component });
-                    }, animationDuration);
+                    }, openDuration);
                 }
             }, 10);
         },
@@ -414,7 +415,7 @@ export const withVisibility = () => (component) => {
                 if (typeof component.emit === "function") {
                     component.emit(DIALOG_EVENTS.AFTER_CLOSE, { dialog: component });
                 }
-            }, animationDuration);
+            }, closeDuration);
         },
         toggle(open) {
             if (open === undefined) {

package/dist/components/dialog/types.d.ts

@@ -164,8 +164,9 @@ export interface DialogConfig {
      */
     zIndex?: number;
     /**
-     * Duration of open/close animations in milliseconds
-     * @default 150
+     * How long `afteropen` and `afterclose` wait after opening and closing, in
+     * milliseconds, and when a closed dialog leaves the DOM. By default they
+     * follow the stylesheet: 450 after opening, 200 after closing.
      */
     animationDuration?: number;
     /**

package/dist/components/divider/features.d.ts

@@ -1,50 +1,6 @@
 import { BaseComponent, ElementComponent } from "../../core/compose/index.js";
 import { DividerConfig } from "./config.js";
 import { DividerComponent } from "./types.js";
-/**
- * Adds orientation functionality to divider
- *
- * Higher-order function that enhances a component with the ability to be
- * oriented horizontally (default) or vertically. Controls the appropriate
- * CSS classes and dimensional styling based on orientation.
- *
- * @param config - Divider configuration
- * @returns Function that enhances a component with orientation capabilities
- *
- * @internal
- */
 export declare const withOrientation: (config: DividerConfig) => <C extends ElementComponent & BaseComponent>(component: C) => C & Partial<DividerComponent>;
-/**
- * Adds inset functionality to divider
- *
- * Higher-order function that enhances a component with the ability to have
- * customized inset spacing. Supports three variants (full-width, inset, middle-inset)
- * and allows fine-grained control over start and end insets.
- *
- * Insets are applied as margins in the appropriate direction based on orientation:
- * - For horizontal dividers: left/right margins
- * - For vertical dividers: top/bottom margins
- *
- * @param config - Divider configuration
- * @returns Function that enhances a component with inset capabilities
- *
- * @internal
- */
-export declare const withInset: (config: DividerConfig) => <C extends ElementComponent & Partial<DividerComponent>>(component: C) => C & Partial<DividerComponent>;
-/**
- * Adds style customization to divider
- *
- * Higher-order function that enhances a component with visual customization
- * capabilities, including:
- * - Custom thickness (height for horizontal, width for vertical dividers)
- * - Custom colors (background-color CSS property)
- *
- * These styling options allow dividers to be visually adapted to different
- * design requirements while maintaining Material Design principles.
- *
- * @param config - Divider configuration
- * @returns Function that enhances a component with style capabilities
- *
- * @internal
- */
-export declare const withStyle: (config: DividerConfig) => <C extends ElementComponent & Partial<DividerComponent>>(component: C) => C & Partial<DividerComponent>;
+export declare const withInset: (config: DividerConfig) => <C extends ElementComponent & BaseComponent & Partial<DividerComponent>>(component: C) => C & Partial<DividerComponent>;
+export declare const withStyle: (config: DividerConfig) => <C extends ElementComponent & BaseComponent & Partial<DividerComponent>>(component: C) => C & Partial<DividerComponent>;

package/dist/components/divider/features.js

@@ -1,138 +1,77 @@
-export const withOrientation = (config) => (component) => {
+const ORIENTATIONS = ['horizontal', 'vertical'];
+const VARIANTS = ['full-width', 'inset', 'middle-inset'];
+const DEFAULT_INSET = 16;
+const applyLayout = (component, config) => {
+    const { element } = component;
+    const base = component.getClass('divider');
     const orientation = config.orientation || 'horizontal';
-    component.element.classList.add(`${component.getClass('divider')}--${orientation}`);
+    const variant = config.variant || 'full-width';
     const thickness = config.thickness || 1;
-    if (orientation === 'horizontal') {
-        component.element.style.height = `${thickness}px`;
-        component.element.style.width = '100%';
-    }
-    else {
-        component.element.style.width = `${thickness}px`;
-        component.element.style.height = '100%';
+    const horizontal = orientation === 'horizontal';
+    ORIENTATIONS.forEach(name => element.classList.toggle(`${base}--${name}`, name === orientation));
+    VARIANTS.forEach(name => element.classList.toggle(`${base}--${name}`, name === variant));
+    if (horizontal)
+        element.removeAttribute('aria-orientation');
+    else
+        element.setAttribute('aria-orientation', 'vertical');
+    const style = element.style;
+    style.marginLeft = style.marginRight = style.marginTop = style.marginBottom = '';
+    const cross = horizontal ? 'height' : 'width';
+    const main = horizontal ? 'width' : 'height';
+    style[cross] = `${thickness}px`;
+    style[main] = '100%';
+    if (variant !== 'full-width') {
+        const insetStart = config.insetStart !== undefined ? config.insetStart : DEFAULT_INSET;
+        const insetEnd = config.insetEnd !== undefined
+            ? config.insetEnd
+            : (variant === 'middle-inset' ? DEFAULT_INSET : 0);
+        style[horizontal ? 'marginLeft' : 'marginTop'] = `${insetStart}px`;
+        style[horizontal ? 'marginRight' : 'marginBottom'] = `${insetEnd}px`;
+        style[main] = 'auto';
     }
+};
+export const withOrientation = (config) => (component) => {
+    applyLayout(component, config);
     return {
         ...component,
         getOrientation() {
-            return orientation;
+            return config.orientation || 'horizontal';
         },
         setOrientation(newOrientation) {
-            component.element.classList.remove(`${component.getClass('divider')}--${orientation}`);
-            component.element.classList.add(`${component.getClass('divider')}--${newOrientation}`);
-            if (newOrientation === 'horizontal') {
-                component.element.style.height = `${thickness}px`;
-                component.element.style.width = '100%';
-                component.element.style.marginTop = '';
-                component.element.style.marginBottom = '';
-            }
-            else {
-                component.element.style.width = `${thickness}px`;
-                component.element.style.height = '100%';
-                component.element.style.marginLeft = '';
-                component.element.style.marginRight = '';
-            }
+            config.orientation = newOrientation;
+            applyLayout(component, config);
             return this;
         }
     };
 };
-export const withInset = (config) => (component) => {
-    const variant = config.variant || 'full-width';
-    const orientation = config.orientation || 'horizontal';
-    if (variant === 'inset' || variant === 'middle-inset') {
-        if (orientation === 'horizontal') {
-            const insetStart = config.insetStart !== undefined ? config.insetStart : 16;
-            const insetEnd = config.insetEnd !== undefined ? config.insetEnd : (variant === 'middle-inset' ? 16 : 0);
-            component.element.style.marginLeft = `${insetStart}px`;
-            component.element.style.marginRight = `${insetEnd}px`;
-            component.element.style.width = "auto";
-        }
-        else {
-            const insetStart = config.insetStart !== undefined ? config.insetStart : 16;
-            const insetEnd = config.insetEnd !== undefined ? config.insetEnd : (variant === 'middle-inset' ? 16 : 0);
-            component.element.style.marginTop = `${insetStart}px`;
-            component.element.style.marginBottom = `${insetEnd}px`;
-            component.element.style.height = "auto";
-        }
+export const withInset = (config) => (component) => ({
+    ...component,
+    getVariant() {
+        return config.variant || 'full-width';
+    },
+    setVariant(newVariant) {
+        config.variant = newVariant;
+        applyLayout(component, config);
+        return this;
+    },
+    setInset(insetStart, insetEnd) {
+        if (insetStart !== undefined)
+            config.insetStart = insetStart;
+        if (insetEnd !== undefined)
+            config.insetEnd = insetEnd;
+        applyLayout(component, config);
+        return this;
     }
-    return {
-        ...component,
-        getVariant() {
-            return variant;
-        },
-        setVariant(newVariant) {
-            component.element.classList.remove(`${component.getClass('divider')}--${variant}`);
-            component.element.classList.add(`${component.getClass('divider')}--${newVariant}`);
-            const currentOrientation = component.getOrientation ? component.getOrientation() : orientation;
-            if (newVariant === 'full-width') {
-                if (currentOrientation === 'horizontal') {
-                    component.element.style.marginLeft = '';
-                    component.element.style.marginRight = '';
-                }
-                else {
-                    component.element.style.marginTop = '';
-                    component.element.style.marginBottom = '';
-                }
-            }
-            else {
-                const insetStart = config.insetStart !== undefined ? config.insetStart : 16;
-                const insetEnd = config.insetEnd !== undefined ? config.insetEnd : (newVariant === 'middle-inset' ? 16 : 0);
-                if (currentOrientation === 'horizontal') {
-                    component.element.style.marginLeft = `${insetStart}px`;
-                    component.element.style.marginRight = `${insetEnd}px`;
-                }
-                else {
-                    component.element.style.marginTop = `${insetStart}px`;
-                    component.element.style.marginBottom = `${insetEnd}px`;
-                }
-            }
-            return this;
-        },
-        setInset(insetStart, insetEnd) {
-            const currentOrientation = component.getOrientation ? component.getOrientation() : orientation;
-            const currentVariant = component.getVariant ? component.getVariant() : variant;
-            if (currentVariant !== 'full-width') {
-                if (currentOrientation === 'horizontal') {
-                    if (insetStart !== undefined) {
-                        component.element.style.marginLeft = `${insetStart}px`;
-                    }
-                    if (insetEnd !== undefined) {
-                        component.element.style.marginRight = `${insetEnd}px`;
-                    }
-                }
-                else {
-                    if (insetStart !== undefined) {
-                        component.element.style.marginTop = `${insetStart}px`;
-                    }
-                    if (insetEnd !== undefined) {
-                        component.element.style.marginBottom = `${insetEnd}px`;
-                    }
-                }
-            }
-            return this;
-        }
-    };
-};
+});
 export const withStyle = (config) => (component) => {
     if (config.color) {
         component.element.style.backgroundColor = config.color;
     }
-    const thickness = config.thickness || 1;
-    const orientation = config.orientation || 'horizontal';
-    if (orientation === 'horizontal') {
-        component.element.style.height = `${thickness}px`;
-    }
-    else {
-        component.element.style.width = `${thickness}px`;
-    }
     return {
         ...component,
         setThickness(newThickness) {
-            const currentOrientation = component.getOrientation ? component.getOrientation() : orientation;
-            if (currentOrientation === 'horizontal') {
-                component.element.style.height = `${newThickness}px`;
-            }
-            else {
-                component.element.style.width = `${newThickness}px`;
-            }
+            config.thickness = newThickness;
+            applyLayout(component, config);
             return this;
         },
         setColor(color) {

package/dist/components/menu/config.js

@@ -26,8 +26,8 @@ export const getElementConfig = (config) => {
         styles.maxHeight = config.maxHeight;
     }
     const attributes = {
-        role: "menu",
-        tabindex: "-1",
+        role: config.listbox ? "presentation" : "menu",
+        ...(config.listbox ? {} : { tabindex: "-1" }),
         "aria-hidden": (!config.visible).toString(),
         style: Object.entries(styles)
             .map(([key, value]) => `${key}: ${value}`)

package/dist/components/menu/features/controller.js

@@ -6,6 +6,11 @@ const withController = (config) => (component) => {
         return component;
     }
     const tasks = createMenuTasks();
+    const listbox = config.listbox === true;
+    const optionIdPrefix = `${component.getClass("menu")}-${Math.random().toString(36).slice(2, 9)}`;
+    if (listbox) {
+        component.element.addEventListener("mousedown", (e) => e.preventDefault());
+    }
     const state = {
         visible: config.visible || false,
         items: config.items || [],
@@ -51,8 +56,14 @@ const withController = (config) => (component) => {
         const itemElement = document.createElement("li");
         const itemClass = `${component.getClass("menu-item")}`;
         itemElement.className = itemClass;
-        itemElement.setAttribute("role", "menuitem");
-        itemElement.setAttribute("tabindex", "-1");
+        if (listbox) {
+            itemElement.setAttribute("role", "option");
+            itemElement.id = `${optionIdPrefix}-option-${index}`;
+        }
+        else {
+            itemElement.setAttribute("role", "menuitem");
+            itemElement.setAttribute("tabindex", "-1");
+        }
         itemElement.setAttribute("data-id", item.id);
         itemElement.setAttribute("data-index", index.toString());
         if (item.disabled) {
@@ -144,7 +155,9 @@ const withController = (config) => (component) => {
     const renderMenuItems = () => {
         const menuList = document.createElement("ul");
         menuList.className = `${component.getClass("menu-list")}`;
-        menuList.setAttribute("role", "menu");
+        menuList.setAttribute("role", listbox ? "listbox" : "menu");
+        if (listbox)
+            menuList.id = `${optionIdPrefix}-listbox`;
         let target = menuList;
         const startGroup = () => {
             const group = document.createElement("li");
@@ -256,31 +269,32 @@ const withController = (config) => (component) => {
             component.element.style.opacity = "";
             void component.element.getBoundingClientRect();
             component.element.classList.add(`${component.getClass("menu--visible")}`);
-            tasks.setTimeout(() => {
-                if (component.keyboard && component.keyboard.handleInitialFocus) {
-                    component.keyboard.handleInitialFocus(component.element, interactionType);
-                }
-                else {
-                    const items = Array.from(component.element.querySelectorAll(`.${component.getClass("menu-item")}`));
-                    items.forEach((item) => {
-                        item.tabIndex = -1;
-                    });
-                    if (items.length > 0)
-                        items[0].tabIndex = 0;
-                    if (interactionType === "keyboard" && items.length > 0) {
-                        items[0].focus();
+            if (!listbox)
+                tasks.setTimeout(() => {
+                    if (component.keyboard && component.keyboard.handleInitialFocus) {
+                        component.keyboard.handleInitialFocus(component.element, interactionType);
                     }
                     else {
-                        component.element.tabIndex = -1;
-                        component.element.focus();
+                        const items = Array.from(component.element.querySelectorAll(`.${component.getClass("menu-item")}`));
+                        items.forEach((item) => {
+                            item.tabIndex = -1;
+                        });
+                        if (items.length > 0)
+                            items[0].tabIndex = 0;
+                        if (interactionType === "keyboard" && items.length > 0) {
+                            items[0].focus();
+                        }
+                        else {
+                            component.element.tabIndex = -1;
+                            component.element.focus();
+                        }
                     }
-                }
-            }, 100);
+                }, 100);
             tasks.setTimeout(() => {
                 if (config.closeOnClickOutside && state.visible) {
                     document.addEventListener("click", handleDocumentClick);
                 }
-                if (config.closeOnEscape) {
+                if (config.closeOnEscape && !listbox) {
                     document.addEventListener("keydown", handleDocumentKeydown);
                 }
                 window.addEventListener("resize", handleWindowResize, {
@@ -432,7 +446,7 @@ const withController = (config) => (component) => {
     };
     const initMenu = () => {
         renderMenuItems();
-        if (component.keyboard && component.keyboard.setupKeyboardHandlers) {
+        if (!listbox && component.keyboard && component.keyboard.setupKeyboardHandlers) {
             component.keyboard.setupKeyboardHandlers(component.element, state, {
                 closeMenu,
                 closeSubmenu: component.submenu ? component.submenu.closeSubmenu : null,
@@ -454,7 +468,7 @@ const withController = (config) => (component) => {
             if (config.closeOnClickOutside) {
                 document.addEventListener("click", handleDocumentClick);
             }
-            if (config.closeOnEscape) {
+            if (config.closeOnEscape && !listbox) {
                 document.addEventListener("keydown", handleDocumentKeydown);
             }
             window.addEventListener("resize", handleWindowResize);