@drivenets/design-system 0.3.0 → 0.5.0

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

@@ -9,24 +9,49 @@ import type {
 	FilterState,
 } from '../types/filter-adapter.types';
 
+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.
+	 */
+	appliedFilters?: FilterState<TValue>;
+
+	/**
+	 * Controlled mode: Callback when filters change.
+	 * Called by applyFilters(), deleteChip(), clearAll().
+	 */
+	onFiltersChange?: (filters: FilterState<TValue>) => void;
+}
+
 export interface UseTableFiltersResult<TData, TValue> {
 	/**
-	 * Current filter state
+	 * Current draft filter state (uncommitted user selections)
 	 */
 	filterState: FilterState<TValue>;
 
 	/**
-	 * Column filters for TanStack Table
+	 * Column filters (derived from applied state)
 	 */
 	columnFilters: ColumnFilterState<TValue>[];
 
 	/**
-	 * Filter chips for display
+	 * Filter chips for display (derived from applied state)
 	 */
 	filterChips: ChipItem[];
 
 	/**
-	 * Filter navigation items with counts
+	 * Filter navigation items with active counts
 	 */
 	filterNavItems: FilterNavItem[];
 
@@ -36,132 +61,128 @@ export interface UseTableFiltersResult<TData, TValue> {
 	enhancedColumns: ColumnDef<TData>[];
 
 	/**
-	 * Handlers
+	 * Handlers for filter operations
 	 */
 	handlers: {
-		/**
-		 * Update a specific filter's value
-		 */
+		/** Update a specific filter's draft value */
 		updateFilter: (filterId: string, value: TValue) => void;
-
-		/**
-		 * Apply all filters (converts to TanStack format)
-		 */
+		/** Commit draft state to applied state */
 		applyFilters: () => void;
-
-		/**
-		 * Clear all filters
-		 */
+		/** Clear all filters */
 		clearAll: () => void;
-
-		/**
-		 * Delete a specific chip
-		 */
+		/** Delete a specific filter chip */
 		deleteChip: (chip: ChipItem) => void;
 	};
 
 	/**
-	 * Render function for filter modal content
+	 * Render function for filter content
 	 */
 	renderFilterContent: (selectedFilter: FilterNavItem) => ReactNode;
 }
 
 /**
- * Hook to orchestrate table filtering with adapters
- * Manages filter state, generates chips, handles column definitions
+ * 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.
  *
- * @param filterAdapters Array of filter adapters
- * @param baseColumns Base column definitions (optional)
- * @returns Complete filter management system
+ * @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),
+ * });
  */
-export function useTableFilters<TData, TValue, TCellValue>(
-	filterAdapters: FilterAdapter<TData, TValue, TCellValue>[] | AnyAdapter[],
-	baseColumns?: ColumnDef<TData>[],
-): UseTableFiltersResult<TData, TValue> {
+export function useTableFilters<TData, TValue, TCellValue>({
+	filterAdapters,
+	baseColumns,
+	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>[];
 
-	// Initialize filter state from adapters
-	const initialState: FilterState<TValue> = {};
-	_filterAdapters.forEach((adapter) => {
-		initialState[adapter.id] = adapter.initialValue;
-	});
+	const isControlled = externalAppliedFilters !== undefined && setExternalAppliedFilters !== undefined;
 
-	const [filterState, setFilterState] = useState<FilterState<TValue>>(initialState);
-	const [columnFilters, setColumnFilters] = useState<ColumnFilterState<TValue>[]>([]);
-	const [filterChips, setFilterChips] = useState<ChipItem[]>([]);
+	const initialFilters = _filterAdapters.reduce<FilterState<TValue>>(
+		(state, adapter) => ({ ...state, [adapter.id]: adapter.initialValue }),
+		{},
+	);
 
-	const getValueByAdapterId = (adapterId: string) => {
-		// Should be safe to cast because it's being filled in the initialState
-		return filterState[adapterId] as TValue;
-	};
+	const [internalAppliedFilters, setInternalAppliedFilters] = useState<FilterState<TValue>>({});
+	const [pendingFilters, setPendingFilters] = useState<FilterState<TValue>>({});
+
+	const appliedFilters = isControlled ? externalAppliedFilters : internalAppliedFilters;
+	const setAppliedFilters = isControlled ? setExternalAppliedFilters : setInternalAppliedFilters;
+
+	const draftFilters = { ...initialFilters, ...appliedFilters, ...pendingFilters };
+
+	const columnFilters: ColumnFilterState<TValue>[] = Object.entries(appliedFilters)
+		.filter(([id]) => {
+			const adapter = _filterAdapters.find((a) => a.id === id);
+			return adapter ? adapter.getActiveFiltersCount(appliedFilters[id] as TValue) > 0 : false;
+		})
+		.map(([id, value]) => ({ id, value }));
+
+	const filterChips = _filterAdapters.flatMap((adapter) => {
+		const value = appliedFilters[adapter.id];
+		return value !== undefined ? adapter.toChips(value) : [];
+	});
 
-	// Generate filter nav items with counts (updates as user changes filters in modal)
 	const filterNavItems: FilterNavItem[] = _filterAdapters.map((adapter) => ({
 		id: adapter.id,
 		label: adapter.label,
-		count: adapter.getActiveFiltersCount(getValueByAdapterId(adapter.id)),
+		count: adapter.getActiveFiltersCount(draftFilters[adapter.id] as TValue),
 	}));
 
-	// Enhance column definitions with filter functions and renderers
 	const enhancedColumns: ColumnDef<TData>[] = !baseColumns
 		? []
 		: baseColumns.map((col) => {
 				const adapter = _filterAdapters.find((a) => a.id === col.id);
-
-				if (adapter) {
-					const cellRenderer = adapter.cellRenderer;
-					return {
-						...col,
-						filterFn: adapter.columnFilterFn,
-						...(cellRenderer && {
-							cell: (info: CellContext<TData, TCellValue>) => cellRenderer(info.getValue()),
-						}),
-					};
+				if (!adapter) {
+					return col;
 				}
 
-				return col;
+				const cellRenderer = adapter.cellRenderer;
+				return {
+					...col,
+					filterFn: adapter.columnFilterFn,
+					...(cellRenderer && {
+						cell: (info: CellContext<TData, TCellValue>) => cellRenderer(info.getValue()),
+					}),
+				};
 			});
 
-	// Handlers
 	const updateFilter = (filterId: string, value: TValue) => {
-		setFilterState((prev) => ({
-			...prev,
-			[filterId]: value,
-		}));
+		setPendingFilters((prev) => ({ ...prev, [filterId]: value }));
 	};
 
 	const applyFilters = () => {
-		const filters: ColumnFilterState<TValue>[] = [];
-		const chips: ChipItem[] = [];
-
-		_filterAdapters.forEach((adapter) => {
-			const value = getValueByAdapterId(adapter.id);
-
+		const filtersToApply = _filterAdapters.reduce<FilterState<TValue>>((acc, adapter) => {
+			const value = draftFilters[adapter.id] as TValue;
 			if (adapter.getActiveFiltersCount(value) > 0) {
-				filters.push({
-					id: adapter.id,
-					value,
-				});
+				acc[adapter.id] = value;
 			}
+			return acc;
+		}, {});
 
-			// Generate chips from current filter value
-			const adapterChips = adapter.toChips(value);
-			chips.push(...adapterChips);
-		});
-
-		setColumnFilters(filters);
-		setFilterChips(chips);
+		setAppliedFilters(filtersToApply);
+		setPendingFilters({});
 	};
 
 	const clearAll = () => {
-		const resetState: FilterState<TValue> = {};
-		_filterAdapters.forEach((adapter) => {
-			resetState[adapter.id] = adapter.reset();
-		});
-		setFilterState(resetState);
-		setColumnFilters([]);
-		setFilterChips([]);
+		setPendingFilters({});
+		setAppliedFilters({});
 	};
 
 	const deleteChip = (chip: ChipItem) => {
@@ -175,39 +196,19 @@ export function useTableFilters<TData, TValue, TCellValue>(
 			return;
 		}
 
-		const currentValue = getValueByAdapterId(filterKey);
-		const newValue = adapter.fromChip(chip, currentValue);
-
-		// Regenerate chips to check if this was the last one
-		const chips: ChipItem[] = [];
-		_filterAdapters.forEach((adapter) => {
-			const value = adapter.id === filterKey ? newValue : getValueByAdapterId(adapter.id);
-			const adapterChips = adapter.toChips(value);
-			chips.push(...adapterChips);
-		});
-
-		// If no chips left, clear all filters
-		if (chips.length === 0) {
-			clearAll();
+		const currentValue = appliedFilters[filterKey];
+		if (currentValue === undefined) {
 			return;
 		}
 
-		// Otherwise, update state and filters
-		setFilterState((prev) => ({
-			...prev,
-			[filterKey]: newValue,
-		}));
-
-		// Update column filters
-		if (adapter.getActiveFiltersCount(newValue) === 0) {
-			setColumnFilters((prev) => prev.filter((cf) => cf.id !== filterKey));
-		} else {
-			setColumnFilters((prev) =>
-				prev.map((cf) => (cf.id === filterKey ? { id: filterKey, value: newValue } : cf)),
-			);
-		}
+		const newValue = adapter.fromChip(chip, currentValue);
+
+		const newFilters =
+			adapter.getActiveFiltersCount(newValue) === 0
+				? Object.fromEntries(Object.entries(appliedFilters).filter(([key]) => key !== filterKey))
+				: { ...appliedFilters, [filterKey]: newValue };
 
-		setFilterChips(chips);
+		setAppliedFilters(newFilters);
 	};
 
 	const renderFilterContent = (selectedFilter: FilterNavItem) => {
@@ -216,14 +217,14 @@ export function useTableFilters<TData, TValue, TCellValue>(
 			return null;
 		}
 
-		const value = getValueByAdapterId(adapter.id);
+		const value = draftFilters[adapter.id] as TValue;
 		const onChange = (newValue: TValue) => updateFilter(adapter.id, newValue);
 
 		return adapter.renderFilter(value, onChange);
 	};
 
 	return {
-		filterState,
+		filterState: draftFilters,
 		columnFilters,
 		filterChips,
 		filterNavItems,

package/src/components/ds-tabs/components/ds-tabs-content/ds-tabs-content.module.scss

@@ -4,6 +4,10 @@ $animation-translate: -4px;
 .tabContent {
 	padding: var(--spacing-standard) 0;
 	animation: fadeIn $animation-duration ease-in;
+
+	&[data-state='closed'] {
+		display: none;
+	}
 }
 
 @keyframes fadeIn {

package/src/index.ts

@@ -1,8 +1,10 @@
 export * from './components/ds-alert-banner';
+export * from './components/ds-autocomplete';
 export * from './components/ds-avatar';
 export * from './components/ds-avatar-group';
 export * from './components/ds-breadcrumb';
 export * from './components/ds-button';
+export * from './components/ds-card';
 export * from './components/ds-checkbox';
 export * from './components/ds-chip';
 export * from './components/ds-chip-group';

package/src/styles/shared/_modal.scss

@@ -1,123 +0,0 @@
-@use '../typography' as typography;
-
-@mixin overlay-base {
-	position: fixed;
-	inset: 0;
-	background: var(--color-background-brand);
-	opacity: 0.4;
-	z-index: 1199;
-
-	&[data-state='open'] {
-		animation: fade-in-overlay 0.2s ease-in-out both;
-	}
-
-	&[data-state='closed'] {
-		animation: fade-out-overlay 0.2s 0.1s ease-in-out both;
-	}
-}
-
-@keyframes fade-in-overlay {
-	0% {
-		opacity: 0;
-	}
-
-	100% {
-		opacity: 0.4;
-	}
-}
-
-@keyframes fade-out-overlay {
-	0% {
-		opacity: 0.4;
-	}
-
-	100% {
-		opacity: 0;
-	}
-}
-
-@mixin modal-base {
-	position: fixed;
-	inset: 50% auto auto 50%;
-	background: var(--color-background);
-	border-radius: 4px;
-	box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.15);
-	z-index: 1200;
-	overflow: hidden;
-
-	&[data-state='open'] {
-		animation: scale-in-modal 0.2s 0.1s ease-in-out both;
-	}
-
-	&[data-state='closed'] {
-		animation: scale-out-modal 0.2s ease-in-out both;
-	}
-}
-
-@keyframes scale-in-modal {
-	0% {
-		opacity: 0;
-		transform: translate(-50%, -50%) scale(0.9);
-	}
-
-	100% {
-		opacity: 1;
-		transform: translate(-50%, -50%) scale(1);
-	}
-}
-
-@keyframes scale-out-modal {
-	0% {
-		opacity: 1;
-		transform: translate(-50%, -50%) scale(1);
-	}
-
-	100% {
-		opacity: 0;
-		transform: translate(-50%, -50%) scale(0.9);
-	}
-}
-
-@mixin content-base {
-	display: flex;
-	flex-direction: column;
-}
-
-@mixin header-footer-base {
-	background: inherit;
-	flex-shrink: 0;
-}
-
-@mixin header-base {
-	@include header-footer-base;
-	display: flex;
-	align-items: center;
-	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
-}
-
-@mixin footer-base($has-border: true) {
-	@include header-footer-base;
-
-	@if $has-border {
-		border-top: 1px solid rgba(0, 0, 0, 0.06);
-	}
-}
-
-@mixin title-base {
-	color: var(--color-font-main);
-	margin: 0;
-	flex: 1;
-}
-
-@mixin body-base {
-	flex: 1;
-	overflow-y: auto;
-	overflow-x: hidden;
-	min-height: 0;
-}
-
-@mixin actions-base {
-	display: flex;
-	gap: 8px;
-	justify-content: flex-end;
-}

package/dist/components/ds-confirmation/ds-confirmation.module.cjs

@@ -1,21 +0,0 @@
-
-//#region src/components/ds-confirmation/ds-confirmation.module.scss
-var ds_confirmation_module_default = {
-	"overlay": "_overlay_1hsf6_1",
-	"fade-in-overlay": "_fade-in-overlay_1hsf6_1",
-	"fade-out-overlay": "_fade-out-overlay_1hsf6_1",
-	"modal": "_modal_1hsf6_1",
-	"scale-in-modal": "_scale-in-modal_1hsf6_1",
-	"scale-out-modal": "_scale-out-modal_1hsf6_1",
-	"content": "_content_1hsf6_1",
-	"header": "_header_1hsf6_1",
-	"footer": "_footer_1hsf6_1",
-	"actions": "_actions_1hsf6_1",
-	"title": "_title_1hsf6_1",
-	"icon": "_icon_1hsf6_1",
-	"body": "_body_1hsf6_1",
-	"cancel": "_cancel_1hsf6_1"
-};
-
-//#endregion
-exports.default = ds_confirmation_module_default;

package/dist/components/ds-confirmation/ds-confirmation.module.js

@@ -1,21 +0,0 @@
-//#region src/components/ds-confirmation/ds-confirmation.module.scss
-var ds_confirmation_module_default = {
-	"overlay": "_overlay_1hsf6_1",
-	"fade-in-overlay": "_fade-in-overlay_1hsf6_1",
-	"fade-out-overlay": "_fade-out-overlay_1hsf6_1",
-	"modal": "_modal_1hsf6_1",
-	"scale-in-modal": "_scale-in-modal_1hsf6_1",
-	"scale-out-modal": "_scale-out-modal_1hsf6_1",
-	"content": "_content_1hsf6_1",
-	"header": "_header_1hsf6_1",
-	"footer": "_footer_1hsf6_1",
-	"actions": "_actions_1hsf6_1",
-	"title": "_title_1hsf6_1",
-	"icon": "_icon_1hsf6_1",
-	"body": "_body_1hsf6_1",
-	"cancel": "_cancel_1hsf6_1"
-};
-
-//#endregion
-export { ds_confirmation_module_default as default };
-//# sourceMappingURL=ds-confirmation.module.js.map

package/dist/components/ds-confirmation/ds-confirmation.module.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ds-confirmation.module.js","names":[],"sources":["../../../file:/home/runner/work/design-system/design-system/packages/design-system/src/styles/shared/_modal.scss","../../../file:/home/runner/work/design-system/design-system/packages/design-system/src/components/ds-confirmation/ds-confirmation.module.scss","../../../file:/home/runner/work/design-system/design-system/packages/design-system/src/styles/_typography.scss"],"sourcesContent":["@use '../../styles/typography';\n@use '../../styles/shared/modal' as shared;\n\n$max-width: 400px;\n$min-height: 188px;\n$max-height: 244px;\n\n.overlay {\n\t@include shared.overlay-base;\n}\n\n.modal {\n\t@include shared.modal-base;\n\tinline-size: $max-width;\n}\n\n.content {\n\t@include shared.content-base;\n\tmin-block-size: $min-height;\n\tmax-block-size: $max-height;\n\tpadding: var(--spacing-md) var(--spacing-lg);\n\tgap: var(--spacing-standard);\n}\n\n.header {\n\t@include shared.header-base;\n\tgap: var(--spacing-xs);\n\tpadding-bottom: var(--spacing-xs);\n}\n\n.footer {\n\t@include shared.footer-base(false);\n\tdisplay: flex;\n\n\t.actions {\n\t\t@include shared.actions-base;\n\t\tflex-grow: 1;\n\t}\n}\n\n.title {\n\t@include shared.title-base;\n\tflex-grow: 1;\n}\n\n.icon {\n\tflex-shrink: 0;\n}\n\n.body {\n\t@include shared.body-base;\n\t@include typography.body-sm-reg;\n\tcolor: var(--color-font-main);\n}\n\n.cancel {\n\tmargin-right: auto;\n}\n"],"mappings":""}

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

@@ -1,58 +0,0 @@
-@use '../../styles/typography';
-@use '../../styles/shared/modal' as shared;
-
-$max-width: 400px;
-$min-height: 188px;
-$max-height: 244px;
-
-.overlay {
-	@include shared.overlay-base;
-}
-
-.modal {
-	@include shared.modal-base;
-	inline-size: $max-width;
-}
-
-.content {
-	@include shared.content-base;
-	min-block-size: $min-height;
-	max-block-size: $max-height;
-	padding: var(--spacing-md) var(--spacing-lg);
-	gap: var(--spacing-standard);
-}
-
-.header {
-	@include shared.header-base;
-	gap: var(--spacing-xs);
-	padding-bottom: var(--spacing-xs);
-}
-
-.footer {
-	@include shared.footer-base(false);
-	display: flex;
-
-	.actions {
-		@include shared.actions-base;
-		flex-grow: 1;
-	}
-}
-
-.title {
-	@include shared.title-base;
-	flex-grow: 1;
-}
-
-.icon {
-	flex-shrink: 0;
-}
-
-.body {
-	@include shared.body-base;
-	@include typography.body-sm-reg;
-	color: var(--color-font-main);
-}
-
-.cancel {
-	margin-right: auto;
-}

package/src/components/ds-table/utils/story-data-generator.ts

@@ -1,91 +0,0 @@
-import type { SortingState } from '@tanstack/react-table';
-import type { Status } from '../ds-table.stories';
-
-export type Person = {
-	id: string;
-	firstName: string;
-	lastName: string;
-	age: number;
-	visits: number;
-	status: Status;
-	progress: number;
-};
-
-export interface GeneratedDataResult {
-	data: Person[];
-	meta: {
-		totalRowCount: number;
-	};
-}
-
-/**
- * Generates mock data for table stories with pagination support
- */
-export const generatePersonData = (
-	start: number,
-	size: number,
-	sorting: SortingState,
-	totalRows: number = 10_000,
-): GeneratedDataResult => {
-	const firstNames = ['Alice', 'Bob', 'Charlie', 'Diana', 'Eve', 'Frank', 'Grace', 'Henry', 'Ivy', 'Jack'];
-	const lastNames = [
-		'Smith',
-		'Johnson',
-		'Williams',
-		'Brown',
-		'Jones',
-		'Garcia',
-		'Miller',
-		'Davis',
-		'Rodriguez',
-		'Martinez',
-	];
-	const statuses: Status[] = ['single', 'relationship', 'complicated'];
-
-	// Generate all data first for sorting
-	const allData = Array.from({ length: totalRows }).map((_, index) => {
-		const i = index + 1;
-		return {
-			id: i.toString(),
-			firstName: firstNames[i % firstNames.length] as string,
-			lastName: lastNames[i % lastNames.length] as string,
-			age: 20 + (i % 50),
-			visits: Math.floor(Math.random() * 500) + 1,
-			status: statuses[i % statuses.length] as Status,
-			progress: Math.floor(Math.random() * 100) + 1,
-		} satisfies Person;
-	});
-
-	// Apply sorting if provided
-	const sortedData = [...allData];
-	const sort = sorting[0];
-	if (sort) {
-		const { id, desc } = sort;
-		sortedData.sort((a, b) => {
-			const aValue = a[id as keyof Person];
-			const bValue = b[id as keyof Person];
-			if (desc) {
-				return aValue < bValue ? 1 : -1;
-			}
-			return aValue > bValue ? 1 : -1;
-		});
-	}
-
-	// Return paginated slice
-	return {
-		data: sortedData.slice(start, start + size),
-		meta: {
-			totalRowCount: sortedData.length,
-		},
-	};
-};
-
-/**
- * Simulates an API call with network delay
- */
-export const simulateApiCall = async <T>(dataGenerator: () => T, delayMs: number = 200): Promise<T> => {
-	await delay(delayMs);
-	return dataGenerator();
-};
-
-const delay = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));