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

package/cjs/ComboBox/v2/Combobox.js

@@ -2,11 +2,35 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _extends = require('@babel/runtime/helpers/extends');
+var _jsx = require('@babel/runtime/helpers/jsx');
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
-var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
-var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+require('core-js/modules/esnext.async-iterator.map.js');
+require('core-js/modules/esnext.iterator.map.js');
+require('core-js/modules/web.dom-collections.iterator.js');
+require('core-js/modules/esnext.async-iterator.find.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.find.js');
+require('core-js/modules/esnext.set.add-all.js');
+require('core-js/modules/esnext.set.delete-all.js');
+require('core-js/modules/esnext.set.difference.js');
+require('core-js/modules/esnext.set.every.js');
+require('core-js/modules/esnext.set.filter.js');
+require('core-js/modules/esnext.set.find.js');
+require('core-js/modules/esnext.set.intersection.js');
+require('core-js/modules/esnext.set.is-disjoint-from.js');
+require('core-js/modules/esnext.set.is-subset-of.js');
+require('core-js/modules/esnext.set.is-superset-of.js');
+require('core-js/modules/esnext.set.join.js');
+require('core-js/modules/esnext.set.map.js');
+require('core-js/modules/esnext.set.reduce.js');
+require('core-js/modules/esnext.set.some.js');
+require('core-js/modules/esnext.set.symmetric-difference.js');
+require('core-js/modules/esnext.set.union.js');
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
 var React = require('react');
 var lodash = require('lodash');
 var reactDesc = require('react-desc');
@@ -17,231 +41,132 @@ var reactMeasure = require('react-measure');
 var dsUtilities = require('@elliemae/ds-utilities');
 var dsSystem = require('@elliemae/ds-system');
 var DSTruncatedTooltipText = require('@elliemae/ds-truncated-tooltip-text');
-var ComboBox_v1_withSelectStringValueConverter = require('../v1/withSelectStringValueConverter.js');
-var ComboBox_v2_components_DropdownIndicator = require('./components/DropdownIndicator.js');
-var ComboBox_v2_components_GroupHeading = require('./components/GroupHeading.js');
-var ComboBox_v2_components_SelectMenu = require('./components/SelectMenu.js');
-var ComboBox_v2_components_Control = require('./components/Control.js');
-var ComboBox_v2_components_ClearIndicator = require('./components/ClearIndicator.js');
-var ComboBox_v2_components_MenuList = require('./components/MenuList.js');
-var ComboBox_v2_components_MultiValueLabel = require('./components/MultiValueLabel.js');
-var ComboBox_v2_components_MultiValueRemove = require('./components/MultiValueRemove.js');
-var ComboBox_v2_components_SingleValueLabel = require('./components/SingleValueLabel.js');
-var ComboBox_v2_components_LoadingIndicator = require('./components/LoadingIndicator.js');
-var ComboBox_v2_components_calculateWidth = require('./components/calculateWidth.js');
-var ComboBox_v2_components_ValueContainer = require('./components/ValueContainer.js');
-var ComboBox_v2_context = require('./context.js');
-require('@babel/runtime/helpers/classCallCheck');
-require('@babel/runtime/helpers/createClass');
-require('@babel/runtime/helpers/inherits');
-require('@babel/runtime/helpers/possibleConstructorReturn');
-require('@babel/runtime/helpers/getPrototypeOf');
-require('@babel/runtime/helpers/typeof');
-require('@elliemae/ds-icons');
-require('@elliemae/ds-button');
-require('styled-components');
-require('@elliemae/ds-separator');
-require('./components/utils.js');
-require('@elliemae/ds-popper');
-require('@elliemae/ds-classnames');
-require('./components/Content.js');
-require('prop-types');
-require('react-window');
-require('memoize-one');
-require('./components/CustomOption.js');
-require('./components/CustomOptionMulti.js');
-require('../../Checkbox/DSCheckbox.js');
-require('uid');
-require('../../Checkbox/elements/CheckMark.js');
-require('../../Checkbox/defaultProps.js');
-require('../../prop-types-0d5610b3.js');
-require('../../Checkbox/props.js');
-require('./components/MultiSelectHeader.js');
-require('./components/useMenuListHeight.js');
-require('@elliemae/ds-circular-progress-indicator');
+var withSelectStringValueConverter = require('../v1/withSelectStringValueConverter.js');
+var DropdownIndicator = require('./components/DropdownIndicator.js');
+var GroupHeading = require('./components/GroupHeading.js');
+var SelectMenu = require('./components/SelectMenu.js');
+var Control = require('./components/Control.js');
+var ClearIndicator = require('./components/ClearIndicator.js');
+var MenuList = require('./components/MenuList.js');
+var MultiValueLabel = require('./components/MultiValueLabel.js');
+var MultiValueRemove = require('./components/MultiValueRemove.js');
+var SingleValueLabel = require('./components/SingleValueLabel.js');
+var LoadingIndicator = require('./components/LoadingIndicator.js');
+var calculateWidth = require('./components/calculateWidth.js');
+var ValueContainer = require('./components/ValueContainer.js');
+var context = require('./context.js');
+var jsxRuntime = require('react/jsx-runtime');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
-var _toConsumableArray__default = /*#__PURE__*/_interopDefaultLegacy(_toConsumableArray);
-var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
 var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var Select__default = /*#__PURE__*/_interopDefaultLegacy(Select);
 var Creatable__default = /*#__PURE__*/_interopDefaultLegacy(Creatable);
 
-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__default['default'](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");
+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__default["default"](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; }
+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];
+  return isMulti ? options.map(mOption => mOption[valueProperty]) : options[valueProperty];
 };
 
-var createOption = function createOption(label, value) {
-  return {
-    label: label,
-    value: value
-  };
-};
-
-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 ? lodash.noop : _ref$onFocus,
-      _ref$onBlur = _ref.onBlur,
-      onBlur = _ref$onBlur === void 0 ? lodash.noop : _ref$onBlur,
-      _ref$onChange = _ref.onChange,
-      onChange = _ref$onChange === void 0 ? lodash.noop : _ref$onChange,
-      _ref$onChangeV = _ref.onChangeV2,
-      onChangeV2 = _ref$onChangeV === void 0 ? lodash.noop : _ref$onChangeV,
-      _ref$filterOption = _ref.filterOption,
-      filterOption = _ref$filterOption === void 0 ? Select.createFilter({
-    ignoreAccents: false
-  }) : _ref$filterOption,
-      _ref$onClickDropdownI = _ref.onClickDropdownIndicator,
-      onClickDropdownIndicator = _ref$onClickDropdownI === void 0 ? lodash.noop : _ref$onClickDropdownI,
-      _ref$onInputKeyDown = _ref.onInputKeyDown,
-      onInputKeyDown = _ref$onInputKeyDown === void 0 ? lodash.noop : _ref$onInputKeyDown,
-      _ref$onInputChange = _ref.onInputChange,
-      onInputChange = _ref$onInputChange === void 0 ? lodash.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 ? lodash.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,
-      restPropsToCustomizeSelect = _objectWithoutProperties__default['default'](_ref, _excluded);
-
-  var theme = dsSystem.useTheme();
-  var select = React.useRef();
-
-  var _useState = React.useState(false),
-      _useState2 = _slicedToArray__default['default'](_useState, 2),
-      selectAll = _useState2[0],
-      setSelectAll = _useState2[1];
-
-  var _useState3 = React.useState(false),
-      _useState4 = _slicedToArray__default['default'](_useState3, 2),
-      inputInFocus = _useState4[0],
-      setInputInFocus = _useState4[1];
-
-  var _useState5 = React.useState(selectedValue),
-      _useState6 = _slicedToArray__default['default'](_useState5, 2),
-      value = _useState6[0],
-      setValue = _useState6[1];
-
-  var _useState7 = React.useState(''),
-      _useState8 = _slicedToArray__default['default'](_useState7, 2),
-      inputValue = _useState8[0],
-      setInputValue = _useState8[1];
-
-  var _useState9 = React.useState(false),
-      _useState10 = _slicedToArray__default['default'](_useState9, 2),
-      handleOpening = _useState10[0],
-      setHandleOpening = _useState10[1];
-
-  var _useState11 = React.useState(menuIsOpen),
-      _useState12 = _slicedToArray__default['default'](_useState11, 2),
-      menuOpen = _useState12[0],
-      setMenuOpen = _useState12[1];
-
-  var _useState13 = React.useState(false),
-      _useState14 = _slicedToArray__default['default'](_useState13, 2),
-      isMultipleKeyPressed = _useState14[0],
-      setIsMultipleKeyPressed = _useState14[1];
-
-  var prevOptions = dsUtilities.usePrevious(options);
-  var optionsChanged = dsUtilities.useShouldRecalculate(dsUtilities.isEqual(prevOptions, options));
-  var SelectComponent = React.useMemo(function () {
-    return isFreeSolo ? Creatable__default['default'] : Select__default['default'];
-  }, [isFreeSolo]);
-  React.useEffect(function () {
+const createOption = (label, value) => ({
+  label,
+  value
+});
+
+const DSComboBox2HOCLess = _ref => {
+  let {
+    hideSelectedOptions = false,
+    autoFocus = false,
+    className = '',
+    hasError = false,
+    onFocus = lodash.noop,
+    onBlur = lodash.noop,
+    onChange = lodash.noop,
+    onChangeV2 = lodash.noop,
+    // onKeyDown = () => null,
+    filterOption = Select.createFilter({
+      ignoreAccents: false
+    }),
+    // this fix performance issue
+    onClickDropdownIndicator = lodash.noop,
+    onInputKeyDown = lodash.noop,
+    onInputChange = lodash.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 = lodash.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__default["default"](_ref, _excluded);
+
+  const theme = dsSystem.useTheme();
+  const select = React.useRef();
+  const [selectAll, setSelectAll] = React.useState(false);
+  const [inputInFocus, setInputInFocus] = React.useState(false);
+  const [value, setValue] = React.useState(selectedValue);
+  const [inputValue, setInputValue] = React.useState('');
+  const [handleOpening, setHandleOpening] = React.useState(false);
+  const [menuOpen, setMenuOpen] = React.useState(menuIsOpen);
+  const [isMultipleKeyPressed, setIsMultipleKeyPressed] = React.useState(false);
+  const prevOptions = dsUtilities.usePrevious(options);
+  const optionsChanged = dsUtilities.useShouldRecalculate(dsUtilities.isEqual(prevOptions, options));
+  const SelectComponent = React.useMemo(() => isFreeSolo ? Creatable__default["default"] : Select__default["default"], [isFreeSolo]);
+  React.useEffect(() => {
     var _select$current;
 
     setInputInFocus(isFocused);
     if (isFocused) (_select$current = select.current) === null || _select$current === void 0 ? void 0 : _select$current.focus();
   }, [isFocused]);
-  React.useEffect(function () {
+  React.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 = React.useCallback(function (val, action) {
+  const handleInputChange = React.useCallback((val, action) => {
     setInputValue(val);
 
     if (action.action === 'input-change' && !isMulti) {
@@ -258,7 +183,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);
     }
@@ -287,7 +212,7 @@ var DSComboBox2HOCLess = function DSComboBox2HOCLess(_ref) {
     }
   };
 
-  var handleOnChange = function handleOnChange(newValue, action) {
+  const handleOnChange = (newValue, action) => {
     onChangeV2(newValue, action);
     setMenuOpen(isMulti);
 
@@ -300,25 +225,15 @@ var DSComboBox2HOCLess = function DSComboBox2HOCLess(_ref) {
     return onChange(newValue, action);
   };
 
-  var _onSelectAll = React.useCallback(function (isSelected) {
+  const onSelectAll = React.useCallback(isSelected => {
     setSelectAll(isSelected);
 
     if (isSelected) {
-      var createdValues = Array.isArray(value) ? value : [];
-      var allOptions = [].concat(_toConsumableArray__default['default'](createdValues), _toConsumableArray__default['default'](options));
-
-      var optionsValues = _toConsumableArray__default['default'](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());
@@ -326,191 +241,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__default['default'](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 = React.useCallback(function (e) {
+  const handleFocus = React.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 = React.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__default['default'].createElement(DSTruncatedTooltipText.TooltipTextProvider, null, /*#__PURE__*/React__default['default'].createElement(ComboBox_v2_context.DropDownContext.Provider, {
+  const ctx = React.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__default["default"](DSTruncatedTooltipText.TooltipTextProvider, {}, void 0, /*#__PURE__*/_jsx__default["default"](context.DropDownContext.Provider, {
     value: ctx
-  }, /*#__PURE__*/React__default['default'].createElement(reactPopper.Manager, null, /*#__PURE__*/React__default['default'].createElement("div", _extends__default['default']({
+  }, void 0, /*#__PURE__*/_jsx__default["default"](reactPopper.Manager, {}, void 0, /*#__PURE__*/jsxRuntime.jsx("div", _objectSpread(_objectSpread({
     ref: measureRef,
     className: dsUtilities.cx("".concat(container), inputInFocus && 'in-focus', hasError && 'with-error', disabled && 'is-disabled', className),
     onBlur: handleBlur,
     "data-testid": "combobox",
     role: "combobox"
-  }, containerProps), /*#__PURE__*/React__default['default'].createElement(SelectComponent, _extends__default['default']({
-    ref: select,
-    autoFocus: autoFocus,
-    classNamePrefix: blockName // If it is multiselect let the menu open on select.
-    ,
-    closeMenuOnSelect: !isMulti,
-    components: _objectSpread({
-      Control: ComboBox_v2_components_Control,
-      // IndicatorSeparator,
-      Menu: ComboBox_v2_components_SelectMenu,
-      DropdownIndicator: ComboBox_v2_components_DropdownIndicator,
-      ClearIndicator: isFreeSolo ? null : ComboBox_v2_components_ClearIndicator,
-      GroupHeading: ComboBox_v2_components_GroupHeading,
-      MultiValueLabel: ComboBox_v2_components_MultiValueLabel,
-      MultiValueRemove: ComboBox_v2_components_MultiValueRemove,
-      SingleValue: ComboBox_v2_components_SingleValueLabel,
-      MenuList: ComboBox_v2_components_MenuList,
-      ValueContainer: ComboBox_v2_components_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__default['default'].createElement(ComboBox_v2_components_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__*/jsxRuntime.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: ValueContainer.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__default["default"](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 = ComboBox_v2_components_calculateWidth.calculateWidth(options);
-          if (!width) return null;
-          return {
-            width: "".concat(width, "px")
+        }),
+        menu: () => {
+          if (expandMenuOutsideContainer) {
+            const width = calculateWidth.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: reactDesc.PropTypes.object.description('Set of Properties attached to the main container'),
   value: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.string, reactDesc.PropTypes.number, reactDesc.PropTypes.object]).description('Selected value').isRequired,
   options: reactDesc.PropTypes.array.description('List of options'),
@@ -564,12 +443,10 @@ var comboBoxProps = {
   zIndex: reactDesc.PropTypes.number.description('z-index value').defaultValue(11),
   keepTypedValue: reactDesc.PropTypes.bool.description('keep typed value in the input').deprecated('use ComboBoxFreeSolo instead')
 };
-DSComboBox2HOCLess.propTypes = comboBoxProps;
-var DSComboBox2 = ComboBox_v1_withSelectStringValueConverter(reactMeasure.withContentRect('bounds')(DSComboBox2HOCLess));
-var ComboBoxWithSchema = reactDesc.describe(DSComboBox2HOCLess);
+const DSComboBox2 = withSelectStringValueConverter(reactMeasure.withContentRect('bounds')(DSComboBox2HOCLess));
+const ComboBoxWithSchema = reactDesc.describe(DSComboBox2HOCLess);
 ComboBoxWithSchema.propTypes = comboBoxProps;
 
 exports.ComboBoxWithSchema = ComboBoxWithSchema;
 exports.DSComboBox2 = DSComboBox2;
-exports['default'] = DSComboBox2;
-//# sourceMappingURL=Combobox.js.map
+exports["default"] = DSComboBox2;