@drivenets/design-system 0.11.1 → 0.12.1

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

@@ -6,6 +6,7 @@ export * from './components/ds-breadcrumb';
 export * from './components/ds-button';
 export * from './components/ds-button-v3';
 export * from './components/ds-card';
+export * from './components/ds-catalog-layout';
 export * from './components/ds-checkbox';
 export * from './components/ds-checkbox-group';
 export * from './components/ds-chip';
@@ -47,6 +48,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;
-}