@drivenets/design-system 0.10.0 → 0.11.0

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

@@ -6,10 +6,6 @@ export interface DsTableRowExpandableCellProps<TData> {
 	 * expanded state when the button is clicked.
 	 */
 	row: Row<TData>;
-	/**
-	 * Additional CSS class name applied to the cell element.
-	 */
-	className?: string;
 	/**
 	 * Additional CSS class name applied to the expand/collapse button.
 	 */

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

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/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/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);
 	}
 }