mtrl 0.8.0-next.43 → 0.8.0-next.45

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

@@ -20,6 +20,8 @@ export const createPositioner = (component, config) => {
         tempMenu.style.transform = "none";
         tempMenu.style.opacity = "0";
         tempMenu.style.pointerEvents = "none";
+        if (config.maxHeight)
+            tempMenu.style.maxHeight = config.maxHeight;
         tempMenu.classList.add(`${component.getClass("menu--visible")}`);
         if (config.width === "100%" && !isSubmenu) {
             tempMenu.style.width = `${openerRect.width}px`;

package/dist/components/select/features.js

@@ -99,6 +99,7 @@ export const withMenu = (config) => (component) => {
         closeOnResize: true,
         offset: 0,
         container: component.element,
+        ...(config.menu ?? {}),
     });
     menu.on("select", (event) => {
         if (!event.item || event.item.hasSubmenu) {

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

@@ -1,3 +1,4 @@
+import type { MenuColor, MenuVariant } from "../menu/types.js";
 /**
  * Available Select variants
  */
@@ -75,6 +76,26 @@ export interface SelectConfig {
      * Whether select is required
      */
     required?: boolean;
+    /**
+     * Options handed to the select's menu. By default the menu lives inside
+     * the select's own element with no height of its own, which suits a short
+     * list in a still surface; a long list, or a select inside a scrolling or
+     * clipping container (a drawer, a sheet), wants the menu in the body with a
+     * max height, so it is neither cropped nor taller than the screen.
+     * @example { container: document.body, maxHeight: "320px" }
+     */
+    menu?: {
+        /** Where the menu is mounted and positioned against; document.body for a menu that escapes a clipping container */
+        container?: HTMLElement | null;
+        /** The menu's max height (a CSS length); the list scrolls inside it */
+        maxHeight?: string;
+        /** Whether the menu flips above the field when there is no room below */
+        autoFlip?: boolean;
+        /** The menu's variant: 'vertical' is the M3 expressive menu, items apart in a rounded container */
+        variant?: MenuVariant;
+        /** The vertical variant's colour mapping */
+        color?: MenuColor;
+    };
     /**
      * Whether select is disabled
      */

package/dist/core/compose/cleanup.d.ts

@@ -0,0 +1,14 @@
+/** A resource scope shared by every stage of a component's composition. */
+export interface CleanupScope {
+    readonly destroyed: boolean;
+    add(cleanup: () => void): void;
+    destroy(): void;
+}
+export declare const createCleanup: () => CleanupScope;
+/** Also support custom component bases that already provide a lifecycle. */
+export declare const getCleanup: (component: {
+    resources?: CleanupScope;
+    lifecycle?: {
+        destroy(): void;
+    };
+}) => CleanupScope;

package/dist/core/compose/cleanup.js

@@ -0,0 +1,51 @@
+export const createCleanup = () => {
+    let callbacks;
+    let destroyed = false;
+    return {
+        get destroyed() { return destroyed; },
+        add(cleanup) {
+            if (destroyed)
+                cleanup();
+            else
+                (callbacks ?? (callbacks = [])).push(cleanup);
+        },
+        destroy() {
+            if (destroyed)
+                return;
+            destroyed = true;
+            const pending = callbacks;
+            callbacks = undefined;
+            let failure;
+            let failed = false;
+            for (const cleanup of pending ?? []) {
+                try {
+                    cleanup();
+                }
+                catch (error) {
+                    if (!failed)
+                        failure = error;
+                    failed = true;
+                }
+            }
+            if (failed)
+                throw failure;
+        },
+    };
+};
+export const getCleanup = (component) => {
+    if (component.resources)
+        return component.resources;
+    const resources = component.resources = createCleanup();
+    if (component.lifecycle) {
+        const destroy = component.lifecycle.destroy.bind(component.lifecycle);
+        component.lifecycle.destroy = () => {
+            try {
+                resources.destroy();
+            }
+            finally {
+                destroy();
+            }
+        };
+    }
+    return resources;
+};

package/dist/core/compose/component.d.ts

@@ -2,6 +2,7 @@
  * @module core/compose/component
  * @description Core utilities for component composition and creation with built-in mobile support
  */
+import { type CleanupScope } from "./cleanup.js";
 /**
  * Touch state interface to track touch interactions
  */
@@ -18,6 +19,7 @@ export interface TouchState {
  * Base component interface with prefix utilities
  */
 export interface BaseComponent {
+    resources?: CleanupScope;
     config: Record<string, any>;
     componentName?: string;
     getClass: (name: string) => string;

package/dist/core/compose/component.js

@@ -1,9 +1,12 @@
+import { getCleanup } from "./cleanup.js";
 import { createElement, removeEventHandlers, } from "../dom/create.js";
 import { normalizeEvent, hasTouchSupport, TOUCH_CONFIG, PASSIVE_EVENTS, } from "../utils/mobile.js";
+const getModifierClass = (base, modifier) => `${base}--${modifier}`;
+const getElementClass = (base, element) => `${base}-${element}`;
 const withPrefix = (prefix) => ({
     getClass: (name) => `${prefix}-${name}`,
-    getModifierClass: (base, modifier) => `${base}--${modifier}`,
-    getElementClass: (base, element) => `${base}-${element}`,
+    getModifierClass,
+    getElementClass,
 });
 export const createBase = (config = {}) => ({
     config,
@@ -34,12 +37,12 @@ export const createBase = (config = {}) => ({
         }
     },
 });
-export const withElement = (options = {}) => (component) => {
+const setupTouch = (element, base, options) => {
     const handleTouchStart = (event) => {
         base.updateTouchState(event, "start");
         element.classList.add(`${base.getClass("touch-active")}`);
-        if (options.forwardEvents?.touchstart && "emit" in component) {
-            component.emit("touchstart", normalizeEvent(event));
+        if (options.forwardEvents?.touchstart && "emit" in base && typeof base.emit === "function") {
+            base.emit("touchstart", normalizeEvent(event));
         }
     };
     const handleTouchEnd = (event) => {
@@ -48,11 +51,11 @@ export const withElement = (options = {}) => (component) => {
         const touchDuration = Date.now() - base.touchState.startTime;
         element.classList.remove(`${base.getClass("touch-active")}`);
         base.updateTouchState(event, "end");
-        if (touchDuration < TOUCH_CONFIG.TAP_THRESHOLD && "emit" in component) {
-            component.emit("tap", normalizeEvent(event));
+        if (touchDuration < TOUCH_CONFIG.TAP_THRESHOLD && "emit" in base && typeof base.emit === "function") {
+            base.emit("tap", normalizeEvent(event));
         }
-        if (options.forwardEvents?.touchend && "emit" in component) {
-            component.emit("touchend", normalizeEvent(event));
+        if (options.forwardEvents?.touchend && "emit" in base && typeof base.emit === "function") {
+            base.emit("touchend", normalizeEvent(event));
         }
     };
     const handleTouchMove = (event) => {
@@ -62,17 +65,28 @@ export const withElement = (options = {}) => (component) => {
         const deltaX = normalized.clientX - base.touchState.startPosition.x;
         const deltaY = normalized.clientY - base.touchState.startPosition.y;
         if (Math.abs(deltaX) > TOUCH_CONFIG.SWIPE_THRESHOLD &&
-            "emit" in component) {
-            component.emit("swipe", {
+            "emit" in base && typeof base.emit === "function") {
+            base.emit("swipe", {
                 direction: deltaX > 0 ? "right" : "left",
                 deltaX,
                 deltaY,
             });
         }
-        if (options.forwardEvents?.touchmove && "emit" in component) {
-            component.emit("touchmove", { ...normalized, deltaX, deltaY });
+        if (options.forwardEvents?.touchmove && "emit" in base && typeof base.emit === "function") {
+            base.emit("touchmove", { ...normalized, deltaX, deltaY });
         }
     };
+    element.addEventListener("touchstart", handleTouchStart, PASSIVE_EVENTS);
+    element.addEventListener("touchend", handleTouchEnd);
+    element.addEventListener("touchmove", handleTouchMove, PASSIVE_EVENTS);
+    return () => {
+        element.removeEventListener("touchstart", handleTouchStart);
+        element.removeEventListener("touchend", handleTouchEnd);
+        element.removeEventListener("touchmove", handleTouchMove);
+    };
+};
+export const withElement = (options = {}) => (component) => {
+    const resources = getCleanup(component);
     const base = component;
     let parent = component.config.parent || options.parent;
     if (typeof parent === "string") {
@@ -106,11 +120,16 @@ export const withElement = (options = {}) => (component) => {
         container: parent,
     };
     const element = createElement(elementOptions);
-    if (hasTouchSupport() && options.interactive) {
-        element.addEventListener("touchstart", handleTouchStart, PASSIVE_EVENTS);
-        element.addEventListener("touchend", handleTouchEnd);
-        element.addEventListener("touchmove", handleTouchMove, PASSIVE_EVENTS);
-    }
+    const cleanupTouch = hasTouchSupport() && options.interactive
+        ? setupTouch(element, base, options)
+        : undefined;
+    resources.add(() => {
+        cleanupTouch?.();
+        base.touchState.activeTarget = null;
+        base.touchState.isTouching = false;
+        removeEventHandlers(element);
+        element.remove();
+    });
     return {
         ...component,
         element,
@@ -119,13 +138,7 @@ export const withElement = (options = {}) => (component) => {
             return this;
         },
         destroy() {
-            if (hasTouchSupport() && options.interactive) {
-                element.removeEventListener("touchstart", handleTouchStart);
-                element.removeEventListener("touchend", handleTouchEnd);
-                element.removeEventListener("touchmove", handleTouchMove);
-            }
-            removeEventHandlers(element);
-            element.remove();
+            resources.destroy();
         },
     };
 };

package/dist/core/compose/features/debounce.js

@@ -1,14 +1,10 @@
+import { getCleanup } from "../cleanup.js";
 import { debounce } from "../../utils/performance.js";
-function hasLifecycle(component) {
-    return 'lifecycle' in component &&
-        component.lifecycle &&
-        typeof component.lifecycle === 'object' &&
-        'destroy' in component.lifecycle &&
-        typeof component.lifecycle.destroy === 'function';
-}
 export const withDebounce = (config = {}) => (component) => {
     const debouncedHandlers = {};
     const addDebouncedEvent = (event, handler, wait, options = {}) => {
+        if (resources.destroyed)
+            return enhancedComponent;
         if (debouncedHandlers[event]) {
             removeDebouncedEvent(event);
         }
@@ -23,31 +19,26 @@ export const withDebounce = (config = {}) => (component) => {
     const removeDebouncedEvent = (event) => {
         const handler = debouncedHandlers[event];
         if (handler) {
+            handler.debounced.cancel();
             component.element.removeEventListener(event, handler.debounced);
             delete debouncedHandlers[event];
         }
         return enhancedComponent;
     };
-    if (hasLifecycle(component)) {
-        const originalDestroy = component.lifecycle.destroy;
-        component.lifecycle.destroy = () => {
-            Object.keys(debouncedHandlers).forEach(event => {
-                const handler = debouncedHandlers[event];
-                component.element.removeEventListener(event, handler.debounced);
-            });
-            originalDestroy.call(component.lifecycle);
-        };
-    }
-    if (config.debouncedEvents) {
-        Object.entries(config.debouncedEvents).forEach(([event, settings]) => {
-            addDebouncedEvent(event, settings.handler, settings.wait, settings.options);
-        });
-    }
+    const resources = getCleanup(component);
+    resources.add(() => {
+        Object.keys(debouncedHandlers).forEach(event => removeDebouncedEvent(event));
+    });
     const enhancedComponent = {
         ...component,
         addDebouncedEvent,
         removeDebouncedEvent
     };
+    if (config.debouncedEvents) {
+        Object.entries(config.debouncedEvents).forEach(([event, settings]) => {
+            addDebouncedEvent(event, settings.handler, settings.wait, settings.options);
+        });
+    }
     return enhancedComponent;
 };
 export default withDebounce;

package/dist/core/compose/features/disabled.js

@@ -54,9 +54,7 @@ export const withDisabled = (config) => (component) => {
         }
     };
     if (config.disabled) {
-        requestAnimationFrame(() => {
-            disabled.disable();
-        });
+        disabled.disable();
     }
     return {
         ...component,

package/dist/core/compose/features/events.js

@@ -1,10 +1,14 @@
+import { getCleanup } from "../cleanup.js";
 import { createEmitter } from "../../state/emitter.js";
 export const withEvents = () => (component) => {
     const emitter = createEmitter();
+    const resources = getCleanup(component);
+    resources.add(() => emitter.clear());
     return {
         ...component,
         on(event, handler) {
-            emitter.on(event, handler);
+            if (!resources.destroyed)
+                emitter.on(event, handler);
             return this;
         },
         off(event, handler) {

package/dist/core/compose/features/lifecycle.js

@@ -1,3 +1,4 @@
+import { getCleanup } from "../cleanup.js";
 import { createEmitter } from "../../state/emitter.js";
 function hasEvents(component) {
     return 'events' in component &&
@@ -21,13 +22,17 @@ function hasIcon(component) {
         typeof component.icon.getElement === 'function';
 }
 export const withLifecycle = () => (component) => {
+    const resources = getCleanup(component);
     let mounted = false;
+    let destroyed = false;
+    const destroyElement = component.destroy?.bind(component);
     const emitter = createEmitter();
+    resources.add(() => emitter.clear());
     const lifecycle = {
         onMount: (handler) => emitter.on('mount', handler),
         onUnmount: (handler) => emitter.on('unmount', handler),
         mount: () => {
-            if (!mounted) {
+            if (!mounted && !destroyed) {
                 mounted = true;
                 emitter.emit('mount');
             }
@@ -41,9 +46,14 @@ export const withLifecycle = () => (component) => {
         },
         isMounted: () => mounted,
         destroy() {
+            if (destroyed)
+                return;
+            destroyed = true;
             if (mounted) {
                 this.unmount();
             }
+            emitter.clear();
+            resources.destroy();
             if (hasEvents(component)) {
                 component.events.destroy();
             }
@@ -59,9 +69,10 @@ export const withLifecycle = () => (component) => {
                     iconElement.remove();
                 }
             }
-            if (component.element) {
-                component.element.remove();
-            }
+            if (destroyElement)
+                destroyElement();
+            else
+                component.element?.remove();
         }
     };
     return {

package/dist/core/compose/features/ripple.d.ts

@@ -52,12 +52,6 @@ export interface RippleComponent extends BaseComponent {
  * @returns Ripple controller
  */
 export declare const createRipple: (config?: RippleConfig) => RippleController;
-declare global {
-    interface HTMLElement {
-        __rippleHandlers?: Array<(e: MouseEvent) => void>;
-        __rippleContainer?: HTMLElement;
-    }
-}
 /**
  * Adds ripple effect functionality to a component
  *

package/dist/core/compose/features/ripple.js

@@ -1,4 +1,5 @@
 import { RIPPLE_CONFIG } from "./constants.js";
+import { getCleanup } from "../cleanup.js";
 import { PREFIX } from "../../config.js";
 export const createRipple = (config = {}) => {
     const options = {
@@ -6,111 +7,69 @@ export const createRipple = (config = {}) => {
         ...config,
         opacity: config.opacity || RIPPLE_CONFIG.opacity,
     };
-    const activeRipples = new WeakMap();
-    let documentListeners = [];
-    const createRippleElement = () => {
-        const ripple = document.createElement("div");
-        ripple.className = `${PREFIX}-ripple-wave`;
-        return ripple;
-    };
-    const addDocumentListener = (event, handler) => {
-        if (typeof document.addEventListener === "function") {
-            document.addEventListener(event, handler);
-            documentListeners.push({ event, handler });
-        }
-    };
-    const removeDocumentListener = (event, handler) => {
-        if (typeof document.removeEventListener === "function") {
-            document.removeEventListener(event, handler);
-            documentListeners = documentListeners.filter((listener) => !(listener.event === event && listener.handler === handler));
-        }
-    };
-    const animate = (event, container) => {
-        if (!container || !container.__rippleContainer)
-            return;
-        const rippleContainer = container.__rippleContainer;
-        const bounds = container.getBoundingClientRect();
-        const ripple = createRippleElement();
-        const size = Math.max(bounds.width, bounds.height) * 2;
-        const x = event.clientX - bounds.left - size / 2;
-        const y = event.clientY - bounds.top - size / 2;
-        Object.assign(ripple.style, {
-            width: `${size}px`,
-            height: `${size}px`,
-            left: `${x}px`,
-            top: `${y}px`,
-        });
-        rippleContainer.appendChild(ripple);
-        ripple.offsetHeight;
-        requestAnimationFrame(() => {
-            ripple.classList.add("active");
-        });
-        const cleanup = () => {
-            removeDocumentListener("mouseup", cleanup);
-            removeDocumentListener("mouseleave", cleanup);
-            ripple.classList.remove("active");
-            ripple.classList.add("fade-out");
-            setTimeout(() => {
-                if (ripple.parentNode) {
-                    ripple.parentNode.removeChild(ripple);
-                }
-                activeRipples.get(container)?.delete(ripple);
-            }, options.duration);
-        };
-        addDocumentListener("mouseup", cleanup);
-        addDocumentListener("mouseleave", cleanup);
-    };
+    const mounts = new WeakMap();
     return {
-        mount: (element) => {
-            if (!element)
+        mount(element) {
+            if (!element || mounts.has(element))
                 return;
-            const currentPosition = window.getComputedStyle(element).position;
-            if (currentPosition === "static") {
+            const doc = element.ownerDocument;
+            const view = doc.defaultView;
+            if (!view)
+                return;
+            if (view.getComputedStyle(element).position === "static") {
                 element.style.position = "relative";
             }
-            let rippleContainer = element.querySelector(`.${PREFIX}-ripple`);
-            if (!rippleContainer) {
-                rippleContainer = document.createElement("div");
-                rippleContainer.className = `${PREFIX}-ripple`;
-                element.appendChild(rippleContainer);
-            }
-            element.__rippleContainer = rippleContainer;
-            activeRipples.set(element, new Set());
-            const mousedownHandler = (e) => animate(e, element);
-            if (!element.__rippleHandlers) {
-                element.__rippleHandlers = [];
-            }
-            element.__rippleHandlers.push(mousedownHandler);
-            element.addEventListener("mousedown", mousedownHandler);
-        },
-        unmount: (element) => {
-            if (!element)
-                return;
-            documentListeners.forEach(({ event, handler }) => {
-                removeDocumentListener(event, handler);
-            });
-            documentListeners = [];
-            if (element.__rippleHandlers) {
-                element.__rippleHandlers.forEach((handler) => {
-                    element.removeEventListener("mousedown", handler);
+            const container = doc.createElement("div");
+            container.className = `${PREFIX}-ripple`;
+            element.appendChild(container);
+            const waves = new Set();
+            const press = (event) => {
+                const bounds = element.getBoundingClientRect();
+                const size = Math.max(bounds.width, bounds.height) * 2;
+                const wave = doc.createElement("div");
+                wave.className = `${PREFIX}-ripple-wave active`;
+                Object.assign(wave.style, {
+                    width: `${size}px`, height: `${size}px`,
+                    left: `${event.clientX - bounds.left - size / 2}px`,
+                    top: `${event.clientY - bounds.top - size / 2}px`,
                 });
-                element.__rippleHandlers = [];
-            }
-            if (activeRipples.has(element)) {
-                const ripples = activeRipples.get(element);
-                if (ripples) {
-                    ripples.forEach((ripple) => {
-                        if (ripple.parentNode) {
-                            ripple.parentNode.removeChild(ripple);
-                        }
-                    });
-                }
-                activeRipples.delete(element);
-            }
-            if (element.__rippleContainer && element.__rippleContainer.parentNode) {
-                element.__rippleContainer.parentNode.removeChild(element.__rippleContainer);
-                delete element.__rippleContainer;
-            }
+                let timer;
+                let released = false;
+                const removeListeners = () => {
+                    doc.removeEventListener("mouseup", release);
+                    doc.removeEventListener("mouseleave", release);
+                };
+                const dispose = () => {
+                    removeListeners();
+                    if (timer !== undefined)
+                        view.clearTimeout(timer);
+                    wave.remove();
+                    waves.delete(dispose);
+                };
+                const release = () => {
+                    if (released)
+                        return;
+                    released = true;
+                    removeListeners();
+                    wave.classList.add("fade-out");
+                    timer = view.setTimeout(dispose, options.duration);
+                };
+                waves.add(dispose);
+                doc.addEventListener("mouseup", release);
+                doc.addEventListener("mouseleave", release);
+                container.appendChild(wave);
+            };
+            element.addEventListener("mousedown", press);
+            mounts.set(element, () => {
+                element.removeEventListener("mousedown", press);
+                for (const dispose of waves)
+                    dispose();
+                container.remove();
+            });
+        },
+        unmount(element) {
+            mounts.get(element)?.();
+            mounts.delete(element);
         },
     };
 };
@@ -119,17 +78,8 @@ export const withRipple = (config) => (component) => {
         return component;
     const rippleInstance = createRipple(config.rippleConfig);
     rippleInstance.mount(component.element);
-    if (component.lifecycle) {
-        const originalMount = component.lifecycle.mount;
-        const originalDestroy = component.lifecycle.destroy;
-        component.lifecycle.mount = () => {
-            originalMount.call(component.lifecycle);
-        };
-        component.lifecycle.destroy = () => {
-            rippleInstance.unmount(component.element);
-            originalDestroy.call(component.lifecycle);
-        };
-    }
+    const resources = getCleanup(component);
+    resources.add(() => rippleInstance.unmount(component.element));
     return {
         ...component,
         ripple: rippleInstance,

package/dist/core/compose/features/throttle.js

@@ -1,8 +1,10 @@
+import { getCleanup } from "../cleanup.js";
 import { throttle } from "../../utils/performance.js";
-import { hasLifecycle } from "../utils/type-guards.js";
 export const withThrottle = (config = {}) => (component) => {
     const throttledHandlers = {};
     const addThrottledEvent = (event, handler, wait, options = {}) => {
+        if (resources.destroyed)
+            return enhancedComponent;
         if (throttledHandlers[event]) {
             removeThrottledEvent(event);
         }
@@ -17,31 +19,26 @@ export const withThrottle = (config = {}) => (component) => {
     const removeThrottledEvent = (event) => {
         const handler = throttledHandlers[event];
         if (handler) {
+            handler.throttled.cancel();
             component.element.removeEventListener(event, handler.throttled);
             delete throttledHandlers[event];
         }
         return enhancedComponent;
     };
-    if (hasLifecycle(component)) {
-        const originalDestroy = component.lifecycle.destroy;
-        component.lifecycle.destroy = () => {
-            Object.keys(throttledHandlers).forEach((event) => {
-                const handler = throttledHandlers[event];
-                component.element.removeEventListener(event, handler.throttled);
-            });
-            originalDestroy.call(component.lifecycle);
-        };
-    }
-    if (config.throttledEvents) {
-        Object.entries(config.throttledEvents).forEach(([event, settings]) => {
-            addThrottledEvent(event, settings.handler, settings.wait, settings.options);
-        });
-    }
+    const resources = getCleanup(component);
+    resources.add(() => {
+        Object.keys(throttledHandlers).forEach(event => removeThrottledEvent(event));
+    });
     const enhancedComponent = {
         ...component,
         addThrottledEvent,
         removeThrottledEvent,
     };
+    if (config.throttledEvents) {
+        Object.entries(config.throttledEvents).forEach(([event, settings]) => {
+            addThrottledEvent(event, settings.handler, settings.wait, settings.options);
+        });
+    }
     return enhancedComponent;
 };
 export default withThrottle;