material 3.3.2 → 3.3.4

package/README.md

@@ -91,10 +91,10 @@ What a bundler keeps, minified and gzipped (kB is 1,000 bytes), measured from th
 <!-- sizes -->
 | Import | gzip |
 |--------|-----:|
-| `createButton` from `material`, with code splitting: the initial chunks (the progress indicator loads on demand) | 7.7 kB |
+| `createButton` from `material`, with code splitting: the initial chunks (the progress indicator loads on demand) | 7.6 kB |
 | `createButton`, without code splitting (the progress indicator included) | 13.9 kB |
 | `createButton`, `createTextField` and `createCheckbox`, without code splitting | 20.2 kB |
-| Everything the root exports (`export * from 'material'`), without code splitting | 127.9 kB |
+| Everything the root exports (`export * from 'material'`), without code splitting | 127.1 kB |
 | `material/styles/base` | 2.9 kB |
 | `material/styles/base` and `material/styles/button` | 5.2 kB |
 | `material/styles`, the full stylesheet | 63.7 kB |

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

@@ -45,23 +45,11 @@ const withController = (config, getComponent) => (component) => {
             return eventData;
         },
     };
-    const getOpenerElement = () => {
-        if (component.opener && typeof component.opener.getOpener === "function") {
-            return component.opener.getOpener();
-        }
-        const { opener } = config;
-        if (typeof opener === "string") {
-            const element = document.querySelector(opener);
-            if (!element) {
-                console.warn(`Menu opener not found: ${opener}`);
-                return null;
-            }
-            return element;
-        }
-        if (typeof opener === "object" && opener !== null && "element" in opener) {
-            return opener.element;
-        }
-        return opener;
+    const getOpenerElement = () => getComponent().getOpener() ?? null;
+    const reposition = () => {
+        const opener = getOpenerElement();
+        if (opener)
+            component.position?.positionMenu(opener);
     };
     const createMenuItem = (item, index) => {
         const itemElement = document.createElement("li");
@@ -287,10 +275,7 @@ const withController = (config, getComponent) => (component) => {
         if (topLayer)
             showInTopLayer(component.element, { kind: "popover-manual" });
         showTimer = tasks.setTimeout(() => {
-            const openerElement = getOpenerElement();
-            if (openerElement && component.position) {
-                component.position.positionMenu(openerElement);
-            }
+            reposition();
             component.element.setAttribute("aria-hidden", "false");
             component.element.style.transform = "";
             component.element.style.opacity = "";
@@ -298,24 +283,7 @@ const withController = (config, getComponent) => (component) => {
             component.element.classList.add(`${component.getClass("menu--visible")}`);
             if (!listbox)
                 focusTimer = 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();
-                        }
-                        else {
-                            component.element.tabIndex = -1;
-                            component.element.focus();
-                        }
-                    }
+                    component.keyboard?.handleInitialFocus(component.element, interactionType);
                 }, 100);
             window.addEventListener("resize", handleWindowResize, {
                 passive: true,
@@ -406,26 +374,18 @@ const withController = (config, getComponent) => (component) => {
                 }
             }
             else if (isTargetInsideSubmenu) {
-                if (component.keyboard && component.keyboard.handleMenuKeydown) {
-                    component.keyboard.handleMenuKeydown(e, state, {
-                        closeMenu,
-                        findItemById,
-                        ...submenuActions,
-                    });
-                }
-                else if (e.key === "Escape") {
-                    e.preventDefault();
-                    closeMenu(e, true);
-                }
+                component.keyboard?.handleMenuKeydown(e, state, {
+                    closeMenu,
+                    findItemById,
+                    ...submenuActions,
+                });
             }
             else {
-                if (component.keyboard && component.keyboard.handleMenuKeydown) {
-                    component.keyboard.handleMenuKeydown(e, state, {
-                        closeMenu,
-                        findItemById,
-                        ...submenuActions,
-                    });
-                }
+                component.keyboard?.handleMenuKeydown(e, state, {
+                    closeMenu,
+                    findItemById,
+                    ...submenuActions,
+                });
             }
         }
     };
@@ -435,10 +395,7 @@ const withController = (config, getComponent) => (component) => {
                 closeMenu(undefined, true);
             }
             else {
-                const openerElement = getOpenerElement();
-                if (openerElement && component.position) {
-                    component.position.positionMenu(openerElement);
-                }
+                reposition();
             }
         }
     };
@@ -447,19 +404,13 @@ const withController = (config, getComponent) => (component) => {
             return;
         if (state.visible) {
             tasks.requestAnimationFrame(() => {
-                const openerElement = getOpenerElement();
-                if (openerElement && component.position) {
-                    component.position.positionMenu(openerElement);
-                }
+                reposition();
             });
         }
     };
     const initMenu = () => {
         if (state.visible) {
-            const openerElement = getOpenerElement();
-            if (openerElement && component.position) {
-                component.position.positionMenu(openerElement);
-            }
+            reposition();
             component.element.classList.add(`${component.getClass("menu--visible")}`);
             if (config.closeOnClickOutside) {
                 document.addEventListener("click", handleDocumentClick);
@@ -493,8 +444,8 @@ const withController = (config, getComponent) => (component) => {
         });
     });
     renderMenuItems();
-    if (!listbox && component.keyboard && component.keyboard.setupKeyboardHandlers) {
-        component.keyboard.setupKeyboardHandlers(component.element, state, {
+    if (!listbox) {
+        component.keyboard?.setupKeyboardHandlers(component.element, state, {
             closeMenu,
             findItemById,
             ...submenuActions,
@@ -550,10 +501,7 @@ const withController = (config, getComponent) => (component) => {
             setPosition: (position) => {
                 state.position = position;
                 if (state.visible) {
-                    const openerElement = getOpenerElement();
-                    if (openerElement && component.position) {
-                        component.position.positionMenu(openerElement);
-                    }
+                    reposition();
                 }
                 return component;
             },

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

@@ -2,16 +2,7 @@ import { createMenuTasks } from "./tasks.js";
 import { focusWithin } from "./layer.js";
 const withOpener = (config) => (component) => {
     const tasks = createMenuTasks();
-    let isTabNavigation = false;
-    let tabTimeout = null;
-    const handleTabKey = (e) => {
-        isTabNavigation = e.key === "Tab";
-        tasks.clearTimeout(tabTimeout);
-        tabTimeout = tasks.setTimeout(() => {
-            isTabNavigation = false;
-        }, 100);
-    };
-    document.addEventListener("keydown", handleTabKey);
+    const isTabNavigationActive = () => component.keyboard?.isTabNavigationActive?.() ?? false;
     const state = {
         openerElement: null,
         openerComponent: null,
@@ -203,7 +194,7 @@ const withOpener = (config) => (component) => {
         if (!component.menu || !component.menu.isOpen())
             return;
         const relatedTarget = e.relatedTarget;
-        if (isTabNavigation) {
+        if (isTabNavigationActive()) {
             tasks.setTimeout(() => {
                 if (component.menu && component.menu.isOpen()) {
                     component.menu.close(e, false);
@@ -228,8 +219,6 @@ const withOpener = (config) => (component) => {
     };
     const cleanup = () => {
         tasks.cancelAll();
-        tabTimeout = null;
-        isTabNavigation = false;
         if (state.openerElement) {
             if (!config.manualOpen) {
                 state.openerElement.removeEventListener("click", handleOpenerClick);
@@ -254,7 +243,6 @@ const withOpener = (config) => (component) => {
             if (tasks.destroyed)
                 return;
             tasks.destroy();
-            document.removeEventListener("keydown", handleTabKey);
             cleanup();
             originalDestroy.call(component.lifecycle);
         };
@@ -269,7 +257,7 @@ const withOpener = (config) => (component) => {
         if (state.openerElement && !config.listbox) {
             state.openerElement.setAttribute("aria-expanded", "false");
             setOpenerActive(false);
-            if (event.restoreFocus && !isTabNavigation) {
+            if (event.restoreFocus && !isTabNavigationActive()) {
                 restoreFocusToOpener();
             }
         }

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

@@ -165,6 +165,7 @@ export interface MenuFeatureHost {
         removeKeyboardHandlers: (element: HTMLElement) => void;
         handleMenuKeydown: (e: KeyboardEvent, state: KeyboardMenuState, actions: KeyboardActions) => void;
         handleInitialFocus: (menuElement: HTMLElement, interactionType: "keyboard" | "mouse") => void;
+        isTabNavigationActive: () => boolean;
     };
     submenu?: {
         handleSubmenuClick: (item: MenuItem, index: number, itemElement: HTMLElement) => void;

package/dist/components/slider/config.js

@@ -62,49 +62,3 @@ export const getElementConfig = (config) => {
         interactive: true,
     });
 };
-export const getApiConfig = (comp) => ({
-    slider: {
-        setValue: (v, t) => comp.slider?.setValue(v, t),
-        getValue: () => comp.slider?.getValue() ?? 0,
-        setSecondValue: (v, t) => comp.slider?.setSecondValue(v, t),
-        getSecondValue: () => comp.slider?.getSecondValue() ?? null,
-        setMin: (m) => comp.slider?.setMin(m),
-        getMin: () => comp.slider?.getMin() ?? 0,
-        setMax: (m) => comp.slider?.setMax(m),
-        getMax: () => comp.slider?.getMax() ?? 100,
-        setStep: (s) => comp.slider?.setStep(s),
-        getStep: () => comp.slider?.getStep() ?? 1,
-        regenerateTicks: () => comp.slider?.regenerateTicks?.(),
-    },
-    disabled: {
-        enable: () => comp.disabled?.enable?.(),
-        disable: () => comp.disabled?.disable?.(),
-        isDisabled: () => comp.disabled?.isDisabled?.() ?? false,
-    },
-    appearance: {
-        setColor: (c) => comp.appearance?.setColor?.(c),
-        getColor: () => comp.appearance?.getColor?.() ?? "primary",
-        setSize: (s) => comp.setSize?.(s),
-        getSize: () => comp.getSize?.() ?? "XS",
-        showTicks: (s) => comp.appearance?.showTicks?.(s),
-        showCurrentValue: (s) => comp.appearance?.showCurrentValue?.(s),
-    },
-    text: {
-        setText: (t) => comp.label?.setText?.(t),
-        getText: () => comp.label?.getText?.() ?? "",
-    },
-    icon: {
-        setIcon: (h) => comp.icon?.setIcon?.(h),
-        getIcon: () => comp.icon?.getIcon?.() ?? "",
-    },
-    insetIcon: {
-        setInsetIcon: (icon, atMin) => comp.setInsetIcon?.(icon, atMin),
-    },
-    events: {
-        on: (e, h) => comp.on?.(e, h),
-        off: (e, h) => comp.off?.(e, h),
-    },
-    lifecycle: {
-        destroy: () => comp.lifecycle?.destroy?.(),
-    },
-});