@drivenets/design-system 0.0.5 → 0.2.0

package/dist/components/ds-tag-filter/ds-tag-filter.js

@@ -0,0 +1,324 @@
+import ds_icon_default from "../ds-icon/ds-icon.js";
+import "../ds-icon/index.js";
+import ds_typography_default from "../ds-typography/ds-typography.js";
+import "../ds-typography/index.js";
+import ds_button_default from "../ds-button/ds-button.js";
+import "../ds-button/index.js";
+import ds_tag_default from "../ds-tag/ds-tag.js";
+import "../ds-tag/index.js";
+import ds_tag_filter_module_default from "./ds-tag-filter.module.js";
+import { useTagOverflowCalculation } from "./hooks/use-tag-overflow-calculation.js";
+import { c } from "react/compiler-runtime";
+import classNames from "classnames";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { createElement, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+
+//#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.
+* Shows visible tags in up to 2 rows, with the Expand button to show hidden items.
+*/
+const DsTagFilter = (t0) => {
+	const $ = c(81);
+	const { items, locale: t1, className, style, onClearAll, onItemDelete, onItemSelect, onExpand } = t0;
+	let t2;
+	if ($[0] !== t1) {
+		t2 = t1 === void 0 ? {} : t1;
+		$[0] = t1;
+		$[1] = t2;
+	} else t2 = $[1];
+	const locale = t2;
+	const [expanded, setExpanded] = useState(false);
+	const containerRef = useRef(null);
+	const measurementRef = useRef(null);
+	let t3;
+	if ($[2] !== expanded || $[3] !== items.length) {
+		t3 = {
+			containerRef,
+			measurementRef,
+			totalItems: items.length,
+			expanded
+		};
+		$[2] = expanded;
+		$[3] = items.length;
+		$[4] = t3;
+	} else t3 = $[4];
+	const { row1TagCount, row2TagCount, hasOverflow } = useTagOverflowCalculation(t3);
+	const { label: t4, clearButton: t5, hiddenCountPlural: t6, hiddenCountSingular: t7, collapseTagLabel: t8 } = locale;
+	const label = t4 === void 0 ? "Filtered by:" : t4;
+	const clearButton = t5 === void 0 ? "Clear all filters" : t5;
+	const hiddenCountPlural = t6 === void 0 ? "filters" : t6;
+	const hiddenCountSingular = t7 === void 0 ? "filter" : t7;
+	const collapseTagLabel = t8 === void 0 ? "Collapse" : t8;
+	let measurementContainer;
+	let t10;
+	let t11;
+	let t12;
+	let t13;
+	let t14;
+	let t9;
+	if ($[5] !== className || $[6] !== clearButton || $[7] !== collapseTagLabel || $[8] !== expanded || $[9] !== hasOverflow || $[10] !== hiddenCountPlural || $[11] !== hiddenCountSingular || $[12] !== items || $[13] !== label || $[14] !== onClearAll || $[15] !== onExpand || $[16] !== onItemDelete || $[17] !== onItemSelect || $[18] !== row1TagCount || $[19] !== row2TagCount || $[20] !== style) {
+		t14 = Symbol.for("react.early_return_sentinel");
+		bb0: {
+			const row1Tags = items.slice(0, row1TagCount);
+			const row2Tags = items.slice(row1TagCount, row1TagCount + row2TagCount);
+			let t15$1;
+			if ($[28] !== expanded || $[29] !== items || $[30] !== row1TagCount || $[31] !== row2TagCount) {
+				t15$1 = expanded ? [] : items.slice(row1TagCount + row2TagCount);
+				$[28] = expanded;
+				$[29] = items;
+				$[30] = row1TagCount;
+				$[31] = row2TagCount;
+				$[32] = t15$1;
+			} else t15$1 = $[32];
+			const hiddenTags = t15$1;
+			if (items.length === 0) {
+				t14 = null;
+				break bb0;
+			}
+			const hiddenCount = hiddenTags.length;
+			const hasRow2Content = row2Tags.length > 0 || hasOverflow;
+			let t16$1;
+			if ($[33] !== onItemDelete || $[34] !== onItemSelect) {
+				t16$1 = (item) => {
+					return /* @__PURE__ */ createElement(ds_tag_default, {
+						...item.slotProps?.tag || {},
+						key: item.id,
+						label: item.label,
+						selected: item.selected,
+						onClick: onItemSelect ? () => onItemSelect(item) : void 0,
+						onDelete: onItemDelete ? () => onItemDelete(item) : void 0
+					});
+				};
+				$[33] = onItemDelete;
+				$[34] = onItemSelect;
+				$[35] = t16$1;
+			} else t16$1 = $[35];
+			const renderTag = t16$1;
+			let t17$1;
+			if ($[36] !== expanded || $[37] !== onExpand) {
+				t17$1 = () => {
+					const newExpanded = !expanded;
+					setExpanded(newExpanded);
+					onExpand?.(newExpanded);
+				};
+				$[36] = expanded;
+				$[37] = onExpand;
+				$[38] = t17$1;
+			} else t17$1 = $[38];
+			const handleExpandToggle = t17$1;
+			let t18;
+			if ($[39] !== label) {
+				t18 = label && /* @__PURE__ */ jsx("span", {
+					"data-measure-label": "",
+					children: /* @__PURE__ */ jsx(ds_typography_default, {
+						variant: "body-sm-reg",
+						className: ds_tag_filter_module_default.label,
+						children: label
+					})
+				});
+				$[39] = label;
+				$[40] = t18;
+			} else t18 = $[40];
+			let t19;
+			if ($[41] !== items || $[42] !== onItemDelete || $[43] !== onItemSelect) {
+				let t20$1;
+				if ($[45] !== onItemDelete || $[46] !== onItemSelect) {
+					t20$1 = (item_0) => /* @__PURE__ */ jsx(ds_tag_default, {
+						"data-measure-tag": "",
+						label: item_0.label,
+						selected: item_0.selected,
+						onClick: onItemSelect ? () => onItemSelect(item_0) : void 0,
+						onDelete: onItemDelete ? () => onItemDelete(item_0) : void 0
+					}, item_0.id);
+					$[45] = onItemDelete;
+					$[46] = onItemSelect;
+					$[47] = t20$1;
+				} else t20$1 = $[47];
+				t19 = items.map(t20$1);
+				$[41] = items;
+				$[42] = onItemDelete;
+				$[43] = onItemSelect;
+				$[44] = t19;
+			} else t19 = $[44];
+			let t20;
+			if ($[48] !== clearButton || $[49] !== onClearAll) {
+				t20 = onClearAll && /* @__PURE__ */ jsxs(ds_button_default, {
+					"data-measure-clear": "",
+					design: "v1.2",
+					buttonType: "tertiary",
+					variant: "ghost",
+					className: ds_tag_filter_module_default.clearButton,
+					contentClassName: ds_tag_filter_module_default.clearContent,
+					size: "small",
+					children: [/* @__PURE__ */ jsx(ds_icon_default, { icon: "close" }), clearButton]
+				});
+				$[48] = clearButton;
+				$[49] = onClearAll;
+				$[50] = t20;
+			} else t20 = $[50];
+			let t21;
+			if ($[51] === Symbol.for("react.memo_cache_sentinel")) {
+				t21 = /* @__PURE__ */ jsx(ds_tag_default, {
+					"data-measure-expand": "",
+					label: "+99 filters",
+					className: ds_tag_filter_module_default.expandTag
+				});
+				$[51] = t21;
+			} else t21 = $[51];
+			let t22;
+			if ($[52] !== t18 || $[53] !== t19 || $[54] !== t20) {
+				t22 = /* @__PURE__ */ jsxs("div", {
+					ref: measurementRef,
+					className: ds_tag_filter_module_default.measurementContainer,
+					"aria-hidden": "true",
+					children: [
+						t18,
+						t19,
+						t20,
+						t21
+					]
+				});
+				$[52] = t18;
+				$[53] = t19;
+				$[54] = t20;
+				$[55] = t22;
+			} else t22 = $[55];
+			measurementContainer = t22;
+			t9 = containerRef;
+			const t23 = expanded && ds_tag_filter_module_default.expanded;
+			if ($[56] !== className || $[57] !== t23) {
+				t10 = classNames(ds_tag_filter_module_default.container, t23, className);
+				$[56] = className;
+				$[57] = t23;
+				$[58] = t10;
+			} else t10 = $[58];
+			t11 = style;
+			let t24;
+			if ($[59] !== label) {
+				t24 = label && /* @__PURE__ */ jsx(ds_typography_default, {
+					variant: "body-sm-reg",
+					className: ds_tag_filter_module_default.label,
+					children: label
+				});
+				$[59] = label;
+				$[60] = t24;
+			} else t24 = $[60];
+			let t25;
+			if ($[61] !== renderTag) {
+				t25 = (item_1) => renderTag(item_1);
+				$[61] = renderTag;
+				$[62] = t25;
+			} else t25 = $[62];
+			const t26 = row1Tags.map(t25);
+			let t27;
+			if ($[63] !== clearButton || $[64] !== onClearAll) {
+				t27 = onClearAll && /* @__PURE__ */ jsxs(ds_button_default, {
+					design: "v1.2",
+					buttonType: "tertiary",
+					variant: "ghost",
+					className: ds_tag_filter_module_default.clearButton,
+					contentClassName: ds_tag_filter_module_default.clearContent,
+					size: "small",
+					onClick: onClearAll,
+					children: [/* @__PURE__ */ jsx(ds_icon_default, { icon: "close" }), clearButton]
+				});
+				$[63] = clearButton;
+				$[64] = onClearAll;
+				$[65] = t27;
+			} else t27 = $[65];
+			if ($[66] !== t24 || $[67] !== t26 || $[68] !== t27) {
+				t12 = /* @__PURE__ */ jsxs("div", {
+					className: ds_tag_filter_module_default.row1,
+					children: [
+						t24,
+						t26,
+						t27
+					]
+				});
+				$[66] = t24;
+				$[67] = t26;
+				$[68] = t27;
+				$[69] = t12;
+			} else t12 = $[69];
+			t13 = hasRow2Content && /* @__PURE__ */ jsxs("div", {
+				className: ds_tag_filter_module_default.row2,
+				children: [row2Tags.map((item_2) => renderTag(item_2)), hasOverflow && /* @__PURE__ */ jsx(ds_tag_default, {
+					label: expanded ? collapseTagLabel : `+${String(hiddenCount)} ${hiddenCount === 1 ? hiddenCountSingular : hiddenCountPlural}`,
+					selected: expanded,
+					className: ds_tag_filter_module_default.expandTag,
+					onClick: handleExpandToggle
+				})]
+			});
+		}
+		$[5] = className;
+		$[6] = clearButton;
+		$[7] = collapseTagLabel;
+		$[8] = expanded;
+		$[9] = hasOverflow;
+		$[10] = hiddenCountPlural;
+		$[11] = hiddenCountSingular;
+		$[12] = items;
+		$[13] = label;
+		$[14] = onClearAll;
+		$[15] = onExpand;
+		$[16] = onItemDelete;
+		$[17] = onItemSelect;
+		$[18] = row1TagCount;
+		$[19] = row2TagCount;
+		$[20] = style;
+		$[21] = measurementContainer;
+		$[22] = t10;
+		$[23] = t11;
+		$[24] = t12;
+		$[25] = t13;
+		$[26] = t14;
+		$[27] = t9;
+	} else {
+		measurementContainer = $[21];
+		t10 = $[22];
+		t11 = $[23];
+		t12 = $[24];
+		t13 = $[25];
+		t14 = $[26];
+		t9 = $[27];
+	}
+	if (t14 !== Symbol.for("react.early_return_sentinel")) return t14;
+	let t15;
+	if ($[70] !== t10 || $[71] !== t11 || $[72] !== t12 || $[73] !== t13 || $[74] !== t9) {
+		t15 = /* @__PURE__ */ jsxs("div", {
+			ref: t9,
+			className: t10,
+			style: t11,
+			children: [t12, t13]
+		});
+		$[70] = t10;
+		$[71] = t11;
+		$[72] = t12;
+		$[73] = t13;
+		$[74] = t9;
+		$[75] = t15;
+	} else t15 = $[75];
+	let t16;
+	if ($[76] !== measurementContainer) {
+		t16 = createPortal(measurementContainer, document.body);
+		$[76] = measurementContainer;
+		$[77] = t16;
+	} else t16 = $[77];
+	let t17;
+	if ($[78] !== t15 || $[79] !== t16) {
+		t17 = /* @__PURE__ */ jsxs(Fragment, { children: [t15, t16] });
+		$[78] = t15;
+		$[79] = t16;
+		$[80] = t17;
+	} else t17 = $[80];
+	return t17;
+};
+var ds_tag_filter_default = DsTagFilter;
+
+//#endregion
+export { ds_tag_filter_default as default };
+//# sourceMappingURL=ds-tag-filter.js.map

package/dist/components/ds-tag-filter/ds-tag-filter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ds-tag-filter.js","names":["useRef","useState","createPortal","classNames","styles","DsTagFilterProps","TagFilterItem","useTagOverflowCalculation","DsTypography","DsTag","DsButton","DsIcon","DsTagFilter","t0","$","_c","items","locale","t1","className","style","onClearAll","onItemDelete","onItemSelect","onExpand","t2","undefined","expanded","setExpanded","containerRef","measurementRef","t3","length","totalItems","row1TagCount","row2TagCount","hasOverflow","label","t4","clearButton","t5","hiddenCountPlural","t6","hiddenCountSingular","t7","collapseTagLabel","t8","measurementContainer","t10","t11","t12","t13","t14","t9","Symbol","for","bb0","row1Tags","slice","row2Tags","t15","hiddenTags","hiddenCount","hasRow2Content","t16","item","tagProps","slotProps","tag","id","selected","renderTag","t17","newExpanded","handleExpandToggle","t18","t19","t20","item_0","map","clearContent","t21","expandTag","t22","t23","container","t24","t25","item_1","t26","t27","row1","row2","item_2","String","document","body"],"sources":["../../../src/components/ds-tag-filter/ds-tag-filter.tsx"],"sourcesContent":["import { useRef, useState } from 'react';\nimport { createPortal } from 'react-dom';\nimport classNames from 'classnames';\nimport styles from './ds-tag-filter.module.scss';\nimport type { DsTagFilterProps, TagFilterItem } from './ds-tag-filter.types';\nimport { useTagOverflowCalculation } from './hooks/use-tag-overflow-calculation';\nimport { DsTypography } from '../ds-typography';\nimport { DsTag } from '../ds-tag';\nimport { DsButton } from '../ds-button';\nimport { DsIcon } from '../ds-icon';\n\n/**\n * Design system TagFilter component\n *\n * A component for displaying active filters as tags with overflow handling.\n * Shows visible tags in up to 2 rows, with the Expand button to show hidden items.\n */\nconst DsTagFilter = ({\n\titems,\n\tlocale = {},\n\tclassName,\n\tstyle,\n\tonClearAll,\n\tonItemDelete,\n\tonItemSelect,\n\tonExpand,\n}: DsTagFilterProps) => {\n\tconst [expanded, setExpanded] = useState(false);\n\tconst containerRef = useRef<HTMLDivElement>(null);\n\tconst measurementRef = useRef<HTMLDivElement>(null);\n\n\tconst { row1TagCount, row2TagCount, hasOverflow } = useTagOverflowCalculation({\n\t\tcontainerRef,\n\t\tmeasurementRef,\n\t\ttotalItems: items.length,\n\t\texpanded,\n\t});\n\n\tconst {\n\t\tlabel = 'Filtered by:',\n\t\tclearButton = 'Clear all filters',\n\t\thiddenCountPlural = 'filters',\n\t\thiddenCountSingular = 'filter',\n\t\tcollapseTagLabel = 'Collapse',\n\t} = locale;\n\n\t// Split items into row sections\n\tconst row1Tags = items.slice(0, row1TagCount);\n\tconst row2Tags = items.slice(row1TagCount, row1TagCount + row2TagCount);\n\tconst hiddenTags = expanded ? [] : items.slice(row1TagCount + row2TagCount);\n\n\tif (items.length === 0) {\n\t\treturn null;\n\t}\n\n\tconst hiddenCount = hiddenTags.length;\n\tconst hasRow2Content = row2Tags.length > 0 || hasOverflow;\n\n\tconst renderTag = (item: TagFilterItem) => {\n\t\tconst tagProps = item.slotProps?.tag || {};\n\n\t\treturn (\n\t\t\t<DsTag\n\t\t\t\t{...tagProps}\n\t\t\t\tkey={item.id}\n\t\t\t\tlabel={item.label}\n\t\t\t\tselected={item.selected}\n\t\t\t\tonClick={onItemSelect ? () => onItemSelect(item) : undefined}\n\t\t\t\tonDelete={onItemDelete ? () => onItemDelete(item) : undefined}\n\t\t\t/>\n\t\t);\n\t};\n\n\tconst handleExpandToggle = () => {\n\t\tconst newExpanded = !expanded;\n\t\tsetExpanded(newExpanded);\n\t\tonExpand?.(newExpanded);\n\t};\n\n\t// Measurement container rendered via portal to keep it outside the component's DOM tree\n\t// This prevents Testing Library from finding duplicate elements\n\t// We use it to calculate the number of remaining tags to render\n\tconst measurementContainer = (\n\t\t<div ref={measurementRef} className={styles.measurementContainer} aria-hidden=\"true\">\n\t\t\t{label && (\n\t\t\t\t<span data-measure-label=\"\">\n\t\t\t\t\t<DsTypography variant=\"body-sm-reg\" className={styles.label}>\n\t\t\t\t\t\t{label}\n\t\t\t\t\t</DsTypography>\n\t\t\t\t</span>\n\t\t\t)}\n\t\t\t{items.map((item) => (\n\t\t\t\t<DsTag\n\t\t\t\t\tkey={item.id}\n\t\t\t\t\tdata-measure-tag=\"\"\n\t\t\t\t\tlabel={item.label}\n\t\t\t\t\tselected={item.selected}\n\t\t\t\t\tonClick={onItemSelect ? () => onItemSelect(item) : undefined}\n\t\t\t\t\tonDelete={onItemDelete ? () => onItemDelete(item) : undefined}\n\t\t\t\t/>\n\t\t\t))}\n\t\t\t{onClearAll && (\n\t\t\t\t<DsButton\n\t\t\t\t\tdata-measure-clear=\"\"\n\t\t\t\t\tdesign=\"v1.2\"\n\t\t\t\t\tbuttonType=\"tertiary\"\n\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\tclassName={styles.clearButton}\n\t\t\t\t\tcontentClassName={styles.clearContent}\n\t\t\t\t\tsize=\"small\"\n\t\t\t\t>\n\t\t\t\t\t<DsIcon icon=\"close\" />\n\t\t\t\t\t{clearButton}\n\t\t\t\t</DsButton>\n\t\t\t)}\n\t\t\t<DsTag data-measure-expand=\"\" label=\"+99 filters\" className={styles.expandTag} />\n\t\t</div>\n\t);\n\n\t/**\n\t * IMPORTANT!\n\t * If you make any changes to this layout (styling, JSX, anything that affects it.)\n\t * please, apply the exact same changes to the \"measurementContainer\"\n\t */\n\treturn (\n\t\t<>\n\t\t\t<div\n\t\t\t\tref={containerRef}\n\t\t\t\tclassName={classNames(styles.container, expanded && styles.expanded, className)}\n\t\t\t\tstyle={style}\n\t\t\t>\n\t\t\t\t<div className={styles.row1}>\n\t\t\t\t\t{label && (\n\t\t\t\t\t\t<DsTypography variant=\"body-sm-reg\" className={styles.label}>\n\t\t\t\t\t\t\t{label}\n\t\t\t\t\t\t</DsTypography>\n\t\t\t\t\t)}\n\t\t\t\t\t{row1Tags.map((item) => renderTag(item))}\n\t\t\t\t\t{onClearAll && (\n\t\t\t\t\t\t<DsButton\n\t\t\t\t\t\t\tdesign=\"v1.2\"\n\t\t\t\t\t\t\tbuttonType=\"tertiary\"\n\t\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\t\tclassName={styles.clearButton}\n\t\t\t\t\t\t\tcontentClassName={styles.clearContent}\n\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\tonClick={onClearAll}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<DsIcon icon=\"close\" />\n\t\t\t\t\t\t\t{clearButton}\n\t\t\t\t\t\t</DsButton>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\n\t\t\t\t{hasRow2Content && (\n\t\t\t\t\t<div className={styles.row2}>\n\t\t\t\t\t\t{row2Tags.map((item) => renderTag(item))}\n\t\t\t\t\t\t{hasOverflow && (\n\t\t\t\t\t\t\t<DsTag\n\t\t\t\t\t\t\t\tlabel={\n\t\t\t\t\t\t\t\t\texpanded\n\t\t\t\t\t\t\t\t\t\t? collapseTagLabel\n\t\t\t\t\t\t\t\t\t\t: `+${String(hiddenCount)} ${hiddenCount === 1 ? hiddenCountSingular : hiddenCountPlural}`\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tselected={expanded}\n\t\t\t\t\t\t\t\tclassName={styles.expandTag}\n\t\t\t\t\t\t\t\tonClick={handleExpandToggle}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t\t{createPortal(measurementContainer, document.body)}\n\t\t</>\n\t);\n};\n\nexport default DsTagFilter;\n"],"mappings":"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"}

package/dist/components/ds-tag-filter/ds-tag-filter.module.cjs

@@ -0,0 +1,17 @@
+
+//#region src/components/ds-tag-filter/ds-tag-filter.module.scss
+var ds_tag_filter_module_default = {
+	"container": "_container_1jmga_1",
+	"expanded": "_expanded_1jmga_1",
+	"row1": "_row1_1jmga_1",
+	"row2": "_row2_1jmga_1",
+	"label": "_label_1jmga_1",
+	"expandTag": "_expandTag_1jmga_1",
+	"itemCheckbox": "_itemCheckbox_1jmga_1",
+	"clearContent": "_clearContent_1jmga_1",
+	"clearButton": "_clearButton_1jmga_1",
+	"measurementContainer": "_measurementContainer_1jmga_1"
+};
+
+//#endregion
+exports.default = ds_tag_filter_module_default;

package/dist/components/ds-tag-filter/ds-tag-filter.module.js

@@ -0,0 +1,17 @@
+//#region src/components/ds-tag-filter/ds-tag-filter.module.scss
+var ds_tag_filter_module_default = {
+	"container": "_container_1jmga_1",
+	"expanded": "_expanded_1jmga_1",
+	"row1": "_row1_1jmga_1",
+	"row2": "_row2_1jmga_1",
+	"label": "_label_1jmga_1",
+	"expandTag": "_expandTag_1jmga_1",
+	"itemCheckbox": "_itemCheckbox_1jmga_1",
+	"clearContent": "_clearContent_1jmga_1",
+	"clearButton": "_clearButton_1jmga_1",
+	"measurementContainer": "_measurementContainer_1jmga_1"
+};
+
+//#endregion
+export { ds_tag_filter_module_default as default };
+//# sourceMappingURL=ds-tag-filter.module.js.map

package/dist/components/ds-tag-filter/ds-tag-filter.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ds-tag-filter.module.js","names":[],"sources":["../../../src/components/ds-tag-filter/ds-tag-filter.module.scss"],"sourcesContent":[".container {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: var(--spacing-xs);\n\tpadding: var(--spacing-xs) var(--spacing-standard);\n\tbackground: var(--color-background-selected-weak);\n\tborder: 1px solid var(--color-outline-weak);\n\tborder-radius: var(--spacing-3xs);\n\tmax-height: 88px; // hardcoded value required in the design\n\toverflow: hidden;\n\n\t&.expanded {\n\t\tmax-height: none;\n\t}\n}\n\n.row1 {\n\tdisplay: flex;\n\talign-items: center;\n\twidth: 100%;\n\tgap: var(--spacing-xs);\n\tflex-shrink: 0;\n}\n\n.row2 {\n\tdisplay: flex;\n\talign-items: center;\n\twidth: 100%;\n\tgap: var(--spacing-xs);\n\tflex-wrap: wrap;\n}\n\n.label {\n\tcolor: var(--color-font-secondary);\n\twhite-space: nowrap;\n\tflex-shrink: 0;\n}\n\n.expandTag {\n\tcursor: pointer;\n\tflex-shrink: 0;\n}\n\n.itemCheckbox {\n\tdisplay: flex;\n\talign-items: center;\n}\n\n.clearContent {\n\tbackground: transparent !important;\n}\n\n.clearButton {\n\tmargin-left: auto;\n\tpadding: 0;\n\tflex-shrink: 0;\n}\n\n// Hidden container for measuring element widths\n// Must render all elements to get accurate measurements\n.measurementContainer {\n\tpointer-events: none;\n\tdisplay: flex;\n\talign-items: center;\n\tgap: var(--spacing-xs);\n\n\t// Ensure it doesn't affect layout\n\theight: 0;\n\toverflow: hidden;\n\tposition: absolute;\n\tvisibility: hidden;\n}\n"],"mappings":""}

package/dist/components/ds-tag-filter/ds-tag-filter.types.d.cts

@@ -0,0 +1,71 @@
+import { DsTagProps } from "../ds-tag/ds-tag.types.cjs";
+import { CSSProperties } from "react";
+
+//#region src/components/ds-tag-filter/ds-tag-filter.types.d.ts
+interface TagFilterItem {
+  /**
+   * Unique identifier for the tag
+   */
+  id: string;
+  /**
+   * The label text to display in the tag
+   */
+  label: string;
+  /**
+   * Additional metadata to store with the tag
+   */
+  metadata?: Record<string, unknown>;
+  /**
+   * Whether the tag is selected/checked
+   */
+  selected?: boolean;
+  /**
+   * Additional props to pass to the components
+   */
+  slotProps?: {
+    tag?: Partial<DsTagProps>;
+  };
+}
+interface DsTagFilterProps {
+  /**
+   * Array of tag items to display
+   */
+  items: TagFilterItem[];
+  /**
+   * Locale object (you can pass custom strings for localization)
+   */
+  locale?: {
+    label?: string;
+    clearButton?: string;
+    collapseTagLabel?: string;
+    hiddenCountSingular?: string;
+    hiddenCountPlural?: string;
+  };
+  /**
+   * Callback when "Clear all" is clicked
+   */
+  onClearAll?: () => void;
+  /**
+   * Callback when a tag is deleted/removed
+   */
+  onItemDelete?: (item: TagFilterItem) => void;
+  /**
+   * Callback when a tag is selected
+   */
+  onItemSelect?: (item: TagFilterItem) => void;
+  /**
+   * Callback when the Expand button is clicked
+   */
+  onExpand?: (expanded?: boolean) => void;
+  /**
+   * Additional CSS class names
+   */
+  className?: string;
+  /**
+   * Additional styles to apply to the component
+   */
+  style?: CSSProperties;
+}
+//#endregion
+export { DsTagFilterProps, TagFilterItem };
+//# sourceMappingURL=ds-tag-filter.types.d.cts.map

package/dist/components/ds-tag-filter/ds-tag-filter.types.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ds-tag-filter.types.d.cts","names":[],"sources":["../../../src/components/ds-tag-filter/ds-tag-filter.types.ts"],"sourcesContent":[],"mappings":";;;;UAGiB,aAAA;;AAAjB;;EAqBgB,EAAA,EAAA,MAAA;EAAR;;AAIR;EAIQ,KAAA,EAAA,MAAA;EAkBe;;;EAgBD,QAAA,CAAA,EAnDV,MAmDU,CAAA,MAAA,EAAA,OAAA,CAAA;;;;;;;;;UA1Cd,QAAQ;;;UAIC,gBAAA;;;;SAIT;;;;;;;;;;;;;;;;;;wBAkBe;;;;wBAIA;;;;;;;;;;;;UAYd"}

package/dist/components/ds-tag-filter/ds-tag-filter.types.d.ts

@@ -0,0 +1,72 @@
+import { DsTagProps } from "../ds-tag/ds-tag.types.js";
+import "../ds-tag/index.js";
+import { CSSProperties } from "react";
+
+//#region src/components/ds-tag-filter/ds-tag-filter.types.d.ts
+interface TagFilterItem {
+  /**
+   * Unique identifier for the tag
+   */
+  id: string;
+  /**
+   * The label text to display in the tag
+   */
+  label: string;
+  /**
+   * Additional metadata to store with the tag
+   */
+  metadata?: Record<string, unknown>;
+  /**
+   * Whether the tag is selected/checked
+   */
+  selected?: boolean;
+  /**
+   * Additional props to pass to the components
+   */
+  slotProps?: {
+    tag?: Partial<DsTagProps>;
+  };
+}
+interface DsTagFilterProps {
+  /**
+   * Array of tag items to display
+   */
+  items: TagFilterItem[];
+  /**
+   * Locale object (you can pass custom strings for localization)
+   */
+  locale?: {
+    label?: string;
+    clearButton?: string;
+    collapseTagLabel?: string;
+    hiddenCountSingular?: string;
+    hiddenCountPlural?: string;
+  };
+  /**
+   * Callback when "Clear all" is clicked
+   */
+  onClearAll?: () => void;
+  /**
+   * Callback when a tag is deleted/removed
+   */
+  onItemDelete?: (item: TagFilterItem) => void;
+  /**
+   * Callback when a tag is selected
+   */
+  onItemSelect?: (item: TagFilterItem) => void;
+  /**
+   * Callback when the Expand button is clicked
+   */
+  onExpand?: (expanded?: boolean) => void;
+  /**
+   * Additional CSS class names
+   */
+  className?: string;
+  /**
+   * Additional styles to apply to the component
+   */
+  style?: CSSProperties;
+}
+//#endregion
+export { DsTagFilterProps, TagFilterItem };
+//# sourceMappingURL=ds-tag-filter.types.d.ts.map

package/dist/components/ds-tag-filter/ds-tag-filter.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ds-tag-filter.types.d.ts","names":[],"sources":["../../../src/components/ds-tag-filter/ds-tag-filter.types.ts"],"sourcesContent":[],"mappings":";;;;;UAGiB,aAAA;;;AAAjB;EAYY,EAAA,EAAA,MAAA;EASI;;;EAIC,KAAA,EAAA,MAAA;EAIT;;;EAkCC,QAAA,CAAA,EAnDG,MAmDH,CAAA,MAAA,EAAA,OAAA,CAAA;EAAa;;;;;;;;UA1Cd,QAAQ;;;UAIC,gBAAA;;;;SAIT;;;;;;;;;;;;;;;;;;wBAkBe;;;;wBAIA;;;;;;;;;;;;UAYd"}

package/dist/components/ds-tag-filter/hooks/use-tag-overflow-calculation.cjs

@@ -0,0 +1,137 @@
+const require_rolldown_runtime = require('../../../_virtual/rolldown_runtime.cjs');
+const require_utils = require('../utils.cjs');
+let react_compiler_runtime = require("react/compiler-runtime");
+let react = require("react");
+
+//#region src/components/ds-tag-filter/hooks/use-tag-overflow-calculation.ts
+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)
+*
+* Measures actual element widths to determine optimal placement.
+*/
+const useTagOverflowCalculation = (t0) => {
+	const $ = (0, react_compiler_runtime.c)(16);
+	const { containerRef, measurementRef, totalItems, expanded } = t0;
+	let t1;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = {
+			row1TagCount: 0,
+			row2TagCount: 0,
+			hasOverflow: false
+		};
+		$[0] = t1;
+	} else t1 = $[0];
+	const [state, setState] = (0, react.useState)(t1);
+	let t2;
+	if ($[1] !== containerRef || $[2] !== measurementRef) {
+		t2 = () => {
+			if (!containerRef.current || !measurementRef.current) return;
+			const container = containerRef.current;
+			const measurementContainer = measurementRef.current;
+			const { tagWidths, labelWidth, clearButtonWidth, expandTagWidth, gap } = require_utils.getElementMeasurements(measurementContainer);
+			if (tagWidths.length === 0) {
+				setState({
+					row1TagCount: 0,
+					row2TagCount: 0,
+					hasOverflow: false
+				});
+				return;
+			}
+			const containerWidth = require_utils.getContainerAvailableWidth(container);
+			const row1Result = require_utils.fitTagsInRow(tagWidths, containerWidth - labelWidth - clearButtonWidth - TAG_HOVER_BUTTON_SPACE, gap);
+			const remainingTags = tagWidths.slice(row1Result.count);
+			if (remainingTags.length === 0) {
+				setState({
+					row1TagCount: row1Result.count,
+					row2TagCount: 0,
+					hasOverflow: false
+				});
+				return;
+			}
+			const row2WithExpandResult = require_utils.fitTagsInRow(remainingTags, containerWidth - expandTagWidth - TAG_HOVER_BUTTON_SPACE, gap);
+			if (remainingTags.length > row2WithExpandResult.count) setState({
+				row1TagCount: row1Result.count,
+				row2TagCount: row2WithExpandResult.count,
+				hasOverflow: true
+			});
+			else {
+				const row2FullResult = require_utils.fitTagsInRow(remainingTags, containerWidth - TAG_HOVER_BUTTON_SPACE, gap);
+				if (row2FullResult.count < remainingTags.length) setState({
+					row1TagCount: row1Result.count,
+					row2TagCount: row2WithExpandResult.count,
+					hasOverflow: true
+				});
+				else setState({
+					row1TagCount: row1Result.count,
+					row2TagCount: row2FullResult.count,
+					hasOverflow: false
+				});
+			}
+		};
+		$[1] = containerRef;
+		$[2] = measurementRef;
+		$[3] = t2;
+	} else t2 = $[3];
+	const calculateLayout = t2;
+	let t3;
+	if ($[4] !== calculateLayout || $[5] !== containerRef) {
+		t3 = () => {
+			const rafId = requestAnimationFrame(() => {
+				calculateLayout();
+			});
+			const resizeObserver = new ResizeObserver(() => {
+				requestAnimationFrame(() => {
+					calculateLayout();
+				});
+			});
+			if (containerRef.current) resizeObserver.observe(containerRef.current);
+			return () => {
+				cancelAnimationFrame(rafId);
+				resizeObserver.disconnect();
+			};
+		};
+		$[4] = calculateLayout;
+		$[5] = containerRef;
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] !== calculateLayout || $[8] !== containerRef || $[9] !== expanded || $[10] !== measurementRef || $[11] !== totalItems) {
+		t4 = [
+			containerRef,
+			measurementRef,
+			totalItems,
+			expanded,
+			calculateLayout
+		];
+		$[7] = calculateLayout;
+		$[8] = containerRef;
+		$[9] = expanded;
+		$[10] = measurementRef;
+		$[11] = totalItems;
+		$[12] = t4;
+	} else t4 = $[12];
+	(0, react.useLayoutEffect)(t3, t4);
+	if (expanded) {
+		const t5 = totalItems - state.row1TagCount;
+		let t6;
+		if ($[13] !== state.row1TagCount || $[14] !== t5) {
+			t6 = {
+				row1TagCount: state.row1TagCount,
+				row2TagCount: t5,
+				hasOverflow: true
+			};
+			$[13] = state.row1TagCount;
+			$[14] = t5;
+			$[15] = t6;
+		} else t6 = $[15];
+		return t6;
+	}
+	return state;
+};
+
+//#endregion
+exports.useTagOverflowCalculation = useTagOverflowCalculation;