@datum-cloud/datum-ui 2.3.1 → 2.4.0

package/dist/components/features/data-table/types.d.ts

@@ -333,4 +333,10 @@ export interface CreateStoreOptions<TData extends RowData> {
     readonly filterFns?: FilterFnMap;
     readonly isLoading?: boolean;
     readonly columnCount?: number;
+    /**
+     * Row identity, used to reconcile `rowSelection` across data changes.
+     * When omitted, TanStack falls back to array-index ids, which are
+     * meaningless across a data change — so selection is cleared instead.
+     */
+    readonly getRowId?: (row: TData) => string;
 }

package/dist/components/features/grouped-table/components/grouped-collapsible-body.d.ts

@@ -0,0 +1,18 @@
+import type { ReactNode } from 'react';
+/**
+ * Height animation for a group body. Do not use Radix CollapsibleContent:
+ * it measures `--radix-collapsible-content-height` with getBoundingClientRect,
+ * and later groups inside `overflow-x-auto` often measure as 0px.
+ *
+ * Keep this node mounted. AnimatePresence exit from `height: auto` has to
+ * measure on the way out, which is the beat of delay after a click.
+ * `initial={false}` skips the enter animation for groups that start open.
+ *
+ * Overflow stays hidden. The header/body divider is a 1px rule inside this
+ * wrapper, not a row `border-t`, so it is not clipped.
+ */
+export declare function GroupedCollapsibleBody({ open, reduceMotion, children, }: {
+    open: boolean;
+    reduceMotion: boolean;
+    children: ReactNode;
+}): import("react").JSX.Element;

package/dist/data-table/index.mjs

@@ -1,2 +1,2 @@
-import { _ as useNuqsAdapter, a as useDataTablePagination, b as DEFAULT_PAGE_SIZE, c as useDataTableSelection, d as resolvePath, f as rowMatchesSearch, g as createSelectionColumn, h as DataTableColumnHeader, i as useDataTableLoading, l as useDataTableSorting, m as DataTableRowActions, n as useDataTableFilters, o as useDataTableRows, p as dataTableFeatures, r as useDataTableInlineContents, s as useDataTableSearch, t as DataTable, u as createDataTableStore, v as DEFAULT_DEBOUNCE_MS, x as DEFAULT_PAGE_SIZES, y as DEFAULT_LOADING_ROWS } from "../data-table-Du7_FLBi.mjs";
+import { _ as useNuqsAdapter, a as useDataTablePagination, b as DEFAULT_PAGE_SIZE, c as useDataTableSelection, d as resolvePath, f as rowMatchesSearch, g as createSelectionColumn, h as DataTableColumnHeader, i as useDataTableLoading, l as useDataTableSorting, m as DataTableRowActions, n as useDataTableFilters, o as useDataTableRows, p as dataTableFeatures, r as useDataTableInlineContents, s as useDataTableSearch, t as DataTable, u as createDataTableStore, v as DEFAULT_DEBOUNCE_MS, x as DEFAULT_PAGE_SIZES, y as DEFAULT_LOADING_ROWS } from "../data-table-ClfRpyHq.mjs";
 export { DEFAULT_DEBOUNCE_MS, DEFAULT_LOADING_ROWS, DEFAULT_PAGE_SIZE, DEFAULT_PAGE_SIZES, DataTable, DataTableColumnHeader, DataTableRowActions, createDataTableStore, createSelectionColumn, dataTableFeatures, resolvePath, rowMatchesSearch, useDataTableFilters, useDataTableInlineContents, useDataTableLoading, useDataTablePagination, useDataTableRows, useDataTableSearch, useDataTableSelection, useDataTableSorting, useNuqsAdapter };

package/dist/{data-table-Du7_FLBi.mjs → data-table-ClfRpyHq.mjs}

@@ -313,6 +313,20 @@ function applyFilters(data, filters, search, registeredFilters, customFilterFns,
 }
 //#endregion
 //#region src/components/features/data-table/core/store.ts
+/**
+* Keep only the selection keys whose rows survive a data change.
+* Dropping vanished keys stops a deleted row's selection from
+* resurrecting if a row with the same id reappears later.
+*/
+function pruneSelection(selection, rows, getRowId) {
+	const keys = Object.keys(selection);
+	if (keys.length === 0) return selection;
+	const surviving = /* @__PURE__ */ new Set();
+	for (const row of rows) surviving.add(getRowId(row));
+	const next = {};
+	for (const key of keys) if (selection[key] && surviving.has(key)) next[key] = true;
+	return next;
+}
 function createDataTableStore(options) {
 	let registeredFilters = /* @__PURE__ */ new Map();
 	const listeners = /* @__PURE__ */ new Set();
@@ -362,13 +376,17 @@ function createDataTableStore(options) {
 		setData: (data) => {
 			const next = {
 				...state,
-				data,
-				pageIndex: 0,
-				rowSelection: {}
+				data
 			};
+			const filteredData = computeFilteredData(next);
+			const pageCount = Math.max(1, Math.ceil(filteredData.length / state.pageSize));
+			const pageIndex = Math.min(state.pageIndex, pageCount - 1);
+			const rowSelection = options.getRowId ? pruneSelection(state.rowSelection, filteredData, options.getRowId) : {};
 			setState({
 				...next,
-				filteredData: computeFilteredData(next)
+				filteredData,
+				pageIndex,
+				rowSelection
 			});
 		},
 		setServerData: (data) => {
@@ -1168,6 +1186,7 @@ function useClientTable(store, options) {
 			}) : updater;
 			store.setPagination(next.pageIndex, next.pageSize);
 		},
+		autoResetPageIndex: false,
 		getRowId,
 		enableRowSelection: !!enableRowSelection
 	});
@@ -1239,7 +1258,8 @@ function ClientProvider(props) {
 		columnCount: columns.length,
 		searchableColumns,
 		searchFn,
-		filterFns
+		filterFns,
+		getRowId
 	}), []);
 	const isInitialRender = useRef(true);
 	useEffect(() => {

package/dist/grouped-table/index.mjs

@@ -1,2 +1,2 @@
-import { t as GroupedTable } from "../grouped-table-Dldsvwz6.mjs";
+import { t as GroupedTable } from "../grouped-table-Bb9KoI1e.mjs";
 export { GroupedTable };

package/dist/{grouped-table-Dldsvwz6.mjs → grouped-table-Bb9KoI1e.mjs}

@@ -1,17 +1,56 @@
 import { t as cn } from "./utils-Bu32wN-x.mjs";
 import { t as Button } from "./button-A1qTjZ8U.mjs";
 import { t as Icon } from "./icon-wrapper-DKfJlJd0.mjs";
-import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "./collapsible/index.mjs";
+import { Collapsible, CollapsibleTrigger } from "./collapsible/index.mjs";
 import { t as useControllableState } from "./use-controllable-state-Dna7u3r9.mjs";
 import { Skeleton } from "./skeleton/index.mjs";
 import { TableBody, TableCell, TableHead, TableHeader, TableRow } from "./table/index.mjs";
-import { f as rowMatchesSearch, g as createSelectionColumn, h as DataTableColumnHeader, m as DataTableRowActions, p as dataTableFeatures } from "./data-table-Du7_FLBi.mjs";
+import { f as rowMatchesSearch, g as createSelectionColumn, h as DataTableColumnHeader, m as DataTableRowActions, p as dataTableFeatures } from "./data-table-ClfRpyHq.mjs";
 import { n as useDebouncedSearchInput } from "./use-debounced-search-input-yu_F0QBt.mjs";
 import { InputWithAddons } from "./input-with-addons/index.mjs";
 import { ChevronRight, Search, X } from "lucide-react";
 import { useCallback, useMemo, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { motion, useReducedMotion } from "motion/react";
 import { flexRender, useTable } from "@tanstack/react-table";
+//#region src/components/features/grouped-table/components/grouped-collapsible-body.tsx
+const OPEN_TRANSITION = {
+	duration: .18,
+	ease: [
+		.23,
+		1,
+		.32,
+		1
+	]
+};
+const INSTANT = { duration: 0 };
+/**
+* Height animation for a group body. Do not use Radix CollapsibleContent:
+* it measures `--radix-collapsible-content-height` with getBoundingClientRect,
+* and later groups inside `overflow-x-auto` often measure as 0px.
+*
+* Keep this node mounted. AnimatePresence exit from `height: auto` has to
+* measure on the way out, which is the beat of delay after a click.
+* `initial={false}` skips the enter animation for groups that start open.
+*
+* Overflow stays hidden. The header/body divider is a 1px rule inside this
+* wrapper, not a row `border-t`, so it is not clipped.
+*/
+function GroupedCollapsibleBody({ open, reduceMotion, children }) {
+	return /* @__PURE__ */ jsxs(motion.div, {
+		"data-slot": "grouped-table-group-content",
+		initial: false,
+		animate: { height: open ? "auto" : 0 },
+		transition: reduceMotion ? INSTANT : OPEN_TRANSITION,
+		className: "overflow-hidden",
+		inert: !open,
+		children: [/* @__PURE__ */ jsx("div", {
+			"data-slot": "grouped-table-group-rule",
+			className: "bg-border h-px"
+		}), children]
+	});
+}
+//#endregion
 //#region src/components/features/grouped-table/components/grouped-skeleton.tsx
 function GroupedSkeleton({ columns = 4, groups = 2, rowsPerGroup = 3 }) {
 	return /* @__PURE__ */ jsx("div", {
@@ -228,6 +267,7 @@ function GroupedTable(props) {
 		expanded,
 		onExpandedChange
 	});
+	const reduceMotion = Boolean(useReducedMotion());
 	const resolvedColumns = useMemo(() => composeColumns(columns, {
 		enableRowSelection,
 		enableSorting,
@@ -249,7 +289,11 @@ function GroupedTable(props) {
 		state: {
 			sorting,
 			rowSelection,
-			globalFilter: search
+			globalFilter: search,
+			pagination: {
+				pageIndex: 0,
+				pageSize: Math.max(flatData.length, 1)
+			}
 		},
 		onSortingChange: setSorting,
 		onRowSelectionChange: setRowSelection,
@@ -265,7 +309,7 @@ function GroupedTable(props) {
 	});
 	const headerGroups = table.getHeaderGroups();
 	const coreRows = table.getCoreRowModel().rows;
-	const filteredRows = table.getRowModel().rows;
+	const filteredRows = table.getFilteredRowModel().rows;
 	const buckets = useMemo(() => bucketRows(groups, coreRows, filteredRows), [
 		groups,
 		coreRows,
@@ -334,8 +378,9 @@ function GroupedTable(props) {
 						children: slice.meta
 					})
 				]
-			}), /* @__PURE__ */ jsx(CollapsibleContent, {
-				"data-slot": "grouped-table-group-content",
+			}), /* @__PURE__ */ jsx(GroupedCollapsibleBody, {
+				open,
+				reduceMotion,
 				children: /* @__PURE__ */ jsxs("table", {
 					className: cn("w-full table-fixed text-sm", tableClassName),
 					"aria-label": typeof slice.title === "string" ? slice.title : void 0,
@@ -350,9 +395,9 @@ function GroupedTable(props) {
 						}),
 						/* @__PURE__ */ jsx(TableBody, {
 							className: bodyClassName,
-							children: slice.rows.map((row, rowIndex) => /* @__PURE__ */ jsx(TableRow, {
+							children: slice.rows.map((row) => /* @__PURE__ */ jsx(TableRow, {
 								"data-state": row.getIsSelected() ? "selected" : void 0,
-								className: cn(rowIndex === 0 && "border-t", resolveClassName(rowClassName, row)),
+								className: resolveClassName(rowClassName, row),
 								children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx(TableCell, {
 									className: resolveClassName(cellClassName, cell),
 									children: flexRender(cell.column.columnDef.cell, cell.getContext())

package/dist/index.mjs

@@ -53,7 +53,7 @@ import { i as ClientOnly, n as useTheme, r as ThemeScript, t as ThemeProvider }
 import { a as formatJson, c as isValidYaml, d as CodeEditor, i as CodeEditorTabs, l as jsonToYaml, n as jsonSchema, o as formatYaml, r as yamlSchema, s as isValidJson, t as createCodeEditorSchema, u as yamlToJson } from "./types-agDpVXBG.mjs";
 import { t as toast } from "./toast-BUPlDkN3.mjs";
 import { n as Toaster, t as useToast } from "./use-toast-Bpq0yJIT.mjs";
-import { _ as useNuqsAdapter, a as useDataTablePagination, b as DEFAULT_PAGE_SIZE, c as useDataTableSelection, d as resolvePath, f as rowMatchesSearch, g as createSelectionColumn, h as DataTableColumnHeader, i as useDataTableLoading, l as useDataTableSorting, m as DataTableRowActions, n as useDataTableFilters, o as useDataTableRows, p as dataTableFeatures, r as useDataTableInlineContents, s as useDataTableSearch, t as DataTable, u as createDataTableStore, v as DEFAULT_DEBOUNCE_MS, x as DEFAULT_PAGE_SIZES, y as DEFAULT_LOADING_ROWS } from "./data-table-Du7_FLBi.mjs";
+import { _ as useNuqsAdapter, a as useDataTablePagination, b as DEFAULT_PAGE_SIZE, c as useDataTableSelection, d as resolvePath, f as rowMatchesSearch, g as createSelectionColumn, h as DataTableColumnHeader, i as useDataTableLoading, l as useDataTableSorting, m as DataTableRowActions, n as useDataTableFilters, o as useDataTableRows, p as dataTableFeatures, r as useDataTableInlineContents, s as useDataTableSearch, t as DataTable, u as createDataTableStore, v as DEFAULT_DEBOUNCE_MS, x as DEFAULT_PAGE_SIZES, y as DEFAULT_LOADING_ROWS } from "./data-table-ClfRpyHq.mjs";
 import { t as ActionRow } from "./action-row-DTvs91_3.mjs";
 import { n as useDebouncedSearchInput, t as DEFAULT_SEARCH_DEBOUNCE_MS } from "./use-debounced-search-input-yu_F0QBt.mjs";
 import { t as MultiSelect } from "./multi-select-PtdMChPF.mjs";
@@ -69,7 +69,7 @@ import { InputWithAddons } from "./input-with-addons/index.mjs";
 import { t as TimePicker } from "./time-picker-CFhaHTtI.mjs";
 import { t as Transfer } from "./transfer-CEq9AhL7.mjs";
 import { a as getResponsiveValue, c as GRID_COLUMNS, d as RESPONSIVE_MAP, i as getGutter, l as GRID_PREFIX, n as Row, o as registerMediaQuery, r as RowContext, s as GRID_BREAKPOINTS, t as Col, u as RESPONSIVE_ARRAY } from "./col-BYGWTB4j.mjs";
-import { t as GroupedTable } from "./grouped-table-Dldsvwz6.mjs";
+import { t as GroupedTable } from "./grouped-table-Bb9KoI1e.mjs";
 import { t as InputNumber } from "./input-number-TXmW-X9o.mjs";
 import { a as logoStyles, i as LogoFlat, n as LogoStacked, r as LogoIcon, t as LogoText } from "./logo-text-Dpm5O6Kg.mjs";
 import { t as Logo } from "./logo-C3FxD7jb.mjs";

package/dist/table/index.mjs

@@ -23,7 +23,7 @@ function TableHeader({ className, ...props }) {
 function TableBody({ className, ...props }) {
 	return /* @__PURE__ */ jsx("tbody", {
 		"data-slot": "table-body",
-		className: cn("[&_tr:last-child]:border-0", className),
+		className: cn("[&_tr:last-child]:border-b-0", className),
 		...props
 	});
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@datum-cloud/datum-ui",
   "type": "module",
-  "version": "2.3.1",
+  "version": "2.4.0",
   "license": "MIT",
   "repository": {
     "url": "https://github.com/datum-cloud/datum-ui"