@ultraviolet/ui 3.12.3 → 3.13.0

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

@@ -0,0 +1,218 @@
+'use client';
+import { __esmMin, __name } from "../../../../_virtual/_rolldown/runtime.js";
+import { _objectSpread2, init_objectSpread2 } from "../../../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectSpread2.js";
+import { Stack, init_Stack } from "../../../Stack/index.js";
+import { Popup, init_Popup } from "../../../Popup/index.js";
+import { ModalContext, init_ModalProvider } from "../../../Modal/ModalProvider.js";
+import { INPUT_SIZE_HEIGHT, init_constants } from "../../constants.js";
+import { init_SelectInputProvider, useSelectInput } from "../../SelectInputProvider.js";
+import { init_styles_css, selectInputStyle } from "../../styles.css.js";
+import { CreateDropdown, init_Content } from "./Content.js";
+import { dropdownWidth, init_dropdown_css } from "./dropdown.css.js";
+import { SearchBar, init_SearchBar } from "./SearchBar.js";
+import { useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { useTheme } from "@ultraviolet/themes";
+import { assignInlineVars } from "@vanilla-extract/dynamic";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/SelectInput/components/Dropdown/Dropdown.tsx
+var NON_SEARCHABLE_KEYS, handleKeyDown, Dropdown;
+var init_Dropdown = __esmMin(() => {
+	init_ModalProvider();
+	init_Popup();
+	init_Stack();
+	init_constants();
+	init_SelectInputProvider();
+	init_styles_css();
+	init_Content();
+	init_dropdown_css();
+	init_SearchBar();
+	init_objectSpread2();
+	NON_SEARCHABLE_KEYS = [
+		"Tab",
+		" ",
+		"Enter",
+		"CapsLock",
+		"Shift",
+		"ArrowDown",
+		"ArrowUp",
+		"ArrowLeft",
+		"ArrowRight",
+		"Escape"
+	];
+	handleKeyDown = (event, ref, options, searchBarActive, setSearch, setDefaultSearch, search) => {
+		var _document$activeEleme;
+		if (ref.current && !searchBarActive && !NON_SEARCHABLE_KEYS.includes(event.key) && ((_document$activeEleme = document.activeElement) === null || _document$activeEleme === void 0 ? void 0 : _document$activeEleme.ariaLabel) !== "search-bar") {
+			const currentSearch = search + event.key;
+			setSearch(currentSearch);
+			ref.current.focus();
+			if (Array.isArray(options)) {
+				const closestOption = [...options].find((option) => option.searchText ? option.searchText.toLocaleLowerCase().startsWith(currentSearch) : option.value.toLocaleLowerCase().startsWith(currentSearch));
+				if (closestOption) {
+					var _closestOption$search;
+					setDefaultSearch((_closestOption$search = closestOption.searchText) !== null && _closestOption$search !== void 0 ? _closestOption$search : closestOption.value);
+				} else setDefaultSearch(null);
+			} else {
+				const closestOptions = _objectSpread2({}, options);
+				Object.keys(closestOptions).map((group) => {
+					closestOptions[group] = closestOptions[group].filter((option) => option.searchText ? option.searchText.toLocaleLowerCase().startsWith(currentSearch) : option.value.toLocaleLowerCase().startsWith(currentSearch));
+					return null;
+				});
+				const closestOption = closestOptions[Object.keys(closestOptions)[0]][0];
+				if (closestOption) {
+					var _closestOption$search2;
+					setDefaultSearch((_closestOption$search2 = closestOption.searchText) !== null && _closestOption$search2 !== void 0 ? _closestOption$search2 : closestOption.value);
+				} else setDefaultSearch(null);
+			}
+		}
+	};
+	Dropdown = ({ children, emptyState, descriptionDirection, searchable, placeholder, footer, refSelect, loadMore, optionalInfoPlacement, isLoading, size, dropdownAlign, portalTarget, id, groupError, groupEmptyState, addOption }) => {
+		var _refSelect$current$of;
+		var _refSelect$current;
+		var _refSelect$current2;
+		var _refSelect$current3;
+		const { setIsDropdownVisible, isDropdownVisible, onSearch, searchInput, options, displayedOptions, numberOfOptions } = useSelectInput();
+		const theme = useTheme();
+		const [searchBarActive, setSearchBarActive] = useState(false);
+		const [defaultSearchValue, setDefaultSearch] = useState(null);
+		const ref = useRef(null);
+		const [search, setSearch] = useState("");
+		const [maxWidth, setWidth] = useState((_refSelect$current$of = (_refSelect$current = refSelect.current) === null || _refSelect$current === void 0 ? void 0 : _refSelect$current.offsetWidth) !== null && _refSelect$current$of !== void 0 ? _refSelect$current$of : "100%");
+		const modalContext = useContext(ModalContext);
+		const resizeDropdown = useCallback(() => {
+			if (refSelect.current && refSelect.current.getBoundingClientRect().width > 0 && refSelect.current.getBoundingClientRect().width !== maxWidth) setWidth(refSelect.current.getBoundingClientRect().width);
+		}, [refSelect, maxWidth]);
+		useLayoutEffect(() => {
+			if (refSelect.current && isDropdownVisible) {
+				const overflow = refSelect.current.getBoundingClientRect().bottom + 256 + Number(theme.sizing[INPUT_SIZE_HEIGHT[size]].replace("rem", "")) * 16 + Number.parseInt(theme.space["5"], 10) - window.innerHeight + 32;
+				if (overflow > 0 && modalContext) {
+					const currentModal = modalContext.openedModals[0];
+					const modalElement = currentModal === null || currentModal === void 0 ? void 0 : currentModal.ref.current;
+					if (modalElement) {
+						const parentElement = modalElement.parentNode;
+						if (parentElement instanceof HTMLElement) parentElement.scrollBy({
+							behavior: "smooth",
+							top: overflow
+						});
+						else modalElement.scrollBy({
+							behavior: "smooth",
+							top: overflow
+						});
+					} else window.scrollBy({
+						behavior: "smooth",
+						top: overflow
+					});
+				}
+			}
+		}, [
+			isDropdownVisible,
+			refSelect,
+			size,
+			modalContext,
+			theme,
+			resizeDropdown
+		]);
+		useEffect(() => {
+			resizeDropdown();
+			window.addEventListener("resize", resizeDropdown);
+			return () => window.removeEventListener("resize", resizeDropdown);
+		}, [resizeDropdown, (_refSelect$current2 = refSelect.current) === null || _refSelect$current2 === void 0 ? void 0 : _refSelect$current2.offsetWidth]);
+		useEffect(() => {
+			if (!searchInput) onSearch(options);
+		}, [
+			onSearch,
+			options,
+			searchInput
+		]);
+		useEffect(() => {
+			if (!isDropdownVisible) {
+				setDefaultSearch(null);
+				setSearch("");
+			}
+			const eventKeydown = (event) => handleKeyDown(event, ref, options, searchBarActive, setSearch, setDefaultSearch, search);
+			if (!searchable) document.addEventListener("keydown", eventKeydown);
+			return () => {
+				if (!searchable) document.removeEventListener("keydown", eventKeydown);
+			};
+		}, [
+			isDropdownVisible,
+			searchBarActive,
+			options,
+			onSearch,
+			search,
+			refSelect,
+			setDefaultSearch,
+			setIsDropdownVisible,
+			searchable
+		]);
+		const isEmpty = useMemo(() => {
+			if (numberOfOptions === 0) return true;
+			if (Array.isArray(displayedOptions)) return displayedOptions.length === 0;
+			const groups = Object.keys(displayedOptions);
+			for (const group of groups) if (displayedOptions[group].length > 0) return false;
+			return true;
+		}, [displayedOptions, numberOfOptions]);
+		const computedFooter = useMemo(() => {
+			if (footer && !isEmpty) {
+				if (typeof footer === "function") return /* @__PURE__ */ jsx("div", {
+					className: selectInputStyle.footer,
+					children: footer(() => setIsDropdownVisible(false))
+				});
+				return /* @__PURE__ */ jsx("div", {
+					className: selectInputStyle.footer,
+					children: footer
+				});
+			}
+			return null;
+		}, [
+			isEmpty,
+			footer,
+			setIsDropdownVisible
+		]);
+		return /* @__PURE__ */ jsx(Popup, {
+			align: dropdownAlign !== null && dropdownAlign !== void 0 ? dropdownAlign : "start",
+			className: selectInputStyle.dropdown,
+			containerFullWidth: true,
+			debounceDelay: 0,
+			disableAnimation: true,
+			hasArrow: false,
+			hideOnClickOutside: true,
+			id,
+			maxWidth: maxWidth !== null && maxWidth !== void 0 ? maxWidth : (_refSelect$current3 = refSelect.current) === null || _refSelect$current3 === void 0 ? void 0 : _refSelect$current3.offsetWidth,
+			onClose: () => setIsDropdownVisible(false),
+			placement: "bottom",
+			portalTarget,
+			ref,
+			role: "dialog",
+			style: assignInlineVars({ [dropdownWidth]: typeof maxWidth === "number" ? `${maxWidth}px` : maxWidth }),
+			tabIndex: -1,
+			text: /* @__PURE__ */ jsxs(Stack, { children: [
+				searchable && !isLoading && (numberOfOptions >= 6 || addOption) ? /* @__PURE__ */ jsx(SearchBar, {
+					displayedOptions,
+					placeholder,
+					setSearchBarActive
+				}) : null,
+				/* @__PURE__ */ jsx(CreateDropdown, {
+					addOption,
+					defaultSearchValue,
+					descriptionDirection,
+					emptyState,
+					groupEmptyState,
+					groupError,
+					isEmpty,
+					isLoading,
+					loadMore,
+					optionalInfoPlacement,
+					searchable
+				}),
+				computedFooter
+			] }),
+			visible: isDropdownVisible,
+			children
+		});
+	};
+});
+
+//#endregion
+init_Dropdown();
+export { Dropdown, init_Dropdown };

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

@@ -0,0 +1,5 @@
+export declare const Group: ({ group, index }: {
+    group: string;
+    index: number;
+}) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Group.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Group.d.ts","sourceRoot":"","sources":["../../../../../src/components/SelectInput/components/Dropdown/Group.tsx"],"names":[],"mappings":"AAOA,eAAO,MAAM,KAAK;;;6CAgGjB,CAAA"}

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

@@ -0,0 +1,79 @@
+import { __esmMin, __name } from "../../../../_virtual/_rolldown/runtime.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 } from "react/jsx-runtime";
+
+//#region src/components/SelectInput/components/Dropdown/Group.tsx
+var Group;
+var init_Group = __esmMin(() => {
+	init_Checkbox();
+	init_Text();
+	init_SelectInputProvider();
+	init_styles_css();
+	Group = ({ group, index }) => {
+		const { selectAllGroup, selectedData, size, setSelectedData, multiselect, options, onChange } = useSelectInput();
+		const handleSelectGroup = () => {
+			if (multiselect) {
+				setSelectedData({
+					selectedGroup: group,
+					type: "selectGroup"
+				});
+				if (!Array.isArray(options)) if (selectedData.selectedGroups.includes(group)) {
+					const newSelectedValues = [...selectedData.selectedValues].filter((selectedValue) => !options[group].find((option) => option.value === selectedValue));
+					onChange === null || onChange === void 0 || onChange(newSelectedValues);
+				} else {
+					const newSelectedValues = [...selectedData.selectedValues];
+					options[group].map((option) => newSelectedValues.includes(option.value) || option.disabled ? null : newSelectedValues.push(option.value));
+					onChange === null || onChange === void 0 || onChange(newSelectedValues);
+				}
+			}
+		};
+		return /* @__PURE__ */ jsx("div", {
+			className: selectInputStyle.dropdownGroupWrapper,
+			id: selectAllGroup ? "items" : void 0,
+			children: group ? /* @__PURE__ */ jsx("button", {
+				className: cn(selectAllGroup ? selectInputStyle.dropdownGroupSelectable({ size }) : "", selectInputStyle.dropdownGroup),
+				"data-selectgroup": selectAllGroup,
+				"data-testid": `group-${index}`,
+				onClick: () => selectAllGroup ? handleSelectGroup() : null,
+				onKeyDown: (event) => {
+					if ([" ", "Enter"].includes(event.key)) {
+						event.preventDefault();
+						handleSelectGroup();
+					}
+				},
+				tabIndex: selectAllGroup ? 0 : -1,
+				type: "button",
+				children: selectAllGroup ? /* @__PURE__ */ jsx(Checkbox, {
+					checked: selectedData.selectedGroups.includes(group),
+					className: selectInputStyle.dropdownCheckbox,
+					"data-testid": "select-group",
+					disabled: false,
+					onChange: () => selectAllGroup ? handleSelectGroup() : null,
+					tabIndex: -1,
+					value: group,
+					children: /* @__PURE__ */ jsx(Text, {
+						as: "span",
+						placement: "left",
+						sentiment: "neutral",
+						variant: size === "small" ? "captionSmall" : "caption",
+						children: group.toUpperCase()
+					})
+				}) : /* @__PURE__ */ jsx(Text, {
+					as: "span",
+					placement: "left",
+					sentiment: "neutral",
+					variant: size === "small" ? "captionSmall" : "caption",
+					children: group.toUpperCase()
+				})
+			}, group) : null
+		});
+	};
+});
+
+//#endregion
+init_Group();
+export { Group, init_Group };

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

@@ -0,0 +1,13 @@
+import type { OptionType } from '../../types';
+import type { RefObject } from 'react';
+export declare const Item: ({ option, indexOption, group, defaultSearchValue, focusedItemRef, descriptionDirection, textVariant, optionalInfoPlacement, }: {
+    option: OptionType;
+    indexOption: number;
+    group?: string | undefined;
+    defaultSearchValue: string | null;
+    focusedItemRef: RefObject<HTMLDivElement | null>;
+    descriptionDirection: "column" | "row";
+    textVariant: "body" | "bodySmall" | "caption";
+    optionalInfoPlacement: "left" | "right";
+}) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Item.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Item.d.ts","sourceRoot":"","sources":["../../../../../src/components/SelectInput/components/Dropdown/Item.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AAC7C,OAAO,KAAK,EAA0C,SAAS,EAAE,MAAM,OAAO,CAAA;AAE9E,eAAO,MAAM,IAAI;;;;;;;;;6CA0IhB,CAAA"}

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

@@ -0,0 +1,87 @@
+import { __esmMin, __name } from "../../../../_virtual/_rolldown/runtime.js";
+import { init_SelectInputProvider, useSelectInput } from "../../SelectInputProvider.js";
+import { init_styles_css, selectInputStyle } from "../../styles.css.js";
+import { DisplayOption, init_Option } from "./Option.js";
+import { Checkbox, init_Checkbox } from "../../../Checkbox/index.js";
+import { cn } from "@ultraviolet/utils";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/SelectInput/components/Dropdown/Item.tsx
+var Item;
+var init_Item = __esmMin(() => {
+	init_Checkbox();
+	init_SelectInputProvider();
+	init_styles_css();
+	init_Option();
+	Item = ({ option, indexOption, group, defaultSearchValue, focusedItemRef, descriptionDirection, textVariant, optionalInfoPlacement }) => {
+		const { setIsDropdownVisible, onChange, multiselect, setSelectedData, selectedData, size } = useSelectInput();
+		const handleClick = ({ clickedOption, event }) => {
+			event.stopPropagation();
+			setSelectedData({
+				clickedOption,
+				group,
+				type: "selectOption"
+			});
+			if (multiselect) if (selectedData.selectedValues.includes(clickedOption.value)) onChange === null || onChange === void 0 || onChange(selectedData.selectedValues.filter((value) => value !== clickedOption.value));
+			else onChange === null || onChange === void 0 || onChange([...selectedData.selectedValues, clickedOption.value]);
+			else onChange === null || onChange === void 0 || onChange(clickedOption.value);
+			setIsDropdownVisible(multiselect);
+		};
+		return /* @__PURE__ */ jsx("div", {
+			"aria-disabled": !!option.disabled,
+			"aria-label": option.value,
+			"aria-selected": selectedData.selectedValues.includes(option.value) && !option.disabled,
+			className: cn(selectInputStyle.dropdownItem({
+				disabled: !!option.disabled,
+				size,
+				selected: selectedData.selectedValues.includes(option.value) && !option.disabled
+			})),
+			"data-testid": `option-${option.value}`,
+			id: `option-${indexOption}`,
+			onClick: (event) => {
+				if (!option.disabled) handleClick({
+					clickedOption: option,
+					event
+				});
+			},
+			onKeyDown: (event) => {
+				if ([" ", "Enter"].includes(event.key)) handleClick({
+					clickedOption: option,
+					event
+				});
+			},
+			ref: option.value === defaultSearchValue || option.searchText === defaultSearchValue ? focusedItemRef : null,
+			role: "option",
+			tabIndex: option.disabled ? -1 : 0,
+			children: multiselect ? /* @__PURE__ */ jsx(Checkbox, {
+				checked: selectedData.selectedValues.includes(option.value) && !option.disabled,
+				className: selectInputStyle.dropdownCheckbox,
+				disabled: option.disabled,
+				onChange: (event) => {
+					if (!option.disabled) handleClick({
+						clickedOption: option,
+						event
+					});
+				},
+				tabIndex: -1,
+				tooltip: option.tooltip,
+				value: option.value,
+				children: /* @__PURE__ */ jsx(DisplayOption, {
+					descriptionDirection,
+					option,
+					optionalInfoPlacement,
+					textVariant
+				})
+			}) : /* @__PURE__ */ jsx(DisplayOption, {
+				descriptionDirection,
+				option,
+				optionalInfoPlacement,
+				textVariant
+			})
+		});
+	};
+});
+
+//#endregion
+init_Item();
+export { Item, init_Item };

package/dist/components/SelectInput/components/{DropdownOption.d.ts → Dropdown/Option.d.ts}

@@ -1,4 +1,4 @@
-import type { OptionType } from '../types';
+import type { OptionType } from '../../types';
 type DisplayOptionProps = {
     option: OptionType;
     descriptionDirection: 'row' | 'column';
@@ -7,4 +7,4 @@ type DisplayOptionProps = {
 };
 export declare const DisplayOption: ({ option, optionalInfoPlacement, descriptionDirection, textVariant, }: DisplayOptionProps) => import("react/jsx-runtime").JSX.Element;
 export {};
-//# sourceMappingURL=DropdownOption.d.ts.map
+//# sourceMappingURL=Option.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Option.d.ts","sourceRoot":"","sources":["../../../../../src/components/SelectInput/components/Dropdown/Option.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AAE7C,KAAK,kBAAkB,GAAG;IACxB,MAAM,EAAE,UAAU,CAAA;IAClB,oBAAoB,EAAE,KAAK,GAAG,QAAQ,CAAA;IACtC,qBAAqB,EAAE,MAAM,GAAG,OAAO,CAAA;IACvC,WAAW,EAAE,MAAM,GAAG,WAAW,GAAG,SAAS,CAAA;CAC9C,CAAA;AAED,eAAO,MAAM,aAAa,wIAiKzB,CAAA"}

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"}