@drivenets/design-system 0.7.2 → 0.7.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@drivenets/design-system",
-  "version": "0.7.2",
+  "version": "0.7.3",
   "license": "Apache-2.0",
   "type": "module",
   "types": "./dist/index.d.cts",
@@ -68,25 +68,25 @@
     "@faker-js/faker": "^10.3.0",
     "@hookform/resolvers": "^5.2.2",
     "@rollup/plugin-babel": "^7.0.0",
-    "@storybook/addon-a11y": "^10.2.16",
-    "@storybook/addon-docs": "^10.2.16",
-    "@storybook/addon-vitest": "^10.2.16",
-    "@storybook/builder-vite": "^10.2.16",
-    "@storybook/react-vite": "^10.2.16",
+    "@storybook/addon-a11y": "^10.2.19",
+    "@storybook/addon-docs": "^10.2.19",
+    "@storybook/addon-vitest": "^10.2.19",
+    "@storybook/builder-vite": "^10.2.19",
+    "@storybook/react-vite": "^10.2.19",
     "@tanstack/react-query": "^5.90.21",
     "@tanstack/react-router": "^1.166.2",
     "@types/eslint-plugin-jsx-a11y": "^6.10.1",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react-swc": "^4.2.3",
-    "@vitest/browser-playwright": "^4.0.18",
-    "@vitest/coverage-v8": "^4.0.18",
+    "@vitejs/plugin-react": "^6.0.1",
+    "@vitest/browser-playwright": "^4.1.0",
+    "@vitest/coverage-v8": "^4.1.0",
     "babel-plugin-react-compiler": "^1.0.0",
     "eslint": "^10.0.1",
     "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^7.0.1",
-    "eslint-plugin-storybook": "^10.2.16",
+    "eslint-plugin-storybook": "^10.2.19",
     "mockdate": "^3.0.5",
     "playwright": "^1.58.2",
     "postcss": "^8.5.8",
@@ -97,14 +97,14 @@
     "react-hook-form": "^7.71.2",
     "rollup-plugin-sass": "^1.15.3",
     "sass-embedded": "^1.97.3",
-    "storybook": "^10.2.16",
+    "storybook": "^10.2.19",
     "tsdown": "^0.21.0",
     "typed-scss-modules": "^8.1.1",
     "typescript": "^5.9.3",
     "typescript-plugin-css-modules": "^5.2.0",
-    "vite": "^7.3.1",
-    "vitest": "^4.0.18",
-    "vitest-browser-react": "^2.0.5",
+    "vite": "^8.0.0",
+    "vitest": "^4.1.0",
+    "vitest-browser-react": "^2.1.0",
     "zod": "^4.3.6",
     "@drivenets/eslint-plugin-internal": "0.0.0",
     "@drivenets/vite-plugin-design-system": "0.0.6"

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

@@ -1,6 +1,6 @@
-import { type Row } from '@tanstack/react-table';
+import { useLayoutEffect, useRef, type RefObject, type ReactNode } from 'react';
+import { type Row, type RowSelectionState } 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';
@@ -14,6 +14,7 @@ export const DsTableBodyVirtualized = <TData,>({
 	estimateSize,
 	overscan,
 	onScroll,
+	rowSelection,
 }: DsTableBodyVirtualizedProps<TData>) => {
 	const rowsMapRef = useRef<Map<string, HTMLTableRowElement>>(new Map());
 	const rowHeightsMapRef = useRef<Map<string, number>>(new Map());
@@ -82,19 +83,21 @@ export const DsTableBodyVirtualized = <TData,>({
 			rowVirtualizer={rowVirtualizer}
 			rowsAndExpandedRowContent={rowsAndExpandedRowContent}
 			emptyState={emptyState}
+			rowSelection={rowSelection}
 		/>
 	);
 };
 
 interface DsTableBodyProps<TData> {
 	rowVirtualizer: Virtualizer<HTMLDivElement, HTMLTableRowElement>;
-	rowsMapRef: React.RefObject<Map<string, HTMLTableRowElement>>;
-	rowHeightsMapRef: React.RefObject<Map<string, number>>;
+	rowsMapRef: RefObject<Map<string, HTMLTableRowElement>>;
+	rowHeightsMapRef: RefObject<Map<string, number>>;
 	rowsAndExpandedRowContent: {
 		row: Row<TData>;
 		isExpandedRowContent?: boolean;
 	}[];
-	emptyState?: React.ReactNode;
+	emptyState?: ReactNode;
+	rowSelection: RowSelectionState;
 }
 
 function DsTableBody<TData>({
@@ -103,6 +106,7 @@ function DsTableBody<TData>({
 	rowHeightsMapRef,
 	rowsAndExpandedRowContent,
 	emptyState,
+	rowSelection,
 }: DsTableBodyProps<TData>) {
 	const virtualRows = rowVirtualizer.getVirtualItems();
 
@@ -124,6 +128,7 @@ function DsTableBody<TData>({
 						<DsTableRowVirtualized
 							key={virtualRow.key}
 							row={row.row}
+							isSelected={!!rowSelection[row.row.id]}
 							isExpandedRowContent={row.isExpandedRowContent}
 							rowsMapRef={rowsMapRef}
 							rowHeightsMapRef={rowHeightsMapRef}

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

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

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

@@ -38,7 +38,7 @@ const DsRowDragHandle = ({ isDragging, attributes, listeners }: DsRowDragHandleP
 	);
 };
 
-const DsTableRow = <TData,>({ ref, row }: DsTableRowProps<TData>) => {
+const DsTableRow = <TData,>({ ref, row, isSelected }: DsTableRowProps<TData>) => {
 	const {
 		expandable,
 		selectable,
@@ -80,7 +80,7 @@ const DsTableRow = <TData,>({ ref, row }: DsTableRowProps<TData>) => {
 		<>
 			<TableRow
 				ref={mergeRefs(reorderable ? setNodeRef : null, ref)}
-				data-state={isActive ? 'active' : row.getIsSelected() ? 'selected' : undefined}
+				data-state={isActive ? 'active' : isSelected ? 'selected' : undefined}
 				className={classnames(
 					styles.tableRow,
 					{
@@ -96,7 +96,9 @@ const DsTableRow = <TData,>({ ref, row }: DsTableRowProps<TData>) => {
 				onClick={() => onRowClick?.(row.original)}
 				onDoubleClick={() => onRowDoubleClick?.(row.original)}
 			>
-				{selectable && <DsTableRowSelectableCell row={row} className={styles.selectableCell} />}
+				{selectable && (
+					<DsTableRowSelectableCell row={row} isSelected={isSelected} className={styles.selectableCell} />
+				)}
 				{expandable && (
 					<DsTableRowExpandableCell
 						row={row}

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

@@ -13,4 +13,8 @@ export interface DsTableRowProps<TData> {
 	 * The row data from the table
 	 */
 	row: Row<TData>;
+	/**
+	 * Indicates whether a row is currently selected.
+	 */
+	isSelected: boolean;
 }

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

@@ -8,13 +8,14 @@ import styles from './ds-table-row-selectable-cell.module.scss';
 
 export const DsTableRowSelectableCell = <TData,>({
 	row,
+	isSelected,
 	className,
 }: DsTableRowSelectableCellProps<TData>) => {
 	return (
 		<TableCell className={classnames(styles.cell, className)}>
 			<DsCheckbox
 				className={stylesShared.checkboxContainer}
-				checked={row.getIsSelected()}
+				checked={isSelected}
 				disabled={!row.getCanSelect()}
 				onClick={(e) => {
 					e.stopPropagation();

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

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

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

@@ -10,6 +10,7 @@ import { DsTableCell } from '../ds-table-cell';
 
 export const DsTableRowVirtualized = <TData,>({
 	row,
+	isSelected,
 	rowsMapRef,
 	rowHeightsMapRef,
 	rowVirtualizer,
@@ -47,7 +48,7 @@ export const DsTableRowVirtualized = <TData,>({
 					rowsMapRef.current.delete(key);
 				}
 			}}
-			data-state={isActive ? 'active' : row.getIsSelected() ? 'selected' : undefined}
+			data-state={isActive ? 'active' : isSelected ? 'selected' : undefined}
 			className={classnames(
 				styles.row,
 				{
@@ -67,7 +68,9 @@ export const DsTableRowVirtualized = <TData,>({
 				<TableCell>{renderExpandedRow?.(row.original)}</TableCell>
 			) : (
 				<>
-					{selectable && <DsTableRowSelectableCell row={row} className={styles.selectableCell} />}
+					{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;

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

@@ -1,10 +1,12 @@
+import { type RefObject } from 'react';
 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>>;
+	isSelected: boolean;
+	rowsMapRef: RefObject<Map<string, HTMLTableRowElement>>;
+	rowHeightsMapRef: RefObject<Map<string, number>>;
 	rowVirtualizer: Virtualizer<HTMLDivElement, HTMLTableRowElement>;
 	virtualRow: VirtualItem;
 	isExpandedRowContent?: boolean;

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

@@ -250,12 +250,15 @@ const DsTable = <TData extends { id: string }, TValue>({
 								estimateSize={virtualizedOptions?.estimateSize || ROW_SIZE_HEIGHT_MAP[rowSize]}
 								overscan={virtualizedOptions?.overscan}
 								onScroll={onScroll}
+								rowSelection={rowSelection}
 							/>
 						) : (
 							<TableBody>
 								<SortableWrapper>
 									{rows.length
-										? rows.map((row) => <DsTableRow key={row.id} row={row} />)
+										? rows.map((row) => (
+												<DsTableRow key={row.id} row={row} isSelected={!!rowSelection[row.id]} />
+											))
 										: renderEmptyState()}
 								</SortableWrapper>
 							</TableBody>