@ultraviolet/ui 1.51.0 → 1.51.2

package/dist/components/SelectInputV2/Dropdown.js

@@ -0,0 +1,669 @@
+import { jsx, jsxs, Fragment } from "@emotion/react/jsx-runtime";
+import styled from "@emotion/styled";
+import { useState, useRef, useEffect, useMemo } from "react";
+import { Checkbox } from "../Checkbox/index.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 { DisplayOption } from "./DropdownOption.js";
+import { SearchBarDropdown } from "./SearchBarDropdown.js";
+import { useSelectInput } from "./SelectInputProvider.js";
+const NON_SEARCHABLE_KEYS = [
+  "Tab",
+  " ",
+  "Enter",
+  "CapsLock",
+  "Shift",
+  "ArrowDown",
+  "ArrowUp",
+  "ArrowLeft",
+  "ArrowRight",
+  "Escape"
+];
+const StyledPopup = styled(Popup)`
+  width: 100%;
+  background-color: ${({ theme }) => theme.colors.neutral.background};
+  color: ${({ theme }) => theme.colors.neutral.text};
+  box-shadow: ${({ theme }) => theme.shadows.dropdown};
+  padding: ${({ theme }) => theme.space[0]};
+`;
+const DropdownContainer = styled(Stack)`
+  max-height: 256px;
+  overflow-y: scroll;
+  padding: ${({ theme }) => theme.space[0]};
+  padding-bottom: ${({ theme }) => theme.space[0.5]};
+  padding-top: ${({ theme }) => theme.space[0.5]};
+
+  &[data-grouped='true'] {
+    padding-top: ${({ theme }) => theme.space[0]};
+  }
+`;
+const DropdownGroup = styled.button`
+  display: flex;
+  width: 100%;
+  justify-content: left;
+  align-items: center;
+  border: none;
+  background-color: ${({ theme }) => theme.colors.neutral.backgroundWeak};
+  position: sticky;
+  top: 0px;
+  padding-right: ${({ theme }) => theme.space[2]};
+  padding-left: ${({ theme }) => theme.space[2]};
+  height: ${({ theme }) => theme.space[4]};
+  text-align: left;
+  margin-bottom: ${({ theme }) => theme.space["0.25"]};
+
+  &:focus {
+    background-color: ${({ theme }) => theme.colors.neutral.backgroundWeak};
+    outline: none;
+  }
+
+  &[data-selectgroup='true'] {
+    padding-left: ${({ theme }) => theme.space[2]};
+    border-left: ${({ theme }) => theme.space[0.5]} solid ${({ theme }) => theme.colors.neutral.backgroundWeak};
+  }
+
+  &[data-selectgroup='true']:focus {
+    background-color: ${({ theme }) => theme.colors.neutral.backgroundHover};
+  }
+}
+`;
+const DropdownGroupWrapper = styled.div`
+  position: sticky;
+  top: 0px;
+`;
+const DropdownItem = styled.button`
+  text-align:left;
+  border: none;
+  background-color: ${({ theme }) => theme.colors.neutral.background};
+
+  padding: ${({ theme }) => theme.space["1.5"]} ${({ theme }) => theme.space["2"]} ${({ theme }) => theme.space["1.5"]} ${({ theme }) => theme.space["2"]};
+  margin-left: ${({ theme }) => theme.space["0.5"]};
+  margin-right: ${({ theme }) => theme.space["0.5"]};
+
+  color:  ${({ theme }) => theme.colors.neutral.text};
+  border-radius: ${({ theme }) => theme.radii.default};
+
+  &:hover, :focus {
+    background-color: ${({ theme }) => theme.colors.primary.background};
+    color: ${({ theme }) => theme.colors.primary.text};
+    cursor: pointer;
+    outline: none;
+  }
+
+  &[data-selected='true'] {
+    background-color: ${({ theme }) => theme.colors.primary.background};
+  }
+
+  &[disabled] {
+    background-color: ${({ theme }) => theme.colors.neutral.backgroundDisabled};
+    color: ${({ theme }) => theme.colors.neutral.textDisabled};
+
+  }
+
+  &[disabled]:hover, [disabled]:focus {
+    background-color: ${({ theme }) => theme.colors.neutral.backgroundStrongDisabled};
+    color: ${({ theme }) => theme.colors.neutral.textStrongDisabled};
+    cursor: not-allowed;
+    outline: none;
+  }
+
+  }
+`;
+const PopupFooter = styled.div`
+  width: 100%;
+  padding: ${({ theme }) => theme.space[1.5]} ${({ theme }) => theme.space[2]}
+    ${({ theme }) => theme.space[1.5]} ${({ theme }) => theme.space[2]};
+  box-shadow: ${({ theme }) => theme.shadows.dropdown};
+`;
+const StyledCheckbox = styled(Checkbox)`
+  width: 100%;
+  position: static;
+  text-align: left;
+  align-items: center;
+  pointer-events: none;
+`;
+const EmptyState = styled(Stack)`
+  padding: ${({ theme }) => theme.space[2]};
+`;
+const LoadMore = styled(Stack)`
+  padding: ${({ theme }) => theme.space[0.5]};
+`;
+const moveFocusDown = () => {
+  const options = document.querySelectorAll(
+    '#items > button[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 > button[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 = (key) => {
+  if (key === "ArrowDown") {
+    moveFocusDown();
+  }
+  if (key === "ArrowUp") {
+    moveFocusUp();
+  }
+};
+const handleClickOutside = (event, ref, setIsDropdownVisibile, refSelect, onSearch, options) => {
+  if (ref.current && !ref.current.contains(event.target) && !refSelect.current?.contains(event.target)) {
+    setIsDropdownVisibile(false);
+    onSearch(options);
+  }
+};
+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].filter(
+        (option) => option.searchText ? option.searchText.toLocaleLowerCase().startsWith(currentSearch) : option.value.toLocaleLowerCase().startsWith(currentSearch)
+      )[0];
+      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(EmptyState, { gap: 2, alignItems: "center", children: emptyState ?? /* @__PURE__ */ jsx(Text, { variant: "bodyStrong", as: "p", children: "No options" }) });
+  }
+  const handleClick = (clickedOption, group) => {
+    setSelectedData({ type: "selectOption", clickedOption, group });
+    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({ type: "selectGroup", selectedGroup: group });
+      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__ */ jsx(
+    DropdownContainer,
+    {
+      role: "listbox",
+      id: "select-dropdown",
+      onKeyDown: (event) => {
+        event.preventDefault();
+        handleKeyDownSelect(event.key);
+      },
+      "data-grouped": true,
+      children: isLoading ? /* @__PURE__ */ jsx(Skeleton, { variant: "block" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        selectAll && multiselect ? /* @__PURE__ */ jsx(Stack, { id: "items", children: /* @__PURE__ */ jsx(
+          DropdownItem,
+          {
+            disabled: false,
+            "data-selected": selectedData.allSelected,
+            "aria-label": "select-all",
+            "data-testid": "select-all",
+            id: "select-all",
+            role: "option",
+            onKeyDown: (event) => [" ", "Enter"].includes(event.key) ? selectAllOptions() : null,
+            onClick: selectAllOptions,
+            children: /* @__PURE__ */ jsx(
+              StyledCheckbox,
+              {
+                checked: selectedData.allSelected,
+                disabled: false,
+                value: "select-all",
+                "data-testid": "select-all-checkbox",
+                tabIndex: -1,
+                children: /* @__PURE__ */ jsxs(Stack, { direction: "column", children: [
+                  /* @__PURE__ */ jsx(Text, { as: "span", variant: "body", placement: "left", children: selectAll.label }),
+                  /* @__PURE__ */ jsx(
+                    Text,
+                    {
+                      as: "span",
+                      variant: "bodySmall",
+                      sentiment: "neutral",
+                      placement: "left",
+                      prominence: "weak",
+                      children: selectAll.description
+                    }
+                  )
+                ] })
+              }
+            )
+          }
+        ) }) : null,
+        Object.keys(displayedOptions).map((group, index) => /* @__PURE__ */ jsxs(Stack, { gap: 0.25, children: [
+          displayedOptions[group].length > 0 ? /* @__PURE__ */ jsx(DropdownGroupWrapper, { id: selectAllGroup ? "items" : void 0, children: /* @__PURE__ */ jsx(
+            DropdownGroup,
+            {
+              tabIndex: selectAllGroup ? 0 : -1,
+              onKeyDown: (event) => {
+                if ([" ", "Enter"].includes(event.key)) {
+                  event.preventDefault();
+                  handleSelectGroup(group);
+                }
+              },
+              "data-selectgroup": selectAllGroup,
+              role: "group",
+              "data-testid": `group-${index}`,
+              onClick: () => selectAllGroup ? handleSelectGroup(group) : null,
+              children: selectAllGroup ? /* @__PURE__ */ jsx(
+                StyledCheckbox,
+                {
+                  checked: selectedData.selectedGroups.includes(group),
+                  disabled: false,
+                  value: group,
+                  "data-testid": "select-group",
+                  tabIndex: -1,
+                  children: /* @__PURE__ */ jsx(Text, { variant: "caption", as: "span", placement: "left", children: group.toUpperCase() })
+                }
+              ) : /* @__PURE__ */ jsx(Text, { variant: "caption", as: "span", placement: "left", children: group.toUpperCase() })
+            },
+            group
+          ) }) : null,
+          /* @__PURE__ */ jsxs(Stack, { id: "items", gap: "0.25", children: [
+            displayedOptions[group].map((option, indexOption) => /* @__PURE__ */ jsx(
+              DropdownItem,
+              {
+                disabled: option.disabled,
+                "data-selected": selectedData.selectedValues.includes(option.value) && !option.disabled,
+                "aria-label": option.value,
+                "data-testid": `option-${option.value}`,
+                id: `option-${indexOption}`,
+                role: "option",
+                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,
+                children: multiselect ? /* @__PURE__ */ jsx(
+                  StyledCheckbox,
+                  {
+                    checked: selectedData.selectedValues.includes(option.value) && !option.disabled,
+                    disabled: option.disabled,
+                    value: option.value,
+                    tabIndex: -1,
+                    children: /* @__PURE__ */ jsx(
+                      DisplayOption,
+                      {
+                        option,
+                        descriptionDirection,
+                        optionalInfoPlacement
+                      }
+                    )
+                  }
+                ) : /* @__PURE__ */ jsx(
+                  DisplayOption,
+                  {
+                    option,
+                    descriptionDirection,
+                    optionalInfoPlacement
+                  }
+                )
+              },
+              option.value
+            )),
+            loadMore ? /* @__PURE__ */ jsx(LoadMore, { children: loadMore }) : null
+          ] })
+        ] }, group))
+      ] })
+    }
+  ) : /* @__PURE__ */ jsxs(
+    DropdownContainer,
+    {
+      role: "listbox",
+      id: "select-dropdown",
+      onKeyDown: (event) => {
+        event.preventDefault();
+        handleKeyDownSelect(event.key);
+      },
+      gap: 0.25,
+      "data-grouped": false,
+      children: [
+        selectAll && multiselect ? /* @__PURE__ */ jsx(Stack, { id: "items", gap: 0.25, children: /* @__PURE__ */ jsx(
+          DropdownItem,
+          {
+            disabled: false,
+            "data-selected": selectedData.allSelected,
+            "aria-label": "select-all",
+            "data-testid": "select-all",
+            role: "option",
+            onKeyDown: (event) => [" ", "Enter"].includes(event.key) ? selectAllOptions() : null,
+            onClick: selectAllOptions,
+            children: /* @__PURE__ */ jsx(
+              StyledCheckbox,
+              {
+                checked: selectedData.allSelected,
+                disabled: false,
+                value: "select-all",
+                "data-testid": "select-all-checkbox",
+                tabIndex: -1,
+                children: /* @__PURE__ */ jsxs(Stack, { direction: "column", children: [
+                  /* @__PURE__ */ jsx(Text, { as: "span", variant: "body", placement: "left", children: selectAll.label }),
+                  /* @__PURE__ */ jsx(
+                    Text,
+                    {
+                      as: "span",
+                      variant: "bodySmall",
+                      sentiment: "neutral",
+                      placement: "left",
+                      prominence: "weak",
+                      children: selectAll.description
+                    }
+                  )
+                ] })
+              }
+            )
+          }
+        ) }) : null,
+        /* @__PURE__ */ jsxs(Stack, { id: "items", gap: 0.25, children: [
+          isLoading ? /* @__PURE__ */ jsx(Skeleton, { variant: "block" }) : displayedOptions.map((option, index) => /* @__PURE__ */ jsx(
+            DropdownItem,
+            {
+              disabled: option.disabled,
+              "data-selected": selectedData.selectedValues.includes(option.value) && !option.disabled,
+              onClick: () => {
+                if (!option.disabled) {
+                  handleClick(option);
+                }
+              },
+              "aria-label": option.value,
+              "data-testid": `option-${option.value}`,
+              id: `option-${index}`,
+              role: "option",
+              ref: option.value === defaultSearchValue || option.searchText === defaultSearchValue ? focusedItemRef : null,
+              onKeyDown: (event) => [" ", "Enter"].includes(event.key) ? handleClick(option) : null,
+              children: multiselect ? /* @__PURE__ */ jsx(
+                StyledCheckbox,
+                {
+                  checked: selectedData.selectedValues.includes(option.value) && !option.disabled,
+                  disabled: option.disabled,
+                  value: option.value,
+                  tabIndex: -1,
+                  children: /* @__PURE__ */ jsx(
+                    DisplayOption,
+                    {
+                      option,
+                      descriptionDirection,
+                      optionalInfoPlacement
+                    }
+                  )
+                }
+              ) : /* @__PURE__ */ jsx(
+                DisplayOption,
+                {
+                  option,
+                  descriptionDirection,
+                  optionalInfoPlacement
+                }
+              )
+            },
+            option.value
+          )),
+          loadMore ? /* @__PURE__ */ jsx(LoadMore, { children: loadMore }) : null
+        ] })
+      ]
+    }
+  );
+};
+const Dropdown = ({
+  children,
+  emptyState,
+  descriptionDirection,
+  searchable,
+  placeholder,
+  footer,
+  refSelect,
+  loadMore,
+  optionalInfoPlacement,
+  isLoading
+}) => {
+  const {
+    setIsDropdownVisible,
+    isDropdownVisible,
+    onSearch,
+    searchInput,
+    options,
+    displayedOptions
+  } = useSelectInput();
+  const [searchBarActive, setSearchBarActive] = useState(false);
+  const [defaultSearchValue, setDefaultSearch] = useState(null);
+  const maxWidth = refSelect.current?.offsetWidth;
+  const ref = useRef(null);
+  const [search, setSearch] = useState("");
+  useEffect(() => {
+    if (!searchInput) {
+      onSearch(options);
+    }
+  }, [onSearch, options, searchInput]);
+  useEffect(() => {
+    if (!isDropdownVisible) {
+      setDefaultSearch(null);
+      setSearch("");
+    }
+    document.addEventListener(
+      "mousedown",
+      (event) => handleClickOutside(
+        event,
+        ref,
+        setIsDropdownVisible,
+        refSelect,
+        onSearch,
+        options
+      )
+    );
+    if (!searchable) {
+      document.addEventListener(
+        "keydown",
+        (event) => handleKeyDown(
+          event,
+          ref,
+          options,
+          searchBarActive,
+          setSearch,
+          setDefaultSearch,
+          search
+        )
+      );
+    }
+    return () => {
+      document.removeEventListener(
+        "mousedown",
+        (event) => handleClickOutside(
+          event,
+          ref,
+          setIsDropdownVisible,
+          refSelect,
+          onSearch,
+          options
+        )
+      );
+      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 (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]);
+  return /* @__PURE__ */ jsx(
+    StyledPopup,
+    {
+      visible: isDropdownVisible,
+      text: /* @__PURE__ */ jsxs(Stack, { children: [
+        searchable && !isLoading ? /* @__PURE__ */ jsx(
+          SearchBarDropdown,
+          {
+            placeholder,
+            displayedOptions,
+            setSearchBarActive
+          }
+        ) : null,
+        /* @__PURE__ */ jsx(
+          CreateDropdown,
+          {
+            isEmpty,
+            emptyState,
+            descriptionDirection,
+            loadMore,
+            optionalInfoPlacement,
+            defaultSearchValue,
+            isLoading
+          }
+        ),
+        footer ? /* @__PURE__ */ jsx(PopupFooter, { children: footer }) : null
+      ] }),
+      placement: "bottom",
+      containerFullWidth: true,
+      disableAnimation: true,
+      maxWidth,
+      hasArrow: false,
+      ref,
+      tabIndex: 0,
+      role: "dialog",
+      debounceDelay: 0,
+      children
+    }
+  );
+};
+export {
+  Dropdown
+};

package/dist/components/SelectInputV2/DropdownOption.d.ts

@@ -0,0 +1,8 @@
+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 {};