@corva/ui 3.1.0-rc.5 → 3.1.0

package/components/Search/Search.js

@@ -1,539 +1 @@
-import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import { useState, useRef, useCallback, useEffect, useMemo, cloneElement } from 'react';
-import classNames from 'classnames';
-import { debounce, isEmpty, omit, noop } from 'lodash';
-import { Autocomplete } from '@material-ui/lab';
-import { Popper, Tooltip, Fade, Chip, TextField, InputAdornment, CircularProgress, MenuItem, Checkbox } from '@material-ui/core';
-import { AccessTime } from '@material-ui/icons';
-import Listbox from './components/Listbox.js';
-import Paper from './components/Paper.js';
-import './components/RecentSearches.js';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import Groups from './components/Groups.js';
-import SelectAllListItem from './components/SelectAllListItem.js';
-import { PaperContext } from './context/index.js';
-import { useAutocompletOptions } from './effects/useAutocompleteOptions.js';
-import useStyles from './styles.js';
-import { CloseSmallIcon } from '../../icons/iconParkIcons.js';
-import '../../icons/customIcons/icons/AddMessage.js';
-import '../../icons/customIcons/icons/Attention.js';
-import '../../icons/customIcons/icons/Collapse.js';
-import '../../icons/customIcons/icons/Dashboard.js';
-import '../../icons/customIcons/icons/Expand.js';
-import '../../icons/customIcons/icons/FolderClosed.js';
-import '../../icons/customIcons/icons/FolderClosedFilled.js';
-import '../../icons/customIcons/icons/FolderOpened.js';
-import '../../icons/customIcons/icons/GreaterOrEqual.js';
-import '../../icons/customIcons/icons/LessOrEqual.js';
-import '../../icons/customIcons/icons/Search.js';
-import '../../icons/customIcons/icons/Wellhub.js';
-import '../../icons/customIcons/icons/MultiRuler.js';
-import '../../icons/customIcons/icons/Checkbox.js';
-import '../../icons/customIcons/icons/CheckboxChecked.js';
-import '../../icons/customIcons/icons/CheckboxIndeterminate.js';
-import '../../icons/customIcons/icons/Radio.js';
-import '../../icons/customIcons/icons/RadioChecked.js';
-import '../../icons/customIcons/icons/SimulFrac.js';
-import '../../icons/customIcons/icons/ZipperFrac.js';
-import '../../icons/customIcons/icons/CautionFilled.js';
-import '../../icons/customIcons/icons/MoreApp.js';
-import '../../icons/customIcons/icons/Pad.js';
-import '../../icons/customIcons/icons/Gap.js';
-import { MiddleTruncatedText } from '../MiddleTruncatedText/MiddleTruncatedText.js';
-import IconButton from '../IconButton/index.js';
-
-var _excluded = ["AutocompleteProps", "value", "disableClearable", "onChange", "onInputChange", "loading", "options", "optionSize", "placeholder", "onGroupChange", "disabled", "disableResetOnGroupChange", "multiple", "groups", "GroupsComponent", "recentSearchesMaxCount", "dataStorageKey", "RecentSearchesComponent", "dataStorage", "onInputReset", "getOptionLabel", "TextFieldProps", "ListboxProps", "onInputChangeCallback", "renderCustomOption", "isHiddenAllOption", "onOpen", "selectedGroup", "onGroupReset", "onClose", "popperProps", "paperFooter", "noOptionsText", "ListboxComponent", "isPrioritizedSelectedOptions", "isOpenedFromParent", "onFocus", "InputProps", "classes", "popupIcon", "shouldResetInputOnAutocompleteChange"],
-  _excluded2 = ["popper", "listbox", "popupIndicator", "popupIndicatorOpen", "groupChip"],
-  _excluded3 = ["InputProps", "inputProps"],
-  _excluded4 = ["input"],
-  _excluded5 = ["classes", "style"],
-  _excluded6 = ["children", "className"],
-  _excluded7 = ["style"];
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var PAGE_NAME = 'AutocompleteSearch';
-var initialPopperProps = {};
-var ARROW_LEFT_KEY_CODE = 'ArrowLeft';
-var Search = function Search(_ref) {
-  var _ref$AutocompleteProp = _ref.AutocompleteProps,
-    AutocompleteProps = _ref$AutocompleteProp === void 0 ? {} : _ref$AutocompleteProp,
-    value = _ref.value,
-    _ref$disableClearable = _ref.disableClearable,
-    disableClearable = _ref$disableClearable === void 0 ? false : _ref$disableClearable,
-    onChange = _ref.onChange,
-    _ref$onInputChange = _ref.onInputChange,
-    onInputChange = _ref$onInputChange === void 0 ? null : _ref$onInputChange,
-    _ref$loading = _ref.loading,
-    loading = _ref$loading === void 0 ? false : _ref$loading,
-    _ref$options = _ref.options,
-    options = _ref$options === void 0 ? [] : _ref$options,
-    optionSize = _ref.optionSize,
-    _ref$placeholder = _ref.placeholder,
-    placeholder = _ref$placeholder === void 0 ? 'Search...' : _ref$placeholder,
-    _ref$onGroupChange = _ref.onGroupChange,
-    onGroupChange = _ref$onGroupChange === void 0 ? function () {} : _ref$onGroupChange,
-    _ref$disabled = _ref.disabled,
-    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-    disableResetOnGroupChange = _ref.disableResetOnGroupChange,
-    _ref$multiple = _ref.multiple,
-    multiple = _ref$multiple === void 0 ? false : _ref$multiple,
-    _ref$groups = _ref.groups,
-    groups = _ref$groups === void 0 ? [] : _ref$groups,
-    _ref$GroupsComponent = _ref.GroupsComponent,
-    GroupsComponent = _ref$GroupsComponent === void 0 ? null : _ref$GroupsComponent,
-    _ref$recentSearchesMa = _ref.recentSearchesMaxCount,
-    recentSearchesMaxCount = _ref$recentSearchesMa === void 0 ? 3 : _ref$recentSearchesMa,
-    _ref$dataStorageKey = _ref.dataStorageKey,
-    dataStorageKey = _ref$dataStorageKey === void 0 ? 'Search:recentSearches' : _ref$dataStorageKey,
-    _ref$RecentSearchesCo = _ref.RecentSearchesComponent,
-    RecentSearchesComponent = _ref$RecentSearchesCo === void 0 ? null : _ref$RecentSearchesCo,
-    _ref$dataStorage = _ref.dataStorage,
-    dataStorage = _ref$dataStorage === void 0 ? sessionStorage : _ref$dataStorage,
-    _ref$onInputReset = _ref.onInputReset,
-    onInputReset = _ref$onInputReset === void 0 ? null : _ref$onInputReset,
-    _ref$getOptionLabel = _ref.getOptionLabel,
-    getOptionLabel = _ref$getOptionLabel === void 0 ? function (option) {
-      return option.label || '';
-    } : _ref$getOptionLabel,
-    _ref$TextFieldProps = _ref.TextFieldProps,
-    TextFieldProps = _ref$TextFieldProps === void 0 ? {
-      endAdornment: null
-    } : _ref$TextFieldProps,
-    _ref$ListboxProps = _ref.ListboxProps,
-    ListboxProps = _ref$ListboxProps === void 0 ? null : _ref$ListboxProps,
-    _ref$onInputChangeCal = _ref.onInputChangeCallback,
-    onInputChangeCallback = _ref$onInputChangeCal === void 0 ? function () {} : _ref$onInputChangeCal,
-    _ref$renderCustomOpti = _ref.renderCustomOption,
-    renderCustomOption = _ref$renderCustomOpti === void 0 ? null : _ref$renderCustomOpti,
-    _ref$isHiddenAllOptio = _ref.isHiddenAllOption,
-    isHiddenAllOption = _ref$isHiddenAllOptio === void 0 ? false : _ref$isHiddenAllOptio,
-    _ref$onOpen = _ref.onOpen,
-    onOpen = _ref$onOpen === void 0 ? noop : _ref$onOpen,
-    _ref$selectedGroup = _ref.selectedGroup,
-    selectedGroup = _ref$selectedGroup === void 0 ? null : _ref$selectedGroup,
-    _ref$onGroupReset = _ref.onGroupReset,
-    onGroupReset = _ref$onGroupReset === void 0 ? function () {} : _ref$onGroupReset,
-    _ref$onClose = _ref.onClose,
-    onClose = _ref$onClose === void 0 ? function () {} : _ref$onClose,
-    _ref$popperProps = _ref.popperProps,
-    popperProps = _ref$popperProps === void 0 ? initialPopperProps : _ref$popperProps,
-    paperFooter = _ref.paperFooter,
-    _ref$noOptionsText = _ref.noOptionsText,
-    noOptionsText = _ref$noOptionsText === void 0 ? 'No Options' : _ref$noOptionsText,
-    _ref$ListboxComponent = _ref.ListboxComponent,
-    ListboxComponent = _ref$ListboxComponent === void 0 ? Listbox : _ref$ListboxComponent,
-    _ref$isPrioritizedSel = _ref.isPrioritizedSelectedOptions,
-    isPrioritizedSelectedOptions = _ref$isPrioritizedSel === void 0 ? false : _ref$isPrioritizedSel,
-    _ref$isOpenedFromPare = _ref.isOpenedFromParent,
-    isOpenedFromParent = _ref$isOpenedFromPare === void 0 ? undefined : _ref$isOpenedFromPare,
-    _ref$onFocus = _ref.onFocus,
-    onFocus = _ref$onFocus === void 0 ? null : _ref$onFocus,
-    _ref$InputProps = _ref.InputProps,
-    InputProps = _ref$InputProps === void 0 ? null : _ref$InputProps,
-    _ref$classes = _ref.classes,
-    classes = _ref$classes === void 0 ? {} : _ref$classes;
-    _ref.popupIcon;
-    var shouldResetInputOnAutocompleteChange = _ref.shouldResetInputOnAutocompleteChange,
-    props = _objectWithoutProperties(_ref, _excluded);
-  var _useState = useState(''),
-    _useState2 = _slicedToArray(_useState, 2),
-    inputValue = _useState2[0],
-    setInputValue = _useState2[1];
-  var _useState3 = useState(''),
-    _useState4 = _slicedToArray(_useState3, 2),
-    debouncedInputValue = _useState4[0],
-    setDebouncedInputValue = _useState4[1];
-  var _useState5 = useState(false),
-    _useState6 = _slicedToArray(_useState5, 2),
-    isOpened = _useState6[0],
-    setIsOpened = _useState6[1];
-  var _useState7 = useState(false),
-    _useState8 = _slicedToArray(_useState7, 2),
-    isSelectedLabelExpanded = _useState8[0],
-    setIsSelectedLabelExpanded = _useState8[1];
-  var inputRef = useRef();
-  var paperRef = useRef();
-  var _useAutocompletOption = useAutocompletOptions({
-      options: options,
-      value: value,
-      groups: groups,
-      selectedGroup: selectedGroup,
-      isPrioritizedSelectedOptions: isPrioritizedSelectedOptions
-    }),
-    autocompleteOptions = _useAutocompletOption.autocompleteOptions,
-    isGrouped = _useAutocompletOption.isGrouped,
-    handleAutocompleOptionsUpdate = _useAutocompletOption.handleAutocompleOptionsUpdate;
-  var styles = useStyles();
-  var popper = classes.popper,
-    listbox = classes.listbox,
-    popupIndicator = classes.popupIndicator,
-    popupIndicatorOpen = classes.popupIndicatorOpen,
-    groupChipClassName = classes.groupChip,
-    restClasses = _objectWithoutProperties(classes, _excluded2);
-  var autocompleteClasses = _objectSpread({
-    popper: classNames(styles.popper, popper),
-    listbox: classNames(styles.listbox, listbox),
-    popupIndicator: classNames(styles.popupIndicator, popupIndicator),
-    popupIndicatorOpen: classNames(styles.popupIndicatorOpen, popupIndicatorOpen)
-  }, restClasses);
-  var groupBy = function groupBy(_ref2) {
-    var group = _ref2.group;
-    return group;
-  };
-  var handleInputChange = function handleInputChange(event, newInputValue, reason) {
-    if (disableResetOnGroupChange) setInputValue(function (prevValue) {
-      return reason === 'reset' ? prevValue : newInputValue;
-    });else setInputValue(newInputValue);
-    onInputChangeCallback(newInputValue, reason);
-  };
-  var handleInputReset = function handleInputReset() {
-    setInputValue('');
-    onInputReset === null || onInputReset === void 0 ? void 0 : onInputReset();
-  };
-  var handleDebouncedInputChange = function handleDebouncedInputChange(inputValue) {
-    return setDebouncedInputValue(inputValue);
-  };
-  var onDebouncedInputChange = useCallback(debounce(handleDebouncedInputChange, 500), []);
-  var handleSelectedGroupChange = function handleSelectedGroupChange(selectedGroupId) {
-    var selectedGroup = groups.find(function (_ref3) {
-      var id = _ref3.id;
-      return id === selectedGroupId;
-    });
-    if (!disableResetOnGroupChange) handleInputReset();
-    onGroupChange(selectedGroup);
-  };
-  var handleKeyDown = function handleKeyDown(event) {
-    if (inputValue.length) return;
-
-    // NOTE: MUI try to focus tags for multiple Autocomplete
-    // need to stop event to prevent crash, as we render custom content in TextField
-    if (multiple && event.code === ARROW_LEFT_KEY_CODE) {
-      event.stopPropagation();
-    }
-  };
-  useEffect(function () {
-    if (isOpened) {
-      inputRef.current.focus();
-      inputRef.current.setSelectionRange(inputValue.length, inputValue.length);
-    }
-  });
-  var valueLength = multiple && Array.isArray(value) ? value.length : null;
-  var allSelected = multiple && (autocompleteOptions === null || autocompleteOptions === void 0 ? void 0 : autocompleteOptions.length) === valueLength;
-  var someSelected = multiple && !!valueLength && !allSelected;
-  var onAllSelectClick = function onAllSelectClick() {
-    handleInputReset();
-    if (AutocompleteProps.getOptionDisabled && allSelected) return onChange(null, [options[options.length - 1]]);
-    return onChange(null, allSelected || someSelected ? [] : autocompleteOptions);
-  };
-  useEffect(function () {
-    onDebouncedInputChange(inputValue);
-    if (!onInputChange) return;
-    onInputChange(inputValue);
-  }, [inputValue]);
-  var handleAutocompleteChange = function handleAutocompleteChange(event, selected) {
-    if (!multiple || shouldResetInputOnAutocompleteChange) {
-      setInputValue('');
-    }
-    onChange(event, selected);
-  };
-  var handleSearchOpen = function handleSearchOpen(e) {
-    handleAutocompleOptionsUpdate();
-    setIsOpened(true);
-    onOpen(e);
-  };
-  var handleSearchClose = function handleSearchClose(evt, reason) {
-    var focusingDropdownElement = reason === 'blur' && (!evt.relatedTarget || paperRef.current.contains(evt.relatedTarget));
-    if (!focusingDropdownElement) {
-      onClose();
-      setIsOpened(false);
-    }
-  };
-  var handleSelectedOptionClick = function handleSelectedOptionClick() {
-    if (isOpenedFromParent !== null && isOpenedFromParent !== void 0 ? isOpenedFromParent : isOpened) {
-      setIsOpened(false);
-      onClose();
-    } else {
-      setIsOpened(true);
-      onOpen();
-    }
-  };
-  var renderGroup = function renderGroup(_ref4) {
-    var key = _ref4.key,
-      group = _ref4.group,
-      children = _ref4.children;
-    if (!group || !isEmpty(selectedGroup) && multiple) {
-      return children;
-    }
-    return /*#__PURE__*/jsxs("div", {
-      className: styles.group,
-      children: [/*#__PURE__*/jsx(Tooltip, {
-        title: group,
-        placement: "right",
-        TransitionComponent: Fade,
-        TransitionProps: {
-          timeout: 500
-        },
-        enterDelay: 500,
-        children: /*#__PURE__*/jsx(Chip, {
-          "data-not-migrated-muichip": true,
-          className: classNames(styles.groupChip, groupChipClassName),
-          variant: "outlined",
-          label: group
-        })
-      }), children]
-    }, key);
-  };
-  var getSelectedLabel = function getSelectedLabel(value) {
-    if (allSelected && !isHiddenAllOption) return 'All';
-    var label = value[0].label || value[0].name || '';
-    return (value === null || value === void 0 ? void 0 : value.length) === 1 ? /*#__PURE__*/jsx("div", {
-      children: /*#__PURE__*/jsx(MiddleTruncatedText, {
-        children: label
-      })
-    }) : "".concat(value === null || value === void 0 ? void 0 : value.length, " Selected");
-  };
-  var renderInput = function renderInput(muiProps) {
-    var _mUIInputProps$endAdo, _mUIInputProps$endAdo2, _mUIInputProps$endAdo3;
-    var _useState9 = useState(false),
-      _useState10 = _slicedToArray(_useState9, 2),
-      isFocused = _useState10[0],
-      setIsFocused = _useState10[1];
-    var mUIInputProps = muiProps.InputProps,
-      mUIinputProps = muiProps.inputProps,
-      restMuiProps = _objectWithoutProperties(muiProps, _excluded3);
-    var defaultEndAdornment = ((_mUIInputProps$endAdo = mUIInputProps.endAdornment) === null || _mUIInputProps$endAdo === void 0 ? void 0 : (_mUIInputProps$endAdo2 = _mUIInputProps$endAdo.props) === null || _mUIInputProps$endAdo2 === void 0 ? void 0 : (_mUIInputProps$endAdo3 = _mUIInputProps$endAdo2.children) === null || _mUIInputProps$endAdo3 === void 0 ? void 0 : _mUIInputProps$endAdo3.length) > 1 ? cloneElement(mUIInputProps.endAdornment, {
-      // remove clear button, popupIcon is left
-      children: mUIInputProps.endAdornment.props.children.slice(1),
-      onMouseDown: function onMouseDown(e) {
-        return e.stopPropagation();
-      },
-      onMouseUp: function onMouseUp(e) {
-        return e.stopPropagation();
-      }
-    }) : mUIInputProps.endAdornment;
-    var isNeedExpandInput = valueLength === 1;
-    var isInputLabelShrink = isFocused || isOpened || inputValue.length > 0 || !isEmpty(value) || !isEmpty(InputProps === null || InputProps === void 0 ? void 0 : InputProps.startAdornment);
-    var onInputBlur = function onInputBlur() {
-      setIsFocused(false);
-      if (isNeedExpandInput) {
-        setIsSelectedLabelExpanded(true);
-      }
-    };
-    var _ref5 = InputProps || {},
-      _ref5$classes = _ref5.classes;
-    _ref5$classes = _ref5$classes === void 0 ? {} : _ref5$classes;
-    var _ref5$classes$input = _ref5$classes.input,
-      inputClasses = _ref5$classes$input === void 0 ? '' : _ref5$classes$input,
-      restInputClasses = _objectWithoutProperties(_ref5$classes, _excluded4),
-      style = _ref5.style,
-      restInputProps = _objectWithoutProperties(_ref5, _excluded5);
-    return /*#__PURE__*/jsx(TextField, _objectSpread(_objectSpread(_objectSpread({}, restMuiProps), omit(TextFieldProps, ['endAdornment'])), {}, {
-      onBlur: onInputBlur,
-      onFocus: function onFocus() {
-        setIsFocused(true);
-      },
-      onKeyDown: handleKeyDown,
-      inputRef: inputRef,
-      placeholder: placeholder,
-      classes: {
-        root: styles.searchInput
-      },
-      inputProps: _objectSpread(_objectSpread({
-        style: {
-          padding: 5
-        }
-      }, mUIinputProps), props.inputProps),
-      InputLabelProps: {
-        shrink: isInputLabelShrink
-      },
-      InputProps: _objectSpread(_objectSpread(_objectSpread({
-        classes: _objectSpread({
-          input: classNames(isSelectedLabelExpanded ? styles.inputShrinked : isNeedExpandInput && styles.inputExpanded, inputClasses)
-        }, restInputClasses),
-        style: _objectSpread({
-          paddingRight: 0,
-          paddingBottom: 0
-        }, style)
-      }, mUIInputProps), restInputProps), {}, {
-        startAdornment: /*#__PURE__*/jsxs(Fragment, {
-          children: [InputProps === null || InputProps === void 0 ? void 0 : InputProps.startAdornment, selectedGroup && /*#__PURE__*/jsx(Chip, {
-            className: styles.selectedGroup,
-            "data-not-migrated-muichip": true,
-            variant: "outlined",
-            label: /*#__PURE__*/jsxs("div", {
-              className: styles.selectedGroupLabel,
-              children: [selectedGroup.name, /*#__PURE__*/jsx(CloseSmallIcon, {
-                size: 16,
-                id: "removeGroupIcon",
-                className: styles.removeIcon,
-                onClick: onGroupReset
-              })]
-            })
-          }, selectedGroup.id), multiple && !isEmpty(value) && /*#__PURE__*/jsx("div", {
-            onClick: handleSelectedOptionClick,
-            id: "selectedOptions",
-            className: classNames(styles.selectedLabel, isSelectedLabelExpanded && styles.selectedLabelExpanded),
-            children: getSelectedLabel(value)
-          })]
-        }),
-        endAdornment: /*#__PURE__*/jsxs(Fragment, {
-          children: [/*#__PURE__*/jsxs(InputAdornment, {
-            className: classNames(styles.endAdornment, _defineProperty({}, styles.removeIconWithDropdown, AutocompleteProps.forcePopupIcon)),
-            position: "end",
-            children: [TextFieldProps.endAdornment, loading && /*#__PURE__*/jsx(CircularProgress, {
-              color: "primary",
-              size: 20
-            }), isFocused && inputValue && !disableClearable && /*#__PURE__*/jsx(IconButton, {
-              "data-testid": "".concat(PAGE_NAME, "_clear_icon"),
-              size: "small",
-              className: styles.iconButton,
-              onClick: function onClick() {
-                setInputValue('');
-                if (onInputReset) {
-                  onInputReset();
-                }
-              },
-              tooltipProps: {
-                title: 'Clear'
-              },
-              children: /*#__PURE__*/jsx(CloseSmallIcon, {
-                size: 20,
-                className: styles.closeIcon
-              })
-            })]
-          }), AutocompleteProps.forcePopupIcon && defaultEndAdornment]
-        })
-      })
-    }));
-  };
-  var renderOption = function renderOption(option, state) {
-    var _option$label = option.label,
-      label = _option$label === void 0 ? '' : _option$label,
-      id = option.id;
-    if (!multiple) return /*#__PURE__*/jsx(MenuItem, {
-      className: styles.menuItem,
-      value: id,
-      "data-testid": "autocompleteOption_".concat(label, "MenuItem"),
-      children: /*#__PURE__*/jsx(MiddleTruncatedText, {
-        className: styles.optionLabelContainer,
-        children: label
-      })
-    }, id);
-    return /*#__PURE__*/jsxs("div", {
-      className: classNames(styles.option, optionSize),
-      "data-testid": "autocompleteOption_".concat(label, "MenuItem"),
-      children: [/*#__PURE__*/jsx(Checkbox, {
-        size: "small",
-        disableRipple: true,
-        className: styles.checkbox,
-        checked: state.selected
-      }), /*#__PURE__*/jsx(MiddleTruncatedText, {
-        className: styles.optionLabelContainer,
-        children: label
-      })]
-    }, id);
-  };
-  var isEmptyOptions = isEmpty(autocompleteOptions);
-  var paperContext = useMemo(function () {
-    return {
-      onOutsideClick: handleSearchClose,
-      isEmptyOptions: isEmptyOptions,
-      loading: loading,
-      AllSelectComponent: !isHiddenAllOption && multiple && !isEmptyOptions && /*#__PURE__*/jsx(SelectAllListItem, {
-        className: styles.selectAllCheckbox,
-        onClick: onAllSelectClick,
-        someSelected: someSelected,
-        allSelected: allSelected
-      }),
-      RecentSearchesComponent: RecentSearchesComponent && /*#__PURE__*/jsx(RecentSearchesComponent, {
-        title: "Recent Searches",
-        Icon: AccessTime,
-        dataStorage: dataStorage,
-        dataStorageKey: dataStorageKey,
-        maxCount: recentSearchesMaxCount,
-        isHidden: !isEmpty(inputValue),
-        onInputChange: function onInputChange(value) {
-          return setInputValue(value);
-        },
-        inputValue: debouncedInputValue
-      }),
-      GroupsComponent: !selectedGroup && isGrouped && GroupsComponent && /*#__PURE__*/jsx(GroupsComponent, {
-        onGroupClick: handleSelectedGroupChange,
-        groups: groups
-      })
-    };
-  }, [selectedGroup, loading, isGrouped, isEmptyOptions, inputValue, isHiddenAllOption, multiple, isEmptyOptions, debouncedInputValue, onClose, handleSearchClose]);
-  var PaperComponent = useMemo(function () {
-    return function (_ref6) {
-      var children = _ref6.children,
-        className = _ref6.className,
-        paperProps = _objectWithoutProperties(_ref6, _excluded6);
-      return /*#__PURE__*/jsxs(Paper, _objectSpread(_objectSpread({}, paperProps), {}, {
-        className: className,
-        inputRef: inputRef,
-        ref: paperRef,
-        children: [children, paperFooter]
-      }));
-    };
-  }, [paperFooter]);
-  var PopperComponent = useMemo(function () {
-    return function (props) {
-      var style = popperProps.style,
-        restPopperProps = _objectWithoutProperties(popperProps, _excluded7);
-      return /*#__PURE__*/jsx(Popper, _objectSpread(_objectSpread({}, props), {}, {
-        style: _objectSpread(_objectSpread({}, props.style), style),
-        placement: "bottom-start"
-      }, restPopperProps));
-    };
-  }, [popperProps]);
-  var handleRootFocus = function handleRootFocus() {
-    setIsSelectedLabelExpanded(false);
-    onFocus === null || onFocus === void 0 ? void 0 : onFocus();
-  };
-  return /*#__PURE__*/jsx(PaperContext.Provider, {
-    value: paperContext,
-    children: /*#__PURE__*/jsx(Autocomplete, _objectSpread(_objectSpread({}, omit(props, ['InputProps', 'isNullable', 'isOpenedFromParent'])), {}, {
-      PopperComponent: PopperComponent,
-      disableClearable: disableClearable,
-      onOpen: handleSearchOpen,
-      onClose: handleSearchClose,
-      open: isOpenedFromParent !== null && isOpenedFromParent !== void 0 ? isOpenedFromParent : isOpened,
-      onChange: handleAutocompleteChange,
-      forcePopupIcon: AutocompleteProps.forcePopupIcon,
-      fullWidth: true,
-      disabled: disabled,
-      value: value,
-      classes: autocompleteClasses,
-      renderInput: renderInput,
-      loading: loading,
-      options: autocompleteOptions,
-      renderGroup: renderGroup,
-      disableCloseOnSelect: multiple,
-      multiple: multiple,
-      renderOption: renderCustomOption || renderOption,
-      groupBy: isGrouped ? groupBy : null,
-      PaperComponent: PaperComponent,
-      ListboxComponent: ListboxComponent,
-      inputValue: inputValue,
-      getOptionLabel: getOptionLabel,
-      getOptionDisabled: AutocompleteProps === null || AutocompleteProps === void 0 ? void 0 : AutocompleteProps.getOptionDisabled,
-      onInputChange: handleInputChange,
-      loadingText: /*#__PURE__*/jsx("div", {
-        className: styles.label,
-        children: "Loading ..."
-      }),
-      noOptionsText: /*#__PURE__*/jsx("div", {
-        className: styles.label,
-        children: noOptionsText
-      }),
-      ListboxProps: ListboxProps,
-      onFocus: handleRootFocus
-    }))
-  });
-};
-Search.Groups = Groups;
-
-export { Search, Search as default };
-//# sourceMappingURL=Search.js.map
+import{__rest as o,__assign as n}from'./../../ext-esm/tslib/tslib.es6.js';import{jsx as e,jsxs as t,Fragment as i}from"react/jsx-runtime";import{useState as s,useRef as r,useCallback as c,useEffect as l,useMemo as p,cloneElement as a}from"react";import u from"classnames";import{debounce as d,isEmpty as m,omit as h,noop as v}from"lodash";import{Autocomplete as f}from"@material-ui/lab";import{Popper as g,Tooltip as I,Fade as C,Chip as b,TextField as O,InputAdornment as P,CircularProgress as j,MenuItem as x,Checkbox as S}from"@material-ui/core";import{AccessTime as A}from"@material-ui/icons";import G from"./components/Listbox.js";import N from"./components/Paper.js";import"./components/RecentSearches.js";import R from"./components/Groups.js";import k from"./components/SelectAllListItem.js";import{PaperContext as y}from"./context/index.js";import{useAutocompletOptions as L}from"./effects/useAutocompleteOptions.js";import F from"./styles.js";import{DownOneIcon as T,CloseSmallIcon as z}from"../../icons/iconParkIcons.js";import"../../icons/customIcons/icons/AddMessage.js";import"../../icons/customIcons/icons/Attention.js";import"../../icons/customIcons/icons/Collapse.js";import"../../icons/customIcons/icons/Dashboard.js";import"../../icons/customIcons/icons/Expand.js";import"../../icons/customIcons/icons/FolderClosed.js";import"../../icons/customIcons/icons/FolderClosedFilled.js";import"../../icons/customIcons/icons/FolderOpened.js";import"../../icons/customIcons/icons/GreaterOrEqual.js";import"../../icons/customIcons/icons/LessOrEqual.js";import"../../icons/customIcons/icons/Search.js";import"../../icons/customIcons/icons/Wellhub.js";import"../../icons/customIcons/icons/MultiRuler.js";import"../../icons/customIcons/icons/Checkbox.js";import"../../icons/customIcons/icons/CheckboxChecked.js";import"../../icons/customIcons/icons/CheckboxIndeterminate.js";import"../../icons/customIcons/icons/Radio.js";import"../../icons/customIcons/icons/RadioChecked.js";import"../../icons/customIcons/icons/SimulFrac.js";import"../../icons/customIcons/icons/ZipperFrac.js";import"../../icons/customIcons/icons/CautionFilled.js";import"../../icons/customIcons/icons/MoreApp.js";import"../../icons/customIcons/icons/Pad.js";import"../../icons/customIcons/icons/Gap.js";import{MiddleTruncatedText as D}from"../MiddleTruncatedText/MiddleTruncatedText.js";import M from"../IconButton/index.js";var B={},E=function(R){var E=R.AutocompleteProps,_=void 0===E?{}:E,w=R.value,K=R.disableClearable,H=void 0!==K&&K,W=R.onChange,q=R.onInputChange,U=void 0===q?null:q,V=R.loading,Z=void 0!==V&&V,J=R.options,Q=void 0===J?[]:J,X=R.optionSize,Y=R.placeholder,$=void 0===Y?"Search...":Y,oo=R.onGroupChange,no=void 0===oo?function(){}:oo,eo=R.disabled,to=void 0!==eo&&eo,io=R.disableResetOnGroupChange,so=R.multiple,ro=void 0!==so&&so,co=R.groups,lo=void 0===co?[]:co,po=R.GroupsComponent,ao=void 0===po?null:po,uo=R.recentSearchesMaxCount,mo=void 0===uo?3:uo,ho=R.dataStorageKey,vo=void 0===ho?"Search:recentSearches":ho,fo=R.RecentSearchesComponent,go=void 0===fo?null:fo,Io=R.dataStorage,Co=void 0===Io?sessionStorage:Io,bo=R.onInputReset,Oo=void 0===bo?null:bo,Po=R.getOptionLabel,jo=void 0===Po?function(o){return o.label||""}:Po,xo=R.TextFieldProps,So=void 0===xo?{endAdornment:null}:xo,Ao=R.ListboxProps,Go=void 0===Ao?null:Ao,No=R.onInputChangeCallback,Ro=void 0===No?function(){}:No,ko=R.renderCustomOption,yo=void 0===ko?null:ko,Lo=R.isHiddenAllOption,Fo=void 0!==Lo&&Lo,To=R.onOpen,zo=void 0===To?v:To,Do=R.selectedGroup,Mo=void 0===Do?null:Do,Bo=R.onGroupReset,Eo=void 0===Bo?function(){}:Bo,_o=R.onClose,wo=void 0===_o?function(){}:_o,Ko=R.popperProps,Ho=void 0===Ko?B:Ko,Wo=R.paperFooter,qo=R.noOptionsText,Uo=void 0===qo?"No Options":qo,Vo=R.ListboxComponent,Zo=void 0===Vo?G:Vo,Jo=R.isPrioritizedSelectedOptions,Qo=void 0!==Jo&&Jo,Xo=R.isOpenedFromParent,Yo=void 0===Xo?void 0:Xo,$o=R.onFocus,on=void 0===$o?null:$o,nn=R.InputProps,en=void 0===nn?null:nn,tn=R.classes,sn=void 0===tn?{}:tn,rn=R.popupIcon;void 0===rn&&e(T,{theme:"filled",fill:"#BDBDBD",size:16});var cn=R.shouldResetInputOnAutocompleteChange,ln=o(R,["AutocompleteProps","value","disableClearable","onChange","onInputChange","loading","options","optionSize","placeholder","onGroupChange","disabled","disableResetOnGroupChange","multiple","groups","GroupsComponent","recentSearchesMaxCount","dataStorageKey","RecentSearchesComponent","dataStorage","onInputReset","getOptionLabel","TextFieldProps","ListboxProps","onInputChangeCallback","renderCustomOption","isHiddenAllOption","onOpen","selectedGroup","onGroupReset","onClose","popperProps","paperFooter","noOptionsText","ListboxComponent","isPrioritizedSelectedOptions","isOpenedFromParent","onFocus","InputProps","classes","popupIcon","shouldResetInputOnAutocompleteChange"]),pn=s(""),an=pn[0],un=pn[1],dn=s(""),mn=dn[0],hn=dn[1],vn=s(!1),fn=vn[0],gn=vn[1],In=s(!1),Cn=In[0],bn=In[1],On=r(),Pn=r(),jn=L({options:Q,value:w,groups:lo,selectedGroup:Mo,isPrioritizedSelectedOptions:Qo}),xn=jn.autocompleteOptions,Sn=jn.isGrouped,An=jn.handleAutocompleOptionsUpdate,Gn=F(),Nn=sn.popper,Rn=sn.listbox,kn=sn.popupIndicator,yn=sn.popupIndicatorOpen,Ln=sn.groupChip,Fn=o(sn,["popper","listbox","popupIndicator","popupIndicatorOpen","groupChip"]),Tn=n({popper:u(Gn.popper,Nn),listbox:u(Gn.listbox,Rn),popupIndicator:u(Gn.popupIndicator,kn),popupIndicatorOpen:u(Gn.popupIndicatorOpen,yn)},Fn),zn=function(){un(""),null==Oo||Oo()},Dn=c(d((function(o){return hn(o)}),500),[]),Mn=function(o){var n=lo.find((function(n){return n.id===o}));io||zn(),no(n)},Bn=function(o){an.length||ro&&"ArrowLeft"===o.code&&o.stopPropagation()};l((function(){fn&&(On.current.focus(),On.current.setSelectionRange(an.length,an.length))}));var En=ro&&Array.isArray(w)?w.length:null,_n=ro&&(null==xn?void 0:xn.length)===En,wn=ro&&!!En&&!_n,Kn=function(){return zn(),_.getOptionDisabled&&_n?W(null,[Q[Q.length-1]]):W(null,_n||wn?[]:xn)};l((function(){Dn(an),U&&U(an)}),[an]);var Hn=function(o,n){"blur"===n&&(!o.relatedTarget||Pn.current.contains(o.relatedTarget))||(wo(),gn(!1))},Wn=function(){(null!=Yo?Yo:fn)?(gn(!1),wo()):(gn(!0),zo())},qn=function(o){if(_n&&!Fo)return"All";var n=o[0].label||o[0].name||"";return 1===(null==o?void 0:o.length)?e("div",{children:e(D,{children:n})}):"".concat(null==o?void 0:o.length," Selected")},Un=m(xn),Vn=p((function(){return{onOutsideClick:Hn,isEmptyOptions:Un,loading:Z,AllSelectComponent:!Fo&&ro&&!Un&&e(k,{className:Gn.selectAllCheckbox,onClick:Kn,someSelected:wn,allSelected:_n}),RecentSearchesComponent:go&&e(go,{title:"Recent Searches",Icon:A,dataStorage:Co,dataStorageKey:vo,maxCount:mo,isHidden:!m(an),onInputChange:function(o){return un(o)},inputValue:mn}),GroupsComponent:!Mo&&Sn&&ao&&e(ao,{onGroupClick:Mn,groups:lo})}}),[Mo,Z,Sn,Un,an,Fo,ro,Un,mn,wo,Hn]),Zn=p((function(){return function(e){var i=e.children,s=e.className,r=o(e,["children","className"]);return t(N,n({},r,{className:s,inputRef:On,ref:Pn,children:[i,Wo]}))}}),[Wo]),Jn=p((function(){return function(t){var i=Ho.style,s=o(Ho,["style"]);return e(g,n({},t,{style:n(n({},t.style),i),placement:"bottom-start"},s))}}),[Ho]);return e(y.Provider,{value:Vn,children:e(f,n({},h(ln,["InputProps","isNullable","isOpenedFromParent"]),{PopperComponent:Jn,disableClearable:H,onOpen:function(o){An(),gn(!0),zo(o)},onClose:Hn,open:null!=Yo?Yo:fn,onChange:function(o,n){ro&&!cn||un(""),W(o,n)},forcePopupIcon:_.forcePopupIcon,fullWidth:!0,disabled:to,value:w,classes:Tn,renderInput:function(r){var c,l,p,d,v=s(!1),f=v[0],g=v[1],I=r.InputProps,C=r.inputProps,x=o(r,["InputProps","inputProps"]),S=(null===(d=null===(p=null===(l=I.endAdornment)||void 0===l?void 0:l.props)||void 0===p?void 0:p.children)||void 0===d?void 0:d.length)>1?a(I.endAdornment,{children:I.endAdornment.props.children.slice(1),onMouseDown:function(o){return o.stopPropagation()},onMouseUp:function(o){return o.stopPropagation()}}):I.endAdornment,A=1===En,G=f||fn||an.length>0||!m(w)||!m(null==en?void 0:en.startAdornment),N=en||{},R=N.classes,k=void 0===R?{}:R,y=k.input,L=void 0===y?"":y,F=o(k,["input"]),T=N.style,D=o(N,["classes","style"]);return e(O,n({},x,h(So,["endAdornment"]),{onBlur:function(){g(!1),A&&bn(!0)},onFocus:function(){g(!0)},onKeyDown:Bn,inputRef:On,placeholder:$,classes:{root:Gn.searchInput},inputProps:n(n({style:{padding:5}},C),ln.inputProps),InputLabelProps:{shrink:G},InputProps:n(n(n({classes:n({input:u(Cn?Gn.inputShrinked:A&&Gn.inputExpanded,L)},F),style:n({paddingRight:0,paddingBottom:0},T)},I),D),{startAdornment:t(i,{children:[null==en?void 0:en.startAdornment,Mo&&e(b,{className:Gn.selectedGroup,"data-not-migrated-muichip":!0,variant:"outlined",label:t("div",{className:Gn.selectedGroupLabel,children:[Mo.name,e(z,{size:16,id:"removeGroupIcon",className:Gn.removeIcon,onClick:Eo})]})},Mo.id),ro&&!m(w)&&e("div",{onClick:Wn,id:"selectedOptions",className:u(Gn.selectedLabel,Cn&&Gn.selectedLabelExpanded),children:qn(w)})]}),endAdornment:t(i,{children:[t(P,{className:u(Gn.endAdornment,(c={},c[Gn.removeIconWithDropdown]=_.forcePopupIcon,c)),position:"end",children:[So.endAdornment,Z&&e(j,{color:"primary",size:20}),f&&an&&!H&&e(M,{"data-testid":"".concat("AutocompleteSearch","_clear_icon"),size:"small",className:Gn.iconButton,onClick:function(){un(""),Oo&&Oo()},tooltipProps:{title:"Clear"},children:e(z,{size:20,className:Gn.closeIcon})})]}),_.forcePopupIcon&&S]})})}))},loading:Z,options:xn,renderGroup:function(o){var n=o.key,i=o.group,s=o.children;return!i||!m(Mo)&&ro?s:t("div",{className:Gn.group,children:[e(I,{title:i,placement:"right",TransitionComponent:C,TransitionProps:{timeout:500},enterDelay:500,children:e(b,{"data-not-migrated-muichip":!0,className:u(Gn.groupChip,Ln),variant:"outlined",label:i})}),s]},n)},disableCloseOnSelect:ro,multiple:ro,renderOption:yo||function(o,n){var i=o.label,s=void 0===i?"":i,r=o.id;return ro?t("div",{className:u(Gn.option,X),"data-testid":"autocompleteOption_".concat(s,"MenuItem"),children:[e(S,{size:"small",disableRipple:!0,className:Gn.checkbox,checked:n.selected}),e(D,{className:Gn.optionLabelContainer,children:s})]},r):e(x,{className:Gn.menuItem,value:r,"data-testid":"autocompleteOption_".concat(s,"MenuItem"),children:e(D,{className:Gn.optionLabelContainer,children:s})},r)},groupBy:Sn?function(o){return o.group}:null,PaperComponent:Zn,ListboxComponent:Zo,inputValue:an,getOptionLabel:jo,getOptionDisabled:null==_?void 0:_.getOptionDisabled,onInputChange:function(o,n,e){un(io?function(o){return"reset"===e?o:n}:n),Ro(n,e)},loadingText:e("div",{className:Gn.label,children:"Loading ..."}),noOptionsText:e("div",{className:Gn.label,children:Uo}),ListboxProps:Go,onFocus:function(){bn(!1),null==on||on()}}))})};E.Groups=R;export{E as Search,E as default};

package/components/Search/assets/SearchIcon.js

@@ -1,29 +1 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-
-var SearchIcon = function SearchIcon(_ref) {
-  var _ref$width = _ref.width,
-    width = _ref$width === void 0 ? 24 : _ref$width,
-    _ref$height = _ref.height,
-    height = _ref$height === void 0 ? 24 : _ref$height;
-  return /*#__PURE__*/jsxs("svg", {
-    width: width,
-    height: height,
-    viewBox: "0 0 ".concat(width, " ").concat(height),
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
-    children: [/*#__PURE__*/jsx("path", {
-      fillRule: "evenodd",
-      clipRule: "evenodd",
-      d: "M1.25 10.5C1.25 5.39139 5.39139 1.25 10.5 1.25C15.6086 1.25 19.75 5.39139 19.75 10.5C19.75 15.6086 15.6086 19.75 10.5 19.75C5.39139 19.75 1.25 15.6086 1.25 10.5ZM10.5 2.75C6.21981 2.75 2.75 6.21981 2.75 10.5C2.75 14.7802 6.21981 18.25 10.5 18.25C14.7802 18.25 18.25 14.7802 18.25 10.5C18.25 6.21981 14.7802 2.75 10.5 2.75Z",
-      fill: "#BDBDBD"
-    }), /*#__PURE__*/jsx("path", {
-      fillRule: "evenodd",
-      clipRule: "evenodd",
-      d: "M16.08 16.0805C16.3729 15.7876 16.8478 15.7876 17.1407 16.0805L21.3833 20.3232C21.6762 20.6161 21.6762 21.0909 21.3833 21.3838C21.0904 21.6767 20.6156 21.6767 20.3227 21.3838L16.08 17.1412C15.7871 16.8483 15.7871 16.3734 16.08 16.0805Z",
-      fill: "#BDBDBD"
-    })]
-  });
-};
-
-export { SearchIcon as default };
-//# sourceMappingURL=SearchIcon.js.map
+import{jsxs as e,jsx as l}from"react/jsx-runtime";var i=function(i){var t=i.width,d=void 0===t?24:t,o=i.height,n=void 0===o?24:o;return e("svg",{width:d,height:n,viewBox:"0 0 ".concat(d," ").concat(n),fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[l("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M1.25 10.5C1.25 5.39139 5.39139 1.25 10.5 1.25C15.6086 1.25 19.75 5.39139 19.75 10.5C19.75 15.6086 15.6086 19.75 10.5 19.75C5.39139 19.75 1.25 15.6086 1.25 10.5ZM10.5 2.75C6.21981 2.75 2.75 6.21981 2.75 10.5C2.75 14.7802 6.21981 18.25 10.5 18.25C14.7802 18.25 18.25 14.7802 18.25 10.5C18.25 6.21981 14.7802 2.75 10.5 2.75Z",fill:"#BDBDBD"}),l("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M16.08 16.0805C16.3729 15.7876 16.8478 15.7876 17.1407 16.0805L21.3833 20.3232C21.6762 20.6161 21.6762 21.0909 21.3833 21.3838C21.0904 21.6767 20.6156 21.6767 20.3227 21.3838L16.08 17.1412C15.7871 16.8483 15.7871 16.3734 16.08 16.0805Z",fill:"#BDBDBD"})]})};export{i as default};

package/components/Search/components/Groups.js

@@ -1,53 +1 @@
-import { makeStyles, Typography, Chip } from '@material-ui/core';
-import { jsxs, jsx } from 'react/jsx-runtime';
-
-var useStyles = makeStyles(function (_ref) {
-  var palette = _ref.palette;
-  return {
-    selectorWrapper: {
-      padding: '16px 0 12px 16px'
-    },
-    description: {
-      color: palette.primary.text6,
-      fontWeight: 500,
-      fontSize: '13px',
-      lineHeight: '17px',
-      paddingBottom: '8px'
-    },
-    chip: {
-      marginRight: '8px',
-      color: palette.primary.text6,
-      '&:last-child': {
-        marginRight: '0px'
-      }
-    }
-  };
-});
-var Groups = function Groups(_ref2) {
-  var onGroupClick = _ref2.onGroupClick,
-    groups = _ref2.groups;
-  var classes = useStyles();
-  return /*#__PURE__*/jsxs("div", {
-    className: classes.selectorWrapper,
-    children: [/*#__PURE__*/jsx(Typography, {
-      className: classes.description,
-      children: "I'm looking for..."
-    }), /*#__PURE__*/jsx("div", {
-      children: groups === null || groups === void 0 ? void 0 : groups.map(function (_ref3) {
-        var id = _ref3.id,
-          name = _ref3.name;
-        return /*#__PURE__*/jsx(Chip, {
-          className: classes.chip,
-          variant: "outlined",
-          label: name,
-          onClick: function onClick() {
-            return onGroupClick(id);
-          }
-        }, id);
-      })
-    })]
-  });
-};
-
-export { Groups as default };
-//# sourceMappingURL=Groups.js.map
+import{jsxs as r,jsx as i}from"react/jsx-runtime";import{makeStyles as t,Typography as e,Chip as n}from"@material-ui/core";var o=t((function(r){var i=r.palette;return{selectorWrapper:{padding:"16px 0 12px 16px"},description:{color:i.primary.text6,fontWeight:500,fontSize:"13px",lineHeight:"17px",paddingBottom:"8px"},chip:{marginRight:"8px",color:i.primary.text6,"&:last-child":{marginRight:"0px"}}}})),a=function(t){var a=t.onGroupClick,p=t.groups,l=o();return r("div",{className:l.selectorWrapper,children:[i(e,{className:l.description,children:"I'm looking for..."}),i("div",{children:null==p?void 0:p.map((function(r){var t=r.id,e=r.name;return i(n,{className:l.chip,variant:"outlined",label:e,onClick:function(){return a(t)}},t)}))})]})};export{a as default};