@galaxy-io/dls 2.8.1 → 2.9.0

package/dist/table/InfiniteSpreadsheet.js

@@ -754,7 +754,7 @@ var InfiniteSpreadsheetInner = forwardRef(function InfiniteSpreadsheet(props, re
 		}), showAddRow && isMounted && /* @__PURE__ */ jsx(AddRow, {
 			role: "row",
 			"aria-rowindex": rowCount + 2,
-			className: "gx-TableCore-VIRTUAL_ROW_CSS-v1emgwoo",
+			className: "gx-TableCore-VIRTUAL_ROW_CSS-vw38cm1",
 			style: startStyle(totalSize),
 			children: /* @__PURE__ */ jsx(AddRowCell, {
 				role: "gridcell",

package/dist/table/InfiniteTable.d.ts

@@ -1,4 +1,5 @@
 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). */
 export declare enum InfiniteTableSize {
@@ -97,6 +98,12 @@ export interface InfiniteTableProps<TData> extends AriaAttributes {
      * @default false
      */
     canCustomizeColumns?: boolean;
+    /**
+     * 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
+     */
+    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>`. */

package/dist/table/InfiniteTable.js

@@ -52,7 +52,7 @@ function splitPassthrough(rest) {
 }
 /** The read-only data table. */
 var InfiniteTableInner = forwardRef(function InfiniteTable(props, ref) {
-	const { columns, data, getRowId, size: sizeProp, isLoading: isLoadingProp, error: errorProp, emptyState, onEndReached, onRowClick, activeRowId, rowActions, sort, defaultSort, onSortChange, isSelectable: isSelectableProp, value, defaultValue, onChange, renderExpandedRow, expandedIds, defaultExpandedIds, onExpandedIdsChange, columnLayout, defaultColumnLayout, onColumnLayoutChange, canResizeColumns: canResizeColumnsProp, canCustomizeColumns: canCustomizeColumnsProp, ariaLabel, id, className, style, ...rest } = props;
+	const { columns, data, getRowId, size: sizeProp, isLoading: isLoadingProp, error: errorProp, emptyState, onEndReached, onRowClick, activeRowId, rowActions, sort, defaultSort, onSortChange, isSelectable: isSelectableProp, value, defaultValue, onChange, renderExpandedRow, expandedIds, defaultExpandedIds, onExpandedIdsChange, columnLayout, defaultColumnLayout, onColumnLayoutChange, canResizeColumns: canResizeColumnsProp, canCustomizeColumns: canCustomizeColumnsProp, inset: insetProp, ariaLabel, id, className, style, ...rest } = props;
 	const error = errorProp === "" ? void 0 : errorProp;
 	const size = sizeProp ?? "MEDIUM";
 	const isLoading = isLoadingProp ?? false;
@@ -135,7 +135,8 @@ var InfiniteTableInner = forwardRef(function InfiniteTable(props, ref) {
 		canCustomizeColumns,
 		leadingCount,
 		hasTrailing: hasTrailingColumn,
-		syntheticWidthPx: metrics.rowHeightPx
+		syntheticWidthPx: metrics.rowHeightPx,
+		insetPx: insetProp ?? 0
 	});
 	const latest = {
 		columns,

package/dist/table/TableCore.d.ts

@@ -66,7 +66,10 @@ export declare const TABLE_LARGE_METRICS: TableMetrics;
 export declare const TableRow: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLTableRowElement> & import("react").HTMLAttributes<HTMLTableRowElement> & Record<never, unknown>>;
 /** @internal A body or footer cell. */
 export declare const TableCell: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLTableDataCellElement> & import("react").TdHTMLAttributes<HTMLTableDataCellElement> & Record<never, unknown>>;
-/** @internal Select, expand and row-actions columns: a square of the row height, content centered. */
+/**
+ * @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`).
+ */
 export declare const SYNTHETIC_CELL_CSS: import("@linaria/core").LinariaClassName;
 /** @internal Alignment of a column's header and cells. */
 export declare const COLUMN_ALIGN_TO_CSS_MAP: Record<TableColumnAlign, string>;

package/dist/table/TableCore.js

@@ -261,7 +261,10 @@ var ExpandedBody = /*#__PURE__*/ styled("div")({
 * 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. */
+/**
+* @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-s1g01kh5";
 /** @internal Alignment of a column's header and cells. */
 var COLUMN_ALIGN_TO_CSS_MAP = {
@@ -297,6 +300,14 @@ var ROW_NO_BORDER_CSS = "gx-TableCore-ROW_NO_BORDER_CSS-rpsswqs";
 */
 var ROWS_END_ABOVE_BOTTOM_CSS = "gx-TableCore-ROWS_END_ABOVE_BOTTOM_CSS-rwbqwrq";
 /**
+* `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-t1jxalmm";
+/**
 * 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
 * end) already draws the line; above the edge, the hairline closes the list. Watches the scroll box
@@ -335,25 +346,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-e1fx3qlj";
 /** 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-h2nd1ne";
 /** 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-larqcf0";
+var DROP_START_CSS = "gx-TableCore-DROP_START_CSS-d132cb1v";
+var DROP_END_CSS = "gx-TableCore-DROP_END_CSS-d1vn45v6";
 /** 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-c14za3v2";
 /** 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-h1w0t3ir";
 /** 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-eb9km4t";
 /** @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-v1emgwoo";
 /** @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-vw38cm1";
 /** @internal Default cells and footer strings: shrink to truncate. */
-var CELL_TEXT_CSS = "gx-TableCore-CELL_TEXT_CSS-cw38cm1";
+var CELL_TEXT_CSS = "gx-TableCore-CELL_TEXT_CSS-c1n5u17i";
 /** "Oct 3, 2026": the DateInput default. */
 var DATE_FORMAT_OPTIONS = { dateStyle: "medium" };
 /** @internal The default cell renderer: one truncating line of formatted text. */
@@ -627,9 +638,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 }) {
@@ -672,7 +683,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),
@@ -989,7 +1000,7 @@ function TableFrame({ metrics, columnLayout, leadingHeaders, trailingHeader, has
 	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
@@ -1094,7 +1105,7 @@ 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-c1n5u17i",
 										children: column.footer
 									}) : column.footer
 								}, column.id)),

package/dist/table/VirtualizedInfiniteTable.d.ts

@@ -12,6 +12,7 @@
  * 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 {
@@ -87,6 +88,12 @@ export interface VirtualizedInfiniteTableProps<TData> extends AriaAttributes {
      * @default false
      */
     canCustomizeColumns?: boolean;
+    /**
+     * 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
+     */
+    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>`. */

package/dist/table/VirtualizedInfiniteTable.js

@@ -53,7 +53,7 @@ function sortAnnouncement(sort, columns) {
 }
 /** InfiniteTable with a virtual body, for tens of thousands of rows. */
 var VirtualizedInfiniteTableInner = forwardRef(function VirtualizedInfiniteTable(props, ref) {
-	const { columns, totalRowCount, getRowData, getRowId, size: sizeProp, isLoading: isLoadingProp, error: errorProp, emptyState, onEndReached, onRowClick, activeRowId, rowActions, sort, defaultSort, onSortChange, columnLayout, defaultColumnLayout, onColumnLayoutChange, canResizeColumns: canResizeColumnsProp, canCustomizeColumns: canCustomizeColumnsProp, ariaLabel, id, className, style, ...rest } = props;
+	const { columns, totalRowCount, getRowData, getRowId, size: sizeProp, isLoading: isLoadingProp, error: errorProp, emptyState, onEndReached, onRowClick, activeRowId, rowActions, sort, defaultSort, onSortChange, columnLayout, defaultColumnLayout, onColumnLayoutChange, canResizeColumns: canResizeColumnsProp, canCustomizeColumns: canCustomizeColumnsProp, inset: insetProp, ariaLabel, id, className, style, ...rest } = props;
 	const error = errorProp === "" ? void 0 : errorProp;
 	const size = sizeProp ?? "MEDIUM";
 	const isLoading = isLoadingProp ?? false;
@@ -95,7 +95,8 @@ var VirtualizedInfiniteTableInner = forwardRef(function VirtualizedInfiniteTable
 		canCustomizeColumns,
 		leadingCount: 0,
 		hasTrailing: hasTrailingColumn,
-		syntheticWidthPx: metrics.rowHeightPx
+		syntheticWidthPx: metrics.rowHeightPx,
+		insetPx: insetProp ?? 0
 	});
 	const visibleColumns = layout.visibleColumns;
 	const hasFooter = visibleColumns.some(({ column }) => column.footer !== void 0 && column.footer !== null);

package/dist/table/useTableColumnLayout.d.ts

@@ -63,6 +63,12 @@ export interface UseTableColumnLayoutOptions<TData> {
     hasTrailing: boolean;
     /** Width of a synthetic column, in pixels (the row height). */
     syntheticWidthPx: number;
+    /**
+     * The table's `inset`, in pixels: added to the first and last cell of every row (padding and
+     * width), so the content moves in while rows, fills and hairlines keep the full width.
+     * @default 0
+     */
+    insetPx?: number;
 }
 /** @internal What `useTableColumnLayout` returns. */
 export interface TableColumnLayoutResult<TData> {
@@ -72,7 +78,7 @@ export interface TableColumnLayoutResult<TData> {
     visibleColumns: TableResolvedColumn<TData>[];
     /** Every column in display order with its visibility, for the Columns menu. */
     menuEntries: TableColumnsMenuEntry[];
-    /** Custom properties for the table root: per-column flex, min, max and pinned offset, and the table min width. */
+    /** Custom properties for the table root: per-column flex, min, max and pinned offset, the table min width and `--gx-table-inset`. */
     variables: Record<`--gx-${string}`, string>;
     /** Width of a resizable column for the resize handle: its resolved or measured width. */
     getColumnWidth: (id: string) => number;
@@ -90,4 +96,4 @@ export interface TableColumnLayoutResult<TData> {
     resetLayout: () => void;
 }
 /** Column arrangement state and the column custom properties. */
-export declare function useTableColumnLayout<TData>({ columns, columnLayout, defaultColumnLayout, onColumnLayoutChange, canResizeColumns, canCustomizeColumns, leadingCount, hasTrailing, syntheticWidthPx, }: UseTableColumnLayoutOptions<TData>): TableColumnLayoutResult<TData>;
+export declare function useTableColumnLayout<TData>({ columns, columnLayout, defaultColumnLayout, onColumnLayoutChange, canResizeColumns, canCustomizeColumns, leadingCount, hasTrailing, syntheticWidthPx, insetPx, }: UseTableColumnLayoutOptions<TData>): TableColumnLayoutResult<TData>;

package/dist/table/useTableColumnLayout.js

@@ -33,7 +33,7 @@ function pinGroup(pin) {
 	return 1;
 }
 /** Column arrangement state and the column custom properties. */
-function useTableColumnLayout({ columns, columnLayout, defaultColumnLayout, onColumnLayoutChange, canResizeColumns, canCustomizeColumns, leadingCount, hasTrailing, syntheticWidthPx }) {
+function useTableColumnLayout({ columns, columnLayout, defaultColumnLayout, onColumnLayoutChange, canResizeColumns, canCustomizeColumns, leadingCount, hasTrailing, syntheticWidthPx, insetPx = 0 }) {
 	const [layout, setLayout] = useControlledState({
 		value: columnLayout,
 		defaultValue: defaultColumnLayout,
@@ -100,44 +100,55 @@ function useTableColumnLayout({ columns, columnLayout, defaultColumnLayout, onCo
 			console.warn(`[@galaxy-io/dls] Table column "${column.id}" is pinned without a \`width\`; it falls back to 150px.`);
 		}
 	}, [visibleColumns]);
+	/** The inset a column's cells carry: `insetPx` at each end of the row it sits on. */
+	const edgeInsetFor = useCallback((position) => ((leadingCount === 0 && position === 0 ? 1 : 0) + (!hasTrailing && position === visibleColumns.length - 1 ? 1 : 0)) * insetPx, [
+		leadingCount,
+		hasTrailing,
+		visibleColumns.length,
+		insetPx
+	]);
 	const variables = useMemo(() => {
 		const result = {};
-		let minTotal = (leadingCount + (hasTrailing ? 1 : 0)) * syntheticWidthPx;
-		let leftOffset = leadingCount * syntheticWidthPx;
+		let minTotal = (leadingCount + (hasTrailing ? 1 : 0)) * syntheticWidthPx + 2 * insetPx;
+		let leftOffset = leadingCount * syntheticWidthPx + (leadingCount > 0 ? insetPx : 0);
 		const rightColumns = [];
 		for (const resolved of visibleColumns) {
 			const { column, position, minWidth, pin } = resolved;
 			const width = resolvedWidths.get(column.id);
+			const edge = edgeInsetFor(position);
 			const prefix = `--gx-table-col-${position}`;
 			if (width !== void 0) {
-				result[`${prefix}-flex`] = `0 0 ${width}px`;
-				result[`${prefix}-min`] = `${width}px`;
-				result[`${prefix}-max`] = `${width}px`;
+				result[`${prefix}-flex`] = `0 0 ${width + edge}px`;
+				result[`${prefix}-min`] = `${width + edge}px`;
+				result[`${prefix}-max`] = `${width + edge}px`;
 				minTotal += width;
 			} else {
-				result[`${prefix}-flex`] = "1 1 0px";
-				result[`${prefix}-min`] = `${minWidth}px`;
+				result[`${prefix}-flex`] = `1 1 ${edge}px`;
+				result[`${prefix}-min`] = `${minWidth + edge}px`;
 				result[`${prefix}-max`] = "none";
 				minTotal += minWidth;
 			}
 			if (pin === Side.LEFT) {
 				result[`${prefix}-offset`] = `${leftOffset}px`;
-				leftOffset += width ?? 150;
+				leftOffset += (width ?? 150) + edge;
 			} else if (pin === Side.RIGHT) rightColumns.push(resolved);
 		}
-		let rightOffset = hasTrailing ? syntheticWidthPx : 0;
+		let rightOffset = hasTrailing ? syntheticWidthPx + insetPx : 0;
 		for (const { column, position } of [...rightColumns].reverse()) {
 			result[`--gx-table-col-${position}-offset`] = `${rightOffset}px`;
-			rightOffset += resolvedWidths.get(column.id) ?? 150;
+			rightOffset += (resolvedWidths.get(column.id) ?? 150) + edgeInsetFor(position);
 		}
 		result["--gx-table-min-width"] = `${minTotal}px`;
+		if (insetPx > 0) result["--gx-table-inset"] = `${insetPx}px`;
 		return result;
 	}, [
 		visibleColumns,
 		resolvedWidths,
 		leadingCount,
 		hasTrailing,
-		syntheticWidthPx
+		syntheticWidthPx,
+		insetPx,
+		edgeInsetFor
 	]);
 	const menuEntries = useMemo(() => {
 		const hidden = new Set(hiddenKey === "" ? [] : hiddenKey.split("\0"));
@@ -190,7 +201,19 @@ function useTableColumnLayout({ columns, columnLayout, defaultColumnLayout, onCo
 		observerRef.current.observe(element);
 	}, [measure]);
 	useEffect(() => () => observerRef.current?.disconnect(), []);
-	const getColumnWidth = useCallback((id) => resolvedWidths.get(id) ?? measured[id] ?? 60, [resolvedWidths, measured]);
+	const getColumnWidth = useCallback((id) => {
+		const resolved = resolvedWidths.get(id);
+		if (resolved !== void 0) return resolved;
+		const width = measured[id];
+		if (width === void 0) return 60;
+		const position = visibleColumns.findIndex(({ column }) => column.id === id);
+		return position === -1 ? width : width - edgeInsetFor(position);
+	}, [
+		resolvedWidths,
+		measured,
+		visibleColumns,
+		edgeInsetFor
+	]);
 	const resizeColumn = useCallback((id, width) => {
 		const current = layoutRef.current;
 		setLayout({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@galaxy-io/dls",
-  "version": "2.8.1",
+  "version": "2.9.0",
   "description": "Galaxy Design Language System",
   "license": "UNLICENSED",
   "type": "module",