@mendylanda/ui 0.1.0 → 0.1.2

package/dist/filters/filter-collection.d.ts

@@ -0,0 +1,28 @@
+import type { CSSProperties, ReactNode, Ref } from "react";
+export interface CollectionHandle {
+    focus(key: string): void;
+    focusFirst(): void;
+}
+interface RowProps {
+    ref(node: HTMLElement | null): void;
+    style?: CSSProperties;
+    tabIndex: number;
+    "data-index": number;
+    "data-collection-key": string;
+}
+interface CollectionItem {
+    key: string;
+    label: string;
+    disabled?: boolean;
+}
+/** A single keyboard model for both ordinary and measured, virtualized collections. */
+export declare function FilterCollection<T extends CollectionItem>({ items, children, className, role, label, collectionRef, initialKey, }: {
+    items: T[];
+    children(item: T, index: number, props: RowProps): ReactNode;
+    className?: string;
+    role: "menu" | "group";
+    label: string;
+    collectionRef?: Ref<CollectionHandle>;
+    initialKey?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/filters/filter-collection.js

@@ -0,0 +1,191 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState, } from "react";
+import { defaultRangeExtractor, useVirtualizer } from "@tanstack/react-virtual";
+import { cn } from "../utils.js";
+/** A single keyboard model for both ordinary and measured, virtualized collections. */
+export function FilterCollection({ items, children, className, role, label, collectionRef, initialKey, }) {
+    const scroll = useRef(null);
+    const nodes = useRef(new Map());
+    const pending = useRef(null);
+    const ownsFocus = useRef(false);
+    const previousIndex = useRef(0);
+    const [focused, setFocused] = useState(initialKey ?? items.find((item) => !item.disabled)?.key);
+    const typeahead = useRef({ text: "", at: 0 });
+    const virtual = items.length > 100;
+    const keys = useMemo(() => new Map(items.map((item, index) => [item.key, index])), [items]);
+    const focusedIndex = focused === undefined ? undefined : keys.get(focused);
+    const rowEstimate = (() => {
+        const rem = typeof document === "undefined"
+            ? 16
+            : parseFloat(getComputedStyle(document.documentElement).fontSize);
+        return (rem *
+            (typeof matchMedia !== "undefined" &&
+                matchMedia("(pointer: fine) and (min-width: 640px)").matches
+                ? 2
+                : 2.5));
+    })();
+    const virtualizer = useVirtualizer({
+        count: items.length,
+        enabled: virtual,
+        getScrollElement: () => scroll.current,
+        estimateSize: () => rowEstimate,
+        getItemKey: useCallback((index) => items[index].key, [items]),
+        overscan: 5,
+        initialOffset: () => (initialKey === undefined ? 0 : (keys.get(initialKey) ?? 0) * rowEstimate),
+        rangeExtractor: useCallback((range) => {
+            const visible = defaultRangeExtractor(range);
+            // Keep DOM focus alive when a wheel or touch scroll moves it outside the viewport.
+            return focusedIndex === undefined
+                ? visible
+                : [...new Set([...visible, focusedIndex])].sort((a, b) => a - b);
+        }, [focusedIndex]),
+    });
+    function focus(key) {
+        const index = keys.get(key);
+        if (index === undefined || items[index]?.disabled)
+            return;
+        pending.current = key;
+        setFocused(key);
+        if (virtual)
+            virtualizer.scrollToIndex(index, { align: "auto" });
+        const node = nodes.current.get(key);
+        if (node) {
+            node.focus({ preventScroll: virtual });
+            pending.current = null;
+        }
+    }
+    useImperativeHandle(collectionRef, () => ({
+        focus,
+        focusFirst() {
+            const first = items.find((item) => !item.disabled);
+            if (first)
+                focus(first.key);
+        },
+    }));
+    useLayoutEffect(() => {
+        if (pending.current !== null && !keys.has(pending.current))
+            pending.current = null;
+        if (focusedIndex === undefined || items[focusedIndex]?.disabled) {
+            const replacement = items.slice(previousIndex.current).find((item) => !item.disabled) ??
+                items
+                    .slice(0, previousIndex.current)
+                    .reverse()
+                    .find((item) => !item.disabled);
+            setFocused(replacement?.key);
+            if (!replacement)
+                previousIndex.current = 0;
+            const active = document.activeElement;
+            if (ownsFocus.current &&
+                (active === document.body || (active && scroll.current?.contains(active)))) {
+                if (replacement)
+                    focus(replacement.key);
+                else
+                    scroll.current?.focus({ preventScroll: true });
+            }
+        }
+        else {
+            previousIndex.current = focusedIndex;
+            // Enabling virtualization can briefly have no measured range. Restore a
+            // still-valid focused item as soon as its row mounts again.
+            if (ownsFocus.current && document.activeElement === document.body)
+                focus(items[focusedIndex].key);
+        }
+        const key = pending.current;
+        const node = key === null ? undefined : nodes.current.get(key);
+        if (!node)
+            return;
+        node.focus({ preventScroll: virtual });
+        const index = keys.get(key);
+        if (virtual && index !== undefined)
+            virtualizer.scrollToIndex(index, { align: "auto" });
+        pending.current = null;
+    });
+    function render(index, start) {
+        const item = items[index];
+        return children(item, index, {
+            "data-index": index,
+            tabIndex: item.key === focused && !item.disabled ? 0 : -1,
+            "data-collection-key": item.key,
+            ref(node) {
+                if (node) {
+                    nodes.current.set(item.key, node);
+                    if (virtual)
+                        virtualizer.measureElement(node);
+                }
+                else
+                    nodes.current.delete(item.key);
+            },
+            style: virtual
+                ? {
+                    position: "absolute",
+                    top: 0,
+                    left: 0,
+                    width: "100%",
+                    transform: `translateY(${start}px)`,
+                }
+                : undefined,
+        });
+    }
+    return (_jsx("div", { ref: scroll, tabIndex: -1, role: role, "aria-label": label, "data-filter-collection": "", "data-virtual": virtual, className: cn("mui-410da8dfa8ac mui-2368e909f3a5 mui-998780cdef87 mui-1dee6e3ec67d", className), onBlurCapture: (event) => {
+            if (event.relatedTarget && !event.currentTarget.contains(event.relatedTarget))
+                ownsFocus.current = false;
+        }, onFocusCapture: (event) => {
+            ownsFocus.current = true;
+            const key = event.target.closest("[data-collection-key]")
+                ?.dataset.collectionKey;
+            if (key !== undefined && keys.has(key))
+                setFocused(key);
+        }, onKeyDownCapture: (event) => {
+            if (event.nativeEvent.isComposing || event.ctrlKey || event.metaKey || event.altKey)
+                return;
+            if (event.target.closest("input, textarea, select, [contenteditable=true]"))
+                return;
+            const key = event.target.closest("[data-collection-key]")
+                ?.dataset.collectionKey;
+            if (key === undefined || !keys.has(key))
+                return;
+            const enabled = items.filter((item) => !item.disabled);
+            const index = enabled.findIndex((item) => item.key === key);
+            let next;
+            const page = Math.max(1, Math.floor((scroll.current?.clientHeight ?? 320) / rowEstimate) - 1);
+            switch (event.key) {
+                case "Home":
+                    next = enabled[0];
+                    break;
+                case "End":
+                    next = enabled.at(-1);
+                    break;
+                case "ArrowDown":
+                    next = enabled[(index + 1) % enabled.length];
+                    break;
+                case "ArrowUp":
+                    next = enabled[(index - 1 + enabled.length) % enabled.length];
+                    break;
+                case "PageDown":
+                    next = enabled[Math.min(index + page, enabled.length - 1)];
+                    break;
+                case "PageUp":
+                    next = enabled[Math.max(index - page, 0)];
+                    break;
+                default: {
+                    if (event.key.length !== 1 || event.key === " ")
+                        return;
+                    const now = Date.now();
+                    const text = now - typeahead.current.at < 600 ? typeahead.current.text + event.key : event.key;
+                    typeahead.current = { text, at: now };
+                    const term = [...text].every((char) => char === text[0]) ? text[0] : text;
+                    const order = [...enabled.slice(index + 1), ...enabled.slice(0, index + 1)];
+                    next = order.find((item) => item.label.toLocaleLowerCase().startsWith(term.toLocaleLowerCase()));
+                }
+            }
+            event.preventDefault();
+            event.stopPropagation();
+            if (next)
+                focus(next.key);
+        }, children: _jsx("div", { role: "presentation", style: virtual
+                ? { height: virtualizer.getTotalSize(), position: "relative", width: "100%" }
+                : undefined, children: virtual
+                ? virtualizer.getVirtualItems().map((row) => render(row.index, row.start))
+                : items.map((_, index) => render(index)) }) }));
+}

package/dist/filters/filter-date-editor.d.ts

@@ -1,7 +1,9 @@
 import type { RuntimeField } from "./filter-definition.js";
-export declare function FilterDateEditor({ field, value, disabled, apply, error, autoFocus, showLabel, }: {
+export declare function FilterDateEditor({ field, value, disabled, apply, error, draftKey, autoFocus, showLabel, showClear, }: {
+    draftKey?: string;
     autoFocus?: boolean;
     showLabel?: boolean;
+    showClear?: boolean;
     field: RuntimeField;
     value: unknown;
     disabled?: boolean;

package/dist/filters/filter-date-editor.js

@@ -12,20 +12,20 @@ function dateString(value) {
         return null;
     return `${value.getFullYear()}-${String(value.getMonth() + 1).padStart(2, "0")}-${String(value.getDate()).padStart(2, "0")}`;
 }
-export function FilterDateEditor({ field, value, disabled, apply, error, autoFocus = true, showLabel = true, }) {
-    const [range, setRange] = useValueDraft(value, (current) => current ? { from: calendarDate(current.from), to: calendarDate(current.to) } : undefined);
+export function FilterDateEditor({ field, value, disabled, apply, error, draftKey, autoFocus = true, showLabel = true, showClear = true, }) {
+    const [range, setRange] = useValueDraft(value, (current) => current ? { from: calendarDate(current.from), to: calendarDate(current.to) } : undefined, draftKey);
     return (_jsxs("div", { "data-mendy-ui": "", onKeyDown: (event) => {
             // Calendar arrows navigate days. Escape still dismisses the surrounding editor.
             if (event.key !== "Escape")
                 event.stopPropagation();
-        }, children: [showLabel && _jsx("p", { className: "mui-0f9e6672913a mui-0a702d97ed7d mui-c74ab393b96d mui-daaac3fbf55e", children: field.label }), _jsx(Calendar, { mode: "range", autoFocus: autoFocus, selected: range, onSelect: (next) => {
+        }, children: [showLabel && _jsx("p", { className: "mui-0f9e6672913a mui-0a702d97ed7d mui-c74ab393b96d mui-daaac3fbf55e", children: field.label }), _jsx(Calendar, { className: "mui-1752f11474a6 mui-82c2977beb8e mui-d78a8526410d", mode: "range", autoFocus: autoFocus, selected: range, onSelect: (next) => {
                     const selected = next ? { from: next.from, to: next.to ?? next.from } : undefined;
                     setRange(selected);
                     apply(selected
                         ? { from: dateString(selected.from), to: dateString(selected.to) }
                         : field.clearValue, false);
-                }, defaultMonth: range?.from ?? range?.to, disabled: disabled }), _jsxs("div", { "data-mendy-ui": "", className: "mui-267171770524 mui-894c3815a57f mui-094f5333853b", children: [_jsx("p", { className: "mui-3992de70b033 mui-35f35c41d134", children: "Pick a day, or two dates for a range." }), error && (_jsx("p", { role: "alert", className: "mui-c74ab393b96d mui-887b9502d5c7", children: error })), _jsx("div", { "data-mendy-ui": "", className: "mui-222f930b8752 mui-074569488cca", children: _jsx(Button, { type: "button", size: "sm", variant: "ghost", disabled: disabled, onClick: () => {
+                }, defaultMonth: range?.from ?? range?.to, disabled: disabled }), _jsxs("div", { "data-mendy-ui": "", className: "mui-267171770524 mui-894c3815a57f mui-094f5333853b", children: [_jsx("p", { className: "mui-3992de70b033 mui-35f35c41d134", children: "Pick a day, or two dates for a range." }), error && (_jsx("p", { role: "alert", className: "mui-c74ab393b96d mui-887b9502d5c7", children: error })), showClear && (_jsx("div", { "data-mendy-ui": "", className: "mui-222f930b8752 mui-074569488cca", children: _jsx(Button, { type: "button", size: "sm", variant: "ghost", className: "mui-958e2cfcf5b6 mui-e7e01cc7f4df", disabled: disabled || !range, onClick: () => {
                                 setRange(undefined);
                                 apply(field.clearValue);
-                            }, children: "Clear date" }) })] })] }));
+                            }, children: "Clear date" }) }))] })] }));
 }

package/dist/filters/filter-definition.d.ts

@@ -56,6 +56,9 @@ export interface ExternalOptions<T> {
 }
 export declare function externalOptions<T>(source: Omit<ExternalOptions<T>, "kind">): ExternalOptions<T>;
 export interface EditorContext<V> {
+    /** False while the menu previews an editor. The menu focuses it on click or Enter. */
+    autoFocus: boolean;
+    location: "menu" | "chip" | "inline";
     value: V;
     setValue(value: V): void;
     close(): void;
@@ -79,6 +82,11 @@ export interface FieldConfig<V> {
         loading?: boolean;
         disabled?: boolean;
     };
+    /** Hide a redundant chip label, or use a shorter visible label. Accessible names stay intact. */
+    chipLabel?: boolean | string;
+    /** Place this editor beside its label inside a grouped menu. */
+    menuLayout?: "stack" | "inline";
+    editorPadding?: "default" | "none";
     summary?: SummaryPolicy;
     renderSummary?: (value: V, choices: readonly Choice[]) => ReactNode;
     renderEditor?: (context: EditorContext<V>) => ReactNode;
@@ -133,6 +141,11 @@ export interface RuntimeField {
         loading?: boolean;
         disabled?: boolean;
     };
+    /** Hide a redundant chip label, or use a shorter visible label. Accessible names stay intact. */
+    chipLabel?: boolean | string;
+    /** Place this editor beside its label inside a grouped menu. */
+    menuLayout?: "stack" | "inline";
+    editorPadding?: "default" | "none";
     summary?: SummaryPolicy;
     renderSummary?: (value: unknown, choices: readonly Choice[]) => ReactNode;
     renderEditor?: (context: EditorContext<unknown>) => ReactNode;

package/dist/filters/filter-menu-focus.d.ts

@@ -0,0 +1,11 @@
+import type { KeyboardEvent } from "react";
+export declare function focusMenuEditor(root: HTMLDivElement | null): void;
+export declare function handleMenuTab(event: KeyboardEvent<HTMLDivElement>, { trigger, editor, onClose, hasSelection, }: {
+    trigger: HTMLButtonElement | null;
+    editor: HTMLDivElement | null;
+    onClose(): void;
+    hasSelection: boolean;
+}): void;
+/** Return from editor controls without consuming text, grid, or tree navigation keys. */
+export declare function handleMenuReturn(event: KeyboardEvent<HTMLDivElement>, back: () => void): void;
+export declare function preserveOutsideFocus(event: Event): void;

package/dist/filters/filter-menu-focus.js

@@ -0,0 +1,91 @@
+function visible(element) {
+    return (!element.matches(":disabled, [data-disabled], [aria-disabled=true]") &&
+        !element.closest("[hidden], [inert]") &&
+        element.getClientRects().length > 0 &&
+        getComputedStyle(element).visibility !== "hidden");
+}
+export function focusMenuEditor(root) {
+    if (!root)
+        return;
+    const priorities = [
+        "input, textarea",
+        '[role="grid"] button[tabindex="0"]',
+        '[role^="menuitem"][aria-checked="true"]',
+        '[role^="menuitem"]',
+        'button, [tabindex="0"]',
+    ];
+    for (const selector of priorities) {
+        const target = [...root.querySelectorAll(selector)].find((element) => !element.matches(':disabled, [data-disabled], [aria-disabled="true"]') &&
+            element.getClientRects().length > 0);
+        if (target) {
+            target.focus();
+            return;
+        }
+    }
+    root.focus();
+}
+export function handleMenuTab(event, { trigger, editor, onClose, hasSelection, }) {
+    if (event.key !== "Tab" ||
+        event.altKey ||
+        event.ctrlKey ||
+        event.metaKey ||
+        !event.currentTarget.contains(event.target))
+        return;
+    event.preventDefault();
+    event.stopPropagation();
+    const root = event.currentTarget;
+    const target = event.target;
+    const selector = "button, input, textarea, select, a[href], [tabindex]";
+    const menuStops = new Set();
+    root.querySelectorAll('[role="menu"]').forEach((menu) => {
+        const choices = [...menu.querySelectorAll('[role^="menuitem"]')].filter(visible);
+        const current = choices.find((item) => item === document.activeElement) ??
+            choices.find((item) => item.getAttribute("aria-checked") === "true") ??
+            choices[0];
+        if (current)
+            menuStops.add(current);
+    });
+    const stops = [...root.querySelectorAll(selector)].filter((element) => visible(element) &&
+        (element.matches('[role^="menuitem"]') ? menuStops.has(element) : element.tabIndex >= 0));
+    const index = stops.indexOf(target);
+    const next = index < 0 ? undefined : stops[index + (event.shiftKey ? -1 : 1)];
+    if (target.closest('[aria-label="Filter types"]') &&
+        !event.shiftKey &&
+        hasSelection &&
+        (!next || editor?.contains(next)))
+        focusMenuEditor(editor);
+    else if (next)
+        next.focus();
+    else {
+        const button = trigger;
+        const outside = [...document.querySelectorAll(selector)].filter((element) => visible(element) &&
+            element.tabIndex >= 0 &&
+            !root.contains(element) &&
+            !element.hasAttribute("data-radix-focus-guard"));
+        const destination = event.shiftKey ? button : (outside[outside.indexOf(button) + 1] ?? button);
+        destination?.focus();
+        onClose();
+    }
+}
+/** Return from editor controls without consuming text, grid, or tree navigation keys. */
+export function handleMenuReturn(event, back) {
+    const target = event.target;
+    const rtl = getComputedStyle(event.currentTarget).direction === "rtl";
+    if (event.key !== (rtl ? "ArrowRight" : "ArrowLeft"))
+        return;
+    if (!(target instanceof HTMLElement) || target.isContentEditable)
+        return;
+    if (target.closest('input, textarea, select, [role="grid"], [role="slider"], [role="spinbutton"], [role="combobox"], [role="tablist"], [role="tree"], [role="listbox"]'))
+        return;
+    event.preventDefault();
+    event.stopPropagation();
+    back();
+}
+export function preserveOutsideFocus(event) {
+    const focused = document.activeElement;
+    if (event.target instanceof HTMLElement &&
+        focused &&
+        focused !== document.body &&
+        !event.target.contains(focused))
+        event.preventDefault();
+}

package/dist/filters/filter-menu-panel.d.ts

@@ -6,6 +6,7 @@ export interface FilterMenuSection {
     icon?: ReactNode;
     disabled: boolean;
     active: boolean;
+    separatorBefore?: boolean;
     clear?: () => void;
     content: ReactNode;
 }
@@ -13,9 +14,10 @@ interface FilterMenuPanelProps {
     sections: FilterMenuSection[];
     selectedId: string | null;
     onSelect(id: string | null): void;
+    onClose(): void;
     anchor?: RefObject<HTMLDivElement | null>;
     trigger: RefObject<HTMLButtonElement | null>;
 }
 /** One dialog contains the filter list and its editor, with a single-panel layout on phones. */
-export declare function FilterMenuPanel({ sections, selectedId, onSelect, anchor, trigger, }: FilterMenuPanelProps): import("react/jsx-runtime").JSX.Element;
+export declare function FilterMenuPanel({ sections, selectedId, onSelect, onClose, anchor, trigger, }: FilterMenuPanelProps): import("react/jsx-runtime").JSX.Element;
 export {};