@drivenets/design-system 0.12.1 → 0.13.0

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

package/src/components/ds-table/filters/hooks/use-table-filters.ts

@@ -1,107 +1,77 @@
 import { type ReactNode, useState } from 'react';
 import type { CellContext, ColumnDef } from '@tanstack/react-table';
-import type { ChipItem } from '../../../ds-chip-group';
+import type { TagFilterItem } from '../../../ds-tag-filter';
 import type {
 	AnyAdapter,
+	ColumnFilterMeta,
 	ColumnFilterState,
 	FilterAdapter,
 	FilterNavItem,
 	FilterState,
+	ResolvedColumnFilter,
 } from '../types/filter-adapter.types';
 
+const resolveColumnAdapterId = (
+	meta: ColumnFilterMeta | ResolvedColumnFilter | undefined,
+): string | undefined => {
+	if (!meta) {
+		return undefined;
+	}
+	if ('render' in meta) {
+		return meta.filterId;
+	}
+	if (meta.adapter) {
+		return meta.adapter.id;
+	}
+	return meta.adapterId;
+};
+
 export interface UseTableFiltersOptions<TData, TValue, TCellValue> {
-	/**
-	 * Array of filter adapters that define filter behavior
-	 */
 	filterAdapters: FilterAdapter<TData, TValue, TCellValue>[] | AnyAdapter[];
-
-	/**
-	 * Base column definitions
-	 */
 	baseColumns?: ColumnDef<TData>[];
-
-	/**
-	 * Controlled mode: External applied filters (source of truth).
-	 * When provided with onFiltersChange, the hook operates in controlled mode.
-	 * Keys must match adapter IDs.
-	 */
+	/** Controlled applied filters, keyed by adapter id. Pair with `onFiltersChange`. */
 	appliedFilters?: FilterState<TValue>;
-
-	/**
-	 * Controlled mode: Callback when filters change.
-	 * Called by applyFilters(), deleteChip(), clearAll().
-	 */
+	/** Fires from `applyFilters`, `deleteChip`, and `clearAll` in controlled mode. */
 	onFiltersChange?: (filters: FilterState<TValue>) => void;
 }
 
 export interface UseTableFiltersResult<TData, TValue> {
-	/**
-	 * Current draft filter state (uncommitted user selections)
-	 */
+	/** Draft filter state (uncommitted). */
 	filterState: FilterState<TValue>;
-
-	/**
-	 * Column filters (derived from applied state)
-	 */
+	/** Applied filters mapped to TanStack's column-filters shape. */
 	columnFilters: ColumnFilterState<TValue>[];
-
-	/**
-	 * Filter chips for display (derived from applied state)
-	 */
-	filterChips: ChipItem[];
-
-	/**
-	 * Filter navigation items with active counts
-	 */
+	/** Chips for `DsTagFilter`, derived from applied state. */
+	filterChips: TagFilterItem[];
+	/** Filter-nav items with active counts. */
 	filterNavItems: FilterNavItem[];
-
-	/**
-	 * Enhanced column definitions with filter functions
-	 */
+	/** `baseColumns` with `filterFn`, cell renderer and per-column meta wired in. */
 	enhancedColumns: ColumnDef<TData>[];
-
-	/**
-	 * Handlers for filter operations
-	 */
 	handlers: {
-		/** Update a specific filter's draft value */
+		/** Update a filter's draft value. */
 		updateFilter: (filterId: string, value: TValue) => void;
-		/** Commit draft state to applied state */
+		/** Commit all drafts to applied state. */
 		applyFilters: () => void;
-		/** Clear all filters */
+		/** Clear all filters. */
 		clearAll: () => void;
-		/** Delete a specific filter chip */
-		deleteChip: (chip: ChipItem) => void;
+		/** Remove a chip's effect from applied state. */
+		deleteChip: (chip: TagFilterItem) => void;
+		/** Commit one column's draft (per-column popover Save). */
+		applyColumnFilter: (filterId: string) => void;
+		/** Discard one column's draft without committing. */
+		cancelColumnFilter: (filterId: string) => void;
+		/** Clear one applied filter (per-column popover Clear). */
+		clearColumnFilter: (filterId: string) => void;
 	};
-
-	/**
-	 * Render function for filter content
-	 */
+	/** Renders the adapter UI for a column id, or `null` if no match. */
+	renderColumnFilter: (filterId: string) => ReactNode;
+	/** Renders the adapter UI for a `FilterNavItem`. */
 	renderFilterContent: (selectedFilter: FilterNavItem) => ReactNode;
 }
 
 /**
- * Hook to orchestrate table filtering with adapters.
- * Manages filter state, generates chips, and handles column definitions.
- *
- * **Uncontrolled mode** (default): Filters are managed internally.
- * **Controlled mode**: Filters are managed externally via appliedFilters/onFiltersChange.
- *
- * @example
- * // Uncontrolled mode
- * const { filterChips, handlers } = useTableFilters({
- *   filterAdapters: adapters,
- *   baseColumns: columns,
- * });
- *
- * @example
- * // Controlled mode (e.g., URL-driven filtering)
- * const { filterChips, handlers } = useTableFilters({
- *   filterAdapters: adapters,
- *   baseColumns: columns,
- *   appliedFilters: filtersFromUrl,
- *   onFiltersChange: (filters) => updateUrlAndRefetch(filters),
- * });
+ * Orchestrates table filtering: drafts → applied state, chips, nav counts, and
+ * column wiring. Uncontrolled by default; pass `appliedFilters` +
+ * `onFiltersChange` for URL-driven / external state.
  */
 export function useTableFilters<TData, TValue, TCellValue>({
 	filterAdapters,
@@ -109,7 +79,6 @@ export function useTableFilters<TData, TValue, TCellValue>({
 	appliedFilters: externalAppliedFilters,
 	onFiltersChange: setExternalAppliedFilters,
 }: UseTableFiltersOptions<TData, TValue, TCellValue>): UseTableFiltersResult<TData, TValue> {
-	// Internal variable just to avoid assignment issues of `any`.
 	const _filterAdapters = filterAdapters as FilterAdapter<TData, TValue, TCellValue>[];
 
 	const isControlled = externalAppliedFilters !== undefined && setExternalAppliedFilters !== undefined;
@@ -148,18 +117,41 @@ export function useTableFilters<TData, TValue, TCellValue>({
 	const enhancedColumns: ColumnDef<TData>[] = !baseColumns
 		? []
 		: baseColumns.map((col) => {
-				const adapter = _filterAdapters.find((a) => a.id === col.id);
+				const metaFilter = col.meta?.filter as ColumnFilterMeta | undefined;
+				const adapterIdFromMeta = resolveColumnAdapterId(metaFilter);
+				const adapter =
+					(adapterIdFromMeta && _filterAdapters.find((a) => a.id === adapterIdFromMeta)) ||
+					_filterAdapters.find((a) => a.id === col.id);
+
 				if (!adapter) {
 					return col;
 				}
 
 				const cellRenderer = adapter.cellRenderer;
+				const appliedValue = appliedFilters[adapter.id];
+				const resolvedFilter: ResolvedColumnFilter | undefined = metaFilter
+					? {
+							filterId: adapter.id,
+							hasActiveFilter: appliedValue !== undefined && adapter.getActiveFiltersCount(appliedValue) > 0,
+							render: () => renderForId(adapter.id),
+							onApply: () => applyColumnFilter(adapter.id),
+							onClear: () => clearColumnFilter(adapter.id),
+							onCancel: () => cancelColumnFilter(adapter.id),
+						}
+					: undefined;
+
 				return {
 					...col,
 					filterFn: adapter.columnFilterFn,
 					...(cellRenderer && {
 						cell: (info: CellContext<TData, TCellValue>) => cellRenderer(info.getValue()),
 					}),
+					...(resolvedFilter && {
+						meta: {
+							...col.meta,
+							filter: resolvedFilter,
+						},
+					}),
 				};
 			});
 
@@ -185,7 +177,43 @@ export function useTableFilters<TData, TValue, TCellValue>({
 		setAppliedFilters({});
 	};
 
-	const deleteChip = (chip: ChipItem) => {
+	const omitKey = (source: FilterState<TValue>, filterId: string): FilterState<TValue> =>
+		Object.fromEntries(Object.entries(source).filter(([key]) => key !== filterId));
+
+	const applyColumnFilter = (filterId: string) => {
+		const adapter = _filterAdapters.find((a) => a.id === filterId);
+		if (!adapter) {
+			return;
+		}
+
+		const draftValue = draftFilters[filterId] as TValue;
+		const hasActive = adapter.getActiveFiltersCount(draftValue) > 0;
+		const next = hasActive
+			? { ...appliedFilters, [filterId]: draftValue }
+			: omitKey(appliedFilters, filterId);
+
+		setAppliedFilters(next);
+		setPendingFilters((prev) => omitKey(prev, filterId));
+	};
+
+	const cancelColumnFilter = (filterId: string) => {
+		setPendingFilters((prev) => omitKey(prev, filterId));
+	};
+
+	const clearColumnFilter = (filterId: string) => {
+		const adapter = _filterAdapters.find((a) => a.id === filterId);
+		if (!adapter) {
+			return;
+		}
+
+		setPendingFilters((prev) => ({ ...omitKey(prev, filterId), [filterId]: adapter.initialValue }));
+
+		if (appliedFilters[filterId] !== undefined) {
+			setAppliedFilters(omitKey(appliedFilters, filterId));
+		}
+	};
+
+	const deleteChip = (chip: TagFilterItem) => {
 		const filterKey = typeof chip.metadata?.key === 'string' ? chip.metadata.key : undefined;
 		if (!filterKey) {
 			return;
@@ -211,8 +239,8 @@ export function useTableFilters<TData, TValue, TCellValue>({
 		setAppliedFilters(newFilters);
 	};
 
-	const renderFilterContent = (selectedFilter: FilterNavItem) => {
-		const adapter = _filterAdapters.find((a) => a.id === selectedFilter.id);
+	const renderForId = (filterId: string): ReactNode => {
+		const adapter = _filterAdapters.find((a) => a.id === filterId);
 		if (!adapter) {
 			return null;
 		}
@@ -223,6 +251,9 @@ export function useTableFilters<TData, TValue, TCellValue>({
 		return adapter.renderFilter(value, onChange);
 	};
 
+	const renderFilterContent = (selectedFilter: FilterNavItem) => renderForId(selectedFilter.id);
+	const renderColumnFilter = (filterId: string) => renderForId(filterId);
+
 	return {
 		filterState: draftFilters,
 		columnFilters,
@@ -234,7 +265,11 @@ export function useTableFilters<TData, TValue, TCellValue>({
 			applyFilters,
 			clearAll,
 			deleteChip,
+			applyColumnFilter,
+			cancelColumnFilter,
+			clearColumnFilter,
 		},
 		renderFilterContent,
+		renderColumnFilter,
 	};
 }

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

@@ -1,50 +1,8 @@
-/**
- * Table Filters - Filter Adapter Pattern
- *
- * A plug-and-play filter system that eliminates boilerplate and centralizes filter logic.
- *
- * ## Quick Start:
- *
- * ```typescript
- * // 1. Create filter adapters in a config file
- * import { createCheckboxFilterAdapter, createDualRangeFilterAdapter } from '../filters';
- *
- * export const statusFilter = createCheckboxFilterAdapter({
- *   id: 'status',
- *   label: 'Status',
- *   items: [{ value: 'active', label: 'Active' }],
- * });
- *
- * export const myFilters = [statusFilter];
- *
- * // 2. Use in component with useTableFilters hook
- * import { useTableFilters } from '../filters';
- *
- * const { columnFilters, filterChips, enhancedColumns, handlers } =
- *   useTableFilters(myFilters, columns);
- * ```
- *
- * ## Available Exports:
- *
- * ### Factory Functions:
- * - `createCheckboxFilterAdapter` - Multi-select checkbox filters
- * - `createDualRangeFilterAdapter` - Numeric range filters (with multiple fields)
- * - `createFilterAdapter` - Base function for custom filters (full control)
- *
- * ### Hook:
- * - `useTableFilters` - Orchestrates multiple filters, manages state
- *
- * ### Types:
- * - `FilterAdapter` - Core adapter interface
- * - `CheckboxFilterItem` - Item type for checkbox filters
- * - `RangeFilterValue` - Value type for range filters
- *
- * ## Example:
- * See `stories/filters-panel.stories.tsx` and `stories/filters-panel/workflow-filters.config.tsx`
- */
+import './types/column-meta.augmentation';
 
 export * from './adapters';
 export * from './types/filter-adapter.types';
 export * from './hooks';
 export type { CheckboxFilterItem, CheckboxFilterProps } from './components/checkbox-filter';
 export type { RangeFilterValue, RangeFilterProps } from './components/range-filter';
+export * from './components/column-filter-popover';

package/src/components/ds-table/filters/types/column-meta.augmentation.ts

@@ -0,0 +1,19 @@
+import '@tanstack/react-table';
+import type { ColumnFilterMeta, ResolvedColumnFilter } from './filter-adapter.types';
+
+/**
+ * Adds `column.meta.filter`. Consumers set `ColumnFilterMeta`;
+ * `useTableFilters` swaps it for `ResolvedColumnFilter` on `enhancedColumns`
+ * so the header can render the trigger + popover. The header narrows the
+ * union by checking for `render`.
+ */
+declare module '@tanstack/react-table' {
+	// `TData` / `TValue` must mirror the original `ColumnMeta` signature for
+	// the augmentation to merge.
+	// eslint-disable-next-line @typescript-eslint/no-unused-vars
+	interface ColumnMeta<TData, TValue> {
+		filter?: ColumnFilterMeta | ResolvedColumnFilter;
+	}
+}
+
+export {};