@crispy-seed/data-table 0.1.0

package/dist/useDataTableSearch-12s-Ck3iWcpX-12s-B-65V6gH.js

@@ -0,0 +1,37 @@
+'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';
+
+// Owns the toolbar's single free-text query -- the way useDataTableSort owns the single
+// active sort column. It has no idea which columns are searchable or how a row's value
+// is read off them (that needs `TRow`, a type this headless package never sees), so
+// narrowing `data` against the query is the styled layer's job (DataTable.tsx's
+// `getVisibleRows`) -- the same split sort already draws: this hook tracks WHICH state
+// is active, the styled layer decides what that state does to the rows.
+function useDataTableSearch(props) {
+    const { query: queryProp, defaultQuery = "", onQueryChange } = props;
+    const [query = "", setQuery] = useControllableState({
+        prop: queryProp,
+        defaultProp: defaultQuery,
+        onChange: onQueryChange
+    });
+    const clearQuery = useCallback(()=>setQuery(""), [
+        setQuery
+    ]);
+    return {
+        query,
+        setQuery,
+        clearQuery
+    };
+}
+
+export { useDataTableSearch as u };

package/dist/useDataTableSearch-12s-Ck3iWcpX-12s-DhVfN2Hq.cjs

@@ -0,0 +1,37 @@
+'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');
+
+// Owns the toolbar's single free-text query -- the way useDataTableSort owns the single
+// active sort column. It has no idea which columns are searchable or how a row's value
+// is read off them (that needs `TRow`, a type this headless package never sees), so
+// narrowing `data` against the query is the styled layer's job (DataTable.tsx's
+// `getVisibleRows`) -- the same split sort already draws: this hook tracks WHICH state
+// is active, the styled layer decides what that state does to the rows.
+function useDataTableSearch(props) {
+    const { query: queryProp, defaultQuery = "", onQueryChange } = props;
+    const [query = "", setQuery] = useDataTableColumnCalc12sDTQQTtEJ12s.useControllableState({
+        prop: queryProp,
+        defaultProp: defaultQuery,
+        onChange: onQueryChange
+    });
+    const clearQuery = React.useCallback(()=>setQuery(""), [
+        setQuery
+    ]);
+    return {
+        query,
+        setQuery,
+        clearQuery
+    };
+}
+
+exports.useDataTableSearch = useDataTableSearch;

package/dist/useDataTableSelection-12s-BIDtiRQq-12s-IS__VAnU.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 useDataTableColumnCalc12sDTQQTtEJ12s = require('./useDataTableColumnCalc-12s-DTQQTtEJ-12s-CvD14JYo.cjs');
+var domUtils = require('@seed-design/dom-utils');
+var React = require('react');
+var useDataTableColumns12sCn2ZAzFL12s = require('./useDataTableColumns-12s-Cn2ZAzFL-12s-CUk_CpYT.cjs');
+
+// Owns the selected-id set and its two shapes of toggle (one row, select-all) --
+// the way useSelectOptions owns the selected VALUE. `selectionState` and `toggleAll`
+// are always computed against `rowIds` (the currently rendered order), never against
+// `selectedIds` alone -- see dom.ts's `computeSelectionState` doc comment.
+function useDataTableSelection(props) {
+    const { rowIds = [], selectable = false, selectedIds: selectedIdsProp, defaultSelectedIds = [], onSelectionChange } = props;
+    const [selectedIds = [], setSelectedIds] = useDataTableColumnCalc12sDTQQTtEJ12s.useControllableState({
+        prop: selectedIdsProp,
+        defaultProp: defaultSelectedIds,
+        onChange: onSelectionChange
+    });
+    const selectedIdSet = React.useMemo(()=>new Set(selectedIds), [
+        selectedIds
+    ]);
+    const isSelected = React.useCallback((id)=>selectedIdSet.has(id), [
+        selectedIdSet
+    ]);
+    const toggleRow = React.useCallback((id)=>{
+        setSelectedIds((current = [])=>useDataTableColumns12sCn2ZAzFL12s.toggleMembership(current, id));
+    }, [
+        setSelectedIds
+    ]);
+    const selectionState = React.useMemo(()=>useDataTableColumns12sCn2ZAzFL12s.computeSelectionState(rowIds, selectedIds), [
+        rowIds,
+        selectedIds
+    ]);
+    const toggleAll = React.useCallback(()=>{
+        setSelectedIds(selectionState === "all" ? [] : rowIds);
+    }, [
+        selectionState,
+        rowIds,
+        setSelectedIds
+    ]);
+    const getRowProps = React.useCallback((rowId)=>{
+        const isRowSelected = isSelected(rowId);
+        return domUtils.elementProps({
+            role: "row",
+            "aria-selected": domUtils.ariaAttr(isRowSelected),
+            "data-selected": domUtils.dataAttr(isRowSelected)
+        });
+    }, [
+        isSelected
+    ]);
+    return {
+        selectable,
+        rowIds,
+        selectedIds,
+        selectionState,
+        isSelected,
+        toggleRow,
+        toggleAll,
+        getRowProps
+    };
+}
+
+exports.useDataTableSelection = useDataTableSelection;

package/dist/useDataTableSelection-12s-BIDtiRQq-12s-O6M_BhrH.js

@@ -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))
+}
+
+import { d as useControllableState } from './useDataTableColumnCalc-12s-DTQQTtEJ-12s-DsEse3uq.js';
+import { elementProps, dataAttr, ariaAttr } from '@seed-design/dom-utils';
+import { useMemo, useCallback } from 'react';
+import { t as toggleMembership, c as computeSelectionState } from './useDataTableColumns-12s-Cn2ZAzFL-12s-CD6goR59.js';
+
+// Owns the selected-id set and its two shapes of toggle (one row, select-all) --
+// the way useSelectOptions owns the selected VALUE. `selectionState` and `toggleAll`
+// are always computed against `rowIds` (the currently rendered order), never against
+// `selectedIds` alone -- see dom.ts's `computeSelectionState` doc comment.
+function useDataTableSelection(props) {
+    const { rowIds = [], selectable = false, selectedIds: selectedIdsProp, defaultSelectedIds = [], onSelectionChange } = props;
+    const [selectedIds = [], setSelectedIds] = useControllableState({
+        prop: selectedIdsProp,
+        defaultProp: defaultSelectedIds,
+        onChange: onSelectionChange
+    });
+    const selectedIdSet = useMemo(()=>new Set(selectedIds), [
+        selectedIds
+    ]);
+    const isSelected = useCallback((id)=>selectedIdSet.has(id), [
+        selectedIdSet
+    ]);
+    const toggleRow = useCallback((id)=>{
+        setSelectedIds((current = [])=>toggleMembership(current, id));
+    }, [
+        setSelectedIds
+    ]);
+    const selectionState = useMemo(()=>computeSelectionState(rowIds, selectedIds), [
+        rowIds,
+        selectedIds
+    ]);
+    const toggleAll = useCallback(()=>{
+        setSelectedIds(selectionState === "all" ? [] : rowIds);
+    }, [
+        selectionState,
+        rowIds,
+        setSelectedIds
+    ]);
+    const getRowProps = useCallback((rowId)=>{
+        const isRowSelected = isSelected(rowId);
+        return elementProps({
+            role: "row",
+            "aria-selected": ariaAttr(isRowSelected),
+            "data-selected": dataAttr(isRowSelected)
+        });
+    }, [
+        isSelected
+    ]);
+    return {
+        selectable,
+        rowIds,
+        selectedIds,
+        selectionState,
+        isSelected,
+        toggleRow,
+        toggleAll,
+        getRowProps
+    };
+}
+
+export { useDataTableSelection as u };

package/dist/useDataTableSort-12s-DvJYtmeS-12s-C5VGnsq4.cjs

@@ -0,0 +1,78 @@
+'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');
+
+// Owns the single active sort column/direction and the click/keyboard toggle that
+// cycles it -- the way useSelectHighlight owns the single active index. A header
+// cell's full prop set (aria-sort, data-sortable/data-sorted, the click and
+// Enter/Space handlers) is built here too, beside the state it reads, rather than
+// re-derived in the styled layer or the root primitive.
+function useDataTableSort(props) {
+    const { sort: sortProp, defaultSort, onSortChange } = props;
+    const [sort, setSort] = useDataTableColumnCalc12sDTQQTtEJ12s.useControllableState({
+        prop: sortProp,
+        defaultProp: defaultSort,
+        onChange: (nextSort)=>{
+            // `toggleSort` never sets `sort` back to `undefined`, but the underlying state is
+            // typed as possibly-undefined so an uncontrolled table can start with no sort at all.
+            if (nextSort) onSortChange?.(nextSort);
+        }
+    });
+    const toggleSort = React.useCallback((key)=>{
+        setSort((current)=>{
+            if (!current || current.key !== key) return {
+                key,
+                dir: "asc"
+            };
+            return {
+                key,
+                dir: current.dir === "asc" ? "desc" : "asc"
+            };
+        });
+    }, [
+        setSort
+    ]);
+    const getHeaderCellProps = React.useCallback((columnKey, sortable)=>{
+        const isSorted = Boolean(columnKey) && sort?.key === columnKey;
+        const canSort = Boolean(sortable && columnKey);
+        return domUtils.elementProps({
+            role: "columnheader",
+            "aria-sort": canSort ? isSorted ? sort?.dir === "asc" ? "ascending" : "descending" : "none" : undefined,
+            tabIndex: canSort ? 0 : undefined,
+            "data-sortable": domUtils.dataAttr(canSort),
+            "data-sorted": domUtils.dataAttr(isSorted),
+            "data-sort-direction": isSorted ? sort?.dir : undefined,
+            onClick (event) {
+                if (event.defaultPrevented || !canSort || !columnKey) return;
+                toggleSort(columnKey);
+            },
+            onKeyDown (event) {
+                if (event.defaultPrevented || !canSort || !columnKey) return;
+                if (event.key === "Enter" || event.key === " ") {
+                    event.preventDefault();
+                    toggleSort(columnKey);
+                }
+            }
+        });
+    }, [
+        sort,
+        toggleSort
+    ]);
+    return {
+        sort,
+        toggleSort,
+        getHeaderCellProps
+    };
+}
+
+exports.useDataTableSort = useDataTableSort;

package/dist/useDataTableSort-12s-DvJYtmeS-12s-DABSNt6U.js

@@ -0,0 +1,78 @@
+'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 { elementProps, dataAttr } from '@seed-design/dom-utils';
+import { useCallback } from 'react';
+
+// Owns the single active sort column/direction and the click/keyboard toggle that
+// cycles it -- the way useSelectHighlight owns the single active index. A header
+// cell's full prop set (aria-sort, data-sortable/data-sorted, the click and
+// Enter/Space handlers) is built here too, beside the state it reads, rather than
+// re-derived in the styled layer or the root primitive.
+function useDataTableSort(props) {
+    const { sort: sortProp, defaultSort, onSortChange } = props;
+    const [sort, setSort] = useControllableState({
+        prop: sortProp,
+        defaultProp: defaultSort,
+        onChange: (nextSort)=>{
+            // `toggleSort` never sets `sort` back to `undefined`, but the underlying state is
+            // typed as possibly-undefined so an uncontrolled table can start with no sort at all.
+            if (nextSort) onSortChange?.(nextSort);
+        }
+    });
+    const toggleSort = useCallback((key)=>{
+        setSort((current)=>{
+            if (!current || current.key !== key) return {
+                key,
+                dir: "asc"
+            };
+            return {
+                key,
+                dir: current.dir === "asc" ? "desc" : "asc"
+            };
+        });
+    }, [
+        setSort
+    ]);
+    const getHeaderCellProps = useCallback((columnKey, sortable)=>{
+        const isSorted = Boolean(columnKey) && sort?.key === columnKey;
+        const canSort = Boolean(sortable && columnKey);
+        return elementProps({
+            role: "columnheader",
+            "aria-sort": canSort ? isSorted ? sort?.dir === "asc" ? "ascending" : "descending" : "none" : undefined,
+            tabIndex: canSort ? 0 : undefined,
+            "data-sortable": dataAttr(canSort),
+            "data-sorted": dataAttr(isSorted),
+            "data-sort-direction": isSorted ? sort?.dir : undefined,
+            onClick (event) {
+                if (event.defaultPrevented || !canSort || !columnKey) return;
+                toggleSort(columnKey);
+            },
+            onKeyDown (event) {
+                if (event.defaultPrevented || !canSort || !columnKey) return;
+                if (event.key === "Enter" || event.key === " ") {
+                    event.preventDefault();
+                    toggleSort(columnKey);
+                }
+            }
+        });
+    }, [
+        sort,
+        toggleSort
+    ]);
+    return {
+        sort,
+        toggleSort,
+        getHeaderCellProps
+    };
+}
+
+export { useDataTableSort as u };

package/package.json

@@ -0,0 +1,78 @@
+{
+  "name": "@crispy-seed/data-table",
+  "version": "0.1.0",
+  "description": "Self-contained, publishable build of seed-design's Attio-measured DataTable — one install, one CSS import.",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/daangn/seed-design.git",
+    "directory": "packages/data-table-dist"
+  },
+  "license": "Apache-2.0",
+  "type": "module",
+  "sideEffects": [
+    "*.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./styles.css": "./dist/styles.css",
+    "./data-table-recipe.css": "./dist/data-table-recipe.css",
+    "./data-table-recipe.layered.css": "./dist/data-table-recipe.layered.css",
+    "./package.json": "./package.json"
+  },
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE",
+    "NOTICE"
+  ],
+  "scripts": {
+    "build": "bunchee --dts-bundle --external @seed-design/css/recipes/avatar,@seed-design/css/recipes/avatar-stack,@seed-design/css/recipes/badge,@seed-design/css/recipes/checkbox,@seed-design/css/recipes/checkbox-group,@seed-design/css/recipes/checkmark,@seed-design/css/recipes/menu,@seed-design/css/recipes/menu-item,@seed-design/css/recipes/segmented-control,@seed-design/css/recipes/select,@seed-design/css/recipes/select-item,@seed-design/css/recipes/select-trigger,@seed-design/css/recipes/switch,@seed-design/css/recipes/switchmark,@seed-design/css/recipes/text-input && node scripts/copy-css.mjs",
+    "clean": "rm -rf dist"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18",
+    "@seed-design/dom-utils": "^2.1.0",
+    "@seed-design/react-checkbox": "^2.0.1",
+    "@seed-design/react-field": "^2.0.1",
+    "@seed-design/react-image": "^1.1.0",
+    "@seed-design/react-menu": "^2.0.2",
+    "@seed-design/react-primitive": "^2.0.1",
+    "@seed-design/react-scale-feedback": "^1.0.0",
+    "@seed-design/react-segmented-control": "^2.0.2",
+    "@seed-design/react-select": "^1.0.1",
+    "@seed-design/react-switch": "^2.0.1",
+    "@seed-design/react-text-field": "^2.0.1"
+  },
+  "devDependencies": {
+    "@seed-design/css": "^2.8.0",
+    "@seed-design/dom-utils": "^2.1.0",
+    "@seed-design/react-checkbox": "^2.0.1",
+    "@seed-design/react-data-table": "^0.0.0",
+    "@seed-design/react-field": "^2.0.1",
+    "@seed-design/react-image": "^1.1.0",
+    "@seed-design/react-menu": "^2.0.2",
+    "@seed-design/react-primitive": "^2.0.1",
+    "@seed-design/react-scale-feedback": "^1.0.0",
+    "@seed-design/react-segmented-control": "^2.0.2",
+    "@seed-design/react-select": "^1.0.1",
+    "@seed-design/react-switch": "^2.0.1",
+    "@seed-design/react-text-field": "^2.0.1",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.1",
+    "bunchee": "^6.6.2",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  }
+}