@drivenets/design-system 0.18.1 → 0.20.0

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

@@ -14,7 +14,7 @@ import {
 } from '@tanstack/react-table';
 import classnames from 'classnames';
 import { Table, TableBody, TableCell, TableRow } from './components/core-table';
-import { DsTableBulkActions } from './components/ds-table-bulk-actions';
+import { DsBulkActions } from '../ds-bulk-actions';
 import { DsTableHeader } from './components/ds-table-header';
 import { DsTableResizeOverlay } from './components/ds-table-resize-overlay';
 import styles from './ds-table.module.scss';
@@ -26,7 +26,8 @@ import { useColumnResize } from './hooks/use-column-resize';
 import { DsTableContextProvider } from './context/ds-table-context';
 import { DsTableBodyVirtualized } from './components/ds-table-body-virtualized';
 import { useColumnGroups } from './grouping';
-import { EMPTY_TABLE_STATE_TEXT } from './utils/constants';
+import { DsEmptyState } from '../ds-empty-state';
+import { getUtilityColumnSizing } from './utils/column-size';
 import { createSkeletonRows, getAugmentedColumns, toSkeletonColumns } from './utils/table-columns';
 import { createTableApi } from './utils/table-api';
 import { areBodiesFrozen } from './utils/frozen-body';
@@ -75,6 +76,9 @@ const DsTable = <TData extends { id: string }, TValue>(props: DsDataTableProps<T
 		resizableColumns,
 		columnSizing,
 		onColumnSizingChange,
+		selectableColumnWidth,
+		expandableColumnWidth,
+		reorderableColumnWidth,
 	} = tableProps;
 	const [data, setData] = React.useState(tableData);
 	const [sorting, setSorting] = React.useState<SortingState>([]);
@@ -155,12 +159,32 @@ const DsTable = <TData extends { id: string }, TValue>(props: DsDataTableProps<T
 				reorderable,
 				virtualized,
 				showSelectAllCheckbox,
+				selectableColumnWidth,
+				expandableColumnWidth,
+				reorderableColumnWidth,
 			}),
-		[columnsProp, hasSelectColumn, hasExpanderColumn, reorderable, virtualized, showSelectAllCheckbox],
+		[
+			columnsProp,
+			hasSelectColumn,
+			hasExpanderColumn,
+			reorderable,
+			virtualized,
+			showSelectAllCheckbox,
+			selectableColumnWidth,
+			expandableColumnWidth,
+			reorderableColumnWidth,
+		],
 	);
 
 	const skeletonColumns = useMemo(() => toSkeletonColumns(columns), [columns]);
 	const skeletonData = useMemo(() => createSkeletonRows<TData>(), []);
+	const utilityColumnSizing = useMemo(() => getUtilityColumnSizing(columns), [columns]);
+	const sourceDataLength = (reorderable ? data : tableData).length;
+	const inferredEmptyState = useMemo(
+		() => <DsEmptyState variant={sourceDataLength === 0 ? 'noData' : 'noMatches'} />,
+		[sourceDataLength],
+	);
+	const resolvedEmptyState = emptyState ?? inferredEmptyState;
 
 	const resize = useColumnResize({
 		enabled: resizableColumns,
@@ -168,6 +192,8 @@ const DsTable = <TData extends { id: string }, TValue>(props: DsDataTableProps<T
 		onColumnSizingChange,
 		columns,
 		columnVisibility,
+		overflowKey: (reorderable ? data : tableData).length,
+		utilityColumnSizing,
 	});
 
 	const table = useReactTable({
@@ -238,7 +264,7 @@ const DsTable = <TData extends { id: string }, TValue>(props: DsDataTableProps<T
 							{virtualized ? (
 								<MemoizedDsTableBodyVirtualized
 									table={table}
-									emptyState={emptyState}
+									emptyState={resolvedEmptyState}
 									estimateSize={virtualizedOptions?.estimateSize || ROW_SIZE_HEIGHT_MAP[rowSize]}
 									overscan={virtualizedOptions?.overscan}
 									onScroll={onScroll}
@@ -249,7 +275,7 @@ const DsTable = <TData extends { id: string }, TValue>(props: DsDataTableProps<T
 								<MemoizedDsTableRowsBody
 									table={table}
 									rowSelection={rowSelection}
-									emptyState={emptyState}
+									emptyState={resolvedEmptyState}
 									SortableWrapper={SortableWrapper}
 								/>
 							)}
@@ -260,14 +286,20 @@ const DsTable = <TData extends { id: string }, TValue>(props: DsDataTableProps<T
 					) : null}
 				</div>
 				{selectable && actions.length > 0 && (
-					<DsTableBulkActions
-						numSelectedRows={selectedRows.length}
-						actions={actions.map((action) => ({
-							...action,
-							onClick: () => action.onClick(selectedRows),
-						}))}
+					<DsBulkActions
+						placement="floating"
+						selectedCount={selectedRows.length}
 						onClearSelection={table.resetRowSelection}
-					/>
+					>
+						{actions.map((action, index) => (
+							<DsBulkActions.Item
+								key={`${action.label}-${String(index)}`}
+								icon={action.icon}
+								label={action.label}
+								onClick={() => action.onClick(selectedRows)}
+							/>
+						))}
+					</DsBulkActions>
 				)}
 			</div>
 		</DsTableContextProvider>
@@ -296,9 +328,9 @@ const DsTableRowsBody = <TData extends { id: string }>({
 				{rows.length ? (
 					rows.map((row) => <DsTableRow key={row.id} row={row} isSelected={!!rowSelection[row.id]} />)
 				) : (
-					<TableRow>
+					<TableRow className={styles.emptyStateRow}>
 						<TableCell colSpan={columnCount} className={styles.emptyState}>
-							{emptyState || EMPTY_TABLE_STATE_TEXT}
+							{emptyState}
 						</TableCell>
 					</TableRow>
 				)}

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

@@ -296,7 +296,9 @@ export interface DsDataTableProps<TData, TValue> {
 	activeRowId?: string | null;
 
 	/**
-	 * Empty state of the table
+	 * Replaces the inferred **Empty state**. When omitted, the table renders
+	 * `DsEmptyState` as `noData` if `data` is empty, or `noMatches` if `data`
+	 * has rows but filters hide all of them.
 	 */
 	emptyState?: React.ReactNode;
 
@@ -340,14 +342,17 @@ export interface DsDataTableProps<TData, TValue> {
 	 * from {@link onColumnSizingChange}. Pass it (typically on the next mount) to
 	 * restore widths; columns absent from the map are measured and sized
 	 * automatically. This seeds widths — live resizing still updates them
-	 * internally — so it is not a fully controlled value.
+	 * internally — so it is not a fully controlled value. Ids for the select,
+	 * expander, and reorder utility columns are ignored; use the matching
+	 * `*ColumnWidth` props instead.
 	 */
 	columnSizing?: Record<string, number>;
 
 	/**
 	 * Called with the next column id → width (px) map when a resize finishes
 	 * (drag end, double-click restore, or keyboard nudge). Use this to persist
-	 * widths across sessions.
+	 * widths across sessions. Select, expander, and reorder utility columns are
+	 * omitted from the map.
 	 */
 	onColumnSizingChange?: (columnSizing: Record<string, number>) => void;
 
@@ -363,6 +368,14 @@ export interface DsDataTableProps<TData, TValue> {
 	 */
 	expandable?: boolean | ((row: TData) => boolean);
 
+	/**
+	 * Width in px of the expander utility column. Ignored when `expandable` is
+	 * off. Non-finite or `<= 0` falls back to the default. The column is not
+	 * user-resizable. Wins over a `columnSizing` entry for this column.
+	 * @default 36
+	 */
+	expandableColumnWidth?: number;
+
 	/**
 	 * Function to render the expanded row
 	 */
@@ -394,6 +407,14 @@ export interface DsDataTableProps<TData, TValue> {
 	 */
 	selectable?: boolean | ((rowData: TData) => boolean);
 
+	/**
+	 * Width in px of the select utility column. Ignored when `selectable` is
+	 * off. Non-finite or `<= 0` falls back to the default. The column is not
+	 * user-resizable. Wins over a `columnSizing` entry for this column.
+	 * @default 36
+	 */
+	selectableColumnWidth?: number;
+
 	/**
 	 * Whether to show the select/deselect all checkbox in the header
 	 * @default true
@@ -474,6 +495,15 @@ export interface DsDataTableProps<TData, TValue> {
 	 */
 	reorderable?: boolean;
 
+	/**
+	 * Width in px of the reorder utility column. Ignored when `reorderable` is
+	 * off or the table is virtualized. Non-finite or `<= 0` falls back to the
+	 * default. The column is not user-resizable. Wins over a `columnSizing`
+	 * entry for this column.
+	 * @default 60
+	 */
+	reorderableColumnWidth?: number;
+
 	/**
 	 * Callback when the order of rows changes via drag & drop
 	 */

package/src/components/ds-table/hooks/use-column-resize.ts

@@ -19,12 +19,19 @@ import {
 	collectMissingLeafSizing,
 	getColumnSizeCssVars,
 	getResizeOriginSize,
+	growFillLeavesToContainer,
+	isExplicitColumnWidth,
 	measureLeafHeaderWidths,
 	omitBuiltinColumnSizing,
+	shiftColumnTrack,
+	withUtilityColumnSizing,
 	type ColumnSizeBoundsSource,
 } from '../utils/column-size';
-import { RESIZE_MIN_COLUMN_WIDTH } from '../utils/constants';
+import { RESIZE_DIVIDER_WIDTH, RESIZE_MIN_COLUMN_WIDTH } from '../utils/constants';
 import type { DsTableResizePhase } from '../context/ds-table-context';
+import { useScrollbarSpacer, type ScrollbarSpacerWidth } from './use-scrollbar-spacer';
+
+const TRACK_MATCH_PX = 3;
 
 const INITIAL_COLUMN_SIZING_INFO: ColumnSizingInfoState = {
 	startOffset: null,
@@ -35,6 +42,14 @@ const INITIAL_COLUMN_SIZING_INFO: ColumnSizingInfoState = {
 	columnSizingStart: [],
 };
 
+const clampResizeOverlayOffset = (offset: number, tableWidth: number): number => {
+	if (tableWidth <= RESIZE_DIVIDER_WIDTH) {
+		return offset;
+	}
+
+	return Math.min(offset, tableWidth - RESIZE_DIVIDER_WIDTH);
+};
+
 export interface UseColumnResizeOptions {
 	enabled: boolean;
 	/**
@@ -49,6 +64,15 @@ export interface UseColumnResizeOptions {
 	 */
 	columns: unknown;
 	columnVisibility: VisibilityState;
+	/**
+	 * Invalidates overflow measurement (row count). Read as a dependency only.
+	 */
+	overflowKey: number;
+	/**
+	 * Authored widths for injected utility leaves. Overlaid last so they win
+	 * over persist seed and live internal state.
+	 */
+	utilityColumnSizing?: ColumnSizingState;
 }
 
 export interface DsTableResizeContextSlice {
@@ -64,6 +88,10 @@ export interface DsTableResizeContextSlice {
 	 * the persist callback, mirroring drag end.
 	 */
 	onResizeKeyboardNudge: (columnId: string, delta: number) => void;
+	/**
+	 * Overflow-only **Scrollbar spacer** width (0 or rest scrollbar size).
+	 */
+	scrollbarSpacerWidth: ScrollbarSpacerWidth;
 }
 
 export interface UseColumnResizeActiveResize {
@@ -92,6 +120,7 @@ export interface UseColumnResizeResult {
 		columnSizingInfo: ColumnSizingInfoState;
 	};
 	bind: <TData>(table: Table<TData>) => UseColumnResizeBindResult;
+	scrollbarSpacerWidth: ScrollbarSpacerWidth;
 }
 
 /**
@@ -108,6 +137,8 @@ export const useColumnResize = ({
 	onColumnSizingChange,
 	columns,
 	columnVisibility,
+	overflowKey,
+	utilityColumnSizing,
 }: UseColumnResizeOptions): UseColumnResizeResult => {
 	const [columnResizeState, setColumnResizeState] = useState<{
 		columnSizing: ColumnSizingState;
@@ -125,10 +156,11 @@ export const useColumnResize = ({
 	// drag (or seed measurement) of a persisted column still takes effect. Passed
 	// to TanStack and read for CSS vars / persist so restore, drag, and persist
 	// all see the same widths.
-	const columnSizing = useMemo<ColumnSizingState>(
-		() => (columnSizingProp ? { ...columnSizingProp, ...internalColumnSizing } : internalColumnSizing),
-		[columnSizingProp, internalColumnSizing],
-	);
+	const columnSizing = useMemo<ColumnSizingState>(() => {
+		const merged = columnSizingProp ? { ...columnSizingProp, ...internalColumnSizing } : internalColumnSizing;
+
+		return withUtilityColumnSizing(merged, utilityColumnSizing ?? {});
+	}, [columnSizingProp, internalColumnSizing, utilityColumnSizing]);
 	const [resizeHover, setResizeHover] = useState<{
 		columnId: string;
 		offset: number;
@@ -136,6 +168,10 @@ export const useColumnResize = ({
 	const dragStartOffsetRef = useRef<number | null>(null);
 	const resizeOriginSizingRef = useRef<ColumnSizingState>({});
 	const containerRef = useRef<HTMLDivElement>(null);
+	const scrollbarSpacerWidth = useScrollbarSpacer(containerRef, overflowKey);
+	const spacerWidthRef = useRef(scrollbarSpacerWidth);
+	spacerWidthRef.current = scrollbarSpacerWidth;
+	const prevSpacerWidthRef = useRef<ScrollbarSpacerWidth | null>(null);
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any -- bind is generic; the ref only calls sizing APIs
 	const tableRef = useRef<Table<any> | null>(null);
 
@@ -235,6 +271,8 @@ export const useColumnResize = ({
 	);
 
 	useLayoutEffect(() => {
+		prevSpacerWidthRef.current = null;
+
 		if (!enabled) {
 			return;
 		}
@@ -258,6 +296,11 @@ export const useColumnResize = ({
 			const leaves = table.getVisibleLeafColumns();
 			const leafIds = leaves.map((column) => column.id);
 			const measured = measureLeafHeaderWidths(tableEl, leafIds);
+			const fillableIds = leaves
+				.filter((column) => !isExplicitColumnWidth(column, {}))
+				.map((column) => column.id);
+			const trackWidth = container.clientWidth - spacerWidthRef.current;
+			const missing = collectMissingLeafSizing(measured, columnSizingRef.current, trackWidth, fillableIds);
 
 			for (const column of leaves) {
 				const measuredWidth = measured[column.id];
@@ -265,17 +308,31 @@ export const useColumnResize = ({
 					continue;
 				}
 
-				resizeOriginSizingRef.current[column.id] = getResizeOriginSize(column, Math.round(measuredWidth));
+				resizeOriginSizingRef.current[column.id] = getResizeOriginSize(
+					column,
+					missing[column.id] ?? Math.round(measuredWidth),
+				);
 			}
 
-			const missing = collectMissingLeafSizing(measured, columnSizingRef.current);
 			if (Object.keys(missing).length > 0) {
+				const bounds = leafSizeBoundsRef.current;
+				const clamped = clampColumnSizing(missing, bounds);
+				const grown = growFillLeavesToContainer(
+					clamped,
+					columnSizingRef.current,
+					Object.keys(measured),
+					trackWidth,
+					fillableIds,
+					bounds,
+				);
 				handleColumnSizingChange((prev) => ({
-					...clampColumnSizing(missing, leafSizeBoundsRef.current),
+					...grown,
 					...prev,
 				}));
 			}
 
+			prevSpacerWidthRef.current = spacerWidthRef.current;
+
 			return true;
 		};
 
@@ -293,6 +350,48 @@ export const useColumnResize = ({
 		return () => observer.disconnect();
 	}, [enabled, columns, columnVisibility, handleColumnSizingChange]);
 
+	// After seed, a vertical scrollbar can appear or disappear (Infinite Scroll,
+	// filter, shorter viewport). The **Scrollbar spacer** then toggles 0↔10px.
+	// Shrink or grow the column track by that delta so leaves + spacer still
+	// fill the container — internally only, never via onColumnSizingChange.
+	// Skip when the leaves were not filling the previous track (already
+	// overflowing horizontally) so authored-wide columns are left alone.
+	useLayoutEffect(() => {
+		if (!enabled) {
+			return;
+		}
+
+		const prevSpacerWidth = prevSpacerWidthRef.current;
+		if (prevSpacerWidth === null || prevSpacerWidth === scrollbarSpacerWidth) {
+			return;
+		}
+
+		const container = containerRef.current;
+		const table = tableRef.current;
+		if (!container || !table) {
+			return;
+		}
+
+		const leafIds = table.getVisibleLeafColumns().map((column) => column.id);
+		let leafTotal = 0;
+
+		for (const id of leafIds) {
+			leafTotal += columnSizingRef.current[id] ?? 0;
+		}
+
+		const prevTrack = container.clientWidth - prevSpacerWidth;
+		prevSpacerWidthRef.current = scrollbarSpacerWidth;
+
+		if (Math.abs(leafTotal - prevTrack) > TRACK_MATCH_PX) {
+			return;
+		}
+
+		const delta = prevSpacerWidth - scrollbarSpacerWidth;
+		handleColumnSizingChange(
+			shiftColumnTrack(columnSizingRef.current, leafIds, delta, leafSizeBoundsRef.current),
+		);
+	}, [enabled, scrollbarSpacerWidth, handleColumnSizingChange]);
+
 	const tableOptions = useMemo<UseColumnResizeTableOptions>(
 		() => ({
 			enableColumnResizing: enabled,
@@ -319,7 +418,7 @@ export const useColumnResize = ({
 		const columnSizeVars: CSSProperties | undefined = resizeSizingReady
 			? {
 					...getColumnSizeCssVars(table.getFlatHeaders()),
-					width: table.getTotalSize(),
+					width: table.getTotalSize() + scrollbarSpacerWidth,
 				}
 			: undefined;
 
@@ -335,6 +434,7 @@ export const useColumnResize = ({
 					onResizeDragStart: handleResizeDragStart,
 					onResizeReset: handleResizeReset,
 					onResizeKeyboardNudge: handleResizeKeyboardNudge,
+					scrollbarSpacerWidth,
 				},
 			};
 		}
@@ -349,14 +449,15 @@ export const useColumnResize = ({
 			resizingHeader && startSize !== null
 				? resizingHeader.getSize() - startSize
 				: (columnSizingInfo.deltaOffset ?? 0);
+		const tableWidth = table.getTotalSize();
 		const activeResize: UseColumnResizeActiveResize | null =
 			isResizingColumn && dragStartOffsetRef.current !== null
 				? {
-						offset: dragStartOffsetRef.current + clampedResizeDelta,
+						offset: clampResizeOverlayOffset(dragStartOffsetRef.current + clampedResizeDelta, tableWidth),
 						phase: 'dragging',
 					}
 				: resizeHover
-					? { offset: resizeHover.offset, phase: 'hover' }
+					? { offset: clampResizeOverlayOffset(resizeHover.offset, tableWidth), phase: 'hover' }
 					: null;
 
 		return {
@@ -370,6 +471,7 @@ export const useColumnResize = ({
 				onResizeDragStart: handleResizeDragStart,
 				onResizeReset: handleResizeReset,
 				onResizeKeyboardNudge: handleResizeKeyboardNudge,
+				scrollbarSpacerWidth,
 			},
 		};
 	};
@@ -381,5 +483,6 @@ export const useColumnResize = ({
 			columnSizingInfo,
 		},
 		bind,
+		scrollbarSpacerWidth,
 	};
 };

package/src/components/ds-table/hooks/use-scrollbar-spacer.ts

@@ -0,0 +1,108 @@
+import { useLayoutEffect, useState, type RefObject } from 'react';
+import { SCROLLBAR_SPACER_WIDTH } from '../utils/constants';
+
+export type ScrollbarSpacerWidth = 0 | typeof SCROLLBAR_SPACER_WIDTH;
+
+const BODY_SCROLLBAR_COMPENSATION_CSS_VAR = '--ds-table-body-scrollbar-compensation';
+
+const bodyOverflowsVertically = (body: HTMLElement): boolean => body.scrollHeight > body.clientHeight;
+
+const verticalScrollbarOccupancy = (body: HTMLElement): number =>
+	Math.max(0, body.offsetWidth - body.clientWidth);
+
+/**
+ * Extra `padding-inline-end` on body rows so Fill columns match the header
+ * **Scrollbar spacer** when the vertical scrollbar occupies no layout (overlay).
+ * Classic scrollbars already inset `clientWidth`; do not add that occupancy twice.
+ */
+export const getBodyScrollbarCompensation = (
+	occupancyPx: number,
+	spacerWidth: ScrollbarSpacerWidth,
+): number => Math.max(0, spacerWidth - occupancyPx);
+
+const syncBodyScrollbarCompensation = (
+	container: HTMLElement,
+	body: HTMLElement | null,
+	spacerWidth: ScrollbarSpacerWidth,
+): void => {
+	if (!body) {
+		container.style.removeProperty(BODY_SCROLLBAR_COMPENSATION_CSS_VAR);
+		return;
+	}
+
+	container.style.setProperty(
+		BODY_SCROLLBAR_COMPENSATION_CSS_VAR,
+		`${String(getBodyScrollbarCompensation(verticalScrollbarOccupancy(body), spacerWidth))}px`,
+	);
+};
+
+/**
+ * Overflow-only **Scrollbar spacer** width: `SCROLLBAR_SPACER_WIDTH` while the
+ * body scroll container overflows vertically, otherwise 0.
+ *
+ * Observes container/tbody size and tbody children (rows added/removed). Does
+ * not watch `style` attributes — virtualized rows rewrite `transform` on scroll.
+ */
+export const useScrollbarSpacer = (
+	containerRef: RefObject<HTMLElement | null>,
+	overflowKey: number,
+): ScrollbarSpacerWidth => {
+	const [width, setWidth] = useState<ScrollbarSpacerWidth>(0);
+
+	useLayoutEffect(() => {
+		const container = containerRef.current;
+		if (!container) {
+			return;
+		}
+
+		const read = () => {
+			const body = container.querySelector('tbody');
+			if (!(body instanceof HTMLElement)) {
+				setWidth(0);
+				syncBodyScrollbarCompensation(container, null, 0);
+				return;
+			}
+
+			const nextWidth = bodyOverflowsVertically(body) ? SCROLLBAR_SPACER_WIDTH : 0;
+			setWidth(nextWidth);
+			syncBodyScrollbarCompensation(container, body, nextWidth);
+		};
+
+		const resizeObserver = new ResizeObserver(read);
+		const bodyChildObserver = new MutationObserver(read);
+		resizeObserver.observe(container);
+
+		let observedBody: HTMLElement | null = null;
+
+		const bindBody = () => {
+			const body = container.querySelector('tbody');
+			if (!(body instanceof HTMLElement) || body === observedBody) {
+				return;
+			}
+
+			bodyChildObserver.disconnect();
+			observedBody = body;
+			resizeObserver.observe(body);
+			bodyChildObserver.observe(body, { childList: true });
+			read();
+		};
+
+		bindBody();
+		read();
+
+		const table = container.querySelector('table');
+		const tableChildObserver = new MutationObserver(bindBody);
+		if (table) {
+			tableChildObserver.observe(table, { childList: true });
+		}
+
+		return () => {
+			resizeObserver.disconnect();
+			bodyChildObserver.disconnect();
+			tableChildObserver.disconnect();
+			container.style.removeProperty(BODY_SCROLLBAR_COMPENSATION_CSS_VAR);
+		};
+	}, [containerRef, overflowKey]);
+
+	return width;
+};

package/src/components/ds-table/hooks/use-scrollbar-spacer.unit.test.ts

@@ -0,0 +1,26 @@
+import { describe, expect, it } from 'vitest';
+import { SCROLLBAR_SPACER_WIDTH } from '../utils/constants';
+import { getBodyScrollbarCompensation } from './use-scrollbar-spacer';
+
+describe('getBodyScrollbarCompensation', () => {
+	it('reserves the full spacer when the scrollbar occupies no layout (overlay)', () => {
+		expect(getBodyScrollbarCompensation(0, SCROLLBAR_SPACER_WIDTH)).toBe(SCROLLBAR_SPACER_WIDTH);
+	});
+
+	it('adds nothing when a classic scrollbar already occupies the spacer width', () => {
+		expect(getBodyScrollbarCompensation(SCROLLBAR_SPACER_WIDTH, SCROLLBAR_SPACER_WIDTH)).toBe(0);
+	});
+
+	it('fills only the gap when a thinner scrollbar occupies part of the spacer', () => {
+		expect(getBodyScrollbarCompensation(8, SCROLLBAR_SPACER_WIDTH)).toBe(2);
+	});
+
+	it('does not shrink the body when occupancy is wider than the spacer', () => {
+		expect(getBodyScrollbarCompensation(15, SCROLLBAR_SPACER_WIDTH)).toBe(0);
+	});
+
+	it('adds nothing when the spacer is collapsed', () => {
+		expect(getBodyScrollbarCompensation(0, 0)).toBe(0);
+		expect(getBodyScrollbarCompensation(SCROLLBAR_SPACER_WIDTH, 0)).toBe(0);
+	});
+});

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

@@ -1,12 +1,10 @@
 $border-radius: 4px;
 $border-width: 1px;
 $group-border-width: 2px;
-$reorder-column-width: 60px;
 $container-margin-vertical: 1rem;
 $filter-input-gap: 0.5rem;
 $filter-input-max-width: 24rem;
 $header-sort-gap: 0.5rem;
-$empty-state-height: 6rem;
 $resize-handle-hit-width: 12px;
 $resize-divider-width: 2px;