@api7/ui-components 0.7.0 → 0.8.1

package/dist/components/data-table/data-table.js

@@ -1,24 +1,30 @@
 "use client";
-import { useMessages } from "../../config/config-provider.js";
-import { cn } from "../../lib/cn.js";
+import { ExpandableRow } from "./expandable-row.js";
+import { FilterHeader } from "./filter-header.js";
+import { SortHeader } from "./sort-header.js";
+import { useTableLayout } from "./use-table-layout.js";
 import { DEFAULT_PAGE_SIZE_OPTIONS, Pagination } from "../pagination/pagination.js";
 import { Skeleton } from "../skeleton/skeleton.js";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../table/table.js";
-import { FilterHeader } from "./filter-header.js";
-import { SortHeader } from "./sort-header.js";
-import { useEffect, useState } from "react";
+import { useMessages } from "../../config/config-provider.js";
+import { cn } from "../../lib/cn.js";
+import { useEffect, useId, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { columnFilteringFeature, columnVisibilityFeature, constructFilterFn, createColumnHelper, createFilteredRowModel, createPaginatedRowModel, createSortedRowModel, flexRender, rowPaginationFeature, rowSortingFeature, sortFn_alphanumeric, sortFn_basic, sortFn_datetime, sortFn_text, tableFeatures, useTable } from "@tanstack/react-table";
+import { columnFilteringFeature, columnPinningFeature, columnSizingFeature, columnVisibilityFeature, constructFilterFn, createColumnHelper, createFilteredRowModel, createPaginatedRowModel, createSortedRowModel, flexRender, rowExpandingFeature, rowPaginationFeature, rowSortingFeature, sortFn_alphanumeric, sortFn_basic, sortFn_datetime, sortFn_text, tableFeatures, useTable } from "@tanstack/react-table";
 // src/components/data-table/data-table.tsx
 const LOADING_ROW_COUNT = 4;
+const EXPAND_COLUMN_WIDTH = 48;
 const filterFn_oneOf = constructFilterFn({
 	filter: (value, chosen) => chosen.includes(String(value)),
 	autoRemove: (chosen) => !Array.isArray(chosen) || chosen.length === 0
 });
 const dataTableFeatures = tableFeatures({
 	columnFilteringFeature,
+	columnPinningFeature,
+	columnSizingFeature,
 	columnVisibilityFeature,
 	rowSortingFeature,
+	rowExpandingFeature,
 	rowPaginationFeature,
 	filteredRowModel: createFilteredRowModel(),
 	sortedRowModel: createSortedRowModel(),
@@ -34,8 +40,20 @@ const dataTableFeatures = tableFeatures({
 function createDataTableColumnHelper() {
 	return createColumnHelper();
 }
-function DataTable({ columns, data, getRowId, sorting, defaultSorting, onSortingChange, manualSorting, columnFilters, onColumnFiltersChange, manualFiltering, pagination, defaultPagination, onPaginationChange, manualPagination, rowCount, pageSizeOptions = DEFAULT_PAGE_SIZE_OPTIONS, hidePagination, paginationLabel, loading, empty, toolbar, className }) {
+function hasColumnSize(columns) {
+	return columns.some((column) => column.size !== void 0 || "columns" in column && hasColumnSize(column.columns ?? []));
+}
+function DataTable({ columns, data, getRowId, renderExpandedRow, getRowCanExpand, expanded, defaultExpanded, onExpandedChange, columnPinning, defaultColumnPinning, onColumnPinningChange, sorting, defaultSorting, onSortingChange, manualSorting, columnFilters, onColumnFiltersChange, manualFiltering, pagination, defaultPagination, onPaginationChange, manualPagination, rowCount, pageSizeOptions = DEFAULT_PAGE_SIZE_OPTIONS, hidePagination, paginationLabel, loading, showHeader = true, empty, toolbar, className }) {
 	const messages = useMessages();
+	const expansionColumnId = useId();
+	const expandable = renderExpandedRow !== void 0;
+	const [internalExpanded, setInternalExpanded] = useState(defaultExpanded ?? {});
+	const expandedState = expanded ?? internalExpanded;
+	const [internalPinning, setInternalPinning] = useState(defaultColumnPinning ?? {
+		start: [],
+		end: []
+	});
+	const pinningState = columnPinning ?? internalPinning;
 	const [internalSorting, setInternalSorting] = useState(defaultSorting ?? []);
 	const sortingState = sorting ?? internalSorting;
 	const [internalFilters, setInternalFilters] = useState([]);
@@ -62,9 +80,23 @@ function DataTable({ columns, data, getRowId, sorting, defaultSorting, onSorting
 		columns,
 		getRowId,
 		state: {
+			expanded: expandedState,
 			sorting: sortingState,
 			columnFilters: filtersState,
-			pagination: shownPagination
+			pagination: shownPagination,
+			columnPinning: pinningState
+		},
+		getRowCanExpand: (row) => expandable && (getRowCanExpand?.(row.original) ?? true),
+		autoResetExpanded: false,
+		onExpandedChange: (updater) => {
+			const next = typeof updater === "function" ? updater(expandedState) : updater;
+			if (expanded === void 0) setInternalExpanded(next);
+			onExpandedChange?.(next);
+		},
+		onColumnPinningChange: (updater) => {
+			const next = typeof updater === "function" ? updater(pinningState) : updater;
+			if (columnPinning === void 0) setInternalPinning(next);
+			onColumnPinningChange?.(next);
 		},
 		onColumnFiltersChange: (updater) => {
 			const next = typeof updater === "function" ? updater(filtersState) : updater;
@@ -109,8 +141,25 @@ function DataTable({ columns, data, getRowId, sorting, defaultSorting, onSorting
 		paginationState.pageSize,
 		hidePagination
 	]);
+	const startColumns = table.getStartVisibleLeafColumns();
+	const endColumns = table.getEndVisibleLeafColumns();
+	const visibleColumns = [
+		...startColumns,
+		...table.getCenterVisibleLeafColumns(),
+		...endColumns
+	];
+	const sized = visibleColumns.some((column) => column.getIsPinned()) || hasColumnSize(columns);
+	const { tableRef, containerRef, containerWidth, columnStyles, cellClass: pinnedCellClass } = useTableLayout(JSON.stringify([
+		sized,
+		expandable,
+		visibleColumns.map((column) => [column.id, column.getSize()])
+	]), expandable && startColumns.length > 0 ? [{
+		id: expansionColumnId,
+		getSize: () => EXPAND_COLUMN_WIDTH
+	}, ...startColumns] : startColumns, endColumns);
+	const cellClass = (column, header = false) => cn(sized && "[overflow-wrap:anywhere]", pinnedCellClass(column.id, header), column.columnDef.meta?.className);
 	return /* @__PURE__ */ jsxs("div", {
-		className: cn("w-full", className),
+		className: cn("w-full min-w-0", className),
 		"data-slot": "data-table",
 		children: [
 			toolbar ? /* @__PURE__ */ jsx("div", {
@@ -118,38 +167,104 @@ function DataTable({ columns, data, getRowId, sorting, defaultSorting, onSorting
 				"data-slot": "data-table-toolbar",
 				children: toolbar
 			}) : null,
-			/* @__PURE__ */ jsxs(Table, { children: [/* @__PURE__ */ jsx(TableHeader, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx(TableRow, { children: headerGroup.headers.map((header) => {
-				const canSort = header.column.getCanSort();
-				const sorted = canSort ? header.column.getIsSorted() : false;
-				const ariaSort = sorted === "asc" ? "ascending" : sorted === "desc" ? "descending" : void 0;
-				const filter = header.column.columnDef.meta?.filter;
-				const content = flexRender(header.column.columnDef.header, header.getContext());
-				const title = canSort ? /* @__PURE__ */ jsx(SortHeader, {
-					column: header.column,
-					children: content
-				}) : content;
-				return /* @__PURE__ */ jsx(TableHead, {
-					className: header.column.columnDef.meta?.className,
-					"aria-sort": ariaSort,
-					children: header.isPlaceholder ? null : filter ? /* @__PURE__ */ jsxs("div", {
-						className: "flex items-center gap-1",
-						children: [title, /* @__PURE__ */ jsx(FilterHeader, {
-							column: header.column,
-							filter
+			/* @__PURE__ */ jsxs(Table, {
+				ref: tableRef,
+				containerRef,
+				className: sized ? cn("table-fixed border-separate border-spacing-0 [&_td]:border-b [&_td]:border-border", showHeader && "[&_th]:border-b [&_th]:border-border") : void 0,
+				style: sized ? { minWidth: table.getTotalSize() + (expandable ? EXPAND_COLUMN_WIDTH : 0) } : void 0,
+				children: [
+					(sized || expandable) && /* @__PURE__ */ jsxs("colgroup", { children: [expandable && /* @__PURE__ */ jsx("col", {
+						"data-column-id": expansionColumnId,
+						style: { width: EXPAND_COLUMN_WIDTH }
+					}), visibleColumns.map((column) => /* @__PURE__ */ jsx("col", {
+						"data-column-id": column.id,
+						style: sized ? { width: expandable ? `${column.getSize() / table.getTotalSize() * 100}%` : column.getSize() } : void 0
+					}, column.id))] }),
+					/* @__PURE__ */ jsx(TableHeader, { children: table.getHeaderGroups().map((headerGroup, index) => /* @__PURE__ */ jsxs(TableRow, {
+						className: showHeader ? void 0 : "border-b-0",
+						children: [expandable && index === 0 && /* @__PURE__ */ jsx(TableHead, {
+							rowSpan: table.getHeaderGroups().length,
+							className: cn(showHeader ? "px-2" : "h-0 p-0", pinnedCellClass(expansionColumnId, true)),
+							style: columnStyles.get(expansionColumnId),
+							children: /* @__PURE__ */ jsx("span", {
+								className: "sr-only",
+								children: messages.dataTable.rowDetails
+							})
+						}), headerGroup.headers.map((header) => {
+							const canSort = header.column.getCanSort();
+							const sorted = canSort ? header.column.getIsSorted() : false;
+							const ariaSort = sorted === "asc" ? "ascending" : sorted === "desc" ? "descending" : void 0;
+							if (!showHeader) {
+								const definition = header.column.columnDef;
+								const label = definition.meta?.accessibleLabel ?? (typeof definition.header === "string" ? definition.header : header.column.id);
+								return /* @__PURE__ */ jsx(TableHead, {
+									colSpan: header.colSpan,
+									"aria-sort": ariaSort,
+									className: "h-0 p-0",
+									children: header.isPlaceholder ? null : /* @__PURE__ */ jsx("span", {
+										className: "sr-only",
+										children: label
+									})
+								}, header.id);
+							}
+							const filter = header.column.columnDef.meta?.filter;
+							const content = flexRender(header.column.columnDef.header, header.getContext());
+							const title = canSort ? /* @__PURE__ */ jsx(SortHeader, {
+								column: header.column,
+								children: content
+							}) : content;
+							return /* @__PURE__ */ jsx(TableHead, {
+								colSpan: header.colSpan,
+								className: cellClass(header.column, true),
+								style: columnStyles.get(header.column.id),
+								"aria-sort": ariaSort,
+								children: header.isPlaceholder ? null : filter ? /* @__PURE__ */ jsxs("div", {
+									className: "flex items-center gap-1",
+									children: [title, /* @__PURE__ */ jsx(FilterHeader, {
+										column: header.column,
+										filter
+									})]
+								}) : title
+							}, header.id);
 						})]
-					}) : title
-				}, header.id);
-			}) }, headerGroup.id)) }), /* @__PURE__ */ jsx(TableBody, { children: loading ? Array.from({ length: LOADING_ROW_COUNT }).map((_, rowIndex) => /* @__PURE__ */ jsx(TableRow, {
-				className: "h-14",
-				children: table.getVisibleLeafColumns().map((column) => /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-full" }) }, column.id))
-			}, `skeleton-${rowIndex}`)) : table.getRowModel().rows.length === 0 ? /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, {
-				colSpan: table.getVisibleLeafColumns().length,
-				className: "h-[200px] text-center text-xl font-medium text-muted-foreground",
-				children: empty ?? messages.dataTable.empty
-			}) }) : table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx(TableRow, { children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx(TableCell, {
-				className: cell.column.columnDef.meta?.className,
-				children: flexRender(cell.column.columnDef.cell, cell.getContext())
-			}, cell.id)) }, row.id)) })] }),
+					}, headerGroup.id)) }),
+					/* @__PURE__ */ jsx(TableBody, {
+						className: "[&_[data-expanded-row]:hover]:bg-transparent",
+						children: loading ? Array.from({ length: LOADING_ROW_COUNT }).map((_, rowIndex) => /* @__PURE__ */ jsxs(TableRow, {
+							className: "h-14",
+							children: [expandable && /* @__PURE__ */ jsx(TableCell, {
+								className: pinnedCellClass(expansionColumnId),
+								style: columnStyles.get(expansionColumnId)
+							}), visibleColumns.map((column) => /* @__PURE__ */ jsx(TableCell, {
+								className: cellClass(column),
+								style: columnStyles.get(column.id),
+								children: /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-full" })
+							}, column.id))]
+						}, `skeleton-${rowIndex}`)) : table.getRowModel().rows.length === 0 ? /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, {
+							colSpan: visibleColumns.length + (expandable ? 1 : 0),
+							className: "h-[200px] text-center text-xl font-medium text-muted-foreground",
+							children: empty ?? messages.dataTable.empty
+						}) }) : table.getRowModel().rows.map((row) => {
+							const cells = row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx(TableCell, {
+								className: cellClass(cell.column),
+								style: columnStyles.get(cell.column.id),
+								children: flexRender(cell.column.columnDef.cell, cell.getContext())
+							}, cell.id));
+							return renderExpandedRow ? /* @__PURE__ */ jsx(ExpandableRow, {
+								canExpand: row.getCanExpand(),
+								expanded: row.getIsExpanded(),
+								onToggle: row.getToggleExpandedHandler(),
+								renderDetails: () => renderExpandedRow(row.original),
+								colSpan: visibleColumns.length + 1,
+								detailsWidth: startColumns.length || endColumns.length ? containerWidth : void 0,
+								controlClassName: pinnedCellClass(expansionColumnId),
+								controlStyle: columnStyles.get(expansionColumnId),
+								children: cells
+							}, row.id) : /* @__PURE__ */ jsx(TableRow, { children: cells }, row.id);
+						})
+					})
+				]
+			}),
 			hidePagination ? null : /* @__PURE__ */ jsx(Pagination, {
 				label: paginationLabel,
 				pageIndex: shownPagination.pageIndex,

package/dist/components/data-table/expandable-row.js

@@ -0,0 +1,40 @@
+"use client";
+import { TableCell, TableRow } from "../table/table.js";
+import { useMessages } from "../../config/config-provider.js";
+import { cn } from "../../lib/cn.js";
+import { useId, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+// src/components/data-table/expandable-row.tsx
+function ExpandableRow({ children, canExpand, expanded, onToggle, renderDetails, colSpan, detailsWidth, controlClassName, controlStyle }) {
+	const messages = useMessages();
+	const detailsId = useId();
+	const [visited, setVisited] = useState(expanded);
+	if (expanded && !visited) setVisited(true);
+	const hasDetails = canExpand && (expanded || visited);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(TableRow, { children: [/* @__PURE__ */ jsx(TableCell, {
+		className: cn("px-2 text-center", controlClassName),
+		style: controlStyle,
+		children: canExpand && /* @__PURE__ */ jsx("button", {
+			type: "button",
+			"aria-label": expanded ? messages.dataTable.collapseRow : messages.dataTable.expandRow,
+			"aria-expanded": expanded,
+			"aria-controls": hasDetails ? detailsId : void 0,
+			onClick: onToggle,
+			className: cn("relative inline-flex size-4 cursor-pointer align-sub rounded-sm border border-border bg-background text-foreground outline-none hover:border-primary-text hover:text-primary-text focus-visible:ring-2 focus-visible:ring-ring/40", "before:absolute before:inset-x-[3px] before:top-1/2 before:h-px before:-translate-y-1/2 before:bg-current before:content-['']", "after:absolute after:inset-y-[3px] after:left-1/2 after:w-px after:-translate-x-1/2 after:bg-current after:transition-transform after:duration-300 after:content-[''] motion-reduce:after:transition-none", expanded && "after:rotate-90")
+		})
+	}), children] }), hasDetails && /* @__PURE__ */ jsx(TableRow, {
+		id: detailsId,
+		hidden: !expanded,
+		"data-expanded-row": "",
+		children: /* @__PURE__ */ jsx(TableCell, {
+			colSpan,
+			className: "bg-foreground/[0.02] p-4 leading-[1.5714285714]",
+			children: detailsWidth === void 0 ? renderDetails() : /* @__PURE__ */ jsx("div", {
+				className: "sticky start-0 -m-4 overflow-hidden p-4",
+				style: { width: detailsWidth || void 0 },
+				children: renderDetails()
+			})
+		})
+	})] });
+}
+export { ExpandableRow };

package/dist/components/data-table/filter-header.d.ts

@@ -1,20 +1,43 @@
 import "./data-table.js";
 import { ReactNode } from "react";
-import { RowData } from "@tanstack/react-table";
+import "@tanstack/react-table";
 export interface DataTableColumnFilterOption {
   value: string;
   label: ReactNode;
   /** Shown at the end of the option, for example how many rows have this value. */
   count?: number;
 }
-export interface DataTableColumnFilter {
+export interface DataTableFilterPanelProps {
+  /** Current choices, including uncommitted edits when applyOn is `close`. */
+  value: string[];
+  /** Updates the selection, or only the draft when applyOn is `close`. */
+  onValueChange: (value: string[]) => void;
+  /** Restores defaultValue or clears the selection, following the same commit timing. */
+  reset: () => void;
+  /** Closes the panel and commits a changed draft once when applyOn is `close`. */
+  close: () => void;
+}
+interface DataTableColumnFilterBase {
   /** Names the filter for assistive technology, for example `Status`. */
   label: string;
-  options: DataTableColumnFilterOption[];
+  /** Classes for the custom panel surface, for example a compact, unpadded grouped list. */
+  contentClassName?: string;
+  /** Defaults to immediate updates. `close` keeps a draft until dismissal (including Escape). */
+  applyOn?: 'change' | 'close';
+  onOpenChange?: (open: boolean) => void;
   /**
    * The values that are checked while the column has no filter, for a filter whose unfiltered state is "every
-   * value", so that what is checked agrees with the rows on screen. A column with a default never has nothing
+   * value", so that what is checked agrees with the rows on screen. A column with nonempty defaults never has nothing
    * checked: the last checked value cannot be unchecked, and Reset checks the default again.
    */
   defaultValue?: string[];
-}
+}
+export type DataTableColumnFilter = DataTableColumnFilterBase & ({
+  options: DataTableColumnFilterOption[];
+  render?: never;
+} | {
+  /** Custom controls in a Popover, sharing the column's selection and commit timing. */
+  render: (props: DataTableFilterPanelProps) => ReactNode;
+  options?: never;
+});
+export {};

package/dist/components/data-table/filter-header.js

@@ -1,54 +1,117 @@
 "use client";
-import { useMessages } from "../../config/config-provider.js";
 import { Button } from "../button/button.js";
 import { Menu, MenuCheckboxItem, MenuContent, MenuItem, MenuSeparator, MenuTrigger } from "../menu/menu.js";
+import { Popover, PopoverContent, PopoverTrigger } from "../popover/popover.js";
+import { useMessages } from "../../config/config-provider.js";
+import { cn } from "../../lib/cn.js";
+import { useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Funnel } from "lucide-react";
 // src/components/data-table/filter-header.tsx
 function FilterHeader({ column, filter }) {
 	const messages = useMessages();
 	const filterValue = column.getFilterValue();
-	const active = filterValue !== void 0 && filterValue.length > 0;
-	const chosen = active ? filterValue : filter.defaultValue ?? [];
-	const required = filter.defaultValue !== void 0;
+	const committed = filterValue?.length ? filterValue : filter.defaultValue ?? [];
+	const [open, setOpen] = useState(false);
+	const [draft, setDraft] = useState();
+	const pending = useRef(void 0);
+	const deferred = filter.applyOn === "close";
+	const chosen = deferred && open ? draft ?? committed : committed;
+	const required = Boolean(filter.defaultValue?.length);
+	const normalize = (next) => {
+		const isDefault = required && equalValues(filter.defaultValue, next);
+		return next.length > 0 && !isDefault ? next : void 0;
+	};
+	const commit = (next) => {
+		const normalized = normalize(next);
+		if (!equalValues(normalized ?? [], filterValue ?? [])) column.setFilterValue(normalized);
+	};
 	const change = (next) => {
-		const isDefault = required && filter.defaultValue.length === next.length && filter.defaultValue.every((value) => next.includes(value));
-		column.setFilterValue(next.length > 0 && !isDefault ? next : void 0);
+		if (required && next.length === 0) return;
+		if (deferred) {
+			pending.current = next;
+			setDraft(next);
+		} else commit(next);
 	};
-	return /* @__PURE__ */ jsxs(Menu, { children: [/* @__PURE__ */ jsx(MenuTrigger, {
-		render: /* @__PURE__ */ jsx(Button, {
-			variant: "ghost",
-			size: "icon",
-			className: "size-6",
-			"aria-label": active ? messages.dataTable.filterActive({
-				label: filter.label,
-				count: chosen.length
-			}) : messages.dataTable.filter({ label: filter.label })
-		}),
-		children: /* @__PURE__ */ jsx(Funnel, {
-			"aria-hidden": "true",
-			className: active ? "text-primary-text fill-current" : "text-muted-foreground"
-		})
-	}), /* @__PURE__ */ jsxs(MenuContent, {
-		align: "start",
-		className: "min-w-48",
-		children: [
-			filter.options.map((option) => /* @__PURE__ */ jsxs(MenuCheckboxItem, {
-				checked: chosen.includes(option.value),
-				disabled: required && chosen.length === 1 && chosen.includes(option.value),
-				onCheckedChange: (on) => change(on ? [...chosen, option.value] : chosen.filter((value) => value !== option.value)),
-				children: [option.label, option.count !== void 0 && /* @__PURE__ */ jsx("span", {
-					className: "ml-auto pl-4 text-muted-foreground",
-					children: option.count
-				})]
-			}, option.value)),
-			/* @__PURE__ */ jsx(MenuSeparator, {}),
-			/* @__PURE__ */ jsx(MenuItem, {
-				disabled: !active,
-				onClick: () => column.setFilterValue(void 0),
-				children: messages.dataTable.resetFilter
+	const changeOpen = (next) => {
+		if (next === open) return;
+		if (next) {
+			pending.current = void 0;
+			setDraft(void 0);
+		} else if (deferred && pending.current !== void 0) {
+			commit(pending.current);
+			pending.current = void 0;
+		}
+		setOpen(next);
+		filter.onOpenChange?.(next);
+	};
+	const reset = () => change(filter.defaultValue ?? []);
+	const indicated = deferred && open ? normalize(chosen) : filterValue;
+	const active = Boolean(indicated?.length);
+	const trigger = /* @__PURE__ */ jsx(Button, {
+		variant: "ghost",
+		size: "icon",
+		className: "size-6",
+		"aria-label": active ? messages.dataTable.filterActive({
+			label: filter.label,
+			count: indicated.length
+		}) : messages.dataTable.filter({ label: filter.label })
+	});
+	const icon = /* @__PURE__ */ jsx(Funnel, {
+		"aria-hidden": "true",
+		className: active ? "text-primary-text fill-current" : "text-muted-foreground"
+	});
+	if (filter.render) return /* @__PURE__ */ jsxs(Popover, {
+		open,
+		onOpenChange: changeOpen,
+		children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+			render: trigger,
+			children: icon
+		}), /* @__PURE__ */ jsx(PopoverContent, {
+			"aria-label": messages.dataTable.filter({ label: filter.label }),
+			className: cn("max-h-80 overflow-y-auto", filter.contentClassName),
+			children: /* @__PURE__ */ jsx(CustomFilterContent, {
+				render: filter.render,
+				value: chosen,
+				onValueChange: change,
+				reset,
+				close: () => changeOpen(false)
 			})
-		]
-	})] });
+		})]
+	});
+	return /* @__PURE__ */ jsxs(Menu, {
+		open,
+		onOpenChange: changeOpen,
+		children: [/* @__PURE__ */ jsx(MenuTrigger, {
+			render: trigger,
+			children: icon
+		}), /* @__PURE__ */ jsxs(MenuContent, {
+			align: "start",
+			className: "min-w-48",
+			children: [
+				filter.options.map((option) => /* @__PURE__ */ jsxs(MenuCheckboxItem, {
+					checked: chosen.includes(option.value),
+					disabled: required && chosen.length === 1 && chosen.includes(option.value),
+					onCheckedChange: (on) => change(on ? [...chosen, option.value] : chosen.filter((value) => value !== option.value)),
+					children: [option.label, option.count !== void 0 && /* @__PURE__ */ jsx("span", {
+						className: "ml-auto pl-4 text-muted-foreground",
+						children: option.count
+					})]
+				}, option.value)),
+				/* @__PURE__ */ jsx(MenuSeparator, {}),
+				/* @__PURE__ */ jsx(MenuItem, {
+					disabled: normalize(chosen) === void 0,
+					onClick: reset,
+					children: messages.dataTable.resetFilter
+				})
+			]
+		})]
+	});
+}
+function CustomFilterContent({ render, ...props }) {
+	return render(props);
+}
+function equalValues(a, b) {
+	return a.length === b.length && a.every((value) => b.includes(value));
 }
 export { FilterHeader };

package/dist/components/data-table/index.d.ts

@@ -1,4 +1,4 @@
-import { DataTableColumnFilter, DataTableColumnFilterOption } from "./filter-header.js";
 import { DataTable, DataTableColumnDef, DataTableFeatures, DataTableProps, DataTableRowActions, createDataTableColumnHelper, dataTableFeatures } from "./data-table.js";
-import { ColumnFiltersState, PaginationState, SortingState } from "@tanstack/react-table";
-export { type ColumnFiltersState, DataTable, type DataTableColumnDef, type DataTableColumnFilter, type DataTableColumnFilterOption, type DataTableFeatures, type DataTableProps, DataTableRowActions, type PaginationState, type SortingState, createDataTableColumnHelper, dataTableFeatures };
+import { DataTableColumnFilter, DataTableColumnFilterOption, DataTableFilterPanelProps } from "./filter-header.js";
+import { ColumnFiltersState, ColumnPinningState, ExpandedState, PaginationState, SortingState } from "@tanstack/react-table";
+export { type ColumnFiltersState, type ColumnPinningState, DataTable, type DataTableColumnDef, type DataTableColumnFilter, type DataTableColumnFilterOption, type DataTableFeatures, type DataTableFilterPanelProps, type DataTableProps, DataTableRowActions, type ExpandedState, type PaginationState, type SortingState, createDataTableColumnHelper, dataTableFeatures };

package/dist/components/data-table/use-table-layout.js

@@ -0,0 +1,84 @@
+"use client";
+import { cn } from "../../lib/cn.js";
+import { useLayoutEffect, useRef, useState } from "react";
+// src/components/data-table/use-table-layout.ts
+/** Measure the rendered colgroup: table layout may distribute spare width beyond column.size. */
+function useTableLayout(columnKey, startColumns, endColumns) {
+	const tableRef = useRef(null);
+	const containerRef = useRef(null);
+	const [layout, setLayout] = useState({
+		widths: {},
+		start: false,
+		end: false,
+		rtl: false,
+		containerWidth: 0
+	});
+	useLayoutEffect(() => {
+		const table = tableRef.current;
+		const container = containerRef.current;
+		if (!table || !container) return;
+		const scrollEdges = () => {
+			const offset = Math.abs(container.scrollLeft);
+			return {
+				start: offset > 1,
+				end: container.scrollWidth - container.clientWidth - offset > 1
+			};
+		};
+		const updateScrollEdges = () => {
+			const edges = scrollEdges();
+			setLayout((previous) => previous.start === edges.start && previous.end === edges.end ? previous : {
+				...previous,
+				...edges
+			});
+		};
+		const measure = () => {
+			const widths = Object.fromEntries([...table.querySelectorAll("col[data-column-id]")].map((col) => [col.dataset.columnId, col.getBoundingClientRect().width]));
+			const containerWidth = container.clientWidth;
+			const edges = scrollEdges();
+			const rtl = getComputedStyle(container).direction === "rtl";
+			setLayout((previous) => {
+				return Object.keys(previous.widths).length === Object.keys(widths).length && Object.entries(widths).every(([id, width]) => previous.widths[id] === width) && previous.start === edges.start && previous.end === edges.end && previous.rtl === rtl && previous.containerWidth === containerWidth ? previous : {
+					widths,
+					...edges,
+					rtl,
+					containerWidth
+				};
+			});
+		};
+		measure();
+		const observer = new ResizeObserver(measure);
+		observer.observe(container);
+		observer.observe(table);
+		container.addEventListener("scroll", updateScrollEdges, { passive: true });
+		return () => {
+			observer.disconnect();
+			container.removeEventListener("scroll", updateScrollEdges);
+		};
+	}, [columnKey]);
+	const columnStyles = /* @__PURE__ */ new Map();
+	for (const side of ["start", "end"]) {
+		const region = side === "start" ? startColumns : [...endColumns].reverse();
+		let offset = 0;
+		for (const [index, column] of region.entries()) {
+			const shadow = index === region.length - 1 && layout[side];
+			const shadowDirection = side === "start" !== layout.rtl ? 1 : -1;
+			columnStyles.set(column.id, {
+				position: "sticky",
+				[side === "start" ? "insetInlineStart" : "insetInlineEnd"]: offset,
+				zIndex: 1,
+				"--data-table-shadow": shadow ? `inset ${shadowDirection * 10}px 0 8px -8px color-mix(in srgb, var(--color-foreground) 7%, transparent)` : "none",
+				"--data-table-shadow-start": side === "start" ? "100%" : "-30px"
+			});
+			offset += layout.widths[column.id] ?? column.getSize();
+		}
+	}
+	const cellClass = (columnId, header = false) => columnStyles.has(columnId) ? cn("after:pointer-events-none after:absolute after:top-0 after:-bottom-px after:start-[var(--data-table-shadow-start)] after:w-[30px] after:shadow-[var(--data-table-shadow)] after:content-['']", !header && "bg-background group-hover/row:bg-[color-mix(in_srgb,var(--color-muted)_50%,var(--color-background))]") : void 0;
+	return {
+		tableRef,
+		containerRef,
+		containerWidth: layout.containerWidth,
+		columnStyles,
+		cellClass
+	};
+}
+export { useTableLayout };

package/dist/components/date-picker/date-picker.js

@@ -1,8 +1,9 @@
 "use client";
-import { useMessages } from "../../config/config-provider.js";
-import { cn } from "../../lib/cn.js";
 import { Calendar } from "../calendar/calendar.js";
 import { Popover, PopoverContent, PopoverTrigger } from "../popover/popover.js";
+import { useMessages } from "../../config/config-provider.js";
+import { useFieldLabelWithText } from "../../hooks/use-field-label-with-text.js";
+import { cn } from "../../lib/cn.js";
 import { controlFocus, controlSurface } from "../../lib/control.js";
 import { useCallback, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -67,15 +68,19 @@ function DatePicker(props) {
 		setValue(withTimeString(currentValue, timeString));
 	}, [currentValue, setValue]);
 	const resolvedPlaceholder = placeholder ?? messages.datePicker.placeholder;
+	const { ref: triggerRef, textId, labelledBy } = useFieldLabelWithText();
 	return /* @__PURE__ */ jsxs(Popover, {
 		onOpenChange: (open) => onOpenChange?.(open),
 		children: [/* @__PURE__ */ jsx(Field.Control, {
 			disabled,
 			render: /* @__PURE__ */ jsxs(PopoverTrigger, {
+				ref: triggerRef,
+				"aria-labelledby": labelledBy,
 				disabled,
 				onBlur,
 				className: cn(controlSurface, controlFocus, "flex h-8 items-center gap-2 px-3 text-left", className),
 				children: [/* @__PURE__ */ jsx(CalendarIcon, { className: "size-4 shrink-0 text-muted-foreground" }), /* @__PURE__ */ jsx("span", {
+					id: textId,
 					className: cn("min-w-0 flex-1 truncate", !currentValue && "text-muted-foreground"),
 					children: currentValue ? format(currentValue) : resolvedPlaceholder
 				})]
@@ -159,6 +164,7 @@ function DateRangePicker(props) {
 		onOpenChange?.(false);
 	}, [onOpenChange, setValue]);
 	const resolvedPlaceholder = placeholder ?? messages.datePicker.rangePlaceholder;
+	const { ref: triggerRef, textId, labelledBy } = useFieldLabelWithText();
 	const displayText = currentValue?.from ? currentValue.to ? `${format(currentValue.from)} ~ ${format(currentValue.to)}` : format(currentValue.from) : void 0;
 	return /* @__PURE__ */ jsxs(Popover, {
 		open,
@@ -169,10 +175,13 @@ function DateRangePicker(props) {
 		children: [/* @__PURE__ */ jsx(Field.Control, {
 			disabled,
 			render: /* @__PURE__ */ jsxs(PopoverTrigger, {
+				ref: triggerRef,
+				"aria-labelledby": labelledBy,
 				disabled,
 				onBlur,
 				className: cn(controlSurface, controlFocus, "flex h-8 items-center gap-2 px-3 text-left", className),
 				children: [/* @__PURE__ */ jsx(CalendarIcon, { className: "size-4 shrink-0 text-muted-foreground" }), /* @__PURE__ */ jsx("span", {
+					id: textId,
 					className: cn("min-w-0 flex-1 truncate", !displayText && "text-muted-foreground"),
 					children: displayText ?? resolvedPlaceholder
 				})]