@mendylanda/ui 0.1.0

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

@@ -0,0 +1,220 @@
+import type { ReactNode } from "react";
+export interface FilterCodec<V> {
+    parse(raw: string): V | null;
+    serialize(value: V): string;
+}
+export type SummaryPolicy = {
+    mode: "count";
+    limit?: number;
+} | {
+    mode: "ellipsis";
+    maxWidth?: number;
+} | {
+    mode: "all";
+};
+export interface Choice {
+    value: string;
+    label: string;
+    disabled?: boolean;
+    data?: unknown;
+}
+export interface OptionPage<T> {
+    items: readonly T[];
+    cursor?: string | null;
+}
+export interface RemoteOptions<T, P = unknown> {
+    kind: "remote";
+    scope: string;
+    params: P;
+    search(input: {
+        query: string;
+        cursor?: string;
+        params: P;
+        signal: AbortSignal;
+    }): Promise<OptionPage<T>>;
+    resolve(input: {
+        ids: string[];
+        params: P;
+        signal: AbortSignal;
+    }): Promise<readonly T[]>;
+    getValue(item: T): string;
+    getLabel(item: T): string;
+    debounceMs?: number;
+}
+export declare function remoteOptions<T, P>(source: Omit<RemoteOptions<T, P>, "kind">): RemoteOptions<T, P>;
+export interface ExternalOptions<T> {
+    kind: "external";
+    items: readonly T[];
+    selectedItems?: readonly T[];
+    loading?: boolean;
+    error?: string | null;
+    retry?: () => void;
+    query?: string;
+    onQueryChange?: (query: string) => void;
+    hasMore?: boolean;
+    loadMore?: () => void;
+}
+export declare function externalOptions<T>(source: Omit<ExternalOptions<T>, "kind">): ExternalOptions<T>;
+export interface EditorContext<V> {
+    value: V;
+    setValue(value: V): void;
+    close(): void;
+    /** Change the local draft without applying it. */
+    draft: V;
+    setDraft(value: V): void;
+    apply(value?: V): void;
+}
+export interface FieldConfig<V> {
+    label: string;
+    icon?: ReactNode;
+    defaultValue?: V;
+    clearValue?: V;
+    isActive?: (value: V) => boolean;
+    normalize?: (value: V) => V;
+    validate?: (value: V) => string | undefined;
+    codec?: FilterCodec<V>;
+    suggestion?: {
+        value?: V;
+        label?: string;
+        loading?: boolean;
+        disabled?: boolean;
+    };
+    summary?: SummaryPolicy;
+    renderSummary?: (value: V, choices: readonly Choice[]) => ReactNode;
+    renderEditor?: (context: EditorContext<V>) => ReactNode;
+    recognize?: (token: string) => V | undefined;
+    pastePriority?: number;
+    merge?: (current: V, incoming: V) => V;
+    urlKey?: string;
+    /** Hide only the menu entry; recognition and chip editing remain available. */
+    menu?: boolean;
+    hidden?: boolean;
+    disabled?: boolean;
+    removable?: boolean;
+    closeMenuOnApply?: boolean;
+    editorLabel?: string;
+    searchLabel?: string;
+    placeholder?: string;
+}
+export interface RuntimeSource {
+    kind: "local" | "external" | "remote";
+    items: Choice[];
+    selectedItems?: Choice[];
+    loading?: boolean;
+    error?: string | null;
+    retry?: () => void;
+    query?: string;
+    onQueryChange?: (query: string) => void;
+    hasMore?: boolean;
+    loadMore?: () => void;
+    scope?: string;
+    params?: unknown;
+    debounceMs?: number;
+    search?: (query: string, cursor: string | undefined, signal: AbortSignal) => Promise<OptionPage<Choice>>;
+    resolve?: (ids: string[], signal: AbortSignal) => Promise<readonly Choice[]>;
+}
+/** Runtime operations erase the value type only after the typed factory wraps callbacks. */
+export interface RuntimeField {
+    renderOption?: (choice: Choice, context: {
+        selected: boolean;
+    }) => ReactNode;
+    kind: "single" | "multi" | "text" | "tokens" | "numberRange" | "dateRange" | "custom";
+    label: string;
+    icon?: ReactNode;
+    defaultValue: unknown;
+    clearValue: unknown;
+    isActive(value: unknown): boolean;
+    normalize(value: unknown): unknown;
+    validate(value: unknown): string | undefined;
+    codec: FilterCodec<unknown>;
+    suggestion?: {
+        value?: unknown;
+        label?: string;
+        loading?: boolean;
+        disabled?: boolean;
+    };
+    summary?: SummaryPolicy;
+    renderSummary?: (value: unknown, choices: readonly Choice[]) => ReactNode;
+    renderEditor?: (context: EditorContext<unknown>) => ReactNode;
+    recognize?: (token: string) => unknown;
+    pastePriority: number;
+    merge(current: unknown, incoming: unknown): unknown;
+    urlKey?: string;
+    source?: RuntimeSource;
+    searchable?: boolean;
+    /** Hide only the menu entry; recognition and chip editing remain available. */
+    menu?: boolean;
+    hidden?: boolean;
+    disabled?: boolean;
+    removable?: boolean;
+    closeMenuOnApply?: boolean;
+    editorLabel?: string;
+    searchLabel?: string;
+    placeholder?: string;
+}
+export interface Field<V> extends RuntimeField {
+    readonly valueType?: (value: V) => V;
+}
+export type FilterDefinitions = Record<string, RuntimeField>;
+export type FilterValues<D extends FilterDefinitions> = {
+    [K in keyof D]: D[K] extends Field<infer V> ? V : never;
+};
+export declare function defineFilters<const D extends FilterDefinitions>(definitions: D): D;
+export declare function valueIsActive(value: unknown): boolean;
+export declare function equalValues(a: unknown, b: unknown): boolean;
+export declare function jsonCodec<V>(accept: (value: unknown) => value is V): FilterCodec<V>;
+interface SelectConfig<T, V> extends FieldConfig<V> {
+    renderOption?: (item: T, context: {
+        selected: boolean;
+        choice: Choice;
+    }) => ReactNode;
+    options: readonly T[] | ExternalOptions<T> | RemoteOptions<T, unknown>;
+    getValue?: (item: T) => string;
+    getLabel?: (item: T) => string;
+    searchable?: boolean;
+    loading?: boolean;
+    error?: string | null;
+    retry?: () => void;
+}
+export type OptionSource<T> = readonly T[] | ExternalOptions<T> | RemoteOptions<T, unknown>;
+export type DateRange = {
+    from: string | null;
+    to: string | null;
+};
+export type NumberRange = [number | null, number | null];
+export declare const filter: {
+    text(config: FieldConfig<string | null>): Field<string | null>;
+    tokens(config: FieldConfig<string[] | null>): Field<string[] | null>;
+    select<const T extends {
+        value: string;
+        label: string;
+    }>(config: SelectConfig<T, T["value"] | null>): Field<T["value"] | null>;
+    multiSelect<const T extends {
+        value: string;
+        label: string;
+    }>(config: SelectConfig<T, T["value"][] | null>): Field<T["value"][] | null>;
+    options<T>(config: SelectConfig<T, string[] | null>): Field<string[] | null>;
+    numberRange(config: FieldConfig<NumberRange | null>): Field<NumberRange | null>;
+    dateRange(config: FieldConfig<DateRange | null>): Field<DateRange | null>;
+    custom<V>(config: FieldConfig<V> & {
+        codec: FilterCodec<V>;
+        defaultValue: V;
+        clearValue: V;
+    }): Field<V>;
+};
+export interface BoundField<S> extends RuntimeField {
+    read(state: S): unknown;
+    write(value: unknown, state: S): Partial<S>;
+}
+export type BoundDefinitions<S> = Record<string, BoundField<S>>;
+export declare function bindFilters<S>(): {
+    field<K extends keyof S>(key: K, definition: Field<NoInfer<Exclude<S[K], undefined>>>, options?: {
+        update(value: S[K], current: S): Partial<S>;
+    }): BoundField<S>;
+    composite<const K extends readonly (keyof S)[], V>(keys: K, config: {
+        field: Field<V>;
+        read(state: Pick<S, K[number]>): V;
+        write(value: V, current: Pick<S, K[number]>): Pick<S, K[number]>;
+    }): BoundField<S>;
+};
+export {};

package/dist/filters/filter-definition.js

@@ -0,0 +1,227 @@
+export function remoteOptions(source) {
+    return { ...source, kind: "remote" };
+}
+export function externalOptions(source) {
+    return { ...source, kind: "external" };
+}
+export function defineFilters(definitions) {
+    return definitions;
+}
+export function valueIsActive(value) {
+    return (value !== null &&
+        value !== undefined &&
+        value !== "" &&
+        (!Array.isArray(value) || value.length > 0));
+}
+export function equalValues(a, b) {
+    return JSON.stringify(a) === JSON.stringify(b);
+}
+export function jsonCodec(accept) {
+    return {
+        parse(raw) {
+            try {
+                const value = JSON.parse(raw);
+                return accept(value) ? value : null;
+            }
+            catch {
+                return null;
+            }
+        },
+        serialize: (value) => JSON.stringify(value),
+    };
+}
+function makeField(kind, config, fallback, codec) {
+    const normalize = (value) => (config.normalize ? config.normalize(value) : value);
+    return {
+        ...config,
+        kind,
+        defaultValue: config.defaultValue === undefined ? fallback : config.defaultValue,
+        clearValue: config.clearValue === undefined ? fallback : config.clearValue,
+        normalize,
+        isActive: (value) => (config.isActive ? config.isActive(value) : valueIsActive(value)),
+        validate: (value) => config.validate?.(value),
+        codec: {
+            parse: (raw) => {
+                const value = (config.codec ?? codec).parse(raw);
+                return value === null ? null : normalize(value);
+            },
+            serialize: (value) => (config.codec ?? codec).serialize(value),
+        },
+        renderSummary: config.renderSummary
+            ? (value, choices) => config.renderSummary(value, choices)
+            : undefined,
+        renderEditor: config.renderEditor
+            ? (context) => config.renderEditor(context)
+            : undefined,
+        recognize: config.recognize,
+        pastePriority: config.pastePriority ?? 0,
+        merge: (current, incoming) => config.merge
+            ? config.merge(current, incoming)
+            : Array.isArray(current) && Array.isArray(incoming)
+                ? [...new Set([...current, ...incoming])]
+                : incoming,
+    };
+}
+function optionRenderer(config) {
+    return config.renderOption
+        ? (choice, context) => config.renderOption(choice.data, { ...context, choice })
+        : undefined;
+}
+function sourceFor(config) {
+    const options = config.options;
+    const choice = (item) => ({
+        value: config.getValue ? config.getValue(item) : item.value,
+        label: config.getLabel ? config.getLabel(item) : item.label,
+        disabled: item.disabled,
+        data: item,
+    });
+    if (Array.isArray(options))
+        return {
+            kind: "local",
+            items: options.map(choice),
+            loading: config.loading,
+            error: config.error,
+            retry: config.retry,
+        };
+    const source = options;
+    if (source.kind === "external")
+        return {
+            ...source,
+            items: source.items.map(choice),
+            selectedItems: source.selectedItems?.map(choice),
+        };
+    const remoteChoice = (item) => ({
+        value: source.getValue(item),
+        label: source.getLabel(item),
+        data: item,
+    });
+    return {
+        kind: "remote",
+        items: [],
+        scope: source.scope,
+        params: source.params,
+        debounceMs: source.debounceMs,
+        search: async (query, cursor, signal) => {
+            const page = await source.search({ query, cursor, signal, params: source.params });
+            return { items: page.items.map(remoteChoice), cursor: page.cursor };
+        },
+        resolve: async (ids, signal) => (await source.resolve({ ids, signal, params: source.params })).map(remoteChoice),
+    };
+}
+const stringCodec = {
+    parse: (raw) => raw,
+    serialize: (value) => value ?? "",
+};
+const stringsCodec = jsonCodec((value) => value === null || (Array.isArray(value) && value.every((item) => typeof item === "string")));
+function validDate(value) {
+    return (value === null ||
+        (typeof value === "string" &&
+            /^\d{4}-\d{2}-\d{2}$/.test(value) &&
+            !Number.isNaN(Date.parse(value)) &&
+            new Date(value).toISOString().slice(0, 10) === value));
+}
+export const filter = {
+    text(config) {
+        return makeField("text", { normalize: (value) => value?.trim() || null, ...config }, null, stringCodec);
+    },
+    tokens(config) {
+        return makeField("tokens", {
+            normalize: (value) => value?.length
+                ? [...new Set(value.flatMap((item) => (item.trim() ? [item.trim()] : [])))]
+                : null,
+            ...config,
+        }, null, stringsCodec);
+    },
+    select(config) {
+        const allowed = Array.isArray(config.options)
+            ? new Set(config.options.map((item) => item.value))
+            : null;
+        const field = makeField("single", config, null, {
+            parse: (raw) => (!allowed || allowed.has(raw) ? raw : null),
+            serialize: stringCodec.serialize,
+        });
+        return {
+            ...field,
+            source: sourceFor(config),
+            renderOption: optionRenderer(config),
+            searchable: config.searchable,
+        };
+    },
+    multiSelect(config) {
+        const allowed = Array.isArray(config.options)
+            ? new Set(config.options.map((item) => item.value))
+            : null;
+        return {
+            ...makeField("multi", config, null, {
+                parse: (raw) => {
+                    const values = stringsCodec.parse(raw);
+                    return values && (!allowed || values.every((value) => allowed.has(value)))
+                        ? values
+                        : null;
+                },
+                serialize: stringsCodec.serialize,
+            }),
+            source: sourceFor(config),
+            renderOption: optionRenderer(config),
+            searchable: config.searchable,
+        };
+    },
+    options(config) {
+        return {
+            ...makeField("multi", config, null, stringsCodec),
+            source: sourceFor(config),
+            renderOption: optionRenderer(config),
+            searchable: config.searchable,
+        };
+    },
+    numberRange(config) {
+        return makeField("numberRange", {
+            normalize: (value) => (value?.some((bound) => bound !== null) ? value : null),
+            validate: (value) => value && value[0] !== null && value[1] !== null && value[0] > value[1]
+                ? "Minimum must not exceed maximum."
+                : undefined,
+            ...config,
+        }, null, jsonCodec((value) => value === null ||
+            (Array.isArray(value) &&
+                value.length === 2 &&
+                value.every((item) => item === null || (typeof item === "number" && Number.isFinite(item))))));
+    },
+    dateRange(config) {
+        return makeField("dateRange", {
+            normalize: (value) => (value?.from || value?.to ? value : null),
+            isActive: (value) => Boolean(value?.from || value?.to),
+            validate: (value) => value?.from && value.to && value.from > value.to
+                ? "Start date must not follow end date."
+                : undefined,
+            ...config,
+        }, null, jsonCodec((value) => value === null ||
+            (typeof value === "object" &&
+                value !== null &&
+                "from" in value &&
+                "to" in value &&
+                validDate(value.from) &&
+                validDate(value.to))));
+    },
+    custom(config) {
+        return makeField("custom", config, config.defaultValue, config.codec);
+    },
+};
+export function bindFilters() {
+    return {
+        field(key, definition, options) {
+            return {
+                ...definition,
+                read: (state) => (state[key] === undefined ? definition.defaultValue : state[key]),
+                write: (value, state) => options ? options.update(value, state) : { [key]: value },
+            };
+        },
+        composite(keys, config) {
+            const pick = (state) => Object.fromEntries(keys.map((key) => [key, state[key]]));
+            return {
+                ...config.field,
+                read: (state) => config.read(pick(state)),
+                write: (value, state) => config.write(value, pick(state)),
+            };
+        },
+    };
+}

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

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

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

@@ -0,0 +1,164 @@
+"use client";
+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 { DropdownMenuContent } from "../primitives/dropdown-menu.js";
+import { useMendyUI } from "../customization.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 isDesktop = () => window.matchMedia(desktopQuery).matches;
+const serverDesktop = () => false;
+/** One dialog contains the filter list and its editor, with a single-panel layout on phones. */
+export function FilterMenuPanel({ sections, selectedId, onSelect, anchor, trigger, }) {
+    const { classNames } = 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 content = useRef(null);
+    const editor = useRef(null);
+    const rows = useRef(new Map());
+    const pendingEditorFocus = useRef(false);
+    const [alignOffset, setAlignOffset] = useState(0);
+    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]);
+    useEffect(() => {
+        const frame = requestAnimationFrame(() => {
+            const first = [...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();
+    }
+    useLayoutEffect(() => {
+        if (!pendingEditorFocus.current)
+            return;
+        pendingEditorFocus.current = false;
+        focusEditor();
+    });
+    function choose(id, enter = false) {
+        if (enter && selected?.id === id && editor.current)
+            focusEditor();
+        else
+            pendingEditorFocus.current = enter;
+        onSelect(id);
+    }
+    function back() {
+        const previous = selected?.id;
+        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) => {
+            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.
+            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)] }))] }) }));
+}
+function FilterMenuList({ sections, selectedId, panelId, desktop, rows, choose, }) {
+    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) {
+                            event.preventDefault();
+                            event.stopPropagation();
+                            rows.current.get(next.id)?.focus();
+                        }
+                    }
+                }, 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)))] }));
+}

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

@@ -0,0 +1,25 @@
+export interface FilterOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+interface SharedProps {
+    label: string;
+    options: readonly FilterOption[];
+    searchable?: boolean;
+    searchPlaceholder?: string;
+    emptyMessage?: string;
+}
+export interface FilterSelectEditorProps extends SharedProps {
+    value: string;
+    onValueChange: (value: string) => void;
+}
+/** Single selection applies immediately and closes the dropdown. */
+export declare function FilterSelectEditor({ value, onValueChange, ...props }: FilterSelectEditorProps): import("react/jsx-runtime").JSX.Element;
+export interface FilterMultiSelectEditorProps extends SharedProps {
+    values: readonly string[];
+    onValuesChange: (values: string[]) => void;
+}
+/** Multiple selections apply immediately and keep the editor open. */
+export declare function FilterMultiSelectEditor({ values, onValuesChange, ...props }: FilterMultiSelectEditorProps): import("react/jsx-runtime").JSX.Element;
+export {};