@datum-cloud/datum-ui 2.3.0 → 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--jejU1Jy.mjs";
+import { t as GroupedTable } from "../grouped-table-C5V8ESJe.mjs";
 export { GroupedTable };

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

@@ -1,16 +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 { t as Input } from "./input-j4tbmYYz.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 { n as useDebouncedSearchInput } from "./use-debounced-search-input-yu_F0QBt.mjs";
-import { ChevronRight } from "lucide-react";
+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", {
@@ -33,12 +73,37 @@ function GroupedToolbar({ search, onSearchChange, placeholder = "Search...", deb
 	return /* @__PURE__ */ jsx("div", {
 		className: cn("pb-3", className),
 		"data-slot": "gt-toolbar",
-		children: /* @__PURE__ */ jsx(Input, {
-			placeholder,
-			value,
-			onChange: (e) => setValue(e.target.value),
-			"aria-label": placeholder,
-			"data-slot": "gt-search"
+		children: /* @__PURE__ */ jsx("div", {
+			className: "w-full min-w-full flex-1 rounded-md sm:max-w-3xs md:min-w-80",
+			children: /* @__PURE__ */ jsx(InputWithAddons, {
+				type: "text",
+				placeholder,
+				value,
+				onChange: (e) => setValue(e.target.value),
+				containerClassName: "h-9",
+				className: "h-full text-xs placeholder:text-xs md:text-xs",
+				"aria-label": placeholder,
+				"data-slot": "gt-search",
+				leading: /* @__PURE__ */ jsx(Icon, {
+					icon: Search,
+					size: 14,
+					className: "text-icon-quaternary"
+				}),
+				trailing: value ? /* @__PURE__ */ jsxs(Button, {
+					type: "quaternary",
+					theme: "borderless",
+					size: "icon",
+					onClick: () => setValue(""),
+					className: "hover:text-destructive text-icon-quaternary size-4 p-0 hover:bg-transparent",
+					children: [/* @__PURE__ */ jsx(Icon, {
+						icon: X,
+						size: 14
+					}), /* @__PURE__ */ jsx("span", {
+						className: "sr-only",
+						children: "Clear search"
+					})]
+				}) : void 0
+			})
 		})
 	});
 }
@@ -202,6 +267,7 @@ function GroupedTable(props) {
 		expanded,
 		onExpandedChange
 	});
+	const reduceMotion = Boolean(useReducedMotion());
 	const resolvedColumns = useMemo(() => composeColumns(columns, {
 		enableRowSelection,
 		enableSorting,
@@ -223,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,
@@ -239,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,
@@ -285,15 +355,17 @@ function GroupedTable(props) {
 				children: header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())
 			}, header.id))
 		}, hg.id)) })]
-	}), visibleSlices.map((slice) => {
+	}), visibleSlices.map((slice, sliceIndex) => {
 		const open = isSearching ? true : isOpen(slice.id);
 		return /* @__PURE__ */ jsxs(Collapsible, {
 			open,
+			"data-slot": "grouped-table-group",
+			className: cn(sliceIndex > 0 && "border-border border-t"),
 			onOpenChange: () => {
 				if (!isSearching) toggle(slice.id);
 			},
 			children: [/* @__PURE__ */ jsxs(CollapsibleTrigger, {
-				className: cn("flex h-10 w-full items-center gap-2 border-b bg-muted/40 px-2 text-left align-middle text-sm font-medium text-muted-foreground transition-colors hover:bg-muted/60 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", resolveClassName(groupHeaderClassName, slice.group)),
+				className: cn("flex h-10 w-full items-center gap-2 bg-muted/40 px-2 text-left align-middle text-sm font-medium text-muted-foreground transition-colors hover:bg-muted/60 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", resolveClassName(groupHeaderClassName, slice.group)),
 				children: [
 					/* @__PURE__ */ jsx(Icon, {
 						icon: ChevronRight,
@@ -306,8 +378,9 @@ function GroupedTable(props) {
 						children: slice.meta
 					})
 				]
-			}), /* @__PURE__ */ jsx(CollapsibleContent, {
-				className: "overflow-hidden data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down",
+			}), /* @__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,

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--jejU1Jy.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.0",
+  "version": "2.3.2",
   "license": "MIT",
   "repository": {
     "url": "https://github.com/datum-cloud/datum-ui"