@drivenets/design-system 0.3.0 → 0.4.0

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

@@ -1,20 +1,91 @@
-@use '../../styles/shared/modal' as shared;
-
-$pad-x: 24px;
-$pad-y: 16px;
+$pad-x: var(--spacing-lg);
+$pad-y: var(--spacing-standard);
 $max-width: 90vw;
-$max-height: 90vh;
+$border-size: 1px;
+$border: $border-size solid var(--color-border-secondary);
 
 .overlay {
-	@include shared.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;
+	}
 }
 
 .modal {
-	@include shared.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;
+	inline-size: min(var(--col-span-6), $max-width);
+
+	&[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);
+	}
 }
 
 .content {
-	@include shared.content-base;
+	display: flex;
+	flex-direction: column;
 	height: 100%;
 }
 
@@ -25,76 +96,68 @@ $max-height: 90vh;
 }
 
 .header {
-	@include shared.header-base;
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-xs);
+	position: relative;
+	background: inherit;
+	flex-shrink: 0;
+
+	&::after {
+		content: '';
+		position: absolute;
+		bottom: 0;
+		left: $pad-x;
+		right: $pad-x;
+		height: $border-size;
+		background: var(--color-border-secondary);
+	}
 }
 
 .footer {
-	@include shared.footer-base;
 	display: flex;
+	background: inherit;
+	flex-shrink: 0;
 }
 
 .title {
-	@include shared.title-base;
+	color: var(--color-font-main);
+	margin: 0;
+	flex: 1;
 }
 
 .body {
-	@include shared.body-base;
+	flex: 1;
+	overflow-y: auto;
+	overflow-x: hidden;
+	min-height: 0;
 }
 
 .actions {
-	@include shared.actions-base;
+	display: flex;
+	gap: var(--spacing-xs);
+	justify-content: flex-end;
 	margin-left: auto;
 }
 
-// width classes derived from DS grid
-.modal {
-	inline-size: min(var(--col-span-6), $max-width);
-}
-
-.modal.cols-1 {
-	inline-size: min(var(--col-span-1), $max-width);
-}
-
-.modal.cols-2 {
-	inline-size: min(var(--col-span-2), $max-width);
-}
-
-.modal.cols-3 {
-	inline-size: min(var(--col-span-3), $max-width);
-}
-
-.modal.cols-4 {
-	inline-size: min(var(--col-span-4), $max-width);
-}
-
-.modal.cols-5 {
-	inline-size: min(var(--col-span-5), $max-width);
-}
-
-.modal.cols-6 {
-	inline-size: min(var(--col-span-6), $max-width);
-}
-
-.modal.cols-7 {
-	inline-size: min(var(--col-span-7), $max-width);
-}
+// Dividers mode: full-width borders on header and footer
+.content[data-dividers] {
+	.header {
+		border-bottom: $border;
 
-.modal.cols-8 {
-	inline-size: min(var(--col-span-8), $max-width);
-}
-
-.modal.cols-9 {
-	inline-size: min(var(--col-span-9), $max-width);
-}
-
-.modal.cols-10 {
-	inline-size: min(var(--col-span-10), $max-width);
-}
+		&::after {
+			display: none;
+		}
+	}
 
-.modal.cols-11 {
-	inline-size: min(var(--col-span-11), $max-width);
+	.footer {
+		border-top: $border;
+	}
 }
 
-.modal.cols-12 {
-	inline-size: min(var(--col-span-12), $max-width);
+// Width classes derived from DS grid
+@for $i from 1 through 12 {
+	.modal.cols-#{$i} {
+		inline-size: min(var(--col-span-#{$i}), $max-width);
+	}
 }

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

@@ -14,14 +14,15 @@ import { DsTypography } from '../ds-typography';
  */
 const DsModal = ({
 	open,
-	onOpenChange,
 	columns = 6,
+	dividers = false,
 	style,
 	className,
 	modal = true,
 	closeOnEscape,
 	closeOnInteractOutside = false,
 	children,
+	onOpenChange,
 }: DsModalProps) => {
 	const handleOpenChange = (details: { open: boolean }) => {
 		onOpenChange(details.open);
@@ -48,7 +49,9 @@ const DsModal = ({
 							styles[`cols-${columns}`],
 						)}
 					>
-						<div className={classNames(styles.content)}>{children}</div>
+						<div className={styles.content} data-dividers={dividers || undefined}>
+							{children}
+						</div>
 					</Dialog.Content>
 				</Dialog.Positioner>
 			</Portal>

package/src/components/ds-modal/ds-modal.types.tsx

@@ -17,21 +17,24 @@ export interface DsModalProps extends Pick<
 	 * Whether the modal is open
 	 */
 	open: boolean;
-	/**
-	 * Callback when modal open state changes
-	 * @param open - whether the modal is open
-	 */
-	onOpenChange: (open: boolean) => void;
 
 	/**
 	 * Number of grid columns for modal width
 	 * @default 6
 	 */
 	columns?: DsModalColumns;
+
+	/**
+	 * Show full-width dividers between header, body, and footer sections
+	 * @default false
+	 */
+	dividers?: boolean;
+
 	/**
 	 * Optional inline styles to apply to the component
 	 */
 	style?: CSSProperties;
+
 	/**
 	 * Additional CSS class name
 	 */
@@ -41,4 +44,10 @@ export interface DsModalProps extends Pick<
 	 * Modal body content
 	 */
 	children: ReactNode;
+
+	/**
+	 * Callback when modal open state changes
+	 * @param open - whether the modal is open
+	 */
+	onOpenChange: (open: boolean) => void;
 }

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

@@ -1,2 +1,2 @@
 export { useTableFilters } from './use-table-filters';
-export type { UseTableFiltersResult } from './use-table-filters';
+export type { UseTableFiltersOptions, UseTableFiltersResult } from './use-table-filters';

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,4 +1,5 @@
 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';