@drivenets/design-system 0.16.0 → 0.18.0

package/src/components/ds-table/components/ds-table-resize-handle/ds-table-resize-handle.tsx

@@ -0,0 +1,218 @@
+import {
+	useEffect,
+	useRef,
+	type KeyboardEvent,
+	type MouseEvent,
+	type PointerEvent,
+	type TouchEvent,
+} from 'react';
+import { useDsTableContext } from '../../context/ds-table-context';
+import { defaultDsTableLocale } from '../../ds-table.types';
+import {
+	RESIZE_KEYBOARD_STEP,
+	RESIZE_KEYBOARD_STEP_LARGE,
+	RESIZE_MIN_COLUMN_WIDTH,
+} from '../../utils/constants';
+import type { DsTableResizeHandleProps } from './ds-table-resize-handle.types';
+import styles from './ds-table-resize-handle.module.scss';
+
+const clientPointFromEvent = (event: Event): { x: number; y: number } | null => {
+	if (event instanceof MouseEvent) {
+		return { x: event.clientX, y: event.clientY };
+	}
+
+	if (typeof TouchEvent !== 'undefined' && event instanceof TouchEvent) {
+		const touch = event.changedTouches[0];
+		return touch ? { x: touch.clientX, y: touch.clientY } : null;
+	}
+
+	return null;
+};
+
+/**
+ * Handle straddling the right edge of a resizable header cell.
+ *
+ * Drag is TanStack v8 `header.getResizeHandler()`. Hover drives the full-height
+ * overlay; double-click restores snapshot origin widths for this header's
+ * leaves. As a focusable `separator`, Arrow keys nudge the width (Shift for a
+ * larger step) for keyboard operability (WCAG 2.1.1).
+ */
+export const DsTableResizeHandle = <TData, TValue>({ header }: DsTableResizeHandleProps<TData, TValue>) => {
+	const {
+		resizeContainerRef,
+		onResizeHover,
+		onResizeDragStart,
+		onResizeReset,
+		onResizeKeyboardNudge,
+		locale,
+	} = useDsTableContext<TData, TValue>();
+	const handleRef = useRef<HTMLDivElement>(null);
+	const isPointerOverRef = useRef(false);
+	const detachDragEndRef = useRef<(() => void) | null>(null);
+
+	useEffect(
+		() => () => {
+			detachDragEndRef.current?.();
+		},
+		[],
+	);
+
+	const label = { ...defaultDsTableLocale, ...locale }.resizeColumn;
+
+	const measureCellRightOffset = (): number | null => {
+		const containerEl = resizeContainerRef?.current;
+		const cellEl = handleRef.current?.closest<HTMLElement>('th');
+		if (!containerEl || !cellEl) {
+			return null;
+		}
+		// The overlay is absolutely positioned inside the horizontally scrollable
+		// container, so its offset must be in the container's scrolled content
+		// space — add `scrollLeft` to the viewport-relative distance.
+		return (
+			cellEl.getBoundingClientRect().right - containerEl.getBoundingClientRect().left + containerEl.scrollLeft
+		);
+	};
+
+	const reportHover = () => {
+		const offset = measureCellRightOffset();
+		if (offset === null) {
+			return;
+		}
+		onResizeHover?.(header.column.id, offset);
+	};
+
+	const clearHover = () => {
+		isPointerOverRef.current = false;
+		onResizeHover?.(null, null);
+	};
+
+	const syncHoverAtPoint = (clientX: number, clientY: number) => {
+		const handleEl = handleRef.current;
+		const doc = handleEl?.ownerDocument ?? document;
+		const hit = doc.elementFromPoint(clientX, clientY);
+		if (handleEl && hit && (hit === handleEl || handleEl.contains(hit))) {
+			isPointerOverRef.current = true;
+			reportHover();
+			return;
+		}
+
+		clearHover();
+	};
+
+	const attachDragEndListeners = () => {
+		detachDragEndRef.current?.();
+
+		const doc = handleRef.current?.ownerDocument ?? document;
+		const onDragEnd = (event: Event) => {
+			detachDragEndRef.current?.();
+			detachDragEndRef.current = null;
+
+			const point = clientPointFromEvent(event);
+			clearHover();
+
+			const frame = handleRef.current?.ownerDocument.defaultView ?? window;
+			frame.requestAnimationFrame(() => {
+				if (!point) {
+					return;
+				}
+
+				syncHoverAtPoint(point.x, point.y);
+			});
+		};
+
+		doc.addEventListener('mouseup', onDragEnd);
+		doc.addEventListener('touchend', onDragEnd);
+		detachDragEndRef.current = () => {
+			doc.removeEventListener('mouseup', onDragEnd);
+			doc.removeEventListener('touchend', onDragEnd);
+		};
+	};
+
+	const handlePointerEnter = () => {
+		isPointerOverRef.current = true;
+		reportHover();
+	};
+
+	const handlePointerLeave = () => {
+		clearHover();
+	};
+
+	const startDrag = () => {
+		const offset = measureCellRightOffset();
+		if (offset !== null) {
+			onResizeDragStart?.(offset);
+		}
+	};
+
+	const handlePointerDown = (event: PointerEvent<HTMLDivElement>) => {
+		if (event.pointerType === 'touch') {
+			return;
+		}
+
+		event.stopPropagation();
+		startDrag();
+		header.getResizeHandler(handleRef.current?.ownerDocument ?? document)(event);
+		attachDragEndListeners();
+	};
+
+	const handleTouchStart = (event: TouchEvent<HTMLDivElement>) => {
+		event.stopPropagation();
+		startDrag();
+		header.getResizeHandler(handleRef.current?.ownerDocument ?? document)(event);
+		attachDragEndListeners();
+	};
+
+	const handleReset = (event: MouseEvent<HTMLDivElement>) => {
+		event.preventDefault();
+		event.stopPropagation();
+		const leafIds = header.column.getLeafColumns().map((column) => column.id);
+		onResizeReset?.(leafIds);
+		if (isPointerOverRef.current) {
+			reportHover();
+		} else {
+			clearHover();
+		}
+	};
+
+	const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
+		if (event.key !== 'ArrowLeft' && event.key !== 'ArrowRight') {
+			return;
+		}
+
+		event.preventDefault();
+		event.stopPropagation();
+		const step = event.shiftKey ? RESIZE_KEYBOARD_STEP_LARGE : RESIZE_KEYBOARD_STEP;
+		const delta = event.key === 'ArrowRight' ? step : -step;
+		onResizeKeyboardNudge?.(header.column.id, delta);
+	};
+
+	// Only leaves expose a meaningful min; a group boundary's min/max would be
+	// misleading, so announce the current size but omit bounds for groups.
+	const isLeaf = header.subHeaders.length === 0;
+
+	// A focusable role="separator" with aria-valuenow/valuemin and arrow-key
+	// handling is the WAI-ARIA window-splitter pattern, which is interactive.
+	// jsx-a11y's role taxonomy does not model focusable separators, so its
+	// non-interactive rules misfire on this element.
+	/* eslint-disable jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/no-noninteractive-tabindex */
+	return (
+		<div
+			ref={handleRef}
+			role="separator"
+			aria-orientation="vertical"
+			aria-label={label}
+			tabIndex={0}
+			aria-valuenow={Math.round(header.getSize())}
+			aria-valuemin={isLeaf ? (header.column.columnDef.minSize ?? RESIZE_MIN_COLUMN_WIDTH) : undefined}
+			className={styles.resizeHandle}
+			onPointerDown={handlePointerDown}
+			onPointerEnter={handlePointerEnter}
+			onPointerLeave={handlePointerLeave}
+			onTouchStart={handleTouchStart}
+			onClick={(event) => event.stopPropagation()}
+			onDoubleClick={handleReset}
+			onKeyDown={handleKeyDown}
+		/>
+	);
+	/* eslint-enable jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/no-noninteractive-tabindex */
+};

package/src/components/ds-table/components/ds-table-resize-handle/ds-table-resize-handle.types.ts

@@ -0,0 +1,14 @@
+import type { Header } from '@tanstack/react-table';
+
+/**
+ * Props for the column resize handle rendered on the right edge of a resizable
+ * header cell.
+ */
+export interface DsTableResizeHandleProps<TData, TValue> {
+	/**
+	 * The header (leaf or group) whose right edge this handle resizes. A group
+	 * handle uses TanStack's resize handler, which scales that group's leaf
+	 * columns.
+	 */
+	header: Header<TData, TValue>;
+}

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

@@ -0,0 +1 @@
+export { DsTableResizeHandle } from './ds-table-resize-handle';

package/src/components/ds-table/components/ds-table-resize-overlay/ds-table-resize-overlay.module.scss

@@ -0,0 +1,18 @@
+@use '../../styles/variables' as vars;
+
+.resizeOverlay {
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	width: vars.$resize-divider-width;
+	background: var(--border-light);
+	// `left` is the cell's right edge; nudge the divider right by 1px so its 2px
+	// band aligns flush with the 2px group border drawn from that edge rightward.
+	transform: translateX(calc(-50% + #{vars.$border-width}));
+	pointer-events: none;
+	z-index: 2;
+
+	&[data-resize-phase='dragging'] {
+		background: var(--border-action-primary);
+	}
+}

package/src/components/ds-table/components/ds-table-resize-overlay/ds-table-resize-overlay.tsx

@@ -0,0 +1,16 @@
+import type { DsTableResizeOverlayProps } from './ds-table-resize-overlay.types';
+import styles from './ds-table-resize-overlay.module.scss';
+
+/**
+ * Full-height divider that tracks the active column's right edge during hover
+ * and drag resize.
+ */
+export const DsTableResizeOverlay = ({ offset, phase }: DsTableResizeOverlayProps) => (
+	<div
+		className={styles.resizeOverlay}
+		style={{ left: offset }}
+		data-resize-overlay
+		data-resize-phase={phase}
+		aria-hidden
+	/>
+);

package/src/components/ds-table/components/ds-table-resize-overlay/ds-table-resize-overlay.types.ts

@@ -0,0 +1,13 @@
+export type DsTableResizeOverlayPhase = 'hover' | 'dragging';
+
+/**
+ * Props for the full-height column resize divider overlay.
+ */
+export interface DsTableResizeOverlayProps {
+	/**
+	 * Distance from the table container's left edge to the column's right edge,
+	 * in pixels.
+	 */
+	offset: number;
+	phase: DsTableResizeOverlayPhase;
+}

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

@@ -0,0 +1 @@
+export { DsTableResizeOverlay } from './ds-table-resize-overlay';

package/src/components/ds-table/components/ds-table-row/ds-table-row.module.scss

@@ -85,7 +85,7 @@
 	justify-content: center;
 }
 
-.groupStart {
+.groupStart:not(:first-child) {
 	border-left: vars.$group-border-width solid var(--border);
 }
 

package/src/components/ds-table/components/ds-table-row/ds-table-row.tsx

@@ -9,7 +9,7 @@ import type { DsTableRowProps } from './ds-table-row.types';
 import styles from './ds-table-row.module.scss';
 import { useDsTableContext } from '../../context/ds-table-context';
 import { mergeRefs } from '../../../../utils/merge-refs';
-import { getColumnSizeStyle } from '../../utils/column-size';
+import { getBodyCellSizeStyle, isExplicitColumnWidth } from '../../utils/column-size';
 import { isFirstLeafColumnOfGroup } from '../../grouping';
 import { EXPANDER_COLUMN_ID, REORDER_COLUMN_ID, SELECT_COLUMN_ID } from '../../utils/constants';
 
@@ -52,6 +52,7 @@ const DsTableRow = <TData,>({ ref, row, isSelected }: DsTableRowProps<TData>) =>
 		secondaryRowActions,
 		activeRowId,
 		loading,
+		resizeSizingReady,
 	} = useDsTableContext<TData, unknown>();
 	const isExpanded = row.getIsExpanded();
 	const isActive = activeRowId === row.id;
@@ -98,7 +99,13 @@ const DsTableRow = <TData,>({ ref, row, isSelected }: DsTableRowProps<TData>) =>
 				onDoubleClick={() => onRowDoubleClick?.(row.original)}
 			>
 				{row.getVisibleCells().map((cell, idx) => {
-					const cellStyle = getColumnSizeStyle(cell.column.getSize());
+					const columnSizing = cell.getContext().table.getState().columnSizing;
+					const cellStyle = getBodyCellSizeStyle(
+						cell.column.id,
+						cell.column.getSize(),
+						isExplicitColumnWidth(cell.column, resizeSizingReady ? columnSizing : {}),
+						!!resizeSizingReady,
+					);
 
 					if (cell.column.id === REORDER_COLUMN_ID) {
 						return (

package/src/components/ds-table/components/ds-table-row-virtualized/ds-table-row-virtualized.module.scss

@@ -64,9 +64,10 @@
 .selectableCell {
 	padding: 0;
 	justify-content: center;
+	text-align: center;
 }
 
-.groupStart {
+.groupStart:not(:first-child) {
 	border-left: vars.$group-border-width solid var(--border);
 }
 

package/src/components/ds-table/components/ds-table-row-virtualized/ds-table-row-virtualized.tsx

@@ -1,7 +1,7 @@
 import classnames from 'classnames';
 import styles from './ds-table-row-virtualized.module.scss';
 import { useDsTableContext } from '../../context/ds-table-context';
-import { getColumnSizeStyle } from '../../utils/column-size';
+import { getBodyCellSizeStyle, isExplicitColumnWidth } from '../../utils/column-size';
 import { isFirstLeafColumnOfGroup } from '../../grouping';
 import { TableCell, TableRow } from '../core-table';
 import type { DsTableRowVirtualizedProps } from './ds-table-row-virtualized.types';
@@ -27,6 +27,7 @@ export const DsTableRowVirtualized = <TData,>({
 		onRowClick,
 		onRowDoubleClick,
 		loading,
+		resizeSizingReady,
 	} = useDsTableContext<TData, unknown>();
 	const isExpanded = row.getIsExpanded();
 	const isActive = activeRowId === row.id;
@@ -70,7 +71,13 @@ export const DsTableRowVirtualized = <TData,>({
 				<>
 					{row.getVisibleCells().map((cell, idx) => {
 						const isLastColumn = idx === row.getVisibleCells().length - 1;
-						const cellStyle = getColumnSizeStyle(cell.column.getSize());
+						const columnSizing = cell.getContext().table.getState().columnSizing;
+						const cellStyle = getBodyCellSizeStyle(
+							cell.column.id,
+							cell.column.getSize(),
+							isExplicitColumnWidth(cell.column, resizeSizingReady ? columnSizing : {}),
+							!!resizeSizingReady,
+						);
 
 						return (
 							<TableCell

package/src/components/ds-table/components/edit/cell-editors/ds-table-edit-cell-checkbox.tsx

@@ -13,14 +13,14 @@ export const DsTableEditCellCheckbox = <TData extends RowData>({
 	cellContext,
 	disabled,
 }: DsTableEditCellCheckboxProps<TData>) => {
-	const { value, setValue } = useCellEditor<TData, boolean>({
+	const { value, setValue, isPending } = useCellEditor<TData, boolean>({
 		cellContext,
 	});
 
 	return (
 		<DsCheckbox
 			checked={value}
-			disabled={disabled}
+			disabled={disabled || isPending}
 			onCheckedChange={(checked) => setValue(checked === true)}
 		/>
 	);

package/src/components/ds-table/components/edit/cell-editors/ds-table-edit-cell-date.tsx

@@ -22,7 +22,7 @@ export const DsTableEditCellDate = <TData extends RowData>({
 	max,
 	placeholder,
 }: DsTableEditCellDateProps<TData>) => {
-	const { value, setValue, error } = useCellEditor<TData, DsTableEditCellDateValue>({
+	const { value, setValue, error, isPending } = useCellEditor<TData, DsTableEditCellDateValue>({
 		cellContext,
 	});
 
@@ -34,6 +34,7 @@ export const DsTableEditCellDate = <TData extends RowData>({
 				min={min}
 				max={max}
 				placeholder={placeholder}
+				disabled={isPending}
 				onChange={setValue}
 				slotProps={
 					error

package/src/components/ds-table/components/edit/cell-editors/ds-table-edit-cell-number.tsx

@@ -20,7 +20,7 @@ export const DsTableEditCellNumber = <TData extends RowData>({
 	max,
 	step,
 }: DsTableEditCellNumberProps<TData>) => {
-	const { value, setValue, error } = useCellEditor<TData, number>({
+	const { value, setValue, error, isPending } = useCellEditor<TData, number>({
 		cellContext,
 	});
 
@@ -44,6 +44,7 @@ export const DsTableEditCellNumber = <TData extends RowData>({
 				min={min}
 				max={max}
 				step={step}
+				disabled={isPending}
 				onValueChange={setValue}
 			/>
 		</TableEditFormControl>

package/src/components/ds-table/components/edit/cell-editors/ds-table-edit-cell-select.tsx

@@ -18,7 +18,7 @@ export const DsTableEditCellSelect = <TData extends RowData>({
 	options,
 	placeholder,
 }: DsTableEditCellSelectProps<TData>) => {
-	const { value, setValue, error } = useCellEditor<TData, string>({
+	const { value, setValue, error, isPending } = useCellEditor<TData, string>({
 		cellContext,
 	});
 
@@ -29,6 +29,7 @@ export const DsTableEditCellSelect = <TData extends RowData>({
 				value={value}
 				options={options}
 				placeholder={placeholder}
+				disabled={isPending}
 				onValueChange={setValue}
 			/>
 		</TableEditFormControl>

package/src/components/ds-table/components/edit/cell-editors/ds-table-edit-cell-text.tsx

@@ -19,7 +19,7 @@ export const DsTableEditCellText = <TData extends RowData>({
 	placeholder,
 	maxLength,
 }: DsTableEditCellTextProps<TData>) => {
-	const { value, setValue, error } = useCellEditor<TData, string>({
+	const { value, setValue, error, isPending } = useCellEditor<TData, string>({
 		cellContext,
 	});
 
@@ -42,6 +42,7 @@ export const DsTableEditCellText = <TData extends RowData>({
 				value={value}
 				placeholder={placeholder}
 				maxLength={maxLength}
+				disabled={isPending}
 				onValueChange={setValue}
 				slots={error ? { endAdornment: <DsIcon icon="error" size="tiny" /> } : undefined}
 			/>

package/src/components/ds-table/components/edit/ds-table-editing-cell/ds-table-editing-cell.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, type FormEvent } from 'react';
+import { useEffect, useRef, type SubmitEvent } from 'react';
 import { flexRender } from '@tanstack/react-table';
 import { DsButtonV3 } from '../../../../ds-button-v3';
 import { DsStack } from '../../../../ds-stack';
@@ -7,13 +7,20 @@ import styles from './ds-table-editing-cell.module.scss';
 import type { DsTableEditingCellProps } from './ds-table-editing-cell.types';
 
 export const DsTableEditingCell = <TData, TValue>({ cell }: DsTableEditingCellProps<TData, TValue>) => {
-	const { commit, cancel } = useDsTableContext<TData, TValue>();
+	const { commit, cancel, editing } = useDsTableContext<TData, TValue>();
 	const columnDef = cell.column.columnDef;
 	const editAnchorRef = useRef<HTMLDivElement>(null);
 
-	const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
+	const isActiveCell = editing?.cell.id === cell.id;
+	const isPending = isActiveCell && editing.pending;
+	const hasError = isActiveCell && editing.error !== null;
+
+	const handleSubmit = (event: SubmitEvent<HTMLFormElement>) => {
 		event.preventDefault();
 		event.stopPropagation();
+		if (isPending || hasError) {
+			return;
+		}
 		commit();
 	};
 
@@ -62,6 +69,8 @@ export const DsTableEditingCell = <TData, TValue>({ cell }: DsTableEditingCellPr
 							variant="tertiary"
 							size="small"
 							icon="check"
+							loading={isPending}
+							disabled={hasError}
 							aria-label="Confirm edit"
 							onClick={(event) => {
 								event.stopPropagation();