@crispy-seed/data-table 0.1.0

package/dist/useDataTableEdit-12s-9Wb_UCrN-12s-De6YHBba.cjs

@@ -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))
+}
+
+var React = require('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] = React.useState(null);
+    const [pendingCell, setPendingCell] = React.useState(null);
+    const [editError, setEditError] = React.useState(null);
+    const isEditing = React.useCallback((id, key)=>sameCell(editingCell, id, key), [
+        editingCell
+    ]);
+    const isPending = React.useCallback((id, key)=>sameCell(pendingCell, id, key), [
+        pendingCell
+    ]);
+    const getEditError = React.useCallback((id, key)=>editError && editError.id === id && editError.key === key ? editError.message : null, [
+        editError
+    ]);
+    const startEdit = React.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 = React.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 = React.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
+    };
+}
+
+exports.useDataTableEdit = useDataTableEdit;

package/dist/useDataTableFilter-12s-ZzbmWMin-12s-CWyBeFna.js

@@ -0,0 +1,74 @@
+'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 { useCallback } from 'react';
+import { t as toggleMembership } from './useDataTableColumns-12s-Cn2ZAzFL-12s-CD6goR59.js';
+
+const EMPTY_FILTERS = {};
+// Owns one filter per column key -- the way useDataTableSelection owns one selected-id
+// SET rather than one boolean per row. Applying a column's filter to `data` needs
+// `TRow` (a type this headless package never sees), so -- same split as search/sort --
+// this hook only tracks which mode/values are checked per column; the styled layer
+// (DataTable.tsx's `getVisibleRows`) reads it to actually narrow rows.
+function useDataTableFilter(props) {
+    const { filters: filtersProp, defaultFilters = EMPTY_FILTERS, onFiltersChange } = props;
+    const [filters = EMPTY_FILTERS, setFilters] = useControllableState({
+        prop: filtersProp,
+        defaultProp: defaultFilters,
+        onChange: onFiltersChange
+    });
+    const setFilterMode = useCallback((columnKey, mode)=>{
+        setFilters((current = EMPTY_FILTERS)=>({
+                ...current,
+                [columnKey]: {
+                    mode,
+                    values: current[columnKey]?.values ?? []
+                }
+            }));
+    }, [
+        setFilters
+    ]);
+    const toggleFilterValue = useCallback((columnKey, value)=>{
+        setFilters((current = EMPTY_FILTERS)=>({
+                ...current,
+                [columnKey]: {
+                    mode: current[columnKey]?.mode ?? "is",
+                    values: toggleMembership(current[columnKey]?.values ?? [], value)
+                }
+            }));
+    }, [
+        setFilters
+    ]);
+    const clearFilter = useCallback((columnKey)=>{
+        setFilters((current = EMPTY_FILTERS)=>{
+            if (!(columnKey in current)) return current;
+            const next = {
+                ...current
+            };
+            delete next[columnKey];
+            return next;
+        });
+    }, [
+        setFilters
+    ]);
+    const isFilterActive = useCallback((columnKey)=>(filters[columnKey]?.values.length ?? 0) > 0, [
+        filters
+    ]);
+    return {
+        filters,
+        setFilterMode,
+        toggleFilterValue,
+        clearFilter,
+        isFilterActive
+    };
+}
+
+export { useDataTableFilter as u };

package/dist/useDataTableFilter-12s-ZzbmWMin-12s-lpjzZY3_.cjs

@@ -0,0 +1,74 @@
+'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 React = require('react');
+var useDataTableColumns12sCn2ZAzFL12s = require('./useDataTableColumns-12s-Cn2ZAzFL-12s-CUk_CpYT.cjs');
+
+const EMPTY_FILTERS = {};
+// Owns one filter per column key -- the way useDataTableSelection owns one selected-id
+// SET rather than one boolean per row. Applying a column's filter to `data` needs
+// `TRow` (a type this headless package never sees), so -- same split as search/sort --
+// this hook only tracks which mode/values are checked per column; the styled layer
+// (DataTable.tsx's `getVisibleRows`) reads it to actually narrow rows.
+function useDataTableFilter(props) {
+    const { filters: filtersProp, defaultFilters = EMPTY_FILTERS, onFiltersChange } = props;
+    const [filters = EMPTY_FILTERS, setFilters] = useDataTableColumnCalc12sDTQQTtEJ12s.useControllableState({
+        prop: filtersProp,
+        defaultProp: defaultFilters,
+        onChange: onFiltersChange
+    });
+    const setFilterMode = React.useCallback((columnKey, mode)=>{
+        setFilters((current = EMPTY_FILTERS)=>({
+                ...current,
+                [columnKey]: {
+                    mode,
+                    values: current[columnKey]?.values ?? []
+                }
+            }));
+    }, [
+        setFilters
+    ]);
+    const toggleFilterValue = React.useCallback((columnKey, value)=>{
+        setFilters((current = EMPTY_FILTERS)=>({
+                ...current,
+                [columnKey]: {
+                    mode: current[columnKey]?.mode ?? "is",
+                    values: useDataTableColumns12sCn2ZAzFL12s.toggleMembership(current[columnKey]?.values ?? [], value)
+                }
+            }));
+    }, [
+        setFilters
+    ]);
+    const clearFilter = React.useCallback((columnKey)=>{
+        setFilters((current = EMPTY_FILTERS)=>{
+            if (!(columnKey in current)) return current;
+            const next = {
+                ...current
+            };
+            delete next[columnKey];
+            return next;
+        });
+    }, [
+        setFilters
+    ]);
+    const isFilterActive = React.useCallback((columnKey)=>(filters[columnKey]?.values.length ?? 0) > 0, [
+        filters
+    ]);
+    return {
+        filters,
+        setFilterMode,
+        toggleFilterValue,
+        clearFilter,
+        isFilterActive
+    };
+}
+
+exports.useDataTableFilter = useDataTableFilter;

package/dist/useDataTableInfiniteScroll-12s-8ZG31URd-12s-BexjP6iO.js

@@ -0,0 +1,104 @@
+'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, useRef, useCallback, useEffect } from 'react';
+import { s as shouldTriggerLoadMore } from './useDataTableColumns-12s-Cn2ZAzFL-12s-CD6goR59.js';
+
+// Triggers before the sentinel is actually on-screen -- Attio's own list prefetches
+// a page ahead of the visible edge so the next batch of rows is already there by the
+// time a fast scroll reaches them, rather than the user briefly out-running the data.
+const ROOT_MARGIN = "160px";
+/**
+ * Owns the "is the user close enough to the bottom to load more" concern -- the way
+ * useDataTableScroll owns the horizontal scroll-shadow edge state. An
+ * IntersectionObserver watching a single sentinel row the styled layer renders as the
+ * last child of `<tbody>` while `hasMore` is true (DataTable.tsx's own
+ * `InfiniteScrollRow`), observed against `scrollRootRef`'s element (useDataTable.ts
+ * wires this to useDataTableScroll's own scroll container) so a BOUNDED table
+ * triggers off its own internal scroll, not the browsing viewport.
+ */ function useDataTableInfiniteScroll(props) {
+    const { onLoadMore, hasMore = true, loadingMore: loadingMoreProp, scrollRootRef } = props;
+    const [internalLoadingMore, setInternalLoadingMore] = useState(false);
+    const loadingMore = loadingMoreProp ?? internalLoadingMore;
+    // Mirrors the latest props into a ref the observer callback reads -- the callback
+    // is registered once per sentinel element (see the effect below) and must not
+    // recreate the whole IntersectionObserver on every render just because a fresh
+    // `onLoadMore` closure came in, the same "ref mirrors the latest value" shape a
+    // debounced/throttled handler needs.
+    const latest = useRef({
+        onLoadMore,
+        hasMore,
+        loadingMore
+    });
+    latest.current = {
+        onLoadMore,
+        hasMore,
+        loadingMore
+    };
+    const triggerLoadMore = useCallback(()=>{
+        const { onLoadMore: fn, hasMore: has, loadingMore: busy } = latest.current;
+        if (!shouldTriggerLoadMore(true, has, busy) || !fn) return;
+        const result = fn();
+        // Only a THENABLE result puts this hook in charge of `loadingMore` -- a
+        // synchronous `onLoadMore` (already-fetched data, a local page) commits
+        // immediately and never becomes "busy" at all, matching `loadingMoreProp`'s own
+        // controlled shape: nothing to suppress a very next scroll-triggered call with.
+        if (result && typeof result.then === "function") {
+            if (loadingMoreProp === undefined) setInternalLoadingMore(true);
+            result.finally(()=>{
+                if (loadingMoreProp === undefined) setInternalLoadingMore(false);
+            });
+        }
+    }, [
+        loadingMoreProp
+    ]);
+    // A state slot (not a plain ref) so attaching the sentinel re-runs the effect below
+    // -- a callback ref's own node can't be an effect dependency otherwise.
+    const [sentinelNode, setSentinelNode] = useState(null);
+    const sentinelRef = useCallback((node)=>setSentinelNode(node), []);
+    useEffect(()=>{
+        if (!sentinelNode || !onLoadMore || typeof IntersectionObserver === "undefined") return;
+        // Effects run after every ref callback of the SAME commit (including
+        // `scrollRootRef`'s own, set by useDataTableScroll's `scrollAreaRef`) regardless
+        // of sibling ref attach order, so `scrollRootRef.current` is already populated
+        // here even on the very first render that mounts both elements at once. `null`
+        // (no scroll container yet, or none supplied) falls back to the browsing
+        // viewport, IntersectionObserver's own default.
+        const root = scrollRootRef?.current ?? null;
+        const observer = new IntersectionObserver((entries)=>{
+            if (entries.some((entry)=>entry.isIntersecting)) triggerLoadMore();
+        }, {
+            root,
+            rootMargin: ROOT_MARGIN
+        });
+        observer.observe(sentinelNode);
+        return ()=>observer.disconnect();
+    }, [
+        sentinelNode,
+        onLoadMore,
+        scrollRootRef,
+        triggerLoadMore
+    ]);
+    return {
+        /** Attach to the sentinel row's DOM node (a ref callback, `DataTable.tsx`'s own
+     *  `InfiniteScrollRow`). A no-op (no observer ever created) when `onLoadMore` is
+     *  omitted -- the styled layer still shouldn't render the sentinel at all in that
+     *  case (nothing to load more OF), this is just the inert fallback. */ sentinelRef,
+        /** Whether to keep rendering the sentinel row at all. */ hasMore,
+        /** A fetch is in flight -- shows the loading-more spinner row and gates further
+     *  triggers, whichever side (controlled or internal) reports it. */ loadingMore,
+        /** Fires `onLoadMore` directly, subject to the same `hasMore`/`loadingMore` gate
+     *  the observer itself uses -- exposed for a consumer that wants a manual retry
+     *  affordance (e.g. after a failed load) rather than only the observer's own
+     *  scroll trigger. */ triggerLoadMore
+    };
+}
+
+export { useDataTableInfiniteScroll as u };

package/dist/useDataTableInfiniteScroll-12s-8ZG31URd-12s-Bt8gojr9.cjs

@@ -0,0 +1,104 @@
+'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 React = require('react');
+var useDataTableColumns12sCn2ZAzFL12s = require('./useDataTableColumns-12s-Cn2ZAzFL-12s-CUk_CpYT.cjs');
+
+// Triggers before the sentinel is actually on-screen -- Attio's own list prefetches
+// a page ahead of the visible edge so the next batch of rows is already there by the
+// time a fast scroll reaches them, rather than the user briefly out-running the data.
+const ROOT_MARGIN = "160px";
+/**
+ * Owns the "is the user close enough to the bottom to load more" concern -- the way
+ * useDataTableScroll owns the horizontal scroll-shadow edge state. An
+ * IntersectionObserver watching a single sentinel row the styled layer renders as the
+ * last child of `<tbody>` while `hasMore` is true (DataTable.tsx's own
+ * `InfiniteScrollRow`), observed against `scrollRootRef`'s element (useDataTable.ts
+ * wires this to useDataTableScroll's own scroll container) so a BOUNDED table
+ * triggers off its own internal scroll, not the browsing viewport.
+ */ function useDataTableInfiniteScroll(props) {
+    const { onLoadMore, hasMore = true, loadingMore: loadingMoreProp, scrollRootRef } = props;
+    const [internalLoadingMore, setInternalLoadingMore] = React.useState(false);
+    const loadingMore = loadingMoreProp ?? internalLoadingMore;
+    // Mirrors the latest props into a ref the observer callback reads -- the callback
+    // is registered once per sentinel element (see the effect below) and must not
+    // recreate the whole IntersectionObserver on every render just because a fresh
+    // `onLoadMore` closure came in, the same "ref mirrors the latest value" shape a
+    // debounced/throttled handler needs.
+    const latest = React.useRef({
+        onLoadMore,
+        hasMore,
+        loadingMore
+    });
+    latest.current = {
+        onLoadMore,
+        hasMore,
+        loadingMore
+    };
+    const triggerLoadMore = React.useCallback(()=>{
+        const { onLoadMore: fn, hasMore: has, loadingMore: busy } = latest.current;
+        if (!useDataTableColumns12sCn2ZAzFL12s.shouldTriggerLoadMore(true, has, busy) || !fn) return;
+        const result = fn();
+        // Only a THENABLE result puts this hook in charge of `loadingMore` -- a
+        // synchronous `onLoadMore` (already-fetched data, a local page) commits
+        // immediately and never becomes "busy" at all, matching `loadingMoreProp`'s own
+        // controlled shape: nothing to suppress a very next scroll-triggered call with.
+        if (result && typeof result.then === "function") {
+            if (loadingMoreProp === undefined) setInternalLoadingMore(true);
+            result.finally(()=>{
+                if (loadingMoreProp === undefined) setInternalLoadingMore(false);
+            });
+        }
+    }, [
+        loadingMoreProp
+    ]);
+    // A state slot (not a plain ref) so attaching the sentinel re-runs the effect below
+    // -- a callback ref's own node can't be an effect dependency otherwise.
+    const [sentinelNode, setSentinelNode] = React.useState(null);
+    const sentinelRef = React.useCallback((node)=>setSentinelNode(node), []);
+    React.useEffect(()=>{
+        if (!sentinelNode || !onLoadMore || typeof IntersectionObserver === "undefined") return;
+        // Effects run after every ref callback of the SAME commit (including
+        // `scrollRootRef`'s own, set by useDataTableScroll's `scrollAreaRef`) regardless
+        // of sibling ref attach order, so `scrollRootRef.current` is already populated
+        // here even on the very first render that mounts both elements at once. `null`
+        // (no scroll container yet, or none supplied) falls back to the browsing
+        // viewport, IntersectionObserver's own default.
+        const root = scrollRootRef?.current ?? null;
+        const observer = new IntersectionObserver((entries)=>{
+            if (entries.some((entry)=>entry.isIntersecting)) triggerLoadMore();
+        }, {
+            root,
+            rootMargin: ROOT_MARGIN
+        });
+        observer.observe(sentinelNode);
+        return ()=>observer.disconnect();
+    }, [
+        sentinelNode,
+        onLoadMore,
+        scrollRootRef,
+        triggerLoadMore
+    ]);
+    return {
+        /** Attach to the sentinel row's DOM node (a ref callback, `DataTable.tsx`'s own
+     *  `InfiniteScrollRow`). A no-op (no observer ever created) when `onLoadMore` is
+     *  omitted -- the styled layer still shouldn't render the sentinel at all in that
+     *  case (nothing to load more OF), this is just the inert fallback. */ sentinelRef,
+        /** Whether to keep rendering the sentinel row at all. */ hasMore,
+        /** A fetch is in flight -- shows the loading-more spinner row and gates further
+     *  triggers, whichever side (controlled or internal) reports it. */ loadingMore,
+        /** Fires `onLoadMore` directly, subject to the same `hasMore`/`loadingMore` gate
+     *  the observer itself uses -- exposed for a consumer that wants a manual retry
+     *  affordance (e.g. after a failed load) rather than only the observer's own
+     *  scroll trigger. */ triggerLoadMore
+    };
+}
+
+exports.useDataTableInfiniteScroll = useDataTableInfiniteScroll;

package/dist/useDataTableRow-12s-CPYaDa1p-12s-BmUSAnPe.js

@@ -0,0 +1,30 @@
+'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 { u as useDataTableContext } from './DataTable-12s-Zml1x9Kr-12s-Coi-3lUa.js';
+
+// Per-row read of the root's selection state -- the way useSelectItem reads
+// `getItemProps` off the root for one option. Kept as its own hook (rather than
+// inlined into the styled `DataTableRow`) so `DataTableCell`/`DataTableSelectionCell`
+// can read the SAME row's `isSelected`/`toggleRow` through `useDataTableRowContext`
+// without either subscribing to the whole table's context or being handed `rowId`
+// again as a prop.
+function useDataTableRow(props) {
+    const { rowId } = props;
+    const { isSelected, toggleRow, getRowProps } = useDataTableContext();
+    return {
+        rowId,
+        isSelected: isSelected(rowId),
+        toggleRow: ()=>toggleRow(rowId),
+        rootProps: getRowProps(rowId)
+    };
+}
+
+export { useDataTableRow as u };

package/dist/useDataTableRow-12s-CPYaDa1p-12s-D-DRjwAe.cjs

@@ -0,0 +1,30 @@
+'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 DataTable12sZml1x9Kr12s = require('./DataTable-12s-Zml1x9Kr-12s-CTRzgvMT.cjs');
+
+// Per-row read of the root's selection state -- the way useSelectItem reads
+// `getItemProps` off the root for one option. Kept as its own hook (rather than
+// inlined into the styled `DataTableRow`) so `DataTableCell`/`DataTableSelectionCell`
+// can read the SAME row's `isSelected`/`toggleRow` through `useDataTableRowContext`
+// without either subscribing to the whole table's context or being handed `rowId`
+// again as a prop.
+function useDataTableRow(props) {
+    const { rowId } = props;
+    const { isSelected, toggleRow, getRowProps } = DataTable12sZml1x9Kr12s.useDataTableContext();
+    return {
+        rowId,
+        isSelected: isSelected(rowId),
+        toggleRow: ()=>toggleRow(rowId),
+        rootProps: getRowProps(rowId)
+    };
+}
+
+exports.useDataTableRow = useDataTableRow;

package/dist/useDataTableScroll-12s-BKDCr0en-12s-C7f2vHeG.js

@@ -0,0 +1,61 @@
+'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 { useRef, useState, useCallback } from 'react';
+
+/**
+ * Tracks a horizontally-scrolling element's edge state for the sticky-column scroll
+ * shadow (DATATABLE-ATTIO-SPEC.md's `stickyFirst`/`stickyLast`) -- crisp's own
+ * `.crisp-table-scroll[data-scrolled-x]`/`[data-scrolled-x-end]`. Owns the DOM
+ * measurement the way `useSelectFloating` owns floating-ui's own DOM measurement: a
+ * real ref to a real scrollable element, re-measured on every scroll (and whenever the
+ * styled layer calls `remeasure`, e.g. after a column resize/reorder changes the
+ * scrollable width without the element itself ever firing a `scroll` event).
+ */ function useDataTableScroll() {
+    const elementRef = useRef(null);
+    const [scrolledStart, setScrolledStart] = useState(false);
+    const [scrolledEnd, setScrolledEnd] = useState(false);
+    const remeasure = useCallback(()=>{
+        const element = elementRef.current;
+        if (!element) return;
+        setScrolledStart(element.scrollLeft > 0);
+        // A 1px slop: sub-pixel layout can leave `scrollLeft + clientWidth` a fraction
+        // short of `scrollWidth` even when fully scrolled, which would otherwise leave
+        // the trailing shadow stuck on forever.
+        setScrolledEnd(element.scrollLeft + element.clientWidth < element.scrollWidth - 1);
+    }, []);
+    const scrollAreaRef = useCallback((node)=>{
+        elementRef.current = node;
+        if (node) remeasure();
+    }, [
+        remeasure
+    ]);
+    const onScroll = useCallback(()=>remeasure(), [
+        remeasure
+    ]);
+    return {
+        scrollAreaRef,
+        scrolledStart,
+        scrolledEnd,
+        onScroll,
+        remeasure,
+        // The raw ref object itself (not just the callback ref above) -- useDataTable.ts
+        // hands this to useDataTableInfiniteScroll as the IntersectionObserver `root` for
+        // its sentinel row, so a scrolled/bounded table (DATATABLE-ATTIO-SPEC.md's
+        // full-body-height feature) auto-loads against ITS OWN scroll boundary rather
+        // than the browsing viewport. A stable object identity (a plain ref, not state):
+        // useDataTableInfiniteScroll reads `.current` inside an effect, which always runs
+        // after every ref callback of the same commit (including this one), so the
+        // element is never read before it's attached regardless of sibling ref order.
+        elementRef
+    };
+}
+
+export { useDataTableScroll as u };

package/dist/useDataTableScroll-12s-BKDCr0en-12s-CUvUYMtt.cjs

@@ -0,0 +1,61 @@
+'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 React = require('react');
+
+/**
+ * Tracks a horizontally-scrolling element's edge state for the sticky-column scroll
+ * shadow (DATATABLE-ATTIO-SPEC.md's `stickyFirst`/`stickyLast`) -- crisp's own
+ * `.crisp-table-scroll[data-scrolled-x]`/`[data-scrolled-x-end]`. Owns the DOM
+ * measurement the way `useSelectFloating` owns floating-ui's own DOM measurement: a
+ * real ref to a real scrollable element, re-measured on every scroll (and whenever the
+ * styled layer calls `remeasure`, e.g. after a column resize/reorder changes the
+ * scrollable width without the element itself ever firing a `scroll` event).
+ */ function useDataTableScroll() {
+    const elementRef = React.useRef(null);
+    const [scrolledStart, setScrolledStart] = React.useState(false);
+    const [scrolledEnd, setScrolledEnd] = React.useState(false);
+    const remeasure = React.useCallback(()=>{
+        const element = elementRef.current;
+        if (!element) return;
+        setScrolledStart(element.scrollLeft > 0);
+        // A 1px slop: sub-pixel layout can leave `scrollLeft + clientWidth` a fraction
+        // short of `scrollWidth` even when fully scrolled, which would otherwise leave
+        // the trailing shadow stuck on forever.
+        setScrolledEnd(element.scrollLeft + element.clientWidth < element.scrollWidth - 1);
+    }, []);
+    const scrollAreaRef = React.useCallback((node)=>{
+        elementRef.current = node;
+        if (node) remeasure();
+    }, [
+        remeasure
+    ]);
+    const onScroll = React.useCallback(()=>remeasure(), [
+        remeasure
+    ]);
+    return {
+        scrollAreaRef,
+        scrolledStart,
+        scrolledEnd,
+        onScroll,
+        remeasure,
+        // The raw ref object itself (not just the callback ref above) -- useDataTable.ts
+        // hands this to useDataTableInfiniteScroll as the IntersectionObserver `root` for
+        // its sentinel row, so a scrolled/bounded table (DATATABLE-ATTIO-SPEC.md's
+        // full-body-height feature) auto-loads against ITS OWN scroll boundary rather
+        // than the browsing viewport. A stable object identity (a plain ref, not state):
+        // useDataTableInfiniteScroll reads `.current` inside an effect, which always runs
+        // after every ref callback of the same commit (including this one), so the
+        // element is never read before it's attached regardless of sibling ref order.
+        elementRef
+    };
+}
+
+exports.useDataTableScroll = useDataTableScroll;