@drivenets/design-system 0.6.0 → 0.7.0

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

@@ -0,0 +1,137 @@
+import { type Row } from '@tanstack/react-table';
+import { useVirtualizer, type Virtualizer } from '@tanstack/react-virtual';
+import { useLayoutEffect, useRef } from 'react';
+import styles from './ds-table-body-virtualized.module.scss';
+import { DsTableRowVirtualized } from '../ds-table-row-virtualized';
+import type { DsTableBodyVirtualizedProps } from './ds-table-body-virtualized.types';
+import { TableBody } from '../core-table';
+import { EMPTY_TABLE_STATE_TEXT } from '../../utils/constants';
+
+export const DsTableBodyVirtualized = <TData,>({
+	table,
+	tableContainerRef,
+	emptyState,
+	estimateSize,
+	overscan,
+	onScroll,
+}: DsTableBodyVirtualizedProps<TData>) => {
+	const rowsMapRef = useRef<Map<string, HTMLTableRowElement>>(new Map());
+	const rowHeightsMapRef = useRef<Map<string, number>>(new Map());
+
+	const { rows } = table.getRowModel();
+
+	const rowsAndExpandedRowContent = rows.flatMap((row) =>
+		row.getIsExpanded() ? [{ row }, { row, isExpandedRowContent: true }] : [{ row }],
+	);
+
+	const getItemKey = (index: number) => {
+		const item = rowsAndExpandedRowContent[index];
+		return item ? `${item.row.id}${item.isExpandedRowContent ? '-expanded-content' : ''}` : String(index);
+	};
+
+	const rowVirtualizer = useVirtualizer<HTMLDivElement, HTMLTableRowElement>({
+		count: rowsAndExpandedRowContent.length,
+		estimateSize: (index) => {
+			const cachedHeight = rowHeightsMapRef.current.get(getItemKey(index));
+			return cachedHeight || estimateSize;
+		}, // estimate row height for accurate scrollbar dragging
+		getItemKey,
+		getScrollElement: () => tableContainerRef.current,
+		// measure dynamic row height, except in firefox because it measures table border height incorrectly
+		measureElement:
+			typeof window !== 'undefined' && navigator.userAgent.indexOf('Firefox') === -1
+				? (element) => element.getBoundingClientRect().height
+				: undefined,
+		overscan: overscan ?? 5,
+		onChange: (instance, sync) => {
+			requestAnimationFrame(() => {
+				instance.getVirtualItems().forEach((virtualRow) => {
+					const row = rowsMapRef.current.get(String(virtualRow.key));
+					if (!row) {
+						return;
+					}
+
+					row.style.transform = `translateY(${virtualRow.start.toString()}px)`;
+				});
+			});
+
+			if (sync && onScroll) {
+				const scrollOffset = instance.scrollOffset || 0;
+				const totalContentHeight = instance.getTotalSize();
+				const viewportHeight = instance.scrollElement?.clientHeight;
+
+				if (viewportHeight) {
+					onScroll({ scrollOffset, totalContentHeight, viewportHeight });
+				}
+			}
+		},
+	});
+
+	useLayoutEffect(() => {
+		rowVirtualizer.measure();
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [table.getState()]);
+
+	return (
+		<DsTableBody
+			rowsMapRef={rowsMapRef}
+			rowHeightsMapRef={rowHeightsMapRef}
+			rowVirtualizer={rowVirtualizer}
+			rowsAndExpandedRowContent={rowsAndExpandedRowContent}
+			emptyState={emptyState}
+		/>
+	);
+};
+
+interface DsTableBodyProps<TData> {
+	rowVirtualizer: Virtualizer<HTMLDivElement, HTMLTableRowElement>;
+	rowsMapRef: React.RefObject<Map<string, HTMLTableRowElement>>;
+	rowHeightsMapRef: React.RefObject<Map<string, number>>;
+	rowsAndExpandedRowContent: {
+		row: Row<TData>;
+		isExpandedRowContent?: boolean;
+	}[];
+	emptyState?: React.ReactNode;
+}
+
+function DsTableBody<TData>({
+	rowVirtualizer,
+	rowsMapRef,
+	rowHeightsMapRef,
+	rowsAndExpandedRowContent,
+	emptyState,
+}: DsTableBodyProps<TData>) {
+	const virtualRows = rowVirtualizer.getVirtualItems();
+
+	return (
+		<TableBody
+			className={styles.body}
+			style={{
+				height: `${rowVirtualizer.getTotalSize().toString()}px`, // tells scrollbar how big the table is
+			}}
+		>
+			{virtualRows.length > 0 ? (
+				virtualRows.map((virtualRow) => {
+					const row = rowsAndExpandedRowContent[virtualRow.index];
+					if (!row) {
+						return null;
+					}
+
+					return (
+						<DsTableRowVirtualized
+							key={virtualRow.key}
+							row={row.row}
+							isExpandedRowContent={row.isExpandedRowContent}
+							rowsMapRef={rowsMapRef}
+							rowHeightsMapRef={rowHeightsMapRef}
+							rowVirtualizer={rowVirtualizer}
+							virtualRow={virtualRow}
+						/>
+					);
+				})
+			) : (
+				<div className={styles.emptyState}>{emptyState || EMPTY_TABLE_STATE_TEXT}</div>
+			)}
+		</TableBody>
+	);
+}

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

@@ -0,0 +1,22 @@
+import type { Table } from '@tanstack/react-table';
+
+export interface DsTableBodyVirtualizedProps<TData> {
+	table: Table<TData>;
+	tableContainerRef: React.RefObject<HTMLDivElement | null>;
+	emptyState?: React.ReactNode;
+	estimateSize: number;
+	overscan?: number;
+	onScroll?: (params: ScrollParams) => void;
+}
+
+/**
+ * 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;
+}

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

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

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

@@ -29,9 +29,11 @@
 	justify-content: center;
 	width: 36px;
 	height: 36px;
+	border: none;
 	border-radius: 50%;
 	background: none;
 	cursor: pointer;
+	outline: none;
 	transition: background 0.15s;
 	color: var(--color-icon-secondary);
 
@@ -42,7 +44,7 @@
 	}
 
 	&:hover,
-	&:focus-within {
+	&[data-state='open'] {
 		background: var(--color-background-action-hover-weak);
 		color: var(--color-font-action);
 	}

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

@@ -10,8 +10,6 @@
 
 .virtualizedHeader {
 	display: grid;
-	grid-template-columns: subgrid;
-	grid-column: 1 / -1;
 }
 
 .headerRow {
@@ -32,20 +30,19 @@
 }
 
 .headerRowVirtualized {
-	display: grid;
-	grid-template-columns: subgrid;
-	grid-column: 1 / -1;
-	align-items: center;
-}
-
-.expandColumn {
-	width: vars.$expand-column-width;
+	display: flex;
+	width: 100%;
 }
 
 .reorderColumn {
 	width: vars.$reorder-column-width;
 }
 
+.expandColumn {
+	width: vars.$expand-column-width;
+	padding: 0;
+}
+
 .headerCell {
 	@include typography.body-sm-md;
 	color: var(--color-font-main);

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

@@ -7,7 +7,7 @@ import styles from './ds-table-header.module.scss';
 import stylesShared from '../../styles/shared/ds-table-shared.module.scss';
 import type { DsTableHeaderProps } from './ds-table-header.types';
 import { useDsTableContext } from '../../context/ds-table-context';
-import { getColumnStyle } from '../../utils/column-styling';
+import { getColumnSizeStyle } from '../../utils/column-size';
 
 const DsTableHeader = <TData,>({ table }: DsTableHeaderProps<TData>) => {
 	const { stickyHeader, bordered, expandable, selectable, reorderable, showSelectAllCheckbox, virtualized } =
@@ -51,9 +51,8 @@ const DsTableHeader = <TData,>({ table }: DsTableHeaderProps<TData>) => {
 					{reorderable && (
 						<TableHead className={classnames(styles.headerCell, styles.reorderColumn)}>Order</TableHead>
 					)}
-					{headerGroup.headers.map((header, idx) => {
-						const isLastColumn = idx === headerGroup.headers.length - 1;
-						const headerStyle = getColumnStyle(header.column.getSize(), virtualized, isLastColumn);
+					{headerGroup.headers.map((header) => {
+						const headerStyle = getColumnSizeStyle(header.column.getSize(), virtualized);
 
 						return (
 							<TableHead

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

@@ -1,55 +1,14 @@
 @use '../../../../styles/typography';
 @use '../../styles/variables' as vars;
-
-@mixin expanded-row-border($side) {
-	$border: 1px solid var(--color-border-action-primary);
-
-	// Prevent double border with adjacent expanded rows.
-	&:not(.expandedRow + &) > td {
-		border-#{$side}: $border;
-	}
-
-	& > td:first-child {
-		border-inline-start: $border;
-	}
-
-	& > td:last-child {
-		border-inline-end: $border;
-	}
-}
+@use '../../styles/mixins' as table-mixins;
 
 .tableRow {
-	&:not(.virtualizedRow) {
-		&:not(:last-child) {
-			.tableCell {
-				border-bottom: vars.$border-width solid var(--color-border-secondary);
-			}
-		}
-
-		.cellCheckbox.tableCell {
-			padding: 0;
-			width: vars.$select-column-width;
-		}
-	}
-
-	&.virtualizedRow {
-		display: grid;
-		grid-template-columns: subgrid;
-		grid-column: 1 / -1;
-		grid-row: 1;
-		align-items: center;
-
-		&:not(:last-child) {
+	&:not(:last-child) {
+		.tableCell,
+		.selectableCell,
+		.expandableCell {
 			border-bottom: vars.$border-width solid var(--color-border-secondary);
 		}
-
-		.tableCell {
-			&.cellCheckbox {
-				text-align: center;
-				padding: 0;
-				width: vars.$select-column-width;
-			}
-		}
 	}
 
 	&:hover {
@@ -73,7 +32,7 @@
 	}
 
 	&.expanded {
-		@include expanded-row-border('top');
+		@include table-mixins.expanded-row-border('top');
 	}
 
 	&.sizeSmall {
@@ -96,11 +55,7 @@
 		padding: var(--spacing-standard);
 	}
 
-	@include expanded-row-border('bottom');
-}
-
-.cellButton {
-	width: vars.$expand-column-width;
+	@include table-mixins.expanded-row-border('bottom');
 }
 
 .cellReorder {
@@ -116,10 +71,15 @@
 	}
 }
 
-.tableCell {
+.tableCell,
+.selectableCell,
+.expandableCell {
 	@include typography.body-sm-reg;
 	vertical-align: middle;
 	color: var(--color-font-main);
+}
+
+.tableCell {
 	padding: 0 var(--spacing-standard);
 }
 

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

@@ -1,18 +1,17 @@
-import React from 'react';
+import type React from 'react';
 import classnames from 'classnames';
 import { useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
 import { DsIcon } from '../../../ds-icon';
-import { DsCheckbox } from '../../../ds-checkbox';
-import { DsButton } from '../../../ds-button';
 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 stylesShared from '../../styles/shared/ds-table-shared.module.scss';
 import { useDsTableContext } from '../../context/ds-table-context';
 import { mergeRefs } from '../../utils/merge-refs';
-import { getColumnStyle } from '../../utils/column-styling';
+import { getColumnSizeStyle } from '../../utils/column-size';
 
 interface DsRowDragHandleProps {
 	isDragging: boolean;
@@ -39,24 +38,21 @@ const DsRowDragHandle = ({ isDragging, attributes, listeners }: DsRowDragHandleP
 	);
 };
 
-const DsTableRow = <TData,>({ ref, row, virtualRow }: DsTableRowProps<TData>) => {
+const DsTableRow = <TData,>({ ref, row }: DsTableRowProps<TData>) => {
 	const {
 		expandable,
-		expandedRows,
 		selectable,
 		reorderable,
 		onRowClick,
 		onRowDoubleClick,
 		renderExpandedRow,
-		virtualized,
 		bordered,
 		rowSize,
-		toggleRowExpanded,
 		primaryRowActions,
 		secondaryRowActions,
 		activeRowId,
 	} = useDsTableContext<TData, unknown>();
-	const isExpanded = expandedRows[row.id];
+	const isExpanded = row.getIsExpanded();
 	const isExpandable = typeof expandable === 'function' ? expandable(row.original) : expandable;
 	const isActive = activeRowId === row.id;
 
@@ -64,29 +60,24 @@ const DsTableRow = <TData,>({ ref, row, virtualRow }: DsTableRowProps<TData>) =>
 		id: row.id,
 		disabled: !reorderable,
 	});
-	const rowStyle: React.CSSProperties =
-		virtualRow && virtualized
-			? {
-					transform: `translateY(${String(virtualRow.start)}px)`,
-				}
-			: reorderable
-				? {
-						// Convert DND-kit's transform coordinates to CSS transform string
-						transform: CSS.Transform.toString(transform),
-						transition,
-						...(isDragging
-							? {
-									background: 'var(--action-active-light)',
-									boxShadow: '0 0 12px 0 rgba(0, 102, 250, 0.60)',
-									zIndex: 1,
-								}
-							: {}),
-						position: 'relative',
-					}
-				: {};
+	const rowStyle: React.CSSProperties = reorderable
+		? {
+				// Convert DND-kit's transform coordinates to CSS transform string
+				transform: CSS.Transform.toString(transform),
+				transition,
+				...(isDragging
+					? {
+							background: 'var(--action-active-light)',
+							boxShadow: '0 0 12px 0 rgba(0, 102, 250, 0.60)',
+							zIndex: 1,
+						}
+					: {}),
+				position: 'relative',
+			}
+		: {};
 
 	return (
-		<React.Fragment key={row.id}>
+		<>
 			<TableRow
 				ref={mergeRefs(reorderable ? setNodeRef : null, ref)}
 				data-state={isActive ? 'active' : row.getIsSelected() ? 'selected' : undefined}
@@ -97,7 +88,6 @@ const DsTableRow = <TData,>({ ref, row, virtualRow }: DsTableRowProps<TData>) =>
 						[styles.sizeMedium]: rowSize === 'medium',
 						[styles.sizeLarge]: rowSize === 'large',
 					},
-					virtualized && styles.virtualizedRow,
 					onRowClick && styles.clickableRow,
 					!bordered && styles.rowNoBorder,
 					isExpanded && styles.expanded,
@@ -106,55 +96,20 @@ const DsTableRow = <TData,>({ ref, row, virtualRow }: DsTableRowProps<TData>) =>
 				onClick={() => onRowClick?.(row.original)}
 				onDoubleClick={() => onRowDoubleClick?.(row.original)}
 			>
-				{selectable && (
-					<TableCell className={classnames(styles.tableCell, styles.cellCheckbox)}>
-						<DsCheckbox
-							className={stylesShared.checkboxContainer}
-							checked={row.getIsSelected()}
-							disabled={!row.getCanSelect()}
-							onClick={(e) => {
-								e.stopPropagation();
-								const toggleHandler = row.getToggleSelectedHandler();
-								toggleHandler(e);
-							}}
-							onDoubleClick={(e: React.MouseEvent) => {
-								e.stopPropagation();
-							}}
-						/>
-					</TableCell>
-				)}
+				{selectable && <DsTableRowSelectableCell row={row} className={styles.selectableCell} />}
 				{expandable && (
-					<TableCell className={classnames(styles.tableCell, styles.cellButton)}>
-						{isExpandable && (
-							<DsButton
-								variant={virtualized ? 'ghost' : 'borderless'}
-								size="small"
-								onClick={(e: React.MouseEvent) => {
-									e.stopPropagation();
-									toggleRowExpanded(row.id);
-								}}
-								onDoubleClick={(e: React.MouseEvent) => {
-									e.stopPropagation();
-								}}
-								className={styles.expandToggleButton}
-							>
-								<DsIcon
-									icon={virtualized ? (isExpanded ? 'arrow_drop_down' : 'arrow_right') : 'chevron_right'}
-									className={classnames(
-										stylesShared.pageButtonIcon,
-										!virtualized && isExpanded && 'rotate-90',
-									)}
-								/>
-							</DsButton>
-						)}
-					</TableCell>
+					<DsTableRowExpandableCell
+						row={row}
+						className={styles.expandableCell}
+						buttonClassName={styles.expandToggleButton}
+					/>
 				)}
 				{reorderable && (
 					<DsRowDragHandle isDragging={isDragging} attributes={attributes} listeners={listeners} />
 				)}
 				{row.getVisibleCells().map((cell, idx) => {
 					const isLastColumn = idx === row.getVisibleCells().length - 1;
-					const cellStyle = getColumnStyle(cell.column.getSize(), virtualized, isLastColumn);
+					const cellStyle = getColumnSizeStyle(cell.column.getSize());
 
 					return (
 						<TableCell key={cell.id} className={styles.tableCell} style={cellStyle}>
@@ -172,17 +127,9 @@ const DsTableRow = <TData,>({ ref, row, virtualRow }: DsTableRowProps<TData>) =>
 					);
 				})}
 			</TableRow>
+
 			{isExpanded && renderExpandedRow && (
-				<TableRow
-					style={
-						virtualRow && virtualized
-							? {
-									transform: `translateY(${String(virtualRow.start + virtualRow.size)}px)`,
-								}
-							: undefined
-					}
-					className={styles.expandedRow}
-				>
+				<TableRow className={styles.expandedRow}>
 					<TableCell
 						colSpan={
 							row.getVisibleCells().length +
@@ -196,7 +143,7 @@ const DsTableRow = <TData,>({ ref, row, virtualRow }: DsTableRowProps<TData>) =>
 					</TableCell>
 				</TableRow>
 			)}
-		</React.Fragment>
+		</>
 	);
 };
 

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

@@ -1,6 +1,5 @@
 import type { Ref } from 'react';
 import type { Row } from '@tanstack/react-table';
-import type { VirtualItem } from '@tanstack/react-virtual';
 
 /**
  * Props for the table row component
@@ -14,9 +13,4 @@ export interface DsTableRowProps<TData> {
 	 * The row data from the table
 	 */
 	row: Row<TData>;
-
-	/**
-	 * Virtual row data for virtualized tables
-	 */
-	virtualRow?: VirtualItem;
 }

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

@@ -0,0 +1,10 @@
+@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

@@ -0,0 +1,45 @@
+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>
+	);
+};

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

@@ -0,0 +1,7 @@
+import type { Row } from '@tanstack/react-table';
+
+export interface DsTableRowExpandableCellProps<TData> {
+	row: Row<TData>;
+	className?: string;
+	buttonClassName?: string;
+}

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

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

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

@@ -0,0 +1,6 @@
+@use '../../styles/variables' as vars;
+
+.cell {
+	width: vars.$select-column-width;
+	padding: 0;
+}

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

@@ -0,0 +1,30 @@
+import type React from 'react';
+import { TableCell } from '../core-table';
+import { DsCheckbox } from '../../../ds-checkbox';
+import stylesShared from '../../styles/shared/ds-table-shared.module.scss';
+import type { DsTableRowSelectableCellProps } from './ds-table-row-selectable-cell.types';
+import classnames from 'classnames';
+import styles from './ds-table-row-selectable-cell.module.scss';
+
+export const DsTableRowSelectableCell = <TData,>({
+	row,
+	className,
+}: DsTableRowSelectableCellProps<TData>) => {
+	return (
+		<TableCell className={classnames(styles.cell, className)}>
+			<DsCheckbox
+				className={stylesShared.checkboxContainer}
+				checked={row.getIsSelected()}
+				disabled={!row.getCanSelect()}
+				onClick={(e) => {
+					e.stopPropagation();
+					const toggleHandler = row.getToggleSelectedHandler();
+					toggleHandler(e);
+				}}
+				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

@@ -0,0 +1,6 @@
+import type { Row } from '@tanstack/react-table';
+
+export interface DsTableRowSelectableCellProps<TData> {
+	row: Row<TData>;
+	className?: string;
+}

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

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