@ultraviolet/ui 3.0.0-beta.27 → 3.0.0-beta.29

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

@@ -1,7 +1,7 @@
 "use client";
-import { jsx, jsxs, Fragment } from "@emotion/react/jsx-runtime";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { useTheme } from "@ultraviolet/themes";
-import { useState, useRef, useContext, useEffect, useCallback, useMemo } from "react";
+import { useState, useRef, use, useLayoutEffect, useCallback, useEffect, useMemo } from "react";
 import { Checkbox } from "../../Checkbox/index.js";
 import { ModalContext } from "../../Modal/ModalProvider.js";
 import { Popup } from "../../Popup/index.js";
@@ -14,9 +14,22 @@ import { DisplayOption } from "./DropdownOption.js";
 import { footer, dropdown, dropdownEmptyState, dropdownContainer, dropdownItem, dropdownCheckbox, dropdownGroupWrapper, dropdownGroupSelectable, dropdownGroup, dropdownLoadMore, dropdownContainerUnGrouped } from "./dropdown.css.js";
 import { SearchBarDropdown } from "./SearchBarDropdown.js";
 const DROPDOWN_MAX_HEIGHT = 256;
-const NON_SEARCHABLE_KEYS = ["Tab", " ", "Enter", "CapsLock", "Shift", "ArrowDown", "ArrowUp", "ArrowLeft", "ArrowRight", "Escape"];
+const NON_SEARCHABLE_KEYS = [
+  "Tab",
+  " ",
+  "Enter",
+  "CapsLock",
+  "Shift",
+  "ArrowDown",
+  "ArrowUp",
+  "ArrowLeft",
+  "ArrowRight",
+  "Escape"
+];
 const moveFocusDown = () => {
-  const options = document.querySelectorAll('#items > div[role="option"]:not([disabled])');
+  const options = document.querySelectorAll(
+    '#items > div[role="option"]:not([disabled])'
+  );
   const activeItem = document.activeElement;
   if (options) {
     for (let i = 0; i < options?.length; i += 1) {
@@ -28,7 +41,9 @@ const moveFocusDown = () => {
   }
 };
 const moveFocusUp = () => {
-  const options = document.querySelectorAll('#items > div[role="option"]:not([disabled])');
+  const options = document.querySelectorAll(
+    '#items > div[role="option"]:not([disabled])'
+  );
   const activeItem = document.activeElement;
   if (options) {
     for (let i = 0; i < options.length; i += 1) {
@@ -57,11 +72,11 @@ const handleKeyDown = (event, ref, options, searchBarActive, setSearch, setDefau
     setSearch(currentSearch);
     ref.current.focus();
     if (!Array.isArray(options)) {
-      const closestOptions = {
-        ...options
-      };
+      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));
+        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];
@@ -71,7 +86,9 @@ const handleKeyDown = (event, ref, options, searchBarActive, setSearch, setDefau
         setDefaultSearch(null);
       }
     } else {
-      const closestOption = [...options].find((option) => option.searchText ? option.searchText.toLocaleLowerCase().startsWith(currentSearch) : option.value.toLocaleLowerCase().startsWith(currentSearch));
+      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 {
@@ -109,15 +126,20 @@ const CreateDropdown = ({
   if (isEmpty) {
     return /* @__PURE__ */ jsx(Stack, { alignItems: "center", className: dropdownEmptyState, gap: 2, children: emptyState ?? /* @__PURE__ */ jsx(Text, { as: "p", variant: "bodyStrong", children: "No options" }) });
   }
-  const handleClick = (clickedOption, group) => {
-    setSelectedData({
-      clickedOption,
-      group,
-      type: "selectOption"
-    });
+  const handleClick = ({
+    clickedOption,
+    group,
+    event
+  }) => {
+    event.stopPropagation();
+    setSelectedData({ clickedOption, group, type: "selectOption" });
     if (multiselect) {
       if (selectedData.selectedValues.includes(clickedOption.value)) {
-        onChange?.(selectedData.selectedValues.filter((val) => val !== clickedOption.value));
+        onChange?.(
+          selectedData.selectedValues.filter(
+            (value) => value !== clickedOption.value
+          )
+        );
       } else {
         onChange?.([...selectedData.selectedValues, clickedOption.value]);
       }
@@ -128,20 +150,20 @@ const CreateDropdown = ({
   };
   const selectAllOptions = () => {
     if (multiselect) {
-      setSelectedData({
-        type: "selectAll"
-      });
+      setSelectedData({ type: "selectAll" });
       if (selectedData.allSelected && onChange) {
         onChange([]);
       } else {
         const allValues = [];
         if (!Array.isArray(options)) {
-          Object.keys(options).map((group) => options[group].map((option) => {
-            if (!option.disabled) {
-              allValues.push(option);
-            }
-            return null;
-          }));
+          Object.keys(options).map(
+            (group) => options[group].map((option) => {
+              if (!option.disabled) {
+                allValues.push(option);
+              }
+              return null;
+            })
+          );
         } else {
           options.map((option) => allValues.push(option));
         }
@@ -151,75 +173,331 @@ const CreateDropdown = ({
   };
   const handleSelectGroup = (group) => {
     if (multiselect) {
-      setSelectedData({
-        selectedGroup: group,
-        type: "selectGroup"
-      });
+      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));
+          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));
+          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: dropdownContainer, "data-grouped": true, id: "select-dropdown", onKeyDown: handleKeyDownSelect, role: "listbox", children: [
-    isLoading ? /* @__PURE__ */ jsx(Skeleton, { variant: "block" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-      selectAll && multiselect ? /* @__PURE__ */ jsx(Stack, { id: "items", children: /* @__PURE__ */ jsx("div", { "aria-disabled": false, "aria-label": "select-all", "aria-selected": selectedData.allSelected, className: 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, 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) => /* @__PURE__ */ jsxs(Stack, { gap: 0.25, children: [
-        displayedOptions[group].length > 0 ? /* @__PURE__ */ jsx("div", { className: dropdownGroupWrapper, id: selectAllGroup ? "items" : void 0, children: group ? /* @__PURE__ */ jsx("button", { className: `${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);
-          }
-        }, role: "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__ */ jsx(Stack, { gap: "0.25", id: "items", children: displayedOptions[group].map((option, indexOption) => /* @__PURE__ */ jsx("div", { "aria-disabled": !!option.disabled, "aria-label": option.value, "aria-selected": selectedData.selectedValues.includes(option.value) && !option.disabled, className: dropdownItem({
-          disabled: !!option.disabled,
-          selected: selectedData.selectedValues.includes(option.value) && !option.disabled
-        }), "data-testid": `option-${option.value}`, id: `option-${indexOption}`, onClick: () => {
-          if (!option.disabled) {
-            handleClick(option, group);
-          }
-        }, onKeyDown: (event) => [" ", "Enter"].includes(event.key) ? handleClick(option, group) : null, ref: option.value === defaultSearchValue || option.searchText === defaultSearchValue ? focusedItemRef : null, role: "option", tabIndex: !option.disabled ? 0 : -1, children: multiselect ? /* @__PURE__ */ jsx(Checkbox, { checked: selectedData.selectedValues.includes(option.value) && !option.disabled, className: dropdownCheckbox, disabled: option.disabled, onChange: () => {
-          if (!option.disabled) {
-            handleClick(option, group);
+  return !Array.isArray(displayedOptions) ? /* @__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: [
+          selectAll && multiselect ? /* @__PURE__ */ jsx(Stack, { id: "items", children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              "aria-disabled": false,
+              "aria-label": "select-all",
+              "aria-selected": selectedData.allSelected,
+              className: 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,
+                  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) => /* @__PURE__ */ jsxs(Stack, { gap: 0.25, children: [
+            displayedOptions[group].length > 0 ? /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: dropdownGroupWrapper,
+                id: selectAllGroup ? "items" : void 0,
+                children: group ? /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    className: `${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);
+                      }
+                    },
+                    role: "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__ */ jsx(Stack, { gap: "0.25", id: "items", children: displayedOptions[group].map((option, indexOption) => /* @__PURE__ */ jsx(
+              "div",
+              {
+                "aria-disabled": !!option.disabled,
+                "aria-label": option.value,
+                "aria-selected": selectedData.selectedValues.includes(option.value) && !option.disabled,
+                className: 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 ? 0 : -1,
+                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
+      ]
+    }
+  ) : /* @__PURE__ */ jsxs(
+    Stack,
+    {
+      className: `${dropdownContainer} ${dropdownContainerUnGrouped}`,
+      gap: 0.25,
+      id: "select-dropdown",
+      onKeyDown: handleKeyDownSelect,
+      role: "listbox",
+      children: [
+        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: 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
+                    }
+                  )
+                ] })
+              }
+            )
           }
-        }, 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
-  ] }) : /* @__PURE__ */ jsxs(Stack, { className: `${dropdownContainer} ${dropdownContainerUnGrouped}`, gap: 0.25, id: "select-dropdown", onKeyDown: handleKeyDownSelect, role: "listbox", children: [
-    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: 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: dropdownItem({
-        disabled: !!option.disabled,
-        selected: selectedData.selectedValues.includes(option.value) && !option.disabled
-      }), "data-testid": `option-${option.value}`, id: `option-${index}`, onClick: () => {
-        if (!option.disabled) {
-          handleClick(option);
-        }
-      }, onKeyDown: (event) => [" ", "Enter"].includes(event.key) ? handleClick(option) : null, ref: option.value === defaultSearchValue || option.searchText === defaultSearchValue ? focusedItemRef : null, role: "option", tabIndex: !option.disabled ? 0 : -1, children: multiselect ? /* @__PURE__ */ jsx(Checkbox, { checked: selectedData.selectedValues.includes(option.value) && !option.disabled, className: dropdownCheckbox, disabled: option.disabled, onChange: () => {
-        if (!option.disabled) {
-          handleClick(option);
-        }
-      }, 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
-    ] })
-  ] });
+        ) }) : 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: 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 ? 0 : -1,
+              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
+        ] })
+      ]
+    }
+  );
 };
 const Dropdown = ({
   children,
@@ -251,9 +529,11 @@ const Dropdown = ({
   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);
-  useEffect(() => {
+  const [maxWidth, setWidth] = useState(
+    refSelect.current?.offsetWidth ?? "100%"
+  );
+  const modalContext = use(ModalContext);
+  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;
@@ -262,21 +542,23 @@ const Dropdown = ({
         const modalElement = currentModal?.ref.current;
         if (modalElement) {
           const parentElement = modalElement.parentNode;
-          if (parentElement) {
+          if (parentElement instanceof HTMLElement) {
             parentElement.scrollBy({
               behavior: "smooth",
               top: overflow
             });
+          } else {
+            modalElement.scrollBy({
+              behavior: "smooth",
+              top: overflow
+            });
           }
         } else {
-          window.scrollBy({
-            behavior: "smooth",
-            top: overflow
-          });
+          window.scrollBy({ behavior: "smooth", top: overflow });
         }
       }
     }
-  }, [isDropdownVisible, refSelect, size, ref.current]);
+  }, [isDropdownVisible, refSelect, size, modalContext, theme]);
   const resizeDropdown = useCallback(() => {
     if (refSelect.current && refSelect.current.getBoundingClientRect().width > 0) {
       setWidth(refSelect.current.getBoundingClientRect().width);
@@ -297,15 +579,34 @@ const Dropdown = ({
       setDefaultSearch(null);
       setSearch("");
     }
+    const eventKeydown = (event) => handleKeyDown(
+      event,
+      ref,
+      options,
+      searchBarActive,
+      setSearch,
+      setDefaultSearch,
+      search
+    );
     if (!searchable) {
-      document.addEventListener("keydown", (event) => handleKeyDown(event, ref, options, searchBarActive, setSearch, setDefaultSearch, search));
+      document.addEventListener("keydown", eventKeydown);
     }
     return () => {
       if (!searchable) {
-        document.removeEventListener("keydown", (event) => handleKeyDown(event, ref, options, searchBarActive, setSearch, setDefaultSearch, search));
+        document.removeEventListener("keydown", eventKeydown);
       }
     };
-  }, [isDropdownVisible, searchBarActive, options, onSearch, search, refSelect, setDefaultSearch, setIsDropdownVisible, searchable]);
+  }, [
+    isDropdownVisible,
+    searchBarActive,
+    options,
+    onSearch,
+    search,
+    refSelect,
+    setDefaultSearch,
+    setIsDropdownVisible,
+    searchable
+  ]);
   const isEmpty = useMemo(() => {
     if (numberOfOptions === 0) {
       return true;
@@ -330,11 +631,51 @@ const Dropdown = ({
     }
     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", tabIndex: -1, text: /* @__PURE__ */ jsxs(Stack, { children: [
-    searchable && !isLoading && numberOfOptions >= 6 ? /* @__PURE__ */ jsx(SearchBarDropdown, { displayedOptions, placeholder, setSearchBarActive }) : null,
-    /* @__PURE__ */ jsx(CreateDropdown, { defaultSearchValue, descriptionDirection, emptyState, isEmpty, isLoading, loadMore, optionalInfoPlacement }),
-    computedFooter
-  ] }), visible: isDropdownVisible, children });
+  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",
+      tabIndex: -1,
+      text: /* @__PURE__ */ jsxs(Stack, { children: [
+        searchable && !isLoading && numberOfOptions >= 6 ? /* @__PURE__ */ jsx(
+          SearchBarDropdown,
+          {
+            displayedOptions,
+            placeholder,
+            setSearchBarActive
+          }
+        ) : null,
+        /* @__PURE__ */ jsx(
+          CreateDropdown,
+          {
+            defaultSearchValue,
+            descriptionDirection,
+            emptyState,
+            isEmpty,
+            isLoading,
+            loadMore,
+            optionalInfoPlacement
+          }
+        ),
+        computedFooter
+      ] }),
+      visible: isDropdownVisible,
+      children
+    }
+  );
 };
 export {
   Dropdown