@ultraviolet/ui 1.47.0 → 1.48.0

package/dist/src/components/SelectInputV2/Dropdown.js

@@ -0,0 +1,595 @@
+import _styled from '@emotion/styled/base';
+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';
+import { jsx, jsxs, Fragment } from '@emotion/react/jsx-runtime';
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+const NON_SEARCHABLE_KEYS = ['Tab', ' ', 'Enter', 'CapsLock', 'Shift', 'ArrowDown', 'ArrowUp', 'ArrowLeft', 'ArrowRight', 'Escape'];
+const StyledPopup = /*#__PURE__*/_styled(Popup, {
+  target: "eeucz6c8"
+})("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 = /*#__PURE__*/_styled(Stack, {
+  target: "eeucz6c7"
+})("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 = /*#__PURE__*/_styled("button", {
+  target: "eeucz6c6"
+})("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 = /*#__PURE__*/_styled("div", {
+  target: "eeucz6c5"
+})(process.env.NODE_ENV === "production" ? {
+  name: "vkf8h3",
+  styles: "position:sticky;top:0px"
+} : {
+  name: "vkf8h3",
+  styles: "position:sticky;top:0px",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+const DropdownItem = /*#__PURE__*/_styled("button", {
+  target: "eeucz6c4"
+})("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 = /*#__PURE__*/_styled("div", {
+  target: "eeucz6c3"
+})("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 = /*#__PURE__*/_styled(Checkbox, {
+  target: "eeucz6c2"
+})(process.env.NODE_ENV === "production" ? {
+  name: "10y07ze",
+  styles: "width:100%;position:static;text-align:left;align-items:center"
+} : {
+  name: "10y07ze",
+  styles: "width:100%;position:static;text-align:left;align-items:center",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+const EmptyState = /*#__PURE__*/_styled(Stack, {
+  target: "eeucz6c1"
+})("padding:", ({
+  theme
+}) => theme.space[2], ";");
+const LoadMore = /*#__PURE__*/_styled(Stack, {
+  target: "eeucz6c0"
+})("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); // hide dropdown when clicking outside of the dropdown
+    onSearch(options); // reset displayed options to default when dropdown is hidden
+  }
+};
+const handleKeyDown = (event, ref, options, searchBarActive, setSearch, setDefaultSearch, search) => {
+  // Deals with default 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,
+  onChange,
+  loadMore,
+  optionalInfoPlacement,
+  defaultSearchValue,
+  isLoading
+}) => {
+  const {
+    setIsDropdownVisible,
+    options,
+    multiselect,
+    selectAll,
+    selectAllGroup,
+    displayedOptions,
+    setSelectedData,
+    selectedData
+  } = useSelectInput();
+  const focusedItemRef = useRef(null);
+  useEffect(() => {
+    if (defaultSearchValue && focusedItemRef?.current) {
+      focusedItemRef.current.focus();
+    }
+  }, [defaultSearchValue]);
+  if (isEmpty) {
+    return jsx(EmptyState, {
+      gap: 2,
+      alignItems: "center",
+      children: emptyState ?? 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)) {
+        onChange?.(selectedData.selectedValues.filter(val => val !== clickedOption).map(val => val?.value));
+      } else {
+        onChange?.([...selectedData.selectedValues, clickedOption].map(val => val?.value));
+      }
+    } else {
+      onChange?.([clickedOption.value]);
+    }
+    setIsDropdownVisible(multiselect); // hide the dropdown on click when single select only
+  };
+  const selectAllOptions = () => {
+    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 => {
+    setSelectedData({
+      type: 'selectGroup',
+      selectedGroup: group
+    });
+    if (!Array.isArray(options)) {
+      if (selectedData.selectedGroups.includes(group)) {
+        const newSelectedValues = [...selectedData.selectedValues].filter(selectedValue => !options[group].includes(selectedValue));
+        onChange?.(newSelectedValues.map(value => value.value));
+      } else {
+        const newSelectedValues = [...selectedData.selectedValues];
+        options[group].map(option => newSelectedValues.includes(option) || option.disabled ? null : newSelectedValues.push(option));
+        onChange?.(newSelectedValues.map(value => value.value));
+      }
+    }
+  };
+  return !Array.isArray(displayedOptions) ? jsx(DropdownContainer, {
+    role: "listbox",
+    id: "select-dropdown",
+    onKeyDown: event => {
+      event.preventDefault();
+      handleKeyDownSelect(event.key);
+    },
+    "data-grouped": true,
+    children: isLoading ? jsx(Skeleton, {
+      variant: "block"
+    }) : jsxs(Fragment, {
+      children: [selectAll && multiselect ? jsx(Stack, {
+        id: "items",
+        children: 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,
+          children: jsx(StyledCheckbox, {
+            checked: selectedData.allSelected,
+            disabled: false,
+            value: "select-all",
+            "data-testid": "select-all-checkbox",
+            onChange: selectAllOptions,
+            tabIndex: -1,
+            children: jsxs(Stack, {
+              direction: "column",
+              children: [jsx(Text, {
+                as: "span",
+                variant: "body",
+                placement: "left",
+                children: selectAll.label
+              }), jsx(Text, {
+                as: "span",
+                variant: "bodySmall",
+                sentiment: "neutral",
+                placement: "left",
+                prominence: "weak",
+                children: selectAll.description
+              })]
+            })
+          })
+        })
+      }) : null, Object.keys(displayedOptions).map(group => jsxs(Stack, {
+        gap: 0.25,
+        children: [displayedOptions[group].length > 0 ? jsx(DropdownGroupWrapper, {
+          id: selectAllGroup ? 'items' : undefined,
+          children: jsx(DropdownGroup, {
+            tabIndex: selectAllGroup ? 0 : -1,
+            onKeyDown: event => {
+              if ([' ', 'Enter'].includes(event.key)) {
+                event.preventDefault();
+                handleSelectGroup(group);
+              }
+            },
+            "data-selectgroup": selectAllGroup,
+            role: "group",
+            children: selectAllGroup ? jsx(StyledCheckbox, {
+              checked: selectedData.selectedGroups.includes(group),
+              disabled: false,
+              value: group,
+              onChange: () => handleSelectGroup(group),
+              "data-testid": "select-group",
+              tabIndex: -1,
+              children: jsx(Text, {
+                variant: "caption",
+                as: "span",
+                placement: "left",
+                children: group.toUpperCase()
+              })
+            }) : jsx(Text, {
+              variant: "caption",
+              as: "span",
+              placement: "left",
+              children: group.toUpperCase()
+            })
+          }, group)
+        }) : null, jsxs(Stack, {
+          id: "items",
+          gap: "0.25",
+          children: [displayedOptions[group].map((option, index) => jsx(DropdownItem, {
+            disabled: option.disabled,
+            "data-selected": selectedData.selectedValues.includes(option) && !option.disabled,
+            "aria-label": option.value,
+            "data-testid": `option-${index}`,
+            id: `option-${index}`,
+            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 ? jsx(StyledCheckbox, {
+              checked: selectedData.selectedValues.includes(option) && !option.disabled,
+              disabled: option.disabled,
+              value: option.value,
+              tabIndex: -1,
+              children: jsx(DisplayOption, {
+                option: option,
+                multiselect: multiselect,
+                descriptionDirection: descriptionDirection,
+                optionalInfoPlacement: optionalInfoPlacement
+              })
+            }) : jsx(DisplayOption, {
+              option: option,
+              multiselect: multiselect,
+              descriptionDirection: descriptionDirection,
+              optionalInfoPlacement: optionalInfoPlacement
+            })
+          }, option.value)), loadMore ? jsx(LoadMore, {
+            children: loadMore
+          }) : null]
+        })]
+      }, group))]
+    })
+  }) : jsxs(DropdownContainer, {
+    role: "listbox",
+    id: "select-dropdown",
+    onKeyDown: event => {
+      event.preventDefault();
+      handleKeyDownSelect(event.key);
+    },
+    gap: 0.25,
+    "data-grouped": false,
+    children: [selectAll && multiselect ? jsx(Stack, {
+      id: "items",
+      gap: 0.25,
+      children: 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,
+        children: jsx(StyledCheckbox, {
+          checked: selectedData.allSelected,
+          disabled: false,
+          value: "select-all",
+          "data-testid": "select-all-checkbox",
+          onChange: selectAllOptions,
+          tabIndex: -1,
+          children: jsxs(Stack, {
+            direction: "column",
+            children: [jsx(Text, {
+              as: "span",
+              variant: "body",
+              placement: "left",
+              children: selectAll.label
+            }), jsx(Text, {
+              as: "span",
+              variant: "bodySmall",
+              sentiment: "neutral",
+              placement: "left",
+              prominence: "weak",
+              children: selectAll.description
+            })]
+          })
+        })
+      })
+    }) : null, jsxs(Stack, {
+      id: "items",
+      gap: 0.25,
+      children: [isLoading ? jsx(Skeleton, {
+        variant: "block"
+      }) : displayedOptions.map((option, index) => jsx(DropdownItem, {
+        disabled: option.disabled,
+        "data-selected": selectedData.selectedValues.includes(option) && !option.disabled,
+        onClick: () => {
+          if (!option.disabled) {
+            handleClick(option);
+          }
+        },
+        "aria-label": option.value,
+        "data-testid": `option-${index}`,
+        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 ? jsx(StyledCheckbox, {
+          checked: selectedData.selectedValues.includes(option) && !option.disabled,
+          disabled: option.disabled,
+          value: option.value,
+          tabIndex: -1,
+          children: jsx(DisplayOption, {
+            option: option,
+            multiselect: multiselect,
+            descriptionDirection: descriptionDirection,
+            optionalInfoPlacement: optionalInfoPlacement
+          })
+        }) : jsx(DisplayOption, {
+          option: option,
+          multiselect: multiselect,
+          descriptionDirection: descriptionDirection,
+          optionalInfoPlacement: optionalInfoPlacement
+        })
+      }, option.value)), loadMore ? jsx(LoadMore, {
+        children: loadMore
+      }) : null]
+    })]
+  });
+};
+const Dropdown = ({
+  children,
+  emptyState,
+  descriptionDirection,
+  searchable,
+  placeholder,
+  footer,
+  onChange,
+  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 jsx(StyledPopup, {
+    visible: isDropdownVisible,
+    text: jsxs(Stack, {
+      children: [searchable && !isLoading ? jsx(SearchBarDropdown, {
+        placeholder: placeholder,
+        displayedOptions: displayedOptions,
+        setSearchBarActive: setSearchBarActive,
+        onChange: onChange
+      }) : null, jsx(CreateDropdown, {
+        isEmpty: isEmpty,
+        emptyState: emptyState,
+        descriptionDirection: descriptionDirection,
+        onChange: onChange,
+        loadMore: loadMore,
+        optionalInfoPlacement: optionalInfoPlacement,
+        defaultSearchValue: defaultSearchValue,
+        isLoading: isLoading
+      }), footer ? jsx(PopupFooter, {
+        children: footer
+      }) : null]
+    }),
+    placement: "bottom",
+    containerFullWidth: true,
+    disableAnimation: true,
+    maxWidth: maxWidth,
+    hasArrow: false,
+    ref: ref,
+    tabIndex: 0,
+    role: "dialog",
+    debounceDelay: 0,
+    children: children
+  });
+};
+
+export { Dropdown };