@drivenets/design-system 0.12.1 → 0.13.0

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

package/src/components/ds-table/filters/adapters/create-checkbox-filter-adapter.tsx

@@ -1,54 +1,36 @@
 import type { ReactNode } from 'react';
 import type { Row } from '@tanstack/react-table';
 import type { FilterAdapter } from '../types/filter-adapter.types';
-import { type CheckboxFilterItem, CheckboxFilter } from '../components/checkbox-filter';
+import {
+	type CheckboxFilterItem,
+	type CheckboxFilterLocale,
+	CheckboxFilter,
+} from '../components/checkbox-filter';
 import { createFilterAdapter } from './create-filter-adapter';
 
 export interface CheckboxFilterAdapterConfig<TData, TValue> {
-	/**
-	 * Unique identifier (should match column accessorKey)
-	 */
+	/** Unique id, should match the column `accessorKey`. */
 	id: string;
-
-	/**
-	 * Display label for filter navigation
-	 */
 	label: string;
-
-	/**
-	 * Available items to select from
-	 */
+	/** Selectable items. */
 	items: CheckboxFilterItem<TValue>[];
-
-	/**
-	 * Optional custom renderer for each item
-	 */
+	/** Custom row renderer; defaults to `item.label`. */
 	renderer?: (item: CheckboxFilterItem<TValue>) => ReactNode;
-
-	/**
-	 * Optional custom chip label generator
-	 * @default (item) => `${label}: ${item.label}`
-	 */
+	/** @default (item) => `${label}: ${item.label}` */
 	chipLabelTemplate?: (item: CheckboxFilterItem<TValue>) => string;
-
-	/**
-	 * Optional custom cell renderer for table column
-	 */
 	cellRenderer?: (value: TValue) => ReactNode;
-
-	/**
-	 * How to extract the value from a row for comparison
-	 * @default (row) => row.getValue(id)
-	 */
+	/** @default (row) => row.getValue(id) */
 	getRowValue?: (row: Row<TData>) => TValue;
+	/** Show a search input above the list. @default false */
+	searchable?: boolean;
+	/** Show an "All" toggle that selects / clears every (visible) item. @default false */
+	selectAll?: boolean;
+	locale?: CheckboxFilterLocale;
 }
 
 /**
- * Factory function to create a checkbox filter adapter
- *
- * Handles multi-select checkbox filtering with inclusion model:
- * - Empty selection = show all data (no filter active)
- * - Selected items = show only those items
+ * Multi-select inclusion filter: empty selection shows every row, selected
+ * items show only those rows.
  */
 export function createCheckboxFilterAdapter<TData, TValue = string>(
 	config: CheckboxFilterAdapterConfig<TData, TValue>,
@@ -61,20 +43,21 @@ export function createCheckboxFilterAdapter<TData, TValue = string>(
 		chipLabelTemplate = (item) => `${label}: ${item.label}`,
 		cellRenderer,
 		getRowValue = (row) => row.getValue(id),
+		searchable = false,
+		selectAll = false,
+		locale,
 	} = config;
 
 	return createFilterAdapter<TData, CheckboxFilterItem<TValue>[], TValue>({
 		id,
 		label,
-		initialValue: [], // Start with nothing selected (show all)
+		initialValue: [],
 
 		filterFn: (row, columnId, filterValue) => {
-			// Empty selection = no filter = show all
 			if (filterValue.length === 0) {
 				return true;
 			}
 
-			// Otherwise, show only selected items
 			const rowValue = getRowValue(row);
 			return filterValue.some((item) => item.value === rowValue);
 		},
@@ -82,7 +65,6 @@ export function createCheckboxFilterAdapter<TData, TValue = string>(
 		cellRenderer,
 
 		toChips: (selectedItems) => {
-			// Generate chips for all selected items
 			return selectedItems.map((item) => ({
 				id: `${id}_${String(item.value)}`,
 				label: chipLabelTemplate(item),
@@ -98,7 +80,6 @@ export function createCheckboxFilterAdapter<TData, TValue = string>(
 		},
 
 		getActiveFiltersCount: (selectedItems) => {
-			// Count = number of selected items (0 means none selected)
 			return selectedItems.length;
 		},
 
@@ -109,6 +90,9 @@ export function createCheckboxFilterAdapter<TData, TValue = string>(
 					renderer={renderer}
 					selectedItems={value}
 					onSelectionChange={onChange}
+					searchable={searchable}
+					selectAll={selectAll}
+					locale={locale}
 				/>
 			);
 		},

package/src/components/ds-table/filters/adapters/create-dual-range-filter-adapter.tsx

@@ -1,5 +1,5 @@
 import type { Row } from '@tanstack/react-table';
-import type { ChipItem } from '../../../ds-chip-group';
+import type { TagFilterItem } from '../../../ds-tag-filter';
 import type { FilterAdapter } from '../types/filter-adapter.types';
 import { RangeFilter } from '../components/range-filter';
 import { createFilterAdapter } from './create-filter-adapter';
@@ -14,39 +14,18 @@ export interface DualRangeFilterValue {
 }
 
 export interface DualRangeFilterAdapterConfig<TData> {
-	/**
-	 * Unique identifier (should match column accessorKey)
-	 */
+	/** Unique id, should match the column `accessorKey`. */
 	id: string;
-
-	/**
-	 * Display label for filter navigation
-	 */
 	label: string;
-
-	/**
-	 * Field configurations: { fieldKey: displayLabel }
-	 * Example: { running: 'Running', completed: 'Completed' }
-	 */
+	/** Field key → display label, e.g. `{ running: 'Running' }`. */
 	fields: Record<string, string>;
-
-	/**
-	 * Optional formatter for chip display
-	 * @default (num) => num.toLocaleString('en-US')
-	 */
+	/** @default (num) => num.toLocaleString('en-US') */
 	formatNumber?: (num: number) => string;
-
-	/**
-	 * How to extract the value object from a row
-	 * @default (row) => row.getValue(id)
-	 */
+	/** @default (row) => row.getValue(id) */
 	getRowValue?: (row: Row<TData>) => Record<string, number>;
 }
 
-/**
- * Factory function to create a dual-range filter adapter
- * Handles filtering on multiple numeric ranges within a single column
- */
+/** Filter over multiple numeric ranges within one column (AND across fields). */
 export function createDualRangeFilterAdapter<TData>(
 	config: DualRangeFilterAdapterConfig<TData>,
 ): FilterAdapter<TData, DualRangeFilterValue, Record<string, number>> {
@@ -71,7 +50,6 @@ export function createDualRangeFilterAdapter<TData>(
 		filterFn: (row, columnId, filterValue) => {
 			const rowValue = getRowValue(row);
 
-			// Check each field's range
 			for (const [fieldKey, range] of Object.entries(filterValue)) {
 				const hasFilter = range.from !== undefined || range.to !== undefined;
 				const fieldValue = rowValue[fieldKey];
@@ -80,8 +58,9 @@ export function createDualRangeFilterAdapter<TData>(
 					const matchesFrom = range.from === undefined || fieldValue >= range.from;
 					const matchesTo = range.to === undefined || fieldValue <= range.to;
 
+					// AND across fields: every range with a bound must match.
 					if (!matchesFrom || !matchesTo) {
-						return false; // AND logic: all ranges must match
+						return false;
 					}
 				}
 			}
@@ -89,10 +68,10 @@ export function createDualRangeFilterAdapter<TData>(
 			return true;
 		},
 
-		cellRenderer: undefined, // Let the column definition handle rendering
+		cellRenderer: undefined,
 
 		toChips: (value) => {
-			const chips: ChipItem[] = [];
+			const chips: TagFilterItem[] = [];
 
 			Object.entries(value).forEach(([fieldKey, range]) => {
 				const hasFilter = range.from !== undefined || range.to !== undefined;

package/src/components/ds-table/filters/adapters/create-filter-adapter.ts

@@ -2,116 +2,24 @@ import type { ReactNode } from 'react';
 import type { FilterAdapter } from '../types/filter-adapter.types';
 
 export interface FilterAdapterConfig<TData, TFilterValue, TCellValue = unknown> {
-	/**
-	 * Unique identifier (should match column accessorKey)
-	 */
+	/** Unique id, should match the column `accessorKey`. */
 	id: string;
-
-	/**
-	 * Display label for filter navigation
-	 */
 	label: string;
-
-	/**
-	 * Initial/default value for the filter
-	 */
 	initialValue: TFilterValue;
-
-	/**
-	 * Filter function - determines if row matches filter value
-	 */
+	/** TanStack `filterFn` for this column. */
 	filterFn: FilterAdapter<TData, TFilterValue, TCellValue>['columnFilterFn'];
-
-	/**
-	 * Convert filter value to display chips
-	 */
 	toChips: FilterAdapter<TData, TFilterValue, TCellValue>['toChips'];
-
-	/**
-	 * Remove chip effect from filter value
-	 */
 	fromChip: FilterAdapter<TData, TFilterValue, TCellValue>['fromChip'];
-
-	/**
-	 * Calculate active filter count
-	 */
 	getActiveFiltersCount: FilterAdapter<TData, TFilterValue, TCellValue>['getActiveFiltersCount'];
-
-	/**
-	 * Render the filter UI
-	 */
 	renderFilter: (value: TFilterValue, onChange: (value: TFilterValue) => void) => ReactNode;
-
-	/**
-	 * Optional custom cell renderer for table cells
-	 * Note: This receives the cell value from the table, not the filter value
-	 */
+	/** Cell renderer; receives the cell value, not the filter value. */
 	cellRenderer?: (value: TCellValue) => ReactNode;
 }
 
 /**
- * Base factory function to create a filter adapter
- *
- * This is the core function that all specialized filter adapters use internally.
- * Use this when checkbox or dual-range adapters don't fit your requirements.
- *
- * ## When to use directly:
- * - Complex filtering logic (e.g., editor + date range)
- * - Unique UI that doesn't fit generic patterns
- * - Combining multiple sub-filters
- * - Special chip generation requirements
- *
- * ## When to use specialized helpers instead:
- * - **Checkbox filters**: Use `createCheckboxFilterAdapter` for multi-select
- * - **Range filters**: Use `createDualRangeFilterAdapter` for numeric ranges
- *
- * ## Example:
- * ```typescript
- * interface MyFilterValue {
- *   users: string[];
- *   dateRange: { from?: Date; to?: Date };
- * }
- *
- * const myFilter = createFilterAdapter<DataType, MyFilterValue>({
- *   id: 'myColumn',
- *   label: 'My Filter',
- *   initialValue: { users: [], dateRange: {} },
- *
- *   filterFn: (row, columnId, filterValue) => {
- *     // Your custom logic
- *     return matchesUsers && matchesDateRange;
- *   },
- *
- *   toChips: (value) => {
- *     // Generate chips from your filter value
- *     return chips;
- *   },
- *
- *   fromChip: (chip, currentValue) => {
- *     // Remove chip's effect from value
- *     return updatedValue;
- *   },
- *
- *   getActiveFiltersCount: (value) => {
- *     // Count active filters (0 means none active)
- *     return count;
- *   },
- *
- *   renderFilter: (value, onChange) => (
- *     <YourCustomFilterComponent
- *       value={value}
- *       onChange={onChange}
- *     />
- *   ),
- * });
- * ```
- *
- * ## Reference Implementation:
- * See `workflow-filters.config.tsx` for a complete example (lastEditedFilterAdapter).
- *
- * ## Note:
- * Most use cases are covered by `createCheckboxFilterAdapter` or `createDualRangeFilterAdapter`.
- * Only use this base function directly when you need completely custom filter logic.
+ * Base factory used by every specialized adapter. Reach for it only when
+ * `createCheckboxFilterAdapter` / `createDualRangeFilterAdapter` don't fit
+ * (custom UI, mixed sub-filters, bespoke chip logic).
  */
 export function createFilterAdapter<TData, TFilterValue, TCellValue = unknown>(
 	config: FilterAdapterConfig<TData, TFilterValue, TCellValue>,

package/src/components/ds-table/filters/components/checkbox-filter/checkbox-filter.module.scss

@@ -0,0 +1,36 @@
+@use '../../../../../styles/typography';
+
+.root {
+	display: flex;
+	flex-direction: column;
+	min-width: 248px;
+}
+
+.list {
+	display: flex;
+	flex-direction: column;
+	max-height: 280px;
+	overflow-y: auto;
+}
+
+.empty {
+	@include typography.body-sm-reg;
+	color: var(--font-secondary);
+	padding: var(--xs) var(--3xs);
+	text-align: center;
+}
+
+.checkboxItem {
+	display: flex;
+	width: 100%;
+	align-items: center;
+	gap: var(--xs);
+	padding: var(--xs);
+	min-height: 40px;
+	border-radius: 4px;
+
+	/* Highlight bg is the focus indicator (matches DsDropdownMenu items). */
+	&[data-focus-visible] {
+		outline: none;
+	}
+}