@elliemae/ds-form 1.60.0 → 2.0.0-alpha.12

package/esm/ComboBox/v2/Combobox.js

@@ -1,9 +1,33 @@
-import _extends from '@babel/runtime/helpers/esm/extends';
+import _jsx from '@babel/runtime/helpers/esm/jsx';
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
-import _toConsumableArray from '@babel/runtime/helpers/esm/toConsumableArray';
-import _slicedToArray from '@babel/runtime/helpers/esm/slicedToArray';
 import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
-import React, { useRef, useState, useMemo, useEffect, useCallback } from 'react';
+import 'core-js/modules/esnext.async-iterator.map.js';
+import 'core-js/modules/esnext.iterator.map.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import 'core-js/modules/esnext.async-iterator.find.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.find.js';
+import 'core-js/modules/esnext.set.add-all.js';
+import 'core-js/modules/esnext.set.delete-all.js';
+import 'core-js/modules/esnext.set.difference.js';
+import 'core-js/modules/esnext.set.every.js';
+import 'core-js/modules/esnext.set.filter.js';
+import 'core-js/modules/esnext.set.find.js';
+import 'core-js/modules/esnext.set.intersection.js';
+import 'core-js/modules/esnext.set.is-disjoint-from.js';
+import 'core-js/modules/esnext.set.is-subset-of.js';
+import 'core-js/modules/esnext.set.is-superset-of.js';
+import 'core-js/modules/esnext.set.join.js';
+import 'core-js/modules/esnext.set.map.js';
+import 'core-js/modules/esnext.set.reduce.js';
+import 'core-js/modules/esnext.set.some.js';
+import 'core-js/modules/esnext.set.symmetric-difference.js';
+import 'core-js/modules/esnext.set.union.js';
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import { useRef, useState, useMemo, useEffect, useCallback } from 'react';
 import { noop } from 'lodash';
 import { PropTypes, describe } from 'react-desc';
 import Select, { createFilter } from 'react-select';
@@ -27,206 +51,110 @@ import LoadingIndicator from './components/LoadingIndicator.js';
 import { calculateWidth } from './components/calculateWidth.js';
 import { ValueContainer } from './components/ValueContainer.js';
 import { DropDownContext } from './context.js';
-import '@babel/runtime/helpers/esm/classCallCheck';
-import '@babel/runtime/helpers/esm/createClass';
-import '@babel/runtime/helpers/esm/inherits';
-import '@babel/runtime/helpers/esm/possibleConstructorReturn';
-import '@babel/runtime/helpers/esm/getPrototypeOf';
-import '@babel/runtime/helpers/esm/typeof';
-import '@elliemae/ds-icons';
-import '@elliemae/ds-button';
-import 'styled-components';
-import '@elliemae/ds-separator';
-import './components/utils.js';
-import '@elliemae/ds-popper';
-import '@elliemae/ds-classnames';
-import './components/Content.js';
-import 'prop-types';
-import 'react-window';
-import 'memoize-one';
-import './components/CustomOption.js';
-import './components/CustomOptionMulti.js';
-import '../../Checkbox/DSCheckbox.js';
-import 'uid';
-import '../../Checkbox/elements/CheckMark.js';
-import '../../Checkbox/defaultProps.js';
-import '../../prop-types-45aa1e9c.js';
-import '../../Checkbox/props.js';
-import './components/MultiSelectHeader.js';
-import './components/useMenuListHeight.js';
-import '@elliemae/ds-circular-progress-indicator';
+import { jsx } from 'react/jsx-runtime';
 
-var _excluded = ["hideSelectedOptions", "autoFocus", "className", "hasError", "onFocus", "onBlur", "onChange", "onChangeV2", "filterOption", "onClickDropdownIndicator", "onInputKeyDown", "onInputChange", "isRtl", "isFocused", "isMulti", "isFreeSolo", "selectAllDisabled", "formatCreateLabel", "createOptionPosition", "value", "options", "clearable", "searchable", "disabled", "placeholder", "valueProperty", "labelProperty", "noOptionsMessage", "loading", "menuIsOpen", "onMenuClose", "inlineMenu", "components", "measureRef", "contentRect", "readOnly", "returnValue", "expandMenuToContainer", "expandMenuOutsideContainer", "customMenuItemOptions", "containerProps", "maxOptions", "zIndex", "componentsStyle", "keepTypedValue"];
+var _LoadingIndicator;
+
+const _excluded = ["hideSelectedOptions", "autoFocus", "className", "hasError", "onFocus", "onBlur", "onChange", "onChangeV2", "filterOption", "onClickDropdownIndicator", "onInputKeyDown", "onInputChange", "isRtl", "isFocused", "isMulti", "isFreeSolo", "selectAllDisabled", "formatCreateLabel", "createOptionPosition", "value", "options", "clearable", "searchable", "disabled", "placeholder", "valueProperty", "labelProperty", "noOptionsMessage", "loading", "menuIsOpen", "onMenuClose", "inlineMenu", "components", "measureRef", "contentRect", "readOnly", "returnValue", "expandMenuToContainer", "expandMenuOutsideContainer", "customMenuItemOptions", "containerProps", "maxOptions", "zIndex", "componentsStyle", "keepTypedValue"];
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-var blockName = 'em-ds-combobox';
-var container = "".concat(blockName, "-container");
+const blockName = 'em-ds-combobox';
+const container = "".concat(blockName, "-container");
 
-var getValues = function getValues(options, isMulti, valueProperty) {
+const getValues = (options, isMulti, valueProperty) => {
   if (!options) return null;
-  return isMulti ? options.map(function (mOption) {
-    return mOption[valueProperty];
-  }) : options[valueProperty];
-};
-
-var createOption = function createOption(label, value) {
-  return {
-    label: label,
-    value: value
-  };
+  return isMulti ? options.map(mOption => mOption[valueProperty]) : options[valueProperty];
 };
 
-var DSComboBox2HOCLess = function DSComboBox2HOCLess(_ref) {
-  var _ref$hideSelectedOpti = _ref.hideSelectedOptions,
-      hideSelectedOptions = _ref$hideSelectedOpti === void 0 ? false : _ref$hideSelectedOpti,
-      _ref$autoFocus = _ref.autoFocus,
-      autoFocus = _ref$autoFocus === void 0 ? false : _ref$autoFocus,
-      _ref$className = _ref.className,
-      className = _ref$className === void 0 ? '' : _ref$className,
-      _ref$hasError = _ref.hasError,
-      hasError = _ref$hasError === void 0 ? false : _ref$hasError,
-      _ref$onFocus = _ref.onFocus,
-      onFocus = _ref$onFocus === void 0 ? noop : _ref$onFocus,
-      _ref$onBlur = _ref.onBlur,
-      onBlur = _ref$onBlur === void 0 ? noop : _ref$onBlur,
-      _ref$onChange = _ref.onChange,
-      onChange = _ref$onChange === void 0 ? noop : _ref$onChange,
-      _ref$onChangeV = _ref.onChangeV2,
-      onChangeV2 = _ref$onChangeV === void 0 ? noop : _ref$onChangeV,
-      _ref$filterOption = _ref.filterOption,
-      filterOption = _ref$filterOption === void 0 ? createFilter({
-    ignoreAccents: false
-  }) : _ref$filterOption,
-      _ref$onClickDropdownI = _ref.onClickDropdownIndicator,
-      onClickDropdownIndicator = _ref$onClickDropdownI === void 0 ? noop : _ref$onClickDropdownI,
-      _ref$onInputKeyDown = _ref.onInputKeyDown,
-      onInputKeyDown = _ref$onInputKeyDown === void 0 ? noop : _ref$onInputKeyDown,
-      _ref$onInputChange = _ref.onInputChange,
-      onInputChange = _ref$onInputChange === void 0 ? noop : _ref$onInputChange,
-      _ref$isRtl = _ref.isRtl,
-      isRtl = _ref$isRtl === void 0 ? false : _ref$isRtl,
-      _ref$isFocused = _ref.isFocused,
-      isFocused = _ref$isFocused === void 0 ? undefined : _ref$isFocused,
-      _ref$isMulti = _ref.isMulti,
-      isMulti = _ref$isMulti === void 0 ? false : _ref$isMulti,
-      isFreeSolo = _ref.isFreeSolo,
-      _ref$selectAllDisable = _ref.selectAllDisabled,
-      selectAllDisabled = _ref$selectAllDisable === void 0 ? false : _ref$selectAllDisable,
-      formatCreateLabel = _ref.formatCreateLabel,
-      createOptionPosition = _ref.createOptionPosition,
-      _ref$value = _ref.value,
-      selectedValue = _ref$value === void 0 ? null : _ref$value,
-      _ref$options = _ref.options,
-      options = _ref$options === void 0 ? [] : _ref$options,
-      _ref$clearable = _ref.clearable,
-      clearable = _ref$clearable === void 0 ? false : _ref$clearable,
-      _ref$searchable = _ref.searchable,
-      searchable = _ref$searchable === void 0 ? true : _ref$searchable,
-      _ref$disabled = _ref.disabled,
-      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      _ref$placeholder = _ref.placeholder,
-      placeholder = _ref$placeholder === void 0 ? '' : _ref$placeholder,
-      _ref$valueProperty = _ref.valueProperty,
-      valueProperty = _ref$valueProperty === void 0 ? 'value' : _ref$valueProperty,
-      _ref$labelProperty = _ref.labelProperty,
-      labelProperty = _ref$labelProperty === void 0 ? 'label' : _ref$labelProperty,
-      _ref$noOptionsMessage = _ref.noOptionsMessage,
-      _noOptionsMessage = _ref$noOptionsMessage === void 0 ? 'No matches found' : _ref$noOptionsMessage,
-      _ref$loading = _ref.loading,
-      loading = _ref$loading === void 0 ? false : _ref$loading,
-      _ref$menuIsOpen = _ref.menuIsOpen,
-      menuIsOpen = _ref$menuIsOpen === void 0 ? undefined : _ref$menuIsOpen,
-      _ref$onMenuClose = _ref.onMenuClose,
-      onMenuClose = _ref$onMenuClose === void 0 ? noop : _ref$onMenuClose,
-      _ref$inlineMenu = _ref.inlineMenu,
-      inlineMenu = _ref$inlineMenu === void 0 ? false : _ref$inlineMenu,
-      _ref$components = _ref.components,
-      customComponents = _ref$components === void 0 ? {} : _ref$components,
-      measureRef = _ref.measureRef,
-      contentRect = _ref.contentRect,
-      _ref$readOnly = _ref.readOnly,
-      readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
-      _ref$returnValue = _ref.returnValue,
-      returnValue = _ref$returnValue === void 0 ? true : _ref$returnValue,
-      _ref$expandMenuToCont = _ref.expandMenuToContainer,
-      expandMenuToContainer = _ref$expandMenuToCont === void 0 ? true : _ref$expandMenuToCont,
-      _ref$expandMenuOutsid = _ref.expandMenuOutsideContainer,
-      expandMenuOutsideContainer = _ref$expandMenuOutsid === void 0 ? false : _ref$expandMenuOutsid,
-      _ref$customMenuItemOp = _ref.customMenuItemOptions,
-      customMenuItemOptions = _ref$customMenuItemOp === void 0 ? {
-    useTruncatedText: false,
-    itemSize: 35
-  } : _ref$customMenuItemOp,
-      _ref$containerProps = _ref.containerProps,
-      containerProps = _ref$containerProps === void 0 ? {} : _ref$containerProps,
-      maxOptions = _ref.maxOptions,
-      _ref$zIndex = _ref.zIndex,
-      zIndex = _ref$zIndex === void 0 ? 11 : _ref$zIndex,
-      componentsStyle = _ref.componentsStyle,
-      _ref$keepTypedValue = _ref.keepTypedValue,
-      keepTypedValue = _ref$keepTypedValue === void 0 ? true : _ref$keepTypedValue,
+const createOption = (label, value) => ({
+  label,
+  value
+});
+
+const DSComboBox2HOCLess = _ref => {
+  let {
+    hideSelectedOptions = false,
+    autoFocus = false,
+    className = '',
+    hasError = false,
+    onFocus = noop,
+    onBlur = noop,
+    onChange = noop,
+    onChangeV2 = noop,
+    // onKeyDown = () => null,
+    filterOption = createFilter({
+      ignoreAccents: false
+    }),
+    // this fix performance issue
+    onClickDropdownIndicator = noop,
+    onInputKeyDown = noop,
+    onInputChange = noop,
+    isRtl = false,
+    isFocused = undefined,
+    isMulti = false,
+    isFreeSolo,
+    selectAllDisabled = false,
+    formatCreateLabel,
+    createOptionPosition,
+    value: selectedValue = null,
+    options = [],
+    clearable = false,
+    searchable = true,
+    disabled = false,
+    placeholder = '',
+    valueProperty = 'value',
+    labelProperty = 'label',
+    noOptionsMessage = 'No matches found',
+    loading = false,
+    menuIsOpen = undefined,
+    onMenuClose = noop,
+    inlineMenu = false,
+    components: customComponents = {},
+    measureRef,
+    contentRect,
+    readOnly = false,
+    returnValue = true,
+    expandMenuToContainer = true,
+    expandMenuOutsideContainer = false,
+    customMenuItemOptions = {
+      useTruncatedText: false,
+      itemSize: 35
+    },
+    containerProps = {},
+    maxOptions,
+    zIndex = 11,
+    componentsStyle,
+    keepTypedValue = true
+  } = _ref,
       restPropsToCustomizeSelect = _objectWithoutProperties(_ref, _excluded);
 
-  var theme = useTheme();
-  var select = useRef();
-
-  var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      selectAll = _useState2[0],
-      setSelectAll = _useState2[1];
-
-  var _useState3 = useState(false),
-      _useState4 = _slicedToArray(_useState3, 2),
-      inputInFocus = _useState4[0],
-      setInputInFocus = _useState4[1];
-
-  var _useState5 = useState(selectedValue),
-      _useState6 = _slicedToArray(_useState5, 2),
-      value = _useState6[0],
-      setValue = _useState6[1];
-
-  var _useState7 = useState(''),
-      _useState8 = _slicedToArray(_useState7, 2),
-      inputValue = _useState8[0],
-      setInputValue = _useState8[1];
-
-  var _useState9 = useState(false),
-      _useState10 = _slicedToArray(_useState9, 2),
-      handleOpening = _useState10[0],
-      setHandleOpening = _useState10[1];
-
-  var _useState11 = useState(menuIsOpen),
-      _useState12 = _slicedToArray(_useState11, 2),
-      menuOpen = _useState12[0],
-      setMenuOpen = _useState12[1];
-
-  var _useState13 = useState(false),
-      _useState14 = _slicedToArray(_useState13, 2),
-      isMultipleKeyPressed = _useState14[0],
-      setIsMultipleKeyPressed = _useState14[1];
-
-  var prevOptions = usePrevious(options);
-  var optionsChanged = useShouldRecalculate(isEqual(prevOptions, options));
-  var SelectComponent = useMemo(function () {
-    return isFreeSolo ? Creatable : Select;
-  }, [isFreeSolo]);
-  useEffect(function () {
+  const theme = useTheme();
+  const select = useRef();
+  const [selectAll, setSelectAll] = useState(false);
+  const [inputInFocus, setInputInFocus] = useState(false);
+  const [value, setValue] = useState(selectedValue);
+  const [inputValue, setInputValue] = useState('');
+  const [handleOpening, setHandleOpening] = useState(false);
+  const [menuOpen, setMenuOpen] = useState(menuIsOpen);
+  const [isMultipleKeyPressed, setIsMultipleKeyPressed] = useState(false);
+  const prevOptions = usePrevious(options);
+  const optionsChanged = useShouldRecalculate(isEqual(prevOptions, options));
+  const SelectComponent = useMemo(() => isFreeSolo ? Creatable : Select, [isFreeSolo]);
+  useEffect(() => {
     var _select$current;
 
     setInputInFocus(isFocused);
     if (isFocused) (_select$current = select.current) === null || _select$current === void 0 ? void 0 : _select$current.focus();
   }, [isFocused]);
-  useEffect(function () {
+  useEffect(() => {
     if (selectedValue && !isFreeSolo && !Array.isArray(selectedValue)) {
-      var newValue = options.find(function (option) {
-        return option.value === selectedValue.value;
-      });
+      const newValue = options.find(option => option.value === selectedValue.value);
       setValue(newValue);
     } else setValue(selectedValue);
   }, [selectedValue, options, optionsChanged]);
-  var handleInputChange = useCallback(function (val, action) {
+  const handleInputChange = useCallback((val, action) => {
     setInputValue(val);
 
     if (action.action === 'input-change' && !isMulti) {
@@ -243,7 +171,7 @@ var DSComboBox2HOCLess = function DSComboBox2HOCLess(_ref) {
     if (val || typeof val === 'string') onInputChange(val, action);
   }, []);
 
-  var handleOnKeyDown = function handleOnKeyDown(e) {
+  const handleOnKeyDown = e => {
     if (e.key === 'Enter' || e.key === 'ArrowDown' || e.keyCode === 32) {
       setMenuOpen(true);
     }
@@ -272,7 +200,7 @@ var DSComboBox2HOCLess = function DSComboBox2HOCLess(_ref) {
     }
   };
 
-  var handleOnChange = function handleOnChange(newValue, action) {
+  const handleOnChange = (newValue, action) => {
     onChangeV2(newValue, action);
     setMenuOpen(isMulti);
 
@@ -285,25 +213,15 @@ var DSComboBox2HOCLess = function DSComboBox2HOCLess(_ref) {
     return onChange(newValue, action);
   };
 
-  var _onSelectAll = useCallback(function (isSelected) {
+  const onSelectAll = useCallback(isSelected => {
     setSelectAll(isSelected);
 
     if (isSelected) {
-      var createdValues = Array.isArray(value) ? value : [];
-      var allOptions = [].concat(_toConsumableArray(createdValues), _toConsumableArray(options));
-
-      var optionsValues = _toConsumableArray(new Set(allOptions.map(function (opt) {
-        return opt.value;
-      })));
-
-      var optionsSet = optionsValues.map(function (val) {
-        return allOptions.find(function (option) {
-          return option.value === val;
-        });
-      });
-      onChange(optionsSet.map(function (o) {
-        return o.value;
-      }));
+      const createdValues = Array.isArray(value) ? value : [];
+      const allOptions = [...createdValues, ...options];
+      const optionsValues = [...new Set(allOptions.map(opt => opt.value))];
+      const optionsSet = optionsValues.map(val => allOptions.find(option => option.value === val));
+      onChange(optionsSet.map(o => o.value));
       onChangeV2(optionsSet);
     } else {
       onChange(getValues());
@@ -311,191 +229,155 @@ var DSComboBox2HOCLess = function DSComboBox2HOCLess(_ref) {
     }
   }, [value, getValues]);
 
-  var handleCreateNewOption = function handleCreateNewOption(inputVal) {
-    var newOption = createOption(inputVal, inputVal);
-    var prevValue = Array.isArray(value) ? value : [];
-    var newValue = isMulti ? [].concat(_toConsumableArray(prevValue), [newOption]) : newOption;
+  const handleCreateNewOption = inputVal => {
+    const newOption = createOption(inputVal, inputVal);
+    const prevValue = Array.isArray(value) ? value : [];
+    const newValue = isMulti ? [...prevValue, newOption] : newOption;
     setMenuOpen(isMulti);
     onChange(newValue);
     onChangeV2(newValue);
   };
 
-  var handleFocus = useCallback(function (e) {
+  const handleFocus = useCallback(e => {
     setInputInFocus(true);
     onFocus(e);
     setHandleOpening(true);
   }, []);
 
-  var handleBlur = function handleBlur(e) {
+  const handleBlur = e => {
     setInputInFocus(false);
     if (!inlineMenu) setMenuOpen(false);
     onBlur(e, value);
     setHandleOpening(false);
   };
 
-  var ctx = useMemo( // contexts values must be memoized to avoid heavy performance hits
-  function () {
-    return {
-      inputInFocus: inputInFocus,
-      value: value,
-      isMulti: isMulti,
-      menuOpen: menuOpen,
-      handleOpening: handleOpening,
-      selectAll: selectAll,
-      selectAllDisabled: selectAllDisabled,
-      changeHandleOpening: function changeHandleOpening(isOpen) {
-        return setHandleOpening(isOpen);
-      },
-      changeMenuOpen: function changeMenuOpen(isOpen) {
-        return setMenuOpen(isOpen);
-      },
-      onClickDropdownIndicator: onClickDropdownIndicator,
-      onSelectAll: function onSelectAll(val) {
-        return _onSelectAll(val);
-      },
-      clearable: clearable,
-      removeDropdownIndicator: customComponents.DropdownIndicator === null,
-      select: select
-    };
-  }, [inputInFocus, value, isMulti, menuOpen, handleOpening, selectAll, selectAllDisabled, clearable, customComponents.DropdownIndicator, select]);
-  return /*#__PURE__*/React.createElement(TooltipTextProvider, null, /*#__PURE__*/React.createElement(DropDownContext.Provider, {
+  const ctx = useMemo( // contexts values must be memoized to avoid heavy performance hits
+  () => ({
+    inputInFocus,
+    value,
+    isMulti,
+    menuOpen,
+    handleOpening,
+    selectAll,
+    selectAllDisabled,
+    changeHandleOpening: isOpen => setHandleOpening(isOpen),
+    changeMenuOpen: isOpen => setMenuOpen(isOpen),
+    onClickDropdownIndicator,
+    onSelectAll: val => onSelectAll(val),
+    clearable,
+    removeDropdownIndicator: customComponents.DropdownIndicator === null,
+    select
+  }), [inputInFocus, value, isMulti, menuOpen, handleOpening, selectAll, selectAllDisabled, clearable, customComponents.DropdownIndicator, select]);
+  return /*#__PURE__*/_jsx(TooltipTextProvider, {}, void 0, /*#__PURE__*/_jsx(DropDownContext.Provider, {
     value: ctx
-  }, /*#__PURE__*/React.createElement(Manager, null, /*#__PURE__*/React.createElement("div", _extends({
+  }, void 0, /*#__PURE__*/_jsx(Manager, {}, void 0, /*#__PURE__*/jsx("div", _objectSpread(_objectSpread({
     ref: measureRef,
     className: cx("".concat(container), inputInFocus && 'in-focus', hasError && 'with-error', disabled && 'is-disabled', className),
     onBlur: handleBlur,
     "data-testid": "combobox",
     role: "combobox"
-  }, containerProps), /*#__PURE__*/React.createElement(SelectComponent, _extends({
-    ref: select,
-    autoFocus: autoFocus,
-    classNamePrefix: blockName // If it is multiselect let the menu open on select.
-    ,
-    closeMenuOnSelect: !isMulti,
-    components: _objectSpread({
-      Control: Control,
-      // IndicatorSeparator,
-      Menu: SelectMenu,
-      DropdownIndicator: DropdownIndicator,
-      ClearIndicator: isFreeSolo ? null : ClearIndicator,
-      GroupHeading: GroupHeading,
-      MultiValueLabel: MultiValueLabel,
-      MultiValueRemove: MultiValueRemove,
-      SingleValue: SingleValueLabel,
-      MenuList: MenuList,
-      ValueContainer: ValueContainer
-    }, customComponents),
-    customMenuItemOptions: _objectSpread({
-      maxOptions: maxOptions
-    }, customMenuItemOptions),
-    expandMenuOutsideContainer: expandMenuOutsideContainer,
-    expandMenuToContainer: expandMenuToContainer,
-    filterOption: filterOption,
-    getOptionLabel: function getOptionLabel(option) {
-      return option[labelProperty];
-    },
-    getOptionValue: function getOptionValue(option) {
-      return option[valueProperty];
-    },
-    formatCreateLabel: formatCreateLabel,
-    createOptionPosition: createOptionPosition,
-    hideSelectedOptions: hideSelectedOptions,
-    inlineMenu: inlineMenu,
-    isClearable: clearable,
-    isDisabled: disabled || readOnly,
-    isFocused: isFocused,
-    isMulti: isMulti,
-    isRtl: isRtl,
-    isSearchable: readOnly ? false : searchable,
-    menuIsOpen: menuIsOpen === true ? menuIsOpen : menuOpen,
-    onMenuClose: onMenuClose,
-    noOptionsMessage: function noOptionsMessage() {
-      return loading ? /*#__PURE__*/React.createElement(LoadingIndicator, null) : _noOptionsMessage;
-    },
-    onChange: handleOnChange,
-    onCreateOption: handleCreateNewOption,
-    onFocus: handleFocus,
-    onInputChange: handleInputChange,
-    onInputKeyDown: onInputKeyDown,
-    onKeyDown: handleOnKeyDown,
-    options: loading ? [] : options,
-    placeholder: placeholder,
-    selectMeasure: contentRect,
-    styles: _objectSpread({
-      control: function control() {
-        return null;
-      },
-      option: function option() {
-        return null;
-      },
-      dropdownIndicator: function dropdownIndicator() {
-        return null;
-      },
-      groupHeading: function groupHeading(provided) {
-        return _objectSpread(_objectSpread({}, provided), {}, {
+  }, containerProps), {}, {
+    children: /*#__PURE__*/jsx(SelectComponent, _objectSpread({
+      ref: select,
+      autoFocus: autoFocus,
+      classNamePrefix: blockName // If it is multiselect let the menu open on select.
+      ,
+      closeMenuOnSelect: !isMulti,
+      components: _objectSpread({
+        Control,
+        // IndicatorSeparator,
+        Menu: SelectMenu,
+        DropdownIndicator,
+        ClearIndicator: isFreeSolo ? null : ClearIndicator,
+        GroupHeading,
+        MultiValueLabel,
+        MultiValueRemove,
+        SingleValue: SingleValueLabel,
+        MenuList,
+        ValueContainer
+      }, customComponents),
+      customMenuItemOptions: _objectSpread({
+        maxOptions
+      }, customMenuItemOptions),
+      expandMenuOutsideContainer: expandMenuOutsideContainer,
+      expandMenuToContainer: expandMenuToContainer,
+      filterOption: filterOption,
+      getOptionLabel: option => option[labelProperty],
+      getOptionValue: option => option[valueProperty],
+      formatCreateLabel: formatCreateLabel,
+      createOptionPosition: createOptionPosition,
+      hideSelectedOptions: hideSelectedOptions,
+      inlineMenu: inlineMenu,
+      isClearable: clearable,
+      isDisabled: disabled || readOnly,
+      isFocused: isFocused,
+      isMulti: isMulti,
+      isRtl: isRtl,
+      isSearchable: readOnly ? false : searchable,
+      menuIsOpen: menuIsOpen === true ? menuIsOpen : menuOpen,
+      onMenuClose: onMenuClose,
+      noOptionsMessage: () => loading ? _LoadingIndicator || (_LoadingIndicator = /*#__PURE__*/_jsx(LoadingIndicator, {})) : noOptionsMessage,
+      onChange: handleOnChange,
+      onCreateOption: handleCreateNewOption,
+      onFocus: handleFocus,
+      onInputChange: handleInputChange,
+      onInputKeyDown: onInputKeyDown,
+      onKeyDown: handleOnKeyDown,
+      options: loading ? [] : options,
+      placeholder: placeholder,
+      selectMeasure: contentRect,
+      styles: _objectSpread({
+        control: () => null,
+        option: () => null,
+        dropdownIndicator: () => null,
+        groupHeading: provided => _objectSpread(_objectSpread({}, provided), {}, {
           color: theme.colors.neutral[500]
-        });
-      },
-      clearIndicator: function clearIndicator() {
-        return null;
-      },
-      placeholder: function placeholder() {
-        return null;
-      },
-      indicatorSeparator: function indicatorSeparator() {
-        return null;
-      },
-      singleValue: function singleValue(provided) {
-        return _objectSpread(_objectSpread({}, provided), {}, {
+        }),
+        clearIndicator: () => null,
+        placeholder: () => null,
+        indicatorSeparator: () => null,
+        singleValue: provided => _objectSpread(_objectSpread({}, provided), {}, {
           maxWidth: '90%'
-        });
-      },
-      multiValueLabel: function multiValueLabel(provided) {
-        return _objectSpread(_objectSpread({}, provided), {}, {
+        }),
+        multiValueLabel: provided => _objectSpread(_objectSpread({}, provided), {}, {
           backgroundColor: 'transparent'
-        });
-      },
-      multiValue: function multiValue(provided) {
-        return _objectSpread(_objectSpread({}, provided), {}, {
+        }),
+        multiValue: provided => _objectSpread(_objectSpread({}, provided), {}, {
           backgroundColor: 'transparent'
-        });
-      },
-      multiValueRemove: function multiValueRemove(provided) {
-        return _objectSpread(_objectSpread({}, provided), {}, {
+        }),
+        multiValueRemove: provided => _objectSpread(_objectSpread({}, provided), {}, {
           '&:hover': {
             backgroundColor: 'transparent',
             color: theme.colors.neutral[800]
           }
-        });
-      },
-      valueContainer: function valueContainer(provided) {
-        return _objectSpread(_objectSpread({}, provided), {}, {
+        }),
+        valueContainer: provided => _objectSpread(_objectSpread({}, provided), {}, {
           flexWrap: 'nowrap'
-        });
-      },
-      menu: function menu() {
-        if (expandMenuOutsideContainer) {
-          var width = calculateWidth(options);
-          if (!width) return null;
-          return {
-            width: "".concat(width, "px")
+        }),
+        menu: () => {
+          if (expandMenuOutsideContainer) {
+            const width = calculateWidth(options);
+            if (!width) return null;
+            return {
+              width: "".concat(width, "px")
+            };
+          }
+
+          if (loading) return {
+            height: '72px'
           };
+          return null;
         }
-
-        if (loading) return {
-          height: '72px'
-        };
-        return null;
-      }
-    }, componentsStyle),
-    tabSelectsValue: !isMulti,
-    value: value,
-    inputValue: inputValue,
-    zIndex: zIndex
-  }, restPropsToCustomizeSelect))))));
+      }, componentsStyle),
+      tabSelectsValue: !isMulti,
+      value: value,
+      inputValue: inputValue,
+      zIndex: zIndex
+    }, restPropsToCustomizeSelect))
+  })))));
 };
 
-var comboBoxProps = {
+const comboBoxProps = {
   containerProps: PropTypes.object.description('Set of Properties attached to the main container'),
   value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.object]).description('Selected value').isRequired,
   options: PropTypes.array.description('List of options'),
@@ -549,10 +431,8 @@ var comboBoxProps = {
   zIndex: PropTypes.number.description('z-index value').defaultValue(11),
   keepTypedValue: PropTypes.bool.description('keep typed value in the input').deprecated('use ComboBoxFreeSolo instead')
 };
-DSComboBox2HOCLess.propTypes = comboBoxProps;
-var DSComboBox2 = withSelectStringValueConverter(withContentRect('bounds')(DSComboBox2HOCLess));
-var ComboBoxWithSchema = describe(DSComboBox2HOCLess);
+const DSComboBox2 = withSelectStringValueConverter(withContentRect('bounds')(DSComboBox2HOCLess));
+const ComboBoxWithSchema = describe(DSComboBox2HOCLess);
 ComboBoxWithSchema.propTypes = comboBoxProps;
 
 export { ComboBoxWithSchema, DSComboBox2, DSComboBox2 as default };
-//# sourceMappingURL=Combobox.js.map