@drivenets/design-system 0.1.0 → 0.2.0

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;

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

@@ -0,0 +1,137 @@
+import { fitTagsInRow, getContainerAvailableWidth, getElementMeasurements } from "../utils.js";
+import { c } from "react/compiler-runtime";
+import { useLayoutEffect, useState } from "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 $ = 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] = 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 } = getElementMeasurements(measurementContainer);
+			if (tagWidths.length === 0) {
+				setState({
+					row1TagCount: 0,
+					row2TagCount: 0,
+					hasOverflow: false
+				});
+				return;
+			}
+			const containerWidth = getContainerAvailableWidth(container);
+			const row1Result = 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 = 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 = 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];
+	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
+export { useTagOverflowCalculation };
+//# sourceMappingURL=use-tag-overflow-calculation.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-tag-overflow-calculation.js","names":["RefObject","useCallback","useLayoutEffect","useState","fitTagsInRow","getContainerAvailableWidth","getElementMeasurements","UseTagOverflowCalculationOptions","containerRef","HTMLDivElement","measurementRef","totalItems","expanded","UseTagOverflowCalculationResult","row1TagCount","row2TagCount","hasOverflow","TAG_HOVER_BUTTON_SPACE","useTagOverflowCalculation","t0","$","_c","t1","Symbol","for","state","setState","t2","current","container","measurementContainer","tagWidths","labelWidth","clearButtonWidth","expandTagWidth","gap","length","containerWidth","row1AvailableWidth","row1Result","remainingTags","slice","count","row2AvailableWithExpand","row2WithExpandResult","overflowExists","row2AvailableWithoutExpand","row2FullResult","calculateLayout","t3","rafId","requestAnimationFrame","resizeObserver","ResizeObserver","observe","cancelAnimationFrame","disconnect","t4","t5","t6"],"sources":["../../../../src/components/ds-tag-filter/hooks/use-tag-overflow-calculation.ts"],"sourcesContent":["import { type RefObject, useCallback, useLayoutEffect, useState } from 'react';\nimport { fitTagsInRow, getContainerAvailableWidth, getElementMeasurements } from '../utils';\n\ninterface UseTagOverflowCalculationOptions {\n\tcontainerRef: RefObject<HTMLDivElement | null>;\n\tmeasurementRef: RefObject<HTMLDivElement | null>;\n\ttotalItems: number;\n\texpanded: boolean;\n}\n\ninterface UseTagOverflowCalculationResult {\n\trow1TagCount: number;\n\trow2TagCount: number;\n\thasOverflow: boolean;\n}\n\n// Extra space needed per row for animated delete button that appears on hover\nconst TAG_HOVER_BUTTON_SPACE = 20;\n\n/**\n * Custom hook to calculate how many tags can fit in 2 rows.\n *\n * Row 1: Label + Tags + Clear Button\n * Row 2: Remaining Tags + Expand Tag (only if overflow)\n *\n * Measures actual element widths to determine optimal placement.\n */\nexport const useTagOverflowCalculation = ({\n\tcontainerRef,\n\tmeasurementRef,\n\ttotalItems,\n\texpanded,\n}: UseTagOverflowCalculationOptions): UseTagOverflowCalculationResult => {\n\tconst [state, setState] = useState<UseTagOverflowCalculationResult>({\n\t\trow1TagCount: 0,\n\t\trow2TagCount: 0,\n\t\thasOverflow: false,\n\t});\n\n\tconst calculateLayout = useCallback(() => {\n\t\tif (!containerRef.current || !measurementRef.current) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst container = containerRef.current;\n\t\tconst measurementContainer = measurementRef.current;\n\n\t\tconst { tagWidths, labelWidth, clearButtonWidth, expandTagWidth, gap } =\n\t\t\tgetElementMeasurements(measurementContainer);\n\n\t\tif (tagWidths.length === 0) {\n\t\t\tsetState({ row1TagCount: 0, row2TagCount: 0, hasOverflow: false });\n\t\t\treturn;\n\t\t}\n\n\t\tconst containerWidth = getContainerAvailableWidth(container);\n\n\t\t// Calculate Row 1 available space (Label + Tags + Clear Button)\n\t\tconst row1AvailableWidth = containerWidth - labelWidth - clearButtonWidth - TAG_HOVER_BUTTON_SPACE;\n\n\t\t// Calculate how many tags fit in Row 1\n\t\tconst row1Result = fitTagsInRow(tagWidths, row1AvailableWidth, gap);\n\t\tconst remainingTags = tagWidths.slice(row1Result.count);\n\n\t\tif (remainingTags.length === 0) {\n\t\t\t// All tags fit in Row 1, no overflow\n\t\t\tsetState({ row1TagCount: row1Result.count, row2TagCount: 0, hasOverflow: false });\n\t\t\treturn;\n\t\t}\n\n\t\t// Calculate with expand tag reserved (pessimistic)\n\t\tconst row2AvailableWithExpand = containerWidth - expandTagWidth - TAG_HOVER_BUTTON_SPACE;\n\t\tconst row2WithExpandResult = fitTagsInRow(remainingTags, row2AvailableWithExpand, gap);\n\n\t\t// Check if there's overflow (more remaining tags than fit in Row 2 with expand)\n\t\tconst overflowExists = remainingTags.length > row2WithExpandResult.count;\n\n\t\tif (overflowExists) {\n\t\t\t// Use the count with expand tag space reserved\n\t\t\tsetState({\n\t\t\t\trow1TagCount: row1Result.count,\n\t\t\t\trow2TagCount: row2WithExpandResult.count,\n\t\t\t\thasOverflow: true,\n\t\t\t});\n\t\t} else {\n\t\t\t// No overflow - recalculate Row 2 without reserving expand tag space\n\t\t\tconst row2AvailableWithoutExpand = containerWidth - TAG_HOVER_BUTTON_SPACE;\n\t\t\tconst row2FullResult = fitTagsInRow(remainingTags, row2AvailableWithoutExpand, gap);\n\n\t\t\t// Double-check: if even without expand tag we can't fit all, we have overflow\n\t\t\tif (row2FullResult.count < remainingTags.length) {\n\t\t\t\tsetState({\n\t\t\t\t\trow1TagCount: row1Result.count,\n\t\t\t\t\trow2TagCount: row2WithExpandResult.count,\n\t\t\t\t\thasOverflow: true,\n\t\t\t\t});\n\t\t\t} else {\n\t\t\t\tsetState({ row1TagCount: row1Result.count, row2TagCount: row2FullResult.count, hasOverflow: false });\n\t\t\t}\n\t\t}\n\t}, [containerRef, measurementRef]);\n\n\tuseLayoutEffect(() => {\n\t\t// Use requestAnimationFrame to ensure DOM is fully laid out\n\t\tconst rafId = requestAnimationFrame(() => {\n\t\t\tcalculateLayout();\n\t\t});\n\n\t\tconst resizeObserver = new ResizeObserver(() => {\n\t\t\trequestAnimationFrame(() => {\n\t\t\t\tcalculateLayout();\n\t\t\t});\n\t\t});\n\n\t\tif (containerRef.current) {\n\t\t\tresizeObserver.observe(containerRef.current);\n\t\t}\n\n\t\treturn () => {\n\t\t\tcancelAnimationFrame(rafId);\n\t\t\tresizeObserver.disconnect();\n\t\t};\n\t}, [containerRef, measurementRef, totalItems, expanded, calculateLayout]);\n\n\t// When expanded, show all tags\n\tif (expanded) {\n\t\treturn {\n\t\t\trow1TagCount: state.row1TagCount,\n\t\t\trow2TagCount: totalItems - state.row1TagCount,\n\t\t\thasOverflow: true, // Keep expand button visible to allow collapse\n\t\t};\n\t}\n\n\treturn state;\n};\n"],"mappings":"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"}

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

@@ -0,0 +1 @@
+const require_ds_tag_filter = require('./ds-tag-filter.cjs');

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

@@ -0,0 +1,2 @@
+import { DsTagFilterProps, TagFilterItem } from "./ds-tag-filter.types.js";
+import { DsTagFilter } from "./ds-tag-filter.js";

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

@@ -0,0 +1 @@
+import ds_tag_filter_default from "./ds-tag-filter.js";

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

@@ -0,0 +1,54 @@
+
+//#region src/components/ds-tag-filter/utils.ts
+/**
+* Calculate how many tags fit within the available width.
+* Pure function for easy testing.
+*/
+function fitTagsInRow(tagWidths, availableWidth, gap) {
+	let usedWidth = 0;
+	let count = 0;
+	for (const tagWidth of tagWidths) {
+		const widthWithGap = tagWidth + (count > 0 ? gap : 0);
+		if (usedWidth + widthWithGap <= availableWidth) {
+			usedWidth += widthWithGap;
+			count++;
+		} else break;
+	}
+	return {
+		count,
+		usedWidth
+	};
+}
+/**
+* Calculate the available width inside a container, accounting for padding.
+*/
+function getContainerAvailableWidth(container) {
+	const containerRect = container.getBoundingClientRect();
+	const containerStyle = getComputedStyle(container);
+	const paddingLeft = parseFloat(containerStyle.paddingLeft) || 0;
+	const paddingRight = parseFloat(containerStyle.paddingRight) || 0;
+	return containerRect.width - paddingLeft - paddingRight;
+}
+/**
+* Measure all relevant elements (tags, label, buttons) inside the measurement container.
+*/
+function getElementMeasurements(measurementContainer) {
+	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;
+	return {
+		tagWidths: tags.map((tag) => tag.getBoundingClientRect().width),
+		labelWidth: label ? label.getBoundingClientRect().width + gap : 0,
+		clearButtonWidth: clearButton ? clearButton.getBoundingClientRect().width + gap : 0,
+		expandTagWidth: expandTag ? expandTag.getBoundingClientRect().width + gap : 100,
+		gap
+	};
+}
+
+//#endregion
+exports.fitTagsInRow = fitTagsInRow;
+exports.getContainerAvailableWidth = getContainerAvailableWidth;
+exports.getElementMeasurements = getElementMeasurements;

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

@@ -0,0 +1,52 @@
+//#region src/components/ds-tag-filter/utils.ts
+/**
+* Calculate how many tags fit within the available width.
+* Pure function for easy testing.
+*/
+function fitTagsInRow(tagWidths, availableWidth, gap) {
+	let usedWidth = 0;
+	let count = 0;
+	for (const tagWidth of tagWidths) {
+		const widthWithGap = tagWidth + (count > 0 ? gap : 0);
+		if (usedWidth + widthWithGap <= availableWidth) {
+			usedWidth += widthWithGap;
+			count++;
+		} else break;
+	}
+	return {
+		count,
+		usedWidth
+	};
+}
+/**
+* Calculate the available width inside a container, accounting for padding.
+*/
+function getContainerAvailableWidth(container) {
+	const containerRect = container.getBoundingClientRect();
+	const containerStyle = getComputedStyle(container);
+	const paddingLeft = parseFloat(containerStyle.paddingLeft) || 0;
+	const paddingRight = parseFloat(containerStyle.paddingRight) || 0;
+	return containerRect.width - paddingLeft - paddingRight;
+}
+/**
+* Measure all relevant elements (tags, label, buttons) inside the measurement container.
+*/
+function getElementMeasurements(measurementContainer) {
+	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;
+	return {
+		tagWidths: tags.map((tag) => tag.getBoundingClientRect().width),
+		labelWidth: label ? label.getBoundingClientRect().width + gap : 0,
+		clearButtonWidth: clearButton ? clearButton.getBoundingClientRect().width + gap : 0,
+		expandTagWidth: expandTag ? expandTag.getBoundingClientRect().width + gap : 100,
+		gap
+	};
+}
+
+//#endregion
+export { fitTagsInRow, getContainerAvailableWidth, getElementMeasurements };
+//# sourceMappingURL=utils.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","names":["FitTagsResult","count","usedWidth","ElementMeasurements","tagWidths","labelWidth","clearButtonWidth","expandTagWidth","gap","fitTagsInRow","availableWidth","tagWidth","widthWithGap","getContainerAvailableWidth","container","HTMLDivElement","containerRect","getBoundingClientRect","containerStyle","getComputedStyle","paddingLeft","parseFloat","paddingRight","width","getElementMeasurements","measurementContainer","tags","Array","from","querySelectorAll","label","querySelector","clearButton","expandTag","computedStyle","map","tag"],"sources":["../../../src/components/ds-tag-filter/utils.ts"],"sourcesContent":["export interface FitTagsResult {\n\tcount: number;\n\tusedWidth: number;\n}\n\nexport interface ElementMeasurements {\n\ttagWidths: number[];\n\tlabelWidth: number;\n\tclearButtonWidth: number;\n\texpandTagWidth: number;\n\tgap: number;\n}\n\n/**\n * Calculate how many tags fit within the available width.\n * Pure function for easy testing.\n */\nexport function fitTagsInRow(tagWidths: number[], availableWidth: number, gap: number): FitTagsResult {\n\tlet usedWidth = 0;\n\tlet count = 0;\n\n\tfor (const tagWidth of tagWidths) {\n\t\tconst widthWithGap = tagWidth + (count > 0 ? gap : 0);\n\t\tif (usedWidth + widthWithGap <= availableWidth) {\n\t\t\tusedWidth += widthWithGap;\n\t\t\tcount++;\n\t\t} else {\n\t\t\tbreak;\n\t\t}\n\t}\n\n\treturn { count, usedWidth };\n}\n\n/**\n * Calculate the available width inside a container, accounting for padding.\n */\nexport function getContainerAvailableWidth(container: HTMLDivElement): number {\n\tconst containerRect = container.getBoundingClientRect();\n\tconst containerStyle = getComputedStyle(container);\n\tconst paddingLeft = parseFloat(containerStyle.paddingLeft) || 0;\n\tconst paddingRight = parseFloat(containerStyle.paddingRight) || 0;\n\treturn containerRect.width - paddingLeft - paddingRight;\n}\n\n/**\n * Measure all relevant elements (tags, label, buttons) inside the measurement container.\n */\nexport function getElementMeasurements(measurementContainer: HTMLDivElement): ElementMeasurements {\n\tconst tags = Array.from(measurementContainer.querySelectorAll('[data-measure-tag]'));\n\tconst label = measurementContainer.querySelector('[data-measure-label]');\n\tconst clearButton = measurementContainer.querySelector('[data-measure-clear]');\n\tconst expandTag = measurementContainer.querySelector('[data-measure-expand]');\n\n\tconst computedStyle = getComputedStyle(measurementContainer);\n\tconst gap = parseFloat(computedStyle.gap) || 8;\n\n\tconst tagWidths = tags.map((tag) => tag.getBoundingClientRect().width);\n\tconst labelWidth = label ? label.getBoundingClientRect().width + gap : 0;\n\tconst clearButtonWidth = clearButton ? clearButton.getBoundingClientRect().width + gap : 0;\n\t// Fallback width for expand tag (~100px for \"+99 filters\" text) if measurement fails\n\tconst expandTagWidth = expandTag ? expandTag.getBoundingClientRect().width + gap : 100;\n\n\treturn { tagWidths, labelWidth, clearButtonWidth, expandTagWidth, gap };\n}\n"],"mappings":";;;;;AAiBA,SAAgBS,aAAaL,WAAqBM,gBAAwBF,KAA4B;CACrG,IAAIN,YAAY;CAChB,IAAID,QAAQ;AAEZ,MAAK,MAAMU,YAAYP,WAAW;EACjC,MAAMQ,eAAeD,YAAYV,QAAQ,IAAIO,MAAM;AACnD,MAAIN,YAAYU,gBAAgBF,gBAAgB;AAC/CR,gBAAaU;AACbX;QAEA;;AAIF,QAAO;EAAEA;EAAOC;EAAW;;;;;AAM5B,SAAgBW,2BAA2BC,WAAmC;CAC7E,MAAME,gBAAgBF,UAAUG,uBAAuB;CACvD,MAAMC,iBAAiBC,iBAAiBL,UAAU;CAClD,MAAMM,cAAcC,WAAWH,eAAeE,YAAY,IAAI;CAC9D,MAAME,eAAeD,WAAWH,eAAeI,aAAa,IAAI;AAChE,QAAON,cAAcO,QAAQH,cAAcE;;;;;AAM5C,SAAgBE,uBAAuBC,sBAA2D;CACjG,MAAMC,OAAOC,MAAMC,KAAKH,qBAAqBI,iBAAiB,qBAAqB,CAAC;CACpF,MAAMC,QAAQL,qBAAqBM,cAAc,uBAAuB;CACxE,MAAMC,cAAcP,qBAAqBM,cAAc,uBAAuB;CAC9E,MAAME,YAAYR,qBAAqBM,cAAc,wBAAwB;CAE7E,MAAMG,gBAAgBf,iBAAiBM,qBAAqB;CAC5D,MAAMjB,MAAMa,WAAWa,cAAc1B,IAAI,IAAI;AAQ7C,QAAO;EAAEJ,WANSsB,KAAKS,KAAKC,QAAQA,IAAInB,uBAAuB,CAACM,MAAM;EAMlDlB,YALDyB,QAAQA,MAAMb,uBAAuB,CAACM,QAAQf,MAAM;EAKvCF,kBAJP0B,cAAcA,YAAYf,uBAAuB,CAACM,QAAQf,MAAM;EAIvCD,gBAF3B0B,YAAYA,UAAUhB,uBAAuB,CAACM,QAAQf,MAAM;EAEjBA;EAAK"}