@drivenets/design-system 0.18.0 → 0.18.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @drivenets/design-system
 
+## 0.18.1
+
+### Patch Changes
+
+- bf09024: Change `DsTagFilter` to match new design.
+
 ## 0.18.0
 
 ### Minor Changes

package/dist/index.cjs

@@ -9058,13 +9058,8 @@ const DsDrawer = Object.assign(DsDrawerRoot, {
 //#region src/components/ds-tag-filter/ds-tag-filter.module.scss
 var ds_tag_filter_module_default = {
 	"actionButton": "pHs_ea_actionButton",
+	"actions": "pHs_ea_actions",
 	"container": "pHs_ea_container",
-	"expanded": "pHs_ea_expanded",
-	"ghostButtonContent": "pHs_ea_ghostButtonContent",
-	"header": "pHs_ea_header",
-	"headerActions": "pHs_ea_headerActions",
-	"itemCheckbox": "pHs_ea_itemCheckbox",
-	"label": "pHs_ea_label",
 	"measurementContainer": "pHs_ea_measurementContainer",
 	"tagsArea": "pHs_ea_tagsArea"
 };
@@ -9114,14 +9109,11 @@ function getElementMeasurements(measurementContainer) {
 //#endregion
 //#region src/components/ds-tag-filter/hooks/use-tag-overflow-calculation.ts
 /**
-* 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.
 */
 const useTagOverflowCalculation = (t0) => {
 	const $ = (0, react_compiler_runtime.c)(15);
-	const { containerRef, measurementRef, totalItems, expanded } = t0;
+	const { tagsAreaRef, measurementRef, totalItems, expanded } = t0;
 	let t1;
 	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
 		t1 = {
@@ -9132,10 +9124,10 @@ const useTagOverflowCalculation = (t0) => {
 	} else t1 = $[0];
 	const [state, setState] = (0, react.useState)(t1);
 	let t2;
-	if ($[1] !== containerRef || $[2] !== measurementRef) {
+	if ($[1] !== measurementRef || $[2] !== tagsAreaRef) {
 		t2 = () => {
-			if (!containerRef.current || !measurementRef.current) return;
-			const container = containerRef.current;
+			if (!tagsAreaRef.current || !measurementRef.current) return;
+			const tagsArea = tagsAreaRef.current;
 			const measurementContainer = measurementRef.current;
 			const { tagWidths, gap } = getElementMeasurements(measurementContainer);
 			if (tagWidths.length === 0) {
@@ -9145,20 +9137,20 @@ const useTagOverflowCalculation = (t0) => {
 				});
 				return;
 			}
-			const { count } = fitTagsInRow(tagWidths, getContainerAvailableWidth(container), gap);
+			const { count } = fitTagsInRow(tagWidths, getContainerAvailableWidth(tagsArea), gap);
 			const hasOverflow = count < tagWidths.length;
 			setState({
 				visibleTagCount: count,
 				hasOverflow
 			});
 		};
-		$[1] = containerRef;
-		$[2] = measurementRef;
+		$[1] = measurementRef;
+		$[2] = tagsAreaRef;
 		$[3] = t2;
 	} else t2 = $[3];
 	const calculateLayout = t2;
 	let t3;
-	if ($[4] !== calculateLayout || $[5] !== containerRef) {
+	if ($[4] !== calculateLayout || $[5] !== tagsAreaRef) {
 		t3 = () => {
 			const rafId = requestAnimationFrame(() => {
 				calculateLayout();
@@ -9168,41 +9160,41 @@ const useTagOverflowCalculation = (t0) => {
 					calculateLayout();
 				});
 			});
-			if (containerRef.current) resizeObserver.observe(containerRef.current);
+			if (tagsAreaRef.current) resizeObserver.observe(tagsAreaRef.current);
 			return () => {
 				cancelAnimationFrame(rafId);
 				resizeObserver.disconnect();
 			};
 		};
 		$[4] = calculateLayout;
-		$[5] = containerRef;
+		$[5] = tagsAreaRef;
 		$[6] = t3;
 	} else t3 = $[6];
 	let t4;
-	if ($[7] !== calculateLayout || $[8] !== containerRef || $[9] !== expanded || $[10] !== measurementRef || $[11] !== totalItems) {
+	if ($[7] !== calculateLayout || $[8] !== expanded || $[9] !== measurementRef || $[10] !== tagsAreaRef || $[11] !== totalItems) {
 		t4 = [
-			containerRef,
+			tagsAreaRef,
 			measurementRef,
 			totalItems,
 			expanded,
 			calculateLayout
 		];
 		$[7] = calculateLayout;
-		$[8] = containerRef;
-		$[9] = expanded;
-		$[10] = measurementRef;
+		$[8] = expanded;
+		$[9] = measurementRef;
+		$[10] = tagsAreaRef;
 		$[11] = totalItems;
 		$[12] = t4;
 	} else t4 = $[12];
 	(0, react.useLayoutEffect)(t3, t4);
 	if (expanded) {
 		let t5;
-		if ($[13] !== totalItems) {
+		if ($[13] !== state) {
 			t5 = {
-				visibleTagCount: totalItems,
+				...state,
 				hasOverflow: true
 			};
-			$[13] = totalItems;
+			$[13] = state;
 			$[14] = t5;
 		} else t5 = $[14];
 		return t5;
@@ -9213,13 +9205,9 @@ const useTagOverflowCalculation = (t0) => {
 //#region src/components/ds-tag-filter/ds-tag-filter.tsx
 /**
 * 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 = (t0) => {
-	const $ = (0, react_compiler_runtime.c)(62);
+	const $ = (0, react_compiler_runtime.c)(55);
 	const { items, locale: t1, className, style, onClearAll, onItemDelete, onItemSelect, onExpand } = t0;
 	let t2;
 	if ($[0] !== t1) {
@@ -9229,12 +9217,12 @@ const DsTagFilter = (t0) => {
 	} else t2 = $[1];
 	const locale = t2;
 	const [expanded, setExpanded] = (0, react.useState)(false);
-	const containerRef = (0, react.useRef)(null);
+	const tagsAreaRef = (0, react.useRef)(null);
 	const measurementRef = (0, react.useRef)(null);
 	let t3;
 	if ($[2] !== expanded || $[3] !== items.length) {
 		t3 = {
-			containerRef,
+			tagsAreaRef,
 			measurementRef,
 			totalItems: items.length,
 			expanded
@@ -9244,25 +9232,24 @@ const DsTagFilter = (t0) => {
 		$[4] = t3;
 	} else t3 = $[4];
 	const { visibleTagCount, hasOverflow } = useTagOverflowCalculation(t3);
-	const { label: t4, clearButton: t5, showMore: t6, showLess: t7 } = locale;
-	const label = t4 === void 0 ? "Filtered by:" : t4;
-	const clearButton = t5 === void 0 ? "Clear all filters" : t5;
-	const showMore = t6 === void 0 ? "Show more" : t6;
-	const showLess = t7 === void 0 ? "Show less" : t7;
-	let t8;
+	const { clearButton: t4, showMore: t5, showLess: t6 } = locale;
+	const clearButton = t4 === void 0 ? "Clear all filters" : t4;
+	const showMore = t5 === void 0 ? "Show more" : t5;
+	const showLess = t6 === void 0 ? "Show less" : t6;
+	let t7;
 	if ($[5] !== expanded || $[6] !== items || $[7] !== visibleTagCount) {
-		t8 = expanded ? items : items.slice(0, visibleTagCount);
+		t7 = expanded ? items : items.slice(0, visibleTagCount);
 		$[5] = expanded;
 		$[6] = items;
 		$[7] = visibleTagCount;
-		$[8] = t8;
-	} else t8 = $[8];
-	const visibleTags = t8;
+		$[8] = t7;
+	} else t7 = $[8];
+	const visibleTags = t7;
 	const hiddenCount = items.length - visibleTagCount;
 	if (items.length === 0) return null;
-	let t9;
+	let t8;
 	if ($[9] !== onItemDelete || $[10] !== onItemSelect) {
-		t9 = (item) => ({
+		t8 = (item) => ({
 			...item.slotProps?.tag,
 			label: item.label,
 			selected: item.selected,
@@ -9271,180 +9258,159 @@ const DsTagFilter = (t0) => {
 		});
 		$[9] = onItemDelete;
 		$[10] = onItemSelect;
-		$[11] = t9;
-	} else t9 = $[11];
-	const buildTagProps = t9;
-	let t10;
+		$[11] = t8;
+	} else t8 = $[11];
+	const buildTagProps = t8;
+	let t9;
 	if ($[12] !== buildTagProps) {
-		t10 = (item_0) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsTag, { ...buildTagProps(item_0) }, item_0.id);
+		t9 = (item_0) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsTag, { ...buildTagProps(item_0) }, item_0.id);
 		$[12] = buildTagProps;
-		$[13] = t10;
-	} else t10 = $[13];
-	const renderTag = t10;
-	let t11;
+		$[13] = t9;
+	} else t9 = $[13];
+	const renderTag = t9;
+	let t10;
 	if ($[14] !== expanded || $[15] !== onExpand) {
-		t11 = () => {
+		t10 = () => {
 			const newExpanded = !expanded;
 			setExpanded(newExpanded);
 			onExpand?.(newExpanded);
 		};
 		$[14] = expanded;
 		$[15] = onExpand;
-		$[16] = t11;
-	} else t11 = $[16];
-	const handleExpandToggle = t11;
-	let t12;
+		$[16] = t10;
+	} else t10 = $[16];
+	const handleExpandToggle = t10;
+	let t11;
 	if ($[17] !== buildTagProps || $[18] !== items) {
-		let t13;
+		let t12;
 		if ($[20] !== buildTagProps) {
-			t13 = (item_1) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsTag, {
+			t12 = (item_1) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsTag, {
 				"data-measure-tag": "",
 				...buildTagProps(item_1)
 			}, item_1.id);
 			$[20] = buildTagProps;
-			$[21] = t13;
-		} else t13 = $[21];
-		t12 = items.map(t13);
+			$[21] = t12;
+		} else t12 = $[21];
+		t11 = items.map(t12);
 		$[17] = buildTagProps;
 		$[18] = items;
-		$[19] = t12;
-	} else t12 = $[19];
-	let t13;
-	if ($[22] !== t12) {
-		t13 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		$[19] = t11;
+	} else t11 = $[19];
+	let t12;
+	if ($[22] !== t11) {
+		t12 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			ref: measurementRef,
 			className: ds_tag_filter_module_default.measurementContainer,
 			"aria-hidden": "true",
-			children: t12
+			children: t11
 		});
-		$[22] = t12;
-		$[23] = t13;
-	} else t13 = $[23];
-	const measurementContainer = t13;
-	const t14 = expanded && ds_tag_filter_module_default.expanded;
-	let t15;
-	if ($[24] !== className || $[25] !== t14) {
-		t15 = (0, classnames.default)(ds_tag_filter_module_default.container, t14, className);
+		$[22] = t11;
+		$[23] = t12;
+	} else t12 = $[23];
+	const measurementContainer = t12;
+	const toggleLabel = expanded ? showLess : showMore;
+	let t13;
+	if ($[24] !== className) {
+		t13 = (0, classnames.default)(ds_tag_filter_module_default.container, className);
 		$[24] = className;
-		$[25] = t14;
-		$[26] = t15;
-	} else t15 = $[26];
+		$[25] = t13;
+	} else t13 = $[25];
+	let t14;
+	if ($[26] !== renderTag || $[27] !== visibleTags) {
+		let t15;
+		if ($[29] !== renderTag) {
+			t15 = (item_2) => renderTag(item_2);
+			$[29] = renderTag;
+			$[30] = t15;
+		} else t15 = $[30];
+		t14 = visibleTags.map(t15);
+		$[26] = renderTag;
+		$[27] = visibleTags;
+		$[28] = t14;
+	} else t14 = $[28];
+	let t15;
+	if ($[31] !== t14) {
+		t15 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			ref: tagsAreaRef,
+			className: ds_tag_filter_module_default.tagsArea,
+			"aria-live": "polite",
+			children: t14
+		});
+		$[31] = t14;
+		$[32] = t15;
+	} else t15 = $[32];
 	let t16;
-	if ($[27] !== label) {
-		t16 = label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsTypography, {
-			variant: "body-sm-reg",
-			className: ds_tag_filter_module_default.label,
-			children: label
+	if ($[33] !== expanded || $[34] !== handleExpandToggle || $[35] !== hasOverflow || $[36] !== hiddenCount || $[37] !== toggleLabel) {
+		t16 = hasOverflow && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(DsButtonV3, {
+			variant: "tertiary",
+			size: "small",
+			className: ds_tag_filter_module_default.actionButton,
+			"aria-expanded": expanded,
+			onClick: handleExpandToggle,
+			children: [`${toggleLabel} (${String(hiddenCount)})`, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsIcon, {
+				icon: expanded ? "keyboard_arrow_up" : "keyboard_arrow_down",
+				size: "tiny",
+				"aria-hidden": true
+			})]
 		});
-		$[27] = label;
-		$[28] = t16;
-	} else t16 = $[28];
+		$[33] = expanded;
+		$[34] = handleExpandToggle;
+		$[35] = hasOverflow;
+		$[36] = hiddenCount;
+		$[37] = toggleLabel;
+		$[38] = t16;
+	} else t16 = $[38];
 	let t17;
-	if ($[29] !== expanded || $[30] !== handleExpandToggle || $[31] !== hasOverflow || $[32] !== hiddenCount || $[33] !== showLess || $[34] !== showMore) {
-		t17 = hasOverflow && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(DsButton, {
-			design: "v1.2",
-			buttonType: "tertiary",
-			variant: "ghost",
-			className: ds_tag_filter_module_default.actionButton,
-			contentClassName: ds_tag_filter_module_default.ghostButtonContent,
+	if ($[39] !== clearButton || $[40] !== onClearAll) {
+		t17 = onClearAll && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsButtonV3, {
+			variant: "tertiary",
 			size: "small",
-			onClick: handleExpandToggle,
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsIcon, { icon: expanded ? "keyboard_arrow_up" : "keyboard_arrow_down" }), expanded ? showLess : `${showMore} (${String(hiddenCount)})`]
-		});
-		$[29] = expanded;
-		$[30] = handleExpandToggle;
-		$[31] = hasOverflow;
-		$[32] = hiddenCount;
-		$[33] = showLess;
-		$[34] = showMore;
-		$[35] = t17;
-	} else t17 = $[35];
-	let t18;
-	if ($[36] !== clearButton || $[37] !== onClearAll) {
-		t18 = onClearAll && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(DsButton, {
-			design: "v1.2",
-			buttonType: "tertiary",
-			variant: "ghost",
+			icon: "close",
 			className: ds_tag_filter_module_default.actionButton,
-			contentClassName: ds_tag_filter_module_default.ghostButtonContent,
-			size: "small",
 			onClick: onClearAll,
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DsIcon, { icon: "close" }), clearButton]
+			children: clearButton
+		});
+		$[39] = clearButton;
+		$[40] = onClearAll;
+		$[41] = t17;
+	} else t17 = $[41];
+	let t18;
+	if ($[42] !== t16 || $[43] !== t17) {
+		t18 = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: ds_tag_filter_module_default.actions,
+			children: [t16, t17]
 		});
-		$[36] = clearButton;
-		$[37] = onClearAll;
-		$[38] = t18;
-	} else t18 = $[38];
+		$[42] = t16;
+		$[43] = t17;
+		$[44] = t18;
+	} else t18 = $[44];
 	let t19;
-	if ($[39] !== t17 || $[40] !== t18) {
+	if ($[45] !== style || $[46] !== t13 || $[47] !== t15 || $[48] !== t18) {
 		t19 = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: ds_tag_filter_module_default.headerActions,
-			children: [t17, t18]
+			className: t13,
+			style,
+			children: [t15, t18]
 		});
-		$[39] = t17;
-		$[40] = t18;
-		$[41] = t19;
-	} else t19 = $[41];
+		$[45] = style;
+		$[46] = t13;
+		$[47] = t15;
+		$[48] = t18;
+		$[49] = t19;
+	} else t19 = $[49];
 	let t20;
-	if ($[42] !== t16 || $[43] !== t19) {
-		t20 = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: ds_tag_filter_module_default.header,
-			children: [t16, t19]
-		});
-		$[42] = t16;
-		$[43] = t19;
-		$[44] = t20;
-	} else t20 = $[44];
+	if ($[50] !== measurementContainer) {
+		t20 = (0, react_dom.createPortal)(measurementContainer, document.body);
+		$[50] = measurementContainer;
+		$[51] = t20;
+	} else t20 = $[51];
 	let t21;
-	if ($[45] !== renderTag || $[46] !== visibleTags) {
-		let t22;
-		if ($[48] !== renderTag) {
-			t22 = (item_2) => renderTag(item_2);
-			$[48] = renderTag;
-			$[49] = t22;
-		} else t22 = $[49];
-		t21 = visibleTags.map(t22);
-		$[45] = renderTag;
-		$[46] = visibleTags;
-		$[47] = t21;
-	} else t21 = $[47];
-	let t22;
-	if ($[50] !== t21) {
-		t22 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: ds_tag_filter_module_default.tagsArea,
-			children: t21
-		});
-		$[50] = t21;
-		$[51] = t22;
-	} else t22 = $[51];
-	let t23;
-	if ($[52] !== style || $[53] !== t15 || $[54] !== t20 || $[55] !== t22) {
-		t23 = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			ref: containerRef,
-			className: t15,
-			style,
-			children: [t20, t22]
-		});
-		$[52] = style;
-		$[53] = t15;
-		$[54] = t20;
-		$[55] = t22;
-		$[56] = t23;
-	} else t23 = $[56];
-	let t24;
-	if ($[57] !== measurementContainer) {
-		t24 = (0, react_dom.createPortal)(measurementContainer, document.body);
-		$[57] = measurementContainer;
-		$[58] = t24;
-	} else t24 = $[58];
-	let t25;
-	if ($[59] !== t23 || $[60] !== t24) {
-		t25 = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [t23, t24] });
-		$[59] = t23;
-		$[60] = t24;
-		$[61] = t25;
-	} else t25 = $[61];
-	return t25;
+	if ($[52] !== t19 || $[53] !== t20) {
+		t21 = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [t19, t20] });
+		$[52] = t19;
+		$[53] = t20;
+		$[54] = t21;
+	} else t21 = $[54];
+	return t21;
 };
 DsTagFilter.displayName = "DsTagFilter";
 //#endregion

package/dist/index.d.cts

@@ -12330,7 +12330,8 @@ 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;
     /**