@galaxy-io/dls 2.8.1 → 2.10.0

package/dist/table/TableCore.js

@@ -8,13 +8,14 @@ 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, EmptyStateVariant } from "../feedback/EmptyState.js";
+import EmptyState, { EmptyStateSize } from "../feedback/EmptyState.js";
 import { useElementClientSize } from "../hooks/useElementClientSize.js";
-import { formatNumber } from "../utils/format.js";
+import { formatDate, formatNumber } from "../utils/format.js";
 import ResizeHandle from "../layout/ResizeHandle.js";
+import { useEndReached } from "../hooks/useEndReached.js";
 import CheckboxInput, { CheckboxInputSize } from "../inputs/CheckboxInput.js";
+import { ErrorStateContent } from "../layout/internal/errorState.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";
@@ -130,66 +131,72 @@ var Head = /*#__PURE__*/ styled("thead")({
 	class: "gx-TableCore-Head-hij68rq",
 	propsAsIs: false
 });
+/**
+* `hasHeader` false: the header row stays in the DOM, out of view and out of flow, so screen
+* readers keep the column names. It holds plain labels only (no sort, resize or menu buttons), so
+* nothing in it takes focus. Declared after `Head` so the hiding wins over its sticky position.
+*/
+var HIDDEN_HEAD_CSS = "gx-TableCore-HIDDEN_HEAD_CSS-h1seyvh2";
 var Body = /*#__PURE__*/ styled("tbody")({
 	name: "Body",
-	class: "gx-TableCore-Body-b1seyvh2",
+	class: "gx-TableCore-Body-bf09csv",
 	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",
+	class: "gx-TableCore-StatusBody-s1loheb3",
 	propsAsIs: false
 });
 var Foot = /*#__PURE__*/ styled("tfoot")({
 	name: "Foot",
-	class: "gx-TableCore-Foot-f1loheb3",
+	class: "gx-TableCore-Foot-f1650vjz",
 	propsAsIs: false
 });
 var HeaderRow = /*#__PURE__*/ styled("tr")({
 	name: "HeaderRow",
-	class: "gx-TableCore-HeaderRow-h1650vjz",
+	class: "gx-TableCore-HeaderRow-h3prmx7",
 	propsAsIs: false
 });
 var FooterRow = /*#__PURE__*/ styled("tr")({
 	name: "FooterRow",
-	class: "gx-TableCore-FooterRow-f3prmx7",
+	class: "gx-TableCore-FooterRow-f18zsjxh",
 	propsAsIs: false
 });
 /** @internal A body row. States are classes (`ROW_*_CSS`). */
 var TableRow = /*#__PURE__*/ styled("tr")({
 	name: "TableRow",
-	class: "gx-TableCore-TableRow-t18zsjxh",
+	class: "gx-TableCore-TableRow-t1f7xxie",
 	propsAsIs: false
 });
 /** @internal A body or footer cell. */
 var TableCell = /*#__PURE__*/ styled("td")({
 	name: "TableCell",
-	class: "gx-TableCore-TableCell-t1f7xxie",
+	class: "gx-TableCore-TableCell-t1n0v2ch",
 	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",
+	class: "gx-TableCore-HeaderCell-h1nswbdd",
 	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",
+	class: "gx-TableCore-HeaderButton-hc3y207",
 	propsAsIs: false
 });
 /** The label of a column that cannot be pressed. */
 var HeaderLabel = /*#__PURE__*/ styled("span")({
 	name: "HeaderLabel",
-	class: "gx-TableCore-HeaderLabel-hc3y207",
+	class: "gx-TableCore-HeaderLabel-h1po1i5a",
 	propsAsIs: false
 });
 /** Marks the gap a dragged column would land in. */
 var DropIndicator = /*#__PURE__*/ styled("span")({
 	name: "DropIndicator",
-	class: "gx-TableCore-DropIndicator-d1po1i5a",
+	class: "gx-TableCore-DropIndicator-dcxvgum",
 	propsAsIs: false
 });
 /**
@@ -200,102 +207,113 @@ var DropIndicator = /*#__PURE__*/ styled("span")({
 */
 var Sentinel = /*#__PURE__*/ styled("div")({
 	name: "Sentinel",
-	class: "gx-TableCore-Sentinel-scxvgum",
+	class: "gx-TableCore-Sentinel-s7ul01a",
 	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",
+	class: "gx-TableCore-StatusViewport-s1qemn2d",
 	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",
+	class: "gx-TableCore-EndErrorViewport-ejip7oh",
 	propsAsIs: false
 });
 var StatusRowElement = /*#__PURE__*/ styled("tr")({
 	name: "StatusRowElement",
-	class: "gx-TableCore-StatusRowElement-sjip7oh",
+	class: "gx-TableCore-StatusRowElement-s1cfdxs6",
 	propsAsIs: false
 });
 var StatusCell = /*#__PURE__*/ styled("td")({
 	name: "StatusCell",
-	class: "gx-TableCore-StatusCell-s1cfdxs6",
+	class: "gx-TableCore-StatusCell-slttqlf",
 	propsAsIs: false
 });
 var EndErrorRow = /*#__PURE__*/ styled("tr")({
 	name: "EndErrorRow",
-	class: "gx-TableCore-EndErrorRow-elttqlf",
+	class: "gx-TableCore-EndErrorRow-e60f67l",
 	propsAsIs: false
 });
 var ExpandedRowElement = /*#__PURE__*/ styled("tr")({
 	name: "ExpandedRowElement",
-	class: "gx-TableCore-ExpandedRowElement-e60f67l",
+	class: "gx-TableCore-ExpandedRowElement-e1xg4fvx",
 	propsAsIs: false
 });
 var ExpandedCell = /*#__PURE__*/ styled("td")({
 	name: "ExpandedCell",
-	class: "gx-TableCore-ExpandedCell-e1xg4fvx",
+	class: "gx-TableCore-ExpandedCell-e13bd0ox",
 	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",
+	class: "gx-TableCore-ExpandedViewport-enk7ldu",
 	propsAsIs: false
 });
 var ExpandedGutter = /*#__PURE__*/ styled("div")({
 	name: "ExpandedGutter",
-	class: "gx-TableCore-ExpandedGutter-enk7ldu",
+	class: "gx-TableCore-ExpandedGutter-e1yoeixn",
 	propsAsIs: false
 });
 var ExpandedBody = /*#__PURE__*/ styled("div")({
 	name: "ExpandedBody",
-	class: "gx-TableCore-ExpandedBody-e1yoeixn",
+	class: "gx-TableCore-ExpandedBody-e18ghmlo",
 	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";
+var SURFACE_ANCESTOR_CSS = "gx-TableCore-SURFACE_ANCESTOR_CSS-s1g01kh5";
+/**
+* @internal Select, expand and row-actions columns: a square of the row height, content centered.
+* At an end of the row it also holds the table's inset (`--gx-table-cell-edge`, `TABLE_INSET_CSS`).
+*/
+var SYNTHETIC_CELL_CSS = "gx-TableCore-SYNTHETIC_CELL_CSS-s1qwxx34";
 /** @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"
+	left: "gx-TableCore-left-l152j0h",
+	center: "gx-TableCore-center-c1y0un5j",
+	right: "gx-TableCore-right-r1dzycrm"
 };
 /** @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"
+	[Side.LEFT]: "gx-TableCore-Side_LEFT-s6wh2p6",
+	[Side.RIGHT]: "gx-TableCore-Side_RIGHT-s1imw0tm"
 };
 /** @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"
+	[Side.LEFT]: "gx-TableCore-Side_LEFT-s1swk4bm",
+	[Side.RIGHT]: "gx-TableCore-Side_RIGHT-s14t0x1z"
 };
 /** Pinned header cells stack above pinned body cells and the sticky header. */
-var PINNED_HEADER_CSS = "gx-TableCore-PINNED_HEADER_CSS-p14t0x1z";
+var PINNED_HEADER_CSS = "gx-TableCore-PINNED_HEADER_CSS-p1nurjwh";
 /** The row does something: pointer and a hover fill. */
-var ROW_INTERACTIVE_CSS = "gx-TableCore-ROW_INTERACTIVE_CSS-r1nurjwh";
+var ROW_INTERACTIVE_CSS = "gx-TableCore-ROW_INTERACTIVE_CSS-r1g7lrfg";
 /** 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";
+var ROW_SELECTED_CSS = "gx-TableCore-ROW_SELECTED_CSS-r10dstoh";
 /** The current row (`activeRowId`): a fill and the `text.primary` bar of active navigation. */
-var ROW_ACTIVE_CSS = "gx-TableCore-ROW_ACTIVE_CSS-r10dstoh";
+var ROW_ACTIVE_CSS = "gx-TableCore-ROW_ACTIVE_CSS-rpsswqs";
 /** @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";
+var ROW_NO_BORDER_CSS = "gx-TableCore-ROW_NO_BORDER_CSS-rwbqwrq";
 /**
 * The rows end above the bottom of the scroll box (a full-height table with a few rows): the last
 * row keeps its hairline, so the list reads as finished instead of floating in empty space. Set by
 * `useRowsEndAboveBottom`; it outranks `ROW_NO_BORDER_CSS` and the panel rule by specificity, and
 * sits inside each row's fixed height, so nothing moves when it toggles.
 */
-var ROWS_END_ABOVE_BOTTOM_CSS = "gx-TableCore-ROWS_END_ABOVE_BOTTOM_CSS-rwbqwrq";
+var ROWS_END_ABOVE_BOTTOM_CSS = "gx-TableCore-ROWS_END_ABOVE_BOTTOM_CSS-r1jxalmm";
+/**
+* `inset`: the first and last cell of every header, body and footer row pad their outer side by
+* `--gx-table-inset` and are that much wider (data columns through `useTableColumnLayout`,
+* synthetic ones through `--gx-table-cell-edge`). The rows keep the full width, so hairlines, hover
+* and selected fills and the active bar still run edge to edge, and a pinned edge column keeps its
+* inset while the table scrolls sideways.
+*/
+var TABLE_INSET_CSS = "gx-TableCore-TABLE_INSET_CSS-t1fx3qlj";
 /**
 * Whether the table's rows end above the bottom of its scroll box. The last row drops its hairline
 * only when it lands on the box's bottom edge, where the container's frame (or a scrolled table's
@@ -335,27 +353,25 @@ function useRowsEndAboveBottom(scrollRef, tableRef, isEnabled, bodyKey) {
 	return isAbove;
 }
 /** The last expanded panel: no bottom hairline. */
-var EXPANDED_LAST_CSS = "gx-TableCore-EXPANDED_LAST_CSS-e1jxalmm";
+var EXPANDED_LAST_CSS = "gx-TableCore-EXPANDED_LAST_CSS-e2nd1ne";
 /** The dragged header while reordering. 0.5 is a state, not a color token. */
-var HEADER_DRAGGING_CSS = "gx-TableCore-HEADER_DRAGGING_CSS-h1fx3qlj";
+var HEADER_DRAGGING_CSS = "gx-TableCore-HEADER_DRAGGING_CSS-harqcf0";
 /** The label wrapper grows when a trailing control (column actions) follows it. */
-var LABEL_GROW_CSS = "gx-TableCore-LABEL_GROW_CSS-l2nd1ne";
-var DROP_START_CSS = "gx-TableCore-DROP_START_CSS-darqcf0";
-var DROP_END_CSS = "gx-TableCore-DROP_END_CSS-d132cb1v";
+var LABEL_GROW_CSS = "gx-TableCore-LABEL_GROW_CSS-l132cb1v";
+var DROP_START_CSS = "gx-TableCore-DROP_START_CSS-d1vn45v6";
+var DROP_END_CSS = "gx-TableCore-DROP_END_CSS-d14za3v2";
 /** Shows on hover, while dragged and on keyboard focus; straddles the column edge. */
-var COLUMN_RESIZE_HANDLE_CSS = "gx-TableCore-COLUMN_RESIZE_HANDLE_CSS-c1vn45v6";
+var COLUMN_RESIZE_HANDLE_CSS = "gx-TableCore-COLUMN_RESIZE_HANDLE_CSS-c1w0t3ir";
 /** Hovering a header cell reveals its resize handle. */
-var HEADER_HOVER_CSS = "gx-TableCore-HEADER_HOVER_CSS-h14za3v2";
+var HEADER_HOVER_CSS = "gx-TableCore-HEADER_HOVER_CSS-hb9km4t";
 /** The expand caret button: a square of its rung. */
-var EXPAND_BUTTON_CSS = "gx-TableCore-EXPAND_BUTTON_CSS-e1w0t3ir";
+var EXPAND_BUTTON_CSS = "gx-TableCore-EXPAND_BUTTON_CSS-e1emgwoo";
 /** @internal A virtual body: as tall as every row, which are positioned inside it. */
-var VIRTUAL_BODY_CSS = "gx-TableCore-VIRTUAL_BODY_CSS-vb9km4t";
+var VIRTUAL_BODY_CSS = "gx-TableCore-VIRTUAL_BODY_CSS-vw38cm1";
 /** @internal A virtual row, placed at `--gx-table-row-start`. */
-var VIRTUAL_ROW_CSS = "gx-TableCore-VIRTUAL_ROW_CSS-v1emgwoo";
+var VIRTUAL_ROW_CSS = "gx-TableCore-VIRTUAL_ROW_CSS-v1n5u17i";
 /** @internal Default cells and footer strings: shrink to truncate. */
-var CELL_TEXT_CSS = "gx-TableCore-CELL_TEXT_CSS-cw38cm1";
-/** "Oct 3, 2026": the DateInput default. */
-var DATE_FORMAT_OPTIONS = { dateStyle: "medium" };
+var CELL_TEXT_CSS = "gx-TableCore-CELL_TEXT_CSS-cngkatk";
 /** @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, {
@@ -366,10 +382,9 @@ function TableCellText({ value, textSize }) {
 	});
 	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();
+	if (typeof value === "number" || typeof value === "bigint") text = formatNumber(value);
 	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 if (value instanceof Date) text = formatDate(value);
 	else text = String(value);
 	return /* @__PURE__ */ jsx(Text, {
 		as: "span",
@@ -532,7 +547,7 @@ var TableBodyRow = memo(function TableBodyRow({ row, rowIndex, rowId, columns, m
 		...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),
+		className: cx(isClickable && ROW_INTERACTIVE_CSS, isSelected === true && ROW_SELECTED_CSS, isActive && ROW_ACTIVE_CSS, isBorderless && "gx-TableCore-ROW_NO_BORDER_CSS-rwbqwrq", className),
 		style,
 		onClick: handleClick,
 		onKeyDown: handleKeyDown,
@@ -541,7 +556,7 @@ var TableBodyRow = memo(function TableBodyRow({ row, rowIndex, rowId, columns, m
 			isSelectable && /* @__PURE__ */ jsx(TableCell, {
 				role: cellRole,
 				...nextColIndex(),
-				className: cx("gx-TableCore-SYNTHETIC_CELL_CSS-s1g01kh5", PIN_TO_CSS_MAP[Side.LEFT]),
+				className: cx("gx-TableCore-SYNTHETIC_CELL_CSS-s1qwxx34", PIN_TO_CSS_MAP[Side.LEFT]),
 				style: syntheticOffset(0, metrics),
 				onClickCapture: (event) => {
 					shiftRef.current = event.shiftKey;
@@ -561,7 +576,7 @@ var TableBodyRow = memo(function TableBodyRow({ row, rowIndex, rowId, columns, m
 			hasExpandColumn && /* @__PURE__ */ jsx(TableCell, {
 				role: cellRole,
 				...nextColIndex(),
-				className: cx("gx-TableCore-SYNTHETIC_CELL_CSS-s1g01kh5", PIN_TO_CSS_MAP[Side.LEFT]),
+				className: cx("gx-TableCore-SYNTHETIC_CELL_CSS-s1qwxx34", PIN_TO_CSS_MAP[Side.LEFT]),
 				style: syntheticOffset(isSelectable ? 1 : 0, metrics),
 				onClick: (event) => event.stopPropagation(),
 				children: isExpanded !== void 0 && /* @__PURE__ */ jsx(Button, {
@@ -607,7 +622,7 @@ var TableBodyRow = memo(function TableBodyRow({ row, rowIndex, rowId, columns, m
 			hasTrailingColumn && /* @__PURE__ */ jsx(TableCell, {
 				role: cellRole,
 				...nextColIndex(),
-				className: cx("gx-TableCore-SYNTHETIC_CELL_CSS-s1g01kh5", PIN_TO_CSS_MAP[Side.RIGHT]),
+				className: cx("gx-TableCore-SYNTHETIC_CELL_CSS-s1qwxx34", PIN_TO_CSS_MAP[Side.RIGHT]),
 				style: syntheticOffset(0, metrics),
 				children: actions !== null && actions !== void 0 && /* @__PURE__ */ jsx(Menu, {
 					isOpen: isActionsOpen,
@@ -627,9 +642,9 @@ var TableBodyRow = memo(function TableBodyRow({ row, rowIndex, rowId, columns, m
 		]
 	});
 });
-/** The pinned offset of the k-th synthetic column from its edge. */
+/** The pinned offset of the k-th synthetic column from its edge (past the inset of the edge cell before it). */
 function syntheticOffset(index, metrics) {
-	return { "--gx-table-cell-offset": `${index * metrics.rowHeightPx}px` };
+	return { "--gx-table-cell-offset": index === 0 ? "0px" : `calc(${index * metrics.rowHeightPx}px + var(--gx-table-inset, 0px))` };
 }
 /** @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 }) {
@@ -645,7 +660,7 @@ function TableSkeletonRow({ columns, metrics, leadingCount, hasTrailingColumn, i
 			onFocus: pending.onFocus
 		},
 		...ariaRowIndex === void 0 ? {} : { "aria-rowindex": ariaRowIndex },
-		className: cx(isBorderless && "gx-TableCore-ROW_NO_BORDER_CSS-rpsswqs", className),
+		className: cx(isBorderless && "gx-TableCore-ROW_NO_BORDER_CSS-rwbqwrq", className),
 		style,
 		children: [
 			Array.from({ length: leadingCount }, (_, index) => /* @__PURE__ */ jsx(TableCell, {
@@ -664,7 +679,7 @@ function TableSkeletonRow({ columns, metrics, leadingCount, hasTrailingColumn, i
 			}, column.id)),
 			hasTrailingColumn && /* @__PURE__ */ jsx(TableCell, {
 				role: "cell",
-				className: cx("gx-TableCore-SYNTHETIC_CELL_CSS-s1g01kh5", PIN_TO_CSS_MAP[Side.RIGHT]),
+				className: cx("gx-TableCore-SYNTHETIC_CELL_CSS-s1qwxx34", PIN_TO_CSS_MAP[Side.RIGHT]),
 				style: syntheticOffset(0, metrics)
 			})
 		]
@@ -672,7 +687,7 @@ function TableSkeletonRow({ columns, metrics, leadingCount, hasTrailingColumn, i
 }
 /** @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` };
+	const variables = { "--gx-table-expanded-gutter": `calc(${gutterPx}px + var(--gx-table-inset, 0px))` };
 	return /* @__PURE__ */ jsx(ExpandedRowElement, {
 		role: "row",
 		className: cx(isLast && EXPANDED_LAST_CSS),
@@ -780,7 +795,7 @@ function useTableSurface(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 }) {
+function TableFrame({ metrics, hasHeader = true, 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]);
@@ -792,11 +807,11 @@ function TableFrame({ metrics, columnLayout, leadingHeaders, trailingHeader, has
 	const tableRef = useRef(null);
 	const hasFooterRow = columnLayout.visibleColumns.some(({ column }) => column.footer !== void 0 && column.footer !== null);
 	const doRowsEndAboveBottom = useRowsEndAboveBottom(scrollRef, tableRef, !hasFooterRow && (rowCount > 0 || isLoading), `${rowCount}:${isLoading}:${error ?? ""}`);
-	const sentinelRef = useInfiniteScrollSentinel({
+	const sentinelRef = useEndReached({
 		scrollRef,
 		onEndReached,
 		isEnabled: !isLoading && error === void 0,
-		rowCount,
+		itemCount: rowCount,
 		marginPx: 500
 	});
 	const [message, setMessage] = useState("");
@@ -925,6 +940,7 @@ function TableFrame({ metrics, columnLayout, leadingHeaders, trailingHeader, has
 	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 (!hasHeader) variables["--gx-table-header-scroll-padding"] = "0px";
 	if (surface !== null) variables["--gx-table-surface"] = surface;
 	let status = null;
 	if (rowCount === 0 && isLoading) status = Array.from({ length: 5 }, (_, index) => /* @__PURE__ */ jsx(TableSkeletonRow, {
@@ -939,15 +955,10 @@ function TableFrame({ metrics, columnLayout, leadingHeaders, trailingHeader, has
 		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,
-					variant: EmptyStateVariant.ERROR
-				})
+			children: /* @__PURE__ */ jsx(StatusViewport, { children: error !== void 0 ? /* @__PURE__ */ jsx(ErrorStateContent, {
+				size: metrics.emptyStateSize,
+				header: "Couldn't load data",
+				description: error
 			}) : emptyState ?? /* @__PURE__ */ jsx(EmptyState, {
 				header: "No results",
 				size: metrics.emptyStateSize,
@@ -986,10 +997,18 @@ function TableFrame({ metrics, columnLayout, leadingHeaders, trailingHeader, has
 		headerColIndex += 1;
 		return hasColIndex ? headerColIndex : void 0;
 	};
+	const hiddenHeaderCells = hasHeader ? null : Array.from({ length: colCount }, (_, index) => {
+		const column = visibleColumns[index - leadingCount]?.column;
+		return /* @__PURE__ */ jsx(HeaderCell, {
+			role: "columnheader",
+			...hasColIndex ? { "aria-colindex": index + 1 } : {},
+			children: column?.header
+		}, column?.id ?? `synthetic-${index}`);
+	});
 	return /* @__PURE__ */ jsxs(Root, {
 		...rootProps,
 		ref: mergedRootRef,
-		className: cx(metrics.css, surface !== null && SURFACE_ANCESTOR_CSS, className),
+		className: cx(metrics.css, surface !== null && SURFACE_ANCESTOR_CSS, columnLayout.variables["--gx-table-inset"] !== void 0 && TABLE_INSET_CSS, className),
 		style: {
 			...variables,
 			...style
@@ -1011,21 +1030,23 @@ function TableFrame({ metrics, columnLayout, leadingHeaders, trailingHeader, has
 				children: [
 					/* @__PURE__ */ jsx(Head, {
 						role: "rowgroup",
+						className: cx(!hasHeader && HIDDEN_HEAD_CSS),
 						children: /* @__PURE__ */ jsxs(HeaderRow, {
 							role: "row",
 							...hasColIndex ? { "aria-rowindex": 1 } : {},
 							children: [
-								leadingHeaders.map((content, index) => {
+								!hasHeader && hiddenHeaderCells,
+								hasHeader && 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),
+										className: cx("gx-TableCore-SYNTHETIC_CELL_CSS-s1qwxx34", PIN_TO_CSS_MAP[Side.LEFT], PINNED_HEADER_CSS),
 										style: syntheticOffset(index, metrics),
 										children: content
 									}, `leading-${index}`);
 								}),
-								visibleColumns.map((resolved) => {
+								hasHeader && visibleColumns.map((resolved) => {
 									const { column } = resolved;
 									const isSorted = sort?.columnId === column.id;
 									return /* @__PURE__ */ jsx(TableHeaderCell, {
@@ -1049,12 +1070,12 @@ function TableFrame({ metrics, columnLayout, leadingHeaders, trailingHeader, has
 										registerButton
 									}, column.id);
 								}),
-								hasTrailingColumn && (() => {
+								hasHeader && 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),
+										className: cx("gx-TableCore-SYNTHETIC_CELL_CSS-s1qwxx34", PIN_TO_CSS_MAP[Side.RIGHT], PINNED_HEADER_CSS, trailingClassName),
 										style: syntheticOffset(0, metrics),
 										children: trailingHeader
 									});
@@ -1081,7 +1102,7 @@ function TableFrame({ metrics, columnLayout, leadingHeaders, trailingHeader, has
 								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]),
+									className: cx("gx-TableCore-SYNTHETIC_CELL_CSS-s1qwxx34", PIN_TO_CSS_MAP[Side.LEFT]),
 									style: syntheticOffset(index, metrics)
 								}, `leading-${index}`)),
 								visibleColumns.map(({ column, pin, isPinEdge, cellStyle, position }) => /* @__PURE__ */ jsx(TableCell, {
@@ -1094,14 +1115,14 @@ function TableFrame({ metrics, columnLayout, leadingHeaders, trailingHeader, has
 										size: metrics.textSize,
 										weight: TextWeight.MEDIUM,
 										lineClamp: 1,
-										className: "gx-TableCore-CELL_TEXT_CSS-cw38cm1",
+										className: "gx-TableCore-CELL_TEXT_CSS-cngkatk",
 										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),
+									className: cx("gx-TableCore-SYNTHETIC_CELL_CSS-s1qwxx34", PIN_TO_CSS_MAP[Side.RIGHT], trailingClassName),
 									style: syntheticOffset(0, metrics)
 								})
 							]

package/dist/table/VirtualizedInfiniteTable.d.ts

@@ -7,11 +7,12 @@
  * no client-side sorting (the app re-queries when `sort` changes).
  *
  * Built on the shared table core (`TableCore`, `useTableColumnLayout`,
- * `useTableKeyboardNavigation`, `useInfiniteScrollSentinel`) plus `useTableVirtualizer`
+ * `useTableKeyboardNavigation`, `useEndReached`) plus `useTableVirtualizer`
  * (`@tanstack/react-virtual`, an optional peer). It imports nothing from `InfiniteTable`, so it
  * never needs `@tanstack/react-table`.
  */
 import { type AriaAttributes, type CSSProperties, type KeyboardEvent, type MouseEvent, type ReactElement, type ReactNode, type RefAttributes } from "react";
+import type { Space } from "../theme/enums.js";
 import type { TableColumn, TableColumnLayout, TableSort } from "./types.js";
 /** Row rung of the table (canonical subset; the 1.x TableDensity members). Same rows as InfiniteTableSize. */
 export declare enum VirtualizedInfiniteTableSize {
@@ -22,7 +23,8 @@ export declare enum VirtualizedInfiniteTableSize {
     /** 52px rows, body_lg text. */
     LARGE = "LARGE"
 }
-export interface VirtualizedInfiniteTableProps<TData> extends AriaAttributes {
+/** Every VirtualizedInfiniteTable prop except the header and what lives in it (`hasHeader`, sorting, resize, customize). */
+interface VirtualizedInfiniteTableBaseProps<TData> extends AriaAttributes {
     /** The columns in their default order. Same column type as InfiniteTable (`@galaxy-io/dls/table/types`). */
     columns: TableColumn<TData>[];
     /** Number of rows the table can show, loaded or not. Grow it as pages arrive. */
@@ -59,15 +61,6 @@ export interface VirtualizedInfiniteTableProps<TData> extends AriaAttributes {
     activeRowId?: string | null;
     /** Menu rows (`MenuItem`, `MenuSeparator`, …) for a loaded row's actions menu, opened from a trailing "…" button. Return `null` for a row with no actions. */
     rowActions?: (row: TData, rowIndex: number) => ReactNode;
-    /** Controlled sorted column, shown in the header. The table never reorders rows itself: the app re-queries with the new sort. */
-    sort?: TableSort | null;
-    /**
-     * Initial sort while uncontrolled.
-     * @default null
-     */
-    defaultSort?: TableSort | null;
-    /** Called with the next sort when a sortable header is pressed. Reset the data (and scroll) when it changes. */
-    onSortChange?: (sort: TableSort | null) => void;
     /** Controlled column arrangement: order, hidden column ids and widths. Persist it to keep a user's layout. */
     columnLayout?: TableColumnLayout;
     /**
@@ -78,15 +71,11 @@ export interface VirtualizedInfiniteTableProps<TData> extends AriaAttributes {
     /** Called with the full new arrangement when the user resizes, moves, hides, shows or resets columns. Fires on every resize step; debounce before saving. */
     onColumnLayoutChange?: (columnLayout: TableColumnLayout) => void;
     /**
-     * Adds a drag handle at the end of each header cell (arrow keys too). Columns opt out with `canResize: false`.
-     * @default false
-     */
-    canResizeColumns?: boolean;
-    /**
-     * Lets the user reorder columns (drag a header, or Alt+ArrowLeft / Alt+ArrowRight on it) and show or hide them from a Columns menu at the end of the header. Columns opt out of hiding with `canHide: false`.
-     * @default false
+     * Space between the ends of each row and its first and last cell, on top of the cells' own padding; rows, hairlines and row fills still run the full width.
+     * For a table flush with a panel's edges whose content should sit on the page's padding line (a `SMALL` table takes `4`: 12px cell padding plus 4 is the island's 16), instead of a padded wrapper, which would cut the hairlines short.
+     * @default 0
      */
-    canCustomizeColumns?: boolean;
+    inset?: Space;
     /** Accessible name of the table. Use `aria-labelledby` instead when a visible heading names it. */
     ariaLabel?: string;
     /** DOM id on the root `<div>`. */
@@ -98,6 +87,56 @@ export interface VirtualizedInfiniteTableProps<TData> extends AriaAttributes {
     /** Inline style on the root `<div>`; only for setting CSS custom properties. */
     style?: CSSProperties;
 }
+/** A table with its header row (the default): sorting, resizing and customizing live in it. */
+interface VirtualizedInfiniteTableWithHeaderProps {
+    /**
+     * Shows the header row. Without it the row stays in the DOM, visually hidden, so screen readers keep the column names; sorting, resizing and customizing go with it (a type error to pass them). For a compact list whose columns explain themselves.
+     * @default true
+     */
+    hasHeader?: true;
+    /** Controlled sorted column, shown in the header. The table never reorders rows itself: the app re-queries with the new sort. */
+    sort?: TableSort | null;
+    /**
+     * Initial sort while uncontrolled.
+     * @default null
+     */
+    defaultSort?: TableSort | null;
+    /** Called with the next sort when a sortable header is pressed. Reset the data (and scroll) when it changes. */
+    onSortChange?: (sort: TableSort | null) => void;
+    /**
+     * Adds a drag handle at the end of each header cell (arrow keys too). Columns opt out with `canResize: false`.
+     * @default false
+     */
+    canResizeColumns?: boolean;
+    /**
+     * Lets the user reorder columns (drag a header, or Alt+ArrowLeft / Alt+ArrowRight on it) and show or hide them from a Columns menu at the end of the header. Columns opt out of hiding with `canHide: false`.
+     * @default false
+     */
+    canCustomizeColumns?: boolean;
+}
+/** A table without a visible header row: nothing that lives in the header can be passed. */
+interface VirtualizedInfiniteTableHeaderlessProps {
+    /**
+     * Shows the header row. Without it the row stays in the DOM, visually hidden, so screen readers keep the column names; sorting, resizing and customizing go with it (a type error to pass them). For a compact list whose columns explain themselves.
+     * @default true
+     */
+    hasHeader: false;
+    /** Controlled sorted column. Not without a header. */
+    sort?: undefined;
+    /** Initial sort while uncontrolled. Not without a header. */
+    defaultSort?: undefined;
+    /** Called with the next sort. Not without a header. */
+    onSortChange?: undefined;
+    /** Resize handles live in the header. Not without one. */
+    canResizeColumns?: false;
+    /** Reordering and the Columns menu live in the header. Not without one. */
+    canCustomizeColumns?: false;
+}
+/**
+ * VirtualizedInfiniteTable props. `hasHeader: false` with `sort`, `defaultSort`, `onSortChange`,
+ * `canResizeColumns` or `canCustomizeColumns` is a type error (the Widget `isCollapsible` precedent).
+ */
+export type VirtualizedInfiniteTableProps<TData> = VirtualizedInfiniteTableBaseProps<TData> & (VirtualizedInfiniteTableWithHeaderProps | VirtualizedInfiniteTableHeaderlessProps);
 /**
  * The public, generic call signature (`TData` inferred from `getRowData` and `columns`). Never
  * called: it only types the default export. An arrow function rather than a type literal, so