@drivenets/design-system 0.16.0 → 0.18.0

package/src/components/ds-table/hooks/use-cell-editor.ts

@@ -19,8 +19,10 @@ export interface UseCellEditorContainerProps {
 export interface UseCellEditorResult<TValue> {
 	/** The in-progress draft value for the active editor. */
 	value: TValue;
-	/** Validation error from the most recent commit attempt, if any. */
+	/** Current validation error — from live `onCellValidate` or the most recent commit attempt, if any. */
 	error: string | null;
+	/** True while an async `onCellEdit` commit Promise is pending for this cell. */
+	isPending: boolean;
 	/** Update the in-progress draft value. */
 	setValue: (value: TValue) => void;
 	/** Validate and commit the draft. */
@@ -48,6 +50,7 @@ export const useCellEditor = <TData extends RowData, TValue>({
 		ctx.editing !== null && ctx.editing.cell.row.id === row.id && ctx.editing.cell.column.id === column.id;
 	const value = isActiveCell && ctx.editing ? ctx.editing.draftValue : getValue();
 	const error = isActiveCell && ctx.editing ? ctx.editing.error : null;
+	const isPending = isActiveCell && ctx.editing ? ctx.editing.pending : false;
 
 	const setValue = (next: TValue) => {
 		ctx.setDraft(next);
@@ -68,6 +71,7 @@ export const useCellEditor = <TData extends RowData, TValue>({
 	return {
 		value,
 		error,
+		isPending,
 		setValue,
 		commit,
 		cancel,

package/src/components/ds-table/hooks/use-column-resize.ts

@@ -0,0 +1,385 @@
+import {
+	useCallback,
+	useLayoutEffect,
+	useMemo,
+	useRef,
+	useState,
+	type CSSProperties,
+	type RefObject,
+} from 'react';
+import type {
+	ColumnSizingInfoState,
+	ColumnSizingState,
+	OnChangeFn,
+	Table,
+	VisibilityState,
+} from '@tanstack/react-table';
+import {
+	clampColumnSizing,
+	collectMissingLeafSizing,
+	getColumnSizeCssVars,
+	getResizeOriginSize,
+	measureLeafHeaderWidths,
+	omitBuiltinColumnSizing,
+	type ColumnSizeBoundsSource,
+} from '../utils/column-size';
+import { RESIZE_MIN_COLUMN_WIDTH } from '../utils/constants';
+import type { DsTableResizePhase } from '../context/ds-table-context';
+
+const INITIAL_COLUMN_SIZING_INFO: ColumnSizingInfoState = {
+	startOffset: null,
+	startSize: null,
+	deltaOffset: null,
+	deltaPercentage: null,
+	isResizingColumn: false,
+	columnSizingStart: [],
+};
+
+export interface UseColumnResizeOptions {
+	enabled: boolean;
+	/**
+	 * Persisted widths to restore. Merged under live internal state so seed
+	 * measurement fills leaves absent from the map and drags still take effect.
+	 */
+	columnSizing?: Record<string, number>;
+	onColumnSizingChange?: (columnSizing: Record<string, number>) => void;
+	/**
+	 * Invalidates the leaf-width seed measurement (same role as in the former
+	 * `DsTable` layout effect). Read as a dependency only.
+	 */
+	columns: unknown;
+	columnVisibility: VisibilityState;
+}
+
+export interface DsTableResizeContextSlice {
+	resizableColumns: boolean;
+	resizeSizingReady: boolean;
+	resizeContainerRef: RefObject<HTMLDivElement | null>;
+	onResizeHover: (columnId: string | null, offset: number | null) => void;
+	onResizeDragStart: (offset: number) => void;
+	onResizeReset: (columnIds: string[]) => void;
+	/**
+	 * Keyboard resize for a focused handle. `columnId` is the boundary header's
+	 * column (leaf or group); `delta` is the signed px change. Clamps and fires
+	 * the persist callback, mirroring drag end.
+	 */
+	onResizeKeyboardNudge: (columnId: string, delta: number) => void;
+}
+
+export interface UseColumnResizeActiveResize {
+	offset: number;
+	phase: DsTableResizePhase;
+}
+
+export interface UseColumnResizeBindResult {
+	columnSizeVars: CSSProperties | undefined;
+	activeResize: UseColumnResizeActiveResize | null;
+	context: DsTableResizeContextSlice;
+}
+
+export interface UseColumnResizeTableOptions {
+	enableColumnResizing: boolean;
+	columnResizeMode: 'onChange';
+	defaultColumn?: { minSize: number };
+	onColumnSizingChange: OnChangeFn<ColumnSizingState>;
+	onColumnSizingInfoChange: OnChangeFn<ColumnSizingInfoState>;
+}
+
+export interface UseColumnResizeResult {
+	tableOptions: UseColumnResizeTableOptions;
+	state: {
+		columnSizing: ColumnSizingState;
+		columnSizingInfo: ColumnSizingInfoState;
+	};
+	bind: <TData>(table: Table<TData>) => UseColumnResizeBindResult;
+}
+
+/**
+ * Owns column-resize state, TanStack sizing handlers, origin snapshots, seed
+ * measurement, hover/drag overlay model, and the context slice consumed by
+ * resize handles.
+ *
+ * Call before `useReactTable`, spread `tableOptions` / `state` into it, then
+ * `bind(table)` during render for CSS vars, overlay, and context.
+ */
+export const useColumnResize = ({
+	enabled,
+	columnSizing: columnSizingProp,
+	onColumnSizingChange,
+	columns,
+	columnVisibility,
+}: UseColumnResizeOptions): UseColumnResizeResult => {
+	const [columnResizeState, setColumnResizeState] = useState<{
+		columnSizing: ColumnSizingState;
+		columnSizingInfo: ColumnSizingInfoState;
+	}>({
+		columnSizing: {},
+		columnSizingInfo: INITIAL_COLUMN_SIZING_INFO,
+	});
+	// One useState so TanStack's mousemove updaters (info then sizing) run in
+	// call order against the same queue. Split hooks apply sizing first, while
+	// the next-width map is still empty.
+	const { columnSizing: internalColumnSizing, columnSizingInfo } = columnResizeState;
+
+	// Persisted widths seed the effective map, but internal state wins so a live
+	// drag (or seed measurement) of a persisted column still takes effect. Passed
+	// to TanStack and read for CSS vars / persist so restore, drag, and persist
+	// all see the same widths.
+	const columnSizing = useMemo<ColumnSizingState>(
+		() => (columnSizingProp ? { ...columnSizingProp, ...internalColumnSizing } : internalColumnSizing),
+		[columnSizingProp, internalColumnSizing],
+	);
+	const [resizeHover, setResizeHover] = useState<{
+		columnId: string;
+		offset: number;
+	} | null>(null);
+	const dragStartOffsetRef = useRef<number | null>(null);
+	const resizeOriginSizingRef = useRef<ColumnSizingState>({});
+	const containerRef = useRef<HTMLDivElement>(null);
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any -- bind is generic; the ref only calls sizing APIs
+	const tableRef = useRef<Table<any> | null>(null);
+
+	const columnSizingRef = useRef(columnSizing);
+	columnSizingRef.current = columnSizing;
+	const columnSizingInfoRef = useRef(columnSizingInfo);
+	columnSizingInfoRef.current = columnSizingInfo;
+	const onColumnSizingChangeRef = useRef(onColumnSizingChange);
+	onColumnSizingChangeRef.current = onColumnSizingChange;
+	const leafSizeBoundsRef = useRef<ColumnSizeBoundsSource[]>([]);
+
+	const handleColumnSizingChange: OnChangeFn<ColumnSizingState> = useCallback((updaterOrValue) => {
+		// Resolve against the ref and write it synchronously (same pattern as
+		// columnSizingInfoRef), before queuing the React state update. TanStack's
+		// mouseup applies the final sizing and then fires the persist callback in
+		// the same tick, so the ref must already hold the final widths — the state
+		// updater runs later (at render), which would leave persist reading a stale
+		// last-move value. Resolving against the effective map also keeps persisted
+		// (prop-provided) leaves in the reported map.
+		const next =
+			typeof updaterOrValue === 'function' ? updaterOrValue(columnSizingRef.current) : updaterOrValue;
+		const clamped = clampColumnSizing(next, leafSizeBoundsRef.current);
+		columnSizingRef.current = clamped;
+		setColumnResizeState((prev) => ({ ...prev, columnSizing: clamped }));
+	}, []);
+
+	const handleColumnSizingInfoChange: OnChangeFn<ColumnSizingInfoState> = useCallback((updaterOrValue) => {
+		const prevInfo = columnSizingInfoRef.current;
+		const nextInfo = typeof updaterOrValue === 'function' ? updaterOrValue(prevInfo) : updaterOrValue;
+		const ended = Boolean(prevInfo.isResizingColumn) && nextInfo.isResizingColumn === false;
+
+		columnSizingInfoRef.current = nextInfo;
+		setColumnResizeState((prev) => ({
+			...prev,
+			columnSizingInfo: nextInfo,
+		}));
+
+		if (ended) {
+			onColumnSizingChangeRef.current?.(omitBuiltinColumnSizing(columnSizingRef.current));
+		}
+	}, []);
+
+	const handleResizeHover = useCallback((columnId: string | null, offset: number | null) => {
+		setResizeHover(columnId === null || offset === null ? null : { columnId, offset });
+	}, []);
+
+	const handleResizeDragStart = useCallback((offset: number) => {
+		dragStartOffsetRef.current = offset;
+	}, []);
+
+	const handleResizeReset = useCallback(
+		(columnIds: string[]) => {
+			const next = { ...columnSizingRef.current };
+
+			for (const id of columnIds) {
+				const origin = resizeOriginSizingRef.current[id];
+				if (origin !== undefined) {
+					next[id] = origin;
+				}
+			}
+
+			const clamped = clampColumnSizing(next, leafSizeBoundsRef.current);
+			handleColumnSizingChange(clamped);
+			onColumnSizingChangeRef.current?.(omitBuiltinColumnSizing(clamped));
+		},
+		[handleColumnSizingChange],
+	);
+
+	const handleResizeKeyboardNudge = useCallback(
+		(columnId: string, delta: number) => {
+			const table = tableRef.current;
+			const column = table?.getColumn(columnId);
+			if (!table || !column) {
+				return;
+			}
+
+			const leaves = column.getLeafColumns().filter((leaf) => leaf.getIsVisible() && leaf.getCanResize());
+			const totalSize = leaves.reduce((sum, leaf) => sum + leaf.getSize(), 0);
+			if (leaves.length === 0 || totalSize <= 0) {
+				return;
+			}
+
+			// Distribute the delta across the boundary's leaves by their current
+			// share. This mirrors TanStack's group-drag scaling and, for a single
+			// leaf, applies the whole delta to it.
+			const next = { ...columnSizingRef.current };
+			for (const leaf of leaves) {
+				const size = leaf.getSize();
+				next[leaf.id] = Math.round(size + delta * (size / totalSize));
+			}
+
+			const clamped = clampColumnSizing(next, leafSizeBoundsRef.current);
+			handleColumnSizingChange(clamped);
+			onColumnSizingChangeRef.current?.(omitBuiltinColumnSizing(clamped));
+		},
+		[handleColumnSizingChange],
+	);
+
+	useLayoutEffect(() => {
+		if (!enabled) {
+			return;
+		}
+
+		const container = containerRef.current;
+		const table = tableRef.current;
+		if (!container || !table) {
+			return;
+		}
+
+		const seedMissingLeaves = (): boolean => {
+			if (container.getBoundingClientRect().width === 0) {
+				return false;
+			}
+
+			const tableEl = container.querySelector('table');
+			if (!(tableEl instanceof HTMLElement)) {
+				return false;
+			}
+
+			const leaves = table.getVisibleLeafColumns();
+			const leafIds = leaves.map((column) => column.id);
+			const measured = measureLeafHeaderWidths(tableEl, leafIds);
+
+			for (const column of leaves) {
+				const measuredWidth = measured[column.id];
+				if (measuredWidth === undefined || resizeOriginSizingRef.current[column.id] !== undefined) {
+					continue;
+				}
+
+				resizeOriginSizingRef.current[column.id] = getResizeOriginSize(column, Math.round(measuredWidth));
+			}
+
+			const missing = collectMissingLeafSizing(measured, columnSizingRef.current);
+			if (Object.keys(missing).length > 0) {
+				handleColumnSizingChange((prev) => ({
+					...clampColumnSizing(missing, leafSizeBoundsRef.current),
+					...prev,
+				}));
+			}
+
+			return true;
+		};
+
+		if (seedMissingLeaves()) {
+			return;
+		}
+
+		const observer = new ResizeObserver(() => {
+			if (seedMissingLeaves()) {
+				observer.disconnect();
+			}
+		});
+		observer.observe(container);
+
+		return () => observer.disconnect();
+	}, [enabled, columns, columnVisibility, handleColumnSizingChange]);
+
+	const tableOptions = useMemo<UseColumnResizeTableOptions>(
+		() => ({
+			enableColumnResizing: enabled,
+			columnResizeMode: 'onChange',
+			// Only constrain the minimum width while resizing is on. TanStack merges
+			// `defaultColumn` onto every column, so spreading this when resizing is
+			// off would clamp unrelated columns (e.g. 36px utility columns) up to the
+			// resize minimum and break existing layouts.
+			...(enabled ? { defaultColumn: { minSize: RESIZE_MIN_COLUMN_WIDTH } } : {}),
+			onColumnSizingChange: handleColumnSizingChange,
+			onColumnSizingInfoChange: handleColumnSizingInfoChange,
+		}),
+		[enabled, handleColumnSizingChange, handleColumnSizingInfoChange],
+	);
+
+	const bind = <TData>(table: Table<TData>): UseColumnResizeBindResult => {
+		tableRef.current = table;
+		leafSizeBoundsRef.current = table.getAllLeafColumns();
+
+		const visibleLeafIds = table.getVisibleLeafColumns().map((column) => column.id);
+		const resizeSizingReady =
+			enabled && visibleLeafIds.length > 0 && visibleLeafIds.every((id) => columnSizing[id] !== undefined);
+
+		const columnSizeVars: CSSProperties | undefined = resizeSizingReady
+			? {
+					...getColumnSizeCssVars(table.getFlatHeaders()),
+					width: table.getTotalSize(),
+				}
+			: undefined;
+
+		if (!enabled) {
+			return {
+				columnSizeVars: undefined,
+				activeResize: null,
+				context: {
+					resizableColumns: false,
+					resizeSizingReady: false,
+					resizeContainerRef: containerRef,
+					onResizeHover: handleResizeHover,
+					onResizeDragStart: handleResizeDragStart,
+					onResizeReset: handleResizeReset,
+					onResizeKeyboardNudge: handleResizeKeyboardNudge,
+				},
+			};
+		}
+
+		const isResizingColumn = columnSizingInfo.isResizingColumn;
+		const resizingHeader =
+			typeof isResizingColumn === 'string'
+				? table.getFlatHeaders().find((header) => header.column.id === isResizingColumn)
+				: undefined;
+		const startSize = columnSizingInfo.startSize;
+		const clampedResizeDelta =
+			resizingHeader && startSize !== null
+				? resizingHeader.getSize() - startSize
+				: (columnSizingInfo.deltaOffset ?? 0);
+		const activeResize: UseColumnResizeActiveResize | null =
+			isResizingColumn && dragStartOffsetRef.current !== null
+				? {
+						offset: dragStartOffsetRef.current + clampedResizeDelta,
+						phase: 'dragging',
+					}
+				: resizeHover
+					? { offset: resizeHover.offset, phase: 'hover' }
+					: null;
+
+		return {
+			columnSizeVars,
+			activeResize,
+			context: {
+				resizableColumns: enabled,
+				resizeSizingReady,
+				resizeContainerRef: containerRef,
+				onResizeHover: handleResizeHover,
+				onResizeDragStart: handleResizeDragStart,
+				onResizeReset: handleResizeReset,
+				onResizeKeyboardNudge: handleResizeKeyboardNudge,
+			},
+		};
+	};
+
+	return {
+		tableOptions,
+		state: {
+			columnSizing,
+			columnSizingInfo,
+		},
+		bind,
+	};
+};

package/src/components/ds-table/hooks/use-editing-state.ts

@@ -0,0 +1,190 @@
+import { useCallback, useRef, useState } from 'react';
+import type { Cell } from '@tanstack/react-table';
+import type { DsDataTableProps } from '../ds-table.types';
+
+export interface EditingState<TData, TValue> {
+	cell: Cell<TData, TValue>;
+	draftValue: TValue;
+	error: string | null;
+	/** True while an async `onCellEdit` commit Promise is pending for this cell. */
+	pending: boolean;
+}
+
+export interface UseEditingStateResult<TData, TValue> {
+	/** The cell currently in edit mode, if any. */
+	editing: EditingState<TData, TValue> | null;
+	beginEdit: (cell: Cell<TData, TValue>) => void;
+	setDraft: (value: TValue) => void;
+	commit: (overrideValue?: TValue) => void;
+	cancel: () => void;
+}
+
+/** Shown when an async `onCellEdit` commit rejects with a non-`Error` reason. */
+const EDIT_FALLBACK_ERROR = 'Save failed';
+
+const isThenable = (value: unknown): value is Promise<unknown> =>
+	typeof value === 'object' && value !== null && typeof (value as { then?: unknown }).then === 'function';
+
+/** Prefer a thrown `Error`'s message; fall back to a generic string otherwise. */
+const extractErrorMessage = (reason: unknown, fallback: string): string =>
+	reason instanceof Error && reason.message ? reason.message : fallback;
+
+/**
+ * Hoisted editing state for single-cell-at-a-time inline editing.
+ * Surfaced on DsTableContext so cell renderers and editors share one provider.
+ */
+export const useEditingState = <TData, TValue>(
+	onCellEdit: DsDataTableProps<TData, TValue>['onCellEdit'],
+	onCellValidate: DsDataTableProps<TData, TValue>['onCellValidate'],
+): UseEditingStateResult<TData, TValue> => {
+	const [editing, setEditing] = useState<EditingState<TData, TValue> | null>(null);
+
+	const onCellEditRef = useRef(onCellEdit);
+	onCellEditRef.current = onCellEdit;
+
+	const onCellValidateRef = useRef(onCellValidate);
+	onCellValidateRef.current = onCellValidate;
+
+	const editingRef = useRef(editing);
+	editingRef.current = editing;
+
+	// Bumped whenever the active editing session changes (begin/cancel/commit).
+	// A pending async commit captures the current generation token and is discarded
+	// on resolve if it no longer matches — guards against stale writes and repeat
+	// commits.
+	const generationRef = useRef(0);
+
+	// AbortController for the in-flight commit attempt. Aborted when the attempt is
+	// superseded (Cancel/Escape or switching cells) so consumers can cancel requests.
+	const abortRef = useRef<AbortController | null>(null);
+
+	const abortPending = useCallback(() => {
+		abortRef.current?.abort();
+		abortRef.current = null;
+	}, []);
+
+	const beginEdit = useCallback(
+		(cell: Cell<TData, TValue>) => {
+			const current = editingRef.current;
+			if (current) {
+				const isSameCell = current.cell.row.id === cell.row.id && current.cell.column.id === cell.column.id;
+				if (isSameCell) {
+					return;
+				}
+			}
+			abortPending();
+			generationRef.current += 1;
+			setEditing({
+				cell,
+				draftValue: cell.getValue(),
+				error: null,
+				pending: false,
+			});
+		},
+		[abortPending],
+	);
+
+	const setDraft = useCallback((value: TValue) => {
+		const current = editingRef.current;
+		if (!current) {
+			return;
+		}
+		// Live, per-keystroke validation: surface (or clear) the inline error as the
+		// user types so the Confirm button can gate on it.
+		const error =
+			onCellValidateRef.current?.(current.cell.row.original, current.cell.column.id, value) ?? null;
+		setEditing({ ...current, draftValue: value, error });
+	}, []);
+
+	const commit = useCallback(
+		(overrideValue?: TValue) => {
+			const current = editingRef.current;
+			if (!current || current.pending) {
+				return;
+			}
+
+			const valueToCommit = overrideValue !== undefined ? overrideValue : current.draftValue;
+
+			// Synchronous pre-commit gate. Also covers immediate-commit editors
+			// (checkbox/select) that pass an override value without going through
+			// setDraft, so the live error never had a chance to run.
+			const validationError =
+				onCellValidateRef.current?.(current.cell.row.original, current.cell.column.id, valueToCommit) ?? null;
+			if (validationError !== null) {
+				setEditing({ ...current, draftValue: valueToCommit, error: validationError, pending: false });
+				return;
+			}
+
+			generationRef.current += 1;
+			const token = generationRef.current;
+
+			abortPending();
+			const controller = new AbortController();
+			abortRef.current = controller;
+			const { signal } = controller;
+
+			const isStale = () => generationRef.current !== token;
+
+			// Release the controller once this attempt reaches a terminal state, unless a
+			// newer attempt has already replaced it.
+			const settle = () => {
+				if (abortRef.current === controller) {
+					abortRef.current = null;
+				}
+			};
+
+			const showError = (error: string) => {
+				settle();
+				if (isStale()) {
+					return;
+				}
+				const live = editingRef.current;
+				setEditing(live ? { ...live, draftValue: valueToCommit, error, pending: false } : null);
+			};
+
+			// Persist via the fallible/async commit handler.
+			const editResult = onCellEditRef.current?.(
+				current.cell.row.original,
+				current.cell.column.id,
+				valueToCommit,
+				signal,
+			);
+
+			const applyEditResult = (error: string | null) => {
+				if (error !== null) {
+					showError(error);
+					return;
+				}
+				settle();
+				if (isStale()) {
+					return;
+				}
+				setEditing(null);
+			};
+
+			if (!isThenable(editResult)) {
+				applyEditResult(editResult ?? null);
+				return;
+			}
+
+			setEditing({ ...current, draftValue: valueToCommit, error: null, pending: true });
+			editResult.then(
+				(value) => {
+					applyEditResult(value ?? null);
+				},
+				(reason: unknown) => {
+					applyEditResult(extractErrorMessage(reason, EDIT_FALLBACK_ERROR));
+				},
+			);
+		},
+		[abortPending],
+	);
+
+	const cancel = useCallback(() => {
+		abortPending();
+		generationRef.current += 1;
+		setEditing(null);
+	}, [abortPending]);
+
+	return { editing, beginEdit, setDraft, commit, cancel };
+};

package/src/components/ds-table/index.ts

@@ -1,4 +1,5 @@
 import './grouping/types/column-group-meta.augmentation';
+import './utils/column-size-meta.augmentation';
 
 export type { SecondaryRowAction, RowAction } from './components/ds-table-cell';
 export type { ScrollParams } from './components/ds-table-body-virtualized';

package/src/components/ds-table/styles/_variables.scss

@@ -1,13 +1,14 @@
 $border-radius: 4px;
 $border-width: 1px;
 $group-border-width: 2px;
-$virtualized-height: 600px;
 $reorder-column-width: 60px;
 $container-margin-vertical: 1rem;
 $filter-input-gap: 0.5rem;
 $filter-input-max-width: 24rem;
 $header-sort-gap: 0.5rem;
 $empty-state-height: 6rem;
+$resize-handle-hit-width: 12px;
+$resize-divider-width: 2px;
 
 $hover-bg-color: var(--background-secondary);
 $hover-border-color: var(--border);

package/src/components/ds-table/utils/column-size-meta.augmentation.ts

@@ -0,0 +1,16 @@
+import '@tanstack/react-table';
+
+declare module '@tanstack/react-table' {
+	// eslint-disable-next-line @typescript-eslint/no-unused-vars
+	interface ColumnMeta<TData, TValue> {
+		/**
+		 * Internal: set by `getAugmentedColumns` on leaf defs whose `size` was
+		 * authored on the raw `columns` prop, so sizing pins a fixed width instead
+		 * of filling. Not part of the public API.
+		 * @internal
+		 */
+		hasExplicitSize?: boolean;
+	}
+}
+
+export {};