@datum-cloud/datum-ui 2.3.0 → 2.3.1

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-Dldsvwz6.mjs";
 export { GroupedTable };

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

@@ -1,13 +1,14 @@
 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 { 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 { flexRender, useTable } from "@tanstack/react-table";
@@ -33,12 +34,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
+			})
 		})
 	});
 }
@@ -285,15 +311,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,
@@ -307,7 +335,7 @@ function GroupedTable(props) {
 					})
 				]
 			}), /* @__PURE__ */ jsx(CollapsibleContent, {
-				className: "overflow-hidden data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down",
+				"data-slot": "grouped-table-group-content",
 				children: /* @__PURE__ */ jsxs("table", {
 					className: cn("w-full table-fixed text-sm", tableClassName),
 					"aria-label": typeof slice.title === "string" ? slice.title : void 0,
@@ -322,9 +350,9 @@ function GroupedTable(props) {
 						}),
 						/* @__PURE__ */ jsx(TableBody, {
 							className: bodyClassName,
-							children: slice.rows.map((row) => /* @__PURE__ */ jsx(TableRow, {
+							children: slice.rows.map((row, rowIndex) => /* @__PURE__ */ jsx(TableRow, {
 								"data-state": row.getIsSelected() ? "selected" : void 0,
-								className: resolveClassName(rowClassName, row),
+								className: cn(rowIndex === 0 && "border-t", 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--jejU1Jy.mjs";
+import { t as GroupedTable } from "./grouped-table-Dldsvwz6.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/package.json

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