@mendylanda/ui 0.1.0

package/dist/filters/filter-bar.js

@@ -0,0 +1,435 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { createContext, useContext, useEffect, useLayoutEffect, useMemo, useId, useRef, useState, } from "react";
+import { ListFilter, Search, X, Circle, ListChecks, Type, Hash, CalendarDays, SlidersHorizontal, Layers, } from "lucide-react";
+import { Button } from "../customization.js";
+import { Input } from "../customization.js";
+import { Label } from "../customization.js";
+import { FilterDateEditor } from "./filter-date-editor.js";
+import { Textarea } from "../customization.js";
+import { DropdownMenu, DropdownMenuTrigger, DropdownMenuRadioGroup, DropdownMenuRadioItem, } from "../primitives/dropdown-menu.js";
+import { AppliedFilter, FilterCheckboxItem } from "./filters.js";
+import { FilterOptionCache, useFilterOptions } from "./use-filter-options.js";
+import { classifyPaste, resolvePasteAmbiguity } from "./filter-state.js";
+import { cn } from "../utils.js";
+import { FilterMenuPanel } from "./filter-menu-panel.js";
+import { useValueDraft } from "./use-value-draft.js";
+import { MendyUIProvider, useMendyUI } from "../customization.js";
+const defaultGroups = [];
+const defaultSummary = { mode: "count", limit: 3 };
+const Context = createContext(null);
+function useRoot() {
+    const context = useContext(Context);
+    if (!context)
+        throw new Error("Filter components must be inside FilterRoot.");
+    return context;
+}
+export function FilterRoot({ classNames, ...props }) {
+    return (_jsx(MendyUIProvider, { classNames: classNames, children: _jsx(FilterRootContent, { ...props }) }));
+}
+function FilterRootContent({ filters, summary = defaultSummary, suggestions = "always", closeMenuOnApply = false, groups = defaultGroups, disabled = false, className, children, }) {
+    const { classNames } = useMendyUI();
+    const [cache] = useState(() => new Map());
+    const [ambiguous, setAmbiguous] = useState([]);
+    const trigger = useRef(null);
+    const context = useMemo(() => ({
+        filters,
+        summary,
+        suggestions,
+        closeMenuOnApply,
+        groups,
+        disabled,
+        trigger,
+        ambiguous,
+        setAmbiguous,
+    }), [filters, summary, suggestions, closeMenuOnApply, groups, disabled, ambiguous]);
+    return (_jsx(FilterOptionCache.Provider, { value: cache, children: _jsx(Context.Provider, { value: context, children: _jsx("div", { "data-mendy-ui": "", className: cn("mui-222f930b8752 mui-faa8a23c68f6 mui-71556df3b421 mui-074569488cca", classNames?.root, className), children: children }) }) }));
+}
+export function FilterBar(props) {
+    return (_jsxs(FilterRoot, { ...props, children: [_jsx(FilterSearch, { label: props.searchLabel, placeholder: props.searchPlaceholder }), _jsx(FilterList, {}), _jsx(FilterClear, {}), _jsx(FilterFeedback, {})] }));
+}
+export function FilterSearch({ label = "Search", placeholder = "Search or filter", }) {
+    const { filters, trigger, disabled, setAmbiguous } = useRoot();
+    const { classNames } = useMendyUI();
+    const anchor = useRef(null);
+    const input = useRef(null);
+    const shift = useRef(false);
+    return (_jsxs(DropdownMenu, { modal: false, open: filters.menuOpen, onOpenChange: filters.setMenuOpen, children: [_jsxs("div", { ref: anchor, className: cn("mui-d2d9e1f13413 mui-58d0413dd93c mui-27ead27a81df mui-8c14b4d2e932", classNames?.search), children: [_jsx(Search, { className: "mui-33228ff7d583 mui-747355bdc2a2 mui-ea31f8b3a958 mui-4e45f4841abb mui-3c7e3f82f336 mui-5dde0fd996f0", "aria-hidden": "true" }), _jsx(Input, { ref: input, type: "text", role: "searchbox", disabled: disabled, "aria-label": label, placeholder: placeholder, value: filters.search, autoComplete: "off", autoCapitalize: "none", autoCorrect: "off", spellCheck: false, className: cn("mui-58d0413dd93c mui-86486d7e416f mui-c74ab393b96d mui-4f05a238500e", filters.search ? "mui-83ffc494bac4" : "mui-0359a07b64f9", classNames?.searchInput), onKeyDown: (event) => {
+                            shift.current = event.shiftKey;
+                            if (event.key === "Enter" && !event.nativeEvent.isComposing && !event.shiftKey) {
+                                const classified = classifyPaste(event.currentTarget.value, filters.entries);
+                                if (Object.keys(classified.changes).length || classified.ambiguous.length) {
+                                    event.preventDefault();
+                                    const result = filters.paste(event.currentTarget.value, { before: "", after: "" });
+                                    setAmbiguous(result.ambiguous);
+                                }
+                            }
+                        }, onKeyUp: (event) => {
+                            shift.current = event.shiftKey;
+                        }, onChange: (event) => {
+                            setAmbiguous([]);
+                            filters.setSearch(event.target.value);
+                        }, onPaste: (event) => {
+                            if (shift.current)
+                                return;
+                            const text = event.clipboardData.getData("text");
+                            if (!text.trim() || !filters.entries.some((entry) => entry.field.recognize))
+                                return;
+                            const classified = classifyPaste(text, filters.entries);
+                            if (!Object.keys(classified.changes).length && !classified.ambiguous.length)
+                                return;
+                            event.preventDefault();
+                            const element = event.currentTarget;
+                            // Search inputs do not expose selectionStart in every browser. Track a full-field
+                            // replacement when selected text matches the field; otherwise append safely.
+                            const selected = window.getSelection()?.toString();
+                            const start = element.selectionStart ?? (selected === element.value ? 0 : element.value.length);
+                            const end = element.selectionEnd ?? (selected === element.value ? element.value.length : start);
+                            const result = filters.paste(text, {
+                                before: element.value.slice(0, start),
+                                after: element.value.slice(end),
+                            });
+                            setAmbiguous(result.ambiguous);
+                        } }), filters.search && (_jsx(Button, { variant: "ghost", size: "icon", type: "button", disabled: disabled, "aria-label": "Clear search", className: "mui-747355bdc2a2 mui-5a6edca9f43a mui-4e45f4841abb mui-222f930b8752 mui-0712570dcc9f mui-5dde0fd996f0 mui-71556df3b421 mui-a503dd374cca mui-02e603944040 mui-0b5a4d1257ab mui-8da02faac748 mui-2e357972fc10 mui-39be5a15b766 mui-db549d38ff19", onClick: () => {
+                            setAmbiguous([]);
+                            filters.setSearch("");
+                            input.current?.focus();
+                        }, children: _jsx(X, { className: "mui-9104ce433bba", "aria-hidden": "true" }) })), _jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "icon", ref: trigger, type: "button", disabled: disabled, "aria-label": "Open filters", "aria-haspopup": "dialog", className: cn("mui-747355bdc2a2 mui-71fb77dd8ea7 mui-4e45f4841abb mui-79ede756e761 mui-5dde0fd996f0 mui-2cdd01663c76 mui-8da02faac748 mui-2e357972fc10 mui-39be5a15b766 mui-db549d38ff19 mui-790ed041a953", filters.active.length ? "mui-65694092f002" : "mui-0b5a4d1257ab", classNames?.menuTrigger), children: _jsx(ListFilter, { className: "mui-3c7e3f82f336", "aria-hidden": "true" }) }) })] }), filters.menuOpen && _jsx(FilterMenuContent, { anchor: anchor })] }));
+}
+/** A standalone menu button for layouts without a search field. */
+export function FilterMenu({ children = "Add filter", asChild = false, }) {
+    const { filters, trigger, disabled } = useRoot();
+    const { classNames } = useMendyUI();
+    return (_jsxs(DropdownMenu, { modal: false, open: filters.menuOpen, onOpenChange: filters.setMenuOpen, children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { ref: trigger, asChild: asChild, className: classNames?.menuTrigger, variant: "outline", disabled: disabled, "aria-haspopup": "dialog", children: children }) }), filters.menuOpen && _jsx(FilterMenuContent, {})] }));
+}
+const fieldIcons = {
+    single: Circle,
+    multi: ListChecks,
+    text: Type,
+    tokens: Hash,
+    numberRange: Hash,
+    dateRange: CalendarDays,
+    custom: SlidersHorizontal,
+};
+function FilterMenuContent({ anchor }) {
+    const { filters, groups, disabled, trigger } = useRoot();
+    const [clearEpoch, setClearEpoch] = useState(0);
+    const grouped = new Set(groups.flatMap((group) => group.fields));
+    const visible = filters.entries.filter((entry) => !entry.field.hidden && entry.field.menu !== false);
+    const sections = [
+        ...visible.flatMap((entry) => grouped.has(entry.id)
+            ? []
+            : [
+                {
+                    id: entry.id,
+                    label: entry.field.label,
+                    icon: entry.field.icon,
+                    entries: [entry],
+                },
+            ]),
+        ...groups.flatMap((group) => {
+            const entries = visible.filter((entry) => group.fields.includes(entry.id));
+            return entries.length ? [{ ...group, entries }] : [];
+        }),
+    ].map((section) => {
+        const single = section.entries.length === 1 ? section.entries[0].field : undefined;
+        const Icon = single ? fieldIcons[single.kind] : Layers;
+        const active = section.entries.some((entry) => entry.field.isActive(entry.value));
+        const clearable = section.entries.filter((entry) => entry.field.isActive(entry.value) &&
+            !entry.field.disabled &&
+            entry.field.removable !== false);
+        return {
+            id: section.id,
+            label: section.label,
+            icon: section.icon ?? _jsx(Icon, {}),
+            editorLabel: single?.editorLabel ??
+                (single?.kind === "text" || single?.kind === "tokens"
+                    ? `Set ${section.label.toLowerCase()} filter`
+                    : `Choose ${section.label.toLowerCase()}`),
+            disabled: disabled || section.entries.every((entry) => entry.field.disabled),
+            active,
+            clear: !disabled && clearable.length
+                ? () => {
+                    const error = filters.batch(Object.fromEntries(clearable.map((entry) => [entry.id, entry.field.clearValue])), undefined, "remove");
+                    if (!error)
+                        setClearEpoch((epoch) => epoch + 1);
+                }
+                : undefined,
+            content: section.entries.map((entry) => (_jsxs("div", { className: "mui-f157ee6bae99", children: [!single && (_jsx("p", { className: "mui-894c3815a57f mui-0f9e6672913a mui-0a702d97ed7d mui-3992de70b033 mui-daaac3fbf55e mui-4fa4c190281c", children: entry.field.label })), _jsx(FieldEditor, { entry: entry, active: true, autoFocus: false, showDateLabel: false, disabled: disabled || entry.field.disabled, close: () => filters.setMenuOpen(false), location: "menu" }, `${entry.id}:${clearEpoch}`)] }, entry.id))),
+        };
+    });
+    return (_jsx(FilterMenuPanel, { sections: sections, selectedId: filters.openField, onSelect: filters.setOpenField, anchor: anchor, trigger: trigger }));
+}
+export function FilterList() {
+    const { filters } = useRoot();
+    return (_jsx(_Fragment, { children: filters.entries.map((entry) => (_jsx(FieldChip, { entry: entry }, entry.id))) }));
+}
+function summarize(field, value, choices) {
+    if (field.kind === "numberRange" && Array.isArray(value))
+        return `${value[0] ?? "Any"} – ${value[1] ?? "Any"}`;
+    if (Array.isArray(value))
+        return value
+            .map((item) => choices.find((choice) => choice.value === item)?.label ?? String(item ?? "Any"))
+            .join(", ");
+    if (value && typeof value === "object" && "from" in value && "to" in value)
+        return `${value.from ?? "Any"} – ${value.to ?? "Any"}`;
+    return choices.find((choice) => choice.value === value)?.label ?? String(value ?? "");
+}
+export function FilterField({ id }) {
+    const { filters } = useRoot();
+    const entry = filters.entries.find((entry) => entry.id === id);
+    return entry ? _jsx(FieldChip, { entry: entry }) : null;
+}
+/** Place a built-in or custom field editor in an application-defined layout. */
+export function FilterFieldEditor({ id, autoFocus = true }) {
+    const { filters, disabled } = useRoot();
+    const entry = filters.entries.find((entry) => entry.id === id);
+    return entry ? (_jsx(FieldEditor, { entry: entry, active: true, autoFocus: autoFocus, disabled: disabled || entry.field.disabled, close: () => filters.edit(null), location: "inline" }, id)) : null;
+}
+function FieldChip({ entry }) {
+    const { classNames } = useMendyUI();
+    const { filters, summary, suggestions, disabled, trigger } = useRoot();
+    const { id, field, value } = entry;
+    const descriptionId = useId();
+    const active = field.isActive(value);
+    const currentlyActive = useRef(active);
+    useLayoutEffect(() => {
+        currentlyActive.current = active;
+    }, [active]);
+    const suggestion = showSuggestion(entry, suggestions, filters.active.length);
+    const options = useFilterOptions(id, field, active ? value : field.suggestion?.value, false);
+    if (field.hidden || (!active && !suggestion))
+        return null;
+    return (_jsxs(AppliedFilter, { label: field.label, "data-mendy-ui": "", "data-slot": active ? "filter-chip" : "filter-suggestion", "data-state": active ? "applied" : "suggested", className: cn(!active && "mui-4f1a55de40bc mui-8450eb0f1857 mui-9b76f456b8c9 mui-8fca9236d191", (field.summary ?? summary).mode === "all" && "mui-a66e9985b093 mui-9974acedf3f7", classNames?.chip), disabled: chipDisabled(field, active, disabled), removeProps: { className: classNames?.chipRemove }, contentProps: {
+            className: classNames?.editor,
+            onCloseAutoFocus: (event) => {
+                if (!currentlyActive.current) {
+                    event.preventDefault();
+                    trigger.current?.focus();
+                }
+            },
+        }, triggerProps: { "aria-describedby": descriptionId, className: classNames?.chipTrigger }, editLabel: `${active ? "Edit" : "Apply"} ${field.label} filter`, open: filters.editField === id, onOpenChange: (open) => {
+            if (open && !active && field.suggestion && "value" in field.suggestion) {
+                filters.commit(id, field.suggestion.value, "suggestion");
+                return;
+            }
+            filters.edit(open ? id : null);
+        }, onRemove: active && field.removable !== false
+            ? () => {
+                filters.remove(id);
+                requestAnimationFrame(() => trigger.current?.focus());
+            }
+            : undefined, editor: _jsx(FieldEditor, { entry: entry, active: filters.editField === id, disabled: disabled || field.disabled, close: () => filters.edit(null), location: "chip" }), children: [_jsx("span", { id: descriptionId, className: "mui-32fb090591d9", children: summarize(field, active ? value : field.suggestion?.value, options.selected) }), _jsx(ChipSummary, { field: field, value: value, active: active, options: options, summary: summary })] }));
+}
+function showSuggestion(entry, mode, activeCount) {
+    return (!entry.field.isActive(entry.value) &&
+        entry.field.suggestion &&
+        !entry.field.hidden &&
+        mode !== "never" &&
+        (mode === "always" || activeCount === 0));
+}
+function chipDisabled(field, active, disabled) {
+    return (disabled ||
+        field.disabled ||
+        (!active && (field.suggestion?.disabled || field.suggestion?.loading)));
+}
+function summaryText(field, shownValue, choices, policy) {
+    const full = summarize(field, shownValue, choices);
+    let text = full;
+    if (policy.mode === "count" && field.kind !== "numberRange" && Array.isArray(shownValue)) {
+        const limit = Math.max(0, policy.limit ?? 3);
+        if (shownValue.length > limit)
+            text = `${summarize(field, shownValue.slice(0, limit), choices)}${limit ? " and " : ""}${shownValue.length - limit} more`;
+    }
+    return text;
+}
+function ChipSummary({ field, value, active, options, summary, }) {
+    const policy = field.summary ?? summary;
+    const shownValue = active ? value : field.suggestion?.value;
+    const full = summarize(field, shownValue, options.selected);
+    const text = summaryText(field, shownValue, options.selected, policy);
+    return (_jsxs(_Fragment, { children: [_jsxs("span", { children: [!active && field.suggestion?.label ? field.suggestion.label : field.label, full ? ":" : ""] }), field.renderSummary ? (field.renderSummary(shownValue, options.selected)) : (_jsx("span", { title: full, className: cn("mui-184ddc11e5f9", policy.mode === "ellipsis" && "mui-5a3a4ee420c2", policy.mode === "all" && "mui-726fca123972 mui-37cf9655f30a mui-1fcf28756bb1"), style: policy.mode === "ellipsis" ? { maxWidth: policy.maxWidth ?? 180 } : undefined, children: options.resolving ? _jsx("span", { className: "mui-7b3cd77eb999", children: text || "Loading…" }) : text }))] }));
+}
+export function FilterClear({ children = "Clear all" }) {
+    const { classNames } = useMendyUI();
+    const { filters, disabled, trigger, setAmbiguous } = useRoot();
+    if (!filters.active.length && !filters.search)
+        return null;
+    return (_jsx(Button, { type: "button", disabled: disabled, variant: "ghost", size: "sm", className: cn("mui-539ae144f076 mui-e7e01cc7f4df mui-52101fc7d8bb mui-35f35c41d134 mui-944969efb294 mui-71863717995b", classNames?.clear), onClick: () => {
+            setAmbiguous([]);
+            filters.clear();
+            requestAnimationFrame(() => trigger.current?.focus());
+        }, children: children }));
+}
+export function FilterFeedback() {
+    const { filters, ambiguous, setAmbiguous } = useRoot();
+    return (_jsxs(_Fragment, { children: [filters.error && !filters.menuOpen && !filters.editField && (_jsx("p", { role: "alert", className: "mui-58d0413dd93c mui-c74ab393b96d mui-887b9502d5c7", children: filters.error })), filters.persistenceMessage && (_jsx("p", { role: "status", className: "mui-58d0413dd93c mui-3992de70b033 mui-35f35c41d134", children: filters.persistenceMessage })), ambiguous.map((item) => (_jsxs("div", { "data-mendy-ui": "", className: "mui-222f930b8752 mui-58d0413dd93c mui-faa8a23c68f6 mui-71556df3b421 mui-074569488cca mui-3fa8c572949b mui-4f1a55de40bc mui-b97db4a9f432 mui-c74ab393b96d", children: [_jsxs("span", { children: ["Use ", item.token, " as:"] }), item.candidates.map((candidate) => (_jsx(Button, { size: "sm", variant: "outline", onClick: () => {
+                            const entry = filters.entries.find((entry) => entry.id === candidate.id);
+                            const resolved = resolvePasteAmbiguity(filters.search, item, ambiguous);
+                            const error = filters.batch({ [candidate.id]: entry.field.merge(entry.value, candidate.value) }, resolved.search, "paste");
+                            if (!error)
+                                setAmbiguous(resolved.remaining);
+                        }, children: candidate.label }, candidate.id))), _jsx(Button, { size: "sm", variant: "ghost", onClick: () => setAmbiguous(ambiguous.filter((other) => other !== item)), children: "Keep in search" })] }, item.token)))] }));
+}
+function FieldEditor({ entry, active, disabled, close, location, autoFocus = true, showDateLabel = true, }) {
+    const { filters, trigger, closeMenuOnApply } = useRoot();
+    const { field, value } = entry;
+    const input = useRef(null);
+    const customRoot = useRef(null);
+    const [draft, updateDraft] = useValueDraft(value, (current) => current);
+    const draftRef = useRef(value);
+    useLayoutEffect(() => {
+        draftRef.current = draft;
+    }, [draft]);
+    function setDraft(next) {
+        draftRef.current = next;
+        updateDraft(next);
+    }
+    const [text, setText] = useValueDraft(value, (value) => field.kind === "tokens"
+        ? Array.isArray(value)
+            ? value.join(", ")
+            : ""
+        : typeof value === "string"
+            ? value
+            : "");
+    const [error, setError] = useState();
+    const id = useId();
+    const options = useFilterOptions(entry.id, field, value, active);
+    useEffect(() => {
+        if (!active || !autoFocus)
+            return;
+        const frame = requestAnimationFrame(() => (input.current ??
+            customRoot.current?.querySelector('input:not([disabled]), textarea:not([disabled]), button:not([disabled]), [tabindex="0"]'))?.focus());
+        return () => cancelAnimationFrame(frame);
+    }, [active, autoFocus]);
+    function apply(next, shouldClose = true) {
+        if (disabled)
+            return;
+        const problem = filters.commit(entry.id, next);
+        setError(problem);
+        if (!problem) {
+            setDraft(field.normalize(next));
+            const dismiss = location === "menu"
+                ? (field.closeMenuOnApply ?? closeMenuOnApply)
+                : shouldClose || !field.isActive(field.normalize(next));
+            if (dismiss)
+                close();
+        }
+        if (!problem && !field.isActive(field.normalize(next)) && location === "chip")
+            requestAnimationFrame(() => trigger.current?.focus());
+    }
+    if (field.renderEditor)
+        return (_jsxs("div", { "data-mendy-ui": "", ref: customRoot, className: "mui-34055e6f8c1b mui-094f5333853b", onKeyDown: (event) => {
+                if (event.key === "Escape")
+                    return;
+                if (event.key === "Tab" ||
+                    (event.target instanceof HTMLElement &&
+                        event.target.matches("input, textarea, select, [contenteditable=true]")))
+                    event.stopPropagation();
+            }, children: [field.renderEditor({
+                    value,
+                    draft,
+                    setDraft,
+                    setValue: (next) => apply(next, false),
+                    apply: (next = draftRef.current) => apply(next),
+                    close,
+                }), error && (_jsx("p", { role: "alert", className: "mui-c74ab393b96d mui-887b9502d5c7", children: error }))] }));
+    if (field.kind === "single" || field.kind === "multi")
+        return (_jsx(ChoiceEditor, { field: field, value: value, input: input, options: options, error: error, disabled: disabled, apply: apply, location: location }));
+    if (field.kind === "dateRange")
+        return (_jsx(FilterDateEditor, { autoFocus: autoFocus, showLabel: showDateLabel, field: field, value: value, disabled: disabled, apply: apply, error: error }));
+    return (_jsx(ValueEditor, { field: field, draft: draft, setDraft: setDraft, text: text, setText: setText, input: input, error: error, id: id, disabled: disabled, apply: apply }));
+}
+function ChoiceEditor({ field, value, input, options, disabled, apply, location, error, }) {
+    const { classNames } = useMendyUI();
+    const selected = Array.isArray(value) ? value : value === null ? [] : [value];
+    const selectedSet = new Set(selected);
+    const searchLabel = field.searchLabel ?? `Search ${field.label.toLowerCase()}`;
+    return (_jsxs("div", { "data-mendy-ui": "", className: "mui-72b37c1a040d mui-81b198a2db84", onKeyDown: (event) => {
+            if (event.key === "Tab")
+                event.stopPropagation();
+        }, children: [field.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(Input, { ref: (node) => {
+                            input.current = node;
+                        }, "aria-label": searchLabel, type: "search", disabled: disabled, placeholder: searchLabel, value: options.query, className: "mui-75b27e813dcc mui-4f05a238500e", onChange: (event) => options.setQuery(event.target.value), onKeyDown: (event) => {
+                            if (event.key === "ArrowDown") {
+                                event.preventDefault();
+                                event.currentTarget
+                                    .closest("[data-radix-menu-content]")
+                                    ?.querySelector('[role^="menuitem"]:not([data-disabled])')
+                                    ?.focus();
+                            }
+                            if (event.key !== "Escape" && event.key !== "Tab")
+                                event.stopPropagation();
+                        } })] })), _jsx("div", { role: location === "inline" ? "group" : "menu", "aria-label": field.label, className: "mui-1dee6e3ec67d", children: location === "inline" ? (options.items.map((choice) => (_jsx(Button, { variant: "ghost", type: "button", "aria-label": choice.label, "aria-pressed": selectedSet.has(choice.value), disabled: disabled || choice.disabled, className: cn("mui-58d0413dd93c mui-c62ec162662e", selectedSet.has(choice.value) && "mui-292affc1f780", classNames?.option), onClick: () => {
+                        if (field.kind === "single")
+                            apply(choice.value, false);
+                        else {
+                            const next = selectedSet.has(choice.value)
+                                ? selected.filter((item) => item !== choice.value)
+                                : [...selected, choice.value];
+                            apply(next.length ? next : field.clearValue, false);
+                        }
+                    }, children: field.renderOption
+                        ? field.renderOption(choice, { selected: selectedSet.has(choice.value) })
+                        : choice.label }, choice.value)))) : field.kind === "single" ? (_jsxs(DropdownMenuRadioGroup, { value: typeof value === "string" ? value : "", onValueChange: (next) => apply(next || field.clearValue), children: [location === "chip" && field.removable !== false && (_jsxs(DropdownMenuRadioItem, { value: "", disabled: disabled, onSelect: (event) => event.preventDefault(), children: ["Any ", field.label.toLowerCase()] })), options.items.map((choice) => (_jsx(DropdownMenuRadioItem, { "aria-label": choice.label, className: classNames?.option, value: choice.value, onSelect: (event) => event.preventDefault(), disabled: disabled || choice.disabled, children: field.renderOption
+                                ? field.renderOption(choice, { selected: selectedSet.has(choice.value) })
+                                : choice.label }, choice.value)))] })) : (options.items.map((choice) => (_jsx(FilterCheckboxItem, { "aria-label": choice.label, className: classNames?.option, disabled: disabled || choice.disabled, checked: selectedSet.has(choice.value), onCheckedChange: (checked) => {
+                        const next = checked
+                            ? [...new Set([...selected, choice.value])]
+                            : selected.filter((item) => item !== choice.value);
+                        apply(next.length ? next : field.clearValue, false);
+                    }, children: field.renderOption
+                        ? field.renderOption(choice, { selected: selectedSet.has(choice.value) })
+                        : choice.label }, choice.value)))) }), _jsx(OptionFeedback, { options: options, error: error })] }));
+}
+function OptionFeedback({ options, error, }) {
+    return (_jsxs(_Fragment, { children: [error && (_jsx("p", { role: "alert", className: "mui-0f9e6672913a mui-b5edc3ea7c91 mui-c74ab393b96d mui-887b9502d5c7", children: error })), options.loading && (_jsx("p", { role: "status", className: "mui-0f9e6672913a mui-b5edc3ea7c91 mui-c74ab393b96d mui-35f35c41d134", children: "Loading options\u2026" })), !options.loading && !options.error && options.items.length === 0 && (_jsx("p", { role: "status", className: "mui-094f5333853b mui-c74ab393b96d mui-35f35c41d134", children: "No options found." })), options.error && (_jsxs("div", { "data-mendy-ui": "", className: "mui-267171770524 mui-094f5333853b", children: [_jsx("p", { role: "alert", className: "mui-c74ab393b96d mui-887b9502d5c7", children: options.error }), _jsx(Button, { size: "sm", variant: "outline", onClick: options.retry, children: "Retry" })] })), options.hasMore && (_jsx(Button, { variant: "ghost", className: "mui-58d0413dd93c", disabled: options.loading, onClick: options.loadMore, children: "Load more" }))] }));
+}
+function ValueEditor({ field, draft, setDraft, text, setText, input, error, id, disabled, apply, }) {
+    const candidate = field.kind === "tokens"
+        ? text.split(/[\r\n\t,]+/).flatMap((item) => (item.trim() ? [item.trim()] : []))
+        : field.kind === "text"
+            ? text
+            : draft;
+    let validation;
+    try {
+        validation = field.validate(field.normalize(candidate));
+    }
+    catch {
+        validation = "Enter a valid value.";
+    }
+    return (_jsxs("div", { "data-mendy-ui": "", className: "mui-37535002f0f7 mui-81b198a2db84 mui-267171770524 mui-094f5333853b", onKeyDown: (event) => {
+            if (event.key === "Tab")
+                event.stopPropagation();
+        }, children: [field.kind === "numberRange" ? (_jsxs("fieldset", { disabled: disabled, className: "mui-267171770524", children: [_jsx("legend", { className: "mui-c74ab393b96d mui-daaac3fbf55e", children: field.label }), [0, 1].map((index) => {
+                        const key = index === 0 ? "from" : "to";
+                        const rangeValue = draft?.[index];
+                        return (_jsxs(Label, { className: "mui-496aca80e4d8 mui-27e6c432192f mui-3992de70b033", children: [index === 0 ? "Minimum" : "Maximum", _jsx(Input, { ref: index === 0
+                                        ? (node) => {
+                                            input.current = node;
+                                        }
+                                        : undefined, "aria-invalid": Boolean(validation || error), "aria-describedby": validation || error ? `${id}-error` : undefined, type: "number", value: rangeValue ?? "", onKeyDown: (event) => {
+                                        if (event.key !== "Escape" && event.key !== "Tab")
+                                            event.stopPropagation();
+                                    }, onChange: (event) => {
+                                        // An unfinished minus sign or exponent is not an intentional clear.
+                                        if (event.target.validity.badInput)
+                                            return;
+                                        const next = event.target.value || null;
+                                        const range = [...(draft ?? [null, null])];
+                                        range[index] = next === null ? null : Number(next);
+                                        setDraft(range);
+                                        apply(range, false);
+                                    } })] }, key));
+                    })] })) : (_jsxs(_Fragment, { children: [_jsx(Label, { htmlFor: id, className: "mui-c74ab393b96d mui-daaac3fbf55e", children: field.searchLabel ?? field.label }), _jsx(Textarea, { id: id, ref: (node) => {
+                            input.current = node;
+                        }, disabled: disabled, placeholder: field.placeholder, value: text, "aria-invalid": Boolean(validation || error), "aria-describedby": validation || error ? `${id}-error` : undefined, onChange: (event) => setText(event.target.value), onKeyDown: (event) => {
+                            if (event.key === "Enter" && !event.shiftKey && !event.nativeEvent.isComposing) {
+                                event.preventDefault();
+                                if (!validation)
+                                    apply(candidate);
+                            }
+                            if (event.key !== "Escape" && event.key !== "Tab")
+                                event.stopPropagation();
+                        } })] })), (validation || error) && (_jsx("p", { role: "alert", id: `${id}-error`, className: "mui-c74ab393b96d mui-887b9502d5c7", children: validation ?? error })), field.kind !== "numberRange" && (_jsx("p", { className: "mui-3992de70b033 mui-35f35c41d134", children: "Enter to save. Shift+Enter for a new line." }))] }));
+}

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

@@ -0,0 +1,10 @@
+import type { RuntimeField } from "./filter-definition.js";
+export declare function FilterDateEditor({ field, value, disabled, apply, error, autoFocus, showLabel, }: {
+    autoFocus?: boolean;
+    showLabel?: boolean;
+    field: RuntimeField;
+    value: unknown;
+    disabled?: boolean;
+    apply(value: unknown, shouldClose?: boolean): void;
+    error?: string;
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,31 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useValueDraft } from "./use-value-draft.js";
+import { Calendar } from "../customization.js";
+import { Button } from "../customization.js";
+// Use local calendar dates, without converting through a UTC timestamp.
+function calendarDate(value) {
+    return value ? new Date(`${value}T12:00:00`) : undefined;
+}
+function dateString(value) {
+    if (!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);
+    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) => {
+                    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: () => {
+                                setRange(undefined);
+                                apply(field.clearValue);
+                            }, children: "Clear date" }) })] })] }));
+}