@galaxy-io/dls 1.6.0 → 2.0.0

package/dist/table/TableCore.js

@@ -0,0 +1,1077 @@
+import { useIsomorphicLayoutEffect } from "../hooks/useIsomorphicLayoutEffect.js";
+import VisuallyHidden from "../a11y/VisuallyHidden.js";
+import Skeleton, { SkeletonSize, SkeletonVariant } from "../feedback/Skeleton.js";
+import { FontFamily, Orientation, Placement, Side } from "../theme/enums.js";
+import Text, { TextSize, TextVariant, TextWeight } from "../text/Text.js";
+import { CONTROL_SIZE, SPACE } from "../theme/tokens/scales.js";
+import { t } from "../theme/tokens/t.js";
+import Icon, { IconVariant } from "../icons/Icon.js";
+import Rotate from "../transform/Rotate.js";
+import Button, { ButtonSize, ButtonVariant } from "../buttons/Button.js";
+import EmptyState, { EmptyStateSize } from "../feedback/EmptyState.js";
+import { useElementClientSize } from "../hooks/useElementClientSize.js";
+import { formatNumber } from "../utils/format.js";
+import ResizeHandle from "../layout/ResizeHandle.js";
+import CheckboxInput, { CheckboxInputSize } from "../inputs/CheckboxInput.js";
+import Menu, { MenuCheckboxItem, MenuGroup, MenuItem, MenuSeparator, MenuSize } from "../menu/Menu.js";
+import { useInfiniteScrollSentinel } from "./useInfiniteScrollSentinel.js";
+/* empty css                    */
+import { styled } from "@linaria/react";
+import { memo, useCallback, useEffect, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "@linaria/core";
+import { useMergeRefs } from "@floating-ui/react";
+import { ArrowDownIcon, ArrowUpIcon, ArrowsDownUpIcon, CaretRightIcon, DotsThreeIcon, DotsThreeVerticalIcon, SlidersHorizontalIcon, WarningCircleIcon } from "@phosphor-icons/react";
+//#region src/table/TableCore.tsx
+/**
+* @internal Shared by the table components; apps use InfiniteTable, VirtualizedInfiniteTable or
+* InfiniteSpreadsheet.
+*
+* The table core: size metrics, the styled parts (root → scroll container → `<table>` → header,
+* body, footer and status row groups → sentinel → live region), the header cell (sort, column
+* actions, resize handle, drag to reorder), the body row and its synthetic cells (select, expand,
+* row actions), skeleton, status and expanded rows, the Columns menu and the default cell text.
+* Nothing here imports an optional peer (`@tanstack/react-table`, `@tanstack/react-virtual`).
+*
+* The `<table>` parts are laid out with flex (1.x), which strips their implicit roles: every
+* part sets its `role`. Column widths reach cells only through custom properties on the root, so
+* resizing a column re-renders no row.
+*/
+/** `onEndReached` fires when the last row comes within this many pixels of view. */
+var TABLE_END_REACHED_MARGIN_PX = 500;
+/** Skeleton rows shown in place of an empty body while the first page loads. */
+var TABLE_LOADING_ROW_COUNT = 5;
+/** Skeleton rows shown after the last row while more rows load. */
+var TABLE_LOADING_MORE_ROW_COUNT = 3;
+/** Smallest column width when a column sets none (1.x). */
+var TABLE_DEFAULT_MIN_COLUMN_WIDTH = 60;
+/** Largest resize width when a column sets none (1.x). */
+var TABLE_DEFAULT_MAX_COLUMN_WIDTH = 800;
+/** Width of a pinned column that sets no `width` (1.x); a dev warning asks for one. */
+var TABLE_PINNED_FALLBACK_WIDTH = 150;
+/** Horizontal pointer travel before a header press becomes a column drag: `space[4]`. */
+var TABLE_DRAG_THRESHOLD_PX = Number.parseFloat(SPACE[4]);
+/** Rows rendered above and below the visible window of a virtual body. */
+var VIRTUAL_OVERSCAN = 10;
+/** Local stacking inside the root's `isolation: isolate`; never competes with `t.z` layers. */
+/** @internal Stacking of pinned cells (and the spreadsheet's editing cell). */
+var TABLE_Z_PINNED = 1;
+/** @internal True outside production builds (read through `process.env.NODE_ENV`). */
+function isDevelopment() {
+	try {
+		return process.env.NODE_ENV !== "production";
+	} catch {
+		return false;
+	}
+}
+var px = (value) => Number.parseFloat(value);
+/** @internal 32px rows, 32px header, body_sm. */
+var TABLE_SMALL_METRICS = {
+	css: "gx-TableCore-css-c13wyidj",
+	rowHeightPx: px(CONTROL_SIZE.small) + 2 * px(SPACE[4]),
+	headerHeightPx: px(CONTROL_SIZE.small) + 2 * px(SPACE[4]),
+	textSize: TextSize.BODY_SM,
+	headerIconPx: 12,
+	caretPx: 10,
+	checkboxSize: CheckboxInputSize.SMALL,
+	buttonSize: ButtonSize.X_SMALL,
+	skeletonSize: SkeletonSize.SMALL,
+	menuSize: MenuSize.SMALL,
+	emptyStateSize: EmptyStateSize.SMALL
+};
+/** @internal 48px rows, 40px header, body_md. */
+var TABLE_MEDIUM_METRICS = {
+	css: "gx-TableCore-css-c1bvr8n5",
+	rowHeightPx: px(CONTROL_SIZE.medium) + 2 * px(SPACE[8]),
+	headerHeightPx: px(CONTROL_SIZE.medium) + 2 * px(SPACE[4]),
+	textSize: TextSize.BODY_MD,
+	headerIconPx: 14,
+	caretPx: 10,
+	checkboxSize: CheckboxInputSize.MEDIUM,
+	buttonSize: ButtonSize.SMALL,
+	skeletonSize: SkeletonSize.MEDIUM,
+	menuSize: MenuSize.SMALL,
+	emptyStateSize: EmptyStateSize.MEDIUM
+};
+/** @internal 52px rows, 44px header, body_lg. */
+var TABLE_LARGE_METRICS = {
+	css: "gx-TableCore-css-c9bne0h",
+	rowHeightPx: px(CONTROL_SIZE.large) + 2 * px(SPACE[8]),
+	headerHeightPx: px(CONTROL_SIZE.large) + 2 * px(SPACE[4]),
+	textSize: TextSize.BODY_LG,
+	headerIconPx: 14,
+	caretPx: 12,
+	checkboxSize: CheckboxInputSize.LARGE,
+	buttonSize: ButtonSize.MEDIUM,
+	skeletonSize: SkeletonSize.LARGE,
+	menuSize: MenuSize.MEDIUM,
+	emptyStateSize: EmptyStateSize.MEDIUM
+};
+/** Fills a bounded parent and scrolls inside it; in an unbounded parent it grows with its rows. */
+var Root = /*#__PURE__*/ styled("div")({
+	name: "Root",
+	class: "gx-TableCore-rbflrbk",
+	propsAsIs: false
+});
+/** The scrollport. Not focusable: its rows and controls are. */
+var Scroll = /*#__PURE__*/ styled("div")({
+	name: "Scroll",
+	class: "gx-TableCore-Scroll-szfxg1j",
+	propsAsIs: false
+});
+/** A flex column, so the status row group can fill a bounded scrollport. */
+var TableElement = /*#__PURE__*/ styled("table")({
+	name: "TableElement",
+	class: "gx-TableCore-TableElement-t10fh5j2",
+	propsAsIs: false
+});
+var Head = /*#__PURE__*/ styled("thead")({
+	name: "Head",
+	class: "gx-TableCore-Head-hij68rq",
+	propsAsIs: false
+});
+var Body = /*#__PURE__*/ styled("tbody")({
+	name: "Body",
+	class: "gx-TableCore-Body-b1seyvh2",
+	propsAsIs: false
+});
+/** Skeleton, empty, error and end-error rows; grows to fill a bounded scrollport. */
+var StatusBody = /*#__PURE__*/ styled("tbody")({
+	name: "StatusBody",
+	class: "gx-TableCore-StatusBody-sf09csv",
+	propsAsIs: false
+});
+var Foot = /*#__PURE__*/ styled("tfoot")({
+	name: "Foot",
+	class: "gx-TableCore-Foot-f1loheb3",
+	propsAsIs: false
+});
+var HeaderRow = /*#__PURE__*/ styled("tr")({
+	name: "HeaderRow",
+	class: "gx-TableCore-HeaderRow-h1650vjz",
+	propsAsIs: false
+});
+var FooterRow = /*#__PURE__*/ styled("tr")({
+	name: "FooterRow",
+	class: "gx-TableCore-FooterRow-f3prmx7",
+	propsAsIs: false
+});
+/** @internal A body row. States are classes (`ROW_*_CSS`). */
+var TableRow = /*#__PURE__*/ styled("tr")({
+	name: "TableRow",
+	class: "gx-TableCore-TableRow-t18zsjxh",
+	propsAsIs: false
+});
+/** @internal A body or footer cell. */
+var TableCell = /*#__PURE__*/ styled("td")({
+	name: "TableCell",
+	class: "gx-TableCore-TableCell-t1f7xxie",
+	propsAsIs: false
+});
+/** A header cell: not clipped, so the resize handle can straddle the column edge. */
+var HeaderCell = /*#__PURE__*/ styled("th")({
+	name: "HeaderCell",
+	class: "gx-TableCore-HeaderCell-h1n0v2ch",
+	propsAsIs: false
+});
+/** The press target of a sortable or movable column: label and sort icon. */
+var HeaderButton = /*#__PURE__*/ styled("button")({
+	name: "HeaderButton",
+	class: "gx-TableCore-HeaderButton-h1nswbdd",
+	propsAsIs: false
+});
+/** The label of a column that cannot be pressed. */
+var HeaderLabel = /*#__PURE__*/ styled("span")({
+	name: "HeaderLabel",
+	class: "gx-TableCore-HeaderLabel-hc3y207",
+	propsAsIs: false
+});
+/** Marks the gap a dragged column would land in. */
+var DropIndicator = /*#__PURE__*/ styled("span")({
+	name: "DropIndicator",
+	class: "gx-TableCore-DropIndicator-d1po1i5a",
+	propsAsIs: false
+});
+/** Follows the table, inside the scroll container; observed for `onEndReached`. */
+var Sentinel = /*#__PURE__*/ styled("div")({
+	name: "Sentinel",
+	class: "gx-TableCore-Sentinel-scxvgum",
+	propsAsIs: false
+});
+/** The visible width of an empty or error body, pinned while the table scrolls sideways. */
+var StatusViewport = /*#__PURE__*/ styled("div")({
+	name: "StatusViewport",
+	class: "gx-TableCore-StatusViewport-s7ul01a",
+	propsAsIs: false
+});
+/** The end error row's content: icon and message, sticky like the status viewport. */
+var EndErrorViewport = /*#__PURE__*/ styled("div")({
+	name: "EndErrorViewport",
+	class: "gx-TableCore-EndErrorViewport-e1qemn2d",
+	propsAsIs: false
+});
+var StatusRowElement = /*#__PURE__*/ styled("tr")({
+	name: "StatusRowElement",
+	class: "gx-TableCore-StatusRowElement-sjip7oh",
+	propsAsIs: false
+});
+var StatusCell = /*#__PURE__*/ styled("td")({
+	name: "StatusCell",
+	class: "gx-TableCore-StatusCell-s1cfdxs6",
+	propsAsIs: false
+});
+var EndErrorRow = /*#__PURE__*/ styled("tr")({
+	name: "EndErrorRow",
+	class: "gx-TableCore-EndErrorRow-elttqlf",
+	propsAsIs: false
+});
+var ExpandedRowElement = /*#__PURE__*/ styled("tr")({
+	name: "ExpandedRowElement",
+	class: "gx-TableCore-ExpandedRowElement-e60f67l",
+	propsAsIs: false
+});
+var ExpandedCell = /*#__PURE__*/ styled("td")({
+	name: "ExpandedCell",
+	class: "gx-TableCore-ExpandedCell-e1xg4fvx",
+	propsAsIs: false
+});
+/** Pinned to the visible width while the table scrolls sideways; the gutter lines up with the expand column. */
+var ExpandedViewport = /*#__PURE__*/ styled("div")({
+	name: "ExpandedViewport",
+	class: "gx-TableCore-ExpandedViewport-e13bd0ox",
+	propsAsIs: false
+});
+var ExpandedGutter = /*#__PURE__*/ styled("div")({
+	name: "ExpandedGutter",
+	class: "gx-TableCore-ExpandedGutter-enk7ldu",
+	propsAsIs: false
+});
+var ExpandedBody = /*#__PURE__*/ styled("div")({
+	name: "ExpandedBody",
+	class: "gx-TableCore-ExpandedBody-e1yoeixn",
+	propsAsIs: false
+});
+/**
+* The parent paints nothing: the table paints the surface found further up (`--gx-table-surface`,
+* set by `useTableSurface`) so its sticky parts stay opaque.
+*/
+var SURFACE_ANCESTOR_CSS = "gx-TableCore-SURFACE_ANCESTOR_CSS-s18ghmlo";
+/** @internal Select, expand and row-actions columns: a square of the row height, content centered. */
+var SYNTHETIC_CELL_CSS = "gx-TableCore-SYNTHETIC_CELL_CSS-s1g01kh5";
+/** @internal Alignment of a column's header and cells. */
+var COLUMN_ALIGN_TO_CSS_MAP = {
+	left: "gx-TableCore-left-l1qwxx34",
+	center: "gx-TableCore-center-c152j0h",
+	right: "gx-TableCore-right-r1y0un5j"
+};
+/** @internal Sticky to an edge while the table scrolls sideways. */
+var PIN_TO_CSS_MAP = {
+	[Side.LEFT]: "gx-TableCore-Side_LEFT-s1dzycrm",
+	[Side.RIGHT]: "gx-TableCore-Side_RIGHT-s6wh2p6"
+};
+/** @internal The edge hairline of the last left-pinned / first right-pinned data column. */
+var PIN_TO_EDGE_CSS_MAP = {
+	[Side.LEFT]: "gx-TableCore-Side_LEFT-s1imw0tm",
+	[Side.RIGHT]: "gx-TableCore-Side_RIGHT-s1swk4bm"
+};
+/** Pinned header cells stack above pinned body cells and the sticky header. */
+var PINNED_HEADER_CSS = "gx-TableCore-PINNED_HEADER_CSS-p14t0x1z";
+/** The row does something: pointer and a hover fill. */
+var ROW_INTERACTIVE_CSS = "gx-TableCore-ROW_INTERACTIVE_CSS-r1nurjwh";
+/** A selected row: `background.selected`. Declared after the interactive state so it holds on hover. */
+var ROW_SELECTED_CSS = "gx-TableCore-ROW_SELECTED_CSS-r1g7lrfg";
+/** The current row (`activeRowId`): a fill and the `text.primary` bar of active navigation. */
+var ROW_ACTIVE_CSS = "gx-TableCore-ROW_ACTIVE_CSS-r10dstoh";
+/** @internal The last row, or a row whose panel is open: no bottom hairline. */
+var ROW_NO_BORDER_CSS = "gx-TableCore-ROW_NO_BORDER_CSS-rpsswqs";
+/** The last expanded panel: no bottom hairline. */
+var EXPANDED_LAST_CSS = "gx-TableCore-EXPANDED_LAST_CSS-ewbqwrq";
+/** The dragged header while reordering. 0.5 is a state, not a color token. */
+var HEADER_DRAGGING_CSS = "gx-TableCore-HEADER_DRAGGING_CSS-h1jxalmm";
+/** The label wrapper grows when a trailing control (column actions) follows it. */
+var LABEL_GROW_CSS = "gx-TableCore-LABEL_GROW_CSS-l1fx3qlj";
+var DROP_START_CSS = "gx-TableCore-DROP_START_CSS-d2nd1ne";
+var DROP_END_CSS = "gx-TableCore-DROP_END_CSS-darqcf0";
+/** Shows on hover, while dragged and on keyboard focus; straddles the column edge. */
+var COLUMN_RESIZE_HANDLE_CSS = "gx-TableCore-COLUMN_RESIZE_HANDLE_CSS-c132cb1v";
+/** Hovering a header cell reveals its resize handle. */
+var HEADER_HOVER_CSS = "gx-TableCore-HEADER_HOVER_CSS-h1vn45v6";
+/** The expand caret button: a square of its rung. */
+var EXPAND_BUTTON_CSS = "gx-TableCore-EXPAND_BUTTON_CSS-e14za3v2";
+/** @internal A virtual body: as tall as every row, which are positioned inside it. */
+var VIRTUAL_BODY_CSS = "gx-TableCore-VIRTUAL_BODY_CSS-v1w0t3ir";
+/** @internal A virtual row, placed at `--gx-table-row-start`. */
+var VIRTUAL_ROW_CSS = "gx-TableCore-VIRTUAL_ROW_CSS-vb9km4t";
+/** @internal Default cells and footer strings: shrink to truncate. */
+var CELL_TEXT_CSS = "gx-TableCore-CELL_TEXT_CSS-c1emgwoo";
+/** "Oct 3, 2026": the DateInput default. */
+var DATE_FORMAT_OPTIONS = { dateStyle: "medium" };
+/** @internal The default cell renderer: one truncating line of formatted text. */
+function TableCellText({ value, textSize }) {
+	if (value === null || value === void 0 || value === "") return /* @__PURE__ */ jsx(Text, {
+		as: "span",
+		size: textSize,
+		variant: TextVariant.TERTIARY,
+		children: "—"
+	});
+	const isNumeric = typeof value === "number" || typeof value === "bigint";
+	let text;
+	if (typeof value === "number") text = formatNumber(value);
+	else if (typeof value === "bigint") text = value.toLocaleString();
+	else if (typeof value === "boolean") text = value ? "Yes" : "No";
+	else if (value instanceof Date) text = new Intl.DateTimeFormat(void 0, DATE_FORMAT_OPTIONS).format(value);
+	else text = String(value);
+	return /* @__PURE__ */ jsx(Text, {
+		as: "span",
+		size: textSize,
+		lineClamp: 1,
+		shouldTooltipOnOverflow: true,
+		className: CELL_TEXT_CSS,
+		...isNumeric ? { family: FontFamily.MONO } : {},
+		children: text
+	});
+}
+/** @internal One column header: label (sort / drag button), sort icon, column actions, resize handle. */
+function TableHeaderCell({ resolved, metrics, sortState, isCustomizable, width, dropEdge, isDragged, colIndex, onSortPress, onResize, onLabelKeyDown, onLabelPointerDown, onLabelPointerMove, onLabelPointerUp, onLabelPointerCancel, onLabelClickCapture, registerCell, registerButton }) {
+	const { column, pin, isPinEdge, canResize, minWidth, maxWidth, cellStyle } = resolved;
+	const align = column.align ?? "left";
+	const canSort = column.canSort === true;
+	const isButton = canSort || isCustomizable;
+	const hasActions = column.actions !== void 0 && column.actions !== null;
+	const id = column.id;
+	const cellRef = useCallback((element) => registerCell(id, element), [id, registerCell]);
+	const buttonRef = useCallback((element) => registerButton(id, element), [id, registerButton]);
+	const sortIcon = sortState === void 0 ? null : /* @__PURE__ */ jsx(Icon, {
+		component: sortState === "ascending" ? ArrowUpIcon : sortState === "descending" ? ArrowDownIcon : ArrowsDownUpIcon,
+		size: metrics.headerIconPx,
+		variant: sortState === "none" ? IconVariant.TERTIARY : IconVariant.SECONDARY,
+		"aria-hidden": true
+	});
+	const label = /* @__PURE__ */ jsx(Text, {
+		as: "span",
+		size: metrics.textSize,
+		weight: TextWeight.MEDIUM,
+		variant: TextVariant.TERTIARY,
+		lineClamp: 1,
+		shouldTooltipOnOverflow: true,
+		className: CELL_TEXT_CSS,
+		children: column.header
+	});
+	const labelClassName = cx(COLUMN_ALIGN_TO_CSS_MAP[align], hasActions && LABEL_GROW_CSS);
+	return /* @__PURE__ */ jsxs(HeaderCell, {
+		ref: cellRef,
+		role: "columnheader",
+		...sortState === void 0 ? {} : { "aria-sort": sortState },
+		...colIndex === void 0 ? {} : { "aria-colindex": colIndex },
+		className: cx(COLUMN_ALIGN_TO_CSS_MAP[align], pin !== void 0 && PIN_TO_CSS_MAP[pin], pin !== void 0 && PINNED_HEADER_CSS, pin !== void 0 && isPinEdge && PIN_TO_EDGE_CSS_MAP[pin], canResize && HEADER_HOVER_CSS, isDragged && HEADER_DRAGGING_CSS),
+		style: cellStyle,
+		children: [
+			isButton ? /* @__PURE__ */ jsxs(HeaderButton, {
+				ref: buttonRef,
+				type: "button",
+				className: labelClassName,
+				onClick: canSort ? () => onSortPress(id) : void 0,
+				onClickCapture: onLabelClickCapture,
+				onKeyDown: (event) => onLabelKeyDown(id, event),
+				...isCustomizable && pin === void 0 ? {
+					onPointerDown: (event) => onLabelPointerDown(id, event),
+					onPointerMove: onLabelPointerMove,
+					onPointerUp: onLabelPointerUp,
+					onPointerCancel: onLabelPointerCancel
+				} : {},
+				children: [label, sortIcon]
+			}) : /* @__PURE__ */ jsxs(HeaderLabel, {
+				className: labelClassName,
+				children: [label, sortIcon]
+			}),
+			hasActions && /* @__PURE__ */ jsx(Menu, {
+				trigger: /* @__PURE__ */ jsx(Button, {
+					icon: DotsThreeVerticalIcon,
+					variant: ButtonVariant.TERTIARY,
+					size: metrics.buttonSize,
+					ariaLabel: `${column.header} column actions`
+				}),
+				size: metrics.menuSize,
+				placement: Placement.BOTTOM_END,
+				children: column.actions
+			}),
+			canResize && /* @__PURE__ */ jsx(ResizeHandle, {
+				orientation: Orientation.VERTICAL,
+				value: width,
+				min: minWidth,
+				max: maxWidth,
+				onChange: (next) => onResize(id, next),
+				ariaLabel: `Resize ${column.header} column`,
+				className: COLUMN_RESIZE_HANDLE_CSS
+			}),
+			dropEdge !== null && /* @__PURE__ */ jsx(DropIndicator, {
+				"aria-hidden": true,
+				className: dropEdge === "start" ? DROP_START_CSS : DROP_END_CSS
+			})
+		]
+	});
+}
+/** @internal The trailing corner's Columns menu: show / hide each column, reset the layout. */
+function TableColumnsMenu({ entries, metrics, onToggle, onReset }) {
+	return /* @__PURE__ */ jsxs(Menu, {
+		trigger: /* @__PURE__ */ jsx(Button, {
+			icon: SlidersHorizontalIcon,
+			variant: ButtonVariant.TERTIARY,
+			size: metrics.buttonSize,
+			ariaLabel: "Columns"
+		}),
+		size: metrics.menuSize,
+		placement: Placement.BOTTOM_END,
+		children: [
+			/* @__PURE__ */ jsx(MenuGroup, {
+				label: "Columns",
+				children: entries.map((entry) => /* @__PURE__ */ jsx(MenuCheckboxItem, {
+					label: entry.header,
+					isChecked: entry.isVisible,
+					onChange: (isChecked) => onToggle(entry.id, isChecked),
+					isDisabled: entry.disabledReason !== void 0,
+					...entry.disabledReason === void 0 ? {} : { disabledReason: entry.disabledReason }
+				}, entry.id))
+			}),
+			/* @__PURE__ */ jsx(MenuSeparator, {}),
+			/* @__PURE__ */ jsx(MenuItem, {
+				label: "Reset columns",
+				onSelect: onReset
+			})
+		]
+	});
+}
+/** Spread on a built-in control outside the roving row: reachable by pointer, not by Tab. */
+var UNTABBABLE = { tabIndex: -1 };
+/** Clicks on these, inside a row, never activate the row. */
+var INTERACTIVE_SELECTOR = "a[href], button, input, select, textarea, [role=\"button\"], [role=\"link\"], [role=\"checkbox\"]";
+/** @internal One body row with its synthetic and data cells. Memoized: every prop is stable or primitive. */
+var TableBodyRow = memo(function TableBodyRow({ row, rowIndex, rowId, columns, metrics, callbacks, cellRole, isFocusable, isTabStop, isClickable, isBorderless, isActive, isSelected, hasExpandColumn, isExpanded, panelId, hasTrailingColumn, isActionsOpen, ariaRowIndex, hasColIndex, className, style }) {
+	const shiftRef = useRef(false);
+	const rowRef = useCallback((element) => callbacks.registerRow(rowIndex, element), [callbacks, rowIndex]);
+	const isSelectable = isSelected !== void 0;
+	const controlProps = isTabStop ? {} : UNTABBABLE;
+	const rowName = callbacks.getRowName(row, rowIndex);
+	const actions = hasTrailingColumn && callbacks.getRowActions ? callbacks.getRowActions(row, rowIndex) : null;
+	let colIndex = 0;
+	const nextColIndex = () => {
+		colIndex += 1;
+		return hasColIndex ? { "aria-colindex": colIndex } : {};
+	};
+	const handleClick = (event) => {
+		if (!isClickable || callbacks.onRowClick === void 0) return;
+		const target = event.target;
+		if (!event.currentTarget.contains(target)) return;
+		const control = target.closest(INTERACTIVE_SELECTOR);
+		if (control !== null && event.currentTarget.contains(control) && control !== event.currentTarget) return;
+		callbacks.onRowClick(row, event);
+	};
+	const handleFocus = (event) => {
+		if (!event.currentTarget.contains(event.target)) return;
+		callbacks.onRowFocus(rowIndex);
+	};
+	const handleKeyDown = (event) => {
+		if (event.target !== event.currentTarget) return;
+		callbacks.onRowKeyDown(rowIndex, event);
+	};
+	return /* @__PURE__ */ jsxs(TableRow, {
+		ref: rowRef,
+		role: "row",
+		...isFocusable ? { tabIndex: isTabStop ? 0 : -1 } : {},
+		...isSelectable ? { "aria-selected": isSelected } : {},
+		...isExpanded === void 0 ? {} : { "aria-expanded": isExpanded },
+		...isActive ? { "aria-current": true } : {},
+		...ariaRowIndex === void 0 ? {} : { "aria-rowindex": ariaRowIndex },
+		className: cx(isClickable && ROW_INTERACTIVE_CSS, isSelected === true && ROW_SELECTED_CSS, isActive && ROW_ACTIVE_CSS, isBorderless && "gx-TableCore-ROW_NO_BORDER_CSS-rpsswqs", className),
+		style,
+		onClick: handleClick,
+		onKeyDown: handleKeyDown,
+		onFocus: handleFocus,
+		children: [
+			isSelectable && /* @__PURE__ */ jsx(TableCell, {
+				role: cellRole,
+				...nextColIndex(),
+				className: cx("gx-TableCore-SYNTHETIC_CELL_CSS-s1g01kh5", PIN_TO_CSS_MAP[Side.LEFT]),
+				style: syntheticOffset(0, metrics),
+				onClickCapture: (event) => {
+					shiftRef.current = event.shiftKey;
+				},
+				onClick: (event) => event.stopPropagation(),
+				children: /* @__PURE__ */ jsx(CheckboxInput, {
+					size: metrics.checkboxSize,
+					isChecked: isSelected,
+					onChange: () => {
+						callbacks.onToggleSelect(rowId, shiftRef.current);
+						shiftRef.current = false;
+					},
+					ariaLabel: `Select ${rowName}`,
+					...controlProps
+				})
+			}),
+			hasExpandColumn && /* @__PURE__ */ jsx(TableCell, {
+				role: cellRole,
+				...nextColIndex(),
+				className: cx("gx-TableCore-SYNTHETIC_CELL_CSS-s1g01kh5", PIN_TO_CSS_MAP[Side.LEFT]),
+				style: syntheticOffset(isSelectable ? 1 : 0, metrics),
+				onClick: (event) => event.stopPropagation(),
+				children: isExpanded !== void 0 && /* @__PURE__ */ jsx(Button, {
+					variant: ButtonVariant.TERTIARY,
+					size: metrics.buttonSize,
+					leading: /* @__PURE__ */ jsx(Rotate, {
+						isRotated: isExpanded,
+						deg: 90,
+						children: /* @__PURE__ */ jsx(Icon, {
+							component: CaretRightIcon,
+							size: metrics.caretPx,
+							variant: IconVariant.INHERIT
+						})
+					}),
+					ariaLabel: isExpanded ? "Collapse row" : "Expand row",
+					"aria-expanded": isExpanded,
+					...isExpanded && panelId !== void 0 ? { "aria-controls": panelId } : {},
+					onClick: () => callbacks.onToggleExpand(rowId),
+					className: EXPAND_BUTTON_CSS,
+					...controlProps
+				})
+			}),
+			columns.map((resolved) => {
+				const { column, pin, isPinEdge, cellStyle } = resolved;
+				const value = column.accessor?.(row);
+				const content = column.cell ? column.cell({
+					value,
+					row,
+					rowIndex,
+					rowId
+				}) : /* @__PURE__ */ jsx(TableCellText, {
+					value,
+					textSize: metrics.textSize
+				});
+				return /* @__PURE__ */ jsx(TableCell, {
+					role: column.isRowHeader === true ? "rowheader" : cellRole,
+					...nextColIndex(),
+					className: cx(COLUMN_ALIGN_TO_CSS_MAP[column.align ?? "left"], pin !== void 0 && PIN_TO_CSS_MAP[pin], pin !== void 0 && isPinEdge && PIN_TO_EDGE_CSS_MAP[pin]),
+					style: cellStyle,
+					children: content
+				}, column.id);
+			}),
+			hasTrailingColumn && /* @__PURE__ */ jsx(TableCell, {
+				role: cellRole,
+				...nextColIndex(),
+				className: cx("gx-TableCore-SYNTHETIC_CELL_CSS-s1g01kh5", PIN_TO_CSS_MAP[Side.RIGHT]),
+				style: syntheticOffset(0, metrics),
+				children: actions !== null && actions !== void 0 && /* @__PURE__ */ jsx(Menu, {
+					isOpen: isActionsOpen,
+					onOpenChange: (isOpen) => callbacks.onActionsOpenChange(rowId, isOpen),
+					trigger: /* @__PURE__ */ jsx(Button, {
+						icon: DotsThreeIcon,
+						variant: ButtonVariant.TERTIARY,
+						size: metrics.buttonSize,
+						ariaLabel: `Actions for ${rowName}`,
+						...controlProps
+					}),
+					size: metrics.menuSize,
+					placement: Placement.BOTTOM_END,
+					children: actions
+				})
+			})
+		]
+	});
+});
+/** The pinned offset of the k-th synthetic column from its edge. */
+function syntheticOffset(index, metrics) {
+	return { "--gx-table-cell-offset": `${index * metrics.rowHeightPx}px` };
+}
+/** @internal A placeholder row: a text skeleton in each data cell, synthetic cells empty. */
+function TableSkeletonRow({ columns, metrics, leadingCount, hasTrailingColumn, isBorderless, ariaRowIndex, pending, className, style }) {
+	return /* @__PURE__ */ jsxs(TableRow, {
+		role: "row",
+		...pending === void 0 ? { "aria-hidden": true } : {
+			ref: pending.rowRef,
+			"aria-busy": true,
+			tabIndex: pending.isTabStop ? 0 : -1,
+			onKeyDown: (event) => {
+				if (event.target === event.currentTarget) pending.onKeyDown(event);
+			},
+			onFocus: pending.onFocus
+		},
+		...ariaRowIndex === void 0 ? {} : { "aria-rowindex": ariaRowIndex },
+		className: cx(isBorderless && "gx-TableCore-ROW_NO_BORDER_CSS-rpsswqs", className),
+		style,
+		children: [
+			Array.from({ length: leadingCount }, (_, index) => /* @__PURE__ */ jsx(TableCell, {
+				role: "cell",
+				className: cx(SYNTHETIC_CELL_CSS, PIN_TO_CSS_MAP[Side.LEFT]),
+				style: syntheticOffset(index, metrics)
+			}, `leading-${index}`)),
+			columns.map(({ column, pin, isPinEdge, cellStyle }) => /* @__PURE__ */ jsx(TableCell, {
+				role: "cell",
+				className: cx(pin !== void 0 && PIN_TO_CSS_MAP[pin], pin !== void 0 && isPinEdge && PIN_TO_EDGE_CSS_MAP[pin]),
+				style: cellStyle,
+				children: /* @__PURE__ */ jsx(Skeleton, {
+					variant: SkeletonVariant.TEXT,
+					size: metrics.skeletonSize
+				})
+			}, column.id)),
+			hasTrailingColumn && /* @__PURE__ */ jsx(TableCell, {
+				role: "cell",
+				className: cx("gx-TableCore-SYNTHETIC_CELL_CSS-s1g01kh5", PIN_TO_CSS_MAP[Side.RIGHT]),
+				style: syntheticOffset(0, metrics)
+			})
+		]
+	});
+}
+/** @internal An expanded row's panel, under its row, as wide as the visible area. */
+function TableExpandedRow({ panelId, colSpan, gutterPx, isLast, children }) {
+	const variables = { "--gx-table-expanded-gutter": `${gutterPx}px` };
+	return /* @__PURE__ */ jsx(ExpandedRowElement, {
+		role: "row",
+		className: cx(isLast && EXPANDED_LAST_CSS),
+		children: /* @__PURE__ */ jsx(ExpandedCell, {
+			role: "cell",
+			colSpan,
+			children: /* @__PURE__ */ jsxs(ExpandedViewport, {
+				style: variables,
+				children: [/* @__PURE__ */ jsx(ExpandedGutter, {}), /* @__PURE__ */ jsx(ExpandedBody, {
+					id: panelId,
+					children
+				})]
+			})
+		})
+	});
+}
+/** The panel surfaces an ancestor may paint, matched by color so the table follows theme switches. */
+var SURFACE_TOKENS = [
+	t.color.background.base,
+	t.color.background.primary,
+	t.color.background.secondary,
+	t.color.background.tertiary,
+	t.color.text.primary
+];
+var isTransparentColor = (color) => color === "" || color === "transparent" || /^rgba\(.*,\s*0\)$/.test(color);
+/**
+* `null` when the parent paints a surface (the root inherits it); otherwise the value for
+* `--gx-table-surface`: the nearest painted ancestor below the theme root, as its background token
+* when its color matches one (so a theme switch needs no re-measure), else its computed color;
+* `background.base` when nothing below the theme root paints.
+*
+* Measured in a passive effect, after every layout effect of the commit: the unscoped
+* GalaxyProvider writes `data-gx-theme` on <html> in its own layout effect, which runs after its
+* children's, so a layout-effect measurement on the first commit would see unthemed surfaces.
+* Re-measured when a theme attribute changes anywhere, when an ancestor's `class` or
+* `style` changes, and when an ancestor's background transition ends.
+*/
+function useTableSurface(rootRef) {
+	const [surface, setSurface] = useState(null);
+	useEffect(() => {
+		const root = rootRef.current;
+		if (root === null || typeof window === "undefined") return;
+		let normalizer;
+		const normalize = (color) => {
+			if (normalizer === void 0) try {
+				normalizer = document.createElement("canvas").getContext("2d");
+			} catch {
+				normalizer = null;
+			}
+			if (normalizer === null) return null;
+			normalizer.fillStyle = "transparent";
+			normalizer.fillStyle = color;
+			return normalizer.fillStyle;
+		};
+		const ancestors = () => {
+			const list = [];
+			const themeRoot = root.parentElement?.closest("[data-gx-theme]") ?? null;
+			for (let node = root.parentElement; node !== null && node !== themeRoot;) {
+				list.push(node);
+				node = node.parentElement;
+			}
+			return list;
+		};
+		const measure = () => {
+			const painted = ancestors().find((element) => !isTransparentColor(getComputedStyle(element).backgroundColor));
+			if (painted !== void 0 && painted === root.parentElement) {
+				setSurface(null);
+				return;
+			}
+			if (painted === void 0) {
+				setSurface(t.color.background.base);
+				return;
+			}
+			const styles = getComputedStyle(painted);
+			const color = normalize(styles.backgroundColor);
+			setSurface(SURFACE_TOKENS.find((candidate) => {
+				const name = /^var\((--[\w-]+)\)$/.exec(candidate)?.[1];
+				if (name === void 0 || color === null) return false;
+				const value = styles.getPropertyValue(name).trim();
+				return value !== "" && normalize(value) === color;
+			}) ?? styles.backgroundColor);
+		};
+		measure();
+		if (typeof MutationObserver === "undefined") return;
+		const observer = new MutationObserver(measure);
+		observer.observe(document.documentElement, {
+			attributes: true,
+			attributeFilter: ["data-gx-theme"],
+			subtree: true
+		});
+		for (const element of ancestors()) observer.observe(element, {
+			attributes: true,
+			attributeFilter: ["class", "style"]
+		});
+		const onTransitionEnd = (event) => {
+			const target = event.target;
+			if (target instanceof Node && target !== root && target.contains(root) && event.propertyName.startsWith("background")) measure();
+		};
+		document.addEventListener("transitionend", onTransitionEnd);
+		return () => {
+			observer.disconnect();
+			document.removeEventListener("transitionend", onTransitionEnd);
+		};
+	}, [rootRef]);
+	return surface;
+}
+/** Root → scroll container → table (header, body, status, footer) → sentinel → live region. */
+function TableFrame({ metrics, columnLayout, leadingHeaders, trailingHeader, hasTrailingColumn, sort, onSortPress, canCustomizeColumns, rowCount, isLoading, error, emptyState, onEndReached, role, ariaLabel, tableAria, isMultiselectable, ariaRowCount, rootRef, scrollRef, rootProps, className, style, bodyClassName, bodyStyle, announcement, trailingClassName, children }) {
+	const { visibleColumns } = columnLayout;
+	const ownRootRef = useRef(null);
+	const mergedRootRef = useMergeRefs([ownRootRef, rootRef]);
+	const hasColIndex = ariaRowCount !== void 0;
+	const leadingCount = leadingHeaders.length;
+	const colCount = leadingCount + visibleColumns.length + (hasTrailingColumn ? 1 : 0);
+	const surface = useTableSurface(ownRootRef);
+	const { width: viewportWidth } = useElementClientSize(scrollRef);
+	const sentinelRef = useInfiniteScrollSentinel({
+		scrollRef,
+		onEndReached,
+		isEnabled: !isLoading && error === void 0,
+		rowCount,
+		marginPx: 500
+	});
+	const [message, setMessage] = useState("");
+	useEffect(() => {
+		if (announcement !== void 0 && announcement !== "") setMessage(announcement);
+	}, [announcement]);
+	const headerCellsRef = useRef(/* @__PURE__ */ new Map());
+	const headerButtonsRef = useRef(/* @__PURE__ */ new Map());
+	const { registerHeaderCell } = columnLayout;
+	const registerCell = useCallback((columnId, element) => {
+		if (element === null) headerCellsRef.current.delete(columnId);
+		else headerCellsRef.current.set(columnId, element);
+		registerHeaderCell(columnId, element);
+	}, [registerHeaderCell]);
+	const registerButton = useCallback((columnId, element) => {
+		if (element === null) headerButtonsRef.current.delete(columnId);
+		else headerButtonsRef.current.set(columnId, element);
+	}, []);
+	const [pendingFocusId, setPendingFocusId] = useState(null);
+	useIsomorphicLayoutEffect(() => {
+		if (pendingFocusId === null) return;
+		headerButtonsRef.current.get(pendingFocusId)?.focus();
+		setPendingFocusId(null);
+	}, [pendingFocusId]);
+	const dragRef = useRef(null);
+	const suppressClickRef = useRef(false);
+	const [drag, setDrag] = useState(null);
+	const unpinnedIds = visibleColumns.filter((entry) => entry.pin === void 0).map((entry) => entry.column.id);
+	const unpinnedRef = useRef(unpinnedIds);
+	unpinnedRef.current = unpinnedIds;
+	const cancelDrag = useCallback(() => {
+		dragRef.current = null;
+		setDrag(null);
+	}, []);
+	useEffect(() => {
+		if (drag === null) return;
+		const handleKey = (event) => {
+			if (event.key !== "Escape") return;
+			event.preventDefault();
+			event.stopPropagation();
+			suppressClickRef.current = true;
+			cancelDrag();
+		};
+		window.addEventListener("keydown", handleKey, true);
+		return () => window.removeEventListener("keydown", handleKey, true);
+	}, [drag, cancelDrag]);
+	/** The unpinned column the pointer would drop before (`null`: after the last). */
+	const hitTest = (clientX) => {
+		for (const columnId of unpinnedRef.current) {
+			const rect = headerCellsRef.current.get(columnId)?.getBoundingClientRect();
+			if (rect !== void 0 && clientX < rect.left + rect.width / 2) return columnId;
+		}
+		return null;
+	};
+	const onLabelPointerDown = (columnId, event) => {
+		if (event.pointerType === "mouse" && event.button !== 0) return;
+		dragRef.current = {
+			pointerId: event.pointerId,
+			columnId,
+			startX: event.clientX,
+			isDragging: false,
+			beforeId: void 0
+		};
+	};
+	const onLabelPointerMove = (event) => {
+		const current = dragRef.current;
+		if (current === null || current.pointerId !== event.pointerId) return;
+		if (!current.isDragging) {
+			if (Math.abs(event.clientX - current.startX) <= TABLE_DRAG_THRESHOLD_PX) return;
+			current.isDragging = true;
+			event.currentTarget.setPointerCapture(event.pointerId);
+		}
+		const beforeId = hitTest(event.clientX);
+		if (beforeId !== current.beforeId) {
+			current.beforeId = beforeId;
+			setDrag({
+				columnId: current.columnId,
+				beforeId
+			});
+		}
+	};
+	const onLabelPointerUp = (event) => {
+		const current = dragRef.current;
+		if (current !== null && current.pointerId === event.pointerId) {
+			if (current.isDragging) {
+				suppressClickRef.current = true;
+				if (current.beforeId !== void 0) columnLayout.moveColumnBefore(current.columnId, current.beforeId);
+			}
+			cancelDrag();
+		}
+		if (suppressClickRef.current) window.setTimeout(() => {
+			suppressClickRef.current = false;
+		}, 0);
+	};
+	const onLabelPointerCancel = (event) => {
+		if (dragRef.current?.pointerId === event.pointerId) cancelDrag();
+	};
+	const onLabelClickCapture = (event) => {
+		if (!suppressClickRef.current) return;
+		suppressClickRef.current = false;
+		event.preventDefault();
+		event.stopPropagation();
+	};
+	const onLabelKeyDown = (columnId, event) => {
+		if (!canCustomizeColumns || !event.altKey) return;
+		if (event.key !== "ArrowLeft" && event.key !== "ArrowRight") return;
+		event.preventDefault();
+		const position = columnLayout.moveColumnBy(columnId, event.key === "ArrowLeft" ? -1 : 1);
+		if (position === null) return;
+		setMessage(`Moved ${visibleColumns.find((entry) => entry.column.id === columnId)?.column.header ?? ""} to column ${position} of ${visibleColumns.length}`);
+		setPendingFocusId(columnId);
+	};
+	/** Drop indicator edge for each column while dragging. */
+	const dropEdgeFor = (columnId) => {
+		if (drag === null || drag.columnId === columnId) return null;
+		const ids = unpinnedIds;
+		const fromIndex = ids.indexOf(drag.columnId);
+		const toIndex = drag.beforeId === null ? ids.length : ids.indexOf(drag.beforeId);
+		if (toIndex === fromIndex || toIndex === fromIndex + 1) return null;
+		if (drag.beforeId === columnId) return "start";
+		if (drag.beforeId === null && ids.at(-1) === columnId) return "end";
+		return null;
+	};
+	const hasFooter = visibleColumns.some(({ column }) => column.footer !== void 0 && column.footer !== null);
+	const footerRowIndex = ariaRowCount;
+	const variables = { ...columnLayout.variables };
+	if (viewportWidth !== void 0) variables["--gx-table-viewport-width"] = `${viewportWidth}px`;
+	if (hasFooter) variables["--gx-table-footer-height"] = "var(--gx-table-header-height)";
+	if (surface !== null) variables["--gx-table-surface"] = surface;
+	let status = null;
+	if (rowCount === 0 && isLoading) status = Array.from({ length: 5 }, (_, index) => /* @__PURE__ */ jsx(TableSkeletonRow, {
+		columns: visibleColumns,
+		metrics,
+		leadingCount,
+		hasTrailingColumn,
+		isBorderless: index === 4
+	}, `skeleton-${index}`));
+	else if (rowCount === 0) status = /* @__PURE__ */ jsx(StatusRowElement, {
+		role: "row",
+		children: /* @__PURE__ */ jsx(StatusCell, {
+			role: "cell",
+			colSpan: colCount,
+			children: /* @__PURE__ */ jsx(StatusViewport, { children: error !== void 0 ? /* @__PURE__ */ jsx("div", {
+				role: "alert",
+				children: /* @__PURE__ */ jsx(EmptyState, {
+					icon: WarningCircleIcon,
+					header: "Couldn't load data",
+					description: error,
+					size: metrics.emptyStateSize
+				})
+			}) : emptyState ?? /* @__PURE__ */ jsx(EmptyState, {
+				header: "No results",
+				size: metrics.emptyStateSize,
+				role: "status"
+			}) })
+		})
+	});
+	else status = /* @__PURE__ */ jsxs(Fragment$1, { children: [isLoading && Array.from({ length: 3 }, (_, index) => /* @__PURE__ */ jsx(TableSkeletonRow, {
+		columns: visibleColumns,
+		metrics,
+		leadingCount,
+		hasTrailingColumn,
+		isBorderless: index === 2 && error === void 0
+	}, `more-${index}`)), error !== void 0 && /* @__PURE__ */ jsx(EndErrorRow, {
+		role: "row",
+		children: /* @__PURE__ */ jsx(StatusCell, {
+			role: "cell",
+			colSpan: colCount,
+			children: /* @__PURE__ */ jsxs(EndErrorViewport, {
+				role: "alert",
+				children: [/* @__PURE__ */ jsx(Icon, {
+					component: WarningCircleIcon,
+					size: metrics.headerIconPx,
+					variant: IconVariant.ERROR
+				}), /* @__PURE__ */ jsx(Text, {
+					as: "span",
+					variant: TextVariant.ERROR,
+					size: metrics.textSize,
+					children: error
+				})]
+			})
+		})
+	})] });
+	let headerColIndex = 0;
+	const nextHeaderColIndex = () => {
+		headerColIndex += 1;
+		return hasColIndex ? headerColIndex : void 0;
+	};
+	return /* @__PURE__ */ jsxs(Root, {
+		...rootProps,
+		ref: mergedRootRef,
+		className: cx(metrics.css, surface !== null && SURFACE_ANCESTOR_CSS, className),
+		style: {
+			...variables,
+			...style
+		},
+		children: [/* @__PURE__ */ jsxs(Scroll, {
+			ref: scrollRef,
+			children: [/* @__PURE__ */ jsxs(TableElement, {
+				...tableAria,
+				role,
+				...ariaLabel === void 0 ? {} : { "aria-label": ariaLabel },
+				...isLoading ? { "aria-busy": true } : {},
+				...isMultiselectable ? { "aria-multiselectable": true } : {},
+				...ariaRowCount === void 0 ? {} : {
+					"aria-rowcount": ariaRowCount,
+					"aria-colcount": colCount
+				},
+				children: [
+					/* @__PURE__ */ jsx(Head, {
+						role: "rowgroup",
+						children: /* @__PURE__ */ jsxs(HeaderRow, {
+							role: "row",
+							...hasColIndex ? { "aria-rowindex": 1 } : {},
+							children: [
+								leadingHeaders.map((content, index) => {
+									const colIndex = nextHeaderColIndex();
+									return /* @__PURE__ */ jsx(HeaderCell, {
+										role: "columnheader",
+										...colIndex === void 0 ? {} : { "aria-colindex": colIndex },
+										className: cx(SYNTHETIC_CELL_CSS, PIN_TO_CSS_MAP[Side.LEFT], PINNED_HEADER_CSS),
+										style: syntheticOffset(index, metrics),
+										children: content
+									}, `leading-${index}`);
+								}),
+								visibleColumns.map((resolved) => {
+									const { column } = resolved;
+									const isSorted = sort?.columnId === column.id;
+									return /* @__PURE__ */ jsx(TableHeaderCell, {
+										resolved,
+										metrics,
+										sortState: column.canSort === true ? isSorted ? sort?.isDescending ? "descending" : "ascending" : "none" : void 0,
+										isCustomizable: canCustomizeColumns,
+										width: resolved.canResize ? columnLayout.getColumnWidth(column.id) : 0,
+										dropEdge: dropEdgeFor(column.id),
+										isDragged: drag?.columnId === column.id && drag.beforeId !== void 0,
+										colIndex: nextHeaderColIndex(),
+										onSortPress,
+										onResize: columnLayout.resizeColumn,
+										onLabelKeyDown,
+										onLabelPointerDown,
+										onLabelPointerMove,
+										onLabelPointerUp,
+										onLabelPointerCancel,
+										onLabelClickCapture,
+										registerCell,
+										registerButton
+									}, column.id);
+								}),
+								hasTrailingColumn && (() => {
+									const colIndex = nextHeaderColIndex();
+									return /* @__PURE__ */ jsx(HeaderCell, {
+										role: "columnheader",
+										...colIndex === void 0 ? {} : { "aria-colindex": colIndex },
+										className: cx("gx-TableCore-SYNTHETIC_CELL_CSS-s1g01kh5", PIN_TO_CSS_MAP[Side.RIGHT], PINNED_HEADER_CSS, trailingClassName),
+										style: syntheticOffset(0, metrics),
+										children: trailingHeader
+									});
+								})()
+							]
+						})
+					}),
+					/* @__PURE__ */ jsx(Body, {
+						role: "rowgroup",
+						className: bodyClassName,
+						style: bodyStyle,
+						children
+					}),
+					status !== null && /* @__PURE__ */ jsx(StatusBody, {
+						role: "rowgroup",
+						children: status
+					}),
+					hasFooter && /* @__PURE__ */ jsx(Foot, {
+						role: "rowgroup",
+						children: /* @__PURE__ */ jsxs(FooterRow, {
+							role: "row",
+							...footerRowIndex === void 0 ? {} : { "aria-rowindex": footerRowIndex },
+							children: [
+								Array.from({ length: leadingCount }, (_, index) => /* @__PURE__ */ jsx(TableCell, {
+									role: "cell",
+									...hasColIndex ? { "aria-colindex": index + 1 } : {},
+									className: cx("gx-TableCore-SYNTHETIC_CELL_CSS-s1g01kh5", PIN_TO_CSS_MAP[Side.LEFT]),
+									style: syntheticOffset(index, metrics)
+								}, `leading-${index}`)),
+								visibleColumns.map(({ column, pin, isPinEdge, cellStyle, position }) => /* @__PURE__ */ jsx(TableCell, {
+									role: "cell",
+									...hasColIndex ? { "aria-colindex": leadingCount + position + 1 } : {},
+									className: cx(COLUMN_ALIGN_TO_CSS_MAP[column.align ?? "left"], pin !== void 0 && PIN_TO_CSS_MAP[pin], pin !== void 0 && isPinEdge && PIN_TO_EDGE_CSS_MAP[pin]),
+									style: cellStyle,
+									children: typeof column.footer === "string" ? /* @__PURE__ */ jsx(Text, {
+										as: "span",
+										size: metrics.textSize,
+										weight: TextWeight.MEDIUM,
+										lineClamp: 1,
+										className: "gx-TableCore-CELL_TEXT_CSS-c1emgwoo",
+										children: column.footer
+									}) : column.footer
+								}, column.id)),
+								hasTrailingColumn && /* @__PURE__ */ jsx(TableCell, {
+									role: "cell",
+									...hasColIndex ? { "aria-colindex": colCount } : {},
+									className: cx("gx-TableCore-SYNTHETIC_CELL_CSS-s1g01kh5", PIN_TO_CSS_MAP[Side.RIGHT], trailingClassName),
+									style: syntheticOffset(0, metrics)
+								})
+							]
+						})
+					})
+				]
+			}), /* @__PURE__ */ jsx(Sentinel, {
+				ref: sentinelRef,
+				"aria-hidden": "true"
+			})]
+		}), /* @__PURE__ */ jsx(VisuallyHidden, {
+			"aria-live": "polite",
+			children: message
+		})]
+	});
+}
+/** @internal Header content of the select column: the select-all checkbox. */
+function TableSelectAllCheckbox({ metrics, isChecked, isIndeterminate, isDisabled, onToggle }) {
+	return /* @__PURE__ */ jsx(CheckboxInput, {
+		size: metrics.checkboxSize,
+		isChecked,
+		isIndeterminate,
+		isDisabled,
+		onChange: onToggle,
+		ariaLabel: "Select all rows"
+	});
+}
+//#endregion
+export { CELL_TEXT_CSS, COLUMN_ALIGN_TO_CSS_MAP, PIN_TO_CSS_MAP, PIN_TO_EDGE_CSS_MAP, ROW_NO_BORDER_CSS, SYNTHETIC_CELL_CSS, TABLE_DEFAULT_MAX_COLUMN_WIDTH, TABLE_DEFAULT_MIN_COLUMN_WIDTH, TABLE_DRAG_THRESHOLD_PX, TABLE_END_REACHED_MARGIN_PX, TABLE_LARGE_METRICS, TABLE_LOADING_MORE_ROW_COUNT, TABLE_LOADING_ROW_COUNT, TABLE_MEDIUM_METRICS, TABLE_PINNED_FALLBACK_WIDTH, TABLE_SMALL_METRICS, TABLE_Z_PINNED, TableBodyRow, TableCell, TableCellText, TableColumnsMenu, TableExpandedRow, TableFrame, TableHeaderCell, TableRow, TableSelectAllCheckbox, TableSkeletonRow, VIRTUAL_BODY_CSS, VIRTUAL_OVERSCAN, VIRTUAL_ROW_CSS, isDevelopment, useIsomorphicLayoutEffect };