@datum-cloud/datum-ui 2.3.1 → 2.3.2

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/grouped-table/index.mjs

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

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

@@ -1,7 +1,7 @@
 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";
@@ -11,7 +11,46 @@ 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

@@ -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-C5V8ESJe.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.3.2",
   "license": "MIT",
   "repository": {
     "url": "https://github.com/datum-cloud/datum-ui"