@drivenets/design-system 0.9.1 → 0.11.0

package/src/components/ds-table/components/ds-table-row-virtualized/ds-table-row-virtualized.tsx

@@ -4,9 +4,9 @@ import { useDsTableContext } from '../../context/ds-table-context';
 import { getColumnSizeStyle } from '../../utils/column-size';
 import { TableCell, TableRow } from '../core-table';
 import { DsTableRowSelectableCell } from '../ds-table-row-selectable-cell';
-import { DsTableRowExpandableCell } from '../ds-table-row-expandable-cell';
 import type { DsTableRowVirtualizedProps } from './ds-table-row-virtualized.types';
 import { DsTableCell } from '../ds-table-cell';
+import { EXPANDER_COLUMN_ID } from '../../utils/constants';
 
 export const DsTableRowVirtualized = <TData,>({
 	row,
@@ -19,7 +19,6 @@ export const DsTableRowVirtualized = <TData,>({
 }: DsTableRowVirtualizedProps<TData>) => {
 	const {
 		selectable,
-		expandable,
 		bordered,
 		rowSize,
 		activeRowId,
@@ -71,13 +70,19 @@ export const DsTableRowVirtualized = <TData,>({
 					{selectable && (
 						<DsTableRowSelectableCell row={row} isSelected={isSelected} className={styles.selectableCell} />
 					)}
-					{expandable && <DsTableRowExpandableCell row={row} className={styles.expandableCell} />}
 					{row.getVisibleCells().map((cell, idx) => {
 						const isLastColumn = idx === row.getVisibleCells().length - 1;
 						const cellStyle = getColumnSizeStyle(cell.column.getSize(), true);
 
 						return (
-							<TableCell key={cell.id} style={cellStyle} className={styles.cell}>
+							<TableCell
+								key={cell.id}
+								style={cellStyle}
+								className={classnames(
+									styles.cell,
+									cell.column.id === EXPANDER_COLUMN_ID && styles.expandableCell,
+								)}
+							>
 								{isLastColumn ? (
 									<DsTableCell
 										row={row}

package/src/components/ds-table/components/ds-table-row-virtualized/ds-table-row-virtualized.types.ts

@@ -3,11 +3,38 @@ import { type Row } from '@tanstack/react-table';
 import { type VirtualItem, type Virtualizer } from '@tanstack/react-virtual';
 
 export interface DsTableRowVirtualizedProps<TData> {
+	/**
+	 * TanStack Table row model for this visual row.
+	 */
 	row: Row<TData>;
+	/**
+	 * Whether this row is currently part of the selection.
+	 */
 	isSelected: boolean;
+	/**
+	 * Shared ref that maps row ids to their rendered `<tr>` elements. The row
+	 * registers itself here on mount so the virtualizer can measure heights and
+	 * reference rows by id.
+	 */
 	rowsMapRef: RefObject<Map<string, HTMLTableRowElement>>;
+	/**
+	 * Shared ref that caches the measured height of each row by id, so the
+	 * virtualizer can preserve layout across remounts.
+	 */
 	rowHeightsMapRef: RefObject<Map<string, number>>;
+	/**
+	 * TanStack virtualizer driving the scroll window for the table body.
+	 */
 	rowVirtualizer: Virtualizer<HTMLDivElement, HTMLTableRowElement>;
+	/**
+	 * Virtual item descriptor for this row (index, start, size) from the virtualizer.
+	 */
 	virtualRow: VirtualItem;
+	/**
+	 * Whether this row renders expanded-row content (e.g., detail panel under the
+	 * parent row) rather than a regular data row. Click handlers stop propagation
+	 * when true to avoid triggering the parent's `onRowClick`.
+	 * @default false
+	 */
 	isExpandedRowContent?: boolean;
 }

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

@@ -2,14 +2,21 @@
 @use '../../styles/utilities' as utils;
 @use './styles/variables' as vars;
 
+:root {
+	--ds-table-row-small: 36px;
+	--ds-table-row-medium: 48px;
+	--ds-table-row-large: 64px;
+	--ds-table-header-height: 45px;
+}
+
 $bulk-actions-height: 60px;
 
 .container {
 	border-radius: vars.$border-radius;
 	border-width: vars.$border-width;
 	border-style: solid;
-	border-color: var(--neutral-6);
-	background: var(--color-background);
+	border-color: var(--color-dap-gray-400);
+	background: var(--background);
 }
 
 .dataTableContainer {

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

@@ -1,9 +1,11 @@
 import * as React from 'react';
-import { useImperativeHandle } from 'react';
+import { useImperativeHandle, useMemo } from 'react';
 import {
+	type ColumnDef,
 	type RowSelectionState,
 	type ColumnFiltersState,
 	getCoreRowModel,
+	getExpandedRowModel,
 	getFilteredRowModel,
 	getSortedRowModel,
 	type SortingState,
@@ -17,10 +19,11 @@ import { DsTableHeader } from './components/ds-table-header';
 import styles from './ds-table.module.scss';
 import type { DsDataTableProps, DsTableRowSize } from './ds-table.types';
 import { DsTableRow } from './components/ds-table-row';
+import { DsTableRowExpandableCell } from './components/ds-table-row-expandable-cell';
 import { useDragAndDrop } from './hooks/use-drag-and-drop';
 import { type DsTableContextType, DsTableContext } from './context/ds-table-context';
 import { DsTableBodyVirtualized } from './components/ds-table-body-virtualized';
-import { EMPTY_TABLE_STATE_TEXT } from './utils/constants';
+import { EMPTY_TABLE_STATE_TEXT, EXPANDER_COLUMN_ID, EXPANDER_COLUMN_WIDTH } from './utils/constants';
 
 // Row size to pixel height mapping (matches CSS variables)
 const ROW_SIZE_HEIGHT_MAP: Record<DsTableRowSize, number> = {
@@ -34,7 +37,7 @@ const ROW_SIZE_HEIGHT_MAP: Record<DsTableRowSize, number> = {
  */
 const DsTable = <TData extends { id: string }, TValue>({
 	ref,
-	columns,
+	columns: columnsProp,
 	data: tableData,
 	virtualized = false,
 	virtualizedOptions,
@@ -122,6 +125,23 @@ const DsTable = <TData extends { id: string }, TValue>({
 		onSelectionChange?.(newRowSelection);
 	};
 
+	const columns = useMemo<ColumnDef<TData, TValue>[]>(() => {
+		if (!expandable) {
+			return columnsProp;
+		}
+
+		const expanderColumn: ColumnDef<TData, TValue> = {
+			id: EXPANDER_COLUMN_ID,
+			size: EXPANDER_COLUMN_WIDTH,
+			enableSorting: false,
+			enableResizing: false,
+			header: () => null,
+			cell: ({ row }) => (row.getCanExpand() ? <DsTableRowExpandableCell row={row} /> : null),
+		};
+
+		return [expanderColumn, ...columnsProp];
+	}, [columnsProp, expandable]);
+
 	const table = useReactTable({
 		data: reorderable ? data : tableData,
 		columns,
@@ -133,6 +153,8 @@ const DsTable = <TData extends { id: string }, TValue>({
 		onColumnVisibilityChange: handleColumnVisibilityChange, // TODO: looks like this is not used, since visibility is handled from the outside
 		onRowSelectionChange: handleRowSelectionChange,
 		getRowId: (row) => row.id,
+		getExpandedRowModel: getExpandedRowModel(),
+		getRowCanExpand: typeof expandable === 'function' ? (row) => expandable(row.original) : () => expandable,
 		state: {
 			sorting,
 			columnFilters,
@@ -191,7 +213,7 @@ const DsTable = <TData extends { id: string }, TValue>({
 	const renderEmptyState = () => (
 		<TableRow>
 			<TableCell
-				colSpan={columns.length + (expandable ? 1 : 0) + (selectable ? 1 : 0)}
+				colSpan={columns.length + (selectable ? 1 : 0) + (reorderable ? 1 : 0)}
 				className={styles.emptyState}
 			>
 				{emptyState || EMPTY_TABLE_STATE_TEXT}

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

@@ -3,7 +3,7 @@
 	flex-direction: column;
 	gap: 10px;
 	padding-bottom: 16px;
-	border-bottom: 1px solid var(--color-border);
+	border-bottom: 1px solid var(--border);
 }
 
 .header {

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

@@ -106,6 +106,12 @@ export interface FilterState<TValue> {
  * Column filter for TanStack Table
  */
 export interface ColumnFilterState<TValue> {
+	/**
+	 * Column identifier this filter applies to (matches the column `accessorKey`).
+	 */
 	id: string;
+	/**
+	 * Current filter value, passed to the column's filter function.
+	 */
 	value: TValue;
 }

package/src/components/ds-table/styles/_mixins.scss

@@ -1,5 +1,5 @@
 @mixin expanded-row-border($side) {
-	$border: 1px solid var(--color-border-action-primary);
+	$border: 1px solid var(--border-action-primary);
 
 	&:not(.expandedRow + &) > td {
 		border-#{$side}: $border;

package/src/components/ds-table/styles/_variables.scss

@@ -1,7 +1,6 @@
 $border-radius: 4px;
 $border-width: 1px;
 $virtualized-height: 600px;
-$expand-column-width: 36px;
 $select-column-width: 36px;
 $reorder-column-width: 60px;
 $container-margin-vertical: 1rem;
@@ -10,8 +9,8 @@ $filter-input-max-width: 24rem;
 $header-sort-gap: 0.5rem;
 $empty-state-height: 6rem;
 
-$hover-bg-color: var(--color-background-secondary);
-$hover-border-color: var(--color-border);
-$expanded-row-bg-color: var(--color-background-secondary);
-$expand-toggle-hover-bg-color: var(--color-background-action-hover-weak);
-$expand-toggle-icon-color: var(--color-icon-information-main);
+$hover-bg-color: var(--background-secondary);
+$hover-border-color: var(--border);
+$expanded-row-bg-color: var(--background-secondary);
+$expand-toggle-hover-bg-color: var(--background-action-hover-weak);
+$expand-toggle-icon-color: var(--icon-information-main);

package/src/components/ds-table/utils/constants.ts

@@ -2,3 +2,13 @@
  * Default text for empty table state
  */
 export const EMPTY_TABLE_STATE_TEXT = 'No results.';
+
+/**
+ * Column id used for the synthetic expander column injected when `expandable` is set.
+ */
+export const EXPANDER_COLUMN_ID = 'expander';
+
+/**
+ * Width (in px) of the expander column.
+ */
+export const EXPANDER_COLUMN_WIDTH = 36;

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

@@ -2,7 +2,7 @@ $animation-duration: 0.2s;
 $animation-translate: -4px;
 
 .tabContent {
-	padding: var(--spacing-standard) 0;
+	padding: var(--standard) 0;
 	animation: fadeIn $animation-duration ease-in;
 
 	&[data-state='closed'] {

package/src/components/ds-tabs/components/ds-tabs-list/ds-tabs-indicator.module.scss

@@ -5,7 +5,7 @@ $transition-duration: 0.2s;
 
 .indicator {
 	position: absolute;
-	background: var(--color-background-selected);
+	background: var(--background-primary);
 	transition:
 		left $transition-duration ease-in-out,
 		top $transition-duration ease-in-out,

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

@@ -8,7 +8,7 @@ $border-width: 1px;
 		flex-direction: row;
 		align-items: center;
 		border-bottom: $border-width solid var(--color-border-main);
-		gap: var(--spacing-xs);
+		gap: var(--xs);
 	}
 
 	[data-orientation='vertical'] & {
@@ -18,10 +18,10 @@ $border-width: 1px;
 	}
 
 	[data-orientation='vertical'][data-size='medium'] & {
-		gap: var(--spacing-xs);
+		gap: var(--xs);
 	}
 
 	[data-orientation='vertical'][data-size='small'] & {
-		gap: var(--spacing-3xs);
+		gap: var(--3xs);
 	}
 }

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

@@ -10,75 +10,75 @@ $disabled-opacity: 0.5;
 	@include typography.body-sm-reg;
 	display: inline-flex;
 	align-items: center;
-	background: var(--color-background);
-	border-radius: var(--exo-spacing-2x-small);
+	background: var(--background);
+	border-radius: var(--3xs);
 	cursor: pointer;
 	transition:
 		background-color $transition-duration,
 		color $transition-duration,
 		border-color $transition-duration;
 	position: relative;
-	color: var(--color-font-main);
+	color: var(--font-main);
 	border: $tab-border-width solid transparent;
 	white-space: nowrap;
 
 	&:hover:not(:disabled):not([aria-selected='true']) {
-		background: var(--color-background-secondary);
+		background: var(--background-secondary);
 
 		.badge {
-			background: var(--color-background-tertiary);
+			background: var(--background-tertiary);
 		}
 	}
 
 	&:active:not(:disabled):not([aria-selected='true']) {
-		background: var(--color-background-tertiary);
+		background: var(--background-tertiary);
 
 		.badge {
-			background: var(--color-background-secondary);
+			background: var(--background-secondary);
 		}
 	}
 
 	&:focus-visible:not(:disabled):not([aria-selected='true']) {
 		border-color: var(--color-border-action-hover);
-		background: var(--color-background-secondary);
+		background: var(--background-secondary);
 		outline: none;
 
 		.badge {
-			background: var(--color-background-tertiary);
+			background: var(--background-tertiary);
 		}
 	}
 
 	&:disabled {
 		cursor: not-allowed;
 		opacity: $disabled-opacity;
-		color: var(--color-font-disabled);
+		color: var(--font-disabled);
 	}
 
 	&[aria-selected='true'] {
 		@include typography.body-sm-md;
-		color: var(--color-background-selected);
-		background: var(--color-background);
+		color: var(--background-primary);
+		background: var(--background);
 
 		.icon {
-			color: var(--color-background-selected);
+			color: var(--background-primary);
 		}
 
 		.badge {
-			background: var(--color-background-action-secondary-hover);
-			color: var(--color-background-selected);
+			background: var(--background-action-secondary-hover);
+			color: var(--background-primary);
 		}
 
 		&:hover:not(:disabled) {
-			background: var(--color-background-selected-weak);
+			background: var(--background-secondary-hover);
 		}
 
 		&:active:not(:disabled) {
-			background: var(--color-background-selected-weak);
+			background: var(--background-secondary-hover);
 		}
 
 		&:focus-visible:not(:disabled) {
-			border-color: var(--color-background-selected);
-			background: var(--color-background-selected-weak);
+			border-color: var(--background-primary);
+			background: var(--background-secondary-hover);
 			outline: none;
 		}
 	}
@@ -87,37 +87,37 @@ $disabled-opacity: 0.5;
 	[data-orientation='horizontal'] & {
 		flex-direction: row;
 		justify-content: center;
-		gap: var(--spacing-3xs);
+		gap: var(--3xs);
 		flex: 0 0 auto;
 		width: auto;
 	}
 
 	[data-orientation='horizontal'][data-size='medium'] & {
-		padding: var(--spacing-xs) var(--spacing-sm);
+		padding: var(--xs) var(--sm);
 	}
 
 	[data-orientation='horizontal'][data-size='small'] & {
-		padding: var(--spacing-2xs) var(--spacing-sm);
+		padding: var(--2xs) var(--sm);
 	}
 
 	// Vertical orientation + size variants
 	[data-orientation='vertical'] & {
 		flex-direction: row;
 		justify-content: flex-start;
-		gap: var(--spacing-3xs);
+		gap: var(--3xs);
 		width: 100%;
 	}
 
 	[data-orientation='vertical'][data-size='medium'] & {
-		padding: var(--spacing-sm) var(--spacing-standard);
-		padding-left: var(--spacing-xs);
-		border-radius: var(--exo-spacing-2x-small) 0 0 var(--exo-spacing-2x-small);
+		padding: var(--sm) var(--standard);
+		padding-left: var(--xs);
+		border-radius: var(--3xs) 0 0 var(--3xs);
 	}
 
 	[data-orientation='vertical'][data-size='small'] & {
-		padding: var(--spacing-xs) var(--spacing-standard);
-		padding-left: var(--spacing-xs);
-		border-radius: var(--exo-spacing-2x-small) 0 0 var(--exo-spacing-2x-small);
+		padding: var(--xs) var(--standard);
+		padding-left: var(--xs);
+		border-radius: var(--3xs) 0 0 var(--3xs);
 	}
 }
 
@@ -125,7 +125,7 @@ $disabled-opacity: 0.5;
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	color: var(--color-font-secondary);
+	color: var(--font-secondary);
 	flex-shrink: 0;
 }
 
@@ -148,32 +148,32 @@ $disabled-opacity: 0.5;
 	align-items: center;
 	justify-content: center;
 	flex-shrink: 0;
-	color: var(--color-font-main) !important;
+	color: var(--font-main) !important;
 	cursor: pointer;
-	border-radius: var(--exo-spacing-2x-small);
+	border-radius: var(--3xs);
 	transition:
 		background-color $transition-duration,
 		color $transition-duration;
 
 	&:hover {
-		background: var(--color-background-action-secondary);
-		color: var(--color-font-main);
+		background: var(--background-action-secondary);
+		color: var(--font-main);
 	}
 
 	&:active {
-		background: var(--color-background-tertiary);
+		background: var(--background-tertiary);
 	}
 
 	&:focus-visible {
-		outline: var(--spacing-4xs) solid var(--color-border-action-hover);
-		outline-offset: var(--spacing-4xs);
+		outline: var(--4xs) solid var(--color-border-action-hover);
+		outline-offset: var(--4xs);
 	}
 
 	[aria-selected='true'] & {
-		color: var(--color-background-selected);
+		color: var(--background-primary);
 
 		&:hover {
-			background: var(--color-background);
+			background: var(--background);
 		}
 	}
 
@@ -190,20 +190,20 @@ $disabled-opacity: 0.5;
 	align-items: center;
 	justify-content: center;
 	height: $badge-height;
-	padding: 0 var(--spacing-2xs);
-	border-radius: var(--spacing-lg);
-	background: var(--color-background-secondary);
-	color: var(--color-font-main);
-	line-height: var(--line-height-xs);
+	padding: 0 var(--2xs);
+	border-radius: var(--lg);
+	background: var(--background-secondary);
+	color: var(--font-main);
+	line-height: var(--body-line-height-xs);
 	flex-shrink: 0;
 }
 
 .menuContent {
-	background: var(--color-background);
-	border: $tab-border-width solid var(--color-border-secondary);
-	border-radius: var(--exo-spacing-2x-small);
+	background: var(--background);
+	border: $tab-border-width solid var(--border-secondary);
+	border-radius: var(--3xs);
 	box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.15);
-	padding: var(--spacing-3xs);
+	padding: var(--3xs);
 	width: $menu-content-width;
 }
 
@@ -211,21 +211,21 @@ $disabled-opacity: 0.5;
 	@include typography.body-sm-reg;
 	display: flex;
 	align-items: center;
-	padding: var(--spacing-3xs);
-	border-radius: var(--exo-spacing-2x-small);
+	padding: var(--3xs);
+	border-radius: var(--3xs);
 	cursor: pointer;
-	color: var(--color-font-main);
-	background: var(--color-background);
+	color: var(--font-main);
+	background: var(--background);
 	transition: background-color $transition-duration;
 	user-select: none;
 	white-space: nowrap;
 
 	&:hover {
-		background: var(--color-background-secondary);
+		background: var(--background-secondary);
 	}
 
 	&:active {
-		background: var(--color-background-tertiary);
+		background: var(--background-tertiary);
 	}
 
 	&[data-disabled] {
@@ -238,5 +238,5 @@ $disabled-opacity: 0.5;
 .menuItemLabel {
 	flex: 1;
 	min-width: 0;
-	line-height: var(--line-height-sm);
+	line-height: var(--body-line-height-small);
 }

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

@@ -4,7 +4,7 @@
 
 	&[data-orientation='vertical'] {
 		flex-direction: row;
-		gap: var(--spacing-lg);
+		gap: var(--lg);
 	}
 
 	&[data-orientation='horizontal'] {

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

@@ -10,9 +10,9 @@
 	cursor: default;
 	overflow: hidden;
 	position: relative;
-	padding: var(--spacing-3xs) var(--spacing-xs);
-	background: var(--color-background);
-	border: 1px solid var(--color-border-contrast);
+	padding: var(--3xs) var(--xs);
+	background: var(--background);
+	border: 1px solid var(--border-contrast);
 	transition-property:
 		background, border-color, width, max-width, color, fill, stroke, opacity, transform, outline-color,
 		opacity, visibility;
@@ -23,52 +23,52 @@
 		cursor: pointer;
 
 		&:hover {
-			background: var(--color-background-secondary);
-			border-color: var(--color-border-action-secondary-hover);
+			background: var(--background-secondary);
+			border-color: var(--border-action-secondary-hover);
 		}
 
 		&:focus-visible {
-			outline-color: var(--color-border-action-secondary);
+			outline-color: var(--border-action-secondary);
 		}
 	}
 
 	&.selected {
-		background: var(--color-background-selected-weak) !important;
-		border-color: var(--color-border-action-primary) !important;
+		background: var(--background-secondary-hover) !important;
+		border-color: var(--border-action-primary) !important;
 
 		&:focus-visible {
-			outline-color: var(--color-border-action-primary);
+			outline-color: var(--border-action-primary);
 		}
 
 		.deleteButton {
-			outline-color: var(--color-border-action-primary);
+			outline-color: var(--border-action-primary);
 		}
 	}
 
 	&.include {
 		.variantIcon {
-			color: var(--color-icon-secondary);
+			color: var(--icon-action-secondary);
 		}
 	}
 
 	&.exclude {
 		.variantIcon {
-			color: var(--color-icon-danger);
+			color: var(--icon-error);
 		}
 	}
 
 	&.disabled {
 		cursor: not-allowed;
-		color: var(--color-font-disabled);
-		background: var(--color-background);
-		border-color: var(--color-border-contrast);
+		color: var(--font-disabled);
+		background: var(--background);
+		border-color: var(--border-contrast);
 
 		.label {
-			color: var(--color-font-disabled);
+			color: var(--font-disabled);
 		}
 
 		.variantIcon {
-			color: var(--color-font-disabled);
+			color: var(--font-disabled);
 		}
 	}
 
@@ -77,17 +77,17 @@
 		visibility: hidden;
 		max-width: 0;
 		display: flex;
-		outline-color: var(--color-border-action-secondary);
+		outline-color: var(--border-action-secondary);
 		user-select: none;
 		transition-property:
 			background, border-color, width, max-width, color, fill, stroke, opacity, transform, outline-color,
 			visibility, margin-left;
 		transition-timing-function: ease-out;
 		transition-duration: var(--transition-duration);
-		color: var(--color-icon-secondary);
+		color: var(--icon-action-secondary);
 
 		&:hover {
-			background: var(--color-background-action-secondary-hover);
+			background: var(--background-action-secondary-hover);
 		}
 	}
 
@@ -97,7 +97,7 @@
 		opacity: 1;
 		visibility: visible;
 		max-width: 50px;
-		margin-left: var(--spacing-3xs);
+		margin-left: var(--3xs);
 	}
 }
 
@@ -108,5 +108,5 @@
 .icon {
 	flex-shrink: 0;
 	display: flex;
-	margin-right: var(--spacing-3xs);
+	margin-right: var(--3xs);
 }