mtrl 0.8.0-next.8 → 0.8.0

package/dist/components/bottom-sheet/constants.js

@@ -0,0 +1,35 @@
+export const BOTTOM_SHEET_VARIANTS = {
+    STANDARD: "standard",
+    MODAL: "modal",
+};
+export const BOTTOM_SHEET_STATES = {
+    HIDDEN: "hidden",
+    PARTIAL: "partial",
+    EXPANDED: "expanded",
+};
+export const BOTTOM_SHEET_DEFAULTS = {
+    VARIANT: BOTTOM_SHEET_VARIANTS.MODAL,
+    PEEK_HEIGHT: 56,
+    MAX_WIDTH: 640,
+    DRAG_HANDLE: true,
+    CLOSE_ON_SCRIM_CLICK: true,
+    CLOSE_ON_ESCAPE: true,
+    POSITIONAL_THRESHOLD: 56,
+    VELOCITY_THRESHOLD: 125,
+};
+export const BOTTOM_SHEET_CLASSES = {
+    ROOT: "bottom-sheet",
+    SCRIM: "bottom-sheet-scrim",
+    CONTAINER: "bottom-sheet-container",
+    HANDLE: "bottom-sheet-handle",
+    HEADER: "bottom-sheet-header",
+    TITLE: "bottom-sheet-title",
+    CONTENT: "bottom-sheet-content",
+};
+export const BOTTOM_SHEET_EVENTS = {
+    OPEN: "open",
+    CLOSE: "close",
+    STATE_CHANGE: "stateChange",
+    DRAG_START: "dragStart",
+    DRAG_END: "dragEnd",
+};

package/dist/components/bottom-sheet/features/drag.d.ts

@@ -0,0 +1,32 @@
+import { BottomSheetConfig, BottomSheetState } from "../types.js";
+interface DragComponent {
+    getClass: (name: string) => string;
+    emit: (event: string, data?: unknown) => unknown;
+    structure: {
+        container: HTMLElement;
+        handle: HTMLElement | null;
+    };
+    state: {
+        getState: () => BottomSheetState;
+        setState: (next: BottomSheetState) => void;
+        close: () => void;
+    };
+}
+/**
+ * Dragging the sheet between its heights.
+ *
+ * Where the sheet settles follows Compose's rule: a drag past the positional
+ * threshold moves to the next anchor, and a flick past the velocity threshold
+ * does the same however short it was, so a quick flick works without having to
+ * cover the distance.
+ */
+export declare const withDrag: (config: BottomSheetConfig) => <C extends DragComponent>(component: C) => (C & {
+    drag: {
+        release: () => void;
+    };
+}) | (C & {
+    drag: {
+        release: () => void;
+    };
+});
+export {};

package/dist/components/bottom-sheet/features/drag.js

@@ -0,0 +1,71 @@
+import { BOTTOM_SHEET_DEFAULTS, BOTTOM_SHEET_EVENTS, BOTTOM_SHEET_STATES, } from "../constants.js";
+export const withDrag = (config) => (component) => {
+    const { structure, state } = component;
+    const handle = structure.handle;
+    if (!handle)
+        return { ...component, drag: { release: () => { } } };
+    let startY = 0;
+    let startTime = 0;
+    let offset = 0;
+    let dragging = false;
+    const settle = (distance, velocity) => {
+        const current = state.getState();
+        const far = Math.abs(distance) >= BOTTOM_SHEET_DEFAULTS.POSITIONAL_THRESHOLD;
+        const fast = Math.abs(velocity) >= BOTTOM_SHEET_DEFAULTS.VELOCITY_THRESHOLD;
+        if (!far && !fast)
+            return current;
+        const downwards = distance > 0;
+        if (current === BOTTOM_SHEET_STATES.EXPANDED) {
+            return downwards ? BOTTOM_SHEET_STATES.PARTIAL : BOTTOM_SHEET_STATES.EXPANDED;
+        }
+        return downwards ? BOTTOM_SHEET_STATES.HIDDEN : BOTTOM_SHEET_STATES.EXPANDED;
+    };
+    const onPointerDown = (event) => {
+        dragging = true;
+        startY = event.clientY;
+        startTime = Date.now();
+        offset = 0;
+        handle.setPointerCapture?.(event.pointerId);
+        structure.container.style.transition = "none";
+        component.emit(BOTTOM_SHEET_EVENTS.DRAG_START);
+    };
+    const onPointerMove = (event) => {
+        if (!dragging)
+            return;
+        offset = event.clientY - startY;
+        const shown = Math.max(offset, 0);
+        structure.container.style.transform = `translateY(${shown}px)`;
+    };
+    const onPointerUp = (event) => {
+        if (!dragging)
+            return;
+        dragging = false;
+        handle.releasePointerCapture?.(event.pointerId);
+        const elapsed = Math.max(Date.now() - startTime, 1);
+        const velocity = (offset / elapsed) * 1000;
+        structure.container.style.transition = "";
+        structure.container.style.transform = "";
+        const previous = state.getState();
+        const next = settle(offset, velocity);
+        if (next === BOTTOM_SHEET_STATES.HIDDEN)
+            state.close();
+        else
+            state.setState(next);
+        component.emit(BOTTOM_SHEET_EVENTS.DRAG_END, { state: next, previous });
+    };
+    handle.addEventListener("pointerdown", onPointerDown);
+    handle.addEventListener("pointermove", onPointerMove);
+    handle.addEventListener("pointerup", onPointerUp);
+    handle.addEventListener("pointercancel", onPointerUp);
+    return {
+        ...component,
+        drag: {
+            release: () => {
+                handle.removeEventListener("pointerdown", onPointerDown);
+                handle.removeEventListener("pointermove", onPointerMove);
+                handle.removeEventListener("pointerup", onPointerUp);
+                handle.removeEventListener("pointercancel", onPointerUp);
+            },
+        },
+    };
+};

package/dist/components/bottom-sheet/features/index.d.ts

@@ -0,0 +1,3 @@
+export { withStructure } from "./structure.js";
+export { withState } from "./state.js";
+export { withDrag } from "./drag.js";

package/dist/components/bottom-sheet/features/index.js

@@ -0,0 +1,3 @@
+export { withStructure } from "./structure.js";
+export { withState } from "./state.js";
+export { withDrag } from "./drag.js";

package/dist/components/bottom-sheet/features/state.d.ts

@@ -0,0 +1,31 @@
+import { BottomSheetConfig, BottomSheetState } from "../types.js";
+interface StateComponent {
+    element: HTMLElement;
+    getClass: (name: string) => string;
+    emit: (event: string, data?: unknown) => unknown;
+    structure: {
+        scrim: HTMLElement | null;
+        container: HTMLElement;
+    };
+}
+/**
+ * Opening, closing and the two open heights.
+ *
+ * Events go through `component.emit`, which is what the composed events
+ * enhancer provides. Reaching for `component.events.emit` throws, because that
+ * shape comes from a different enhancer the barrel exports under another name.
+ */
+export declare const withState: (config: BottomSheetConfig) => <C extends StateComponent>(component: C) => C & {
+    state: {
+        open: (to?: BottomSheetState) => void;
+        close: () => void;
+        expand: () => void;
+        collapse: () => void;
+        isOpen: () => boolean;
+        getState: () => BottomSheetState;
+        setState: (next: BottomSheetState) => void;
+        /** Releases the listeners this feature put on the document */
+        release: () => void;
+    };
+};
+export {};

package/dist/components/bottom-sheet/features/state.js

@@ -0,0 +1,82 @@
+import { BOTTOM_SHEET_CLASSES, BOTTOM_SHEET_EVENTS, BOTTOM_SHEET_STATES, BOTTOM_SHEET_VARIANTS, } from "../constants.js";
+export const withState = (config) => (component) => {
+    const { element, getClass, structure } = component;
+    const root = getClass(BOTTOM_SHEET_CLASSES.ROOT);
+    const isModal = config.variant === BOTTOM_SHEET_VARIANTS.MODAL;
+    let state = config.initialState ?? BOTTOM_SHEET_STATES.HIDDEN;
+    let previouslyFocused = null;
+    const applyState = (next) => {
+        for (const name of Object.values(BOTTOM_SHEET_STATES)) {
+            element.classList.toggle(`${root}--${name}`, name === next);
+        }
+        const open = next !== BOTTOM_SHEET_STATES.HIDDEN;
+        element.setAttribute("aria-hidden", open ? "false" : "true");
+        element.style.pointerEvents = open ? "" : "none";
+    };
+    const setState = (next) => {
+        if (next === state)
+            return;
+        const previous = state;
+        state = next;
+        applyState(next);
+        component.emit(BOTTOM_SHEET_EVENTS.STATE_CHANGE, { state: next, previous });
+    };
+    const handleKeydown = (event) => {
+        if (event.key !== "Escape")
+            return;
+        if (state === BOTTOM_SHEET_STATES.HIDDEN)
+            return;
+        if (!config.closeOnEscape)
+            return;
+        event.preventDefault();
+        close();
+    };
+    const handleScrimClick = () => {
+        if (config.closeOnScrimClick)
+            close();
+    };
+    function open(to = BOTTOM_SHEET_STATES.PARTIAL) {
+        if (state === to)
+            return;
+        const wasHidden = state === BOTTOM_SHEET_STATES.HIDDEN;
+        if (wasHidden && isModal) {
+            previouslyFocused = document.activeElement;
+        }
+        setState(to);
+        if (wasHidden) {
+            if (isModal)
+                structure.container.focus();
+            component.emit(BOTTOM_SHEET_EVENTS.OPEN);
+        }
+    }
+    function close() {
+        if (state === BOTTOM_SHEET_STATES.HIDDEN)
+            return;
+        setState(BOTTOM_SHEET_STATES.HIDDEN);
+        if (isModal && previouslyFocused?.isConnected) {
+            previouslyFocused.focus();
+            previouslyFocused = null;
+        }
+        component.emit(BOTTOM_SHEET_EVENTS.CLOSE);
+    }
+    applyState(state);
+    if (config.closeOnEscape)
+        document.addEventListener("keydown", handleKeydown);
+    structure.scrim?.addEventListener("click", handleScrimClick);
+    return {
+        ...component,
+        state: {
+            open,
+            close,
+            expand: () => open(BOTTOM_SHEET_STATES.EXPANDED),
+            collapse: () => open(BOTTOM_SHEET_STATES.PARTIAL),
+            isOpen: () => state !== BOTTOM_SHEET_STATES.HIDDEN,
+            getState: () => state,
+            setState,
+            release: () => {
+                document.removeEventListener("keydown", handleKeydown);
+                structure.scrim?.removeEventListener("click", handleScrimClick);
+            },
+        },
+    };
+};

package/dist/components/bottom-sheet/features/structure.d.ts

@@ -0,0 +1,26 @@
+import { BottomSheetConfig } from "../types.js";
+/**
+ * Builds the parts of the sheet and puts the whole thing on the page.
+ *
+ * The root element is a fixed layer that holds the scrim and the sheet
+ * container, so both are children of something that exists. An earlier sheet
+ * in this library inserted its scrim through `element.parentNode` at
+ * construction, when the element had no parent yet, and so never had a scrim
+ * at all.
+ */
+export declare const withStructure: (config: BottomSheetConfig) => <C extends {
+    element: HTMLElement;
+    getClass: (n: string) => string;
+}>(component: C) => C & {
+    structure: {
+        scrim: HTMLElement;
+        container: HTMLDivElement;
+        handle: HTMLElement;
+        title: HTMLElement;
+        content: HTMLDivElement;
+        /** Replaces the body */
+        setContent(next: string | HTMLElement): void;
+        /** Replaces the headline, adding one if the sheet had none */
+        setTitle(next: string): void;
+    };
+};

package/dist/components/bottom-sheet/features/structure.js

@@ -0,0 +1,88 @@
+import { BOTTOM_SHEET_CLASSES, BOTTOM_SHEET_VARIANTS } from "../constants.js";
+export const withStructure = (config) => (component) => {
+    const { element, getClass } = component;
+    const isModal = config.variant === BOTTOM_SHEET_VARIANTS.MODAL;
+    element.classList.add(getClass(BOTTOM_SHEET_CLASSES.ROOT));
+    element.classList.add(`${getClass(BOTTOM_SHEET_CLASSES.ROOT)}--${config.variant}`);
+    let scrim = null;
+    if (isModal) {
+        scrim = document.createElement("div");
+        scrim.className = getClass(BOTTOM_SHEET_CLASSES.SCRIM);
+        element.appendChild(scrim);
+    }
+    const container = document.createElement("div");
+    container.className = getClass(BOTTOM_SHEET_CLASSES.CONTAINER);
+    container.setAttribute("role", isModal ? "dialog" : "region");
+    if (isModal)
+        container.setAttribute("aria-modal", "true");
+    container.tabIndex = -1;
+    if (config.maxWidth) {
+        container.style.maxWidth = `${config.maxWidth}px`;
+    }
+    let handle = null;
+    if (config.dragHandle) {
+        handle = document.createElement("div");
+        handle.className = getClass(BOTTOM_SHEET_CLASSES.HANDLE);
+        handle.setAttribute("aria-hidden", "true");
+        container.appendChild(handle);
+    }
+    let title = null;
+    if (config.title) {
+        const header = document.createElement("div");
+        header.className = getClass(BOTTOM_SHEET_CLASSES.HEADER);
+        title = document.createElement("h2");
+        title.className = getClass(BOTTOM_SHEET_CLASSES.TITLE);
+        title.textContent = config.title;
+        title.id = `${getClass(BOTTOM_SHEET_CLASSES.TITLE)}-${Math.random()
+            .toString(36)
+            .slice(2, 9)}`;
+        container.setAttribute("aria-labelledby", title.id);
+        header.appendChild(title);
+        container.appendChild(header);
+    }
+    const content = document.createElement("div");
+    content.className = getClass(BOTTOM_SHEET_CLASSES.CONTENT);
+    if (config.content instanceof HTMLElement) {
+        content.appendChild(config.content);
+    }
+    else if (typeof config.content === "string") {
+        content.innerHTML = config.content;
+    }
+    container.appendChild(content);
+    element.appendChild(container);
+    (config.container || document.body).appendChild(element);
+    return {
+        ...component,
+        structure: {
+            scrim,
+            container,
+            handle,
+            title,
+            content,
+            setContent(next) {
+                content.innerHTML = "";
+                if (next instanceof HTMLElement)
+                    content.appendChild(next);
+                else
+                    content.innerHTML = next;
+            },
+            setTitle(next) {
+                if (title) {
+                    title.textContent = next;
+                    return;
+                }
+                const header = document.createElement("div");
+                header.className = getClass(BOTTOM_SHEET_CLASSES.HEADER);
+                title = document.createElement("h2");
+                title.className = getClass(BOTTOM_SHEET_CLASSES.TITLE);
+                title.textContent = next;
+                title.id = `${getClass(BOTTOM_SHEET_CLASSES.TITLE)}-${Math.random()
+                    .toString(36)
+                    .slice(2, 9)}`;
+                container.setAttribute("aria-labelledby", title.id);
+                header.appendChild(title);
+                container.insertBefore(header, content);
+            },
+        },
+    };
+};

package/dist/components/bottom-sheet/index.d.ts

@@ -0,0 +1,2 @@
+export { default as createBottomSheet, default } from "./bottom-sheet.js";
+export type { BottomSheetConfig, BottomSheetComponent, BottomSheetVariant, BottomSheetState, BottomSheetStateEvent, BottomSheetEventHandlers, } from "./types.js";

package/dist/components/bottom-sheet/index.js

@@ -0,0 +1 @@
+export { default as createBottomSheet, default } from "./bottom-sheet.js";

package/dist/components/bottom-sheet/types.d.ts

@@ -0,0 +1,116 @@
+import { BOTTOM_SHEET_VARIANTS, BOTTOM_SHEET_STATES } from "./constants.js";
+/** Standard or modal */
+export type BottomSheetVariant = (typeof BOTTOM_SHEET_VARIANTS)[keyof typeof BOTTOM_SHEET_VARIANTS];
+/** How far the sheet is open */
+export type BottomSheetState = (typeof BOTTOM_SHEET_STATES)[keyof typeof BOTTOM_SHEET_STATES];
+/** What a state change reports */
+export interface BottomSheetStateEvent {
+    /** The state the sheet has moved to */
+    state: BottomSheetState;
+    /** The state it came from */
+    previous: BottomSheetState;
+}
+/** Handlers accepted at creation, one per event name */
+export interface BottomSheetEventHandlers {
+    open?: () => void;
+    close?: () => void;
+    stateChange?: (event: BottomSheetStateEvent) => void;
+    dragStart?: () => void;
+    dragEnd?: (event: BottomSheetStateEvent) => void;
+}
+/**
+ * Configuration for the bottom sheet.
+ *
+ * @category Components
+ */
+export interface BottomSheetConfig {
+    /**
+     * Standard sheets leave the page usable; modal sheets cover it with a scrim
+     * and take focus.
+     * @default 'modal'
+     */
+    variant?: BottomSheetVariant;
+    /**
+     * Headline shown above the content. Also names the sheet for assistive
+     * technology, through `aria-labelledby`.
+     */
+    title?: string;
+    /** Body of the sheet, as markup or an element */
+    content?: string | HTMLElement;
+    /**
+     * The 32x4dp bar at the top edge, which says the sheet can be dragged.
+     * Turning it off also turns off dragging, since nothing would indicate it.
+     * @default true
+     */
+    dragHandle?: boolean;
+    /**
+     * Height of the partially expanded state, in pixels.
+     * @default 56
+     */
+    peekHeight?: number;
+    /**
+     * The sheet stops growing at this width and centres itself, so it does not
+     * stretch across a desktop window.
+     * @default 640
+     */
+    maxWidth?: number;
+    /**
+     * State to start in. `hidden` builds the sheet without showing it.
+     * @default 'hidden'
+     */
+    initialState?: BottomSheetState;
+    /**
+     * Whether a click on the scrim closes a modal sheet. Standard sheets have no
+     * scrim, so this does nothing for them.
+     * @default true
+     */
+    closeOnScrimClick?: boolean;
+    /**
+     * Whether Escape closes a modal sheet.
+     * @default true
+     */
+    closeOnEscape?: boolean;
+    /** Where to mount the sheet. Defaults to `document.body` */
+    container?: HTMLElement;
+    /** Handlers registered at creation, equivalent to calling `on` for each */
+    on?: BottomSheetEventHandlers;
+    /** Extra classes for the root element */
+    class?: string;
+    /** @internal */
+    prefix?: string;
+    /** @internal */
+    componentName?: string;
+}
+/**
+ * A bottom sheet instance.
+ *
+ * @category Components
+ */
+export interface BottomSheetComponent {
+    /** The root element, which holds the scrim and the container */
+    element: HTMLElement;
+    /** Opens the sheet, partially expanded */
+    open: () => BottomSheetComponent;
+    /** Closes the sheet */
+    close: () => BottomSheetComponent;
+    /** Opens the sheet to its full height */
+    expand: () => BottomSheetComponent;
+    /** Returns the sheet to the peek height */
+    collapse: () => BottomSheetComponent;
+    /** Whether the sheet is showing at all */
+    isOpen: () => boolean;
+    /** How far the sheet is open */
+    getState: () => BottomSheetState;
+    /** Replaces the body of the sheet */
+    setContent: (content: string | HTMLElement) => BottomSheetComponent;
+    /** Replaces the headline */
+    setTitle: (title: string) => BottomSheetComponent;
+    /** Adds an event listener */
+    on: <T extends keyof BottomSheetEventHandlers>(event: T, handler: NonNullable<BottomSheetEventHandlers[T]>) => BottomSheetComponent;
+    /** Removes an event listener */
+    off: <T extends keyof BottomSheetEventHandlers>(event: T, handler: NonNullable<BottomSheetEventHandlers[T]>) => BottomSheetComponent;
+    /** Removes the sheet from the page and releases its listeners */
+    destroy: () => void;
+    /** Prefixes a class name, for styling hooks */
+    getClass: (name: string) => string;
+}

package/dist/components/bottom-sheet/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -1,5 +1,5 @@
-import { ButtonComponent } from "./types";
-import { ProgressComponent } from "../progress/types";
+import { ButtonComponent } from "./types.js";
+import { ProgressComponent } from "../progress/types.js";
 /**
  * API configuration options for button component
  * @category Components