@mendylanda/ui 0.1.0 → 0.1.2

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

@@ -2,64 +2,74 @@
 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, handleMenuReturn, preserveOutsideFocus, } from "./filter-menu-focus.js";
+import { useMenuPlacement, useEditorOffset } from "./use-menu-placement.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;
+function selectedSection(sections, selectedId, desktop) {
+    return (sections.find((section) => section.id === selectedId && !section.disabled) ??
+        (desktop ? sections.find((section) => !section.disabled) : undefined));
+}
 /** One dialog contains the filter list and its editor, with a single-panel layout on phones. */
-export function FilterMenuPanel({ sections, selectedId, onSelect, anchor, trigger, }) {
-    const { classNames } = useMendyUI();
+export function FilterMenuPanel({ sections, selectedId, onSelect, onClose, anchor, trigger, }) {
+    const { classNames, menuLayout } = useMendyUI();
     const desktop = useSyncExternalStore(subscribeViewport, isDesktop, serverDesktop);
-    const selected = sections.find((section) => section.id === selectedId && !section.disabled) ??
-        (desktop ? sections.find((section) => !section.disabled) : undefined);
+    const selected = selectedSection(sections, selectedId, desktop);
     const content = useRef(null);
     const editor = useRef(null);
     const rows = useRef(new Map());
     const pendingEditorFocus = useRef(false);
-    const [alignOffset, setAlignOffset] = useState(0);
+    const { alignOffset, side } = useMenuPlacement(anchor, trigger, desktop);
     const panelId = useId();
-    useLayoutEffect(() => {
-        const button = trigger.current;
-        if (!button)
-            return;
-        const update = () => {
-            const bounds = button.getBoundingClientRect();
-            const target = anchor?.current?.getBoundingClientRect();
-            // Desktop starts at the search field's edge; mobile stays close to the icon.
-            setAlignOffset(desktop ? (target?.left ?? bounds.left) - bounds.left : 0);
-        };
-        update();
-        const observer = new ResizeObserver(update);
-        observer.observe(anchor?.current ?? button);
-        window.addEventListener("resize", update);
-        return () => {
-            observer.disconnect();
-            window.removeEventListener("resize", update);
-        };
-    }, [anchor, desktop, trigger]);
+    const detached = desktop && menuLayout === "anchored";
+    const editorPanel = useRef(null);
+    const editorOffset = useEditorOffset({
+        detached,
+        editorPanel,
+        content,
+        rows,
+        selectedId: selected?.id,
+    });
+    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 });
+        },
+    });
     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 +77,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,90 +86,124 @@ 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();
             }
-        }, onCloseAutoFocus: (event) => {
-            const focused = document.activeElement;
-            if (event.target instanceof HTMLElement &&
-                focused &&
-                focused !== document.body &&
-                !event.target.contains(focused))
-                event.preventDefault();
-        }, onKeyDown: (event) => {
-            // Allow normal Tab traversal within the dialog; Radix menus normally cancel Tab.
+        }, onCloseAutoFocus: preserveOutsideFocus, 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();
-            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]')) {
-                event.preventDefault();
-                event.stopPropagation();
-                if (desktop)
-                    rows.current.get(selected?.id ?? "")?.focus();
-                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: () => {
-                                        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)] }))] }) }));
+                pointer.cancel();
+            handleMenuTab(event, {
+                trigger: trigger.current,
+                editor: editor.current,
+                onClose,
+                hasSelection: Boolean(selected),
+            });
+        }, onKeyDown: (event) => handleMenuReturn(event, () => {
+            if (desktop)
+                rows.current.get(selected?.id ?? "")?.focus();
+            else
+                back();
+        }), className: cn("mui-971625533e56 mui-571ea69568d3 mui-34055e6f8c1b mui-d5111d0e9f48 mui-04760bcd507f mui-94ea94fde25f mui-393df0d154e0 mui-548a450e8e53", desktop && selected ? "mui-8dd3eece40db" : "mui-919182384559", detached && "mui-0fc84a692dad mui-dad556abfe15 mui-8fca9236d191 mui-89c3006b2722", classNames?.menu), children: _jsxs("div", { className: cn("mui-80baa5d03af7", desktop && selected
+                ? "mui-0f2a693e93e2 mui-b5985369ee35 mui-da607d0a2538" : "mui-222f930b8752 mui-302c0d124a94", detached && "mui-b9677bd1cb66 mui-70007b876865"), children: [showList && (_jsx(FilterMenuList, { sections: sections, selectedId: selected?.id, initialKey: selected?.id ?? lastSelection.current, panelId: panelId, desktop: desktop, detached: detached, 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", { ref: editorPanel, "data-slot": "filter-menu-editor", onPointerEnter: pointer.cancel, style: detached ? { marginTop: editorOffset } : undefined, className: cn("mui-222f930b8752 mui-410da8dfa8ac mui-184ddc11e5f9 mui-80baa5d03af7 mui-302c0d124a94", detached && "mui-d5111d0e9f48 mui-3fa8c572949b mui-4f1a55de40bc mui-e593c38256e0 mui-5bd2afe89f0b mui-94ea94fde25f"), children: [_jsx(EditorHeading, { section: selected, desktop: desktop, back: back, onCleared: focusEditor }), _jsx("div", { ref: editor, id: `${panelId}-${selected.id}`, role: "group", "aria-label": selected.editorLabel, tabIndex: -1, className: cn("mui-410da8dfa8ac mui-184ddc11e5f9 mui-3b82279f859f 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 EditorHeading({ section, desktop, back, onCleared, }) {
     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) {
+    return (_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: section.label }), section.clear && (_jsx(Button, { variant: "ghost", size: "sm", onClick: () => {
+                    section.clear?.();
+                    requestAnimationFrame(onCleared);
+                }, "aria-label": `Clear ${section.label} filter`, className: "mui-8cc46fa87f41 mui-ce1945804664 mui-1da2e8f173c5 mui-3992de70b033 mui-52101fc7d8bb mui-35f35c41d134", children: "Clear" }))] }));
+}
+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, detached, rows, choose, keyboardNavigation, onPointerMove, }) {
+    const { classNames } = useMendyUI();
+    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 && !detached && "mui-3b6d5fc7b061", detached && "mui-d5111d0e9f48 mui-3fa8c572949b mui-4f1a55de40bc mui-e593c38256e0 mui-5bd2afe89f0b mui-94ea94fde25f"), 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", "data-separator": section.separatorBefore && !query ? "true" : 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 mui-aa0e3c036805 mui-41d1475cf71a mui-dfc89afd7885", section.separatorBefore &&
+                        !query && "mui-d2d9e1f13413 mui-a22ea0ba562a mui-be02e79e6a27 mui-a267680f9f49 mui-e22234c7b474 mui-4d24300d447b mui-37a30b916086", 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)) })] }));
 }

package/dist/filters/filters.d.ts

@@ -2,8 +2,10 @@ import type { ComponentProps, ReactNode } from "react";
 import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuTrigger } from "../primitives/dropdown-menu.js";
 export type FilterEditorProps = ComponentProps<typeof DropdownMenu>;
 export declare function FilterEditor(props: FilterEditorProps): import("react/jsx-runtime").JSX.Element;
-export type FilterChipProps = ComponentProps<"div">;
-export declare function FilterChip({ className, ...props }: FilterChipProps): import("react/jsx-runtime").JSX.Element;
+export type FilterChipProps = ComponentProps<"div"> & {
+    entranceDelay?: number;
+};
+export declare function FilterChip({ className, ref, entranceDelay, ...props }: FilterChipProps): import("react/jsx-runtime").JSX.Element;
 export type FilterEditorTriggerProps = ComponentProps<typeof DropdownMenuTrigger>;
 export declare function FilterEditorTrigger({ className, asChild, ...props }: FilterEditorTriggerProps): import("react/jsx-runtime").JSX.Element;
 export type FilterEditorContentProps = ComponentProps<typeof DropdownMenuContent>;

package/dist/filters/filters.js

@@ -1,6 +1,7 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useLayoutEffect, useImperativeHandle, useRef, useState } from "react";
+import { useAnimate, useReducedMotion } from "motion/react";
 import { XIcon } from "lucide-react";
 import { Button } from "../customization.js";
 import { cn } from "../utils.js";
@@ -8,11 +9,31 @@ import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMe
 export function FilterEditor(props) {
     return _jsx(DropdownMenu, { modal: false, ...props });
 }
-export function FilterChip({ className, ...props }) {
-    return (_jsx("div", { "data-mendy-ui": "", "data-slot": "filter-chip", className: cn("mui-123306850fe1 mui-539ae144f076 mui-81b198a2db84 mui-d5111d0e9f48 mui-3fa8c572949b mui-71556df3b421 mui-d191cb569aac mui-c74ab393b96d mui-35f35c41d134 mui-5e49f8678d00 mui-3bc474178684 motion-safe:slide-in-from-bottom-2.5 mui-b225f0361d28 mui-bc94a66158a3", className), ...props }));
+export function FilterChip({ className, ref, entranceDelay = 0, ...props }) {
+    const [scope, animate] = useAnimate();
+    const reducedMotion = useReducedMotion();
+    const initialDelay = useRef(entranceDelay);
+    useImperativeHandle(ref, () => scope.current);
+    useLayoutEffect(() => {
+        if (reducedMotion) {
+            scope.current.style.transform = "none";
+            scope.current.style.opacity = "1";
+            return;
+        }
+        const animation = animate(scope.current, { y: [10, 0], opacity: [0, 1] }, {
+            type: "spring",
+            stiffness: 100,
+            damping: 10,
+            mass: 1,
+            delay: initialDelay.current,
+            opacity: { duration: 0.2 },
+        });
+        return () => animation.stop();
+    }, [animate, scope, reducedMotion]);
+    return (_jsx("div", { "data-mendy-ui": "", ref: scope, "data-slot": "filter-chip", className: cn("mui-123306850fe1 mui-539ae144f076 mui-81b198a2db84 mui-d5111d0e9f48 mui-3fa8c572949b mui-71556df3b421 mui-d191cb569aac mui-c74ab393b96d mui-35f35c41d134", className), ...props }));
 }
 export function FilterEditorTrigger({ className, asChild, ...props }) {
-    return (_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { asChild: asChild, variant: "ghost", "data-mendy-ui": "", "data-slot": "filter-editor-trigger", "aria-haspopup": "dialog", className: cn("mui-222f930b8752 mui-57c930dc1c31 mui-66b490dd6005 mui-52417259a4f5 mui-52101fc7d8bb mui-184ddc11e5f9 mui-71556df3b421 mui-70007b876865 mui-e7e01cc7f4df mui-1a5d10977b93 mui-37ad15a95595 mui-4d6720d47806 mui-2e357972fc10 mui-355efe22aedb mui-50aafa8694bb mui-db549d38ff19 mui-8d3c1014b967 mui-4600b77303d6 mui-4027d9c589b6 mui-6f73a280432e", className), ...props }) }));
+    return (_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { asChild: asChild, variant: "ghost", "data-mendy-ui": "", "data-slot": "filter-editor-trigger", "aria-haspopup": "dialog", className: cn("mui-222f930b8752 mui-57c930dc1c31 mui-66b490dd6005 mui-52417259a4f5 mui-52101fc7d8bb mui-184ddc11e5f9 mui-71556df3b421 mui-70007b876865 mui-e7e01cc7f4df mui-e9347b78185f mui-37ad15a95595 mui-4d6720d47806 mui-2e357972fc10 mui-355efe22aedb mui-50aafa8694bb mui-db549d38ff19 mui-8d3c1014b967 mui-4600b77303d6 mui-4027d9c589b6 mui-6f73a280432e", className), ...props }) }));
 }
 export function FilterEditorContent({ className, onClick, ...props }) {
     return (_jsx(DropdownMenuContent, { "data-mendy-ui": "", "data-slot": "filter-editor-content", role: "dialog", "aria-orientation": undefined, align: "start", sideOffset: 6, loop: true, onClick: (event) => {
@@ -21,7 +42,7 @@ export function FilterEditorContent({ className, onClick, ...props }) {
         }, className: cn("mui-dcd942c18ddc mui-34055e6f8c1b mui-2368e909f3a5 mui-04760bcd507f mui-37d8a3f448ff", className), ...props }));
 }
 export function FilterRemove({ className, children, ...props }) {
-    return (_jsx(Button, { variant: "ghost", type: "button", "data-mendy-ui": "", "data-slot": "filter-remove", className: cn("mui-222f930b8752 mui-57c930dc1c31 mui-52417259a4f5 mui-04760bcd507f mui-8867d85ed290 mui-27ead27a81df mui-71556df3b421 mui-a503dd374cca mui-8d940fccb093 mui-163a623b3716 mui-37ad15a95595 mui-4d6720d47806 mui-2e357972fc10 mui-355efe22aedb mui-50aafa8694bb mui-db549d38ff19 mui-8d3c1014b967 mui-4600b77303d6", className), ...props, children: children ?? _jsx(XIcon, { className: "mui-61c000c8a98a", "aria-hidden": "true" }) }));
+    return (_jsx(Button, { variant: "ghost", type: "button", "data-mendy-ui": "", "data-slot": "filter-remove", className: cn("mui-222f930b8752 mui-57c930dc1c31 mui-52417259a4f5 mui-04760bcd507f mui-8867d85ed290 mui-27ead27a81df mui-71556df3b421 mui-a503dd374cca mui-55860251be20 mui-163a623b3716 mui-37ad15a95595 mui-4d6720d47806 mui-2e357972fc10 mui-355efe22aedb mui-50aafa8694bb mui-db549d38ff19 mui-8d3c1014b967 mui-4600b77303d6", className), ...props, children: children ?? _jsx(XIcon, { className: "mui-61c000c8a98a", "aria-hidden": "true" }) }));
 }
 /** Editing and removal are independent. Values remain owned by the caller. */
 export function AppliedFilter({ label, editor, onRemove, disabled, open, onOpenChange, editLabel = `Edit ${label} filter`, removeLabel = `Remove ${label} filter`, contentProps, triggerProps, removeProps, children, ...props }) {

package/dist/filters/use-filter-options.js

@@ -1,4 +1,5 @@
 "use client";
+import { useValueDraft } from "./use-value-draft.js";
 import { createContext, useContext, useEffect, useLayoutEffect, useRef, useState } from "react";
 export const FilterOptionCache = createContext(null);
 function acquire(cache, key, load) {
@@ -39,6 +40,7 @@ function acquire(cache, key, load) {
     let released = false;
     return {
         promise: current.promise,
+        signal: current.abort.signal,
         release() {
             if (released)
                 return;
@@ -71,12 +73,12 @@ export function useFilterOptions(id, field, value, enabled) {
     useLayoutEffect(() => {
         latest.current = source;
     }, [source]);
-    const [localQuery, setLocalQuery] = useState("");
+    const scopeKey = JSON.stringify([id, source?.kind, source?.scope, source?.params]);
+    const [localQuery, setLocalQuery] = useValueDraft(scopeKey, () => "", `${id}:query`);
     const query = source?.query ?? localQuery;
     const [retryKey, retry] = useState(0);
-    const scopeKey = JSON.stringify([id, source?.scope, source?.params]);
     const requestKey = JSON.stringify([scopeKey, query, retryKey]);
-    const identity = JSON.stringify([id, source?.scope]);
+    const identity = JSON.stringify([id, source?.kind, source?.scope]);
     const ids = selectedIds(value);
     const idsKey = JSON.stringify(ids);
     const [page, setPage] = useState({ key: "", items: [], loading: false });
@@ -182,7 +184,7 @@ export function useFilterOptions(id, field, value, enabled) {
             moreRelease.current = request.release;
             request.promise
                 .then((result) => {
-                if (currentRequest.current !== requestKey)
+                if (request.signal.aborted || currentRequest.current !== requestKey)
                     return;
                 setPage((previous) => ({
                     key: requestKey,
@@ -193,7 +195,7 @@ export function useFilterOptions(id, field, value, enabled) {
                     loading: false,
                 }));
             }, (error) => {
-                if (currentRequest.current === requestKey)
+                if (!request.signal.aborted && currentRequest.current === requestKey)
                     setPage((previous) => ({ ...previous, loading: false, error: errorMessage(error) }));
             })
                 .finally(request.release);

package/dist/filters/use-menu-placement.d.ts

@@ -0,0 +1,14 @@
+import type { RefObject } from "react";
+/** Position the menu against the search field and the available viewport. */
+export declare function useMenuPlacement(anchor: RefObject<HTMLDivElement | null> | undefined, trigger: RefObject<HTMLButtonElement | null>, desktop: boolean): {
+    alignOffset: number;
+    side: "top" | "bottom";
+};
+/** Follow the selected row while keeping the editor inside the viewport. */
+export declare function useEditorOffset({ detached, editorPanel, content, rows, selectedId, }: {
+    detached: boolean;
+    editorPanel: RefObject<HTMLDivElement | null>;
+    content: RefObject<HTMLDivElement | null>;
+    rows: RefObject<Map<string, HTMLButtonElement>>;
+    selectedId?: string;
+}): number;

package/dist/filters/use-menu-placement.js

@@ -0,0 +1,77 @@
+"use client";
+import { useLayoutEffect, useState } from "react";
+/** Position the menu against the search field and the available viewport. */
+export function useMenuPlacement(anchor, trigger, desktop) {
+    const [alignOffset, setAlignOffset] = useState(0);
+    const [side, setSide] = useState("bottom");
+    useLayoutEffect(() => {
+        const button = trigger.current;
+        if (!button)
+            return;
+        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
+                ? 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]);
+    return { alignOffset, side };
+}
+/** Follow the selected row while keeping the editor inside the viewport. */
+export function useEditorOffset({ detached, editorPanel, content, rows, selectedId, }) {
+    const [editorOffset, setEditorOffset] = useState(0);
+    useLayoutEffect(() => {
+        if (!detached)
+            return;
+        const panel = editorPanel.current;
+        const root = content.current;
+        if (!panel || !root)
+            return;
+        const update = () => {
+            const row = rows.current.get(selectedId ?? "");
+            if (!row)
+                return;
+            const available = parseFloat(getComputedStyle(root).getPropertyValue("--radix-dropdown-menu-content-available-height")) || window.innerHeight - 32;
+            const offset = row.getBoundingClientRect().top - root.getBoundingClientRect().top;
+            setEditorOffset(Math.max(0, Math.min(offset - 5, available - panel.getBoundingClientRect().height - 2)));
+        };
+        update();
+        const observer = new ResizeObserver(update);
+        observer.observe(panel);
+        observer.observe(root);
+        root.addEventListener("scroll", update, true);
+        return () => {
+            observer.disconnect();
+            root.removeEventListener("scroll", update, true);
+        };
+    }, [detached, selectedId, editorPanel, content, rows]);
+    return editorOffset;
+}

package/dist/filters/use-menu-pointer.d.ts

@@ -0,0 +1,10 @@
+import type { PointerEvent, RefObject } from "react";
+/** Allow a short diagonal path from a filter row into its adjacent editor. */
+export declare function useMenuPointer({ editor, selectedId, onChoose, }: {
+    editor: RefObject<HTMLDivElement | null>;
+    selectedId?: string;
+    onChoose(id: string): void;
+}): {
+    move: (id: string, event: PointerEvent<HTMLButtonElement>) => void;
+    cancel: () => void;
+};

package/dist/filters/use-menu-pointer.js

@@ -0,0 +1,64 @@
+"use client";
+import { useEffect, useLayoutEffect, useRef } from "react";
+/** Allow a short diagonal path from a filter row into its adjacent editor. */
+export function useMenuPointer({ editor, selectedId, onChoose, }) {
+    const origin = useRef(null);
+    const last = useRef(null);
+    const pending = useRef(null);
+    const candidate = useRef(null);
+    const choose = useRef(onChoose);
+    useLayoutEffect(() => {
+        choose.current = onChoose;
+    });
+    function cancel() {
+        if (pending.current !== null)
+            clearTimeout(pending.current);
+        pending.current = null;
+        candidate.current = null;
+    }
+    useEffect(() => cancel, []);
+    useEffect(() => {
+        cancel();
+        origin.current = null;
+    }, [selectedId]);
+    function move(id, event) {
+        if (event.pointerType !== "mouse")
+            return;
+        const point = { x: event.clientX, y: event.clientY };
+        const previous = last.current;
+        last.current = point;
+        // Layout changes beneath a stationary cursor are not navigation intent.
+        if (previous?.x === point.x && previous.y === point.y)
+            return;
+        if (id === selectedId) {
+            cancel();
+            origin.current = point;
+            return;
+        }
+        const start = origin.current;
+        const bounds = editor.current?.getBoundingClientRect();
+        if (start && previous && bounds) {
+            const edge = start.x < bounds.left ? bounds.left : bounds.right;
+            const distance = edge - start.x;
+            const progress = (point.x - start.x) / distance;
+            const towardsEditor = (point.x - previous.x) * distance > 0;
+            const top = start.y + (bounds.top - 8 - start.y) * progress;
+            const bottom = start.y + (bounds.bottom + 8 - start.y) * progress;
+            if (towardsEditor && progress >= 0 && progress <= 1 && point.y >= top && point.y <= bottom) {
+                candidate.current = id;
+                if (pending.current === null) {
+                    pending.current = setTimeout(() => {
+                        const next = candidate.current;
+                        cancel();
+                        if (next)
+                            choose.current(next);
+                    }, 300);
+                }
+                return;
+            }
+        }
+        cancel();
+        choose.current(id);
+    }
+    return { move, cancel };
+}