@drivenets/design-system 0.12.0 → 0.13.0

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;
+	}
+}

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

@@ -1,5 +1,5 @@
 @use '../../styles/typography';
-@use '../../styles/utilities' as utils;
+@use '../../styles/scrollbars' as scrollbars;
 @use './styles/variables' as vars;
 
 :root {
@@ -9,9 +9,10 @@
 	--ds-table-header-height: 45px;
 }
 
-$bulk-actions-height: 60px;
+$bulk-actions-reserved-space: 80px;
 
 .container {
+	position: relative;
 	border-radius: vars.$border-radius;
 	border-width: vars.$border-width;
 	border-style: solid;
@@ -21,7 +22,51 @@ $bulk-actions-height: 60px;
 
 .dataTableContainer {
 	max-height: 100%;
-	overflow: auto;
+	overflow-x: auto;
+	overflow-y: hidden;
+	display: flex;
+	flex-direction: column;
+
+	@include scrollbars.scrollbar-on-hover;
+
+	> table {
+		display: flex;
+		flex-direction: column;
+		flex: 1;
+		min-height: 0;
+		width: max-content;
+		min-width: 100%;
+	}
+
+	thead {
+		display: block;
+		flex-shrink: 0;
+		overflow-y: scroll;
+		scrollbar-gutter: stable;
+
+		@include scrollbars.scrollbar-on-hover;
+	}
+
+	tbody {
+		display: block;
+		overflow-y: auto;
+		flex: 1;
+		min-height: 0;
+		scrollbar-gutter: stable;
+
+		@include scrollbars.scrollbar-on-hover;
+	}
+
+	thead tr,
+	tbody tr {
+		display: flex;
+	}
+
+	thead th,
+	tbody td {
+		display: flex;
+		align-items: center;
+	}
 }
 
 .table {
@@ -40,21 +85,66 @@ $bulk-actions-height: 60px;
 	width: 100%;
 }
 
+.bulkActionsVisible {
+	tbody {
+		padding-bottom: $bulk-actions-reserved-space;
+	}
+}
+
 .emptyState {
+	// colSpan in markup isn't honored by flex row layout, so the cell stretches
+	// across the row; stretch the inner content so it occupies full table width
+	flex: 1;
+	min-width: 0;
 	height: vars.$empty-state-height;
+	justify-content: center;
 	text-align: center;
-}
 
-.virtualized {
-	display: grid;
+	> * {
+		flex: 1;
+	}
 }
 
 .virtualizedContainer {
 	position: relative;
 	height: vars.$virtualized-height;
-	overflow: auto;
-}
+	overflow-x: auto;
+	overflow-y: hidden;
+	display: flex;
+	flex-direction: column;
 
-.bulkActionsVisible {
-	padding-bottom: $bulk-actions-height;
+	@include scrollbars.scrollbar-on-hover;
+
+	> table {
+		display: flex;
+		flex-direction: column;
+		flex: 1;
+		min-height: 0;
+		width: max-content;
+		min-width: 100%;
+	}
+
+	thead {
+		display: block;
+		flex-shrink: 0;
+		overflow-y: scroll;
+		scrollbar-gutter: stable;
+
+		@include scrollbars.scrollbar-on-hover;
+	}
+
+	tbody {
+		flex: 1;
+		min-height: 0;
+		scrollbar-gutter: stable;
+	}
+
+	thead tr {
+		display: flex;
+	}
+
+	thead th {
+		display: flex;
+		align-items: center;
+	}
 }

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

@@ -23,7 +23,7 @@ import { DsTableRowExpandableCell } from './components/ds-table-row-expandable-c
 import { DsTableRowSelectableCell } from './components/ds-table-row-selectable-cell';
 import { DsTableHeaderSelectableCell } from './components/ds-table-header-selectable-cell';
 import { useDragAndDrop } from './hooks/use-drag-and-drop';
-import { type DsTableContextType, DsTableContext } from './context/ds-table-context';
+import { type DsTableContextType, DsTableContext, useEditingState } from './context/ds-table-context';
 import { DsTableBodyVirtualized } from './components/ds-table-body-virtualized';
 import {
 	EMPTY_TABLE_STATE_TEXT,
@@ -77,6 +77,8 @@ const DsTable = <TData extends { id: string }, TValue>({
 	onColumnVisibilityChange,
 	activeRowId,
 	infiniteScroll,
+	onCellEdit,
+	onCellValidate,
 }: DsDataTableProps<TData, TValue>) => {
 	const [data, setData] = React.useState(tableData);
 	const [sorting, setSorting] = React.useState<SortingState>([]);
@@ -267,6 +269,8 @@ const DsTable = <TData extends { id: string }, TValue>({
 
 	const isBulkActionsVisible = selectable && actions.length > 0 && selectedRows.length > 0;
 
+	const editingState = useEditingState<TData, TValue>(onCellEdit, onCellValidate);
+
 	const contextValue: DsTableContextType<TData, TValue> = {
 		stickyHeader,
 		bordered,
@@ -283,6 +287,8 @@ const DsTable = <TData extends { id: string }, TValue>({
 		renderExpandedRow,
 		virtualized,
 		activeRowId,
+		onCellEdit,
+		...editingState,
 	};
 
 	return (
@@ -298,18 +304,11 @@ const DsTable = <TData extends { id: string }, TValue>({
 				)}
 			>
 				<DragWrapper>
-					<Table
-						className={classnames(
-							fullWidth && styles.fullWidth,
-							!bordered && styles.tableNoBorder,
-							virtualized && styles.virtualized,
-						)}
-					>
+					<Table className={classnames(fullWidth && styles.fullWidth, !bordered && styles.tableNoBorder)}>
 						<DsTableHeader table={table} />
 						{virtualized ? (
 							<DsTableBodyVirtualized
 								table={table}
-								tableContainerRef={tableContainerRef}
 								emptyState={emptyState}
 								estimateSize={virtualizedOptions?.estimateSize || ROW_SIZE_HEIGHT_MAP[rowSize]}
 								overscan={virtualizedOptions?.overscan}
@@ -330,17 +329,17 @@ const DsTable = <TData extends { id: string }, TValue>({
 						)}
 					</Table>
 				</DragWrapper>
+				{selectable && actions.length > 0 && (
+					<DsTableBulkActions
+						numSelectedRows={selectedRows.length}
+						actions={actions.map((action) => ({
+							...action,
+							onClick: () => action.onClick(selectedRows),
+						}))}
+						onClearSelection={table.resetRowSelection}
+					/>
+				)}
 			</div>
-			{selectable && actions.length > 0 && (
-				<DsTableBulkActions
-					numSelectedRows={selectedRows.length}
-					actions={actions.map((action) => ({
-						...action,
-						onClick: () => action.onClick(selectedRows),
-					}))}
-					onClearSelection={table.resetRowSelection}
-				/>
-			)}
 		</DsTableContext.Provider>
 	);
 };

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

@@ -1,4 +1,5 @@
 import type React from 'react';
+import './ds-table-column.types';
 import type {
 	ColumnDef,
 	ColumnFiltersState,
@@ -440,4 +441,55 @@ export interface DsDataTableProps<TData, TValue> {
 	 * Callback when column visibility changes
 	 */
 	onColumnVisibilityChange?: (visibility: VisibilityState) => void;
+
+	/**
+	 * Callback fired when an editable cell commits a new value via one of the
+	 * `DsTableEditCell*` wrappers or the `useCellEditor` hook. The parent is
+	 * expected to update the row data in response.
+	 *
+	 * Commits occur on confirm (check button or Enter). Opening another cell
+	 * discards the previous draft without calling this callback.
+	 *
+	 * @param row - The row data of the cell that was edited
+	 * @param columnId - The id of the column whose cell was edited
+	 * @param value - The new committed value
+	 *
+	 * @example
+	 * ```tsx
+	 * const [people, setPeople] = useState(initialPeople);
+	 *
+	 * <DsTable
+	 *   data={people}
+	 *   columns={columns}
+	 *   onCellEdit={(row, columnId, value) => {
+	 *     setPeople((rows) =>
+	 *       rows.map((r) => (r.id === row.id ? { ...r, [columnId]: value } : r)),
+	 *     );
+	 *   }}
+	 * />
+	 * ```
+	 */
+	onCellEdit?: (row: TData, columnId: string, value: TValue) => void;
+
+	/**
+	 * Validates a cell value before it is committed. Return `null` to allow the
+	 * commit (which fires `onCellEdit`), or an error message string to reject it
+	 * and keep the cell in edit mode. Synchronous only.
+	 *
+	 *
+	 * @param row - The row data of the cell being edited
+	 * @param columnId - The id of the column whose cell is being edited
+	 * @param value - The candidate value to validate
+	 *
+	 * @example
+	 * ```tsx
+	 * <DsTable
+	 *   data={people}
+	 *   columns={columns}
+	 *   onCellValidate={(row, columnId, value) => validateField(columnId)(value, row)}
+	 *   onCellEdit={...}
+	 * />
+	 * ```
+	 */
+	onCellValidate?: (row: TData, columnId: string, value: TValue) => string | null;
 }