@mortenbrudvik/waveui 0.14.1 → 0.16.0

package/dist/components/table/Table.mjs

@@ -12,37 +12,38 @@ import { useMergedRefs as S } from "../../hooks/useMergedRefs.mjs";
 import "../../lib/styles.mjs";
 import { useFormReset as C } from "../../hooks/useFormReset.mjs";
 import { AvatarSizeContext as w } from "../data-display/Avatar.context.mjs";
-import { SELECTION_CELL_CLASSES as T, TableSelectionControl as E, TableSortButton as D } from "./Table.shared.mjs";
-import * as O from "react";
-import { jsx as k, jsxs as A } from "react/jsx-runtime";
+import { TableResizeHandle as T } from "./Table.resize.mjs";
+import { SELECTION_CELL_CLASSES as E, TableSelectionControl as D, TableSortButton as O } from "./Table.shared.mjs";
+import * as k from "react";
+import { jsx as A, jsxs as j } from "react/jsx-runtime";
 //#region src/components/table/Table.tsx
-var j = () => () => {};
-function M(e) {
-	let t = O.useCallback((t) => {
+var M = () => () => {};
+function N(e) {
+	let t = k.useCallback((t) => {
 		if (!e || typeof ResizeObserver > "u") return () => {};
 		let n = new ResizeObserver(t);
 		n.observe(e);
 		for (let t of Array.from(e.children)) n.observe(t);
 		return () => n.disconnect();
-	}, [e]), n = O.useCallback(() => e ? e.scrollWidth > e.clientWidth : !1, [e]);
-	return O.useSyncExternalStore(e ? t : j, n, () => !1);
+	}, [e]), n = k.useCallback(() => e ? e.scrollWidth > e.clientWidth : !1, [e]);
+	return k.useSyncExternalStore(e ? t : M, n, () => !1);
 }
-function N(e) {
+function P(e) {
 	return n(e, "caption");
 }
-var P = ({ striped: n = !1, containerProps: r, children: i, className: o, ref: s, ...c }) => {
-	let { className: l, ref: u, "aria-label": d, "aria-labelledby": f, ...p } = r ?? {}, [h, g] = O.useState(null), _ = S(u, g), v = M(h), y = x("wave-table-caption"), b = t(i), C = b.findIndex(({ node: e }) => N(e)), w = C >= 0 ? b[C].node : null, T = w ? w.props.id ?? y : void 0, E = w && w.props.id === void 0 ? b.map(({ key: e, node: t }, n) => /* @__PURE__ */ k(O.Fragment, { children: n === C ? O.cloneElement(w, { id: y }) : t }, e)) : i, D = d ? void 0 : f ?? T, A = !!(d || D), j = v && A, P = p.role;
-	return O.useEffect(() => {
-		v && !A && a("Table:unnamed-scroll-region", "Table: the table scrolls horizontally but its scroll region has no name. Add a <caption> or containerProps[\"aria-label\"].");
-	}, [v, A]), /* @__PURE__ */ k("div", {
+var F = ({ striped: n = !1, containerProps: r, children: i, className: o, ref: s, ...c }) => {
+	let { className: l, ref: u, "aria-label": d, "aria-labelledby": f, ...p } = r ?? {}, [h, g] = k.useState(null), _ = S(u, g), v = N(h), y = x("wave-table-caption"), b = t(i), C = b.findIndex(({ node: e }) => P(e)), w = C >= 0 ? b[C].node : null, T = w ? w.props.id ?? y : void 0, E = w && w.props.id === void 0 ? b.map(({ key: e, node: t }, n) => /* @__PURE__ */ A(k.Fragment, { children: n === C ? k.cloneElement(w, { id: y }) : t }, e)) : i, D = d ? void 0 : f ?? T, O = !!(d || D), j = v && O, M = p.role;
+	return k.useEffect(() => {
+		v && !O && a("Table:unnamed-scroll-region", "Table: the table scrolls horizontally but its scroll region has no name. Add a <caption> or containerProps[\"aria-label\"].");
+	}, [v, O]), /* @__PURE__ */ A("div", {
 		...p,
 		ref: _,
-		role: j ? "region" : P,
+		role: j ? "region" : M,
 		tabIndex: v ? 0 : p.tabIndex,
-		"aria-label": v || P !== void 0 ? d : void 0,
-		"aria-labelledby": j ? D : P === void 0 ? void 0 : f,
+		"aria-label": v || M !== void 0 ? d : void 0,
+		"aria-labelledby": j ? D : M === void 0 ? void 0 : f,
 		className: e(m.container, "overflow-x-auto rounded-md border border-border", v && "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring", l),
-		children: /* @__PURE__ */ k("table", {
+		children: /* @__PURE__ */ A("table", {
 			ref: s,
 			"data-striped": n ? "" : void 0,
 			className: e(m.root, "w-full border-separate border-spacing-0", n && "[:where(&>tbody>tr:nth-child(odd))]:bg-card", o),
@@ -51,19 +52,19 @@ var P = ({ striped: n = !1, containerProps: r, children: i, className: o, ref: s
 		})
 	});
 };
-P.displayName = "Table";
-var F = ({ children: t, className: n, ref: r, ...i }) => /* @__PURE__ */ k("thead", {
+F.displayName = "Table";
+var I = ({ children: t, className: n, ref: r, ...i }) => /* @__PURE__ */ A("thead", {
 	ref: r,
 	...i,
 	className: e(g.root, "bg-card", n),
 	children: t
 });
-F.displayName = "TableHeader";
-var I = ({ sortable: t = !1, sortDirection: n, onSortClick: r, sortIcon: i, aside: a, children: o, className: l, ref: u, ...d }) => {
+I.displayName = "TableHeader";
+var L = ({ sortable: t = !1, sortDirection: n, onSortClick: r, sortIcon: i, aside: a, children: o, className: l, ref: u, ...d }) => {
 	let f = c(a), p = f ? s(a, "span", e(h.aside, "inline-flex shrink-0 items-center", t && "pe-4")) : null, m = o;
-	return t ? m = /* @__PURE__ */ A("div", {
+	return t ? m = /* @__PURE__ */ j("div", {
 		className: "flex items-center",
-		children: [/* @__PURE__ */ k(D, {
+		children: [/* @__PURE__ */ A(O, {
 			component: "Table.HeaderCell",
 			direction: n,
 			sortIcon: i,
@@ -72,10 +73,10 @@ var I = ({ sortable: t = !1, sortDirection: n, onSortClick: r, sortIcon: i, asid
 			onClick: r,
 			children: o
 		}), p]
-	}) : f && (m = /* @__PURE__ */ A("div", {
+	}) : f && (m = /* @__PURE__ */ j("div", {
 		className: "flex items-center gap-2",
 		children: [o, p]
-	})), /* @__PURE__ */ k("th", {
+	})), /* @__PURE__ */ A("th", {
 		ref: u,
 		scope: "col",
 		"aria-sort": t ? n ?? "none" : void 0,
@@ -84,34 +85,34 @@ var I = ({ sortable: t = !1, sortDirection: n, onSortClick: r, sortIcon: i, asid
 		children: m
 	});
 };
-I.displayName = "TableHeaderCell";
-var L = (e) => (i("Table", "Table.Head", "Table.Header"), /* @__PURE__ */ k(F, { ...e }));
-L.displayName = "TableHead";
-var R = (e) => (i("Table", "Table.HeadCell", "Table.HeaderCell"), /* @__PURE__ */ k(I, { ...e }));
-R.displayName = "TableHeadCell";
-var z = ({ children: t, className: n, ref: r, ...i }) => /* @__PURE__ */ k("tbody", {
+L.displayName = "TableHeaderCell";
+var R = (e) => (i("Table", "Table.Head", "Table.Header"), /* @__PURE__ */ A(I, { ...e }));
+R.displayName = "TableHead";
+var z = (e) => (i("Table", "Table.HeadCell", "Table.HeaderCell"), /* @__PURE__ */ A(L, { ...e }));
+z.displayName = "TableHeadCell";
+var B = ({ children: t, className: n, ref: r, ...i }) => /* @__PURE__ */ A("tbody", {
 	ref: r,
 	...i,
 	className: e(u.root, n),
 	children: t
 });
-z.displayName = "TableBody";
-var B = ({ children: t, className: n, ref: r, ...i }) => /* @__PURE__ */ k("tr", {
+B.displayName = "TableBody";
+var V = ({ children: t, className: n, ref: r, ...i }) => /* @__PURE__ */ A("tr", {
 	ref: r,
 	className: e(_.root, "group/table-row", "hover:bg-subtle-hover transition-colors motion-reduce:transition-none", n),
 	...i,
 	children: t
 });
-B.displayName = "TableRow";
-var V = ({ children: t, className: n, ref: r, ...i }) => /* @__PURE__ */ k("td", {
+V.displayName = "TableRow";
+var H = ({ children: t, className: n, ref: r, ...i }) => /* @__PURE__ */ A("td", {
 	ref: r,
 	className: e(f.root, "relative px-4 py-3 text-body-1 border-b border-border", n),
 	...i,
 	children: t
 });
-V.displayName = "TableCell";
-var H = ({ type: t = "checkbox", checked: n, defaultChecked: i = !1, onCheckedChange: o, onChange: s, name: c, value: u, form: d, disabled: f, required: p, subtle: m = !1, invisible: h = !1, id: g, "aria-label": _, "aria-labelledby": x, "aria-describedby": w, "aria-invalid": D, "aria-required": A, "aria-errormessage": j, "aria-details": M, autoFocus: N, tabIndex: P, onFocus: F, onBlur: I, onKeyDown: L, onKeyUp: R, controlRef: z, className: B, ref: V, ...H }) => {
-	let U = O.useRef(void 0), [W, G, K] = b(n, i, (e) => {
+H.displayName = "TableCell";
+var U = ({ type: t = "checkbox", checked: n, defaultChecked: i = !1, onCheckedChange: o, onChange: s, name: c, value: u, form: d, disabled: f, required: p, subtle: m = !1, invisible: h = !1, id: g, "aria-label": _, "aria-labelledby": x, "aria-describedby": w, "aria-invalid": T, "aria-required": O, "aria-errormessage": j, "aria-details": M, autoFocus: N, tabIndex: P, onFocus: F, onBlur: I, onKeyDown: L, onKeyUp: R, controlRef: z, className: B, ref: V, ...H }) => {
+	let U = k.useRef(void 0), [W, G, K] = b(n, i, (e) => {
 		e !== "mixed" && o?.(e, U.current);
 	}), q = y((e, t) => {
 		U.current = { event: t };
@@ -120,10 +121,10 @@ var H = ({ type: t = "checkbox", checked: n, defaultChecked: i = !1, onCheckedCh
 		} finally {
 			U.current = void 0;
 		}
-	}), J = O.useRef(null), Y = S(J, z);
+	}), J = k.useRef(null), Y = S(J, z);
 	C(J, () => G(i), d);
 	let X = t === "radio" && !K && !!c;
-	return O.useEffect(() => {
+	return k.useEffect(() => {
 		let e = J.current;
 		if (!X || !e) return;
 		let t = e.getRootNode(), n = (t) => {
@@ -131,19 +132,19 @@ var H = ({ type: t = "checkbox", checked: n, defaultChecked: i = !1, onCheckedCh
 			n !== e && n instanceof HTMLInputElement && n.type === "radio" && n.name === e.name && n.form === e.form && n.checked && q(!1, t);
 		};
 		return t.addEventListener("click", n, !0), () => t.removeEventListener("click", n, !0);
-	}, [X, q]), O.useEffect(() => {
+	}, [X, q]), k.useEffect(() => {
 		let e = J.current;
 		!r || !e || _ || x || (e.labels?.length ?? 0) > 0 || a("Table.SelectionCell:name", "Table.SelectionCell: the selection control has no accessible name. Pass `aria-label` (e.g. \"Select Alpha\") or `aria-labelledby` (e.g. the id of the row’s first cell).");
 	}, [
 		_,
 		x,
 		g
-	]), /* @__PURE__ */ k("td", {
+	]), /* @__PURE__ */ A("td", {
 		ref: V,
 		"data-type": t,
 		...H,
-		className: e(v.root, T, B),
-		children: /* @__PURE__ */ k(E, {
+		className: e(v.root, E, B),
+		children: /* @__PURE__ */ A(D, {
 			ref: Y,
 			type: t,
 			checked: W,
@@ -158,8 +159,8 @@ var H = ({ type: t = "checkbox", checked: n, defaultChecked: i = !1, onCheckedCh
 			"aria-label": _,
 			"aria-labelledby": x,
 			"aria-describedby": w,
-			"aria-invalid": D,
-			"aria-required": A,
+			"aria-invalid": T,
+			"aria-required": O,
 			"aria-errormessage": j,
 			"aria-details": M,
 			autoFocus: N,
@@ -173,51 +174,52 @@ var H = ({ type: t = "checkbox", checked: n, defaultChecked: i = !1, onCheckedCh
 		})
 	});
 };
-H.displayName = "TableSelectionCell";
-var U = { size: 32 }, W = {
+U.displayName = "TableSelectionCell";
+var W = { size: 32 }, G = {
 	default: "flex shrink-0 items-center [&>svg]:size-5",
 	primary: "flex shrink-0 items-center [&>svg]:size-6"
-}, G = ({ media: t, description: n, truncate: r = !1, appearance: i, children: a, className: l, ref: u, ...d }) => {
+}, K = ({ media: t, description: n, truncate: r = !1, appearance: i, children: a, className: l, ref: u, ...d }) => {
 	let f = c(t), m = c(a), h = c(n), g = i === "primary";
-	return /* @__PURE__ */ A("div", {
+	return /* @__PURE__ */ j("div", {
 		ref: u,
 		"data-appearance": i,
 		"data-truncate": r ? "" : void 0,
 		...d,
 		className: e(p.root, "flex items-center gap-2", r && "overflow-x-hidden", l),
-		children: [f && /* @__PURE__ */ k(w.Provider, {
-			value: U,
-			children: s(t, "span", e(p.media, W[g ? "primary" : "default"]))
-		}), (m || h) && /* @__PURE__ */ A("div", {
+		children: [f && /* @__PURE__ */ A(w.Provider, {
+			value: W,
+			children: s(t, "span", e(p.media, G[g ? "primary" : "default"]))
+		}), (m || h) && /* @__PURE__ */ j("div", {
 			className: e(p.content, "flex flex-col", r && "min-w-0 overflow-x-hidden"),
-			children: [m && /* @__PURE__ */ k("span", {
+			children: [m && /* @__PURE__ */ A("span", {
 				className: e(p.main, r && "truncate", g && "font-semibold"),
 				children: o(a)
 			}), h && s(n, "span", e(p.description, "text-caption-1 text-muted-foreground", r && "truncate"))]
 		})]
 	});
 };
-G.displayName = "TableCellLayout";
-var K = "absolute inset-y-0 end-0 flex items-center gap-1 px-1 bg-background group-hover/table-row:bg-subtle-hover [:where([data-striped]>tbody>tr:nth-child(odd)>*)>&]:bg-card [[data-selection-appearance=brand]>tbody>[data-selected]>*>&]:bg-selected [[data-selection-appearance=neutral]>tbody>[data-selected]>*>&]:bg-subtle-selected transition-[opacity,background-color] motion-reduce:transition-none", q = "opacity-0 group-hover/table-row:opacity-100 group-focus-within/table-row:opacity-100 focus-within:opacity-100 forced-colors:opacity-100 pointer-coarse:opacity-100", J = ({ visible: t = !1, className: n, ref: r, ...i }) => /* @__PURE__ */ k("div", {
+K.displayName = "TableCellLayout";
+var q = "absolute inset-y-0 end-0 flex items-center gap-1 px-1 bg-background group-hover/table-row:bg-subtle-hover [:where([data-striped]>tbody>tr:nth-child(odd)>*)>&]:bg-card [[data-selection-appearance=brand]>tbody>[data-selected]>*>&]:bg-selected [[data-selection-appearance=neutral]>tbody>[data-selected]>*>&]:bg-subtle-selected transition-[opacity,background-color] motion-reduce:transition-none", J = "opacity-0 group-hover/table-row:opacity-100 group-focus-within/table-row:opacity-100 focus-within:opacity-100 forced-colors:opacity-100 pointer-coarse:opacity-100", Y = ({ visible: t = !1, className: n, ref: r, ...i }) => /* @__PURE__ */ A("div", {
 	ref: r,
 	"data-visible": t ? "" : void 0,
 	...i,
-	className: e(d.root, K, t ? void 0 : q, n)
+	className: e(d.root, q, t ? void 0 : J, n)
 });
-J.displayName = "TableCellActions";
-var Y = /* @__PURE__ */ Object.assign(P, {
-	Header: F,
-	HeaderCell: I,
-	Head: L,
-	HeadCell: R,
-	Body: z,
-	Row: B,
-	Cell: V,
-	SelectionCell: H,
-	CellLayout: G,
-	CellActions: J
+Y.displayName = "TableCellActions";
+var X = /* @__PURE__ */ Object.assign(F, {
+	Header: I,
+	HeaderCell: L,
+	Head: R,
+	HeadCell: z,
+	Body: B,
+	Row: V,
+	Cell: H,
+	SelectionCell: U,
+	CellLayout: K,
+	CellActions: Y,
+	ResizeHandle: T
 });
 //#endregion
-export { Y as Table, z as TableBody, V as TableCell, J as TableCellActions, G as TableCellLayout, L as TableHead, R as TableHeadCell, F as TableHeader, I as TableHeaderCell, B as TableRow, H as TableSelectionCell };
+export { X as Table, B as TableBody, H as TableCell, Y as TableCellActions, K as TableCellLayout, R as TableHead, z as TableHeadCell, I as TableHeader, L as TableHeaderCell, T as TableResizeHandle, V as TableRow, U as TableSelectionCell };
 
 //# sourceMappingURL=Table.mjs.map

package/dist/components/table/Table.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Table.mjs","names":["useId","useId$1","React","noopSubscribe","useHorizontalOverflow","subscribe","wrapper","observer","onChange","child","getSnapshot","isCaption","isElementOfType","node","TableRoot","props","containerClassName","containerRef","containerLabel","containerLabelledBy","containerRest","containerProps","setWrapper","wrapperRef","useMergedRefs","scrollable","generatedCaptionId","flatChildren","flattenChildren","children","captionIndex","caption","captionId","content","index","key","regionLabelledBy","named","isRegion","consumerRole","warnOnce","cn","tableClassNames","striped","className","TableHeader","rest","tableHeaderClassNames","TableHeaderCell","hasAside","slotRendersContent","aside","asideNode","renderSlot","tableHeaderCellClassNames","sortable","TableSortButton","sortDirection","onSortClick","TableHead","warnDeprecated","TableHeadCell","TableBody","tableBodyClassNames","TableRow","tableRowClassNames","TableCell","tableCellClassNames","TableSelectionCell","checkedProp","ariaLabel","ariaLabelledBy","ariaDescribedBy","ariaInvalid","ariaRequired","ariaErrorMessage","ariaDetails","detailsRef","checked","setChecked","isControlled","useControllable","defaultChecked","next","onCheckedChange","changeChecked","useEventCallback","inputRef","mergedControlRef","controlRef","form","followsGroup","type","name","input","root","handleClick","target","event","isDev","id","tableSelectionCellClassNames","SELECTION_CELL_CLASSES","TableSelectionControl","composeEventHandlers","CELL_LAYOUT_AVATAR_BOX","CELL_LAYOUT_MEDIA_CLASSES","TableCellLayout","hasMedia","media","hasMain","hasDescription","description","primary","appearance","truncate","tableCellLayoutClassNames","AvatarSizeContext","materialiseSlotContent","CELL_ACTIONS_CLASSES","CELL_ACTIONS_REVEAL_CLASSES","TableCellActions","visible","tableCellActionsClassNames","Table"],"sources":["../../../src/components/table/Table.tsx"],"sourcesContent":["import * as React from 'react';\nimport { flattenChildren, isElementOfType } from '../../lib/children';\nimport { cn } from '../../lib/cn';\nimport {\n  tableBodyClassNames,\n  tableCellActionsClassNames,\n  tableCellClassNames,\n  tableCellLayoutClassNames,\n  tableClassNames,\n  tableHeaderCellClassNames,\n  tableHeaderClassNames,\n  tableRowClassNames,\n  tableSelectionCellClassNames,\n} from '../../lib/classNames';\nimport { composeEventHandlers } from '../../lib/composeEventHandlers';\nimport { isDev, warnDeprecated, warnOnce } from '../../lib/dev';\nimport { materialiseSlotContent, renderSlot, slotRendersContent } from '../../lib/slot';\nimport type { Slot } from '../../lib/slot';\nimport { focusRing } from '../../lib/styles';\nimport { useControllable } from '../../hooks/useControllable';\nimport { useEventCallback } from '../../hooks/useEventCallback';\nimport { useFormReset } from '../../hooks/useFormReset';\nimport { useId } from '../../hooks/useId';\nimport { useMergedRefs } from '../../hooks/useMergedRefs';\nimport { AvatarSizeContext } from '../data-display/Avatar.context';\nimport type { AvatarSizeContextValue } from '../data-display/Avatar.context';\nimport { SELECTION_CELL_CLASSES, TableSelectionControl, TableSortButton } from './Table.shared';\nimport type { SortDirection } from './Table.shared';\n\n/** Properties for the Table component. */\nexport interface TableProps extends React.HTMLAttributes<HTMLTableElement> {\n  /**\n   * Whether to apply alternating row background colors (odd body rows). The stripe has zero\n   * specificity, so a row's own background class (`<Table.Row className=\"bg-selected\">`) and its\n   * hover color win over it.\n   * @default false\n   */\n  striped?: boolean;\n  /**\n   * Props for the wrapper `<div>` around the `<table>`: a horizontally scrollable container\n   * (`overflow-x-auto`). Use it for its className, style, ref or `aria-label`. While the table\n   * scrolls horizontally, the wrapper is a keyboard-focusable `role=\"region\"` named by\n   * `containerProps['aria-label']`/`['aria-labelledby']`, else by the table's `<caption>`. While\n   * it does not scroll, the wrapper has no role and its `aria-label`/`aria-labelledby` are left\n   * off, unless you also pass a `role` in `containerProps` (then they are always applied).\n   */\n  containerProps?: Omit<React.ComponentPropsWithRef<'div'>, 'children'>;\n  /** Table caption, header, body and row elements. */\n  children: React.ReactNode;\n  /** Ref to the `<table>` element. */\n  ref?: React.Ref<HTMLTableElement>;\n}\n\n/** Properties for the TableHeader sub-component. */\nexport interface TableHeaderProps extends React.HTMLAttributes<HTMLTableSectionElement> {\n  /** Table header row elements. */\n  children: React.ReactNode;\n  /** Ref to the `<thead>` element. */\n  ref?: React.Ref<HTMLTableSectionElement>;\n}\n\n/** Properties for the TableHeaderCell sub-component. */\nexport interface TableHeaderCellProps extends React.ThHTMLAttributes<HTMLTableCellElement> {\n  /**\n   * Makes the column header a sort control: the content is wrapped in a `<button>` that fills the\n   * cell, and the cell carries `aria-sort` (`\"none\"` while `sortDirection` is not set). The table\n   * does not sort or track the direction; keep it in your state, set `sortDirection` and sort the\n   * rows in `onSortClick`. The table keeps no grid semantics.\n   * @default false\n   */\n  sortable?: boolean;\n  /**\n   * The direction the column is sorted in, shown as `aria-sort` and as the glyph of a sortable\n   * header. Absent means the column is not sorted. Without `sortable` it has no effect.\n   */\n  sortDirection?: SortDirection;\n  /**\n   * Called with the click event when the sort button is activated (click, Enter or Space).\n   * Fluent's `onSortClick`.\n   */\n  onSortClick?: React.MouseEventHandler<HTMLButtonElement>;\n  /**\n   * The glyph that shows the direction, only while `sortDirection` is set. It is decorative\n   * (`aria-hidden`) and carries `data-direction`. `null` and `undefined` keep the default arrow\n   * (up for ascending, down for descending); `false` or anything that renders nothing hides it. A\n   * `<button>` or `Button` passed here is not nested: its children become the glyph.\n   */\n  sortIcon?: Slot<'span'>;\n  /**\n   * Content beside the header content, outside the sort button (a filter button, an info\n   * button), so it is not part of the button's name. Nothing renders for content that renders\n   * nothing.\n   */\n  aside?: Slot<'span'>;\n  /** Header cell content. */\n  children: React.ReactNode;\n  /** Ref to the `<th>` element. */\n  ref?: React.Ref<HTMLTableCellElement>;\n}\n\n/** @deprecated Use `TableHeaderProps` (`Table.Header`). */\nexport type TableHeadProps = TableHeaderProps;\n\n/** @deprecated Use `TableHeaderCellProps` (`Table.HeaderCell`). */\nexport type TableHeadCellProps = TableHeaderCellProps;\n\n/** Properties for the TableBody sub-component. */\nexport interface TableBodyProps extends React.HTMLAttributes<HTMLTableSectionElement> {\n  /** Table row elements. */\n  children: React.ReactNode;\n  /** Ref to the `<tbody>` element. */\n  ref?: React.Ref<HTMLTableSectionElement>;\n}\n\n/** Properties for the TableRow sub-component. */\nexport interface TableRowProps extends React.HTMLAttributes<HTMLTableRowElement> {\n  /** Table cell elements. */\n  children: React.ReactNode;\n  /** Ref to the `<tr>` element. */\n  ref?: React.Ref<HTMLTableRowElement>;\n}\n\n/** Properties for the TableCell sub-component. */\nexport interface TableCellProps extends React.TdHTMLAttributes<HTMLTableCellElement> {\n  /** Cell content. */\n  children: React.ReactNode;\n  /** Ref to the `<td>` element. */\n  ref?: React.Ref<HTMLTableCellElement>;\n}\n\n/** Second argument of `Table.SelectionCell`'s `onCheckedChange`: the event behind the change. */\nexport interface TableSelectionCellCheckedChangeDetails {\n  /**\n   * The DOM event behind the change: the click of the control (Space clicks it too), or, for an\n   * uncontrolled radio, the click that checked another radio of its group.\n   */\n  event: Event;\n}\n\n/**\n * Properties for the TableSelectionCell sub-component. The focus, key and change handlers are the\n * control's (C-ROUTING), so they replace the cell's.\n */\nexport interface TableSelectionCellProps extends Omit<\n  React.TdHTMLAttributes<HTMLTableCellElement>,\n  'children' | 'defaultChecked' | 'onChange' | 'onFocus' | 'onBlur' | 'onKeyDown' | 'onKeyUp'\n> {\n  /**\n   * The control: a checkbox (multiple selection, or a select-all in the header) or a radio (single\n   * selection).\n   * @default 'checkbox'\n   */\n  type?: 'checkbox' | 'radio';\n  /**\n   * Controlled checked state. `'mixed'` draws an indeterminate checkbox (a select-all whose rows\n   * are partly selected); a click on it checks it. `'mixed'` is for checkboxes only: on a radio it\n   * has no effect (the radio is drawn unchecked).\n   */\n  checked?: boolean | 'mixed';\n  /**\n   * Initial checked state for uncontrolled usage, also the state a form reset restores.\n   * Uncontrolled radios that share a `name` uncheck each other, as a native radio group does.\n   * @default false\n   */\n  defaultChecked?: boolean | 'mixed';\n  /**\n   * Called with the new checked state when the user checks or unchecks the control (not for no-op\n   * updates), and when a form reset restores a `true` or `false` `defaultChecked`. The second\n   * argument holds the event. The table keeps no selection: update your rows' state here.\n   */\n  onCheckedChange?: (checked: boolean, details?: TableSelectionCellCheckedChangeDetails) => void;\n  /**\n   * The native change event of the control, called before `onCheckedChange`;\n   * `event.preventDefault()` in it cancels the change.\n   */\n  onChange?: React.ChangeEventHandler<HTMLInputElement>;\n  /** Form field name of the control. With a name, the control submits `name=value` while checked. */\n  name?: string;\n  /**\n   * Value the control submits while checked.\n   * @default 'on'\n   */\n  value?: string;\n  /** Id of the form the control belongs to, when the table is rendered outside that form. */\n  form?: string;\n  /** Natively disables the control: it cannot be checked or focused. */\n  disabled?: boolean;\n  /** The form must not be submitted while the control is unchecked (native validation). */\n  required?: boolean;\n  /**\n   * Draws an unchecked control only while its row (a `Table.Row`) is hovered or holds focus; its\n   * own keyboard focus, forced colors and a coarse pointer (touch) always draw it. It stays\n   * focusable and named.\n   * @default false\n   */\n  subtle?: boolean;\n  /**\n   * Hides the control and takes it out of the tab order, while the cell keeps its box (a row that\n   * cannot be selected keeps the column aligned).\n   * @default false\n   */\n  invisible?: boolean;\n  /** Focus handler of the control. */\n  onFocus?: React.FocusEventHandler<HTMLInputElement>;\n  /** Blur handler of the control. */\n  onBlur?: React.FocusEventHandler<HTMLInputElement>;\n  /** Keydown handler of the control. */\n  onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;\n  /** Keyup handler of the control. */\n  onKeyUp?: React.KeyboardEventHandler<HTMLInputElement>;\n  /** Ref to the `<input>` element. */\n  controlRef?: React.Ref<HTMLInputElement>;\n  /** Ref to the `<td>` element. */\n  ref?: React.Ref<HTMLTableCellElement>;\n}\n\n/** Properties for the TableCellLayout sub-component. */\nexport interface TableCellLayoutProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * A picture before the text: an icon (drawn at 20px, 24px with the primary appearance) or an\n   * Avatar, which takes a 32px box when it sets no `size` of its own. It is content, not hidden\n   * from assistive technology: make an Avatar beside the person's name decorative.\n   */\n  media?: Slot<'span'>;\n  /** A second line under the main text, in the caption size and the muted color. */\n  description?: Slot<'span'>;\n  /**\n   * Keeps the main text and the description on one line each, ending in an ellipsis where they do\n   * not fit. It takes effect where the column's width is bounded (a width on the column, or a\n   * table layout that does not widen columns to fit their content).\n   * @default false\n   */\n  truncate?: boolean;\n  /**\n   * `'primary'` draws the main text semibold and the media icon larger: the cell that names the\n   * row. Rendered as `data-appearance` while set.\n   */\n  appearance?: 'primary';\n  /** The main text. */\n  children?: React.ReactNode;\n  /** Ref to the layout `<div>`. */\n  ref?: React.Ref<HTMLDivElement>;\n}\n\n/** Properties for the TableCellActions sub-component. */\nexport interface TableCellActionsProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Keeps the actions shown, also while the row is neither hovered nor focused: for example while\n   * a menu opened from one of them is open.\n   * @default false\n   */\n  visible?: boolean;\n  /** The actions: buttons, a menu button. */\n  children?: React.ReactNode;\n  /** Ref to the `<div>` that holds the actions. */\n  ref?: React.Ref<HTMLDivElement>;\n}\n\nconst noopSubscribe = () => () => {};\n\n/**\n * Whether `wrapper` scrolls horizontally, as an external store: a `ResizeObserver` on the wrapper\n * and the table re-checks `scrollWidth > clientWidth`. Without `ResizeObserver` (server, old\n * browsers, jsdom) the value is read on each render.\n */\nfunction useHorizontalOverflow(wrapper: HTMLDivElement | null): boolean {\n  const subscribe = React.useCallback(\n    (onChange: () => void) => {\n      if (!wrapper || typeof ResizeObserver === 'undefined') return () => {};\n      const observer = new ResizeObserver(onChange);\n      observer.observe(wrapper);\n      for (const child of Array.from(wrapper.children)) observer.observe(child);\n      return () => observer.disconnect();\n    },\n    [wrapper],\n  );\n  const getSnapshot = React.useCallback(\n    () => (wrapper ? wrapper.scrollWidth > wrapper.clientWidth : false),\n    [wrapper],\n  );\n  return React.useSyncExternalStore(wrapper ? subscribe : noopSubscribe, getSnapshot, () => false);\n}\n\nfunction isCaption(node: React.ReactNode): node is React.ReactElement<{ id?: string }> {\n  return isElementOfType(node, 'caption');\n}\n\n// The component-level JSDoc sits on the exported `Table` below.\nconst TableRoot = ({\n  striped = false,\n  containerProps,\n  children,\n  className,\n  ref,\n  ...props\n}: TableProps) => {\n  const {\n    className: containerClassName,\n    ref: containerRef,\n    'aria-label': containerLabel,\n    'aria-labelledby': containerLabelledBy,\n    ...containerRest\n  } = containerProps ?? {};\n\n  const [wrapper, setWrapper] = React.useState<HTMLDivElement | null>(null);\n  const wrapperRef = useMergedRefs<HTMLDivElement>(containerRef, setWrapper);\n  const scrollable = useHorizontalOverflow(wrapper);\n\n  // Name the scroll region after the caption (also one inside a Fragment): keep its id, or give it\n  // one. The flattened children are then rendered under their flattened keys.\n  const generatedCaptionId = useId('wave-table-caption');\n  const flatChildren = flattenChildren(children);\n  const captionIndex = flatChildren.findIndex(({ node }) => isCaption(node));\n  const caption =\n    captionIndex >= 0\n      ? (flatChildren[captionIndex].node as React.ReactElement<{ id?: string }>)\n      : null;\n  const captionId = caption ? (caption.props.id ?? generatedCaptionId) : undefined;\n  const content =\n    caption && caption.props.id === undefined\n      ? flatChildren.map(({ key, node }, index) => (\n          <React.Fragment key={key}>\n            {index === captionIndex\n              ? React.cloneElement(caption, { id: generatedCaptionId })\n              : node}\n          </React.Fragment>\n        ))\n      : children;\n\n  const regionLabelledBy = containerLabel ? undefined : (containerLabelledBy ?? captionId);\n  const named = Boolean(containerLabel || regionLabelledBy);\n  const isRegion = scrollable && named;\n  /** A role the consumer gave the wrapper: their name goes with it even while nothing scrolls. */\n  const consumerRole = containerRest.role;\n\n  React.useEffect(() => {\n    if (scrollable && !named) {\n      warnOnce(\n        'Table:unnamed-scroll-region',\n        'Table: the table scrolls horizontally but its scroll region has no name. Add a <caption> or containerProps[\"aria-label\"].',\n      );\n    }\n  }, [scrollable, named]);\n\n  return (\n    <div\n      {...containerRest}\n      ref={wrapperRef}\n      role={isRegion ? 'region' : consumerRole}\n      tabIndex={scrollable ? 0 : containerRest.tabIndex}\n      aria-label={scrollable || consumerRole !== undefined ? containerLabel : undefined}\n      aria-labelledby={\n        isRegion ? regionLabelledBy : consumerRole !== undefined ? containerLabelledBy : undefined\n      }\n      className={cn(\n        tableClassNames.container,\n        'overflow-x-auto rounded-md border border-border',\n        scrollable && focusRing,\n        containerClassName,\n      )}\n    >\n      <table\n        ref={ref}\n        data-striped={striped ? '' : undefined}\n        className={cn(\n          tableClassNames.root,\n          'w-full border-separate border-spacing-0',\n          // `:where()` keeps the stripe at specificity 0, so any row class wins (C-CLASS).\n          striped && '[:where(&>tbody>tr:nth-child(odd))]:bg-card',\n          className,\n        )}\n        {...props}\n      >\n        {content}\n      </table>\n    </div>\n  );\n};\nTableRoot.displayName = 'Table';\n\n/** The table's `<thead>`. */\nconst TableHeader = ({ children, className, ref, ...rest }: TableHeaderProps) => (\n  <thead ref={ref} {...rest} className={cn(tableHeaderClassNames.root, 'bg-card', className)}>\n    {children}\n  </thead>\n);\nTableHeader.displayName = 'TableHeader';\n\n/** A column header cell (`<th scope=\"col\">`). */\nconst TableHeaderCell = ({\n  sortable = false,\n  sortDirection,\n  onSortClick,\n  sortIcon,\n  aside,\n  children,\n  className,\n  ref,\n  ...props\n}: TableHeaderCellProps) => {\n  const hasAside = slotRendersContent(aside);\n  const asideNode = hasAside\n    ? renderSlot(\n        aside,\n        'span',\n        cn(\n          tableHeaderCellClassNames.aside,\n          'inline-flex shrink-0 items-center',\n          sortable && 'pe-4',\n        ),\n      )\n    : null;\n\n  let content: React.ReactNode = children;\n  if (sortable) {\n    content = (\n      <div className=\"flex items-center\">\n        <TableSortButton\n          component=\"Table.HeaderCell\"\n          direction={sortDirection}\n          sortIcon={sortIcon}\n          className={tableHeaderCellClassNames.button}\n          iconClassName={tableHeaderCellClassNames.sortIcon}\n          onClick={onSortClick}\n        >\n          {children}\n        </TableSortButton>\n        {asideNode}\n      </div>\n    );\n  } else if (hasAside) {\n    content = (\n      <div className=\"flex items-center gap-2\">\n        {children}\n        {asideNode}\n      </div>\n    );\n  }\n\n  return (\n    <th\n      ref={ref}\n      scope=\"col\"\n      aria-sort={sortable ? (sortDirection ?? 'none') : undefined}\n      className={cn(\n        tableHeaderCellClassNames.root,\n        'px-4 py-3 text-start font-semibold text-caption-1 uppercase tracking-wider border-b border-border',\n        sortable && 'p-0 hover:bg-subtle-hover',\n        className,\n      )}\n      {...props}\n    >\n      {content}\n    </th>\n  );\n};\nTableHeaderCell.displayName = 'TableHeaderCell';\n\n/** @deprecated Use `Table.Header` (`TableHeader`). */\nconst TableHead = (props: TableHeadProps) => {\n  warnDeprecated('Table', 'Table.Head', 'Table.Header');\n  return <TableHeader {...props} />;\n};\nTableHead.displayName = 'TableHead';\n\n/** @deprecated Use `Table.HeaderCell` (`TableHeaderCell`). */\nconst TableHeadCell = (props: TableHeadCellProps) => {\n  warnDeprecated('Table', 'Table.HeadCell', 'Table.HeaderCell');\n  return <TableHeaderCell {...props} />;\n};\nTableHeadCell.displayName = 'TableHeadCell';\n\n/** The table's `<tbody>`. */\nconst TableBody = ({ children, className, ref, ...rest }: TableBodyProps) => (\n  <tbody ref={ref} {...rest} className={cn(tableBodyClassNames.root, className)}>\n    {children}\n  </tbody>\n);\nTableBody.displayName = 'TableBody';\n\n/**\n * A table row. Striping comes from the table (`striped`), so rows need no context. The row is the\n * `group/table-row` group whose hover or focus draws the subtle selection controls and the cell\n * actions inside it (Tree's rows keep their own group).\n */\nconst TableRow = ({ children, className, ref, ...props }: TableRowProps) => (\n  <tr\n    ref={ref}\n    className={cn(\n      tableRowClassNames.root,\n      'group/table-row',\n      'hover:bg-subtle-hover transition-colors motion-reduce:transition-none',\n      className,\n    )}\n    {...props}\n  >\n    {children}\n  </tr>\n);\nTableRow.displayName = 'TableRow';\n\n/** A data cell (`<td>`), the positioning box of a `Table.CellActions` inside it. */\nconst TableCell = ({ children, className, ref, ...props }: TableCellProps) => (\n  <td\n    ref={ref}\n    className={cn(\n      tableCellClassNames.root,\n      'relative px-4 py-3 text-body-1 border-b border-border',\n      className,\n    )}\n    {...props}\n  >\n    {children}\n  </td>\n);\nTableCell.displayName = 'TableCell';\n\n/**\n * A selection cell: a `<td>` with a native checkbox or radio (`type`), drawn as the DataGrid's.\n * The table keeps no selection, so the cell is usually controlled (`checked`, `onCheckedChange`)\n * from your rows' state; `checked=\"mixed\"` draws a header select-all whose rows are partly\n * selected. `id`, `aria-label`, `aria-labelledby`, `aria-describedby`, the other ARIA state\n * props, `autoFocus`, `tabIndex`, the focus, key and change handlers and `name`, `value`, `form`,\n * `disabled` and `required` go to the control (`controlRef`); `className`, `style`, `data-*`, the\n * other handlers and `ref` stay on the cell, which carries `data-type`. Name the control with\n * `aria-label` or `aria-labelledby` (the row's first cell); a development warning reports a\n * control without a name.\n */\nconst TableSelectionCell = ({\n  type = 'checkbox',\n  checked: checkedProp,\n  defaultChecked = false,\n  onCheckedChange,\n  onChange,\n  name,\n  value,\n  form,\n  disabled,\n  required,\n  subtle = false,\n  invisible = false,\n  id,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledBy,\n  'aria-describedby': ariaDescribedBy,\n  'aria-invalid': ariaInvalid,\n  'aria-required': ariaRequired,\n  'aria-errormessage': ariaErrorMessage,\n  'aria-details': ariaDetails,\n  autoFocus,\n  tabIndex,\n  onFocus,\n  onBlur,\n  onKeyDown,\n  onKeyUp,\n  controlRef,\n  className,\n  ref,\n  ...rest\n}: TableSelectionCellProps) => {\n  // The details of the change being made, set around the setter.\n  const detailsRef = React.useRef<TableSelectionCellCheckedChangeDetails | undefined>(undefined);\n  const [checked, setChecked, isControlled] = useControllable<boolean | 'mixed'>(\n    checkedProp,\n    defaultChecked,\n    (next) => {\n      // Only a form reset to a mixed `defaultChecked` sets `'mixed'`; the callback reports booleans.\n      if (next !== 'mixed') onCheckedChange?.(next, detailsRef.current);\n    },\n  );\n  const changeChecked = useEventCallback((next: boolean, event: Event) => {\n    detailsRef.current = { event };\n    try {\n      setChecked(next);\n    } finally {\n      detailsRef.current = undefined;\n    }\n  });\n\n  const inputRef = React.useRef<HTMLInputElement>(null);\n  const mergedControlRef = useMergedRefs<HTMLInputElement>(inputRef, controlRef);\n  useFormReset(inputRef, () => setChecked(defaultChecked), form);\n\n  // A native radio group unchecks its other radios without an event, so an uncontrolled radio\n  // listens for the click that checks another radio of its group: in the capture phase, before\n  // React restores its controlled inputs from that click.\n  const followsGroup = type === 'radio' && !isControlled && Boolean(name);\n  React.useEffect(() => {\n    const input = inputRef.current;\n    if (!followsGroup || !input) return;\n    const root = input.getRootNode();\n    const handleClick = (event: Event) => {\n      const target = event.target;\n      if (target === input || !(target instanceof HTMLInputElement) || target.type !== 'radio') {\n        return;\n      }\n      if (target.name === input.name && target.form === input.form && target.checked) {\n        changeChecked(false, event);\n      }\n    };\n    root.addEventListener('click', handleClick, true);\n    return () => root.removeEventListener('click', handleClick, true);\n  }, [followsGroup, changeChecked]);\n\n  // Development diagnostics (C-DEV): a control needs a name; a `<label for>` gives one too.\n  React.useEffect(() => {\n    const input = inputRef.current;\n    if (!isDev || !input || ariaLabel || ariaLabelledBy || (input.labels?.length ?? 0) > 0) return;\n    warnOnce(\n      'Table.SelectionCell:name',\n      'Table.SelectionCell: the selection control has no accessible name. Pass `aria-label` ' +\n        '(e.g. \"Select Alpha\") or `aria-labelledby` (e.g. the id of the row’s first cell).',\n    );\n  }, [ariaLabel, ariaLabelledBy, id]);\n\n  return (\n    <td\n      ref={ref}\n      data-type={type}\n      {...rest}\n      className={cn(tableSelectionCellClassNames.root, SELECTION_CELL_CLASSES, className)}\n    >\n      <TableSelectionControl\n        ref={mergedControlRef}\n        type={type}\n        checked={checked}\n        subtle={subtle}\n        invisible={invisible}\n        id={id}\n        name={name}\n        value={value}\n        form={form}\n        disabled={disabled}\n        required={required}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        aria-describedby={ariaDescribedBy}\n        aria-invalid={ariaInvalid}\n        aria-required={ariaRequired}\n        aria-errormessage={ariaErrorMessage}\n        aria-details={ariaDetails}\n        autoFocus={autoFocus}\n        tabIndex={tabIndex}\n        onFocus={onFocus}\n        onBlur={onBlur}\n        onKeyDown={onKeyDown}\n        onKeyUp={onKeyUp}\n        onChange={composeEventHandlers(onChange, (event) =>\n          changeChecked(event.currentTarget.checked, event.nativeEvent),\n        )}\n        className={tableSelectionCellClassNames.control}\n      />\n    </td>\n  );\n};\nTableSelectionCell.displayName = 'TableSelectionCell';\n\n/** The box an Avatar in a cell layout's `media` takes when it sets no `size`. */\nconst CELL_LAYOUT_AVATAR_BOX: AvatarSizeContextValue = { size: 32 };\n\n/** The media box: its icon at 20px, or 24px with the primary appearance. */\nconst CELL_LAYOUT_MEDIA_CLASSES = {\n  default: 'flex shrink-0 items-center [&>svg]:size-5',\n  primary: 'flex shrink-0 items-center [&>svg]:size-6',\n} as const;\n\n/**\n * Lays out a cell's content: `media` (an icon or an Avatar), then the main text (children) with\n * an optional `description` under it. `truncate` keeps both lines to one line each with an\n * ellipsis; `appearance=\"primary\"` draws the main text semibold, for the cell that names the row.\n */\nconst TableCellLayout = ({\n  media,\n  description,\n  truncate = false,\n  appearance,\n  children,\n  className,\n  ref,\n  ...rest\n}: TableCellLayoutProps) => {\n  const hasMedia = slotRendersContent(media);\n  const hasMain = slotRendersContent(children);\n  const hasDescription = slotRendersContent(description);\n  const primary = appearance === 'primary';\n  return (\n    <div\n      ref={ref}\n      data-appearance={appearance}\n      data-truncate={truncate ? '' : undefined}\n      {...rest}\n      className={cn(\n        tableCellLayoutClassNames.root,\n        'flex items-center gap-2',\n        truncate && 'overflow-x-hidden',\n        className,\n      )}\n    >\n      {hasMedia && (\n        // An Avatar without its own `size` takes the 32px box of a table row.\n        <AvatarSizeContext.Provider value={CELL_LAYOUT_AVATAR_BOX}>\n          {renderSlot(\n            media,\n            'span',\n            cn(\n              tableCellLayoutClassNames.media,\n              CELL_LAYOUT_MEDIA_CLASSES[primary ? 'primary' : 'default'],\n            ),\n          )}\n        </AvatarSizeContext.Provider>\n      )}\n      {(hasMain || hasDescription) && (\n        <div\n          className={cn(\n            tableCellLayoutClassNames.content,\n            'flex flex-col',\n            truncate && 'min-w-0 overflow-x-hidden',\n          )}\n        >\n          {hasMain && (\n            <span\n              className={cn(\n                tableCellLayoutClassNames.main,\n                truncate && 'truncate',\n                primary && 'font-semibold',\n              )}\n            >\n              {materialiseSlotContent(children)}\n            </span>\n          )}\n          {hasDescription &&\n            renderSlot(\n              description,\n              'span',\n              cn(\n                tableCellLayoutClassNames.description,\n                'text-caption-1 text-muted-foreground',\n                truncate && 'truncate',\n              ),\n            )}\n        </div>\n      )}\n    </div>\n  );\n};\nTableCellLayout.displayName = 'TableCellLayout';\n\n/**\n * Where cell actions sit, over the end of their cell from its top edge to its bottom edge (the\n * buttons centred between them), and what they draw over the content under them: an opaque\n * background that follows the row's, over the full height of the cell, so wrapped text or a\n * layout with a description never shows above or below the buttons. That is the page background\n * behind a row without a fill, the row's hover color, the stripe of a striped table's odd body\n * rows (as the table's own zero-specificity rule) and the fill of a DataGrid's selected row\n * (brand and neutral appearances).\n */\nconst CELL_ACTIONS_CLASSES =\n  'absolute inset-y-0 end-0 flex items-center gap-1 px-1 bg-background group-hover/table-row:bg-subtle-hover [:where([data-striped]>tbody>tr:nth-child(odd)>*)>&]:bg-card [[data-selection-appearance=brand]>tbody>[data-selected]>*>&]:bg-selected [[data-selection-appearance=neutral]>tbody>[data-selected]>*>&]:bg-subtle-selected transition-[opacity,background-color] motion-reduce:transition-none';\n\n/**\n * Transparent until the row is hovered or holds focus, or focus is in the actions themselves;\n * forced colors and a coarse pointer (touch) always draw them.\n */\nconst CELL_ACTIONS_REVEAL_CLASSES =\n  'opacity-0 group-hover/table-row:opacity-100 group-focus-within/table-row:opacity-100 focus-within:opacity-100 forced-colors:opacity-100 pointer-coarse:opacity-100';\n\n/**\n * Actions of a cell (buttons, a menu button), shown over the end of the cell while its row is\n * hovered or holds focus, and always in forced colors and on a coarse pointer (touch); `visible`\n * keeps them shown. They stay in the tab order while hidden, and Tab into them shows them. Place\n * them in a `Table.Cell` or `DataGrid.Cell`, whose row (`Table.Row`, `DataGrid.Row`) is the group\n * that shows them. Their opaque background follows the row's (hover, a striped table's stripe, a\n * DataGrid's selected row); a row with a background of its own needs the same class on its\n * actions. The element carries `data-visible` while `visible` is set.\n */\nconst TableCellActions = ({ visible = false, className, ref, ...rest }: TableCellActionsProps) => (\n  <div\n    ref={ref}\n    data-visible={visible ? '' : undefined}\n    {...rest}\n    className={cn(\n      tableCellActionsClassNames.root,\n      CELL_ACTIONS_CLASSES,\n      visible ? undefined : CELL_ACTIONS_REVEAL_CLASSES,\n      className,\n    )}\n  />\n);\nTableCellActions.displayName = 'TableCellActions';\n\nexport {\n  TableHeader,\n  TableHeaderCell,\n  TableHead,\n  TableHeadCell,\n  TableBody,\n  TableRow,\n  TableCell,\n  TableSelectionCell,\n  TableCellLayout,\n  TableCellActions,\n};\n\n/**\n * A non-interactive data table with an optional striped body. The table sits in a horizontally\n * scrollable wrapper; while it scrolls, the wrapper is a focusable region (named by\n * `containerProps` or the `<caption>`) so keyboard users can scroll it.\n *\n * The table keeps no state: a sortable `Table.HeaderCell` reports its clicks, and a\n * `Table.SelectionCell` (a native checkbox or radio) its changes, for your state to sort and\n * select the rows. `Table.CellLayout` lays out a cell's media, text and description, and\n * `Table.CellActions` shows a cell's actions while its row is hovered or holds focus.\n *\n * Sub-components are available as `Table.Header`, `Table.HeaderCell`, `Table.Body`, `Table.Row`,\n * `Table.Cell`, `Table.SelectionCell`, `Table.CellLayout` and `Table.CellActions` in client\n * components, and as the flat exports `TableHeader`, `TableHeaderCell`, `TableBody`, `TableRow`,\n * `TableCell`, `TableSelectionCell`, `TableCellLayout` and `TableCellActions` (the form React\n * Server Components can import). `Table.Head`/`Table.HeadCell` (`TableHead`/`TableHeadCell`) are\n * deprecated aliases.\n */\nexport const Table = /* @__PURE__ */ Object.assign(TableRoot, {\n  Header: TableHeader,\n  HeaderCell: TableHeaderCell,\n  /** @deprecated Use `Table.Header`. */\n  Head: TableHead,\n  /** @deprecated Use `Table.HeaderCell`. */\n  HeadCell: TableHeadCell,\n  Body: TableBody,\n  Row: TableRow,\n  Cell: TableCell,\n  SelectionCell: TableSelectionCell,\n  CellLayout: TableCellLayout,\n  CellActions: TableCellActions,\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;AAkQA,IAAMG,gBAA4B,CAAC;AAOnC,SAASC,EAAsB,GAAyC;CACtE,IAAMC,IAAYH,EAAM,aACrB,MAAyB;EACxB,IAAI,CAACI,KAAW,OAAO,iBAAmB,KAAa,aAAa,CAAC;EACrE,IAAMC,IAAW,IAAI,eAAeC,CAAQ;EAC5C,EAAS,QAAQF,CAAO;EACxB,KAAK,IAAMG,KAAS,MAAM,KAAKH,EAAQ,QAAQ,GAAG,EAAS,QAAQG,CAAK;EACxE,aAAaF,EAAS,WAAW;CACnC,GACA,CAACD,CAAO,CACV,GACMI,IAAcR,EAAM,kBACjBI,IAAUA,EAAQ,cAAcA,EAAQ,cAAc,IAC7D,CAACA,CAAO,CACV;CACA,OAAOJ,EAAM,qBAAqBI,IAAUD,IAAYF,GAAeO,SAAmB,EAAK;AACjG;AAEA,SAASC,EAAU,GAAoE;CACrF,OAAOC,EAAgBC,GAAM,SAAS;AACxC;AAGA,IAAMC,KAAa,EACjB,aAAU,IACV,mBACA,aACA,cACA,QACA,GAAGC,QACa;CAChB,IAAM,EACJ,WAAWC,GACX,KAAKC,GACL,cAAcC,GACd,mBAAmBC,GACnB,GAAGC,MACDC,KAAkB,CAAC,GAEjB,CAACf,GAASgB,KAAcpB,EAAM,SAAgC,IAAI,GAClEqB,IAAaC,EAA8BP,GAAcK,CAAU,GACnEG,IAAarB,EAAsBE,CAAO,GAI1CoB,IAAqB1B,EAAM,oBAAoB,GAC/C2B,IAAeC,EAAgBC,CAAQ,GACvCC,IAAeH,EAAa,WAAW,EAAE,cAAWhB,EAAUE,CAAI,CAAC,GACnEkB,IACJD,KAAgB,IACXH,EAAaG,EAAa,CAAC,OAC5B,MACAE,IAAYD,IAAWA,EAAQ,MAAM,MAAML,IAAsB,KAAA,GACjEO,IACJF,KAAWA,EAAQ,MAAM,OAAO,KAAA,IAC5BJ,EAAa,KAAK,EAAE,QAAK,WAAQ,MAC/B,kBAACzB,EAAM,UAAP,EAAA,UACGgC,MAAUJ,IACP5B,EAAM,aAAa6B,GAAS,EAAE,IAAIL,EAAmB,CAAC,IACtDb,EACU,GAJKsB,CAIL,CACjB,IACDN,GAEAO,IAAmBlB,IAAiB,KAAA,IAAaC,KAAuBa,GACxEK,IAAQ,GAAQnB,KAAkBkB,IAClCE,IAAWb,KAAcY,GAEzBE,IAAenB,EAAc;CAWnC,OATAlB,EAAM,gBAAgB;EACpB,AAAIuB,KAAc,CAACY,KACjBG,EACE,+BACA,6HACF;CAEJ,GAAG,CAACf,GAAYY,CAAK,CAAC,GAGpB,kBAAC,OAAD;EACE,GAAIjB;EACJ,KAAKG;EACL,MAAMe,IAAW,WAAWC;EAC5B,UAAUd,IAAa,IAAIL,EAAc;EACzC,cAAYK,KAAcc,MAAiB,KAAA,IAAYrB,IAAiB,KAAA;EACxE,mBACEoB,IAAWF,IAAmBG,MAAiB,KAAA,IAAkC,KAAA,IAAtBpB;EAE7D,WAAWsB,EACTC,EAAgB,WAChB,mDACAjB,KAAA,qFACAT,CACF;EAEA,UAAA,kBAAC,SAAD;GACO;GACL,gBAAc2B,IAAU,KAAK,KAAA;GAC7B,WAAWF,EACTC,EAAgB,MAChB,2CAEAC,KAAW,+CACXC,CACF;GACA,GAAI7B;GAEH,UAAAkB;EACI,CAAA;CACJ,CAAA;AAET;AACA,EAAU,cAAc;AAGxB,IAAMY,KAAe,EAAE,aAAU,cAAW,QAAK,GAAGC,QAClD,kBAAC,SAAD;CAAY;CAAK,GAAIA;CAAM,WAAWL,EAAGM,EAAsB,MAAM,WAAWH,CAAS;CACtF;AACI,CAAA;AAET,EAAY,cAAc;AAG1B,IAAMI,KAAmB,EACvB,cAAW,IACX,kBACA,gBACA,aACA,UACA,aACA,cACA,QACA,GAAGjC,QACuB;CAC1B,IAAMkC,IAAWC,EAAmBC,CAAK,GACnCC,IAAYH,IACdI,EACEF,GACA,QACAV,EACEa,EAA0B,OAC1B,qCACAC,KAAY,MACd,CACF,IACA,MAEAtB,IAA2BJ;CA0B/B,OAzBI0B,IACF,IACE,kBAAC,OAAD;EAAK,WAAU;EAAf,UAAA,CACE,kBAACC,GAAD;GACE,WAAU;GACV,WAAWC;GACD;GACV,WAAWH,EAA0B;GACrC,eAAeA,EAA0B;GACzC,SAASI;GAER;EACc,CAAA,GAChBN,CACE;MAEEH,MACT,IACE,kBAAC,OAAD;EAAK,WAAU;EAAf,UAAA,CACGpB,GACAuB,CACE;MAKP,kBAAC,MAAD;EACO;EACL,OAAM;EACN,aAAWG,IAAYE,KAAiB,SAAU,KAAA;EAClD,WAAWhB,EACTa,EAA0B,MAC1B,qGACAC,KAAY,6BACZX,CACF;EACA,GAAI7B;EAEH,UAAAkB;CACC,CAAA;AAER;AACA,EAAgB,cAAc;AAG9B,IAAM0B,KAAa,OACjBC,EAAe,SAAS,cAAc,cAAc,GAC7C,kBAACf,GAAD,EAAa,GAAI9B,EAAQ,CAAA;AAElC,EAAU,cAAc;AAGxB,IAAM8C,KAAiB,OACrBD,EAAe,SAAS,kBAAkB,kBAAkB,GACrD,kBAACZ,GAAD,EAAiB,GAAIjC,EAAQ,CAAA;AAEtC,EAAc,cAAc;AAG5B,IAAM+C,KAAa,EAAE,aAAU,cAAW,QAAK,GAAGhB,QAChD,kBAAC,SAAD;CAAY;CAAK,GAAIA;CAAM,WAAWL,EAAGsB,EAAoB,MAAMnB,CAAS;CACzE;AACI,CAAA;AAET,EAAU,cAAc;AAOxB,IAAMoB,KAAY,EAAE,aAAU,cAAW,QAAK,GAAGjD,QAC/C,kBAAC,MAAD;CACO;CACL,WAAW0B,EACTwB,EAAmB,MACnB,mBACA,yEACArB,CACF;CACA,GAAI7B;CAEH;AACC,CAAA;AAEN,EAAS,cAAc;AAGvB,IAAMmD,KAAa,EAAE,aAAU,cAAW,QAAK,GAAGnD,QAChD,kBAAC,MAAD;CACO;CACL,WAAW0B,EACT0B,EAAoB,MACpB,yDACAvB,CACF;CACA,GAAI7B;CAEH;AACC,CAAA;AAEN,EAAU,cAAc;AAaxB,IAAMqD,KAAsB,EAC1B,UAAO,YACP,SAASC,GACT,oBAAiB,IACjB,oBACA,aACA,SACA,UACA,SACA,aACA,aACA,YAAS,IACT,eAAY,IACZ,OACA,cAAcC,GACd,mBAAmBC,GACnB,oBAAoBC,GACpB,gBAAgBC,GAChB,iBAAiBC,GACjB,qBAAqBC,GACrB,gBAAgBC,GAChB,cACA,aACA,YACA,WACA,cACA,YACA,eACA,cACA,QACA,GAAG9B,QAC0B;CAE7B,IAAM+B,IAAa3E,EAAM,OAA2D,KAAA,CAAS,GACvF,CAAC4E,GAASC,GAAYC,KAAgBC,EAC1CZ,GACAa,IACC,MAAS;EAER,AAAIC,MAAS,WAASC,IAAkBD,GAAMN,EAAW,OAAO;CAClE,CACF,GACMQ,IAAgBC,GAAkB,GAAe,MAAiB;EACtE,EAAW,UAAU,EAAE,SAAM;EAC7B,IAAI;GACF,EAAWH,CAAI;EACjB,UAAU;GACR,EAAW,UAAU,KAAA;EACvB;CACF,CAAC,GAEKI,IAAWrF,EAAM,OAAyB,IAAI,GAC9CsF,IAAmBhE,EAAgC+D,GAAUE,CAAU;CAC7E,EAAaF,SAAgBR,EAAWG,CAAc,GAAGQ,CAAI;CAK7D,IAAMC,IAAeC,MAAS,WAAW,CAACZ,KAAgB,EAAQa;CA6BlE,OA5BA3F,EAAM,gBAAgB;EACpB,IAAM4F,IAAQP,EAAS;EACvB,IAAI,CAACI,KAAgB,CAACG,GAAO;EAC7B,IAAMC,IAAOD,EAAM,YAAY,GACzBE,KAAe,MAAiB;GACpC,IAAMC,IAASC,EAAM;GACrB,AAAID,MAAWH,KAAWG,aAAkB,oBAAqBA,EAAO,SAAS,WAG7EA,EAAO,SAASH,EAAM,QAAQG,EAAO,SAASH,EAAM,QAAQG,EAAO,WACrEZ,EAAc,IAAOa,CAAK;EAE9B;EAEA,OADAH,EAAK,iBAAiB,SAASC,GAAa,EAAI,SACnCD,EAAK,oBAAoB,SAASC,GAAa,EAAI;CAClE,GAAG,CAACL,GAAcN,CAAa,CAAC,GAGhCnF,EAAM,gBAAgB;EACpB,IAAM4F,IAAQP,EAAS;EACvB,AAAI,CAACY,KAAS,CAACL,KAASxB,KAAaC,MAAmBuB,EAAM,QAAQ,UAAU,KAAK,KACrFtD,EACE,4BACA,0KAEF;CACF,GAAG;EAAC8B;EAAWC;EAAgB6B;CAAE,CAAC,GAGhC,kBAAC,MAAD;EACO;EACL,aAAWR;EACX,GAAI9C;EACJ,WAAWL,EAAG4D,EAA6B,MAAMC,GAAwB1D,CAAS;EAElF,UAAA,kBAAC2D,GAAD;GACE,KAAKf;GACC;GACG;GACD;GACG;GACP;GACE;GACC;GACD;GACI;GACA;GACV,cAAYlB;GACZ,mBAAiBC;GACjB,oBAAkBC;GAClB,gBAAcC;GACd,iBAAeC;GACf,qBAAmBC;GACnB,gBAAcC;GACH;GACD;GACD;GACD;GACG;GACF;GACT,UAAU4B,EAAqBhG,IAAW,MACxC6E,EAAca,EAAM,cAAc,SAASA,EAAM,WAAW,CAC9D;GACA,WAAWG,EAA6B;EACzC,CAAA;CACC,CAAA;AAER;AACA,EAAmB,cAAc;AAGjC,IAAMI,IAAiD,EAAE,MAAM,GAAG,GAG5DC,IAA4B;CAChC,SAAS;CACT,SAAS;AACX,GAOMC,KAAmB,EACvB,UACA,gBACA,cAAW,IACX,eACA,aACA,cACA,QACA,GAAG7D,QACuB;CAC1B,IAAM8D,IAAW1D,EAAmB2D,CAAK,GACnCC,IAAU5D,EAAmBrB,CAAQ,GACrCkF,IAAiB7D,EAAmB8D,CAAW,GAC/CC,IAAUC,MAAe;CAC/B,OACE,kBAAC,OAAD;EACO;EACL,mBAAiBA;EACjB,iBAAeC,IAAW,KAAK,KAAA;EAC/B,GAAIrE;EACJ,WAAWL,EACT2E,EAA0B,MAC1B,2BACAD,KAAY,qBACZvE,CACF;EAVF,UAAA,CAYGgE,KAEC,kBAACS,EAAkB,UAAnB;GAA4B,OAAOZ;GAChC,UAAApD,EACCwD,GACA,QACApE,EACE2E,EAA0B,OAC1BV,EAA0BO,IAAU,YAAY,UAClD,CACF;EAC0B,CAAA,IAE5BH,KAAWC,MACX,kBAAC,OAAD;GACE,WAAWtE,EACT2E,EAA0B,SAC1B,iBACAD,KAAY,2BACd;GALF,UAAA,CAOGL,KACC,kBAAC,QAAD;IACE,WAAWrE,EACT2E,EAA0B,MAC1BD,KAAY,YACZF,KAAW,eACb;IAEC,UAAAK,EAAuBzF,CAAQ;GAC5B,CAAA,GAEPkF,KACC1D,EACE2D,GACA,QACAvE,EACE2E,EAA0B,aAC1B,wCACAD,KAAY,UACd,CACF,CACC;EAEJ,CAAA,CAAA;;AAET;AACA,EAAgB,cAAc;AAW9B,IAAMI,IACJ,2YAMIC,IACJ,sKAWIC,KAAoB,EAAE,aAAU,IAAO,cAAW,QAAK,GAAG3E,QAC9D,kBAAC,OAAD;CACO;CACL,gBAAc4E,IAAU,KAAK,KAAA;CAC7B,GAAI5E;CACJ,WAAWL,EACTkF,EAA2B,MAC3BJ,GACAG,IAAU,KAAA,IAAYF,GACtB5E,CACF;AACD,CAAA;AAEH,EAAiB,cAAc;AAgC/B,IAAagF,IAAwB,uBAAO,OAAO9G,GAAW;CAC5D,QAAQ+B;CACR,YAAYG;CAEZ,MAAMW;CAEN,UAAUE;CACV,MAAMC;CACN,KAAKE;CACL,MAAME;CACN,eAAeE;CACf,YAAYuC;CACZ,aAAac;AACf,CAAC"}
+{"version":3,"file":"Table.mjs","names":["useId","useId$1","React","noopSubscribe","useHorizontalOverflow","subscribe","wrapper","observer","onChange","child","getSnapshot","isCaption","isElementOfType","node","TableRoot","props","containerClassName","containerRef","containerLabel","containerLabelledBy","containerRest","containerProps","setWrapper","wrapperRef","useMergedRefs","scrollable","generatedCaptionId","flatChildren","flattenChildren","children","captionIndex","caption","captionId","content","index","key","regionLabelledBy","named","isRegion","consumerRole","warnOnce","cn","tableClassNames","striped","className","TableHeader","rest","tableHeaderClassNames","TableHeaderCell","hasAside","slotRendersContent","aside","asideNode","renderSlot","tableHeaderCellClassNames","sortable","TableSortButton","sortDirection","onSortClick","TableHead","warnDeprecated","TableHeadCell","TableBody","tableBodyClassNames","TableRow","tableRowClassNames","TableCell","tableCellClassNames","TableSelectionCell","checkedProp","ariaLabel","ariaLabelledBy","ariaDescribedBy","ariaInvalid","ariaRequired","ariaErrorMessage","ariaDetails","detailsRef","checked","setChecked","isControlled","useControllable","defaultChecked","next","onCheckedChange","changeChecked","useEventCallback","inputRef","mergedControlRef","controlRef","form","followsGroup","type","name","input","root","handleClick","target","event","isDev","id","tableSelectionCellClassNames","SELECTION_CELL_CLASSES","TableSelectionControl","composeEventHandlers","CELL_LAYOUT_AVATAR_BOX","CELL_LAYOUT_MEDIA_CLASSES","TableCellLayout","hasMedia","media","hasMain","hasDescription","description","primary","appearance","truncate","tableCellLayoutClassNames","AvatarSizeContext","materialiseSlotContent","CELL_ACTIONS_CLASSES","CELL_ACTIONS_REVEAL_CLASSES","TableCellActions","visible","tableCellActionsClassNames","Table","TableResizeHandle"],"sources":["../../../src/components/table/Table.tsx"],"sourcesContent":["import * as React from 'react';\nimport { flattenChildren, isElementOfType } from '../../lib/children';\nimport { cn } from '../../lib/cn';\nimport {\n  tableBodyClassNames,\n  tableCellActionsClassNames,\n  tableCellClassNames,\n  tableCellLayoutClassNames,\n  tableClassNames,\n  tableHeaderCellClassNames,\n  tableHeaderClassNames,\n  tableRowClassNames,\n  tableSelectionCellClassNames,\n} from '../../lib/classNames';\nimport { composeEventHandlers } from '../../lib/composeEventHandlers';\nimport { isDev, warnDeprecated, warnOnce } from '../../lib/dev';\nimport { materialiseSlotContent, renderSlot, slotRendersContent } from '../../lib/slot';\nimport type { Slot } from '../../lib/slot';\nimport { focusRing } from '../../lib/styles';\nimport { useControllable } from '../../hooks/useControllable';\nimport { useEventCallback } from '../../hooks/useEventCallback';\nimport { useFormReset } from '../../hooks/useFormReset';\nimport { useId } from '../../hooks/useId';\nimport { useMergedRefs } from '../../hooks/useMergedRefs';\nimport { AvatarSizeContext } from '../data-display/Avatar.context';\nimport type { AvatarSizeContextValue } from '../data-display/Avatar.context';\nimport { TableResizeHandle } from './Table.resize';\nimport type { TableResizeHandleProps } from './Table.resize';\nimport { SELECTION_CELL_CLASSES, TableSelectionControl, TableSortButton } from './Table.shared';\nimport type { SortDirection } from './Table.shared';\n\n/** Properties for the Table component. */\nexport interface TableProps extends React.HTMLAttributes<HTMLTableElement> {\n  /**\n   * Whether to apply alternating row background colors (odd body rows). The stripe has zero\n   * specificity, so a row's own background class (`<Table.Row className=\"bg-selected\">`) and its\n   * hover color win over it.\n   * @default false\n   */\n  striped?: boolean;\n  /**\n   * Props for the wrapper `<div>` around the `<table>`: a horizontally scrollable container\n   * (`overflow-x-auto`). Use it for its className, style, ref or `aria-label`. While the table\n   * scrolls horizontally, the wrapper is a keyboard-focusable `role=\"region\"` named by\n   * `containerProps['aria-label']`/`['aria-labelledby']`, else by the table's `<caption>`. While\n   * it does not scroll, the wrapper has no role and its `aria-label`/`aria-labelledby` are left\n   * off, unless you also pass a `role` in `containerProps` (then they are always applied).\n   */\n  containerProps?: Omit<React.ComponentPropsWithRef<'div'>, 'children'>;\n  /** Table caption, header, body and row elements. */\n  children: React.ReactNode;\n  /** Ref to the `<table>` element. */\n  ref?: React.Ref<HTMLTableElement>;\n}\n\n/** Properties for the TableHeader sub-component. */\nexport interface TableHeaderProps extends React.HTMLAttributes<HTMLTableSectionElement> {\n  /** Table header row elements. */\n  children: React.ReactNode;\n  /** Ref to the `<thead>` element. */\n  ref?: React.Ref<HTMLTableSectionElement>;\n}\n\n/** Properties for the TableHeaderCell sub-component. */\nexport interface TableHeaderCellProps extends React.ThHTMLAttributes<HTMLTableCellElement> {\n  /**\n   * Makes the column header a sort control: the content is wrapped in a `<button>` that fills the\n   * cell, and the cell carries `aria-sort` (`\"none\"` while `sortDirection` is not set). The table\n   * does not sort or track the direction; keep it in your state, set `sortDirection` and sort the\n   * rows in `onSortClick`. The table keeps no grid semantics.\n   * @default false\n   */\n  sortable?: boolean;\n  /**\n   * The direction the column is sorted in, shown as `aria-sort` and as the glyph of a sortable\n   * header. Absent means the column is not sorted. Without `sortable` it has no effect.\n   */\n  sortDirection?: SortDirection;\n  /**\n   * Called with the click event when the sort button is activated (click, Enter or Space).\n   * Fluent's `onSortClick`.\n   */\n  onSortClick?: React.MouseEventHandler<HTMLButtonElement>;\n  /**\n   * The glyph that shows the direction, only while `sortDirection` is set. It is decorative\n   * (`aria-hidden`) and carries `data-direction`. `null` and `undefined` keep the default arrow\n   * (up for ascending, down for descending); `false` or anything that renders nothing hides it. A\n   * `<button>` or `Button` passed here is not nested: its children become the glyph.\n   */\n  sortIcon?: Slot<'span'>;\n  /**\n   * Content beside the header content, outside the sort button (a filter button, an info\n   * button), so it is not part of the button's name. Nothing renders for content that renders\n   * nothing.\n   */\n  aside?: Slot<'span'>;\n  /** Header cell content. */\n  children: React.ReactNode;\n  /** Ref to the `<th>` element. */\n  ref?: React.Ref<HTMLTableCellElement>;\n}\n\n/** @deprecated Use `TableHeaderProps` (`Table.Header`). */\nexport type TableHeadProps = TableHeaderProps;\n\n/** @deprecated Use `TableHeaderCellProps` (`Table.HeaderCell`). */\nexport type TableHeadCellProps = TableHeaderCellProps;\n\n/** Properties for the TableBody sub-component. */\nexport interface TableBodyProps extends React.HTMLAttributes<HTMLTableSectionElement> {\n  /** Table row elements. */\n  children: React.ReactNode;\n  /** Ref to the `<tbody>` element. */\n  ref?: React.Ref<HTMLTableSectionElement>;\n}\n\n/** Properties for the TableRow sub-component. */\nexport interface TableRowProps extends React.HTMLAttributes<HTMLTableRowElement> {\n  /** Table cell elements. */\n  children: React.ReactNode;\n  /** Ref to the `<tr>` element. */\n  ref?: React.Ref<HTMLTableRowElement>;\n}\n\n/** Properties for the TableCell sub-component. */\nexport interface TableCellProps extends React.TdHTMLAttributes<HTMLTableCellElement> {\n  /** Cell content. */\n  children: React.ReactNode;\n  /** Ref to the `<td>` element. */\n  ref?: React.Ref<HTMLTableCellElement>;\n}\n\n/** Second argument of `Table.SelectionCell`'s `onCheckedChange`: the event behind the change. */\nexport interface TableSelectionCellCheckedChangeDetails {\n  /**\n   * The DOM event behind the change: the click of the control (Space clicks it too), or, for an\n   * uncontrolled radio, the click that checked another radio of its group.\n   */\n  event: Event;\n}\n\n/**\n * Properties for the TableSelectionCell sub-component. The focus, key and change handlers are the\n * control's (C-ROUTING), so they replace the cell's.\n */\nexport interface TableSelectionCellProps extends Omit<\n  React.TdHTMLAttributes<HTMLTableCellElement>,\n  'children' | 'defaultChecked' | 'onChange' | 'onFocus' | 'onBlur' | 'onKeyDown' | 'onKeyUp'\n> {\n  /**\n   * The control: a checkbox (multiple selection, or a select-all in the header) or a radio (single\n   * selection).\n   * @default 'checkbox'\n   */\n  type?: 'checkbox' | 'radio';\n  /**\n   * Controlled checked state. `'mixed'` draws an indeterminate checkbox (a select-all whose rows\n   * are partly selected); a click on it checks it. `'mixed'` is for checkboxes only: on a radio it\n   * has no effect (the radio is drawn unchecked).\n   */\n  checked?: boolean | 'mixed';\n  /**\n   * Initial checked state for uncontrolled usage, also the state a form reset restores.\n   * Uncontrolled radios that share a `name` uncheck each other, as a native radio group does.\n   * @default false\n   */\n  defaultChecked?: boolean | 'mixed';\n  /**\n   * Called with the new checked state when the user checks or unchecks the control (not for no-op\n   * updates), and when a form reset restores a `true` or `false` `defaultChecked`. The second\n   * argument holds the event. The table keeps no selection: update your rows' state here.\n   */\n  onCheckedChange?: (checked: boolean, details?: TableSelectionCellCheckedChangeDetails) => void;\n  /**\n   * The native change event of the control, called before `onCheckedChange`;\n   * `event.preventDefault()` in it cancels the change.\n   */\n  onChange?: React.ChangeEventHandler<HTMLInputElement>;\n  /** Form field name of the control. With a name, the control submits `name=value` while checked. */\n  name?: string;\n  /**\n   * Value the control submits while checked.\n   * @default 'on'\n   */\n  value?: string;\n  /** Id of the form the control belongs to, when the table is rendered outside that form. */\n  form?: string;\n  /** Natively disables the control: it cannot be checked or focused. */\n  disabled?: boolean;\n  /** The form must not be submitted while the control is unchecked (native validation). */\n  required?: boolean;\n  /**\n   * Draws an unchecked control only while its row (a `Table.Row`) is hovered or holds focus; its\n   * own keyboard focus, forced colors and a coarse pointer (touch) always draw it. It stays\n   * focusable and named.\n   * @default false\n   */\n  subtle?: boolean;\n  /**\n   * Hides the control and takes it out of the tab order, while the cell keeps its box (a row that\n   * cannot be selected keeps the column aligned).\n   * @default false\n   */\n  invisible?: boolean;\n  /** Focus handler of the control. */\n  onFocus?: React.FocusEventHandler<HTMLInputElement>;\n  /** Blur handler of the control. */\n  onBlur?: React.FocusEventHandler<HTMLInputElement>;\n  /** Keydown handler of the control. */\n  onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;\n  /** Keyup handler of the control. */\n  onKeyUp?: React.KeyboardEventHandler<HTMLInputElement>;\n  /** Ref to the `<input>` element. */\n  controlRef?: React.Ref<HTMLInputElement>;\n  /** Ref to the `<td>` element. */\n  ref?: React.Ref<HTMLTableCellElement>;\n}\n\n/** Properties for the TableCellLayout sub-component. */\nexport interface TableCellLayoutProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * A picture before the text: an icon (drawn at 20px, 24px with the primary appearance) or an\n   * Avatar, which takes a 32px box when it sets no `size` of its own. It is content, not hidden\n   * from assistive technology: make an Avatar beside the person's name decorative.\n   */\n  media?: Slot<'span'>;\n  /** A second line under the main text, in the caption size and the muted color. */\n  description?: Slot<'span'>;\n  /**\n   * Keeps the main text and the description on one line each, ending in an ellipsis where they do\n   * not fit. It takes effect where the column's width is bounded (a width on the column, or a\n   * table layout that does not widen columns to fit their content).\n   * @default false\n   */\n  truncate?: boolean;\n  /**\n   * `'primary'` draws the main text semibold and the media icon larger: the cell that names the\n   * row. Rendered as `data-appearance` while set.\n   */\n  appearance?: 'primary';\n  /** The main text. */\n  children?: React.ReactNode;\n  /** Ref to the layout `<div>`. */\n  ref?: React.Ref<HTMLDivElement>;\n}\n\n/** Properties for the TableCellActions sub-component. */\nexport interface TableCellActionsProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Keeps the actions shown, also while the row is neither hovered nor focused: for example while\n   * a menu opened from one of them is open.\n   * @default false\n   */\n  visible?: boolean;\n  /** The actions: buttons, a menu button. */\n  children?: React.ReactNode;\n  /** Ref to the `<div>` that holds the actions. */\n  ref?: React.Ref<HTMLDivElement>;\n}\n\nconst noopSubscribe = () => () => {};\n\n/**\n * Whether `wrapper` scrolls horizontally, as an external store: a `ResizeObserver` on the wrapper\n * and the table re-checks `scrollWidth > clientWidth`. Without `ResizeObserver` (server, old\n * browsers, jsdom) the value is read on each render.\n */\nfunction useHorizontalOverflow(wrapper: HTMLDivElement | null): boolean {\n  const subscribe = React.useCallback(\n    (onChange: () => void) => {\n      if (!wrapper || typeof ResizeObserver === 'undefined') return () => {};\n      const observer = new ResizeObserver(onChange);\n      observer.observe(wrapper);\n      for (const child of Array.from(wrapper.children)) observer.observe(child);\n      return () => observer.disconnect();\n    },\n    [wrapper],\n  );\n  const getSnapshot = React.useCallback(\n    () => (wrapper ? wrapper.scrollWidth > wrapper.clientWidth : false),\n    [wrapper],\n  );\n  return React.useSyncExternalStore(wrapper ? subscribe : noopSubscribe, getSnapshot, () => false);\n}\n\nfunction isCaption(node: React.ReactNode): node is React.ReactElement<{ id?: string }> {\n  return isElementOfType(node, 'caption');\n}\n\n// The component-level JSDoc sits on the exported `Table` below.\nconst TableRoot = ({\n  striped = false,\n  containerProps,\n  children,\n  className,\n  ref,\n  ...props\n}: TableProps) => {\n  const {\n    className: containerClassName,\n    ref: containerRef,\n    'aria-label': containerLabel,\n    'aria-labelledby': containerLabelledBy,\n    ...containerRest\n  } = containerProps ?? {};\n\n  const [wrapper, setWrapper] = React.useState<HTMLDivElement | null>(null);\n  const wrapperRef = useMergedRefs<HTMLDivElement>(containerRef, setWrapper);\n  const scrollable = useHorizontalOverflow(wrapper);\n\n  // Name the scroll region after the caption (also one inside a Fragment): keep its id, or give it\n  // one. The flattened children are then rendered under their flattened keys.\n  const generatedCaptionId = useId('wave-table-caption');\n  const flatChildren = flattenChildren(children);\n  const captionIndex = flatChildren.findIndex(({ node }) => isCaption(node));\n  const caption =\n    captionIndex >= 0\n      ? (flatChildren[captionIndex].node as React.ReactElement<{ id?: string }>)\n      : null;\n  const captionId = caption ? (caption.props.id ?? generatedCaptionId) : undefined;\n  const content =\n    caption && caption.props.id === undefined\n      ? flatChildren.map(({ key, node }, index) => (\n          <React.Fragment key={key}>\n            {index === captionIndex\n              ? React.cloneElement(caption, { id: generatedCaptionId })\n              : node}\n          </React.Fragment>\n        ))\n      : children;\n\n  const regionLabelledBy = containerLabel ? undefined : (containerLabelledBy ?? captionId);\n  const named = Boolean(containerLabel || regionLabelledBy);\n  const isRegion = scrollable && named;\n  /** A role the consumer gave the wrapper: their name goes with it even while nothing scrolls. */\n  const consumerRole = containerRest.role;\n\n  React.useEffect(() => {\n    if (scrollable && !named) {\n      warnOnce(\n        'Table:unnamed-scroll-region',\n        'Table: the table scrolls horizontally but its scroll region has no name. Add a <caption> or containerProps[\"aria-label\"].',\n      );\n    }\n  }, [scrollable, named]);\n\n  return (\n    <div\n      {...containerRest}\n      ref={wrapperRef}\n      role={isRegion ? 'region' : consumerRole}\n      tabIndex={scrollable ? 0 : containerRest.tabIndex}\n      aria-label={scrollable || consumerRole !== undefined ? containerLabel : undefined}\n      aria-labelledby={\n        isRegion ? regionLabelledBy : consumerRole !== undefined ? containerLabelledBy : undefined\n      }\n      className={cn(\n        tableClassNames.container,\n        'overflow-x-auto rounded-md border border-border',\n        scrollable && focusRing,\n        containerClassName,\n      )}\n    >\n      <table\n        ref={ref}\n        data-striped={striped ? '' : undefined}\n        className={cn(\n          tableClassNames.root,\n          'w-full border-separate border-spacing-0',\n          // `:where()` keeps the stripe at specificity 0, so any row class wins (C-CLASS).\n          striped && '[:where(&>tbody>tr:nth-child(odd))]:bg-card',\n          className,\n        )}\n        {...props}\n      >\n        {content}\n      </table>\n    </div>\n  );\n};\nTableRoot.displayName = 'Table';\n\n/** The table's `<thead>`. */\nconst TableHeader = ({ children, className, ref, ...rest }: TableHeaderProps) => (\n  <thead ref={ref} {...rest} className={cn(tableHeaderClassNames.root, 'bg-card', className)}>\n    {children}\n  </thead>\n);\nTableHeader.displayName = 'TableHeader';\n\n/** A column header cell (`<th scope=\"col\">`). */\nconst TableHeaderCell = ({\n  sortable = false,\n  sortDirection,\n  onSortClick,\n  sortIcon,\n  aside,\n  children,\n  className,\n  ref,\n  ...props\n}: TableHeaderCellProps) => {\n  const hasAside = slotRendersContent(aside);\n  const asideNode = hasAside\n    ? renderSlot(\n        aside,\n        'span',\n        cn(\n          tableHeaderCellClassNames.aside,\n          'inline-flex shrink-0 items-center',\n          sortable && 'pe-4',\n        ),\n      )\n    : null;\n\n  let content: React.ReactNode = children;\n  if (sortable) {\n    content = (\n      <div className=\"flex items-center\">\n        <TableSortButton\n          component=\"Table.HeaderCell\"\n          direction={sortDirection}\n          sortIcon={sortIcon}\n          className={tableHeaderCellClassNames.button}\n          iconClassName={tableHeaderCellClassNames.sortIcon}\n          onClick={onSortClick}\n        >\n          {children}\n        </TableSortButton>\n        {asideNode}\n      </div>\n    );\n  } else if (hasAside) {\n    content = (\n      <div className=\"flex items-center gap-2\">\n        {children}\n        {asideNode}\n      </div>\n    );\n  }\n\n  return (\n    <th\n      ref={ref}\n      scope=\"col\"\n      aria-sort={sortable ? (sortDirection ?? 'none') : undefined}\n      className={cn(\n        tableHeaderCellClassNames.root,\n        'px-4 py-3 text-start font-semibold text-caption-1 uppercase tracking-wider border-b border-border',\n        sortable && 'p-0 hover:bg-subtle-hover',\n        className,\n      )}\n      {...props}\n    >\n      {content}\n    </th>\n  );\n};\nTableHeaderCell.displayName = 'TableHeaderCell';\n\n/** @deprecated Use `Table.Header` (`TableHeader`). */\nconst TableHead = (props: TableHeadProps) => {\n  warnDeprecated('Table', 'Table.Head', 'Table.Header');\n  return <TableHeader {...props} />;\n};\nTableHead.displayName = 'TableHead';\n\n/** @deprecated Use `Table.HeaderCell` (`TableHeaderCell`). */\nconst TableHeadCell = (props: TableHeadCellProps) => {\n  warnDeprecated('Table', 'Table.HeadCell', 'Table.HeaderCell');\n  return <TableHeaderCell {...props} />;\n};\nTableHeadCell.displayName = 'TableHeadCell';\n\n/** The table's `<tbody>`. */\nconst TableBody = ({ children, className, ref, ...rest }: TableBodyProps) => (\n  <tbody ref={ref} {...rest} className={cn(tableBodyClassNames.root, className)}>\n    {children}\n  </tbody>\n);\nTableBody.displayName = 'TableBody';\n\n/**\n * A table row. Striping comes from the table (`striped`), so rows need no context. The row is the\n * `group/table-row` group whose hover or focus draws the subtle selection controls and the cell\n * actions inside it (Tree's rows keep their own group).\n */\nconst TableRow = ({ children, className, ref, ...props }: TableRowProps) => (\n  <tr\n    ref={ref}\n    className={cn(\n      tableRowClassNames.root,\n      'group/table-row',\n      'hover:bg-subtle-hover transition-colors motion-reduce:transition-none',\n      className,\n    )}\n    {...props}\n  >\n    {children}\n  </tr>\n);\nTableRow.displayName = 'TableRow';\n\n/** A data cell (`<td>`), the positioning box of a `Table.CellActions` inside it. */\nconst TableCell = ({ children, className, ref, ...props }: TableCellProps) => (\n  <td\n    ref={ref}\n    className={cn(\n      tableCellClassNames.root,\n      'relative px-4 py-3 text-body-1 border-b border-border',\n      className,\n    )}\n    {...props}\n  >\n    {children}\n  </td>\n);\nTableCell.displayName = 'TableCell';\n\n/**\n * A selection cell: a `<td>` with a native checkbox or radio (`type`), drawn as the DataGrid's.\n * The table keeps no selection, so the cell is usually controlled (`checked`, `onCheckedChange`)\n * from your rows' state; `checked=\"mixed\"` draws a header select-all whose rows are partly\n * selected. `id`, `aria-label`, `aria-labelledby`, `aria-describedby`, the other ARIA state\n * props, `autoFocus`, `tabIndex`, the focus, key and change handlers and `name`, `value`, `form`,\n * `disabled` and `required` go to the control (`controlRef`); `className`, `style`, `data-*`, the\n * other handlers and `ref` stay on the cell, which carries `data-type`. Name the control with\n * `aria-label` or `aria-labelledby` (the row's first cell); a development warning reports a\n * control without a name.\n */\nconst TableSelectionCell = ({\n  type = 'checkbox',\n  checked: checkedProp,\n  defaultChecked = false,\n  onCheckedChange,\n  onChange,\n  name,\n  value,\n  form,\n  disabled,\n  required,\n  subtle = false,\n  invisible = false,\n  id,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledBy,\n  'aria-describedby': ariaDescribedBy,\n  'aria-invalid': ariaInvalid,\n  'aria-required': ariaRequired,\n  'aria-errormessage': ariaErrorMessage,\n  'aria-details': ariaDetails,\n  autoFocus,\n  tabIndex,\n  onFocus,\n  onBlur,\n  onKeyDown,\n  onKeyUp,\n  controlRef,\n  className,\n  ref,\n  ...rest\n}: TableSelectionCellProps) => {\n  // The details of the change being made, set around the setter.\n  const detailsRef = React.useRef<TableSelectionCellCheckedChangeDetails | undefined>(undefined);\n  const [checked, setChecked, isControlled] = useControllable<boolean | 'mixed'>(\n    checkedProp,\n    defaultChecked,\n    (next) => {\n      // Only a form reset to a mixed `defaultChecked` sets `'mixed'`; the callback reports booleans.\n      if (next !== 'mixed') onCheckedChange?.(next, detailsRef.current);\n    },\n  );\n  const changeChecked = useEventCallback((next: boolean, event: Event) => {\n    detailsRef.current = { event };\n    try {\n      setChecked(next);\n    } finally {\n      detailsRef.current = undefined;\n    }\n  });\n\n  const inputRef = React.useRef<HTMLInputElement>(null);\n  const mergedControlRef = useMergedRefs<HTMLInputElement>(inputRef, controlRef);\n  useFormReset(inputRef, () => setChecked(defaultChecked), form);\n\n  // A native radio group unchecks its other radios without an event, so an uncontrolled radio\n  // listens for the click that checks another radio of its group: in the capture phase, before\n  // React restores its controlled inputs from that click.\n  const followsGroup = type === 'radio' && !isControlled && Boolean(name);\n  React.useEffect(() => {\n    const input = inputRef.current;\n    if (!followsGroup || !input) return;\n    const root = input.getRootNode();\n    const handleClick = (event: Event) => {\n      const target = event.target;\n      if (target === input || !(target instanceof HTMLInputElement) || target.type !== 'radio') {\n        return;\n      }\n      if (target.name === input.name && target.form === input.form && target.checked) {\n        changeChecked(false, event);\n      }\n    };\n    root.addEventListener('click', handleClick, true);\n    return () => root.removeEventListener('click', handleClick, true);\n  }, [followsGroup, changeChecked]);\n\n  // Development diagnostics (C-DEV): a control needs a name; a `<label for>` gives one too.\n  React.useEffect(() => {\n    const input = inputRef.current;\n    if (!isDev || !input || ariaLabel || ariaLabelledBy || (input.labels?.length ?? 0) > 0) return;\n    warnOnce(\n      'Table.SelectionCell:name',\n      'Table.SelectionCell: the selection control has no accessible name. Pass `aria-label` ' +\n        '(e.g. \"Select Alpha\") or `aria-labelledby` (e.g. the id of the row’s first cell).',\n    );\n  }, [ariaLabel, ariaLabelledBy, id]);\n\n  return (\n    <td\n      ref={ref}\n      data-type={type}\n      {...rest}\n      className={cn(tableSelectionCellClassNames.root, SELECTION_CELL_CLASSES, className)}\n    >\n      <TableSelectionControl\n        ref={mergedControlRef}\n        type={type}\n        checked={checked}\n        subtle={subtle}\n        invisible={invisible}\n        id={id}\n        name={name}\n        value={value}\n        form={form}\n        disabled={disabled}\n        required={required}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        aria-describedby={ariaDescribedBy}\n        aria-invalid={ariaInvalid}\n        aria-required={ariaRequired}\n        aria-errormessage={ariaErrorMessage}\n        aria-details={ariaDetails}\n        autoFocus={autoFocus}\n        tabIndex={tabIndex}\n        onFocus={onFocus}\n        onBlur={onBlur}\n        onKeyDown={onKeyDown}\n        onKeyUp={onKeyUp}\n        onChange={composeEventHandlers(onChange, (event) =>\n          changeChecked(event.currentTarget.checked, event.nativeEvent),\n        )}\n        className={tableSelectionCellClassNames.control}\n      />\n    </td>\n  );\n};\nTableSelectionCell.displayName = 'TableSelectionCell';\n\n/** The box an Avatar in a cell layout's `media` takes when it sets no `size`. */\nconst CELL_LAYOUT_AVATAR_BOX: AvatarSizeContextValue = { size: 32 };\n\n/** The media box: its icon at 20px, or 24px with the primary appearance. */\nconst CELL_LAYOUT_MEDIA_CLASSES = {\n  default: 'flex shrink-0 items-center [&>svg]:size-5',\n  primary: 'flex shrink-0 items-center [&>svg]:size-6',\n} as const;\n\n/**\n * Lays out a cell's content: `media` (an icon or an Avatar), then the main text (children) with\n * an optional `description` under it. `truncate` keeps both lines to one line each with an\n * ellipsis; `appearance=\"primary\"` draws the main text semibold, for the cell that names the row.\n */\nconst TableCellLayout = ({\n  media,\n  description,\n  truncate = false,\n  appearance,\n  children,\n  className,\n  ref,\n  ...rest\n}: TableCellLayoutProps) => {\n  const hasMedia = slotRendersContent(media);\n  const hasMain = slotRendersContent(children);\n  const hasDescription = slotRendersContent(description);\n  const primary = appearance === 'primary';\n  return (\n    <div\n      ref={ref}\n      data-appearance={appearance}\n      data-truncate={truncate ? '' : undefined}\n      {...rest}\n      className={cn(\n        tableCellLayoutClassNames.root,\n        'flex items-center gap-2',\n        truncate && 'overflow-x-hidden',\n        className,\n      )}\n    >\n      {hasMedia && (\n        // An Avatar without its own `size` takes the 32px box of a table row.\n        <AvatarSizeContext.Provider value={CELL_LAYOUT_AVATAR_BOX}>\n          {renderSlot(\n            media,\n            'span',\n            cn(\n              tableCellLayoutClassNames.media,\n              CELL_LAYOUT_MEDIA_CLASSES[primary ? 'primary' : 'default'],\n            ),\n          )}\n        </AvatarSizeContext.Provider>\n      )}\n      {(hasMain || hasDescription) && (\n        <div\n          className={cn(\n            tableCellLayoutClassNames.content,\n            'flex flex-col',\n            truncate && 'min-w-0 overflow-x-hidden',\n          )}\n        >\n          {hasMain && (\n            <span\n              className={cn(\n                tableCellLayoutClassNames.main,\n                truncate && 'truncate',\n                primary && 'font-semibold',\n              )}\n            >\n              {materialiseSlotContent(children)}\n            </span>\n          )}\n          {hasDescription &&\n            renderSlot(\n              description,\n              'span',\n              cn(\n                tableCellLayoutClassNames.description,\n                'text-caption-1 text-muted-foreground',\n                truncate && 'truncate',\n              ),\n            )}\n        </div>\n      )}\n    </div>\n  );\n};\nTableCellLayout.displayName = 'TableCellLayout';\n\n/**\n * Where cell actions sit, over the end of their cell from its top edge to its bottom edge (the\n * buttons centred between them), and what they draw over the content under them: an opaque\n * background that follows the row's, over the full height of the cell, so wrapped text or a\n * layout with a description never shows above or below the buttons. That is the page background\n * behind a row without a fill, the row's hover color, the stripe of a striped table's odd body\n * rows (as the table's own zero-specificity rule) and the fill of a DataGrid's selected row\n * (brand and neutral appearances).\n */\nconst CELL_ACTIONS_CLASSES =\n  'absolute inset-y-0 end-0 flex items-center gap-1 px-1 bg-background group-hover/table-row:bg-subtle-hover [:where([data-striped]>tbody>tr:nth-child(odd)>*)>&]:bg-card [[data-selection-appearance=brand]>tbody>[data-selected]>*>&]:bg-selected [[data-selection-appearance=neutral]>tbody>[data-selected]>*>&]:bg-subtle-selected transition-[opacity,background-color] motion-reduce:transition-none';\n\n/**\n * Transparent until the row is hovered or holds focus, or focus is in the actions themselves;\n * forced colors and a coarse pointer (touch) always draw them.\n */\nconst CELL_ACTIONS_REVEAL_CLASSES =\n  'opacity-0 group-hover/table-row:opacity-100 group-focus-within/table-row:opacity-100 focus-within:opacity-100 forced-colors:opacity-100 pointer-coarse:opacity-100';\n\n/**\n * Actions of a cell (buttons, a menu button), shown over the end of the cell while its row is\n * hovered or holds focus, and always in forced colors and on a coarse pointer (touch); `visible`\n * keeps them shown. They stay in the tab order while hidden, and Tab into them shows them. Place\n * them in a `Table.Cell` or `DataGrid.Cell`, whose row (`Table.Row`, `DataGrid.Row`) is the group\n * that shows them. Their opaque background follows the row's (hover, a striped table's stripe, a\n * DataGrid's selected row); a row with a background of its own needs the same class on its\n * actions. The element carries `data-visible` while `visible` is set.\n */\nconst TableCellActions = ({ visible = false, className, ref, ...rest }: TableCellActionsProps) => (\n  <div\n    ref={ref}\n    data-visible={visible ? '' : undefined}\n    {...rest}\n    className={cn(\n      tableCellActionsClassNames.root,\n      CELL_ACTIONS_CLASSES,\n      visible ? undefined : CELL_ACTIONS_REVEAL_CLASSES,\n      className,\n    )}\n  />\n);\nTableCellActions.displayName = 'TableCellActions';\n\nexport {\n  TableHeader,\n  TableHeaderCell,\n  TableHead,\n  TableHeadCell,\n  TableBody,\n  TableRow,\n  TableCell,\n  TableSelectionCell,\n  TableCellLayout,\n  TableCellActions,\n  TableResizeHandle,\n};\nexport type { TableResizeHandleProps };\n\n/**\n * A non-interactive data table with an optional striped body. The table sits in a horizontally\n * scrollable wrapper; while it scrolls, the wrapper is a focusable region (named by\n * `containerProps` or the `<caption>`) so keyboard users can scroll it.\n *\n * The table keeps no state: a sortable `Table.HeaderCell` reports its clicks, and a\n * `Table.SelectionCell` (a native checkbox or radio) its changes, for your state to sort and\n * select the rows. `Table.CellLayout` lays out a cell's media, text and description, and\n * `Table.CellActions` shows a cell's actions while its row is hovered or holds focus.\n *\n * Sub-components are available as `Table.Header`, `Table.HeaderCell`, `Table.Body`, `Table.Row`,\n * `Table.Cell`, `Table.SelectionCell`, `Table.CellLayout`, `Table.CellActions` and\n * `Table.ResizeHandle` (the separator that resizes a column, for a header cell's `aside`) in client\n * components, and as the flat exports `TableHeader`, `TableHeaderCell`, `TableBody`, `TableRow`,\n * `TableCell`, `TableSelectionCell`, `TableCellLayout`, `TableCellActions` and\n * `TableResizeHandle` (the form React Server Components can import). `Table.Head`/`Table.HeadCell`\n * (`TableHead`/`TableHeadCell`) are deprecated aliases.\n */\nexport const Table = /* @__PURE__ */ Object.assign(TableRoot, {\n  Header: TableHeader,\n  HeaderCell: TableHeaderCell,\n  /** @deprecated Use `Table.Header`. */\n  Head: TableHead,\n  /** @deprecated Use `Table.HeaderCell`. */\n  HeadCell: TableHeadCell,\n  Body: TableBody,\n  Row: TableRow,\n  Cell: TableCell,\n  SelectionCell: TableSelectionCell,\n  CellLayout: TableCellLayout,\n  CellActions: TableCellActions,\n  ResizeHandle: TableResizeHandle,\n});\n"],"mappings":"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"}

package/dist/components/table/Table.resize.cjs

@@ -0,0 +1,2 @@
+"use client";const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/cn.cjs"),n=require("../../lib/composeEventHandlers.cjs"),r=require("../../lib/classNames.cjs"),i=require("../../hooks/useEventCallback.cjs"),a=require("../../lib/direction.cjs"),o=require("../../lib/styles.cjs");let s=require("react");s=e.__toESM(s,1);let c=require("react/jsx-runtime");var l=20,u=5,d=({width:e,minWidth:d=0,maxWidth:f,onResize:p,onReset:m,onLeave:h,label:g=`Resize column`,valueText:_,onPointerDown:v,onPointerMove:y,onPointerUp:b,onPointerCancel:x,onLostPointerCapture:S,onDoubleClick:C,onKeyDown:w,onKeyUp:T,onBlur:E,className:D,ref:O,...k})=>{let A=s.useRef(null),[j,M]=s.useState(!1),N=s.useRef(null),P=e=>Math.max(d,Math.min(f??1/0,e)),F=i.useEventCallback(()=>{let e=A.current;if(!e?.latestEvent)return;let t=P(Math.round(e.startWidth+(e.latestX-e.startX)*e.sign));t!==e.lastWidth&&(e.lastWidth=t,p(t,{event:e.latestEvent}))}),I=e=>{let t=A.current;t&&(t.frame!==null&&window.cancelAnimationFrame(t.frame),t.frame=null,e&&F(),A.current=null,M(!1))},L=i.useEventCallback(()=>I(!1));s.useLayoutEffect(()=>L,[L]);let R=i.useEventCallback(t=>{t.button===0&&t.isPrimary&&!A.current&&(t.currentTarget.setPointerCapture(t.pointerId),A.current={pointerId:t.pointerId,startX:t.clientX,startWidth:e,sign:a.getDirection(t.currentTarget)===`rtl`?-1:1,latestX:t.clientX,latestEvent:null,lastWidth:e,frame:null},M(!0))}),z=i.useEventCallback(e=>{let t=A.current;t&&e.pointerId===t.pointerId&&(t.latestX=e.clientX,t.latestEvent=e.nativeEvent,t.frame===null&&(t.frame=window.requestAnimationFrame(()=>{t.frame=null,F()})))}),B=i.useEventCallback(e=>{e.pointerId===A.current?.pointerId&&(e.currentTarget.hasPointerCapture(e.pointerId)&&e.currentTarget.releasePointerCapture(e.pointerId),I(!0))}),V=i.useEventCallback(e=>{e.pointerId===A.current?.pointerId&&I(!1)}),H=i.useEventCallback(e=>{e.pointerId===A.current?.pointerId&&I(!1)}),U=n.composeEventHandlers(C,e=>{m?.({event:e.nativeEvent})}),W=i.useEventCallback(t=>{if(t.target!==t.currentTarget||t.ctrlKey||t.altKey||t.metaKey)return;let n=n=>{n!==e&&p(n,{event:t.nativeEvent})},r=a.getArrowIntent(t.key,{orientation:`horizontal`,dir:a.getDirection(t.currentTarget)});if(r){let i=t.shiftKey?u:l;n(P(Math.round(e+(r===`next`?i:-i))))}else if(t.key===`Home`)n(P(d));else if(t.key===`End`&&f!==void 0)n(P(f));else if(h&&t.key===`Escape`)h();else if(h&&(t.key===`Enter`||t.key===` `))t.repeat||(N.current=t.key);else return;t.preventDefault(),t.stopPropagation()}),G=i.useEventCallback(e=>{let t=N.current!==null&&e.key===N.current;t&&(N.current=null),t&&!e.defaultPrevented&&e.target===e.currentTarget&&(e.preventDefault(),e.stopPropagation(),h?.())}),K=i.useEventCallback(()=>{N.current=null});return(0,c.jsx)(`div`,{ref:O,tabIndex:0,"aria-label":g,"data-dragging":j?``:void 0,...k,role:`separator`,"aria-orientation":`vertical`,"aria-valuenow":e,"aria-valuemin":d,"aria-valuemax":f,"aria-valuetext":_?_(e):`${Math.round(e)} pixels`,"data-grid-auxiliary":``,className:t.cn(r.tableResizeHandleClassNames.root,`absolute inset-y-0 end-0 z-1 w-2 cursor-col-resize touch-none select-none border-e-2 border-transparent`,`hover:border-stroke-accessible focus-visible:border-primary data-[dragging]:border-primary`,`forced-colors:forced-color-adjust-none forced-colors:hover:border-[ButtonText] forced-colors:focus-visible:border-[Highlight] forced-colors:data-[dragging]:border-[Highlight]`,o.focusRing,D),onPointerDown:n.composeEventHandlers(v,R),onPointerMove:n.composeEventHandlers(y,z),onPointerUp:n.composeEventHandlers(b,B,{checkDefaultPrevented:!1}),onPointerCancel:n.composeEventHandlers(x,V,{checkDefaultPrevented:!1}),onLostPointerCapture:n.composeEventHandlers(S,H,{checkDefaultPrevented:!1}),onDoubleClick:U,onKeyDown:n.composeEventHandlers(w,W),onKeyUp:n.composeEventHandlers(T,G,{checkDefaultPrevented:!1}),onBlur:n.composeEventHandlers(E,K,{checkDefaultPrevented:!1})})};d.displayName=`TableResizeHandle`,exports.TableResizeHandle=d;
+//# sourceMappingURL=Table.resize.cjs.map

package/dist/components/table/Table.resize.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Table.resize.cjs","names":["React","useEventCallback","getDirection","composeEventHandlers","getArrowIntent","cn","tableResizeHandleClassNames","focusRing","require_runtime","require_cn","require_composeEventHandlers","require_classNames","require_useEventCallback","require_direction","require_styles","react","react_jsx_runtime","KEY_STEP","SHIFT_KEY_STEP","TableResizeHandle","rest","dragRef","dragging","setDragging","leaveKeyRef","clamp","minWidth","maxWidth","value","applyDrag","drag","next","onResize","endDrag","flush","cancelDragOnUnmount","startDrag","event","width","moveDrag","releaseDrag","cancelDrag","loseCapture","handleDoubleClick","onDoubleClick","onReset","handleKey","resizeTo","intent","step","onLeave","leaveOnRelease","pressed","forgetPressedKey","label","valueText","className","onPointerDown","onPointerMove","onPointerUp","onPointerCancel","onLostPointerCapture","onKeyDown","onKeyUp","onBlur"],"sources":["../../../src/components/table/Table.resize.tsx"],"sourcesContent":["import * as React from 'react';\nimport { tableResizeHandleClassNames } from '../../lib/classNames';\nimport { cn } from '../../lib/cn';\nimport { composeEventHandlers } from '../../lib/composeEventHandlers';\nimport { getArrowIntent, getDirection } from '../../lib/direction';\nimport { focusRing } from '../../lib/styles';\nimport { useEventCallback } from '../../hooks/useEventCallback';\n\n/** How far an arrow key moves the edge, in pixels, and how far with Shift held. */\nconst KEY_STEP = 20;\nconst SHIFT_KEY_STEP = 5;\n\n/** Properties for the TableResizeHandle sub-component. */\nexport interface TableResizeHandleProps extends Omit<\n  React.HTMLAttributes<HTMLDivElement>,\n  'onResize' | 'onReset'\n> {\n  /** The column's current width in pixels. It is reported as `aria-valuenow`. */\n  width: number;\n  /**\n   * The narrowest the column can be, in pixels. The handle never asks for less, and Home sets it.\n   * It is reported as `aria-valuemin`.\n   * @default 0\n   */\n  minWidth?: number;\n  /**\n   * The widest the column can be, in pixels. The handle never asks for more, and End sets it.\n   * Without a maximum there is no `aria-valuemax` and End does nothing.\n   */\n  maxWidth?: number;\n  /**\n   * Called with the width the user asks for, in whole pixels, held between `minWidth` and\n   * `maxWidth`: while a pointer drags (at most once per animation frame) and for every handled\n   * key, then `details` with the event behind it. The handle always passes `details`; it is typed\n   * optional through 0.x, as every `details` argument. The handle keeps no width of its own, so a\n   * parent that ignores the call leaves the column where it is.\n   */\n  onResize: (width: number, details?: { event: Event }) => void;\n  /** Called with the event when the handle is double-clicked: reset the column's width. */\n  onReset?: (details: { event: Event }) => void;\n  /**\n   * Called when Escape is pressed on the handle, or Enter or Space is released on it after being\n   * pressed there: move focus back to the header cell. Enter and Space are consumed from their\n   * keydown on (their repeats included), so a held key never reaches the element that focus moves\n   * to. Without it those keys are left to the handle's ancestors.\n   */\n  onLeave?: () => void;\n  /**\n   * The accessible name of the separator.\n   * @default 'Resize column'\n   */\n  label?: string;\n  /**\n   * Builds `aria-valuetext` from the width.\n   * @default (width) => `${width} pixels`\n   */\n  valueText?: (width: number) => string;\n  /** Ref to the `<div>` element. */\n  ref?: React.Ref<HTMLDivElement>;\n}\n\n/** What a pointer drag keeps between its events. */\ninterface DragState {\n  pointerId: number;\n  startX: number;\n  startWidth: number;\n  /** `1`, or `-1` in a right-to-left table, where moving toward the end narrows the column. */\n  sign: 1 | -1;\n  latestX: number;\n  latestEvent: Event | null;\n  /** The last width handed to `onResize`, so a width is not reported twice in a row. */\n  lastWidth: number;\n  /** The animation frame that will apply the latest position, while one is waiting. */\n  frame: number | null;\n}\n\n/**\n * The drag handle of a column's edge: a vertical `role=\"separator\"` with `aria-valuenow`, meant\n * for the `aside` slot of a `Table.HeaderCell` whose cell is positioned, since the handle is drawn\n * along the cell's end edge. A DataGrid with `resizableColumns` renders it in the header cell of\n * each of its columns itself (a `DataGrid.HeaderCell` has no `aside` slot). A pointer drag (mouse,\n * touch or pen) resizes through `onResize`, with the movement mirrored in right-to-left tables;\n * the arrow keys move the edge by 20 pixels (5 with Shift), Home sets the minimum width and End\n * the maximum one. A double click calls `onReset`. The handle is a Tab stop (`tabIndex` 0), so the\n * keys work in a static table; a grid that manages its own tab stops overrides `tabIndex`. The\n * handle carries `data-grid-auxiliary`, so a grid's cell navigation does not take it for the\n * cell's own widget.\n *\n * It keeps no width: spread the result of `useTableColumnSizing`'s `getResizeHandleProps(columnId)`\n * onto it, or pass `width`, `minWidth` and `onResize` from your own state.\n */\nconst TableResizeHandle = ({\n  width,\n  minWidth = 0,\n  maxWidth,\n  onResize,\n  onReset,\n  onLeave,\n  label = 'Resize column',\n  valueText,\n  onPointerDown,\n  onPointerMove,\n  onPointerUp,\n  onPointerCancel,\n  onLostPointerCapture,\n  onDoubleClick,\n  onKeyDown,\n  onKeyUp,\n  onBlur,\n  className,\n  ref,\n  ...rest\n}: TableResizeHandleProps) => {\n  const dragRef = React.useRef<DragState | null>(null);\n  const [dragging, setDragging] = React.useState(false);\n  /** The Enter or Space pressed on the handle whose release leaves it; `null` otherwise. */\n  const leaveKeyRef = React.useRef<string | null>(null);\n\n  const clamp = (value: number) => Math.max(minWidth, Math.min(maxWidth ?? Infinity, value));\n\n  // Applies the latest pointer position of the drag. It reads the latest props, also when an\n  // animation frame calls it after a render.\n  const applyDrag = useEventCallback(() => {\n    const drag = dragRef.current;\n    if (!drag?.latestEvent) return;\n    const next = clamp(Math.round(drag.startWidth + (drag.latestX - drag.startX) * drag.sign));\n    if (next === drag.lastWidth) return;\n    drag.lastWidth = next;\n    onResize(next, { event: drag.latestEvent });\n  });\n\n  // Ends the drag; `flush` first applies a move that still waits for its frame.\n  const endDrag = (flush: boolean) => {\n    const drag = dragRef.current;\n    if (!drag) return;\n    if (drag.frame !== null) window.cancelAnimationFrame(drag.frame);\n    drag.frame = null;\n    if (flush) applyDrag();\n    dragRef.current = null;\n    setDragging(false);\n  };\n\n  // A frame that is still waiting when the handle unmounts must not call `onResize`: cancelled in\n  // the commit that removes the handle, before a frame can run.\n  const cancelDragOnUnmount = useEventCallback(() => endDrag(false));\n  React.useLayoutEffect(() => cancelDragOnUnmount, [cancelDragOnUnmount]);\n\n  const startDrag = useEventCallback((event: React.PointerEvent<HTMLDivElement>) => {\n    if (event.button !== 0 || !event.isPrimary || dragRef.current) return;\n    event.currentTarget.setPointerCapture(event.pointerId);\n    dragRef.current = {\n      pointerId: event.pointerId,\n      startX: event.clientX,\n      startWidth: width,\n      sign: getDirection(event.currentTarget) === 'rtl' ? -1 : 1,\n      latestX: event.clientX,\n      latestEvent: null,\n      lastWidth: width,\n      frame: null,\n    };\n    setDragging(true);\n  });\n\n  const moveDrag = useEventCallback((event: React.PointerEvent<HTMLDivElement>) => {\n    const drag = dragRef.current;\n    if (!drag || event.pointerId !== drag.pointerId) return;\n    drag.latestX = event.clientX;\n    drag.latestEvent = event.nativeEvent;\n    // One call per frame, with the last position.\n    if (drag.frame === null) {\n      drag.frame = window.requestAnimationFrame(() => {\n        drag.frame = null;\n        applyDrag();\n      });\n    }\n  });\n\n  const releaseDrag = useEventCallback((event: React.PointerEvent<HTMLDivElement>) => {\n    if (event.pointerId !== dragRef.current?.pointerId) return;\n    if (event.currentTarget.hasPointerCapture(event.pointerId)) {\n      event.currentTarget.releasePointerCapture(event.pointerId);\n    }\n    endDrag(true);\n  });\n\n  const cancelDrag = useEventCallback((event: React.PointerEvent<HTMLDivElement>) => {\n    if (event.pointerId === dragRef.current?.pointerId) endDrag(false);\n  });\n\n  const loseCapture = useEventCallback((event: React.PointerEvent<HTMLDivElement>) => {\n    if (event.pointerId === dragRef.current?.pointerId) endDrag(false);\n  });\n\n  const handleDoubleClick = composeEventHandlers(\n    onDoubleClick,\n    (event: React.MouseEvent<HTMLDivElement>) => {\n      onReset?.({ event: event.nativeEvent });\n    },\n  );\n\n  const handleKey = useEventCallback((event: React.KeyboardEvent<HTMLDivElement>) => {\n    if (event.target !== event.currentTarget || event.ctrlKey || event.altKey || event.metaKey) {\n      return;\n    }\n    const resizeTo = (next: number) => {\n      if (next !== width) onResize(next, { event: event.nativeEvent });\n    };\n    const intent = getArrowIntent(event.key, {\n      orientation: 'horizontal',\n      dir: getDirection(event.currentTarget),\n    });\n    if (intent) {\n      const step = event.shiftKey ? SHIFT_KEY_STEP : KEY_STEP;\n      resizeTo(clamp(Math.round(width + (intent === 'next' ? step : -step))));\n    } else if (event.key === 'Home') {\n      resizeTo(clamp(minWidth));\n    } else if (event.key === 'End' && maxWidth !== undefined) {\n      resizeTo(clamp(maxWidth));\n    } else if (onLeave && event.key === 'Escape') {\n      onLeave();\n    } else if (onLeave && (event.key === 'Enter' || event.key === ' ')) {\n      // Left on the release: focus moved now would hand the key's repeats (and Space's keyup,\n      // which activates a button) to the element focus moves to. A repeat alone, of a key\n      // pressed before focus came here, leaves nothing to release.\n      if (!event.repeat) leaveKeyRef.current = event.key;\n    } else {\n      return;\n    }\n    // A handled key does not also move the grid.\n    event.preventDefault();\n    event.stopPropagation();\n  });\n\n  // Composed without the default-prevented check: the pressed key is forgotten at its release,\n  // also when a consumer handled the release (then nothing else happens).\n  const leaveOnRelease = useEventCallback((event: React.KeyboardEvent<HTMLDivElement>) => {\n    const pressed = leaveKeyRef.current !== null && event.key === leaveKeyRef.current;\n    if (pressed) leaveKeyRef.current = null;\n    if (!pressed || event.defaultPrevented || event.target !== event.currentTarget) return;\n    event.preventDefault();\n    event.stopPropagation();\n    onLeave?.();\n  });\n\n  // A pressed Enter or Space is forgotten when focus leaves the handle before its release.\n  const forgetPressedKey = useEventCallback(() => {\n    leaveKeyRef.current = null;\n  });\n\n  return (\n    <div\n      ref={ref}\n      tabIndex={0}\n      aria-label={label}\n      data-dragging={dragging ? '' : undefined}\n      {...rest}\n      role=\"separator\"\n      aria-orientation=\"vertical\"\n      aria-valuenow={width}\n      aria-valuemin={minWidth}\n      aria-valuemax={maxWidth}\n      aria-valuetext={valueText ? valueText(width) : `${Math.round(width)} pixels`}\n      data-grid-auxiliary=\"\"\n      className={cn(\n        tableResizeHandleClassNames.root,\n        'absolute inset-y-0 end-0 z-1 w-2 cursor-col-resize touch-none select-none border-e-2 border-transparent',\n        'hover:border-stroke-accessible focus-visible:border-primary data-[dragging]:border-primary',\n        // The line is a border, so forced colors paint it only where it shows.\n        'forced-colors:forced-color-adjust-none forced-colors:hover:border-[ButtonText] forced-colors:focus-visible:border-[Highlight] forced-colors:data-[dragging]:border-[Highlight]',\n        focusRing,\n        className,\n      )}\n      onPointerDown={composeEventHandlers(onPointerDown, startDrag)}\n      onPointerMove={composeEventHandlers(onPointerMove, moveDrag)}\n      onPointerUp={composeEventHandlers(onPointerUp, releaseDrag, { checkDefaultPrevented: false })}\n      onPointerCancel={composeEventHandlers(onPointerCancel, cancelDrag, {\n        checkDefaultPrevented: false,\n      })}\n      onLostPointerCapture={composeEventHandlers(onLostPointerCapture, loseCapture, {\n        checkDefaultPrevented: false,\n      })}\n      onDoubleClick={handleDoubleClick}\n      onKeyDown={composeEventHandlers(onKeyDown, handleKey)}\n      onKeyUp={composeEventHandlers(onKeyUp, leaveOnRelease, { checkDefaultPrevented: false })}\n      onBlur={composeEventHandlers(onBlur, forgetPressedKey, { checkDefaultPrevented: false })}\n    />\n  );\n};\nTableResizeHandle.displayName = 'TableResizeHandle';\n\nexport { TableResizeHandle };\n"],"mappings":"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"}