@ultraviolet/ui 3.0.0-beta.8 → 3.0.0

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

@@ -0,0 +1,682 @@
+"use client";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useTheme } from "@ultraviolet/themes";
+import { useState, useRef, use, useLayoutEffect, useCallback, useEffect, 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,
+    event
+  }) => {
+    event.stopPropagation();
+    setSelectedData({ clickedOption, group, type: "selectOption" });
+    if (multiselect) {
+      if (selectedData.selectedValues.includes(clickedOption.value)) {
+        onChange?.(
+          selectedData.selectedValues.filter(
+            (value) => value !== 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: (event) => {
+                  if (!option.disabled) {
+                    handleClick({
+                      clickedOption: option,
+                      event,
+                      group
+                    });
+                  }
+                },
+                onKeyDown: (event) => {
+                  const shouldClick = [" ", "Enter"].includes(event.key);
+                  if (shouldClick) {
+                    handleClick({
+                      clickedOption: option,
+                      event,
+                      group
+                    });
+                  }
+                },
+                ref: option.value === defaultSearchValue || option.searchText === defaultSearchValue ? focusedItemRef : null,
+                role: "option",
+                tabIndex: !option.disabled ? 0 : -1,
+                children: multiselect ? /* @__PURE__ */ jsx(
+                  Checkbox,
+                  {
+                    checked: selectedData.selectedValues.includes(option.value) && !option.disabled,
+                    className: dropdownCheckbox,
+                    disabled: option.disabled,
+                    onChange: (event) => {
+                      if (!option.disabled) {
+                        handleClick({
+                          clickedOption: option,
+                          event,
+                          group
+                        });
+                      }
+                    },
+                    tabIndex: -1,
+                    value: option.value,
+                    children: /* @__PURE__ */ jsx(
+                      DisplayOption,
+                      {
+                        descriptionDirection,
+                        option,
+                        optionalInfoPlacement
+                      }
+                    )
+                  }
+                ) : /* @__PURE__ */ jsx(
+                  DisplayOption,
+                  {
+                    descriptionDirection,
+                    option,
+                    optionalInfoPlacement
+                  }
+                )
+              },
+              option.value
+            )) })
+          ] }, group))
+        ] }),
+        loadMore ? /* @__PURE__ */ jsx(Stack, { className: dropdownLoadMore, children: loadMore }) : null
+      ]
+    }
+  ) : /* @__PURE__ */ jsxs(
+    Stack,
+    {
+      className: `${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: (event) => {
+                if (!option.disabled) {
+                  handleClick({
+                    clickedOption: option,
+                    event
+                  });
+                }
+              },
+              onKeyDown: (event) => {
+                const shouldClick = [" ", "Enter"].includes(event.key);
+                if (shouldClick) {
+                  handleClick({
+                    clickedOption: option,
+                    event
+                  });
+                }
+              },
+              ref: option.value === defaultSearchValue || option.searchText === defaultSearchValue ? focusedItemRef : null,
+              role: "option",
+              tabIndex: !option.disabled ? 0 : -1,
+              children: multiselect ? /* @__PURE__ */ jsx(
+                Checkbox,
+                {
+                  checked: selectedData.selectedValues.includes(option.value) && !option.disabled,
+                  className: dropdownCheckbox,
+                  disabled: option.disabled,
+                  onChange: (event) => {
+                    if (!option.disabled) {
+                      handleClick({
+                        clickedOption: option,
+                        event
+                      });
+                    }
+                  },
+                  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 = use(ModalContext);
+  useLayoutEffect(() => {
+    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 instanceof HTMLElement) {
+            parentElement.scrollBy({
+              behavior: "smooth",
+              top: overflow
+            });
+          } else {
+            modalElement.scrollBy({
+              behavior: "smooth",
+              top: overflow
+            });
+          }
+        } else {
+          window.scrollBy({ behavior: "smooth", top: overflow });
+        }
+      }
+    }
+  }, [isDropdownVisible, refSelect, size, modalContext, theme]);
+  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("");
+    }
+    const eventKeydown = (event) => handleKeyDown(
+      event,
+      ref,
+      options,
+      searchBarActive,
+      setSearch,
+      setDefaultSearch,
+      search
+    );
+    if (!searchable) {
+      document.addEventListener("keydown", eventKeydown);
+    }
+    return () => {
+      if (!searchable) {
+        document.removeEventListener("keydown", eventKeydown);
+      }
+    };
+  }, [
+    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/{DropdownOption.d.ts → components/DropdownOption.d.ts}

@@ -1,8 +1,8 @@
-import type { OptionType } from './types';
+import type { OptionType } from '../types';
 type DisplayOptionProps = {
     option: OptionType;
     descriptionDirection: 'row' | 'column';
     optionalInfoPlacement: 'left' | 'right';
 };
-export declare const DisplayOption: ({ option, optionalInfoPlacement, descriptionDirection, }: DisplayOptionProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const DisplayOption: ({ option, optionalInfoPlacement, descriptionDirection, }: DisplayOptionProps) => import("react/jsx-runtime").JSX.Element;
 export {};