@galaxy-io/dls 1.2.6 → 1.3.0

package/dist/table/InfiniteSpreadsheet.js

@@ -0,0 +1,235 @@
+import Text, { TextVariant } from "../text/Text.js";
+import Button, { ButtonSize, ButtonVariant } from "../buttons/Button.js";
+import { CellEnrichmentStatus, ColumnAlign, ColumnPin, ColumnResizeMode, SpreadsheetCellType, TableDensity, TableVariant } from "./types.js";
+import { getDensityRowHeightPx } from "./utils.js";
+import { useTableKeyboardNavigation } from "./useTableKeyboardNavigation.js";
+import { useTableColumnResize } from "./useTableColumnResize.js";
+import { useTableColumnLayout } from "./useTableColumnLayout.js";
+import { useSpreadsheetEditing } from "./useSpreadsheetEditing.js";
+import { useInfiniteScrollSentinel } from "./useInfiniteScrollSentinel.js";
+import { useElementClientSize } from "../hooks/useElementClientSize.js";
+import { InfiniteScrollSentinel, StyledTable, TableBody, TableDataCell, TableHead, TableHeaderRow, TableLoadingRow, TableOuterContainer, TableRow, TableScrollContainer } from "./TablePrimitives.js";
+import TableStatusRow from "./TableStatusRow.js";
+import { ActionColumnHeaderCell, CellLoadingSkeleton } from "./SpreadsheetPrimitives.js";
+import SpreadsheetRow from "./SpreadsheetRow.js";
+import SpreadsheetHeaderCell from "./SpreadsheetHeaderCell.js";
+import { useCallback, useMemo, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { PlusIcon } from "@phosphor-icons/react";
+import { useVirtualizer } from "@tanstack/react-virtual";
+//#region src/table/InfiniteSpreadsheet.tsx
+function InfiniteSpreadsheet(props) {
+	const { columns, totalRowCount, getRowData, getRowId, height, width, fillWidth, fillHeight, density = TableDensity.MEDIUM, variant = TableVariant.PRIMARY, estimateRowHeight, overscan = 25, hasNextPage, isFetchingNextPage, fetchNextPage, isLoading = false, isError = false, error, loadingRowCount = 5, contentWhenEmpty, contentWhenError, noHeader = false, noLastRowBorder = false, noLastRowPadding = false, enableColumnResizing = true, columnSizing, defaultColumnSizing, onColumnSizingChange, columnResizeMode = ColumnResizeMode.ON_CHANGE, ariaLabel, ariaLabelledBy, onAddColumn, addColumnAriaLabel = "Add column", rowActions, getRowActionsAriaLabel, editingCell: controlledEditingCell, onEditingCellChange, enableRowFocus = true } = props;
+	const scrollContainerRef = useRef(null);
+	const headerRef = useRef(null);
+	const bodyRef = useRef(null);
+	const { width: viewportWidth, height: viewportHeight } = useElementClientSize(scrollContainerRef);
+	const { height: headerHeight } = useElementClientSize(headerRef);
+	const showActionColumn = Boolean(onAddColumn) || Boolean(rowActions && rowActions.length > 0);
+	const actionColumnWidth = showActionColumn ? 48 : 0;
+	const resize = useTableColumnResize({
+		columns,
+		enabled: enableColumnResizing,
+		columnSizing,
+		defaultColumnSizing,
+		onColumnSizingChange,
+		mode: columnResizeMode
+	});
+	const { canResizeColumn, startResize, resizeByKeyboard, getColumnResizeBounds } = resize;
+	const { getColumnWidth, pinnedOffsets, rowMinWidth } = useTableColumnLayout({
+		columns,
+		columnSizing: resize.columnSizing,
+		rightOffsetBase: actionColumnWidth
+	});
+	const { editingCell, startEditing, commitEditing, cancelEditing } = useSpreadsheetEditing({
+		editingCell: controlledEditingCell,
+		onEditingCellChange
+	});
+	const rowHeight = estimateRowHeight ?? getDensityRowHeightPx(density);
+	const virtualizer = useVirtualizer({
+		count: totalRowCount,
+		getScrollElement: () => scrollContainerRef.current,
+		estimateSize: () => rowHeight,
+		overscan
+	});
+	const virtualRows = virtualizer.getVirtualItems();
+	const virtualTotalSize = virtualizer.getTotalSize();
+	const sentinelRef = useInfiniteScrollSentinel({
+		scrollRef: scrollContainerRef,
+		hasNextPage,
+		isFetchingNextPage,
+		fetchNextPage,
+		rowCount: totalRowCount
+	});
+	const keyboard = useTableKeyboardNavigation({
+		bodyRef,
+		rowCount: totalRowCount,
+		enabled: enableRowFocus,
+		scrollToIndex: useCallback((rowIndex) => virtualizer.scrollToIndex(rowIndex), [virtualizer])
+	});
+	/**
+	* Handed to column enrichment actions. Materializing rows is opt-in, so an
+	* action that only needs a count no longer pays for a full scan.
+	*/
+	const rowsContext = useMemo(() => ({
+		totalRowCount,
+		getRowData,
+		getLoadedRows: () => {
+			const rows = [];
+			for (let index = 0; index < totalRowCount; index += 1) {
+				const row = getRowData(index);
+				if (row !== void 0) rows.push(row);
+			}
+			return rows;
+		}
+	}), [totalRowCount, getRowData]);
+	const renderLoadingCells = () => columns.map((col) => /* @__PURE__ */ jsx(TableDataCell, {
+		$width: getColumnWidth(col),
+		$minWidth: col.minSize,
+		$maxWidth: col.maxSize,
+		$pin: col.pin,
+		$pinnedOffset: pinnedOffsets.get(col.id),
+		$align: col.align,
+		$density: density,
+		$variant: variant,
+		role: "gridcell",
+		children: col.cellLoading ? col.cellLoading() : /* @__PURE__ */ jsx(CellLoadingSkeleton, {})
+	}, col.id));
+	/** Initial load: normal flow, since the body has no virtual height yet. */
+	const renderLoadingRows = () => Array.from({ length: loadingRowCount }).map((_, rowIndex) => /* @__PURE__ */ jsx(TableLoadingRow, {
+		$density: density,
+		$variant: variant,
+		role: "row",
+		"aria-hidden": "true",
+		children: renderLoadingCells()
+	}, `loading-${rowIndex}`));
+	/**
+	* Paging: the body's children are absolutely positioned once virtualization
+	* is active, so these have to be offset past the last row rather than left in
+	* normal flow — otherwise they stack on top of the first visible rows.
+	*/
+	const renderTrailingLoadingRows = (startOffset) => Array.from({ length: loadingRowCount }).map((_, rowIndex) => /* @__PURE__ */ jsx(TableRow, {
+		$density: density,
+		$variant: variant,
+		$translateY: startOffset + rowIndex * rowHeight,
+		$rowHeight: rowHeight,
+		role: "row",
+		"aria-hidden": "true",
+		children: renderLoadingCells()
+	}, `loading-more-${rowIndex}`));
+	const showLoading = isLoading && totalRowCount === 0;
+	const showError = isError && totalRowCount === 0;
+	const showEmpty = totalRowCount === 0 && !isLoading && !isError && Boolean(contentWhenEmpty);
+	const showRows = !showLoading && !showError && !showEmpty;
+	const trailingLoadingHeight = isFetchingNextPage ? loadingRowCount * rowHeight : 0;
+	const statusAvailableHeight = viewportHeight !== void 0 ? Math.max(0, viewportHeight - (headerHeight ?? 0)) : void 0;
+	const columnCount = columns.length + (showActionColumn ? 1 : 0);
+	return /* @__PURE__ */ jsx(TableOuterContainer, {
+		$width: width,
+		$height: height,
+		$fillWidth: fillWidth,
+		$fillHeight: fillHeight,
+		children: /* @__PURE__ */ jsxs(TableScrollContainer, {
+			ref: scrollContainerRef,
+			$noLastRowPadding: noLastRowPadding,
+			children: [/* @__PURE__ */ jsxs(StyledTable, {
+				$rowMinWidth: rowMinWidth + actionColumnWidth,
+				role: "grid",
+				"aria-label": ariaLabel,
+				"aria-labelledby": ariaLabelledBy,
+				"aria-rowcount": totalRowCount + (noHeader ? 0 : 1),
+				"aria-colcount": columnCount,
+				children: [!noHeader && /* @__PURE__ */ jsx(TableHead, {
+					ref: headerRef,
+					role: "rowgroup",
+					children: /* @__PURE__ */ jsxs(TableHeaderRow, {
+						role: "row",
+						"aria-rowindex": 1,
+						children: [columns.map((col, columnIndex) => /* @__PURE__ */ jsx(SpreadsheetHeaderCell, {
+							column: col,
+							columnIndex,
+							width: getColumnWidth(col),
+							pinnedOffset: pinnedOffsets.get(col.id),
+							density,
+							variant,
+							rowsContext,
+							isResizable: canResizeColumn(col),
+							isResizing: resize.resizingColumnId === col.id,
+							resizeBounds: getColumnResizeBounds(col.id),
+							onResizeStart: startResize,
+							onResizeKeyDown: resizeByKeyboard
+						}, col.id)), showActionColumn && /* @__PURE__ */ jsx(ActionColumnHeaderCell, {
+							$variant: variant,
+							role: "columnheader",
+							"aria-colindex": columnCount,
+							"aria-label": addColumnAriaLabel,
+							children: onAddColumn && /* @__PURE__ */ jsx(Button, {
+								icon: PlusIcon,
+								variant: ButtonVariant.TERTIARY,
+								size: ButtonSize.SMALL,
+								ariaLabel: addColumnAriaLabel,
+								onClick: onAddColumn
+							})
+						})]
+					})
+				}), /* @__PURE__ */ jsxs(TableBody, {
+					ref: bodyRef,
+					role: "rowgroup",
+					$virtualHeight: showRows ? virtualTotalSize + trailingLoadingHeight : void 0,
+					children: [
+						showLoading && renderLoadingRows(),
+						showError && /* @__PURE__ */ jsx(TableStatusRow, {
+							colSpan: columnCount,
+							viewportWidth,
+							availableHeight: statusAvailableHeight,
+							role: "alert",
+							children: typeof contentWhenError === "function" ? contentWhenError(error) : contentWhenError ?? /* @__PURE__ */ jsx(Text, {
+								variant: TextVariant.ERROR,
+								children: error?.message ?? "Error loading data"
+							})
+						}),
+						showEmpty && /* @__PURE__ */ jsx(TableStatusRow, {
+							colSpan: columnCount,
+							viewportWidth,
+							availableHeight: statusAvailableHeight,
+							role: "status",
+							children: contentWhenEmpty
+						}),
+						showRows && virtualRows.map((virtualRow) => {
+							const rowData = getRowData(virtualRow.index);
+							const rowKey = rowData && getRowId ? getRowId(rowData, virtualRow.index) : String(virtualRow.index);
+							return /* @__PURE__ */ jsx(SpreadsheetRow, {
+								rowData,
+								rowIndex: virtualRow.index,
+								translateY: virtualRow.start,
+								rowHeight,
+								isLastRow: noLastRowBorder && virtualRow.index === totalRowCount - 1,
+								density,
+								variant,
+								columns,
+								pinnedOffsets,
+								getColumnWidth,
+								editingCell,
+								onStartEditing: startEditing,
+								onCommitEditing: commitEditing,
+								onCancelEditing: cancelEditing,
+								rowActions,
+								rowActionsAriaLabel: getRowActionsAriaLabel?.(virtualRow.index),
+								showActionColumn,
+								tabIndex: keyboard.getRowTabIndex(virtualRow.index),
+								onFocus: enableRowFocus ? () => keyboard.onRowFocus(virtualRow.index) : void 0,
+								onKeyDown: enableRowFocus ? (event) => keyboard.onRowKeyDown(virtualRow.index, event) : void 0
+							}, rowKey);
+						}),
+						isFetchingNextPage && showRows && renderTrailingLoadingRows(virtualTotalSize)
+					]
+				})]
+			}), /* @__PURE__ */ jsx(InfiniteScrollSentinel, {
+				ref: sentinelRef,
+				"aria-hidden": "true"
+			})]
+		})
+	});
+}
+//#endregion
+export { CellEnrichmentStatus, ColumnAlign, ColumnPin, ColumnResizeMode, SpreadsheetCellType, TableDensity, TableVariant, InfiniteSpreadsheet as default };

package/dist/table/InfiniteTable.d.ts

@@ -1,90 +1,9 @@
-import React, { type ReactNode } from "react";
-import { type OnChangeFn as TanstackOnChangeFn, type Row as TanstackRow, type RowSelectionState as TanstackRowSelectionState, type SortingState as TanstackSortingState, type Table as TanstackTable } from "@tanstack/react-table";
-export declare enum TableVariant {
-    BASE = "BASE",
-    PRIMARY = "PRIMARY",
-    SECONDARY = "SECONDARY",
-    TERTIARY = "TERTIARY"
-}
-export declare enum TableDensity {
-    SMALL = "SMALL",
-    MEDIUM = "MEDIUM",
-    LARGE = "LARGE"
-}
-export declare enum ColumnPin {
-    LEFT = "LEFT",
-    RIGHT = "RIGHT"
-}
-export declare enum ColumnAlign {
-    LEFT = "LEFT",
-    CENTER = "CENTER",
-    RIGHT = "RIGHT"
-}
-export interface ColumnDef<TData, TValue = unknown> {
-    id: string;
-    accessorFn?: (row: TData) => TValue;
-    header?: string | ((props: {
-        table: TanstackTable<TData>;
-    }) => ReactNode);
-    cell?: (props: {
-        value: TValue;
-        row: TanstackRow<TData>;
-    }) => ReactNode;
-    size?: number;
-    minSize?: number;
-    maxSize?: number;
-    pin?: ColumnPin;
-    enableSorting?: boolean;
-    sortDescFirst?: boolean;
-    align?: ColumnAlign;
-    cellLoading?: () => ReactNode;
-}
-export interface EstimateColumnWidthOptions {
-    minWidth?: number;
-    maxWidth?: number;
-    charWidth?: number;
-    padding?: number;
-}
-/**
- * Estimate column width based on header name and sample data values.
- * Useful for auto-sizing table columns based on content.
- */
-export declare const estimateColumnWidth: (columnName: string, sampleValues: string[], options?: EstimateColumnWidthOptions) => number;
-export interface InfiniteTableProps<TData> {
-    columns: ColumnDef<TData, unknown>[];
-    data: TData[];
-    getRowId?: (row: TData, index: number) => string;
-    height?: number | string;
-    width?: number | string;
-    fillWidth?: boolean;
-    fillHeight?: boolean;
-    density?: TableDensity;
-    variant?: TableVariant;
-    hasNextPage?: boolean;
-    isFetchingNextPage?: boolean;
-    fetchNextPage?: () => void;
-    enableRowSelection?: boolean | ((row: TanstackRow<TData>) => boolean);
-    enableMultiRowSelection?: boolean;
-    rowSelection?: TanstackRowSelectionState;
-    onRowSelectionChange?: TanstackOnChangeFn<TanstackRowSelectionState>;
-    enableSorting?: boolean;
-    enableMultiSort?: boolean;
-    sorting?: TanstackSortingState;
-    onSortingChange?: TanstackOnChangeFn<TanstackSortingState>;
-    manualSorting?: boolean;
-    isLoading?: boolean;
-    isError?: boolean;
-    loadingRowCount?: number;
-    contentWhenEmpty?: ReactNode;
-    contentWhenError?: ReactNode | ((error?: Error) => ReactNode);
-    noHeader?: boolean;
-    noLastRowBorder?: boolean;
-    noLastRowPadding?: boolean;
-    onRowClick?: (row: TanstackRow<TData>, event: React.MouseEvent) => void;
-    onRowDoubleClick?: (row: TanstackRow<TData>, event: React.MouseEvent) => void;
-    onRowExpand?: (row: TanstackRow<TData>) => ReactNode;
-    onTableReady?: (table: TanstackTable<TData>) => void;
-}
+import React from "react";
+import { type Table as TanstackTable } from "@tanstack/react-table";
+import { type InfiniteTableProps } from "./types";
+export { ColumnAlign, ColumnPin, ColumnResizeMode, TableDensity, TableVariant } from "./types";
+export type { ColumnDef, ColumnSizingState, EstimateColumnWidthOptions, InfiniteTableProps, Row, } from "./types";
+export { estimateColumnWidth } from "./utils";
 declare function InfiniteTable<TData>(props: InfiniteTableProps<TData>): React.JSX.Element;
 export default InfiniteTable;
-export type { TanstackRow as Row };
+export type { TanstackTable as Table };