@drivenets/design-system 0.18.0 → 0.18.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@drivenets/design-system",
-  "version": "0.18.0",
+  "version": "0.18.1",
   "license": "Apache-2.0",
   "type": "module",
   "types": "./dist/index.d.cts",
@@ -106,8 +106,8 @@
     "vitest": "^4.1.10",
     "vitest-browser-react": "^2.1.0",
     "zod": "^4.4.3",
-    "@drivenets/eslint-plugin-internal": "0.0.0",
-    "@drivenets/vite-plugin-design-system": "0.0.11"
+    "@drivenets/vite-plugin-design-system": "0.0.11",
+    "@drivenets/eslint-plugin-internal": "0.0.0"
   },
   "scripts": {
     "start": "storybook dev -p 6006",

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;