@ultraviolet/ui 3.24.2 → 3.25.0

package/dist/components/Data Entry/SelectInput/components/Dropdown/Option.js

@@ -0,0 +1,116 @@
+'use client';
+import { __esmMin, __name } from "../../../../../_virtual/_rolldown/runtime.js";
+import { Stack, init_Stack } from "../../../../Layout/Stack/index.js";
+import { Text, init_Text } from "../../../../Typography/Text/index.js";
+import { init_styles_css, selectInputStyle } from "../../styles.css.js";
+import { useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/Data Entry/SelectInput/components/Dropdown/Option.tsx
+var DisplayOption;
+function init_Option() {
+	return (init_Option = __esmMin(() => {
+		init_Stack();
+		init_Text();
+		init_styles_css();
+		DisplayOption = ({ option, optionalInfoPlacement, descriptionDirection, textVariant }) => {
+			const captionSize = useMemo(() => textVariant === "body" ? "bodySmall" : "caption", [textVariant]);
+			const optionDescription = option.description ? /* @__PURE__ */ jsx(Text, {
+				as: "span",
+				placement: "left",
+				prominence: "weak",
+				sentiment: option.disabled ? void 0 : "neutral",
+				variant: captionSize,
+				children: option.description
+			}) : null;
+			if (descriptionDirection === "row" && optionalInfoPlacement === "left") return /* @__PURE__ */ jsxs(Stack, {
+				alignItems: optionDescription ? "flex-start" : "center",
+				className: selectInputStyle.dropdownInfoContainer,
+				direction: "row",
+				"data-testid": `option-stack-${option.value}`,
+				gap: .5,
+				children: [
+					option.optionalInfo,
+					/* @__PURE__ */ jsx(Text, {
+						as: "span",
+						className: selectInputStyle.dropdownInfoTextItem,
+						placement: "left",
+						variant: textVariant,
+						children: option.label
+					}),
+					optionDescription
+				]
+			});
+			if (descriptionDirection === "row" && optionalInfoPlacement === "right") return /* @__PURE__ */ jsxs(Stack, {
+				alignItems: "baseline",
+				"data-testid": `option-stack-${option.value}`,
+				direction: "row",
+				gap: .5,
+				justifyContent: "space-between",
+				children: [/* @__PURE__ */ jsxs(Stack, {
+					alignItems: "baseline",
+					className: selectInputStyle.dropdownInfoContainer,
+					direction: "row",
+					gap: .5,
+					children: [/* @__PURE__ */ jsx(Text, {
+						as: "span",
+						className: selectInputStyle.dropdownInfoTextItem,
+						placement: "left",
+						variant: textVariant,
+						children: option.label
+					}), optionDescription]
+				}), option.optionalInfo ? /* @__PURE__ */ jsx("div", {
+					className: selectInputStyle.dropdownInfo,
+					children: option.optionalInfo
+				}) : null]
+			});
+			if (descriptionDirection === "column" && optionalInfoPlacement === "left") return /* @__PURE__ */ jsxs(Stack, {
+				alignItems: "normal",
+				direction: "row",
+				gap: .5,
+				justifyContent: option.optionalInfo ? "left" : "space-between",
+				className: selectInputStyle.optionalInfoPadding,
+				children: [option.optionalInfo, /* @__PURE__ */ jsxs(Stack, {
+					className: selectInputStyle.dropdownInfoContainer,
+					"data-testid": `option-stack-${option.value}`,
+					direction: "column",
+					gap: .5,
+					children: [/* @__PURE__ */ jsx(Text, {
+						as: "span",
+						className: selectInputStyle.dropdownInfoTextItem,
+						placement: "left",
+						variant: textVariant,
+						children: option.label
+					}), optionDescription]
+				})]
+			});
+			return /* @__PURE__ */ jsxs(Stack, {
+				alignItems: "normal",
+				"data-testid": `option-stack-${option.value}`,
+				direction: "column",
+				gap: .5,
+				children: [/* @__PURE__ */ jsxs(Stack, {
+					className: selectInputStyle.dropdownInfoContainer,
+					direction: "row",
+					gap: .5,
+					justifyContent: "space-between",
+					alignItems: optionDescription ? "flex-start" : "center",
+					children: [/* @__PURE__ */ jsx(Text, {
+						as: "span",
+						className: selectInputStyle.dropdownInfoTextItem,
+						placement: "left",
+						variant: textVariant,
+						children: option.label
+					}), option.optionalInfo ? /* @__PURE__ */ jsx("div", {
+						className: selectInputStyle.dropdownInfo,
+						children: option.optionalInfo
+					}) : null]
+				}), optionDescription]
+			});
+		};
+	}))();
+}
+
+//#endregion
+init_Option();
+export { DisplayOption, init_Option };

package/dist/components/Data Entry/SelectInput/components/Dropdown/SearchBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchBar.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Data Entry/SelectInput/components/Dropdown/SearchBar.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,QAAQ,EAAiB,cAAc,EAAE,MAAM,OAAO,CAAA;AAKpE,OAAO,KAAK,EAAE,QAAQ,EAAc,MAAM,aAAa,CAAA;AAIvD,KAAK,cAAc,GAAG;IACpB,WAAW,EAAE,MAAM,CAAA;IACnB,gBAAgB,EAAE,QAAQ,CAAA;IAC1B,kBAAkB,EAAE,QAAQ,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAA;CACtD,CAAA;AAwDD,eAAO,MAAM,SAAS,0DAA2D,cAAc,gCAgF9F,CAAA"}

package/dist/components/Data Entry/SelectInput/components/Dropdown/SearchBar.js

@@ -0,0 +1,127 @@
+'use client';
+import { __esmMin, __name } from "../../../../../_virtual/_rolldown/runtime.js";
+import _objectSpread2, { init_objectSpread2 } from "../../../../../_virtual/_@oxc-project_runtime@0.146.0/helpers/esm/objectSpread2.js";
+import { TextInput, init_TextInput } from "../../../TextInput/index.js";
+import { init_styles_css, searchInputStyle } from "../../../SearchInput/styles.css.js";
+import { OPTION_SELECTOR, init_constants } from "../../constants.js";
+import { init_SelectInputProvider, useSelectInput } from "../../SelectInputProvider.js";
+import { init_styles_css as init_styles_css$1, selectInputStyle } from "../../styles.css.js";
+import { computeSelectedDataMultiselect, computeSelectedDataSingleSelect, init_helpers } from "../helpers.js";
+import { useEffect, useRef } from "react";
+import { cn } from "@ultraviolet/utils";
+import { jsx } from "react/jsx-runtime";
+import { SearchIcon } from "@ultraviolet/icons/SearchIcon";
+import { isFuzzyMatch, normalizeString } from "@scaleway/fuzzy-search";
+
+//#region src/components/Data Entry/SelectInput/components/Dropdown/SearchBar.tsx
+var getReferenceText, searchRegex, findClosestOption, escapeRegExp, SearchBar;
+function init_SearchBar() {
+	return (init_SearchBar = __esmMin(() => {
+		init_styles_css();
+		init_TextInput();
+		init_constants();
+		init_SelectInputProvider();
+		init_helpers();
+		init_styles_css$1();
+		init_objectSpread2();
+		getReferenceText = (option) => {
+			if (option.searchText) return normalizeString(option.searchText);
+			if (typeof option.label === "string") return normalizeString(option.label);
+			return "";
+		};
+		searchRegex = (data, query) => data.filter((option) => {
+			const referenceText = getReferenceText(option);
+			const regex = new RegExp(query, "iu");
+			return (query.length > 2 ? isFuzzyMatch(query, referenceText) : referenceText.match(regex)) || typeof option.description === "string" && option.description.match(regex) || option.value.match(regex);
+		});
+		findClosestOption = (options, searchInput) => {
+			if (searchInput) {
+				if (Array.isArray(options)) {
+					const possibleOption = [...options].find((option) => !option.disabled);
+					if (possibleOption) return possibleOption;
+				} else {
+					const possibleOptions = _objectSpread2({}, 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)) return Object.keys(possibleOptions).map((group) => possibleOptions[group][0]).find((value) => !!value);
+				}
+			}
+			return null;
+		};
+		escapeRegExp = (string) => string.replace(/[.*+?^{}()|[\]\\]/gu, String.raw`\$&`);
+		SearchBar = ({ placeholder, displayedOptions, setSearchBarActive }) => {
+			const searchInputRef = useRef(null);
+			const { onChange, onSearch, setSearchInput, searchInput, options, multiselect, setSelectedData, selectedData, size } = useSelectInput();
+			const handleChange = (search) => {
+				if (search.length > 0) {
+					if (Array.isArray(options)) {
+						const filteredOptions = searchRegex([...options], escapeRegExp(search.toString()));
+						onSearch(filteredOptions);
+					} else {
+						const filteredOptions = _objectSpread2({}, options);
+						Object.keys(filteredOptions).map((group) => {
+							filteredOptions[group] = searchRegex(filteredOptions[group], escapeRegExp(search.toString()));
+							return null;
+						});
+						onSearch(filteredOptions);
+					}
+				} else onSearch(options);
+				setSearchInput(search);
+			};
+			const handleKeyDown = (event, search) => {
+				const { key } = event;
+				if (key === "Enter") {
+					const closestOption = findClosestOption(displayedOptions, search);
+					if (closestOption) {
+						if (multiselect) {
+							const data = computeSelectedDataMultiselect(closestOption, options, selectedData);
+							setSelectedData(data.computedData);
+							onChange === null || onChange === void 0 || onChange(data.onChangeData);
+						} else {
+							const data = computeSelectedDataSingleSelect(closestOption, selectedData);
+							setSelectedData(data.computedData);
+							onChange === null || onChange === void 0 || onChange(data.onChangeData);
+						}
+					}
+				} else if (key === "Tab" || key === "ArrowDown") {
+					event === null || event === void 0 || event.preventDefault();
+					const optionsDropdown = document.querySelectorAll(OPTION_SELECTOR);
+					if (optionsDropdown && optionsDropdown.length > 0) optionsDropdown[0].focus();
+				}
+			};
+			useEffect(() => {
+				const timeout = setTimeout(() => {
+					var _searchInputRef$curre;
+					(_searchInputRef$curre = searchInputRef.current) === null || _searchInputRef$curre === void 0 || _searchInputRef$curre.focus();
+				}, 50);
+				return () => {
+					if (timeout) clearTimeout(timeout);
+				};
+			}, []);
+			return /* @__PURE__ */ jsx(TextInput, {
+				"aria-label": "search-bar",
+				className: cn(selectInputStyle.searchBar, searchInputStyle.searchInput),
+				"data-testid": "search-bar",
+				onBlur: () => setSearchBarActive(false),
+				onChange: (event) => handleChange(event.target.value),
+				onFocus: () => setSearchBarActive(true),
+				onKeyDown: (event) => handleKeyDown(event, searchInput),
+				placeholder,
+				prefix: /* @__PURE__ */ jsx(SearchIcon, {
+					sentiment: "neutral",
+					prominence: "weak",
+					size: "small"
+				}),
+				ref: searchInputRef,
+				size: size === "small" ? "small" : "medium",
+				value: searchInput
+			});
+		};
+	}))();
+}
+
+//#endregion
+init_SearchBar();
+export { SearchBar, init_SearchBar };

package/dist/components/Data Entry/SelectInput/components/Dropdown/SelectAll.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectAll.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Data Entry/SelectInput/components/Dropdown/SelectAll.tsx"],"names":[],"mappings":"AAOA,eAAO,MAAM,SAAS,oBAAqB;IAAE,WAAW,EAAE,MAAM,GAAG,WAAW,CAAA;CAAE,uCAgF/E,CAAA"}

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

@@ -0,0 +1,80 @@
+import { __esmMin, __name } from "../../../../../_virtual/_rolldown/runtime.js";
+import { Stack, init_Stack } from "../../../../Layout/Stack/index.js";
+import { Text, init_Text } from "../../../../Typography/Text/index.js";
+import { init_SelectInputProvider, useSelectInput } from "../../SelectInputProvider.js";
+import { init_styles_css, selectInputStyle } from "../../styles.css.js";
+import { Checkbox, init_Checkbox } from "../../../Checkbox/index.js";
+import { cn } from "@ultraviolet/utils";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/Data Entry/SelectInput/components/Dropdown/SelectAll.tsx
+var SelectAll;
+function init_SelectAll() {
+	return (init_SelectAll = __esmMin(() => {
+		init_Stack();
+		init_Text();
+		init_Checkbox();
+		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();
+export { SelectAll, init_SelectAll };

package/dist/components/Data Entry/SelectInput/components/Dropdown/dropdown.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown.css.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Data Entry/SelectInput/components/Dropdown/dropdown.css.ts"],"names":[],"mappings":"AAOA,eAAO,MAAM,aAAa,oBAAc,CAAA;AAExC,eAAO,MAAM,QAAQ,QASnB,CAAA;AAEF,eAAO,MAAM,iBAAiB,QAI5B,CAAA;AAEF,eAAO,MAAM,aAAa,QAmBxB,CAAA;AAEF,eAAO,MAAM,uBAAuB;;QAY9B,KAAK;YACH,WAAW;;QAEb,KAAK;QACL,MAAM;;EAMV,CAAA;AAEF,eAAO,MAAM,eAAe,QAU1B,CAAA;AAEF,eAAO,MAAM,oBAAoB,QAG/B,CAAA;AAEF,eAAO,MAAM,oBAAoB,QAQ/B,CAAA;AAEF,eAAO,MAAM,gBAAgB,QAM3B,CAAA;AAEF,eAAO,MAAM,YAAY;;QAoBnB,IAAI;YACF,eAAe;;;;QAIjB,KAAK;QACL,MAAM;QACN,KAAK;YACH,OAAO;;;;;;;;;;;;;;;;;EAkBb,CAAA;AAEF,eAAO,MAAM,MAAM,QAKjB,CAAA;AAQF,eAAO,MAAM,gBAAgB,QAA8D,CAAA;AAE3F,eAAO,MAAM,qBAAqB,QAA0D,CAAA;AAC5F,eAAO,MAAM,kBAAkB,QAAqC,CAAA;AAEpE,eAAO,MAAM,gBAAgB,QAAyC,CAAA;AAEtE,eAAO,MAAM,YAAY,QAEvB,CAAA;AAEF,eAAO,MAAM,oBAAoB,QAM/B,CAAA;AAEF,eAAO,MAAM,qBAAqB,QAAgC,CAAA;AAElE,eAAO,MAAM,SAAS,QAGpB,CAAA;AAEF,eAAO,MAAM,cAAc,QAWzB,CAAA;AAEF,eAAO,MAAM,mBAAmB,QAAY,CAAA"}

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

@@ -0,0 +1,44 @@
+import { __esmMin } from "../../../../../_virtual/_rolldown/runtime.js";
+import { init_dropdown_css_ts_vanilla } from "./dropdown.css.ts.vanilla.js";
+import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
+
+//#region src/components/Data Entry/SelectInput/components/Dropdown/dropdown.css.ts
+var dropdownWidth, dropdownGroupSelectable, dropdownItem;
+function init_dropdown_css() {
+	return (init_dropdown_css = __esmMin(() => {
+		/* @__PURE__ */ init_dropdown_css_ts_vanilla();
+		dropdownWidth = "var(--uv_1hff1el0)";
+		dropdownGroupSelectable = createRuntimeFn({
+			defaultClassName: "uv_1hff1el4",
+			variantClassNames: { size: {
+				small: "uv_1hff1el5",
+				large: "uv_1hff1el6",
+				medium: "uv_1hff1el7"
+			} },
+			defaultVariants: { size: "large" },
+			compoundVariants: []
+		});
+		dropdownItem = createRuntimeFn({
+			defaultClassName: "uv_1hff1elc uv_1hff1elb uv_1hff1ela",
+			variantClassNames: {
+				selected: { true: "uv_1hff1eld" },
+				size: {
+					large: "uv_1hff1ele",
+					medium: "uv_1hff1elf",
+					small: "uv_1hff1elg"
+				},
+				disabled: { true: "uv_1hff1elh" }
+			},
+			defaultVariants: {
+				disabled: false,
+				selected: false,
+				size: "large"
+			},
+			compoundVariants: []
+		});
+	}))();
+}
+
+//#endregion
+init_dropdown_css();
+export { dropdownWidth, init_dropdown_css };

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"SelectBar.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Data Entry/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/Data Entry/SelectInput/components/SelectBar/SelectBar.js

@@ -0,0 +1,210 @@
+'use client';
+import { __esmMin, __name } from "../../../../../_virtual/_rolldown/runtime.js";
+import { Stack, init_Stack } from "../../../../Layout/Stack/index.js";
+import { Tooltip, init_Tooltip } from "../../../../Overlay/Tooltip/index.js";
+import { Text, init_Text } from "../../../../Typography/Text/index.js";
+import { Button, init_Button } from "../../../../Action/Button/index.js";
+import { hasHelperText, init_hasHelperText } from "../../../../../helpers/hasHelperText.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 { computeOverflowVars, getTagsWidth, init_helpers } from "../helpers.js";
+import { findOptionInOptions, init_findOptionInOptions } from "../../findOptionInOptions.js";
+import { DisplayValues, init_Values } from "./Values.js";
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { AlertCircleIcon } from "@ultraviolet/icons/AlertCircleIcon";
+import { CheckCircleIcon } from "@ultraviolet/icons/CheckCircleIcon";
+import { CloseIcon } from "@ultraviolet/icons/CloseIcon";
+import { ArrowDownIcon } from "@ultraviolet/icons/ArrowDownIcon";
+
+//#region src/components/Data Entry/SelectInput/components/SelectBar/SelectBar.tsx
+var SelectBar;
+function init_SelectBar() {
+	return (init_SelectBar = __esmMin(() => {
+		init_hasHelperText();
+		init_Button();
+		init_Stack();
+		init_Tooltip();
+		init_Text();
+		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, {
+								accessibleLabel: "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, {
+								disabled: disabled || readOnly,
+								sentiment: "neutral",
+								size: "small"
+							})
+						]
+					})]
+				})
+			});
+		};
+	}))();
+}
+
+//#endregion
+init_SelectBar();
+export { SelectBar, init_SelectBar };

package/dist/components/Data Entry/SelectInput/components/SelectBar/Values.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Values.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Data Entry/SelectInput/components/SelectBar/Values.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAMtC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AAI7C,KAAK,kBAAkB,GAAG;IACxB,MAAM,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAA;IACxC,mBAAmB,EAAE,UAAU,EAAE,CAAA;IACjC,8BAA8B,EAAE,UAAU,EAAE,CAAA;IAC5C,QAAQ,EAAE,OAAO,CAAA;IACjB,QAAQ,EAAE,OAAO,CAAA;IACjB,UAAU,EAAE,OAAO,CAAA;IACnB,cAAc,EAAE,MAAM,CAAA;IACtB,UAAU,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAA;IAC5C,mBAAmB,EAAE,MAAM,CAAA;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,UAAU,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAA;IAC5C,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,WAAW,EAAE,MAAM,GAAG,WAAW,CAAA;CAClC,CAAA;AAED,eAAO,MAAM,aAAa,4MAcvB,kBAAkB,gCA4FpB,CAAA"}