@elliemae/ds-form 2.0.0-next.8 → 2.0.0-rc.11

package/cjs/ComboBox/v3/parts/multi-selected-values-container/MultiSelectedValuesContainer.js

@@ -0,0 +1,63 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('core-js/modules/esnext.async-iterator.map.js');
+require('core-js/modules/esnext.iterator.map.js');
+var React = require('react');
+var Grid = require('@elliemae/ds-grid');
+var dsPills = require('@elliemae/ds-pills');
+var ComboBoxCTX = require('../../ComboBoxCTX.js');
+var useGroupPills = require('./useGroupPills.js');
+var MultiAllyMessages = require('../a11y-messages/MultiAllyMessages.js');
+require('styled-components');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var Grid__default = /*#__PURE__*/_interopDefaultLegacy(Grid);
+
+var _MultiAllyMessages;
+
+const MultiSelectedValuesContainer = () => {
+  var _inputRef$current2;
+
+  const {
+    props: {
+      selectedValues
+    },
+    inputRef,
+    pillGroupRef
+  } = React.useContext(ComboBoxCTX.ComboBoxContext);
+  const multiSelectedValue = selectedValues;
+  const pillsToShow = useGroupPills.useGroupPills();
+  const correctPillsToShow = pillsToShow || 1;
+  const pills = React.useMemo(() => /*#__PURE__*/_jsx__default["default"](Grid__default["default"], {
+    style: {
+      width: 'max-content'
+    }
+  }, void 0, /*#__PURE__*/_jsx__default["default"](dsPills.DSPillGroupV2, {
+    innerRef: pillGroupRef
+  }, void 0, multiSelectedValue.length > 0 && multiSelectedValue.slice(0, correctPillsToShow).map(option => {
+    var _inputRef$current;
+
+    return /*#__PURE__*/_jsx__default["default"](dsPills.DSPillV2, {
+      size: "s",
+      labelTruncated: ((_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.value) === '' || correctPillsToShow !== pillsToShow,
+      label: option.label,
+      type: "value"
+    }, option.value);
+  }), multiSelectedValue.length > 0 && correctPillsToShow !== multiSelectedValue.length && /*#__PURE__*/_jsx__default["default"](dsPills.DSPillV2, {
+    size: "s",
+    labelTruncated: false,
+    label: "+".concat(multiSelectedValue.length - correctPillsToShow),
+    type: "value"
+  }, "grouped"))), [pillsToShow, pillGroupRef, inputRef, multiSelectedValue, correctPillsToShow]);
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [multiSelectedValue.length > 0 && !((_inputRef$current2 = inputRef.current) !== null && _inputRef$current2 !== void 0 && _inputRef$current2.value) && (_MultiAllyMessages || (_MultiAllyMessages = /*#__PURE__*/_jsx__default["default"](MultiAllyMessages.MultiAllyMessages, {}))), pills]
+  });
+};
+
+exports.MultiSelectedValuesContainer = MultiSelectedValuesContainer;

package/cjs/ComboBox/v3/parts/multi-selected-values-container/index.js

@@ -0,0 +1,9 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var MultiSelectedValuesContainer = require('./MultiSelectedValuesContainer.js');
+
+
+
+exports.MultiSelectedValuesContainer = MultiSelectedValuesContainer.MultiSelectedValuesContainer;

package/cjs/ComboBox/v3/parts/multi-selected-values-container/styled.js

@@ -0,0 +1,23 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styled = require('styled-components');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+const StyledGroupedPillPopoverContent = /*#__PURE__*/styled__default["default"].div.withConfig({
+  componentId: "sc-1hugfiz-0"
+})(["padding:10px;background-color:#fff;"]);
+const StyledGroupPillWrapper = /*#__PURE__*/styled__default["default"].div.withConfig({
+  componentId: "sc-1hugfiz-1"
+})([""]);
+const StyledA11ySelectedValues = /*#__PURE__*/styled__default["default"].span.withConfig({
+  componentId: "sc-1hugfiz-2"
+})(["width:1px;height:1px;position:absolute;clip:rect(1px,1px,1px,1px);"]);
+
+exports.StyledA11ySelectedValues = StyledA11ySelectedValues;
+exports.StyledGroupPillWrapper = StyledGroupPillWrapper;
+exports.StyledGroupedPillPopoverContent = StyledGroupedPillPopoverContent;

package/cjs/ComboBox/v3/parts/multi-selected-values-container/useGroupPills.js

@@ -0,0 +1,71 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('core-js/modules/web.dom-collections.iterator.js');
+require('core-js/modules/esnext.async-iterator.map.js');
+require('core-js/modules/esnext.iterator.map.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+var React = require('react');
+var useOnElementResize = require('../../utils/hooks/useOnElementResize.js');
+var ComboBoxCTX = require('../../ComboBoxCTX.js');
+
+const getGroupedPillWidth = remainingPills => {
+  if (remainingPills === 0) return 0;
+  const digits = remainingPills.toString().length;
+  return 8 * (digits - 1) + 31;
+};
+
+const useGroupPills = () => {
+  const {
+    props: {
+      selectedValues
+    },
+    selectedOptionsRef,
+    controlsWrapperRef,
+    pillGroupRef
+  } = React.useContext(ComboBoxCTX.ComboBoxContext);
+  const multiSelectedValues = selectedValues;
+  const [pillsToShow, setPillsToShow] = React.useState(multiSelectedValues.length);
+  const {
+    width
+  } = useOnElementResize.useOnElementResize(controlsWrapperRef);
+  React.useEffect(() => {
+    if (multiSelectedValues.length !== pillsToShow) {
+      setPillsToShow(multiSelectedValues.length);
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, [multiSelectedValues.length, width]);
+  React.useLayoutEffect(() => {
+    if (selectedOptionsRef.current) {
+      pillGroupRef.current.style.width = 'max-content';
+      let lastPillFit = -1;
+      let currentWidth = 0;
+      const referenceWidth = selectedOptionsRef.current.offsetWidth;
+      const pills = [...selectedOptionsRef.current.querySelectorAll('.ds-pill-wrapper-value')];
+      const pillsWidth = pills.map(pill => pill === null || pill === void 0 ? void 0 : pill.offsetWidth);
+      pillsWidth.forEach((pillWidth, idx) => {
+        currentWidth += pillWidth;
+
+        if (currentWidth + getGroupedPillWidth(multiSelectedValues.length - idx - 1) <= referenceWidth) {
+          lastPillFit = idx;
+        }
+      });
+
+      if (!(multiSelectedValues.length > 0 && pillsToShow !== multiSelectedValues.length)) {
+        const nextPillsToShow = lastPillFit + 1;
+
+        if (nextPillsToShow !== pillsToShow) {
+          setPillsToShow(nextPillsToShow);
+        }
+      }
+
+      pillGroupRef.current.style.width = 'fit-content';
+    }
+  }, [selectedOptionsRef, multiSelectedValues, pillsToShow, pillGroupRef, width]);
+  return pillsToShow;
+};
+
+exports.useGroupPills = useGroupPills;

package/cjs/ComboBox/v3/parts/single-selected-value-container/SingleSelectedValueContainer.js

@@ -0,0 +1,28 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+var React = require('react');
+var DSTruncatedTooltipText = require('@elliemae/ds-truncated-tooltip-text');
+var ComboBoxCTX = require('../../ComboBoxCTX.js');
+var styled = require('./styled.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+
+const SingleSelectedValueContainer = () => {
+  const {
+    props: {
+      selectedValues
+    },
+    showSelectedValue
+  } = React.useContext(ComboBoxCTX.ComboBoxContext);
+  const singleSelectedValue = selectedValues;
+  return /*#__PURE__*/_jsx__default["default"](styled.StyledSingleSelectedValue, {}, void 0, showSelectedValue ? /*#__PURE__*/_jsx__default["default"](DSTruncatedTooltipText.SimpleTruncatedTooltipText, {
+    value: singleSelectedValue === null || singleSelectedValue === void 0 ? void 0 : singleSelectedValue.label
+  }) : null);
+};
+
+exports.SingleSelectedValueContainer = SingleSelectedValueContainer;

package/cjs/ComboBox/v3/parts/single-selected-value-container/index.js

@@ -0,0 +1,9 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var SingleSelectedValueContainer = require('./SingleSelectedValueContainer.js');
+
+
+
+exports.SingleSelectedValueContainer = SingleSelectedValueContainer.SingleSelectedValueContainer;

package/cjs/ComboBox/v3/parts/single-selected-value-container/styled.js

@@ -0,0 +1,15 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styled = require('styled-components');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+const StyledSingleSelectedValue = /*#__PURE__*/styled__default["default"].div.withConfig({
+  componentId: "sc-ui9n59-0"
+})(["width:100%;display:flex;align-items:center;"]);
+
+exports.StyledSingleSelectedValue = StyledSingleSelectedValue;

package/cjs/ComboBox/v3/propTypes.js

@@ -0,0 +1,25 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var reactDesc = require('react-desc');
+
+const propTypes = {
+  placeholder: reactDesc.PropTypes.string.description('input s placeholder value').defaultValue(''),
+  options: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.array, reactDesc.PropTypes.object]).description('List of options').defaultValue([]),
+  selectedValues: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.arrayOf(reactDesc.PropTypes.object), reactDesc.PropTypes.object]).description('Array of option or single option selected'),
+  autoFocus: reactDesc.PropTypes.bool.description('Whether the combo box uses auto focus or not').defaultValue('false'),
+  hasError: reactDesc.PropTypes.bool.description('Whether the combo box has error or not').defaultValue('false'),
+  onChange: reactDesc.PropTypes.func.description('function triggered when an option is selected it will send the options selected').defaultValue(''),
+  onSelectAll: reactDesc.PropTypes.func.description('function triggered when ALL button is selected from the header menu list').defaultValue(''),
+  onFilter: reactDesc.PropTypes.func.description('function triggered when user type in the combobox input').defaultValue(''),
+  onCreate: reactDesc.PropTypes.func.description('function triggered when user select "create" a new item whenever is not a match in the all option list').defaultValue(''),
+  onClearAll: reactDesc.PropTypes.func.description('function triggered when user select CLEAR button from the header menu list').defaultValue(''),
+  onMenuOpen: reactDesc.PropTypes.func.description('function triggered when user open the menu list').defaultValue(''),
+  inputMinWidth: reactDesc.PropTypes.any.description('Minimum width for the combo box input controller').defaultValue(undefined),
+  menuMinWidth: reactDesc.PropTypes.any.description('Minimum width for the dropdown menu').defaultValue(undefined),
+  menuMaxHeight: reactDesc.PropTypes.any.description('Maximum height for the dropdown menu').defaultValue(undefined),
+  withToggle: reactDesc.PropTypes.bool.description('POC purpose this prop will not remain').defaultValue('false')
+};
+
+exports.propTypes = propTypes;

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

@@ -0,0 +1,152 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+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');
+var React = require('react');
+var ComboBoxCTX = require('../../ComboBoxCTX.js');
+var listHelper = require('../listHelper.js');
+
+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
+  } = React.useContext(ComboBoxCTX.ComboBoxContext);
+  const multiple = Array.isArray(selectedValues);
+  const selectableOptions = listHelper.getOptions(options);
+  const currentItemIndex = options.findIndex(opt => opt.dsId === focusOptionIdx);
+  const currentItem = options.find(item => item.dsId === focusOptionIdx);
+  const selectOption = React.useCallback(() => {
+    if (multiple) {
+      if (inputRef.current) onFilter(inputRef.current.value);
+    } else {
+      onFilter('');
+      if (inputRef.current) inputRef.current.value = '';
+      setShowSelectedValue(true);
+    }
+
+    onChange(options.find(item => item.dsId === focusOptionIdx));
+    setShowPopover(multiple ? true : !showPopover);
+  }, [multiple, options, focusOptionIdx, setShowPopover, showPopover, onFilter, inputRef, setShowSelectedValue, onChange]);
+  const onInputKeyDown = React.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('');
+      if (inputRef.current) inputRef.current.value = '';
+      return;
+    } // =============================================================================
+    // ENTER AND SPACE KEY SELECT OPTIONS AND OPEN CLOSE THE POPOVER
+    // =============================================================================
+
+
+    if (e.keyCode === 32 && targetElement.value === '' || e.key === 'Enter') {
+      e.preventDefault();
+
+      if (!showPopover && !inline) {
+        setShowPopover(true);
+      } else {
+        selectOption();
+      }
+    } // =============================================================================
+    // CTRL + ENTER + MULTIPLE: SELECT AND CLOSE MENU
+    // =============================================================================
+
+
+    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) {
+        const nextItemIndex = listHelper.findInCircularList(options, currentItemIndex, isOptionFocuseable);
+        setCurrentOption(options[nextItemIndex].dsId);
+        scrollOptionIntoView(options[nextItemIndex].dsId);
+      } else {
+        setShowPopover(true);
+      }
+    }
+
+    if (e.key === 'ArrowUp') {
+      e.preventDefault();
+
+      if (showPopover || inline) {
+        const nextItemIndex = listHelper.findInCircularList(options, currentItemIndex, isOptionFocuseable, -1);
+        setCurrentOption(options[nextItemIndex].dsId);
+        scrollOptionIntoView(options[nextItemIndex].dsId);
+      } else {
+        setShowPopover(true);
+        setTimeout(() => {
+          const nextItemIndex = listHelper.findInCircularList(options, 0, isOptionFocuseable, -1);
+          setCurrentOption(options[nextItemIndex].dsId);
+          scrollOptionIntoView(options[nextItemIndex].dsId);
+        });
+      }
+    } // =============================================================================
+    // ESCAPE
+    // =============================================================================
+
+
+    if (e.key === 'Escape' && !inline) {
+      setShowPopover(false); // TODO confirm funcionality
+      // onFilter('');
+      // inputRef.current.value = '';
+    } // =============================================================================
+    // BACKSPACE
+    // =============================================================================
+
+
+    if (e.key === 'Backspace' && targetElement.value.length <= 0 && !inline) {
+      if (multiple && !targetElement.value) {
+        if (selectedValues.length > 0) onChange(selectedValues[selectedValues.length - 1]);
+      } else {
+        onChange(null);
+      }
+
+      onFilter('');
+      setShowSelectedValue(true);
+    }
+
+    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
+  };
+};
+
+exports.useKeyboardNavigation = useKeyboardNavigation;

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

@@ -0,0 +1,37 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('core-js/modules/web.dom-collections.iterator.js');
+var React = require('react');
+
+// Taken and modified from https://stackoverflow.com/a/60218754
+
+const useOnElementResize = targetRef => {
+  var _targetRef$current, _targetRef$current2;
+
+  const [width, setWidth] = React.useState(targetRef.current ? (_targetRef$current = targetRef.current) === null || _targetRef$current === void 0 ? void 0 : _targetRef$current.offsetWidth : 0);
+  const [height, setHeight] = React.useState(targetRef.current ? (_targetRef$current2 = targetRef.current) === null || _targetRef$current2 === void 0 ? void 0 : _targetRef$current2.offsetWidth : 0);
+  const observer = React.useRef(null);
+  React.useEffect(() => {
+    function outputsize() {
+      if (targetRef.current) {
+        setWidth(targetRef.current.offsetWidth);
+        setHeight(targetRef.current.offsetHeight);
+      }
+    }
+
+    observer.current = new ResizeObserver(outputsize).observe(targetRef.current);
+    return () => {
+      var _observer$current;
+
+      (_observer$current = observer.current) === null || _observer$current === void 0 ? void 0 : _observer$current.disconnect();
+    };
+  }, [targetRef]);
+  return React.useMemo(() => ({
+    width,
+    height
+  }), [width, height]);
+};
+
+exports.useOnElementResize = useOnElementResize;

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

@@ -0,0 +1,39 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.some.js');
+require('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)) {
+    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));
+  }
+
+  const singleValue = value;
+  return (singleValue === null || singleValue === void 0 ? void 0 : singleValue.value) === activeOption.value;
+};
+const findInCircularList = function (list, from, criteria) {
+  let step = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 1;
+
+  for (let i = (from + step + list.length) % list.length; i !== from; i = (i + step + list.length) % list.length) {
+    if (criteria(list[i])) return i;
+  }
+
+  return from; // return same item
+};
+
+exports.findInCircularList = findInCircularList;
+exports.getOptions = getOptions;
+exports.getSelectableOptions = getSelectableOptions;
+exports.isSelected = isSelected;
+exports.isSelectedValueEmpty = isSelectedValueEmpty;
+exports.isSelectedValueMultiple = isSelectedValueMultiple;

package/cjs/ComboBoxFreeSolo/ComboBoxFreeSolo.js

@@ -1,11 +1,17 @@
 'use strict';
 
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.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 _jsx = require('@babel/runtime/helpers/jsx');
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 require('react');
 var lodash = require('lodash');
 require('../ComboBox/v1/DSComboBox.js');
 var Combobox = require('../ComboBox/v2/Combobox.js');
+require('../ComboBox/v3/ComboBox.js');
 var MultiValueLabel = require('./components/MultiValueLabel.js');
 var MultiValueRemove = require('./components/MultiValueRemove.js');
 var SingleValue = require('./components/SingleValue.js');
@@ -42,22 +48,23 @@ const customStyles = {
   })
 };
 
-function ComboBoxFreeSolo({
-  isMulti = false,
-  options = {},
-  value = [],
-  onChange = lodash.noop,
-  onChangeV2 = lodash.noop,
-  onInputChange = lodash.noop,
-  onFocus = lodash.noop,
-  onBlur = lodash.noop,
-  containerProps = {},
-  disabled = false,
-  menuIsOpen = false,
-  placeholder = 'Select values',
-  formatCreateLabel = val => "Create ".concat(val),
-  maxOptions = undefined
-}) {
+function ComboBoxFreeSolo(_ref) {
+  let {
+    isMulti = false,
+    options = {},
+    value = [],
+    onChange = lodash.noop,
+    onChangeV2 = lodash.noop,
+    onInputChange = lodash.noop,
+    onFocus = lodash.noop,
+    onBlur = lodash.noop,
+    containerProps = {},
+    disabled = false,
+    menuIsOpen = false,
+    placeholder = 'Select values',
+    formatCreateLabel = val => "Create ".concat(val),
+    maxOptions = undefined
+  } = _ref;
   return /*#__PURE__*/_jsx__default["default"](Combobox.DSComboBox2, {
     isFreeSolo: true,
     clearable: true,

package/cjs/ComboBoxFreeSolo/components/MultiValueLabel.js

@@ -19,21 +19,27 @@ const PillLabel = /*#__PURE__*/styled__default["default"].span.withConfig({
   componentId: "sc-1qoa267-1"
 })(["margin:0 4px;color:", ";white-space:nowrap;text-overflow:ellipsis;overflow:hidden;"], props => props.theme.colors.neutral[800]);
 
-const RemovablePill = ({
-  label,
-  clear
-}) => /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-  children: [/*#__PURE__*/_jsx__default["default"](RemovablePillWrapper, {
-    "data-testid": "pill-wrapper"
-  }, void 0, /*#__PURE__*/_jsx__default["default"](PillLabel, {}, void 0, label)), clear]
-});
-
-const MultiValueLabel = ({
-  children,
-  clear
-}) => /*#__PURE__*/_jsx__default["default"](RemovablePill, {
-  label: children,
-  clear: clear
-});
+const RemovablePill = _ref => {
+  let {
+    label,
+    clear
+  } = _ref;
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/_jsx__default["default"](RemovablePillWrapper, {
+      "data-testid": "pill-wrapper"
+    }, void 0, /*#__PURE__*/_jsx__default["default"](PillLabel, {}, void 0, label)), clear]
+  });
+};
+
+const MultiValueLabel = _ref2 => {
+  let {
+    children,
+    clear
+  } = _ref2;
+  return /*#__PURE__*/_jsx__default["default"](RemovablePill, {
+    label: children,
+    clear: clear
+  });
+};
 
 exports.MultiValueLabel = MultiValueLabel;

package/cjs/ComboBoxFreeSolo/components/MultiValueRemove.js

@@ -2,12 +2,17 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.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 _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _jsx = require('@babel/runtime/helpers/jsx');
 require('react');
 var styled = require('styled-components');
 var Select = require('react-select');
-var CloseXsmall = require('@elliemae/ds-icons/CloseXsmall');
+var dsIcons = require('@elliemae/ds-icons');
 var jsxRuntime = require('react/jsx-runtime');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -15,7 +20,6 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
-var CloseXsmall__default = /*#__PURE__*/_interopDefaultLegacy(CloseXsmall);
 
 var _PillCloseAddon;
 
@@ -27,7 +31,7 @@ const PillCloseAddon = /*#__PURE__*/styled__default["default"].div.withConfig({
 })(["cursor:pointer;height:", ";& > span{height:auto;}"], props => props.theme.space.xs);
 
 const MultiValueRemove = props => /*#__PURE__*/jsxRuntime.jsx(Select.components.MultiValueRemove, _objectSpread(_objectSpread({}, props), {}, {
-  children: _PillCloseAddon || (_PillCloseAddon = /*#__PURE__*/_jsx__default["default"](PillCloseAddon, {}, void 0, /*#__PURE__*/_jsx__default["default"](CloseXsmall__default["default"], {})))
+  children: _PillCloseAddon || (_PillCloseAddon = /*#__PURE__*/_jsx__default["default"](PillCloseAddon, {}, void 0, /*#__PURE__*/_jsx__default["default"](dsIcons.CloseXsmall, {})))
 }));
 
 MultiValueRemove.style = base => _objectSpread(_objectSpread({}, base), {}, {

package/cjs/ComboBoxFreeSolo/components/SingleValue.js

@@ -2,6 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.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 _jsx = require('@babel/runtime/helpers/jsx');
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 require('react');