feat(design-system): put measurment wrapper in portal to avoid duplicated dom [AR-41960]

Author: mmurawski-dn

.changeset/cyan-kids-taste.md

@@ -0,0 +1,8 @@
+---
+'@drivenets/design-system': minor
+---
+
+- Added `DsTag` component
+- Added `DsTagFilter` component
+- Deprecated `DsChip` component
+- Deprecated `DsChipGroup` component

packages/design-system/package.json

@@ -66,7 +66,8 @@
 		"classnames": "^2.5.1"
 	},
 	"peerDependencies": {
-		"react": "^19"
+		"react": "^19",
+		"react-dom": "^19"
 	},
 	"devDependencies": {
 		"@arethetypeswrong/cli": "^0.18.2",
@@ -84,6 +85,7 @@
 		"@tanstack/react-router": "^1.141.2",
 		"@types/eslint-plugin-jsx-a11y": "^6.10.1",
 		"@types/react": "^19.2.7",
+		"@types/react-dom": "^19.2.3",
 		"@vitest/browser": "^4.0.16",
 		"@vitest/browser-playwright": "^4.0.15",
 		"babel-plugin-react-compiler": "^1.0.0",
@@ -97,6 +99,7 @@
 		"postcss-modules": "^6.0.1",
 		"publint": "^0.3.16",
 		"react": "^19.2.3",
+		"react-dom": "^19.2.3",
 		"react-hook-form": "^7.55.0",
 		"rollup-plugin-sass": "^1.15.3",
 		"sass-embedded": "^1.97.0",

packages/design-system/src/components/ds-chip-group/ds-chip-group.stories.tsx

@@ -5,8 +5,8 @@ import type { ChipItem } from './ds-chip-group.types';
 import styles from './ds-chip-group.stories.module.scss';
 
 /**
- * @deprecated This component is deprecated. Use `DsTagGroup` instead.
- * @see {@link ../ds-tag-group/ds-tag-group.stories} for examples of the replacement component.
+ * @deprecated This component is deprecated. Use `DsTagFilter` instead.
+ * @see {@link ../ds-tag-filter/ds-tag-filter.stories} for examples of the replacement component.
  */
 const meta: Meta<typeof DsChipGroup> = {
 	title: 'Design System/Chip Group (Deprecated)',
@@ -16,7 +16,7 @@ const meta: Meta<typeof DsChipGroup> = {
 		docs: {
 			description: {
 				component:
-					'**Deprecated**: This component is deprecated. Please use `DsTagGroup` instead. See the TagGroup stories for the replacement component.',
+					'**Deprecated**: This component is deprecated. Please use `DsTagFilter` instead. See the TagGroup stories for the replacement component.',
 			},
 		},
 	},

packages/design-system/src/components/ds-chip-group/ds-chip-group.tsx

@@ -13,8 +13,8 @@ import { DsButton } from '../ds-button';
 import { DsIcon } from '../ds-icon';
 
 /**
- * @deprecated This component is deprecated. Use `DsTagGroup` instead.
- * @see {@link ../ds-tag-group} for the replacement component.
+ * @deprecated This component is deprecated. Use `DsTagFilter` instead.
+ * @see {@link ../ds-tag-filter} for the replacement component.
  */
 const DsChipGroup: React.FC<DsChipGroupProps> = ({
 	items,

packages/design-system/src/components/ds-chip-group/ds-chip-group.types.ts

@@ -1,8 +1,8 @@
 import type { CSSProperties } from 'react';
 
 /**
- * @deprecated This interface is deprecated. Use `DsTagGroup` types instead.
- * @see {@link ../ds-tag-group} for the replacement types.
+ * @deprecated This interface is deprecated. Use `DsTagFilter` types instead.
+ * @see {@link ../ds-tag-filter} for the replacement types.
  */
 export interface ChipItem {
 	/**
@@ -24,8 +24,8 @@ export interface ChipItem {
 }
 
 /**
- * @deprecated This interface is deprecated. Use `DsTagGroupProps` from `ds-tag-group` instead.
- * @see {@link ../ds-tag-group/ds-tag-group.types} for the replacement interface.
+ * @deprecated This interface is deprecated. Use `DsTagFilterProps` from `ds-tag-filter` instead.
+ * @see {@link ../ds-tag-filter/ds-tag-filter.types} for the replacement interface.
  */
 export interface DsChipGroupProps {
 	/**

packages/design-system/src/components/ds-chip-group/index.ts

@@ -1,10 +1,10 @@
 /**
- * @deprecated DsChipGroup is deprecated. Use DsTagGroup instead.
- * @see {@link ../ds-tag-group} for the replacement component.
+ * @deprecated DsChipGroup is deprecated. Use DsTagFilter instead.
+ * @see {@link ../ds-tag-filter} for the replacement component.
  */
 export { default as DsChipGroup } from './ds-chip-group';
 /**
- * @deprecated These types are deprecated. Use DsTagGroup types instead.
- * @see {@link ../ds-tag-group} for the replacement types.
+ * @deprecated These types are deprecated. Use DsTagFilter types instead.
+ * @see {@link ../ds-tag-filter} for the replacement types.
  */
 export type { DsChipGroupProps, ChipItem } from './ds-chip-group.types';

packages/design-system/src/components/ds-form-control/stories/ds-form-control-input-number.stories.tsx

@@ -77,6 +77,7 @@ const sanityCheck = async (canvasElement: HTMLElement) => {
 
 	// Test typing
 	await userEvent.clear(input);
+	await userEvent.click(input); // ensure focus + caret placement
 	await userEvent.type(input, '25');
 	await waitFor(async () => {
 		await expect(input).toHaveValue('25');

packages/design-system/src/components/ds-tag-filter/ds-tag-filter.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import { useState } from 'react';
-import { expect, userEvent, waitFor, within } from 'storybook/test';
+import { expect, fn, userEvent, waitFor, within } from 'storybook/test';
 import DsTagFilter from './ds-tag-filter';
 import type { TagFilterItem } from './ds-tag-filter.types';
 import styles from './ds-tag-filter.stories.module.scss';
@@ -39,6 +39,10 @@ const meta: Meta<typeof DsTagFilter> = {
 			action: 'select-item',
 			description: 'Callback when item is selected',
 		},
+		onExpand: {
+			action: 'expand',
+			description: 'Callback when expand/collapse is clicked',
+		},
 	},
 };
 
@@ -57,8 +61,8 @@ const sampleFilters: TagFilterItem[] = [
 	{ id: '9', label: 'Version: 000.0001-4' },
 	{ id: '10', label: 'Version: 000.0001-5' },
 	{ id: '11', label: 'Version: 000.0001-6' },
-	{ id: '12', label: 'Last editor: Maren Levin' },
-	{ id: '13', label: 'Last editor: Emery Franci' },
+	{ id: '12', label: 'Last editor: Kevin Levin' },
+	{ id: '13', label: 'Last editor: Emery Dance' },
 ];
 
 /**
@@ -125,7 +129,7 @@ export const Default: Story = {
 			await expect(canvas.getByRole('button', { name: 'Status: Active' })).toBeInTheDocument();
 		});
 
-		await expect(canvas.getAllByText('Filtered by:')[0]).toBeInTheDocument();
+		await expect(canvas.getByText('Filtered by:')).toBeInTheDocument();
 		await expect(canvas.getByRole('button', { name: /Clear all filters/ })).toBeInTheDocument();
 
 		const firstTag = canvas.getByRole('button', { name: 'Status: Active' });
@@ -297,11 +301,13 @@ export const ReadOnly: Story = {
 	play: async ({ canvasElement }) => {
 		const canvas = within(canvasElement);
 
-		// Verify custom label is shown (use getAllByText and take first to avoid measurement container duplicate)
-		await expect(canvas.getAllByText('Applied filters:')[0]).toBeInTheDocument();
+		// Wait for layout calculation to complete and tags to be rendered
+		await waitFor(async () => {
+			await expect(canvas.getByText('Status: Active')).toBeInTheDocument();
+		});
 
-		// Verify filters are visible
-		await expect(canvas.getAllByText('Status: Active')[0]).toBeInTheDocument();
+		// Verify custom label is shown
+		await expect(canvas.getByText('Applied filters:')).toBeInTheDocument();
 
 		// Verify delete buttons are NOT visible (read-only)
 		await expect(canvas.queryByRole('button', { name: 'Delete tag' })).not.toBeInTheDocument();
@@ -402,8 +408,8 @@ export const CustomLocale: Story = {
 			await expect(canvas.getByRole('button', { name: 'Status: Active' })).toBeInTheDocument();
 		});
 
-		// Verify custom label is rendered (use getAllByText and take first to avoid measurement container duplicate)
-		await expect(canvas.getAllByText('Active criteria:')[0]).toBeInTheDocument();
+		// Verify custom label is rendered
+		await expect(canvas.getByText('Active criteria:')).toBeInTheDocument();
 
 		await expect(canvas.getByRole('button', { name: /Reset all/ })).toBeInTheDocument();
 
@@ -412,6 +418,54 @@ export const CustomLocale: Story = {
 	},
 };
 
+/**
+ * Story testing the expand/collapse functionality and onExpand callback.
+ */
+export const ExpandCollapse: Story = {
+	args: {
+		items: sampleFilters,
+		onExpand: fn(),
+	},
+	play: async ({ canvasElement, args }) => {
+		const canvas = within(canvasElement);
+
+		// Wait for layout calculation to complete and overflow tag to appear
+		await waitFor(async () => {
+			await expect(canvas.getByRole('button', { name: /\+\d+ filters?/ })).toBeInTheDocument();
+		});
+
+		const expandButton = canvas.getByRole('button', { name: /\+\d+ filters?/ });
+
+		// Click expand button
+		await userEvent.click(expandButton);
+
+		// Verify onExpand was called with true (expanded)
+		await waitFor(async () => {
+			await expect(args.onExpand).toHaveBeenCalledWith(true);
+		});
+
+		// Verify the button now shows "Collapse"
+		await waitFor(async () => {
+			await expect(canvas.getByRole('button', { name: 'Collapse' })).toBeInTheDocument();
+		});
+
+		const collapseButton = canvas.getByRole('button', { name: 'Collapse' });
+
+		// Click collapse button
+		await userEvent.click(collapseButton);
+
+		// Verify onExpand was called with false (collapsed)
+		await waitFor(async () => {
+			await expect(args.onExpand).toHaveBeenCalledWith(false);
+		});
+
+		// Verify the expand button is back
+		await waitFor(async () => {
+			await expect(canvas.getByRole('button', { name: /\+\d+ filters?/ })).toBeInTheDocument();
+		});
+	},
+};
+
 /**
  * Story showing TagFilter with pre-selected items.
  */