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

package/esm/ComboBox/v3/utils/hooks/useKeyboardNavigation.js

@@ -1,54 +1,57 @@
+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 { useContext, useCallback } from 'react';
 import { ComboBoxContext } from '../../ComboBoxCTX.js';
 import { getOptions, findInCircularList } from '../listHelper.js';
 
-/* eslint-disable max-lines */
-
-var isOptionFocuseable = function isOptionFocuseable(opt) {
-  return !['section', 'separator'].includes(opt.type);
-};
-
-var useKeyboardNavigation = function useKeyboardNavigation() {
-  var _useContext = useContext(ComboBoxContext),
-      _useContext$props = _useContext.props,
-      inline = _useContext$props.inline,
-      onChange = _useContext$props.onChange,
-      onCreate = _useContext$props.onCreate,
-      options = _useContext$props.options,
-      selectedValues = _useContext$props.selectedValues,
-      onFilter = _useContext$props.onFilter,
-      setShowPopover = _useContext.setShowPopover,
-      showPopover = _useContext.showPopover,
-      setShowSelectedValue = _useContext.setShowSelectedValue,
-      focusOptionIdx = _useContext.focusOptionIdx,
-      inputRef = _useContext.inputRef,
-      setCurrentOption = _useContext.setCurrentOption,
-      scrollOptionIntoView = _useContext.scrollOptionIntoView;
-
-  var multiple = Array.isArray(selectedValues);
-  var selectableOptions = getOptions(options);
-  var currentItemIndex = options.findIndex(function (opt) {
-    return opt.dsId === focusOptionIdx;
-  });
-  var selectOption = useCallback(function () {
+const isOptionFocuseable = opt => !['section', 'separator'].includes(opt.type);
+
+const useKeyboardNavigation = () => {
+  const {
+    props: {
+      inline,
+      onSelectAll,
+      onKeyDown,
+      onChange,
+      onCreate,
+      options,
+      selectedValues,
+      onFilter
+    },
+    setShowPopover,
+    showPopover,
+    setShowSelectedValue,
+    focusOptionIdx,
+    inputRef,
+    setCurrentOption,
+    scrollOptionIntoView
+  } = useContext(ComboBoxContext);
+  const multiple = Array.isArray(selectedValues);
+  const selectableOptions = getOptions(options);
+  const currentItemIndex = options.findIndex(opt => opt.dsId === focusOptionIdx);
+  const currentItem = options.find(item => item.dsId === focusOptionIdx);
+  const selectOption = useCallback(() => {
     if (multiple) {
-      onFilter(inputRef.current.value);
+      if (inputRef.current) onFilter(inputRef.current.value);
     } else {
       onFilter('');
       if (inputRef.current) inputRef.current.value = '';
       setShowSelectedValue(true);
     }
 
-    onChange(options.find(function (item) {
-      return item.dsId === focusOptionIdx;
-    }));
+    onChange(options.find(item => item.dsId === focusOptionIdx));
     setShowPopover(multiple ? true : !showPopover);
   }, [multiple, options, focusOptionIdx, setShowPopover, showPopover, onFilter, inputRef, setShowSelectedValue, onChange]);
-  var onInputKeyDown = useCallback(function (e) {
-    var targetElement = e.target; // =============================================================================
-    // ENTER KEY TO CREATE ELEMENTS
+  const onInputKeyDown = useCallback(e => {
+    const targetElement = e.target; // =============================================================================
+    // CUSTOM KEYS
     // =============================================================================
 
+    onKeyDown(e, currentItem); // =============================================================================
+    // ENTER KEY TO CREATE ELEMENTS
+    // ======================================================      =================
+
     if (e.key === 'Enter' && onCreate && !selectableOptions.length) {
       onCreate(targetElement.value);
       onFilter('');
@@ -62,7 +65,7 @@ var useKeyboardNavigation = function useKeyboardNavigation() {
     if (e.keyCode === 32 && targetElement.value === '' || e.key === 'Enter') {
       e.preventDefault();
 
-      if (!showPopover) {
+      if (!showPopover && !inline) {
         setShowPopover(true);
       } else {
         selectOption();
@@ -74,15 +77,20 @@ var useKeyboardNavigation = function useKeyboardNavigation() {
 
     if (e.key === 'Enter' && e.ctrlKey && multiple) {
       setShowPopover(false);
+    }
+
+    if (e.key === 'a' && e.ctrlKey && multiple) {
+      onSelectAll();
     } // =============================================================================
     // ARROWS UP AND DOWN
     // =============================================================================
 
 
     if (e.key === 'ArrowDown') {
+      e.preventDefault();
+
       if (showPopover || inline) {
-        e.preventDefault();
-        var nextItemIndex = findInCircularList(options, currentItemIndex, isOptionFocuseable);
+        const nextItemIndex = findInCircularList(options, currentItemIndex, isOptionFocuseable);
         setCurrentOption(options[nextItemIndex].dsId);
         scrollOptionIntoView(options[nextItemIndex].dsId);
       } else {
@@ -91,20 +99,19 @@ var useKeyboardNavigation = function useKeyboardNavigation() {
     }
 
     if (e.key === 'ArrowUp') {
-      if (showPopover || inline) {
-        e.preventDefault();
-
-        var _nextItemIndex = findInCircularList(options, currentItemIndex, isOptionFocuseable, -1);
+      e.preventDefault();
 
-        setCurrentOption(options[_nextItemIndex].dsId);
-        scrollOptionIntoView(options[_nextItemIndex].dsId);
+      if (showPopover || inline) {
+        const nextItemIndex = findInCircularList(options, currentItemIndex, isOptionFocuseable, -1);
+        setCurrentOption(options[nextItemIndex].dsId);
+        scrollOptionIntoView(options[nextItemIndex].dsId);
       } else {
         setShowPopover(true);
-        setTimeout(function () {
-          var nextItemIndex = findInCircularList(options, 0, isOptionFocuseable, -1);
+        setTimeout(() => {
+          const nextItemIndex = findInCircularList(options, 0, isOptionFocuseable, -1);
           setCurrentOption(options[nextItemIndex].dsId);
           scrollOptionIntoView(options[nextItemIndex].dsId);
-        }, 1);
+        });
       }
     } // =============================================================================
     // ESCAPE
@@ -112,7 +119,9 @@ var useKeyboardNavigation = function useKeyboardNavigation() {
 
 
     if (e.key === 'Escape' && !inline) {
-      setShowPopover(false);
+      setShowPopover(false); // TODO confirm funcionality
+      // onFilter('');
+      // inputRef.current.value = '';
     } // =============================================================================
     // BACKSPACE
     // =============================================================================
@@ -120,38 +129,20 @@ var useKeyboardNavigation = function useKeyboardNavigation() {
 
     if (e.key === 'Backspace' && targetElement.value.length <= 0 && !inline) {
       if (multiple && !targetElement.value) {
-        var multiSelectedValues = selectedValues;
-        if (multiSelectedValues.length > 0) onChange(multiSelectedValues[multiSelectedValues.length - 1]);
+        if (selectedValues.length > 0) onChange(selectedValues[selectedValues.length - 1]);
       } else {
         onChange(null);
       }
 
       onFilter('');
       setShowSelectedValue(true);
-    } // =============================================================================
-    // SHIFT + TAB ON SINGLE SELECT: SELECT AND RETURN TO INPUT
-    // =============================================================================
-
-
-    if (e.key === 'Tab' && e.shiftKey && !multiple && showPopover) {
-      selectOption();
-      e.preventDefault();
-    } // =============================================================================
-    // TAB + SINGLE SELECT
-    // =============================================================================
-
-
-    if (e.key === 'Tab' && showPopover && !multiple) {
-      selectOption();
-      setShowPopover(false);
     }
 
-    if (e.key === 'Tab' && inline) {
-      e.preventDefault();
-    }
-  }, [scrollOptionIntoView, currentItemIndex, options, selectableOptions, inputRef, multiple, showPopover, selectedValues, inline, onChange, onCreate, onFilter, setCurrentOption, setShowPopover, setShowSelectedValue, selectOption]);
-  return onInputKeyDown;
+    if (e.key === 'Tab' && inline) ;
+  }, [scrollOptionIntoView, currentItemIndex, options, currentItem, selectableOptions, inputRef, multiple, showPopover, selectedValues, inline, onKeyDown, onSelectAll, onChange, onCreate, onFilter, setCurrentOption, setShowPopover, setShowSelectedValue, selectOption]);
+  return {
+    onInputKeyDown
+  };
 };
 
 export { useKeyboardNavigation };
-//# sourceMappingURL=useKeyboardNavigation.js.map

package/esm/ComboBox/v3/utils/hooks/useOnElementResize.js

@@ -1,44 +1,33 @@
-import _slicedToArray from '@babel/runtime/helpers/esm/slicedToArray';
+import 'core-js/modules/web.dom-collections.iterator.js';
 import { useState, useRef, useEffect, useMemo } from 'react';
 
 // Taken and modified from https://stackoverflow.com/a/60218754
 
-var useOnElementResize = function useOnElementResize(targetRef) {
+const useOnElementResize = targetRef => {
   var _targetRef$current, _targetRef$current2;
 
-  var _useState = useState(targetRef.current ? (_targetRef$current = targetRef.current) === null || _targetRef$current === void 0 ? void 0 : _targetRef$current.offsetWidth : 0),
-      _useState2 = _slicedToArray(_useState, 2),
-      width = _useState2[0],
-      setWidth = _useState2[1];
-
-  var _useState3 = useState(targetRef.current ? (_targetRef$current2 = targetRef.current) === null || _targetRef$current2 === void 0 ? void 0 : _targetRef$current2.offsetWidth : 0),
-      _useState4 = _slicedToArray(_useState3, 2),
-      height = _useState4[0],
-      setHeight = _useState4[1];
-
-  var observer = useRef(null);
-  useEffect(function () {
+  const [width, setWidth] = useState(targetRef.current ? (_targetRef$current = targetRef.current) === null || _targetRef$current === void 0 ? void 0 : _targetRef$current.offsetWidth : 0);
+  const [height, setHeight] = useState(targetRef.current ? (_targetRef$current2 = targetRef.current) === null || _targetRef$current2 === void 0 ? void 0 : _targetRef$current2.offsetWidth : 0);
+  const observer = useRef(null);
+  useEffect(() => {
     function outputsize() {
-      var _targetRef$current3, _targetRef$current4;
-
-      setWidth((_targetRef$current3 = targetRef.current) === null || _targetRef$current3 === void 0 ? void 0 : _targetRef$current3.offsetWidth);
-      setHeight((_targetRef$current4 = targetRef.current) === null || _targetRef$current4 === void 0 ? void 0 : _targetRef$current4.offsetHeight);
+      if (targetRef.current) {
+        setWidth(targetRef.current.offsetWidth);
+        setHeight(targetRef.current.offsetHeight);
+      }
     }
 
     observer.current = new ResizeObserver(outputsize).observe(targetRef.current);
-    return function () {
+    return () => {
       var _observer$current;
 
       (_observer$current = observer.current) === null || _observer$current === void 0 ? void 0 : _observer$current.disconnect();
     };
   }, [targetRef]);
-  return useMemo(function () {
-    return {
-      width: width,
-      height: height
-    };
-  }, [width, height]);
+  return useMemo(() => ({
+    width,
+    height
+  }), [width, height]);
 };
 
 export { useOnElementResize };
-//# sourceMappingURL=useOnElementResize.js.map

package/esm/ComboBox/v3/utils/listHelper.js

@@ -1,34 +1,26 @@
-var getSelectableOptions = function getSelectableOptions(options) {
-  return options ? options.filter(function (option) {
-    return option.type === 'option' && !option.disabled;
-  }) : [];
-};
-var getOptions = function getOptions(options) {
-  return options ? options.filter(function (option) {
-    return option.type === 'option';
-  }) : [];
-};
-var isSelectedValueEmpty = function isSelectedValueEmpty(value) {
-  return Array.isArray(value) ? value.length === 0 : !value;
-};
-var isSelectedValueMultiple = function isSelectedValueMultiple(value) {
-  return Array.isArray(value);
-};
-var isSelected = function isSelected(value, activeOption) {
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.some.js';
+import 'core-js/modules/esnext.iterator.some.js';
+
+const getSelectableOptions = options => options ? options.filter(option => option.type === 'option' && !option.disabled) : [];
+const getOptions = options => options ? options.filter(option => option.type === 'option') : [];
+const isSelectedValueEmpty = value => Array.isArray(value) ? value.length === 0 : !value;
+const isSelectedValueMultiple = value => Array.isArray(value);
+const isSelected = (value, activeOption) => {
   if (isSelectedValueMultiple(value)) {
-    var multiValue = value;
-    return multiValue.some(function (item) {
-      return (item === null || item === void 0 ? void 0 : item.value) === (activeOption === null || activeOption === void 0 ? void 0 : activeOption.value);
-    });
+    const multiValue = value;
+    return multiValue.some(item => (item === null || item === void 0 ? void 0 : item.value) === (activeOption === null || activeOption === void 0 ? void 0 : activeOption.value));
   }
 
-  var singleValue = value;
+  const singleValue = value;
   return (singleValue === null || singleValue === void 0 ? void 0 : singleValue.value) === activeOption.value;
 };
-var findInCircularList = function findInCircularList(list, from, criteria) {
-  var step = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 1;
+const findInCircularList = function (list, from, criteria) {
+  let step = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 1;
 
-  for (var i = (from + step + list.length) % list.length; i !== from; i = (i + step + list.length) % list.length) {
+  for (let i = (from + step + list.length) % list.length; i !== from; i = (i + step + list.length) % list.length) {
     if (criteria(list[i])) return i;
   }
 
@@ -36,4 +28,3 @@ var findInCircularList = function findInCircularList(list, from, criteria) {
 };
 
 export { findInCircularList, getOptions, getSelectableOptions, isSelected, isSelectedValueEmpty, isSelectedValueMultiple };
-//# sourceMappingURL=listHelper.js.map

package/esm/ComboBoxFreeSolo/ComboBoxFreeSolo.js

@@ -1,6 +1,11 @@
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.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 _jsx from '@babel/runtime/helpers/esm/jsx';
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
-import React from 'react';
-import PropTypes from 'prop-types';
+import 'react';
 import { noop } from 'lodash';
 import '../ComboBox/v1/DSComboBox.js';
 import { DSComboBox2 } from '../ComboBox/v2/Combobox.js';
@@ -9,174 +14,51 @@ import { MultiValueLabel } from './components/MultiValueLabel.js';
 import { MultiValueRemove } from './components/MultiValueRemove.js';
 import { SingleValue } from './components/SingleValue.js';
 import { SingleValueRemove } from './components/SingleValueRemove.js';
-import '@babel/runtime/helpers/esm/extends';
-import '@babel/runtime/helpers/esm/toConsumableArray';
-import '@babel/runtime/helpers/esm/objectWithoutProperties';
-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 'react-select';
-import 'react-popper';
-import 'react-measure';
-import '@elliemae/ds-utilities';
-import '../ComboBox/v1/withSelectStringValueConverter.js';
-import '@babel/runtime/helpers/esm/typeof';
-import '../prop-types-45aa1e9c.js';
-import '../ComboBox/v1/components/Control.js';
-import '../ComboBox/v1/components/DropdownIndicator.js';
-import '@elliemae/ds-icons';
-import '@elliemae/ds-button';
-import '../ComboBox/v1/components/SelectMenu.js';
-import '@elliemae/ds-overlay';
-import '@elliemae/ds-menu';
-import '@elliemae/ds-popper';
-import '../ComboBox/v1/components/ClearIndicator.js';
-import '../ComboBox/v1/components/MenuList.js';
-import '@babel/runtime/helpers/esm/slicedToArray';
-import 'react-window';
-import 'memoize-one';
-import '../ComboBox/v1/components/CustomOption.js';
-import '@elliemae/ds-truncated-tooltip-text';
-import '../ComboBox/v1/components/CustomOptionMulti.js';
-import '../Checkbox/DSCheckbox.js';
-import 'react-desc';
-import 'uid';
-import '@elliemae/ds-classnames';
-import '../Checkbox/elements/CheckMark.js';
-import 'styled-components';
-import '../Checkbox/defaultProps.js';
-import '../Checkbox/props.js';
-import '../ComboBox/v1/components/MultiSelectHeader.js';
-import '../ComboBox/v1/components/MultiValueLabel.js';
-import '../ComboBox/v1/components/MultiValueRemove.js';
-import '../ComboBox/v1/components/SingleValueLabel.js';
-import '../ComboBox/v1/components/calculateWidth.js';
-import '../ComboBox/v1/components/ValueContainer.js';
-import 'react-select/creatable';
-import '@elliemae/ds-system';
-import '../ComboBox/v2/components/DropdownIndicator.js';
-import '../ComboBox/v2/context.js';
-import '../ComboBox/v2/components/GroupHeading.js';
-import '@elliemae/ds-separator';
-import '../ComboBox/v2/components/utils.js';
-import '../ComboBox/v2/components/SelectMenu.js';
-import '../ComboBox/v2/components/Content.js';
-import '../ComboBox/v2/components/Control.js';
-import '../ComboBox/v2/components/ClearIndicator.js';
-import '../ComboBox/v2/components/MenuList.js';
-import '../ComboBox/v2/components/CustomOption.js';
-import '../ComboBox/v2/components/CustomOptionMulti.js';
-import '../ComboBox/v2/components/MultiSelectHeader.js';
-import '../ComboBox/v2/components/useMenuListHeight.js';
-import '../ComboBox/v2/components/MultiValueLabel.js';
-import '../ComboBox/v2/components/MultiValueRemove.js';
-import '../ComboBox/v2/components/SingleValueLabel.js';
-import '../ComboBox/v2/components/LoadingIndicator.js';
-import '@elliemae/ds-circular-progress-indicator';
-import '../ComboBox/v2/components/calculateWidth.js';
-import '../ComboBox/v2/components/ValueContainer.js';
-import '@elliemae/ds-props-helpers';
-import '../ComboBox/v3/config/useComboBox.js';
-import 'react-virtual';
-import '../ComboBox/v3/config/useGetPropsWithDefault.js';
-import '../ComboBox/v3/ComboBoxCTX.js';
-import '../ComboBox/v3/parts/container/Container.js';
-import '@elliemae/ds-popperjs';
-import '../ComboBox/v3/parts/container/styled.js';
-import '../ComboBox/v3/parts/controls/Controls.js';
-import '../ComboBox/v3/parts/dropdown-indicator/DropdownIndicator.js';
-import '@elliemae/ds-icons/ChevronSmallDown';
-import '../ComboBox/v3/parts/dropdown-indicator/styled.js';
-import '../ComboBox/v3/ComboboxDataTestids.js';
-import '../ComboBox/v3/parts/controls/styled.js';
-import '@elliemae/ds-grid';
-import '../ComboBox/v3/parts/multi-selected-values-container/MultiSelectedValuesContainer.js';
-import '@elliemae/ds-pills';
-import '../ComboBox/v3/parts/multi-selected-values-container/useGroupPills.js';
-import '../ComboBox/v3/utils/hooks/useOnElementResize.js';
-import '../ComboBox/v3/parts/a11y-messages/MultiAllyMessages.js';
-import '../ComboBox/v3/utils/listHelper.js';
-import '../ComboBox/v3/parts/a11y-messages/styled.js';
-import '../ComboBox/v3/parts/controls-input/ControlsInput.js';
-import '../ComboBox/v3/parts/controls-input/styled.js';
-import '../ComboBox/v3/utils/hooks/useKeyboardNavigation.js';
-import '../ComboBox/v3/parts/controls-input/useControlsInput.js';
-import '../ComboBox/v3/parts/single-selected-value-container/SingleSelectedValueContainer.js';
-import '../ComboBox/v3/parts/single-selected-value-container/styled.js';
-import '../ComboBox/v3/parts/menu-list/MenuList.js';
-import '../ComboBox/v3/parts/menu-list/styled.js';
-import '../ComboBox/v3/parts/header-list/HeaderList.js';
-import '../ComboBox/v3/parts/header-list/styled.js';
-import '../ComboBox/v3/parts/empty-state/index.js';
-import '../ComboBox/v3/parts/empty-state/styled.js';
-import '../ComboBox/v3/parts/menu-list/useMenuList.js';
-import '@elliemae/ds-form';
-import '../ComboBox/v3/propTypes.js';
 
 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 customStyles = {
+const customStyles = {
   multiValueRemove: MultiValueRemove.style,
   clearIndicator: SingleValueRemove.style,
-  multiValue: function multiValue(base) {
-    return _objectSpread(_objectSpread({}, base), {}, {
-      borderRadius: '10px',
-      backgroundColor: '#ebf6ff'
-    });
-  },
-  valueContainer: function valueContainer(base) {
-    return _objectSpread(_objectSpread({}, base), {}, {
-      display: '-webkit-box',
-      flexWrap: 'nowrap',
-      overflowX: 'scroll',
-      overflowY: 'hidden',
-      '-ms-overflow-style': 'none',
-      // IE and Edge
-      'scrollbar-width': 'none',
-      // Firefox
-      '::-webkit-scrollbar': {
-        display: 'none'
-      } // Chrome
-
-    });
-  }
+  multiValue: base => _objectSpread(_objectSpread({}, base), {}, {
+    borderRadius: '10px',
+    backgroundColor: '#ebf6ff'
+  }),
+  valueContainer: base => _objectSpread(_objectSpread({}, base), {}, {
+    display: '-webkit-box',
+    flexWrap: 'nowrap',
+    overflowX: 'scroll',
+    overflowY: 'hidden',
+    '-ms-overflow-style': 'none',
+    // IE and Edge
+    'scrollbar-width': 'none',
+    // Firefox
+    '::-webkit-scrollbar': {
+      display: 'none'
+    } // Chrome
+
+  })
 };
 
 function ComboBoxFreeSolo(_ref) {
-  var _ref$isMulti = _ref.isMulti,
-      isMulti = _ref$isMulti === void 0 ? false : _ref$isMulti,
-      _ref$options = _ref.options,
-      options = _ref$options === void 0 ? {} : _ref$options,
-      _ref$value = _ref.value,
-      value = _ref$value === void 0 ? [] : _ref$value,
-      _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$onInputChange = _ref.onInputChange,
-      onInputChange = _ref$onInputChange === void 0 ? noop : _ref$onInputChange,
-      _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$containerProps = _ref.containerProps,
-      containerProps = _ref$containerProps === void 0 ? {} : _ref$containerProps,
-      _ref$disabled = _ref.disabled,
-      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      _ref$menuIsOpen = _ref.menuIsOpen,
-      menuIsOpen = _ref$menuIsOpen === void 0 ? false : _ref$menuIsOpen,
-      _ref$placeholder = _ref.placeholder,
-      placeholder = _ref$placeholder === void 0 ? 'Select values' : _ref$placeholder,
-      _ref$formatCreateLabe = _ref.formatCreateLabel,
-      formatCreateLabel = _ref$formatCreateLabe === void 0 ? function (val) {
-    return "Create ".concat(val);
-  } : _ref$formatCreateLabe,
-      _ref$maxOptions = _ref.maxOptions,
-      maxOptions = _ref$maxOptions === void 0 ? undefined : _ref$maxOptions;
-  return /*#__PURE__*/React.createElement(DSComboBox2, {
+  let {
+    isMulti = false,
+    options = {},
+    value = [],
+    onChange = noop,
+    onChangeV2 = noop,
+    onInputChange = noop,
+    onFocus = noop,
+    onBlur = noop,
+    containerProps = {},
+    disabled = false,
+    menuIsOpen = false,
+    placeholder = 'Select values',
+    formatCreateLabel = val => "Create ".concat(val),
+    maxOptions = undefined
+  } = _ref;
+  return /*#__PURE__*/_jsx(DSComboBox2, {
     isFreeSolo: true,
     clearable: true,
     isMulti: isMulti,
@@ -196,83 +78,12 @@ function ComboBoxFreeSolo(_ref) {
     containerProps: containerProps,
     maxOptions: maxOptions,
     components: {
-      MultiValueLabel: MultiValueLabel,
-      MultiValueRemove: MultiValueRemove,
-      SingleValue: SingleValue
+      MultiValueLabel,
+      MultiValueRemove,
+      SingleValue
     },
     componentsStyle: customStyles
   });
 }
 
-ComboBoxFreeSolo.propTypes = {
-  containerProps: PropTypes.object,
-
-  /**
-   * Allows a function that is triggered once the combo box is focused
-   */
-  onFocus: PropTypes.func,
-
-  /**
-   * Allows a function that is triggered once the combo box loses focus
-   */
-  onBlur: PropTypes.func,
-
-  /**
-   * Allows a function that is triggered when a new value is selected from the dropdown menu
-   */
-  onChange: PropTypes.func.isRequired,
-
-  /**
-   * Allows a function that is triggered when a new value is selected from the dropdown menu
-   * It will return the current options selected
-   */
-  onChangeV2: PropTypes.func,
-
-  /**
-   * Allows a function that is triggered once the input value changes (on every keystroke)
-   */
-  onInputChange: PropTypes.func,
-  value: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
-
-  /**
-   * Value that the combo box has as default
-   */
-  options: PropTypes.arrayOf(PropTypes.object),
-
-  /**
-   * Whether the combo box is disabled or not
-   */
-  disabled: PropTypes.bool,
-
-  /**
-   * Whether the combo box free solo is multi selectable or not
-   */
-  isMulti: PropTypes.bool,
-
-  /**
-   * Placeholder for the combo box
-   */
-  placeholder: PropTypes.string,
-
-  /**
-   * Whether the combo box menu is open or not
-   */
-  menuIsOpen: PropTypes.bool,
-
-  /**
-   * Whether to show the combo box menu inline or not
-   */
-
-  /**
-   * function that reciveves the new value and returns the formatted value
-   */
-  formatCreateLabel: PropTypes.func,
-
-  /**
-   * Max options to be displayed on the menu list
-   */
-  maxOptions: PropTypes.number
-};
-
 export { ComboBoxFreeSolo as default };
-//# sourceMappingURL=ComboBoxFreeSolo.js.map