xontable 0.1.1

package/dist/hooks/useClipboardCatcher.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useClipboardCatcher.d.ts","sourceRoot":"","sources":["../../src/hooks/useClipboardCatcher.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAG5C,KAAK,uBAAuB,GAAG;IAC7B,SAAS,EAAE,OAAO,CAAC;IACnB,YAAY,EAAE,MAAM,MAAM,EAAE,EAAE,CAAC;IAC/B,YAAY,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,EAAE,KAAK,IAAI,CAAC;IAC1C,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEF,wBAAgB,mBAAmB,CAAC,OAAO,EAAE,uBAAuB;;;gBAU5D,cAAc;iBAWd,cAAc;EAYrB"}

package/dist/hooks/useClipboardCatcher.js

@@ -0,0 +1,29 @@
+import { useCallback, useRef } from "react";
+import { parseTSV, toTSV } from "../utils";
+export function useClipboardCatcher(options) {
+    const { isEditing, getCopyBlock, onPasteBlock, onCopy: onCopyCb } = options;
+    const clipRef = useRef(null);
+    const focusClipboard = useCallback(() => {
+        clipRef.current?.focus();
+        clipRef.current?.select();
+    }, []);
+    const onCopy = useCallback((e) => {
+        if (isEditing)
+            return;
+        e.preventDefault();
+        const block = getCopyBlock();
+        e.clipboardData.setData("text/plain", toTSV(block));
+        onCopyCb?.();
+    }, [getCopyBlock, isEditing, onCopyCb]);
+    const onPaste = useCallback((e) => {
+        if (isEditing)
+            return;
+        e.preventDefault();
+        const text = e.clipboardData.getData("text/plain");
+        const block = parseTSV(text);
+        if (block.length === 0)
+            return;
+        onPasteBlock(block);
+    }, [isEditing, onPasteBlock]);
+    return { clipRef, focusClipboard, onCopy, onPaste };
+}

package/dist/hooks/useColumnFilters.d.ts

@@ -0,0 +1,17 @@
+import type { ColumnDef } from "../types";
+type FiltersResult<Row extends Record<string, any>> = {
+    filterOpenKey: string | null;
+    filterSearch: string;
+    rowFilter: (row: Row) => boolean;
+    getFilterOptions: (key: string) => string[];
+    isFilterChecked: (key: string, value: string) => boolean;
+    isAllChecked: (key: string) => boolean;
+    openFilter: (key: string) => void;
+    closeFilter: () => void;
+    setFilterSearch: (value: string) => void;
+    toggleFilterValue: (key: string, value: string) => void;
+    toggleAll: (key: string) => void;
+};
+export declare function useColumnFilters<Row extends Record<string, any>>(columns: ColumnDef<Row>[], rows: Row[]): FiltersResult<Row>;
+export {};
+//# sourceMappingURL=useColumnFilters.d.ts.map

package/dist/hooks/useColumnFilters.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useColumnFilters.d.ts","sourceRoot":"","sources":["../../src/hooks/useColumnFilters.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAE1C,KAAK,aAAa,CAAC,GAAG,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,IAAI;IACpD,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,YAAY,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,OAAO,CAAC;IACjC,gBAAgB,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,EAAE,CAAC;IAC5C,eAAe,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC;IACzD,YAAY,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,CAAC;IACvC,UAAU,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,eAAe,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,iBAAiB,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxD,SAAS,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;CAClC,CAAC;AAEF,wBAAgB,gBAAgB,CAAC,GAAG,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,OAAO,EAAE,SAAS,CAAC,GAAG,CAAC,EAAE,EAAE,IAAI,EAAE,GAAG,EAAE,GAAG,aAAa,CAAC,GAAG,CAAC,CAmF5H"}

package/dist/hooks/useColumnFilters.js

@@ -0,0 +1,95 @@
+import { useCallback, useMemo, useState } from "react";
+export function useColumnFilters(columns, rows) {
+    const [filters, setFilters] = useState({});
+    const [filterOpenKey, setFilterOpenKey] = useState(null);
+    const [filterSearch, setFilterSearch] = useState("");
+    const rowFilter = useCallback((row) => {
+        for (const key of Object.keys(filters)) {
+            const set = filters[key];
+            if (!set)
+                continue;
+            if (set.size === 0)
+                return false;
+            const v = row[key];
+            const s = v == null ? "" : String(v);
+            if (!set.has(s))
+                return false;
+        }
+        if (filterOpenKey && filterSearch.trim() !== "") {
+            const v = row[filterOpenKey];
+            const s = v == null ? "" : String(v);
+            if (!s.toLowerCase().includes(filterSearch.toLowerCase()))
+                return false;
+        }
+        return true;
+    }, [filterOpenKey, filterSearch, filters]);
+    const filterOptions = useMemo(() => {
+        const map = new Map();
+        columns.forEach((col) => {
+            const set = new Set();
+            rows.forEach((r) => set.add(String(r[col.key] ?? "")));
+            map.set(col.key, Array.from(set).sort());
+        });
+        return map;
+    }, [columns, rows]);
+    const getFilterOptions = useCallback((key) => {
+        const list = filterOptions.get(key) ?? [];
+        if (!filterSearch || filterOpenKey !== key)
+            return list;
+        const q = filterSearch.toLowerCase();
+        return list.filter((v) => v.toLowerCase().includes(q));
+    }, [filterOpenKey, filterOptions, filterSearch]);
+    const isFilterChecked = useCallback((key, value) => {
+        const set = filters[key];
+        return !set || set.has(value);
+    }, [filters]);
+    const isAllChecked = useCallback((key) => !filters[key], [filters]);
+    const toggleFilterValue = useCallback((key, value) => {
+        const all = filterOptions.get(key) ?? [];
+        setFilters((prev) => {
+            const cur = prev[key];
+            const next = cur ? new Set(cur) : new Set(all);
+            if (next.has(value))
+                next.delete(value);
+            else
+                next.add(value);
+            const out = { ...prev };
+            if (next.size === all.length)
+                delete out[key];
+            else
+                out[key] = next;
+            return out;
+        });
+    }, [filterOptions]);
+    const toggleAll = useCallback((key) => {
+        setFilters((prev) => {
+            const next = { ...prev };
+            if (next[key])
+                delete next[key];
+            else
+                next[key] = new Set();
+            return next;
+        });
+    }, []);
+    const openFilter = useCallback((key) => {
+        setFilterOpenKey((k) => (k === key ? null : key));
+        setFilterSearch("");
+    }, []);
+    const closeFilter = useCallback(() => {
+        setFilterOpenKey(null);
+        setFilterSearch("");
+    }, []);
+    return {
+        filterOpenKey,
+        filterSearch,
+        rowFilter,
+        getFilterOptions,
+        isFilterChecked,
+        isAllChecked,
+        openFilter,
+        closeFilter,
+        setFilterSearch,
+        toggleFilterValue,
+        toggleAll,
+    };
+}

package/dist/hooks/useColumnGroups.d.ts

@@ -0,0 +1,27 @@
+import type { ColumnDef } from "../types";
+type GroupHeader = {
+    key: string;
+    label: string;
+    width: number;
+    collapsible: boolean;
+    collapsed: boolean;
+};
+type VisibleCol<Row extends Record<string, any>> = {
+    col: ColumnDef<Row>;
+    idx: number | null;
+};
+type ColumnGroupsOptions<Row extends Record<string, any>> = {
+    columns: ColumnDef<Row>[];
+    collapsedWidth?: number;
+};
+export declare function useColumnGroups<Row extends Record<string, any>>(options: ColumnGroupsOptions<Row>): {
+    visibleColumns: VisibleCol<Row>[];
+    groupHeaders: GroupHeader[];
+    getColWidth: (visibleIndex: number) => number;
+    setColWidth: (visibleIndex: number, w: number) => void;
+    toggleGroup: (key: string) => void;
+    resetWidths: () => void;
+    getOrigIndex: (visibleIndex: number) => number | null;
+};
+export {};
+//# sourceMappingURL=useColumnGroups.d.ts.map

package/dist/hooks/useColumnGroups.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useColumnGroups.d.ts","sourceRoot":"","sources":["../../src/hooks/useColumnGroups.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAE1C,KAAK,WAAW,GAAG;IACjB,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,OAAO,CAAC;IACrB,SAAS,EAAE,OAAO,CAAC;CACpB,CAAC;AASF,KAAK,UAAU,CAAC,GAAG,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,IAAI;IAAE,GAAG,EAAE,SAAS,CAAC,GAAG,CAAC,CAAC;IAAC,GAAG,EAAE,MAAM,GAAG,IAAI,CAAA;CAAE,CAAC;AAE/F,KAAK,mBAAmB,CAAC,GAAG,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,IAAI;IAC1D,OAAO,EAAE,SAAS,CAAC,GAAG,CAAC,EAAE,CAAC;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC;AAEF,wBAAgB,eAAe,CAAC,GAAG,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAC7D,OAAO,EAAE,mBAAmB,CAAC,GAAG,CAAC;;;gCAwChB,MAAM;gCAUN,MAAM,KAAK,MAAM;uBA6B1B,MAAM;;iCAYG,MAAM;EAaxB"}

package/dist/hooks/useColumnGroups.js

@@ -0,0 +1,89 @@
+import { useCallback, useMemo, useState } from "react";
+export function useColumnGroups(options) {
+    const { columns, collapsedWidth = 56 } = options;
+    const [collapsed, setCollapsed] = useState({});
+    const [colWidths, setColWidths] = useState(columns.map((c) => c.width ?? 140));
+    const groups = useMemo(() => {
+        const list = [];
+        let lastKey = "";
+        columns.forEach((col, idx) => {
+            const gKey = col.group ?? `__col_${idx}`;
+            const label = col.group ?? "";
+            const collapsible = col.group != null && col.groupCollapsible !== false;
+            if (list.length === 0 || lastKey !== gKey) {
+                list.push({ key: gKey, label, cols: [{ col, idx }], collapsible });
+                lastKey = gKey;
+            }
+            else {
+                list[list.length - 1].cols.push({ col, idx });
+                if (!collapsible)
+                    list[list.length - 1].collapsible = false;
+            }
+        });
+        return list;
+    }, [columns]);
+    const visibleColumns = useMemo(() => {
+        const out = [];
+        for (const g of groups) {
+            const isCollapsed = g.collapsible && collapsed[g.key];
+            if (!g.collapsible || !isCollapsed) {
+                g.cols.forEach(({ col, idx }) => out.push({ col, idx }));
+            }
+            else {
+                out.push({ col: { key: `__group_${g.key}`, label: "", editable: false }, idx: null });
+            }
+        }
+        return out;
+    }, [groups, collapsed]);
+    const getColWidth = useCallback((visibleIndex) => {
+        const v = visibleColumns[visibleIndex];
+        if (!v)
+            return 140;
+        if (v.idx == null)
+            return collapsedWidth;
+        return colWidths[v.idx] ?? 140;
+    }, [collapsedWidth, colWidths, visibleColumns]);
+    const setColWidth = useCallback((visibleIndex, w) => {
+        const v = visibleColumns[visibleIndex];
+        if (!v || v.idx == null)
+            return;
+        setColWidths((prev) => {
+            const next = [...prev];
+            next[v.idx] = w;
+            return next;
+        });
+    }, [visibleColumns]);
+    const groupHeaders = useMemo(() => {
+        return groups.map((g) => {
+            const isCollapsed = g.collapsible && collapsed[g.key];
+            const width = isCollapsed
+                ? collapsedWidth
+                : g.cols.reduce((sum, { idx }) => sum + (colWidths[idx] ?? 140), 0);
+            return {
+                key: g.key,
+                label: g.label,
+                width,
+                collapsible: g.collapsible,
+                collapsed: Boolean(isCollapsed),
+            };
+        });
+    }, [collapsed, collapsedWidth, colWidths, groups]);
+    const toggleGroup = useCallback((key) => setCollapsed((p) => ({ ...p, [key]: !p[key] })), []);
+    const resetWidths = useCallback(() => {
+        setColWidths((prev) => {
+            if (!prev.length)
+                return columns.map((c) => c.width ?? 140);
+            return columns.map((c, i) => prev[i] ?? c.width ?? 140);
+        });
+    }, [columns]);
+    const getOrigIndex = useCallback((visibleIndex) => visibleColumns[visibleIndex]?.idx ?? null, [visibleColumns]);
+    return {
+        visibleColumns,
+        groupHeaders,
+        getColWidth,
+        setColWidth,
+        toggleGroup,
+        resetWidths,
+        getOrigIndex,
+    };
+}

package/dist/hooks/useColumnResize.d.ts

@@ -0,0 +1,12 @@
+type ResizeOptions = {
+    colCount: number;
+    getWidth: (c: number) => number;
+    setWidth: (c: number, w: number) => void;
+    minWidth?: number;
+};
+export declare function useColumnResize(options: ResizeOptions): {
+    startResize: (col: number, startX: number) => void;
+    isResizing: boolean;
+};
+export {};
+//# sourceMappingURL=useColumnResize.d.ts.map

package/dist/hooks/useColumnResize.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useColumnResize.d.ts","sourceRoot":"","sources":["../../src/hooks/useColumnResize.ts"],"names":[],"mappings":"AAIA,KAAK,aAAa,GAAG;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;IAChC,QAAQ,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,wBAAgB,eAAe,CAAC,OAAO,EAAE,aAAa;uBAK5C,MAAM,UAAU,MAAM;;EA2B/B"}

package/dist/hooks/useColumnResize.js

@@ -0,0 +1,27 @@
+import { useCallback, useEffect, useState } from "react";
+export function useColumnResize(options) {
+    const { colCount, getWidth, setWidth, minWidth = 60 } = options;
+    const [drag, setDrag] = useState(null);
+    const startResize = useCallback((col, startX) => {
+        if (col < 0 || col >= colCount)
+            return;
+        setDrag({ col, startX, startW: getWidth(col) });
+    }, [colCount, getWidth]);
+    useEffect(() => {
+        if (!drag)
+            return;
+        const onMove = (e) => {
+            const dx = e.clientX - drag.startX;
+            const next = Math.max(minWidth, drag.startW + dx);
+            setWidth(drag.col, next);
+        };
+        const onUp = () => setDrag(null);
+        window.addEventListener("mousemove", onMove);
+        window.addEventListener("mouseup", onUp);
+        return () => {
+            window.removeEventListener("mousemove", onMove);
+            window.removeEventListener("mouseup", onUp);
+        };
+    }, [drag, minWidth, setWidth]);
+    return { startResize, isResizing: Boolean(drag) };
+}

package/dist/hooks/useEditorOverlay.d.ts

@@ -0,0 +1,24 @@
+import type { KeyboardEvent, RefObject } from "react";
+import type { CellPos } from "../types";
+type EditorOptions = {
+    active: CellPos;
+    activeCellRef: RefObject<HTMLDivElement | null>;
+    getValue: (r: number, c: number) => string;
+    onCommit: (value: string) => void;
+    onCancel?: () => void;
+    onTab?: (dir: number) => void;
+    onEnter?: (dir: number) => void;
+};
+export declare function useEditorOverlay(options: EditorOptions): {
+    isEditing: boolean;
+    draft: string;
+    setDraft: import("react").Dispatch<import("react").SetStateAction<string>>;
+    editorRect: DOMRect | null;
+    editorRef: RefObject<HTMLInputElement | null>;
+    startEdit: (initialValue?: string) => void;
+    commitEdit: (value?: string) => void;
+    cancelEdit: () => void;
+    onEditorKeyDown: (e: KeyboardEvent<HTMLInputElement>) => void;
+};
+export {};
+//# sourceMappingURL=useEditorOverlay.d.ts.map

package/dist/hooks/useEditorOverlay.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useEditorOverlay.d.ts","sourceRoot":"","sources":["../../src/hooks/useEditorOverlay.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AAExC,KAAK,aAAa,GAAG;IACnB,MAAM,EAAE,OAAO,CAAC;IAChB,aAAa,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAChD,QAAQ,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;IAC3C,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,KAAK,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9B,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;CACjC,CAAC;AAEF,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,aAAa;;;;;;+BA2BnC,MAAM;yBAegB,MAAM;;yBAWxC,aAAa,CAAC,gBAAgB,CAAC;EA4BtC"}

package/dist/hooks/useEditorOverlay.js

@@ -0,0 +1,74 @@
+import { useCallback, useRef, useState } from "react";
+export function useEditorOverlay(options) {
+    const { active, activeCellRef, getValue, onCommit, onCancel, onTab, onEnter } = options;
+    const [isEditing, setIsEditing] = useState(false);
+    const [draft, setDraft] = useState("");
+    const [editorRect, setEditorRect] = useState(null);
+    const [selectAll, setSelectAll] = useState(true);
+    const editorRef = useRef(null);
+    const measureRect = useCallback(() => {
+        const el = activeCellRef.current;
+        if (!el)
+            return;
+        setEditorRect(el.getBoundingClientRect());
+        requestAnimationFrame(() => {
+            const input = editorRef.current;
+            if (!input)
+                return;
+            input.focus();
+            if (selectAll) {
+                input.select();
+            }
+            else {
+                const len = input.value.length;
+                input.setSelectionRange(len, len);
+            }
+        });
+    }, [activeCellRef, selectAll]);
+    const startEdit = useCallback((initialValue) => {
+        const current = getValue(active.r, active.c);
+        setDraft(initialValue ?? current);
+        setSelectAll(initialValue == null);
+        setIsEditing(true);
+        requestAnimationFrame(measureRect);
+    }, [active, getValue, measureRect]);
+    const finish = useCallback(() => {
+        setIsEditing(false);
+        setEditorRect(null);
+    }, []);
+    const commitEdit = useCallback((value) => {
+        onCommit(value ?? draft);
+        finish();
+    }, [draft, finish, onCommit]);
+    const cancelEdit = useCallback(() => {
+        onCancel?.();
+        finish();
+    }, [finish, onCancel]);
+    const onEditorKeyDown = useCallback((e) => {
+        if (e.key === "Enter") {
+            e.preventDefault();
+            commitEdit();
+            onEnter?.(e.shiftKey ? -1 : 1);
+        }
+        else if (e.key === "Escape") {
+            e.preventDefault();
+            cancelEdit();
+        }
+        else if (e.key === "Tab") {
+            e.preventDefault();
+            commitEdit();
+            onTab?.(e.shiftKey ? -1 : 1);
+        }
+    }, [cancelEdit, commitEdit, onEnter, onTab]);
+    return {
+        isEditing,
+        draft,
+        setDraft,
+        editorRect,
+        editorRef,
+        startEdit,
+        commitEdit,
+        cancelEdit,
+        onEditorKeyDown,
+    };
+}

package/dist/hooks/useFillHandle.d.ts

@@ -0,0 +1,16 @@
+type DragState = {
+    startR: number;
+    startC: number;
+    endR: number;
+    endC: number;
+};
+type FillHandleOptions = {
+    onApply: (startR: number, startC: number, endR: number, endC: number) => void;
+};
+export declare function useFillHandle(options: FillHandleOptions): {
+    drag: DragState | null;
+    startDrag: (r: number, c: number) => void;
+    isPreview: (r: number, c: number) => boolean;
+};
+export {};
+//# sourceMappingURL=useFillHandle.d.ts.map

package/dist/hooks/useFillHandle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFillHandle.d.ts","sourceRoot":"","sources":["../../src/hooks/useFillHandle.ts"],"names":[],"mappings":"AAEA,KAAK,SAAS,GAAG;IACf,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,KAAK,iBAAiB,GAAG;IACvB,OAAO,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CAC/E,CAAC;AAEF,wBAAgB,aAAa,CAAC,OAAO,EAAE,iBAAiB;;mBAIpB,MAAM,KAAK,MAAM;mBAkC7C,MAAM,KAAK,MAAM;EAmBxB"}

package/dist/hooks/useFillHandle.js

@@ -0,0 +1,52 @@
+import { useCallback, useEffect, useState } from "react";
+export function useFillHandle(options) {
+    const { onApply } = options;
+    const [drag, setDrag] = useState(null);
+    const startDrag = useCallback((r, c) => {
+        setDrag({ startR: r, startC: c, endR: r, endC: c });
+    }, []);
+    useEffect(() => {
+        if (!drag)
+            return;
+        const onMove = (e) => {
+            const el = document.elementFromPoint(e.clientX, e.clientY);
+            const cell = el?.closest("[data-row][data-col]");
+            if (!cell)
+                return;
+            const r = Number(cell.dataset.row);
+            const c = Number(cell.dataset.col);
+            if (Number.isNaN(r) || Number.isNaN(c))
+                return;
+            setDrag((prev) => (prev ? { ...prev, endR: r, endC: c } : prev));
+        };
+        const onUp = () => {
+            onApply(drag.startR, drag.startC, drag.endR, drag.endC);
+            setDrag(null);
+        };
+        window.addEventListener("mousemove", onMove);
+        window.addEventListener("mouseup", onUp);
+        return () => {
+            window.removeEventListener("mousemove", onMove);
+            window.removeEventListener("mouseup", onUp);
+        };
+    }, [drag, onApply]);
+    const isPreview = useCallback((r, c) => {
+        if (!drag)
+            return false;
+        const dr = Math.abs(drag.endR - drag.startR);
+        const dc = Math.abs(drag.endC - drag.startC);
+        if (dc >= dr) {
+            if (r !== drag.startR)
+                return false;
+            const from = Math.min(drag.startC, drag.endC);
+            const to = Math.max(drag.startC, drag.endC);
+            return c >= from && c <= to;
+        }
+        if (c !== drag.startC)
+            return false;
+        const from = Math.min(drag.startR, drag.endR);
+        const to = Math.max(drag.startR, drag.endR);
+        return r >= from && r <= to;
+    }, [drag]);
+    return { drag, startDrag, isPreview };
+}

package/dist/hooks/useGridKeydown.d.ts

@@ -0,0 +1,18 @@
+import type { KeyboardEvent } from "react";
+import type { CellPos } from "../types";
+type GridKeydownOptions = {
+    active: CellPos;
+    rowCount: number;
+    colCount: number;
+    isEditing: boolean;
+    moveActive: (dr: number, dc: number) => void;
+    moveTo: (r: number, c: number) => void;
+    startEdit: (initial?: string) => void;
+    clearCell: () => void;
+    undo: () => void;
+    redo: () => void;
+    onShiftMove?: (dr: number, dc: number) => void;
+};
+export declare function useGridKeydown(options: GridKeydownOptions): (e: KeyboardEvent<HTMLElement>) => void;
+export {};
+//# sourceMappingURL=useGridKeydown.d.ts.map

package/dist/hooks/useGridKeydown.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useGridKeydown.d.ts","sourceRoot":"","sources":["../../src/hooks/useGridKeydown.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AAExC,KAAK,kBAAkB,GAAG;IACxB,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,OAAO,CAAC;IACnB,UAAU,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,MAAM,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,SAAS,EAAE,CAAC,OAAO,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,WAAW,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CAChD,CAAC;AAEF,wBAAgB,cAAc,CAAC,OAAO,EAAE,kBAAkB,OAgBlD,aAAa,CAAC,WAAW,CAAC,UA0FjC"}

package/dist/hooks/useGridKeydown.js

@@ -0,0 +1,109 @@
+import { useCallback } from "react";
+export function useGridKeydown(options) {
+    const { active, rowCount, colCount, isEditing, moveActive, moveTo, startEdit, clearCell, undo, redo, onShiftMove, } = options;
+    return useCallback((e) => {
+        if (isEditing)
+            return;
+        const isCtrl = e.ctrlKey || e.metaKey;
+        const lastRow = Math.max(0, rowCount - 1);
+        const lastCol = Math.max(0, colCount - 1);
+        if (isCtrl && (e.key === "z" || e.key === "Z")) {
+            e.preventDefault();
+            if (e.shiftKey)
+                redo();
+            else
+                undo();
+            return;
+        }
+        if (isCtrl && (e.key === "y" || e.key === "Y")) {
+            e.preventDefault();
+            redo();
+            return;
+        }
+        if (["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].includes(e.key)) {
+            e.preventDefault();
+        }
+        switch (e.key) {
+            case "ArrowUp":
+                if (e.shiftKey && onShiftMove)
+                    onShiftMove(-1, 0);
+                else if (isCtrl)
+                    moveTo(0, active.c);
+                else
+                    moveActive(-1, 0);
+                break;
+            case "ArrowDown":
+                if (e.shiftKey && onShiftMove)
+                    onShiftMove(1, 0);
+                else if (isCtrl)
+                    moveTo(lastRow, active.c);
+                else
+                    moveActive(1, 0);
+                break;
+            case "ArrowLeft":
+                if (e.shiftKey && onShiftMove)
+                    onShiftMove(0, -1);
+                else if (isCtrl)
+                    moveTo(active.r, 0);
+                else
+                    moveActive(0, -1);
+                break;
+            case "ArrowRight":
+                if (e.shiftKey && onShiftMove)
+                    onShiftMove(0, 1);
+                else if (isCtrl)
+                    moveTo(active.r, lastCol);
+                else
+                    moveActive(0, 1);
+                break;
+            case "Tab":
+                e.preventDefault();
+                moveActive(0, e.shiftKey ? -1 : 1);
+                break;
+            case "Enter":
+                e.preventDefault();
+                startEdit();
+                break;
+            case "F2":
+                e.preventDefault();
+                startEdit();
+                break;
+            case "Home":
+                e.preventDefault();
+                if (isCtrl)
+                    moveTo(0, 0);
+                else
+                    moveTo(active.r, 0);
+                break;
+            case "End":
+                e.preventDefault();
+                if (isCtrl)
+                    moveTo(lastRow, lastCol);
+                else
+                    moveTo(active.r, lastCol);
+                break;
+            case "Backspace":
+            case "Delete":
+                e.preventDefault();
+                clearCell();
+                break;
+            default:
+                if (e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) {
+                    e.preventDefault();
+                    startEdit(e.key);
+                }
+                break;
+        }
+    }, [
+        active,
+        clearCell,
+        colCount,
+        isEditing,
+        moveActive,
+        moveTo,
+        redo,
+        rowCount,
+        startEdit,
+        undo,
+    ]);
+}

package/dist/hooks/useOutsideClick.d.ts

@@ -0,0 +1,7 @@
+type OutsideClickOptions = {
+    isOpen: boolean;
+    onClose: () => void;
+};
+export declare function useOutsideClick(options: OutsideClickOptions): void;
+export {};
+//# sourceMappingURL=useOutsideClick.d.ts.map

package/dist/hooks/useOutsideClick.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useOutsideClick.d.ts","sourceRoot":"","sources":["../../src/hooks/useOutsideClick.ts"],"names":[],"mappings":"AAEA,KAAK,mBAAmB,GAAG;IACzB,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEF,wBAAgB,eAAe,CAAC,OAAO,EAAE,mBAAmB,QAqB3D"}

package/dist/hooks/useOutsideClick.js

@@ -0,0 +1,26 @@
+import { useEffect } from "react";
+export function useOutsideClick(options) {
+    const { isOpen, onClose } = options;
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        const onDoc = (e) => {
+            const target = e.target;
+            if (!target)
+                return;
+            if (target.closest(".xontable-filter-menu") || target.closest(".xontable-filter-btn"))
+                return;
+            onClose();
+        };
+        const onKey = (e) => {
+            if (e.key === "Escape")
+                onClose();
+        };
+        document.addEventListener("mousedown", onDoc);
+        document.addEventListener("keydown", onKey);
+        return () => {
+            document.removeEventListener("mousedown", onDoc);
+            document.removeEventListener("keydown", onKey);
+        };
+    }, [isOpen, onClose]);
+}