@ultraviolet/ui 3.11.1 → 3.12.0

package/dist/components/TagInput/styles.css.d.ts

@@ -3,23 +3,25 @@ export declare const TAGINPUT_SIZE_PADDING: {
     readonly medium: "1";
     readonly small: "0.5";
 };
-export declare const tagInputContainer: import("@vanilla-extract/recipes").RuntimeFn<{
-    size: {
-        large: {
-            minHeight: `var(--${string})`;
-            padding: `calc(var(--${string}) - 1px) var(--${string})`;
+export declare const tagInputStyle: {
+    container: import("@vanilla-extract/recipes").RuntimeFn<{
+        size: {
+            large: {
+                minHeight: `var(--${string})`;
+                padding: `calc(var(--${string}) - 1px) var(--${string})`;
+            };
+            medium: {
+                minHeight: `var(--${string})`;
+                padding: `calc(var(--${string}) - 1px) var(--${string})`;
+            };
+            small: {
+                minHeight: `var(--${string})`;
+                padding: `calc(var(--${string}) - 1px) var(--${string})`;
+            };
         };
-        medium: {
-            minHeight: `var(--${string})`;
-            padding: `calc(var(--${string}) - 1px) var(--${string})`;
-        };
-        small: {
-            minHeight: `var(--${string})`;
-            padding: `calc(var(--${string}) - 1px) var(--${string})`;
-        };
-    };
-}>;
-export declare const tagInputDataContainer: string;
-export declare const tagInputStateContainer: string;
-export declare const tagInput: string;
+    }>;
+    dataContainer: string;
+    stateContainer: string;
+    tagInput: string;
+};
 //# sourceMappingURL=styles.css.d.ts.map

package/dist/components/TagInput/styles.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../../../src/components/TagInput/styles.css.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,qBAAqB;;;;CAIxB,CAAA;AAEV,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;EA6D5B,CAAA;AAEF,eAAO,MAAM,qBAAqB,QAOhC,CAAA;AAEF,eAAO,MAAM,sBAAsB,QAIjC,CAAA;AAEF,eAAO,MAAM,QAAQ,QAoBnB,CAAA"}
+{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../../../src/components/TagInput/styles.css.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,qBAAqB;;;;CAIxB,CAAA;AAsGV,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;CAKzB,CAAA"}

package/dist/components/TagInput/styles.css.js

@@ -1,20 +1,28 @@
-/* empty css                      */
+import { __esmMin } from "../../_virtual/_rolldown/runtime.js";
+import { init_styles_css_ts_vanilla } from "./styles.css.ts.vanilla.js";
 import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
 
 //#region src/components/TagInput/styles.css.ts
-var tagInputContainer = createRuntimeFn({
-	defaultClassName: "uv_sjgcm20",
-	variantClassNames: { size: {
-		large: "uv_sjgcm21",
-		medium: "uv_sjgcm22",
-		small: "uv_sjgcm23"
-	} },
-	defaultVariants: { size: "large" },
-	compoundVariants: []
+var tagInputStyle;
+var init_styles_css = __esmMin(() => {
+	init_styles_css_ts_vanilla();
+	tagInputStyle = {
+		container: createRuntimeFn({
+			defaultClassName: "uv_sjgcm20",
+			variantClassNames: { size: {
+				large: "uv_sjgcm21",
+				medium: "uv_sjgcm22",
+				small: "uv_sjgcm23"
+			} },
+			defaultVariants: { size: "large" },
+			compoundVariants: []
+		}),
+		dataContainer: "uv_sjgcm24",
+		stateContainer: "uv_sjgcm25",
+		tagInput: "uv_sjgcm26"
+	};
 });
-var tagInputDataContainer = "uv_sjgcm24";
-var tagInputStateContainer = "uv_sjgcm25";
-var tagInput = "uv_sjgcm26";
 
 //#endregion
-export { tagInput, tagInputContainer, tagInputDataContainer, tagInputStateContainer };
+init_styles_css();
+export { init_styles_css, tagInputStyle };

package/dist/components/TagInput/styles.css.ts.vanilla.js

@@ -0,0 +1,8 @@
+import { __esmMin } from "../../_virtual/_rolldown/runtime.js";
+
+//#region src/components/TagInput/styles.css.ts.vanilla.css
+var init_styles_css_ts_vanilla = __esmMin(() => {});
+
+//#endregion
+init_styles_css_ts_vanilla();
+export { init_styles_css_ts_vanilla };

package/dist/components/TagList/constant.js

@@ -1,7 +1,12 @@
+import { __esmMin } from "../../_virtual/_rolldown/runtime.js";
 import { consoleLightTheme } from "@ultraviolet/themes";
 
 //#region src/components/TagList/constant.ts
-const TAGS_GAP = consoleLightTheme.space["1"];
+var TAGS_GAP;
+var init_constant = __esmMin(() => {
+	TAGS_GAP = consoleLightTheme.space["1"];
+});
 
 //#endregion
-export { TAGS_GAP };
+init_constant();
+export { TAGS_GAP, init_constant };

package/dist/components/TagList/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/TagList/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,cAAc,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAErE,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAA;AACpC,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAa5B,MAAM,MAAM,OAAO,GAAG,MAAM,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,SAAS,CAAA;CAAE,CAAA;AAEjE,KAAK,YAAY,GAAG;IAClB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,IAAI,CAAC,EAAE,OAAO,EAAE,CAAA;IAChB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;OAEG;IACH,YAAY,EAAE,MAAM,CAAA;IACpB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,cAAc,CAAC,OAAO,OAAO,CAAC,CAAC,WAAW,CAAC,CAAA;IAC9D;;OAEG;IACH,gBAAgB,CAAC,EAAE,cAAc,CAAC,OAAO,OAAO,CAAC,CAAC,WAAW,CAAC,CAAA;IAC9D,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,KAAK,CAAC,EAAE,aAAa,CAAA;CACtB,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,EAAE,UAAU,GAAG,UAAU,GAAG,YAAY,CAAC,CAAA;AAO5E;;GAEG;AACH,eAAO,MAAM,OAAO,6OAkSnB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/TagList/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,cAAc,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAErE,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAA;AACpC,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAM5B,MAAM,MAAM,OAAO,GAAG,MAAM,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,SAAS,CAAA;CAAE,CAAA;AAEjE,KAAK,YAAY,GAAG;IAClB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,IAAI,CAAC,EAAE,OAAO,EAAE,CAAA;IAChB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;OAEG;IACH,YAAY,EAAE,MAAM,CAAA;IACpB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,cAAc,CAAC,OAAO,OAAO,CAAC,CAAC,WAAW,CAAC,CAAA;IAC9D;;OAEG;IACH,gBAAgB,CAAC,EAAE,cAAc,CAAC,OAAO,OAAO,CAAC,CAAC,WAAW,CAAC,CAAA;IAC9D,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,KAAK,CAAC,EAAE,aAAa,CAAA;CACtB,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,EAAE,UAAU,GAAG,UAAU,GAAG,YAAY,CAAC,CAAA;AAO5E;;GAEG;AACH,eAAO,MAAM,OAAO,6OAmSnB,CAAA"}

package/dist/components/TagList/index.js

@@ -1,178 +1,184 @@
 'use client';
-import { __name } from "../../_virtual/_rolldown/runtime.js";
-import { _objectSpread2 } from "../../_virtual/_@oxc-project_runtime@0.114.0/helpers/objectSpread2.js";
-import { Tag } from "../Tag/index.js";
-import { Popover } from "../Popover/index.js";
-import { TAGS_GAP } from "./constant.js";
-import { ellipsisChild, ellipsisContainer, popoverTriggerWidthVar, tagContainer, tagListContainer, tagsWrapper } from "./styles.css.js";
+import { __esmMin, __name } from "../../_virtual/_rolldown/runtime.js";
+import { _objectSpread2, init_objectSpread2 } from "../../_virtual/_@oxc-project_runtime@0.115.0/helpers/objectSpread2.js";
+import { Tag, init_Tag } from "../Tag/index.js";
+import { Popover, init_Popover } from "../Popover/index.js";
+import { TAGS_GAP, init_constant } from "./constant.js";
+import { init_styles_css, popoverTriggerWidthVar, tagListStyle } from "./styles.css.js";
 import { useEffect, useMemo, useRef, useState } from "react";
+import { cn } from "@ultraviolet/utils";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { cn } from "@ultraviolet/utils";
 
 //#region src/components/TagList/index.tsx
-const DEFAULT_POPOVER_MAX_HEIGHT = "16rem";
-const DEFAULT_TAGS = [];
-const getTagLabel = (tag) => typeof tag === "object" ? tag.label : tag;
-/**
-* This component is used to display a list of tags with a threshold and a popover when there are too many tags.
-*/
-const TagList = ({ maxLength = 600, tags = DEFAULT_TAGS, threshold = 1, multiline = false, popoverTitle, popoverPlacement, popoverMaxHeight = DEFAULT_POPOVER_MAX_HEIGHT, copiable, copyText, copiedText, className, "data-testid": dataTestId, style }) => {
-	const containerRef = useRef(null);
-	const measureRef = useRef(null);
-	const popoverTriggerRef = useRef(null);
-	const [isReady, setIsReady] = useState(false);
-	const [isPopoverVisible, setIsPopoverVisible] = useState(false);
-	const [popoverTriggerWidth, setPopoverTriggerWidth] = useState(0);
-	const [visibleTags, setVisibleTags] = useState([]);
-	const [hiddenTags, setHiddenTags] = useState([]);
-	const { tmpThreshold, potentiallyVisibleTags, surelyHiddenTags } = useMemo(() => {
-		let tmpThreshold = threshold;
-		while (tmpThreshold > 1 && tags.length > 0 && tags.slice(0, tmpThreshold).reduce((acc, tag) => acc + getTagLabel(tag), "").length > maxLength) tmpThreshold -= 1;
-		const potentiallyVisibleTagsLength = Math.max(1, tags.length > tmpThreshold ? tmpThreshold : tags.length);
-		return {
-			potentiallyVisibleTags: tags.slice(0, potentiallyVisibleTagsLength),
-			surelyHiddenTags: tags.slice(potentiallyVisibleTagsLength),
-			tmpThreshold
-		};
-	}, [
-		maxLength,
-		tags,
-		threshold
-	]);
-	useEffect(() => {
-		var _containerRef$current;
-		var _containerRef$current2;
-		if (tags.length === 0 || !containerRef.current || !measureRef.current) return;
-		if (multiline) {
-			setVisibleTags(potentiallyVisibleTags);
-			setHiddenTags(surelyHiddenTags);
-			setIsReady(true);
-			return;
-		}
-		const parentWidth = (_containerRef$current = (_containerRef$current2 = containerRef.current.parentElement) === null || _containerRef$current2 === void 0 ? void 0 : _containerRef$current2.offsetWidth) !== null && _containerRef$current !== void 0 ? _containerRef$current : 0;
-		const [firstTag, ...restOfToMeasureElements] = [...measureRef.current.children[0].children];
-		const { measuredVisibleTags, measuredHiddenTags } = restOfToMeasureElements.reduce((accumulator, currentValue, index) => {
-			const newAccumulatedWidth = accumulator.accumulatedWidth + currentValue.offsetWidth + Number.parseInt(TAGS_GAP, 10);
+var DEFAULT_POPOVER_MAX_HEIGHT, DEFAULT_TAGS, getTagLabel, TagList;
+var init_TagList = __esmMin(() => {
+	init_Popover();
+	init_Tag();
+	init_constant();
+	init_styles_css();
+	init_objectSpread2();
+	DEFAULT_POPOVER_MAX_HEIGHT = "16rem";
+	DEFAULT_TAGS = [];
+	getTagLabel = (tag) => typeof tag === "object" ? tag.label : tag;
+	TagList = ({ maxLength = 600, tags = DEFAULT_TAGS, threshold = 1, multiline = false, popoverTitle, popoverPlacement, popoverMaxHeight = DEFAULT_POPOVER_MAX_HEIGHT, copiable, copyText, copiedText, className, "data-testid": dataTestId, style }) => {
+		const containerRef = useRef(null);
+		const measureRef = useRef(null);
+		const popoverTriggerRef = useRef(null);
+		const [isReady, setIsReady] = useState(false);
+		const [isPopoverVisible, setIsPopoverVisible] = useState(false);
+		const [popoverTriggerWidth, setPopoverTriggerWidth] = useState(0);
+		const [visibleTags, setVisibleTags] = useState([]);
+		const [hiddenTags, setHiddenTags] = useState([]);
+		const { tmpThreshold, potentiallyVisibleTags, surelyHiddenTags } = useMemo(() => {
+			let tmpThreshold = threshold;
+			while (tmpThreshold > 1 && tags.length > 0 && tags.slice(0, tmpThreshold).reduce((acc, tag) => acc + getTagLabel(tag), "").length > maxLength) tmpThreshold -= 1;
+			const potentiallyVisibleTagsLength = Math.max(1, tags.length > tmpThreshold ? tmpThreshold : tags.length);
 			return {
-				accumulatedWidth: newAccumulatedWidth,
-				measuredHiddenTags: [...accumulator.measuredHiddenTags, newAccumulatedWidth > parentWidth && tags[index + 1]].filter(Boolean),
-				measuredVisibleTags: [...accumulator.measuredVisibleTags, newAccumulatedWidth <= parentWidth && tags[index + 1]].filter(Boolean)
+				potentiallyVisibleTags: tags.slice(0, potentiallyVisibleTagsLength),
+				surelyHiddenTags: tags.slice(potentiallyVisibleTagsLength),
+				tmpThreshold
 			};
-		}, {
-			accumulatedWidth: firstTag.offsetWidth + Number.parseInt(TAGS_GAP, 10),
-			measuredHiddenTags: [],
-			measuredVisibleTags: [tags[0]]
-		});
-		const finalHiddenTags = [...measuredHiddenTags, ...surelyHiddenTags];
-		setVisibleTags(measuredVisibleTags);
-		setHiddenTags(finalHiddenTags);
-		if (finalHiddenTags.length === 0) setIsReady(true);
-	}, [
-		multiline,
-		potentiallyVisibleTags,
-		surelyHiddenTags,
-		tags,
-		threshold,
-		tmpThreshold
-	]);
-	useEffect(() => {
-		var _popoverTriggerRef$cu;
-		if (!isReady && ((_popoverTriggerRef$cu = popoverTriggerRef.current) === null || _popoverTriggerRef$cu === void 0 ? void 0 : _popoverTriggerRef$cu.offsetWidth)) {
-			var _containerRef$current3;
-			var _containerRef$current4;
-			var _tagsContainer$parent;
-			var _tagsContainer$parent2;
-			const newPopoverTriggerWidth = popoverTriggerRef.current.offsetWidth;
-			setPopoverTriggerWidth(newPopoverTriggerWidth);
-			const tagsContainer = containerRef.current;
-			const tagsContainerWidth = (_containerRef$current3 = (_containerRef$current4 = containerRef.current) === null || _containerRef$current4 === void 0 ? void 0 : _containerRef$current4.offsetWidth) !== null && _containerRef$current3 !== void 0 ? _containerRef$current3 : 0;
-			const parentWidth = (_tagsContainer$parent = tagsContainer === null || tagsContainer === void 0 || (_tagsContainer$parent2 = tagsContainer.parentElement) === null || _tagsContainer$parent2 === void 0 ? void 0 : _tagsContainer$parent2.offsetWidth) !== null && _tagsContainer$parent !== void 0 ? _tagsContainer$parent : 0;
-			if (visibleTags.length > 1 && hiddenTags.length > 0 && tagsContainerWidth + newPopoverTriggerWidth > parentWidth) {
-				var _visibleTags$at;
-				const visibleTagsCopy = visibleTags.filter((_, index) => index < visibleTags.length - 1);
-				const tagToMove = (_visibleTags$at = visibleTags.at(-1)) !== null && _visibleTags$at !== void 0 ? _visibleTags$at : "";
-				setVisibleTags(visibleTagsCopy);
-				setHiddenTags([tagToMove, ...hiddenTags]);
+		}, [
+			maxLength,
+			tags,
+			threshold
+		]);
+		useEffect(() => {
+			var _containerRef$current;
+			var _containerRef$current2;
+			if (tags.length === 0 || !containerRef.current || !measureRef.current) return;
+			if (multiline) {
+				setVisibleTags(potentiallyVisibleTags);
+				setHiddenTags(surelyHiddenTags);
+				setIsReady(true);
+				return;
 			}
-			setIsReady(true);
-		}
-	}, [
-		hiddenTags,
-		isReady,
-		threshold,
-		visibleTags,
-		visibleTags.length
-	]);
-	useEffect(() => {
-		var _measureRef$current;
-		if (isReady && ((_measureRef$current = measureRef.current) === null || _measureRef$current === void 0 ? void 0 : _measureRef$current.parentNode)) measureRef.current.remove();
-	}, [isReady]);
-	if (tags.length === 0) return null;
-	const renderTag = (tag, index, isEllipsis = false) => typeof tag !== "string" && tag.icon ? /* @__PURE__ */ jsxs(Tag, {
-		className: cn(isEllipsis ? "ellipsed" : "", ellipsisChild),
-		copiable,
-		copiedText,
-		copyText,
-		children: [tag.icon, getTagLabel(tag)]
-	}, `${getTagLabel(tag)}-${index}`) : /* @__PURE__ */ jsx(Tag, {
-		className: cn(isEllipsis ? "ellipsed" : "", ellipsisChild),
-		copiable,
-		copiedText,
-		copyText,
-		children: getTagLabel(tag)
-	}, `${getTagLabel(tag)}-${index}`);
-	return /* @__PURE__ */ jsxs("div", {
-		className: cn(className, tagListContainer),
-		"data-testid": dataTestId,
-		style: _objectSpread2({ visibility: isReady ? "visible" : "hidden" }, style),
-		children: [
-			/* @__PURE__ */ jsx("div", {
-				className: cn(tagContainer({ multiline }), visibleTags.length === 1 && hiddenTags.length === 0 || popoverTriggerWidth ? ellipsisContainer : ""),
-				"data-testid": `${dataTestId !== null && dataTestId !== void 0 ? dataTestId : "taglist"}-container`,
-				ref: containerRef,
-				style: assignInlineVars({ [popoverTriggerWidthVar]: `${popoverTriggerWidth || 0}px` }),
-				children: visibleTags.map((tag, index) => renderTag(tag, index, index === visibleTags.length - 1))
-			}),
-			/* @__PURE__ */ jsx("div", {
-				ref: measureRef,
-				style: {
-					position: "absolute",
-					visibility: "hidden",
-					whiteSpace: "nowrap"
-				},
-				children: /* @__PURE__ */ jsx("div", {
-					className: tagContainer({ multiline }),
-					"data-testid": `${dataTestId !== null && dataTestId !== void 0 ? dataTestId : "taglist"}-measure-container`,
-					children: potentiallyVisibleTags.map((tag, index) => renderTag(tag, index))
-				})
-			}),
-			hiddenTags.length > 0 && /* @__PURE__ */ jsx(Popover, {
-				content: /* @__PURE__ */ jsx("div", {
-					className: tagContainer({ multiline: true }),
-					children: hiddenTags.map((tag, index) => renderTag(tag, index))
+			const parentWidth = (_containerRef$current = (_containerRef$current2 = containerRef.current.parentElement) === null || _containerRef$current2 === void 0 ? void 0 : _containerRef$current2.offsetWidth) !== null && _containerRef$current !== void 0 ? _containerRef$current : 0;
+			const [firstTag, ...restOfToMeasureElements] = [...measureRef.current.children[0].children];
+			const { measuredVisibleTags, measuredHiddenTags } = restOfToMeasureElements.reduce((accumulator, currentValue, index) => {
+				const newAccumulatedWidth = accumulator.accumulatedWidth + currentValue.offsetWidth + Number.parseInt(TAGS_GAP, 10);
+				return {
+					accumulatedWidth: newAccumulatedWidth,
+					measuredHiddenTags: [...accumulator.measuredHiddenTags, newAccumulatedWidth > parentWidth && tags[index + 1]].filter(Boolean),
+					measuredVisibleTags: [...accumulator.measuredVisibleTags, newAccumulatedWidth <= parentWidth && tags[index + 1]].filter(Boolean)
+				};
+			}, {
+				accumulatedWidth: firstTag.offsetWidth + Number.parseInt(TAGS_GAP, 10),
+				measuredHiddenTags: [],
+				measuredVisibleTags: [tags[0]]
+			});
+			const finalHiddenTags = [...measuredHiddenTags, ...surelyHiddenTags];
+			setVisibleTags(measuredVisibleTags);
+			setHiddenTags(finalHiddenTags);
+			if (finalHiddenTags.length === 0) setIsReady(true);
+		}, [
+			multiline,
+			potentiallyVisibleTags,
+			surelyHiddenTags,
+			tags,
+			threshold,
+			tmpThreshold
+		]);
+		useEffect(() => {
+			var _popoverTriggerRef$cu;
+			if (!isReady && ((_popoverTriggerRef$cu = popoverTriggerRef.current) === null || _popoverTriggerRef$cu === void 0 ? void 0 : _popoverTriggerRef$cu.offsetWidth)) {
+				var _containerRef$current3;
+				var _containerRef$current4;
+				var _tagsContainer$parent;
+				var _tagsContainer$parent2;
+				const newPopoverTriggerWidth = popoverTriggerRef.current.offsetWidth;
+				setPopoverTriggerWidth(newPopoverTriggerWidth);
+				const tagsContainer = containerRef.current;
+				const tagsContainerWidth = (_containerRef$current3 = (_containerRef$current4 = containerRef.current) === null || _containerRef$current4 === void 0 ? void 0 : _containerRef$current4.offsetWidth) !== null && _containerRef$current3 !== void 0 ? _containerRef$current3 : 0;
+				const parentWidth = (_tagsContainer$parent = tagsContainer === null || tagsContainer === void 0 || (_tagsContainer$parent2 = tagsContainer.parentElement) === null || _tagsContainer$parent2 === void 0 ? void 0 : _tagsContainer$parent2.offsetWidth) !== null && _tagsContainer$parent !== void 0 ? _tagsContainer$parent : 0;
+				if (visibleTags.length > 1 && hiddenTags.length > 0 && tagsContainerWidth + newPopoverTriggerWidth > parentWidth) {
+					var _visibleTags$at;
+					const visibleTagsCopy = visibleTags.filter((_, index) => index < visibleTags.length - 1);
+					const tagToMove = (_visibleTags$at = visibleTags.at(-1)) !== null && _visibleTags$at !== void 0 ? _visibleTags$at : "";
+					setVisibleTags(visibleTagsCopy);
+					setHiddenTags([tagToMove, ...hiddenTags]);
+				}
+				setIsReady(true);
+			}
+		}, [
+			hiddenTags,
+			isReady,
+			threshold,
+			visibleTags,
+			visibleTags.length
+		]);
+		useEffect(() => {
+			var _measureRef$current;
+			if (isReady && ((_measureRef$current = measureRef.current) === null || _measureRef$current === void 0 ? void 0 : _measureRef$current.parentNode)) measureRef.current.remove();
+		}, [isReady]);
+		if (tags.length === 0) return null;
+		const renderTag = (tag, index, isEllipsis = false) => typeof tag !== "string" && tag.icon ? /* @__PURE__ */ jsxs(Tag, {
+			className: cn(isEllipsis ? "ellipsed" : "", tagListStyle.ellipsisChild),
+			copiable,
+			copiedText,
+			copyText,
+			children: [tag.icon, getTagLabel(tag)]
+		}, `${getTagLabel(tag)}-${index}`) : /* @__PURE__ */ jsx(Tag, {
+			className: cn(isEllipsis ? "ellipsed" : "", tagListStyle.ellipsisChild),
+			copiable,
+			copiedText,
+			copyText,
+			children: getTagLabel(tag)
+		}, `${getTagLabel(tag)}-${index}`);
+		return /* @__PURE__ */ jsxs("div", {
+			className: cn(className, tagListStyle.container),
+			"data-testid": dataTestId,
+			style: _objectSpread2({ visibility: isReady ? "visible" : "hidden" }, style),
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					className: cn(tagListStyle.tagContainer({ multiline }), visibleTags.length === 1 && hiddenTags.length === 0 || popoverTriggerWidth ? tagListStyle.ellipsisContainer : ""),
+					"data-testid": `${dataTestId !== null && dataTestId !== void 0 ? dataTestId : "taglist"}-container`,
+					ref: containerRef,
+					style: assignInlineVars({ [popoverTriggerWidthVar]: `${popoverTriggerWidth || 0}px` }),
+					children: visibleTags.map((tag, index) => renderTag(tag, index, index === visibleTags.length - 1))
 				}),
-				maxHeight: popoverMaxHeight,
-				onClose: () => setIsPopoverVisible(false),
-				placement: popoverPlacement,
-				size: "small",
-				title: popoverTitle,
-				visible: isPopoverVisible,
-				children: /* @__PURE__ */ jsxs("span", {
-					className: "uv_1f9zr5y6",
-					"data-testid": `${dataTestId !== null && dataTestId !== void 0 ? dataTestId : "taglist"}-open`,
-					onClick: () => setIsPopoverVisible(true),
-					onKeyDown: (event) => {
-						if ([" ", "Enter"].includes(event.key)) setIsPopoverVisible(true);
+				/* @__PURE__ */ jsx("div", {
+					ref: measureRef,
+					style: {
+						position: "absolute",
+						visibility: "hidden",
+						whiteSpace: "nowrap"
 					},
-					ref: popoverTriggerRef,
-					tabIndex: 0,
-					children: ["+", hiddenTags.length]
+					children: /* @__PURE__ */ jsx("div", {
+						className: tagListStyle.tagContainer({ multiline }),
+						"data-testid": `${dataTestId !== null && dataTestId !== void 0 ? dataTestId : "taglist"}-measure-container`,
+						children: potentiallyVisibleTags.map((tag, index) => renderTag(tag, index))
+					})
+				}),
+				hiddenTags.length > 0 && /* @__PURE__ */ jsx(Popover, {
+					content: /* @__PURE__ */ jsx("div", {
+						className: tagListStyle.tagContainer({ multiline: true }),
+						children: hiddenTags.map((tag, index) => renderTag(tag, index))
+					}),
+					maxHeight: popoverMaxHeight,
+					onClose: () => setIsPopoverVisible(false),
+					placement: popoverPlacement,
+					size: "small",
+					title: popoverTitle,
+					visible: isPopoverVisible,
+					children: /* @__PURE__ */ jsxs("span", {
+						className: tagListStyle.tagsWrapper,
+						"data-testid": `${dataTestId !== null && dataTestId !== void 0 ? dataTestId : "taglist"}-open`,
+						onClick: () => setIsPopoverVisible(true),
+						onKeyDown: (event) => {
+							if ([" ", "Enter"].includes(event.key)) setIsPopoverVisible(true);
+						},
+						ref: popoverTriggerRef,
+						tabIndex: 0,
+						children: ["+", hiddenTags.length]
+					})
 				})
-			})
-		]
-	});
-};
+			]
+		});
+	};
+});
 
 //#endregion
-export { TagList };
+init_TagList();
+export { TagList, init_TagList };

package/dist/components/TagList/styles.css.d.ts

@@ -1,13 +1,15 @@
 export declare const popoverTriggerWidthVar: `var(--${string})`;
-export declare const tagListContainer: string;
-export declare const tagContainer: import("@vanilla-extract/recipes").RuntimeFn<{
-    multiline: {
-        true: {
-            flexWrap: "wrap";
+export declare const tagListStyle: {
+    container: string;
+    tagContainer: import("@vanilla-extract/recipes").RuntimeFn<{
+        multiline: {
+            true: {
+                flexWrap: "wrap";
+            };
         };
-    };
-}>;
-export declare const ellipsisContainer: string;
-export declare const ellipsisChild: string;
-export declare const tagsWrapper: string;
+    }>;
+    ellipsisChild: string;
+    ellipsisContainer: string;
+    tagsWrapper: string;
+};
 //# sourceMappingURL=styles.css.d.ts.map

package/dist/components/TagList/styles.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../../../src/components/TagList/styles.css.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,sBAAsB,oBAAc,CAAA;AAEjD,eAAO,MAAM,gBAAgB,QAA6B,CAAA;AAE1D,eAAO,MAAM,YAAY;;;;;;EAcvB,CAAA;AAEF,eAAO,MAAM,iBAAiB,QAO5B,CAAA;AAEF,eAAO,MAAM,aAAa,QAOxB,CAAA;AAEF,eAAO,MAAM,WAAW,QAatB,CAAA"}
+{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../../../src/components/TagList/styles.css.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,sBAAsB,oBAAc,CAAA;AAqDjD,eAAO,MAAM,YAAY;;;;;;;;;;;;CAMxB,CAAA"}

package/dist/components/TagList/styles.css.js

@@ -1,18 +1,26 @@
-/* empty css                      */
+import { __esmMin } from "../../_virtual/_rolldown/runtime.js";
+import { init_styles_css_ts_vanilla } from "./styles.css.ts.vanilla.js";
 import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
 
 //#region src/components/TagList/styles.css.ts
-var popoverTriggerWidthVar = "var(--uv_1f9zr5y0)";
-var tagListContainer = "uv_1f9zr5y1";
-var tagContainer = createRuntimeFn({
-	defaultClassName: "uv_1f9zr5y2",
-	variantClassNames: { multiline: { true: "uv_1f9zr5y3" } },
-	defaultVariants: {},
-	compoundVariants: []
+var popoverTriggerWidthVar, tagListStyle;
+var init_styles_css = __esmMin(() => {
+	init_styles_css_ts_vanilla();
+	popoverTriggerWidthVar = "var(--uv_1f9zr5y0)";
+	tagListStyle = {
+		container: "uv_1f9zr5y1",
+		tagContainer: createRuntimeFn({
+			defaultClassName: "uv_1f9zr5y2",
+			variantClassNames: { multiline: { true: "uv_1f9zr5y3" } },
+			defaultVariants: {},
+			compoundVariants: []
+		}),
+		ellipsisChild: "uv_1f9zr5y5",
+		ellipsisContainer: "uv_1f9zr5y4",
+		tagsWrapper: "uv_1f9zr5y6"
+	};
 });
-var ellipsisContainer = "uv_1f9zr5y4";
-var ellipsisChild = "uv_1f9zr5y5";
-var tagsWrapper = "uv_1f9zr5y6";
 
 //#endregion
-export { ellipsisChild, ellipsisContainer, popoverTriggerWidthVar, tagContainer, tagListContainer, tagsWrapper };
+init_styles_css();
+export { init_styles_css, popoverTriggerWidthVar, tagListStyle };

package/dist/components/TagList/styles.css.ts.vanilla.js

@@ -0,0 +1,8 @@
+import { __esmMin } from "../../_virtual/_rolldown/runtime.js";
+
+//#region src/components/TagList/styles.css.ts.vanilla.css
+var init_styles_css_ts_vanilla = __esmMin(() => {});
+
+//#endregion
+init_styles_css_ts_vanilla();
+export { init_styles_css_ts_vanilla };