@galaxy-io/dls 1.0.3

package/dist/spreadsheet/InfiniteSpreadsheet.js

@@ -0,0 +1,265 @@
+import { withTheme } from "../theme/GalaxyTheme.js";
+import { getCssSizeValue } from "../utils/linaria.js";
+import Text, { TextVariant } from "../text/Text.js";
+import Button, { ButtonSize, ButtonVariant } from "../buttons/Button.js";
+import { ColumnPin, TableDensity } from "../table/InfiniteTable.js";
+import SpreadsheetRow from "./SpreadsheetRow.js";
+import SpreadsheetHeaderCell from "./SpreadsheetHeaderCell.js";
+import { useColumnResize } from "./hooks/useColumnResize.js";
+import { useSpreadsheetEditing } from "./hooks/useSpreadsheetEditing.js";
+/* empty css                              */
+import { styled } from "@linaria/react";
+import { match } from "ts-pattern";
+import { useCallback, useEffect, useMemo, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useVirtualizer } from "@tanstack/react-virtual";
+import { PlusIcon } from "@phosphor-icons/react";
+//#region src/spreadsheet/InfiniteSpreadsheet.tsx
+var _exp = () => ({ $width, $fillWidth }) => {
+	if ($fillWidth) return "100%";
+	if ($width) return getCssSizeValue($width);
+	return "auto";
+};
+var _exp2 = () => ({ $height, $fillHeight }) => {
+	if ($fillHeight) return "100%";
+	if ($height) return getCssSizeValue($height);
+	return "auto";
+};
+var _exp3 = () => ({ theme }) => theme.color.border.primary;
+var OuterContainer = withTheme(/*#__PURE__*/ styled("div")({
+	name: "OuterContainer",
+	class: "oi86aya",
+	propsAsIs: false,
+	vars: {
+		"oi86aya-0": [_exp()],
+		"oi86aya-1": [_exp2()],
+		"oi86aya-2": [_exp3()]
+	}
+}));
+var ScrollContainer = /*#__PURE__*/ styled("div")({
+	name: "ScrollContainer",
+	class: "s1i7g9s5",
+	propsAsIs: false
+});
+var StyledTable = /*#__PURE__*/ styled("table")({
+	name: "StyledTable",
+	class: "s1feknc2",
+	propsAsIs: false
+});
+var TableHead = /*#__PURE__*/ styled("thead")({
+	name: "TableHead",
+	class: "t17z2o5s",
+	propsAsIs: false
+});
+var TableHeaderRow = /*#__PURE__*/ styled("tr")({
+	name: "TableHeaderRow",
+	class: "t1icxkvp",
+	propsAsIs: false
+});
+var _exp4 = () => ({ $virtualHeight }) => `${$virtualHeight}px`;
+var TableBody = /*#__PURE__*/ styled("tbody")({
+	name: "TableBody",
+	class: "tkfeb1b",
+	propsAsIs: false,
+	vars: { "tkfeb1b-0": [_exp4()] }
+});
+var EmptyContentWrapper = /*#__PURE__*/ styled("div")({
+	name: "EmptyContentWrapper",
+	class: "e9o89y4",
+	propsAsIs: false
+});
+var _exp5 = () => ({ $rowHeight }) => `${$rowHeight}px`;
+var _exp6 = () => ({ theme }) => theme.color.border.primary;
+var _exp7 = () => ({ theme }) => theme.color.background.primary;
+var LoadingRow = withTheme(/*#__PURE__*/ styled("tr")({
+	name: "LoadingRow",
+	class: "lsppbp5",
+	propsAsIs: false,
+	vars: {
+		"lsppbp5-0": [_exp5()],
+		"lsppbp5-1": [_exp6()],
+		"lsppbp5-2": [_exp7()]
+	}
+}));
+var _exp8 = () => ({ $width }) => `0 0 ${$width}px`;
+var _exp9 = () => ({ $pin }) => $pin ? "sticky" : "static";
+var _exp0 = () => ({ $pin }) => $pin ? 5 : 0;
+var _exp1 = () => ({ $pin, $pinnedOffset }) => $pin === ColumnPin.LEFT && $pinnedOffset !== void 0 ? `${$pinnedOffset}px` : "auto";
+var _exp10 = () => ({ $pin, $pinnedOffset }) => $pin === ColumnPin.RIGHT && $pinnedOffset !== void 0 ? `${$pinnedOffset}px` : "auto";
+var _exp11 = () => ({ $pin, theme }) => $pin ? theme.color.background.primary : "transparent";
+var _exp12 = () => ({ $pin, theme }) => $pin === ColumnPin.LEFT ? `0.5px solid ${theme.color.border.primary}` : "none";
+var _exp13 = () => ({ $pin, theme }) => $pin === ColumnPin.RIGHT ? `0.5px solid ${theme.color.border.primary}` : "none";
+var LoadingCell = withTheme(/*#__PURE__*/ styled("td")({
+	name: "LoadingCell",
+	class: "lq0gium",
+	propsAsIs: false,
+	vars: {
+		"lq0gium-0": [_exp8()],
+		"lq0gium-1": [_exp9()],
+		"lq0gium-2": [_exp0()],
+		"lq0gium-3": [_exp1()],
+		"lq0gium-4": [_exp10()],
+		"lq0gium-5": [_exp11()],
+		"lq0gium-6": [_exp12()],
+		"lq0gium-7": [_exp13()]
+	}
+}));
+var _exp14 = () => ({ theme }) => theme.color.background.tertiary;
+var LoadingSkeleton = withTheme(/*#__PURE__*/ styled("div")({
+	name: "LoadingSkeleton",
+	class: "lmht3eu",
+	propsAsIs: false,
+	vars: { "lmht3eu-0": [_exp14()] }
+}));
+var _exp15 = () => ({ theme }) => theme.color.background.tertiary;
+var _exp17 = () => ({ theme }) => theme.color.border.primary;
+var RowActionHeaderCell = withTheme(/*#__PURE__*/ styled("th")({
+	name: "RowActionHeaderCell",
+	class: "r1ebnv8i",
+	propsAsIs: false,
+	vars: {
+		"r1ebnv8i-0": [_exp15()],
+		"r1ebnv8i-1": [_exp17()]
+	}
+}));
+function InfiniteSpreadsheet(props) {
+	const { columns, totalRowCount, getRowData, getRowId, height, width, fillWidth, fillHeight, density = TableDensity.MEDIUM, estimateRowHeight, overscan = 25, hasNextPage, isFetchingNextPage, fetchNextPage, isLoading = false, isError = false, loadingRowCount = 5, contentWhenEmpty, contentWhenError, onAddColumn, rowActions, editingCell: controlledEditingCell, onEditingCellChange } = props;
+	const scrollContainerRef = useRef(null);
+	const { getColumnWidth, onResizeStart } = useColumnResize(columns);
+	const { editingCell, startEditing, commitEditing, cancelEditing } = useSpreadsheetEditing({
+		editingCell: controlledEditingCell,
+		onEditingCellChange
+	});
+	const pinnedOffsets = useMemo(() => {
+		const offsets = /* @__PURE__ */ new Map();
+		let leftOffset = 0;
+		columns.forEach((col) => {
+			if (col.pin === ColumnPin.LEFT) {
+				offsets.set(col.id, leftOffset);
+				leftOffset += getColumnWidth(col);
+			}
+		});
+		let rightOffset = rowActions && rowActions.length > 0 || onAddColumn ? 48 : 0;
+		[...columns].reverse().forEach((col) => {
+			if (col.pin === ColumnPin.RIGHT) {
+				offsets.set(col.id, rightOffset);
+				rightOffset += getColumnWidth(col);
+			}
+		});
+		return offsets;
+	}, [
+		columns,
+		getColumnWidth,
+		rowActions,
+		onAddColumn
+	]);
+	const rowHeight = estimateRowHeight ?? match(density).with(TableDensity.SMALL, () => 36).with(TableDensity.MEDIUM, () => 44).with(TableDensity.LARGE, () => 56).exhaustive();
+	const virtualizer = useVirtualizer({
+		count: totalRowCount,
+		getScrollElement: () => scrollContainerRef.current,
+		estimateSize: () => rowHeight,
+		overscan
+	});
+	const virtualRows = virtualizer.getVirtualItems();
+	useEffect(() => {
+		const container = scrollContainerRef.current;
+		if (!container || !fetchNextPage) return;
+		const onScroll = () => {
+			const { scrollHeight, scrollTop, clientHeight } = container;
+			if (scrollHeight - scrollTop - clientHeight < 500 && hasNextPage && !isFetchingNextPage) fetchNextPage();
+		};
+		container.addEventListener("scroll", onScroll, { passive: true });
+		return () => container.removeEventListener("scroll", onScroll);
+	}, [
+		hasNextPage,
+		isFetchingNextPage,
+		fetchNextPage
+	]);
+	useEffect(() => {
+		const container = scrollContainerRef.current;
+		if (!container) return;
+		const onWheel = (e) => {
+			container.scrollTop += e.deltaY;
+			container.scrollLeft += e.deltaX;
+		};
+		container.addEventListener("wheel", onWheel, { passive: true });
+		return () => container.removeEventListener("wheel", onWheel);
+	}, []);
+	const isEmpty = totalRowCount === 0 && !isLoading;
+	const showLoading = isLoading && totalRowCount === 0;
+	const showError = isError && totalRowCount === 0;
+	const showActionColumn = rowActions && rowActions.length > 0 || onAddColumn;
+	const getAllRows = useCallback(() => {
+		const rows = [];
+		for (let i = 0; i < totalRowCount; i++) {
+			const row = getRowData(i);
+			if (row) rows.push(row);
+		}
+		return rows;
+	}, [totalRowCount, getRowData]);
+	const renderLoadingRows = () => Array.from({ length: loadingRowCount }).map((_, i) => /* @__PURE__ */ jsxs(LoadingRow, {
+		$rowHeight: rowHeight,
+		children: [columns.map((col) => /* @__PURE__ */ jsx(LoadingCell, {
+			$width: getColumnWidth(col),
+			$pin: col.pin,
+			$pinnedOffset: pinnedOffsets.get(col.id),
+			children: col.cellLoading ? col.cellLoading() : /* @__PURE__ */ jsx(LoadingSkeleton, {})
+		}, col.id)), showActionColumn && /* @__PURE__ */ jsx(LoadingCell, {
+			$width: 48,
+			$pin: ColumnPin.RIGHT,
+			$pinnedOffset: 0
+		})]
+	}, `loading-${i}`));
+	return /* @__PURE__ */ jsxs(OuterContainer, {
+		$width: width,
+		$height: height,
+		$fillWidth: fillWidth,
+		$fillHeight: fillHeight,
+		children: [/* @__PURE__ */ jsx(ScrollContainer, {
+			ref: scrollContainerRef,
+			children: /* @__PURE__ */ jsxs(StyledTable, { children: [/* @__PURE__ */ jsx(TableHead, { children: /* @__PURE__ */ jsxs(TableHeaderRow, { children: [columns.map((col) => /* @__PURE__ */ jsx(SpreadsheetHeaderCell, {
+				column: col,
+				width: getColumnWidth(col),
+				pin: col.pin,
+				pinnedOffset: pinnedOffsets.get(col.id),
+				onResizeStart,
+				getAllRows
+			}, col.id)), showActionColumn && /* @__PURE__ */ jsx(RowActionHeaderCell, { children: onAddColumn && /* @__PURE__ */ jsx(Button, {
+				icon: PlusIcon,
+				variant: ButtonVariant.TERTIARY,
+				size: ButtonSize.SMALL,
+				onClick: onAddColumn
+			}) })] }) }), /* @__PURE__ */ jsxs(TableBody, {
+				$virtualHeight: virtualizer.getTotalSize(),
+				children: [showLoading ? renderLoadingRows() : showError ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", {
+					colSpan: columns.length,
+					children: typeof contentWhenError === "function" ? contentWhenError() : contentWhenError ?? /* @__PURE__ */ jsx(Text, {
+						variant: TextVariant.ERROR,
+						children: "Error loading data"
+					})
+				}) }) : virtualRows.map((virtualRow) => {
+					const rowData = getRowData(virtualRow.index);
+					const rowId = rowData && getRowId ? getRowId(rowData, virtualRow.index) : String(virtualRow.index);
+					return /* @__PURE__ */ jsx(SpreadsheetRow, {
+						rowData,
+						rowIndex: virtualRow.index,
+						translateY: virtualRow.start,
+						rowHeight,
+						isLastRow: virtualRow.index === totalRowCount - 1,
+						columns,
+						pinnedOffsets,
+						getColumnWidth,
+						editingCell,
+						onStartEditing: startEditing,
+						onCommitEditing: commitEditing,
+						onCancelEditing: cancelEditing,
+						rowActions,
+						showActionColumn: !!showActionColumn
+					}, rowId);
+				}), isFetchingNextPage && renderLoadingRows()]
+			})] })
+		}), isEmpty && contentWhenEmpty && /* @__PURE__ */ jsx(EmptyContentWrapper, { children: contentWhenEmpty })]
+	});
+}
+//#endregion
+export { InfiniteSpreadsheet as default };

package/dist/spreadsheet/SpreadsheetAddColumnButton.d.ts

@@ -0,0 +1,6 @@
+export interface SpreadsheetAddColumnButtonProps {
+    onClick: () => void;
+    label?: string;
+}
+declare function SpreadsheetAddColumnButton({ onClick, label, }: SpreadsheetAddColumnButtonProps): import("react").JSX.Element;
+export default SpreadsheetAddColumnButton;

package/dist/spreadsheet/SpreadsheetAddColumnButton.js

@@ -0,0 +1,32 @@
+import { withTheme } from "../theme/GalaxyTheme.js";
+import Text, { TextSize, TextVariant } from "../text/Text.js";
+/* empty css                                     */
+import { styled } from "@linaria/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { PlusIcon } from "@phosphor-icons/react";
+//#region src/spreadsheet/SpreadsheetAddColumnButton.tsx
+var _exp = () => ({ theme }) => theme.color.background.secondary;
+var _exp2 = () => ({ theme }) => theme.color.border.primary;
+var _exp3 = () => ({ theme }) => theme.color.background.tertiary;
+var AddColumnCell = withTheme(/*#__PURE__*/ styled("th")({
+	name: "AddColumnCell",
+	class: "a1tvwf2d",
+	propsAsIs: false,
+	vars: {
+		"a1tvwf2d-0": [_exp()],
+		"a1tvwf2d-1": [_exp2()],
+		"a1tvwf2d-2": [_exp3()]
+	}
+}));
+function SpreadsheetAddColumnButton({ onClick, label = "Add column" }) {
+	return /* @__PURE__ */ jsxs(AddColumnCell, {
+		onClick,
+		children: [/* @__PURE__ */ jsx(PlusIcon, { size: 14 }), /* @__PURE__ */ jsx(Text, {
+			variant: TextVariant.TERTIARY,
+			size: TextSize.BODY_SM,
+			children: label
+		})]
+	});
+}
+//#endregion
+export { SpreadsheetAddColumnButton as default };

package/dist/spreadsheet/SpreadsheetCell.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+import { ColumnAlign, ColumnPin, type SpreadsheetColumnDef } from "./types";
+export interface SpreadsheetCellProps<TData> {
+    column: SpreadsheetColumnDef<TData, unknown>;
+    row: TData;
+    rowIndex: number;
+    isEditing: boolean;
+    onStartEditing: () => void;
+    onCommit: (value: unknown) => void;
+    onCancel: () => void;
+    width: number;
+    pin?: ColumnPin;
+    pinnedOffset?: number;
+    align?: ColumnAlign;
+    density: string;
+}
+declare function SpreadsheetCellInner<TData>({ column, row, rowIndex, isEditing, onStartEditing, onCommit, onCancel, width, pin, pinnedOffset, align, }: SpreadsheetCellProps<TData>): React.JSX.Element;
+declare const SpreadsheetCell: typeof SpreadsheetCellInner;
+export default SpreadsheetCell;

package/dist/spreadsheet/SpreadsheetCell.js

@@ -0,0 +1,115 @@
+import { withTheme } from "../theme/GalaxyTheme.js";
+import Text, { TextSize, TextVariant } from "../text/Text.js";
+import { ColumnAlign, ColumnPin } from "../table/InfiniteTable.js";
+import { CellEnrichmentStatus, SpreadsheetCellType } from "./types.js";
+import SpreadsheetCellEditor from "./SpreadsheetCellEditor.js";
+/* empty css                          */
+import { styled } from "@linaria/react";
+import { match } from "ts-pattern";
+import React, { useCallback } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/spreadsheet/SpreadsheetCell.tsx
+var _exp = () => ({ $pin }) => $pin ? "sticky" : "relative";
+var _exp2 = () => ({ $pin }) => $pin ? 5 : 0;
+var _exp3 = () => ({ $pin, $pinnedOffset }) => $pin === ColumnPin.LEFT && $pinnedOffset !== void 0 ? `${$pinnedOffset}px` : "auto";
+var _exp4 = () => ({ $pin, $pinnedOffset }) => $pin === ColumnPin.RIGHT && $pinnedOffset !== void 0 ? `${$pinnedOffset}px` : "auto";
+var _exp5 = () => ({ $width }) => `0 0 ${$width}px`;
+var _exp6 = () => ({ $align }) => match($align).with(ColumnAlign.CENTER, () => "center").with(ColumnAlign.RIGHT, () => "flex-end").otherwise(() => "flex-start");
+var _exp7 = () => ({ $isEditable }) => $isEditable ? "text" : "default";
+var _exp8 = () => ({ $pin, theme }) => $pin ? theme.color.background.primary : "transparent";
+var _exp9 = () => ({ $pin, theme }) => $pin === ColumnPin.LEFT ? `0.5px solid ${theme.color.border.primary}` : "none";
+var _exp0 = () => ({ $pin, theme }) => $pin === ColumnPin.RIGHT ? `0.5px solid ${theme.color.border.primary}` : "none";
+var _exp1 = () => ({ $isEditable, theme }) => $isEditable ? theme.color.background.tertiary : "transparent";
+var CellContainer = withTheme(/*#__PURE__*/ styled("td")({
+	name: "CellContainer",
+	class: "c1bx58xl",
+	propsAsIs: false,
+	vars: {
+		"c1bx58xl-0": [_exp()],
+		"c1bx58xl-1": [_exp2()],
+		"c1bx58xl-2": [_exp3()],
+		"c1bx58xl-3": [_exp4()],
+		"c1bx58xl-4": [_exp5()],
+		"c1bx58xl-5": [_exp6()],
+		"c1bx58xl-6": [_exp7()],
+		"c1bx58xl-7": [_exp8()],
+		"c1bx58xl-8": [_exp9()],
+		"c1bx58xl-9": [_exp0()],
+		"c1bx58xl-10": [_exp1()]
+	}
+}));
+var _exp10 = () => ({ $status, theme }) => match($status).with(CellEnrichmentStatus.PENDING, () => theme.color.text.tertiary).with(CellEnrichmentStatus.RUNNING, () => theme.color.background.galaxy).with(CellEnrichmentStatus.COMPLETE, () => theme.color.icon.success).with(CellEnrichmentStatus.ERROR, () => theme.color.text.error).otherwise(() => "transparent");
+var _exp11 = () => ({ $status }) => $status === CellEnrichmentStatus.RUNNING ? `animation: enrichPulse 1.2s ease-in-out infinite;
+         @keyframes enrichPulse {
+           0%, 100% { opacity: 1; }
+           50% { opacity: 0.3; }
+         }` : "";
+var StatusDot = withTheme(/*#__PURE__*/ styled("div")({
+	name: "StatusDot",
+	class: "sgqglvy",
+	propsAsIs: false,
+	vars: {
+		"sgqglvy-0": [_exp10()],
+		"sgqglvy-1": [_exp11()]
+	}
+}));
+function formatDisplayValue(value, cellType) {
+	if (value === null || value === void 0 || value === "") return "—";
+	return match(cellType).with(SpreadsheetCellType.BOOLEAN, () => value ? "Yes" : "No").with(SpreadsheetCellType.DATE, () => {
+		if (value instanceof Date) return value.toLocaleDateString();
+		return String(value);
+	}).otherwise(() => String(value));
+}
+function SpreadsheetCellInner({ column, row, rowIndex, isEditing, onStartEditing, onCommit, onCancel, width, pin, pinnedOffset, align }) {
+	const value = column.accessorFn ? column.accessorFn(row) : void 0;
+	const isEditable = column.editable !== false && column.cellType !== SpreadsheetCellType.READONLY;
+	const enrichmentStatus = column.getCellEnrichmentStatus?.(row, rowIndex) ?? CellEnrichmentStatus.IDLE;
+	const showStatusDot = enrichmentStatus !== CellEnrichmentStatus.IDLE;
+	const handleClick = useCallback(() => {
+		if (isEditable && !isEditing) onStartEditing();
+	}, [
+		isEditable,
+		isEditing,
+		onStartEditing
+	]);
+	if (column.cellRenderer) return /* @__PURE__ */ jsx(CellContainer, {
+		$width: width,
+		$pin: pin,
+		$pinnedOffset: pinnedOffset,
+		$align: align,
+		$isEditable: isEditable,
+		onClick: handleClick,
+		children: column.cellRenderer({
+			value,
+			row,
+			rowIndex,
+			isEditing
+		})
+	});
+	return /* @__PURE__ */ jsx(CellContainer, {
+		$width: width,
+		$pin: pin,
+		$pinnedOffset: pinnedOffset,
+		$align: align,
+		$isEditable: isEditable,
+		onClick: handleClick,
+		children: isEditing ? /* @__PURE__ */ jsx(SpreadsheetCellEditor, {
+			cellType: column.cellType,
+			value,
+			enumOptions: column.enumOptions,
+			onCommit: (newValue) => {
+				onCommit(newValue);
+				column.onCellChange?.(rowIndex, row, newValue);
+			},
+			onCancel
+		}) : /* @__PURE__ */ jsxs(Fragment, { children: [showStatusDot && /* @__PURE__ */ jsx(StatusDot, { $status: enrichmentStatus }), /* @__PURE__ */ jsx(Text, {
+			variant: TextVariant.PRIMARY,
+			size: TextSize.BODY_SM,
+			isEllipsis: true,
+			children: formatDisplayValue(value, column.cellType)
+		})] })
+	});
+}
+var SpreadsheetCell = React.memo(SpreadsheetCellInner);
+//#endregion
+export { SpreadsheetCell as default };

package/dist/spreadsheet/SpreadsheetCellEditor.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import { SpreadsheetCellType } from "./types";
+export interface SpreadsheetCellEditorProps {
+    cellType: SpreadsheetCellType;
+    value: unknown;
+    enumOptions?: string[];
+    onCommit: (value: unknown) => void;
+    onCancel: () => void;
+}
+declare function SpreadsheetCellEditor({ cellType, value, enumOptions, onCommit, onCancel, }: SpreadsheetCellEditorProps): React.JSX.Element;
+export default SpreadsheetCellEditor;

package/dist/spreadsheet/SpreadsheetCellEditor.js

@@ -0,0 +1,95 @@
+import { withTheme } from "../theme/GalaxyTheme.js";
+import { SpreadsheetCellType } from "./types.js";
+import SelectInput from "../inputs/SelectInput.js";
+import DateInput from "../inputs/DateInput.js";
+import NumberInput from "../inputs/NumberInput.js";
+import TextInput from "../inputs/TextInput.js";
+import ToggleInput from "../inputs/ToggleInput.js";
+/* empty css                                */
+import { styled } from "@linaria/react";
+import { match } from "ts-pattern";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/spreadsheet/SpreadsheetCellEditor.tsx
+var _exp = () => ({ theme }) => theme.color.background.primary;
+var _exp2 = () => ({ theme }) => theme.color.background.galaxy;
+var EditorWrapper = withTheme(/*#__PURE__*/ styled("div")({
+	name: "EditorWrapper",
+	class: "ejxsxoj",
+	propsAsIs: false,
+	vars: {
+		"ejxsxoj-0": [_exp()],
+		"ejxsxoj-1": [_exp2()]
+	}
+}));
+function SpreadsheetCellEditor({ cellType, value, enumOptions, onCommit, onCancel }) {
+	const wrapperRef = useRef(null);
+	const [localValue, setLocalValue] = useState(value);
+	useEffect(() => {
+		const handleClickOutside = (e) => {
+			if (wrapperRef.current && !wrapperRef.current.contains(e.target)) onCommit(localValue);
+		};
+		document.addEventListener("mousedown", handleClickOutside);
+		return () => document.removeEventListener("mousedown", handleClickOutside);
+	}, [onCommit, localValue]);
+	const handleKeyDown = useCallback((e) => {
+		if (e.key === "Enter" && !e.shiftKey) {
+			e.preventDefault();
+			onCommit(localValue);
+		} else if (e.key === "Escape") {
+			e.preventDefault();
+			onCancel();
+		} else if (e.key === "Tab") {
+			e.preventDefault();
+			onCommit(localValue);
+		}
+	}, [
+		localValue,
+		onCommit,
+		onCancel
+	]);
+	return /* @__PURE__ */ jsx(EditorWrapper, {
+		ref: wrapperRef,
+		children: match(cellType).with(SpreadsheetCellType.TEXT, () => /* @__PURE__ */ jsx(TextInput, {
+			value: String(localValue ?? ""),
+			onChange: (v) => setLocalValue(v),
+			onKeyDown: handleKeyDown,
+			autoFocus: true,
+			fillWidth: true
+		})).with(SpreadsheetCellType.NUMBER, () => /* @__PURE__ */ jsx(NumberInput, {
+			value: Number(localValue ?? 0),
+			onChange: (v) => setLocalValue(v),
+			onKeyDown: handleKeyDown,
+			autoFocus: true,
+			fillWidth: true
+		})).with(SpreadsheetCellType.BOOLEAN, () => /* @__PURE__ */ jsx(ToggleInput, {
+			value: Boolean(localValue),
+			onChange: (v) => {
+				onCommit(v);
+			}
+		})).with(SpreadsheetCellType.ENUM, () => {
+			const options = (enumOptions ?? []).map((opt) => ({
+				id: opt,
+				label: opt,
+				value: opt
+			}));
+			return /* @__PURE__ */ jsx(SelectInput, {
+				options,
+				value: options.find((o) => o.value === localValue) ?? null,
+				onChange: (opt) => {
+					onCommit(opt.value);
+				},
+				fillWidth: true,
+				isOpen: true
+			});
+		}).with(SpreadsheetCellType.DATE, () => /* @__PURE__ */ jsx(DateInput, {
+			value: localValue instanceof Date ? localValue : localValue ? new Date(String(localValue)) : null,
+			onChange: (v) => {
+				onCommit(v);
+			},
+			fillWidth: true
+		})).with(SpreadsheetCellType.READONLY, () => null).exhaustive()
+	});
+}
+//#endregion
+export { SpreadsheetCellEditor as default };

package/dist/spreadsheet/SpreadsheetHeaderCell.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import { ColumnPin, type SpreadsheetColumnDef } from "./types";
+export interface SpreadsheetHeaderCellProps<TData> {
+    column: SpreadsheetColumnDef<TData, unknown>;
+    width: number;
+    pin?: ColumnPin;
+    pinnedOffset?: number;
+    onResizeStart: (columnId: string, clientX: number) => void;
+    getAllRows?: () => TData[];
+}
+declare function SpreadsheetHeaderCellInner<TData>({ column, width, pin, pinnedOffset, onResizeStart, getAllRows, }: SpreadsheetHeaderCellProps<TData>): React.JSX.Element;
+declare const SpreadsheetHeaderCell: typeof SpreadsheetHeaderCellInner;
+export default SpreadsheetHeaderCell;