@ultraviolet/ui 3.12.3 → 3.13.0

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

@@ -1,741 +0,0 @@
-'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 { Stack, init_Stack } from "../../Stack/index.js";
-import { Popup, init_Popup } from "../../Popup/index.js";
-import { Text, init_Text } from "../../Text/index.js";
-import { Checkbox, init_Checkbox } from "../../Checkbox/index.js";
-import { ModalContext, init_ModalProvider } from "../../Modal/ModalProvider.js";
-import { Skeleton, init_Skeleton } from "../../Skeleton/index.js";
-import { INPUT_SIZE_HEIGHT, OPTION_SELECTOR, init_constants } from "../constants.js";
-import { init_SelectInputProvider, useSelectInput } from "../SelectInputProvider.js";
-import { init_styles_css, selectInputStyle } from "../styles.css.js";
-import { dropdownWidth, init_dropdown_css } from "./dropdown.css.js";
-import { DisplayOption, init_DropdownOption } from "./DropdownOption.js";
-import { SearchBarDropdown, init_SearchBarDropdown } from "./SearchBarDropdown.js";
-import { useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
-import { useTheme } from "@ultraviolet/themes";
-import { cn } from "@ultraviolet/utils";
-import { assignInlineVars } from "@vanilla-extract/dynamic";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { PlusIcon } from "@ultraviolet/icons/PlusIcon";
-
-//#region src/components/SelectInput/components/Dropdown.tsx
-var NON_SEARCHABLE_KEYS, moveFocusDown, moveFocusUp, handleKeyDownSelect, handleKeyDown, CreateDropdown, Dropdown;
-var init_Dropdown = __esmMin(() => {
-	init_Checkbox();
-	init_ModalProvider();
-	init_Popup();
-	init_Skeleton();
-	init_Stack();
-	init_Text();
-	init_constants();
-	init_SelectInputProvider();
-	init_styles_css();
-	init_dropdown_css();
-	init_DropdownOption();
-	init_SearchBarDropdown();
-	init_objectSpread2();
-	NON_SEARCHABLE_KEYS = [
-		"Tab",
-		" ",
-		"Enter",
-		"CapsLock",
-		"Shift",
-		"ArrowDown",
-		"ArrowUp",
-		"ArrowLeft",
-		"ArrowRight",
-		"Escape"
-	];
-	moveFocusDown = () => {
-		const options = document.querySelectorAll(OPTION_SELECTOR);
-		const activeItem = document.activeElement;
-		if (options) for (let i = 0; i < (options === null || options === void 0 ? void 0 : options.length); i += 1) {
-			const listLength = options.length;
-			if (activeItem === options[i] && activeItem !== options[listLength - 1]) options[i + 1].focus();
-		}
-	};
-	moveFocusUp = () => {
-		const options = document.querySelectorAll(OPTION_SELECTOR);
-		const activeItem = document.activeElement;
-		if (options) {
-			for (let i = 0; i < options.length; i += 1) if (activeItem === options[i] && activeItem !== options[0]) options[i - 1].focus();
-		}
-	};
-	handleKeyDownSelect = (event) => {
-		if (event.key === "ArrowDown") {
-			event.preventDefault();
-			moveFocusDown();
-		}
-		if (event.key === "ArrowUp") {
-			event.preventDefault();
-			moveFocusUp();
-		}
-		if (event.key === " ") event.preventDefault();
-	};
-	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);
-			}
-		}
-	};
-	CreateDropdown = ({ isEmpty, emptyState, descriptionDirection, loadMore, optionalInfoPlacement, defaultSearchValue, isLoading, groupEmptyState, groupError, addOption, searchable }) => {
-		const { setIsDropdownVisible, onChange, options, multiselect, selectAll, selectAllGroup, displayedOptions, onSearch, setSelectedData, selectedData, searchInput, setSearchInput, size } = useSelectInput();
-		const focusedItemRef = useRef(null);
-		useEffect(() => {
-			if (defaultSearchValue && (focusedItemRef === null || focusedItemRef === void 0 ? void 0 : focusedItemRef.current)) focusedItemRef.current.focus();
-		}, [defaultSearchValue]);
-		const textVariant = useMemo(() => {
-			if (size === "large") return "body";
-			if (size === "medium") return "bodySmall";
-			return "caption";
-		}, [size]);
-		const textVariantSmall = size === "small" ? "captionStrong" : "bodySmallStrong";
-		const sizeVariantIcon = size === "small" ? "xsmall" : "small";
-		const handleClickCustomValue = () => {
-			const newOption = {
-				label: searchInput,
-				value: searchInput
-			};
-			addOption === null || addOption === void 0 || addOption.onClick(searchInput);
-			onSearch([newOption]);
-			setIsDropdownVisible(multiselect);
-			setSearchInput("");
-		};
-		if (isEmpty && !addOption) return /* @__PURE__ */ jsx(Stack, {
-			alignItems: "center",
-			className: selectInputStyle.dropdownEmptyState,
-			gap: 2,
-			children: emptyState !== null && emptyState !== void 0 ? emptyState : /* @__PURE__ */ jsx(Text, {
-				as: "p",
-				variant: size === "small" ? "bodySmallStrong" : "bodyStrong",
-				children: "No options"
-			})
-		});
-		if (isEmpty && addOption && searchable) {
-			const option = {
-				label: /* @__PURE__ */ jsxs(Stack, {
-					alignItems: "center",
-					direction: "row",
-					gap: "1",
-					children: [/* @__PURE__ */ jsx(PlusIcon, {
-						sentiment: "primary",
-						size: sizeVariantIcon
-					}), /* @__PURE__ */ jsxs(Text, {
-						as: "span",
-						sentiment: "primary",
-						variant: textVariantSmall,
-						children: [
-							addOption.text,
-							" ",
-							searchInput
-						]
-					})]
-				}),
-				searchText: searchInput,
-				value: `${addOption.text} ${searchInput}`
-			};
-			return /* @__PURE__ */ jsx("div", {
-				"aria-selected": "false",
-				className: selectInputStyle.comboboxCreate,
-				"data-testid": "add-option",
-				id: "add-option",
-				onClick: handleClickCustomValue,
-				onKeyDown: (event) => {
-					if (["Enter", " "].includes(event.key)) handleClickCustomValue();
-				},
-				role: "option",
-				tabIndex: -1,
-				children: /* @__PURE__ */ jsx(DisplayOption, {
-					descriptionDirection: "row",
-					option,
-					optionalInfoPlacement: "left",
-					textVariant
-				})
-			});
-		}
-		const handleClick = ({ clickedOption, group, 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);
-		};
-		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));
-				}
-			}
-		};
-		const handleSelectGroup = (group) => {
-			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 Array.isArray(displayedOptions) ? /* @__PURE__ */ jsxs(Stack, {
-			className: cn(selectInputStyle.dropdownContainer, selectInputStyle.dropdownContainerUnGrouped),
-			gap: .25,
-			id: "select-dropdown",
-			onKeyDown: handleKeyDownSelect,
-			role: "listbox",
-			children: [
-				addOption && searchInput && searchable ? /* @__PURE__ */ jsx("div", {
-					"aria-selected": "false",
-					className: selectInputStyle.comboboxCreate,
-					"data-testid": "add-option",
-					id: "add-option",
-					onClick: handleClickCustomValue,
-					onKeyDown: (event) => {
-						if (["Enter", " "].includes(event.key)) handleClickCustomValue();
-					},
-					role: "option",
-					tabIndex: -1,
-					children: /* @__PURE__ */ jsx(DisplayOption, {
-						descriptionDirection: "row",
-						option: {
-							label: /* @__PURE__ */ jsxs(Stack, {
-								alignItems: "center",
-								direction: "row",
-								gap: "1",
-								children: [/* @__PURE__ */ jsx(PlusIcon, {
-									sentiment: "primary",
-									size: sizeVariantIcon
-								}), /* @__PURE__ */ jsxs(Text, {
-									as: "span",
-									sentiment: "primary",
-									variant: textVariantSmall,
-									children: [
-										addOption.text,
-										" ",
-										searchInput
-									]
-								})]
-							}),
-							searchText: searchInput,
-							value: `${addOption.text} ${searchInput}`
-						},
-						optionalInfoPlacement: "left",
-						textVariant
-					})
-				}) : null,
-				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: size === "small" ? "small" : "default"
-						})),
-						"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.label
-								}), /* @__PURE__ */ jsx(Text, {
-									as: "span",
-									placement: "left",
-									prominence: "weak",
-									sentiment: "neutral",
-									variant: size === "small" ? "captionSmall" : "bodySmall",
-									children: selectAll.description
-								})]
-							})
-						})
-					})
-				}) : null,
-				/* @__PURE__ */ jsxs(Stack, {
-					gap: .25,
-					id: "items",
-					children: [isLoading ? /* @__PURE__ */ jsx(Skeleton, { variant: "block" }) : displayedOptions.map((option, index) => /* @__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,
-							selected: selectedData.selectedValues.includes(option.value) && !option.disabled,
-							size: size === "small" ? "small" : "default"
-						})),
-						"data-testid": `option-${option.value}`,
-						id: `option-${index}`,
-						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
-						})
-					}, option.value)), loadMore ? /* @__PURE__ */ jsx(Stack, {
-						className: selectInputStyle.dropdownLoadMore,
-						children: loadMore
-					}) : null]
-				})
-			]
-		}) : /* @__PURE__ */ jsxs(Stack, {
-			className: selectInputStyle.dropdownContainer,
-			"data-grouped": true,
-			id: "select-dropdown",
-			onKeyDown: handleKeyDownSelect,
-			role: "listbox",
-			children: [isLoading ? /* @__PURE__ */ jsx(Skeleton, { variant: "block" }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
-				addOption && searchInput && searchable ? /* @__PURE__ */ jsx("div", {
-					"aria-selected": "false",
-					className: selectInputStyle.comboboxCreate,
-					"data-testid": "add-option",
-					id: "add-option",
-					onClick: handleClickCustomValue,
-					onKeyDown: (event) => {
-						if (["Enter", " "].includes(event.key)) handleClickCustomValue();
-					},
-					role: "option",
-					tabIndex: -1,
-					children: /* @__PURE__ */ jsx(DisplayOption, {
-						descriptionDirection: "row",
-						option: {
-							label: /* @__PURE__ */ jsxs(Stack, {
-								alignItems: "center",
-								direction: "row",
-								gap: "1",
-								children: [/* @__PURE__ */ jsx(PlusIcon, {
-									sentiment: "primary",
-									size: sizeVariantIcon
-								}), /* @__PURE__ */ jsxs(Text, {
-									as: "span",
-									sentiment: "primary",
-									variant: textVariantSmall,
-									children: [
-										addOption.text,
-										" ",
-										searchInput
-									]
-								})]
-							}),
-							searchText: searchInput,
-							value: `${addOption.text} ${searchInput}`
-						},
-						optionalInfoPlacement: "left",
-						textVariant
-					})
-				}) : null,
-				selectAll && multiselect ? /* @__PURE__ */ jsx(Stack, {
-					id: "items",
-					children: /* @__PURE__ */ jsx("div", {
-						"aria-disabled": false,
-						"aria-label": "select-all",
-						"aria-selected": selectedData.allSelected,
-						className: cn(selectInputStyle.dropdownItem({
-							selected: selectedData.allSelected,
-							size: size === "small" ? "small" : "default"
-						})),
-						"data-testid": "select-all",
-						id: "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,
-							name: "select-all",
-							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.label
-								}), /* @__PURE__ */ jsx(Text, {
-									as: "span",
-									placement: "left",
-									prominence: "weak",
-									sentiment: "neutral",
-									variant: size === "small" ? "captionSmall" : "bodySmall",
-									children: selectAll.description
-								})]
-							})
-						})
-					})
-				}) : null,
-				Object.keys(displayedOptions).map((group, index) => {
-					var _groupEmptyState$grou;
-					var _groupError$group;
-					const hasElements = displayedOptions[group].length > 0;
-					const emptyStateGroup = (_groupEmptyState$grou = groupEmptyState === null || groupEmptyState === void 0 ? void 0 : groupEmptyState[group]) !== null && _groupEmptyState$grou !== void 0 ? _groupEmptyState$grou : null;
-					const errorGroup = (_groupError$group = groupError === null || groupError === void 0 ? void 0 : groupError[group]) !== null && _groupError$group !== void 0 ? _groupError$group : null;
-					return /* @__PURE__ */ jsxs(Stack, {
-						gap: .25,
-						children: [hasElements || emptyStateGroup ? /* @__PURE__ */ jsx("div", {
-							className: selectInputStyle.dropdownGroupWrapper,
-							id: selectAllGroup ? "items" : void 0,
-							children: group ? /* @__PURE__ */ jsx("button", {
-								className: cn(selectAllGroup ? selectInputStyle.dropdownGroupSelectable({ size: size === "small" ? "small" : "default" }) : "", selectInputStyle.dropdownGroup),
-								"data-selectgroup": selectAllGroup,
-								"data-testid": `group-${index}`,
-								onClick: () => selectAllGroup ? handleSelectGroup(group) : null,
-								onKeyDown: (event) => {
-									if ([" ", "Enter"].includes(event.key)) {
-										event.preventDefault();
-										handleSelectGroup(group);
-									}
-								},
-								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(group) : 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
-						}) : null, /* @__PURE__ */ jsxs(Stack, {
-							gap: "0.25",
-							id: "items",
-							children: [
-								!hasElements && emptyStateGroup ? /* @__PURE__ */ jsx(Text, {
-									as: "span",
-									className: selectInputStyle.emptyStateGroupStyle,
-									prominence: "weak",
-									sentiment: "neutral",
-									variant: textVariant,
-									children: emptyStateGroup
-								}) : null,
-								errorGroup ? /* @__PURE__ */ jsx(Text, {
-									as: "span",
-									className: selectInputStyle.emptyStateGroupStyle,
-									sentiment: "danger",
-									variant: textVariant,
-									children: errorGroup
-								}) : null,
-								displayedOptions[group].map((option, indexOption) => errorGroup ? null : /* @__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: size === "small" ? "small" : "default",
-										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,
-											group
-										});
-									},
-									onKeyDown: (event) => {
-										if ([" ", "Enter"].includes(event.key)) handleClick({
-											clickedOption: option,
-											event,
-											group
-										});
-									},
-									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,
-												group
-											});
-										},
-										tabIndex: -1,
-										tooltip: option.tooltip,
-										value: option.value,
-										children: /* @__PURE__ */ jsx(DisplayOption, {
-											descriptionDirection,
-											option,
-											optionalInfoPlacement,
-											textVariant
-										})
-									}) : /* @__PURE__ */ jsx(DisplayOption, {
-										descriptionDirection,
-										option,
-										optionalInfoPlacement,
-										textVariant
-									})
-								}, option.value))
-							]
-						})]
-					}, group);
-				})
-			] }), loadMore ? /* @__PURE__ */ jsx(Stack, {
-				className: selectInputStyle.dropdownLoadMore,
-				children: loadMore
-			}) : 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(SearchBarDropdown, {
-					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 };