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

package/dist/components/SearchInput/index.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { SearchIcon } from "@ultraviolet/icons";
 import { forwardRef, useRef, useState, useReducer, useImperativeHandle, useEffect, useCallback, useMemo } from "react";
 import { isClientSide } from "../../helpers/isClientSide.js";
@@ -8,179 +8,247 @@ import { Stack } from "../Stack/index.js";
 import { TextInput } from "../TextInput/index.js";
 import { KeyGroup } from "./KeyGroup.js";
 import { searchInputPopup, searchInput, clickableStack } from "./styles.css.js";
-const SearchInput = forwardRef(({
-  placeholder,
-  label,
-  labelDescription,
-  loading,
-  size,
-  popupPlacement,
-  threshold = 0,
-  children,
-  onSearch,
-  onClose,
-  "data-testid": dataTestId,
-  shortcut = false,
-  error,
-  defaultValue = "",
-  disabled,
-  className,
-  minLength,
-  maxLength,
-  tooltip,
-  onFocus,
-  onBlur,
-  name,
-  id,
-  "aria-live": ariaLive,
-  "aria-atomic": ariaAtomic,
-  "aria-labelledby": ariaLabelledby,
-  readOnly,
-  required,
-  autoFocus,
-  autoComplete,
-  onKeyDown,
-  role,
-  value,
-  style
-}, ref) => {
-  const focusedLinkIndex = useRef(0);
-  const popupRef = useRef(null);
-  const [containerWidth, setContainerWidth] = useState(0);
-  const [searchTerms, setSearchTerms] = useState(defaultValue);
-  const [isMacOS, setIsMacOS] = useState(false);
-  const [keyPressed, setKeyPressed] = useState([]);
-  const [isOpen, toggleIsOpen] = useReducer((state) => !state, false);
-  const innerSearchInputRef = useRef(null);
-  useImperativeHandle(ref, () => innerSearchInputRef.current);
-  const content = typeof children === "function" ? children({
-    isOpen,
-    searchTerms,
-    toggleIsOpen
-  }) : children;
-  const resizeSearchBar = () => {
-    if (popupRef.current) {
-      setContainerWidth(popupRef.current.getBoundingClientRect().width);
-    }
-  };
-  const handleNavigation = (event) => {
-    const links = [...popupRef.current?.querySelectorAll("a") ?? []];
-    if (links.length > 0 && focusedLinkIndex.current >= 0 && focusedLinkIndex.current <= links.length) {
-      if (event.key === "ArrowUp") {
-        if (focusedLinkIndex.current - 1 < 0) {
-          focusedLinkIndex.current = links.length - 1;
-        } else {
-          focusedLinkIndex.current -= 1;
+const SearchInput = forwardRef(
+  ({
+    placeholder,
+    label,
+    labelDescription,
+    loading,
+    size,
+    popupPlacement,
+    threshold = 0,
+    children,
+    onSearch,
+    onClose,
+    "data-testid": dataTestId,
+    shortcut = false,
+    error,
+    defaultValue = "",
+    disabled,
+    className,
+    minLength,
+    maxLength,
+    tooltip,
+    onFocus,
+    onBlur,
+    name,
+    id,
+    "aria-live": ariaLive,
+    "aria-atomic": ariaAtomic,
+    "aria-labelledby": ariaLabelledby,
+    readOnly,
+    required,
+    autoFocus,
+    autoComplete,
+    onKeyDown,
+    role,
+    value,
+    style
+  }, ref) => {
+    const focusedLinkIndex = useRef(0);
+    const popupRef = useRef(null);
+    const [containerWidth, setContainerWidth] = useState(0);
+    const [searchTerms, setSearchTerms] = useState(defaultValue);
+    const [isMacOS, setIsMacOS] = useState(false);
+    const [keyPressed, setKeyPressed] = useState([]);
+    const [isOpen, toggleIsOpen] = useReducer((state) => !state, false);
+    const innerSearchInputRef = useRef(null);
+    useImperativeHandle(
+      ref,
+      () => innerSearchInputRef.current
+    );
+    const content = typeof children === "function" ? children({ isOpen, searchTerms, toggleIsOpen }) : children;
+    const resizeSearchBar = () => {
+      if (popupRef.current) {
+        setContainerWidth(popupRef.current.getBoundingClientRect().width);
+      }
+    };
+    const handleNavigation = (event) => {
+      const links = [...popupRef.current?.querySelectorAll("a") ?? []];
+      if (links.length > 0 && focusedLinkIndex.current >= 0 && focusedLinkIndex.current <= links.length) {
+        if (event.key === "ArrowUp") {
+          if (focusedLinkIndex.current - 1 < 0) {
+            focusedLinkIndex.current = links.length - 1;
+          } else {
+            focusedLinkIndex.current -= 1;
+          }
+          links[focusedLinkIndex.current]?.focus();
+        }
+        if (event.key === "ArrowDown") {
+          if (focusedLinkIndex.current + 1 >= links.length) {
+            focusedLinkIndex.current = 0;
+          } else {
+            focusedLinkIndex.current += 1;
+          }
+          links[focusedLinkIndex.current]?.focus();
         }
-        links[focusedLinkIndex.current]?.focus();
       }
-      if (event.key === "ArrowDown") {
-        if (focusedLinkIndex.current + 1 >= links.length) {
-          focusedLinkIndex.current = 0;
-        } else {
-          focusedLinkIndex.current += 1;
+    };
+    useEffect(() => {
+      document.addEventListener("keyup", handleNavigation);
+      return () => document.removeEventListener("keyup", handleNavigation);
+    }, []);
+    useEffect(() => {
+      resizeSearchBar();
+      window.addEventListener("resize", resizeSearchBar);
+      return () => window.removeEventListener("resize", resizeSearchBar);
+    }, []);
+    useEffect(() => {
+      if (value !== void 0) {
+        setSearchTerms(value);
+      }
+    }, [value]);
+    const onSearchCallback = (localValue) => {
+      setSearchTerms(localValue);
+      try {
+        onSearch(localValue);
+        if (localValue.length >= threshold && !isOpen) {
+          toggleIsOpen();
         }
-        links[focusedLinkIndex.current]?.focus();
+      } catch {
+        toggleIsOpen();
       }
-    }
-  };
-  useEffect(() => {
-    document.addEventListener("keyup", handleNavigation);
-    return () => document.removeEventListener("keyup", handleNavigation);
-  }, []);
-  useEffect(() => {
-    resizeSearchBar();
-    window.addEventListener("resize", resizeSearchBar);
-    return () => window.removeEventListener("resize", resizeSearchBar);
-  }, []);
-  useEffect(() => {
-    if (value !== void 0) {
-      setSearchTerms(value);
-    }
-  }, [value]);
-  const onSearchCallback = (localValue) => {
-    setSearchTerms(localValue);
-    try {
-      onSearch(localValue);
-      if (localValue.length >= threshold && !isOpen) {
+    };
+    const onCloseCallback = () => {
+      onClose?.();
+      if (isOpen) {
         toggleIsOpen();
       }
-    } catch {
-      toggleIsOpen();
-    }
-  };
-  const onCloseCallback = () => {
-    onClose?.();
-    if (isOpen) {
-      toggleIsOpen();
-    }
-  };
-  useEffect(() => {
-    if (isClientSide) {
-      setIsMacOS(navigator.userAgent.includes("Mac"));
-    }
-  }, []);
-  const handleKeyPressed = useCallback((event) => {
-    if (!(event instanceof KeyboardEvent)) {
-      return;
-    }
-    const {
-      ctrlKey,
-      metaKey,
-      key
-    } = event;
-    setKeyPressed([...keyPressed, key.toUpperCase()]);
-    if (typeof shortcut === "boolean") {
-      if ((key === "k" || key === "K") && (!isMacOS && ctrlKey || isMacOS && metaKey)) {
-        event.preventDefault();
-        innerSearchInputRef.current?.focus();
+    };
+    useEffect(() => {
+      if (isClientSide) {
+        setIsMacOS(navigator.userAgent.includes("Mac"));
       }
-    } else {
-      const uppercaseShortcut = shortcut.map((s) => s.toUpperCase());
-      if (JSON.stringify([...keyPressed, key.toUpperCase()]) === JSON.stringify(uppercaseShortcut)) {
-        event.preventDefault();
-        innerSearchInputRef.current?.focus();
+    }, []);
+    const handleKeyPressed = useCallback(
+      (event) => {
+        if (!(event instanceof KeyboardEvent)) {
+          return;
+        }
+        const { ctrlKey, metaKey, key } = event;
+        setKeyPressed([...keyPressed, key.toUpperCase()]);
+        if (typeof shortcut === "boolean") {
+          if ((key === "k" || key === "K") && (!isMacOS && ctrlKey || isMacOS && metaKey)) {
+            event.preventDefault();
+            innerSearchInputRef.current?.focus();
+          }
+        } else {
+          const uppercaseShortcut = shortcut.map((s) => s.toUpperCase());
+          if (JSON.stringify([...keyPressed, key.toUpperCase()]) === JSON.stringify(uppercaseShortcut)) {
+            event.preventDefault();
+            innerSearchInputRef.current?.focus();
+          }
+        }
+      },
+      [keyPressed, shortcut, isMacOS]
+    );
+    const handleKeyReleased = useCallback(
+      (event) => {
+        if (!(event instanceof KeyboardEvent)) {
+          return;
+        }
+        const { key } = event;
+        setKeyPressed(keyPressed.filter((k) => k !== key.toUpperCase()));
+      },
+      [keyPressed]
+    );
+    useEffect(() => {
+      if (shortcut && !disabled) {
+        document.body.addEventListener("keydown", handleKeyPressed);
+        document.body.addEventListener("keyup", handleKeyReleased);
       }
-    }
-  }, [keyPressed, shortcut, isMacOS]);
-  const handleKeyReleased = useCallback((event) => {
-    if (!(event instanceof KeyboardEvent)) {
-      return;
-    }
-    const {
-      key
-    } = event;
-    setKeyPressed(keyPressed.filter((k) => k !== key.toUpperCase()));
-  }, [keyPressed]);
-  useEffect(() => {
-    if (shortcut && !disabled) {
-      document.body.addEventListener("keydown", handleKeyPressed);
-      document.body.addEventListener("keyup", handleKeyReleased);
-    }
-    return () => {
-      document.body.removeEventListener("keydown", handleKeyPressed);
-      document.body.removeEventListener("keyup", handleKeyReleased);
-    };
-  }, [shortcut, disabled, handleKeyPressed, handleKeyReleased]);
-  const keys = useMemo(() => {
-    if (typeof shortcut === "boolean") {
-      return [isMacOS ? "⌘" : "Ctrl", "K"];
-    }
-    const filteredKey = shortcut.map((key) => {
-      if (key === "Meta") {
-        return "⌘";
+      return () => {
+        document.body.removeEventListener("keydown", handleKeyPressed);
+        document.body.removeEventListener("keyup", handleKeyReleased);
+      };
+    }, [shortcut, disabled, handleKeyPressed, handleKeyReleased]);
+    const keys = useMemo(() => {
+      if (typeof shortcut === "boolean") {
+        return [isMacOS ? "⌘" : "Ctrl", "K"];
       }
-      if (key === "Control") {
-        return "Ctrl";
+      const filteredKey = shortcut.map((key) => {
+        if (key === "Meta") {
+          return "⌘";
+        }
+        if (key === "Control") {
+          return "Ctrl";
+        }
+        return key;
+      });
+      return filteredKey;
+    }, [isMacOS, shortcut]);
+    return /* @__PURE__ */ jsx("div", { style: { width: "100%" }, children: /* @__PURE__ */ jsx(
+      Popup,
+      {
+        className: searchInputPopup,
+        "data-testid": `popup-${dataTestId}`,
+        debounceDelay: 0,
+        hasArrow: false,
+        hideOnClickOutside: true,
+        innerRef: popupRef,
+        maxHeight: 410,
+        maxWidth: containerWidth,
+        onClose: onCloseCallback,
+        placement: popupPlacement,
+        role: "dialog",
+        text: content,
+        visible: isOpen,
+        children: /* @__PURE__ */ jsx(
+          TextInput,
+          {
+            "aria-atomic": ariaAtomic,
+            "aria-labelledby": ariaLabelledby,
+            "aria-live": ariaLive,
+            autoComplete,
+            autoFocus,
+            className: `${className ? `${className} ` : ""}${searchInput}`,
+            clearable: true,
+            "data-testid": dataTestId,
+            disabled,
+            error,
+            id,
+            label,
+            labelDescription,
+            loading,
+            maxLength,
+            minLength,
+            name,
+            onBlur,
+            onChange: (event) => onSearchCallback(event.target.value),
+            onFocus,
+            onKeyDown,
+            placeholder,
+            prefix: /* @__PURE__ */ jsx(
+              Stack,
+              {
+                className: clickableStack,
+                "data-testid": `search-icon${dataTestId ? `-${dataTestId}` : ""}`,
+                onClick: () => innerSearchInputRef.current?.focus(),
+                children: /* @__PURE__ */ jsx(SearchIcon, { disabled, sentiment: "neutral" })
+              }
+            ),
+            readOnly,
+            ref: innerSearchInputRef,
+            required,
+            role,
+            size,
+            style,
+            suffix: shortcut && searchTerms.length === 0 ? /* @__PURE__ */ jsx(
+              KeyGroup,
+              {
+                disabled,
+                keys,
+                onClick: () => innerSearchInputRef.current?.focus()
+              }
+            ) : void 0,
+            tooltip,
+            value: searchTerms
+          }
+        )
       }
-      return key;
-    });
-    return filteredKey;
-  }, [isMacOS, shortcut]);
-  return /* @__PURE__ */ jsx("div", { style: {
-    width: "100%"
-  }, children: /* @__PURE__ */ jsx(Popup, { className: searchInputPopup, "data-testid": `popup-${dataTestId}`, debounceDelay: 0, hasArrow: false, hideOnClickOutside: true, innerRef: popupRef, maxHeight: 410, maxWidth: containerWidth, onClose: onCloseCallback, placement: popupPlacement, role: "dialog", text: content, visible: isOpen, children: /* @__PURE__ */ jsx(TextInput, { "aria-atomic": ariaAtomic, "aria-labelledby": ariaLabelledby, "aria-live": ariaLive, autoComplete, autoFocus, className: `${className ? `${className} ` : ""}${searchInput}`, clearable: true, "data-testid": dataTestId, disabled, error, id, label, labelDescription, loading, maxLength, minLength, name, onBlur, onChange: (event) => onSearchCallback(event.target.value), onFocus, onKeyDown, placeholder, prefix: /* @__PURE__ */ jsx(Stack, { className: clickableStack, "data-testid": `search-icon${dataTestId ? `-${dataTestId}` : ""}`, onClick: () => innerSearchInputRef.current?.focus(), children: /* @__PURE__ */ jsx(SearchIcon, { disabled, sentiment: "neutral" }) }), readOnly, ref: innerSearchInputRef, required, role, size, style, suffix: shortcut && searchTerms.length === 0 ? /* @__PURE__ */ jsx(KeyGroup, { disabled, keys, onClick: () => innerSearchInputRef.current?.focus() }) : void 0, tooltip, value: searchTerms }) }) });
-});
+    ) });
+  }
+);
 export {
   SearchInput
 };

package/dist/components/SelectInput/SelectInputProvider.d.ts

@@ -39,5 +39,5 @@ type SelectInputProviderProps<IsMulti extends boolean> = {
     onChange?: IsMulti extends true ? (value: string[]) => void : (value: string) => void;
     onOpen?: () => void;
 };
-export declare const SelectInputProvider: <T extends boolean>({ options, multiselect, selectAll, value, selectAllGroup, numberOfOptions, children, onChange, refSelect, onOpen, }: SelectInputProviderProps<T>) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const SelectInputProvider: <T extends boolean>({ options, multiselect, selectAll, value, selectAllGroup, numberOfOptions, children, onChange, refSelect, onOpen, }: SelectInputProviderProps<T>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/SelectInput/SelectInputProvider.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { useMemo, useState, useCallback, useReducer, useEffect, createContext, useContext } from "react";
 const SelectInputContext = createContext({
   displayedOptions: [],
@@ -12,15 +12,9 @@ const SelectInputContext = createContext({
   },
   options: [],
   searchInput: "",
-  selectAll: {
-    label: ""
-  },
+  selectAll: { label: "" },
   selectAllGroup: false,
-  selectedData: {
-    allSelected: false,
-    selectedGroups: [],
-    selectedValues: []
-  },
+  selectedData: { allSelected: false, selectedGroups: [], selectedValues: [] },
   setIsDropdownVisible: () => {
   },
   setSearchInput: () => {
@@ -54,23 +48,32 @@ const SelectInputProvider = ({
     if (Array.isArray(options)) {
       return [];
     }
-    return Object.keys(options).filter((group) => options[group].every((groupOption) => currentValue.includes(groupOption.value)));
+    return Object.keys(options).filter(
+      (group) => options[group].every(
+        (groupOption) => currentValue.includes(groupOption.value)
+      )
+    );
   }, [currentValue, options]);
   const [displayedOptions, setDisplayedOptions] = useState(options);
   const [isDropdownVisible, setIsDropdownVisible] = useState(false);
   const [searchInput, setSearchInput] = useState("");
-  const handleDropDownVisible = useCallback((newValue) => {
-    setIsDropdownVisible(newValue);
-    if (newValue) {
-      onOpen?.();
-    }
-    if (!newValue && refSelect) {
-      refSelect.current?.focus();
-    }
-  }, [refSelect, onOpen]);
+  const handleDropDownVisible = useCallback(
+    (newValue) => {
+      setIsDropdownVisible(newValue);
+      if (newValue) {
+        onOpen?.();
+      }
+      if (!newValue && refSelect) {
+        refSelect.current?.focus();
+      }
+    },
+    [refSelect, onOpen]
+  );
   const allValues = useMemo(() => {
     if (!Array.isArray(options)) {
-      return Object.keys(options).flatMap((group) => options[group].filter((option) => !option.disabled));
+      return Object.keys(options).flatMap(
+        (group) => options[group].filter((option) => !option.disabled)
+      );
     }
     return options;
   }, [options]);
@@ -84,11 +87,7 @@ const SelectInputProvider = ({
     switch (action.type) {
       case "selectAll": {
         if (state.allSelected) {
-          return {
-            allSelected: false,
-            selectedGroups: [],
-            selectedValues: []
-          };
+          return { allSelected: false, selectedGroups: [], selectedValues: [] };
         }
         return {
           allSelected: true,
@@ -101,12 +100,20 @@ const SelectInputProvider = ({
           if (state.selectedGroups.includes(action.selectedGroup)) {
             return {
               allSelected: false,
-              selectedGroups: state.selectedGroups.filter((selectedGroup) => selectedGroup !== action.selectedGroup),
-              selectedValues: [...state.selectedValues].filter((selectedValue) => !options[action.selectedGroup].find((option) => option.value === selectedValue))
+              selectedGroups: state.selectedGroups.filter(
+                (selectedGroup) => selectedGroup !== action.selectedGroup
+              ),
+              selectedValues: [...state.selectedValues].filter(
+                (selectedValue) => !options[action.selectedGroup].find(
+                  (option) => option.value === selectedValue
+                )
+              )
             };
           }
           const newSelectedValues = [...state.selectedValues];
-          options[action.selectedGroup].map((option) => newSelectedValues.find((aValue) => aValue === option.value) || option.disabled ? null : newSelectedValues.push(option.value));
+          options[action.selectedGroup].map(
+            (option) => newSelectedValues.find((aValue) => aValue === option.value) || option.disabled ? null : newSelectedValues.push(option.value)
+          );
           return {
             allSelected: newSelectedValues.length === numberOfOptions,
             selectedGroups: [...state.selectedGroups, action.selectedGroup],
@@ -120,14 +127,26 @@ const SelectInputProvider = ({
           if (state.selectedValues.includes(action.clickedOption.value)) {
             return {
               allSelected: false,
-              selectedGroups: action.group && state.selectedGroups.includes(action.group) ? state.selectedGroups.filter((selectedGroup) => selectedGroup !== action.group) : [],
-              selectedValues: state.selectedValues.filter((val) => val !== action.clickedOption.value)
+              selectedGroups: action.group && state.selectedGroups.includes(action.group) ? state.selectedGroups.filter(
+                (selectedGroup) => selectedGroup !== action.group
+              ) : [],
+              selectedValues: state.selectedValues.filter(
+                (val) => val !== action.clickedOption.value
+              )
             };
           }
           return {
             allSelected: state.selectedValues.length + 1 === numberOfOptions,
-            selectedGroups: !Array.isArray(options) && action.group && options[action.group].every((option) => [...state.selectedValues, action.clickedOption.value].includes(option.value) || option.disabled) ? [...state.selectedGroups, action.group] : state.selectedGroups,
-            selectedValues: [...state.selectedValues, action.clickedOption.value]
+            selectedGroups: !Array.isArray(options) && action.group && options[action.group].every(
+              (option) => [
+                ...state.selectedValues,
+                action.clickedOption.value
+              ].includes(option.value) || option.disabled
+            ) ? [...state.selectedGroups, action.group] : state.selectedGroups,
+            selectedValues: [
+              ...state.selectedValues,
+              action.clickedOption.value
+            ]
           };
         }
         return {
@@ -137,11 +156,7 @@ const SelectInputProvider = ({
         };
       }
       case "clearAll": {
-        return {
-          allSelected: false,
-          selectedGroups: [],
-          selectedValues: []
-        };
+        return { allSelected: false, selectedGroups: [], selectedValues: [] };
       }
       case "update": {
         return {
@@ -149,9 +164,15 @@ const SelectInputProvider = ({
           selectedGroups: state.selectedGroups,
           selectedValues: state.selectedValues.filter((selectedValue) => {
             if (!Array.isArray(options)) {
-              return Object.keys(options).some((group) => options[group].some((option) => option.value === selectedValue && !option.disabled));
+              return Object.keys(options).some(
+                (group) => options[group].some(
+                  (option) => option.value === selectedValue && !option.disabled
+                )
+              );
             }
-            return options.some((option) => option.value === selectedValue && !option.disabled);
+            return options.some(
+              (option) => option.value === selectedValue && !option.disabled
+            );
           })
         };
       }
@@ -179,22 +200,37 @@ const SelectInputProvider = ({
       type: "reset"
     });
   }, [currentValue, selectedGroups]);
-  const providerValue = useMemo(() => ({
-    displayedOptions,
-    isDropdownVisible,
-    multiselect,
-    numberOfOptions,
-    onChange,
-    onSearch: setDisplayedOptions,
-    options,
-    searchInput,
-    selectAll,
-    selectAllGroup,
-    selectedData,
-    setIsDropdownVisible: handleDropDownVisible,
-    setSearchInput,
-    setSelectedData
-  }), [isDropdownVisible, handleDropDownVisible, searchInput, options, multiselect, selectAll, selectAllGroup, numberOfOptions, displayedOptions, selectedData, onChange]);
+  const providerValue = useMemo(
+    () => ({
+      displayedOptions,
+      isDropdownVisible,
+      multiselect,
+      numberOfOptions,
+      onChange,
+      onSearch: setDisplayedOptions,
+      options,
+      searchInput,
+      selectAll,
+      selectAllGroup,
+      selectedData,
+      setIsDropdownVisible: handleDropDownVisible,
+      setSearchInput,
+      setSelectedData
+    }),
+    [
+      isDropdownVisible,
+      handleDropDownVisible,
+      searchInput,
+      options,
+      multiselect,
+      selectAll,
+      selectAllGroup,
+      numberOfOptions,
+      displayedOptions,
+      selectedData,
+      onChange
+    ]
+  );
   return /* @__PURE__ */ jsx(SelectInputContext.Provider, { value: providerValue, children });
 };
 export {

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

@@ -25,4 +25,4 @@ export type CreateDropdownProps = {
     defaultSearchValue: string | null;
     isLoading?: boolean;
 };
-export declare const Dropdown: ({ children, emptyState, descriptionDirection, searchable, placeholder, footer, refSelect, loadMore, optionalInfoPlacement, isLoading, size, dropdownAlign, portalTarget, id, }: DropdownProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Dropdown: ({ children, emptyState, descriptionDirection, searchable, placeholder, footer, refSelect, loadMore, optionalInfoPlacement, isLoading, size, dropdownAlign, portalTarget, id, }: DropdownProps) => import("react/jsx-runtime").JSX.Element;