@ultraviolet/ui 3.0.0-beta.17 → 3.0.0-beta.19

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

@@ -0,0 +1,342 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@emotion/react/jsx-runtime");
+const react = require("react");
+require("../../../theme/index.cjs");
+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 ThemeProvider = require("../../../theme/ThemeProvider.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 = ThemeProvider.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/{Dropdown.d.ts → components/Dropdown.d.ts}

@@ -1,5 +1,5 @@
 import type { ComponentProps, ReactNode, RefObject } from 'react';
-import { Popup } from '../Popup';
+import { Popup } from '../../Popup';
 export type DropdownProps = {
     id?: string;
     children: ReactNode;