@mortenbrudvik/waveui 0.15.0 → 0.17.0

package/dist/components/table/DataGrid.window.mjs

@@ -0,0 +1,165 @@
+"use client";
+import { isDev as e, warnOnce as t } from "../../lib/dev.mjs";
+import { dataGridClassNames as n } from "../../lib/classNames.mjs";
+import { useEventCallback as r } from "../../hooks/useEventCallback.mjs";
+import { returnFocusToGridCell as i } from "./useGridNavigation.mjs";
+import * as a from "react";
+import { jsx as o } from "react/jsx-runtime";
+//#region src/components/table/DataGrid.window.tsx
+var s = a.createContext(null), c = a.createContext(null);
+function l(e, t, n) {
+	if (e) return {
+		rowCount: t,
+		headerRowCount: n,
+		scrollToRow: (t) => e.scrollToIndex(t, { align: "auto" })
+	};
+}
+function u({ size: e, columnCount: t }) {
+	return /* @__PURE__ */ o("tr", {
+		"aria-hidden": "true",
+		"data-virtual-spacer": "",
+		className: n.spacer,
+		style: { height: e },
+		children: /* @__PURE__ */ o("td", {
+			colSpan: t,
+			className: "p-0"
+		})
+	});
+}
+u.displayName = "DataGridSpacerRow";
+function d(e, t, n) {
+	return e.virtualWindow.layout(t, { keep: e.keep }).map((t) => t.kind === "item" ? n(t.index) : /* @__PURE__ */ o(u, {
+		size: t.size,
+		columnCount: e.columnCount
+	}, `spacer:${t.key}`));
+}
+function f(e) {
+	let t = e?.getAttribute("data-row-index");
+	return t != null && /^\d+$/.test(t) ? Number(t) : null;
+}
+function p(e, t) {
+	for (let n = t instanceof Element ? t : null; n && n !== e; n = n.parentElement) if ((n.localName === "td" || n.localName === "th") && n.closest("table") === e) return n;
+	return null;
+}
+function m(e, t) {
+	if (!e || !e.isConnected) return !0;
+	let n = e.ownerDocument;
+	return e === n.body || e === n.documentElement || e === t;
+}
+function h(n) {
+	let { virtualWindow: o, ignored: s, rows: c, headerRowCount: l, columnCount: u, activeRowIndex: d, pendingRowIndex: h } = n, g = o !== null, _ = a.useRef(null), v = a.useRef(null), y = a.useCallback((e) => {
+		_.current = e;
+	}, []), b = a.useCallback((e) => {
+		v.current = e;
+	}, []), x = a.useMemo(() => [d, h].filter((e) => e !== null), [d, h]), S = a.useMemo(() => o ? {
+		virtualWindow: o,
+		keep: x,
+		headerRowCount: l,
+		columnCount: u
+	} : null, [
+		o,
+		x,
+		l,
+		u
+	]);
+	a.useEffect(() => {
+		s && t("DataGrid:virtual-window-requires-items", "DataGrid: `virtualWindow` needs `items` and `columns`, with the body rows rendered from them (no `DataGrid.Body` child, or one whose child is a render function); it is ignored, and every row is rendered.");
+	}, [s]);
+	let C = (c?.length ?? 0) > 0;
+	a.useEffect(() => {
+		let n = _.current, r = v.current;
+		if (!e || !g || !n || !r) return;
+		let { clientHeight: i, scrollHeight: a } = n, o = Array.from(r.tBodies).some((e) => Array.from(e.rows).some((e) => e.hasAttribute("data-virtual-spacer"))), s = r.offsetHeight >= i;
+		i > 0 && a > 0 && a <= i && s && o && t("DataGrid:virtual-window-height", "DataGrid: the scroll wrapper of a grid with `virtualWindow` has no bounded height (it is as tall as its rows), so the window renders every row. Give it a height or a maximum height in `containerProps` (a class or a style).");
+	}, [g, C]);
+	let w = a.useRef(c);
+	a.useInsertionEffect(() => {
+		w.current = c;
+	}, [c]);
+	let T = a.useRef(c), E = a.useRef(null), D = a.useRef(!1), O = a.useRef(null), k = a.useCallback(() => {
+		D.current = !1, O.current !== null && (cancelAnimationFrame(O.current), O.current = null);
+	}, []), A = a.useCallback(() => {
+		k(), D.current = !0, typeof requestAnimationFrame == "function" && (O.current = requestAnimationFrame(() => {
+			O.current = null, D.current = !1;
+		}));
+	}, [k]);
+	a.useEffect(() => k, [k]);
+	let j = r((e) => {
+		let t = v.current;
+		if (!t) return;
+		let n = w.current ?? [], r = Array.from(t.rows).filter((e) => f(e) !== null), a = n.findIndex((t) => t.rowId === e.rowId), o = r.find((e) => a >= 0 && f(e) === a) ?? null;
+		if (!o && n.length > 0) {
+			let t = Math.min(e.index, n.length - 1), i = Infinity;
+			for (let e of r) {
+				let n = Math.abs((f(e) ?? 0) - t);
+				n < i && (o = e, i = n);
+			}
+		}
+		let s = o ?? t.rows[0];
+		if (!s || s.cells.length === 0) return;
+		let c = o ? Math.min(e.column, s.cells.length - 1) : 0;
+		i(s.cells[c]);
+	});
+	a.useLayoutEffect(() => {
+		let e = T.current;
+		T.current = c;
+		let t = v.current, n = E.current;
+		if (e === c || !g || !t || !n) return;
+		let r = t.ownerDocument.activeElement;
+		r && t.contains(r) ? A() : m(r, _.current) ? j(n) : E.current = null;
+	}, [
+		c,
+		g,
+		A,
+		j
+	]);
+	let M = a.useRef(!1), N = r(() => {
+		o && (M.current = !0);
+	});
+	return a.useEffect(() => {
+		let e = v.current?.ownerDocument;
+		if (!g || !e) return;
+		let t = () => {
+			M.current = !1;
+		};
+		return e.addEventListener("keydown", t, !0), () => e.removeEventListener("keydown", t, !0);
+	}, [g]), {
+		context: S,
+		scrollerRef: y,
+		tableRef: b,
+		onFocus: r((e) => {
+			let t = M.current;
+			if (M.current = !1, !o) return;
+			k();
+			let n = p(e.currentTarget, e.target), r = n?.parentElement ?? null, i = f(r), a = i === null ? void 0 : w.current?.[i]?.rowId;
+			E.current = n && r instanceof HTMLTableRowElement && i !== null && a !== void 0 ? {
+				rowId: a,
+				index: i,
+				column: Array.prototype.indexOf.call(r.cells, n)
+			} : null, i !== null && !t && o.scrollToIndex(i, { align: "auto" });
+		}),
+		onBlur: r((e) => {
+			if (!o) return;
+			let t = e.currentTarget, n = e.relatedTarget;
+			if (n && t.contains(n)) return;
+			if (n) {
+				E.current = null, k();
+				return;
+			}
+			let r = _.current;
+			queueMicrotask(() => {
+				let e = E.current;
+				if (!e || !t.isConnected) return;
+				let n = t.ownerDocument.activeElement;
+				if (n && t.contains(n)) return;
+				let i = D.current && m(n, r);
+				k(), i ? j(e) : E.current = null;
+			});
+		}),
+		onPointerDownCapture: N
+	};
+}
+//#endregion
+export { u as DataGridSpacerRow, s as DataGridWindowContext, c as DataGridWindowRowContext, l as getWindowNavigationModel, d as renderWindowRows, h as useDataGridWindow };
+
+//# sourceMappingURL=DataGrid.window.mjs.map

package/dist/components/table/DataGrid.window.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataGrid.window.mjs","names":["React","DataGridWindowContext","DataGridWindowRowContext","getWindowNavigationModel","virtualWindow","index","DataGridSpacerRow","dataGridClassNames","size","columnCount","renderWindowRows","context","count","entry","renderRow","getRowIndex","value","row","getOwnCell","el","node","table","isFocusLost","active","doc","scroller","useDataGridWindow","options","enabled","scrollerElementRef","tableElementRef","scrollerRef","element","tableRef","keep","activeRowIndex","pendingRowIndex","headerRowCount","ignored","warnOnce","hasRows","rows","tableElement","isDev","hasSpacer","body","followsContent","clientHeight","scrollHeight","rowsRef","checkedRowsRef","focusedRef","armedRef","frameRef","disarm","arm","restore","useEventCallback","data","dataRows","position","focused","each","target","distance","gap","column","previous","pointerPressRef","onPointerDownCapture","clear","pointerFocus","cell","event","rowId","next","restoring"],"sources":["../../../src/components/table/DataGrid.window.tsx"],"sourcesContent":["import * as React from 'react';\nimport { dataGridClassNames } from '../../lib/classNames';\nimport { isDev, warnOnce } from '../../lib/dev';\nimport { useEventCallback } from '../../hooks/useEventCallback';\nimport type { VirtualWindow } from '../../hooks/useVirtualWindow';\nimport { returnFocusToGridCell, type GridNavigationModel } from './useGridNavigation';\n\n// The row window of a DataGrid with a `virtualWindow` (module-only): the navigation model, the\n// contexts of the window and of each row, the spacer rows, the scroller check, and the focus that\n// a data change must not lose. It imports nothing from `DataGrid.tsx`.\n\n/** What the body and the header of a windowed grid read; `null` in a grid that renders every row. */\nexport interface DataGridWindowContextValue {\n  virtualWindow: VirtualWindow;\n  /** The data rows kept rendered outside the window: the active row and a row a key awaits. */\n  keep: readonly number[];\n  /** The header rows above the data rows (the first data row's `aria-rowindex` is one more). */\n  headerRowCount: number;\n  /** The columns of the table, the selection column included: what a spacer's cell spans. */\n  columnCount: number;\n}\n\n/** The window of the grid, for its body and header (reset by every grid, so nested grids own theirs). */\nexport const DataGridWindowContext = React.createContext<DataGridWindowContextValue | null>(null);\n\n/** The place of a row in a windowed grid; `null` for a row of a grid that renders every row. */\nexport interface DataGridWindowRow {\n  /** A data row's 0-based position in the sorted order (`data-row-index`); `undefined` in the header. */\n  index: number | undefined;\n  /** The row's `aria-rowindex`: 1-based, the header rows first. */\n  ariaRowIndex: number;\n  /** The height of a data row in pixels (the window's `itemSize`); `undefined` in the header. */\n  height: number | undefined;\n}\n\n/** The place of the row around it (see {@link DataGridWindowRow}). */\nexport const DataGridWindowRowContext = React.createContext<DataGridWindowRow | null>(null);\n\n/** The navigation model of a windowed grid (its rows by their index in the sorted data). */\nexport function getWindowNavigationModel(\n  virtualWindow: VirtualWindow | null,\n  rowCount: number,\n  headerRowCount: number,\n): GridNavigationModel | undefined {\n  if (!virtualWindow) return undefined;\n  return {\n    rowCount,\n    headerRowCount,\n    scrollToRow: (index) => virtualWindow.scrollToIndex(index, { align: 'auto' }),\n  };\n}\n\n/**\n * A row that stands in for the rows of a windowed grid that are not rendered: as tall as they\n * are, out of the accessibility tree, with one cell over every column and no focus target.\n */\nexport function DataGridSpacerRow({ size, columnCount }: { size: number; columnCount: number }) {\n  return (\n    <tr\n      aria-hidden=\"true\"\n      data-virtual-spacer=\"\"\n      className={dataGridClassNames.spacer}\n      style={{ height: size }}\n    >\n      <td colSpan={columnCount} className=\"p-0\" />\n    </tr>\n  );\n}\nDataGridSpacerRow.displayName = 'DataGridSpacerRow';\n\n/**\n * The body rows of a windowed grid of `count` data rows: the window's layout, each of its rows\n * rendered by `renderRow(index)` (which keys it, with a `row:` prefix) and each gap as a spacer\n * row (keyed `spacer:<key>`), so no row id can give a row a spacer's key.\n */\nexport function renderWindowRows(\n  context: DataGridWindowContextValue,\n  count: number,\n  renderRow: (index: number) => React.ReactNode,\n): React.ReactNode[] {\n  return context.virtualWindow\n    .layout(count, { keep: context.keep })\n    .map((entry) =>\n      entry.kind === 'item' ? (\n        renderRow(entry.index)\n      ) : (\n        <DataGridSpacerRow\n          key={`spacer:${entry.key}`}\n          size={entry.size}\n          columnCount={context.columnCount}\n        />\n      ),\n    );\n}\n\n/** The data row index a row carries, or `null` (a header or spacer row). */\nfunction getRowIndex(row: Element | null): number | null {\n  const value = row?.getAttribute('data-row-index');\n  return value != null && /^\\d+$/.test(value) ? Number(value) : null;\n}\n\n/** The cell of `table` (not of a table nested in it) that holds `node`. */\nfunction getOwnCell(\n  table: HTMLTableElement,\n  node: EventTarget | null,\n): HTMLTableCellElement | null {\n  for (let el = node instanceof Element ? node : null; el && el !== table; el = el.parentElement) {\n    if ((el.localName === 'td' || el.localName === 'th') && el.closest('table') === table) {\n      return el as HTMLTableCellElement;\n    }\n  }\n  return null;\n}\n\n/** Whether focus is nowhere: on the body, on the scroller, or on an element no longer in the page. */\nfunction isFocusLost(active: Element | null, scroller: Element | null): boolean {\n  if (!active || !active.isConnected) return true;\n  const doc = active.ownerDocument;\n  return active === doc.body || active === doc.documentElement || active === scroller;\n}\n\n/** The focused cell of a data row: the row's id, its index then and the cell's place in the row. */\ninterface FocusedCell {\n  rowId: string;\n  index: number;\n  column: number;\n}\n\n/** Options of {@link useDataGridWindow}. */\nexport interface UseDataGridWindowOptions {\n  /**\n   * The grid's window while it applies (`items`, `columns`, the body rows rendered from them);\n   * otherwise `null`.\n   */\n  virtualWindow: VirtualWindow | null;\n  /** Whether a `virtualWindow` was given that does not apply (a development warning). */\n  ignored: boolean;\n  /** The rows of `items` in the sorted order; `null` without `items`. */\n  rows: readonly { rowId: string }[] | null;\n  headerRowCount: number;\n  columnCount: number;\n  /** `activeRowIndex` and `pendingRowIndex` of the grid navigation: the rows to keep rendered. */\n  activeRowIndex: number | null;\n  pendingRowIndex: number | null;\n}\n\n/** The result of {@link useDataGridWindow}. */\nexport interface DataGridWindowState {\n  /** For {@link DataGridWindowContext}; `null` while the window does not apply. */\n  context: DataGridWindowContextValue | null;\n  /** The scroll wrapper's ref (merge it with the window's `scrollRef`). */\n  scrollerRef: React.RefCallback<HTMLDivElement>;\n  /** The table's ref. */\n  tableRef: React.RefCallback<HTMLTableElement>;\n  /** Composed after the grid navigation's own focus handlers. */\n  onFocus: (event: React.FocusEvent<HTMLTableElement>) => void;\n  onBlur: (event: React.FocusEvent<HTMLTableElement>) => void;\n  /** The table's pointer press, composed after the consumer's (a prevented press gives no focus). */\n  onPointerDownCapture: () => void;\n}\n\n/**\n * The window of a DataGrid: the context its body renders the window from, the development checks\n * (a window that does not apply, a scroller without a bounded height), a focused row that the\n * sticky header covers scrolled below it (unless a pointer press gave the focus), and focus kept\n * through data changes. A sort, a filter or new `items` move the keyed rows, and a browser blurs\n * a focused row that is moved (or removed): when focus was in a data row before such a change and\n * is lost after it, focus goes back to the same row (by id) and column, else to the mounted row\n * nearest to its old index.\n */\nexport function useDataGridWindow(options: UseDataGridWindowOptions): DataGridWindowState {\n  const {\n    virtualWindow,\n    ignored,\n    rows,\n    headerRowCount,\n    columnCount,\n    activeRowIndex,\n    pendingRowIndex,\n  } = options;\n  const enabled = virtualWindow !== null;\n  // Written by the ref callbacks; read in effects and handlers only.\n  const scrollerElementRef = React.useRef<HTMLDivElement | null>(null);\n  const tableElementRef = React.useRef<HTMLTableElement | null>(null);\n  const scrollerRef = React.useCallback((element: HTMLDivElement | null) => {\n    scrollerElementRef.current = element;\n  }, []);\n  const tableRef = React.useCallback((element: HTMLTableElement | null) => {\n    tableElementRef.current = element;\n  }, []);\n\n  const keep = React.useMemo(\n    () => [activeRowIndex, pendingRowIndex].filter((index): index is number => index !== null),\n    [activeRowIndex, pendingRowIndex],\n  );\n  const context = React.useMemo<DataGridWindowContextValue | null>(\n    () => (virtualWindow ? { virtualWindow, keep, headerRowCount, columnCount } : null),\n    [virtualWindow, keep, headerRowCount, columnCount],\n  );\n\n  React.useEffect(() => {\n    if (ignored) {\n      warnOnce(\n        'DataGrid:virtual-window-requires-items',\n        'DataGrid: `virtualWindow` needs `items` and `columns`, with the body rows rendered from ' +\n          'them (no `DataGrid.Body` child, or one whose child is a render function); it is ' +\n          'ignored, and every row is rendered.',\n      );\n    }\n  }, [ignored]);\n\n  // Once mounted, and again once rows arrive in a grid mounted without any (a grid with no row\n  // has no spacer to tell): a scroller as tall as its rows (no bounded height) lets the window\n  // measure the whole list, so it would render every row. Read while the first window still has\n  // spacers.\n  const hasRows = (rows?.length ?? 0) > 0;\n  React.useEffect(() => {\n    const scroller = scrollerElementRef.current;\n    const tableElement = tableElementRef.current;\n    if (!isDev || !enabled || !scroller || !tableElement) return;\n    const { clientHeight, scrollHeight } = scroller;\n    const hasSpacer = Array.from(tableElement.tBodies).some((body) =>\n      Array.from(body.rows).some((row) => row.hasAttribute('data-virtual-spacer')),\n    );\n    // As tall as the table: a bounded scroller taller than all its rows is not one.\n    const followsContent = tableElement.offsetHeight >= clientHeight;\n    if (\n      clientHeight > 0 &&\n      scrollHeight > 0 &&\n      scrollHeight <= clientHeight &&\n      followsContent &&\n      hasSpacer\n    ) {\n      warnOnce(\n        'DataGrid:virtual-window-height',\n        'DataGrid: the scroll wrapper of a grid with `virtualWindow` has no bounded height (it is ' +\n          'as tall as its rows), so the window renders every row. Give it a height or a maximum ' +\n          'height in `containerProps` (a class or a style).',\n      );\n    }\n  }, [enabled, hasRows]);\n\n  // --- focus through data changes ---------------------------------------------\n  /**\n   * The rows of the commit, for the row id of a focused row and the restore: written before the\n   * layout effects, where the grid navigation may focus a row of the new rows.\n   */\n  const rowsRef = React.useRef(rows);\n  React.useInsertionEffect(() => {\n    rowsRef.current = rows;\n  }, [rows]);\n  /** The rows the data-change check last saw. */\n  const checkedRowsRef = React.useRef(rows);\n  /** The focused cell of a data row, while focus is in one (or was, until that is decided). */\n  const focusedRef = React.useRef<FocusedCell | null>(null);\n  /** Set by a data change that left focus on a moved row, until the next frame or focus move. */\n  const armedRef = React.useRef(false);\n  const frameRef = React.useRef<number | null>(null);\n\n  const disarm = React.useCallback(() => {\n    armedRef.current = false;\n    if (frameRef.current !== null) {\n      cancelAnimationFrame(frameRef.current);\n      frameRef.current = null;\n    }\n  }, []);\n\n  // A blur that comes after the change (a browser that blurs the moved row once it renders) is\n  // taken as the change's, until the next frame.\n  const arm = React.useCallback(() => {\n    disarm();\n    armedRef.current = true;\n    if (typeof requestAnimationFrame === 'function') {\n      frameRef.current = requestAnimationFrame(() => {\n        frameRef.current = null;\n        armedRef.current = false;\n      });\n    }\n  }, [disarm]);\n\n  React.useEffect(() => disarm, [disarm]);\n\n  /** Focuses the cell of `focused`: its row by id, else the mounted row nearest to its index. */\n  const restore = useEventCallback((focused: FocusedCell) => {\n    const tableElement = tableElementRef.current;\n    if (!tableElement) return;\n    const data = rowsRef.current ?? [];\n    const dataRows = Array.from(tableElement.rows).filter((row) => getRowIndex(row) !== null);\n    const position = data.findIndex((row) => row.rowId === focused.rowId);\n    let row = dataRows.find((each) => position >= 0 && getRowIndex(each) === position) ?? null;\n    if (!row && data.length > 0) {\n      const target = Math.min(focused.index, data.length - 1);\n      let distance = Infinity;\n      for (const each of dataRows) {\n        const gap = Math.abs((getRowIndex(each) ?? 0) - target);\n        if (gap < distance) {\n          row = each;\n          distance = gap;\n        }\n      }\n    }\n    // No data row left: the first cell of the grid.\n    const target = row ?? tableElement.rows[0];\n    if (!target || target.cells.length === 0) return;\n    const column = row ? Math.min(focused.column, target.cells.length - 1) : 0;\n    returnFocusToGridCell(target.cells[column]);\n  });\n\n  // After a data change (the rows' identity: `items`, `getRowId`, the sort).\n  React.useLayoutEffect(() => {\n    const previous = checkedRowsRef.current;\n    checkedRowsRef.current = rows;\n    const tableElement = tableElementRef.current;\n    const focused = focusedRef.current;\n    if (previous === rows || !enabled || !tableElement || !focused) return;\n    const active = tableElement.ownerDocument.activeElement;\n    if (active && tableElement.contains(active)) arm();\n    else if (isFocusLost(active, scrollerElementRef.current)) restore(focused);\n    else focusedRef.current = null;\n  }, [rows, enabled, arm, restore]);\n\n  /**\n   * Set by a pointer press in the grid until the focus it gives (on mousedown; after the release\n   * for a touch tap), or until a key press: keyboard focus always follows one, so a press that\n   * gave no focus (on a spacer row) never keeps a later keyboard focus from being scrolled.\n   */\n  const pointerPressRef = React.useRef(false);\n  const onPointerDownCapture = useEventCallback(() => {\n    if (virtualWindow) pointerPressRef.current = true;\n  });\n  React.useEffect(() => {\n    const doc = tableElementRef.current?.ownerDocument;\n    if (!enabled || !doc) return;\n    const clear = () => {\n      pointerPressRef.current = false;\n    };\n    doc.addEventListener('keydown', clear, true);\n    return () => doc.removeEventListener('keydown', clear, true);\n  }, [enabled]);\n\n  const onFocus = useEventCallback((event: React.FocusEvent<HTMLTableElement>) => {\n    const pointerFocus = pointerPressRef.current;\n    pointerPressRef.current = false;\n    if (!virtualWindow) return;\n    disarm();\n    const cell = getOwnCell(event.currentTarget, event.target);\n    const row = cell?.parentElement ?? null;\n    const index = getRowIndex(row);\n    const rowId = index === null ? undefined : rowsRef.current?.[index]?.rowId;\n    focusedRef.current =\n      cell && row instanceof HTMLTableRowElement && index !== null && rowId !== undefined\n        ? { rowId, index, column: Array.prototype.indexOf.call(row.cells, cell) }\n        : null;\n    // A browser scrolls a focused row to the top edge of the scroller, under the sticky header:\n    // bring it into the area below the header (a row in view does not move). Not for the focus\n    // of a pointer press: the row would move before the release, and the click off its target.\n    if (index !== null && !pointerFocus) virtualWindow.scrollToIndex(index, { align: 'auto' });\n  });\n\n  const onBlur = useEventCallback((event: React.FocusEvent<HTMLTableElement>) => {\n    if (!virtualWindow) return;\n    const tableElement = event.currentTarget;\n    const next = event.relatedTarget;\n    if (next && tableElement.contains(next)) return;\n    if (next) {\n      focusedRef.current = null;\n      disarm();\n      return;\n    }\n    // Focus went nowhere: a click on nothing focusable, or a row the browser blurred because a\n    // data change moved or removed it. Decided once the change has settled.\n    const scroller = scrollerElementRef.current;\n    queueMicrotask(() => {\n      const focused = focusedRef.current;\n      if (!focused || !tableElement.isConnected) return;\n      const active = tableElement.ownerDocument.activeElement;\n      if (active && tableElement.contains(active)) return;\n      const restoring = armedRef.current && isFocusLost(active, scroller);\n      disarm();\n      if (restoring) restore(focused);\n      else focusedRef.current = null;\n    });\n  });\n\n  return { context, scrollerRef, tableRef, onFocus, onBlur, onPointerDownCapture };\n}\n"],"mappings":"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"}

package/dist/components/table/Table.cjs

@@ -1,2 +1,2 @@
-"use client";const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/cn.cjs"),n=require("../../lib/children.cjs"),r=require("../../lib/dev.cjs"),i=require("../../lib/slot.cjs"),a=require("../../lib/composeEventHandlers.cjs"),o=require("../../lib/classNames.cjs"),s=require("../../hooks/useEventCallback.cjs"),c=require("../../hooks/useControllable.cjs"),l=require("../../hooks/useId.cjs"),u=require("../../hooks/useMergedRefs.cjs");require("../../lib/styles.cjs");const d=require("../../hooks/useFormReset.cjs"),f=require("../data-display/Avatar.context.cjs"),p=require("./Table.shared.cjs");let m=require("react");m=e.__toESM(m,1);let h=require("react/jsx-runtime");var g=()=>()=>{};function _(e){let t=m.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=m.useCallback(()=>e?e.scrollWidth>e.clientWidth:!1,[e]);return m.useSyncExternalStore(e?t:g,n,()=>!1)}function v(e){return n.isElementOfType(e,`caption`)}var y=({striped:e=!1,containerProps:i,children:a,className:s,ref:c,...d})=>{let{className:f,ref:p,"aria-label":g,"aria-labelledby":y,...b}=i??{},[x,S]=m.useState(null),C=u.useMergedRefs(p,S),w=_(x),T=l.useId(`wave-table-caption`),E=n.flattenChildren(a),D=E.findIndex(({node:e})=>v(e)),O=D>=0?E[D].node:null,k=O?O.props.id??T:void 0,A=O&&O.props.id===void 0?E.map(({key:e,node:t},n)=>(0,h.jsx)(m.Fragment,{children:n===D?m.cloneElement(O,{id:T}):t},e)):a,j=g?void 0:y??k,M=!!(g||j),N=w&&M,P=b.role;return m.useEffect(()=>{w&&!M&&r.warnOnce(`Table:unnamed-scroll-region`,`Table: the table scrolls horizontally but its scroll region has no name. Add a <caption> or containerProps["aria-label"].`)},[w,M]),(0,h.jsx)(`div`,{...b,ref:C,role:N?`region`:P,tabIndex:w?0:b.tabIndex,"aria-label":w||P!==void 0?g:void 0,"aria-labelledby":N?j:P===void 0?void 0:y,className:t.cn(o.tableClassNames.container,`overflow-x-auto rounded-md border border-border`,w&&`focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring`,f),children:(0,h.jsx)(`table`,{ref:c,"data-striped":e?``:void 0,className:t.cn(o.tableClassNames.root,`w-full border-separate border-spacing-0`,e&&`[:where(&>tbody>tr:nth-child(odd))]:bg-card`,s),...d,children:A})})};y.displayName=`Table`;var b=({children:e,className:n,ref:r,...i})=>(0,h.jsx)(`thead`,{ref:r,...i,className:t.cn(o.tableHeaderClassNames.root,`bg-card`,n),children:e});b.displayName=`TableHeader`;var x=({sortable:e=!1,sortDirection:n,onSortClick:r,sortIcon:a,aside:s,children:c,className:l,ref:u,...d})=>{let f=i.slotRendersContent(s),m=f?i.renderSlot(s,`span`,t.cn(o.tableHeaderCellClassNames.aside,`inline-flex shrink-0 items-center`,e&&`pe-4`)):null,g=c;return e?g=(0,h.jsxs)(`div`,{className:`flex items-center`,children:[(0,h.jsx)(p.TableSortButton,{component:`Table.HeaderCell`,direction:n,sortIcon:a,className:o.tableHeaderCellClassNames.button,iconClassName:o.tableHeaderCellClassNames.sortIcon,onClick:r,children:c}),m]}):f&&(g=(0,h.jsxs)(`div`,{className:`flex items-center gap-2`,children:[c,m]})),(0,h.jsx)(`th`,{ref:u,scope:`col`,"aria-sort":e?n??`none`:void 0,className:t.cn(o.tableHeaderCellClassNames.root,`px-4 py-3 text-start font-semibold text-caption-1 uppercase tracking-wider border-b border-border`,e&&`p-0 hover:bg-subtle-hover`,l),...d,children:g})};x.displayName=`TableHeaderCell`;var S=e=>(r.warnDeprecated(`Table`,`Table.Head`,`Table.Header`),(0,h.jsx)(b,{...e}));S.displayName=`TableHead`;var C=e=>(r.warnDeprecated(`Table`,`Table.HeadCell`,`Table.HeaderCell`),(0,h.jsx)(x,{...e}));C.displayName=`TableHeadCell`;var w=({children:e,className:n,ref:r,...i})=>(0,h.jsx)(`tbody`,{ref:r,...i,className:t.cn(o.tableBodyClassNames.root,n),children:e});w.displayName=`TableBody`;var T=({children:e,className:n,ref:r,...i})=>(0,h.jsx)(`tr`,{ref:r,className:t.cn(o.tableRowClassNames.root,`group/table-row`,`hover:bg-subtle-hover transition-colors motion-reduce:transition-none`,n),...i,children:e});T.displayName=`TableRow`;var E=({children:e,className:n,ref:r,...i})=>(0,h.jsx)(`td`,{ref:r,className:t.cn(o.tableCellClassNames.root,`relative px-4 py-3 text-body-1 border-b border-border`,n),...i,children:e});E.displayName=`TableCell`;var D=({type:e=`checkbox`,checked:n,defaultChecked:i=!1,onCheckedChange:l,onChange:f,name:g,value:_,form:v,disabled:y,required:b,subtle:x=!1,invisible:S=!1,id:C,"aria-label":w,"aria-labelledby":T,"aria-describedby":E,"aria-invalid":D,"aria-required":O,"aria-errormessage":k,"aria-details":A,autoFocus:j,tabIndex:M,onFocus:N,onBlur:P,onKeyDown:F,onKeyUp:I,controlRef:L,className:R,ref:z,...B})=>{let V=m.useRef(void 0),[H,U,W]=c.useControllable(n,i,e=>{e!==`mixed`&&l?.(e,V.current)}),G=s.useEventCallback((e,t)=>{V.current={event:t};try{U(e)}finally{V.current=void 0}}),K=m.useRef(null),q=u.useMergedRefs(K,L);d.useFormReset(K,()=>U(i),v);let J=e===`radio`&&!W&&!!g;return m.useEffect(()=>{let e=K.current;if(!J||!e)return;let t=e.getRootNode(),n=t=>{let n=t.target;n!==e&&n instanceof HTMLInputElement&&n.type===`radio`&&n.name===e.name&&n.form===e.form&&n.checked&&G(!1,t)};return t.addEventListener(`click`,n,!0),()=>t.removeEventListener(`click`,n,!0)},[J,G]),m.useEffect(()=>{let e=K.current;!r.isDev||!e||w||T||(e.labels?.length??0)>0||r.warnOnce(`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).')},[w,T,C]),(0,h.jsx)(`td`,{ref:z,"data-type":e,...B,className:t.cn(o.tableSelectionCellClassNames.root,p.SELECTION_CELL_CLASSES,R),children:(0,h.jsx)(p.TableSelectionControl,{ref:q,type:e,checked:H,subtle:x,invisible:S,id:C,name:g,value:_,form:v,disabled:y,required:b,"aria-label":w,"aria-labelledby":T,"aria-describedby":E,"aria-invalid":D,"aria-required":O,"aria-errormessage":k,"aria-details":A,autoFocus:j,tabIndex:M,onFocus:N,onBlur:P,onKeyDown:F,onKeyUp:I,onChange:a.composeEventHandlers(f,e=>G(e.currentTarget.checked,e.nativeEvent)),className:o.tableSelectionCellClassNames.control})})};D.displayName=`TableSelectionCell`;var O={size:32},k={default:`flex shrink-0 items-center [&>svg]:size-5`,primary:`flex shrink-0 items-center [&>svg]:size-6`},A=({media:e,description:n,truncate:r=!1,appearance:a,children:s,className:c,ref:l,...u})=>{let d=i.slotRendersContent(e),p=i.slotRendersContent(s),m=i.slotRendersContent(n),g=a===`primary`;return(0,h.jsxs)(`div`,{ref:l,"data-appearance":a,"data-truncate":r?``:void 0,...u,className:t.cn(o.tableCellLayoutClassNames.root,`flex items-center gap-2`,r&&`overflow-x-hidden`,c),children:[d&&(0,h.jsx)(f.AvatarSizeContext.Provider,{value:O,children:i.renderSlot(e,`span`,t.cn(o.tableCellLayoutClassNames.media,k[g?`primary`:`default`]))}),(p||m)&&(0,h.jsxs)(`div`,{className:t.cn(o.tableCellLayoutClassNames.content,`flex flex-col`,r&&`min-w-0 overflow-x-hidden`),children:[p&&(0,h.jsx)(`span`,{className:t.cn(o.tableCellLayoutClassNames.main,r&&`truncate`,g&&`font-semibold`),children:i.materialiseSlotContent(s)}),m&&i.renderSlot(n,`span`,t.cn(o.tableCellLayoutClassNames.description,`text-caption-1 text-muted-foreground`,r&&`truncate`))]})]})};A.displayName=`TableCellLayout`;var j=`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`,M=`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=({visible:e=!1,className:n,ref:r,...i})=>(0,h.jsx)(`div`,{ref:r,"data-visible":e?``:void 0,...i,className:t.cn(o.tableCellActionsClassNames.root,j,e?void 0:M,n)});N.displayName=`TableCellActions`;var P=Object.assign(y,{Header:b,HeaderCell:x,Head:S,HeadCell:C,Body:w,Row:T,Cell:E,SelectionCell:D,CellLayout:A,CellActions:N});exports.Table=P,exports.TableBody=w,exports.TableCell=E,exports.TableCellActions=N,exports.TableCellLayout=A,exports.TableHead=S,exports.TableHeadCell=C,exports.TableHeader=b,exports.TableHeaderCell=x,exports.TableRow=T,exports.TableSelectionCell=D;
+"use client";const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/cn.cjs"),n=require("../../lib/children.cjs"),r=require("../../lib/dev.cjs"),i=require("../../lib/slot.cjs"),a=require("../../lib/composeEventHandlers.cjs"),o=require("../../lib/classNames.cjs"),s=require("../../hooks/useEventCallback.cjs"),c=require("../../hooks/useControllable.cjs"),l=require("../../hooks/useId.cjs"),u=require("../../hooks/useMergedRefs.cjs");require("../../lib/styles.cjs");const d=require("../../hooks/useFormReset.cjs"),f=require("../data-display/Avatar.context.cjs"),p=require("./Table.resize.cjs"),m=require("./Table.shared.cjs");let h=require("react");h=e.__toESM(h,1);let g=require("react/jsx-runtime");var _=()=>()=>{};function v(e){let t=h.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=h.useCallback(()=>e?e.scrollWidth>e.clientWidth:!1,[e]);return h.useSyncExternalStore(e?t:_,n,()=>!1)}function y(e){return n.isElementOfType(e,`caption`)}var b=({striped:e=!1,containerProps:i,children:a,className:s,ref:c,...d})=>{let{className:f,ref:p,"aria-label":m,"aria-labelledby":_,...b}=i??{},[x,S]=h.useState(null),C=u.useMergedRefs(p,S),w=v(x),T=l.useId(`wave-table-caption`),E=n.flattenChildren(a),D=E.findIndex(({node:e})=>y(e)),O=D>=0?E[D].node:null,k=O?O.props.id??T:void 0,A=O&&O.props.id===void 0?E.map(({key:e,node:t},n)=>(0,g.jsx)(h.Fragment,{children:n===D?h.cloneElement(O,{id:T}):t},e)):a,j=m?void 0:_??k,M=!!(m||j),N=w&&M,P=b.role;return h.useEffect(()=>{w&&!M&&r.warnOnce(`Table:unnamed-scroll-region`,`Table: the table scrolls horizontally but its scroll region has no name. Add a <caption> or containerProps["aria-label"].`)},[w,M]),(0,g.jsx)(`div`,{...b,ref:C,role:N?`region`:P,tabIndex:w?0:b.tabIndex,"aria-label":w||P!==void 0?m:void 0,"aria-labelledby":N?j:P===void 0?void 0:_,className:t.cn(o.tableClassNames.container,`overflow-x-auto rounded-md border border-border`,w&&`focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring`,f),children:(0,g.jsx)(`table`,{ref:c,"data-striped":e?``:void 0,className:t.cn(o.tableClassNames.root,`w-full border-separate border-spacing-0`,e&&`[:where(&>tbody>tr:nth-child(odd))]:bg-card`,s),...d,children:A})})};b.displayName=`Table`;var x=({children:e,className:n,ref:r,...i})=>(0,g.jsx)(`thead`,{ref:r,...i,className:t.cn(o.tableHeaderClassNames.root,`bg-card`,n),children:e});x.displayName=`TableHeader`;var S=({sortable:e=!1,sortDirection:n,onSortClick:r,sortIcon:a,aside:s,children:c,className:l,ref:u,...d})=>{let f=i.slotRendersContent(s),p=f?i.renderSlot(s,`span`,t.cn(o.tableHeaderCellClassNames.aside,`inline-flex shrink-0 items-center`,e&&`pe-4`)):null,h=c;return e?h=(0,g.jsxs)(`div`,{className:`flex items-center`,children:[(0,g.jsx)(m.TableSortButton,{component:`Table.HeaderCell`,direction:n,sortIcon:a,className:o.tableHeaderCellClassNames.button,iconClassName:o.tableHeaderCellClassNames.sortIcon,onClick:r,children:c}),p]}):f&&(h=(0,g.jsxs)(`div`,{className:`flex items-center gap-2`,children:[c,p]})),(0,g.jsx)(`th`,{ref:u,scope:`col`,"aria-sort":e?n??`none`:void 0,className:t.cn(o.tableHeaderCellClassNames.root,`px-4 py-3 text-start font-semibold text-caption-1 uppercase tracking-wider border-b border-border`,e&&`p-0 hover:bg-subtle-hover`,l),...d,children:h})};S.displayName=`TableHeaderCell`;var C=e=>(r.warnDeprecated(`Table`,`Table.Head`,`Table.Header`),(0,g.jsx)(x,{...e}));C.displayName=`TableHead`;var w=e=>(r.warnDeprecated(`Table`,`Table.HeadCell`,`Table.HeaderCell`),(0,g.jsx)(S,{...e}));w.displayName=`TableHeadCell`;var T=({children:e,className:n,ref:r,...i})=>(0,g.jsx)(`tbody`,{ref:r,...i,className:t.cn(o.tableBodyClassNames.root,n),children:e});T.displayName=`TableBody`;var E=({children:e,className:n,ref:r,...i})=>(0,g.jsx)(`tr`,{ref:r,className:t.cn(o.tableRowClassNames.root,`group/table-row`,`hover:bg-subtle-hover transition-colors motion-reduce:transition-none`,n),...i,children:e});E.displayName=`TableRow`;var D=({children:e,className:n,ref:r,...i})=>(0,g.jsx)(`td`,{ref:r,className:t.cn(o.tableCellClassNames.root,`relative px-4 py-3 text-body-1 border-b border-border`,n),...i,children:e});D.displayName=`TableCell`;var O=({type:e=`checkbox`,checked:n,defaultChecked:i=!1,onCheckedChange:l,onChange:f,name:p,value:_,form:v,disabled:y,required:b,subtle:x=!1,invisible:S=!1,id:C,"aria-label":w,"aria-labelledby":T,"aria-describedby":E,"aria-invalid":D,"aria-required":O,"aria-errormessage":k,"aria-details":A,autoFocus:j,tabIndex:M,onFocus:N,onBlur:P,onKeyDown:F,onKeyUp:I,controlRef:L,className:R,ref:z,...B})=>{let V=h.useRef(void 0),[H,U,W]=c.useControllable(n,i,e=>{e!==`mixed`&&l?.(e,V.current)}),G=s.useEventCallback((e,t)=>{V.current={event:t};try{U(e)}finally{V.current=void 0}}),K=h.useRef(null),q=u.useMergedRefs(K,L);d.useFormReset(K,()=>U(i),v);let J=e===`radio`&&!W&&!!p;return h.useEffect(()=>{let e=K.current;if(!J||!e)return;let t=e.getRootNode(),n=t=>{let n=t.target;n!==e&&n instanceof HTMLInputElement&&n.type===`radio`&&n.name===e.name&&n.form===e.form&&n.checked&&G(!1,t)};return t.addEventListener(`click`,n,!0),()=>t.removeEventListener(`click`,n,!0)},[J,G]),h.useEffect(()=>{let e=K.current;!r.isDev||!e||w||T||(e.labels?.length??0)>0||r.warnOnce(`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).')},[w,T,C]),(0,g.jsx)(`td`,{ref:z,"data-type":e,...B,className:t.cn(o.tableSelectionCellClassNames.root,m.SELECTION_CELL_CLASSES,R),children:(0,g.jsx)(m.TableSelectionControl,{ref:q,type:e,checked:H,subtle:x,invisible:S,id:C,name:p,value:_,form:v,disabled:y,required:b,"aria-label":w,"aria-labelledby":T,"aria-describedby":E,"aria-invalid":D,"aria-required":O,"aria-errormessage":k,"aria-details":A,autoFocus:j,tabIndex:M,onFocus:N,onBlur:P,onKeyDown:F,onKeyUp:I,onChange:a.composeEventHandlers(f,e=>G(e.currentTarget.checked,e.nativeEvent)),className:o.tableSelectionCellClassNames.control})})};O.displayName=`TableSelectionCell`;var k={size:32},A={default:`flex shrink-0 items-center [&>svg]:size-5`,primary:`flex shrink-0 items-center [&>svg]:size-6`},j=({media:e,description:n,truncate:r=!1,appearance:a,children:s,className:c,ref:l,...u})=>{let d=i.slotRendersContent(e),p=i.slotRendersContent(s),m=i.slotRendersContent(n),h=a===`primary`;return(0,g.jsxs)(`div`,{ref:l,"data-appearance":a,"data-truncate":r?``:void 0,...u,className:t.cn(o.tableCellLayoutClassNames.root,`flex items-center gap-2`,r&&`overflow-x-hidden`,c),children:[d&&(0,g.jsx)(f.AvatarSizeContext.Provider,{value:k,children:i.renderSlot(e,`span`,t.cn(o.tableCellLayoutClassNames.media,A[h?`primary`:`default`]))}),(p||m)&&(0,g.jsxs)(`div`,{className:t.cn(o.tableCellLayoutClassNames.content,`flex flex-col`,r&&`min-w-0 overflow-x-hidden`),children:[p&&(0,g.jsx)(`span`,{className:t.cn(o.tableCellLayoutClassNames.main,r&&`truncate`,h&&`font-semibold`),children:i.materialiseSlotContent(s)}),m&&i.renderSlot(n,`span`,t.cn(o.tableCellLayoutClassNames.description,`text-caption-1 text-muted-foreground`,r&&`truncate`))]})]})};j.displayName=`TableCellLayout`;var M=`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=`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`,P=({visible:e=!1,className:n,ref:r,...i})=>(0,g.jsx)(`div`,{ref:r,"data-visible":e?``:void 0,...i,className:t.cn(o.tableCellActionsClassNames.root,M,e?void 0:N,n)});P.displayName=`TableCellActions`;var F=Object.assign(b,{Header:x,HeaderCell:S,Head:C,HeadCell:w,Body:T,Row:E,Cell:D,SelectionCell:O,CellLayout:j,CellActions:P,ResizeHandle:p.TableResizeHandle});exports.Table=F,exports.TableBody=T,exports.TableCell=D,exports.TableCellActions=P,exports.TableCellLayout=j,exports.TableHead=C,exports.TableHeadCell=w,exports.TableHeader=x,exports.TableHeaderCell=S,exports.TableResizeHandle=p.TableResizeHandle,exports.TableRow=E,exports.TableSelectionCell=O;
 //# sourceMappingURL=Table.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Table.cjs","names":["React","isElementOfType","useMergedRefs","useId","flattenChildren","cn","tableClassNames","tableHeaderClassNames","slotRendersContent","renderSlot","tableHeaderCellClassNames","TableSortButton","tableBodyClassNames","tableRowClassNames","tableCellClassNames","useControllable","useEventCallback","isDev","tableSelectionCellClassNames","SELECTION_CELL_CLASSES","TableSelectionControl","composeEventHandlers","tableCellLayoutClassNames","AvatarSizeContext","materialiseSlotContent","tableCellActionsClassNames","require_runtime","require_cn","require_children","require_dev","require_slot","require_composeEventHandlers","require_classNames","require_useEventCallback","require_useControllable","require_useId","require_useMergedRefs","require_useFormReset","require_Avatar_context","require_Table_shared","react","react_jsx_runtime","noopSubscribe","useHorizontalOverflow","subscribe","wrapper","observer","onChange","child","getSnapshot","isCaption","node","TableRoot","props","containerClassName","containerRef","containerLabel","containerLabelledBy","containerRest","containerProps","setWrapper","wrapperRef","scrollable","generatedCaptionId","flatChildren","children","captionIndex","caption","captionId","content","index","key","regionLabelledBy","named","isRegion","consumerRole","striped","className","TableHeader","rest","TableHeaderCell","hasAside","aside","asideNode","sortable","sortDirection","onSortClick","TableHead","TableHeadCell","TableBody","TableRow","TableCell","TableSelectionCell","checkedProp","ariaLabel","ariaLabelledBy","ariaDescribedBy","ariaInvalid","ariaRequired","ariaErrorMessage","ariaDetails","detailsRef","checked","setChecked","isControlled","defaultChecked","next","onCheckedChange","changeChecked","inputRef","mergedControlRef","controlRef","form","followsGroup","type","name","input","root","handleClick","target","event","id","CELL_LAYOUT_AVATAR_BOX","CELL_LAYOUT_MEDIA_CLASSES","TableCellLayout","hasMedia","media","hasMain","hasDescription","description","primary","appearance","truncate","CELL_ACTIONS_CLASSES","CELL_ACTIONS_REVEAL_CLASSES","TableCellActions","visible","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":"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"}
+{"version":3,"file":"Table.cjs","names":["React","isElementOfType","useMergedRefs","useId","flattenChildren","cn","tableClassNames","tableHeaderClassNames","slotRendersContent","renderSlot","tableHeaderCellClassNames","TableSortButton","tableBodyClassNames","tableRowClassNames","tableCellClassNames","useControllable","useEventCallback","isDev","tableSelectionCellClassNames","SELECTION_CELL_CLASSES","TableSelectionControl","composeEventHandlers","tableCellLayoutClassNames","AvatarSizeContext","materialiseSlotContent","tableCellActionsClassNames","TableResizeHandle","require_runtime","require_cn","require_children","require_dev","require_slot","require_composeEventHandlers","require_classNames","require_useEventCallback","require_useControllable","require_useId","require_useMergedRefs","require_useFormReset","require_Avatar_context","require_Table_resize","require_Table_shared","react","react_jsx_runtime","noopSubscribe","useHorizontalOverflow","subscribe","wrapper","observer","onChange","child","getSnapshot","isCaption","node","TableRoot","props","containerClassName","containerRef","containerLabel","containerLabelledBy","containerRest","containerProps","setWrapper","wrapperRef","scrollable","generatedCaptionId","flatChildren","children","captionIndex","caption","captionId","content","index","key","regionLabelledBy","named","isRegion","consumerRole","striped","className","TableHeader","rest","TableHeaderCell","hasAside","aside","asideNode","sortable","sortDirection","onSortClick","TableHead","TableHeadCell","TableBody","TableRow","TableCell","TableSelectionCell","checkedProp","ariaLabel","ariaLabelledBy","ariaDescribedBy","ariaInvalid","ariaRequired","ariaErrorMessage","ariaDetails","detailsRef","checked","setChecked","isControlled","defaultChecked","next","onCheckedChange","changeChecked","inputRef","mergedControlRef","controlRef","form","followsGroup","type","name","input","root","handleClick","target","event","id","CELL_LAYOUT_AVATAR_BOX","CELL_LAYOUT_MEDIA_CLASSES","TableCellLayout","hasMedia","media","hasMain","hasDescription","description","primary","appearance","truncate","CELL_ACTIONS_CLASSES","CELL_ACTIONS_REVEAL_CLASSES","TableCellActions","visible","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 { 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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"}