@mendylanda/ui 0.1.0 → 0.1.1

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-menu-focus.d.ts

@@ -0,0 +1,8 @@
+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;

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

@@ -0,0 +1,69 @@
+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();
+    }
+}

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

@@ -13,9 +13,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 {};

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

@@ -2,20 +2,31 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEffect, useId, useLayoutEffect, useRef, useState, useSyncExternalStore } from "react";
 import { ArrowLeft, ChevronRight } from "lucide-react";
-import { Button } from "../customization.js";
+import { Button, Input } from "../customization.js";
+import { FilterCollection } from "./filter-collection.js";
+import { useValueDraft } from "./use-value-draft.js";
 import { DropdownMenuContent } from "../primitives/dropdown-menu.js";
 import { useMendyUI } from "../customization.js";
+import { focusMenuEditor, handleMenuTab } from "./filter-menu-focus.js";
+import { useMenuPointer } from "./use-menu-pointer.js";
 import { cn } from "../utils.js";
 const desktopQuery = "(min-width: 640px)";
 function subscribeViewport(listener) {
     const media = window.matchMedia(desktopQuery);
     media.addEventListener("change", listener);
-    return () => media.removeEventListener("change", listener);
+    const observer = new ResizeObserver(listener);
+    observer.observe(document.documentElement);
+    window.addEventListener("resize", listener);
+    return () => {
+        media.removeEventListener("change", listener);
+        window.removeEventListener("resize", listener);
+        observer.disconnect();
+    };
 }
-const isDesktop = () => window.matchMedia(desktopQuery).matches;
+const isDesktop = () => window.innerWidth >= 40 * parseFloat(getComputedStyle(document.documentElement).fontSize);
 const serverDesktop = () => false;
 /** One dialog contains the filter list and its editor, with a single-panel layout on phones. */
-export function FilterMenuPanel({ sections, selectedId, onSelect, anchor, trigger, }) {
+export function FilterMenuPanel({ sections, selectedId, onSelect, onClose, anchor, trigger, }) {
     const { classNames } = useMendyUI();
     const desktop = useSyncExternalStore(subscribeViewport, isDesktop, serverDesktop);
     const selected = sections.find((section) => section.id === selectedId && !section.disabled) ??
@@ -25,7 +36,19 @@ export function FilterMenuPanel({ sections, selectedId, onSelect, anchor, trigge
     const rows = useRef(new Map());
     const pendingEditorFocus = useRef(false);
     const [alignOffset, setAlignOffset] = useState(0);
+    const [side, setSide] = useState("bottom");
     const panelId = useId();
+    const initialSelection = useRef(selected?.id);
+    const lastSelection = useRef(selected?.id);
+    const [keyboardNavigation, setKeyboardNavigation] = useState(() => trigger.current?.matches(":focus-visible") ?? false);
+    const pointer = useMenuPointer({
+        editor,
+        selectedId: selected?.id,
+        onChoose(id) {
+            choose(id);
+            rows.current.get(id)?.focus({ preventScroll: true });
+        },
+    });
     useLayoutEffect(() => {
         const button = trigger.current;
         if (!button)
@@ -33,33 +56,47 @@ export function FilterMenuPanel({ sections, selectedId, onSelect, anchor, trigge
         const update = () => {
             const bounds = button.getBoundingClientRect();
             const target = anchor?.current?.getBoundingClientRect();
+            const rtl = getComputedStyle(button).direction === "rtl";
+            const viewport = window.visualViewport;
+            const viewportTop = viewport?.offsetTop ?? 0;
+            const viewportBottom = viewportTop + (viewport?.height ?? window.innerHeight);
+            const below = viewportBottom - bounds.bottom - 23;
+            const above = bounds.top - viewportTop - 23;
+            const preferredHeight = 30 * parseFloat(getComputedStyle(document.documentElement).fontSize);
+            // A short list can fit below the trigger while its editor cannot. Choose room
+            // for the editor before Radix constrains its height to the current side.
+            setSide(below < preferredHeight && above > below ? "top" : "bottom");
             // Desktop starts at the search field's edge; mobile stays close to the icon.
-            setAlignOffset(desktop ? (target?.left ?? bounds.left) - bounds.left : 0);
+            setAlignOffset(desktop
+                ? rtl
+                    ? bounds.right - (target?.right ?? bounds.right)
+                    : (target?.left ?? bounds.left) - bounds.left
+                : 0);
         };
         update();
         const observer = new ResizeObserver(update);
         observer.observe(anchor?.current ?? button);
         window.addEventListener("resize", update);
+        window.addEventListener("scroll", update, true);
+        window.visualViewport?.addEventListener("resize", update);
+        window.visualViewport?.addEventListener("scroll", update);
         return () => {
             observer.disconnect();
             window.removeEventListener("resize", update);
+            window.removeEventListener("scroll", update, true);
+            window.visualViewport?.removeEventListener("resize", update);
+            window.visualViewport?.removeEventListener("scroll", update);
         };
     }, [anchor, desktop, trigger]);
     useEffect(() => {
         const frame = requestAnimationFrame(() => {
-            const first = [...rows.current.values()].find((button) => !button.disabled);
+            const first = rows.current.get(initialSelection.current ?? "") ??
+                [...rows.current.values()].find((button) => !button.disabled);
             (first ?? content.current)?.focus();
         });
         return () => cancelAnimationFrame(frame);
     }, []);
-    function focusEditor() {
-        const root = editor.current;
-        if (!root)
-            return;
-        // Prefer the current calendar day to month-navigation buttons.
-        const target = root.querySelector('input:not([disabled]), textarea:not([disabled]), [role="grid"] button[tabindex="0"], [role^="menuitem"]:not([data-disabled])') ?? root.querySelector('button:not([disabled]), [tabindex="0"]');
-        (target ?? root).focus();
-    }
+    const focusEditor = () => focusMenuEditor(editor.current);
     useLayoutEffect(() => {
         if (!pendingEditorFocus.current)
             return;
@@ -67,6 +104,7 @@ export function FilterMenuPanel({ sections, selectedId, onSelect, anchor, trigge
         focusEditor();
     });
     function choose(id, enter = false) {
+        pointer.cancel();
         if (enter && selected?.id === id && editor.current)
             focusEditor();
         else
@@ -75,11 +113,13 @@ export function FilterMenuPanel({ sections, selectedId, onSelect, anchor, trigge
     }
     function back() {
         const previous = selected?.id;
+        lastSelection.current = previous;
+        pointer.cancel();
         onSelect(null);
         requestAnimationFrame(() => previous && rows.current.get(previous)?.focus());
     }
     const showList = desktop || !selected;
-    return (_jsx(DropdownMenuContent, { ref: content, "data-mendy-ui": "", "data-slot": "filter-menu-panel", role: "dialog", "aria-label": "Filters", "aria-labelledby": undefined, "aria-orientation": undefined, align: desktop ? "start" : "end", alignOffset: alignOffset, sideOffset: 7, collisionPadding: 12, onEscapeKeyDown: (event) => {
+    return (_jsx(DropdownMenuContent, { ref: content, "data-mendy-ui": "", "data-slot": "filter-menu-panel", role: "dialog", "aria-label": "Filters", "aria-labelledby": undefined, "aria-orientation": undefined, align: desktop ? "start" : "end", alignOffset: alignOffset, side: side, sideOffset: 7, collisionPadding: 16, onEscapeKeyDown: (event) => {
             if (selected && !desktop) {
                 event.preventDefault();
                 back();
@@ -91,15 +131,28 @@ export function FilterMenuPanel({ sections, selectedId, onSelect, anchor, trigge
                 focused !== document.body &&
                 !event.target.contains(focused))
                 event.preventDefault();
-        }, onKeyDown: (event) => {
-            // Allow normal Tab traversal within the dialog; Radix menus normally cancel Tab.
+        }, onPointerDownCapture: () => {
+            setKeyboardNavigation(false);
+            pointer.cancel();
+        }, onPointerLeave: pointer.cancel, onKeyDownCapture: (event) => {
+            if (!event.nativeEvent.isComposing &&
+                !["Shift", "Control", "Alt", "Meta"].includes(event.key))
+                setKeyboardNavigation(true);
             if (event.key === "Tab")
-                event.stopPropagation();
+                pointer.cancel();
+            handleMenuTab(event, {
+                trigger: trigger.current,
+                editor: editor.current,
+                onClose,
+                hasSelection: Boolean(selected),
+            });
+        }, onKeyDown: (event) => {
             const target = event.target;
             const rtl = getComputedStyle(event.currentTarget).direction === "rtl";
             if (event.key === (rtl ? "ArrowRight" : "ArrowLeft") &&
                 target instanceof HTMLElement &&
-                !target.closest('input, textarea, select, [role="grid"], [contenteditable=true]')) {
+                !target.isContentEditable &&
+                !target.closest('input, textarea, select, [role="grid"], [role="slider"], [role="spinbutton"], [role="combobox"], [role="tablist"], [role="tree"], [role="listbox"]')) {
                 event.preventDefault();
                 event.stopPropagation();
                 if (desktop)
@@ -107,58 +160,88 @@ export function FilterMenuPanel({ sections, selectedId, onSelect, anchor, trigge
                 else
                     back();
             }
-        }, className: cn("mui-981e5fc95664 mui-571ea69568d3 mui-a5c6864f064f mui-d5111d0e9f48 mui-04760bcd507f mui-94ea94fde25f mui-393df0d154e0 mui-548a450e8e53", desktop && selected ? "mui-9958eb2b312a" : "mui-a4cce7869436", classNames?.menu), children: _jsxs("div", { className: cn("mui-571ea69568d3", desktop && selected
-                ? "mui-0f2a693e93e2 mui-50f2bcd37640" : "mui-222f930b8752 mui-302c0d124a94"), children: [showList && (_jsx(FilterMenuList, { sections: sections, selectedId: selected?.id, panelId: panelId, desktop: desktop, rows: rows, choose: choose })), selected && (_jsxs("div", { className: "mui-222f930b8752 mui-410da8dfa8ac mui-184ddc11e5f9 mui-302c0d124a94", children: [_jsxs("div", { className: cn("mui-222f930b8752 mui-8423dc94ee06 mui-27ead27a81df mui-71556df3b421 mui-074569488cca mui-bbe39cfb5cc6 mui-0f9e6672913a mui-b5edc3ea7c91 mui-3992de70b033 mui-daaac3fbf55e", classNames?.menuHeader), children: [!desktop && (_jsxs(_Fragment, { children: [_jsxs(Button, { variant: "ghost", size: "sm", onClick: back, className: "mui-9b2a4c5f630c mui-70007b876865 mui-e7e01cc7f4df mui-3992de70b033 mui-52101fc7d8bb", children: [_jsx(ArrowLeft, { "aria-hidden": "true", className: "mui-61c000c8a98a mui-36b12e8339c7" }), "Filters"] }), _jsx("span", { "aria-hidden": "true", className: "mui-35f35c41d134", children: "/" })] })), _jsx("span", { className: "mui-184ddc11e5f9 mui-7bd5bab6d7f4 mui-726fca123972 mui-393883c1db68", children: selected.label }), selected.clear && (_jsx(Button, { variant: "ghost", size: "sm", onClick: () => {
+        }, className: cn("mui-5662a94d9dba mui-571ea69568d3 mui-34055e6f8c1b mui-d5111d0e9f48 mui-04760bcd507f mui-94ea94fde25f mui-393df0d154e0 mui-548a450e8e53", desktop && selected ? "mui-8dd3eece40db" : "mui-919182384559", classNames?.menu), children: _jsxs("div", { className: cn("mui-80baa5d03af7", desktop && selected
+                ? "mui-0f2a693e93e2 mui-b5985369ee35 mui-da607d0a2538" : "mui-222f930b8752 mui-302c0d124a94"), children: [showList && (_jsx(FilterMenuList, { sections: sections, selectedId: selected?.id, initialKey: selected?.id ?? lastSelection.current, panelId: panelId, desktop: desktop, rows: rows, choose: choose, keyboardNavigation: keyboardNavigation, onPointerMove: (id, event) => {
+                        if (desktop && event.pointerType === "mouse") {
+                            setKeyboardNavigation(false);
+                            const focused = document.activeElement;
+                            if (focused instanceof HTMLElement &&
+                                editor.current?.contains(focused) &&
+                                (focused.matches("input, textarea") || focused.isContentEditable)) {
+                                pointer.cancel();
+                                return;
+                            }
+                            pointer.move(id, event);
+                        }
+                    } })), selected && (_jsxs("div", { onPointerEnter: pointer.cancel, className: "mui-222f930b8752 mui-410da8dfa8ac mui-184ddc11e5f9 mui-302c0d124a94", children: [_jsxs("div", { className: cn("mui-222f930b8752 mui-8423dc94ee06 mui-27ead27a81df mui-71556df3b421 mui-074569488cca mui-bbe39cfb5cc6 mui-0f9e6672913a mui-b5edc3ea7c91 mui-3992de70b033 mui-daaac3fbf55e mui-aa0e3c036805 mui-0288c4ea71ea", classNames?.menuHeader), children: [!desktop && (_jsxs(_Fragment, { children: [_jsxs(Button, { variant: "ghost", size: "sm", onClick: back, className: "mui-958e2cfcf5b6 mui-70007b876865 mui-e7e01cc7f4df mui-3992de70b033 mui-52101fc7d8bb", children: [_jsx(ArrowLeft, { "aria-hidden": "true", className: "mui-61c000c8a98a mui-36b12e8339c7" }), "Filters"] }), _jsx("span", { "aria-hidden": "true", className: "mui-35f35c41d134", children: "/" })] })), _jsx(MenuHeading, { label: selected.label }), selected.clear && (_jsx(Button, { variant: "ghost", size: "sm", onClick: () => {
                                         selected.clear?.();
                                         requestAnimationFrame(focusEditor);
-                                    }, "aria-label": `Clear ${selected.label} filter`, className: "mui-ce1945804664 mui-1da2e8f173c5 mui-3992de70b033 mui-52101fc7d8bb mui-35f35c41d134", children: "Clear" }))] }), _jsx("div", { ref: editor, id: panelId, role: "group", "aria-label": selected.editorLabel, tabIndex: -1, className: cn("mui-410da8dfa8ac mui-184ddc11e5f9 mui-2368e909f3a5 mui-998780cdef87 mui-b30fc56058b6 mui-f157ee6bae99 mui-a1c8c43d9be2", classNames?.editor), children: selected.content }, selected.id)] }))] }) }));
+                                    }, "aria-label": `Clear ${selected.label} filter`, className: "mui-8cc46fa87f41 mui-ce1945804664 mui-1da2e8f173c5 mui-3992de70b033 mui-52101fc7d8bb mui-35f35c41d134", children: "Clear" }))] }), _jsx("div", { ref: editor, id: `${panelId}-${selected.id}`, role: "group", "aria-label": selected.editorLabel, tabIndex: -1, className: cn("mui-410da8dfa8ac mui-184ddc11e5f9 mui-2368e909f3a5 mui-998780cdef87 mui-b30fc56058b6 mui-f157ee6bae99 mui-a1c8c43d9be2 mui-b43343fe71c0", classNames?.editor), children: selected.content }, selected.id)] }))] }) }));
 }
-function FilterMenuList({ sections, selectedId, panelId, desktop, rows, choose, }) {
+function MenuHeading({ label }) {
+    const ref = useRef(null);
+    const [overflow, setOverflow] = useState(false);
+    const [below, setBelow] = useState(false);
+    const measure = () => {
+        const element = ref.current;
+        if (!element)
+            return;
+        setOverflow(element.scrollHeight > element.clientHeight + 1);
+        setBelow(element.scrollHeight - element.clientHeight - element.scrollTop > 1);
+    };
+    useLayoutEffect(() => {
+        const element = ref.current;
+        if (!element)
+            return;
+        element.scrollTop = 0;
+        measure();
+        const observer = new ResizeObserver(measure);
+        observer.observe(element);
+        return () => observer.disconnect();
+    }, [label]);
+    return (_jsx("span", { ref: ref, onScroll: measure, title: label, tabIndex: overflow ? 0 : undefined, "data-more-below": below, className: "mui-1326520533f0 mui-184ddc11e5f9 mui-7bd5bab6d7f4 mui-2368e909f3a5 mui-726fca123972 mui-393883c1db68 mui-cacb19aa9640 mui-bbaaa5969856 mui-1df9125eebaf mui-223daa83ed2d", children: label }));
+}
+function FilterMenuList({ sections, selectedId, initialKey, panelId, desktop, rows, choose, keyboardNavigation, onPointerMove, }) {
     const { classNames } = useMendyUI();
-    return (_jsxs("div", { role: "group", "aria-label": "Filter types", className: cn("mui-410da8dfa8ac mui-2368e909f3a5 mui-998780cdef87 mui-1dee6e3ec67d", desktop && selectedId && "mui-baf794b99c10", classNames?.menuList), children: [sections.length === 0 && (_jsx("p", { className: "mui-094f5333853b mui-c74ab393b96d mui-35f35c41d134", children: "No filters available." })), sections.map((section) => (_jsxs(Button, { ref: (node) => {
-                    if (node)
-                        rows.current.set(section.id, node);
-                    else
-                        rows.current.delete(section.id);
-                }, variant: "ghost", type: "button", "aria-label": section.label, "aria-expanded": selectedId === section.id, "aria-controls": selectedId === section.id ? panelId : undefined, disabled: section.disabled, className: cn("mui-a66e9985b093 mui-8423dc94ee06 mui-58d0413dd93c mui-c62ec162662e mui-074569488cca mui-02e603944040 mui-e7e01cc7f4df mui-b5edc3ea7c91 mui-c74ab393b96d mui-52101fc7d8bb", selectedId === section.id && "mui-292affc1f780 mui-cc209238d847", classNames?.menuRow), onPointerEnter: (event) => {
-                    if (desktop && event.pointerType === "mouse" && !section.disabled)
-                        choose(section.id);
-                }, onFocus: () => {
-                    if (desktop)
-                        choose(section.id);
-                }, onClick: () => choose(section.id, true), onKeyDown: (event) => {
-                    const rtl = getComputedStyle(event.currentTarget).direction === "rtl";
-                    if (["ArrowDown", "ArrowUp", "Home", "End"].includes(event.key)) {
-                        event.preventDefault();
-                        event.stopPropagation();
-                        const enabled = sections.filter((item) => !item.disabled);
-                        const index = enabled.findIndex((item) => item.id === section.id);
-                        const next = event.key === "Home"
-                            ? enabled[0]
-                            : event.key === "End"
-                                ? enabled.at(-1)
-                                : enabled[(index + (event.key === "ArrowDown" ? 1 : -1) + enabled.length) %
-                                    enabled.length];
-                        if (next)
-                            rows.current.get(next.id)?.focus();
-                    }
-                    else if ([rtl ? "ArrowLeft" : "ArrowRight", "Enter", " "].includes(event.key)) {
-                        event.preventDefault();
-                        event.stopPropagation();
-                        choose(section.id, true);
-                    }
-                    else if (event.key.length === 1 &&
-                        !event.ctrlKey &&
-                        !event.metaKey &&
-                        !event.altKey) {
-                        const start = sections.findIndex((item) => item.id === section.id) + 1;
-                        const next = [...sections.slice(start), ...sections.slice(0, start)].find((item) => !item.disabled &&
-                            item.label.toLocaleLowerCase().startsWith(event.key.toLocaleLowerCase()));
-                        if (next) {
+    const [query, setQuery] = useValueDraft("types", () => "", "__menu:query");
+    const collection = useRef(null);
+    const matches = [];
+    const term = query.toLocaleLowerCase();
+    for (const section of sections) {
+        if (section.label.toLocaleLowerCase().includes(term))
+            matches.push({ ...section, key: section.id });
+    }
+    return (_jsxs("div", { className: cn("mui-222f930b8752 mui-410da8dfa8ac mui-302c0d124a94", desktop && selectedId && "mui-3b6d5fc7b061"), children: [sections.length > 20 && (_jsx("div", { className: "mui-27ead27a81df mui-bbe39cfb5cc6 mui-b97db4a9f432", children: _jsx(Input, { type: "search", "aria-label": "Find a filter", placeholder: "Find a filter\u2026", value: query, className: "mui-b51243872d85", onChange: (event) => setQuery(event.target.value), onKeyDown: (event) => {
+                        if (event.key === "ArrowDown") {
+                            event.preventDefault();
+                            collection.current?.focusFirst();
+                        }
+                        if (event.key !== "Escape" && event.key !== "Tab")
+                            event.stopPropagation();
+                    } }) })), matches.length === 0 && (_jsx("p", { className: "mui-094f5333853b mui-c74ab393b96d mui-35f35c41d134", children: sections.length ? "No matching filters." : "No filters available." })), _jsx(FilterCollection, { items: matches, role: "group", label: "Filter types", collectionRef: collection, initialKey: initialKey, className: cn("mui-80baa5d03af7", classNames?.menuList), children: (section, index, row) => (_jsxs(Button, { ...row, ref: (node) => {
+                        row.ref(node);
+                        if (node)
+                            rows.current.set(section.id, node);
+                        else
+                            rows.current.delete(section.id);
+                    }, variant: "ghost", type: "button", "aria-label": section.label, "aria-description": matches.length > 100
+                        ? `${section.active ? "Filter applied. " : ""}${index + 1} of ${matches.length}`
+                        : section.active
+                            ? "Filter applied"
+                            : undefined, "aria-expanded": selectedId === section.id, "aria-controls": selectedId === section.id ? `${panelId}-${section.id}` : undefined, "data-navigation": keyboardNavigation ? "keyboard" : "pointer", disabled: section.disabled, className: cn("mui-a66e9985b093 mui-8423dc94ee06 mui-58d0413dd93c mui-c62ec162662e mui-074569488cca mui-02e603944040 mui-e7e01cc7f4df mui-b5edc3ea7c91 mui-c74ab393b96d mui-52101fc7d8bb mui-aa0e3c036805 mui-41d1475cf71a mui-dfc89afd7885", selectedId === section.id && "mui-292affc1f780 mui-cc209238d847", classNames?.menuRow), onPointerMove: (event) => {
+                        if (!section.disabled)
+                            onPointerMove(section.id, event);
+                    }, onFocus: () => {
+                        if (desktop)
+                            choose(section.id);
+                    }, onClick: () => choose(section.id, true), onKeyDown: (event) => {
+                        if (event.nativeEvent.isComposing)
+                            return;
+                        const rtl = getComputedStyle(event.currentTarget).direction === "rtl";
+                        if ([rtl ? "ArrowLeft" : "ArrowRight", "Enter", " "].includes(event.key)) {
                             event.preventDefault();
                             event.stopPropagation();
-                            rows.current.get(next.id)?.focus();
+                            choose(section.id, true);
                         }
-                    }
-                }, children: [section.icon && (_jsx("span", { "aria-hidden": "true", className: "mui-27ead27a81df mui-35f35c41d134 mui-c77732bd3ab4", children: section.icon })), _jsx("span", { className: "mui-184ddc11e5f9 mui-7bd5bab6d7f4 mui-726fca123972 mui-393883c1db68 mui-1a5d10977b93", title: section.label, children: section.label }), section.active && (_jsx("span", { "aria-hidden": "true", className: "mui-dc797fcc7165 mui-27ead27a81df mui-b005d61d0953 mui-0cf6c2e8fe7e" })), _jsx(ChevronRight, { "aria-hidden": "true", className: "mui-61c000c8a98a mui-27ead27a81df mui-0b5a4d1257ab mui-36b12e8339c7" })] }, section.id)))] }));
+                    }, children: [section.icon && (_jsx("span", { "aria-hidden": "true", className: "mui-27ead27a81df mui-35f35c41d134 mui-c77732bd3ab4", children: section.icon })), _jsx("span", { className: "mui-184ddc11e5f9 mui-7bd5bab6d7f4 mui-726fca123972 mui-393883c1db68 mui-e9347b78185f", title: section.label, children: section.label }), section.active && (_jsx("span", { "aria-hidden": "true", className: "mui-dc797fcc7165 mui-27ead27a81df mui-b005d61d0953 mui-0cf6c2e8fe7e" })), _jsx(ChevronRight, { "aria-hidden": "true", className: "mui-61c000c8a98a mui-27ead27a81df mui-0b5a4d1257ab mui-36b12e8339c7" })] }, section.id)) })] }));
 }