@mendylanda/ui 0.4.3-dev.70.eaaf58b8af54 → 0.4.3-dev.72.7ee3a6f295d2

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

@@ -12,6 +12,8 @@ export interface FilterMenuGroup {
 export interface FilterRootProps {
     classNames?: FilterClassNames;
     filters: FilterController;
+    /** Apply main search after a typing pause. Set 0 for immediate writes or an existing draft adapter. */
+    searchDebounceMs?: number;
     summary?: SummaryPolicy;
     /** Keep the filter menu open for applying more filters by default. */
     closeMenuOnApply?: boolean;

package/dist/filters/filter-bar.js

@@ -2,6 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useMendyLocale } from "../locale-context.js";
 import { FilterCollection } from "./filter-collection.js";
+import { useBufferedFilters } from "./use-buffered-filters.js";
 import { createContext, useContext, useEffect, useLayoutEffect, useMemo, useId, useRef, useState, useSyncExternalStore, } from "react";
 import { ListFilter, Search, X, Circle, ListChecks, Type, Hash, CalendarDays, SlidersHorizontal, Layers, } from "lucide-react";
 import { Button } from "../customization.js";
@@ -39,7 +40,8 @@ function useRoot() {
 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: disabledProp = false, className, children, }) {
+function FilterRootContent({ filters: appliedFilters, searchDebounceMs = 300, summary = defaultSummary, suggestions = "always", closeMenuOnApply = false, groups = defaultGroups, disabled: disabledProp = false, className, children, }) {
+    const { filters, flushSearch } = useBufferedFilters(appliedFilters, searchDebounceMs);
     const { classNames } = useMendyUI();
     const locale = useMendyLocale();
     // Server HTML must not accept edits that React cannot handle yet. Client-only
@@ -61,6 +63,7 @@ function FilterRootContent({ filters, summary = defaultSummary, suggestions = "a
     const context = useMemo(() => ({
         direction,
         filters,
+        flushSearch,
         summary,
         suggestions,
         closeMenuOnApply,
@@ -70,14 +73,24 @@ function FilterRootContent({ filters, summary = defaultSummary, suggestions = "a
         editingField,
         ambiguous,
         setAmbiguous,
-    }), [filters, summary, suggestions, closeMenuOnApply, groups, disabled, ambiguous, direction]);
+    }), [
+        filters,
+        flushSearch,
+        summary,
+        suggestions,
+        closeMenuOnApply,
+        groups,
+        disabled,
+        ambiguous,
+        direction,
+    ]);
     return (_jsx(FilterOptionCache.Provider, { value: cache, children: _jsx(Context.Provider, { value: context, children: _jsx("div", { "data-mendy-ui": "", dir: locale.configured ? locale.direction : undefined, lang: locale.code, "aria-busy": !hydrated || undefined, className: cn("mui-222f930b8752 mui-faa8a23c68f6 mui-71556df3b421 mui-074569488cca", classNames?.root, className), children: children }) }) }));
 }
 export function FilterBar({ showClear = true, ...props }) {
     return (_jsxs(FilterRoot, { ...props, children: [_jsx(FilterSearch, { label: props.searchLabel, placeholder: props.searchPlaceholder }), _jsx(FilterList, { showClear: showClear }), _jsx(FilterFeedback, {})] }));
 }
 export function FilterSearch({ label, placeholder }) {
-    const { filters, trigger, disabled, setAmbiguous, direction } = useRoot();
+    const { filters, flushSearch, trigger, disabled, setAmbiguous, direction } = useRoot();
     const { t } = useMendyLocale();
     const { classNames } = useMendyUI();
     const anchor = useRef(null);
@@ -107,6 +120,9 @@ export function FilterSearch({ label, placeholder }) {
                                     const result = filters.paste(event.currentTarget.value, { before: "", after: "" });
                                     setAmbiguous(result.ambiguous);
                                 }
+                                else {
+                                    flushSearch();
+                                }
                             }
                         }, onKeyUp: (event) => {
                             shift.current = event.shiftKey;

package/dist/filters/filter-controller-actions.d.ts

@@ -0,0 +1,12 @@
+import type { FilterController } from "./use-filters.js";
+/** Shared operations for an applied controller and the search draft shown by FilterRoot. */
+export declare function filterControllerActions(controller: Pick<FilterController, "entries" | "search" | "batch" | "edit" | "setMenuOpen" | "setOpenField">): {
+    commit: (id: string, value: unknown, source?: Parameters<FilterController["commit"]>[2]) => string | undefined;
+    remove(id: string): void;
+    clear(): void;
+    setSearch: (text: string) => void;
+    paste(text: string, remainder?: {
+        before: string;
+        after: string;
+    }): import("./filter-state.js").PasteResult;
+};

package/dist/filters/filter-controller-actions.js

@@ -0,0 +1,44 @@
+import { classifyPaste } from "./filter-state.js";
+/** Shared operations for an applied controller and the search draft shown by FilterRoot. */
+export function filterControllerActions(controller) {
+    const { entries, search, batch, edit, setMenuOpen, setOpenField } = controller;
+    return {
+        commit: (id, value, source) => batch({ [id]: value }, undefined, source),
+        remove(id) {
+            const entry = entries.find((item) => item.id === id);
+            if (entry?.field.removable !== false) {
+                batch({ [id]: entry?.field.clearValue }, undefined, "remove");
+                edit(null);
+            }
+        },
+        clear() {
+            batch(Object.fromEntries(entries.flatMap((entry) => entry.field.removable !== false && !entry.field.hidden && !entry.field.disabled
+                ? [[entry.id, entry.field.clearValue]]
+                : [])), "", "clear");
+            edit(null);
+            setMenuOpen(false);
+            setOpenField(null);
+        },
+        setSearch: (text) => {
+            batch({}, text, "search");
+        },
+        paste(text, remainder) {
+            const result = classifyPaste(text, entries);
+            const unmatched = [...result.unmatched, ...result.ambiguous.map((item) => item.token)].join(" ");
+            const nextSearch = remainder
+                ? [remainder.before, unmatched, remainder.after].filter(Boolean).join(" ")
+                : [search, unmatched].filter(Boolean).join(" ");
+            let cursor = [remainder ? remainder.before : search, result.unmatched.join(" ")]
+                .filter(Boolean)
+                .join(" ").length;
+            for (const item of result.ambiguous) {
+                if (cursor)
+                    cursor++;
+                item.searchRange = { start: cursor, end: cursor + item.token.length };
+                cursor += item.token.length;
+            }
+            batch(result.changes, nextSearch, "paste");
+            return result;
+        },
+    };
+}

package/dist/filters/use-buffered-filters.d.ts

@@ -0,0 +1,6 @@
+import type { FilterController } from "./use-filters.js";
+/** Root-local draft; the caller's controller always exposes the applied search. */
+export declare function useBufferedFilters(filters: FilterController, delay: number): {
+    filters: FilterController<unknown>;
+    flushSearch: () => void;
+};

package/dist/filters/use-buffered-filters.js

@@ -0,0 +1,61 @@
+"use client";
+import { filterControllerActions } from "./filter-controller-actions.js";
+import { useSearchDraft } from "./use-search-draft.js";
+const trim = (search) => search.trim();
+function contextValue(field, value) {
+    return value == null ? null : field.codec.serialize(value);
+}
+function filterContext(entries, changes = {}) {
+    return JSON.stringify(entries.map(({ id, field, value }) => [
+        id,
+        contextValue(field, id in changes && !field.disabled ? field.normalize(changes[id]) : value),
+    ]));
+}
+function filterAcknowledgement(entries, changes) {
+    const expected = entries.flatMap(({ id, field }) => id in changes && !field.disabled
+        ? [[id, contextValue(field, field.normalize(changes[id]))]]
+        : []);
+    if (!expected.length)
+        return undefined;
+    return (context) => {
+        const applied = new Map(JSON.parse(context));
+        return (applied.size === entries.length &&
+            entries.every(({ id }) => applied.has(id)) &&
+            expected.every(([id, value]) => applied.get(id) === value));
+    };
+}
+/** Root-local draft; the caller's controller always exposes the applied search. */
+export function useBufferedFilters(filters, delay) {
+    const draft = useSearchDraft({
+        value: filters.search,
+        context: filterContext(filters.entries),
+        onApply: filters.setSearch,
+        normalize: trim,
+        delay,
+    });
+    const batch = (changes, search, source = "edit") => {
+        if (source === "search") {
+            draft.setValue(search ?? draft.value);
+            return;
+        }
+        // Validation belongs to the applied controller. Invalid editors keep their draft.
+        const result = filters.batch(changes, trim(search ?? draft.value), source);
+        if (result)
+            return result;
+        // Bindings can update related fields in the same patch. Match the requested
+        // fields while allowing those domain updates in the acknowledgement.
+        draft.apply(search ?? draft.value, () => { }, filterContext(filters.entries, changes), filterAcknowledgement(filters.entries, changes));
+    };
+    if (delay <= 0)
+        return { filters, flushSearch: () => { } };
+    return {
+        filters: {
+            ...filters,
+            ...filterControllerActions({ ...filters, search: draft.value, batch }),
+            search: draft.value,
+            setSearch: draft.setValue,
+            batch,
+        },
+        flushSearch: draft.flush,
+    };
+}

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

@@ -1,5 +1,12 @@
-/** Debounce URL-backed queries without replacing newer typing with an older URL acknowledgement. */
-export declare function useFilterSearch(value: string | null | undefined, onChange: (value: string | null) => void, delay?: number): {
+export interface FilterSearchOptions {
+    /** Applied filters or another scope whose external changes discard unfinished typing. */
+    context?: string;
+    /** Normalize applied queries while preserving the exact text in the input. */
+    normalize?: (search: string) => string;
+}
+/** Buffer standalone search inputs; FilterRoot and FilterBar do this automatically. */
+export declare function useFilterSearch(value: string | null | undefined, onChange: (value: string | null) => void, delay?: number, options?: FilterSearchOptions): {
     value: string;
-    setValue: (next: string) => void;
+    setValue: (text: string) => void;
+    flush: () => void;
 };

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

@@ -1,44 +1,12 @@
 "use client";
-import { useEffect, useLayoutEffect, useRef, useState } from "react";
-/** Debounce URL-backed queries without replacing newer typing with an older URL acknowledgement. */
-export function useFilterSearch(value, onChange, delay = 300) {
-    const committed = value ?? "";
-    const [state, setState] = useState({ committed, draft: committed });
-    const timer = useRef(null);
-    const pending = useRef([]);
-    const change = useRef(onChange);
-    useLayoutEffect(() => {
-        change.current = onChange;
+import { useSearchDraft } from "./use-search-draft.js";
+/** Buffer standalone search inputs; FilterRoot and FilterBar do this automatically. */
+export function useFilterSearch(value, onChange, delay = 300, options = {}) {
+    const draft = useSearchDraft({
+        ...options,
+        value: value ?? "",
+        onApply: (search) => onChange(search || null),
+        delay,
     });
-    if (state.committed !== committed) {
-        setState({
-            committed,
-            draft: pending.current.includes(committed) ? state.draft : committed,
-        });
-    }
-    useLayoutEffect(() => {
-        const acknowledgement = pending.current.includes(committed);
-        pending.current = pending.current.filter((request) => request !== committed);
-        if (!acknowledgement && timer.current)
-            clearTimeout(timer.current);
-    }, [committed]);
-    useEffect(() => () => {
-        if (timer.current)
-            clearTimeout(timer.current);
-    }, []);
-    function setValue(next) {
-        if (timer.current)
-            clearTimeout(timer.current);
-        setState((current) => ({ ...current, draft: next }));
-        function commit() {
-            if (next !== committed)
-                pending.current.push(next);
-            change.current(next || null);
-        }
-        if (!next)
-            commit();
-        else
-            timer.current = setTimeout(commit, delay);
-    }
-    return { value: state.draft, setValue };
+    return { value: draft.value, setValue: draft.setValue, flush: draft.flush };
 }

package/dist/filters/use-filters.js

@@ -1,7 +1,8 @@
 "use client";
 import { useMendyLocale } from "../locale-context.js";
 import { useLayoutEffect, useRef, useState } from "react";
-import { classifyPaste, initialValues } from "./filter-state.js";
+import { initialValues } from "./filter-state.js";
+import { filterControllerActions } from "./filter-controller-actions.js";
 export function useFilterController(options) {
     const { t, messages } = useMendyLocale();
     const [menuOpen, setMenuOpen] = useState(false);
@@ -57,43 +58,14 @@ export function useFilterController(options) {
                 setError(null);
         },
         batch,
-        commit: (id, value, source) => batch({ [id]: value }, undefined, source),
-        remove(id) {
-            const entry = options.entries.find((item) => item.id === id);
-            if (entry?.field.removable !== false) {
-                batch({ [id]: entry?.field.clearValue }, undefined, "remove");
-                edit(null);
-            }
-        },
-        clear() {
-            batch(Object.fromEntries(options.entries.flatMap((entry) => entry.field.removable !== false && !entry.field.hidden && !entry.field.disabled
-                ? [[entry.id, entry.field.clearValue]]
-                : [])), "", "clear");
-            edit(null);
-            setMenuOpen(false);
-            setOpenField(null);
-        },
-        setSearch: (search) => {
-            batch({}, search, "search");
-        },
-        paste(text, remainder) {
-            const result = classifyPaste(text, options.entries);
-            const unmatched = [...result.unmatched, ...result.ambiguous.map((item) => item.token)].join(" ");
-            const search = remainder
-                ? [remainder.before, unmatched, remainder.after].filter(Boolean).join(" ")
-                : [options.search, unmatched].filter(Boolean).join(" ");
-            let cursor = [remainder ? remainder.before : options.search, result.unmatched.join(" ")]
-                .filter(Boolean)
-                .join(" ").length;
-            for (const item of result.ambiguous) {
-                if (cursor)
-                    cursor++;
-                item.searchRange = { start: cursor, end: cursor + item.token.length };
-                cursor += item.token.length;
-            }
-            batch(result.changes, search, "paste");
-            return result;
-        },
+        ...filterControllerActions({
+            entries: options.entries,
+            search: options.search,
+            batch,
+            edit,
+            setMenuOpen,
+            setOpenField,
+        }),
         error,
         shareable: true,
     };

package/dist/filters/use-search-draft.d.ts

@@ -0,0 +1,13 @@
+/** Keep keystrokes local while an applied query or URL update is in flight. */
+export declare function useSearchDraft({ value, onApply, context, delay, normalize, }: {
+    value: string;
+    onApply: (search: string) => void;
+    context?: string;
+    delay?: number;
+    normalize?: (search: string) => string;
+}): {
+    value: string;
+    setValue: (text: string) => void;
+    apply: (text: string, action?: (search: string) => void, nextContext?: string, acknowledgeContext?: (context: string) => boolean) => void;
+    flush: () => void;
+};

package/dist/filters/use-search-draft.js

@@ -0,0 +1,71 @@
+"use client";
+import { startTransition, useEffect, useLayoutEffect, useRef, useState } from "react";
+const identity = (value) => value;
+/** Keep keystrokes local while an applied query or URL update is in flight. */
+export function useSearchDraft({ value, onApply, context = "", delay = 300, normalize = identity, }) {
+    const key = (search, scope) => JSON.stringify([normalize(search), scope]);
+    const appliedKey = key(value, context);
+    const [state, setState] = useState(() => ({
+        appliedKey,
+        draft: value,
+        pending: [],
+        reset: 0,
+    }));
+    const timer = useRef(null);
+    if (state.appliedKey !== appliedKey) {
+        const acknowledged = state.pending.findIndex((request) => request.key === appliedKey ||
+            (request.search === normalize(value) && request.acknowledgeContext?.(context)));
+        setState({
+            appliedKey,
+            draft: acknowledged < 0 ? value : state.draft,
+            pending: acknowledged < 0 ? [] : state.pending.slice(acknowledged + 1),
+            reset: state.reset + (acknowledged < 0 ? 1 : 0),
+        });
+    }
+    function cancel() {
+        if (timer.current !== null)
+            clearTimeout(timer.current);
+        timer.current = null;
+    }
+    function apply(text, action = onApply, nextContext = context, acknowledgeContext) {
+        const search = normalize(text);
+        action(search);
+        cancel();
+        const nextKey = key(search, nextContext);
+        setState((current) => ({
+            ...current,
+            draft: text,
+            pending: nextKey === current.appliedKey && current.pending.length === 0
+                ? current.pending
+                : [
+                    ...current.pending.filter((request) => request.key !== nextKey),
+                    { key: nextKey, search, acknowledgeContext },
+                ],
+        }));
+    }
+    const applyLatest = useRef(apply);
+    useLayoutEffect(() => {
+        applyLatest.current = apply;
+    });
+    useLayoutEffect(() => cancel(), [state.reset]);
+    useEffect(() => cancel, []);
+    function setValue(text) {
+        cancel();
+        setState((current) => ({ ...current, draft: text }));
+        const search = normalize(text);
+        if ((search === normalize(value) && state.pending.length === 0) ||
+            state.pending.at(-1)?.search === search)
+            return;
+        if (!text || delay <= 0)
+            apply(text);
+        else {
+            timer.current = setTimeout(() => {
+                timer.current = null;
+                startTransition(() => {
+                    applyLatest.current(text);
+                });
+            }, delay);
+        }
+    }
+    return { value: state.draft, setValue, apply, flush: () => apply(state.draft) };
+}

package/dist/table/table-view.js

@@ -54,7 +54,8 @@ export function TableView({ table, label, height = "auto", layout: layoutMode =
     const { totalWidth, pinningActive } = layout;
     const { inlineSelection, selectLoaded } = useInlineRowSelection(table, layout.columns, rowSelectionControls);
     const focused = table.getFocusedCell();
-    const { columns, columnGaps, cellStyle } = useColumnWindow(layout, container, viewportWidth, focused?.column.id, !autoRowHeight);
+    const selectionFocusColumn = table.atoms.cellSelection.get().at(-1)?.focusColumnId;
+    const { columns, columnGaps, cellStyle } = useColumnWindow(layout, container, viewportWidth, selectionFocusColumn ?? focused?.column.id, !autoRowHeight);
     const columnIndexes = useMemo(() => new Map(layout.columns.map((column, index) => [column.id, index])), [layout.columns]);
     const { announcement, copied, onKeyDown } = useTableInteraction({
         table,

package/dist/table/use-table-interaction.js

@@ -139,11 +139,37 @@ export function useTableInteraction({ table, pinningActive, container, queryKey,
         const direction = directions[event.key];
         if (direction) {
             event.preventDefault();
-            if (!table.getFocusedCell() && rows[0] && columns[0])
-                table.setFocusedCell(rows[0].id, columns[0].id);
-            else if (event.shiftKey)
+            const hadFocusedCell = Boolean(table.getFocusedCell());
+            if (!hadFocusedCell && rows[0]) {
+                const firstSelectable = columns.find((column) => column.columnDef.enableCellSelection !== false);
+                if (firstSelectable)
+                    table.setFocusedCell(rows[0].id, firstSelectable.id);
+            }
+            if (event.shiftKey && (event.metaKey || event.ctrlKey)) {
+                const selectableColumns = columns.filter((column) => column.columnDef.enableCellSelection !== false);
+                const targetRow = direction === "up" ? rows[0] : rows.at(-1);
+                const targetColumn = direction === "left" ? selectableColumns[0] : selectableColumns.at(-1);
+                if (rows.length && selectableColumns.length) {
+                    table.setCellSelection((ranges) => {
+                        const active = ranges.at(-1);
+                        if (!active)
+                            return ranges;
+                        return [
+                            ...ranges.slice(0, -1),
+                            {
+                                ...active,
+                                focusRowId: direction === "up" || direction === "down" ? targetRow.id : active.focusRowId,
+                                focusColumnId: direction === "left" || direction === "right"
+                                    ? targetColumn.id
+                                    : active.focusColumnId,
+                            },
+                        ];
+                    });
+                }
+            }
+            else if (hadFocusedCell && event.shiftKey)
                 table.extendCellSelection(direction);
-            else
+            else if (hadFocusedCell)
                 table.moveCellSelection(direction);
             const range = table.atoms.cellSelection.get().at(-1);
             if (range)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mendylanda/ui",
-  "version": "0.4.3-dev.70.eaaf58b8af54",
+  "version": "0.4.3-dev.72.7ee3a6f295d2",
   "description": "Mendy Landa's reusable React components. Tables, filters, and sheets with shared interactions and customizable UI.",
   "homepage": "https://ui.mendylanda.com",
   "license": "MIT",
@@ -126,5 +126,5 @@
     "build": "tsc -p tsconfig.build.json && node scripts/build-css.mjs",
     "typecheck": "tsc -p tsconfig.build.json --noEmit"
   },
-  "gitHead": "eaaf58b8af54105f1c6de74c527ff896a6af1e7f"
+  "gitHead": "7ee3a6f295d2aa60fcdb858e39aca730b473a50e"
 }