@ultraviolet/ui 3.8.2 → 3.10.0

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

@@ -1,398 +1,291 @@
-"use client";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { AlertCircleIcon } from "@ultraviolet/icons/AlertCircleIcon";
-import { ArrowDownIcon } from "@ultraviolet/icons/ArrowDownIcon";
-import { CheckCircleIcon } from "@ultraviolet/icons/CheckCircleIcon";
-import { CloseIcon } from "@ultraviolet/icons/CloseIcon";
-import { PlusIcon } from "@ultraviolet/icons/PlusIcon";
-import { cn } from "@ultraviolet/utils";
-import { assignInlineVars } from "@vanilla-extract/dynamic";
-import { useState, useRef, useMemo, useEffect, useCallback, useLayoutEffect } from "react";
-import { Button } from "../../Button/index.js";
+'use client';
+import { __name } from "../../../_virtual/_rolldown/runtime.js";
 import { Stack } from "../../Stack/index.js";
-import { Tag } from "../../Tag/index.js";
-import { Text } from "../../Text/index.js";
 import { Tooltip } from "../../Tooltip/index.js";
+import { Text } from "../../Text/index.js";
+import { Button } from "../../Button/index.js";
 import { SIZES_TAG } from "../constants.js";
-import { findOptionInOptions } from "../findOptionInOptions.js";
 import { useSelectInput } from "../SelectInputProvider.js";
-import { selectBar, selectinputPlaceholder, selectbarState, multiselectStack, selectBarTags, maxWidthTag, minWidthTag, plusTag, selectedValues } from "./selectBar.css.js";
-const DisplayValues = ({
-  refTag,
-  nonOverflowedValues,
-  potentiallyNonOverflowedValues,
-  disabled,
-  readOnly,
-  overflowed,
-  overflowAmount,
-  size,
-  measureRef,
-  lastElementMaxWidth,
-  overflow,
-  refPlusTag,
-  displayShadowCopy
-}) => {
-  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?.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) => {
-              event.stopPropagation();
-              setSelectedData({
-                clickedOption: option,
-                type: "selectOption"
-              });
-              const newSelectedValues = selectedData.selectedValues?.filter(
-                (val) => val !== option.value
-              );
-              onChange?.(newSelectedValues);
-            },
-            sentiment: "neutral",
-            style: index === nonOverflowedValues.length - 1 && overflow ? assignInlineVars({
-              [minWidthTag]: "auto",
-              [maxWidthTag]: `${lastElementMaxWidth}px`
-            }) : void 0,
-            children: option?.label
-          },
-          option?.value
-        )),
-        overflowed ? /* @__PURE__ */ jsx(Stack, { justifyContent: "center", ref: refPlusTag, children: /* @__PURE__ */ jsxs(
-          Tag,
-          {
-            "aria-label": "Plus tag",
-            className: plusTag,
-            "data-testid": "plus-tag",
-            disabled,
-            sentiment: "neutral",
-            children: [
-              /* @__PURE__ */ jsx(PlusIcon, { size: "xsmall" }),
-              overflowAmount
-            ]
-          },
-          "+"
-        ) }) : null
-      ]
-    }
-  ) : /* @__PURE__ */ jsx(
-    Text,
-    {
-      as: "span",
-      className: selectedValues,
-      disabled,
-      prominence: "default",
-      sentiment: "neutral",
-      variant: size === "large" ? "body" : "bodySmall",
-      children: selectedData.selectedValues[0] ? findOptionInOptions(options, selectedData.selectedValues[0])?.label : null
-    }
-  );
-};
-const SelectBar = ({
-  size,
-  clearable,
-  disabled,
-  readOnly,
-  placeholder,
-  success,
-  error,
-  autoFocus,
-  tooltip,
-  innerRef,
-  id,
-  "data-testid": dataTestId,
-  label,
-  dropdownId
-}) => {
-  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(() => {
-    if (refTag.current) {
-      return refTag.current.offsetWidth;
-    }
-    return innerRef.current?.offsetWidth ?? 0 - (arrowRef.current?.offsetWidth ?? 0) - SIZES_TAG.paddings;
-  }, [innerRef.current?.offsetWidth]);
-  useLayoutEffect(
-    // oxlint-disable-next-line eslint/max-statements
-    () => {
-      if (selectedData.selectedValues.length === 0) {
-        setOverflowAmount(0);
-        setNonOverFlowedValues([]);
-      }
-      if (measureRef.current && selectedData.selectedValues.length > 0) {
-        const toMeasureElements = measureRef.current.children;
-        const toMeasureElementsArray = [...toMeasureElements];
-        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?.offsetWidth ?? 0);
-        const finalWidth = accumulatedWidth + (measuredHiddenTags ? additionnalElementsWidth : 0);
-        const overflowPx = finalWidth - innerWidth;
-        const hasOverflow = overflowPx > 0;
-        const hasHiddenTags = measuredHiddenTags > 0;
-        const lastVisibleElementMaxSize = lastVisibleElementWidth - overflowPx;
-        if (measuredHiddenTags === 1 && measuredVisibleTags.length === 0) {
-          setOverflowAmount(0);
-          setNonOverFlowedValues([potentiallyNonOverflowedValues[0]]);
-          const newOverflowPx = lastVisibleElementWidth + (measuredHiddenTags > 1 ? additionnalElementsWidth : 0) - innerWidth;
-          setLastElementMaxWidth(lastVisibleElementWidth - newOverflowPx);
-          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
-  ]);
-  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) {
-            document.getElementById("option-0")?.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,
-            size
-          }
-        ) : /* @__PURE__ */ jsx(
-          Text,
-          {
-            as: "span",
-            className: selectinputPlaceholder,
-            disabled,
-            prominence: "weak",
-            sentiment: "neutral",
-            variant: size === "large" ? "body" : "bodySmall",
-            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?.([]);
-                    } else {
-                      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"
-                }
-              )
-            ]
-          }
-        )
-      ]
-    }
-  ) });
+import { Tag } from "../../Tag/index.js";
+import { findOptionInOptions } from "../findOptionInOptions.js";
+import { maxWidthTag, minWidthTag, multiselectStack, plusTag, selectBar, selectBarTags, selectbarState, selectedValues, selectinputPlaceholder } from "./selectBar.css.js";
+import { cn } from "@ultraviolet/utils";
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { assignInlineVars } from "@vanilla-extract/dynamic";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ArrowDownIcon } from "@ultraviolet/icons/ArrowDownIcon";
+import { PlusIcon } from "@ultraviolet/icons/PlusIcon";
+import { AlertCircleIcon } from "@ultraviolet/icons/AlertCircleIcon";
+import { CheckCircleIcon } from "@ultraviolet/icons/CheckCircleIcon";
+import { CloseIcon } from "@ultraviolet/icons/CloseIcon";
+
+//#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",
+					disabled,
+					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
+	});
 };
-export {
-  SelectBar
+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) {
+				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: 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"
+					})
+				]
+			})]
+		})
+	});
 };
+
+//#endregion
+export { SelectBar };