xontable 0.1.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 xontable
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,29 @@
+# xontable
+
+A spreadsheet-like React table component with selection, clipboard, fill handle, validation, filters, select dropdowns, and checkbox cells.
+
+## Install
+
+```bash
+npm install xontable
+```
+
+## Usage
+
+```tsx
+import { XOnTable, type ColumnDef } from "xontable";
+import "xontable/styles";
+
+const columns: ColumnDef<Row>[] = [
+  { key: "name", label: "Name", type: "text", editable: true },
+  { key: "qty", label: "Qty", type: "number", editable: true },
+];
+
+<XOnTable columns={columns} rows={rows} onChange={setRows} />;
+```
+
+## Notes
+- Built for React 19+
+- Styles are included via `xontable/styles`
+
+See the root `BOOK.md` for full developer documentation.

package/dist/XOnTable.d.ts

@@ -0,0 +1,4 @@
+import "./styles/xontable.css";
+import type { XOnTableProps } from "./types";
+export declare function XOnTable<Row extends Record<string, any>>(props: XOnTableProps<Row>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=XOnTable.d.ts.map

package/dist/XOnTable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"XOnTable.d.ts","sourceRoot":"","sources":["../src/XOnTable.tsx"],"names":[],"mappings":"AACA,OAAO,uBAAuB,CAAC;AAC/B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAK7C,wBAAgB,QAAQ,CAAC,GAAG,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,KAAK,EAAE,aAAa,CAAC,GAAG,CAAC,2CAkIlF"}

package/dist/XOnTable.js

@@ -0,0 +1,182 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import "./styles/xontable.css";
+import { SelectMenu, XOnTableGrid } from "./components";
+import { useAutoRows, useClipboardCatcher, useColumnFilters, useColumnGroups, useColumnResize, useEditorOverlay, useFillHandle, useGridKeydown, useOutsideClick, useRangeSelection, useSelectOptions, useTableModel } from "./hooks";
+const clamp = (n, min, max) => Math.max(min, Math.min(max, n));
+export function XOnTable(props) {
+    const { columns, rows, rowIdKey = "id", onChange, readOnly = false, theme = "light" } = props;
+    const activeCellRef = React.useRef(null);
+    const [editingRowId, setEditingRowId] = React.useState(null);
+    const { normalizedRows, handleChange, createRow } = useAutoRows(columns, rows, rowIdKey, onChange, editingRowId);
+    const filters = useColumnFilters(columns, normalizedRows);
+    const { visibleColumns, groupHeaders, getColWidth, setColWidth, toggleGroup, resetWidths, getOrigIndex } = useColumnGroups({ columns });
+    const { getOptions, ensureOptions, isLoading } = useSelectOptions(columns);
+    const selection = useRangeSelection();
+    const [copiedBounds, setCopiedBounds] = React.useState(null);
+    React.useEffect(() => { resetWidths(); }, [columns, resetWidths]);
+    const { data, active, setActive, getValue, updateCells, moveActive, rowCount, colCount, hasError, getError, setCellErrorView, undo, redo } = useTableModel({
+        columns: visibleColumns.map((v) => v.col),
+        rows: normalizedRows,
+        rowFilter: filters.rowFilter,
+        onChange: handleChange,
+        createRow,
+    });
+    React.useEffect(() => { if (active.c >= colCount)
+        setActive({ r: active.r, c: Math.max(0, colCount - 1) }); }, [active, colCount, setActive]);
+    const activeCol = visibleColumns[active.c]?.col;
+    const activeRow = data[active.r];
+    const validateSelect = React.useCallback((r, c, value, row) => {
+        const col = visibleColumns[c]?.col;
+        if (!col || col.type !== "select" || !row)
+            return null;
+        const opts = getOptions(row, col);
+        const match = opts.find((o) => o.value === value || o.label === value) ?? null;
+        if (!match && value.trim() !== "") {
+            setCellErrorView(r, c, "Invalid option");
+            return null;
+        }
+        setCellErrorView(r, c, null);
+        return match;
+    }, [getOptions, setCellErrorView, visibleColumns]);
+    const normalizeSelectValue = React.useCallback((r, c, value, row) => { const match = validateSelect(r, c, value, row); return match ? match.value : value; }, [validateSelect]);
+    const ensureSelect = React.useCallback((r, c, row) => { const col = visibleColumns[c]?.col; if (!col || col.type !== "select" || !row)
+        return; ensureOptions(row, col); }, [ensureOptions, visibleColumns]);
+    const { startResize } = useColumnResize({ colCount, getWidth: getColWidth, setWidth: setColWidth, minWidth: 60 });
+    const measureRef = React.useRef(null);
+    React.useEffect(() => () => { if (measureRef.current)
+        measureRef.current.remove(); }, []);
+    const measureText = React.useCallback((text) => { let el = measureRef.current; if (!el) {
+        el = document.createElement("div");
+        el.className = "xontable-cell xontable-measure";
+        document.body.appendChild(el);
+        measureRef.current = el;
+    } el.textContent = text || ""; return Math.ceil(el.getBoundingClientRect().width); }, []);
+    const autoFitCol = React.useCallback((visibleIndex) => { const orig = getOrigIndex(visibleIndex); if (orig == null)
+        return; let max = measureText(columns[orig]?.label ?? ""); for (let r = 0; r < data.length; r++) {
+        const w = measureText(getValue(r, visibleIndex));
+        if (w > max)
+            max = w;
+    } setColWidth(visibleIndex, Math.min(600, Math.max(60, max + 15))); }, [columns, data.length, getOrigIndex, getValue, measureText, setColWidth]);
+    const { isEditing, draft, setDraft, editorRect, editorRef, startEdit, commitEdit, onEditorKeyDown } = useEditorOverlay({
+        active, activeCellRef, getValue,
+        onCommit: (value) => {
+            const row = data[active.r];
+            const col = visibleColumns[active.c]?.col;
+            const v = col?.type === "select" ? normalizeSelectValue(active.r, active.c, value, row) : value;
+            updateCells([{ r: active.r, c: active.c, value: v }], { type: "edit", cell: active });
+        },
+        onEnter: (dir) => moveActive(dir, 0), onTab: (dir) => moveActive(0, dir),
+    });
+    React.useEffect(() => { if (!isEditing)
+        setEditingRowId(null); }, [isEditing]);
+    const startEditCell = React.useCallback((initial) => { if (readOnly)
+        return; const id = activeRow ? String(activeRow[rowIdKey] ?? "") : ""; setEditingRowId(id || null); ensureSelect(active.r, active.c, activeRow); startEdit(initial); }, [active.c, active.r, activeRow, ensureSelect, readOnly, rowIdKey, startEdit]);
+    const toggleCheckbox = React.useCallback((r, c) => {
+        if (readOnly)
+            return;
+        const col = visibleColumns[c]?.col;
+        const row = data[r];
+        if (!col || col.type !== "checkbox" || !row)
+            return;
+        const checked = row[col.key] === true || row[col.key] === "true";
+        updateCells([{ r, c, value: !checked }], { type: "edit", cell: { r, c } });
+    }, [data, readOnly, updateCells, visibleColumns]);
+    const clearRange = React.useCallback(() => { const b = selection.getBounds(); if (!b) {
+        updateCells([{ r: active.r, c: active.c, value: "" }], { type: "edit", cell: active });
+        return;
+    } const updates = []; for (let r = b.r1; r <= b.r2; r++)
+        for (let c = b.c1; c <= b.c2; c++)
+            updates.push({ r, c, value: "" }); updateCells(updates, { type: "edit", cell: active }); }, [active, selection, updateCells]);
+    const { clipRef, focusClipboard, onCopy, onPaste } = useClipboardCatcher({
+        isEditing,
+        getCopyBlock: () => { const b = selection.getBounds(); if (!b)
+            return [[getValue(active.r, active.c)]]; const block = []; for (let r = b.r1; r <= b.r2; r++) {
+            const row = [];
+            for (let c = b.c1; c <= b.c2; c++)
+                row.push(getValue(r, c));
+            block.push(row);
+        } return block; },
+        onCopy: () => setCopiedBounds(selection.getBounds() ?? { r1: active.r, r2: active.r, c1: active.c, c2: active.c }),
+        onPasteBlock: (block) => { if (readOnly)
+            return; const updates = []; for (let rOff = 0; rOff < block.length; rOff++)
+            for (let cOff = 0; cOff < block[rOff].length; cOff++) {
+                const r = active.r + rOff;
+                const c = active.c + cOff;
+                if (c < colCount)
+                    updates.push({ r, c, value: block[rOff][cOff] });
+            } updateCells(updates, { type: "paste", cell: active }); updates.forEach((u) => validateSelect(u.r, u.c, u.value, data[u.r])); },
+    });
+    React.useEffect(() => { if (!isEditing)
+        focusClipboard(); }, [focusClipboard, isEditing]);
+    const openSelectAt = React.useCallback((r, c) => {
+        if (readOnly)
+            return;
+        setActive({ r, c });
+        selection.startSelection({ r, c });
+        focusClipboard();
+        const row = data[r];
+        const id = row ? String(row[rowIdKey] ?? "") : "";
+        setEditingRowId(id || null);
+        ensureSelect(r, c, row);
+        requestAnimationFrame(() => startEdit());
+    }, [data, ensureSelect, focusClipboard, readOnly, rowIdKey, selection, setActive, startEdit]);
+    const { startDrag, isPreview } = useFillHandle({
+        onApply: (startR, startC, endR, endC) => {
+            if (readOnly)
+                return;
+            const value = getValue(startR, startC);
+            const updates = [];
+            const dr = Math.abs(endR - startR);
+            const dc = Math.abs(endC - startC);
+            if (dc >= dr) {
+                const from = Math.min(startC, endC);
+                const to = Math.max(startC, endC);
+                for (let c = from; c <= to; c++)
+                    updates.push({ r: startR, c, value });
+            }
+            else {
+                const from = Math.min(startR, endR);
+                const to = Math.max(startR, endR);
+                for (let r = from; r <= to; r++)
+                    updates.push({ r, c: startC, value });
+            }
+            updateCells(updates, { type: "fill", cell: { r: startR, c: startC } });
+            updates.forEach((u) => validateSelect(u.r, u.c, u.value, data[u.r]));
+            focusClipboard();
+        },
+    });
+    const onShiftMove = React.useCallback((dr, dc) => { const next = { r: clamp(active.r + dr, 0, rowCount - 1), c: clamp(active.c + dc, 0, colCount - 1) }; if (!selection.selection)
+        selection.startSelection(active); selection.updateSelection(next); setActive(next); }, [active, colCount, rowCount, selection, setActive]);
+    const onGridKeyDown = useGridKeydown({
+        active, rowCount, colCount, isEditing, moveActive, moveTo: (r, c) => setActive({ r, c }),
+        startEdit: readOnly ? () => { } : startEditCell,
+        clearCell: () => { if (!readOnly)
+            clearRange(); },
+        undo: () => { if (!readOnly)
+            undo(); }, redo: () => { if (!readOnly)
+            redo(); },
+        onShiftMove,
+    });
+    const onGridKeyDownWithCopy = React.useCallback((e) => {
+        const target = e.target;
+        const isClip = Boolean(target && target.classList.contains("xontable-clip"));
+        if (target && (target.tagName === "INPUT" || target.tagName === "TEXTAREA") && !isClip)
+            return;
+        const isCopy = (e.ctrlKey || e.metaKey) && (e.key === "c" || e.key === "C");
+        if (isCopy)
+            setCopiedBounds(selection.getBounds() ?? { r1: active.r, r2: active.r, c1: active.c, c2: active.c });
+        else
+            setCopiedBounds(null);
+        onGridKeyDown(e);
+    }, [active.c, active.r, onGridKeyDown, selection]);
+    useOutsideClick({ isOpen: filters.filterOpenKey != null, onClose: filters.closeFilter });
+    return (_jsxs("div", { className: `xontable-wrap theme-${theme}${readOnly ? " is-readonly" : ""}`, children: [_jsx("textarea", { ref: clipRef, className: "xontable-clip", name: "xontable-clip", "aria-hidden": "true", tabIndex: -1, onCopy: onCopy, onPaste: onPaste, onKeyDown: onGridKeyDownWithCopy, readOnly: true }), _jsx("div", { className: "xontable-surface", tabIndex: 0, onFocus: (e) => {
+                    const target = e.target;
+                    if (target && (target.tagName === "INPUT" || target.tagName === "TEXTAREA"))
+                        return;
+                    focusClipboard();
+                }, onKeyDown: onGridKeyDownWithCopy, children: _jsx(XOnTableGrid, { columns: visibleColumns, groups: groupHeaders.some((g) => g.label) ? groupHeaders : undefined, rowNumberWidth: 44, data: data, rowIdKey: rowIdKey, active: active, activeCol: active.c, isEditing: isEditing, readOnly: readOnly, selectionBounds: selection.getBounds(), copiedBounds: copiedBounds, getColWidth: getColWidth, getValue: getValue, hasError: hasError, getError: getError, isPreview: isPreview, activeCellRef: activeCellRef, onCellMouseDown: (r, c, ev) => { ev.preventDefault(); setActive({ r, c }); selection.startSelection({ r, c }); setCopiedBounds(null); focusClipboard(); if (filters.filterOpenKey)
+                        filters.closeFilter(); }, onCellMouseEnter: (r, c) => { if (selection.isSelecting)
+                        selection.updateSelection({ r, c }); }, onCellDoubleClick: (r, c) => { setActive({ r, c }); startEditCell(); }, onCheckboxToggle: toggleCheckbox, onSelectOpen: openSelectAt, onFillStart: (r, c, ev) => { ev.preventDefault(); ev.stopPropagation(); startDrag(r, c); }, onResizeStart: (c, ev) => { ev.preventDefault(); ev.stopPropagation(); startResize(c, ev.clientX); }, onResizeDoubleClick: (c, ev) => { ev.preventDefault(); ev.stopPropagation(); autoFitCol(c); }, onGroupToggle: toggleGroup, filterOpenKey: filters.filterOpenKey, filterSearch: filters.filterSearch, getFilterOptions: filters.getFilterOptions, isFilterChecked: filters.isFilterChecked, isFilterAllChecked: filters.isAllChecked, onFilterOpen: filters.openFilter, onFilterSearch: filters.setFilterSearch, onFilterToggle: filters.toggleFilterValue, onFilterToggleAll: filters.toggleAll }) }), isEditing && editorRect && (_jsx("input", { ref: editorRef, className: "xontable-editor", name: "xontable-editor", value: draft, onChange: (e) => setDraft(e.target.value), onKeyDown: onEditorKeyDown, onBlur: () => { commitEdit(); validateSelect(active.r, active.c, draft, activeRow); }, style: { position: "fixed", left: editorRect.left, top: editorRect.top, width: editorRect.width, height: editorRect.height } })), _jsx(SelectMenu, { isOpen: Boolean(isEditing && activeCol?.type === "select"), rect: editorRect, options: activeRow && activeCol ? getOptions(activeRow, activeCol) : [], loading: Boolean(activeRow && activeCol && isLoading(activeRow, activeCol)), filter: draft, onSelect: (v) => { setDraft(v); commitEdit(v); validateSelect(active.r, active.c, v, activeRow); } })] }));
+}

package/dist/components/ColumnFilterMenu.d.ts

@@ -0,0 +1,13 @@
+type ColumnFilterMenuProps = {
+    isOpen: boolean;
+    search: string;
+    options: string[];
+    allChecked: boolean;
+    isChecked: (value: string) => boolean;
+    onSearchChange: (value: string) => void;
+    onToggle: (value: string) => void;
+    onToggleAll: () => void;
+};
+export declare function ColumnFilterMenu(props: ColumnFilterMenuProps): import("react/jsx-runtime").JSX.Element | null;
+export {};
+//# sourceMappingURL=ColumnFilterMenu.d.ts.map

package/dist/components/ColumnFilterMenu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColumnFilterMenu.d.ts","sourceRoot":"","sources":["../../src/components/ColumnFilterMenu.tsx"],"names":[],"mappings":"AAEA,KAAK,qBAAqB,GAAG;IAC3B,MAAM,EAAE,OAAO,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,UAAU,EAAE,OAAO,CAAC;IACpB,SAAS,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC;IACtC,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,WAAW,EAAE,MAAM,IAAI,CAAC;CACzB,CAAC;AAEF,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,kDAiD5D"}

package/dist/components/ColumnFilterMenu.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function ColumnFilterMenu(props) {
+    const { isOpen, search, options, allChecked, isChecked, onSearchChange, onToggle, onToggleAll, } = props;
+    if (!isOpen)
+        return null;
+    return (_jsxs("div", { className: "xontable-filter-menu", children: [_jsx("input", { className: "xontable-filter-search", name: "xontable-filter-search", value: search, onChange: (e) => onSearchChange(e.target.value), onKeyDown: (e) => e.stopPropagation(), onMouseDown: (e) => e.stopPropagation(), placeholder: "Search" }), _jsx("div", { className: "xontable-filter-actions", children: _jsxs("label", { className: "xontable-filter-toggle", children: [_jsx("input", { type: "checkbox", checked: allChecked, onChange: onToggleAll }), _jsx("span", { children: "All" })] }) }), _jsx("div", { className: "xontable-filter-list", children: options.map((opt) => (_jsxs("label", { className: "xontable-filter-item", children: [_jsx("input", { type: "checkbox", checked: isChecked(opt), onChange: () => onToggle(opt) }), _jsx("span", { title: opt, children: opt || "(blank)" })] }, opt))) })] }));
+}

package/dist/components/SelectMenu.d.ts

@@ -0,0 +1,15 @@
+type Option = {
+    value: string;
+    label: string;
+};
+type SelectMenuProps = {
+    isOpen: boolean;
+    rect: DOMRect | null;
+    options: Option[];
+    loading: boolean;
+    filter: string;
+    onSelect: (value: string) => void;
+};
+export declare function SelectMenu(props: SelectMenuProps): import("react/jsx-runtime").JSX.Element | null;
+export {};
+//# sourceMappingURL=SelectMenu.d.ts.map

package/dist/components/SelectMenu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectMenu.d.ts","sourceRoot":"","sources":["../../src/components/SelectMenu.tsx"],"names":[],"mappings":"AAEA,KAAK,MAAM,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC;AAE/C,KAAK,eAAe,GAAG;IACrB,MAAM,EAAE,OAAO,CAAC;IAChB,IAAI,EAAE,OAAO,GAAG,IAAI,CAAC;IACrB,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,OAAO,EAAE,OAAO,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC,CAAC;AAEF,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,kDA+DhD"}

package/dist/components/SelectMenu.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+export function SelectMenu(props) {
+    const { isOpen, rect, options, loading, filter, onSelect } = props;
+    if (!isOpen || !rect)
+        return null;
+    const q = filter.toLowerCase();
+    const list = q ? options.filter((o) => o.label.toLowerCase().includes(q)) : options;
+    const current = filter.trim();
+    const vw = window.innerWidth;
+    const vh = window.innerHeight;
+    const width = Math.min(rect.width, vw - 16);
+    const left = Math.min(Math.max(8, rect.left), vw - width - 8);
+    const maxH = Math.min(220, vh - rect.bottom - 12);
+    const placeAbove = maxH < 120;
+    const top = placeAbove ? Math.max(8, rect.top - 6) : rect.bottom + 2;
+    const renderLabel = (label) => {
+        if (!q)
+            return label;
+        const idx = label.toLowerCase().indexOf(q);
+        if (idx < 0)
+            return label;
+        const before = label.slice(0, idx);
+        const match = label.slice(idx, idx + q.length);
+        const after = label.slice(idx + q.length);
+        return (_jsxs(_Fragment, { children: [before, _jsx("strong", { children: match }), after] }));
+    };
+    return (_jsxs("div", { className: "xontable-select-menu", style: {
+            position: "fixed",
+            left,
+            top,
+            width,
+            maxHeight: placeAbove ? Math.min(220, rect.top - 12) : maxH,
+            transform: placeAbove ? "translateY(-100%)" : "none",
+        }, children: [loading && _jsx("div", { className: "xontable-select-item", children: "Loading..." }), !loading && list.length === 0 && (_jsx("div", { className: "xontable-select-item", children: "No results" })), !loading && list.map((opt) => (_jsx("button", { type: "button", className: [
+                    "xontable-select-item",
+                    current && (opt.value === current || opt.label === current) ? "is-active" : "",
+                ].join(" "), onMouseDown: (e) => e.preventDefault(), onClick: () => onSelect(opt.value), title: opt.label, children: renderLabel(opt.label) }, opt.value)))] }));
+}

package/dist/components/XOnTableGrid.d.ts

@@ -0,0 +1,62 @@
+import React from "react";
+import type { CellPos, ColumnDef } from "../types";
+type GroupHeader = {
+    key: string;
+    label: string;
+    width: number;
+    collapsible: boolean;
+    collapsed: boolean;
+};
+type GridProps<Row extends Record<string, any>> = {
+    columns: Array<{
+        col: ColumnDef<Row>;
+        idx: number | null;
+    }>;
+    groups?: GroupHeader[];
+    rowNumberWidth: number;
+    data: Row[];
+    rowIdKey: keyof Row;
+    active: CellPos;
+    activeCol: number;
+    isEditing: boolean;
+    readOnly: boolean;
+    selectionBounds: {
+        r1: number;
+        r2: number;
+        c1: number;
+        c2: number;
+    } | null;
+    copiedBounds: {
+        r1: number;
+        r2: number;
+        c1: number;
+        c2: number;
+    } | null;
+    getColWidth: (c: number) => number;
+    getValue: (r: number, c: number) => string;
+    hasError: (r: number, c: number) => boolean;
+    getError: (r: number, c: number) => string | null;
+    isPreview: (r: number, c: number) => boolean;
+    activeCellRef: React.RefObject<HTMLDivElement | null>;
+    onCellMouseDown: (r: number, c: number, ev: React.MouseEvent) => void;
+    onCellMouseEnter: (r: number, c: number, ev: React.MouseEvent) => void;
+    onCellDoubleClick: (r: number, c: number) => void;
+    onCheckboxToggle: (r: number, c: number) => void;
+    onSelectOpen: (r: number, c: number) => void;
+    onFillStart: (r: number, c: number, ev: React.MouseEvent) => void;
+    onResizeStart: (c: number, ev: React.MouseEvent) => void;
+    onResizeDoubleClick: (c: number, ev: React.MouseEvent) => void;
+    onGroupToggle: (key: string) => void;
+    filterOpenKey: string | null;
+    filterSearch: string;
+    getFilterOptions: (key: string) => string[];
+    isFilterChecked: (key: string, value: string) => boolean;
+    isFilterAllChecked: (key: string) => boolean;
+    onFilterOpen: (key: string) => void;
+    onFilterSearch: (value: string) => void;
+    onFilterToggle: (key: string, value: string) => void;
+    onFilterToggleAll: (key: string) => void;
+};
+export declare function XOnTableGrid<Row extends Record<string, any>>(props: GridProps<Row>): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=XOnTableGrid.d.ts.map

package/dist/components/XOnTableGrid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"XOnTableGrid.d.ts","sourceRoot":"","sources":["../../src/components/XOnTableGrid.tsx"],"names":[],"mappings":"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"}

package/dist/components/XOnTableGrid.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { XOnTableHeader } from "./XOnTableHeader";
+export function XOnTableGrid(props) {
+    const { columns, data, rowIdKey, active, isEditing, readOnly, selectionBounds, copiedBounds, getColWidth, getValue, hasError, getError, isPreview, activeCellRef, onCellMouseDown, onCellMouseEnter, onCellDoubleClick, onCheckboxToggle, onSelectOpen, onFillStart } = props;
+    return (_jsxs("div", { className: "xontable", children: [_jsx(XOnTableHeader, { ...props }), data.map((row, r) => (_jsxs("div", { className: ["xontable-row", r % 2 === 1 ? "is-zebra" : ""].join(" "), "data-row": r, children: [_jsx("div", { className: ["xontable-cell", "xontable-rownum-cell", r === active.r ? "is-active-rownum" : ""].join(" "), style: { width: props.rowNumberWidth }, children: r + 1 }), columns.map(({ col, idx }, c) => {
+                        const isActive = active.r === r && active.c === c;
+                        const invalid = hasError(r, c);
+                        const preview = isPreview(r, c);
+                        const inSel = !!selectionBounds && r >= selectionBounds.r1 && r <= selectionBounds.r2 && c >= selectionBounds.c1 && c <= selectionBounds.c2;
+                        const inCopy = !!copiedBounds && r >= copiedBounds.r1 && r <= copiedBounds.r2 && c >= copiedBounds.c1 && c <= copiedBounds.c2;
+                        const selTop = inSel && selectionBounds && r === selectionBounds.r1;
+                        const selBottom = inSel && selectionBounds && r === selectionBounds.r2;
+                        const selLeft = inSel && selectionBounds && c === selectionBounds.c1;
+                        const selRight = inSel && selectionBounds && c === selectionBounds.c2;
+                        const copyTop = inCopy && copiedBounds && r === copiedBounds.r1;
+                        const copyBottom = inCopy && copiedBounds && r === copiedBounds.r2;
+                        const copyLeft = inCopy && copiedBounds && c === copiedBounds.c1;
+                        const copyRight = inCopy && copiedBounds && c === copiedBounds.c2;
+                        const isCheckbox = col.type === "checkbox";
+                        const isSelect = col.type === "select";
+                        const checked = row[col.key] === true || row[col.key] === "true";
+                        const isPlaceholder = idx == null;
+                        return (_jsxs("div", { ref: isActive ? activeCellRef : null, "data-row": r, "data-col": c, className: [
+                                "xontable-cell",
+                                isActive ? "is-active" : "",
+                                inSel ? "is-range" : "",
+                                selTop ? "is-range-top" : "",
+                                selRight ? "is-range-right" : "",
+                                selBottom ? "is-range-bottom" : "",
+                                selLeft ? "is-range-left" : "",
+                                inCopy ? "is-copied-range" : "",
+                                copyTop ? "is-copied-top" : "",
+                                copyRight ? "is-copied-right" : "",
+                                copyBottom ? "is-copied-bottom" : "",
+                                copyLeft ? "is-copied-left" : "",
+                                isCheckbox ? "is-checkbox" : "",
+                                isSelect ? "is-select" : "",
+                                invalid ? "is-invalid" : "",
+                                preview ? "is-fill-preview" : "",
+                            ].join(" "), style: { width: getColWidth(c) }, title: invalid ? (getError(r, c) ?? "") : "", onMouseDown: (ev) => onCellMouseDown(r, c, ev), onMouseEnter: (ev) => onCellMouseEnter(r, c, ev), onDoubleClick: () => onCellDoubleClick(r, c), children: [isCheckbox ? (_jsx("input", { type: "checkbox", className: "xontable-checkbox", name: "xontable-checkbox", checked: checked, onChange: () => onCheckboxToggle(r, c), onClick: (ev) => ev.stopPropagation(), onMouseDown: (ev) => ev.stopPropagation() })) : (isPlaceholder ? "" : getValue(r, c)), isSelect && !readOnly && !isEditing && (_jsx("button", { type: "button", className: "xontable-select-trigger", title: "Open", onClick: (ev) => { ev.preventDefault(); ev.stopPropagation(); onSelectOpen(r, c); } })), isActive && !isEditing && !readOnly && (_jsx("div", { className: "xontable-fill-handle", onMouseDown: (ev) => onFillStart(r, c, ev), title: "Drag to fill" }))] }, col.key + String(idx ?? c)));
+                    })] }, String(row[rowIdKey] ?? r))))] }));
+}

package/dist/components/XOnTableHeader.d.ts

@@ -0,0 +1,34 @@
+import React from "react";
+import type { ColumnDef } from "../types";
+type GroupHeader = {
+    key: string;
+    label: string;
+    width: number;
+    collapsible: boolean;
+    collapsed: boolean;
+};
+type HeaderProps<Row extends Record<string, any>> = {
+    columns: Array<{
+        col: ColumnDef<Row>;
+        idx: number | null;
+    }>;
+    groups?: GroupHeader[];
+    rowNumberWidth: number;
+    activeCol: number;
+    getColWidth: (c: number) => number;
+    onResizeStart: (c: number, ev: React.MouseEvent) => void;
+    onResizeDoubleClick: (c: number, ev: React.MouseEvent) => void;
+    onGroupToggle: (key: string) => void;
+    filterOpenKey: string | null;
+    filterSearch: string;
+    getFilterOptions: (key: string) => string[];
+    isFilterChecked: (key: string, value: string) => boolean;
+    isFilterAllChecked: (key: string) => boolean;
+    onFilterOpen: (key: string) => void;
+    onFilterSearch: (value: string) => void;
+    onFilterToggle: (key: string, value: string) => void;
+    onFilterToggleAll: (key: string) => void;
+};
+export declare function XOnTableHeader<Row extends Record<string, any>>(props: HeaderProps<Row>): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=XOnTableHeader.d.ts.map

package/dist/components/XOnTableHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"XOnTableHeader.d.ts","sourceRoot":"","sources":["../../src/components/XOnTableHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAG1C,KAAK,WAAW,GAAG;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,WAAW,EAAE,OAAO,CAAC;IAAC,SAAS,EAAE,OAAO,CAAA;CAAE,CAAC;AAE3G,KAAK,WAAW,CAAC,GAAG,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,IAAI;IAClD,OAAO,EAAE,KAAK,CAAC;QAAE,GAAG,EAAE,SAAS,CAAC,GAAG,CAAC,CAAC;QAAC,GAAG,EAAE,MAAM,GAAG,IAAI,CAAA;KAAE,CAAC,CAAC;IAC5D,MAAM,CAAC,EAAE,WAAW,EAAE,CAAC;IACvB,cAAc,EAAE,MAAM,CAAC;IACvB,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;IACnC,aAAa,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACzD,mBAAmB,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAC/D,aAAa,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,YAAY,EAAE,MAAM,CAAC;IACrB,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,kBAAkB,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,CAAC;IAC7C,YAAY,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,cAAc,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACrD,iBAAiB,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;CAC1C,CAAC;AAEF,wBAAgB,cAAc,CAAC,GAAG,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,KAAK,EAAE,WAAW,CAAC,GAAG,CAAC,2CAiDtF"}

package/dist/components/XOnTableHeader.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Filter, Minus, Plus } from "lucide-react";
+import { ColumnFilterMenu } from "./ColumnFilterMenu";
+export function XOnTableHeader(props) {
+    const { columns, groups, rowNumberWidth, activeCol, getColWidth, onResizeStart, onResizeDoubleClick, onGroupToggle, filterOpenKey, filterSearch, getFilterOptions, isFilterChecked, isFilterAllChecked, onFilterOpen, onFilterSearch, onFilterToggle, onFilterToggleAll } = props;
+    return (_jsxs(_Fragment, { children: [groups && groups.length > 0 && (_jsxs("div", { className: "xontable-row xontable-group-row", children: [_jsx("div", { className: "xontable-cell xontable-rownum-cell xontable-group-cell", style: { width: rowNumberWidth } }), groups.map((g) => (_jsxs("div", { className: "xontable-cell xontable-group-cell", style: { width: g.width }, children: [_jsx("span", { className: "xontable-group-label", children: g.label }), g.collapsible && (_jsx("button", { type: "button", className: "xontable-group-toggle", onClick: () => onGroupToggle(g.key), title: g.collapsed ? "Expand" : "Collapse", children: g.collapsed ? _jsx(Plus, { size: 12 }) : _jsx(Minus, { size: 12 }) }))] }, g.key)))] })), _jsxs("div", { className: "xontable-row xontable-head", children: [_jsx("div", { className: "xontable-cell xontable-rownum-cell xontable-head-cell", style: { width: rowNumberWidth } }), columns.map(({ col, idx }, c) => (_jsxs("div", { className: ["xontable-cell", "xontable-head-cell", c === activeCol ? "is-active-col-head" : ""].join(" "), style: { width: getColWidth(c) }, children: [_jsx("span", { className: "xontable-head-label", children: col.label }), idx != null && (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: "xontable-filter-btn", onClick: () => onFilterOpen(col.key), title: "Filter", children: _jsx(Filter, { size: 14 }) }), _jsx("div", { className: "xontable-col-resizer", onMouseDown: (ev) => onResizeStart(c, ev), onDoubleClick: (ev) => onResizeDoubleClick(c, ev), title: "Drag to resize" }), _jsx(ColumnFilterMenu, { isOpen: filterOpenKey === col.key, search: filterSearch, options: getFilterOptions(col.key), allChecked: isFilterAllChecked(col.key), isChecked: (v) => isFilterChecked(col.key, v), onSearchChange: onFilterSearch, onToggle: (v) => onFilterToggle(col.key, v), onToggleAll: () => onFilterToggleAll(col.key) })] }))] }, col.key + String(idx ?? c))))] })] }));
+}

package/dist/components/index.d.ts

@@ -0,0 +1,5 @@
+export { ColumnFilterMenu } from "./ColumnFilterMenu";
+export { SelectMenu } from "./SelectMenu";
+export { XOnTableGrid } from "./XOnTableGrid";
+export { XOnTableHeader } from "./XOnTableHeader";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/components/index.js

@@ -0,0 +1,4 @@
+export { ColumnFilterMenu } from "./ColumnFilterMenu";
+export { SelectMenu } from "./SelectMenu";
+export { XOnTableGrid } from "./XOnTableGrid";
+export { XOnTableHeader } from "./XOnTableHeader";

package/dist/hooks/index.d.ts

@@ -0,0 +1,14 @@
+export { useAutoRows } from "./useAutoRows";
+export { useClipboardCatcher } from "./useClipboardCatcher";
+export { useColumnFilters } from "./useColumnFilters";
+export { useColumnGroups } from "./useColumnGroups";
+export { useColumnResize } from "./useColumnResize";
+export { useEditorOverlay } from "./useEditorOverlay";
+export { useFillHandle } from "./useFillHandle";
+export { useGridKeydown } from "./useGridKeydown";
+export { useOutsideClick } from "./useOutsideClick";
+export { useRangeSelection } from "./useRangeSelection";
+export { useSelectOptions } from "./useSelectOptions";
+export { useTableModel } from "./useTableModel";
+export { useValidation } from "./useValidation";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/hooks/index.js

@@ -0,0 +1,13 @@
+export { useAutoRows } from "./useAutoRows";
+export { useClipboardCatcher } from "./useClipboardCatcher";
+export { useColumnFilters } from "./useColumnFilters";
+export { useColumnGroups } from "./useColumnGroups";
+export { useColumnResize } from "./useColumnResize";
+export { useEditorOverlay } from "./useEditorOverlay";
+export { useFillHandle } from "./useFillHandle";
+export { useGridKeydown } from "./useGridKeydown";
+export { useOutsideClick } from "./useOutsideClick";
+export { useRangeSelection } from "./useRangeSelection";
+export { useSelectOptions } from "./useSelectOptions";
+export { useTableModel } from "./useTableModel";
+export { useValidation } from "./useValidation";

package/dist/hooks/useAutoRows.d.ts

@@ -0,0 +1,9 @@
+import type { ColumnDef, XOnTableMeta } from "../types";
+type AutoRowsResult<Row> = {
+    normalizedRows: Row[];
+    handleChange: (rows: Row[], meta: XOnTableMeta) => void;
+    createRow: () => Row;
+};
+export declare function useAutoRows<Row extends Record<string, any>>(columns: ColumnDef<Row>[], rows: Row[], rowIdKey: keyof Row, onChange?: (rows: Row[], meta: XOnTableMeta) => void, pinnedRowId?: string | null): AutoRowsResult<Row>;
+export {};
+//# sourceMappingURL=useAutoRows.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useAutoRows.d.ts","sourceRoot":"","sources":["../../src/hooks/useAutoRows.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAExD,KAAK,cAAc,CAAC,GAAG,IAAI;IACzB,cAAc,EAAE,GAAG,EAAE,CAAC;IACtB,YAAY,EAAE,CAAC,IAAI,EAAE,GAAG,EAAE,EAAE,IAAI,EAAE,YAAY,KAAK,IAAI,CAAC;IACxD,SAAS,EAAE,MAAM,GAAG,CAAC;CACtB,CAAC;AAEF,wBAAgB,WAAW,CAAC,GAAG,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EACzD,OAAO,EAAE,SAAS,CAAC,GAAG,CAAC,EAAE,EACzB,IAAI,EAAE,GAAG,EAAE,EACX,QAAQ,EAAE,MAAM,GAAG,EACnB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,EAAE,EAAE,IAAI,EAAE,YAAY,KAAK,IAAI,EACpD,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,GAC1B,cAAc,CAAC,GAAG,CAAC,CAiCrB"}

package/dist/hooks/useAutoRows.js

@@ -0,0 +1,41 @@
+import { useCallback, useMemo, useRef } from "react";
+export function useAutoRows(columns, rows, rowIdKey, onChange, pinnedRowId) {
+    const idRef = useRef(0);
+    const makeRowId = useCallback(() => `row_${Date.now()}_${idRef.current++}`, []);
+    const createRow = useCallback(() => {
+        const row = {};
+        columns.forEach((col) => { if (col.key !== String(rowIdKey))
+            row[col.key] = col.type === "checkbox" ? false : ""; });
+        row[String(rowIdKey)] = makeRowId();
+        return row;
+    }, [columns, makeRowId, rowIdKey]);
+    const isRowEmpty = useCallback((row) => {
+        const id = String(row[rowIdKey] ?? "");
+        if (pinnedRowId && id === pinnedRowId)
+            return false;
+        return columns.every((col) => {
+            if (col.key === String(rowIdKey))
+                return true;
+            const v = row[col.key];
+            if (col.type === "checkbox")
+                return v !== true;
+            return v == null || v === "";
+        });
+    }, [columns, pinnedRowId, rowIdKey]);
+    const ensureTrailingBlank = useCallback((list) => {
+        if (list.length === 0)
+            return [createRow()];
+        let lastNonEmpty = -1;
+        for (let i = 0; i < list.length; i++)
+            if (!isRowEmpty(list[i]))
+                lastNonEmpty = i;
+        const keep = lastNonEmpty === -1 ? [] : list.slice(0, lastNonEmpty + 1);
+        const tail = list[lastNonEmpty + 1];
+        return [...keep, tail && isRowEmpty(tail) ? tail : createRow()];
+    }, [createRow, isRowEmpty]);
+    const normalizedRows = useMemo(() => ensureTrailingBlank(rows), [ensureTrailingBlank, rows]);
+    const handleChange = useCallback((next, meta) => {
+        onChange?.(ensureTrailingBlank(next), meta);
+    }, [ensureTrailingBlank, onChange]);
+    return { normalizedRows, handleChange, createRow };
+}

package/dist/hooks/useClipboardCatcher.d.ts

@@ -0,0 +1,15 @@
+import type { ClipboardEvent } from "react";
+type ClipboardCatcherOptions = {
+    isEditing: boolean;
+    getCopyBlock: () => string[][];
+    onPasteBlock: (block: string[][]) => void;
+    onCopy?: () => void;
+};
+export declare function useClipboardCatcher(options: ClipboardCatcherOptions): {
+    clipRef: import("react").RefObject<HTMLTextAreaElement | null>;
+    focusClipboard: () => void;
+    onCopy: (e: ClipboardEvent) => void;
+    onPaste: (e: ClipboardEvent) => void;
+};
+export {};
+//# sourceMappingURL=useClipboardCatcher.d.ts.map