@optiaxiom/react 3.4.0 → 3.4.2

package/dist/esm/packages/react/src/calendar/CalendarPreviousMonthButton-css.js

@@ -1,7 +1,7 @@
 import { recipeRuntime } from "../vanilla-extract/recipeRuntime.js";
-import "./../../../../assets/layers.css.ts.vanilla-Bgf4mdaV.css";
-import "./../../../../assets/CalendarPreviousMonthButton.css.ts.vanilla-Do65BKLm.css";
+import "./../../../../assets/layers.css.ts.vanilla-BFWK0cT2.css";
+import "./../../../../assets/CalendarPreviousMonthButton.css.ts.vanilla-DA4IS9gs.css";
 //#region src/calendar/CalendarPreviousMonthButton.css.ts
-var button = recipeRuntime({ base: "_10esz6o" });
+var button = recipeRuntime({ base: "_17fhyd0" });
 //#endregion
 export { button };

package/dist/esm/packages/react/src/card/Card-css.js

@@ -1,10 +1,10 @@
 import { recipeRuntime } from "../vanilla-extract/recipeRuntime.js";
-import "./../../../../assets/layers.css.ts.vanilla-Bgf4mdaV.css";
-import "./../../../../assets/Cover.css.ts.vanilla-DqEtkjf7.css";
-import "./../../../../assets/Card.css.ts.vanilla-9xKuIWs1.css";
+import "./../../../../assets/layers.css.ts.vanilla-BFWK0cT2.css";
+import "./../../../../assets/Cover.css.ts.vanilla-DJajfkND.css";
+import "./../../../../assets/Card.css.ts.vanilla-mXWj4PT1.css";
 //#region src/card/Card.css.ts
 var card = recipeRuntime({ base: [
-	"_1kxpcdy",
+	"_14wb67d",
 	{
 		alignItems: "start",
 		bg: "bg.default",
@@ -16,7 +16,7 @@ var card = recipeRuntime({ base: [
 		gap: "8",
 		p: "16"
 	},
-	"telcdc"
+	"te7kvq"
 ] });
 //#endregion
 export { card };

package/dist/esm/packages/react/src/card/CardCheckbox-css.js

@@ -1,7 +1,7 @@
 import { recipeRuntime } from "../vanilla-extract/recipeRuntime.js";
-import "./../../../../assets/layers.css.ts.vanilla-Bgf4mdaV.css";
-import "./../../../../assets/CardCheckbox.css.ts.vanilla-BwUsbvyI.css";
+import "./../../../../assets/layers.css.ts.vanilla-BFWK0cT2.css";
+import "./../../../../assets/CardCheckbox.css.ts.vanilla-BukCYl8P.css";
 //#region src/card/CardCheckbox.css.ts
-var checkbox = recipeRuntime({ base: ["csh0nl"] });
+var checkbox = recipeRuntime({ base: ["avlrni"] });
 //#endregion
 export { checkbox };

package/dist/esm/packages/react/src/card/CardHeader-css.js

@@ -1,6 +1,6 @@
 import { recipeRuntime } from "../vanilla-extract/recipeRuntime.js";
-import "./../../../../assets/layers.css.ts.vanilla-Bgf4mdaV.css";
-import "./../../../../assets/CardHeader.css.ts.vanilla-D79tJ5KH.css";
+import "./../../../../assets/layers.css.ts.vanilla-BFWK0cT2.css";
+import "./../../../../assets/CardHeader.css.ts.vanilla-BIa2BNse.css";
 //#region src/card/CardHeader.css.ts
 var addon = recipeRuntime({
 	base: [{
@@ -8,15 +8,15 @@ var addon = recipeRuntime({
 		gap: "8"
 	}],
 	variants: { slot: {
-		after: "_1gyu4mq",
-		before: "_19gir2p"
+		after: "_1wlwyrv",
+		before: "_119zcyw"
 	} }
 });
-var content = recipeRuntime({ base: [{ flex: "1" }, "saauj8"] });
+var content = recipeRuntime({ base: [{ flex: "1" }, "ic517o"] });
 var header = recipeRuntime({ base: [{
 	alignSelf: "stretch",
 	gap: "12",
 	justifyContent: "space-between"
-}, "_1owwr1k"] });
+}, "_7f0vn5"] });
 //#endregion
 export { addon, content, header };

package/dist/esm/packages/react/src/card/CardImage-css.js

@@ -1,5 +1,5 @@
 import { recipeRuntime } from "../vanilla-extract/recipeRuntime.js";
-import "./../../../../assets/layers.css.ts.vanilla-Bgf4mdaV.css";
+import "./../../../../assets/layers.css.ts.vanilla-BFWK0cT2.css";
 //#region src/card/CardImage.css.ts
 var image = recipeRuntime({ base: {
 	objectFit: "cover",

package/dist/esm/packages/react/src/card/CardPreview-css.js

@@ -1,15 +1,15 @@
 import { recipeRuntime } from "../vanilla-extract/recipeRuntime.js";
-import "./../../../../assets/layers.css.ts.vanilla-Bgf4mdaV.css";
-import "./../../../../assets/CardPreview.css.ts.vanilla-CaCrqvFo.css";
+import "./../../../../assets/layers.css.ts.vanilla-BFWK0cT2.css";
+import "./../../../../assets/CardPreview.css.ts.vanilla-B10OwTqo.css";
 //#region src/card/CardPreview.css.ts
 var overlay = recipeRuntime({ base: [{
 	display: "flex",
 	flexWrap: "wrap"
-}, "qa9jlo"] });
+}, "nyu5ks"] });
 var preview = recipeRuntime({ base: [{
 	alignSelf: "stretch",
 	display: "grid",
 	placeItems: "center"
-}, "vhaub"] });
+}, "_46b7lt"] });
 //#endregion
 export { overlay, preview };

package/dist/esm/packages/react/src/checkbox/CheckboxControl-css.js

@@ -1,23 +1,23 @@
 import { recipeRuntime } from "../vanilla-extract/recipeRuntime.js";
-import "./../../../../assets/layers.css.ts.vanilla-Bgf4mdaV.css";
-import "./../../../../assets/ButtonGroup.css.ts.vanilla-DW4AoD_G.css";
-import "./../../../../assets/ToggleInput.css.ts.vanilla-Btri4xVz.css";
-import "./../../../../assets/CheckboxControl.css.ts.vanilla-y5pQ2TBA.css";
+import "./../../../../assets/layers.css.ts.vanilla-BFWK0cT2.css";
+import "./../../../../assets/ToggleInputHiddenInput.css.ts.vanilla-D-kshq_d.css";
+import "./../../../../assets/ToggleInput.css.ts.vanilla-CDDTBAAx.css";
+import "./../../../../assets/CheckboxControl.css.ts.vanilla-B-qWUBiT.css";
 //#region src/checkbox/CheckboxControl.css.ts
 var control = recipeRuntime({
-	base: [{ display: "grid" }, "_1a2of2y"],
+	base: [{ display: "grid" }, "llve6z"],
 	variants: {
 		shift: {
 			false: {},
-			true: "s50rg3"
+			true: "_1v1znlb"
 		},
 		size: {
-			sm: [{ rounded: "sm" }, "_1oiurs0"],
-			md: [{ rounded: "md" }, "_747gsv"]
+			sm: [{ rounded: "sm" }, "piakox"],
+			md: [{ rounded: "md" }, "_7u2woj"]
 		}
 	}
 });
-var icon = recipeRuntime({ base: [{ transition: "all" }, "kemjj7"] });
+var icon = recipeRuntime({ base: [{ transition: "all" }, "irqabp"] });
 var indicator = recipeRuntime({ base: [{
 	alignItems: "center",
 	display: "flex",

package/dist/esm/packages/react/src/code/Code-css.js

@@ -1,7 +1,7 @@
 import { recipeRuntime } from "../vanilla-extract/recipeRuntime.js";
-import "./../../../../assets/layers.css.ts.vanilla-Bgf4mdaV.css";
-import "./../../../../assets/Code.css.ts.vanilla-Dj3-b8rY.css";
+import "./../../../../assets/layers.css.ts.vanilla-BFWK0cT2.css";
+import "./../../../../assets/Code.css.ts.vanilla-CUde0n9d.css";
 //#region src/code/Code.css.ts
-var code = recipeRuntime({ base: [{ fontWeight: "600" }, "otv84"] });
+var code = recipeRuntime({ base: [{ fontWeight: "600" }, "_71ijp0"] });
 //#endregion
 export { code };

package/dist/esm/packages/react/src/command/CommandItem-css.js

@@ -1,7 +1,7 @@
 import { recipeRuntime } from "../vanilla-extract/recipeRuntime.js";
-import "./../../../../assets/layers.css.ts.vanilla-Bgf4mdaV.css";
-import "./../../../../assets/CommandItem.css.ts.vanilla-C-0oIHpp.css";
+import "./../../../../assets/layers.css.ts.vanilla-BFWK0cT2.css";
+import "./../../../../assets/CommandItem.css.ts.vanilla-hQ5kfjbE.css";
 //#region src/command/CommandItem.css.ts
-var detail = recipeRuntime({ base: [{ color: "fg.secondary" }, "dw69f6"] });
+var detail = recipeRuntime({ base: [{ color: "fg.secondary" }, "fjwtf7"] });
 //#endregion
 export { detail };

package/dist/esm/packages/react/src/cover/Cover-css.js

@@ -1,15 +1,15 @@
 import { recipeRuntime } from "../vanilla-extract/recipeRuntime.js";
-import "./../../../../assets/layers.css.ts.vanilla-Bgf4mdaV.css";
-import "./../../../../assets/Cover.css.ts.vanilla-DqEtkjf7.css";
+import "./../../../../assets/layers.css.ts.vanilla-BFWK0cT2.css";
+import "./../../../../assets/Cover.css.ts.vanilla-DJajfkND.css";
 //#region src/cover/Cover.css.ts
 var cover = recipeRuntime({ variants: {
 	disabled: {
-		false: ["wo4ztv", "_13x9u2u"],
+		false: ["_1wefgvc", "bkggkd"],
 		true: {}
 	},
 	inset: {
-		false: "n7ob8c",
-		true: "lsvcwc"
+		false: "_19cmbqt",
+		true: "_50jki6"
 	}
 } });
 //#endregion

package/dist/esm/packages/react/src/data-table/DataTable.js

@@ -1,7 +1,7 @@
 "use client";
 import { Group } from "../group/Group.js";
 import { DataTableProvider } from "./DataTableContext.js";
-import { forwardRef, useState } from "react";
+import { forwardRef, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/data-table/DataTable.tsx
 /**
@@ -13,6 +13,7 @@ import { jsx } from "react/jsx-runtime";
 */
 const DataTable = forwardRef(({ children, table, ...props }, ref) => {
 	const [highlightedIndex, setHighlightedIndex] = useState(-1);
+	const focusRequestRef = useRef(false);
 	return /* @__PURE__ */ jsx(Group, {
 		flexDirection: "column",
 		gap: "8",
@@ -21,6 +22,7 @@ const DataTable = forwardRef(({ children, table, ...props }, ref) => {
 		ref,
 		...props,
 		children: /* @__PURE__ */ jsx(DataTableProvider, {
+			focusRequestRef,
 			highlightedIndex,
 			setHighlightedIndex,
 			table,

package/dist/esm/packages/react/src/data-table/DataTableBody-css.js

@@ -1,39 +1,39 @@
 import { recipeRuntime } from "../vanilla-extract/recipeRuntime.js";
-import "./../../../../assets/layers.css.ts.vanilla-Bgf4mdaV.css";
-import "./../../../../assets/TableRow.css.ts.vanilla-DSR0XpCH.css";
-import "./../../../../assets/DataTableBody.css.ts.vanilla-DPDVzonQ.css";
+import "./../../../../assets/layers.css.ts.vanilla-BFWK0cT2.css";
+import "./../../../../assets/TableRow.css.ts.vanilla-vkZ1kptU.css";
+import "./../../../../assets/DataTableBody.css.ts.vanilla-B2sjrvnq.css";
 //#region src/data-table/DataTableBody.css.ts
 var cell = recipeRuntime({
 	base: [{
 		alignItems: "start",
 		display: "flex"
-	}, "b6cjqz"],
+	}, "_1b9wkde"],
 	variants: {
 		pinned: {
-			left: "bcog3q",
-			right: "chh8ti"
+			left: "_1tk6612",
+			right: "_1cuu51x"
 		},
 		pinnedType: {
-			body: "_18aeoom",
+			body: "wjz385",
 			header: {}
 		},
 		resizable: {
 			false: {},
-			true: "aio3qu"
+			true: "oj2z10"
 		}
 	}
 });
-var cellOffsetVar = "var(--o1f0n2)";
-var cellSizeVar = "var(--cwir5i)";
-var leftTotalSizeVar = "var(--_1nm6g4t)";
-var rightTotalSizeVar = "var(--_1obdhkf)";
+var cellOffsetVar = "var(--h1npq9)";
+var cellSizeVar = "var(--i3jnz2)";
+var leftTotalSizeVar = "var(--zc5q09)";
+var rightTotalSizeVar = "var(--eni9fb)";
 var root = recipeRuntime({ base: [{
 	display: "flex",
 	flexDirection: "column",
 	maxW: "full",
 	overflow: "hidden",
 	rounded: "lg"
-}, "_19fj5xn"] });
-var totalSizeVar = "var(--_1kwmwvy)";
+}, "_8974ri"] });
+var totalSizeVar = "var(--_19xwi3c)";
 //#endregion
 export { cell, cellOffsetVar, cellSizeVar, leftTotalSizeVar, rightTotalSizeVar, root, totalSizeVar };

package/dist/esm/packages/react/src/data-table/DataTableBody.js

@@ -10,22 +10,23 @@ import { fakeRow } from "./DataTableRowContext.js";
 import { cell, cellOffsetVar, cellSizeVar, leftTotalSizeVar, rightTotalSizeVar, root, totalSizeVar } from "./DataTableBody-css.js";
 import { DataTableHeaderCell } from "./DataTableHeaderCell.js";
 import { DataTableRow } from "./DataTableRow.js";
-import { forwardRef, useEffect, useMemo, useRef } from "react";
+import { forwardRef, useCallback, useEffect, useMemo, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useComposedRefs } from "@radix-ui/react-compose-refs";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
-import { useVirtualizer } from "@tanstack/react-virtual";
+import { defaultRangeExtractor, useVirtualizer } from "@tanstack/react-virtual";
 import { flexRender } from "@tanstack/react-table";
 //#region src/data-table/DataTableBody.tsx
 const COL_VIRTUALIZATION_THRESHOLD = 20;
 const ROW_VIRTUALIZATION_THRESHOLD = 20;
+const SKELETON_ROW_COUNT = 10;
 /**
 * @group DataTable
 */
 const DataTableBody = forwardRef(({ className, estimatedRowHeight = 52, loading, style, ...props }, outerRef) => {
 	const innerRef = useRef(null);
 	const ref = useComposedRefs(innerRef, outerRef);
-	const { table } = useDataTableContext("@optiaxiom/react/DataTableBody");
+	const { highlightedIndex, table } = useDataTableContext("@optiaxiom/react/DataTableBody");
 	const { rows: rawRows } = table.getRowModel();
 	const rows = useMemo(() => {
 		let index = 0;
@@ -69,37 +70,62 @@ const DataTableBody = forwardRef(({ className, estimatedRowHeight = 52, loading,
 		horizontal: true
 	});
 	const virtualColumns = columnVirtualizer.getVirtualItems();
-	const virtualColumnsOffset = virtualColumns[0]?.start ?? 0;
+	/**
+	* Keep the highlighted row mounted while it is scrolled out of view so
+	* keyboard focus isn't dropped to the document body.
+	*/
+	const rangeExtractor = useCallback((range) => {
+		const indexes = defaultRangeExtractor(range);
+		return highlightedIndex >= 0 && highlightedIndex < range.count && !indexes.includes(highlightedIndex) ? [...indexes, highlightedIndex].sort((a, b) => a - b) : indexes;
+	}, [highlightedIndex]);
 	const rowVirtualizer = useVirtualizer({
 		count: rows.length,
 		enabled: centerColumns.length > COL_VIRTUALIZATION_THRESHOLD || rows.length > ROW_VIRTUALIZATION_THRESHOLD,
 		estimateSize: () => estimatedRowHeight,
 		getItemKey: (index) => rows[index].id,
-		getScrollElement: () => scrollContainerRef.current
+		getScrollElement: () => scrollContainerRef.current,
+		rangeExtractor
 	});
 	const virtualRows = rowVirtualizer.getVirtualItems();
+	/**
+	* Virtualized rows and columns are missing from the DOM, so assistive
+	* technology relies on these counts and indexes for the real table size.
+	*/
+	const headerGroups = table.getHeaderGroups();
+	const totalResizableSize = headerGroups[0]?.headers.reduce((sum, header) => sum + (header.column.getCanResize() ? header.getSize() : 0), 0) ?? 0;
+	const leadingSpacerStyle = columnVirtualizer.options.enabled ? getSpacerStyle(centerColumns.slice(0, virtualColumns[0]?.index ?? 0), totalResizableSize) : void 0;
+	const trailingSpacerStyle = columnVirtualizer.options.enabled ? getSpacerStyle(centerColumns.slice((virtualColumns.at(-1)?.index ?? centerColumns.length) + 1), totalResizableSize) : void 0;
+	const columnIndexes = new Map([
+		...table.getLeftVisibleLeafColumns(),
+		...centerColumns,
+		...table.getRightVisibleLeafColumns()
+	].map((column, index) => [column.id, index + 1]));
 	return /* @__PURE__ */ jsx(Box, {
 		ref,
 		style: {
 			...assignInlineVars({
 				[leftTotalSizeVar]: `${table.getLeftTotalSize()}px`,
 				[rightTotalSizeVar]: `${table.getRightTotalSize()}px`,
-				[totalSizeVar]: (table.getHeaderGroups()[0]?.headers.reduce((sum, header) => sum + (header.column.getCanResize() ? header.getSize() : 0), 0) ?? 0).toString()
+				[totalSizeVar]: totalResizableSize.toString()
 			}),
 			...style
 		},
 		...root({}, className),
 		...props,
 		children: /* @__PURE__ */ jsxs(Table, {
+			"aria-colcount": columnIndexes.size,
+			"aria-rowcount": headerGroups.length + (loading === true ? SKELETON_ROW_COUNT : rows.length),
 			layout: "fixed",
 			onScroll: calculateScrollTimeline,
 			ref: scrollContainerRef,
 			children: [/* @__PURE__ */ jsx(TableHeader, {
 				display: "grid",
 				pinned: true,
-				children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx(TableRow, {
+				children: headerGroups.map((headerGroup, headerIndex) => /* @__PURE__ */ jsx(TableRow, {
+					"aria-rowindex": headerIndex + 1,
 					display: "flex",
 					children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx(DataTableHeaderCell, {
+						"aria-colindex": columnIndexes.get(header.column.id),
 						header,
 						pinned: !!header.column.getIsPinned(),
 						style: { ...assignInlineVars({
@@ -117,7 +143,7 @@ const DataTableBody = forwardRef(({ className, estimatedRowHeight = 52, loading,
 			}), /* @__PURE__ */ jsx(TableBody, {
 				display: "grid",
 				style: rowVirtualizer.options.enabled ? { height: `${rowVirtualizer.getTotalSize()}px` } : void 0,
-				children: (loading === true ? Array.from({ length: 10 }, (_, rowIndex) => ({
+				children: (loading === true ? Array.from({ length: SKELETON_ROW_COUNT }, (_, rowIndex) => ({
 					row: fakeRow(table, rowIndex),
 					virtualRow: void 0
 				})) : rowVirtualizer.options.enabled ? virtualRows.length === 0 && rows.length > 0 ? previousRowsRef.current.map((row) => ({
@@ -130,6 +156,7 @@ const DataTableBody = forwardRef(({ className, estimatedRowHeight = 52, loading,
 					row,
 					virtualRow: void 0
 				}))).map(({ row, virtualRow }, index) => /* @__PURE__ */ jsxs(DataTableRow, {
+					"aria-rowindex": headerGroups.length + (virtualRow?.index ?? index) + 1,
 					"data-index": virtualRow?.index,
 					display: "flex",
 					index: virtualRow?.index ?? index,
@@ -140,40 +167,52 @@ const DataTableBody = forwardRef(({ className, estimatedRowHeight = 52, loading,
 						transform: `translateY(${virtualRow.start}px)`
 					} : void 0,
 					children: [
-						row.getLeftVisibleCells().map((cell$1) => /* @__PURE__ */ jsx(TableCell, {
+						row.getLeftVisibleCells().map((cell$2) => /* @__PURE__ */ jsx(TableCell, {
+							"aria-colindex": columnIndexes.get(cell$2.column.id),
 							pinned: true,
 							style: { ...assignInlineVars({
-								[cellOffsetVar]: `${cell$1.column.getStart("left")}px`,
-								[cellSizeVar]: `${cell$1.column.getSize()}`
+								[cellOffsetVar]: `${cell$2.column.getStart("left")}px`,
+								[cellSizeVar]: `${cell$2.column.getSize()}`
 							}) },
 							...cell({
 								pinned: "left",
 								pinnedType: "body",
-								resizable: cell$1.column.getCanResize()
+								resizable: cell$2.column.getCanResize()
 							}),
-							children: flexRender(cell$1.column.columnDef.cell, cell$1.getContext())
-						}, cell$1.id)),
-						columnVirtualizer.options.enabled && virtualColumnsOffset > 0 && /* @__PURE__ */ jsx(TableCell, { style: { width: virtualColumnsOffset } }),
-						(columnVirtualizer.options.enabled ? virtualColumns.map((virtualCell) => {
-							return row.getCenterVisibleCells()[virtualCell.index];
-						}) : row.getCenterVisibleCells()).map((cell$2) => /* @__PURE__ */ jsx(TableCell, {
-							style: { ...assignInlineVars({ [cellSizeVar]: `${cell$2.column.getSize()}` }) },
-							...cell({ resizable: cell$2.column.getCanResize() }),
 							children: flexRender(cell$2.column.columnDef.cell, cell$2.getContext())
 						}, cell$2.id)),
-						row.getRightVisibleCells().map((cell$3) => /* @__PURE__ */ jsx(TableCell, {
+						leadingSpacerStyle && /* @__PURE__ */ jsx(TableCell, {
+							"aria-hidden": true,
+							p: "0",
+							style: leadingSpacerStyle
+						}),
+						(columnVirtualizer.options.enabled ? virtualColumns.map((virtualCell) => {
+							return row.getCenterVisibleCells()[virtualCell.index];
+						}) : row.getCenterVisibleCells()).map((cell$3) => /* @__PURE__ */ jsx(TableCell, {
+							"aria-colindex": columnIndexes.get(cell$3.column.id),
+							style: { ...assignInlineVars({ [cellSizeVar]: `${cell$3.column.getSize()}` }) },
+							...cell({ resizable: cell$3.column.getCanResize() }),
+							children: flexRender(cell$3.column.columnDef.cell, cell$3.getContext())
+						}, cell$3.id)),
+						trailingSpacerStyle && /* @__PURE__ */ jsx(TableCell, {
+							"aria-hidden": true,
+							p: "0",
+							style: trailingSpacerStyle
+						}),
+						row.getRightVisibleCells().map((cell$1) => /* @__PURE__ */ jsx(TableCell, {
+							"aria-colindex": columnIndexes.get(cell$1.column.id),
 							pinned: true,
 							style: { ...assignInlineVars({
-								[cellOffsetVar]: `${cell$3.column.getStart("right")}px`,
-								[cellSizeVar]: `${cell$3.column.getSize()}`
+								[cellOffsetVar]: `${cell$1.column.getStart("right")}px`,
+								[cellSizeVar]: `${cell$1.column.getSize()}`
 							}) },
 							...cell({
 								pinned: "right",
 								pinnedType: "body",
-								resizable: cell$3.column.getCanResize()
+								resizable: cell$1.column.getCanResize()
 							}),
-							children: flexRender(cell$3.column.columnDef.cell, cell$3.getContext())
-						}, cell$3.id))
+							children: flexRender(cell$1.column.columnDef.cell, cell$1.getContext())
+						}, cell$1.id))
 					]
 				}, row.id))
 			})]
@@ -181,5 +220,22 @@ const DataTableBody = forwardRef(({ className, estimatedRowHeight = 52, loading,
 	});
 });
 DataTableBody.displayName = "@optiaxiom/react/DataTableBody";
+/**
+* Sizes a cell standing in for unrendered center columns so body rows match
+* the header's width and split its free space in the same ratio.
+*/
+const getSpacerStyle = (columns, totalResizableSize) => {
+	if (columns.length === 0) return;
+	let size = 0;
+	let resizableSize = 0;
+	for (const column of columns) {
+		size += column.getSize();
+		resizableSize += column.getCanResize() ? column.getSize() : 0;
+	}
+	return {
+		flexGrow: totalResizableSize ? resizableSize / totalResizableSize : 0,
+		width: `${size}px`
+	};
+};
 //#endregion
 export { DataTableBody };

package/dist/esm/packages/react/src/data-table/DataTableFooter-css.js

@@ -1,9 +1,9 @@
 import { recipeRuntime } from "../vanilla-extract/recipeRuntime.js";
-import "./../../../../assets/layers.css.ts.vanilla-Bgf4mdaV.css";
-import "./../../../../assets/DataTableFooter.css.ts.vanilla-B_59IZtf.css";
+import "./../../../../assets/layers.css.ts.vanilla-BFWK0cT2.css";
+import "./../../../../assets/DataTableFooter.css.ts.vanilla-CXS5bUMm.css";
 //#region src/data-table/DataTableFooter.css.ts
 var addon = recipeRuntime({
-	base: "uzdihz",
+	base: "_19mshzi",
 	variants: { slot: {
 		after: { textAlign: "end" },
 		before: {}

package/dist/esm/packages/react/src/data-table/DataTableHeaderCell-css.js

@@ -1,6 +1,6 @@
 import { recipeRuntime } from "../vanilla-extract/recipeRuntime.js";
-import "./../../../../assets/layers.css.ts.vanilla-Bgf4mdaV.css";
-import "./../../../../assets/DataTableHeaderCell.css.ts.vanilla-DptNjfgl.css";
+import "./../../../../assets/layers.css.ts.vanilla-BFWK0cT2.css";
+import "./../../../../assets/DataTableHeaderCell.css.ts.vanilla-C1sR0ylF.css";
 //#region src/data-table/DataTableHeaderCell.css.ts
 var button = recipeRuntime({ base: [{
 	alignItems: "center",
@@ -12,12 +12,12 @@ var button = recipeRuntime({ base: [{
 	textTransform: "uppercase",
 	transition: "colors",
 	w: "full"
-}, "_5xfd5e"] });
+}, "l8kist"] });
 var handle = recipeRuntime({
 	base: [{
 		h: "full",
 		z: "10"
-	}, "_1mzoyfv"],
+	}, "_1rh1bl2"],
 	variants: { resizing: {
 		false: {},
 		true: { borderColor: "border.focus" }
@@ -28,10 +28,10 @@ var icon = recipeRuntime({
 		h: "12",
 		mx: "2",
 		transition: "opacity"
-	}, "_1oqop71"],
+	}, "bw7749"],
 	variants: { active: {
-		false: "_1xg2bra",
-		true: "_19vfzak"
+		false: "_9afjhd",
+		true: "_1bv623l"
 	} }
 });
 //#endregion

package/dist/esm/packages/react/src/data-table/DataTableRow.js

@@ -9,20 +9,39 @@ import { useComposedRefs } from "@radix-ui/react-compose-refs";
 import { useId as useId$1 } from "@radix-ui/react-id";
 //#region src/data-table/DataTableRow.tsx
 const DataTableRow = forwardRef(({ children, index, row, ...props }, outerRef) => {
-	const { highlightedIndex, setHighlightedIndex, table } = useDataTableContext("@optiaxiom/react/DataTableRow");
+	const { focusRequestRef, highlightedIndex, setHighlightedIndex, table } = useDataTableContext("@optiaxiom/react/DataTableRow");
 	const [subHighlightedIndex, setSubHighlightedIndex] = useState(-1);
 	const labelId = useId$1();
+	const [actions, setActions] = useState([]);
+	const primary = actions.find((action) => action.primary);
+	const [selector, setSelector] = useState();
+	const focusManaged = Boolean(selector || primary);
 	const innerRef = useRef(null);
 	const ref = useComposedRefs(innerRef, outerRef);
+	/**
+	* A row mounted by the virtualizer only becomes focusable once its actions
+	* register, so wait for `focusManaged` before moving focus to it.
+	*/
 	useEffect(() => {
 		if (highlightedIndex !== index) return;
-		if (!innerRef.current?.contains(document.activeElement)) innerRef.current?.focus();
+		if (focusManaged && focusRequestRef.current) {
+			focusRequestRef.current = false;
+			innerRef.current?.focus();
+		}
 		return () => setSubHighlightedIndex(-1);
-	}, [highlightedIndex, index]);
-	const [actions, setActions] = useState([]);
-	const primary = actions.find((action) => action.primary);
-	const [selector, setSelector] = useState();
-	const focusManaged = Boolean(selector || primary);
+	}, [
+		focusManaged,
+		focusRequestRef,
+		highlightedIndex,
+		index
+	]);
+	/**
+	* Keep the highlight on the focused row when data changes move it to a new
+	* index, so arrow keys and `tabIndex` follow the row.
+	*/
+	useEffect(() => {
+		if (innerRef.current?.contains(document.activeElement)) setHighlightedIndex(index);
+	}, [index, setHighlightedIndex]);
 	const onActionMount = useEvent(({ primary, ref }) => {
 		setActions((actions) => [...actions, {
 			primary,
@@ -70,6 +89,7 @@ const DataTableRow = forwardRef(({ children, index, row, ...props }, outerRef) =
 				const nextIndex = event.key === "ArrowDown" ? highlightedIndex + 1 : highlightedIndex - 1;
 				if (nextIndex >= 0 && nextIndex <= rows.length - 1) {
 					event.preventDefault();
+					focusRequestRef.current = true;
 					setHighlightedIndex(nextIndex);
 					if (selector) {
 						const nextRow = rows[nextIndex];

package/dist/esm/packages/react/src/date-input/DateInput-css.js

@@ -1,10 +1,10 @@
 import { recipeRuntime } from "../vanilla-extract/recipeRuntime.js";
-import "./../../../../assets/layers.css.ts.vanilla-Bgf4mdaV.css";
-import "./../../../../assets/DateInput.css.ts.vanilla-CUeoFi_r.css";
+import "./../../../../assets/layers.css.ts.vanilla-BFWK0cT2.css";
+import "./../../../../assets/DateInput.css.ts.vanilla-BDzuP9FN.css";
 //#region src/date-input/DateInput.css.ts
-var clear = recipeRuntime({ base: [{ size: "sm" }, "_1vsyo2d"] });
-var date = recipeRuntime({ base: "_1ng7enf" });
-var input = recipeRuntime({ base: "_18s91hp" });
-var picker = recipeRuntime({ base: "zr98qb" });
+var clear = recipeRuntime({ base: [{ size: "sm" }, "_1n1xgyb"] });
+var date = recipeRuntime({ base: "_1yb6oxz" });
+var input = recipeRuntime({ base: "_7x0nme" });
+var picker = recipeRuntime({ base: "_128190v" });
 //#endregion
 export { clear, date, input, picker };

package/dist/esm/packages/react/src/date-range-picker/DateRangePickerContent-css.js

@@ -1,5 +1,5 @@
 import { recipeRuntime } from "../vanilla-extract/recipeRuntime.js";
-import "./../../../../assets/layers.css.ts.vanilla-Bgf4mdaV.css";
+import "./../../../../assets/layers.css.ts.vanilla-BFWK0cT2.css";
 //#region src/date-range-picker/DateRangePickerContent.css.ts
 var panels = recipeRuntime({ base: [{
 	alignItems: "stretch",

package/dist/esm/packages/react/src/details-panel/DetailsPanel-css.js

@@ -1,6 +1,6 @@
 import { recipeRuntime } from "../vanilla-extract/recipeRuntime.js";
-import "./../../../../assets/layers.css.ts.vanilla-Bgf4mdaV.css";
-import "./../../../../assets/DetailsPanel.css.ts.vanilla-BltffQZh.css";
+import "./../../../../assets/layers.css.ts.vanilla-BFWK0cT2.css";
+import "./../../../../assets/DetailsPanel.css.ts.vanilla-30GK5gfw.css";
 //#region src/details-panel/DetailsPanel.css.ts
 var root = recipeRuntime({ base: [{
 	bg: "bg.default",
@@ -9,6 +9,6 @@ var root = recipeRuntime({ base: [{
 	flexDirection: "column",
 	h: "full",
 	overflow: "auto"
-}, "sdf8d4"] });
+}, "_1l5i8j8"] });
 //#endregion
 export { root };

package/dist/esm/packages/react/src/details-panel/DetailsPanelFooter-css.js

@@ -1,12 +1,12 @@
 import { recipeRuntime } from "../vanilla-extract/recipeRuntime.js";
-import "./../../../../assets/layers.css.ts.vanilla-Bgf4mdaV.css";
-import "./../../../../assets/DetailsPanelFooter.css.ts.vanilla-Bued6kh7.css";
+import "./../../../../assets/layers.css.ts.vanilla-BFWK0cT2.css";
+import "./../../../../assets/DetailsPanelFooter.css.ts.vanilla-CdZnSCTj.css";
 //#region src/details-panel/DetailsPanelFooter.css.ts
 var footer = recipeRuntime({ base: [{
 	bg: "bg.default",
 	gap: "8",
 	p: "16",
 	pt: "8"
-}, "_1rsnifx"] });
+}, "tu0bot"] });
 //#endregion
 export { footer };