@drivenets/design-system 0.9.1 → 0.11.0

package/src/components/ds-system-status/ds-system-status.module.scss

@@ -16,7 +16,7 @@
 	width: 10px;
 	height: 10px;
 	border-radius: 50%;
-	border: 1px solid var(--white);
+	border: 1px solid var(--color-dap-gray-050);
 }
 
 .label {
@@ -24,64 +24,64 @@
 }
 
 .healthy {
-	background: var(--utility-ok);
-	color: var(--system-status-ok);
+	background: var(--color-dap-data-light-green);
+	color: var(--color-dap-data-green);
 
 	.dot {
-		background: var(--system-status-ok);
+		background: var(--color-dap-data-green);
 	}
 }
 
 .neutral {
-	background: var(--utility-info);
-	color: var(--system-status-info);
+	background: var(--color-dap-blue-200);
+	color: var(--color-dap-blue-600);
 
 	.dot {
-		background: var(--system-status-info);
+		background: var(--color-dap-blue-600);
 	}
 }
 
 .error {
-	background: var(--utility-error);
-	color: var(--system-status-error);
+	background: var(--color-dap-red-100);
+	color: var(--background-error);
 
 	.dot {
-		background: var(--system-status-error);
+		background: var(--background-error);
 	}
 }
 
 .in-progress {
-	background: var(--utility-in-progress);
-	color: var(--system-status-in-progress);
+	background: var(--schema-light-blue);
+	color: var(--color-dap-blue-800);
 
 	.dot {
-		background: var(--system-status-in-progress);
+		background: var(--color-dap-blue-800);
 	}
 }
 
 .pending {
-	background: var(--utility-pending);
-	color: var(--system-status-pending);
+	background: var(--background-pending);
+	color: var(--color-dap-data-deep-fuchsia);
 
 	.dot {
-		background: var(--system-status-pending);
+		background: var(--color-dap-data-deep-fuchsia);
 	}
 }
 
 .alert {
-	background: var(--utility-alert);
-	color: var(--system-status-alert);
+	background: var(--schema-light-amber);
+	color: var(--color-dap-orange-600);
 
 	.dot {
-		background: var(--system-status-alert);
+		background: var(--color-dap-orange-600);
 	}
 }
 
 .disabled {
-	background: var(--utility-disabled);
-	color: var(--neutral-2);
+	background: var(--color-dap-gray-200);
+	color: var(--color-dap-gray-600);
 
 	.dot {
-		background: var(--neutral-2);
+		background: var(--color-dap-gray-600);
 	}
 }

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

@@ -2,12 +2,39 @@ import { type RefObject, type ReactNode } from 'react';
 import { type RowSelectionState, type Table } from '@tanstack/react-table';
 
 export interface DsTableBodyVirtualizedProps<TData> {
+	/**
+	 * TanStack Table instance driving the body. Provides row models, visible rows,
+	 * and column state.
+	 */
 	table: Table<TData>;
+	/**
+	 * Ref to the scrollable container that hosts the virtualized rows. Required by
+	 * the virtualizer to measure viewport size and listen for scroll events.
+	 */
 	tableContainerRef: RefObject<HTMLDivElement | null>;
+	/**
+	 * Optional content rendered in place of rows when the table has no data.
+	 */
 	emptyState?: ReactNode;
+	/**
+	 * Initial estimated row height in pixels. Used before actual rows are measured
+	 * to compute the virtual scroll size.
+	 */
 	estimateSize: number;
+	/**
+	 * Number of rows to render above and below the visible viewport to reduce
+	 * flicker during fast scrolling.
+	 * @default 5
+	 */
 	overscan?: number;
+	/**
+	 * Called on every scroll event with the current scroll metrics. Useful for
+	 * infinite-scroll hooks and scroll-position indicators.
+	 */
 	onScroll?: (params: ScrollParams) => void;
+	/**
+	 * Current row selection state from TanStack Table. Used to style selected rows.
+	 */
 	rowSelection: RowSelectionState;
 }
 

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

@@ -5,7 +5,7 @@
 	bottom: 20px;
 	left: 50%;
 	transform: translateX(-50%);
-	background-color: var(--white);
+	background-color: var(--color-dap-gray-050);
 	border-radius: 8px;
 	box-shadow: 0 4px 12px #0445cc66;
 	z-index: 1000;
@@ -34,19 +34,19 @@
 }
 
 .selectedCountContainer {
-	background-color: var(--action-cta1);
+	background-color: var(--color-dap-blue-600);
 	display: flex;
 	align-items: center;
 	padding: 6px 22px;
 }
 
 .selectedCountBadge {
-	color: var(--white);
+	color: var(--color-dap-gray-050);
 	margin: 0;
 }
 
 .bulkActionsInfo {
-	color: var(--neutral-2);
+	color: var(--color-dap-gray-600);
 	text-wrap: nowrap;
 	padding-left: 8px;
 	padding-right: 56px;
@@ -62,15 +62,15 @@
 		flex-direction: column;
 		align-items: center;
 		justify-content: center;
-		gap: var(--spacing-3xs);
-		border-right: 1px solid var(--neutral-6);
+		gap: var(--3xs);
+		border-right: 1px solid var(--color-dap-gray-400);
 		width: 68px;
 		height: 48px;
 		border-radius: 0;
 	}
 
 	> .actionButton:first-child {
-		border-left: 1px solid var(--neutral-6);
+		border-left: 1px solid var(--color-dap-gray-400);
 	}
 }
 
@@ -79,13 +79,13 @@
 	flex-direction: column;
 	justify-content: center;
 	align-items: center;
-	color: var(--neutral-2);
+	color: var(--color-dap-gray-600);
 	gap: 2px !important;
 	width: 36px;
 	padding-left: 4px;
 
 	&:hover {
-		color: var(--neutral-4);
+		color: var(--color-dap-gray-500);
 	}
 }
 

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

@@ -35,7 +35,7 @@
 	cursor: pointer;
 	outline: none;
 	transition: background 0.15s;
-	color: var(--color-icon-secondary);
+	color: var(--icon-action-secondary);
 
 	&.disabled {
 		opacity: 0.5;
@@ -45,11 +45,11 @@
 
 	&:hover,
 	&[data-state='open'] {
-		background: var(--color-background-action-hover-weak);
-		color: var(--color-font-action);
+		background: var(--background-action-hover-weak);
+		color: var(--font-action);
 	}
 }
 
 .secondaryActionsTrigger {
-	margin-inline-start: var(--spacing-sm);
+	margin-inline-start: var(--sm);
 }

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

@@ -5,7 +5,7 @@
 	position: sticky;
 	top: 0;
 	z-index: 10;
-	background-color: var(--color-background);
+	background-color: var(--background);
 }
 
 .virtualizedHeader {
@@ -14,7 +14,7 @@
 
 .headerRow {
 	.headerCell {
-		border-bottom: 1px solid var(--neutral-6);
+		border-bottom: 1px solid var(--color-dap-gray-400);
 
 		&.selectColumn {
 			width: vars.$select-column-width;
@@ -38,16 +38,11 @@
 	width: vars.$reorder-column-width;
 }
 
-.expandColumn {
-	width: vars.$expand-column-width;
-	padding: 0;
-}
-
 .headerCell {
 	@include typography.body-sm-md;
-	color: var(--color-font-main);
+	color: var(--font-main);
 	text-align: left;
-	padding: 0 var(--spacing-standard);
+	padding: 0 var(--standard);
 	height: var(--ds-table-header-height);
 
 	&.sortableHeader {
@@ -63,7 +58,7 @@
 		height: 24px;
 
 		&.pageButtonIcon {
-			color: var(--neutral-4);
+			color: var(--color-dap-gray-500);
 			transition: transform 0.2s ease-in-out;
 		}
 	}

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

@@ -10,7 +10,7 @@ import { useDsTableContext } from '../../context/ds-table-context';
 import { getColumnSizeStyle } from '../../utils/column-size';
 
 const DsTableHeader = <TData,>({ table }: DsTableHeaderProps<TData>) => {
-	const { stickyHeader, bordered, expandable, selectable, reorderable, showSelectAllCheckbox, virtualized } =
+	const { stickyHeader, bordered, selectable, reorderable, showSelectAllCheckbox, virtualized } =
 		useDsTableContext<TData, unknown>();
 
 	return (
@@ -38,33 +38,30 @@ const DsTableHeader = <TData,>({ table }: DsTableHeaderProps<TData>) => {
 												? 'indeterminate'
 												: false
 									}
-									onClick={(e) => {
-										e.stopPropagation();
-										const toggleHandler = table.getToggleAllRowsSelectedHandler();
-										toggleHandler(e);
-									}}
+									onCheckedChange={(checked) => table.toggleAllRowsSelected(!!checked)}
+									onClick={(e) => e.stopPropagation()}
 								/>
 							)}
 						</TableHead>
 					)}
-					{expandable && <TableHead className={classnames(styles.headerCell, styles.expandColumn)} />}
 					{reorderable && (
 						<TableHead className={classnames(styles.headerCell, styles.reorderColumn)}>Order</TableHead>
 					)}
 					{headerGroup.headers.map((header) => {
 						const headerStyle = getColumnSizeStyle(header.column.getSize(), virtualized);
+						const canSort = header.column.getCanSort();
 
 						return (
 							<TableHead
 								key={header.id}
-								className={classnames(styles.headerCell, header.column.getCanSort() && styles.sortableHeader)}
+								className={classnames(styles.headerCell, canSort && styles.sortableHeader)}
 								onClick={header.column.getToggleSortingHandler()}
 								style={headerStyle}
 							>
 								{header.isPlaceholder ? null : (
 									<div className={styles.headerSortContainer}>
 										<div>{flexRender(header.column.columnDef.header, header.getContext())}</div>
-										{header.column.getCanSort() && (
+										{canSort && (
 											<div className={styles.pageButtonIconContainer}>
 												{{
 													asc: (

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

@@ -7,20 +7,20 @@
 		.tableCell,
 		.selectableCell,
 		.expandableCell {
-			border-bottom: vars.$border-width solid var(--color-border-secondary);
+			border-bottom: vars.$border-width solid var(--border-secondary);
 		}
 	}
 
 	&:hover {
-		background-color: var(--color-background-secondary);
+		background-color: var(--background-secondary);
 	}
 
 	&[data-state='selected'] {
-		background-color: var(--color-background-selected-weak);
+		background-color: var(--background-secondary-hover);
 	}
 
 	&[data-state='active'] {
-		background-color: var(--color-background-selected-weak);
+		background-color: var(--background-secondary-hover);
 	}
 
 	&.clickableRow {
@@ -49,10 +49,10 @@
 }
 
 .expandedRow {
-	background-color: var(--color-background-secondary);
+	background-color: var(--background-secondary);
 
 	& > td {
-		padding: var(--spacing-standard);
+		padding: var(--standard);
 	}
 
 	@include table-mixins.expanded-row-border('bottom');
@@ -63,35 +63,26 @@
 	text-align: center;
 
 	&.isDragging {
-		background: var(--color-background-action);
+		background: var(--background-action);
 
 		.rowDragHandle {
-			color: var(--color-secondary-white);
+			color: var(--secondary-050);
 		}
 	}
 }
 
 .tableCell,
-.selectableCell,
-.expandableCell {
+.selectableCell {
 	@include typography.body-sm-reg;
 	vertical-align: middle;
-	color: var(--color-font-main);
+	color: var(--font-main);
 }
 
 .tableCell {
-	padding: 0 var(--spacing-standard);
+	padding: 0 var(--standard);
 }
 
-.expandToggleButton {
-	background: none;
-	border: none;
+.expandableCell {
 	padding: 0;
-	margin: 0;
-	cursor: pointer;
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-	opacity: 1;
-	transition-property: opacity, background-color;
+	text-align: center;
 }

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

@@ -6,12 +6,12 @@ import { DsIcon } from '../../../ds-icon';
 import { TableCell, TableRow } from '../core-table';
 import { DsTableCell } from '../ds-table-cell';
 import { DsTableRowSelectableCell } from '../ds-table-row-selectable-cell';
-import { DsTableRowExpandableCell } from '../ds-table-row-expandable-cell';
 import type { DsTableRowProps } from './ds-table-row.types';
 import styles from './ds-table-row.module.scss';
 import { useDsTableContext } from '../../context/ds-table-context';
 import { mergeRefs } from '../../../../utils/merge-refs';
 import { getColumnSizeStyle } from '../../utils/column-size';
+import { EXPANDER_COLUMN_ID } from '../../utils/constants';
 
 interface DsRowDragHandleProps {
 	isDragging: boolean;
@@ -40,7 +40,6 @@ const DsRowDragHandle = ({ isDragging, attributes, listeners }: DsRowDragHandleP
 
 const DsTableRow = <TData,>({ ref, row, isSelected }: DsTableRowProps<TData>) => {
 	const {
-		expandable,
 		selectable,
 		reorderable,
 		onRowClick,
@@ -53,7 +52,6 @@ const DsTableRow = <TData,>({ ref, row, isSelected }: DsTableRowProps<TData>) =>
 		activeRowId,
 	} = useDsTableContext<TData, unknown>();
 	const isExpanded = row.getIsExpanded();
-	const isExpandable = typeof expandable === 'function' ? expandable(row.original) : expandable;
 	const isActive = activeRowId === row.id;
 
 	const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
@@ -67,7 +65,7 @@ const DsTableRow = <TData,>({ ref, row, isSelected }: DsTableRowProps<TData>) =>
 				transition,
 				...(isDragging
 					? {
-							background: 'var(--action-active-light)',
+							background: 'var(--color-dap-purple-200)',
 							boxShadow: '0 0 12px 0 rgba(0, 102, 250, 0.60)',
 							zIndex: 1,
 						}
@@ -99,13 +97,6 @@ const DsTableRow = <TData,>({ ref, row, isSelected }: DsTableRowProps<TData>) =>
 				{selectable && (
 					<DsTableRowSelectableCell row={row} isSelected={isSelected} className={styles.selectableCell} />
 				)}
-				{expandable && (
-					<DsTableRowExpandableCell
-						row={row}
-						className={styles.expandableCell}
-						buttonClassName={styles.expandToggleButton}
-					/>
-				)}
 				{reorderable && (
 					<DsRowDragHandle isDragging={isDragging} attributes={attributes} listeners={listeners} />
 				)}
@@ -114,7 +105,14 @@ const DsTableRow = <TData,>({ ref, row, isSelected }: DsTableRowProps<TData>) =>
 					const cellStyle = getColumnSizeStyle(cell.column.getSize());
 
 					return (
-						<TableCell key={cell.id} className={styles.tableCell} style={cellStyle}>
+						<TableCell
+							key={cell.id}
+							className={classnames(
+								styles.tableCell,
+								cell.column.id === EXPANDER_COLUMN_ID && styles.expandableCell,
+							)}
+							style={cellStyle}
+						>
 							{isLastColumn ? (
 								<DsTableCell
 									row={row}
@@ -133,12 +131,7 @@ const DsTableRow = <TData,>({ ref, row, isSelected }: DsTableRowProps<TData>) =>
 			{isExpanded && renderExpandedRow && (
 				<TableRow className={styles.expandedRow}>
 					<TableCell
-						colSpan={
-							row.getVisibleCells().length +
-							(selectable ? 1 : 0) +
-							(isExpandable ? 1 : 0) +
-							(reorderable ? 1 : 0)
-						}
+						colSpan={row.getVisibleCells().length + (selectable ? 1 : 0) + (reorderable ? 1 : 0)}
 						className={styles.tableCell}
 					>
 						{renderExpandedRow(row.original)}

package/src/components/ds-table/components/ds-table-row-expandable-cell/ds-table-row-expandable-cell.module.scss

@@ -1,10 +1,3 @@
-@use '../../styles/variables' as vars;
-
-.cell {
-	width: vars.$expand-column-width;
-	padding: 0;
-}
-
 .button {
 	margin: auto;
 }

package/src/components/ds-table/components/ds-table-row-expandable-cell/ds-table-row-expandable-cell.tsx

@@ -1,45 +1,36 @@
 import type React from 'react';
 import classnames from 'classnames';
-import { TableCell } from '../core-table';
 import { DsButton } from '../../../ds-button';
 import { DsIcon } from '../../../ds-icon';
 import stylesShared from '../../styles/shared/ds-table-shared.module.scss';
-import { useDsTableContext } from '../../context/ds-table-context';
 import type { DsTableRowExpandableCellProps } from './ds-table-row-expandable-cell.types';
 import styles from './ds-table-row-expandable-cell.module.scss';
 
 export const DsTableRowExpandableCell = <TData,>({
 	row,
-	className,
 	buttonClassName,
 }: DsTableRowExpandableCellProps<TData>) => {
-	const { expandable } = useDsTableContext<TData, unknown>();
 	const isExpanded = row.getIsExpanded();
-	const isExpandable = typeof expandable === 'function' ? expandable(row.original) : expandable;
 
 	return (
-		<TableCell className={classnames(styles.cell, className)}>
-			{isExpandable && (
-				<DsButton
-					design="v1.2"
-					buttonType="tertiary"
-					size="small"
-					className={classnames(styles.button, buttonClassName)}
-					onClick={(e: React.MouseEvent) => {
-						e.stopPropagation();
-						row.toggleExpanded();
-					}}
-					onDoubleClick={(e: React.MouseEvent) => {
-						e.stopPropagation();
-					}}
-				>
-					<DsIcon
-						icon="chevron_right"
-						size="small"
-						className={classnames(stylesShared.pageButtonIcon, isExpanded && 'rotate-90')}
-					/>
-				</DsButton>
-			)}
-		</TableCell>
+		<DsButton
+			design="v1.2"
+			buttonType="tertiary"
+			size="small"
+			className={classnames(styles.button, buttonClassName)}
+			onClick={(e: React.MouseEvent) => {
+				e.stopPropagation();
+				row.toggleExpanded();
+			}}
+			onDoubleClick={(e: React.MouseEvent) => {
+				e.stopPropagation();
+			}}
+		>
+			<DsIcon
+				icon="chevron_right"
+				size="small"
+				className={classnames(stylesShared.pageButtonIcon, isExpanded && 'rotate-90')}
+			/>
+		</DsButton>
 	);
 };

package/src/components/ds-table/components/ds-table-row-expandable-cell/ds-table-row-expandable-cell.types.ts

@@ -1,7 +1,13 @@
 import type { Row } from '@tanstack/react-table';
 
 export interface DsTableRowExpandableCellProps<TData> {
+	/**
+	 * TanStack Table row model for the parent row. Used to toggle the row's
+	 * expanded state when the button is clicked.
+	 */
 	row: Row<TData>;
-	className?: string;
+	/**
+	 * Additional CSS class name applied to the expand/collapse button.
+	 */
 	buttonClassName?: string;
 }

package/src/components/ds-table/components/ds-table-row-selectable-cell/ds-table-row-selectable-cell.tsx

@@ -17,14 +17,9 @@ export const DsTableRowSelectableCell = <TData,>({
 				className={stylesShared.checkboxContainer}
 				checked={isSelected}
 				disabled={!row.getCanSelect()}
-				onClick={(e) => {
-					e.stopPropagation();
-					const toggleHandler = row.getToggleSelectedHandler();
-					toggleHandler(e);
-				}}
-				onDoubleClick={(e: React.MouseEvent) => {
-					e.stopPropagation();
-				}}
+				onCheckedChange={(checked) => row.toggleSelected(!!checked)}
+				onClick={(e) => e.stopPropagation()}
+				onDoubleClick={(e: React.MouseEvent) => e.stopPropagation()}
 			/>
 		</TableCell>
 	);

package/src/components/ds-table/components/ds-table-row-selectable-cell/ds-table-row-selectable-cell.types.ts

@@ -1,7 +1,18 @@
 import type { Row } from '@tanstack/react-table';
 
 export interface DsTableRowSelectableCellProps<TData> {
+	/**
+	 * TanStack Table row model for the parent row. Used to toggle the row's
+	 * selection state when the checkbox is clicked.
+	 */
 	row: Row<TData>;
+	/**
+	 * Whether the parent row is currently selected. Drives the checkbox's
+	 * checked state.
+	 */
 	isSelected: boolean;
+	/**
+	 * Additional CSS class name applied to the cell element.
+	 */
 	className?: string;
 }

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

@@ -8,20 +8,20 @@
 	width: 100%;
 
 	&:hover {
-		background-color: var(--color-background-secondary);
+		background-color: var(--background-secondary);
 	}
 
 	&[data-state='selected'] {
-		background-color: var(--color-background-selected-weak);
+		background-color: var(--background-secondary-hover);
 	}
 
 	&[data-state='active'] {
-		background-color: var(--color-background-selected-weak);
+		background-color: var(--background-secondary-hover);
 	}
 
 	&:not(:last-child):not(.expandedRowContent) {
 		> td {
-			border-bottom: vars.$border-width solid var(--color-border-secondary);
+			border-bottom: vars.$border-width solid var(--border-secondary);
 		}
 	}
 
@@ -53,27 +53,31 @@
 }
 
 .cell,
-.selectableCell,
-.expandableCell {
+.selectableCell {
 	display: flex;
 	align-items: center;
 	@include typography.body-sm-reg;
-	color: var(--color-font-main);
+	color: var(--font-main);
 }
 
 .cell {
-	padding: 0 var(--spacing-standard);
+	padding: 0 var(--standard);
+}
+
+.expandableCell {
+	padding: 0;
+	justify-content: center;
 }
 
 .expandedRowContent {
-	background-color: var(--color-background-secondary);
+	background-color: var(--background-secondary);
 
 	& > td {
 		display: flex;
 		flex-direction: column;
 		flex: 1;
-		padding: var(--spacing-standard);
-		background-color: var(--color-background-secondary);
+		padding: var(--standard);
+		background-color: var(--background-secondary);
 	}
 
 	@include table-mixins.expanded-row-border('bottom');