@crispy-seed/data-table 0.1.0

package/dist/toolbar-12s-AVU-sbDW.js

@@ -0,0 +1,69 @@
+'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 { jsxs, jsx } from 'react/jsx-runtime';
+import 'react';
+import { z as withContext, A as dataTable, B as IconMagnifyingglassLine_default } from './DataTable-12s-Bd20OuMs.js';
+import { Primitive } from '@seed-design/react-primitive';
+import { c as TextFieldRoot, d as TextFieldPrefixIcon, e as TextFieldInput } from './editors-12s-BO9Mp034.js';
+import { u as useDataTableContext } from './DataTable-12s-Zml1x9Kr-12s-Coi-3lUa.js';
+
+const DataTableToolbar = withContext(Primitive.div, "toolbar");
+const DataTableCount = withContext(Primitive.span, "count");
+/**
+ * Fix (recurring bug): the search box is seed's own DOCUMENTED `TextField`
+ * composition -- `TextFieldRoot` (`variant="outline" size="medium"`) +
+ * `TextFieldPrefixIcon` + `TextFieldInput`, exactly `docs/examples/react/
+ * text-field-input/prefix.tsx` -- not that same trio fought with a custom
+ * `classNames.search` overriding its height/padding/icon position with `!important`.
+ * That override (this file's own previous state) is what kept mis-placing the icon:
+ * every fix landed on ANOTHER property the override was still fighting (the icon's own
+ * intrinsic SVG size, its inherited margin, the root's own min-height beating a plain
+ * `height` override) because the override was never the right layer to fix it at.
+ * `size="medium"`'s built-in prefix-icon spacing (a flex `gap` + edge margins, not
+ * absolute positioning) is what `text-input.ts`'s own variant CSS already gets right,
+ * so it needs no help from this component at all -- `search` (recipe.ts) is now just
+ * this box's own layout constraint (`flex`, `max-width`) within the toolbar row, not
+ * its internal chrome.
+ */ function SearchBox({ placeholder, label }) {
+    const { query, setQuery } = useDataTableContext();
+    const classNames = dataTable();
+    return /*#__PURE__*/ jsxs(TextFieldRoot, {
+        variant: "outline",
+        size: "medium",
+        className: classNames.search,
+        children: [
+            /*#__PURE__*/ jsx(TextFieldPrefixIcon, {
+                svg: /*#__PURE__*/ jsx(IconMagnifyingglassLine_default, {})
+            }),
+            /*#__PURE__*/ jsx(TextFieldInput, {
+                type: "text",
+                value: query,
+                onChange: (event)=>setQuery(event.target.value),
+                placeholder: placeholder,
+                "aria-label": label
+            })
+        ]
+    });
+}
+/** crisp's own count format (`datatable.tsx`'s `resolvedCountLabel`): unfiltered reads
+ *  "N rows" ("N row" for exactly one), filtered/searched reads "N of M" with no
+ *  trailing word at all -- reproduced literally rather than reinvented, since this is
+ *  the one piece of copy DATATABLE-ATTIO-SPEC.md calls out by example. */ function defaultCountLabel(shown, total) {
+    if (shown === total) return `${total} ${total === 1 ? "row" : "rows"}`;
+    return `${shown} of ${total}`;
+}
+function RowCount({ shown, total, countLabel }) {
+    return /*#__PURE__*/ jsx(DataTableCount, {
+        children: (countLabel ?? defaultCountLabel)(shown, total)
+    });
+}
+
+export { DataTableToolbar as D, RowCount as R, SearchBox as S };

package/dist/toolbar-12s-CaLgJrDo.cjs

@@ -0,0 +1,71 @@
+'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 jsxRuntime = require('react/jsx-runtime');
+require('react');
+var DataTable12s = require('./DataTable-12s-8LMBtS2u.cjs');
+var reactPrimitive = require('@seed-design/react-primitive');
+var editors12s = require('./editors-12s-DO8TZkYV.cjs');
+var DataTable12sZml1x9Kr12s = require('./DataTable-12s-Zml1x9Kr-12s-CTRzgvMT.cjs');
+
+const DataTableToolbar = DataTable12s.withContext(reactPrimitive.Primitive.div, "toolbar");
+const DataTableCount = DataTable12s.withContext(reactPrimitive.Primitive.span, "count");
+/**
+ * Fix (recurring bug): the search box is seed's own DOCUMENTED `TextField`
+ * composition -- `TextFieldRoot` (`variant="outline" size="medium"`) +
+ * `TextFieldPrefixIcon` + `TextFieldInput`, exactly `docs/examples/react/
+ * text-field-input/prefix.tsx` -- not that same trio fought with a custom
+ * `classNames.search` overriding its height/padding/icon position with `!important`.
+ * That override (this file's own previous state) is what kept mis-placing the icon:
+ * every fix landed on ANOTHER property the override was still fighting (the icon's own
+ * intrinsic SVG size, its inherited margin, the root's own min-height beating a plain
+ * `height` override) because the override was never the right layer to fix it at.
+ * `size="medium"`'s built-in prefix-icon spacing (a flex `gap` + edge margins, not
+ * absolute positioning) is what `text-input.ts`'s own variant CSS already gets right,
+ * so it needs no help from this component at all -- `search` (recipe.ts) is now just
+ * this box's own layout constraint (`flex`, `max-width`) within the toolbar row, not
+ * its internal chrome.
+ */ function SearchBox({ placeholder, label }) {
+    const { query, setQuery } = DataTable12sZml1x9Kr12s.useDataTableContext();
+    const classNames = DataTable12s.dataTable();
+    return /*#__PURE__*/ jsxRuntime.jsxs(editors12s.TextFieldRoot, {
+        variant: "outline",
+        size: "medium",
+        className: classNames.search,
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx(editors12s.TextFieldPrefixIcon, {
+                svg: /*#__PURE__*/ jsxRuntime.jsx(DataTable12s.IconMagnifyingglassLine_default, {})
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(editors12s.TextFieldInput, {
+                type: "text",
+                value: query,
+                onChange: (event)=>setQuery(event.target.value),
+                placeholder: placeholder,
+                "aria-label": label
+            })
+        ]
+    });
+}
+/** crisp's own count format (`datatable.tsx`'s `resolvedCountLabel`): unfiltered reads
+ *  "N rows" ("N row" for exactly one), filtered/searched reads "N of M" with no
+ *  trailing word at all -- reproduced literally rather than reinvented, since this is
+ *  the one piece of copy DATATABLE-ATTIO-SPEC.md calls out by example. */ function defaultCountLabel(shown, total) {
+    if (shown === total) return `${total} ${total === 1 ? "row" : "rows"}`;
+    return `${shown} of ${total}`;
+}
+function RowCount({ shown, total, countLabel }) {
+    return /*#__PURE__*/ jsxRuntime.jsx(DataTableCount, {
+        children: (countLabel ?? defaultCountLabel)(shown, total)
+    });
+}
+
+exports.DataTableToolbar = DataTableToolbar;
+exports.RowCount = RowCount;
+exports.SearchBox = SearchBox;

package/dist/useDataTable-12s-BHiDUubw-12s-CBeCwTe7.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 { elementProps } from '@seed-design/dom-utils';
+import { u as useDataTableColumnCalc } from './useDataTableColumnCalc-12s-DTQQTtEJ-12s-DsEse3uq.js';
+import { u as useDataTableColumns } from './useDataTableColumns-12s-Cn2ZAzFL-12s-CD6goR59.js';
+import { u as useDataTableEdit } from './useDataTableEdit-12s-9Wb_UCrN-12s-BoOHq3GB.js';
+import { u as useDataTableFilter } from './useDataTableFilter-12s-ZzbmWMin-12s-CWyBeFna.js';
+import { u as useDataTableInfiniteScroll } from './useDataTableInfiniteScroll-12s-8ZG31URd-12s-BexjP6iO.js';
+import { u as useDataTableScroll } from './useDataTableScroll-12s-BKDCr0en-12s-C7f2vHeG.js';
+import { u as useDataTableSearch } from './useDataTableSearch-12s-Ck3iWcpX-12s-B-65V6gH.js';
+import { u as useDataTableSelection } from './useDataTableSelection-12s-BIDtiRQq-12s-O6M_BhrH.js';
+import { u as useDataTableSort } from './useDataTableSort-12s-DvJYtmeS-12s-DABSNt6U.js';
+
+// Composes the eight independent concerns a table root owns -- which column is
+// sorted, which rows are selected, the toolbar's free-text query, each column's own
+// filter, column order/visibility/width/label, each column's ColumnCalc footer op, the
+// horizontal scroll-shadow edge state, and which single cell is mid-edit/pending/
+// erroring -- the way useSelect composes useSelectHighlight + useSelectOptions. No
+// sub-hook knows about any other; a future concern (row grouping) is a ninth sibling
+// call here, not a branch inside an existing one.
+function useDataTable(props) {
+    const sort = useDataTableSort(props);
+    const selection = useDataTableSelection(props);
+    const search = useDataTableSearch(props);
+    const filter = useDataTableFilter(props);
+    const columns = useDataTableColumns(props);
+    const columnCalc = useDataTableColumnCalc(props);
+    const scroll = useDataTableScroll();
+    const edit = useDataTableEdit(props);
+    // Wired to `scroll`'s own scroll-container ref (not a fresh one of its own) so a
+    // BOUNDED table's auto-load triggers off its own internal scroll, not the
+    // browsing viewport -- see useDataTableInfiniteScroll.ts's own doc comment.
+    const infiniteScroll = useDataTableInfiniteScroll({
+        ...props,
+        scrollRootRef: scroll.elementRef
+    });
+    return {
+        ...sort,
+        ...selection,
+        ...search,
+        ...filter,
+        ...columns,
+        ...columnCalc,
+        ...scroll,
+        ...edit,
+        ...infiniteScroll,
+        rootProps: elementProps({
+            role: "table"
+        })
+    };
+}
+
+export { useDataTable as u };

package/dist/useDataTable-12s-BHiDUubw-12s-Dgvt7XDk.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 domUtils = require('@seed-design/dom-utils');
+var useDataTableColumnCalc12sDTQQTtEJ12s = require('./useDataTableColumnCalc-12s-DTQQTtEJ-12s-CvD14JYo.cjs');
+var useDataTableColumns12sCn2ZAzFL12s = require('./useDataTableColumns-12s-Cn2ZAzFL-12s-CUk_CpYT.cjs');
+var useDataTableEdit12s9Wb_UCrN12s = require('./useDataTableEdit-12s-9Wb_UCrN-12s-De6YHBba.cjs');
+var useDataTableFilter12sZzbmWMin12s = require('./useDataTableFilter-12s-ZzbmWMin-12s-lpjzZY3_.cjs');
+var useDataTableInfiniteScroll12s8ZG31URd12s = require('./useDataTableInfiniteScroll-12s-8ZG31URd-12s-Bt8gojr9.cjs');
+var useDataTableScroll12sBKDCr0en12s = require('./useDataTableScroll-12s-BKDCr0en-12s-CUvUYMtt.cjs');
+var useDataTableSearch12sCk3iWcpX12s = require('./useDataTableSearch-12s-Ck3iWcpX-12s-DhVfN2Hq.cjs');
+var useDataTableSelection12sBIDtiRQq12s = require('./useDataTableSelection-12s-BIDtiRQq-12s-IS__VAnU.cjs');
+var useDataTableSort12sDvJYtmeS12s = require('./useDataTableSort-12s-DvJYtmeS-12s-C5VGnsq4.cjs');
+
+// Composes the eight independent concerns a table root owns -- which column is
+// sorted, which rows are selected, the toolbar's free-text query, each column's own
+// filter, column order/visibility/width/label, each column's ColumnCalc footer op, the
+// horizontal scroll-shadow edge state, and which single cell is mid-edit/pending/
+// erroring -- the way useSelect composes useSelectHighlight + useSelectOptions. No
+// sub-hook knows about any other; a future concern (row grouping) is a ninth sibling
+// call here, not a branch inside an existing one.
+function useDataTable(props) {
+    const sort = useDataTableSort12sDvJYtmeS12s.useDataTableSort(props);
+    const selection = useDataTableSelection12sBIDtiRQq12s.useDataTableSelection(props);
+    const search = useDataTableSearch12sCk3iWcpX12s.useDataTableSearch(props);
+    const filter = useDataTableFilter12sZzbmWMin12s.useDataTableFilter(props);
+    const columns = useDataTableColumns12sCn2ZAzFL12s.useDataTableColumns(props);
+    const columnCalc = useDataTableColumnCalc12sDTQQTtEJ12s.useDataTableColumnCalc(props);
+    const scroll = useDataTableScroll12sBKDCr0en12s.useDataTableScroll();
+    const edit = useDataTableEdit12s9Wb_UCrN12s.useDataTableEdit(props);
+    // Wired to `scroll`'s own scroll-container ref (not a fresh one of its own) so a
+    // BOUNDED table's auto-load triggers off its own internal scroll, not the
+    // browsing viewport -- see useDataTableInfiniteScroll.ts's own doc comment.
+    const infiniteScroll = useDataTableInfiniteScroll12s8ZG31URd12s.useDataTableInfiniteScroll({
+        ...props,
+        scrollRootRef: scroll.elementRef
+    });
+    return {
+        ...sort,
+        ...selection,
+        ...search,
+        ...filter,
+        ...columns,
+        ...columnCalc,
+        ...scroll,
+        ...edit,
+        ...infiniteScroll,
+        rootProps: domUtils.elementProps({
+            role: "table"
+        })
+    };
+}
+
+exports.useDataTable = useDataTable;

package/dist/useDataTableColumnCalc-12s-DTQQTtEJ-12s-CvD14JYo.cjs

@@ -0,0 +1,207 @@
+'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 _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return n;
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+// packages/react/use-layout-effect/src/use-layout-effect.tsx
+var useLayoutEffect2 = globalThis?.document ? React__namespace.useLayoutEffect : ()=>{};
+
+// src/use-controllable-state.tsx
+var useInsertionEffect = React__namespace[" useInsertionEffect ".trim().toString()] || useLayoutEffect2;
+function useControllableState({ prop, defaultProp, onChange = ()=>{}, caller }) {
+    const [uncontrolledProp, setUncontrolledProp, onChangeRef] = useUncontrolledState({
+        defaultProp,
+        onChange
+    });
+    const isControlled = prop !== void 0;
+    const value = isControlled ? prop : uncontrolledProp;
+    {
+        const isControlledRef = React__namespace.useRef(prop !== void 0);
+        React__namespace.useEffect(()=>{
+            const wasControlled = isControlledRef.current;
+            if (wasControlled !== isControlled) {
+                const from = wasControlled ? "controlled" : "uncontrolled";
+                const to = isControlled ? "controlled" : "uncontrolled";
+                console.warn(`${caller} is changing from ${from} to ${to}. Components should not switch from controlled to uncontrolled (or vice versa). Decide between using a controlled or uncontrolled value for the lifetime of the component.`);
+            }
+            isControlledRef.current = isControlled;
+        }, [
+            isControlled,
+            caller
+        ]);
+    }
+    const setValue = React__namespace.useCallback((nextValue)=>{
+        if (isControlled) {
+            const value2 = isFunction(nextValue) ? nextValue(prop) : nextValue;
+            if (value2 !== prop) {
+                onChangeRef.current?.(value2);
+            }
+        } else {
+            setUncontrolledProp(nextValue);
+        }
+    }, [
+        isControlled,
+        prop,
+        setUncontrolledProp,
+        onChangeRef
+    ]);
+    return [
+        value,
+        setValue
+    ];
+}
+function useUncontrolledState({ defaultProp, onChange }) {
+    const [value, setValue] = React__namespace.useState(defaultProp);
+    const prevValueRef = React__namespace.useRef(value);
+    const onChangeRef = React__namespace.useRef(onChange);
+    useInsertionEffect(()=>{
+        onChangeRef.current = onChange;
+    }, [
+        onChange
+    ]);
+    React__namespace.useEffect(()=>{
+        if (prevValueRef.current !== value) {
+            onChangeRef.current?.(value);
+            prevValueRef.current = value;
+        }
+    }, [
+        value,
+        prevValueRef
+    ]);
+    return [
+        value,
+        setValue,
+        onChangeRef
+    ];
+}
+function isFunction(value) {
+    return typeof value === "function";
+}
+
+const DATA_TABLE_UNIVERSAL_CALC_OPS = [
+    "count",
+    "countFilled"
+];
+const DATA_TABLE_NUMERIC_CALC_OPS = [
+    "sum",
+    "average",
+    "min",
+    "max"
+];
+const DATA_TABLE_CALC_LABEL = {
+    count: "Count",
+    countFilled: "Count filled",
+    sum: "Sum",
+    average: "Average",
+    min: "Min",
+    max: "Max"
+};
+/** A value counts as empty when it is null/undefined, an empty string, or an empty
+ *  array -- crisp's own `isEmptyValue` (columncalc.tsx), reused verbatim. */ function isEmptyValueForCalc(value) {
+    if (value == null) return true;
+    if (typeof value === "string") return value.trim() === "";
+    if (Array.isArray(value)) return value.length === 0;
+    return false;
+}
+/**
+ * Pure so the arithmetic is independently (and mutation-) testable without rendering a
+ * table at all. `sum`/`average`/`min`/`max` skip empty values and non-numeric ones
+ * (coerced via `Number`, dropping `NaN`); they return `null` -- render nothing, not a
+ * misleading 0 -- when there is nothing numeric left to reduce over.
+ */ function computeColumnCalc(values, op) {
+    switch(op){
+        case "count":
+            return values.length;
+        case "countFilled":
+            return values.filter((value)=>!isEmptyValueForCalc(value)).length;
+    }
+    const numbers = values.filter((value)=>!isEmptyValueForCalc(value)).map((value)=>typeof value === "number" ? value : Number(value)).filter((value)=>Number.isFinite(value));
+    if (numbers.length === 0) return null;
+    switch(op){
+        case "sum":
+            return numbers.reduce((total, value)=>total + value, 0);
+        case "average":
+            return numbers.reduce((total, value)=>total + value, 0) / numbers.length;
+        case "min":
+            return Math.min(...numbers);
+        case "max":
+            return Math.max(...numbers);
+        default:
+            return null;
+    }
+}
+const EMPTY_OPS = {};
+// Owns which aggregation (if any) each column's ColumnCalc footer cell currently
+// shows -- the way useDataTableFilter owns one filter per column key. The actual
+// REDUCE over row values needs `TRow` (a type this headless package never sees), so
+// -- same split as sort/search/filter -- this hook only tracks WHICH op is active per
+// column; the styled layer (DataTable.tsx's `ColumnCalcCell`) calls `computeColumnCalc`
+// with the column's own resolved values.
+function useDataTableColumnCalc(props) {
+    const { columnCalcOps: opsProp, defaultColumnCalcOps = EMPTY_OPS, onColumnCalcOpsChange } = props;
+    const [columnCalcOps = EMPTY_OPS, setColumnCalcOps] = useControllableState({
+        prop: opsProp,
+        defaultProp: defaultColumnCalcOps,
+        onChange: onColumnCalcOpsChange
+    });
+    const getColumnCalcOp = React.useCallback((columnKey)=>columnCalcOps[columnKey], [
+        columnCalcOps
+    ]);
+    const setColumnCalcOp = React.useCallback((columnKey, op)=>{
+        setColumnCalcOps((current = EMPTY_OPS)=>{
+            if (op === undefined) {
+                if (!(columnKey in current)) return current;
+                const next = {
+                    ...current
+                };
+                delete next[columnKey];
+                return next;
+            }
+            return {
+                ...current,
+                [columnKey]: op
+            };
+        });
+    }, [
+        setColumnCalcOps
+    ]);
+    return {
+        columnCalcOps,
+        getColumnCalcOp,
+        setColumnCalcOp
+    };
+}
+
+exports.DATA_TABLE_CALC_LABEL = DATA_TABLE_CALC_LABEL;
+exports.DATA_TABLE_NUMERIC_CALC_OPS = DATA_TABLE_NUMERIC_CALC_OPS;
+exports.DATA_TABLE_UNIVERSAL_CALC_OPS = DATA_TABLE_UNIVERSAL_CALC_OPS;
+exports.computeColumnCalc = computeColumnCalc;
+exports.useControllableState = useControllableState;
+exports.useDataTableColumnCalc = useDataTableColumnCalc;

package/dist/useDataTableColumnCalc-12s-DTQQTtEJ-12s-DsEse3uq.js

@@ -0,0 +1,183 @@
+'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 * as React from 'react';
+import { useCallback } from 'react';
+
+// packages/react/use-layout-effect/src/use-layout-effect.tsx
+var useLayoutEffect2 = globalThis?.document ? React.useLayoutEffect : ()=>{};
+
+// src/use-controllable-state.tsx
+var useInsertionEffect = React[" useInsertionEffect ".trim().toString()] || useLayoutEffect2;
+function useControllableState({ prop, defaultProp, onChange = ()=>{}, caller }) {
+    const [uncontrolledProp, setUncontrolledProp, onChangeRef] = useUncontrolledState({
+        defaultProp,
+        onChange
+    });
+    const isControlled = prop !== void 0;
+    const value = isControlled ? prop : uncontrolledProp;
+    {
+        const isControlledRef = React.useRef(prop !== void 0);
+        React.useEffect(()=>{
+            const wasControlled = isControlledRef.current;
+            if (wasControlled !== isControlled) {
+                const from = wasControlled ? "controlled" : "uncontrolled";
+                const to = isControlled ? "controlled" : "uncontrolled";
+                console.warn(`${caller} is changing from ${from} to ${to}. Components should not switch from controlled to uncontrolled (or vice versa). Decide between using a controlled or uncontrolled value for the lifetime of the component.`);
+            }
+            isControlledRef.current = isControlled;
+        }, [
+            isControlled,
+            caller
+        ]);
+    }
+    const setValue = React.useCallback((nextValue)=>{
+        if (isControlled) {
+            const value2 = isFunction(nextValue) ? nextValue(prop) : nextValue;
+            if (value2 !== prop) {
+                onChangeRef.current?.(value2);
+            }
+        } else {
+            setUncontrolledProp(nextValue);
+        }
+    }, [
+        isControlled,
+        prop,
+        setUncontrolledProp,
+        onChangeRef
+    ]);
+    return [
+        value,
+        setValue
+    ];
+}
+function useUncontrolledState({ defaultProp, onChange }) {
+    const [value, setValue] = React.useState(defaultProp);
+    const prevValueRef = React.useRef(value);
+    const onChangeRef = React.useRef(onChange);
+    useInsertionEffect(()=>{
+        onChangeRef.current = onChange;
+    }, [
+        onChange
+    ]);
+    React.useEffect(()=>{
+        if (prevValueRef.current !== value) {
+            onChangeRef.current?.(value);
+            prevValueRef.current = value;
+        }
+    }, [
+        value,
+        prevValueRef
+    ]);
+    return [
+        value,
+        setValue,
+        onChangeRef
+    ];
+}
+function isFunction(value) {
+    return typeof value === "function";
+}
+
+const DATA_TABLE_UNIVERSAL_CALC_OPS = [
+    "count",
+    "countFilled"
+];
+const DATA_TABLE_NUMERIC_CALC_OPS = [
+    "sum",
+    "average",
+    "min",
+    "max"
+];
+const DATA_TABLE_CALC_LABEL = {
+    count: "Count",
+    countFilled: "Count filled",
+    sum: "Sum",
+    average: "Average",
+    min: "Min",
+    max: "Max"
+};
+/** A value counts as empty when it is null/undefined, an empty string, or an empty
+ *  array -- crisp's own `isEmptyValue` (columncalc.tsx), reused verbatim. */ function isEmptyValueForCalc(value) {
+    if (value == null) return true;
+    if (typeof value === "string") return value.trim() === "";
+    if (Array.isArray(value)) return value.length === 0;
+    return false;
+}
+/**
+ * Pure so the arithmetic is independently (and mutation-) testable without rendering a
+ * table at all. `sum`/`average`/`min`/`max` skip empty values and non-numeric ones
+ * (coerced via `Number`, dropping `NaN`); they return `null` -- render nothing, not a
+ * misleading 0 -- when there is nothing numeric left to reduce over.
+ */ function computeColumnCalc(values, op) {
+    switch(op){
+        case "count":
+            return values.length;
+        case "countFilled":
+            return values.filter((value)=>!isEmptyValueForCalc(value)).length;
+    }
+    const numbers = values.filter((value)=>!isEmptyValueForCalc(value)).map((value)=>typeof value === "number" ? value : Number(value)).filter((value)=>Number.isFinite(value));
+    if (numbers.length === 0) return null;
+    switch(op){
+        case "sum":
+            return numbers.reduce((total, value)=>total + value, 0);
+        case "average":
+            return numbers.reduce((total, value)=>total + value, 0) / numbers.length;
+        case "min":
+            return Math.min(...numbers);
+        case "max":
+            return Math.max(...numbers);
+        default:
+            return null;
+    }
+}
+const EMPTY_OPS = {};
+// Owns which aggregation (if any) each column's ColumnCalc footer cell currently
+// shows -- the way useDataTableFilter owns one filter per column key. The actual
+// REDUCE over row values needs `TRow` (a type this headless package never sees), so
+// -- same split as sort/search/filter -- this hook only tracks WHICH op is active per
+// column; the styled layer (DataTable.tsx's `ColumnCalcCell`) calls `computeColumnCalc`
+// with the column's own resolved values.
+function useDataTableColumnCalc(props) {
+    const { columnCalcOps: opsProp, defaultColumnCalcOps = EMPTY_OPS, onColumnCalcOpsChange } = props;
+    const [columnCalcOps = EMPTY_OPS, setColumnCalcOps] = useControllableState({
+        prop: opsProp,
+        defaultProp: defaultColumnCalcOps,
+        onChange: onColumnCalcOpsChange
+    });
+    const getColumnCalcOp = useCallback((columnKey)=>columnCalcOps[columnKey], [
+        columnCalcOps
+    ]);
+    const setColumnCalcOp = useCallback((columnKey, op)=>{
+        setColumnCalcOps((current = EMPTY_OPS)=>{
+            if (op === undefined) {
+                if (!(columnKey in current)) return current;
+                const next = {
+                    ...current
+                };
+                delete next[columnKey];
+                return next;
+            }
+            return {
+                ...current,
+                [columnKey]: op
+            };
+        });
+    }, [
+        setColumnCalcOps
+    ]);
+    return {
+        columnCalcOps,
+        getColumnCalcOp,
+        setColumnCalcOp
+    };
+}
+
+export { DATA_TABLE_CALC_LABEL as D, DATA_TABLE_UNIVERSAL_CALC_OPS as a, DATA_TABLE_NUMERIC_CALC_OPS as b, computeColumnCalc as c, useControllableState as d, useDataTableColumnCalc as u };