@ultraviolet/ui 3.4.0 → 3.5.1

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

@@ -1,5 +1,6 @@
 "use client";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { PlusIcon } from "@ultraviolet/icons";
 import { useTheme } from "@ultraviolet/themes";
 import { cn } from "@ultraviolet/utils";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
@@ -10,12 +11,11 @@ import { Popup } from "../../Popup/index.js";
 import { Skeleton } from "../../Skeleton/index.js";
 import { Stack } from "../../Stack/index.js";
 import { Text } from "../../Text/index.js";
+import { DROPDOWN_MAX_HEIGHT, INPUT_SIZE_HEIGHT, OPTION_SELECTOR } from "../constants.js";
 import { useSelectInput } from "../SelectInputProvider.js";
-import { INPUT_SIZE_HEIGHT } from "../types.js";
 import { DisplayOption } from "./DropdownOption.js";
-import { footer, dropdown, dropdownWidth, dropdownEmptyState, dropdownContainer, dropdownCheckbox, dropdownItem, dropdownGroupWrapper, dropdownGroupSelectable, dropdownGroup, dropdownLoadMore, dropdownContainerUnGrouped } from "./dropdown.css.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";
-const DROPDOWN_MAX_HEIGHT = 256;
 const NON_SEARCHABLE_KEYS = [
   "Tab",
   " ",
@@ -29,9 +29,7 @@ const NON_SEARCHABLE_KEYS = [
   "Escape"
 ];
 const moveFocusDown = () => {
-  const options = document.querySelectorAll(
-    '#items > div[role="option"]:not([disabled])'
-  );
+  const options = document.querySelectorAll(OPTION_SELECTOR);
   const activeItem = document.activeElement;
   if (options) {
     for (let i = 0; i < options?.length; i += 1) {
@@ -43,9 +41,7 @@ const moveFocusDown = () => {
   }
 };
 const moveFocusUp = () => {
-  const options = document.querySelectorAll(
-    '#items > div[role="option"]:not([disabled])'
-  );
+  const options = document.querySelectorAll(OPTION_SELECTOR);
   const activeItem = document.activeElement;
   if (options) {
     for (let i = 0; i < options.length; i += 1) {
@@ -73,7 +69,16 @@ const handleKeyDown = (event, ref, options, searchBarActive, setSearch, setDefau
     const currentSearch = search + event.key;
     setSearch(currentSearch);
     ref.current.focus();
-    if (!Array.isArray(options)) {
+    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(
@@ -87,15 +92,6 @@ const handleKeyDown = (event, ref, options, searchBarActive, setSearch, setDefau
       } else {
         setDefaultSearch(null);
       }
-    } else {
-      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);
-      }
     }
   }
 };
@@ -106,7 +102,11 @@ const CreateDropdown = ({
   loadMore,
   optionalInfoPlacement,
   defaultSearchValue,
-  isLoading
+  isLoading,
+  groupEmptyState,
+  groupError,
+  addOption,
+  searchable
 }) => {
   const {
     setIsDropdownVisible,
@@ -116,8 +116,11 @@ const CreateDropdown = ({
     selectAll,
     selectAllGroup,
     displayedOptions,
+    onSearch,
     setSelectedData,
-    selectedData
+    selectedData,
+    searchInput,
+    setSearchInput
   } = useSelectInput();
   const focusedItemRef = useRef(null);
   useEffect(() => {
@@ -125,9 +128,56 @@ const CreateDropdown = ({
       focusedItemRef.current.focus();
     }
   }, [defaultSearchValue]);
-  if (isEmpty) {
+  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,
@@ -157,7 +207,9 @@ const CreateDropdown = ({
         onChange([]);
       } else {
         const allValues = [];
-        if (!Array.isArray(options)) {
+        if (Array.isArray(options)) {
+          options.map((option) => allValues.push(option));
+        } else {
           Object.keys(options).map(
             (group) => options[group].map((option) => {
               if (!option.disabled) {
@@ -166,8 +218,6 @@ const CreateDropdown = ({
               return null;
             })
           );
-        } else {
-          options.map((option) => allValues.push(option));
         }
         onChange?.(allValues.map((value) => value.value));
       }
@@ -192,208 +242,51 @@ const CreateDropdown = ({
       }
     }
   };
-  return !Array.isArray(displayedOptions) ? /* @__PURE__ */ jsxs(
+  return Array.isArray(displayedOptions) ? /* @__PURE__ */ jsxs(
     Stack,
     {
-      className: dropdownContainer,
-      "data-grouped": true,
+      className: cn(dropdownContainer, dropdownContainerUnGrouped),
+      gap: 0.25,
       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: 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) => /* @__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: 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);
-                      }
-                    },
-                    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
+        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();
               }
-            ) : null,
-            /* @__PURE__ */ jsx(Stack, { gap: "0.25", id: "items", children: displayedOptions[group].map((option, indexOption) => /* @__PURE__ */ jsx(
-              "div",
+            },
+            role: "option",
+            tabIndex: -1,
+            children: /* @__PURE__ */ jsx(
+              DisplayOption,
               {
-                "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
-                    });
-                  }
+                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}`
                 },
-                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: cn(dropdownContainer, dropdownContainerUnGrouped),
-      gap: 0.25,
-      id: "select-dropdown",
-      onKeyDown: handleKeyDownSelect,
-      role: "listbox",
-      children: [
+                optionalInfoPlacement: "left"
+              }
+            )
+          }
+        ) : null,
         selectAll && multiselect ? /* @__PURE__ */ jsx(Stack, { gap: 0.25, id: "items", tabIndex: -1, children: /* @__PURE__ */ jsx(
           "div",
           {
@@ -468,7 +361,7 @@ const CreateDropdown = ({
               },
               ref: option.value === defaultSearchValue || option.searchText === defaultSearchValue ? focusedItemRef : null,
               role: "option",
-              tabIndex: !option.disabled ? 0 : -1,
+              tabIndex: option.disabled ? -1 : 0,
               children: multiselect ? /* @__PURE__ */ jsx(
                 Checkbox,
                 {
@@ -509,6 +402,282 @@ const CreateDropdown = ({
         ] })
       ]
     }
+  ) : /* @__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 ? (
+                    // biome-ignore  lint/a11y/noInteractiveElementToNoninteractiveRole: to fix
+                    /* @__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);
+                          }
+                        },
+                        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__ */ 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
+      ]
+    }
   );
 };
 const Dropdown = ({
@@ -525,7 +694,10 @@ const Dropdown = ({
   size,
   dropdownAlign,
   portalTarget,
-  id
+  id,
+  groupError,
+  groupEmptyState,
+  addOption
 }) => {
   const {
     setIsDropdownVisible,
@@ -666,7 +838,7 @@ const Dropdown = ({
       }),
       tabIndex: -1,
       text: /* @__PURE__ */ jsxs(Stack, { children: [
-        searchable && !isLoading && numberOfOptions >= 6 ? /* @__PURE__ */ jsx(
+        searchable && !isLoading && (numberOfOptions >= 6 || addOption) ? /* @__PURE__ */ jsx(
           SearchBarDropdown,
           {
             displayedOptions,
@@ -677,13 +849,17 @@ const Dropdown = ({
         /* @__PURE__ */ jsx(
           CreateDropdown,
           {
+            addOption,
             defaultSearchValue,
             descriptionDirection,
             emptyState,
+            groupEmptyState,
+            groupError,
             isEmpty,
             isLoading,
             loadMore,
-            optionalInfoPlacement
+            optionalInfoPlacement,
+            searchable
           }
         ),
         computedFooter