@ultraviolet/ui 3.0.0-beta.2 → 3.0.0-beta.21

package/dist/components/SelectInput/components/SearchBarDropdown.js

@@ -0,0 +1,117 @@
+"use client";
+import { jsx } from "@emotion/react/jsx-runtime";
+import { isFuzzyMatch, normalizeString } from "@scaleway/fuzzy-search";
+import { SearchIcon } from "@ultraviolet/icons";
+import { useRef, useEffect } from "react";
+import { TextInput } from "../../TextInput/index.js";
+import { useSelectInput } from "../SelectInputProvider.js";
+import { searchBar } from "./dropdown.css.js";
+const getReferenceText = (option) => {
+  if (option.searchText) {
+    return normalizeString(option.searchText);
+  }
+  if (typeof option.label === "string") {
+    return normalizeString(option.label);
+  }
+  return "";
+};
+const searchRegex = (data, query) => data.filter((option) => {
+  const referenceText = getReferenceText(option);
+  const regex = new RegExp(query, "i");
+  return (query.length > 2 ? isFuzzyMatch(query, referenceText) : referenceText.match(regex)) || typeof option.description === "string" && option.description.match(regex) || option.value.match(regex);
+});
+const findClosestOption = (options, searchInput) => {
+  if (searchInput) {
+    if (!Array.isArray(options)) {
+      const possibleOptions = {
+        ...options
+      };
+      Object.keys(possibleOptions).map((group) => {
+        possibleOptions[group] = possibleOptions[group].filter((option) => !option.disabled);
+        return null;
+      });
+      if (Object.keys(possibleOptions).some((group) => possibleOptions[group].length > 0)) {
+        const firstFit = Object.keys(possibleOptions).map((group) => possibleOptions[group][0]).find((value) => !!value);
+        return firstFit;
+      }
+    } else {
+      const possibleOption = [...options].find((option) => !option.disabled);
+      if (possibleOption) {
+        return possibleOption;
+      }
+    }
+  }
+  return null;
+};
+const escapeRegExp = (string) => string.replace(/[.*+?^{}()|[\]\\]/g, String.raw`\$&`);
+const SearchBarDropdown = ({
+  placeholder,
+  displayedOptions,
+  setSearchBarActive
+}) => {
+  const searchInputRef = useRef(null);
+  const {
+    onChange,
+    onSearch,
+    setSearchInput,
+    searchInput,
+    options,
+    multiselect,
+    setSelectedData,
+    selectedData
+  } = useSelectInput();
+  const handleChange = (search) => {
+    if (search.length > 0) {
+      if (!Array.isArray(options)) {
+        const filteredOptions = {
+          ...options
+        };
+        Object.keys(filteredOptions).map((group) => {
+          filteredOptions[group] = searchRegex(filteredOptions[group], escapeRegExp(search.toString()));
+          return null;
+        });
+        onSearch(filteredOptions);
+      } else {
+        const filteredOptions = searchRegex([...options], escapeRegExp(search.toString()));
+        onSearch(filteredOptions);
+      }
+    } else {
+      onSearch(options);
+    }
+    setSearchInput(search);
+  };
+  const handleKeyDown = (key, search) => {
+    if (key === "Enter") {
+      const closestOption = findClosestOption(displayedOptions, search);
+      if (closestOption) {
+        if (multiselect) {
+          setSelectedData({
+            clickedOption: closestOption,
+            group: !Array.isArray(options) ? Object.keys(options).find((group) => options[group].includes(closestOption)) : void 0,
+            type: "selectOption"
+          });
+          onChange?.(selectedData.selectedValues.includes(closestOption.value) ? selectedData.selectedValues : [...selectedData.selectedValues, closestOption.value]);
+        } else {
+          setSelectedData({
+            clickedOption: closestOption,
+            type: "selectOption"
+          });
+          onChange?.(selectedData.selectedValues[0] ?? "");
+        }
+      }
+    } else if (key === "Tab") {
+      searchInputRef.current?.blur();
+    }
+  };
+  useEffect(() => {
+    setTimeout(() => {
+      searchInputRef.current?.focus();
+    }, 50);
+  }, []);
+  return /* @__PURE__ */ jsx(TextInput, { "aria-label": "search-bar", className: searchBar, "data-testid": "search-bar", onBlur: () => setSearchBarActive(false), onChange: (event) => handleChange(event.target.value), onFocus: () => setSearchBarActive(true), onKeyDown: (event) => handleKeyDown(event.key, searchInput), placeholder, prefix: /* @__PURE__ */ jsx(SearchIcon, { sentiment: "neutral", size: "small" }), ref: searchInputRef, size: "medium", value: searchInput });
+};
+export {
+  SearchBarDropdown,
+  getReferenceText,
+  searchRegex
+};

package/dist/components/SelectInput/components/SelectBar.cjs

@@ -0,0 +1,237 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@emotion/react/jsx-runtime");
+const Icon = require("@ultraviolet/icons");
+const dynamic = require("@vanilla-extract/dynamic");
+const react = require("react");
+const index$3 = require("../../Button/index.cjs");
+const index$2 = require("../../Stack/index.cjs");
+const index$4 = require("../../Tag/index.cjs");
+const index$1 = require("../../Text/index.cjs");
+const index = require("../../Tooltip/index.cjs");
+const findOptionInOptions = require("../findOptionInOptions.cjs");
+const SelectInputProvider = require("../SelectInputProvider.cjs");
+const selectBar_css = require("./selectBar.css.cjs");
+const SIZES_TAG = {
+  gap: 8,
+  paddings: 16
+};
+const DisplayValues = ({
+  refTag,
+  nonOverflowedValues,
+  potentiallyNonOverflowedValues,
+  disabled,
+  readOnly,
+  overflowed,
+  overflowAmount,
+  size,
+  measureRef,
+  lastElementMaxWidth,
+  overflow,
+  refPlusTag,
+  displayShadowCopy
+}) => {
+  const {
+    multiselect,
+    selectedData,
+    setSelectedData,
+    options,
+    onChange
+  } = SelectInputProvider.useSelectInput();
+  return multiselect ? /* @__PURE__ */ jsxRuntime.jsxs(index$2.Stack, { alignItems: "center", className: selectBar_css.multiselectStack, direction: "row", gap: "1", ref: refTag, wrap: "nowrap", children: [
+    displayShadowCopy ? /* @__PURE__ */ jsxRuntime.jsx("div", { ref: measureRef, style: {
+      position: "absolute"
+    }, children: potentiallyNonOverflowedValues.map((option) => /* @__PURE__ */ jsxRuntime.jsx(index$4.Tag, { className: `${option.value} ${selectBar_css.selectBarTags.hidden}`, onClose: () => {
+    }, children: option?.label }, option.value)) }) : null,
+    nonOverflowedValues.map((option, index2) => /* @__PURE__ */ jsxRuntime.jsx(index$4.Tag, { className: selectBar_css.selectBarTags.visible, "data-testid": "selected-options-tags", disabled, onClose: !readOnly ? (event) => {
+      event.stopPropagation();
+      setSelectedData({
+        clickedOption: option,
+        type: "selectOption"
+      });
+      const newSelectedValues = selectedData.selectedValues?.filter((val) => val !== option.value);
+      onChange?.(newSelectedValues);
+    } : void 0, sentiment: "neutral", style: index2 === nonOverflowedValues.length - 1 && overflow ? dynamic.assignInlineVars({
+      [selectBar_css.minWidthTag]: "auto",
+      [selectBar_css.maxWidthTag]: `${lastElementMaxWidth}px`
+    }) : void 0, children: option?.label }, option?.value)),
+    overflowed ? /* @__PURE__ */ jsxRuntime.jsx(index$2.Stack, { justifyContent: "center", ref: refPlusTag, children: /* @__PURE__ */ jsxRuntime.jsxs(index$4.Tag, { "aria-label": "Plus tag", className: selectBar_css.plusTag, "data-testid": "plus-tag", disabled, sentiment: "neutral", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Icon.PlusIcon, { size: "xsmall" }),
+      overflowAmount
+    ] }, "+") }) : null
+  ] }) : /* @__PURE__ */ jsxRuntime.jsx(index$1.Text, { as: "span", className: selectBar_css.selectedValues, disabled, prominence: "default", sentiment: "neutral", variant: size === "large" ? "body" : "bodySmall", children: selectedData.selectedValues[0] ? findOptionInOptions.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
+  } = SelectInputProvider.useSelectInput();
+  const openable = !(readOnly || disabled);
+  const [displayShadowCopy, setDisplayShadowCopy] = react.useState(false);
+  const refTag = react.useRef(null);
+  const measureRef = react.useRef(null);
+  const arrowRef = react.useRef(null);
+  const refPlusTag = react.useRef(null);
+  const [overflowAmount, setOverflowAmount] = react.useState(0);
+  const [overflow, setOverflow] = react.useState(false);
+  const [lastElementMaxWidth, setLastElementMaxWidth] = react.useState(0);
+  const [nonOverflowedValues, setNonOverFlowedValues] = react.useState(() => {
+    if (selectedData.selectedValues[0]) {
+      const firstSelectOption = findOptionInOptions.findOptionInOptions(options, selectedData.selectedValues[0]);
+      return firstSelectOption ? [firstSelectOption] : [];
+    }
+    return [];
+  });
+  const potentiallyNonOverflowedValues = react.useMemo(() => selectedData.selectedValues.map((selectedValue) => findOptionInOptions.findOptionInOptions(options, selectedValue)).filter((option) => !!option), [options, selectedData.selectedValues]);
+  const state = react.useMemo(() => {
+    if (error) {
+      return "danger";
+    }
+    if (success) {
+      return "success";
+    }
+    return "neutral";
+  }, [error, success]);
+  react.useEffect(() => {
+    setDisplayShadowCopy(true);
+  }, [selectedData.selectedValues.length]);
+  const getWidth = react.useCallback(() => {
+    if (refTag.current) {
+      return refTag.current.offsetWidth;
+    }
+    return innerRef.current?.offsetWidth ?? 0 - (arrowRef.current?.offsetWidth ?? 0) - SIZES_TAG.paddings;
+  }, [innerRef.current?.offsetWidth]);
+  react.useLayoutEffect(() => {
+    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, index2) => {
+        const elementWidth = currentValue.offsetWidth;
+        const newAccumulatedWidth = accumulator.accumulatedWidth + elementWidth + SIZES_TAG.gap;
+        const canBeVisible = newAccumulatedWidth <= innerWidth;
+        return {
+          accumulatedWidth: !canBeVisible ? accumulator.accumulatedWidth : newAccumulatedWidth,
+          lastVisibleElementWidth: canBeVisible ? elementWidth : accumulator.lastVisibleElementWidth,
+          lastVisibleLabel: canBeVisible ? potentiallyNonOverflowedValues[index2].label : accumulator.lastVisibleLabel,
+          measuredHiddenTags: accumulator.measuredHiddenTags + (!canBeVisible ? 1 : 0),
+          measuredVisibleTags: [...accumulator.measuredVisibleTags, canBeVisible && potentiallyNonOverflowedValues[index2]].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]);
+  react.useEffect(() => {
+    setSelectedData({
+      type: "update"
+    });
+  }, [setSelectedData, options]);
+  const shouldDisplayValues = react.useMemo(() => {
+    if (multiselect) {
+      return potentiallyNonOverflowedValues.length > 0 || selectedData.selectedValues.some((selectedValue) => findOptionInOptions.findOptionInOptions(options, selectedValue) !== void 0);
+    }
+    return selectedData.selectedValues[0] !== void 0 && findOptionInOptions.findOptionInOptions(options, selectedData.selectedValues[0]) !== void 0;
+  }, [multiselect, options, potentiallyNonOverflowedValues.length, selectedData.selectedValues]);
+  return /* @__PURE__ */ jsxRuntime.jsx(index.Tooltip, { text: tooltip, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { "aria-controls": dropdownId, "aria-expanded": isDropdownVisible, "aria-label": label, autoFocus, className: selectBar_css.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) {
+        setIsDropdownVisible(true);
+      } else {
+        document.getElementById(`option-0`)?.focus();
+      }
+    }
+    if (event.key === " ") {
+      event.preventDefault();
+    }
+    return ["Enter", " "].includes(event.key) && openable ? setIsDropdownVisible(!isDropdownVisible) : null;
+  }, ref: innerRef, role: "combobox", tabIndex: 0, children: [
+    shouldDisplayValues ? /* @__PURE__ */ jsxRuntime.jsx(DisplayValues, { disabled, displayShadowCopy, lastElementMaxWidth, measureRef, nonOverflowedValues, overflow, overflowAmount, overflowed: !!overflowAmount, potentiallyNonOverflowedValues, readOnly, refPlusTag, refTag, size }) : /* @__PURE__ */ jsxRuntime.jsx(index$1.Text, { as: "span", className: selectBar_css.selectinputPlaceholder, disabled, prominence: "weak", sentiment: "neutral", variant: size === "large" ? "body" : "bodySmall", children: placeholder }),
+    /* @__PURE__ */ jsxRuntime.jsxs(index$2.Stack, { alignItems: "center", className: selectBar_css.selectbarState, direction: "row", gap: 1, ref: arrowRef, children: [
+      error ? /* @__PURE__ */ jsxRuntime.jsx(Icon.AlertCircleIcon, { sentiment: "danger" }) : null,
+      success && !error ? /* @__PURE__ */ jsxRuntime.jsx(Icon.CheckCircleIcon, { sentiment: "success" }) : null,
+      clearable && selectedData.selectedValues.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(index$3.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: "small", variant: "ghost", children: /* @__PURE__ */ jsxRuntime.jsx(Icon.CloseIcon, {}) }) : null,
+      /* @__PURE__ */ jsxRuntime.jsx(Icon.ArrowDownIcon, { "aria-label": "show dropdown", disabled: disabled || readOnly, sentiment: "neutral", size: "small" })
+    ] })
+  ] }) });
+};
+exports.SelectBar = SelectBar;

package/dist/components/SelectInput/{SelectBar.d.ts → components/SelectBar.d.ts}

@@ -15,16 +15,5 @@ type SelectBarProps = {
     tooltip?: string;
     dropdownId?: string;
 };
-declare const StyledInputWrapper: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
-} & {
-    'data-readonly': boolean;
-    'data-disabled': boolean;
-    'data-size': "small" | "medium" | "large";
-    'data-state': "neutral" | "success" | "danger";
-    'data-dropdownvisible': boolean;
-    'aria-label'?: string;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 declare const SelectBar: ({ size, clearable, disabled, readOnly, placeholder, success, error, autoFocus, tooltip, innerRef, id, "data-testid": dataTestId, label, dropdownId, }: SelectBarProps) => import("@emotion/react/jsx-runtime").JSX.Element;
-export { SelectBar, StyledInputWrapper };
+export { SelectBar };

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

@@ -0,0 +1,237 @@
+"use client";
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { AlertCircleIcon, CheckCircleIcon, CloseIcon, ArrowDownIcon, PlusIcon } from "@ultraviolet/icons";
+import { assignInlineVars } from "@vanilla-extract/dynamic";
+import { useState, useRef, useMemo, useEffect, useCallback, useLayoutEffect } from "react";
+import { Button } from "../../Button/index.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 { findOptionInOptions } from "../findOptionInOptions.js";
+import { useSelectInput } from "../SelectInputProvider.js";
+import { selectBar, selectinputPlaceholder, selectbarState, multiselectStack, selectBarTags, maxWidthTag, minWidthTag, plusTag, selectedValues } from "./selectBar.css.js";
+const SIZES_TAG = {
+  gap: 8,
+  paddings: 16
+};
+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: `${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 ? (event) => {
+      event.stopPropagation();
+      setSelectedData({
+        clickedOption: option,
+        type: "selectOption"
+      });
+      const newSelectedValues = selectedData.selectedValues?.filter((val) => val !== option.value);
+      onChange?.(newSelectedValues);
+    } : void 0, 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(() => {
+    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 ? accumulator.accumulatedWidth : newAccumulatedWidth,
+          lastVisibleElementWidth: canBeVisible ? elementWidth : accumulator.lastVisibleElementWidth,
+          lastVisibleLabel: canBeVisible ? potentiallyNonOverflowedValues[index].label : accumulator.lastVisibleLabel,
+          measuredHiddenTags: accumulator.measuredHiddenTags + (!canBeVisible ? 1 : 0),
+          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, { 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) {
+        setIsDropdownVisible(true);
+      } else {
+        document.getElementById(`option-0`)?.focus();
+      }
+    }
+    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, 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: "small", variant: "ghost", children: /* @__PURE__ */ jsx(CloseIcon, {}) }) : null,
+      /* @__PURE__ */ jsx(ArrowDownIcon, { "aria-label": "show dropdown", disabled: disabled || readOnly, sentiment: "neutral", size: "small" })
+    ] })
+  ] }) });
+};
+export {
+  SelectBar
+};

package/dist/components/SelectInput/components/dropdown.css.cjs

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+;/* empty css                              */
+const createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
+var dropdown = "uv_5kpm8k0";
+var dropdownContainer = "uv_5kpm8k1";
+var dropdownContainerUnGrouped = "uv_5kpm8k2";
+var dropdownGroup = "uv_5kpm8k3";
+var dropdownGroupSelectable = "uv_5kpm8k4";
+var dropdownGroupWrapper = "uv_5kpm8k5";
+var dropdownItem = createRuntimeFn.createRuntimeFn({ defaultClassName: "uv_5kpm8k6", variantClassNames: { selected: { true: "uv_5kpm8k7" }, disabled: { true: "uv_5kpm8k8" } }, defaultVariants: { disabled: false, selected: false }, compoundVariants: [] });
+var footer = "uv_5kpm8k9";
+var dropdownCheckbox = "uv_5kpm8ka";
+var dropdownEmptyState = "uv_5kpm8kb";
+var dropdownLoadMore = "uv_5kpm8kc";
+var dropdownInfo = "uv_5kpm8kd";
+var dropdownInfoTextItem = "uv_5kpm8ke";
+var dropdownInfoContainer = "uv_5kpm8kf";
+var searchBar = "uv_5kpm8kg";
+exports.dropdown = dropdown;
+exports.dropdownCheckbox = dropdownCheckbox;
+exports.dropdownContainer = dropdownContainer;
+exports.dropdownContainerUnGrouped = dropdownContainerUnGrouped;
+exports.dropdownEmptyState = dropdownEmptyState;
+exports.dropdownGroup = dropdownGroup;
+exports.dropdownGroupSelectable = dropdownGroupSelectable;
+exports.dropdownGroupWrapper = dropdownGroupWrapper;
+exports.dropdownInfo = dropdownInfo;
+exports.dropdownInfoContainer = dropdownInfoContainer;
+exports.dropdownInfoTextItem = dropdownInfoTextItem;
+exports.dropdownItem = dropdownItem;
+exports.dropdownLoadMore = dropdownLoadMore;
+exports.footer = footer;
+exports.searchBar = searchBar;