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

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

@@ -1,57 +1,50 @@
 import 'core-js/modules/esnext.async-iterator.find.js';
 import 'core-js/modules/esnext.iterator.constructor.js';
 import 'core-js/modules/esnext.iterator.find.js';
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.filter.js';
 import { useContext, useCallback } from 'react';
 import { ComboBoxContext } from '../../ComboBoxCTX.js';
-import { getOptions, findInCircularList } from '../../utils/listHelper.js';
-import { INTERNAL_MENU_OPTION_TYPES } from '../../constants.js';
+import { getOptions, getSuggestedValueOnChange, findInCircularList, getLastValueSelected } from '../../utils/listHelper.js';
+import { MENU_OPTION_TYPES, INTERNAL_MENU_OPTION_TYPES } from '../../constants.js';
 
 const isOptionFocuseable = opt => !['section', 'separator'].includes(opt.type) && !opt.disabled;
 
 const useKeyboardNavigation = () => {
   const {
     props: {
-      inline,
-      onSelectAll,
       onCancel,
       onKeyDown,
       onChange,
       onCreate,
+      onFilter,
+      onSelectAll,
+      inline,
       options,
       selectedValues,
-      onFilter,
       withoutPortal
     },
-    setShowPopover,
-    setInputValue,
     inputValue,
     showPopover,
     focusOptionIdx,
-    setFocusOptionIdx,
     selectAllCheckboxRef,
-    toggleSelectionButtonRef
+    toggleSelectionButtonRef,
+    setShowPopover,
+    setInputValue,
+    scrollOptionIntoView,
+    setFocusOptionIdx
   } = 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(() => {
-    const selectedOption = options.find(item => item.dsId === focusOptionIdx);
-
-    if (!selectedOption.disabled) {
-      if (onFilter) onFilter('');
-      setInputValue('');
-      onChange(selectedOption);
-      if (!multiple) setShowPopover(false);
-    }
-  }, [multiple, options, setInputValue, focusOptionIdx, setShowPopover, onFilter, onChange]);
   const onInputKeyDown = useCallback(e => {
     // =============================================================================
     // CUSTOM KEYS
     // =============================================================================
-    if (onKeyDown) onKeyDown(e, currentItem);
+    if (onKeyDown && (currentItem === null || currentItem === void 0 ? void 0 : currentItem.type) === MENU_OPTION_TYPES.OPTION) onKeyDown(e, currentItem);
 
-    if (!['Escape', 'Tab', 'ArrowLeft', 'ArrowRight'].includes(e.key)) {
+    if (['ArrowDown', 'ArrowUp', 'Enter', 'Spacebar'].includes(e.key) || e.keyCode >= 48 && e.keyCode <= 90) {
       setShowPopover(true);
     } // =============================================================================
     // ESCAPE
@@ -86,8 +79,17 @@ const useKeyboardNavigation = () => {
       e.preventDefault();
       e.stopPropagation();
 
-      if (focusOptionIdx !== '' && showPopover) {
-        selectOption();
+      if (focusOptionIdx !== '' && showPopover && (currentItem === null || currentItem === void 0 ? void 0 : currentItem.type) === MENU_OPTION_TYPES.OPTION) {
+        if ((currentItem === null || currentItem === void 0 ? void 0 : currentItem.type) === 'option' && !currentItem.disabled) {
+          if (onFilter) onFilter('');
+          setInputValue('');
+
+          if (!multiple) {
+            setShowPopover(false);
+          }
+
+          onChange(getSuggestedValueOnChange(currentItem, selectedValues), currentItem, e);
+        }
       }
     }
 
@@ -95,8 +97,8 @@ const useKeyboardNavigation = () => {
       setShowPopover(false);
     }
 
-    if (e.key === 'a' && e.ctrlKey && multiple) {
-      if (onSelectAll) onSelectAll();
+    if (e.key === 'a' && e.ctrlKey && multiple && onSelectAll) {
+      onSelectAll(options.filter(option => option.type === 'option' && !option.disabled), e);
     } // =============================================================================
     // ARROWS UP AND DOWN: LOGIC TO CALCULATE NEXT OR PREV ITEM TO PSEUDOFOCUS FROM INPUT
     // =============================================================================
@@ -109,6 +111,7 @@ const useKeyboardNavigation = () => {
       if ((showPopover || inline) && selectableOptions.length) {
         const nextItemIndex = findInCircularList(options, currentItemIndex, isOptionFocuseable);
         setFocusOptionIdx(options[nextItemIndex].dsId);
+        scrollOptionIntoView(options[nextItemIndex].dsId);
       }
     }
 
@@ -120,11 +123,13 @@ const useKeyboardNavigation = () => {
 
       if (showPopover || inline) {
         setFocusOptionIdx(options[prevItemIndex].dsId);
+        scrollOptionIntoView(options[prevItemIndex].dsId);
       } else {
         setShowPopover(true);
         setTimeout(() => {
-          const nextItemIndex = findInCircularList(options, 0, isOptionFocuseable, -1);
-          setFocusOptionIdx(options[nextItemIndex].dsId);
+          const prevItem = findInCircularList(options, 0, isOptionFocuseable, -1);
+          setFocusOptionIdx(options[prevItem].dsId);
+          scrollOptionIntoView(options[prevItem].dsId);
         });
       }
     } // =============================================================================
@@ -133,10 +138,10 @@ const useKeyboardNavigation = () => {
 
 
     if (e.key === 'Backspace' && inputValue.length <= 0 && !inline) {
-      if (multiple && !inputValue) {
-        if (selectedValues.length > 0) onChange(selectedValues[selectedValues.length - 1]);
-      } else {
-        onChange(null);
+      const lastValue = getLastValueSelected(selectedValues);
+
+      if (!inputValue && lastValue) {
+        onChange(getSuggestedValueOnChange(lastValue, selectedValues), lastValue, e);
       }
 
       if (onFilter) onFilter('');
@@ -155,7 +160,8 @@ const useKeyboardNavigation = () => {
     // if (e.key === 'Tab' && multiple) {
     // }
 
-  }, [onKeyDown, currentItem, onCreate, multiple, inputValue, inline, withoutPortal, setShowPopover, onCancel, onFilter, setInputValue, focusOptionIdx, showPopover, selectOption, onSelectAll, selectableOptions.length, options, currentItemIndex, setFocusOptionIdx, selectedValues, onChange, selectAllCheckboxRef, toggleSelectionButtonRef]);
+  }, // eslint-disable-next-line react-hooks/exhaustive-deps
+  [onKeyDown, currentItem, onCreate, multiple, inputValue, inline, withoutPortal, setShowPopover, onCancel, onFilter, setInputValue, focusOptionIdx, showPopover, selectableOptions.length, options, currentItemIndex, setFocusOptionIdx, selectedValues, onChange, selectAllCheckboxRef, toggleSelectionButtonRef]);
   return {
     onInputKeyDown
   };

package/esm/combobox/parts/header-list/HeaderList.js

@@ -13,9 +13,8 @@ var _StyledNoOptionsSelec;
 const HeaderList = () => {
   const {
     props: {
-      onSelectAll,
-      onClearAll,
-      selectedValues
+      selectedValues,
+      onSelectAll
     },
     showSelectedOptions,
     selectAllCheckboxRef,
@@ -34,7 +33,7 @@ const HeaderList = () => {
   return /*#__PURE__*/_jsx(StyledHeaderListWrapper, {
     onKeyDown: handleKeyDown,
     onMouseDown: handleOnMouseDown
-  }, void 0, /*#__PURE__*/_jsx(StyledSelectAllCheckbox, {}, void 0, onSelectAll && onClearAll && /*#__PURE__*/_jsx(DSControlledCheckbox, {
+  }, void 0, /*#__PURE__*/_jsx(StyledSelectAllCheckbox, {}, void 0, onSelectAll && /*#__PURE__*/_jsx(DSControlledCheckbox, {
     checked: checkboxStatus,
     "aria-controls": checkboxStatus === 'mixed' ? multiSelectedValues.map(item => item.dsId).join(' ') : '',
     name: "select-all-checkbox",

package/esm/combobox/parts/header-list/useHeaderListHandlers.js

@@ -1,4 +1,8 @@
-import { useContext, useMemo, useCallback, useEffect } from 'react';
+import 'core-js/modules/web.dom-collections.iterator.js';
+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 { useContext, useMemo, useState, useEffect, useCallback } from 'react';
 import { getSelectableOptions } from '../../utils/listHelper.js';
 import { ComboBoxContext } from '../../ComboBoxCTX.js';
 
@@ -8,7 +12,6 @@ const useHeaderListHandlers = () => {
       selectedValues,
       options,
       onSelectAll,
-      onClearAll,
       innerRef
     },
     showSelectedOptions,
@@ -17,8 +20,8 @@ const useHeaderListHandlers = () => {
   } = useContext(ComboBoxContext);
   const multiSelectedValues = selectedValues;
   const selectableOptions = getSelectableOptions(options);
-  const checkboxStatus = useMemo(() => {
-    if ((selectableOptions === null || selectableOptions === void 0 ? void 0 : selectableOptions.length) === (multiSelectedValues === null || multiSelectedValues === void 0 ? void 0 : multiSelectedValues.length)) {
+  const getCheckboxStatus = useMemo(() => {
+    if (multiSelectedValues.length === selectableOptions.length) {
       return true;
     }
 
@@ -27,17 +30,23 @@ const useHeaderListHandlers = () => {
     }
 
     return 'mixed';
-  }, [multiSelectedValues, selectableOptions]);
+  }, [multiSelectedValues.length, selectableOptions.length]);
+  const [checkboxStatus, setCheckboxStatus] = useState(false);
+  useEffect(() => {
+    setCheckboxStatus(getCheckboxStatus);
+  }, [getCheckboxStatus, multiSelectedValues]);
   const handleOnMouseDown = useCallback(e => {
     e.preventDefault(); // this prevent the input control to lose focus
   }, []);
-  const handleSelectAllCheckboxChange = useCallback(() => {
+  const handleSelectAllCheckboxChange = useCallback(e => {
     if ((!checkboxStatus || checkboxStatus === 'mixed') && onSelectAll) {
-      onSelectAll();
-    } else if (onClearAll) {
-      onClearAll();
+      onSelectAll(options.filter(option => option.type === 'option' && !option.disabled), e);
+      setCheckboxStatus(true);
+    } else if (onSelectAll) {
+      onSelectAll([], e);
+      setCheckboxStatus(false);
     }
-  }, [checkboxStatus, onSelectAll, onClearAll]);
+  }, [checkboxStatus, onSelectAll, options]);
   const handleToggleSelectedValuesFilter = useCallback(e => {
     e.preventDefault();
     setShowSelectedOptions(!showSelectedOptions);

package/esm/combobox/parts/menu-list/MenuList.js

@@ -5,7 +5,6 @@ import { ComboboxDataTestid } from '../../ComboboxDataTestids.js';
 import { ComboBoxContext } from '../../ComboBoxCTX.js';
 import { HeaderList } from '../header-list/HeaderList.js';
 import { useItemRenderer } from './useItemRenderer.js';
-import { useMenuListSetFocusOption } from './useMenuListSetFocusOption.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 var _HeaderList, _StyledNoResultsWrapp;
@@ -28,7 +27,6 @@ const MenuList = () => {
   const multiple = Array.isArray(selectedValues);
   const withHeader = !inline && multiple && options.length > 0 && inputValue === '';
   const ItemRenderer = useItemRenderer();
-  useMenuListSetFocusOption();
   const preventLoseInputFocus = useCallback(e => {
     e.preventDefault();
   }, []);

package/esm/combobox/parts/menu-list/useItemRenderer.js

@@ -12,7 +12,7 @@ import { Grid } from '@elliemae/ds-grid';
 import { Section, Separator, SingleMenuItem, MultiMenuItem } from '@elliemae/ds-form';
 import { ComboBoxContext } from '../../ComboBoxCTX.js';
 import { StyledCreatableLabel } from './styled.js';
-import { isSelected } from '../../utils/listHelper.js';
+import { getSuggestedValueOnChange, isSelected } from '../../utils/listHelper.js';
 import { ComboboxDataTestid } from '../../ComboboxDataTestids.js';
 import { INTERNAL_MENU_OPTION_TYPES, MENU_OPTION_TYPES } from '../../constants.js';
 import { jsx, Fragment } from 'react/jsx-runtime';
@@ -47,28 +47,23 @@ const useItemRenderer = () => {
         setInputValue('');
         onFilter('');
       }
+    } else if (option.type === MENU_OPTION_TYPES.OPTION) {
+      if (!option.disabled) {
+        if (onFilter) onFilter('');
+        setInputValue('');
 
-      return;
-    }
-
-    if (!option.disabled) {
-      var _innerRef$current;
+        if (!multiple) {
+          setShowPopover(false);
+        }
 
-      if (!multiple) {
-        setShowPopover(false);
+        onChange(getSuggestedValueOnChange(option, selectedValues), option, e);
       }
-
-      if (onFilter) onFilter('');
-      setInputValue('');
-      onChange(option); // if we are focus in the header list we go back to the input
-
-      (_innerRef$current = innerRef.current) === null || _innerRef$current === void 0 ? void 0 : _innerRef$current.focus();
     } // prevent for loosing focus on input control
 
 
     e.stopPropagation();
     e.preventDefault();
-  }, [onFilter, onChange, setShowPopover, multiple, innerRef]); // prevent blur from controls input
+  }, [onFilter, selectedValues, onChange, setShowPopover, multiple, innerRef]); // prevent blur from controls input
 
   const handleOnMouseDown = useCallback(e => {
     e.preventDefault();

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

@@ -6,14 +6,13 @@ import { DSPillGroupV2, DSPillV2 } from '@elliemae/ds-pills';
 import { ComboBoxContext } from '../../ComboBoxCTX.js';
 import { useGroupPills } from './useGroupPills.js';
 import { ComboboxDataTestid } from '../../ComboboxDataTestids.js';
+import { RemovableSelectedValuePill } from './RemovableSelectedValuePill.js';
 
 const MultiSelectedValuesContainer = () => {
   const {
     props: {
       selectedValues,
-      disabled,
-      onChange,
-      innerRef
+      disabled
     },
     pillGroupRef
   } = useContext(ComboBoxContext); // this is always an array because logic in controls component
@@ -27,25 +26,15 @@ const MultiSelectedValuesContainer = () => {
     "data-testid": ComboboxDataTestid.SELECTED_VALUES
   }, void 0, /*#__PURE__*/_jsx(DSPillGroupV2, {
     innerRef: pillGroupRef
-  }, void 0, multiSelectedValue.length > 0 && multiSelectedValue.slice(0, correctPillsToShow).map(option => /*#__PURE__*/_jsx(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(DSPillV2, {
+  }, void 0, multiSelectedValue.length > 0 && multiSelectedValue.slice(0, correctPillsToShow).map(pill => /*#__PURE__*/_jsx(RemovableSelectedValuePill, {
+    pill: pill
+  }, pill.dsId)), multiSelectedValue.length > 0 && correctPillsToShow !== multiSelectedValue.length && /*#__PURE__*/_jsx(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]);
 };
 
 export { MultiSelectedValuesContainer };

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

@@ -0,0 +1,34 @@
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import { useContext } from 'react';
+import { DSPillV2 } from '@elliemae/ds-pills';
+import { ComboBoxContext } from '../../ComboBoxCTX.js';
+import { getSuggestedValueOnChange } from '../../utils/listHelper.js';
+
+const RemovableSelectedValuePill = props => {
+  const {
+    pill
+  } = props;
+  const {
+    props: {
+      onChange,
+      disabled,
+      selectedValues,
+      innerRef
+    }
+  } = useContext(ComboBoxContext);
+  return /*#__PURE__*/_jsx(DSPillV2, {
+    size: "s",
+    label: pill.label,
+    disabled: disabled,
+    type: disabled ? 'value' : 'removable',
+    tabIndex: -1,
+    onRemove: e => {
+      var _innerRef$current;
+
+      onChange(getSuggestedValueOnChange(pill, selectedValues), pill, e);
+      (_innerRef$current = innerRef.current) === null || _innerRef$current === void 0 ? void 0 : _innerRef$current.focus();
+    }
+  }, pill.value);
+};
+
+export { RemovableSelectedValuePill };

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

@@ -18,10 +18,8 @@ const ComboboxPropTypes = _objectSpread(_objectSpread({}, globalAttributesPropTy
   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.isRequired.description('function triggered when an option is selected it will send the options selected').defaultValue('() => {}'),
-  onSelectAll: PropTypes.func.description('function triggered when ALL button is selected from the header menu list').defaultValue('() => {}'),
   onFilter: PropTypes.func.description('function triggered when user type in the combobox input').defaultValue(''),
   onCreate: PropTypes.func.description('function triggered when user select "create" a new item whenever is not a match in the all option list').defaultValue(''),
-  onClearAll: PropTypes.func.description('function triggered when user select CLEAR button from the header menu list').defaultValue(''),
   onCancel: PropTypes.func.description('function triggered when user press ESC key').defaultValue('() => {}'),
   onMenuOpen: PropTypes.func.description('function triggered when user open the menu list').defaultValue('() => {}'),
   onMenuClose: PropTypes.func.description('function triggered when user close the menu list').defaultValue('() => {}'),

package/esm/combobox/sharedTypes.js

@@ -1,5 +1,6 @@
 import { MENU_OPTION_TYPES } from './constants.js';
 
-const isSeparator = el => (el === null || el === void 0 ? void 0 : el.type) === MENU_OPTION_TYPES.separator;
+const isSeparator = el => (el === null || el === void 0 ? void 0 : el.type) === MENU_OPTION_TYPES.SEPARATOR;
+const isOption = el => (el === null || el === void 0 ? void 0 : el.type) === MENU_OPTION_TYPES.OPTION;
 
-export { isSeparator };
+export { isOption, isSeparator };

package/esm/combobox/utils/listHelper.js

@@ -3,6 +3,9 @@ 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';
+import 'core-js/modules/esnext.async-iterator.find.js';
+import 'core-js/modules/esnext.iterator.find.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
 import { MENU_OPTION_TYPES } from '../constants.js';
 
 const getSelectableOptions = options => options.filter(option => option.type === MENU_OPTION_TYPES.OPTION && !option.disabled);
@@ -27,5 +30,46 @@ 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;
+    }
 
-export { findInCircularList, getOptions, getSelectableOptions, isSelected, isSelectedValueEmpty, isSelectedValueMultiple };
+    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;
+};
+
+export { findInCircularList, getFirstOption, getLastValueSelected, getOptions, getSelectableOptions, getSuggestedValueOnChange, isSelected, isSelectedValueEmpty, isSelectedValueMultiple };

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

@@ -26,24 +26,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);
@@ -59,18 +51,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;
@@ -106,6 +106,7 @@ const useNumberMask = props => {
   const onBlur = useCallback(e => {
     const maskedValue = e.target.value;
     const dotIdx = maskedValue.indexOf('.');
+    const minusIndex = maskedValue.indexOf('-');
     const {
       decimalRequired,
       decimalPlaces,
@@ -126,6 +127,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/esm/mask-hook/hooks/usePhoneMask.js

@@ -13,7 +13,7 @@ import { DSMaskPhoneHookPropsTypes, DSMaskPhoneHookDefaultProps } from '../react
 
 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-controlled-form",
-  "version": "2.3.2-next.0",
+  "version": "2.4.0-rc.0",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Controlled Form Controllers",
   "module": "./esm/index.js",
@@ -499,14 +499,6 @@
       "import": "./esm/combobox/utils/listHelper.js",
       "require": "./cjs/combobox/utils/listHelper.js"
     },
-    "./combobox/utils/hooks/useOnElementResize": {
-      "import": "./esm/combobox/utils/hooks/useOnElementResize.js",
-      "require": "./cjs/combobox/utils/hooks/useOnElementResize.js"
-    },
-    "./combobox/utils/hooks/useKeyboardNavigation": {
-      "import": "./esm/combobox/utils/hooks/useKeyboardNavigation.js",
-      "require": "./cjs/combobox/utils/hooks/useKeyboardNavigation.js"
-    },
     "./combobox/tests/utils": {
       "import": "./esm/combobox/tests/utils.js",
       "require": "./cjs/combobox/tests/utils.js"
@@ -527,6 +519,10 @@
       "import": "./esm/combobox/parts/multi-selected-values-container/useGroupPills.js",
       "require": "./cjs/combobox/parts/multi-selected-values-container/useGroupPills.js"
     },
+    "./combobox/parts/multi-selected-values-container/RemovableSelectedValuePill": {
+      "import": "./esm/combobox/parts/multi-selected-values-container/RemovableSelectedValuePill.js",
+      "require": "./cjs/combobox/parts/multi-selected-values-container/RemovableSelectedValuePill.js"
+    },
     "./combobox/parts/multi-selected-values-container/MultiSelectedValuesContainer": {
       "import": "./esm/combobox/parts/multi-selected-values-container/MultiSelectedValuesContainer.js",
       "require": "./cjs/combobox/parts/multi-selected-values-container/MultiSelectedValuesContainer.js"
@@ -707,6 +703,14 @@
       "import": "./esm/autocomplete/utils/hooks/useKeyboardNavigation.js",
       "require": "./cjs/autocomplete/utils/hooks/useKeyboardNavigation.js"
     },
+    "./autocomplete/sharedTypes": {
+      "import": "./esm/autocomplete/sharedTypes.js",
+      "require": "./cjs/autocomplete/sharedTypes.js"
+    },
+    "./autocomplete/react-desc-prop-types": {
+      "import": "./esm/autocomplete/react-desc-prop-types.js",
+      "require": "./cjs/autocomplete/react-desc-prop-types.js"
+    },
     "./autocomplete/propTypes": {
       "import": "./esm/autocomplete/propTypes.js",
       "require": "./cjs/autocomplete/propTypes.js"
@@ -731,6 +735,14 @@
       "import": "./esm/autocomplete/parts/menu-list/index.js",
       "require": "./cjs/autocomplete/parts/menu-list/index.js"
     },
+    "./autocomplete/parts/controls/useMaskedOnChange": {
+      "import": "./esm/autocomplete/parts/controls/useMaskedOnChange.js",
+      "require": "./cjs/autocomplete/parts/controls/useMaskedOnChange.js"
+    },
+    "./autocomplete/parts/controls/useKeyboardNavigation": {
+      "import": "./esm/autocomplete/parts/controls/useKeyboardNavigation.js",
+      "require": "./cjs/autocomplete/parts/controls/useKeyboardNavigation.js"
+    },
     "./autocomplete/parts/controls/useControlsInput": {
       "import": "./esm/autocomplete/parts/controls/useControlsInput.js",
       "require": "./cjs/autocomplete/parts/controls/useControlsInput.js"
@@ -824,20 +836,20 @@
     "build": "node ../../scripts/build/build.js"
   },
   "dependencies": {
-    "@elliemae/ds-button": "2.3.2-next.0",
-    "@elliemae/ds-circular-progress-indicator": "2.3.2-next.0",
-    "@elliemae/ds-controlled-form": "2.3.2-next.0",
-    "@elliemae/ds-form": "2.3.2-next.0",
-    "@elliemae/ds-form-layout-blocks": "2.3.2-next.0",
-    "@elliemae/ds-grid": "2.3.2-next.0",
-    "@elliemae/ds-icon": "2.3.2-next.0",
-    "@elliemae/ds-icons": "2.3.2-next.0",
-    "@elliemae/ds-pills": "2.3.2-next.0",
-    "@elliemae/ds-popperjs": "2.3.2-next.0",
-    "@elliemae/ds-props-helpers": "2.3.2-next.0",
-    "@elliemae/ds-system": "2.3.2-next.0",
-    "@elliemae/ds-tooltip": "2.3.2-next.0",
-    "@elliemae/ds-truncated-tooltip-text": "2.3.2-next.0",
+    "@elliemae/ds-button": "2.4.0-rc.0",
+    "@elliemae/ds-circular-progress-indicator": "2.4.0-rc.0",
+    "@elliemae/ds-controlled-form": "2.4.0-rc.0",
+    "@elliemae/ds-form": "2.4.0-rc.0",
+    "@elliemae/ds-form-layout-blocks": "2.4.0-rc.0",
+    "@elliemae/ds-grid": "2.4.0-rc.0",
+    "@elliemae/ds-icon": "2.4.0-rc.0",
+    "@elliemae/ds-icons": "2.4.0-rc.0",
+    "@elliemae/ds-pills": "2.4.0-rc.0",
+    "@elliemae/ds-popperjs": "2.4.0-rc.0",
+    "@elliemae/ds-props-helpers": "2.4.0-rc.0",
+    "@elliemae/ds-system": "2.4.0-rc.0",
+    "@elliemae/ds-tooltip": "2.4.0-rc.0",
+    "@elliemae/ds-truncated-tooltip-text": "2.4.0-rc.0",
     "prop-types": "~15.7.2",
     "react-desc": "~4.1.3",
     "react-popper": "~2.2.5",

package/types/autocomplete/parts/controls/useKeyboardNavigation.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const useKeyboardNavigation: () => {
+    onInputKeyDown: React.KeyboardEventHandler<HTMLInputElement>;
+};