@drivenets/design-system 0.12.1 → 0.13.0

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

@@ -0,0 +1,27 @@
+import type { CellContext, RowData } from '@tanstack/react-table';
+import { DsCheckbox } from '../../../../ds-checkbox';
+import { useCellEditor } from '../../../hooks/use-cell-editor';
+
+export interface DsTableEditCellCheckboxProps<TData extends RowData> {
+	/** TanStack Table cell context from `ColumnDef.editCell`. */
+	cellContext: CellContext<TData, boolean>;
+	disabled?: boolean;
+}
+
+/** Checkbox editor for table cells. Render via `ColumnDef.editCell`. */
+export const DsTableEditCellCheckbox = <TData extends RowData>({
+	cellContext,
+	disabled,
+}: DsTableEditCellCheckboxProps<TData>) => {
+	const { value, setValue } = useCellEditor<TData, boolean>({
+		cellContext,
+	});
+
+	return (
+		<DsCheckbox
+			checked={value}
+			disabled={disabled}
+			onCheckedChange={(checked) => setValue(checked === true)}
+		/>
+	);
+};

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

@@ -0,0 +1,50 @@
+import type { CellContext, RowData } from '@tanstack/react-table';
+import { DsFormControl } from '../../../../ds-form-control';
+import { DsIcon } from '../../../../ds-icon';
+import { useCellEditor } from '../../../hooks/use-cell-editor';
+import styles from './cell-editors.module.scss';
+import { TableEditFormControl } from './table-edit-form-control';
+
+export type DsTableEditCellDateValue = Date | null;
+
+export interface DsTableEditCellDateProps<TData extends RowData> {
+	/** TanStack Table cell context from `ColumnDef.editCell`. */
+	cellContext: CellContext<TData, DsTableEditCellDateValue>;
+	min?: Date;
+	max?: Date;
+	placeholder?: string;
+}
+
+/** Date picker editor for table cells. Render via `ColumnDef.editCell`. */
+export const DsTableEditCellDate = <TData extends RowData>({
+	cellContext,
+	min,
+	max,
+	placeholder,
+}: DsTableEditCellDateProps<TData>) => {
+	const { value, setValue, error } = useCellEditor<TData, DsTableEditCellDateValue>({
+		cellContext,
+	});
+
+	return (
+		<TableEditFormControl cellContext={cellContext} error={error}>
+			<DsFormControl.DatePicker
+				className={styles.fullWidth}
+				value={value}
+				min={min}
+				max={max}
+				placeholder={placeholder}
+				onChange={setValue}
+				slotProps={
+					error
+						? {
+								input: {
+									slots: { endAdornment: <DsIcon icon="error" size="tiny" /> },
+								},
+							}
+						: undefined
+				}
+			/>
+		</TableEditFormControl>
+	);
+};

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

@@ -0,0 +1,51 @@
+import { useEffect, useRef } from 'react';
+import type { CellContext, RowData } from '@tanstack/react-table';
+import { DsFormControl } from '../../../../ds-form-control';
+import { useCellEditor } from '../../../hooks/use-cell-editor';
+import styles from './cell-editors.module.scss';
+import { TableEditFormControl } from './table-edit-form-control';
+
+export interface DsTableEditCellNumberProps<TData extends RowData> {
+	/** TanStack Table cell context from `ColumnDef.editCell`. */
+	cellContext: CellContext<TData, number>;
+	min?: number;
+	max?: number;
+	step?: number;
+}
+
+/** Number input editor for table cells. Render via `ColumnDef.editCell`. */
+export const DsTableEditCellNumber = <TData extends RowData>({
+	cellContext,
+	min,
+	max,
+	step,
+}: DsTableEditCellNumberProps<TData>) => {
+	const { value, setValue, error } = useCellEditor<TData, number>({
+		cellContext,
+	});
+
+	const inputRef = useRef<HTMLInputElement>(null);
+
+	useEffect(() => {
+		const input = inputRef.current;
+		if (!input) {
+			return;
+		}
+		input.focus();
+		input.select();
+	}, []);
+
+	return (
+		<TableEditFormControl cellContext={cellContext} error={error}>
+			<DsFormControl.NumberInput
+				ref={inputRef}
+				className={styles.fullWidth}
+				value={value}
+				min={min}
+				max={max}
+				step={step}
+				onValueChange={setValue}
+			/>
+		</TableEditFormControl>
+	);
+};

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

@@ -0,0 +1,36 @@
+import type { CellContext, RowData } from '@tanstack/react-table';
+import { DsFormControl } from '../../../../ds-form-control';
+import { type DsSelectOption } from '../../../../ds-select';
+import { useCellEditor } from '../../../hooks/use-cell-editor';
+import styles from './cell-editors.module.scss';
+import { TableEditFormControl } from './table-edit-form-control';
+
+export interface DsTableEditCellSelectProps<TData extends RowData> {
+	/** TanStack Table cell context from `ColumnDef.editCell`. */
+	cellContext: CellContext<TData, string>;
+	options: DsSelectOption[];
+	placeholder?: string;
+}
+
+/** Select editor for table cells. Render via `ColumnDef.editCell`. */
+export const DsTableEditCellSelect = <TData extends RowData>({
+	cellContext,
+	options,
+	placeholder,
+}: DsTableEditCellSelectProps<TData>) => {
+	const { value, setValue, error } = useCellEditor<TData, string>({
+		cellContext,
+	});
+
+	return (
+		<TableEditFormControl cellContext={cellContext} error={error}>
+			<DsFormControl.Select
+				className={styles.fullWidth}
+				value={value}
+				options={options}
+				placeholder={placeholder}
+				onValueChange={setValue}
+			/>
+		</TableEditFormControl>
+	);
+};

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

@@ -0,0 +1,50 @@
+import { useEffect, useRef } from 'react';
+import type { CellContext, RowData } from '@tanstack/react-table';
+import { DsFormControl } from '../../../../ds-form-control';
+import { DsIcon } from '../../../../ds-icon';
+import { useCellEditor } from '../../../hooks/use-cell-editor';
+import styles from './cell-editors.module.scss';
+import { TableEditFormControl } from './table-edit-form-control';
+
+export interface DsTableEditCellTextProps<TData extends RowData> {
+	/** TanStack Table cell context from `ColumnDef.editCell`. */
+	cellContext: CellContext<TData, string>;
+	placeholder?: string;
+	maxLength?: number;
+}
+
+/** Text input editor for table cells. Render via `ColumnDef.editCell`. */
+export const DsTableEditCellText = <TData extends RowData>({
+	cellContext,
+	placeholder,
+	maxLength,
+}: DsTableEditCellTextProps<TData>) => {
+	const { value, setValue, error } = useCellEditor<TData, string>({
+		cellContext,
+	});
+
+	const inputRef = useRef<HTMLInputElement>(null);
+
+	useEffect(() => {
+		const input = inputRef.current;
+		if (!input) {
+			return;
+		}
+		input.focus();
+		input.select();
+	}, []);
+
+	return (
+		<TableEditFormControl cellContext={cellContext} error={error}>
+			<DsFormControl.TextInput
+				ref={inputRef}
+				className={styles.fullWidth}
+				value={value}
+				placeholder={placeholder}
+				maxLength={maxLength}
+				onValueChange={setValue}
+				slots={error ? { endAdornment: <DsIcon icon="error" size="tiny" /> } : undefined}
+			/>
+		</TableEditFormControl>
+	);
+};

package/src/components/ds-table/components/edit/cell-editors/index.ts

@@ -0,0 +1,14 @@
+export { DsTableEditCellText } from './ds-table-edit-cell-text';
+export type { DsTableEditCellTextProps } from './ds-table-edit-cell-text';
+
+export { DsTableEditCellNumber } from './ds-table-edit-cell-number';
+export type { DsTableEditCellNumberProps } from './ds-table-edit-cell-number';
+
+export { DsTableEditCellSelect } from './ds-table-edit-cell-select';
+export type { DsTableEditCellSelectProps } from './ds-table-edit-cell-select';
+
+export { DsTableEditCellDate } from './ds-table-edit-cell-date';
+export type { DsTableEditCellDateProps, DsTableEditCellDateValue } from './ds-table-edit-cell-date';
+
+export { DsTableEditCellCheckbox } from './ds-table-edit-cell-checkbox';
+export type { DsTableEditCellCheckboxProps } from './ds-table-edit-cell-checkbox';

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

@@ -0,0 +1,31 @@
+import type { CellContext, RowData } from '@tanstack/react-table';
+import type { ReactNode } from 'react';
+import { DsFormControl } from '../../../../ds-form-control';
+import styles from './cell-editors.module.scss';
+
+export interface TableEditFormControlProps<TData extends RowData> {
+	cellContext: CellContext<TData, unknown>;
+	error: string | null;
+	children: ReactNode;
+}
+
+export const TableEditFormControl = <TData extends RowData>({
+	cellContext,
+	error,
+	children,
+}: TableEditFormControlProps<TData>) => {
+	const label = String(cellContext.column.columnDef.header ?? cellContext.column.id);
+
+	return (
+		<DsFormControl
+			hideLabel
+			label={label}
+			className={styles.fullWidth}
+			status={error ? 'error' : undefined}
+			message={error ?? undefined}
+			messageIcon="cancel"
+		>
+			{children}
+		</DsFormControl>
+	);
+};

package/src/components/ds-table/components/edit/ds-table-editable-cell/ds-table-editable-cell.module.scss

@@ -0,0 +1,28 @@
+.root {
+	display: flex;
+	align-items: center;
+	gap: var(--3xs);
+	width: 100%;
+	min-width: 0;
+	padding: 0 var(--standard);
+	height: 100%;
+
+	&:focus-within {
+		outline: none;
+	}
+
+	.editButton {
+		flex-shrink: 0;
+		opacity: 0;
+		pointer-events: none;
+	}
+
+	&:hover,
+	&:focus-within,
+	&[data-active] {
+		.editButton {
+			opacity: 1;
+			pointer-events: auto;
+		}
+	}
+}

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

@@ -0,0 +1,39 @@
+import type { MouseEvent } from 'react';
+import { DsButtonV3 } from '../../../../ds-button-v3';
+import styles from './ds-table-editable-cell.module.scss';
+import type { DsTableEditableCellProps } from './ds-table-editable-cell.types';
+import { useDsTableContext } from '../../../context/ds-table-context';
+
+export const DsTableEditableCell = <TData, TValue>({
+	cell,
+	children,
+}: DsTableEditableCellProps<TData, TValue>) => {
+	const { beginEdit, editing } = useDsTableContext<TData, TValue>();
+	const isEditing =
+		editing !== null && editing.cell.row.id === cell.row.id && editing.cell.column.id === cell.column.id;
+	const handleEdit = (event: MouseEvent<HTMLElement>) => {
+		event.stopPropagation();
+		beginEdit(cell);
+	};
+
+	return (
+		<div
+			className={styles.root}
+			data-active={isEditing ? '' : undefined}
+			onDoubleClick={handleEdit}
+			tabIndex={0}
+			role="button"
+			aria-label="Double-click to edit"
+		>
+			{children}
+			<DsButtonV3
+				className={styles.editButton}
+				variant="tertiary"
+				size="small"
+				icon="edit"
+				aria-label="Edit cell"
+				onClick={handleEdit}
+			/>
+		</div>
+	);
+};

package/src/components/ds-table/components/edit/ds-table-editable-cell/ds-table-editable-cell.types.ts

@@ -0,0 +1,7 @@
+import type { Cell } from '@tanstack/react-table';
+import type { ReactNode } from 'react';
+
+export interface DsTableEditableCellProps<TData, TValue> {
+	cell: Cell<TData, TValue>;
+	children: ReactNode;
+}

package/src/components/ds-table/components/edit/ds-table-editable-cell/index.ts

@@ -0,0 +1,2 @@
+export { DsTableEditableCell } from './ds-table-editable-cell';
+export type { DsTableEditableCellProps } from './ds-table-editable-cell.types';

package/src/components/ds-table/components/edit/ds-table-editing-cell/ds-table-editing-cell.module.scss

@@ -0,0 +1,48 @@
+@use '../../../../../styles/shared/input' as input;
+
+.editAnchor {
+	position: relative;
+	width: 100%;
+	height: 100%;
+	min-width: 0;
+}
+
+.overlay {
+	position: absolute;
+	top: -1px;
+	left: -1px;
+	z-index: 1;
+	display: flex;
+	flex-direction: column;
+	gap: var(--3xs);
+	width: max-content;
+	min-width: max(100%, 240px);
+	padding: var(--xs) var(--3xs);
+	background: var(--background);
+	border-top: 1px solid var(--border-action-primary);
+	border-bottom-left-radius: var(--3xs);
+	border-bottom-right-radius: var(--3xs);
+	box-shadow: 0 2px 6px var(--shadow-moderate);
+}
+
+.row {
+	display: flex;
+	flex-direction: row;
+	align-items: flex-start;
+	gap: var(--3xs);
+	width: 100%;
+}
+
+.slot {
+	flex: 1 1 auto;
+	min-width: 0;
+}
+
+.actions {
+	display: flex;
+	flex-shrink: 0;
+	flex-direction: row;
+	align-items: center;
+	gap: var(--3xs);
+	height: input.$input-text-height-default;
+}

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

@@ -0,0 +1,76 @@
+import { useEffect, useRef, type FormEvent } from 'react';
+import { flexRender } from '@tanstack/react-table';
+import { DsButtonV3 } from '../../../../ds-button-v3';
+import { DsStack } from '../../../../ds-stack';
+import { useDsTableContext } from '../../../context/ds-table-context';
+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 columnDef = cell.column.columnDef;
+	const editAnchorRef = useRef<HTMLDivElement>(null);
+
+	const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
+		event.preventDefault();
+		event.stopPropagation();
+		commit();
+	};
+
+	useEffect(() => {
+		const handleKeyDown = (event: KeyboardEvent) => {
+			if (event.key !== 'Escape') {
+				return;
+			}
+			const anchor = editAnchorRef.current;
+			if (!anchor?.contains(document.activeElement)) {
+				return;
+			}
+			event.preventDefault();
+			event.stopPropagation();
+			cancel();
+		};
+
+		document.addEventListener('keydown', handleKeyDown);
+		return () => {
+			document.removeEventListener('keydown', handleKeyDown);
+		};
+	}, [cancel]);
+
+	return (
+		<div ref={editAnchorRef} className={styles.editAnchor}>
+			<form className={styles.overlay} onSubmit={handleSubmit}>
+				<DsStack direction="row" gap="var(--3xs)" alignItems="flex-start" width="100%" className={styles.row}>
+					<DsStack flex="1 1 auto" className={styles.slot}>
+						{columnDef.editCell ? flexRender(columnDef.editCell, cell.getContext()) : null}
+					</DsStack>
+					<DsStack direction="row" gap="var(--3xs)" className={styles.actions}>
+						<DsButtonV3
+							type="button"
+							variant="tertiary"
+							size="small"
+							icon="close"
+							aria-label="Cancel edit"
+							onClick={(event) => {
+								event.stopPropagation();
+								cancel();
+							}}
+							style={{ color: 'var(--icon-error)' }}
+						/>
+						<DsButtonV3
+							type="submit"
+							variant="tertiary"
+							size="small"
+							icon="check"
+							aria-label="Confirm edit"
+							onClick={(event) => {
+								event.stopPropagation();
+							}}
+							style={{ color: 'var(--icon-success)' }}
+						/>
+					</DsStack>
+				</DsStack>
+			</form>
+		</div>
+	);
+};

package/src/components/ds-table/components/edit/ds-table-editing-cell/ds-table-editing-cell.types.ts

@@ -0,0 +1,5 @@
+import type { Cell } from '@tanstack/react-table';
+
+export interface DsTableEditingCellProps<TData, TValue> {
+	cell: Cell<TData, TValue>;
+}

package/src/components/ds-table/components/edit/ds-table-editing-cell/index.ts

@@ -0,0 +1,2 @@
+export { DsTableEditingCell } from './ds-table-editing-cell';
+export type { DsTableEditingCellProps } from './ds-table-editing-cell.types';

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

@@ -1,6 +1,13 @@
-import { createContext, useContext } from 'react';
+import { createContext, useCallback, useContext, useRef, useState } from 'react';
+import type { Cell } from '@tanstack/react-table';
 import type { DsDataTableProps, DsTableRowSize } from '../ds-table.types';
 
+export interface EditingState<TData, TValue> {
+	cell: Cell<TData, TValue>;
+	draftValue: TValue;
+	error: string | null;
+}
+
 export interface DsTableContextType<TData, TValue> extends Partial<DsDataTableProps<TData, TValue>> {
 	/**
 	 * Whether the table is virtualized
@@ -16,6 +23,12 @@ export interface DsTableContextType<TData, TValue> extends Partial<DsDataTablePr
 	 * ID of the currently active row
 	 */
 	activeRowId?: string | null;
+	/** 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;
 }
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -28,3 +41,68 @@ export const useDsTableContext = <TData, TValue>(): DsTableContextType<TData, TV
 	}
 	return context as DsTableContextType<TData, TValue>;
 };
+
+/**
+ * Hoisted editing state for single-cell-at-a-time inline editing.
+ * Lives on {@link DsTableContext} so cell renderers and editors share one provider.
+ */
+export const useEditingState = <TData, TValue>(
+	onCellEdit?: (row: TData, columnId: string, value: TValue) => void,
+	onCellValidate?: (row: TData, columnId: string, value: TValue) => string | null,
+) => {
+	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;
+
+	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;
+			}
+		}
+		setEditing({
+			cell,
+			draftValue: cell.getValue(),
+			error: null,
+		});
+	}, []);
+
+	const setDraft = useCallback((value: TValue) => {
+		const current = editingRef.current;
+		if (!current) {
+			return;
+		}
+		setEditing({ ...current, draftValue: value, error: null });
+	}, []);
+
+	const commit = useCallback((overrideValue?: TValue) => {
+		const current = editingRef.current;
+		if (!current) {
+			return;
+		}
+		const valueToCommit = overrideValue !== undefined ? overrideValue : current.draftValue;
+		const error =
+			onCellValidateRef.current?.(current.cell.row.original, current.cell.column.id, valueToCommit) ?? null;
+		if (error !== null) {
+			setEditing({ ...current, draftValue: valueToCommit, error });
+			return;
+		}
+		onCellEditRef.current?.(current.cell.row.original, current.cell.column.id, valueToCommit);
+		setEditing(null);
+	}, []);
+
+	const cancel = useCallback(() => {
+		setEditing(null);
+	}, []);
+
+	return { editing, beginEdit, setDraft, commit, cancel };
+};

package/src/components/ds-table/ds-table-column.types.ts

@@ -0,0 +1,12 @@
+import type { ReactNode } from 'react';
+import type { CellContext, RowData } from '@tanstack/react-table';
+
+declare module '@tanstack/react-table' {
+	interface ColumnDefBase<TData extends RowData, TValue> {
+		/**
+		 * Renders the cell editor when the cell enters edit mode.
+		 * When omitted, the column is not editable.
+		 */
+		editCell?: (context: CellContext<TData, TValue>) => ReactNode;
+	}
+}