@galaxy-io/dls 2.8.1 → 2.10.0

package/dist/table/InfiniteSpreadsheet.js

@@ -8,6 +8,7 @@ import Beacon, { BeaconSize, BeaconVariant } from "../beacons/Beacon.js";
 import Icon, { IconVariant } from "../icons/Icon.js";
 import Button, { ButtonVariant } from "../buttons/Button.js";
 import EmptyState from "../feedback/EmptyState.js";
+import { formatDate } from "../utils/format.js";
 import { InputSize } from "../inputs/Input.js";
 import { SelectInputSize } from "../inputs/SelectInput.js";
 import { DateInputSize } from "../inputs/DateInput.js";
@@ -198,7 +199,6 @@ var CELL_EDITING_CSS = "gx-InfiniteSpreadsheet-CELL_EDITING_CSS-c1dhzhlk";
 var TRAILING_CSS = "gx-InfiniteSpreadsheet-TRAILING_CSS-tfgc5gq";
 /** Spread on the row-actions trigger: the cell is the tab stop, not the button. */
 var UNTABBABLE = { tabIndex: -1 };
-var DATE_FORMAT_OPTIONS = { dateStyle: "medium" };
 /** Two cell values are the same (dates by time; a TEXT `null` edits as `""`). */
 function isSameValue(type, current, next) {
 	if (current instanceof Date || next instanceof Date) return current instanceof Date && next instanceof Date && current.getTime() === next.getTime();
@@ -233,7 +233,7 @@ function CellDisplay({ column, value, metrics, iconPx, enumGapCss }) {
 		shouldTooltipOnOverflow: true,
 		isTabular: true,
 		className: CELL_TEXT_CSS,
-		children: new Intl.DateTimeFormat(void 0, DATE_FORMAT_OPTIONS).format(value)
+		children: formatDate(value)
 	});
 	return /* @__PURE__ */ jsx(TableCellText, {
 		value,
@@ -263,7 +263,7 @@ var SpreadsheetRow = memo(function SpreadsheetRow({ row, rowIndex, rowId, column
 		role: "row",
 		"aria-rowindex": ariaRowIndex,
 		...isLoaded ? {} : { "aria-busy": true },
-		className: cx(VIRTUAL_ROW_CSS, isBorderless && "gx-TableCore-ROW_NO_BORDER_CSS-rpsswqs"),
+		className: cx(VIRTUAL_ROW_CSS, isBorderless && "gx-TableCore-ROW_NO_BORDER_CSS-rwbqwrq"),
 		style,
 		children: [columns.map((resolved, columnIndex) => {
 			const column = resolved.column;
@@ -331,7 +331,7 @@ var SpreadsheetRow = memo(function SpreadsheetRow({ row, rowIndex, rowId, column
 			...cellHandlers(actionsColumn),
 			role: "gridcell",
 			"aria-colindex": actionsColumn + 1,
-			className: cx("gx-TableCore-SYNTHETIC_CELL_CSS-s1g01kh5", PIN_TO_CSS_MAP[Side.RIGHT], TRAILING_CSS, CELL_FOCUS_CSS, hasGridFocus && tabStopColumn === actionsColumn && CELL_SELECTED_CSS),
+			className: cx("gx-TableCore-SYNTHETIC_CELL_CSS-s1qwxx34", PIN_TO_CSS_MAP[Side.RIGHT], TRAILING_CSS, CELL_FOCUS_CSS, hasGridFocus && tabStopColumn === actionsColumn && CELL_SELECTED_CSS),
 			children: actions !== null && actions !== void 0 && /* @__PURE__ */ jsx(Menu, {
 				isOpen: isActionsOpen,
 				onOpenChange: (isOpen) => callbacks.onActionsOpenChange(rowId, isOpen),
@@ -350,7 +350,7 @@ var SpreadsheetRow = memo(function SpreadsheetRow({ row, rowIndex, rowId, column
 			role: "gridcell",
 			"aria-colindex": actionsColumn + 1,
 			"aria-readonly": true,
-			className: cx("gx-TableCore-SYNTHETIC_CELL_CSS-s1g01kh5", PIN_TO_CSS_MAP[Side.RIGHT], TRAILING_CSS)
+			className: cx("gx-TableCore-SYNTHETIC_CELL_CSS-s1qwxx34", PIN_TO_CSS_MAP[Side.RIGHT], TRAILING_CSS)
 		}))]
 	});
 });
@@ -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-v1n5u17i",
 			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 {
@@ -9,7 +10,8 @@ export declare enum InfiniteTableSize {
     /** 52px rows, body_lg text. Rows with avatars or two-line cells. */
     LARGE = "LARGE"
 }
-export interface InfiniteTableProps<TData> extends AriaAttributes {
+/** Every InfiniteTable prop except the header and what lives in it (`hasHeader`, sorting, resize, customize). */
+interface InfiniteTableBaseProps<TData> extends AriaAttributes {
     /** The columns in their default order. See `TableColumn` in `@galaxy-io/dls/table/types`. */
     columns: TableColumn<TData>[];
     /** The rows loaded so far, in display order (unless the table sorts them). */
@@ -44,15 +46,6 @@ export interface InfiniteTableProps<TData> extends AriaAttributes {
     activeRowId?: string | null;
     /** Menu rows (`MenuItem`, `MenuSeparator`, …) for a 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. `null` is unsorted. */
-    sort?: TableSort | null;
-    /**
-     * Initial sort while uncontrolled.
-     * @default null
-     */
-    defaultSort?: TableSort | null;
-    /** Called with the next sort when a sortable header is pressed: ascending, then descending, then unsorted. */
-    onSortChange?: (sort: TableSort | null) => void;
     /**
      * Adds a leading checkbox column, a select-all checkbox in the header, and Space / Shift+Space to select rows.
      * @default false
@@ -88,15 +81,11 @@ export interface InfiniteTableProps<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>`. */
@@ -108,6 +97,56 @@ export interface InfiniteTableProps<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 InfiniteTableWithHeaderProps {
+    /**
+     * Shows the header row. Without it the row stays in the DOM, visually hidden, so screen readers keep the column names; sorting, resizing, customizing and the select-all checkbox go with it (a type error to pass them). For a compact list whose columns explain themselves.
+     * @default true
+     */
+    hasHeader?: true;
+    /** Controlled sorted column. `null` is unsorted. */
+    sort?: TableSort | null;
+    /**
+     * Initial sort while uncontrolled.
+     * @default null
+     */
+    defaultSort?: TableSort | null;
+    /** Called with the next sort when a sortable header is pressed: ascending, then descending, then unsorted. */
+    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 InfiniteTableHeaderlessProps {
+    /**
+     * Shows the header row. Without it the row stays in the DOM, visually hidden, so screen readers keep the column names; sorting, resizing, customizing and the select-all checkbox 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;
+}
+/**
+ * InfiniteTable props. `hasHeader: false` with `sort`, `defaultSort`, `onSortChange`,
+ * `canResizeColumns` or `canCustomizeColumns` is a type error (the Widget `isCollapsible` precedent).
+ */
+export type InfiniteTableProps<TData> = InfiniteTableBaseProps<TData> & (InfiniteTableWithHeaderProps | InfiniteTableHeaderlessProps);
 /**
  * The public, generic call signature (`TData` inferred from `data` and `columns`). Never called:
  * it only types the default export. An arrow function rather than a type literal, so

package/dist/table/InfiniteTable.js

@@ -15,7 +15,7 @@ import { getCoreRowModel, getSortedRowModel, useReactTable } from "@tanstack/rea
 * and pages; the table sorts on its own only when it holds every row (no `onEndReached`).
 *
 * Built on the shared table core (`TableCore`, `useTableColumnLayout`,
-* `useTableKeyboardNavigation`, `useInfiniteScrollSentinel`), which VirtualizedInfiniteTable and
+* `useTableKeyboardNavigation`, `useEndReached`), which VirtualizedInfiniteTable and
 * InfiniteSpreadsheet share. `@tanstack/react-table` (an optional peer) supplies the row model and
 * type-aware sorting; this is the only module that imports it.
 *
@@ -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, hasHeader = true, 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,
@@ -234,6 +235,7 @@ var InfiniteTableInner = forwardRef(function InfiniteTable(props, ref) {
 	if (hasExpandColumn) leadingHeaders.push(null);
 	return /* @__PURE__ */ jsx(TableFrame, {
 		metrics,
+		hasHeader,
 		columnLayout: layout,
 		leadingHeaders,
 		trailingHeader: canCustomizeColumns ? /* @__PURE__ */ jsx(TableColumnsMenu, {

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>;
@@ -205,6 +208,12 @@ export declare function TableExpandedRow({ panelId, colSpan, gutterPx, isLast, c
 export interface TableFrameProps {
     metrics: TableMetrics;
     columnLayout: TableColumnLayoutResult<unknown>;
+    /**
+     * The header row is shown. Without it the row is visually hidden, holds plain labels only and
+     * zeroes the header's scroll padding.
+     * @default true
+     */
+    hasHeader?: boolean;
     /** Header content of each leading synthetic column (select-all, expand). */
     leadingHeaders: ReactNode[];
     /** Header content of the trailing corner column; `undefined` when there is no trailing column. */
@@ -241,7 +250,7 @@ export interface TableFrameProps {
     style: CSSProperties | undefined;
 }
 /** Root → scroll container → table (header, body, status, footer) → sentinel → live region. */
-export declare 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, }: TableFrameProps): import("react").JSX.Element;
+export declare function TableFrame({ metrics, hasHeader, 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, }: TableFrameProps): import("react").JSX.Element;
 /** @internal Header content of the select column: the select-all checkbox. */
 export declare function TableSelectAllCheckbox({ metrics, isChecked, isIndeterminate, isDisabled, onToggle, }: {
     metrics: TableMetrics;