@ultraviolet/ui 1.51.0 → 1.51.2

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

@@ -1,594 +0,0 @@
-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: "1l9xw77",
-  styles: "width:100%;position:static;text-align:left;align-items:center;pointer-events:none"
-} : {
-  name: "1l9xw77",
-  styles: "width:100%;position:static;text-align:left;align-items:center;pointer-events:none",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-}); // pointer-events: none prevents any error when using the checkbox in a form since it is an unnamed input
-
-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,
-  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 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.value)) {
-        onChange?.(selectedData.selectedValues.filter(val => val !== clickedOption.value));
-      } else {
-        onChange?.([...selectedData.selectedValues, clickedOption.value]);
-      }
-    } else {
-      onChange?.(clickedOption.value);
-    }
-    setIsDropdownVisible(multiselect); // hide the dropdown on click when single select only
-  };
-  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) ? 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,
-          onClick: selectAllOptions,
-          children: jsx(StyledCheckbox, {
-            checked: selectedData.allSelected,
-            disabled: false,
-            value: "select-all",
-            "data-testid": "select-all-checkbox",
-            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, index) => 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",
-            "data-testid": `group-${index}`,
-            onClick: () => selectAllGroup ? handleSelectGroup(group) : null,
-            children: selectAllGroup ? jsx(StyledCheckbox, {
-              checked: selectedData.selectedGroups.includes(group),
-              disabled: false,
-              value: 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, indexOption) => 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 ? jsx(StyledCheckbox, {
-              checked: selectedData.selectedValues.includes(option.value) && !option.disabled,
-              disabled: option.disabled,
-              value: option.value,
-              tabIndex: -1,
-              children: jsx(DisplayOption, {
-                option: option,
-                descriptionDirection: descriptionDirection,
-                optionalInfoPlacement: optionalInfoPlacement
-              })
-            }) : jsx(DisplayOption, {
-              option: option,
-              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,
-        onClick: selectAllOptions,
-        children: jsx(StyledCheckbox, {
-          checked: selectedData.allSelected,
-          disabled: false,
-          value: "select-all",
-          "data-testid": "select-all-checkbox",
-          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.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 ? jsx(StyledCheckbox, {
-          checked: selectedData.selectedValues.includes(option.value) && !option.disabled,
-          disabled: option.disabled,
-          value: option.value,
-          tabIndex: -1,
-          children: jsx(DisplayOption, {
-            option: option,
-            descriptionDirection: descriptionDirection,
-            optionalInfoPlacement: optionalInfoPlacement
-          })
-        }) : jsx(DisplayOption, {
-          option: option,
-          descriptionDirection: descriptionDirection,
-          optionalInfoPlacement: optionalInfoPlacement
-        })
-      }, option.value)), loadMore ? 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 jsx(StyledPopup, {
-    visible: isDropdownVisible,
-    text: jsxs(Stack, {
-      children: [searchable && !isLoading ? jsx(SearchBarDropdown, {
-        placeholder: placeholder,
-        displayedOptions: displayedOptions,
-        setSearchBarActive: setSearchBarActive
-      }) : null, jsx(CreateDropdown, {
-        isEmpty: isEmpty,
-        emptyState: emptyState,
-        descriptionDirection: descriptionDirection,
-        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 };