@ultraviolet/ui 3.11.0 → 3.12.0

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

@@ -1,18 +1,19 @@
 'use client';
-import { __name } from "../../../_virtual/_rolldown/runtime.js";
-import { Stack } from "../../Stack/index.js";
-import { Tooltip } from "../../Tooltip/index.js";
-import { Text } from "../../Text/index.js";
-import { Button } from "../../Button/index.js";
-import { Tag } from "../../Tag/index.js";
-import { SIZES_TAG } from "../constants.js";
-import { useSelectInput } from "../SelectInputProvider.js";
-import { findOptionInOptions } from "../findOptionInOptions.js";
-import { maxWidthTag, minWidthTag, multiselectStack, plusTag, selectBar, selectBarTags, selectbarState, selectedValues, selectinputPlaceholder } from "./selectBar.css.js";
+import { __esmMin, __name } from "../../../_virtual/_rolldown/runtime.js";
+import { Stack, init_Stack } from "../../Stack/index.js";
+import { Tooltip, init_Tooltip } from "../../Tooltip/index.js";
+import { Text, init_Text } from "../../Text/index.js";
+import { Button, init_Button } from "../../Button/index.js";
+import { SIZES_TAG, init_constants } from "../constants.js";
+import { init_SelectInputProvider, useSelectInput } from "../SelectInputProvider.js";
+import { init_styles_css, selectInputStyle } from "../styles.css.js";
+import { Tag, init_Tag } from "../../Tag/index.js";
+import { findOptionInOptions, init_findOptionInOptions } from "../findOptionInOptions.js";
+import { init_selectBar_css, maxWidthTag, minWidthTag } from "./selectBar.css.js";
 import { useCallback, useEffect, useLayoutEffect, 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";
 import { ArrowDownIcon } from "@ultraviolet/icons/ArrowDownIcon";
 import { AlertCircleIcon } from "@ultraviolet/icons/AlertCircleIcon";
 import { CheckCircleIcon } from "@ultraviolet/icons/CheckCircleIcon";
@@ -20,272 +21,286 @@ import { CloseIcon } from "@ultraviolet/icons/CloseIcon";
 import { PlusIcon } from "@ultraviolet/icons/PlusIcon";
 
 //#region src/components/SelectInput/components/SelectBar.tsx
-const DisplayValues = ({ refTag, nonOverflowedValues, potentiallyNonOverflowedValues, disabled, readOnly, overflowed, overflowAmount, measureRef, lastElementMaxWidth, overflow, refPlusTag, displayShadowCopy, textVariant }) => {
-	var _findOptionInOptions;
-	const { multiselect, selectedData, setSelectedData, options, onChange } = useSelectInput();
-	return multiselect ? /* @__PURE__ */ jsxs(Stack, {
-		alignItems: "center",
-		className: multiselectStack,
-		direction: "row",
-		gap: "1",
-		ref: refTag,
-		wrap: "nowrap",
-		children: [
-			displayShadowCopy ? /* @__PURE__ */ jsx("div", {
-				ref: measureRef,
-				style: { position: "absolute" },
-				children: potentiallyNonOverflowedValues.map((option) => /* @__PURE__ */ jsx(Tag, {
-					className: cn(option.value, selectBarTags.hidden),
-					onClose: () => {},
-					children: option === null || option === void 0 ? void 0 : option.label
-				}, option.value))
-			}) : null,
-			nonOverflowedValues.map((option, index) => /* @__PURE__ */ jsx(Tag, {
-				className: selectBarTags.visible,
-				"data-testid": "selected-options-tags",
-				disabled,
-				onClose: readOnly ? void 0 : (event) => {
-					var _selectedData$selecte;
-					event.stopPropagation();
-					setSelectedData({
-						clickedOption: option,
-						type: "selectOption"
-					});
-					const newSelectedValues = (_selectedData$selecte = selectedData.selectedValues) === null || _selectedData$selecte === void 0 ? void 0 : _selectedData$selecte.filter((val) => val !== option.value);
-					onChange === null || onChange === void 0 || onChange(newSelectedValues);
-				},
-				sentiment: "neutral",
-				style: index === nonOverflowedValues.length - 1 && overflow ? assignInlineVars({
-					[minWidthTag]: "auto",
-					[maxWidthTag]: `${lastElementMaxWidth}px`
-				}) : void 0,
-				children: option === null || option === void 0 ? void 0 : option.label
-			}, option === null || option === void 0 ? void 0 : option.value)),
-			overflowed ? /* @__PURE__ */ jsx(Stack, {
-				justifyContent: "center",
-				ref: refPlusTag,
-				children: /* @__PURE__ */ jsxs(Tag, {
-					"aria-label": "Plus tag",
-					className: plusTag,
-					"data-testid": "plus-tag",
+var DisplayValues, SelectBar;
+var init_SelectBar = __esmMin(() => {
+	init_Button();
+	init_Stack();
+	init_Tag();
+	init_Text();
+	init_Tooltip();
+	init_constants();
+	init_findOptionInOptions();
+	init_SelectInputProvider();
+	init_styles_css();
+	init_selectBar_css();
+	DisplayValues = ({ refTag, nonOverflowedValues, potentiallyNonOverflowedValues, disabled, readOnly, overflowed, overflowAmount, measureRef, lastElementMaxWidth, overflow, refPlusTag, displayShadowCopy, textVariant }) => {
+		var _findOptionInOptions;
+		const { multiselect, selectedData, setSelectedData, options, onChange } = useSelectInput();
+		return multiselect ? /* @__PURE__ */ jsxs(Stack, {
+			alignItems: "center",
+			className: selectInputStyle.multiselectStack,
+			direction: "row",
+			gap: "1",
+			ref: refTag,
+			wrap: "nowrap",
+			children: [
+				displayShadowCopy ? /* @__PURE__ */ jsx("div", {
+					ref: measureRef,
+					style: { position: "absolute" },
+					children: potentiallyNonOverflowedValues.map((option) => /* @__PURE__ */ jsx(Tag, {
+						className: cn(option.value, selectInputStyle.selectBarTags.hidden),
+						onClose: () => {},
+						children: option === null || option === void 0 ? void 0 : option.label
+					}, option.value))
+				}) : null,
+				nonOverflowedValues.map((option, index) => /* @__PURE__ */ jsx(Tag, {
+					className: selectInputStyle.selectBarTags.visible,
+					"data-testid": "selected-options-tags",
 					disabled,
+					onClose: readOnly ? void 0 : (event) => {
+						var _selectedData$selecte;
+						event.stopPropagation();
+						setSelectedData({
+							clickedOption: option,
+							type: "selectOption"
+						});
+						const newSelectedValues = (_selectedData$selecte = selectedData.selectedValues) === null || _selectedData$selecte === void 0 ? void 0 : _selectedData$selecte.filter((val) => val !== option.value);
+						onChange === null || onChange === void 0 || onChange(newSelectedValues);
+					},
 					sentiment: "neutral",
-					children: [/* @__PURE__ */ jsx(PlusIcon, { size: "xsmall" }), overflowAmount]
-				}, "+")
-			}) : null
-		]
-	}) : /* @__PURE__ */ jsx(Text, {
-		as: "span",
-		className: selectedValues,
-		disabled,
-		prominence: "default",
-		sentiment: "neutral",
-		variant: textVariant,
-		children: selectedData.selectedValues[0] ? (_findOptionInOptions = findOptionInOptions(options, selectedData.selectedValues[0])) === null || _findOptionInOptions === void 0 ? void 0 : _findOptionInOptions.label : null
-	});
-};
-const SelectBar = ({ size, clearable, disabled, readOnly, placeholder, success, error, autoFocus, tooltip, innerRef, id, "data-testid": dataTestId, label, dropdownId }) => {
-	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 toMeasureElementsArray = [...measureRef.current.children];
-			const innerWidth = getWidth();
-			const { measuredVisibleTags, measuredHiddenTags, accumulatedWidth, lastVisibleElementWidth, lastVisibleLabel } = toMeasureElementsArray.reduce((accumulator, currentValue, index) => {
-				const elementWidth = currentValue.offsetWidth;
-				const newAccumulatedWidth = accumulator.accumulatedWidth + elementWidth + SIZES_TAG.gap;
-				const canBeVisible = newAccumulatedWidth <= innerWidth;
-				return {
-					accumulatedWidth: canBeVisible ? newAccumulatedWidth : accumulator.accumulatedWidth,
-					lastVisibleElementWidth: canBeVisible ? elementWidth : accumulator.lastVisibleElementWidth,
-					lastVisibleLabel: canBeVisible ? potentiallyNonOverflowedValues[index].label : accumulator.lastVisibleLabel,
-					measuredHiddenTags: accumulator.measuredHiddenTags + (canBeVisible ? 0 : 1),
-					measuredVisibleTags: [...accumulator.measuredVisibleTags, canBeVisible && potentiallyNonOverflowedValues[index]].filter(Boolean)
-				};
-			}, {
-				accumulatedWidth: 0,
-				lastVisibleElementWidth: 0,
-				lastVisibleLabel: "",
-				measuredHiddenTags: 0,
-				measuredVisibleTags: []
-			});
-			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 = accumulatedWidth + (measuredHiddenTags ? additionnalElementsWidth : 0) - innerWidth;
-			const hasOverflow = overflowPx > 0;
-			const hasHiddenTags = measuredHiddenTags > 0;
-			const lastVisibleElementMaxSize = lastVisibleElementWidth - overflowPx;
-			if (measuredHiddenTags === 1 && measuredVisibleTags.length === 0) {
+					style: index === nonOverflowedValues.length - 1 && overflow ? assignInlineVars({
+						[minWidthTag]: "auto",
+						[maxWidthTag]: `${lastElementMaxWidth}px`
+					}) : void 0,
+					children: option === null || option === void 0 ? void 0 : option.label
+				}, option === null || option === void 0 ? void 0 : option.value)),
+				overflowed ? /* @__PURE__ */ jsx(Stack, {
+					justifyContent: "center",
+					ref: refPlusTag,
+					children: /* @__PURE__ */ jsxs(Tag, {
+						"aria-label": "Plus tag",
+						className: selectInputStyle.plusTag,
+						"data-testid": "plus-tag",
+						disabled,
+						sentiment: "neutral",
+						children: [/* @__PURE__ */ jsx(PlusIcon, { size: "xsmall" }), overflowAmount]
+					}, "+")
+				}) : null
+			]
+		}) : /* @__PURE__ */ jsx(Text, {
+			as: "span",
+			className: selectInputStyle.selectedValues,
+			disabled,
+			prominence: "default",
+			sentiment: "neutral",
+			variant: textVariant,
+			children: selectedData.selectedValues[0] ? (_findOptionInOptions = findOptionInOptions(options, selectedData.selectedValues[0])) === null || _findOptionInOptions === void 0 ? void 0 : _findOptionInOptions.label : null
+		});
+	};
+	SelectBar = ({ size, clearable, disabled, readOnly, placeholder, success, error, autoFocus, tooltip, innerRef, id, "data-testid": dataTestId, label, dropdownId }) => {
+		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([potentiallyNonOverflowedValues[0]]);
-				setLastElementMaxWidth(lastVisibleElementWidth - (lastVisibleElementWidth + (measuredHiddenTags > 1 ? additionnalElementsWidth : 0) - innerWidth));
-				setOverflow(true);
-			} else if (hasOverflow && hasHiddenTags && (lastVisibleElementMaxSize > 65 || measuredVisibleTags.length === 1 && lastVisibleElementMaxSize > 65) && typeof lastVisibleLabel === "string") {
-				setLastElementMaxWidth(lastVisibleElementMaxSize);
-				setOverflow(true);
-				setOverflowAmount(measuredHiddenTags);
-				setNonOverFlowedValues(measuredVisibleTags);
-			} else if (hasOverflow && hasHiddenTags) {
-				setLastElementMaxWidth(0);
-				setOverflow(false);
-				setOverflowAmount(measuredHiddenTags + 1);
-				setNonOverFlowedValues(measuredVisibleTags.slice(0, -1));
-			} else {
-				setOverflow(false);
-				setOverflowAmount(measuredHiddenTags);
-				setNonOverFlowedValues(measuredVisibleTags);
+				setNonOverFlowedValues([]);
 			}
-		}
-		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(() => {
-		if (size === "large") return "body";
-		if (size === "medium") return "bodySmall";
-		return "caption";
-	}, [size]);
-	return /* @__PURE__ */ jsx(Tooltip, {
-		disableAnimation: true,
-		text: tooltip,
-		children: /* @__PURE__ */ jsxs("div", {
-			"aria-controls": dropdownId,
-			"aria-expanded": isDropdownVisible,
-			"aria-label": label,
-			autoFocus,
-			className: 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: selectinputPlaceholder,
-				disabled,
-				prominence: "weak",
-				sentiment: "neutral",
-				variant: textVariant,
-				children: placeholder
-			}), /* @__PURE__ */ jsxs(Stack, {
-				alignItems: "center",
-				className: 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"
-					})
-				]
-			})]
-		})
-	});
-};
+			if (measureRef.current && selectedData.selectedValues.length > 0) {
+				var _refPlusTag$current$o;
+				var _refPlusTag$current;
+				const toMeasureElementsArray = [...measureRef.current.children];
+				const innerWidth = getWidth();
+				const { measuredVisibleTags, measuredHiddenTags, accumulatedWidth, lastVisibleElementWidth, lastVisibleLabel } = toMeasureElementsArray.reduce((accumulator, currentValue, index) => {
+					const elementWidth = currentValue.offsetWidth;
+					const newAccumulatedWidth = accumulator.accumulatedWidth + elementWidth + SIZES_TAG.gap;
+					const canBeVisible = newAccumulatedWidth <= innerWidth;
+					return {
+						accumulatedWidth: canBeVisible ? newAccumulatedWidth : accumulator.accumulatedWidth,
+						lastVisibleElementWidth: canBeVisible ? elementWidth : accumulator.lastVisibleElementWidth,
+						lastVisibleLabel: canBeVisible ? potentiallyNonOverflowedValues[index].label : accumulator.lastVisibleLabel,
+						measuredHiddenTags: accumulator.measuredHiddenTags + (canBeVisible ? 0 : 1),
+						measuredVisibleTags: [...accumulator.measuredVisibleTags, canBeVisible && potentiallyNonOverflowedValues[index]].filter(Boolean)
+					};
+				}, {
+					accumulatedWidth: 0,
+					lastVisibleElementWidth: 0,
+					lastVisibleLabel: "",
+					measuredHiddenTags: 0,
+					measuredVisibleTags: []
+				});
+				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 = accumulatedWidth + (measuredHiddenTags ? additionnalElementsWidth : 0) - innerWidth;
+				const hasOverflow = overflowPx > 0;
+				const hasHiddenTags = measuredHiddenTags > 0;
+				const lastVisibleElementMaxSize = lastVisibleElementWidth - overflowPx;
+				if (measuredHiddenTags === 1 && measuredVisibleTags.length === 0) {
+					setOverflowAmount(0);
+					setNonOverFlowedValues([potentiallyNonOverflowedValues[0]]);
+					setLastElementMaxWidth(lastVisibleElementWidth - (lastVisibleElementWidth + (measuredHiddenTags > 1 ? additionnalElementsWidth : 0) - innerWidth));
+					setOverflow(true);
+				} else if (hasOverflow && hasHiddenTags && (lastVisibleElementMaxSize > 65 || measuredVisibleTags.length === 1 && lastVisibleElementMaxSize > 65) && typeof lastVisibleLabel === "string") {
+					setLastElementMaxWidth(lastVisibleElementMaxSize);
+					setOverflow(true);
+					setOverflowAmount(measuredHiddenTags);
+					setNonOverFlowedValues(measuredVisibleTags);
+				} else if (hasOverflow && hasHiddenTags) {
+					setLastElementMaxWidth(0);
+					setOverflow(false);
+					setOverflowAmount(measuredHiddenTags + 1);
+					setNonOverFlowedValues(measuredVisibleTags.slice(0, -1));
+				} else {
+					setOverflow(false);
+					setOverflowAmount(measuredHiddenTags);
+					setNonOverFlowedValues(measuredVisibleTags);
+				}
+			}
+			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(() => {
+			if (size === "large") return "body";
+			if (size === "medium") return "bodySmall";
+			return "caption";
+		}, [size]);
+		return /* @__PURE__ */ jsx(Tooltip, {
+			disableAnimation: true,
+			text: tooltip,
+			children: /* @__PURE__ */ jsxs("div", {
+				"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,
+					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
-export { SelectBar };
+init_SelectBar();
+export { SelectBar, init_SelectBar };