@ultraviolet/ui 3.8.2 → 3.10.0

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

@@ -1,870 +1,723 @@
-"use client";
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { PlusIcon } from "@ultraviolet/icons/PlusIcon";
-import { useTheme } from "@ultraviolet/themes";
-import { cn } from "@ultraviolet/utils";
-import { assignInlineVars } from "@vanilla-extract/dynamic";
-import { useState, useRef, useContext, useCallback, useLayoutEffect, useEffect, useMemo } from "react";
-import { Checkbox } from "../../Checkbox/index.js";
-import { ModalContext } from "../../Modal/ModalProvider.js";
-import { Popup } from "../../Popup/index.js";
-import { Skeleton } from "../../Skeleton/index.js";
+'use client';
+import { __name } from "../../../_virtual/_rolldown/runtime.js";
+import { _objectSpread2 } from "../../../_virtual/_@oxc-project_runtime@0.113.0/helpers/objectSpread2.js";
 import { Stack } from "../../Stack/index.js";
+import { Popup } from "../../Popup/index.js";
 import { Text } from "../../Text/index.js";
-import { DROPDOWN_MAX_HEIGHT, INPUT_SIZE_HEIGHT, OPTION_SELECTOR } from "../constants.js";
+import { Checkbox } from "../../Checkbox/index.js";
+import { Skeleton } from "../../Skeleton/index.js";
+import { ModalContext } from "../../Modal/ModalProvider.js";
+import { INPUT_SIZE_HEIGHT, OPTION_SELECTOR } from "../constants.js";
 import { useSelectInput } from "../SelectInputProvider.js";
+import { comboboxCreate, dropdown, dropdownCheckbox, dropdownContainer, dropdownContainerUnGrouped, dropdownEmptyState, dropdownGroup, dropdownGroupSelectable, dropdownGroupWrapper, dropdownItem, dropdownLoadMore, dropdownWidth, emptyStateGroupStyle, footer } from "./dropdown.css.js";
 import { DisplayOption } from "./DropdownOption.js";
-import { footer, dropdown, dropdownWidth, dropdownEmptyState, comboboxCreate, dropdownCheckbox, dropdownItem, dropdownLoadMore, dropdownContainer, dropdownContainerUnGrouped, dropdownGroupWrapper, dropdownGroupSelectable, dropdownGroup, emptyStateGroupStyle } from "./dropdown.css.js";
 import { SearchBarDropdown } from "./SearchBarDropdown.js";
+import { cn } from "@ultraviolet/utils";
+import { useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { assignInlineVars } from "@vanilla-extract/dynamic";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { useTheme } from "@ultraviolet/themes";
+import { PlusIcon } from "@ultraviolet/icons/PlusIcon";
+
+//#region src/components/SelectInput/components/Dropdown.tsx
 const NON_SEARCHABLE_KEYS = [
-  "Tab",
-  " ",
-  "Enter",
-  "CapsLock",
-  "Shift",
-  "ArrowDown",
-  "ArrowUp",
-  "ArrowLeft",
-  "ArrowRight",
-  "Escape"
+	"Tab",
+	" ",
+	"Enter",
+	"CapsLock",
+	"Shift",
+	"ArrowDown",
+	"ArrowUp",
+	"ArrowLeft",
+	"ArrowRight",
+	"Escape"
 ];
 const moveFocusDown = () => {
-  const options = document.querySelectorAll(OPTION_SELECTOR);
-  const activeItem = document.activeElement;
-  if (options) {
-    for (let i = 0; i < options?.length; i += 1) {
-      const listLength = options.length;
-      if (activeItem === options[i] && activeItem !== options[listLength - 1]) {
-        options[i + 1].focus();
-      }
-    }
-  }
+	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();
+	}
 };
 const 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();
-      }
-    }
-  }
+	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();
+	}
 };
 const handleKeyDownSelect = (event) => {
-  if (event.key === "ArrowDown") {
-    event.preventDefault();
-    moveFocusDown();
-  }
-  if (event.key === "ArrowUp") {
-    event.preventDefault();
-    moveFocusUp();
-  }
-  if (event.key === " ") {
-    event.preventDefault();
-  }
+	if (event.key === "ArrowDown") {
+		event.preventDefault();
+		moveFocusDown();
+	}
+	if (event.key === "ArrowUp") {
+		event.preventDefault();
+		moveFocusUp();
+	}
+	if (event.key === " ") event.preventDefault();
 };
 const handleKeyDown = (event, ref, options, searchBarActive, setSearch, setDefaultSearch, search) => {
-  if (ref.current && !searchBarActive && !NON_SEARCHABLE_KEYS.includes(event.key) && document.activeElement?.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) {
-        setDefaultSearch(closestOption.searchText ?? closestOption.value);
-      } else {
-        setDefaultSearch(null);
-      }
-    } else {
-      const closestOptions = { ...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) {
-        setDefaultSearch(closestOption.searchText ?? closestOption.value);
-      } else {
-        setDefaultSearch(null);
-      }
-    }
-  }
-};
-const 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
-  } = useSelectInput();
-  const focusedItemRef = useRef(null);
-  useEffect(() => {
-    if (defaultSearchValue && focusedItemRef?.current) {
-      focusedItemRef.current.focus();
-    }
-  }, [defaultSearchValue]);
-  const handleClickCustomValue = () => {
-    const newOption = { label: searchInput, value: searchInput };
-    addOption?.onClick(searchInput);
-    onSearch([newOption]);
-    setIsDropdownVisible(multiselect);
-    setSearchInput("");
-  };
-  if (isEmpty && !addOption) {
-    return /* @__PURE__ */ jsx(Stack, { alignItems: "center", className: dropdownEmptyState, gap: 2, children: emptyState ?? /* @__PURE__ */ jsx(Text, { as: "p", variant: "bodyStrong", children: "No options" }) });
-  }
-  if (isEmpty && addOption && searchable) {
-    const text = /* @__PURE__ */ jsxs(Stack, { alignItems: "center", direction: "row", gap: "1", children: [
-      /* @__PURE__ */ jsx(PlusIcon, { sentiment: "primary", size: "small" }),
-      /* @__PURE__ */ jsxs(Text, { as: "span", sentiment: "primary", variant: "bodySmallStrong", children: [
-        addOption.text,
-        " ",
-        searchInput
-      ] })
-    ] });
-    const option = {
-      label: text,
-      searchText: searchInput,
-      value: `${addOption.text} ${searchInput}`
-    };
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        "aria-selected": "false",
-        className: 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"
-          }
-        )
-      }
-    );
-  }
-  const handleClick = ({
-    clickedOption,
-    group,
-    event
-  }) => {
-    event.stopPropagation();
-    setSelectedData({ clickedOption, group, type: "selectOption" });
-    if (multiselect) {
-      if (selectedData.selectedValues.includes(clickedOption.value)) {
-        onChange?.(
-          selectedData.selectedValues.filter(
-            (value) => value !== clickedOption.value
-          )
-        );
-      } else {
-        onChange?.([...selectedData.selectedValues, clickedOption.value]);
-      }
-    } else {
-      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?.(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?.(newSelectedValues);
-        } else {
-          const newSelectedValues = [...selectedData.selectedValues];
-          options[group].map(
-            (option) => newSelectedValues.includes(option.value) || option.disabled ? null : newSelectedValues.push(option.value)
-          );
-          onChange?.(newSelectedValues);
-        }
-      }
-    }
-  };
-  return Array.isArray(displayedOptions) ? /* @__PURE__ */ jsxs(
-    Stack,
-    {
-      className: cn(dropdownContainer, dropdownContainerUnGrouped),
-      gap: 0.25,
-      id: "select-dropdown",
-      onKeyDown: handleKeyDownSelect,
-      role: "listbox",
-      children: [
-        addOption && searchInput && searchable ? /* @__PURE__ */ jsx(
-          "div",
-          {
-            "aria-selected": "false",
-            className: 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: "small" }),
-                    /* @__PURE__ */ jsxs(Text, { as: "span", sentiment: "primary", variant: "bodySmallStrong", children: [
-                      addOption.text,
-                      " ",
-                      searchInput
-                    ] })
-                  ] }),
-                  searchText: searchInput,
-                  value: `${addOption.text} ${searchInput}`
-                },
-                optionalInfoPlacement: "left"
-              }
-            )
-          }
-        ) : null,
-        selectAll && multiselect ? /* @__PURE__ */ jsx(Stack, { gap: 0.25, id: "items", tabIndex: -1, children: /* @__PURE__ */ jsx(
-          "div",
-          {
-            "aria-disabled": false,
-            "aria-label": "select-all",
-            "aria-selected": selectedData.allSelected,
-            className: cn(dropdownItem({ selected: selectedData.allSelected })),
-            "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: 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: "body", children: selectAll.label }),
-                  /* @__PURE__ */ jsx(
-                    Text,
-                    {
-                      as: "span",
-                      placement: "left",
-                      prominence: "weak",
-                      sentiment: "neutral",
-                      variant: "bodySmall",
-                      children: selectAll.description
-                    }
-                  )
-                ] })
-              }
-            )
-          }
-        ) }) : null,
-        /* @__PURE__ */ jsxs(Stack, { gap: 0.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(
-                dropdownItem({
-                  disabled: !!option.disabled,
-                  selected: selectedData.selectedValues.includes(option.value) && !option.disabled
-                })
-              ),
-              "data-testid": `option-${option.value}`,
-              id: `option-${index}`,
-              onClick: (event) => {
-                if (!option.disabled) {
-                  handleClick({
-                    clickedOption: option,
-                    event
-                  });
-                }
-              },
-              onKeyDown: (event) => {
-                const shouldClick = [" ", "Enter"].includes(event.key);
-                if (shouldClick) {
-                  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: dropdownCheckbox,
-                  disabled: option.disabled,
-                  onChange: (event) => {
-                    if (!option.disabled) {
-                      handleClick({
-                        clickedOption: option,
-                        event
-                      });
-                    }
-                  },
-                  tabIndex: -1,
-                  value: option.value,
-                  children: /* @__PURE__ */ jsx(
-                    DisplayOption,
-                    {
-                      descriptionDirection,
-                      option,
-                      optionalInfoPlacement
-                    }
-                  )
-                }
-              ) : /* @__PURE__ */ jsx(
-                DisplayOption,
-                {
-                  descriptionDirection,
-                  option,
-                  optionalInfoPlacement
-                }
-              )
-            },
-            option.value
-          )),
-          loadMore ? /* @__PURE__ */ jsx(Stack, { className: dropdownLoadMore, children: loadMore }) : null
-        ] })
-      ]
-    }
-  ) : /* @__PURE__ */ jsxs(
-    Stack,
-    {
-      className: dropdownContainer,
-      "data-grouped": true,
-      id: "select-dropdown",
-      onKeyDown: handleKeyDownSelect,
-      role: "listbox",
-      children: [
-        isLoading ? /* @__PURE__ */ jsx(Skeleton, { variant: "block" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-          addOption && searchInput && searchable ? /* @__PURE__ */ jsx(
-            "div",
-            {
-              "aria-selected": "false",
-              className: 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: "small" }),
-                      /* @__PURE__ */ jsxs(
-                        Text,
-                        {
-                          as: "span",
-                          sentiment: "primary",
-                          variant: "bodySmallStrong",
-                          children: [
-                            addOption.text,
-                            " ",
-                            searchInput
-                          ]
-                        }
-                      )
-                    ] }),
-                    searchText: searchInput,
-                    value: `${addOption.text} ${searchInput}`
-                  },
-                  optionalInfoPlacement: "left"
-                }
-              )
-            }
-          ) : 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(
-                dropdownItem({ selected: selectedData.allSelected })
-              ),
-              "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: 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: "body", children: selectAll.label }),
-                    /* @__PURE__ */ jsx(
-                      Text,
-                      {
-                        as: "span",
-                        placement: "left",
-                        prominence: "weak",
-                        sentiment: "neutral",
-                        variant: "bodySmall",
-                        children: selectAll.description
-                      }
-                    )
-                  ] })
-                }
-              )
-            }
-          ) }) : null,
-          Object.keys(displayedOptions).map((group, index) => {
-            const hasElements = displayedOptions[group].length > 0;
-            const emptyStateGroup = groupEmptyState?.[group] ?? null;
-            const errorGroup = groupError?.[group] ?? null;
-            return /* @__PURE__ */ jsxs(Stack, { gap: 0.25, children: [
-              hasElements || emptyStateGroup ? /* @__PURE__ */ jsx(
-                "div",
-                {
-                  className: dropdownGroupWrapper,
-                  id: selectAllGroup ? "items" : void 0,
-                  children: group ? /* @__PURE__ */ jsx(
-                    "button",
-                    {
-                      className: cn(
-                        selectAllGroup ? dropdownGroupSelectable : "",
-                        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: 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: "caption",
-                              children: group.toUpperCase()
-                            }
-                          )
-                        }
-                      ) : /* @__PURE__ */ jsx(
-                        Text,
-                        {
-                          as: "span",
-                          placement: "left",
-                          sentiment: "neutral",
-                          variant: "caption",
-                          children: group.toUpperCase()
-                        }
-                      )
-                    },
-                    group
-                  ) : null
-                }
-              ) : null,
-              /* @__PURE__ */ jsxs(Stack, { gap: "0.25", id: "items", children: [
-                hasElements ? null : /* @__PURE__ */ jsx(
-                  Text,
-                  {
-                    as: "span",
-                    className: emptyStateGroupStyle,
-                    prominence: "weak",
-                    sentiment: "neutral",
-                    variant: "body",
-                    children: emptyStateGroup
-                  }
-                ),
-                errorGroup ? /* @__PURE__ */ jsx(
-                  Text,
-                  {
-                    as: "span",
-                    className: emptyStateGroupStyle,
-                    sentiment: "danger",
-                    variant: "body",
-                    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(
-                        dropdownItem({
-                          disabled: !!option.disabled,
-                          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) => {
-                        const shouldClick = [" ", "Enter"].includes(event.key);
-                        if (shouldClick) {
-                          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: dropdownCheckbox,
-                          disabled: option.disabled,
-                          onChange: (event) => {
-                            if (!option.disabled) {
-                              handleClick({
-                                clickedOption: option,
-                                event,
-                                group
-                              });
-                            }
-                          },
-                          tabIndex: -1,
-                          value: option.value,
-                          children: /* @__PURE__ */ jsx(
-                            DisplayOption,
-                            {
-                              descriptionDirection,
-                              option,
-                              optionalInfoPlacement
-                            }
-                          )
-                        }
-                      ) : /* @__PURE__ */ jsx(
-                        DisplayOption,
-                        {
-                          descriptionDirection,
-                          option,
-                          optionalInfoPlacement
-                        }
-                      )
-                    },
-                    option.value
-                  )
-                )
-              ] })
-            ] }, group);
-          })
-        ] }),
-        loadMore ? /* @__PURE__ */ jsx(Stack, { className: dropdownLoadMore, children: loadMore }) : null
-      ]
-    }
-  );
+	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);
+		}
+	}
 };
-const Dropdown = ({
-  children,
-  emptyState,
-  descriptionDirection,
-  searchable,
-  placeholder,
-  footer: footer$1,
-  refSelect,
-  loadMore,
-  optionalInfoPlacement,
-  isLoading,
-  size,
-  dropdownAlign,
-  portalTarget,
-  id,
-  groupError,
-  groupEmptyState,
-  addOption
-}) => {
-  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?.offsetWidth ?? "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 position = refSelect.current.getBoundingClientRect().bottom + DROPDOWN_MAX_HEIGHT + Number(theme.sizing[INPUT_SIZE_HEIGHT[size]].replace("rem", "")) * 16 + Number.parseInt(theme.space["5"], 10);
-      const overflow = position - window.innerHeight + 32;
-      if (overflow > 0 && modalContext) {
-        const currentModal = modalContext.openedModals[0];
-        const modalElement = 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
-            });
-          }
-          resizeDropdown();
-        } 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]);
-  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$1 && !isEmpty) {
-      if (typeof footer$1 === "function") {
-        return /* @__PURE__ */ jsx("div", { className: footer, children: footer$1(() => setIsDropdownVisible(false)) });
-      }
-      return /* @__PURE__ */ jsx("div", { className: footer, children: footer$1 });
-    }
-    return null;
-  }, [isEmpty, footer$1, setIsDropdownVisible]);
-  return /* @__PURE__ */ jsx(
-    Popup,
-    {
-      align: dropdownAlign ?? "start",
-      className: dropdown,
-      containerFullWidth: true,
-      debounceDelay: 0,
-      disableAnimation: true,
-      hasArrow: false,
-      hideOnClickOutside: true,
-      id,
-      maxWidth: maxWidth ?? refSelect.current?.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
-    }
-  );
+const 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: 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: 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(dropdownContainer, dropdownContainerUnGrouped),
+		gap: .25,
+		id: "select-dropdown",
+		onKeyDown: handleKeyDownSelect,
+		role: "listbox",
+		children: [
+			addOption && searchInput && searchable ? /* @__PURE__ */ jsx("div", {
+				"aria-selected": "false",
+				className: 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(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: 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(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: 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: dropdownLoadMore,
+					children: loadMore
+				}) : null]
+			})
+		]
+	}) : /* @__PURE__ */ jsxs(Stack, {
+		className: 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: 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(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: 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: dropdownGroupWrapper,
+						id: selectAllGroup ? "items" : void 0,
+						children: group ? /* @__PURE__ */ jsx("button", {
+							className: cn(selectAllGroup ? dropdownGroupSelectable({ size: size === "small" ? "small" : "default" }) : "", 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: 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: emptyStateGroupStyle,
+								prominence: "weak",
+								sentiment: "neutral",
+								variant: textVariant,
+								children: emptyStateGroup
+							}) : null,
+							errorGroup ? /* @__PURE__ */ jsx(Text, {
+								as: "span",
+								className: 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(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: 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: dropdownLoadMore,
+			children: loadMore
+		}) : null]
+	});
 };
-export {
-  Dropdown
+const Dropdown = ({ children, emptyState, descriptionDirection, searchable, placeholder, footer: footer$1, 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$1 && !isEmpty) {
+			if (typeof footer$1 === "function") return /* @__PURE__ */ jsx("div", {
+				className: footer,
+				children: footer$1(() => setIsDropdownVisible(false))
+			});
+			return /* @__PURE__ */ jsx("div", {
+				className: footer,
+				children: footer$1
+			});
+		}
+		return null;
+	}, [
+		isEmpty,
+		footer$1,
+		setIsDropdownVisible
+	]);
+	return /* @__PURE__ */ jsx(Popup, {
+		align: dropdownAlign !== null && dropdownAlign !== void 0 ? dropdownAlign : "start",
+		className: 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
+export { Dropdown };