@drivenets/design-system 0.11.1 → 0.12.0

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

@@ -1,6 +1,5 @@
 import { flexRender } from '@tanstack/react-table';
 import classnames from 'classnames';
-import { DsCheckbox } from '../../../ds-checkbox';
 import { DsIcon } from '../../../ds-icon';
 import { TableHead, TableHeader, TableRow } from '../core-table';
 import styles from './ds-table-header.module.scss';
@@ -8,10 +7,11 @@ 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 { getColumnSizeStyle } from '../../utils/column-size';
+import { SELECT_COLUMN_ID } from '../../utils/constants';
+import { DsStack } from '../../../ds-stack';
 
 const DsTableHeader = <TData,>({ table }: DsTableHeaderProps<TData>) => {
-	const { stickyHeader, bordered, selectable, reorderable, showSelectAllCheckbox, virtualized } =
-		useDsTableContext<TData, unknown>();
+	const { stickyHeader, bordered, virtualized } = useDsTableContext<TData, unknown>();
 
 	return (
 		<TableHeader
@@ -26,41 +26,27 @@ const DsTableHeader = <TData,>({ table }: DsTableHeaderProps<TData>) => {
 						virtualized && styles.headerRowVirtualized,
 					)}
 				>
-					{selectable && (
-						<TableHead className={classnames(styles.headerCell, styles.selectColumn)}>
-							{showSelectAllCheckbox && (
-								<DsCheckbox
-									className={stylesShared.checkboxContainer}
-									checked={
-										table.getIsAllRowsSelected()
-											? true
-											: table.getIsSomeRowsSelected()
-												? 'indeterminate'
-												: false
-									}
-									onCheckedChange={(checked) => table.toggleAllRowsSelected(!!checked)}
-									onClick={(e) => e.stopPropagation()}
-								/>
-							)}
-						</TableHead>
-					)}
-					{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();
+						const isSelectColumn = header.column.id === SELECT_COLUMN_ID;
 
 						return (
 							<TableHead
 								key={header.id}
-								className={classnames(styles.headerCell, canSort && styles.sortableHeader)}
+								className={classnames(
+									styles.headerCell,
+									canSort && styles.sortableHeader,
+									isSelectColumn && styles.selectHeaderCell,
+								)}
 								onClick={header.column.getToggleSortingHandler()}
 								style={headerStyle}
 							>
 								{header.isPlaceholder ? null : (
 									<div className={styles.headerSortContainer}>
-										<div>{flexRender(header.column.columnDef.header, header.getContext())}</div>
+										<DsStack direction="column" justifyContent="center" width="100%">
+											{flexRender(header.column.columnDef.header, header.getContext())}
+										</DsStack>
 										{canSort && (
 											<div className={styles.pageButtonIconContainer}>
 												{{

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

@@ -0,0 +1,22 @@
+import type React from 'react';
+import { DsCheckbox } from '../../../ds-checkbox';
+import stylesShared from '../../styles/shared/ds-table-shared.module.scss';
+import type { DsTableHeaderSelectableCellProps } from './ds-table-header-selectable-cell.types';
+
+export const DsTableHeaderSelectableCell = <TData,>({ table }: DsTableHeaderSelectableCellProps<TData>) => {
+	const checked = table.getIsAllRowsSelected()
+		? true
+		: table.getIsSomeRowsSelected()
+			? 'indeterminate'
+			: false;
+
+	return (
+		<DsCheckbox
+			className={stylesShared.checkboxContainer}
+			checked={checked}
+			onCheckedChange={(nextChecked) => table.toggleAllRowsSelected(!!nextChecked)}
+			onClick={(e) => e.stopPropagation()}
+			onDoubleClick={(e: React.MouseEvent) => e.stopPropagation()}
+		/>
+	);
+};

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

@@ -0,0 +1,9 @@
+import type { Table } from '@tanstack/react-table';
+
+export interface DsTableHeaderSelectableCellProps<TData> {
+	/**
+	 * TanStack Table instance for the table. Used to read the aggregate
+	 * selection state and toggle selection across all rows.
+	 */
+	table: Table<TData>;
+}

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

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

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

@@ -4,9 +4,7 @@
 
 .tableRow {
 	&:not(:last-child) {
-		.tableCell,
-		.selectableCell,
-		.expandableCell {
+		.tableCell {
 			border-bottom: vars.$border-width solid var(--border-secondary);
 		}
 	}
@@ -71,18 +69,15 @@
 	}
 }
 
-.tableCell,
-.selectableCell {
+.tableCell {
 	@include typography.body-sm-reg;
 	vertical-align: middle;
 	color: var(--font-main);
-}
-
-.tableCell {
 	padding: 0 var(--standard);
 }
 
-.expandableCell {
+.expandableCell,
+.selectableCell {
 	padding: 0;
 	text-align: center;
 }

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

@@ -5,26 +5,27 @@ import { CSS } from '@dnd-kit/utilities';
 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 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';
+import { EXPANDER_COLUMN_ID, REORDER_COLUMN_ID, SELECT_COLUMN_ID } from '../../utils/constants';
 
 interface DsRowDragHandleProps {
 	isDragging: boolean;
 	attributes: ReturnType<typeof useSortable>['attributes'];
 	listeners: ReturnType<typeof useSortable>['listeners'];
+	style?: React.CSSProperties;
 }
 
-const DsRowDragHandle = ({ isDragging, attributes, listeners }: DsRowDragHandleProps) => {
+const DsRowDragHandle = ({ isDragging, attributes, listeners, style }: DsRowDragHandleProps) => {
 	return (
 		<TableCell
 			className={classnames(styles.tableCell, styles.cellReorder, {
 				[styles.isDragging]: isDragging,
 			})}
+			style={style}
 		>
 			<DsIcon
 				className={styles.rowDragHandle}
@@ -40,7 +41,6 @@ const DsRowDragHandle = ({ isDragging, attributes, listeners }: DsRowDragHandleP
 
 const DsTableRow = <TData,>({ ref, row, isSelected }: DsTableRowProps<TData>) => {
 	const {
-		selectable,
 		reorderable,
 		onRowClick,
 		onRowDoubleClick,
@@ -94,22 +94,30 @@ const DsTableRow = <TData,>({ ref, row, isSelected }: DsTableRowProps<TData>) =>
 				onClick={() => onRowClick?.(row.original)}
 				onDoubleClick={() => onRowDoubleClick?.(row.original)}
 			>
-				{selectable && (
-					<DsTableRowSelectableCell row={row} isSelected={isSelected} className={styles.selectableCell} />
-				)}
-				{reorderable && (
-					<DsRowDragHandle isDragging={isDragging} attributes={attributes} listeners={listeners} />
-				)}
 				{row.getVisibleCells().map((cell, idx) => {
-					const isLastColumn = idx === row.getVisibleCells().length - 1;
 					const cellStyle = getColumnSizeStyle(cell.column.getSize());
 
+					if (cell.column.id === REORDER_COLUMN_ID) {
+						return (
+							<DsRowDragHandle
+								key={cell.id}
+								isDragging={isDragging}
+								attributes={attributes}
+								listeners={listeners}
+								style={cellStyle}
+							/>
+						);
+					}
+
+					const isLastColumn = idx === row.getVisibleCells().length - 1;
+
 					return (
 						<TableCell
 							key={cell.id}
 							className={classnames(
 								styles.tableCell,
 								cell.column.id === EXPANDER_COLUMN_ID && styles.expandableCell,
+								cell.column.id === SELECT_COLUMN_ID && styles.selectableCell,
 							)}
 							style={cellStyle}
 						>
@@ -130,10 +138,7 @@ const DsTableRow = <TData,>({ ref, row, isSelected }: DsTableRowProps<TData>) =>
 
 			{isExpanded && renderExpandedRow && (
 				<TableRow className={styles.expandedRow}>
-					<TableCell
-						colSpan={row.getVisibleCells().length + (selectable ? 1 : 0) + (reorderable ? 1 : 0)}
-						className={styles.tableCell}
-					>
+					<TableCell colSpan={row.getVisibleCells().length} className={styles.tableCell}>
 						{renderExpandedRow(row.original)}
 					</TableCell>
 				</TableRow>

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

@@ -1,26 +1,17 @@
 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,
-	isSelected,
-	className,
-}: DsTableRowSelectableCellProps<TData>) => {
+export const DsTableRowSelectableCell = <TData,>({ row }: DsTableRowSelectableCellProps<TData>) => {
 	return (
-		<TableCell className={classnames(styles.cell, className)}>
-			<DsCheckbox
-				className={stylesShared.checkboxContainer}
-				checked={isSelected}
-				disabled={!row.getCanSelect()}
-				onCheckedChange={(checked) => row.toggleSelected(!!checked)}
-				onClick={(e) => e.stopPropagation()}
-				onDoubleClick={(e: React.MouseEvent) => e.stopPropagation()}
-			/>
-		</TableCell>
+		<DsCheckbox
+			className={stylesShared.checkboxContainer}
+			checked={row.getIsSelected()}
+			disabled={!row.getCanSelect()}
+			onCheckedChange={(checked) => row.toggleSelected(!!checked)}
+			onClick={(e) => e.stopPropagation()}
+			onDoubleClick={(e: React.MouseEvent) => e.stopPropagation()}
+		/>
 	);
 };

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

@@ -2,17 +2,8 @@ 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.
+	 * TanStack Table row model for the parent row. Used to read the row's
+	 * selection state and toggle it 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

@@ -52,19 +52,16 @@
 	}
 }
 
-.cell,
-.selectableCell {
+.cell {
 	display: flex;
 	align-items: center;
 	@include typography.body-sm-reg;
 	color: var(--font-main);
-}
-
-.cell {
 	padding: 0 var(--standard);
 }
 
-.expandableCell {
+.expandableCell,
+.selectableCell {
 	padding: 0;
 	justify-content: center;
 }

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

@@ -3,10 +3,9 @@ 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 type { DsTableRowVirtualizedProps } from './ds-table-row-virtualized.types';
 import { DsTableCell } from '../ds-table-cell';
-import { EXPANDER_COLUMN_ID } from '../../utils/constants';
+import { EXPANDER_COLUMN_ID, SELECT_COLUMN_ID } from '../../utils/constants';
 
 export const DsTableRowVirtualized = <TData,>({
 	row,
@@ -18,7 +17,6 @@ export const DsTableRowVirtualized = <TData,>({
 	isExpandedRowContent,
 }: DsTableRowVirtualizedProps<TData>) => {
 	const {
-		selectable,
 		bordered,
 		rowSize,
 		activeRowId,
@@ -67,9 +65,6 @@ export const DsTableRowVirtualized = <TData,>({
 				<TableCell>{renderExpandedRow?.(row.original)}</TableCell>
 			) : (
 				<>
-					{selectable && (
-						<DsTableRowSelectableCell row={row} isSelected={isSelected} className={styles.selectableCell} />
-					)}
 					{row.getVisibleCells().map((cell, idx) => {
 						const isLastColumn = idx === row.getVisibleCells().length - 1;
 						const cellStyle = getColumnSizeStyle(cell.column.getSize(), true);
@@ -81,6 +76,7 @@ export const DsTableRowVirtualized = <TData,>({
 								className={classnames(
 									styles.cell,
 									cell.column.id === EXPANDER_COLUMN_ID && styles.expandableCell,
+									cell.column.id === SELECT_COLUMN_ID && styles.selectableCell,
 								)}
 							>
 								{isLastColumn ? (

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

@@ -20,10 +20,20 @@ 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 { DsTableRowSelectableCell } from './components/ds-table-row-selectable-cell';
+import { DsTableHeaderSelectableCell } from './components/ds-table-header-selectable-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, EXPANDER_COLUMN_ID, EXPANDER_COLUMN_WIDTH } from './utils/constants';
+import {
+	EMPTY_TABLE_STATE_TEXT,
+	EXPANDER_COLUMN_ID,
+	EXPANDER_COLUMN_WIDTH,
+	REORDER_COLUMN_ID,
+	REORDER_COLUMN_WIDTH,
+	SELECT_COLUMN_ID,
+	SELECT_COLUMN_WIDTH,
+} from './utils/constants';
 
 // Row size to pixel height mapping (matches CSS variables)
 const ROW_SIZE_HEIGHT_MAP: Record<DsTableRowSize, number> = {
@@ -66,6 +76,7 @@ const DsTable = <TData extends { id: string }, TValue>({
 	columnVisibility: externalColumnVisibility,
 	onColumnVisibilityChange,
 	activeRowId,
+	infiniteScroll,
 }: DsDataTableProps<TData, TValue>) => {
 	const [data, setData] = React.useState(tableData);
 	const [sorting, setSorting] = React.useState<SortingState>([]);
@@ -125,22 +136,53 @@ const DsTable = <TData extends { id: string }, TValue>({
 		onSelectionChange?.(newRowSelection);
 	};
 
+	const hasExpanderColumn = !!expandable;
+	const hasSelectColumn = !!selectable;
+	const hasReorderColumn = reorderable && !virtualized;
+
 	const columns = useMemo<ColumnDef<TData, TValue>[]>(() => {
-		if (!expandable) {
-			return columnsProp;
+		const augmentedColumns: ColumnDef<TData, TValue>[] = [...columnsProp];
+
+		if (hasSelectColumn) {
+			const selectColumn: ColumnDef<TData, TValue> = {
+				id: SELECT_COLUMN_ID,
+				size: SELECT_COLUMN_WIDTH,
+				enableSorting: false,
+				enableResizing: false,
+				header: ({ table }) => (showSelectAllCheckbox ? <DsTableHeaderSelectableCell table={table} /> : null),
+				cell: ({ row }) => <DsTableRowSelectableCell row={row} />,
+			};
+			augmentedColumns.unshift(selectColumn);
 		}
 
-		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),
-		};
+		if (hasExpanderColumn) {
+			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),
+			};
+			augmentedColumns.unshift(expanderColumn);
+		}
 
-		return [expanderColumn, ...columnsProp];
-	}, [columnsProp, expandable]);
+		if (hasReorderColumn) {
+			// Cell is rendered inline by DsTableRow when it encounters REORDER_COLUMN_ID,
+			// since the drag handle needs row-level useSortable state.
+			const reorderColumn: ColumnDef<TData, TValue> = {
+				id: REORDER_COLUMN_ID,
+				size: REORDER_COLUMN_WIDTH,
+				enableSorting: false,
+				enableResizing: false,
+				header: 'Order',
+				cell: () => null,
+			};
+			augmentedColumns.unshift(reorderColumn);
+		}
+
+		return augmentedColumns;
+	}, [columnsProp, hasExpanderColumn, hasReorderColumn, hasSelectColumn, showSelectAllCheckbox]);
 
 	const table = useReactTable({
 		data: reorderable ? data : tableData,
@@ -212,10 +254,7 @@ const DsTable = <TData extends { id: string }, TValue>({
 
 	const renderEmptyState = () => (
 		<TableRow>
-			<TableCell
-				colSpan={columns.length + (selectable ? 1 : 0) + (reorderable ? 1 : 0)}
-				className={styles.emptyState}
-			>
+			<TableCell colSpan={columns.length} className={styles.emptyState}>
 				{emptyState || EMPTY_TABLE_STATE_TEXT}
 			</TableCell>
 		</TableRow>
@@ -276,6 +315,7 @@ const DsTable = <TData extends { id: string }, TValue>({
 								overscan={virtualizedOptions?.overscan}
 								onScroll={onScroll}
 								rowSelection={rowSelection}
+								infiniteScroll={infiniteScroll}
 							/>
 						) : (
 							<TableBody>

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

@@ -8,7 +8,7 @@ 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';
+import type { InfiniteScrollConfig, ScrollParams } from './components/ds-table-body-virtualized';
 
 /**
  * Row size variants based on Figma design specifications
@@ -164,6 +164,8 @@ export interface DsTableApi<TData> {
 	expandRows: (rowIds: string[]) => void;
 }
 
+export type { InfiniteScrollConfig } from './components/ds-table-body-virtualized';
+
 /**
  * Represents a bulk action that can be performed on multiple selected rows
  */
@@ -357,6 +359,30 @@ export interface DsDataTableProps<TData, TValue> {
 	 */
 	onScroll?: (params: ScrollParams) => void;
 
+	/**
+	 * Configures infinite scroll for the virtualized table. The Table owns viewport/scroll
+	 * detection and the auto-fill loop; the consumer owns fetching, pagination state,
+	 * error handling, and retry.
+	 *
+	 * Only takes effect when `virtualized` is `true`. Passing this prop without
+	 * `virtualized` is ignored.
+	 *
+	 * @example
+	 * ```tsx
+	 * <DsTable
+	 *   virtualized
+	 *   data={rows}
+	 *   columns={columns}
+	 *   infiniteScroll={{
+	 *     hasMore,
+	 *     isLoadingMore,
+	 *     onLoadMore: fetchNextPage,
+	 *   }}
+	 * />
+	 * ```
+	 */
+	infiniteScroll?: InfiniteScrollConfig;
+
 	/**
 	 * Actions to be shown in the bulk actions
 	 */

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

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

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

@@ -8,6 +8,7 @@
 	width: fit-content;
 	margin: auto;
 	height: 100%;
+	vertical-align: middle;
 }
 
 .pageButtonIcon {

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

@@ -12,3 +12,24 @@ export const EXPANDER_COLUMN_ID = 'expander';
  * Width (in px) of the expander column.
  */
 export const EXPANDER_COLUMN_WIDTH = 36;
+
+/**
+ * Column id used for the synthetic selection column injected when `selectable` is set.
+ */
+export const SELECT_COLUMN_ID = 'select';
+
+/**
+ * Width (in px) of the selection column.
+ */
+export const SELECT_COLUMN_WIDTH = 36;
+
+/**
+ * Column id used for the synthetic reorder column injected when `reorderable` is set
+ * (non-virtualized tables only).
+ */
+export const REORDER_COLUMN_ID = 'reorder';
+
+/**
+ * Width (in px) of the reorder column.
+ */
+export const REORDER_COLUMN_WIDTH = 60;

package/src/index.ts

@@ -47,6 +47,7 @@ export * from './components/ds-spinner';
 export * from './components/ds-split-button';
 export * from './components/ds-stack';
 export * from './components/ds-status-badge';
+export * from './components/ds-status-badge-v2';
 export * from './components/ds-stepper';
 export * from './components/ds-system-status';
 export * from './components/ds-table';

package/src/styles/shared/_dropdown.scss

@@ -64,7 +64,7 @@ $dropdown-z-index: 9999;
 	gap: 10px;
 	color: var(--font-main);
 	font-size: var(--body-font-size-sm);
-	padding: var(--xs);
+	padding: var(--xs) var(--sm) var(--xs) var(--xs);
 	border-radius: 2px;
 	border-left: 2px solid transparent;
 	cursor: pointer;

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

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