@mendylanda/ui 0.1.1 → 0.1.3

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

@@ -7,7 +7,8 @@ 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 { 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)";
@@ -25,19 +26,30 @@ function subscribeViewport(listener) {
 }
 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, onClose, anchor, trigger, }) {
-    const { classNames } = useMendyUI();
+    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 [side, setSide] = useState("bottom");
+    const { alignOffset, side, anchorStyle } = useMenuPlacement(anchor, trigger, desktop);
     const panelId = useId();
+    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);
@@ -49,45 +61,6 @@ export function FilterMenuPanel({ sections, selectedId, onSelect, onClose, ancho
             rows.current.get(id)?.focus({ preventScroll: true });
         },
     });
-    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]);
     useEffect(() => {
         const frame = requestAnimationFrame(() => {
             const first = rows.current.get(initialSelection.current ?? "") ??
@@ -119,19 +92,12 @@ export function FilterMenuPanel({ sections, selectedId, onSelect, onClose, ancho
         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, side: side, sideOffset: 7, collisionPadding: 16, 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, style: anchorStyle, 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();
-        }, onPointerDownCapture: () => {
+        }, onCloseAutoFocus: preserveOutsideFocus, onPointerDownCapture: () => {
             setKeyboardNavigation(false);
             pointer.cancel();
         }, onPointerLeave: pointer.cancel, onKeyDownCapture: (event) => {
@@ -146,22 +112,14 @@ export function FilterMenuPanel({ sections, selectedId, onSelect, onClose, ancho
                 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.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)
-                    rows.current.get(selected?.id ?? "")?.focus();
-                else
-                    back();
-            }
-        }, 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) => {
+        }, 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", "mui-d7d803c609c5", desktop && selected
+            ? "mui-bd8a502f98ae" : "mui-0b9c84552e40", 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-a3c6c8c31aed" : "mui-222f930b8752 mui-302c0d124a94", detached && "mui-b9677bd1cb66 mui-e0122edc668b"), 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;
@@ -173,10 +131,14 @@ export function FilterMenuPanel({ sections, selectedId, onSelect, onClose, ancho
                             }
                             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-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)] }))] }) }));
+                    } })), 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-291952c2525a mui-d5111d0e9f48 mui-3fa8c572949b mui-b31810dbd8a9 mui-4f1a55de40bc mui-e593c38256e0 mui-5bd2afe89f0b"), 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 EditorHeading({ section, desktop, back, onCleared, }) {
+    const { classNames } = useMendyUI();
+    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);
@@ -201,7 +163,7 @@ function MenuHeading({ label }) {
     }, [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, }) {
+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);
@@ -211,7 +173,7 @@ function FilterMenuList({ sections, selectedId, initialKey, panelId, desktop, ro
         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) => {
+    return (_jsxs("div", { "data-slot": "filter-menu-list", className: cn("mui-222f930b8752 mui-410da8dfa8ac mui-302c0d124a94", desktop && selectedId && !detached && "mui-3b6d5fc7b061", detached && "mui-d5111d0e9f48 mui-3fa8c572949b mui-4f1a55de40bc mui-e593c38256e0 mui-5bd2afe89f0b"), 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();
@@ -228,7 +190,8 @@ function FilterMenuList({ sections, selectedId, initialKey, panelId, desktop, ro
                         ? `${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) => {
+                            : 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: () => {

package/dist/filters/filter-option-search.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentProps } from "react";
+import { Input } from "../customization.js";
+/** The search row belongs to the option panel, with a visible inset keyboard focus ring. */
+export declare function FilterOptionSearch({ className, ...props }: ComponentProps<typeof Input>): import("react/jsx-runtime").JSX.Element;

package/dist/filters/filter-option-search.js

@@ -0,0 +1,9 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Search } from "lucide-react";
+import { Input } from "../customization.js";
+import { cn } from "../utils.js";
+/** The search row belongs to the option panel, with a visible inset keyboard focus ring. */
+export function FilterOptionSearch({ className, ...props }) {
+    return (_jsxs("div", { "data-mendy-ui": "", "data-slot": "filter-option-search", className: "mui-d2d9e1f13413 mui-bbe39cfb5cc6", children: [_jsx(Search, { className: "mui-33228ff7d583 mui-747355bdc2a2 mui-cea70f23972e mui-4e45f4841abb mui-100c22d5776b mui-5dde0fd996f0 mui-35f35c41d134", "aria-hidden": "true" }), _jsx(Input, { ...props, type: "search", className: cn("mui-2bf5d58a824b mui-52417259a4f5 mui-dad556abfe15 mui-8fca9236d191 mui-b2100041c585 mui-a202804a1738 mui-89c3006b2722 mui-39be5a15b766 mui-50aafa8694bb mui-db549d38ff19 mui-4f05a238500e", className) })] }));
+}

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

@@ -6,6 +6,7 @@ export interface FilterOption {
 interface SharedProps {
     label: string;
     options: readonly FilterOption[];
+    /** Search is enabled by default. Set false for a short list. */
     searchable?: boolean;
     searchPlaceholder?: string;
     emptyMessage?: string;

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

@@ -1,9 +1,7 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useId, useRef, useState } from "react";
-import { Input } from "../customization.js";
-import { Label } from "../customization.js";
-import { Search } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+import { FilterOptionSearch } from "./filter-option-search.js";
 import { DropdownMenuRadioGroup, DropdownMenuRadioItem } from "../primitives/dropdown-menu.js";
 import { FilterCheckboxItem } from "./filters.js";
 function handleSearchKey(event) {
@@ -17,7 +15,7 @@ function handleSearchKey(event) {
     if (event.key !== "Escape" && event.key !== "Tab")
         event.stopPropagation();
 }
-function SearchableOptions({ label, options, searchable, searchPlaceholder, emptyMessage = "No options found.", children, }) {
+function SearchableOptions({ label, options, searchable = true, searchPlaceholder, emptyMessage = "No options found.", children, }) {
     const [query, setQuery] = useState("");
     const inputRef = useRef(null);
     useEffect(() => {
@@ -26,12 +24,13 @@ function SearchableOptions({ label, options, searchable, searchPlaceholder, empt
         const frame = requestAnimationFrame(() => inputRef.current?.focus());
         return () => cancelAnimationFrame(frame);
     }, [searchable]);
-    const id = useId();
-    const filtered = options.filter((option) => option.label.toLocaleLowerCase().includes(query.toLocaleLowerCase()));
+    const filtered = !searchable
+        ? options
+        : options.filter((option) => option.label.toLocaleLowerCase().includes(query.toLocaleLowerCase()));
     return (_jsxs("div", { className: "mui-72b37c1a040d mui-81b198a2db84", "data-mendy-ui": "", "data-slot": "filter-options", onKeyDown: (event) => {
             if (event.key === "Tab")
                 event.stopPropagation();
-        }, children: [searchable && (_jsxs("div", { "data-mendy-ui": "", className: "mui-d2d9e1f13413 mui-bbe39cfb5cc6 mui-b97db4a9f432", children: [_jsx(Search, { className: "mui-33228ff7d583 mui-747355bdc2a2 mui-866c339ea145 mui-4e45f4841abb mui-5dde0fd996f0 mui-100c22d5776b mui-0b5a4d1257ab", strokeWidth: 1.5, "aria-hidden": "true" }), _jsx(Label, { htmlFor: id, className: "mui-32fb090591d9", children: label }), _jsx(Input, { ref: inputRef, id: id, type: "search", className: "mui-75b27e813dcc mui-4f05a238500e", placeholder: searchPlaceholder ?? label, value: query, onChange: (event) => setQuery(event.target.value), onKeyDown: handleSearchKey })] })), filtered.length ? (_jsx("div", { role: "menu", "aria-label": label, className: "mui-1dee6e3ec67d", children: children(filtered) })) : (_jsx("p", { role: "status", className: "mui-094f5333853b mui-c74ab393b96d mui-35f35c41d134", children: emptyMessage }))] }));
+        }, children: [searchable && (_jsx(FilterOptionSearch, { ref: inputRef, "aria-label": label, placeholder: searchPlaceholder ?? label, value: query, onChange: (event) => setQuery(event.target.value), onKeyDown: handleSearchKey })), filtered.length ? (_jsx("div", { role: "menu", "aria-label": label, className: "mui-1dee6e3ec67d", children: children(filtered) })) : (_jsx("p", { role: "status", className: "mui-094f5333853b mui-c74ab393b96d mui-35f35c41d134", children: emptyMessage }))] }));
 }
 /** Single selection applies immediately and closes the dropdown. */
 export function FilterSelectEditor({ value, onValueChange, ...props }) {

package/dist/filters/filters.d.ts

@@ -2,8 +2,14 @@ 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;
+/** Preserve the original list stagger; newly inserted chips animate immediately. */
+export declare function FilterChipList({ children }: {
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export type FilterChipProps = ComponentProps<"div"> & {
+    entranceDelay?: number;
+};
+export declare function FilterChip({ className, 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 { createContext, useContext, useEffect, useRef, useState } from "react";
+import { m, LazyMotion, domAnimation, useReducedMotion } from "motion/react";
 import { XIcon } from "lucide-react";
 import { Button } from "../customization.js";
 import { cn } from "../utils.js";
@@ -8,8 +9,33 @@ 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 }));
+const ChipListContext = createContext(false);
+const listVariant = {
+    hidden: { y: 10, opacity: 0 },
+    show: {
+        y: 0,
+        opacity: 1,
+        transition: { duration: 0.05, staggerChildren: 0.06 },
+    },
+};
+const itemVariant = {
+    hidden: { y: 10, opacity: 0 },
+    show: { y: 0, opacity: 1 },
+};
+const reducedVariant = {
+    hidden: { y: 0, opacity: 1 },
+    show: { y: 0, opacity: 1, transition: { duration: 0 } },
+};
+/** Preserve the original list stagger; newly inserted chips animate immediately. */
+export function FilterChipList({ children }) {
+    const reducedMotion = useReducedMotion();
+    return (_jsx(LazyMotion, { features: domAnimation, children: _jsx(ChipListContext.Provider, { value: true, children: _jsx(m.div, { variants: reducedMotion ? reducedVariant : listVariant, initial: "hidden", animate: "show", className: "mui-d1b2a59fbea7", children: children }) }) }));
+}
+export function FilterChip({ className, entranceDelay, ...props }) {
+    const inList = useContext(ChipListContext);
+    const reducedMotion = useReducedMotion();
+    const content = (_jsx(m.div, { "data-mendy-ui": "", "data-slot": "filter-chip-entrance", variants: reducedMotion ? reducedVariant : itemVariant, initial: inList ? undefined : "hidden", animate: inList ? undefined : "show", transition: entranceDelay === undefined || reducedMotion ? undefined : { delay: entranceDelay }, className: "mui-184ddc11e5f9 mui-81b198a2db84", children: _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", className), ...props }) }));
+    return inList ? content : _jsx(LazyMotion, { features: domAnimation, children: content });
 }
 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-e9347b78185f mui-37ad15a95595 mui-4d6720d47806 mui-2e357972fc10 mui-355efe22aedb mui-50aafa8694bb mui-db549d38ff19 mui-8d3c1014b967 mui-4600b77303d6 mui-4027d9c589b6 mui-6f73a280432e", className), ...props }) }));

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

@@ -64,6 +64,10 @@ export function selectedIds(value) {
             ? [value]
             : [];
 }
+// External queries belong to the consumer; opting out only disables our local search.
+function optionSearchQuery(field, localQuery) {
+    return field.source?.query ?? (field.searchable === false ? "" : localQuery);
+}
 export function useFilterOptions(id, field, value, enabled) {
     const sharedCache = useContext(FilterOptionCache);
     const privateCache = useRef(new Map());
@@ -75,7 +79,7 @@ export function useFilterOptions(id, field, value, enabled) {
     }, [source]);
     const scopeKey = JSON.stringify([id, source?.kind, source?.scope, source?.params]);
     const [localQuery, setLocalQuery] = useValueDraft(scopeKey, () => "", `${id}:query`);
-    const query = source?.query ?? localQuery;
+    const query = optionSearchQuery(field, localQuery);
     const [retryKey, retry] = useState(0);
     const requestKey = JSON.stringify([scopeKey, query, retryKey]);
     const identity = JSON.stringify([id, source?.kind, source?.scope]);

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

@@ -0,0 +1,15 @@
+import type { CSSProperties, 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";
+    anchorStyle: CSSProperties | undefined;
+};
+/** 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,104 @@
+"use client";
+import { useLayoutEffect, useRef, 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 [anchorWidth, setAnchorWidth] = useState();
+    const [side, setSide] = useState("bottom");
+    useLayoutEffect(() => {
+        const button = trigger.current;
+        if (!button)
+            return;
+        const update = () => {
+            const bounds = button.getBoundingClientRect();
+            const target = anchor?.current?.getBoundingClientRect();
+            setAnchorWidth(target?.width);
+            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");
+            // Follow the search edge in both layouts, including inset mobile triggers.
+            setAlignOffset(desktop
+                ? rtl
+                    ? bounds.right - (target?.right ?? bounds.right)
+                    : (target?.left ?? bounds.left) - bounds.left
+                : rtl
+                    ? (target?.left ?? bounds.left) - bounds.left
+                    : bounds.right - (target?.right ?? bounds.right));
+        };
+        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]);
+    const anchorStyle = anchorWidth
+        ? { "--mendy-filter-anchor-width": `${anchorWidth}px` }
+        : undefined;
+    return { alignOffset, side, anchorStyle };
+}
+/** Follow the selected row while keeping the editor inside the viewport. */
+export function useEditorOffset({ detached, editorPanel, content, rows, selectedId, }) {
+    const [editorOffset, setEditorOffset] = useState(0);
+    const measured = useRef({ id: selectedId, height: 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) {
+                setEditorOffset(0);
+                return;
+            }
+            const rootTop = root.getBoundingClientRect().top;
+            const list = root.querySelector('[data-slot="filter-menu-list"]');
+            const listBottom = list?.getBoundingClientRect().bottom ?? rootTop;
+            const currentHeight = panel.getBoundingClientRect().height;
+            if (measured.current.id !== selectedId)
+                measured.current = { id: selectedId, height: 0 };
+            // Result filtering may shrink the editor. Keep its input in place instead
+            // of moving it down under the pointer on every query change.
+            measured.current.height = Math.max(measured.current.height, currentHeight);
+            const height = measured.current.height;
+            const viewport = window.visualViewport;
+            const viewportBottom = (viewport?.offsetTop ?? 0) + (viewport?.height ?? window.innerHeight);
+            // Keep short editors inside the list's vertical span. Lower rows therefore
+            // open upward even on a tall viewport, instead of dangling below the list.
+            const latestTop = Math.max(rootTop, Math.min(listBottom, viewportBottom - 16) - height);
+            const preferredTop = row.getBoundingClientRect().top - 5;
+            setEditorOffset(Math.max(0, Math.min(preferredTop, latestTop) - rootTop));
+        };
+        update();
+        const observer = new ResizeObserver(update);
+        observer.observe(panel);
+        observer.observe(root);
+        const list = root.querySelector('[data-slot="filter-menu-list"]');
+        if (list)
+            observer.observe(list);
+        root.addEventListener("scroll", update, true);
+        return () => {
+            observer.disconnect();
+            root.removeEventListener("scroll", update, true);
+        };
+    }, [detached, selectedId, editorPanel, content, rows]);
+    return editorOffset;
+}

package/dist/primitives/dropdown-menu.js

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { useMendyUI } from "../customization.js";
 import { cn } from "../utils.js";
-import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
+import { CheckIcon, ChevronRightIcon } from "lucide-react";
 import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui";
 function DropdownMenu({ ...props }) {
     return _jsx(DropdownMenuPrimitive.Root, { "data-mendy-ui": "", "data-slot": "dropdown-menu", ...props });
@@ -31,7 +31,7 @@ function DropdownMenuRadioGroup({ ...props }) {
     return (_jsx(DropdownMenuPrimitive.RadioGroup, { "data-mendy-ui": "", "data-slot": "dropdown-menu-radio-group", ...props }));
 }
 function DropdownMenuRadioItem({ className, children, ...props }) {
-    return (_jsxs(DropdownMenuPrimitive.RadioItem, { "data-mendy-ui": "", "data-slot": "dropdown-menu-radio-item", className: cn("mui-d2d9e1f13413 mui-222f930b8752 mui-d343f41ba73e mui-71556df3b421 mui-074569488cca mui-02e603944040 mui-a8c1dfb1d4ef mui-05d4103bd67f mui-078d945937da mui-c74ab393b96d mui-59edd3d33673 mui-78905c9e865c mui-a8c1861c5d03 mui-a85c4c5d7465 mui-397f5ba426a0 mui-9beb654fcb0d mui-bcae9d37090c mui-040e748a3fa0 mui-eb5ef2dbc2d4", className), ...props, children: [_jsx("span", { className: "mui-33228ff7d583 mui-747355bdc2a2 mui-207bd0b3f259 mui-222f930b8752 mui-61c000c8a98a mui-71556df3b421 mui-a503dd374cca", children: _jsx(DropdownMenuPrimitive.ItemIndicator, { children: _jsx(CircleIcon, { className: "mui-9e7600197f38 mui-717b342c2d01" }) }) }), children] }));
+    return (_jsxs(DropdownMenuPrimitive.RadioItem, { "data-mendy-ui": "", "data-slot": "dropdown-menu-radio-item", className: cn("mui-d2d9e1f13413 mui-222f930b8752 mui-d343f41ba73e mui-71556df3b421 mui-074569488cca mui-02e603944040 mui-a8c1dfb1d4ef mui-05d4103bd67f mui-078d945937da mui-c74ab393b96d mui-59edd3d33673 mui-78905c9e865c mui-a8c1861c5d03 mui-a85c4c5d7465 mui-397f5ba426a0 mui-9beb654fcb0d mui-bcae9d37090c mui-040e748a3fa0 mui-eb5ef2dbc2d4", className), ...props, children: [_jsx("span", { className: "mui-33228ff7d583 mui-747355bdc2a2 mui-207bd0b3f259 mui-222f930b8752 mui-61c000c8a98a mui-71556df3b421 mui-a503dd374cca", children: _jsx(DropdownMenuPrimitive.ItemIndicator, { children: _jsx(CheckIcon, { className: "mui-100c22d5776b" }) }) }), children] }));
 }
 function DropdownMenuLabel({ className, inset, ...props }) {
     return (_jsx(DropdownMenuPrimitive.Label, { "data-mendy-ui": "", "data-slot": "dropdown-menu-label", "data-inset": inset, className: cn("mui-e7e01cc7f4df mui-a8c1dfb1d4ef mui-c74ab393b96d mui-daaac3fbf55e mui-6fa6a8ade7c4", className), ...props }));