@drivenets/design-system 0.12.0 → 0.13.0

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

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

@@ -1,5 +1,9 @@
-import type { ReactNode } from 'react';
+import { type ReactNode, useState } from 'react';
+import classNames from 'classnames';
+import styles from './checkbox-filter.module.scss';
 import { DsCheckbox } from '../../../../ds-checkbox';
+import { DsTextInput } from '../../../../ds-text-input';
+import { DsIcon } from '../../../../ds-icon';
 
 export interface CheckboxFilterItem<TValue = string> {
 	value: TValue;
@@ -7,11 +11,30 @@ export interface CheckboxFilterItem<TValue = string> {
 	metadata?: Record<string, unknown>;
 }
 
+export interface CheckboxFilterLocale {
+	/** @default 'All' */
+	allLabel?: string;
+	/** @default 'Search' */
+	searchPlaceholder?: string;
+	/** @default 'No matches' */
+	noMatchesLabel?: string;
+}
+
 export interface CheckboxFilterProps<TValue> {
 	items: CheckboxFilterItem<TValue>[];
+	/** Custom row renderer; defaults to `item.label`. */
 	renderer?: (item: CheckboxFilterItem<TValue>) => ReactNode;
 	selectedItems: CheckboxFilterItem<TValue>[];
 	onSelectionChange: (selectedItems: CheckboxFilterItem<TValue>[]) => void;
+	/** Show a case-insensitive substring search above the list. @default false */
+	searchable?: boolean;
+	/**
+	 * Show an "All" toggle. Checked when every visible item is selected,
+	 * indeterminate when some are, unchecked otherwise. @default false
+	 */
+	selectAll?: boolean;
+	locale?: CheckboxFilterLocale;
+	className?: string;
 }
 
 export const CheckboxFilter = <TValue,>({
@@ -19,7 +42,19 @@ export const CheckboxFilter = <TValue,>({
 	renderer,
 	selectedItems,
 	onSelectionChange,
+	searchable = false,
+	selectAll = false,
+	locale,
+	className,
 }: CheckboxFilterProps<TValue>) => {
+	const { allLabel = 'All', searchPlaceholder = 'Search', noMatchesLabel = 'No matches' } = locale ?? {};
+
+	const [query, setQuery] = useState('');
+
+	const visibleItems = searchable
+		? items.filter((item) => item.label.toLowerCase().includes(query.trim().toLowerCase()))
+		: items;
+
 	const handleCheckedChange = (selected: CheckboxFilterItem<TValue>, checked: boolean) => {
 		if (checked) {
 			onSelectionChange([...selectedItems, selected]);
@@ -28,16 +63,60 @@ export const CheckboxFilter = <TValue,>({
 		}
 	};
 
-	return items.map((item) => {
-		const label = renderer ? renderer(item) : item.label;
-		const checked = selectedItems.findIndex((selectedItem) => selectedItem.value === item.value) > -1;
-		return (
-			<DsCheckbox
-				key={JSON.stringify(item.value)}
-				label={label}
-				checked={checked}
-				onCheckedChange={(newState) => handleCheckedChange(item, newState === true)}
-			/>
-		);
-	});
+	const visibleSelectedCount = visibleItems.filter((item) =>
+		selectedItems.some((selected) => selected.value === item.value),
+	).length;
+
+	const allVisibleSelected = visibleItems.length > 0 && visibleSelectedCount === visibleItems.length;
+	const someVisibleSelected = visibleSelectedCount > 0 && !allVisibleSelected;
+
+	const handleSelectAllChange = (next: boolean | 'indeterminate') => {
+		const shouldSelect = next === true;
+		const visibleValues = new Set(visibleItems.map((item) => item.value));
+		const withoutVisible = selectedItems.filter((item) => !visibleValues.has(item.value));
+		onSelectionChange(shouldSelect ? [...withoutVisible, ...visibleItems] : withoutVisible);
+	};
+
+	return (
+		<div className={classNames(styles.root, className)}>
+			{searchable && (
+				<DsTextInput
+					value={query}
+					placeholder={searchPlaceholder}
+					onValueChange={setQuery}
+					slots={{
+						startAdornment: <DsIcon icon="search" size="tiny" />,
+					}}
+				/>
+			)}
+
+			<div className={styles.list} role="group">
+				{selectAll && visibleItems.length > 0 && (
+					<DsCheckbox
+						className={styles.checkboxItem}
+						label={allLabel}
+						checked={allVisibleSelected ? true : someVisibleSelected ? 'indeterminate' : false}
+						onCheckedChange={handleSelectAllChange}
+					/>
+				)}
+
+				{visibleItems.length === 0 && <div className={styles.empty}>{noMatchesLabel}</div>}
+
+				{visibleItems.map((item) => {
+					const label = renderer ? renderer(item) : item.label;
+					const checked = selectedItems.some((selected) => selected.value === item.value);
+
+					return (
+						<DsCheckbox
+							key={JSON.stringify(item.value)}
+							className={styles.checkboxItem}
+							label={label}
+							checked={checked}
+							onCheckedChange={(next) => handleCheckedChange(item, next === true)}
+						/>
+					);
+				})}
+			</div>
+		</div>
+	);
 };

package/src/components/ds-table/filters/components/checkbox-filter/index.ts

@@ -1,2 +1,2 @@
 export { CheckboxFilter } from './checkbox-filter';
-export type { CheckboxFilterProps, CheckboxFilterItem } from './checkbox-filter';
+export type { CheckboxFilterProps, CheckboxFilterItem, CheckboxFilterLocale } from './checkbox-filter';

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

@@ -0,0 +1,42 @@
+.trigger {
+	min-width: var(--icon-width-tiny);
+	padding: 0;
+	opacity: 0;
+	transition: opacity 0.2s;
+}
+
+.triggerActive,
+.triggerOpen {
+	opacity: 1;
+	color: var(--icon-information-main, var(--color-dap-primary-500));
+}
+
+.content {
+	display: flex;
+	flex-direction: column;
+	gap: var(--xs);
+	min-width: 280px;
+	max-width: 320px;
+	padding: var(--standard);
+	background: var(--background);
+	border: 1px solid var(--border-secondary);
+	border-radius: 4px;
+	box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.15);
+	z-index: 1000;
+
+	&[hidden] {
+		display: none;
+	}
+}
+
+.body {
+	display: flex;
+	flex-direction: column;
+}
+
+.footer {
+	display: flex;
+	align-items: center;
+	justify-content: flex-end;
+	gap: var(--xs);
+}

package/src/components/ds-table/filters/components/column-filter-popover/column-filter-popover.tsx

@@ -0,0 +1,89 @@
+import { type MouseEvent, useState } from 'react';
+import { Popover } from '@ark-ui/react/popover';
+import { Portal } from '@ark-ui/react/portal';
+import classNames from 'classnames';
+import styles from './column-filter-popover.module.scss';
+import type { DsTableColumnFilterPopoverProps } from './column-filter-popover.types';
+import { DsIcon } from '../../../../ds-icon';
+import { DsButtonV3 } from '../../../../ds-button-v3';
+
+// React portals bubble events through the React tree, so clicks inside the
+// popover would otherwise reach the parent `<TableHead onClick={sortHandler}>`
+// and toggle column sorting when applying or clearing the filter.
+const stopPropagation = (event: MouseEvent) => event.stopPropagation();
+
+/**
+ * Per-column filter popover anchored to a header cell: funnel trigger,
+ * adapter UI as the body, Clear / Save footer wired to `useTableFilters`.
+ */
+export const DsTableColumnFilterPopover = ({
+	children,
+	hasActiveFilter,
+	onApply,
+	onClear,
+	onCancel,
+	locale,
+	className,
+}: DsTableColumnFilterPopoverProps) => {
+	const { triggerAriaLabel = 'Filter column', clearLabel = 'Clear', saveLabel = 'Save' } = locale ?? {};
+
+	const [open, setOpen] = useState(false);
+
+	const handleOpenChange = (details: { open: boolean }) => {
+		if (open && !details.open) {
+			onCancel();
+		}
+		setOpen(details.open);
+	};
+
+	const handleSave = () => {
+		onApply();
+		setOpen(false);
+	};
+
+	const handleClear = () => {
+		onClear();
+		setOpen(false);
+	};
+
+	return (
+		<Popover.Root
+			open={open}
+			onOpenChange={handleOpenChange}
+			positioning={{ placement: 'bottom-end', gutter: 4 }}
+		>
+			<Popover.Trigger asChild>
+				<DsButtonV3
+					variant="tertiary"
+					size="tiny"
+					className={classNames(
+						styles.trigger,
+						hasActiveFilter && styles.triggerActive,
+						open && styles.triggerOpen,
+					)}
+					aria-label={triggerAriaLabel}
+					data-active={hasActiveFilter ? 'true' : undefined}
+					onClick={(event) => event.stopPropagation()}
+				>
+					<DsIcon icon="filter_alt" variant="outlined" filled={hasActiveFilter} size="tiny" />
+				</DsButtonV3>
+			</Popover.Trigger>
+
+			<Portal>
+				<Popover.Positioner>
+					<Popover.Content className={classNames(styles.content, className)} onClick={stopPropagation}>
+						<div className={styles.body}>{children}</div>
+						<div className={styles.footer}>
+							<DsButtonV3 variant="secondary" size="small" onClick={handleClear}>
+								{clearLabel}
+							</DsButtonV3>
+							<DsButtonV3 variant="primary" size="small" onClick={handleSave}>
+								{saveLabel}
+							</DsButtonV3>
+						</div>
+					</Popover.Content>
+				</Popover.Positioner>
+			</Portal>
+		</Popover.Root>
+	);
+};

package/src/components/ds-table/filters/components/column-filter-popover/column-filter-popover.types.ts

@@ -0,0 +1,25 @@
+import type { ReactNode } from 'react';
+
+export interface ColumnFilterPopoverLocale {
+	/** @default 'Filter column' */
+	triggerAriaLabel?: string;
+	/** @default 'Clear' */
+	clearLabel?: string;
+	/** @default 'Save' */
+	saveLabel?: string;
+}
+
+export interface DsTableColumnFilterPopoverProps {
+	/** Body rendered above the Clear / Save footer. */
+	children: ReactNode;
+	/** Whether the column has an applied filter; drives the trigger's active state. */
+	hasActiveFilter: boolean;
+	/** Commit the draft for this column. */
+	onApply: () => void;
+	/** Clear the draft and the applied value for this column. */
+	onClear: () => void;
+	/** Discard the draft when the popover closes without Save. */
+	onCancel: () => void;
+	locale?: ColumnFilterPopoverLocale;
+	className?: string;
+}

package/src/components/ds-table/filters/components/column-filter-popover/index.ts

@@ -0,0 +1,5 @@
+export { DsTableColumnFilterPopover } from './column-filter-popover';
+export type {
+	DsTableColumnFilterPopoverProps,
+	ColumnFilterPopoverLocale,
+} from './column-filter-popover.types';