@drivenets/design-system 0.17.0 → 0.18.1

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

@@ -0,0 +1,119 @@
+import type { ColumnDef } from '@tanstack/react-table';
+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 {
+	EXPANDER_COLUMN_ID,
+	EXPANDER_COLUMN_WIDTH,
+	REORDER_COLUMN_ID,
+	REORDER_COLUMN_WIDTH,
+	SELECT_COLUMN_ID,
+	SELECT_COLUMN_WIDTH,
+	SKELETON_ROW_COUNT,
+} from './constants';
+
+export type GetAugmentedColumnsOptions = {
+	selectable: boolean;
+	expandable: boolean;
+	reorderable: boolean;
+	virtualized: boolean;
+	showSelectAllCheckbox: boolean;
+};
+
+const EXPLICIT_SIZE_META = { hasExplicitSize: true } as const;
+
+/**
+ * Clones leaf defs that authored `size` so `meta.hasExplicitSize` survives
+ * TanStack’s default-size merge. Group defs are cloned only to recurse;
+ * unsized leaves are returned as-is.
+ */
+const stampExplicitSize = <TData, TValue>(columns: ColumnDef<TData, TValue>[]): ColumnDef<TData, TValue>[] =>
+	columns.map((column) => {
+		if ('columns' in column && column.columns) {
+			return { ...column, columns: stampExplicitSize(column.columns) };
+		}
+
+		if (column.size === undefined) {
+			return column;
+		}
+
+		return { ...column, meta: { ...column.meta, ...EXPLICIT_SIZE_META } };
+	});
+
+/**
+ * Prepends the builtin select / expander / reorder columns when those features
+ * are on. Reorder is omitted for virtualized tables. Unshift order yields
+ * visual order: reorder, expander, select, then consumer columns.
+ */
+export const getAugmentedColumns = <TData, TValue>(
+	columns: ColumnDef<TData, TValue>[],
+	{ selectable, expandable, reorderable, virtualized, showSelectAllCheckbox }: GetAugmentedColumnsOptions,
+): ColumnDef<TData, TValue>[] => {
+	const augmentedColumns: ColumnDef<TData, TValue>[] = stampExplicitSize(columns);
+
+	if (selectable) {
+		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,
+			enableSorting: false,
+			enableResizing: false,
+			meta: EXPLICIT_SIZE_META,
+			header: ({ table }) => (showSelectAllCheckbox ? <DsTableHeaderSelectableCell table={table} /> : null),
+			cell: ({ row }) => <DsTableRowSelectableCell row={row} />,
+		});
+	}
+
+	if (expandable) {
+		augmentedColumns.unshift({
+			id: EXPANDER_COLUMN_ID,
+			size: EXPANDER_COLUMN_WIDTH,
+			minSize: EXPANDER_COLUMN_WIDTH,
+			maxSize: EXPANDER_COLUMN_WIDTH,
+			enableSorting: false,
+			enableResizing: false,
+			meta: EXPLICIT_SIZE_META,
+			header: () => null,
+			cell: ({ row }) => (row.getCanExpand() ? <DsTableRowExpandableCell row={row} /> : null),
+		});
+	}
+
+	if (reorderable && !virtualized) {
+		// 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,
+			enableSorting: false,
+			enableResizing: false,
+			meta: EXPLICIT_SIZE_META,
+			header: 'Order',
+			cell: () => null,
+		});
+	}
+
+	return augmentedColumns;
+};
+
+/**
+ * Replaces each leaf `cell` with `loadingCell` (or a default text skeleton).
+ * Group columns are cloned with the same transform applied to their children.
+ */
+export const toSkeletonColumns = <TData, TValue>(
+	columns: ColumnDef<TData, TValue>[],
+): ColumnDef<TData, TValue>[] =>
+	columns.map((column) =>
+		'columns' in column && column.columns
+			? { ...column, columns: toSkeletonColumns(column.columns) }
+			: { ...column, cell: column.loadingCell ?? (() => <DsSkeletonText width="60%" />) },
+	);
+
+export const createSkeletonRows = <TData extends { id: string }>(): TData[] =>
+	Array.from({ length: SKELETON_ROW_COUNT }, (_, i) => ({ id: `ds-table-skeleton-${String(i)}` }) as TData);

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

@@ -0,0 +1,199 @@
+import { describe, expect, it } from 'vitest';
+import type { ColumnDef } from '@tanstack/react-table';
+import { createSkeletonRows, getAugmentedColumns, toSkeletonColumns } from './table-columns';
+import {
+	EXPANDER_COLUMN_ID,
+	EXPANDER_COLUMN_WIDTH,
+	REORDER_COLUMN_ID,
+	REORDER_COLUMN_WIDTH,
+	SELECT_COLUMN_ID,
+	SELECT_COLUMN_WIDTH,
+	SKELETON_ROW_COUNT,
+} from './constants';
+
+type Row = { id: string; name?: string };
+
+const nameColumn: ColumnDef<Row> = { id: 'name', accessorKey: 'name' };
+
+const noFeatures = {
+	selectable: false,
+	expandable: false,
+	reorderable: false,
+	virtualized: false,
+	showSelectAllCheckbox: true,
+} as const;
+
+const columnIds = (columns: ColumnDef<Row>[]) => columns.map((column) => column.id);
+
+describe('getAugmentedColumns', () => {
+	it('returns consumer columns unchanged when no features are on', () => {
+		expect(columnIds(getAugmentedColumns([nameColumn], noFeatures))).toEqual(['name']);
+	});
+
+	it('prepends builtins in visual order: reorder, expander, select, then consumer columns', () => {
+		expect(
+			columnIds(
+				getAugmentedColumns([nameColumn], {
+					...noFeatures,
+					selectable: true,
+					expandable: true,
+					reorderable: true,
+				}),
+			),
+		).toEqual([REORDER_COLUMN_ID, EXPANDER_COLUMN_ID, SELECT_COLUMN_ID, 'name']);
+	});
+
+	it('omits select and expander when those flags are falsy', () => {
+		expect(columnIds(getAugmentedColumns([nameColumn], { ...noFeatures, reorderable: true }))).toEqual([
+			REORDER_COLUMN_ID,
+			'name',
+		]);
+	});
+
+	it('omits reorder when the table is virtualized', () => {
+		expect(
+			columnIds(
+				getAugmentedColumns([nameColumn], {
+					...noFeatures,
+					selectable: true,
+					expandable: true,
+					reorderable: true,
+					virtualized: true,
+				}),
+			),
+		).toEqual([EXPANDER_COLUMN_ID, SELECT_COLUMN_ID, 'name']);
+	});
+
+	it('disables sorting and resizing on builtin columns', () => {
+		const columns = getAugmentedColumns([nameColumn], {
+			...noFeatures,
+			selectable: true,
+			expandable: true,
+			reorderable: true,
+		});
+
+		for (const column of columns.slice(0, 3)) {
+			expect(column.enableSorting).toBe(false);
+			expect(column.enableResizing).toBe(false);
+		}
+	});
+
+	it('pins builtin column min/max to their fixed width so the resize minimum cannot stretch them', () => {
+		const columns = getAugmentedColumns([nameColumn], {
+			...noFeatures,
+			selectable: true,
+			expandable: true,
+			reorderable: true,
+		});
+
+		const boundsById = new Map(columns.map((column) => [column.id, column]));
+
+		for (const [id, width] of [
+			[SELECT_COLUMN_ID, SELECT_COLUMN_WIDTH],
+			[EXPANDER_COLUMN_ID, EXPANDER_COLUMN_WIDTH],
+			[REORDER_COLUMN_ID, REORDER_COLUMN_WIDTH],
+		] as const) {
+			const column = boundsById.get(id);
+			expect(column?.size).toBe(width);
+			expect(column?.minSize).toBe(width);
+			expect(column?.maxSize).toBe(width);
+		}
+	});
+
+	it('stamps hasExplicitSize on authored leaves and builtins, not on unsized leaves', () => {
+		const columns = getAugmentedColumns(
+			[
+				{ id: 'name', accessorKey: 'name', size: 150 },
+				{ id: 'age', accessorKey: 'age' },
+			],
+			{
+				...noFeatures,
+				selectable: true,
+				expandable: true,
+				reorderable: true,
+			},
+		);
+		const byId = new Map(columns.map((column) => [column.id, column]));
+
+		expect(byId.get('name')?.meta?.hasExplicitSize).toBe(true);
+		expect(byId.get('age')?.meta?.hasExplicitSize).toBeUndefined();
+		expect(byId.get(SELECT_COLUMN_ID)?.meta?.hasExplicitSize).toBe(true);
+		expect(byId.get(EXPANDER_COLUMN_ID)?.meta?.hasExplicitSize).toBe(true);
+		expect(byId.get(REORDER_COLUMN_ID)?.meta?.hasExplicitSize).toBe(true);
+	});
+
+	it('stamps hasExplicitSize on nested authored leaves and preserves group meta', () => {
+		const columns = getAugmentedColumns(
+			[
+				{
+					id: 'identity',
+					header: 'Identity',
+					meta: { group: { collapsible: true } },
+					columns: [{ id: 'firstName', size: 150 }, { id: 'lastName' }],
+				},
+			],
+			noFeatures,
+		);
+		const group = columns[0];
+		const nested = group && 'columns' in group ? group.columns : undefined;
+
+		expect(group?.meta?.group).toEqual({ collapsible: true });
+		expect(nested?.[0]?.meta?.hasExplicitSize).toBe(true);
+		expect(nested?.[1]?.meta?.hasExplicitSize).toBeUndefined();
+	});
+
+	it('does not mutate the caller’s column defs', () => {
+		const leaf: ColumnDef<Row> = { id: 'name', accessorKey: 'name', size: 150 };
+
+		getAugmentedColumns([leaf], noFeatures);
+
+		expect(leaf.meta).toBeUndefined();
+	});
+});
+
+describe('toSkeletonColumns', () => {
+	it('replaces a leaf cell with loadingCell when provided', () => {
+		const loadingCell = () => 'loading';
+		const result = toSkeletonColumns<Row, unknown>([{ id: 'name', cell: () => 'name', loadingCell }])[0];
+
+		expect(result?.cell).toBe(loadingCell);
+	});
+
+	it('replaces a leaf cell with a default skeleton when loadingCell is omitted', () => {
+		const originalCell = () => 'name';
+		const result = toSkeletonColumns<Row, unknown>([{ id: 'name', cell: originalCell }])[0];
+
+		expect(result?.cell).not.toBe(originalCell);
+		expect(result?.cell).toBeTypeOf('function');
+	});
+
+	it('recurses into group columns', () => {
+		const loadingCell = () => 'loading';
+		const leafCell = () => 'leaf';
+		const group = toSkeletonColumns<Row, unknown>([
+			{
+				id: 'group',
+				columns: [
+					{ id: 'a', cell: leafCell },
+					{ id: 'b', cell: leafCell, loadingCell },
+				],
+			},
+		])[0];
+
+		const nested = group && 'columns' in group ? group.columns : undefined;
+
+		expect(nested?.[0]?.cell).not.toBe(leafCell);
+		expect(nested?.[1]?.cell).toBe(loadingCell);
+	});
+});
+
+describe('createSkeletonRows', () => {
+	it('returns placeholder rows with stable skeleton ids', () => {
+		const rows = createSkeletonRows<Row>();
+
+		expect(rows).toHaveLength(SKELETON_ROW_COUNT);
+		expect(rows.map((row) => row.id)).toEqual(
+			Array.from({ length: SKELETON_ROW_COUNT }, (_, i) => `ds-table-skeleton-${String(i)}`),
+		);
+	});
+});

package/src/components/ds-tag/ds-tag.figma.ts

@@ -0,0 +1,51 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=36566-107407
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-tag
+// component=DsTag
+//
+// Figma "Type" maps to code `variant`, "Size" to `size`, "State" to the `selected`/`disabled`
+// booleans (hover/focus are interaction states with no code prop). Figma's `Type=include-exclude`
+// is a single variant backed by an internal, non-exposed include/exclude sub-toggle, so it can
+// only be surfaced as one code value — it maps to `variant="include"`; switch to `variant="exclude"`
+// for the exclude case. `label` is content, pulled from the tag text when present, otherwise a
+// placeholder; `value` (required only for `key-value`) is emitted as a placeholder.
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+const variant =
+	instance.getEnum('Type', {
+		default: 'default',
+		'include-exclude': 'include',
+		'key-value': 'key-value',
+	}) ?? 'default';
+
+const size = instance.getEnum('Size', { medium: 'medium', small: 'small' }) ?? 'medium';
+
+const state = instance.getEnum('State', {
+	default: 'default',
+	hover: 'hover',
+	focus: 'focus',
+	selected: 'selected',
+	disabled: 'disabled',
+});
+
+const labelNode = instance.findText('Tag-name', { traverseInstances: true });
+const label = labelNode.type === 'TEXT' ? labelNode.textContent : 'Label';
+
+const attrs = [
+	`label="${label}"`,
+	variant !== 'default' ? `variant="${variant}"` : '',
+	variant === 'key-value' ? 'value="Value"' : '',
+	size === 'small' ? 'size="small"' : '',
+	state === 'selected' ? 'selected' : '',
+	state === 'disabled' ? 'disabled' : '',
+]
+	.filter(Boolean)
+	.join(' ');
+
+export default {
+	example: figma.code`<DsTag ${attrs} />`,
+	imports: ["import { DsTag } from '@drivenets/design-system';"],
+	id: 'ds-tag',
+	metadata: { nestable: true },
+} satisfies figma.Template;

package/src/components/ds-tag-filter/ds-tag-filter.figma.ts

@@ -0,0 +1,16 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=40298-1117
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-tag-filter
+// component=DsTagFilter
+//
+// Figma's `Type` variant (less/all) maps to the component's internal `expanded` state (driven by
+// useTagOverflowCalculation, surfaced only via `onExpand`) — there is no settable code prop, so it
+// is intentionally not represented. `items` is content, not derivable from Figma, so a placeholder
+// array is emitted for the developer to fill in.
+import figma from 'figma';
+
+export default {
+	example: figma.code`<DsTagFilter items={[{ id: '1', label: 'Status: Active' }, { id: '2', label: 'Version: 1.0.0' }]} />`,
+	imports: ["import { DsTagFilter } from '@drivenets/design-system';"],
+	id: 'ds-tag-filter',
+	metadata: { nestable: true },
+} satisfies figma.Template;

package/src/components/ds-tag-filter/ds-tag-filter.module.scss

@@ -1,61 +1,33 @@
 .container {
 	display: flex;
-	flex-direction: column;
+	align-items: flex-start;
 	gap: var(--xs);
 	padding: var(--xs) var(--standard);
 	background: var(--background-secondary-hover);
 	border: 1px solid var(--outline-weak);
 	border-radius: var(--3xs);
 	overflow: hidden;
-
-	&.expanded {
-		max-height: none;
-	}
-}
-
-.header {
-	display: flex;
-	align-items: center;
-	width: 100%;
-	gap: var(--xs);
-	flex-shrink: 0;
-}
-
-.headerActions {
-	display: flex;
-	align-items: center;
-	gap: var(--xs);
-	flex-shrink: 0;
-	margin-left: auto;
 }
 
 .tagsArea {
 	display: flex;
 	align-items: center;
-	width: 100%;
+	flex: 1;
+	min-width: 0;
 	gap: var(--xs);
 	flex-wrap: wrap;
 }
 
-.label {
-	color: var(--font-secondary);
-	white-space: nowrap;
-	flex-shrink: 0;
-}
-
-.itemCheckbox {
+.actions {
 	display: flex;
 	align-items: center;
-}
-
-.ghostButtonContent {
-	// TODO: remove once migrated 1.2 button to the ghost with transparent bg
-	background: transparent !important;
+	gap: var(--xs);
+	flex-shrink: 0;
 }
 
 .actionButton {
-	padding: 0;
 	flex-shrink: 0;
+	white-space: nowrap;
 }
 
 .measurementContainer {

package/src/components/ds-tag-filter/ds-tag-filter.tsx

@@ -4,17 +4,12 @@ import classNames from 'classnames';
 import styles from './ds-tag-filter.module.scss';
 import type { DsTagFilterProps, TagFilterItem } from './ds-tag-filter.types';
 import { useTagOverflowCalculation } from './hooks/use-tag-overflow-calculation';
-import { DsTypography } from '../ds-typography';
 import { DsTag, type DsTagProps } from '../ds-tag';
-import { DsButton } from '../ds-button';
+import { DsButtonV3 } from '../ds-button-v3';
 import { DsIcon } from '../ds-icon';
 
 /**
  * Design system TagFilter component
- *
- * A component for displaying active filters as tags with overflow handling.
- * Non-tag elements (label, expand/collapse, clear) sit in a header row.
- * Tags occupy the full width below, wrapping as needed.
  */
 const DsTagFilter = ({
 	items,
@@ -27,22 +22,17 @@ const DsTagFilter = ({
 	onExpand,
 }: DsTagFilterProps) => {
 	const [expanded, setExpanded] = useState(false);
-	const containerRef = useRef<HTMLDivElement>(null);
+	const tagsAreaRef = useRef<HTMLDivElement>(null);
 	const measurementRef = useRef<HTMLDivElement>(null);
 
 	const { visibleTagCount, hasOverflow } = useTagOverflowCalculation({
-		containerRef,
+		tagsAreaRef,
 		measurementRef,
 		totalItems: items.length,
 		expanded,
 	});
 
-	const {
-		label = 'Filtered by:',
-		clearButton = 'Clear all filters',
-		showMore = 'Show more',
-		showLess = 'Show less',
-	} = locale;
+	const { clearButton = 'Clear all filters', showMore = 'Show more', showLess = 'Show less' } = locale;
 
 	const visibleTags = expanded ? items : items.slice(0, visibleTagCount);
 	const hiddenCount = items.length - visibleTagCount;
@@ -79,54 +69,41 @@ const DsTagFilter = ({
 		</div>
 	);
 
+	const toggleLabel = expanded ? showLess : showMore;
+
 	return (
 		<>
-			<div
-				ref={containerRef}
-				className={classNames(styles.container, expanded && styles.expanded, className)}
-				style={style}
-			>
-				<div className={styles.header}>
-					{label && (
-						<DsTypography variant="body-sm-reg" className={styles.label}>
-							{label}
-						</DsTypography>
-					)}
+			<div className={classNames(styles.container, className)} style={style}>
+				<div ref={tagsAreaRef} className={styles.tagsArea} aria-live="polite">
+					{visibleTags.map((item) => renderTag(item))}
+				</div>
 
-					<div className={styles.headerActions}>
-						{hasOverflow && (
-							<DsButton
-								design="v1.2"
-								buttonType="tertiary"
-								variant="ghost"
-								className={styles.actionButton}
-								contentClassName={styles.ghostButtonContent}
-								size="small"
-								onClick={handleExpandToggle}
-							>
-								<DsIcon icon={expanded ? 'keyboard_arrow_up' : 'keyboard_arrow_down'} />
-								{expanded ? showLess : `${showMore} (${String(hiddenCount)})`}
-							</DsButton>
-						)}
+				<div className={styles.actions}>
+					{hasOverflow && (
+						<DsButtonV3
+							variant="tertiary"
+							size="small"
+							className={styles.actionButton}
+							aria-expanded={expanded}
+							onClick={handleExpandToggle}
+						>
+							{`${toggleLabel} (${String(hiddenCount)})`}
+							<DsIcon icon={expanded ? 'keyboard_arrow_up' : 'keyboard_arrow_down'} size="tiny" aria-hidden />
+						</DsButtonV3>
+					)}
 
-						{onClearAll && (
-							<DsButton
-								design="v1.2"
-								buttonType="tertiary"
-								variant="ghost"
-								className={styles.actionButton}
-								contentClassName={styles.ghostButtonContent}
-								size="small"
-								onClick={onClearAll}
-							>
-								<DsIcon icon="close" />
-								{clearButton}
-							</DsButton>
-						)}
-					</div>
+					{onClearAll && (
+						<DsButtonV3
+							variant="tertiary"
+							size="small"
+							icon="close"
+							className={styles.actionButton}
+							onClick={onClearAll}
+						>
+							{clearButton}
+						</DsButtonV3>
+					)}
 				</div>
-
-				<div className={styles.tagsArea}>{visibleTags.map((item) => renderTag(item))}</div>
 			</div>
 			{createPortal(measurementContainer, document.body)}
 		</>

package/src/components/ds-tag-filter/ds-tag-filter.types.ts

@@ -40,7 +40,8 @@ export interface DsTagFilterProps {
 	 */
 	locale?: {
 		/**
-		 * Heading label shown above the tag list (e.g., "Filters").
+		 * @deprecated No longer rendered. Retained for backwards compatibility;
+		 * Will be removed in the future.
 		 */
 		label?: string;
 		/**

package/src/components/ds-tag-filter/hooks/use-tag-overflow-calculation.ts

@@ -2,7 +2,7 @@ import { type RefObject, useCallback, useLayoutEffect, useState } from 'react';
 import { fitTagsInRow, getContainerAvailableWidth, getElementMeasurements } from '../utils';
 
 interface UseTagOverflowCalculationOptions {
-	containerRef: RefObject<HTMLDivElement | null>;
+	tagsAreaRef: RefObject<HTMLDivElement | null>;
 	measurementRef: RefObject<HTMLDivElement | null>;
 	totalItems: number;
 	expanded: boolean;
@@ -14,13 +14,10 @@ interface UseTagOverflowCalculationResult {
 }
 
 /**
- * Custom hook to calculate how many tags fit in the available container width.
- *
- * Tags occupy the full container width. Non-tag elements (label, clear button,
- * expand control) live in a separate header row and don't affect the calculation.
+ * Custom hook to calculate how many tags fit on the first row of the tags-area.
  */
 export const useTagOverflowCalculation = ({
-	containerRef,
+	tagsAreaRef,
 	measurementRef,
 	totalItems,
 	expanded,
@@ -31,11 +28,11 @@ export const useTagOverflowCalculation = ({
 	});
 
 	const calculateLayout = useCallback(() => {
-		if (!containerRef.current || !measurementRef.current) {
+		if (!tagsAreaRef.current || !measurementRef.current) {
 			return;
 		}
 
-		const container = containerRef.current;
+		const tagsArea = tagsAreaRef.current;
 		const measurementContainer = measurementRef.current;
 
 		const { tagWidths, gap } = getElementMeasurements(measurementContainer);
@@ -45,13 +42,13 @@ export const useTagOverflowCalculation = ({
 			return;
 		}
 
-		const containerWidth = getContainerAvailableWidth(container);
+		const availableWidth = getContainerAvailableWidth(tagsArea);
 
-		const { count } = fitTagsInRow(tagWidths, containerWidth, gap);
+		const { count } = fitTagsInRow(tagWidths, availableWidth, gap);
 		const hasOverflow = count < tagWidths.length;
 
 		setState({ visibleTagCount: count, hasOverflow });
-	}, [containerRef, measurementRef]);
+	}, [tagsAreaRef, measurementRef]);
 
 	useLayoutEffect(() => {
 		const rafId = requestAnimationFrame(() => {
@@ -64,21 +61,19 @@ export const useTagOverflowCalculation = ({
 			});
 		});
 
-		if (containerRef.current) {
-			resizeObserver.observe(containerRef.current);
+		if (tagsAreaRef.current) {
+			resizeObserver.observe(tagsAreaRef.current);
 		}
 
 		return () => {
 			cancelAnimationFrame(rafId);
 			resizeObserver.disconnect();
 		};
-	}, [containerRef, measurementRef, totalItems, expanded, calculateLayout]);
+	}, [tagsAreaRef, measurementRef, totalItems, expanded, calculateLayout]);
 
+	// While expanded, keep hasOverflow true so a width edge case can't hide the collapse control.
 	if (expanded) {
-		return {
-			visibleTagCount: totalItems,
-			hasOverflow: true,
-		};
+		return { ...state, hasOverflow: true };
 	}
 
 	return state;