@drivenets/design-system 0.6.1 → 0.7.0

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

@@ -13,7 +13,8 @@ import { DsIcon } from '../ds-icon';
  * Design system TagFilter component
  *
  * A component for displaying active filters as tags with overflow handling.
- * Shows visible tags in up to 2 rows, with the Expand button to show hidden items.
+ * Non-tag elements (label, expand/collapse, clear) sit in a header row.
+ * Tags occupy the full width below, wrapping as needed.
  */
 const DsTagFilter = ({
 	items,
@@ -29,7 +30,7 @@ const DsTagFilter = ({
 	const containerRef = useRef<HTMLDivElement>(null);
 	const measurementRef = useRef<HTMLDivElement>(null);
 
-	const { row1TagCount, row2TagCount, hasOverflow } = useTagOverflowCalculation({
+	const { visibleTagCount, hasOverflow } = useTagOverflowCalculation({
 		containerRef,
 		measurementRef,
 		totalItems: items.length,
@@ -39,23 +40,17 @@ const DsTagFilter = ({
 	const {
 		label = 'Filtered by:',
 		clearButton = 'Clear all filters',
-		hiddenCountPlural = 'filters',
-		hiddenCountSingular = 'filter',
-		collapseTagLabel = 'Collapse',
+		showMore = 'Show more',
+		showLess = 'Show less',
 	} = locale;
 
-	// Split items into row sections
-	const row1Tags = items.slice(0, row1TagCount);
-	const row2Tags = items.slice(row1TagCount, row1TagCount + row2TagCount);
-	const hiddenTags = expanded ? [] : items.slice(row1TagCount + row2TagCount);
+	const visibleTags = expanded ? items : items.slice(0, visibleTagCount);
+	const hiddenCount = items.length - visibleTagCount;
 
 	if (items.length === 0) {
 		return null;
 	}
 
-	const hiddenCount = hiddenTags.length;
-	const hasRow2Content = row2Tags.length > 0 || hasOverflow;
-
 	const renderTag = (item: TagFilterItem) => {
 		const tagProps = item.slotProps?.tag || {};
 
@@ -77,18 +72,8 @@ const DsTagFilter = ({
 		onExpand?.(newExpanded);
 	};
 
-	// Measurement container rendered via portal to keep it outside the component's DOM tree
-	// This prevents Testing Library from finding duplicate elements
-	// We use it to calculate the number of remaining tags to render
 	const measurementContainer = (
 		<div ref={measurementRef} className={styles.measurementContainer} aria-hidden="true">
-			{label && (
-				<span data-measure-label="">
-					<DsTypography variant="body-sm-reg" className={styles.label}>
-						{label}
-					</DsTypography>
-				</span>
-			)}
 			{items.map((item) => (
 				<DsTag
 					key={item.id}
@@ -99,29 +84,9 @@ const DsTagFilter = ({
 					onDelete={onItemDelete ? () => onItemDelete(item) : undefined}
 				/>
 			))}
-			{onClearAll && (
-				<DsButton
-					data-measure-clear=""
-					design="v1.2"
-					buttonType="tertiary"
-					variant="ghost"
-					className={styles.clearButton}
-					contentClassName={styles.clearContent}
-					size="small"
-				>
-					<DsIcon icon="close" />
-					{clearButton}
-				</DsButton>
-			)}
-			<DsTag data-measure-expand="" label="+99 filters" className={styles.expandTag} />
 		</div>
 	);
 
-	/**
-	 * IMPORTANT!
-	 * If you make any changes to this layout (styling, JSX, anything that affects it.)
-	 * please, apply the exact same changes to the "measurementContainer"
-	 */
 	return (
 		<>
 			<div
@@ -129,46 +94,47 @@ const DsTagFilter = ({
 				className={classNames(styles.container, expanded && styles.expanded, className)}
 				style={style}
 			>
-				<div className={styles.row1}>
+				<div className={styles.header}>
 					{label && (
 						<DsTypography variant="body-sm-reg" className={styles.label}>
 							{label}
 						</DsTypography>
 					)}
-					{row1Tags.map((item) => renderTag(item))}
-					{onClearAll && (
-						<DsButton
-							design="v1.2"
-							buttonType="tertiary"
-							variant="ghost"
-							className={styles.clearButton}
-							contentClassName={styles.clearContent}
-							size="small"
-							onClick={onClearAll}
-						>
-							<DsIcon icon="close" />
-							{clearButton}
-						</DsButton>
-					)}
-				</div>
 
-				{hasRow2Content && (
-					<div className={styles.row2}>
-						{row2Tags.map((item) => renderTag(item))}
+					<div className={styles.headerActions}>
 						{hasOverflow && (
-							<DsTag
-								label={
-									expanded
-										? collapseTagLabel
-										: `+${String(hiddenCount)} ${hiddenCount === 1 ? hiddenCountSingular : hiddenCountPlural}`
-								}
-								selected={expanded}
-								className={styles.expandTag}
+							<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>
+						)}
+
+						{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>
-				)}
+				</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

@@ -37,9 +37,8 @@ export interface DsTagFilterProps {
 	locale?: {
 		label?: string;
 		clearButton?: string;
-		collapseTagLabel?: string;
-		hiddenCountSingular?: string;
-		hiddenCountPlural?: string;
+		showMore?: string;
+		showLess?: string;
 	};
 	/**
 	 * Callback when "Clear all" is clicked

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

@@ -9,21 +9,15 @@ interface UseTagOverflowCalculationOptions {
 }
 
 interface UseTagOverflowCalculationResult {
-	row1TagCount: number;
-	row2TagCount: number;
+	visibleTagCount: number;
 	hasOverflow: boolean;
 }
 
-// Extra space needed per row for animated delete button that appears on hover
-const TAG_HOVER_BUTTON_SPACE = 20;
-
 /**
- * Custom hook to calculate how many tags can fit in 2 rows.
- *
- * Row 1: Label + Tags + Clear Button
- * Row 2: Remaining Tags + Expand Tag (only if overflow)
+ * Custom hook to calculate how many tags fit in the available container width.
  *
- * Measures actual element widths to determine optimal placement.
+ * 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.
  */
 export const useTagOverflowCalculation = ({
 	containerRef,
@@ -32,8 +26,7 @@ export const useTagOverflowCalculation = ({
 	expanded,
 }: UseTagOverflowCalculationOptions): UseTagOverflowCalculationResult => {
 	const [state, setState] = useState<UseTagOverflowCalculationResult>({
-		row1TagCount: 0,
-		row2TagCount: 0,
+		visibleTagCount: 0,
 		hasOverflow: false,
 	});
 
@@ -45,63 +38,22 @@ export const useTagOverflowCalculation = ({
 		const container = containerRef.current;
 		const measurementContainer = measurementRef.current;
 
-		const { tagWidths, labelWidth, clearButtonWidth, expandTagWidth, gap } =
-			getElementMeasurements(measurementContainer);
+		const { tagWidths, gap } = getElementMeasurements(measurementContainer);
 
 		if (tagWidths.length === 0) {
-			setState({ row1TagCount: 0, row2TagCount: 0, hasOverflow: false });
+			setState({ visibleTagCount: 0, hasOverflow: false });
 			return;
 		}
 
 		const containerWidth = getContainerAvailableWidth(container);
 
-		// Calculate Row 1 available space (Label + Tags + Clear Button)
-		const row1AvailableWidth = containerWidth - labelWidth - clearButtonWidth - TAG_HOVER_BUTTON_SPACE;
-
-		// Calculate how many tags fit in Row 1
-		const row1Result = fitTagsInRow(tagWidths, row1AvailableWidth, gap);
-		const remainingTags = tagWidths.slice(row1Result.count);
-
-		if (remainingTags.length === 0) {
-			// All tags fit in Row 1, no overflow
-			setState({ row1TagCount: row1Result.count, row2TagCount: 0, hasOverflow: false });
-			return;
-		}
-
-		// Calculate with expand tag reserved (pessimistic)
-		const row2AvailableWithExpand = containerWidth - expandTagWidth - TAG_HOVER_BUTTON_SPACE;
-		const row2WithExpandResult = fitTagsInRow(remainingTags, row2AvailableWithExpand, gap);
-
-		// Check if there's overflow (more remaining tags than fit in Row 2 with expand)
-		const overflowExists = remainingTags.length > row2WithExpandResult.count;
+		const { count } = fitTagsInRow(tagWidths, containerWidth, gap);
+		const hasOverflow = count < tagWidths.length;
 
-		if (overflowExists) {
-			// Use the count with expand tag space reserved
-			setState({
-				row1TagCount: row1Result.count,
-				row2TagCount: row2WithExpandResult.count,
-				hasOverflow: true,
-			});
-		} else {
-			// No overflow - recalculate Row 2 without reserving expand tag space
-			const row2AvailableWithoutExpand = containerWidth - TAG_HOVER_BUTTON_SPACE;
-			const row2FullResult = fitTagsInRow(remainingTags, row2AvailableWithoutExpand, gap);
-
-			// Double-check: if even without expand tag we can't fit all, we have overflow
-			if (row2FullResult.count < remainingTags.length) {
-				setState({
-					row1TagCount: row1Result.count,
-					row2TagCount: row2WithExpandResult.count,
-					hasOverflow: true,
-				});
-			} else {
-				setState({ row1TagCount: row1Result.count, row2TagCount: row2FullResult.count, hasOverflow: false });
-			}
-		}
+		setState({ visibleTagCount: count, hasOverflow });
 	}, [containerRef, measurementRef]);
 
 	useLayoutEffect(() => {
-		// Use requestAnimationFrame to ensure DOM is fully laid out
 		const rafId = requestAnimationFrame(() => {
 			calculateLayout();
 		});
@@ -122,12 +74,10 @@ export const useTagOverflowCalculation = ({
 		};
 	}, [containerRef, measurementRef, totalItems, expanded, calculateLayout]);
 
-	// When expanded, show all tags
 	if (expanded) {
 		return {
-			row1TagCount: state.row1TagCount,
-			row2TagCount: totalItems - state.row1TagCount,
-			hasOverflow: true, // Keep expand button visible to allow collapse
+			visibleTagCount: totalItems,
+			hasOverflow: true,
 		};
 	}
 

package/src/components/ds-tag-filter/utils.test.ts

@@ -212,26 +212,15 @@ describe('Tag Filter Utils', () => {
 			vi.restoreAllMocks();
 		});
 
-		it('should measure all elements with default gap', () => {
-			// Create mock elements
+		it('should measure tag widths and gap', () => {
 			const tag1 = document.createElement('div');
 			tag1.setAttribute('data-measure-tag', '');
 			const tag2 = document.createElement('div');
 			tag2.setAttribute('data-measure-tag', '');
-			const label = document.createElement('div');
-			label.setAttribute('data-measure-label', '');
-			const clearButton = document.createElement('div');
-			clearButton.setAttribute('data-measure-clear', '');
-			const expandTag = document.createElement('div');
-			expandTag.setAttribute('data-measure-expand', '');
 
 			mockContainer.appendChild(tag1);
 			mockContainer.appendChild(tag2);
-			mockContainer.appendChild(label);
-			mockContainer.appendChild(clearButton);
-			mockContainer.appendChild(expandTag);
 
-			// Mock getBoundingClientRect for each element
 			vi.spyOn(tag1, 'getBoundingClientRect').mockReturnValue({
 				width: 80,
 				height: 30,
@@ -256,42 +245,6 @@ describe('Tag Filter Utils', () => {
 				toJSON: () => ({}),
 			});
 
-			vi.spyOn(label, 'getBoundingClientRect').mockReturnValue({
-				width: 60,
-				height: 30,
-				top: 0,
-				left: 0,
-				bottom: 30,
-				right: 60,
-				x: 0,
-				y: 0,
-				toJSON: () => ({}),
-			});
-
-			vi.spyOn(clearButton, 'getBoundingClientRect').mockReturnValue({
-				width: 40,
-				height: 30,
-				top: 0,
-				left: 0,
-				bottom: 30,
-				right: 40,
-				x: 0,
-				y: 0,
-				toJSON: () => ({}),
-			});
-
-			vi.spyOn(expandTag, 'getBoundingClientRect').mockReturnValue({
-				width: 100,
-				height: 30,
-				top: 0,
-				left: 0,
-				bottom: 30,
-				right: 100,
-				x: 0,
-				y: 0,
-				toJSON: () => ({}),
-			});
-
 			vi.spyOn(window, 'getComputedStyle').mockReturnValue({
 				gap: '8px',
 			} as CSSStyleDeclaration);
@@ -299,42 +252,9 @@ describe('Tag Filter Utils', () => {
 			const result = getElementMeasurements(mockContainer);
 
 			expect(result.tagWidths).toEqual([80, 90]);
-			expect(result.labelWidth).toBe(68); // 60 + 8
-			expect(result.clearButtonWidth).toBe(48); // 40 + 8
-			expect(result.expandTagWidth).toBe(108); // 100 + 8
 			expect(result.gap).toBe(8);
 		});
 
-		it('should handle missing optional elements', () => {
-			const tag1 = document.createElement('div');
-			tag1.setAttribute('data-measure-tag', '');
-			mockContainer.appendChild(tag1);
-
-			vi.spyOn(tag1, 'getBoundingClientRect').mockReturnValue({
-				width: 80,
-				height: 30,
-				top: 0,
-				left: 0,
-				bottom: 30,
-				right: 80,
-				x: 0,
-				y: 0,
-				toJSON: () => ({}),
-			});
-
-			vi.spyOn(window, 'getComputedStyle').mockReturnValue({
-				gap: '12px',
-			} as CSSStyleDeclaration);
-
-			const result = getElementMeasurements(mockContainer);
-
-			expect(result.tagWidths).toEqual([80]);
-			expect(result.labelWidth).toBe(0); // Missing label
-			expect(result.clearButtonWidth).toBe(0); // Missing clear button
-			expect(result.expandTagWidth).toBe(100); // Fallback width
-			expect(result.gap).toBe(12);
-		});
-
 		it('should use fallback gap when gap is invalid', () => {
 			const tag1 = document.createElement('div');
 			tag1.setAttribute('data-measure-tag', '');
@@ -358,7 +278,7 @@ describe('Tag Filter Utils', () => {
 
 			const result = getElementMeasurements(mockContainer);
 
-			expect(result.gap).toBe(8); // Fallback to 8
+			expect(result.gap).toBe(8);
 		});
 
 		it('should handle no tags present', () => {
@@ -371,31 +291,5 @@ describe('Tag Filter Utils', () => {
 			expect(result.tagWidths).toEqual([]);
 			expect(result.gap).toBe(10);
 		});
-
-		it('should use fallback for expand tag when width is 0', () => {
-			const expandTag = document.createElement('div');
-			expandTag.setAttribute('data-measure-expand', '');
-			mockContainer.appendChild(expandTag);
-
-			vi.spyOn(expandTag, 'getBoundingClientRect').mockReturnValue({
-				width: 0,
-				height: 30,
-				top: 0,
-				left: 0,
-				bottom: 30,
-				right: 0,
-				x: 0,
-				y: 0,
-				toJSON: () => ({}),
-			});
-
-			vi.spyOn(window, 'getComputedStyle').mockReturnValue({
-				gap: '8px',
-			} as CSSStyleDeclaration);
-
-			const result = getElementMeasurements(mockContainer);
-
-			expect(result.expandTagWidth).toBe(8); // 0 + 8 (not using fallback since element exists)
-		});
 	});
 });

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

@@ -5,9 +5,6 @@ export interface FitTagsResult {
 
 export interface ElementMeasurements {
 	tagWidths: number[];
-	labelWidth: number;
-	clearButtonWidth: number;
-	expandTagWidth: number;
 	gap: number;
 }
 
@@ -44,22 +41,15 @@ export function getContainerAvailableWidth(container: HTMLDivElement): number {
 }
 
 /**
- * Measure all relevant elements (tags, label, buttons) inside the measurement container.
+ * Measure tag widths and gap inside the measurement container.
  */
 export function getElementMeasurements(measurementContainer: HTMLDivElement): ElementMeasurements {
 	const tags = Array.from(measurementContainer.querySelectorAll('[data-measure-tag]'));
-	const label = measurementContainer.querySelector('[data-measure-label]');
-	const clearButton = measurementContainer.querySelector('[data-measure-clear]');
-	const expandTag = measurementContainer.querySelector('[data-measure-expand]');
 
 	const computedStyle = getComputedStyle(measurementContainer);
 	const gap = parseFloat(computedStyle.gap) || 8;
 
 	const tagWidths = tags.map((tag) => tag.getBoundingClientRect().width);
-	const labelWidth = label ? label.getBoundingClientRect().width + gap : 0;
-	const clearButtonWidth = clearButton ? clearButton.getBoundingClientRect().width + gap : 0;
-	// Fallback width for expand tag (~100px for "+99 filters" text) if measurement fails
-	const expandTagWidth = expandTag ? expandTag.getBoundingClientRect().width + gap : 100;
 
-	return { tagWidths, labelWidth, clearButtonWidth, expandTagWidth, gap };
+	return { tagWidths, gap };
 }