@drivenets/design-system 0.6.1 → 0.7.0

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

@@ -0,0 +1,80 @@
+@use '../../../../styles/typography';
+@use '../../styles/variables' as vars;
+@use '../../styles/mixins' as table-mixins;
+
+.row {
+	display: flex;
+	position: absolute;
+	width: 100%;
+
+	&:hover {
+		background-color: var(--color-background-secondary);
+	}
+
+	&[data-state='selected'] {
+		background-color: var(--color-background-selected-weak);
+	}
+
+	&[data-state='active'] {
+		background-color: var(--color-background-selected-weak);
+	}
+
+	&:not(:last-child):not(.expandedRowContent) {
+		> td {
+			border-bottom: vars.$border-width solid var(--color-border-secondary);
+		}
+	}
+
+	&.clickableRow {
+		cursor: pointer;
+	}
+
+	&.rowNoBorder {
+		border-bottom: none;
+	}
+
+	&:not(.expandedRowContent) {
+		&.expanded {
+			@include table-mixins.expanded-row-border('top');
+		}
+
+		&.sizeSmall {
+			height: var(--ds-table-row-small);
+		}
+
+		&.sizeMedium {
+			height: var(--ds-table-row-medium);
+		}
+
+		&.sizeLarge {
+			height: var(--ds-table-row-large);
+		}
+	}
+}
+
+.cell,
+.selectableCell,
+.expandableCell {
+	display: flex;
+	align-items: center;
+	@include typography.body-sm-reg;
+	color: var(--color-font-main);
+}
+
+.cell {
+	padding: 0 var(--spacing-standard);
+}
+
+.expandedRowContent {
+	background-color: var(--color-background-secondary);
+
+	& > td {
+		display: flex;
+		flex-direction: column;
+		flex: 1;
+		padding: var(--spacing-standard);
+		background-color: var(--color-background-secondary);
+	}
+
+	@include table-mixins.expanded-row-border('bottom');
+}

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

@@ -0,0 +1,95 @@
+import classnames from 'classnames';
+import styles from './ds-table-row-virtualized.module.scss';
+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';
+
+export const DsTableRowVirtualized = <TData,>({
+	row,
+	rowsMapRef,
+	rowHeightsMapRef,
+	rowVirtualizer,
+	virtualRow,
+	isExpandedRowContent,
+}: DsTableRowVirtualizedProps<TData>) => {
+	const {
+		selectable,
+		expandable,
+		bordered,
+		rowSize,
+		activeRowId,
+		primaryRowActions,
+		secondaryRowActions,
+		renderExpandedRow,
+		onRowClick,
+		onRowDoubleClick,
+	} = useDsTableContext<TData, unknown>();
+	const isExpanded = row.getIsExpanded();
+	const isActive = activeRowId === row.id;
+
+	return (
+		<TableRow
+			data-index={virtualRow.index}
+			ref={(row) => {
+				const key = String(virtualRow.key);
+
+				if (row) {
+					rowVirtualizer.measureElement(row); // measure dynamic row height
+					rowsMapRef.current.set(key, row); // store ref for virtualizer to apply scrolling transforms
+
+					const height = row.getBoundingClientRect().height;
+					rowHeightsMapRef.current.set(key, height); // store height for virtualizer to estimate size
+				} else {
+					rowsMapRef.current.delete(key);
+				}
+			}}
+			data-state={isActive ? 'active' : row.getIsSelected() ? 'selected' : undefined}
+			className={classnames(
+				styles.row,
+				{
+					[styles.sizeSmall]: rowSize === 'small',
+					[styles.sizeMedium]: rowSize === 'medium',
+					[styles.sizeLarge]: rowSize === 'large',
+				},
+				isExpandedRowContent && styles.expandedRowContent,
+				onRowClick && styles.clickableRow,
+				!bordered && styles.rowNoBorder,
+				isExpanded && styles.expanded,
+			)}
+			onClick={isExpandedRowContent ? undefined : () => onRowClick?.(row.original)}
+			onDoubleClick={isExpandedRowContent ? undefined : () => onRowDoubleClick?.(row.original)}
+		>
+			{isExpandedRowContent ? (
+				<TableCell>{renderExpandedRow?.(row.original)}</TableCell>
+			) : (
+				<>
+					{selectable && <DsTableRowSelectableCell row={row} 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}>
+								{isLastColumn ? (
+									<DsTableCell
+										row={row}
+										cell={cell}
+										primaryRowActions={primaryRowActions}
+										secondaryRowActions={secondaryRowActions}
+									/>
+								) : (
+									<DsTableCell row={row} cell={cell} />
+								)}
+							</TableCell>
+						);
+					})}
+				</>
+			)}
+		</TableRow>
+	);
+};

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

@@ -0,0 +1,11 @@
+import { type Row } from '@tanstack/react-table';
+import { type VirtualItem, type Virtualizer } from '@tanstack/react-virtual';
+
+export interface DsTableRowVirtualizedProps<TData> {
+	row: Row<TData>;
+	rowsMapRef: React.RefObject<Map<string, HTMLTableRowElement>>;
+	rowHeightsMapRef: React.RefObject<Map<string, number>>;
+	rowVirtualizer: Virtualizer<HTMLDivElement, HTMLTableRowElement>;
+	virtualRow: VirtualItem;
+	isExpandedRowContent?: boolean;
+}

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

@@ -0,0 +1,2 @@
+export * from './ds-table-row-virtualized';
+export * from './ds-table-row-virtualized.types';

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

@@ -2,15 +2,6 @@ import { createContext, useContext } from 'react';
 import type { DsDataTableProps, DsTableRowSize } from '../ds-table.types';
 
 export interface DsTableContextType<TData, TValue> extends Partial<DsDataTableProps<TData, TValue>> {
-	/**
-	 * The expanded rows
-	 */
-	expandedRows: Record<string, boolean>;
-	/**
-	 * Toggle the expanded state of a row
-	 * @param rowId - The id of the row to toggle
-	 */
-	toggleRowExpanded: (rowId: string) => void;
 	/**
 	 * Whether the table is virtualized
 	 * @default false

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

@@ -10,12 +10,6 @@
 	background: var(--color-background);
 }
 
-.virtualizedContainer {
-	position: relative;
-	height: vars.$virtualized-height;
-	overflow: auto;
-}
-
 .dataTableContainer {
 	max-height: 100%;
 	overflow: auto;
@@ -42,19 +36,12 @@
 	text-align: center;
 }
 
-.emptyStateVirtualized {
-	position: absolute;
-	inset: 0;
-	top: var(--ds-table-header-height);
-}
-
 .virtualized {
 	display: grid;
-	grid-template-columns: var(--ds-table-columns-template);
 }
 
-.virtualizedBody {
-	display: grid;
-	grid-template-columns: subgrid;
-	grid-column: 1 / -1;
+.virtualizedContainer {
+	position: relative;
+	height: vars.$virtualized-height;
+	overflow: auto;
 }

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

@@ -10,7 +10,6 @@ import {
 	useReactTable,
 	type VisibilityState,
 } from '@tanstack/react-table';
-import { useVirtualizer, type VirtualItem } from '@tanstack/react-virtual';
 import classnames from 'classnames';
 import { Table, TableBody, TableCell, TableRow } from './components/core-table';
 import { DsTableBulkActions } from './components/ds-table-bulk-actions';
@@ -20,7 +19,8 @@ import type { DsDataTableProps, DsTableRowSize } from './ds-table.types';
 import { DsTableRow } from './components/ds-table-row';
 import { useDragAndDrop } from './hooks/use-drag-and-drop';
 import { type DsTableContextType, DsTableContext } from './context/ds-table-context';
-import { createColumnsGridTemplate } from './utils/create-columns-grid-template';
+import { DsTableBodyVirtualized } from './components/ds-table-body-virtualized';
+import { EMPTY_TABLE_STATE_TEXT } from './utils/constants';
 
 // Row size to pixel height mapping (matches CSS variables)
 const ROW_SIZE_HEIGHT_MAP: Record<DsTableRowSize, number> = {
@@ -69,7 +69,6 @@ const DsTable = <TData extends { id: string }, TValue>({
 	const [internalColumnFilters, setInternalColumnFilters] = React.useState<ColumnFiltersState>([]);
 	const [internalColumnVisibility, setInternalColumnVisibility] = React.useState<VisibilityState>({});
 	const [rowSelection, setRowSelection] = React.useState<RowSelectionState>({});
-	const [expandedRows, setExpandedRows] = React.useState<Record<string, boolean>>({});
 
 	const { DragWrapper, SortableWrapper } = useDragAndDrop<TData>({
 		isDragEnabled: reorderable && !virtualized,
@@ -129,9 +128,9 @@ const DsTable = <TData extends { id: string }, TValue>({
 		getCoreRowModel: getCoreRowModel(),
 		onSortingChange: handleSortingChange,
 		getSortedRowModel: getSortedRowModel(),
-		onColumnFiltersChange: handleColumnFiltersChange,
+		onColumnFiltersChange: handleColumnFiltersChange, // TODO: looks like this is not used, since filters are handled from the outside
 		getFilteredRowModel: getFilteredRowModel(),
-		onColumnVisibilityChange: handleColumnVisibilityChange,
+		onColumnVisibilityChange: handleColumnVisibilityChange, // TODO: looks like this is not used, since visibility is handled from the outside
 		onRowSelectionChange: handleRowSelectionChange,
 		getRowId: (row) => row.id,
 		state: {
@@ -166,51 +165,39 @@ const DsTable = <TData extends { id: string }, TValue>({
 			getSelectedRows: () => {
 				return table.getFilteredSelectedRowModel().rows.map((r) => r.original);
 			},
+			expandRow: (rowId: string) => {
+				table.getRow(rowId).toggleExpanded(true);
+			},
+			collapseRow: (rowId: string) => {
+				table.getRow(rowId).toggleExpanded(false);
+			},
+			expandAllRows: () => {
+				table.toggleAllRowsExpanded(true);
+			},
+			collapseAllRows: () => {
+				table.toggleAllRowsExpanded(false);
+			},
+			expandRows: (rowIds: string[]) => {
+				const expansion: Record<string, boolean> = {};
+				rowIds.forEach((id) => (expansion[id] = true));
+				table.setExpanded(expansion);
+			},
 		}),
 		[table],
 	);
 
 	const { rows, rowsById } = table.getRowModel();
 
-	const rowVirtualizer = useVirtualizer({
-		count: rows.length,
-		getScrollElement: () => tableContainerRef.current,
-		// estimate row height for accurate scrollbar dragging
-		estimateSize: () => virtualizedOptions?.estimateSize || ROW_SIZE_HEIGHT_MAP[rowSize],
-		overscan: virtualizedOptions?.overscan || 5,
-		onChange: (instance, sync) => {
-			if (sync && onScroll) {
-				const scrollOffset = instance.scrollOffset || 0;
-				const totalContentHeight = instance.getTotalSize();
-				const viewportHeight = instance.scrollElement?.clientHeight;
-
-				if (viewportHeight) {
-					onScroll({ scrollOffset, totalContentHeight, viewportHeight });
-				}
-			}
-		},
-	});
-
-	const toggleRowExpanded = (rowId: string) => {
-		setExpandedRows((prev) => ({
-			...prev,
-			[rowId]: !prev[rowId],
-		}));
-	};
-
-	const renderEmptyState = () =>
-		virtualized ? (
-			<div className={styles.emptyStateVirtualized}>{emptyState || 'No results.'}</div>
-		) : (
-			<TableRow>
-				<TableCell
-					colSpan={columns.length + (expandable ? 1 : 0) + (selectable ? 1 : 0)}
-					className={styles.emptyState}
-				>
-					{emptyState || 'No results.'}
-				</TableCell>
-			</TableRow>
-		);
+	const renderEmptyState = () => (
+		<TableRow>
+			<TableCell
+				colSpan={columns.length + (expandable ? 1 : 0) + (selectable ? 1 : 0)}
+				className={styles.emptyState}
+			>
+				{emptyState || EMPTY_TABLE_STATE_TEXT}
+			</TableCell>
+		</TableRow>
+	);
 
 	const selectedRows = Object.entries(rowSelection)
 		.filter(([, selected]) => selected)
@@ -232,8 +219,6 @@ const DsTable = <TData extends { id: string }, TValue>({
 		secondaryRowActions,
 		renderExpandedRow,
 		virtualized,
-		expandedRows,
-		toggleRowExpanded,
 		activeRowId,
 	};
 
@@ -250,16 +235,6 @@ const DsTable = <TData extends { id: string }, TValue>({
 			>
 				<DragWrapper>
 					<Table
-						style={
-							virtualized
-								? ({
-										'--ds-table-columns-template': createColumnsGridTemplate({
-											columns,
-											selectable: !!selectable,
-										}),
-									} as React.CSSProperties)
-								: undefined
-						}
 						className={classnames(
 							fullWidth && styles.fullWidth,
 							!bordered && styles.tableNoBorder,
@@ -267,32 +242,24 @@ const DsTable = <TData extends { id: string }, TValue>({
 						)}
 					>
 						<DsTableHeader table={table} />
-						<TableBody
-							style={{ height: virtualized ? `${String(rowVirtualizer.getTotalSize())}px` : undefined }}
-							className={classnames(virtualized && styles.virtualizedBody)}
-						>
-							{virtualized ? (
-								rowVirtualizer.getVirtualItems().length ? (
-									rowVirtualizer.getVirtualItems().map((virtualRow: VirtualItem) => {
-										const row = rows[virtualRow.index];
-
-										if (!row) {
-											return null;
-										}
-
-										return <DsTableRow key={row.id} row={row} virtualRow={virtualRow} />;
-									})
-								) : (
-									renderEmptyState()
-								)
-							) : (
+						{virtualized ? (
+							<DsTableBodyVirtualized
+								table={table}
+								tableContainerRef={tableContainerRef}
+								emptyState={emptyState}
+								estimateSize={virtualizedOptions?.estimateSize || ROW_SIZE_HEIGHT_MAP[rowSize]}
+								overscan={virtualizedOptions?.overscan}
+								onScroll={onScroll}
+							/>
+						) : (
+							<TableBody>
 								<SortableWrapper>
 									{rows.length
 										? rows.map((row) => <DsTableRow key={row.id} row={row} />)
 										: renderEmptyState()}
 								</SortableWrapper>
-							)}
-						</TableBody>
+							</TableBody>
+						)}
 					</Table>
 				</DragWrapper>
 			</div>

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

@@ -8,24 +8,13 @@ import type {
 } from '@tanstack/react-table';
 import type { IconType } from '../ds-icon';
 import type { RowAction, SecondaryRowAction } from './components/ds-table-cell';
+import type { ScrollParams } from './components/ds-table-body-virtualized';
 
 /**
  * Row size variants based on Figma design specifications
  */
 export type DsTableRowSize = 'small' | 'medium' | 'large';
 
-/**
- * Parameters passed to the onScroll callback in virtualized tables.
- */
-export interface ScrollParams {
-	/** The current vertical scroll position from the top of the scrollable content (in pixels) */
-	scrollOffset: number;
-	/** The total height of all content in the virtualized table (in pixels) */
-	totalContentHeight: number;
-	/** The visible height of the table container (in pixels) */
-	viewportHeight: number;
-}
-
 /**
  * API for programmatically controlling a DsTable component.
  * This interface provides methods to interact with the table's selection, sorting, filtering, and pagination features.
@@ -117,6 +106,62 @@ export interface DsTableApi<TData> {
 	 * ```
 	 */
 	getSelectedRows: () => TData[];
+
+	/**
+	 * Expands a single row by its ID.
+	 *
+	 * @param rowId - The unique identifier of the row to expand
+	 *
+	 * @example
+	 * ```tsx
+	 * tableRef.current?.expandRow('user-123');
+	 * ```
+	 */
+	expandRow: (rowId: string) => void;
+
+	/**
+	 * Collapses a single row by its ID.
+	 *
+	 * @param rowId - The unique identifier of the row to collapse
+	 *
+	 * @example
+	 * ```tsx
+	 * tableRef.current?.collapseRow('user-123');
+	 * ```
+	 */
+	collapseRow: (rowId: string) => void;
+
+	/**
+	 * Expands all rows in the table.
+	 *
+	 * @example
+	 * ```tsx
+	 * tableRef.current?.expandAllRows();
+	 * ```
+	 */
+	expandAllRows: () => void;
+
+	/**
+	 * Collapses all rows in the table.
+	 *
+	 * @example
+	 * ```tsx
+	 * tableRef.current?.collapseAllRows();
+	 * ```
+	 */
+	collapseAllRows: () => void;
+
+	/**
+	 * Expands multiple rows by their IDs.
+	 *
+	 * @param rowIds - Array of unique identifiers for the rows to expand
+	 *
+	 * @example
+	 * ```tsx
+	 * tableRef.current?.expandRows(['user-1', 'user-2', 'user-3']);
+	 * ```
+	 */
+	expandRows: (rowIds: string[]) => void;
 }
 
 /**

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

@@ -1,4 +1,5 @@
 export type { SecondaryRowAction, RowAction } from './components/ds-table-cell';
+export type { ScrollParams } from './components/ds-table-body-virtualized';
 
 export * from './filters';
 

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

@@ -0,0 +1,15 @@
+@mixin expanded-row-border($side) {
+	$border: 1px solid var(--color-border-action-primary);
+
+	&:not(.expandedRow + &) > td {
+		border-#{$side}: $border;
+	}
+
+	& > td:first-child {
+		border-inline-start: $border;
+	}
+
+	& > td:last-child {
+		border-inline-end: $border;
+	}
+}

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

@@ -1,8 +1,8 @@
 $border-radius: 4px;
 $border-width: 1px;
 $virtualized-height: 600px;
-$expand-column-width: 40px;
-$select-column-width: 40px;
+$expand-column-width: 36px;
+$select-column-width: 36px;
 $reorder-column-width: 60px;
 $container-margin-vertical: 1rem;
 $filter-input-gap: 0.5rem;

package/src/components/ds-table/utils/{column-styling.ts → column-size.ts}

@@ -6,25 +6,15 @@ import { defaultColumnSizing } from '@tanstack/react-table';
  *
  * @param columnSize - The size of the column
  * @param virtualized - Whether the table is virtualized
- * @param isLastColumn - Whether this is the last column in the row
  * @returns Style object or undefined if no custom styling is needed
  */
-export const getColumnStyle = (
-	columnSize: number,
-	virtualized?: boolean,
-	isLastColumn: boolean = false,
-): CSSProperties | undefined => {
+export const getColumnSizeStyle = (columnSize: number, virtualized?: boolean): CSSProperties | undefined => {
 	const hasCustomSize = columnSize !== defaultColumnSizing.size;
-	if (!hasCustomSize) {
-		return undefined;
+	if (hasCustomSize) {
+		return { width: columnSize };
 	}
 
 	if (virtualized) {
-		return {
-			flexBasis: `${String(columnSize)}px`,
-			flexGrow: isLastColumn ? 1 : 0,
-		};
+		return { flex: 1 };
 	}
-
-	return { width: columnSize };
 };

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

@@ -0,0 +1,4 @@
+/**
+ * Default text for empty table state
+ */
+export const EMPTY_TABLE_STATE_TEXT = 'No results.';

package/src/components/ds-tag/index.tsx

@@ -1,2 +1,3 @@
 export { default as DsTag } from './ds-tag';
+export { tagSizes, tagVariants } from './ds-tag.types';
 export type { TagSize, TagVariant, DsTagProps } from './ds-tag.types';

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

@@ -6,7 +6,6 @@
 	background: var(--color-background-selected-weak);
 	border: 1px solid var(--color-outline-weak);
 	border-radius: var(--spacing-3xs);
-	max-height: 88px; // hardcoded value required in the design
 	overflow: hidden;
 
 	&.expanded {
@@ -14,7 +13,7 @@
 	}
 }
 
-.row1 {
+.header {
 	display: flex;
 	align-items: center;
 	width: 100%;
@@ -22,7 +21,15 @@
 	flex-shrink: 0;
 }
 
-.row2 {
+.headerActions {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-xs);
+	flex-shrink: 0;
+	margin-left: auto;
+}
+
+.tagsArea {
 	display: flex;
 	align-items: center;
 	width: 100%;
@@ -36,35 +43,26 @@
 	flex-shrink: 0;
 }
 
-.expandTag {
-	cursor: pointer;
-	flex-shrink: 0;
-}
-
 .itemCheckbox {
 	display: flex;
 	align-items: center;
 }
 
-.clearContent {
+.ghostButtonContent {
+	// TODO: remove once migrated 1.2 button to the ghost with transparent bg
 	background: transparent !important;
 }
 
-.clearButton {
-	margin-left: auto;
+.actionButton {
 	padding: 0;
 	flex-shrink: 0;
 }
 
-// Hidden container for measuring element widths
-// Must render all elements to get accurate measurements
 .measurementContainer {
 	pointer-events: none;
 	display: flex;
 	align-items: center;
 	gap: var(--spacing-xs);
-
-	// Ensure it doesn't affect layout
 	height: 0;
 	overflow: hidden;
 	position: absolute;