@ultraviolet/ui 3.0.0-beta.2 → 3.0.0-beta.21

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

@@ -0,0 +1,341 @@
+"use client";
+import { jsx, jsxs, Fragment } from "@emotion/react/jsx-runtime";
+import { useTheme } from "@ultraviolet/themes";
+import { useState, useRef, useContext, useEffect, useCallback, useMemo } from "react";
+import { Checkbox } from "../../Checkbox/index.js";
+import { ModalContext } from "../../Modal/ModalProvider.js";
+import { Popup } from "../../Popup/index.js";
+import { Skeleton } from "../../Skeleton/index.js";
+import { Stack } from "../../Stack/index.js";
+import { Text } from "../../Text/index.js";
+import { useSelectInput } from "../SelectInputProvider.js";
+import { INPUT_SIZE_HEIGHT } from "../types.js";
+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 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
+  } = useSelectInput();
+  const focusedItemRef = useRef(null);
+  useEffect(() => {
+    if (defaultSearchValue && focusedItemRef?.current) {
+      focusedItemRef.current.focus();
+    }
+  }, [defaultSearchValue]);
+  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"
+    });
+    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__ */ 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);
+          }
+        }, 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
+    ] })
+  ] });
+};
+const Dropdown = ({
+  children,
+  emptyState,
+  descriptionDirection,
+  searchable,
+  placeholder,
+  footer: footer$1,
+  refSelect,
+  loadMore,
+  optionalInfoPlacement,
+  isLoading,
+  size,
+  dropdownAlign,
+  portalTarget,
+  id
+}) => {
+  const {
+    setIsDropdownVisible,
+    isDropdownVisible,
+    onSearch,
+    searchInput,
+    options,
+    displayedOptions,
+    numberOfOptions
+  } = useSelectInput();
+  const theme = useTheme();
+  const [searchBarActive, setSearchBarActive] = useState(false);
+  const [defaultSearchValue, setDefaultSearch] = useState(null);
+  const ref = useRef(null);
+  const [search, setSearch] = useState("");
+  const [maxWidth, setWidth] = useState(refSelect.current?.offsetWidth ?? "100%");
+  const modalContext = useContext(ModalContext);
+  useEffect(() => {
+    if (refSelect.current && isDropdownVisible) {
+      const position = refSelect.current.getBoundingClientRect().bottom + DROPDOWN_MAX_HEIGHT + Number(theme.sizing[INPUT_SIZE_HEIGHT[size]].replace("rem", "")) * 16 + Number.parseInt(theme.space["5"], 10);
+      const overflow = position - window.innerHeight + 32;
+      if (overflow > 0 && modalContext) {
+        const currentModal = modalContext.openedModals[0];
+        const modalElement = currentModal?.ref.current;
+        if (modalElement) {
+          const parentElement = modalElement.parentNode;
+          if (parentElement) {
+            parentElement.scrollBy({
+              behavior: "smooth",
+              top: overflow
+            });
+          }
+        } else {
+          window.scrollBy({
+            behavior: "smooth",
+            top: overflow
+          });
+        }
+      }
+    }
+  }, [isDropdownVisible, refSelect, size, ref.current]);
+  const resizeDropdown = useCallback(() => {
+    if (refSelect.current && refSelect.current.getBoundingClientRect().width > 0) {
+      setWidth(refSelect.current.getBoundingClientRect().width);
+    }
+  }, [refSelect]);
+  useEffect(() => {
+    resizeDropdown();
+    window.addEventListener("resize", resizeDropdown);
+    return () => window.removeEventListener("resize", resizeDropdown);
+  }, [resizeDropdown]);
+  useEffect(() => {
+    if (!searchInput) {
+      onSearch(options);
+    }
+  }, [onSearch, options, searchInput]);
+  useEffect(() => {
+    if (!isDropdownVisible) {
+      setDefaultSearch(null);
+      setSearch("");
+    }
+    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 = useMemo(() => {
+    if (numberOfOptions === 0) {
+      return true;
+    }
+    if (Array.isArray(displayedOptions)) {
+      return displayedOptions.length === 0;
+    }
+    const groups = Object.keys(displayedOptions);
+    for (const group of groups) {
+      if (displayedOptions[group].length > 0) {
+        return false;
+      }
+    }
+    return true;
+  }, [displayedOptions, numberOfOptions]);
+  const computedFooter = useMemo(() => {
+    if (footer$1 && !isEmpty) {
+      if (typeof footer$1 === "function") {
+        return /* @__PURE__ */ jsx("div", { className: footer, children: footer$1(() => setIsDropdownVisible(false)) });
+      }
+      return /* @__PURE__ */ jsx("div", { className: footer, children: footer$1 });
+    }
+    return null;
+  }, [isEmpty, footer$1, setIsDropdownVisible]);
+  return /* @__PURE__ */ jsx(Popup, { align: dropdownAlign ?? "start", className: dropdown, containerFullWidth: true, debounceDelay: 0, disableAnimation: true, hasArrow: false, hideOnClickOutside: true, id, maxWidth: maxWidth ?? refSelect.current?.offsetWidth, onClose: () => setIsDropdownVisible(false), placement: "bottom", portalTarget, ref, role: "dialog", 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
+};

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

@@ -0,0 +1,47 @@
+"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/{DropdownOption.d.ts → components/DropdownOption.d.ts}

@@ -1,4 +1,4 @@
-import type { OptionType } from './types';
+import type { OptionType } from '../types';
 type DisplayOptionProps = {
     option: OptionType;
     descriptionDirection: 'row' | 'column';

package/dist/components/SelectInput/components/DropdownOption.js

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

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

@@ -0,0 +1,117 @@
+"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;

package/dist/components/SelectInput/{SearchBarDropdown.d.ts → components/SearchBarDropdown.d.ts}

@@ -1,5 +1,5 @@
 import type { Dispatch, SetStateAction } from 'react';
-import type { DataType, OptionType } from './types';
+import type { DataType, OptionType } from '../types';
 type SearchBarProps = {
     placeholder: string;
     displayedOptions: DataType;