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

package/dist/components/SelectInput/components/Dropdown.cjs

@@ -1,341 +0,0 @@
-"use client";
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("@emotion/react/jsx-runtime");
-const themes = require("@ultraviolet/themes");
-const react = require("react");
-const index$4 = require("../../Checkbox/index.cjs");
-const ModalProvider = require("../../Modal/ModalProvider.cjs");
-const index = require("../../Popup/index.cjs");
-const index$3 = require("../../Skeleton/index.cjs");
-const index$1 = require("../../Stack/index.cjs");
-const index$2 = require("../../Text/index.cjs");
-const SelectInputProvider = require("../SelectInputProvider.cjs");
-const types = require("../types.cjs");
-const DropdownOption = require("./DropdownOption.cjs");
-const dropdown_css = require("./dropdown.css.cjs");
-const SearchBarDropdown = require("./SearchBarDropdown.cjs");
-const DROPDOWN_MAX_HEIGHT = 256;
-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 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 moveFocusUp = () => {
-  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) {
-      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();
-  }
-};
-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 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);
-      }
-    } 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);
-      }
-    }
-  }
-};
-const CreateDropdown = ({
-  isEmpty,
-  emptyState,
-  descriptionDirection,
-  loadMore,
-  optionalInfoPlacement,
-  defaultSearchValue,
-  isLoading
-}) => {
-  const {
-    setIsDropdownVisible,
-    onChange,
-    options,
-    multiselect,
-    selectAll,
-    selectAllGroup,
-    displayedOptions,
-    setSelectedData,
-    selectedData
-  } = SelectInputProvider.useSelectInput();
-  const focusedItemRef = react.useRef(null);
-  react.useEffect(() => {
-    if (defaultSearchValue && focusedItemRef?.current) {
-      focusedItemRef.current.focus();
-    }
-  }, [defaultSearchValue]);
-  if (isEmpty) {
-    return /* @__PURE__ */ jsxRuntime.jsx(index$1.Stack, { alignItems: "center", className: dropdown_css.dropdownEmptyState, gap: 2, children: emptyState ?? /* @__PURE__ */ jsxRuntime.jsx(index$2.Text, { as: "p", variant: "bodyStrong", children: "No options" }) });
-  }
-  const handleClick = (clickedOption, group) => {
-    setSelectedData({
-      clickedOption,
-      group,
-      type: "selectOption"
-    });
-    if (multiselect) {
-      if (selectedData.selectedValues.includes(clickedOption.value)) {
-        onChange?.(selectedData.selectedValues.filter((val) => val !== 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)) {
-          Object.keys(options).map((group) => options[group].map((option) => {
-            if (!option.disabled) {
-              allValues.push(option);
-            }
-            return null;
-          }));
-        } else {
-          options.map((option) => allValues.push(option));
-        }
-        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__ */ jsxRuntime.jsxs(index$1.Stack, { className: dropdown_css.dropdownContainer, "data-grouped": true, id: "select-dropdown", onKeyDown: handleKeyDownSelect, role: "listbox", children: [
-    isLoading ? /* @__PURE__ */ jsxRuntime.jsx(index$3.Skeleton, { variant: "block" }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      selectAll && multiselect ? /* @__PURE__ */ jsxRuntime.jsx(index$1.Stack, { id: "items", children: /* @__PURE__ */ jsxRuntime.jsx("div", { "aria-disabled": false, "aria-label": "select-all", "aria-selected": selectedData.allSelected, className: dropdown_css.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__ */ jsxRuntime.jsx(index$4.Checkbox, { checked: selectedData.allSelected, className: dropdown_css.dropdownCheckbox, "data-testid": "select-all-checkbox", disabled: false, onChange: selectAllOptions, tabIndex: -1, value: "select-all", children: /* @__PURE__ */ jsxRuntime.jsxs(index$1.Stack, { direction: "column", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(index$2.Text, { as: "span", placement: "left", variant: "body", children: selectAll.label }),
-        /* @__PURE__ */ jsxRuntime.jsx(index$2.Text, { as: "span", placement: "left", prominence: "weak", sentiment: "neutral", variant: "bodySmall", children: selectAll.description })
-      ] }) }) }) }) : null,
-      Object.keys(displayedOptions).map((group, index2) => /* @__PURE__ */ jsxRuntime.jsxs(index$1.Stack, { gap: 0.25, children: [
-        displayedOptions[group].length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: dropdown_css.dropdownGroupWrapper, id: selectAllGroup ? "items" : void 0, children: group ? /* @__PURE__ */ jsxRuntime.jsx("button", { className: `${selectAllGroup ? dropdown_css.dropdownGroupSelectable : ""} ${dropdown_css.dropdownGroup}`, "data-selectgroup": selectAllGroup, "data-testid": `group-${index2}`, 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__ */ jsxRuntime.jsx(index$4.Checkbox, { checked: selectedData.selectedGroups.includes(group), className: dropdown_css.dropdownCheckbox, "data-testid": "select-group", disabled: false, onChange: () => selectAllGroup ? handleSelectGroup(group) : null, tabIndex: -1, value: group, children: /* @__PURE__ */ jsxRuntime.jsx(index$2.Text, { as: "span", placement: "left", sentiment: "neutral", variant: "caption", children: group.toUpperCase() }) }) : /* @__PURE__ */ jsxRuntime.jsx(index$2.Text, { as: "span", placement: "left", sentiment: "neutral", variant: "caption", children: group.toUpperCase() }) }, group) : null }) : null,
-        /* @__PURE__ */ jsxRuntime.jsx(index$1.Stack, { gap: "0.25", id: "items", children: displayedOptions[group].map((option, indexOption) => /* @__PURE__ */ jsxRuntime.jsx("div", { "aria-disabled": !!option.disabled, "aria-label": option.value, "aria-selected": selectedData.selectedValues.includes(option.value) && !option.disabled, className: dropdown_css.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__ */ jsxRuntime.jsx(index$4.Checkbox, { checked: selectedData.selectedValues.includes(option.value) && !option.disabled, className: dropdown_css.dropdownCheckbox, disabled: option.disabled, onChange: () => {
-          if (!option.disabled) {
-            handleClick(option, group);
-          }
-        }, tabIndex: -1, value: option.value, children: /* @__PURE__ */ jsxRuntime.jsx(DropdownOption.DisplayOption, { descriptionDirection, option, optionalInfoPlacement }) }) : /* @__PURE__ */ jsxRuntime.jsx(DropdownOption.DisplayOption, { descriptionDirection, option, optionalInfoPlacement }) }, option.value)) })
-      ] }, group))
-    ] }),
-    loadMore ? /* @__PURE__ */ jsxRuntime.jsx(index$1.Stack, { className: dropdown_css.dropdownLoadMore, children: loadMore }) : null
-  ] }) : /* @__PURE__ */ jsxRuntime.jsxs(index$1.Stack, { className: `${dropdown_css.dropdownContainer} ${dropdown_css.dropdownContainerUnGrouped}`, gap: 0.25, id: "select-dropdown", onKeyDown: handleKeyDownSelect, role: "listbox", children: [
-    selectAll && multiselect ? /* @__PURE__ */ jsxRuntime.jsx(index$1.Stack, { gap: 0.25, id: "items", tabIndex: -1, children: /* @__PURE__ */ jsxRuntime.jsx("div", { "aria-disabled": false, "aria-label": "select-all", "aria-selected": selectedData.allSelected, className: dropdown_css.dropdownItem({
-      selected: selectedData.allSelected
-    }), "data-testid": "select-all", onClick: selectAllOptions, onKeyDown: (event) => [" ", "Enter"].includes(event.key) ? selectAllOptions() : null, role: "option", tabIndex: 0, children: /* @__PURE__ */ jsxRuntime.jsx(index$4.Checkbox, { checked: selectedData.allSelected, className: dropdown_css.dropdownCheckbox, "data-testid": "select-all-checkbox", disabled: false, onChange: selectAllOptions, tabIndex: -1, value: "select-all", children: /* @__PURE__ */ jsxRuntime.jsxs(index$1.Stack, { direction: "column", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(index$2.Text, { as: "span", placement: "left", variant: "body", children: selectAll.label }),
-      /* @__PURE__ */ jsxRuntime.jsx(index$2.Text, { as: "span", placement: "left", prominence: "weak", sentiment: "neutral", variant: "bodySmall", children: selectAll.description })
-    ] }) }) }) }) : null,
-    /* @__PURE__ */ jsxRuntime.jsxs(index$1.Stack, { gap: 0.25, id: "items", children: [
-      isLoading ? /* @__PURE__ */ jsxRuntime.jsx(index$3.Skeleton, { variant: "block" }) : displayedOptions.map((option, index2) => /* @__PURE__ */ jsxRuntime.jsx("div", { "aria-disabled": !!option.disabled, "aria-label": option.value, "aria-selected": selectedData.selectedValues.includes(option.value) && !option.disabled, className: dropdown_css.dropdownItem({
-        disabled: !!option.disabled,
-        selected: selectedData.selectedValues.includes(option.value) && !option.disabled
-      }), "data-testid": `option-${option.value}`, id: `option-${index2}`, 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__ */ jsxRuntime.jsx(index$4.Checkbox, { checked: selectedData.selectedValues.includes(option.value) && !option.disabled, className: dropdown_css.dropdownCheckbox, disabled: option.disabled, onChange: () => {
-        if (!option.disabled) {
-          handleClick(option);
-        }
-      }, tabIndex: -1, value: option.value, children: /* @__PURE__ */ jsxRuntime.jsx(DropdownOption.DisplayOption, { descriptionDirection, option, optionalInfoPlacement }) }) : /* @__PURE__ */ jsxRuntime.jsx(DropdownOption.DisplayOption, { descriptionDirection, option, optionalInfoPlacement }) }, option.value)),
-      loadMore ? /* @__PURE__ */ jsxRuntime.jsx(index$1.Stack, { className: dropdown_css.dropdownLoadMore, children: loadMore }) : null
-    ] })
-  ] });
-};
-const Dropdown = ({
-  children,
-  emptyState,
-  descriptionDirection,
-  searchable,
-  placeholder,
-  footer,
-  refSelect,
-  loadMore,
-  optionalInfoPlacement,
-  isLoading,
-  size,
-  dropdownAlign,
-  portalTarget,
-  id
-}) => {
-  const {
-    setIsDropdownVisible,
-    isDropdownVisible,
-    onSearch,
-    searchInput,
-    options,
-    displayedOptions,
-    numberOfOptions
-  } = SelectInputProvider.useSelectInput();
-  const theme = themes.useTheme();
-  const [searchBarActive, setSearchBarActive] = react.useState(false);
-  const [defaultSearchValue, setDefaultSearch] = react.useState(null);
-  const ref = react.useRef(null);
-  const [search, setSearch] = react.useState("");
-  const [maxWidth, setWidth] = react.useState(refSelect.current?.offsetWidth ?? "100%");
-  const modalContext = react.useContext(ModalProvider.ModalContext);
-  react.useEffect(() => {
-    if (refSelect.current && isDropdownVisible) {
-      const position = refSelect.current.getBoundingClientRect().bottom + DROPDOWN_MAX_HEIGHT + Number(theme.sizing[types.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) {
-            parentElement.scrollBy({
-              behavior: "smooth",
-              top: overflow
-            });
-          }
-        } else {
-          window.scrollBy({
-            behavior: "smooth",
-            top: overflow
-          });
-        }
-      }
-    }
-  }, [isDropdownVisible, refSelect, size, ref.current]);
-  const resizeDropdown = react.useCallback(() => {
-    if (refSelect.current && refSelect.current.getBoundingClientRect().width > 0) {
-      setWidth(refSelect.current.getBoundingClientRect().width);
-    }
-  }, [refSelect]);
-  react.useEffect(() => {
-    resizeDropdown();
-    window.addEventListener("resize", resizeDropdown);
-    return () => window.removeEventListener("resize", resizeDropdown);
-  }, [resizeDropdown]);
-  react.useEffect(() => {
-    if (!searchInput) {
-      onSearch(options);
-    }
-  }, [onSearch, options, searchInput]);
-  react.useEffect(() => {
-    if (!isDropdownVisible) {
-      setDefaultSearch(null);
-      setSearch("");
-    }
-    if (!searchable) {
-      document.addEventListener("keydown", (event) => handleKeyDown(event, ref, options, searchBarActive, setSearch, setDefaultSearch, search));
-    }
-    return () => {
-      if (!searchable) {
-        document.removeEventListener("keydown", (event) => handleKeyDown(event, ref, options, searchBarActive, setSearch, setDefaultSearch, search));
-      }
-    };
-  }, [isDropdownVisible, searchBarActive, options, onSearch, search, refSelect, setDefaultSearch, setIsDropdownVisible, searchable]);
-  const isEmpty = react.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 = react.useMemo(() => {
-    if (footer && !isEmpty) {
-      if (typeof footer === "function") {
-        return /* @__PURE__ */ jsxRuntime.jsx("div", { className: dropdown_css.footer, children: footer(() => setIsDropdownVisible(false)) });
-      }
-      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: dropdown_css.footer, children: footer });
-    }
-    return null;
-  }, [isEmpty, footer, setIsDropdownVisible]);
-  return /* @__PURE__ */ jsxRuntime.jsx(index.Popup, { align: dropdownAlign ?? "start", className: dropdown_css.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__ */ jsxRuntime.jsxs(index$1.Stack, { children: [
-    searchable && !isLoading && numberOfOptions >= 6 ? /* @__PURE__ */ jsxRuntime.jsx(SearchBarDropdown.SearchBarDropdown, { displayedOptions, placeholder, setSearchBarActive }) : null,
-    /* @__PURE__ */ jsxRuntime.jsx(CreateDropdown, { defaultSearchValue, descriptionDirection, emptyState, isEmpty, isLoading, loadMore, optionalInfoPlacement }),
-    computedFooter
-  ] }), visible: isDropdownVisible, children });
-};
-exports.Dropdown = Dropdown;

package/dist/components/SelectInput/components/DropdownOption.cjs

@@ -1,47 +0,0 @@
-"use client";
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("@emotion/react/jsx-runtime");
-const index$1 = require("../../Stack/index.cjs");
-const index$2 = require("../../Text/index.cjs");
-const index = require("../../Tooltip/index.cjs");
-const dropdown_css = require("./dropdown.css.cjs");
-const DisplayOption = ({
-  option,
-  optionalInfoPlacement,
-  descriptionDirection
-}) => {
-  if (descriptionDirection === "row" && optionalInfoPlacement === "left") {
-    return /* @__PURE__ */ jsxRuntime.jsx(index.Tooltip, { text: option.tooltip, children: /* @__PURE__ */ jsxRuntime.jsx(index$1.Stack, { "data-testid": `option-stack-${option.value}`, direction: "row", gap: 0.5, justifyContent: "left", children: /* @__PURE__ */ jsxRuntime.jsxs(index$1.Stack, { alignItems: "center", className: dropdown_css.dropdownInfoContainer, direction: "row", gap: 0.5, children: [
-      option.optionalInfo ?? null,
-      /* @__PURE__ */ jsxRuntime.jsx(index$2.Text, { as: "span", className: dropdown_css.dropdownInfoTextItem, placement: "left", variant: "body", children: option.label }),
-      option.description ? /* @__PURE__ */ jsxRuntime.jsx(index$2.Text, { as: "span", placement: "left", prominence: "weak", sentiment: "neutral", variant: "bodySmall", children: option.description }) : null
-    ] }) }) });
-  }
-  if (descriptionDirection === "row" && optionalInfoPlacement === "right") {
-    return /* @__PURE__ */ jsxRuntime.jsx(index.Tooltip, { text: option.tooltip, children: /* @__PURE__ */ jsxRuntime.jsxs(index$1.Stack, { alignItems: "baseline", "data-testid": `option-stack-${option.value}`, direction: "row", gap: 0.5, justifyContent: "space-between", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(index$1.Stack, { alignItems: "baseline", className: dropdown_css.dropdownInfoContainer, direction: "row", gap: 0.5, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(index$2.Text, { as: "span", className: dropdown_css.dropdownInfoTextItem, placement: "left", variant: "body", children: option.label }),
-        option.description ? /* @__PURE__ */ jsxRuntime.jsx(index$2.Text, { as: "span", placement: "left", prominence: "weak", sentiment: "neutral", variant: "bodySmall", children: option.description }) : null
-      ] }),
-      option.optionalInfo ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: dropdown_css.dropdownInfo, children: option.optionalInfo }) : null
-    ] }) });
-  }
-  if (descriptionDirection === "column" && optionalInfoPlacement === "left") {
-    return /* @__PURE__ */ jsxRuntime.jsx(index.Tooltip, { text: option.tooltip, children: /* @__PURE__ */ jsxRuntime.jsxs(index$1.Stack, { alignItems: "normal", direction: "row", gap: 0.5, justifyContent: option.optionalInfo ? "left" : "space-between", children: [
-      option.optionalInfo ?? null,
-      /* @__PURE__ */ jsxRuntime.jsxs(index$1.Stack, { className: dropdown_css.dropdownInfoContainer, "data-testid": `option-stack-${option.value}`, direction: "column", gap: 0.5, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(index$2.Text, { as: "span", className: dropdown_css.dropdownInfoTextItem, placement: "left", variant: "body", children: option.label }),
-        option.description ? /* @__PURE__ */ jsxRuntime.jsx(index$2.Text, { as: "span", placement: "left", prominence: "weak", sentiment: "neutral", variant: "bodySmall", children: option.description }) : null
-      ] })
-    ] }) });
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx(index.Tooltip, { text: option.tooltip, children: /* @__PURE__ */ jsxRuntime.jsxs(index$1.Stack, { alignItems: "normal", "data-testid": `option-stack-${option.value}`, direction: "column", gap: 0.5, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(index$1.Stack, { className: dropdown_css.dropdownInfoContainer, direction: "row", gap: 0.5, justifyContent: "space-between", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(index$2.Text, { as: "span", className: dropdown_css.dropdownInfoTextItem, placement: "left", variant: "body", children: option.label }),
-      option.optionalInfo ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: dropdown_css.dropdownInfo, children: option.optionalInfo }) : null
-    ] }),
-    option.description ? /* @__PURE__ */ jsxRuntime.jsx(index$2.Text, { as: "span", placement: "left", prominence: "weak", sentiment: "neutral", variant: "bodySmall", children: option.description }) : null
-  ] }) });
-};
-exports.DisplayOption = DisplayOption;

package/dist/components/SelectInput/components/SearchBarDropdown.cjs

@@ -1,117 +0,0 @@
-"use client";
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("@emotion/react/jsx-runtime");
-const fuzzySearch = require("@scaleway/fuzzy-search");
-const Icon = require("@ultraviolet/icons");
-const react = require("react");
-const index = require("../../TextInput/index.cjs");
-const SelectInputProvider = require("../SelectInputProvider.cjs");
-const dropdown_css = require("./dropdown.css.cjs");
-const getReferenceText = (option) => {
-  if (option.searchText) {
-    return fuzzySearch.normalizeString(option.searchText);
-  }
-  if (typeof option.label === "string") {
-    return fuzzySearch.normalizeString(option.label);
-  }
-  return "";
-};
-const searchRegex = (data, query) => data.filter((option) => {
-  const referenceText = getReferenceText(option);
-  const regex = new RegExp(query, "i");
-  return (query.length > 2 ? fuzzySearch.isFuzzyMatch(query, referenceText) : referenceText.match(regex)) || typeof option.description === "string" && option.description.match(regex) || option.value.match(regex);
-});
-const findClosestOption = (options, searchInput) => {
-  if (searchInput) {
-    if (!Array.isArray(options)) {
-      const possibleOptions = {
-        ...options
-      };
-      Object.keys(possibleOptions).map((group) => {
-        possibleOptions[group] = possibleOptions[group].filter((option) => !option.disabled);
-        return null;
-      });
-      if (Object.keys(possibleOptions).some((group) => possibleOptions[group].length > 0)) {
-        const firstFit = Object.keys(possibleOptions).map((group) => possibleOptions[group][0]).find((value) => !!value);
-        return firstFit;
-      }
-    } else {
-      const possibleOption = [...options].find((option) => !option.disabled);
-      if (possibleOption) {
-        return possibleOption;
-      }
-    }
-  }
-  return null;
-};
-const escapeRegExp = (string) => string.replace(/[.*+?^{}()|[\]\\]/g, String.raw`\$&`);
-const SearchBarDropdown = ({
-  placeholder,
-  displayedOptions,
-  setSearchBarActive
-}) => {
-  const searchInputRef = react.useRef(null);
-  const {
-    onChange,
-    onSearch,
-    setSearchInput,
-    searchInput,
-    options,
-    multiselect,
-    setSelectedData,
-    selectedData
-  } = SelectInputProvider.useSelectInput();
-  const handleChange = (search) => {
-    if (search.length > 0) {
-      if (!Array.isArray(options)) {
-        const filteredOptions = {
-          ...options
-        };
-        Object.keys(filteredOptions).map((group) => {
-          filteredOptions[group] = searchRegex(filteredOptions[group], escapeRegExp(search.toString()));
-          return null;
-        });
-        onSearch(filteredOptions);
-      } else {
-        const filteredOptions = searchRegex([...options], escapeRegExp(search.toString()));
-        onSearch(filteredOptions);
-      }
-    } else {
-      onSearch(options);
-    }
-    setSearchInput(search);
-  };
-  const handleKeyDown = (key, search) => {
-    if (key === "Enter") {
-      const closestOption = findClosestOption(displayedOptions, search);
-      if (closestOption) {
-        if (multiselect) {
-          setSelectedData({
-            clickedOption: closestOption,
-            group: !Array.isArray(options) ? Object.keys(options).find((group) => options[group].includes(closestOption)) : void 0,
-            type: "selectOption"
-          });
-          onChange?.(selectedData.selectedValues.includes(closestOption.value) ? selectedData.selectedValues : [...selectedData.selectedValues, closestOption.value]);
-        } else {
-          setSelectedData({
-            clickedOption: closestOption,
-            type: "selectOption"
-          });
-          onChange?.(selectedData.selectedValues[0] ?? "");
-        }
-      }
-    } else if (key === "Tab") {
-      searchInputRef.current?.blur();
-    }
-  };
-  react.useEffect(() => {
-    setTimeout(() => {
-      searchInputRef.current?.focus();
-    }, 50);
-  }, []);
-  return /* @__PURE__ */ jsxRuntime.jsx(index.TextInput, { "aria-label": "search-bar", className: dropdown_css.searchBar, "data-testid": "search-bar", onBlur: () => setSearchBarActive(false), onChange: (event) => handleChange(event.target.value), onFocus: () => setSearchBarActive(true), onKeyDown: (event) => handleKeyDown(event.key, searchInput), placeholder, prefix: /* @__PURE__ */ jsxRuntime.jsx(Icon.SearchIcon, { sentiment: "neutral", size: "small" }), ref: searchInputRef, size: "medium", value: searchInput });
-};
-exports.SearchBarDropdown = SearchBarDropdown;
-exports.getReferenceText = getReferenceText;
-exports.searchRegex = searchRegex;