@drivenets/design-system 0.18.1 → 0.20.0

package/src/components/ds-table/utils/column-size.ts

@@ -188,25 +188,257 @@ export const measureLeafHeaderWidths = (
 	return widths;
 };
 
+const CONTAINER_SIZE_SNAP_PX = 1;
+
+const absorbSizingDrift = (sizing: ColumnSizingState, ids: string[], drift: number): void => {
+	for (const id of [...ids].reverse()) {
+		if (drift === 0) {
+			break;
+		}
+
+		const current = sizing[id];
+		if (current === undefined) {
+			continue;
+		}
+
+		const nextSize = Math.max(RESIZE_MIN_COLUMN_WIDTH, current - drift);
+		drift -= current - nextSize;
+		sizing[id] = nextSize;
+	}
+};
+
+const toIdSet = (ids: ReadonlySet<string> | readonly string[]): ReadonlySet<string> =>
+	ids instanceof Set ? ids : new Set(ids);
+
+/**
+ * Grows `ids` so their combined increase equals `extra`. Shares follow each
+ * id's current width; leftover rounding is absorbed on the last id.
+ */
+const distributeExtraSpace = (
+	sizing: ColumnSizingState,
+	ids: string[],
+	extra: number,
+	maxById?: ReadonlyMap<string, number>,
+): void => {
+	if (ids.length === 0 || extra <= 0) {
+		return;
+	}
+
+	let remaining = extra;
+	let open = ids.filter((id) => (sizing[id] ?? 0) < (maxById?.get(id) ?? DEFAULT_MAX_COLUMN_SIZE));
+
+	while (remaining > 0 && open.length > 0) {
+		let weightSum = 0;
+
+		for (const id of open) {
+			weightSum += sizing[id] ?? 0;
+		}
+
+		let assigned = 0;
+		const stillOpen: string[] = [];
+
+		for (const id of open) {
+			const current = sizing[id] ?? 0;
+			const max = maxById?.get(id) ?? DEFAULT_MAX_COLUMN_SIZE;
+			const room = max - current;
+			const rawShare = weightSum <= 0 ? remaining / open.length : remaining * (current / weightSum);
+			const share = Math.min(room, Math.round(rawShare));
+			sizing[id] = current + share;
+			assigned += share;
+
+			if (current + share < max) {
+				stillOpen.push(id);
+			}
+		}
+
+		let leftover = remaining - assigned;
+
+		for (const id of stillOpen) {
+			if (leftover <= 0) {
+				break;
+			}
+
+			const max = maxById?.get(id) ?? DEFAULT_MAX_COLUMN_SIZE;
+			const add = Math.min(leftover, max - (sizing[id] ?? 0));
+			sizing[id] = (sizing[id] ?? 0) + add;
+			leftover -= add;
+		}
+
+		if (assigned === 0 && leftover === remaining) {
+			break;
+		}
+
+		remaining = leftover;
+		open = stillOpen.filter((id) => (sizing[id] ?? 0) < (maxById?.get(id) ?? DEFAULT_MAX_COLUMN_SIZE));
+	}
+};
+
 /**
  * Sizing entries for leaves that are not yet in `existing`. Does not overwrite
- * user-resized (or previously snapshotted) ids.
+ * user-resized (or previously snapshotted) ids. Rounds each measurement, then
+ * shifts leftover pixels onto the last missing leaf so the visible total
+ * matches the measured width (or the container, when they differ by 1px).
+ * When the measured total is short of the container, leftover space is shared
+ * across missing fill leaves in `fillableIds`.
  */
 export const collectMissingLeafSizing = (
 	measured: Record<string, number>,
 	existing: ColumnSizingState,
+	containerWidth?: number,
+	fillableIds?: ReadonlySet<string> | readonly string[],
 ): ColumnSizingState => {
 	const next: ColumnSizingState = {};
+	const missingIds: string[] = [];
 
 	for (const [id, width] of Object.entries(measured)) {
 		if (existing[id] === undefined) {
 			next[id] = Math.round(width);
+			missingIds.push(id);
 		}
 	}
 
+	if (missingIds.length === 0) {
+		return next;
+	}
+
+	let roundedMissingSum = 0;
+	let unroundedMissingSum = 0;
+
+	for (const id of missingIds) {
+		roundedMissingSum += next[id] ?? 0;
+		unroundedMissingSum += measured[id] ?? 0;
+	}
+
+	absorbSizingDrift(next, missingIds, roundedMissingSum - Math.round(unroundedMissingSum));
+
+	if (containerWidth === undefined || !Number.isFinite(containerWidth) || containerWidth <= 0) {
+		return next;
+	}
+
+	let projected = 0;
+
+	for (const id of Object.keys(measured)) {
+		projected += existing[id] ?? next[id] ?? 0;
+	}
+
+	const delta = projected - containerWidth;
+
+	if (Math.abs(delta) <= CONTAINER_SIZE_SNAP_PX) {
+		absorbSizingDrift(next, missingIds, delta);
+		return next;
+	}
+
+	if (delta < 0 && fillableIds) {
+		const fillable = toIdSet(fillableIds);
+		distributeExtraSpace(
+			next,
+			missingIds.filter((id) => fillable.has(id)),
+			-delta,
+		);
+	}
+
 	return next;
 };
 
+const maxSizeOf = (id: string, boundsById: Map<string, ColumnSizeBoundsSource['columnDef']>): number =>
+	boundsById.get(id)?.maxSize ?? DEFAULT_MAX_COLUMN_SIZE;
+
+/**
+ * After clamp, grow fill leaves that still have room so the projected
+ * measured total matches the container. A leaf that hit `maxSize` must not
+ * leave a gap — leftover pixels go to siblings.
+ */
+export const growFillLeavesToContainer = (
+	sizing: ColumnSizingState,
+	existing: ColumnSizingState,
+	measuredIds: readonly string[],
+	containerWidth: number,
+	fillableIds: ReadonlySet<string> | readonly string[],
+	bounds: ReadonlyArray<ColumnSizeBoundsSource>,
+): ColumnSizingState => {
+	if (!Number.isFinite(containerWidth) || containerWidth <= 0 || measuredIds.length === 0) {
+		return sizing;
+	}
+
+	let projected = 0;
+
+	for (const id of measuredIds) {
+		projected += existing[id] ?? sizing[id] ?? 0;
+	}
+
+	const extra = containerWidth - projected;
+	if (extra <= 0) {
+		return sizing;
+	}
+
+	const fillable = toIdSet(fillableIds);
+	const growable = Object.keys(sizing).filter((id) => fillable.has(id));
+	if (growable.length === 0) {
+		return sizing;
+	}
+
+	const next = { ...sizing };
+	const boundsById = new Map(bounds.map((column) => [column.id, column.columnDef]));
+	distributeExtraSpace(next, growable, extra, new Map(growable.map((id) => [id, maxSizeOf(id, boundsById)])));
+
+	return next;
+};
+
+const minSizeOf = (id: string, boundsById: Map<string, ColumnSizeBoundsSource['columnDef']>): number =>
+	boundsById.get(id)?.minSize ?? RESIZE_MIN_COLUMN_WIDTH;
+
+const shrinkColumnTrack = (
+	sizing: ColumnSizingState,
+	ids: readonly string[],
+	amount: number,
+	bounds: ReadonlyArray<ColumnSizeBoundsSource>,
+): void => {
+	const boundsById = new Map(bounds.map((column) => [column.id, column.columnDef]));
+	let remaining = amount;
+
+	for (const id of [...ids].reverse()) {
+		if (remaining <= 0) {
+			break;
+		}
+
+		const current = sizing[id];
+		if (current === undefined) {
+			continue;
+		}
+
+		const nextSize = Math.max(minSizeOf(id, boundsById), current - remaining);
+		remaining -= current - nextSize;
+		sizing[id] = nextSize;
+	}
+};
+
+/**
+ * Grows or shrinks `ids` so the column track changes by `delta` (positive =
+ * grow). Used when the **Scrollbar spacer** toggles after seed; does not
+ * invent ids missing from `sizing`.
+ */
+export const shiftColumnTrack = (
+	sizing: ColumnSizingState,
+	ids: readonly string[],
+	delta: number,
+	bounds: ReadonlyArray<ColumnSizeBoundsSource>,
+): ColumnSizingState => {
+	if (!Number.isFinite(delta) || delta === 0 || ids.length === 0) {
+		return sizing;
+	}
+
+	const next = { ...sizing };
+
+	if (delta > 0) {
+		const boundsById = new Map(bounds.map((column) => [column.id, column.columnDef]));
+		distributeExtraSpace(next, [...ids], delta, new Map(ids.map((id) => [id, maxSizeOf(id, boundsById)])));
+	} else {
+		shrinkColumnTrack(next, ids, -delta, bounds);
+	}
+
+	return clampColumnSizing(next, bounds);
+};
+
 /**
  * Copy of `columnSizing` without injected utility leaves. Use at the public
  * `onColumnSizingChange` boundary so consumers persist only their own columns.
@@ -222,3 +454,44 @@ export const omitBuiltinColumnSizing = (columnSizing: ColumnSizingState): Column
 
 	return next;
 };
+
+/**
+ * Authored utility-column width, or `fallback` when the value is omitted,
+ * non-finite, or not positive.
+ */
+export const resolveUtilityColumnWidth = (width: number | undefined, fallback: number): number => {
+	if (width === undefined || !Number.isFinite(width) || width <= 0) {
+		return fallback;
+	}
+
+	return width;
+};
+
+/**
+ * Drops any utility ids from `columnSizing`, then applies `utilityColumnSizing`
+ * so those leaves always take the authored width.
+ */
+export const withUtilityColumnSizing = (
+	columnSizing: ColumnSizingState,
+	utilityColumnSizing: ColumnSizingState,
+): ColumnSizingState => ({
+	...omitBuiltinColumnSizing(columnSizing),
+	...utilityColumnSizing,
+});
+
+/**
+ * Authored sizes for injected utility leaves, keyed by column id.
+ */
+export const getUtilityColumnSizing = (
+	columns: ReadonlyArray<{ id?: string; size?: number }>,
+): ColumnSizingState => {
+	const next: ColumnSizingState = {};
+
+	for (const column of columns) {
+		if (column.id !== undefined && BUILTIN_COLUMN_IDS.has(column.id) && column.size !== undefined) {
+			next[column.id] = column.size;
+		}
+	}
+
+	return next;
+};

package/src/components/ds-table/utils/column-size.unit.test.ts

@@ -13,8 +13,13 @@ import {
 	getResizableColumnStyle,
 	getResizableHeaderStyle,
 	getResizeOriginSize,
+	getUtilityColumnSizing,
+	growFillLeavesToContainer,
 	isExplicitColumnWidth,
 	omitBuiltinColumnSizing,
+	resolveUtilityColumnWidth,
+	shiftColumnTrack,
+	withUtilityColumnSizing,
 } from './column-size';
 import {
 	EXPANDER_COLUMN_ID,
@@ -179,6 +184,115 @@ describe('collectMissingLeafSizing', () => {
 	it('returns an empty map when every measured id already has a sizing entry', () => {
 		expect(collectMissingLeafSizing({ a: 100 }, { a: 90 })).toEqual({});
 	});
+
+	it('reconciles independent rounding so seeded widths match the measured total', () => {
+		const next = collectMissingLeafSizing({ a: 500.6, b: 500.6 }, {});
+
+		expect(next).toEqual({ a: 501, b: 500 });
+	});
+
+	it('absorbs rounding drift into missing ids and leaves existing widths unchanged', () => {
+		expect(collectMissingLeafSizing({ a: 500.6, b: 500.6 }, { b: 501 }, 1001)).toEqual({ a: 500 });
+	});
+
+	it('does not snap seeded widths to the container when measured columns overflow it', () => {
+		expect(collectMissingLeafSizing({ a: 1000, b: 1000 }, {}, 1116)).toEqual({ a: 1000, b: 1000 });
+	});
+
+	it('snaps a 1px measured overflow to the container width', () => {
+		const next = collectMissingLeafSizing({ a: 558.5, b: 558.5 }, {}, 1116);
+		const total = Object.values(next).reduce((sum, width) => sum + width, 0);
+
+		expect(total).toBe(1116);
+	});
+
+	it('distributes container underflow across fill leaves by their measured share', () => {
+		const next = collectMissingLeafSizing({ a: 200, b: 200 }, {}, 1200, ['a', 'b']);
+
+		expect(next).toEqual({ a: 600, b: 600 });
+	});
+
+	it('grows only fill leaves when the container is wider than the measured total', () => {
+		const next = collectMissingLeafSizing({ a: 200, b: 200, c: 200 }, {}, 1200, ['b', 'c']);
+
+		expect(next).toEqual({ a: 200, b: 500, c: 500 });
+	});
+});
+
+describe('growFillLeavesToContainer', () => {
+	it('moves leftover space onto uncapped fill leaves after a sibling hits maxSize', () => {
+		const next = growFillLeavesToContainer(
+			{ a: 280, b: 360, c: 360 },
+			{},
+			['a', 'b', 'c'],
+			1200,
+			['a', 'b', 'c'],
+			[
+				{ id: 'a', columnDef: { maxSize: 280 } },
+				{ id: 'b', columnDef: {} },
+				{ id: 'c', columnDef: {} },
+			],
+		);
+
+		expect(next.a).toBe(280);
+		expect(next.b).toBeGreaterThan(360);
+		expect(next.c).toBeGreaterThan(360);
+		expect((next.a ?? 0) + (next.b ?? 0) + (next.c ?? 0)).toBe(1200);
+	});
+
+	it('does not grow an explicit leaf when filling leftover space', () => {
+		const next = growFillLeavesToContainer(
+			{ a: 280, b: 360, c: 360 },
+			{},
+			['a', 'b', 'c'],
+			1200,
+			['b', 'c'],
+			[
+				{ id: 'a', columnDef: { maxSize: 280 } },
+				{ id: 'b', columnDef: {} },
+				{ id: 'c', columnDef: {} },
+			],
+		);
+
+		expect(next).toEqual({ a: 280, b: 460, c: 460 });
+	});
+});
+
+describe('shiftColumnTrack', () => {
+	const bounds = [
+		{ id: 'a', columnDef: {} },
+		{ id: 'b', columnDef: {} },
+	];
+
+	it('returns the same map when delta is 0', () => {
+		const sizing = { a: 200, b: 200 };
+
+		expect(shiftColumnTrack(sizing, ['a', 'b'], 0, bounds)).toBe(sizing);
+	});
+
+	it('shrinks from the last leaf when the spacer appears', () => {
+		const next = shiftColumnTrack({ a: 500, b: 500 }, ['a', 'b'], -10, bounds);
+
+		expect(next.a).toBe(500);
+		expect(next.b).toBe(490);
+		expect((next.a ?? 0) + (next.b ?? 0)).toBe(990);
+	});
+
+	it('grows leaves when the spacer disappears', () => {
+		const next = shiftColumnTrack({ a: 500, b: 490 }, ['a', 'b'], 10, bounds);
+
+		expect((next.a ?? 0) + (next.b ?? 0)).toBe(1000);
+	});
+
+	it('does not shrink a leaf below minSize', () => {
+		const next = shiftColumnTrack({ a: 200, b: 52 }, ['a', 'b'], -10, [
+			{ id: 'a', columnDef: {} },
+			{ id: 'b', columnDef: { minSize: 52 } },
+		]);
+
+		expect(next.b).toBe(52);
+		expect(next.a).toBe(190);
+	});
 });
 
 describe('omitBuiltinColumnSizing', () => {
@@ -211,3 +325,46 @@ describe('omitBuiltinColumnSizing', () => {
 		expect(next).not.toBe(sizing);
 	});
 });
+
+describe('resolveUtilityColumnWidth', () => {
+	it('returns the fallback when the width is omitted, non-finite, or not positive', () => {
+		expect(resolveUtilityColumnWidth(undefined, 36)).toBe(36);
+		expect(resolveUtilityColumnWidth(0, 36)).toBe(36);
+		expect(resolveUtilityColumnWidth(-8, 36)).toBe(36);
+		expect(resolveUtilityColumnWidth(Number.NaN, 36)).toBe(36);
+		expect(resolveUtilityColumnWidth(Number.POSITIVE_INFINITY, 36)).toBe(36);
+	});
+
+	it('returns a positive finite width as-is', () => {
+		expect(resolveUtilityColumnWidth(48, 36)).toBe(48);
+		expect(resolveUtilityColumnWidth(1, 36)).toBe(1);
+	});
+});
+
+describe('withUtilityColumnSizing', () => {
+	it('strips inbound utility ids and overlays the authored widths', () => {
+		expect(
+			withUtilityColumnSizing(
+				{ [SELECT_COLUMN_ID]: 80, firstName: 200 },
+				{ [SELECT_COLUMN_ID]: 48, [EXPANDER_COLUMN_ID]: 40 },
+			),
+		).toEqual({ firstName: 200, [SELECT_COLUMN_ID]: 48, [EXPANDER_COLUMN_ID]: 40 });
+	});
+});
+
+describe('getUtilityColumnSizing', () => {
+	it('collects size entries for injected utility leaves only', () => {
+		expect(
+			getUtilityColumnSizing([
+				{ id: REORDER_COLUMN_ID, size: 80 },
+				{ id: EXPANDER_COLUMN_ID, size: 40 },
+				{ id: SELECT_COLUMN_ID, size: 48 },
+				{ id: 'firstName', size: 200 },
+			]),
+		).toEqual({
+			[REORDER_COLUMN_ID]: 80,
+			[EXPANDER_COLUMN_ID]: 40,
+			[SELECT_COLUMN_ID]: 48,
+		});
+	});
+});

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

@@ -1,8 +1,3 @@
-/**
- * Default text for empty table state
- */
-export const EMPTY_TABLE_STATE_TEXT = 'No results.';
-
 /**
  * Column id used for the synthetic expander column injected when `expandable` is set.
  */
@@ -55,6 +50,19 @@ export const SKELETON_ROW_COUNT = 5;
  */
 export const RESIZE_MIN_COLUMN_WIDTH = 52;
 
+/**
+ * Pixel width of the full-height resize overlay divider. Must match
+ * `$resize-divider-width` in `styles/_variables.scss`.
+ */
+export const RESIZE_DIVIDER_WIDTH = 2;
+
+/**
+ * Rest width of the header **Scrollbar spacer** when the body overflows
+ * vertically. Must match `$scrollbar-default-size` in `styles/_scrollbars.scss`.
+ * Hover (12px) is intentionally not tracked.
+ */
+export const SCROLLBAR_SPACER_WIDTH = 10;
+
 /**
  * Width change (in px) applied per Arrow key press when a resize handle is
  * focused.

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

@@ -3,6 +3,7 @@ import { DsSkeletonText } from '../../ds-skeleton';
 import { DsTableHeaderSelectableCell } from '../components/ds-table-header-selectable-cell';
 import { DsTableRowExpandableCell } from '../components/ds-table-row-expandable-cell';
 import { DsTableRowSelectableCell } from '../components/ds-table-row-selectable-cell';
+import { resolveUtilityColumnWidth } from './column-size';
 import {
 	EXPANDER_COLUMN_ID,
 	EXPANDER_COLUMN_WIDTH,
@@ -19,6 +20,9 @@ export type GetAugmentedColumnsOptions = {
 	reorderable: boolean;
 	virtualized: boolean;
 	showSelectAllCheckbox: boolean;
+	selectableColumnWidth?: number;
+	expandableColumnWidth?: number;
+	reorderableColumnWidth?: number;
 };
 
 const EXPLICIT_SIZE_META = { hasExplicitSize: true } as const;
@@ -41,6 +45,13 @@ const stampExplicitSize = <TData, TValue>(columns: ColumnDef<TData, TValue>[]):
 		return { ...column, meta: { ...column.meta, ...EXPLICIT_SIZE_META } };
 	});
 
+/** Pin min/max so the table-wide resize `minSize` cannot stretch this column. */
+const pinUtilityColumnSize = (width: number) => ({
+	size: width,
+	minSize: width,
+	maxSize: width,
+});
+
 /**
  * Prepends the builtin select / expander / reorder columns when those features
  * are on. Reorder is omitted for virtualized tables. Unshift order yields
@@ -48,19 +59,24 @@ const stampExplicitSize = <TData, TValue>(columns: ColumnDef<TData, TValue>[]):
  */
 export const getAugmentedColumns = <TData, TValue>(
 	columns: ColumnDef<TData, TValue>[],
-	{ selectable, expandable, reorderable, virtualized, showSelectAllCheckbox }: GetAugmentedColumnsOptions,
+	{
+		selectable,
+		expandable,
+		reorderable,
+		virtualized,
+		showSelectAllCheckbox,
+		selectableColumnWidth,
+		expandableColumnWidth,
+		reorderableColumnWidth,
+	}: GetAugmentedColumnsOptions,
 ): ColumnDef<TData, TValue>[] => {
 	const augmentedColumns: ColumnDef<TData, TValue>[] = stampExplicitSize(columns);
 
 	if (selectable) {
+		const width = resolveUtilityColumnWidth(selectableColumnWidth, SELECT_COLUMN_WIDTH);
 		augmentedColumns.unshift({
 			id: SELECT_COLUMN_ID,
-			size: SELECT_COLUMN_WIDTH,
-			// Pin min/max to the fixed width: `enableResizing: false` blocks the
-			// handle but not the table-wide resize `minSize`, which would otherwise
-			// stretch this column.
-			minSize: SELECT_COLUMN_WIDTH,
-			maxSize: SELECT_COLUMN_WIDTH,
+			...pinUtilityColumnSize(width),
 			enableSorting: false,
 			enableResizing: false,
 			meta: EXPLICIT_SIZE_META,
@@ -70,11 +86,10 @@ export const getAugmentedColumns = <TData, TValue>(
 	}
 
 	if (expandable) {
+		const width = resolveUtilityColumnWidth(expandableColumnWidth, EXPANDER_COLUMN_WIDTH);
 		augmentedColumns.unshift({
 			id: EXPANDER_COLUMN_ID,
-			size: EXPANDER_COLUMN_WIDTH,
-			minSize: EXPANDER_COLUMN_WIDTH,
-			maxSize: EXPANDER_COLUMN_WIDTH,
+			...pinUtilityColumnSize(width),
 			enableSorting: false,
 			enableResizing: false,
 			meta: EXPLICIT_SIZE_META,
@@ -84,13 +99,12 @@ export const getAugmentedColumns = <TData, TValue>(
 	}
 
 	if (reorderable && !virtualized) {
+		const width = resolveUtilityColumnWidth(reorderableColumnWidth, REORDER_COLUMN_WIDTH);
 		// Cell is rendered inline by DsTableRow when it encounters REORDER_COLUMN_ID,
 		// since the drag handle needs row-level useSortable state.
 		augmentedColumns.unshift({
 			id: REORDER_COLUMN_ID,
-			size: REORDER_COLUMN_WIDTH,
-			minSize: REORDER_COLUMN_WIDTH,
-			maxSize: REORDER_COLUMN_WIDTH,
+			...pinUtilityColumnSize(width),
 			enableSorting: false,
 			enableResizing: false,
 			meta: EXPLICIT_SIZE_META,

package/src/components/ds-table/utils/table-columns.unit.test.ts

@@ -100,6 +100,50 @@ describe('getAugmentedColumns', () => {
 		}
 	});
 
+	it('pins custom utility column widths and ignores them when the feature is off', () => {
+		const columns = getAugmentedColumns([nameColumn], {
+			...noFeatures,
+			selectable: true,
+			expandable: true,
+			reorderable: true,
+			selectableColumnWidth: 48,
+			expandableColumnWidth: 40,
+			reorderableColumnWidth: 80,
+		});
+		const boundsById = new Map(columns.map((column) => [column.id, column]));
+
+		expect(boundsById.get(SELECT_COLUMN_ID)?.size).toBe(48);
+		expect(boundsById.get(SELECT_COLUMN_ID)?.minSize).toBe(48);
+		expect(boundsById.get(SELECT_COLUMN_ID)?.maxSize).toBe(48);
+		expect(boundsById.get(EXPANDER_COLUMN_ID)?.size).toBe(40);
+		expect(boundsById.get(EXPANDER_COLUMN_ID)?.minSize).toBe(40);
+		expect(boundsById.get(EXPANDER_COLUMN_ID)?.maxSize).toBe(40);
+		expect(boundsById.get(REORDER_COLUMN_ID)?.size).toBe(80);
+		expect(boundsById.get(REORDER_COLUMN_ID)?.minSize).toBe(80);
+		expect(boundsById.get(REORDER_COLUMN_ID)?.maxSize).toBe(80);
+
+		expect(
+			columnIds(getAugmentedColumns([nameColumn], { ...noFeatures, selectableColumnWidth: 48 })),
+		).toEqual(['name']);
+	});
+
+	it('falls back to the default width when the custom width is invalid', () => {
+		const columns = getAugmentedColumns([nameColumn], {
+			...noFeatures,
+			selectable: true,
+			expandable: true,
+			reorderable: true,
+			selectableColumnWidth: 0,
+			expandableColumnWidth: Number.NaN,
+			reorderableColumnWidth: -10,
+		});
+		const boundsById = new Map(columns.map((column) => [column.id, column]));
+
+		expect(boundsById.get(SELECT_COLUMN_ID)?.size).toBe(SELECT_COLUMN_WIDTH);
+		expect(boundsById.get(EXPANDER_COLUMN_ID)?.size).toBe(EXPANDER_COLUMN_WIDTH);
+		expect(boundsById.get(REORDER_COLUMN_ID)?.size).toBe(REORDER_COLUMN_WIDTH);
+	});
+
 	it('stamps hasExplicitSize on authored leaves and builtins, not on unsized leaves', () => {
 		const columns = getAugmentedColumns(
 			[