@elliemae/ds-controlled-form 2.3.2-next.0 → 2.4.0-rc.0

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

@@ -10,6 +10,7 @@ var dsPills = require('@elliemae/ds-pills');
 var ComboBoxCTX = require('../../ComboBoxCTX.js');
 var useGroupPills = require('./useGroupPills.js');
 var ComboboxDataTestids = require('../../ComboboxDataTestids.js');
+var RemovableSelectedValuePill = require('./RemovableSelectedValuePill.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -19,9 +20,7 @@ const MultiSelectedValuesContainer = () => {
   const {
     props: {
       selectedValues,
-      disabled,
-      onChange,
-      innerRef
+      disabled
     },
     pillGroupRef
   } = React.useContext(ComboBoxCTX.ComboBoxContext); // this is always an array because logic in controls component
@@ -35,25 +34,15 @@ const MultiSelectedValuesContainer = () => {
     "data-testid": ComboboxDataTestids.ComboboxDataTestid.SELECTED_VALUES
   }, void 0, /*#__PURE__*/_jsx__default["default"](dsPills.DSPillGroupV2, {
     innerRef: pillGroupRef
-  }, void 0, multiSelectedValue.length > 0 && multiSelectedValue.slice(0, correctPillsToShow).map(option => /*#__PURE__*/_jsx__default["default"](dsPills.DSPillV2, {
-    size: "s",
-    label: option.label,
-    disabled: disabled,
-    type: disabled ? 'value' : 'removable',
-    tabIndex: -1,
-    onRemove: () => {
-      var _innerRef$current;
-
-      onChange(option);
-      (_innerRef$current = innerRef.current) === null || _innerRef$current === void 0 ? void 0 : _innerRef$current.focus();
-    }
-  }, option.value)), multiSelectedValue.length > 0 && correctPillsToShow !== multiSelectedValue.length && /*#__PURE__*/_jsx__default["default"](dsPills.DSPillV2, {
+  }, void 0, multiSelectedValue.length > 0 && multiSelectedValue.slice(0, correctPillsToShow).map(pill => /*#__PURE__*/_jsx__default["default"](RemovableSelectedValuePill.RemovableSelectedValuePill, {
+    pill: pill
+  }, pill.dsId)), multiSelectedValue.length > 0 && correctPillsToShow !== multiSelectedValue.length && /*#__PURE__*/_jsx__default["default"](dsPills.DSPillV2, {
     size: "s",
     labelTruncated: false,
     label: "+".concat(multiSelectedValue.length - correctPillsToShow),
     type: "value",
     disabled: disabled
-  }, "grouped"))), [pillGroupRef, multiSelectedValue, correctPillsToShow, disabled, onChange, innerRef]);
+  }, "grouped"))), [pillGroupRef, multiSelectedValue, correctPillsToShow, disabled]);
 };
 
 exports.MultiSelectedValuesContainer = MultiSelectedValuesContainer;

package/cjs/combobox/parts/multi-selected-values-container/RemovableSelectedValuePill.js

@@ -0,0 +1,42 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+var React = require('react');
+var dsPills = require('@elliemae/ds-pills');
+var ComboBoxCTX = require('../../ComboBoxCTX.js');
+var listHelper = require('../../utils/listHelper.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+
+const RemovableSelectedValuePill = props => {
+  const {
+    pill
+  } = props;
+  const {
+    props: {
+      onChange,
+      disabled,
+      selectedValues,
+      innerRef
+    }
+  } = React.useContext(ComboBoxCTX.ComboBoxContext);
+  return /*#__PURE__*/_jsx__default["default"](dsPills.DSPillV2, {
+    size: "s",
+    label: pill.label,
+    disabled: disabled,
+    type: disabled ? 'value' : 'removable',
+    tabIndex: -1,
+    onRemove: e => {
+      var _innerRef$current;
+
+      onChange(listHelper.getSuggestedValueOnChange(pill, selectedValues), pill, e);
+      (_innerRef$current = innerRef.current) === null || _innerRef$current === void 0 ? void 0 : _innerRef$current.focus();
+    }
+  }, pill.value);
+};
+
+exports.RemovableSelectedValuePill = RemovableSelectedValuePill;

package/cjs/combobox/react-desc-prop-types.js

@@ -26,10 +26,8 @@ const ComboboxPropTypes = _objectSpread(_objectSpread({}, dsPropsHelpers.globalA
   autoFocus: dsPropsHelpers.PropTypes.bool.description('Whether the combo box uses auto focus or not').defaultValue('false'),
   hasError: dsPropsHelpers.PropTypes.bool.description('Whether the combo box has error or not').defaultValue('false'),
   onChange: dsPropsHelpers.PropTypes.func.isRequired.description('function triggered when an option is selected it will send the options selected').defaultValue('() => {}'),
-  onSelectAll: dsPropsHelpers.PropTypes.func.description('function triggered when ALL button is selected from the header menu list').defaultValue('() => {}'),
   onFilter: dsPropsHelpers.PropTypes.func.description('function triggered when user type in the combobox input').defaultValue(''),
   onCreate: dsPropsHelpers.PropTypes.func.description('function triggered when user select "create" a new item whenever is not a match in the all option list').defaultValue(''),
-  onClearAll: dsPropsHelpers.PropTypes.func.description('function triggered when user select CLEAR button from the header menu list').defaultValue(''),
   onCancel: dsPropsHelpers.PropTypes.func.description('function triggered when user press ESC key').defaultValue('() => {}'),
   onMenuOpen: dsPropsHelpers.PropTypes.func.description('function triggered when user open the menu list').defaultValue('() => {}'),
   onMenuClose: dsPropsHelpers.PropTypes.func.description('function triggered when user close the menu list').defaultValue('() => {}'),

package/cjs/combobox/sharedTypes.js

@@ -4,6 +4,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var constants = require('./constants.js');
 
-const isSeparator = el => (el === null || el === void 0 ? void 0 : el.type) === constants.MENU_OPTION_TYPES.separator;
+const isSeparator = el => (el === null || el === void 0 ? void 0 : el.type) === constants.MENU_OPTION_TYPES.SEPARATOR;
+const isOption = el => (el === null || el === void 0 ? void 0 : el.type) === constants.MENU_OPTION_TYPES.OPTION;
 
+exports.isOption = isOption;
 exports.isSeparator = isSeparator;

package/cjs/combobox/utils/listHelper.js

@@ -7,6 +7,9 @@ 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');
+require('core-js/modules/esnext.async-iterator.find.js');
+require('core-js/modules/esnext.iterator.find.js');
+require('core-js/modules/web.dom-collections.iterator.js');
 var constants = require('../constants.js');
 
 const getSelectableOptions = options => options.filter(option => option.type === constants.MENU_OPTION_TYPES.OPTION && !option.disabled);
@@ -31,10 +34,54 @@ const findInCircularList = function (list, from, criteria) {
 
   return from; // return same item
 };
+const getFirstOption = (options, selectedValues, inputValue) => {
+  if (!inputValue) {
+    if (Array.isArray(selectedValues) && selectedValues.length > 0) {
+      return selectedValues[selectedValues.length - 1].dsId;
+    }
+
+    if (selectedValues !== null && selectedValues !== void 0 && selectedValues.dsId) {
+      return selectedValues.dsId;
+    }
+  }
+
+  for (let i = 0; i < options.length; i += 1) if (!['section', 'separator'].includes(options[i].type) && !options[i].disabled) {
+    return options[i].dsId;
+  }
+
+  return '';
+};
+const getSuggestedValueOnChange = (selectedOption, selectedValues) => {
+  if (Array.isArray(selectedValues)) {
+    const isFound = selectedValues.find(item => item.type === 'option' && item.value === selectedOption.value);
+
+    if (isFound) {
+      return selectedValues.filter(item => item.type === 'option' && item.value !== selectedOption.value);
+    }
+
+    return [...selectedValues, selectedOption];
+  }
+
+  if (selectedValues && selectedValues.dsId === selectedOption.dsId) {
+    return null;
+  }
+
+  return selectedOption;
+};
+const getLastValueSelected = selectedValues => {
+  if (Array.isArray(selectedValues)) {
+    return selectedValues[selectedValues.length - 1];
+  }
+
+  return selectedValues;
+};
 
 exports.findInCircularList = findInCircularList;
+exports.getFirstOption = getFirstOption;
+exports.getLastValueSelected = getLastValueSelected;
 exports.getOptions = getOptions;
 exports.getSelectableOptions = getSelectableOptions;
+exports.getSuggestedValueOnChange = getSuggestedValueOnChange;
 exports.isSelected = isSelected;
 exports.isSelectedValueEmpty = isSelectedValueEmpty;
 exports.isSelectedValueMultiple = isSelectedValueMultiple;

package/cjs/mask-hook/hooks/useNumberMask.js

@@ -34,24 +34,16 @@ const conformValue = (rawValue, cursorPos, lastKeyCode, opts) => {
     decimalRequired
   } = opts;
   const THOUSANDSSEPARATOR = ',';
-  let dotIdx = -1;
-  let isNegative = false;
-  let finalPrefix = ''; // Work with digits and dots only
+  let dotIdx = -1; // allow minus sign before and after the preffix
 
+  let finalPrefix = [prefix.length, 0].includes(rawValue.indexOf('-')) && allowNegative ? '-' : '';
   let maskedValue = rawValue.split('').filter((char, idx) => {
-    const validChar = char >= '0' && char <= '9' || char === '.' && dotIdx === -1 && idx > prefix.length + (isNegative ? 1 : 0) && decimalPlaces || char === '-' && (idx === 0 || prefix.length && idx === 1 && !isNegative) && allowNegative; // Allow first dot only
-
+    // we take only the first dot
+    const validChar = char >= '0' && char <= '9' || char === '.' && dotIdx === -1 && decimalPlaces;
     if (char === '.' && validChar) dotIdx = idx;
-
-    if (char === '-' && validChar) {
-      isNegative = true;
-      finalPrefix += '-';
-      return false;
-    }
-
     return validChar;
   });
-  if (prefix) finalPrefix += prefix; // REMOVE FOLLOWING ZEROS IN INTEGER PART AFTER LEADER ZERO NUMBER
+  if (prefix && maskedValue.length) finalPrefix += prefix; // REMOVE FOLLOWING ZEROS IN INTEGER PART AFTER LEADER ZERO NUMBER
 
   while (maskedValue.length >= 2 && maskedValue[0] === '0' && maskedValue[1] !== '.') {
     maskedValue = maskedValue.splice(1);
@@ -67,18 +59,26 @@ const conformValue = (rawValue, cursorPos, lastKeyCode, opts) => {
 
 
   if (dotIdx !== -1 && !(lastKeyCode === 'Backspace' && decimal.length === 1)) {
-    maskedValue = [...integer, ...decimal];
+    if (integer.length) {
+      maskedValue = [...integer, ...decimal];
+    } else {
+      // if theres no integer add a zero to the left of the dot to cover .23 => 0.23 case
+      maskedValue = ['0', ...decimal];
+    }
   } else {
     // If decimal is required we add a dot after integer if exists
     maskedValue = decimalRequired && integer.length ? [...integer, '.'] : integer;
-  }
+  } // remove orphans prefix for example "-$"
+
 
   if (lastKeyCode === 'Backspace' && maskedValue.length === 0) {
     finalPrefix = '';
-  } // SET REAL CURSOR POSITION AFTER ADDING SIMBOLS
+  } // SET REAL CURSOR POSITION AFTER ADDING DOT and COMMAS SEPARATORS
+
 
+  let maskedPos = 0; // 0 leading case we move the cursor to continue typing
 
-  let maskedPos = 0;
+  if (maskedValue[maskedPos] === '0' && cursorPos === 1 + prefix.length) maskedPos += 1;
 
   for (let i = 0; i < cursorPos; i += 1) {
     if (maskedValue[maskedPos] === THOUSANDSSEPARATOR) maskedPos += 1;
@@ -114,6 +114,7 @@ const useNumberMask = props => {
   const onBlur = React.useCallback(e => {
     const maskedValue = e.target.value;
     const dotIdx = maskedValue.indexOf('.');
+    const minusIndex = maskedValue.indexOf('-');
     const {
       decimalRequired,
       decimalPlaces,
@@ -134,6 +135,9 @@ const useNumberMask = props => {
     } else if (maskedValue.length - suffix.length - 1 === dotIdx) {
       // removing orphans dots
       valueSetter(maskedValue.replace('.', ''));
+    } else if (maskedValue.length - 1 === minusIndex) {
+      // removing orphans minus
+      valueSetter(maskedValue.replace('-', ''));
     }
 
     if (userOnBlur) userOnBlur(e);

package/cjs/mask-hook/hooks/usePhoneMask.js

@@ -21,7 +21,7 @@ var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_obje
 
 const _excluded = ["valueSetter", "onChange", "onKeyDown", "onBlur"];
 const phoneSpecialChars = [['(', 0], [') ', 4], ['-', 9]];
-const internationalPhoneSpecialChars = [['+1 (', 0], [') ', 7], ['-', 13]];
+const internationalPhoneSpecialChars = [['+1 (', 0], [') ', 7], ['-', 12]];
 
 const conformValue = (rawValue, cursorPos, lastKeyCode, opts) => {
   const characters = rawValue.split(''); // Work with digits only

package/esm/autocomplete/parts/controls/useKeyboardNavigation.js

@@ -0,0 +1,89 @@
+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 { AutocompleteContext } from '../../AutocompleteCTX.js';
+import { findInCircularList } from '../../utils/listHelper.js';
+
+const isOptionFocuseable = opt => !['section', 'separator'].includes(opt.type);
+
+const useKeyboardNavigation = () => {
+  const {
+    props: {
+      onValueChange,
+      options
+    },
+    setShowPopover,
+    showPopover,
+    focusOptionIdx,
+    setCurrentOption,
+    scrollOptionIntoView
+  } = useContext(AutocompleteContext);
+  const currentItemIndex = options.findIndex(opt => opt.dsId === focusOptionIdx);
+  const currentItem = options.find(item => item.type === 'option' && item.dsId === focusOptionIdx);
+  const selectOption = useCallback(e => {
+    if (onValueChange) onValueChange(currentItem.label, e);
+    setShowPopover(false);
+  }, [currentItem, setShowPopover, onValueChange]);
+  const onInputKeyDown = useCallback(e => {
+    const targetElement = e.target;
+
+    if (['ArrowDown', 'ArrowUp', 'Enter'].includes(e.key) || e.keyCode >= 48 && e.keyCode <= 90) {
+      setShowPopover(true);
+    } // =============================================================================
+    // ENTER AND SPACE KEY SELECT OPTIONS AND OPEN CLOSE THE POPOVER
+    // =============================================================================
+
+
+    if (e.keyCode === 32 && targetElement.value === '' || e.key === 'Enter') {
+      if (showPopover) {
+        e.preventDefault();
+        selectOption(e);
+      }
+    } // =============================================================================
+    // ARROWS UP AND DOWN
+    // =============================================================================
+
+
+    if (e.key === 'ArrowDown') {
+      e.preventDefault();
+
+      if (showPopover) {
+        const nextItemIndex = findInCircularList(options, currentItemIndex, isOptionFocuseable);
+        setCurrentOption(options[nextItemIndex].dsId);
+        scrollOptionIntoView(options[nextItemIndex].dsId);
+      } else {
+        setShowPopover(true);
+      }
+    }
+
+    if (e.key === 'ArrowUp') {
+      e.preventDefault();
+
+      if (showPopover) {
+        const nextItemIndex = findInCircularList(options, currentItemIndex, isOptionFocuseable, -1);
+        setCurrentOption(options[nextItemIndex].dsId);
+        scrollOptionIntoView(options[nextItemIndex].dsId);
+      } else {
+        setShowPopover(true);
+        setTimeout(() => {
+          const nextItemIndex = findInCircularList(options, 0, isOptionFocuseable, -1);
+          setCurrentOption(options[nextItemIndex].dsId);
+          scrollOptionIntoView(options[nextItemIndex].dsId);
+        });
+      }
+    } // =============================================================================
+    // ESCAPE
+    // =============================================================================
+
+
+    if (e.key === 'Escape') {
+      setShowPopover(false);
+    }
+  }, [scrollOptionIntoView, currentItemIndex, options, showPopover, setCurrentOption, setShowPopover, selectOption]);
+  return {
+    onInputKeyDown
+  };
+};
+
+export { useKeyboardNavigation };

package/esm/autocomplete/parts/controls/useMaskedOnChange.js

@@ -0,0 +1,24 @@
+import { useContext, useCallback } from 'react';
+import { AutocompleteContext } from '../../AutocompleteCTX.js';
+
+const useMaskedOnChange = () => {
+  const {
+    props: {
+      useMask,
+      onChange
+    },
+    setShowPopover
+  } = useContext(AutocompleteContext); // default onchange when no mask provided
+
+  const handleOnChange = useCallback(e => {
+    setShowPopover(true);
+    onChange(e.target.value);
+  }, [onChange, setShowPopover]);
+  const onChangeMask = useMask({
+    valueSetter: setInputValue,
+    onChange: handleOnChange
+  });
+  return (onChangeMask === null || onChangeMask === void 0 ? void 0 : onChangeMask.onChange) || handleOnChange;
+};
+
+export { useMaskedOnChange };

package/esm/autocomplete/react-desc-prop-types.js

@@ -0,0 +1,14 @@
+import { PropTypes } from '@elliemae/ds-props-helpers';
+
+/* eslint-disable @typescript-eslint/no-unused-vars */
+function noop() {}
+const propTypes = {
+  placeholder: PropTypes.string.description('input s placeholder value').defaultValue(''),
+  options: PropTypes.oneOfType([PropTypes.array, PropTypes.object]).description('List of options').defaultValue([]),
+  value: PropTypes.oneOfType([PropTypes.string]).description('Array of option or single option selected'),
+  autoFocus: PropTypes.bool.description('Whether the combo box uses auto focus or not').defaultValue('false'),
+  hasError: PropTypes.bool.description('Whether the combo box has error or not').defaultValue('false'),
+  onChange: PropTypes.func.description('function triggered when an option is selected it will send the options selected').defaultValue('')
+};
+
+export { noop, propTypes };

package/esm/autocomplete/sharedTypes.js

@@ -0,0 +1 @@
+

package/esm/combobox/config/useComboBox.js

@@ -5,12 +5,13 @@ import 'core-js/modules/esnext.async-iterator.for-each.js';
 import 'core-js/modules/esnext.iterator.for-each.js';
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import 'core-js/modules/web.dom-collections.iterator.js';
-import { useRef, useState, useCallback, useMemo } from 'react';
+import { useRef, useState, useCallback, useEffect, useMemo } from 'react';
 import { useVirtual } from 'react-virtual';
 import { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';
 import { defaultProps } from '../ComboBoxCTX.js';
 import { ComboboxPropTypes } from '../react-desc-prop-types.js';
 import { useCorrectOptions } from './useCorrectOptions.js';
+import { getFirstOption } from '../utils/listHelper.js';
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
@@ -27,15 +28,17 @@ const useComboBox = props => {
   const [showSelectedOptions, setShowSelectedOptions] = useState(false);
   const [inputValue, setInputValue] = useState('');
   const [hasFocus, setHasFocus] = useState(false);
-  const [focusOptionIdx, setFocusOptionIdx] = useState('');
   const listRef = useRef(null);
   const wrapperListRef = useRef(null);
   const selectedOptionsRef = useRef(null);
   const controlsWrapperRef = useRef(null);
   const selectAllCheckboxRef = useRef(null);
   const toggleSelectionButtonRef = useRef(null);
-  const pillGroupRef = useRef(null); // ---------------------------------------------------------------------------
-  // Menu Options with/out selected filter
+  const pillGroupRef = useRef(null);
+  const {
+    selectedValues
+  } = propsWithDefaults; // ---------------------------------------------------------------------------
+  // Menu Options with/out selected filter and creatable functionality
   // ---------------------------------------------------------------------------
 
   const correctOptions = useCorrectOptions(propsWithDefaults, inputValue, showSelectedOptions); // ===========================================================================
@@ -51,9 +54,30 @@ const useComboBox = props => {
   // Scroll into view function
   // ===========================================================================
 
-  const scrollOptionIntoView = useCallback(dsId => {
-    virtualListHelpers.scrollToIndex(correctOptions.findIndex(opt => opt.dsId === dsId));
-  }, [correctOptions, virtualListHelpers]);
+  const scrollOptionIntoView = useCallback(function (dsId) {
+    let opts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
+      align: 'center'
+    };
+    virtualListHelpers.scrollToIndex(correctOptions.findIndex(opt => opt.dsId === dsId), // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+    opts);
+  }, [correctOptions, virtualListHelpers]); // ===========================================================================
+  // Init focused option when opening the menu list
+  // ===========================================================================
+
+  const [focusOptionIdx, setFocusOptionIdx] = useState('');
+  useEffect(() => {
+    // we are updating the focus option only when we have focus on the input and
+    // we are in the selected option view or we are typing to force first option always
+    if (hasFocus && (focusOptionIdx === '' || inputValue !== '' || showSelectedOptions)) {
+      const focusedValue = getFirstOption(correctOptions, selectedValues, inputValue);
+      setFocusOptionIdx(focusedValue);
+      scrollOptionIntoView(focusedValue, {
+        align: 'center'
+      });
+    }
+
+    if (!hasFocus) setFocusOptionIdx(''); // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [showPopover, hasFocus, correctOptions, selectedValues, inputValue]);
   const ctx = useMemo(() => ({
     props: _objectSpread(_objectSpread({}, propsWithDefaults), {}, {
       options: correctOptions

package/esm/combobox/config/useCorrectOptions.js

@@ -49,7 +49,7 @@ const useCorrectOptions = (propsWithDefaults, inputValue, showSelectedOptions) =
     }
 
     if (onCreate && inputValue && options.findIndex(option => option.type === MENU_OPTION_TYPES.OPTION && option.label === inputValue) === -1) {
-      const creatableUuid = uid(6);
+      const creatableUuid = uid();
       const creatableItem = {
         dsId: "creatable-".concat(creatableUuid),
         label: inputValue,

package/esm/combobox/parts/container/Container.js

@@ -14,7 +14,7 @@ import { StyledContainerInline, StyledContainerWithPopper, StyledPopperWrapper }
 import { Controls } from '../controls/Controls.js';
 import { MenuList } from '../menu-list/MenuList.js';
 import { ComboboxDataTestid } from '../../ComboboxDataTestids.js';
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 var _Controls, _MenuList, _Controls2, _MenuList2;
 
@@ -46,7 +46,7 @@ const Container = () => {
   const StyledContainer = inline ? StyledContainerInline : StyledContainerWithPopper;
   const globalAttributes = useGetGlobalAttributes(props); // Removing possible collisionable props
 
-  const rest = _objectWithoutProperties(globalAttributes, _excluded);
+  const globalsAttrs = _objectWithoutProperties(globalAttributes, _excluded);
 
   const handleMouseDown = useCallback(e => {
     e.preventDefault();
@@ -66,38 +66,30 @@ const Container = () => {
   useEffect(() => {
     if (onMenuOpen && showPopover) onMenuOpen();else if (onMenuClose && !showPopover) onMenuClose();
   }, [showPopover, onMenuOpen, onMenuClose]);
-  return useMemo(() => {
-    if (inline) {
-      return /*#__PURE__*/jsxs(StyledContainer, _objectSpread(_objectSpread({
-        ref: setReferenceElement
-      }, rest), {}, {
-        children: [_Controls || (_Controls = /*#__PURE__*/_jsx(Controls, {})), _MenuList || (_MenuList = /*#__PURE__*/_jsx(MenuList, {}))]
-      }));
-    }
-
-    return /*#__PURE__*/jsx(Fragment, {
-      children: /*#__PURE__*/jsxs(StyledContainer, _objectSpread(_objectSpread({
-        "data-testid": ComboboxDataTestid.CONTAINER,
-        ref: setReferenceElement
-      }, rest), {}, {
-        children: [_Controls2 || (_Controls2 = /*#__PURE__*/_jsx(Controls, {})), /*#__PURE__*/_jsx(DSPopperJS, {
-          customOffset: [0, 5],
-          referenceElement: referenceElement,
-          showPopover: showPopover,
-          closeContextMenu: handleCloseMenu,
-          startPlacementPreference: startPlacementPreference,
-          placementOrderPreference: placementOrderPreference,
-          withoutPortal: withoutPortal,
-          withoutArrow: true,
-          withoutAnimation: true,
-          zIndex: zIndex
-        }, void 0, _StyledPopperWrapper || (_StyledPopperWrapper = /*#__PURE__*/_jsx(StyledPopperWrapper, {
-          tabIndex: -1,
-          onMouseDown: handleMouseDown
-        }, void 0, _MenuList2 || (_MenuList2 = /*#__PURE__*/_jsx(MenuList, {})))))]
-      }))
-    });
-  }, [inline, showPopover, StyledContainer, placementOrderPreference, referenceElement, rest, startPlacementPreference, withoutPortal, zIndex, handleCloseMenu, handleMouseDown, setReferenceElement]);
+  return useMemo(() => /*#__PURE__*/jsx(StyledContainer, _objectSpread(_objectSpread({
+    "data-testid": ComboboxDataTestid.CONTAINER,
+    ref: setReferenceElement
+  }, globalsAttrs), {}, {
+    children: inline ? /*#__PURE__*/jsxs(Fragment, {
+      children: [_Controls || (_Controls = /*#__PURE__*/_jsx(Controls, {})), _MenuList || (_MenuList = /*#__PURE__*/_jsx(MenuList, {}))]
+    }) : /*#__PURE__*/jsxs(Fragment, {
+      children: [_Controls2 || (_Controls2 = /*#__PURE__*/_jsx(Controls, {})), /*#__PURE__*/_jsx(DSPopperJS, {
+        customOffset: [0, 5],
+        referenceElement: referenceElement,
+        showPopover: showPopover,
+        closeContextMenu: handleCloseMenu,
+        startPlacementPreference: startPlacementPreference,
+        placementOrderPreference: placementOrderPreference,
+        withoutPortal: withoutPortal,
+        withoutArrow: true,
+        withoutAnimation: true,
+        zIndex: zIndex
+      }, void 0, _StyledPopperWrapper || (_StyledPopperWrapper = /*#__PURE__*/_jsx(StyledPopperWrapper, {
+        tabIndex: -1,
+        onMouseDown: handleMouseDown
+      }, void 0, _MenuList2 || (_MenuList2 = /*#__PURE__*/_jsx(MenuList, {})))))]
+    })
+  })), [inline, StyledContainer, setReferenceElement, globalsAttrs, referenceElement, showPopover, handleCloseMenu, startPlacementPreference, placementOrderPreference, withoutPortal, zIndex, handleMouseDown]);
 };
 
 export { Container };

package/esm/combobox/parts/controls/Controls.js

@@ -1,6 +1,5 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import { useContext, useCallback, useMemo } from 'react';
-import { DSPillV2 } from '@elliemae/ds-pills';
 import { DropdownIndicator } from '../DropdownIndicator.js';
 import { ComboboxDataTestid } from '../../ComboboxDataTestids.js';
 import { ComboBoxContext } from '../../ComboBoxCTX.js';
@@ -10,6 +9,7 @@ import { ControlsInput } from '../controls-input/ControlsInput.js';
 import { useOnPillsNavigation } from './useOnPillsNavigation.js';
 import { A11yFocusedOption } from '../A11yFocusedOption.js';
 import { A11ySelectedValues } from '../A11ySelectedValues.js';
+import { RemovableSelectedValuePill } from '../multi-selected-values-container/RemovableSelectedValuePill.js';
 import { jsxs } from 'react/jsx-runtime';
 
 var _A11ySelectedValues, _A11yFocusedOption, _MultiSelectedValuesC, _ControlsInput, _DropdownIndicator;
@@ -17,7 +17,6 @@ const Controls = () => {
   const {
     props: {
       inline,
-      onChange,
       disabled,
       inputMinWidth,
       hasError,
@@ -83,20 +82,9 @@ const Controls = () => {
       onClick: handleOnPillsClick,
       children: [_A11ySelectedValues || (_A11ySelectedValues = /*#__PURE__*/_jsx(A11ySelectedValues, {})), _A11yFocusedOption || (_A11yFocusedOption = /*#__PURE__*/_jsx(A11yFocusedOption, {})), Array.isArray(selectedValues) ? _MultiSelectedValuesC || (_MultiSelectedValuesC = /*#__PURE__*/_jsx(MultiSelectedValuesContainer, {})) : /*#__PURE__*/_jsx("div", {
         "data-testid": ComboboxDataTestid.SELECTED_VALUES
-      }, void 0, selectedValues && /*#__PURE__*/_jsx(DSPillV2, {
-        size: "s",
-        labelTruncated: true,
-        tabIndex: -1,
-        disabled: disabled,
-        label: selectedValues.label,
-        type: disabled ? 'value' : 'removable',
-        onRemove: () => {
-          var _innerRef$current4;
-
-          onChange(null);
-          (_innerRef$current4 = innerRef.current) === null || _innerRef$current4 === void 0 ? void 0 : _innerRef$current4.focus();
-        }
-      }, selectedValues.value))]
+      }, void 0, selectedValues && /*#__PURE__*/_jsx(RemovableSelectedValuePill, {
+        pill: selectedValues
+      }))]
     }), _ControlsInput || (_ControlsInput = /*#__PURE__*/_jsx(ControlsInput, {})), !inline && /*#__PURE__*/_jsx(StyledHeaderActionsWrapper, {
       justifyContent: "center",
       cols: ['auto', 'auto']

package/esm/combobox/parts/controls-input/useControlsInput.js

@@ -13,7 +13,6 @@ const useControlsInput = () => {
       onFilter
     },
     setHasFocus,
-    setFocusOptionIdx,
     inputValue,
     setInputValue,
     setShowSelectedOptions
@@ -34,10 +33,9 @@ const useControlsInput = () => {
   const handleOnBlur = useCallback(() => {
     setInputValue('');
     if (onFilter) onFilter('');
-    setFocusOptionIdx('');
     setHasFocus(false);
     setShowSelectedOptions(false);
-  }, [setInputValue, setShowSelectedOptions, onFilter, setFocusOptionIdx, setHasFocus]);
+  }, [setInputValue, setShowSelectedOptions, onFilter, setHasFocus]);
   const handleOnFocus = useCallback(() => {
     setHasFocus(true);
   }, [setHasFocus]);