@galaxy-io/dls 1.0.3

package/dist/spreadsheet/SpreadsheetHeaderCell.js

@@ -0,0 +1,125 @@
+import { withTheme } from "../theme/GalaxyTheme.js";
+import Text, { TextSize, TextVariant, TextWeight } from "../text/Text.js";
+import FlexWrapper, { FlexDirection } from "../containers/FlexWrapper.js";
+import Button, { ButtonSize, ButtonVariant } from "../buttons/Button.js";
+import { ColumnAlign, ColumnPin } from "../table/InfiniteTable.js";
+import Dropdown, { DropdownPosition } from "../dropdown/Dropdown.js";
+import DropdownItem from "../dropdown/DropdownItem.js";
+/* empty css                                */
+import { styled } from "@linaria/react";
+import { match } from "ts-pattern";
+import React, { useCallback, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { DotsThreeVerticalIcon } from "@phosphor-icons/react";
+//#region src/spreadsheet/SpreadsheetHeaderCell.tsx
+var _exp = () => ({ $pin }) => $pin ? 25 : 20;
+var _exp2 = () => ({ $pin, $pinnedOffset }) => $pin === ColumnPin.LEFT && $pinnedOffset !== void 0 ? `${$pinnedOffset}px` : "auto";
+var _exp3 = () => ({ $pin, $pinnedOffset }) => $pin === ColumnPin.RIGHT && $pinnedOffset !== void 0 ? `${$pinnedOffset}px` : "auto";
+var _exp4 = () => ({ $width }) => `0 0 ${$width}px`;
+var _exp5 = () => ({ $align }) => match($align).with(ColumnAlign.CENTER, () => "center").with(ColumnAlign.RIGHT, () => "flex-end").otherwise(() => "flex-start");
+var _exp6 = () => ({ theme }) => theme.color.background.tertiary;
+var _exp7 = () => ({ theme }) => theme.color.border.primary;
+var _exp8 = () => ({ $pin, theme }) => $pin === ColumnPin.LEFT ? `0.5px solid ${theme.color.border.primary}` : "none";
+var _exp9 = () => ({ $pin, theme }) => $pin === ColumnPin.RIGHT ? `0.5px solid ${theme.color.border.primary}` : "none";
+var HeaderCellContainer = withTheme(/*#__PURE__*/ styled("th")({
+	name: "HeaderCellContainer",
+	class: "hn1lp9n",
+	propsAsIs: false,
+	vars: {
+		"hn1lp9n-0": [_exp()],
+		"hn1lp9n-1": [_exp2()],
+		"hn1lp9n-2": [_exp3()],
+		"hn1lp9n-3": [_exp4()],
+		"hn1lp9n-4": [_exp5()],
+		"hn1lp9n-5": [_exp6()],
+		"hn1lp9n-6": [_exp7()],
+		"hn1lp9n-7": [_exp8()],
+		"hn1lp9n-8": [_exp9()]
+	}
+}));
+var HeaderContent = /*#__PURE__*/ styled("div")({
+	name: "HeaderContent",
+	class: "h5b2q63",
+	propsAsIs: false
+});
+var MenuTriggerWrapper = /*#__PURE__*/ styled("div")({
+	name: "MenuTriggerWrapper",
+	class: "m1q357fu",
+	propsAsIs: false
+});
+var _exp0 = () => ({ theme }) => theme.color.background.galaxy;
+var ResizeHandle = withTheme(/*#__PURE__*/ styled("div")({
+	name: "ResizeHandle",
+	class: "r10tums3",
+	propsAsIs: false,
+	vars: { "r10tums3-0": [_exp0()] }
+}));
+function SpreadsheetHeaderCellInner({ column, width, pin, pinnedOffset, onResizeStart, getAllRows }) {
+	const [isMenuOpen, setIsMenuOpen] = useState(false);
+	const handleResizeMouseDown = useCallback((e) => {
+		e.preventDefault();
+		e.stopPropagation();
+		onResizeStart(column.id, e.clientX);
+	}, [column.id, onResizeStart]);
+	const headerActions = column.headerActions ?? [];
+	const enrichmentActions = column.enrichmentActions ?? [];
+	const hasMenu = headerActions.length > 0 || enrichmentActions.length > 0;
+	return /* @__PURE__ */ jsxs(HeaderCellContainer, {
+		$width: width,
+		$pin: pin,
+		$pinnedOffset: pinnedOffset,
+		$align: column.align,
+		children: [
+			/* @__PURE__ */ jsx(HeaderContent, { children: /* @__PURE__ */ jsx(Text, {
+				variant: TextVariant.TERTIARY,
+				weight: TextWeight.MEDIUM,
+				size: TextSize.BODY_SM,
+				isEllipsis: true,
+				children: column.header ?? column.id
+			}) }),
+			hasMenu && /* @__PURE__ */ jsx(MenuTriggerWrapper, {
+				className: "header-menu-trigger",
+				children: /* @__PURE__ */ jsx(Dropdown, {
+					body: /* @__PURE__ */ jsxs(FlexWrapper, {
+						direction: FlexDirection.COLUMN,
+						gap: 2,
+						children: [enrichmentActions.map((action) => /* @__PURE__ */ jsx(DropdownItem, {
+							icon: action.icon,
+							label: action.label,
+							onClick: () => {
+								const rows = getAllRows?.() ?? [];
+								action.onAction(column.id, rows);
+								setIsMenuOpen(false);
+							}
+						}, `enrich-${action.id}`)), headerActions.map((action) => /* @__PURE__ */ jsx(DropdownItem, {
+							icon: action.icon,
+							label: action.label,
+							variant: action.variant,
+							onClick: () => {
+								action.onAction(column.id);
+								setIsMenuOpen(false);
+							}
+						}, `action-${action.id}`))]
+					}),
+					position: DropdownPosition.BOTTOM_END,
+					isOpen: isMenuOpen,
+					onClose: () => setIsMenuOpen(false),
+					minWidth: 160,
+					children: /* @__PURE__ */ jsx(Button, {
+						icon: DotsThreeVerticalIcon,
+						variant: ButtonVariant.TERTIARY,
+						size: ButtonSize.SMALL,
+						onClick: (e) => {
+							e.stopPropagation();
+							setIsMenuOpen(!isMenuOpen);
+						}
+					})
+				})
+			}),
+			column.enableResize !== false && /* @__PURE__ */ jsx(ResizeHandle, { onMouseDown: handleResizeMouseDown })
+		]
+	});
+}
+var SpreadsheetHeaderCell = React.memo(SpreadsheetHeaderCellInner);
+//#endregion
+export { SpreadsheetHeaderCell as default };

package/dist/spreadsheet/SpreadsheetRow.d.ts

@@ -0,0 +1,21 @@
+import React from "react";
+import { type EditingCell, type SpreadsheetColumnDef, type SpreadsheetRowAction } from "./types";
+export interface SpreadsheetRowProps<TData> {
+    rowData: TData | undefined;
+    rowIndex: number;
+    translateY: number;
+    rowHeight: number;
+    isLastRow: boolean;
+    columns: SpreadsheetColumnDef<TData, unknown>[];
+    pinnedOffsets: Map<string, number>;
+    getColumnWidth: (col: SpreadsheetColumnDef<TData, unknown>) => number;
+    editingCell: EditingCell | null;
+    onStartEditing: (rowIndex: number, columnId: string) => void;
+    onCommitEditing: () => void;
+    onCancelEditing: () => void;
+    rowActions?: SpreadsheetRowAction<TData>[];
+    showActionColumn?: boolean;
+}
+declare function SpreadsheetRowInner<TData>({ rowData, rowIndex, translateY, rowHeight, isLastRow, columns, pinnedOffsets, getColumnWidth, editingCell, onStartEditing, onCommitEditing, onCancelEditing, rowActions, showActionColumn, }: SpreadsheetRowProps<TData>): React.JSX.Element | null;
+declare const SpreadsheetRow: typeof SpreadsheetRowInner;
+export default SpreadsheetRow;

package/dist/spreadsheet/SpreadsheetRow.js

@@ -0,0 +1,68 @@
+import { withTheme } from "../theme/GalaxyTheme.js";
+import SpreadsheetRowActionCell from "./SpreadsheetRowActionCell.js";
+import SpreadsheetCell from "./SpreadsheetCell.js";
+/* empty css                         */
+import { styled } from "@linaria/react";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/spreadsheet/SpreadsheetRow.tsx
+var _exp = () => ({ theme }) => theme.color.background.primary;
+var _exp2 = () => ({ theme }) => theme.color.border.primary;
+var ActionSpacerCell = withTheme(/*#__PURE__*/ styled("td")({
+	name: "ActionSpacerCell",
+	class: "a1thqwpm",
+	propsAsIs: false,
+	vars: {
+		"a1thqwpm-0": [_exp()],
+		"a1thqwpm-1": [_exp2()]
+	}
+}));
+var _exp3 = () => ({ $translateY }) => $translateY;
+var _exp4 = () => ({ $rowHeight }) => $rowHeight;
+var _exp5 = () => ({ $isLastRow, theme }) => $isLastRow ? "none" : `0.5px solid ${theme.color.border.primary}`;
+var _exp6 = () => ({ theme }) => theme.color.background.tertiary;
+var RowContainer = withTheme(/*#__PURE__*/ styled("tr")({
+	name: "RowContainer",
+	class: "r1frty7c",
+	propsAsIs: false,
+	vars: {
+		"r1frty7c-0": [_exp3(), "px"],
+		"r1frty7c-1": [_exp4(), "px"],
+		"r1frty7c-2": [_exp5()],
+		"r1frty7c-3": [_exp6()]
+	}
+}));
+function SpreadsheetRowInner({ rowData, rowIndex, translateY, rowHeight, isLastRow, columns, pinnedOffsets, getColumnWidth, editingCell, onStartEditing, onCommitEditing, onCancelEditing, rowActions, showActionColumn }) {
+	if (!rowData) return null;
+	return /* @__PURE__ */ jsxs(RowContainer, {
+		$translateY: translateY,
+		$rowHeight: rowHeight,
+		$isLastRow: isLastRow,
+		children: [columns.map((col) => /* @__PURE__ */ jsx(SpreadsheetCell, {
+			column: col,
+			row: rowData,
+			rowIndex,
+			isEditing: editingCell?.rowIndex === rowIndex && editingCell?.columnId === col.id,
+			onStartEditing: () => onStartEditing(rowIndex, col.id),
+			onCommit: (value) => {
+				col.onCellChange?.(rowIndex, rowData, value);
+				onCommitEditing();
+			},
+			onCancel: onCancelEditing,
+			width: getColumnWidth(col),
+			pin: col.pin,
+			pinnedOffset: pinnedOffsets.get(col.id),
+			align: col.align,
+			density: "MEDIUM"
+		}, col.id)), showActionColumn && rowActions && rowActions.length > 0 ? /* @__PURE__ */ jsx(SpreadsheetRowActionCell, {
+			row: rowData,
+			rowIndex,
+			actions: rowActions
+		}) : showActionColumn ? /* @__PURE__ */ jsx(ActionSpacerCell, {}) : null]
+	});
+}
+var SpreadsheetRow = React.memo(SpreadsheetRowInner, (prev, next) => {
+	return prev.rowData === next.rowData && prev.translateY === next.translateY && prev.isLastRow === next.isLastRow && prev.columns === next.columns && prev.editingCell === next.editingCell && prev.getColumnWidth === next.getColumnWidth;
+});
+//#endregion
+export { SpreadsheetRow as default };

package/dist/spreadsheet/SpreadsheetRowActionCell.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import type { SpreadsheetRowAction } from "./types";
+export interface SpreadsheetRowActionCellProps<TData> {
+    row: TData;
+    rowIndex: number;
+    actions: SpreadsheetRowAction<TData>[];
+    pinnedOffset?: number;
+}
+declare function SpreadsheetRowActionCellInner<TData>({ row, rowIndex, actions, pinnedOffset, }: SpreadsheetRowActionCellProps<TData>): React.JSX.Element;
+declare const SpreadsheetRowActionCell: typeof SpreadsheetRowActionCellInner;
+export default SpreadsheetRowActionCell;

package/dist/spreadsheet/SpreadsheetRowActionCell.js

@@ -0,0 +1,60 @@
+import { withTheme } from "../theme/GalaxyTheme.js";
+import FlexWrapper, { FlexDirection } from "../containers/FlexWrapper.js";
+import Button, { ButtonSize, ButtonVariant } from "../buttons/Button.js";
+import Dropdown, { DropdownPosition } from "../dropdown/Dropdown.js";
+import DropdownItem from "../dropdown/DropdownItem.js";
+/* empty css                                   */
+import { styled } from "@linaria/react";
+import React, { useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { DotsThreeVerticalIcon } from "@phosphor-icons/react";
+//#region src/spreadsheet/SpreadsheetRowActionCell.tsx
+var _exp = () => ({ $pinnedOffset }) => $pinnedOffset !== void 0 ? `${$pinnedOffset}px` : "0";
+var _exp2 = () => ({ theme }) => theme.color.background.primary;
+var _exp3 = () => ({ theme }) => theme.color.border.primary;
+var ActionCellContainer = withTheme(/*#__PURE__*/ styled("td")({
+	name: "ActionCellContainer",
+	class: "a1b1bj84",
+	propsAsIs: false,
+	vars: {
+		"a1b1bj84-0": [_exp()],
+		"a1b1bj84-1": [_exp2()],
+		"a1b1bj84-2": [_exp3()]
+	}
+}));
+function SpreadsheetRowActionCellInner({ row, rowIndex, actions, pinnedOffset }) {
+	const [isOpen, setIsOpen] = useState(false);
+	return /* @__PURE__ */ jsx(ActionCellContainer, {
+		$pinnedOffset: pinnedOffset,
+		children: /* @__PURE__ */ jsx(Dropdown, {
+			body: /* @__PURE__ */ jsx(FlexWrapper, {
+				direction: FlexDirection.COLUMN,
+				gap: 2,
+				children: actions.map((action) => /* @__PURE__ */ jsx(DropdownItem, {
+					icon: action.icon,
+					label: action.label,
+					onClick: () => {
+						action.onAction(rowIndex, row);
+						setIsOpen(false);
+					}
+				}, action.id))
+			}),
+			position: DropdownPosition.BOTTOM_END,
+			isOpen,
+			onClose: () => setIsOpen(false),
+			minWidth: 140,
+			children: /* @__PURE__ */ jsx(Button, {
+				icon: DotsThreeVerticalIcon,
+				variant: ButtonVariant.TERTIARY,
+				size: ButtonSize.SMALL,
+				onClick: (e) => {
+					e.stopPropagation();
+					setIsOpen(!isOpen);
+				}
+			})
+		})
+	});
+}
+var SpreadsheetRowActionCell = React.memo(SpreadsheetRowActionCellInner);
+//#endregion
+export { SpreadsheetRowActionCell as default };

package/dist/spreadsheet/hooks/useColumnResize.d.ts

@@ -0,0 +1,6 @@
+import type { SpreadsheetColumnDef } from "../types";
+export declare function useColumnResize<TData>(columns: SpreadsheetColumnDef<TData, unknown>[]): {
+    getColumnWidth: (col: SpreadsheetColumnDef<TData, unknown>) => number;
+    onResizeStart: (columnId: string, clientX: number) => void;
+    widthOverrides: Map<string, number>;
+};

package/dist/spreadsheet/hooks/useColumnResize.js

@@ -0,0 +1,46 @@
+import { useCallback, useRef, useState } from "react";
+//#region src/spreadsheet/hooks/useColumnResize.ts
+function useColumnResize(columns) {
+	const [widthOverrides, setWidthOverrides] = useState(/* @__PURE__ */ new Map());
+	const resizeRef = useRef(null);
+	return {
+		getColumnWidth: useCallback((col) => {
+			return widthOverrides.get(col.id) ?? col.size ?? 150;
+		}, [widthOverrides]),
+		onResizeStart: useCallback((columnId, clientX) => {
+			const col = columns.find((c) => c.id === columnId);
+			if (!col || col.enableResize === false) return;
+			resizeRef.current = {
+				columnId,
+				startX: clientX,
+				startWidth: widthOverrides.get(columnId) ?? col.size ?? 150
+			};
+			const onMouseMove = (e) => {
+				if (!resizeRef.current) return;
+				const delta = e.clientX - resizeRef.current.startX;
+				const minWidth = col.minSize ?? 60;
+				const maxWidth = col.maxSize ?? 800;
+				const newWidth = Math.min(maxWidth, Math.max(minWidth, resizeRef.current.startWidth + delta));
+				setWidthOverrides((prev) => {
+					const next = new Map(prev);
+					next.set(columnId, newWidth);
+					return next;
+				});
+			};
+			const onMouseUp = () => {
+				resizeRef.current = null;
+				document.removeEventListener("mousemove", onMouseMove);
+				document.removeEventListener("mouseup", onMouseUp);
+				document.body.style.cursor = "";
+				document.body.style.userSelect = "";
+			};
+			document.addEventListener("mousemove", onMouseMove);
+			document.addEventListener("mouseup", onMouseUp);
+			document.body.style.cursor = "col-resize";
+			document.body.style.userSelect = "none";
+		}, [columns, widthOverrides]),
+		widthOverrides
+	};
+}
+//#endregion
+export { useColumnResize };

package/dist/spreadsheet/hooks/useSpreadsheetEditing.d.ts

@@ -0,0 +1,13 @@
+import type { EditingCell } from "../types";
+interface UseSpreadsheetEditingOptions {
+    editingCell?: EditingCell | null;
+    onEditingCellChange?: (cell: EditingCell | null) => void;
+}
+export declare function useSpreadsheetEditing(options: UseSpreadsheetEditingOptions): {
+    editingCell: EditingCell | null;
+    startEditing: (rowIndex: number, columnId: string) => void;
+    cancelEditing: () => void;
+    commitEditing: () => void;
+    isEditing: (rowIndex: number, columnId: string) => boolean;
+};
+export {};

package/dist/spreadsheet/hooks/useSpreadsheetEditing.js

@@ -0,0 +1,41 @@
+import { useCallback, useEffect, useState } from "react";
+//#region src/spreadsheet/hooks/useSpreadsheetEditing.ts
+function useSpreadsheetEditing(options) {
+	const { editingCell: controlledCell, onEditingCellChange } = options;
+	const isControlled = controlledCell !== void 0;
+	const [internalCell, setInternalCell] = useState(null);
+	const currentCell = isControlled ? controlledCell : internalCell;
+	const setEditingCell = useCallback((cell) => {
+		if (isControlled) onEditingCellChange?.(cell);
+		else setInternalCell(cell);
+	}, [isControlled, onEditingCellChange]);
+	const startEditing = useCallback((rowIndex, columnId) => {
+		setEditingCell({
+			rowIndex,
+			columnId
+		});
+	}, [setEditingCell]);
+	const cancelEditing = useCallback(() => {
+		setEditingCell(null);
+	}, [setEditingCell]);
+	const commitEditing = useCallback(() => {
+		setEditingCell(null);
+	}, [setEditingCell]);
+	useEffect(() => {
+		if (!currentCell) return;
+		const onKeyDown = (e) => {
+			if (e.key === "Escape") cancelEditing();
+		};
+		document.addEventListener("keydown", onKeyDown);
+		return () => document.removeEventListener("keydown", onKeyDown);
+	}, [currentCell, cancelEditing]);
+	return {
+		editingCell: currentCell,
+		startEditing,
+		cancelEditing,
+		commitEditing,
+		isEditing: (rowIndex, columnId) => currentCell?.rowIndex === rowIndex && currentCell?.columnId === columnId
+	};
+}
+//#endregion
+export { useSpreadsheetEditing };

package/dist/spreadsheet/types.d.ts

@@ -0,0 +1,92 @@
+import type { ReactNode } from "react";
+import { ColumnAlign, ColumnPin, TableDensity } from "../table/InfiniteTable";
+import type { TextVariant } from "../text/Text";
+export { ColumnAlign, ColumnPin, TableDensity };
+export declare enum CellEnrichmentStatus {
+    IDLE = "IDLE",
+    PENDING = "PENDING",
+    RUNNING = "RUNNING",
+    COMPLETE = "COMPLETE",
+    ERROR = "ERROR"
+}
+export interface SpreadsheetColumnAction<TData> {
+    id: string;
+    label: string;
+    icon?: ReactNode;
+    onAction: (columnId: string, rows: TData[]) => void;
+}
+export declare enum SpreadsheetCellType {
+    TEXT = "TEXT",
+    NUMBER = "NUMBER",
+    BOOLEAN = "BOOLEAN",
+    ENUM = "ENUM",
+    DATE = "DATE",
+    READONLY = "READONLY"
+}
+export interface SpreadsheetHeaderAction {
+    id: string;
+    label: string;
+    icon?: ReactNode;
+    variant?: TextVariant;
+    onAction: (columnId: string) => void;
+}
+export interface SpreadsheetColumnDef<TData, TValue = unknown> {
+    id: string;
+    accessorFn?: (row: TData) => TValue;
+    header?: string;
+    size?: number;
+    minSize?: number;
+    maxSize?: number;
+    pin?: ColumnPin;
+    align?: ColumnAlign;
+    cellLoading?: () => ReactNode;
+    cellType: SpreadsheetCellType;
+    editable?: boolean;
+    enumOptions?: string[];
+    onCellChange?: (rowIndex: number, row: TData, value: TValue) => void;
+    cellRenderer?: (props: {
+        value: TValue;
+        row: TData;
+        rowIndex: number;
+        isEditing: boolean;
+    }) => ReactNode;
+    headerActions?: SpreadsheetHeaderAction[];
+    enableResize?: boolean;
+    enrichmentActions?: SpreadsheetColumnAction<TData>[];
+    getCellEnrichmentStatus?: (row: TData, rowIndex: number) => CellEnrichmentStatus;
+}
+export interface SpreadsheetRowAction<TData> {
+    id: string;
+    label: string;
+    icon?: ReactNode;
+    onAction: (rowIndex: number, row: TData) => void;
+}
+export interface EditingCell {
+    rowIndex: number;
+    columnId: string;
+}
+export interface InfiniteSpreadsheetProps<TData> {
+    columns: SpreadsheetColumnDef<TData, unknown>[];
+    totalRowCount: number;
+    getRowData: (index: number) => TData | undefined;
+    getRowId?: (row: TData, index: number) => string;
+    height?: number | string;
+    width?: number | string;
+    fillWidth?: boolean;
+    fillHeight?: boolean;
+    density?: TableDensity;
+    estimateRowHeight?: number;
+    overscan?: number;
+    hasNextPage?: boolean;
+    isFetchingNextPage?: boolean;
+    fetchNextPage?: () => void;
+    isLoading?: boolean;
+    isError?: boolean;
+    loadingRowCount?: number;
+    contentWhenEmpty?: ReactNode;
+    contentWhenError?: ReactNode | ((error?: Error) => ReactNode);
+    onAddColumn?: () => void;
+    rowActions?: SpreadsheetRowAction<TData>[];
+    editingCell?: EditingCell | null;
+    onEditingCellChange?: (cell: EditingCell | null) => void;
+}

package/dist/spreadsheet/types.js

@@ -0,0 +1,21 @@
+import { ColumnAlign, ColumnPin, TableDensity } from "../table/InfiniteTable.js";
+//#region src/spreadsheet/types.ts
+var CellEnrichmentStatus = /* @__PURE__ */ function(CellEnrichmentStatus) {
+	CellEnrichmentStatus["IDLE"] = "IDLE";
+	CellEnrichmentStatus["PENDING"] = "PENDING";
+	CellEnrichmentStatus["RUNNING"] = "RUNNING";
+	CellEnrichmentStatus["COMPLETE"] = "COMPLETE";
+	CellEnrichmentStatus["ERROR"] = "ERROR";
+	return CellEnrichmentStatus;
+}({});
+var SpreadsheetCellType = /* @__PURE__ */ function(SpreadsheetCellType) {
+	SpreadsheetCellType["TEXT"] = "TEXT";
+	SpreadsheetCellType["NUMBER"] = "NUMBER";
+	SpreadsheetCellType["BOOLEAN"] = "BOOLEAN";
+	SpreadsheetCellType["ENUM"] = "ENUM";
+	SpreadsheetCellType["DATE"] = "DATE";
+	SpreadsheetCellType["READONLY"] = "READONLY";
+	return SpreadsheetCellType;
+}({});
+//#endregion
+export { CellEnrichmentStatus, ColumnAlign, ColumnPin, SpreadsheetCellType, TableDensity };