@ultraviolet/ui 3.21.1 → 3.21.2

package/dist/components/SelectInput/components/Dropdown/SelectAll.js

@@ -9,69 +9,71 @@ import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/components/SelectInput/components/Dropdown/SelectAll.tsx
 var SelectAll;
-var init_SelectAll = __esmMin(() => {
-	init_Checkbox();
-	init_Stack();
-	init_Text();
-	init_SelectInputProvider();
-	init_styles_css();
-	SelectAll = ({ textVariant }) => {
-		const { onChange, options, numberOfOptions, numberOfDisabledOptions, multiselect, selectAll, setSelectedData, selectedData, size } = useSelectInput();
-		if (!(selectAll && multiselect)) return null;
-		const allSelected = selectedData.selectedValues.length === numberOfOptions - numberOfDisabledOptions;
-		const selectAllOptions = () => {
-			setSelectedData({ type: "selectAll" });
-			if (!onChange) return;
-			let newValues = [];
-			if (!allSelected) newValues = (Array.isArray(options) ? options : Object.values(options).flat()).filter((option) => !option.disabled).map((option) => option.value);
-			onChange(newValues);
-		};
-		return /* @__PURE__ */ jsx(Stack, {
-			gap: .25,
-			id: "items",
-			tabIndex: -1,
-			className: selectInputStyle.dropdownSection,
-			children: /* @__PURE__ */ jsx("div", {
-				"aria-label": "select-all",
-				"aria-selected": allSelected,
-				className: cn(selectInputStyle.dropdownItem({
-					selected: allSelected,
-					size
-				})),
-				"data-testid": "select-all",
-				onClick: selectAllOptions,
-				onKeyDown: (event) => [" ", "Enter"].includes(event.key) ? selectAllOptions() : null,
-				role: "option",
-				tabIndex: 0,
-				children: /* @__PURE__ */ jsx(Checkbox, {
-					checked: allSelected,
-					className: selectInputStyle.dropdownCheckbox,
-					"data-testid": "select-all-checkbox",
-					disabled: false,
-					onChange: selectAllOptions,
-					tabIndex: -1,
-					value: "select-all",
-					children: /* @__PURE__ */ jsxs(Stack, {
-						direction: "column",
-						children: [/* @__PURE__ */ jsx(Text, {
-							as: "span",
-							placement: "left",
-							variant: textVariant,
-							children: selectAll === null || selectAll === void 0 ? void 0 : selectAll.label
-						}), /* @__PURE__ */ jsx(Text, {
-							as: "span",
-							placement: "left",
-							prominence: "weak",
-							sentiment: "neutral",
-							variant: size === "large" ? "bodySmall" : "caption",
-							children: selectAll === null || selectAll === void 0 ? void 0 : selectAll.description
-						})]
+function init_SelectAll() {
+	return (init_SelectAll = __esmMin(() => {
+		init_Checkbox();
+		init_Stack();
+		init_Text();
+		init_SelectInputProvider();
+		init_styles_css();
+		SelectAll = ({ textVariant }) => {
+			const { onChange, options, numberOfOptions, numberOfDisabledOptions, multiselect, selectAll, setSelectedData, selectedData, size } = useSelectInput();
+			if (!(selectAll && multiselect)) return null;
+			const allSelected = selectedData.selectedValues.length === numberOfOptions - numberOfDisabledOptions;
+			const selectAllOptions = () => {
+				setSelectedData({ type: "selectAll" });
+				if (!onChange) return;
+				let newValues = [];
+				if (!allSelected) newValues = (Array.isArray(options) ? options : Object.values(options).flat()).filter((option) => !option.disabled).map((option) => option.value);
+				onChange(newValues);
+			};
+			return /* @__PURE__ */ jsx(Stack, {
+				gap: .25,
+				id: "items",
+				tabIndex: -1,
+				className: selectInputStyle.dropdownSection,
+				children: /* @__PURE__ */ jsx("div", {
+					"aria-label": "select-all",
+					"aria-selected": allSelected,
+					className: cn(selectInputStyle.dropdownItem({
+						selected: allSelected,
+						size
+					})),
+					"data-testid": "select-all",
+					onClick: selectAllOptions,
+					onKeyDown: (event) => [" ", "Enter"].includes(event.key) ? selectAllOptions() : null,
+					role: "option",
+					tabIndex: 0,
+					children: /* @__PURE__ */ jsx(Checkbox, {
+						checked: allSelected,
+						className: selectInputStyle.dropdownCheckbox,
+						"data-testid": "select-all-checkbox",
+						disabled: false,
+						onChange: selectAllOptions,
+						tabIndex: -1,
+						value: "select-all",
+						children: /* @__PURE__ */ jsxs(Stack, {
+							direction: "column",
+							children: [/* @__PURE__ */ jsx(Text, {
+								as: "span",
+								placement: "left",
+								variant: textVariant,
+								children: selectAll === null || selectAll === void 0 ? void 0 : selectAll.label
+							}), /* @__PURE__ */ jsx(Text, {
+								as: "span",
+								placement: "left",
+								prominence: "weak",
+								sentiment: "neutral",
+								variant: size === "large" ? "bodySmall" : "caption",
+								children: selectAll === null || selectAll === void 0 ? void 0 : selectAll.description
+							})]
+						})
 					})
 				})
-			})
-		});
-	};
-});
+			});
+		};
+	}))();
+}
 
 //#endregion
 init_SelectAll();

package/dist/components/SelectInput/components/Dropdown/dropdown.css.js

@@ -4,38 +4,40 @@ import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
 
 //#region src/components/SelectInput/components/Dropdown/dropdown.css.ts
 var dropdownWidth, dropdownGroupSelectable, dropdownItem;
-var init_dropdown_css = __esmMin(() => {
-	init_dropdown_css_ts_vanilla();
-	dropdownWidth = "var(--uv_igqisu0)";
-	dropdownGroupSelectable = createRuntimeFn({
-		defaultClassName: "uv_igqisu4",
-		variantClassNames: { size: {
-			small: "uv_igqisu5",
-			large: "uv_igqisu6",
-			medium: "uv_igqisu7"
-		} },
-		defaultVariants: { size: "large" },
-		compoundVariants: []
-	});
-	dropdownItem = createRuntimeFn({
-		defaultClassName: "uv_igqisuc uv_igqisub uv_igqisua",
-		variantClassNames: {
-			selected: { true: "uv_igqisud" },
-			size: {
-				large: "uv_igqisue",
-				medium: "uv_igqisuf",
-				small: "uv_igqisug"
+function init_dropdown_css() {
+	return (init_dropdown_css = __esmMin(() => {
+		/* @__PURE__ */ init_dropdown_css_ts_vanilla();
+		dropdownWidth = "var(--uv_igqisu0)";
+		dropdownGroupSelectable = createRuntimeFn({
+			defaultClassName: "uv_igqisu4",
+			variantClassNames: { size: {
+				small: "uv_igqisu5",
+				large: "uv_igqisu6",
+				medium: "uv_igqisu7"
+			} },
+			defaultVariants: { size: "large" },
+			compoundVariants: []
+		});
+		dropdownItem = createRuntimeFn({
+			defaultClassName: "uv_igqisuc uv_igqisub uv_igqisua",
+			variantClassNames: {
+				selected: { true: "uv_igqisud" },
+				size: {
+					large: "uv_igqisue",
+					medium: "uv_igqisuf",
+					small: "uv_igqisug"
+				},
+				disabled: { true: "uv_igqisuh" }
 			},
-			disabled: { true: "uv_igqisuh" }
-		},
-		defaultVariants: {
-			disabled: false,
-			selected: false,
-			size: "large"
-		},
-		compoundVariants: []
-	});
-});
+			defaultVariants: {
+				disabled: false,
+				selected: false,
+				size: "large"
+			},
+			compoundVariants: []
+		});
+	}))();
+}
 
 //#endregion
 init_dropdown_css();

package/dist/components/SelectInput/components/Dropdown/dropdown.css.ts.vanilla.js

@@ -1,7 +1,9 @@
 import { __esmMin } from "../../../../_virtual/_rolldown/runtime.js";
 
 //#region src/components/SelectInput/components/Dropdown/dropdown.css.ts.vanilla.css
-var init_dropdown_css_ts_vanilla = __esmMin(() => {});
+function init_dropdown_css_ts_vanilla() {
+	return (init_dropdown_css_ts_vanilla = __esmMin(() => {}))();
+}
 
 //#endregion
 init_dropdown_css_ts_vanilla();

package/dist/components/SelectInput/components/SelectBar/SelectBar.d.ts

@@ -16,8 +16,9 @@ type SelectBarProps = {
     dropdownId?: string;
     helperId: string;
     'aria-describedby'?: string;
+    'aria-labelledby'?: string;
     helper?: ReactNode;
 };
-declare const SelectBar: ({ size, clearable, disabled, readOnly, placeholder, success, error, autoFocus, tooltip, innerRef, id, 'data-testid': dataTestId, label, dropdownId, helperId, helper, 'aria-describedby': ariaDescribedBy, }: SelectBarProps) => import("react").JSX.Element;
+declare const SelectBar: ({ size, clearable, disabled, readOnly, placeholder, success, error, autoFocus, tooltip, innerRef, id, 'data-testid': dataTestId, label, dropdownId, helperId, helper, 'aria-describedby': ariaDescribedBy, 'aria-labelledby': ariaLabelledby, }: SelectBarProps) => import("react").JSX.Element;
 export { SelectBar };
 //# sourceMappingURL=SelectBar.d.ts.map

package/dist/components/SelectInput/components/SelectBar/SelectBar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectBar.d.ts","sourceRoot":"","sources":["../../../../../src/components/SelectInput/components/SelectBar/SelectBar.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAcjD,KAAK,cAAc,GAAG;IACpB,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;IAClC,SAAS,EAAE,OAAO,CAAA;IAClB,QAAQ,EAAE,OAAO,CAAA;IACjB,QAAQ,EAAE,OAAO,CAAA;IACjB,WAAW,EAAE,MAAM,CAAA;IACnB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IACxB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,QAAQ,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAA;IAC1C,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,aAAa,EAAE,MAAM,CAAA;IACrB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,QAAQ,EAAE,MAAM,CAAA;IAChB,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,MAAM,CAAC,EAAE,SAAS,CAAA;CACnB,CAAA;AAED,QAAA,MAAM,SAAS,iNAkBZ,cAAc,gCAuNhB,CAAA;AAED,OAAO,EAAE,SAAS,EAAE,CAAA"}
+{"version":3,"file":"SelectBar.d.ts","sourceRoot":"","sources":["../../../../../src/components/SelectInput/components/SelectBar/SelectBar.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAcjD,KAAK,cAAc,GAAG;IACpB,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;IAClC,SAAS,EAAE,OAAO,CAAA;IAClB,QAAQ,EAAE,OAAO,CAAA;IACjB,QAAQ,EAAE,OAAO,CAAA;IACjB,WAAW,EAAE,MAAM,CAAA;IACnB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IACxB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,QAAQ,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAA;IAC1C,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,aAAa,EAAE,MAAM,CAAA;IACrB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,QAAQ,EAAE,MAAM,CAAA;IAChB,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,MAAM,CAAC,EAAE,SAAS,CAAA;CACnB,CAAA;AAED,QAAA,MAAM,SAAS,oPAmBZ,cAAc,gCAwNhB,CAAA;AAED,OAAO,EAAE,SAAS,EAAE,CAAA"}

package/dist/components/SelectInput/components/SelectBar/SelectBar.js

@@ -20,185 +20,189 @@ import { ArrowDownIcon } from "@ultraviolet/icons/ArrowDownIcon";
 
 //#region src/components/SelectInput/components/SelectBar/SelectBar.tsx
 var SelectBar;
-var init_SelectBar = __esmMin(() => {
-	init_hasHelperText();
-	init_Button();
-	init_Stack();
-	init_Text();
-	init_Tooltip();
-	init_constants();
-	init_findOptionInOptions();
-	init_SelectInputProvider();
-	init_helpers();
-	init_Values();
-	init_styles_css();
-	SelectBar = ({ size, clearable, disabled, readOnly, placeholder, success, error, autoFocus, tooltip, innerRef, id, "data-testid": dataTestId, label, dropdownId, helperId, helper, "aria-describedby": ariaDescribedBy }) => {
-		var _innerRef$current2;
-		const { isDropdownVisible, onChange, setIsDropdownVisible, options, selectedData, setSelectedData, multiselect } = useSelectInput();
-		const openable = !(readOnly || disabled);
-		const [displayShadowCopy, setDisplayShadowCopy] = useState(false);
-		const refTag = useRef(null);
-		const measureRef = useRef(null);
-		const arrowRef = useRef(null);
-		const refPlusTag = useRef(null);
-		const [overflowAmount, setOverflowAmount] = useState(0);
-		const [overflow, setOverflow] = useState(false);
-		const [lastElementMaxWidth, setLastElementMaxWidth] = useState(0);
-		const [nonOverflowedValues, setNonOverFlowedValues] = useState(() => {
-			if (selectedData.selectedValues[0]) {
-				const firstSelectOption = findOptionInOptions(options, selectedData.selectedValues[0]);
-				return firstSelectOption ? [firstSelectOption] : [];
-			}
-			return [];
-		});
-		const potentiallyNonOverflowedValues = useMemo(() => selectedData.selectedValues.map((selectedValue) => findOptionInOptions(options, selectedValue)).filter((option) => !!option), [options, selectedData.selectedValues]);
-		const state = useMemo(() => {
-			if (error) return "danger";
-			if (success) return "success";
-			return "neutral";
-		}, [error, success]);
-		useEffect(() => {
-			setDisplayShadowCopy(true);
-		}, [selectedData.selectedValues.length]);
-		const getWidth = useCallback(() => {
-			var _innerRef$current$off;
-			var _innerRef$current;
-			var _arrowRef$current$off;
-			var _arrowRef$current;
-			if (refTag.current) return refTag.current.offsetWidth;
-			return (_innerRef$current$off = (_innerRef$current = innerRef.current) === null || _innerRef$current === void 0 ? void 0 : _innerRef$current.offsetWidth) !== null && _innerRef$current$off !== void 0 ? _innerRef$current$off : 0 - ((_arrowRef$current$off = (_arrowRef$current = arrowRef.current) === null || _arrowRef$current === void 0 ? void 0 : _arrowRef$current.offsetWidth) !== null && _arrowRef$current$off !== void 0 ? _arrowRef$current$off : 0) - SIZES_TAG.paddings;
-		}, [(_innerRef$current2 = innerRef.current) === null || _innerRef$current2 === void 0 ? void 0 : _innerRef$current2.offsetWidth]);
-		useLayoutEffect(() => {
-			if (selectedData.selectedValues.length === 0) {
-				setOverflowAmount(0);
-				setNonOverFlowedValues([]);
-			}
-			if (measureRef.current && selectedData.selectedValues.length > 0) {
-				var _refPlusTag$current$o;
-				var _refPlusTag$current;
-				const innerWidth = getWidth();
-				const tagsWidth = getTagsWidth([...measureRef.current.children], innerWidth, potentiallyNonOverflowedValues);
-				const additionnalElementsWidth = SIZES_TAG.paddings + ((_refPlusTag$current$o = (_refPlusTag$current = refPlusTag.current) === null || _refPlusTag$current === void 0 ? void 0 : _refPlusTag$current.offsetWidth) !== null && _refPlusTag$current$o !== void 0 ? _refPlusTag$current$o : 0);
-				const overflowPx = tagsWidth.accumulatedWidth + (tagsWidth.measuredHiddenTags ? additionnalElementsWidth : 0) - innerWidth;
-				const hasOverflow = overflowPx > 0;
-				const hasHiddenTags = tagsWidth.measuredHiddenTags > 0;
-				const overflowVars = computeOverflowVars(tagsWidth, hasOverflow, tagsWidth.lastVisibleElementWidth - overflowPx, hasHiddenTags, potentiallyNonOverflowedValues, additionnalElementsWidth);
-				setOverflowAmount(overflowVars.overflowAmount);
-				setNonOverFlowedValues(overflowVars.nonOverflowedValues);
-				setLastElementMaxWidth(overflowVars.lastElementMaxWidth);
-				setOverflow(overflowVars.hasOverflow);
-			}
-			setDisplayShadowCopy(false);
-		}, [
-			displayShadowCopy,
-			potentiallyNonOverflowedValues,
-			selectedData.selectedValues.length,
-			getWidth
-		]);
-		useEffect(() => {
-			setSelectedData({ type: "update" });
-		}, [setSelectedData, options]);
-		const shouldDisplayValues = useMemo(() => {
-			if (multiselect) return potentiallyNonOverflowedValues.length > 0 || selectedData.selectedValues.some((selectedValue) => findOptionInOptions(options, selectedValue) !== void 0);
-			return selectedData.selectedValues[0] !== void 0 && findOptionInOptions(options, selectedData.selectedValues[0]) !== void 0;
-		}, [
-			multiselect,
-			options,
-			potentiallyNonOverflowedValues.length,
-			selectedData.selectedValues
-		]);
-		const textVariant = useMemo(() => size === "large" ? "body" : "bodySmall", [size]);
-		return /* @__PURE__ */ jsx(Tooltip, {
-			disableAnimation: true,
-			text: tooltip,
-			children: /* @__PURE__ */ jsxs("div", {
-				"aria-describedby": ariaDescribedBy || (hasHelperText(helper, error, success) ? helperId : void 0),
-				"aria-controls": dropdownId,
-				"aria-expanded": isDropdownVisible,
-				"aria-label": label,
-				autoFocus,
-				className: selectInputStyle.selectBar({
-					disabled,
-					dropdownVisible: isDropdownVisible,
-					readOnly,
-					size,
-					state
-				}),
-				"data-disabled": disabled,
-				"data-readonly": readOnly,
-				"data-testid": dataTestId,
-				id,
-				onClick: openable ? () => setIsDropdownVisible(!isDropdownVisible) : void 0,
-				onKeyDown: (event) => {
-					if (event.key === "ArrowDown") if (isDropdownVisible) {
-						var _document$getElementB;
-						(_document$getElementB = document.getElementById("option-0")) === null || _document$getElementB === void 0 || _document$getElementB.focus();
-					} else setIsDropdownVisible(true);
-					if (event.key === " ") event.preventDefault();
-					return ["Enter", " "].includes(event.key) && openable ? setIsDropdownVisible(!isDropdownVisible) : null;
-				},
-				ref: innerRef,
-				role: "combobox",
-				tabIndex: 0,
-				children: [shouldDisplayValues ? /* @__PURE__ */ jsx(DisplayValues, {
-					disabled,
-					displayShadowCopy,
-					lastElementMaxWidth,
-					measureRef,
-					nonOverflowedValues,
-					overflow,
-					overflowAmount,
-					overflowed: !!overflowAmount,
-					potentiallyNonOverflowedValues,
-					readOnly,
-					refPlusTag,
-					refTag,
-					textVariant
-				}) : /* @__PURE__ */ jsx(Text, {
-					as: "span",
-					className: selectInputStyle.placeholder,
-					disabled,
-					prominence: "weak",
-					sentiment: "neutral",
-					variant: textVariant,
-					whiteSpace: "nowrap",
-					children: placeholder
-				}), /* @__PURE__ */ jsxs(Stack, {
-					alignItems: "center",
-					className: selectInputStyle.selectbarState[size === "medium" ? "small" : size],
-					direction: "row",
-					gap: 1,
-					ref: arrowRef,
-					children: [
-						error ? /* @__PURE__ */ jsx(AlertCircleIcon, { sentiment: "danger" }) : null,
-						success && !error ? /* @__PURE__ */ jsx(CheckCircleIcon, { sentiment: "success" }) : null,
-						clearable && selectedData.selectedValues.length > 0 ? /* @__PURE__ */ jsx(Button, {
-							"aria-label": "clear value",
-							"data-testid": "clear-all",
-							disabled: disabled || !selectedData.selectedValues[0] || readOnly,
-							onClick: (event) => {
-								event.stopPropagation();
-								setSelectedData({ type: "clearAll" });
-								if (multiselect) onChange === null || onChange === void 0 || onChange([]);
-								else onChange === null || onChange === void 0 || onChange("");
-							},
-							sentiment: "neutral",
-							size: size === "large" ? "small" : "xsmall",
-							variant: "ghost",
-							children: /* @__PURE__ */ jsx(CloseIcon, {})
-						}) : null,
-						/* @__PURE__ */ jsx(ArrowDownIcon, {
-							"aria-label": "show dropdown",
-							disabled: disabled || readOnly,
-							sentiment: "neutral",
-							size: "small"
-						})
-					]
-				})]
-			})
-		});
-	};
-});
+function init_SelectBar() {
+	return (init_SelectBar = __esmMin(() => {
+		init_hasHelperText();
+		init_Button();
+		init_Stack();
+		init_Text();
+		init_Tooltip();
+		init_constants();
+		init_findOptionInOptions();
+		init_SelectInputProvider();
+		init_helpers();
+		init_Values();
+		init_styles_css();
+		SelectBar = ({ size, clearable, disabled, readOnly, placeholder, success, error, autoFocus, tooltip, innerRef, id, "data-testid": dataTestId, label, dropdownId, helperId, helper, "aria-describedby": ariaDescribedBy, "aria-labelledby": ariaLabelledby }) => {
+			var _innerRef$current2;
+			const { isDropdownVisible, onChange, setIsDropdownVisible, options, selectedData, setSelectedData, multiselect } = useSelectInput();
+			const openable = !(readOnly || disabled);
+			const [displayShadowCopy, setDisplayShadowCopy] = useState(false);
+			const refTag = useRef(null);
+			const measureRef = useRef(null);
+			const arrowRef = useRef(null);
+			const refPlusTag = useRef(null);
+			const [overflowAmount, setOverflowAmount] = useState(0);
+			const [overflow, setOverflow] = useState(false);
+			const [lastElementMaxWidth, setLastElementMaxWidth] = useState(0);
+			const [nonOverflowedValues, setNonOverFlowedValues] = useState(() => {
+				if (selectedData.selectedValues[0]) {
+					const firstSelectOption = findOptionInOptions(options, selectedData.selectedValues[0]);
+					return firstSelectOption ? [firstSelectOption] : [];
+				}
+				return [];
+			});
+			const potentiallyNonOverflowedValues = useMemo(() => selectedData.selectedValues.map((selectedValue) => findOptionInOptions(options, selectedValue)).filter((option) => !!option), [options, selectedData.selectedValues]);
+			const state = useMemo(() => {
+				if (error) return "danger";
+				if (success) return "success";
+				return "neutral";
+			}, [error, success]);
+			useEffect(() => {
+				setDisplayShadowCopy(true);
+			}, [selectedData.selectedValues.length]);
+			const getWidth = useCallback(() => {
+				var _innerRef$current$off;
+				var _innerRef$current;
+				var _arrowRef$current$off;
+				var _arrowRef$current;
+				if (refTag.current) return refTag.current.offsetWidth;
+				return (_innerRef$current$off = (_innerRef$current = innerRef.current) === null || _innerRef$current === void 0 ? void 0 : _innerRef$current.offsetWidth) !== null && _innerRef$current$off !== void 0 ? _innerRef$current$off : 0 - ((_arrowRef$current$off = (_arrowRef$current = arrowRef.current) === null || _arrowRef$current === void 0 ? void 0 : _arrowRef$current.offsetWidth) !== null && _arrowRef$current$off !== void 0 ? _arrowRef$current$off : 0) - SIZES_TAG.paddings;
+			}, [(_innerRef$current2 = innerRef.current) === null || _innerRef$current2 === void 0 ? void 0 : _innerRef$current2.offsetWidth]);
+			useLayoutEffect(() => {
+				if (selectedData.selectedValues.length === 0) {
+					setOverflowAmount(0);
+					setNonOverFlowedValues([]);
+				}
+				if (measureRef.current && selectedData.selectedValues.length > 0) {
+					var _refPlusTag$current$o;
+					var _refPlusTag$current;
+					const innerWidth = getWidth();
+					const tagsWidth = getTagsWidth([...measureRef.current.children], innerWidth, potentiallyNonOverflowedValues);
+					const additionnalElementsWidth = SIZES_TAG.paddings + ((_refPlusTag$current$o = (_refPlusTag$current = refPlusTag.current) === null || _refPlusTag$current === void 0 ? void 0 : _refPlusTag$current.offsetWidth) !== null && _refPlusTag$current$o !== void 0 ? _refPlusTag$current$o : 0);
+					const overflowPx = tagsWidth.accumulatedWidth + (tagsWidth.measuredHiddenTags ? additionnalElementsWidth : 0) - innerWidth;
+					const hasOverflow = overflowPx > 0;
+					const hasHiddenTags = tagsWidth.measuredHiddenTags > 0;
+					const lastVisibleElementMaxSize = tagsWidth.lastVisibleElementWidth - overflowPx;
+					const overflowVars = computeOverflowVars(tagsWidth, hasOverflow, lastVisibleElementMaxSize, hasHiddenTags, potentiallyNonOverflowedValues, additionnalElementsWidth);
+					setOverflowAmount(overflowVars.overflowAmount);
+					setNonOverFlowedValues(overflowVars.nonOverflowedValues);
+					setLastElementMaxWidth(overflowVars.lastElementMaxWidth);
+					setOverflow(overflowVars.hasOverflow);
+				}
+				setDisplayShadowCopy(false);
+			}, [
+				displayShadowCopy,
+				potentiallyNonOverflowedValues,
+				selectedData.selectedValues.length,
+				getWidth
+			]);
+			useEffect(() => {
+				setSelectedData({ type: "update" });
+			}, [setSelectedData, options]);
+			const shouldDisplayValues = useMemo(() => {
+				if (multiselect) return potentiallyNonOverflowedValues.length > 0 || selectedData.selectedValues.some((selectedValue) => findOptionInOptions(options, selectedValue) !== void 0);
+				return selectedData.selectedValues[0] !== void 0 && findOptionInOptions(options, selectedData.selectedValues[0]) !== void 0;
+			}, [
+				multiselect,
+				options,
+				potentiallyNonOverflowedValues.length,
+				selectedData.selectedValues
+			]);
+			const textVariant = useMemo(() => size === "large" ? "body" : "bodySmall", [size]);
+			return /* @__PURE__ */ jsx(Tooltip, {
+				disableAnimation: true,
+				text: tooltip,
+				children: /* @__PURE__ */ jsxs("div", {
+					"aria-describedby": ariaDescribedBy || (hasHelperText(helper, error, success) ? helperId : void 0),
+					"aria-labelledby": ariaLabelledby,
+					"aria-controls": dropdownId,
+					"aria-expanded": isDropdownVisible,
+					"aria-label": label,
+					autoFocus,
+					className: selectInputStyle.selectBar({
+						disabled,
+						dropdownVisible: isDropdownVisible,
+						readOnly,
+						size,
+						state
+					}),
+					"data-disabled": disabled,
+					"data-readonly": readOnly,
+					"data-testid": dataTestId,
+					id,
+					onClick: openable ? () => setIsDropdownVisible(!isDropdownVisible) : void 0,
+					onKeyDown: (event) => {
+						if (event.key === "ArrowDown") if (isDropdownVisible) {
+							var _document$getElementB;
+							(_document$getElementB = document.getElementById("option-0")) === null || _document$getElementB === void 0 || _document$getElementB.focus();
+						} else setIsDropdownVisible(true);
+						if (event.key === " ") event.preventDefault();
+						return ["Enter", " "].includes(event.key) && openable ? setIsDropdownVisible(!isDropdownVisible) : null;
+					},
+					ref: innerRef,
+					role: "combobox",
+					tabIndex: 0,
+					children: [shouldDisplayValues ? /* @__PURE__ */ jsx(DisplayValues, {
+						disabled,
+						displayShadowCopy,
+						lastElementMaxWidth,
+						measureRef,
+						nonOverflowedValues,
+						overflow,
+						overflowAmount,
+						overflowed: !!overflowAmount,
+						potentiallyNonOverflowedValues,
+						readOnly,
+						refPlusTag,
+						refTag,
+						textVariant
+					}) : /* @__PURE__ */ jsx(Text, {
+						as: "span",
+						className: selectInputStyle.placeholder,
+						disabled,
+						prominence: "weak",
+						sentiment: "neutral",
+						variant: textVariant,
+						whiteSpace: "nowrap",
+						children: placeholder
+					}), /* @__PURE__ */ jsxs(Stack, {
+						alignItems: "center",
+						className: selectInputStyle.selectbarState[size === "medium" ? "small" : size],
+						direction: "row",
+						gap: 1,
+						ref: arrowRef,
+						children: [
+							error ? /* @__PURE__ */ jsx(AlertCircleIcon, { sentiment: "danger" }) : null,
+							success && !error ? /* @__PURE__ */ jsx(CheckCircleIcon, { sentiment: "success" }) : null,
+							clearable && selectedData.selectedValues.length > 0 ? /* @__PURE__ */ jsx(Button, {
+								"aria-label": "clear value",
+								"data-testid": "clear-all",
+								disabled: disabled || !selectedData.selectedValues[0] || readOnly,
+								onClick: (event) => {
+									event.stopPropagation();
+									setSelectedData({ type: "clearAll" });
+									if (multiselect) onChange === null || onChange === void 0 || onChange([]);
+									else onChange === null || onChange === void 0 || onChange("");
+								},
+								sentiment: "neutral",
+								size: size === "large" ? "small" : "xsmall",
+								variant: "ghost",
+								children: /* @__PURE__ */ jsx(CloseIcon, {})
+							}) : null,
+							/* @__PURE__ */ jsx(ArrowDownIcon, {
+								"aria-label": "show dropdown",
+								disabled: disabled || readOnly,
+								sentiment: "neutral",
+								size: "small"
+							})
+						]
+					})]
+				})
+			});
+		};
+	}))();
+}
 
 //#endregion
 init_SelectBar();