@ultraviolet/ui 3.12.2 → 3.13.0

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

@@ -0,0 +1,139 @@
+'use client';
+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 { init_styles_css, selectInputStyle } from "../../styles.css.js";
+import { useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/SelectInput/components/Dropdown/Option.tsx
+var DisplayOption;
+var init_Option = __esmMin(() => {
+	init_Stack();
+	init_Text();
+	init_Tooltip();
+	init_styles_css();
+	DisplayOption = ({ option, optionalInfoPlacement, descriptionDirection, textVariant }) => {
+		const captionSize = useMemo(() => {
+			if (textVariant === "body") return "bodySmall";
+			if (textVariant === "bodySmall") return "caption";
+			return "captionSmall";
+		}, [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__ */ jsx(Tooltip, {
+			disableAnimation: true,
+			text: option.tooltip,
+			children: /* @__PURE__ */ jsx(Stack, {
+				"data-testid": `option-stack-${option.value}`,
+				direction: "row",
+				gap: .5,
+				justifyContent: "left",
+				children: /* @__PURE__ */ jsxs(Stack, {
+					alignItems: "center",
+					className: selectInputStyle.dropdownInfoContainer,
+					direction: "row",
+					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__ */ jsx(Tooltip, {
+			disableAnimation: true,
+			text: option.tooltip,
+			children: /* @__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__ */ jsx(Tooltip, {
+			disableAnimation: true,
+			text: option.tooltip,
+			children: /* @__PURE__ */ jsxs(Stack, {
+				alignItems: "normal",
+				direction: "row",
+				gap: .5,
+				justifyContent: option.optionalInfo ? "left" : "space-between",
+				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__ */ jsx(Tooltip, {
+			disableAnimation: true,
+			text: option.tooltip,
+			children: /* @__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",
+					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/SelectInput/components/Dropdown/SearchBar.d.ts

@@ -0,0 +1,10 @@
+import type { DataType } from '../../types';
+import type { Dispatch, SetStateAction } from 'react';
+type SearchBarProps = {
+    placeholder: string;
+    displayedOptions: DataType;
+    setSearchBarActive: Dispatch<SetStateAction<boolean>>;
+};
+export declare const SearchBar: ({ placeholder, displayedOptions, setSearchBarActive, }: SearchBarProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=SearchBar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SearchBar.d.ts","sourceRoot":"","sources":["../../../../../src/components/SelectInput/components/Dropdown/SearchBar.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,QAAQ,EAAc,MAAM,aAAa,CAAA;AACvD,OAAO,KAAK,EAAE,QAAQ,EAAiB,cAAc,EAAE,MAAM,OAAO,CAAA;AAEpE,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;AAqED,eAAO,MAAM,SAAS,qHAkHrB,CAAA"}

package/dist/components/SelectInput/components/{SearchBarDropdown.js → Dropdown/SearchBar.js}

@@ -1,22 +1,24 @@
 'use client';
-import { __esmMin, __name } from "../../../_virtual/_rolldown/runtime.js";
-import { _objectSpread2, init_objectSpread2 } from "../../../_virtual/_@oxc-project_runtime@0.120.0/helpers/objectSpread2.js";
-import { TextInput, init_TextInput } from "../../TextInput/index.js";
-import { OPTION_SELECTOR, init_constants } from "../constants.js";
-import { init_SelectInputProvider, useSelectInput } from "../SelectInputProvider.js";
-import { init_styles_css, selectInputStyle } from "../styles.css.js";
+import { __esmMin, __name } from "../../../../_virtual/_rolldown/runtime.js";
+import { _objectSpread2, init_objectSpread2 } from "../../../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectSpread2.js";
+import { TextInput, init_TextInput } from "../../../TextInput/index.js";
+import { OPTION_SELECTOR, init_constants } from "../../constants.js";
+import { init_SelectInputProvider, useSelectInput } from "../../SelectInputProvider.js";
+import { init_styles_css, selectInputStyle } from "../../styles.css.js";
+import { computeSelectedDataMultiselect, computeSelectedDataSingleSelect, init_helpers } from "../helpers.js";
 import { useEffect, useRef } from "react";
 import { jsx } from "react/jsx-runtime";
 import { SearchIcon } from "@ultraviolet/icons/SearchIcon";
 import { isFuzzyMatch, normalizeString } from "@scaleway/fuzzy-search";
 
-//#region src/components/SelectInput/components/SearchBarDropdown.tsx
-var getReferenceText, searchRegex, findClosestOption, escapeRegExp, SearchBarDropdown;
-var init_SearchBarDropdown = __esmMin(() => {
+//#region src/components/SelectInput/components/Dropdown/SearchBar.tsx
+var getReferenceText, searchRegex, findClosestOption, escapeRegExp, SearchBar;
+var init_SearchBar = __esmMin(() => {
 	init_TextInput();
 	init_constants();
 	init_SelectInputProvider();
 	init_styles_css();
+	init_helpers();
 	init_objectSpread2();
 	getReferenceText = (option) => {
 		if (option.searchText) return normalizeString(option.searchText);
@@ -43,7 +45,7 @@ var init_SearchBarDropdown = __esmMin(() => {
 		return null;
 	};
 	escapeRegExp = (string) => string.replace(/[.*+?^{}()|[\]\\]/g, String.raw`\$&`);
-	SearchBarDropdown = ({ placeholder, displayedOptions, setSearchBarActive }) => {
+	SearchBar = ({ placeholder, displayedOptions, setSearchBarActive }) => {
 		const searchInputRef = useRef(null);
 		const { onChange, onSearch, setSearchInput, searchInput, options, multiselect, setSelectedData, selectedData, size } = useSelectInput();
 		const handleChange = (search) => {
@@ -64,19 +66,13 @@ var init_SearchBarDropdown = __esmMin(() => {
 			if (key === "Enter") {
 				const closestOption = findClosestOption(displayedOptions, search);
 				if (closestOption) if (multiselect) {
-					setSelectedData({
-						clickedOption: closestOption,
-						group: Array.isArray(options) ? void 0 : Object.keys(options).find((group) => options[group].includes(closestOption)),
-						type: "selectOption"
-					});
-					onChange === null || onChange === void 0 || onChange(selectedData.selectedValues.includes(closestOption.value) ? selectedData.selectedValues : [...selectedData.selectedValues, closestOption.value]);
+					const data = computeSelectedDataMultiselect(closestOption, options, selectedData);
+					setSelectedData(data.computedData);
+					onChange === null || onChange === void 0 || onChange(data.onChangeData);
 				} else {
-					var _selectedData$selecte;
-					setSelectedData({
-						clickedOption: closestOption,
-						type: "selectOption"
-					});
-					onChange === null || onChange === void 0 || onChange((_selectedData$selecte = selectedData.selectedValues[0]) !== null && _selectedData$selecte !== void 0 ? _selectedData$selecte : "");
+					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();
@@ -114,5 +110,5 @@ var init_SearchBarDropdown = __esmMin(() => {
 });
 
 //#endregion
-init_SearchBarDropdown();
-export { SearchBarDropdown, init_SearchBarDropdown };
+init_SearchBar();
+export { SearchBar, init_SearchBar };

package/dist/components/SelectInput/components/Dropdown/SelectAll.d.ts

@@ -0,0 +1,4 @@
+export declare const SelectAll: ({ textVariant, }: {
+    textVariant: "body" | "bodySmall" | "caption";
+}) => import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=SelectAll.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SelectAll.d.ts","sourceRoot":"","sources":["../../../../../src/components/SelectInput/components/Dropdown/SelectAll.tsx"],"names":[],"mappings":"AAUA,eAAO,MAAM,SAAS;;oDAsFrB,CAAA"}

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

@@ -0,0 +1,84 @@
+import { __esmMin, __name } from "../../../../_virtual/_rolldown/runtime.js";
+import { Stack, init_Stack } from "../../../Stack/index.js";
+import { Text, init_Text } from "../../../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/SelectInput/components/Dropdown/SelectAll.tsx
+var SelectAll;
+var init_SelectAll = __esmMin(() => {
+	init_Checkbox();
+	init_Stack();
+	init_Text();
+	init_SelectInputProvider();
+	init_styles_css();
+	SelectAll = ({ textVariant }) => {
+		const { onChange, options, multiselect, selectAll, setSelectedData, selectedData, size } = useSelectInput();
+		const selectAllOptions = () => {
+			if (multiselect) {
+				setSelectedData({ type: "selectAll" });
+				if (selectedData.allSelected && onChange) onChange([]);
+				else {
+					const allValues = [];
+					if (Array.isArray(options)) options.map((option) => allValues.push(option));
+					else Object.keys(options).map((group) => options[group].map((option) => {
+						if (!option.disabled) allValues.push(option);
+						return null;
+					}));
+					onChange === null || onChange === void 0 || onChange(allValues.map((value) => value.value));
+				}
+			}
+		};
+		return selectAll && multiselect ? /* @__PURE__ */ jsx(Stack, {
+			gap: .25,
+			id: "items",
+			tabIndex: -1,
+			children: /* @__PURE__ */ jsx("div", {
+				"aria-disabled": false,
+				"aria-label": "select-all",
+				"aria-selected": selectedData.allSelected,
+				className: cn(selectInputStyle.dropdownItem({
+					selected: selectedData.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: selectedData.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 === "small" ? "captionSmall" : "bodySmall",
+							children: selectAll === null || selectAll === void 0 ? void 0 : selectAll.description
+						})]
+					})
+				})
+			})
+		}) : null;
+	};
+});
+
+//#endregion
+init_SelectAll();
+export { SelectAll, init_SelectAll };

package/dist/components/SelectInput/components/{dropdown.css.d.ts → Dropdown/dropdown.css.d.ts}

@@ -8,7 +8,8 @@ export declare const dropdownGroupSelectable: import("@vanilla-extract/recipes")
         small: {
             paddingLeft: `var(--${string})`;
         };
-        default: {};
+        large: {};
+        medium: {};
     };
 }>;
 export declare const dropdownGroupWrapper: string;
@@ -21,7 +22,8 @@ export declare const dropdownItem: import("@vanilla-extract/recipes").RuntimeFn<
         };
     };
     size: {
-        default: {};
+        large: {};
+        medium: {};
         small: {
             padding: `var(--${string})`;
         };

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

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown.css.d.ts","sourceRoot":"","sources":["../../../../../src/components/SelectInput/components/Dropdown/dropdown.css.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,aAAa,oBAAc,CAAA;AAExC,eAAO,MAAM,QAAQ,QASnB,CAAA;AAEF,eAAO,MAAM,iBAAiB,QAK5B,CAAA;AAEF,eAAO,MAAM,0BAA0B,QAErC,CAAA;AAEF,eAAO,MAAM,aAAa,QAmBxB,CAAA;AAEF,eAAO,MAAM,uBAAuB;;;;;;;;EAsBlC,CAAA;AAEF,eAAO,MAAM,oBAAoB,QAG/B,CAAA;AAEF,eAAO,MAAM,oBAAoB,QAO/B,CAAA;AAEF,eAAO,MAAM,gBAAgB,QAK3B,CAAA;AAEF,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8CvB,CAAA;AAEF,eAAO,MAAM,MAAM,QAKjB,CAAA;AAEF,eAAO,MAAM,gBAAgB,QAM3B,CAAA;AAEF,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"}

package/dist/components/SelectInput/components/{dropdown.css.js → Dropdown/dropdown.css.js}

@@ -1,35 +1,37 @@
-import { __esmMin } from "../../../_virtual/_rolldown/runtime.js";
+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/SelectInput/components/dropdown.css.ts
+//#region src/components/SelectInput/components/Dropdown/dropdown.css.ts
 var dropdownWidth, dropdownGroupSelectable, dropdownItem;
 var init_dropdown_css = __esmMin(() => {
 	init_dropdown_css_ts_vanilla();
-	dropdownWidth = "var(--uv_5kpm8k0)";
+	dropdownWidth = "var(--uv_igqisu0)";
 	dropdownGroupSelectable = createRuntimeFn({
-		defaultClassName: "uv_5kpm8k5",
+		defaultClassName: "uv_igqisu5",
 		variantClassNames: { size: {
-			small: "uv_5kpm8k6",
-			"default": "uv_5kpm8k7"
+			small: "uv_igqisu6",
+			large: "uv_igqisu7",
+			medium: "uv_igqisu8"
 		} },
-		defaultVariants: { size: "default" },
+		defaultVariants: { size: "large" },
 		compoundVariants: []
 	});
 	dropdownItem = createRuntimeFn({
-		defaultClassName: "uv_5kpm8kb uv_5kpm8ka uv_5kpm8k9",
+		defaultClassName: "uv_igqisuc uv_igqisub uv_igqisua",
 		variantClassNames: {
-			selected: { true: "uv_5kpm8kc" },
+			selected: { true: "uv_igqisud" },
 			size: {
-				"default": "uv_5kpm8kd",
-				small: "uv_5kpm8ke"
+				large: "uv_igqisue",
+				medium: "uv_igqisuf",
+				small: "uv_igqisug"
 			},
-			disabled: { true: "uv_5kpm8kf" }
+			disabled: { true: "uv_igqisuh" }
 		},
 		defaultVariants: {
 			disabled: false,
 			selected: false,
-			size: "default"
+			size: "large"
 		},
 		compoundVariants: []
 	});

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

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

package/dist/components/SelectInput/components/Dropdown/index.d.ts

@@ -0,0 +1,2 @@
+export { Dropdown } from './Dropdown';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/SelectInput/components/Dropdown/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/SelectInput/components/Dropdown/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA"}

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

@@ -0,0 +1,11 @@
+import { __esmMin } from "../../../../_virtual/_rolldown/runtime.js";
+import { Dropdown, init_Dropdown as init_Dropdown$1 } from "./Dropdown.js";
+
+//#region src/components/SelectInput/components/Dropdown/index.ts
+var init_Dropdown = __esmMin(() => {
+	init_Dropdown$1();
+});
+
+//#endregion
+init_Dropdown();
+export { init_Dropdown };

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

@@ -0,0 +1 @@
+{"version":3,"file":"SelectBar.d.ts","sourceRoot":"","sources":["../../../../../src/components/SelectInput/components/SelectBar/SelectBar.tsx"],"names":[],"mappings":"AA4BA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtC,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;CACpB,CAAA;AAED,QAAA,MAAM,SAAS,oNA4Rd,CAAA;AAED,OAAO,EAAE,SAAS,EAAE,CAAA"}

package/dist/components/SelectInput/components/{SelectBar.js → SelectBar/SelectBar.js}

@@ -1,102 +1,35 @@
 'use client';
-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 { __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 { 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 { cn } from "@ultraviolet/utils";
-import { assignInlineVars } from "@vanilla-extract/dynamic";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { ArrowDownIcon } from "@ultraviolet/icons/ArrowDownIcon";
 import { AlertCircleIcon } from "@ultraviolet/icons/AlertCircleIcon";
 import { CheckCircleIcon } from "@ultraviolet/icons/CheckCircleIcon";
 import { CloseIcon } from "@ultraviolet/icons/CloseIcon";
-import { PlusIcon } from "@ultraviolet/icons/PlusIcon";
+import { ArrowDownIcon } from "@ultraviolet/icons/ArrowDownIcon";
 
-//#region src/components/SelectInput/components/SelectBar.tsx
-var DisplayValues, SelectBar;
+//#region src/components/SelectInput/components/SelectBar/SelectBar.tsx
+var 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",
-					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
-		});
-	};
+	init_helpers();
+	init_Values();
 	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();
@@ -141,51 +74,17 @@ var init_SelectBar = __esmMin(() => {
 			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 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 = accumulatedWidth + (measuredHiddenTags ? additionnalElementsWidth : 0) - innerWidth;
+				const overflowPx = tagsWidth.accumulatedWidth + (tagsWidth.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);
-				}
+				const hasHiddenTags = tagsWidth.measuredHiddenTags > 0;
+				const overflowVars = computeOverflowVars(tagsWidth, hasOverflow, tagsWidth.lastVisibleElementWidth - overflowPx, hasHiddenTags, potentiallyNonOverflowedValues, additionnalElementsWidth);
+				setOverflowAmount(overflowVars.overflowAmount);
+				setNonOverFlowedValues(overflowVars.nonOverflowedValues);
+				setLastElementMaxWidth(overflowVars.lastElementMaxWidth);
+				setOverflow(overflowVars.hasOverflow);
 			}
 			setDisplayShadowCopy(false);
 		}, [

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

@@ -0,0 +1,20 @@
+import type { OptionType } from '../../types';
+import type { RefObject } from 'react';
+type DisplayValuesProps = {
+    refTag: RefObject<HTMLDivElement | null>;
+    nonOverflowedValues: OptionType[];
+    potentiallyNonOverflowedValues: OptionType[];
+    disabled: boolean;
+    readOnly: boolean;
+    overflowed: boolean;
+    overflowAmount: number;
+    measureRef: RefObject<HTMLDivElement | null>;
+    lastElementMaxWidth: number;
+    overflow?: boolean;
+    refPlusTag: RefObject<HTMLDivElement | null>;
+    displayShadowCopy?: boolean;
+    textVariant: 'body' | 'bodySmall' | 'caption';
+};
+export declare const DisplayValues: ({ refTag, nonOverflowedValues, potentiallyNonOverflowedValues, disabled, readOnly, overflowed, overflowAmount, measureRef, lastElementMaxWidth, overflow, refPlusTag, displayShadowCopy, textVariant, }: DisplayValuesProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=Values.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Values.d.ts","sourceRoot":"","sources":["../../../../../src/components/SelectInput/components/SelectBar/Values.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AAC7C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtC,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,GAAG,SAAS,CAAA;CAC9C,CAAA;AAED,eAAO,MAAM,aAAa,0QAkHzB,CAAA"}