@crispy-seed/data-table 0.1.0

package/dist/useDataTableColumns-12s-Cn2ZAzFL-12s-CD6goR59.js

@@ -0,0 +1,289 @@
+'use client';
+function __insertCSS(code) {
+  if (!code || typeof document == 'undefined') return
+  let head = document.head || document.getElementsByTagName('head')[0]
+  let style = document.createElement('style')
+  style.type = 'text/css'
+  head.appendChild(style)
+  ;style.styleSheet ? (style.styleSheet.cssText = code) : style.appendChild(document.createTextNode(code))
+}
+
+import { d as useControllableState } from './useDataTableColumnCalc-12s-DTQQTtEJ-12s-DsEse3uq.js';
+import { dataAttr } from '@seed-design/dom-utils';
+import { useMemo, useCallback, useState, useRef } from 'react';
+
+// Select's `dom.ts` reads state off REAL rendered elements (aria-disabled, data-value)
+// because its options register asynchronously through a floating-ui list and the DOM
+// is the one thing always in sync with `elementsRef`. DataTable's selection has no
+// such registry -- it is two plain id arrays (`rowIds`, `selectedIds`) the root already
+// holds -- so there is nothing to inspect on an element. What's isolated here instead is
+// the same KIND of thing Select isolates: small pure functions the state hooks would
+// otherwise inline, kept out of the hooks so they can be unit-tested (and mutation-
+// tested) on their own.
+/**
+ * Tri-state selection summary of `selectedIds` against the CURRENTLY RENDERED
+ * `rowIds` -- never against `selectedIds` alone, so a stale id that scrolled out of a
+ * filtered/sorted view can't quietly count toward "all" or "some".
+ */ function computeSelectionState(rowIds, selectedIds) {
+    if (rowIds.length === 0) return "none";
+    const selectedIdSet = new Set(selectedIds);
+    const selectedRowCount = rowIds.filter((id)=>selectedIdSet.has(id)).length;
+    if (selectedRowCount === 0) return "none";
+    return selectedRowCount === rowIds.length ? "all" : "some";
+}
+/** Adds `id` if absent, removes it if present. Never mutates `ids`. */ function toggleMembership(ids, id) {
+    return ids.includes(id) ? ids.filter((existing)=>existing !== id) : [
+        ...ids,
+        id
+    ];
+}
+/**
+ * Reconciles a persisted/controlled column ORDER against the table's current column
+ * KEYS -- used by useDataTableColumns so a consumer's `columnOrder` never silently drops
+ * a column the table actually renders (a key added to `columns` after the order was
+ * first captured) nor keeps a ghost entry for one that was removed. Known keys keep
+ * their position from `order`; any key in `keys` missing from `order` is appended, in
+ * `keys`' own order; any entry in `order` no longer in `keys` is dropped.
+ */ function reconcileColumnOrder(order, keys) {
+    const keySet = new Set(keys);
+    const known = order.filter((key)=>keySet.has(key));
+    const knownSet = new Set(known);
+    const added = keys.filter((key)=>!knownSet.has(key));
+    return [
+        ...known,
+        ...added
+    ];
+}
+/**
+ * Moves `key` one step toward `direction` in `order` -- a no-op (same array, well,
+ * an equal-valued copy) at the edge it would otherwise walk off. Column-menu's
+ * "Move left"/"Move right" (DATATABLE-ATTIO-SPEC.md's column menu) is one call of
+ * this per click; drag-to-reorder is `reorderColumn` below instead, which can jump
+ * more than one position in a single move.
+ */ function moveColumnKey(order, key, direction) {
+    const index = order.indexOf(key);
+    if (index === -1) return [
+        ...order
+    ];
+    const targetIndex = direction === "left" ? index - 1 : index + 1;
+    if (targetIndex < 0 || targetIndex >= order.length) return [
+        ...order
+    ];
+    const next = [
+        ...order
+    ];
+    [next[index], next[targetIndex]] = [
+        next[targetIndex],
+        next[index]
+    ];
+    return next;
+}
+/**
+ * Drag-to-reorder: removes `dragKey` from `order` and reinserts it immediately before
+ * `dropKey`'s CURRENT position (i.e. its position after the removal, so dropping a
+ * column just after its own old slot doesn't appear to do nothing). A no-op (an
+ * equal-valued copy) when either key is missing or they're the same key.
+ */ function reorderColumnKey(order, dragKey, dropKey) {
+    if (dragKey === dropKey || !order.includes(dragKey) || !order.includes(dropKey)) {
+        return [
+            ...order
+        ];
+    }
+    const withoutDrag = order.filter((key)=>key !== dragKey);
+    const dropIndex = withoutDrag.indexOf(dropKey);
+    return [
+        ...withoutDrag.slice(0, dropIndex),
+        dragKey,
+        ...withoutDrag.slice(dropIndex)
+    ];
+}
+/** Clamps a drag-resized column width to a sane range -- crisp's own datatable.tsx
+ *  resize handler clamps the same way (a column can neither collapse to unreadable
+ *  nor balloon past a sane cap from one fast mouse move). */ function clampColumnWidth(width, min = 80, max = 640) {
+    return Math.min(max, Math.max(min, width));
+}
+/**
+ * Infinite scroll's own gate: fire `onLoadMore` only when the sentinel is ACTUALLY
+ * intersecting (not e.g. an observer's initial `false` callback, which fires once on
+ * `observe()` before any real intersection), there IS a next page (`hasMore`), and no
+ * fetch is already in flight (`loadingMore`) -- either of the latter two alone must
+ * suppress a trigger, which is why this is a pure `&&` rather than three separate
+ * call sites that could each drift. Isolated the same way `computeSelectionState`/
+ * `toggleMembership` are: the real IntersectionObserver callback (useDataTable
+ * InfiniteScroll.ts) is unit-testable only through a live browser API, but the
+ * DECISION it makes on every callback is plain data in, boolean out.
+ */ function shouldTriggerLoadMore(isIntersecting, hasMore, loadingMore) {
+    return hasMore && !loadingMore;
+}
+const EMPTY_STRINGS = [];
+const EMPTY_RECORD = {};
+/**
+ * Owns everything DATATABLE-ATTIO-SPEC.md's column menu + reorder + resize tranche
+ * needs -- order, visibility, a per-column label override, and a per-column width --
+ * the way useDataTableSelection owns the one selected-id SET rather than one hook per
+ * row. All four are "one value per column key" maps/lists a consumer may want to
+ * persist (a saved view), so they share this hook instead of splitting into four
+ * separate ones; drag-to-reorder and drag-to-resize (below) are the two INTERACTIONS
+ * built on top of the order/width state this hook already owns, not independent state
+ * of their own.
+ */ function useDataTableColumns(props) {
+    const { columnKeys = EMPTY_STRINGS, columnOrder: columnOrderProp, defaultColumnOrder, onColumnOrderChange, hiddenColumnKeys: hiddenProp, defaultHiddenColumnKeys = EMPTY_STRINGS, onHiddenColumnKeysChange, columnWidths: widthsProp, defaultColumnWidths = EMPTY_RECORD, onColumnWidthsChange, columnLabels: labelsProp, defaultColumnLabels = EMPTY_RECORD, onColumnLabelsChange } = props;
+    const [rawOrder, setRawOrder] = useControllableState({
+        prop: columnOrderProp,
+        defaultProp: defaultColumnOrder ?? columnKeys,
+        onChange: onColumnOrderChange
+    });
+    // Reconciled EVERY render against the table's current `columnKeys` (dom.ts's
+    // `reconcileColumnOrder`), not just once at mount -- a controlled `columnOrder` a
+    // consumer persisted before a new column existed must still show that new column
+    // (appended), and one holding a column that got removed from `columns` must not
+    // render a ghost header for it.
+    const columnOrder = useMemo(()=>reconcileColumnOrder(rawOrder ?? columnKeys, columnKeys), [
+        rawOrder,
+        columnKeys
+    ]);
+    const [hiddenColumnKeys = EMPTY_STRINGS, setHiddenColumnKeys] = useControllableState({
+        prop: hiddenProp,
+        defaultProp: defaultHiddenColumnKeys,
+        onChange: onHiddenColumnKeysChange
+    });
+    const hiddenSet = useMemo(()=>new Set(hiddenColumnKeys), [
+        hiddenColumnKeys
+    ]);
+    const [columnWidths = EMPTY_RECORD, setColumnWidths] = useControllableState({
+        prop: widthsProp,
+        defaultProp: defaultColumnWidths,
+        onChange: onColumnWidthsChange
+    });
+    const [columnLabels = EMPTY_RECORD, setColumnLabels] = useControllableState({
+        prop: labelsProp,
+        defaultProp: defaultColumnLabels,
+        onChange: onColumnLabelsChange
+    });
+    const visibleColumnOrder = useMemo(()=>columnOrder.filter((key)=>!hiddenSet.has(key)), [
+        columnOrder,
+        hiddenSet
+    ]);
+    const isColumnHidden = useCallback((key)=>hiddenSet.has(key), [
+        hiddenSet
+    ]);
+    const hideColumn = useCallback((key)=>setHiddenColumnKeys((current = EMPTY_STRINGS)=>[
+                ...current,
+                key
+            ]), [
+        setHiddenColumnKeys
+    ]);
+    const showColumn = useCallback((key)=>setHiddenColumnKeys((current = EMPTY_STRINGS)=>current.filter((existing)=>existing !== key)), [
+        setHiddenColumnKeys
+    ]);
+    const toggleColumnVisibility = useCallback((key)=>isColumnHidden(key) ? showColumn(key) : hideColumn(key), [
+        isColumnHidden,
+        showColumn,
+        hideColumn
+    ]);
+    const getColumnLabel = useCallback((key, fallback)=>columnLabels[key] ?? fallback, [
+        columnLabels
+    ]);
+    const renameColumn = useCallback((key, label)=>setColumnLabels((current = EMPTY_RECORD)=>({
+                ...current,
+                [key]: label
+            })), [
+        setColumnLabels
+    ]);
+    const getColumnWidth = useCallback((key)=>columnWidths[key], [
+        columnWidths
+    ]);
+    const setColumnWidth = useCallback((key, width)=>setColumnWidths((current = EMPTY_RECORD)=>({
+                ...current,
+                [key]: clampColumnWidth(width)
+            })), [
+        setColumnWidths
+    ]);
+    const moveColumn = useCallback((key, direction)=>setRawOrder((current)=>moveColumnKey(current ?? columnKeys, key, direction)), [
+        setRawOrder,
+        columnKeys
+    ]);
+    const reorderColumn = useCallback((dragKey, dropKey)=>setRawOrder((current)=>reorderColumnKey(current ?? columnKeys, dragKey, dropKey)), [
+        setRawOrder,
+        columnKeys
+    ]);
+    // -- drag-to-reorder ---------------------------------------------------------------
+    // Live state only (which column is currently being dragged) -- the styled layer
+    // drives it by calling `dragOverColumn` as the pointer crosses OTHER header cells
+    // (via `document.elementFromPoint`, since a captured pointer stops native
+    // `pointerenter` from firing on siblings), which reorders immediately rather than
+    // waiting for a drop. That is exactly what Attio's own header drag does (the column
+    // being passed visibly swaps live), and it means `endColumnDrag` never has to also
+    // commit a move -- there is nothing left to commit.
+    const [draggingColumnKey, setDraggingColumnKey] = useState(null);
+    const beginColumnDrag = useCallback((key)=>setDraggingColumnKey(key), []);
+    const dragOverColumn = useCallback((hoverKey)=>{
+        setDraggingColumnKey((current)=>{
+            if (!current || current === hoverKey) return current;
+            reorderColumn(current, hoverKey);
+            return current;
+        });
+    }, [
+        reorderColumn
+    ]);
+    const endColumnDrag = useCallback(()=>setDraggingColumnKey(null), []);
+    // -- drag-to-resize ------------------------------------------------------------------
+    // `resizeStartRef` holds the ONE thing that must survive across pointermove events
+    // without triggering a re-render on every pixel (the drag's origin) -- state
+    // (`resizingColumnKey`) is only for what the render actually needs: which column's
+    // handle should show its active/dragging look.
+    const resizeStartRef = useRef(null);
+    const [resizingColumnKey, setResizingColumnKey] = useState(null);
+    const beginColumnResize = useCallback((key, clientX, currentWidth)=>{
+        resizeStartRef.current = {
+            key,
+            startX: clientX,
+            startWidth: currentWidth
+        };
+        setResizingColumnKey(key);
+    }, []);
+    const updateColumnResize = useCallback((clientX)=>{
+        const start = resizeStartRef.current;
+        if (!start) return;
+        setColumnWidth(start.key, start.startWidth + (clientX - start.startX));
+    }, [
+        setColumnWidth
+    ]);
+    const endColumnResize = useCallback(()=>{
+        resizeStartRef.current = null;
+        setResizingColumnKey(null);
+    }, []);
+    return {
+        columnOrder,
+        visibleColumnOrder,
+        hiddenColumnKeys,
+        columnWidths,
+        columnLabels,
+        isColumnHidden,
+        hideColumn,
+        showColumn,
+        toggleColumnVisibility,
+        getColumnLabel,
+        renameColumn,
+        getColumnWidth,
+        setColumnWidth,
+        moveColumn,
+        reorderColumn,
+        draggingColumnKey,
+        beginColumnDrag,
+        dragOverColumn,
+        endColumnDrag,
+        resizingColumnKey,
+        beginColumnResize,
+        updateColumnResize,
+        endColumnResize,
+        // Exposed for the styled layer's header cell -- `data-dragging`/`data-resizing`
+        // read directly off state above already cover most of it; `dataAttr` re-exported
+        // via this hook's own module keeps every other sub-hook's habit of building its
+        // own data-attribute values rather than the styled layer re-deriving booleans.
+        isColumnDragging: (key)=>dataAttr(draggingColumnKey === key),
+        isColumnResizing: (key)=>dataAttr(resizingColumnKey === key)
+    };
+}
+
+export { computeSelectionState as c, shouldTriggerLoadMore as s, toggleMembership as t, useDataTableColumns as u };

package/dist/useDataTableColumns-12s-Cn2ZAzFL-12s-CUk_CpYT.cjs

@@ -0,0 +1,292 @@
+'use client';
+function __insertCSS(code) {
+  if (!code || typeof document == 'undefined') return
+  let head = document.head || document.getElementsByTagName('head')[0]
+  let style = document.createElement('style')
+  style.type = 'text/css'
+  head.appendChild(style)
+  ;style.styleSheet ? (style.styleSheet.cssText = code) : style.appendChild(document.createTextNode(code))
+}
+
+var useDataTableColumnCalc12sDTQQTtEJ12s = require('./useDataTableColumnCalc-12s-DTQQTtEJ-12s-CvD14JYo.cjs');
+var domUtils = require('@seed-design/dom-utils');
+var React = require('react');
+
+// Select's `dom.ts` reads state off REAL rendered elements (aria-disabled, data-value)
+// because its options register asynchronously through a floating-ui list and the DOM
+// is the one thing always in sync with `elementsRef`. DataTable's selection has no
+// such registry -- it is two plain id arrays (`rowIds`, `selectedIds`) the root already
+// holds -- so there is nothing to inspect on an element. What's isolated here instead is
+// the same KIND of thing Select isolates: small pure functions the state hooks would
+// otherwise inline, kept out of the hooks so they can be unit-tested (and mutation-
+// tested) on their own.
+/**
+ * Tri-state selection summary of `selectedIds` against the CURRENTLY RENDERED
+ * `rowIds` -- never against `selectedIds` alone, so a stale id that scrolled out of a
+ * filtered/sorted view can't quietly count toward "all" or "some".
+ */ function computeSelectionState(rowIds, selectedIds) {
+    if (rowIds.length === 0) return "none";
+    const selectedIdSet = new Set(selectedIds);
+    const selectedRowCount = rowIds.filter((id)=>selectedIdSet.has(id)).length;
+    if (selectedRowCount === 0) return "none";
+    return selectedRowCount === rowIds.length ? "all" : "some";
+}
+/** Adds `id` if absent, removes it if present. Never mutates `ids`. */ function toggleMembership(ids, id) {
+    return ids.includes(id) ? ids.filter((existing)=>existing !== id) : [
+        ...ids,
+        id
+    ];
+}
+/**
+ * Reconciles a persisted/controlled column ORDER against the table's current column
+ * KEYS -- used by useDataTableColumns so a consumer's `columnOrder` never silently drops
+ * a column the table actually renders (a key added to `columns` after the order was
+ * first captured) nor keeps a ghost entry for one that was removed. Known keys keep
+ * their position from `order`; any key in `keys` missing from `order` is appended, in
+ * `keys`' own order; any entry in `order` no longer in `keys` is dropped.
+ */ function reconcileColumnOrder(order, keys) {
+    const keySet = new Set(keys);
+    const known = order.filter((key)=>keySet.has(key));
+    const knownSet = new Set(known);
+    const added = keys.filter((key)=>!knownSet.has(key));
+    return [
+        ...known,
+        ...added
+    ];
+}
+/**
+ * Moves `key` one step toward `direction` in `order` -- a no-op (same array, well,
+ * an equal-valued copy) at the edge it would otherwise walk off. Column-menu's
+ * "Move left"/"Move right" (DATATABLE-ATTIO-SPEC.md's column menu) is one call of
+ * this per click; drag-to-reorder is `reorderColumn` below instead, which can jump
+ * more than one position in a single move.
+ */ function moveColumnKey(order, key, direction) {
+    const index = order.indexOf(key);
+    if (index === -1) return [
+        ...order
+    ];
+    const targetIndex = direction === "left" ? index - 1 : index + 1;
+    if (targetIndex < 0 || targetIndex >= order.length) return [
+        ...order
+    ];
+    const next = [
+        ...order
+    ];
+    [next[index], next[targetIndex]] = [
+        next[targetIndex],
+        next[index]
+    ];
+    return next;
+}
+/**
+ * Drag-to-reorder: removes `dragKey` from `order` and reinserts it immediately before
+ * `dropKey`'s CURRENT position (i.e. its position after the removal, so dropping a
+ * column just after its own old slot doesn't appear to do nothing). A no-op (an
+ * equal-valued copy) when either key is missing or they're the same key.
+ */ function reorderColumnKey(order, dragKey, dropKey) {
+    if (dragKey === dropKey || !order.includes(dragKey) || !order.includes(dropKey)) {
+        return [
+            ...order
+        ];
+    }
+    const withoutDrag = order.filter((key)=>key !== dragKey);
+    const dropIndex = withoutDrag.indexOf(dropKey);
+    return [
+        ...withoutDrag.slice(0, dropIndex),
+        dragKey,
+        ...withoutDrag.slice(dropIndex)
+    ];
+}
+/** Clamps a drag-resized column width to a sane range -- crisp's own datatable.tsx
+ *  resize handler clamps the same way (a column can neither collapse to unreadable
+ *  nor balloon past a sane cap from one fast mouse move). */ function clampColumnWidth(width, min = 80, max = 640) {
+    return Math.min(max, Math.max(min, width));
+}
+/**
+ * Infinite scroll's own gate: fire `onLoadMore` only when the sentinel is ACTUALLY
+ * intersecting (not e.g. an observer's initial `false` callback, which fires once on
+ * `observe()` before any real intersection), there IS a next page (`hasMore`), and no
+ * fetch is already in flight (`loadingMore`) -- either of the latter two alone must
+ * suppress a trigger, which is why this is a pure `&&` rather than three separate
+ * call sites that could each drift. Isolated the same way `computeSelectionState`/
+ * `toggleMembership` are: the real IntersectionObserver callback (useDataTable
+ * InfiniteScroll.ts) is unit-testable only through a live browser API, but the
+ * DECISION it makes on every callback is plain data in, boolean out.
+ */ function shouldTriggerLoadMore(isIntersecting, hasMore, loadingMore) {
+    return hasMore && !loadingMore;
+}
+const EMPTY_STRINGS = [];
+const EMPTY_RECORD = {};
+/**
+ * Owns everything DATATABLE-ATTIO-SPEC.md's column menu + reorder + resize tranche
+ * needs -- order, visibility, a per-column label override, and a per-column width --
+ * the way useDataTableSelection owns the one selected-id SET rather than one hook per
+ * row. All four are "one value per column key" maps/lists a consumer may want to
+ * persist (a saved view), so they share this hook instead of splitting into four
+ * separate ones; drag-to-reorder and drag-to-resize (below) are the two INTERACTIONS
+ * built on top of the order/width state this hook already owns, not independent state
+ * of their own.
+ */ function useDataTableColumns(props) {
+    const { columnKeys = EMPTY_STRINGS, columnOrder: columnOrderProp, defaultColumnOrder, onColumnOrderChange, hiddenColumnKeys: hiddenProp, defaultHiddenColumnKeys = EMPTY_STRINGS, onHiddenColumnKeysChange, columnWidths: widthsProp, defaultColumnWidths = EMPTY_RECORD, onColumnWidthsChange, columnLabels: labelsProp, defaultColumnLabels = EMPTY_RECORD, onColumnLabelsChange } = props;
+    const [rawOrder, setRawOrder] = useDataTableColumnCalc12sDTQQTtEJ12s.useControllableState({
+        prop: columnOrderProp,
+        defaultProp: defaultColumnOrder ?? columnKeys,
+        onChange: onColumnOrderChange
+    });
+    // Reconciled EVERY render against the table's current `columnKeys` (dom.ts's
+    // `reconcileColumnOrder`), not just once at mount -- a controlled `columnOrder` a
+    // consumer persisted before a new column existed must still show that new column
+    // (appended), and one holding a column that got removed from `columns` must not
+    // render a ghost header for it.
+    const columnOrder = React.useMemo(()=>reconcileColumnOrder(rawOrder ?? columnKeys, columnKeys), [
+        rawOrder,
+        columnKeys
+    ]);
+    const [hiddenColumnKeys = EMPTY_STRINGS, setHiddenColumnKeys] = useDataTableColumnCalc12sDTQQTtEJ12s.useControllableState({
+        prop: hiddenProp,
+        defaultProp: defaultHiddenColumnKeys,
+        onChange: onHiddenColumnKeysChange
+    });
+    const hiddenSet = React.useMemo(()=>new Set(hiddenColumnKeys), [
+        hiddenColumnKeys
+    ]);
+    const [columnWidths = EMPTY_RECORD, setColumnWidths] = useDataTableColumnCalc12sDTQQTtEJ12s.useControllableState({
+        prop: widthsProp,
+        defaultProp: defaultColumnWidths,
+        onChange: onColumnWidthsChange
+    });
+    const [columnLabels = EMPTY_RECORD, setColumnLabels] = useDataTableColumnCalc12sDTQQTtEJ12s.useControllableState({
+        prop: labelsProp,
+        defaultProp: defaultColumnLabels,
+        onChange: onColumnLabelsChange
+    });
+    const visibleColumnOrder = React.useMemo(()=>columnOrder.filter((key)=>!hiddenSet.has(key)), [
+        columnOrder,
+        hiddenSet
+    ]);
+    const isColumnHidden = React.useCallback((key)=>hiddenSet.has(key), [
+        hiddenSet
+    ]);
+    const hideColumn = React.useCallback((key)=>setHiddenColumnKeys((current = EMPTY_STRINGS)=>[
+                ...current,
+                key
+            ]), [
+        setHiddenColumnKeys
+    ]);
+    const showColumn = React.useCallback((key)=>setHiddenColumnKeys((current = EMPTY_STRINGS)=>current.filter((existing)=>existing !== key)), [
+        setHiddenColumnKeys
+    ]);
+    const toggleColumnVisibility = React.useCallback((key)=>isColumnHidden(key) ? showColumn(key) : hideColumn(key), [
+        isColumnHidden,
+        showColumn,
+        hideColumn
+    ]);
+    const getColumnLabel = React.useCallback((key, fallback)=>columnLabels[key] ?? fallback, [
+        columnLabels
+    ]);
+    const renameColumn = React.useCallback((key, label)=>setColumnLabels((current = EMPTY_RECORD)=>({
+                ...current,
+                [key]: label
+            })), [
+        setColumnLabels
+    ]);
+    const getColumnWidth = React.useCallback((key)=>columnWidths[key], [
+        columnWidths
+    ]);
+    const setColumnWidth = React.useCallback((key, width)=>setColumnWidths((current = EMPTY_RECORD)=>({
+                ...current,
+                [key]: clampColumnWidth(width)
+            })), [
+        setColumnWidths
+    ]);
+    const moveColumn = React.useCallback((key, direction)=>setRawOrder((current)=>moveColumnKey(current ?? columnKeys, key, direction)), [
+        setRawOrder,
+        columnKeys
+    ]);
+    const reorderColumn = React.useCallback((dragKey, dropKey)=>setRawOrder((current)=>reorderColumnKey(current ?? columnKeys, dragKey, dropKey)), [
+        setRawOrder,
+        columnKeys
+    ]);
+    // -- drag-to-reorder ---------------------------------------------------------------
+    // Live state only (which column is currently being dragged) -- the styled layer
+    // drives it by calling `dragOverColumn` as the pointer crosses OTHER header cells
+    // (via `document.elementFromPoint`, since a captured pointer stops native
+    // `pointerenter` from firing on siblings), which reorders immediately rather than
+    // waiting for a drop. That is exactly what Attio's own header drag does (the column
+    // being passed visibly swaps live), and it means `endColumnDrag` never has to also
+    // commit a move -- there is nothing left to commit.
+    const [draggingColumnKey, setDraggingColumnKey] = React.useState(null);
+    const beginColumnDrag = React.useCallback((key)=>setDraggingColumnKey(key), []);
+    const dragOverColumn = React.useCallback((hoverKey)=>{
+        setDraggingColumnKey((current)=>{
+            if (!current || current === hoverKey) return current;
+            reorderColumn(current, hoverKey);
+            return current;
+        });
+    }, [
+        reorderColumn
+    ]);
+    const endColumnDrag = React.useCallback(()=>setDraggingColumnKey(null), []);
+    // -- drag-to-resize ------------------------------------------------------------------
+    // `resizeStartRef` holds the ONE thing that must survive across pointermove events
+    // without triggering a re-render on every pixel (the drag's origin) -- state
+    // (`resizingColumnKey`) is only for what the render actually needs: which column's
+    // handle should show its active/dragging look.
+    const resizeStartRef = React.useRef(null);
+    const [resizingColumnKey, setResizingColumnKey] = React.useState(null);
+    const beginColumnResize = React.useCallback((key, clientX, currentWidth)=>{
+        resizeStartRef.current = {
+            key,
+            startX: clientX,
+            startWidth: currentWidth
+        };
+        setResizingColumnKey(key);
+    }, []);
+    const updateColumnResize = React.useCallback((clientX)=>{
+        const start = resizeStartRef.current;
+        if (!start) return;
+        setColumnWidth(start.key, start.startWidth + (clientX - start.startX));
+    }, [
+        setColumnWidth
+    ]);
+    const endColumnResize = React.useCallback(()=>{
+        resizeStartRef.current = null;
+        setResizingColumnKey(null);
+    }, []);
+    return {
+        columnOrder,
+        visibleColumnOrder,
+        hiddenColumnKeys,
+        columnWidths,
+        columnLabels,
+        isColumnHidden,
+        hideColumn,
+        showColumn,
+        toggleColumnVisibility,
+        getColumnLabel,
+        renameColumn,
+        getColumnWidth,
+        setColumnWidth,
+        moveColumn,
+        reorderColumn,
+        draggingColumnKey,
+        beginColumnDrag,
+        dragOverColumn,
+        endColumnDrag,
+        resizingColumnKey,
+        beginColumnResize,
+        updateColumnResize,
+        endColumnResize,
+        // Exposed for the styled layer's header cell -- `data-dragging`/`data-resizing`
+        // read directly off state above already cover most of it; `dataAttr` re-exported
+        // via this hook's own module keeps every other sub-hook's habit of building its
+        // own data-attribute values rather than the styled layer re-deriving booleans.
+        isColumnDragging: (key)=>domUtils.dataAttr(draggingColumnKey === key),
+        isColumnResizing: (key)=>domUtils.dataAttr(resizingColumnKey === key)
+    };
+}
+
+exports.computeSelectionState = computeSelectionState;
+exports.shouldTriggerLoadMore = shouldTriggerLoadMore;
+exports.toggleMembership = toggleMembership;
+exports.useDataTableColumns = useDataTableColumns;

package/dist/useDataTableEdit-12s-9Wb_UCrN-12s-BoOHq3GB.js

@@ -0,0 +1,98 @@
+'use client';
+function __insertCSS(code) {
+  if (!code || typeof document == 'undefined') return
+  let head = document.head || document.getElementsByTagName('head')[0]
+  let style = document.createElement('style')
+  style.type = 'text/css'
+  head.appendChild(style)
+  ;style.styleSheet ? (style.styleSheet.cssText = code) : style.appendChild(document.createTextNode(code))
+}
+
+import { useState, useCallback } from 'react';
+
+function sameCell(a, id, key) {
+    return a !== null && a.id === id && a.key === key;
+}
+/**
+ * Owns which single cell is mid-edit, which one (if any) has a commit in flight, and
+ * which one last failed -- the way useDataTableColumnCalc owns which op is active per
+ * column. This hook never touches `TRow` or renders an editor itself; it only tracks
+ * WHICH cell is in which of those three states and orchestrates the async commit
+ * (crisp's own `commitEdit`, `datatable.tsx`) -- the styled layer (react/DataTable's
+ * `editors.tsx`) reads `isEditing`/`isPending`/`getEditError` to decide what to render
+ * for a given `(id, key)` and calls `startEdit`/`cancelEdit`/`commitEdit` in response
+ * to a double-click, Escape, Enter/blur, or an always-live widget's own change event.
+ *
+ * Only one cell can be mid-edit at a time (`editingCell`, not a set) -- matching
+ * crisp's own single `editing` state and this table's spec (no multi-cell/range
+ * editing is in scope here).
+ */ function useDataTableEdit(props) {
+    const { onEdit } = props;
+    const [editingCell, setEditingCell] = useState(null);
+    const [pendingCell, setPendingCell] = useState(null);
+    const [editError, setEditError] = useState(null);
+    const isEditing = useCallback((id, key)=>sameCell(editingCell, id, key), [
+        editingCell
+    ]);
+    const isPending = useCallback((id, key)=>sameCell(pendingCell, id, key), [
+        pendingCell
+    ]);
+    const getEditError = useCallback((id, key)=>editError && editError.id === id && editError.key === key ? editError.message : null, [
+        editError
+    ]);
+    const startEdit = useCallback((id, key)=>{
+        // Opening a cell's editor also clears any stale error left over from a PREVIOUS
+        // failed commit on it (crisp/#385 comment) -- otherwise a rejection from three
+        // edits ago would still read under a freshly-reopened editor.
+        setEditError(null);
+        setEditingCell({
+            id,
+            key
+        });
+    }, []);
+    const cancelEdit = useCallback(()=>setEditingCell(null), []);
+    // Async-aware (crisp/#385): a sync `onEdit` (returns undefined) commits exactly as
+    // before -- close the editor immediately. A Promise-returning `onEdit` keeps the
+    // editor open with a pending state while it settles, then either closes it
+    // (resolve) or closes it AND reverts to the last-known-good value while showing the
+    // rejection's message beside the cell (reject). The revert needs no extra code:
+    // neither this hook nor the styled layer ever mutates the caller's own row data, so
+    // once `editingCell` clears, the cell simply shows that data again.
+    const commitEdit = useCallback((id, key, value)=>{
+        setEditError(null);
+        const result = onEdit?.(id, key, value);
+        if (result && typeof result.then === "function") {
+            setPendingCell({
+                id,
+                key
+            });
+            result.then(()=>{
+                setPendingCell(null);
+                setEditingCell(null);
+            }, (err)=>{
+                setPendingCell(null);
+                setEditingCell(null);
+                setEditError({
+                    id,
+                    key,
+                    message: err instanceof Error ? err.message : typeof err === "string" ? err : "Could not save"
+                });
+            });
+            return;
+        }
+        setEditingCell(null);
+    }, [
+        onEdit
+    ]);
+    return {
+        editingCell,
+        isEditing,
+        isPending,
+        getEditError,
+        startEdit,
+        cancelEdit,
+        commitEdit
+    };
+}
+
+export { useDataTableEdit as u };