@elliemae/ds-controlled-form 2.4.1-rc.4 → 2.4.1-rc.5

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

@@ -13,6 +13,7 @@ const isOptionFocuseable = opt => !['section', 'separator'].includes(opt.type) &
 const useKeyboardNavigation = () => {
   const {
     props: {
+      allOptions,
       onCancel,
       onKeyDown,
       onChange,
@@ -20,7 +21,7 @@ const useKeyboardNavigation = () => {
       onFilter,
       onSelectAll,
       inline,
-      options,
+      filteredOptions,
       selectedValues,
       withoutPortal
     },
@@ -35,9 +36,9 @@ const useKeyboardNavigation = () => {
     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 selectableOptions = getOptions(filteredOptions);
+  const currentItemIndex = filteredOptions.findIndex(opt => opt.dsId === focusOptionIdx);
+  const currentItem = filteredOptions.find(item => item.dsId === focusOptionIdx);
   const onInputKeyDown = useCallback(e => {
     // =============================================================================
     // CUSTOM KEYS
@@ -55,7 +56,7 @@ const useKeyboardNavigation = () => {
       if (onCancel) onCancel();
 
       if (inputValue) {
-        if (onFilter) onFilter('');
+        if (onFilter) onFilter(allOptions, inputValue);
         setInputValue('');
       }
 
@@ -66,8 +67,10 @@ const useKeyboardNavigation = () => {
 
 
     if (e.key === 'Enter' && (currentItem === null || currentItem === void 0 ? void 0 : currentItem.type) === INTERNAL_MENU_OPTION_TYPES.CREATABLE && onCreate) {
-      onCreate(inputValue);
-      if (onFilter) onFilter('');
+      onCreate(inputValue); //blank active item to force search last one
+
+      setFocusOptionIdx('');
+      if (onFilter) onFilter(allOptions, '');
       setInputValue('');
       return;
     } // =============================================================================
@@ -80,10 +83,10 @@ const useKeyboardNavigation = () => {
       e.stopPropagation();
 
       if (focusOptionIdx !== '' && (showPopover || inline) && (currentItem === null || currentItem === void 0 ? void 0 : currentItem.type) === MENU_OPTION_TYPES.OPTION && !currentItem.disabled) {
-        if (onFilter) onFilter('');
+        if (onFilter) onFilter(allOptions, '');
         setInputValue('');
 
-        if (!multiple && !inline) {
+        if (!multiple) {
           setShowPopover(false);
         }
 
@@ -96,7 +99,7 @@ const useKeyboardNavigation = () => {
     }
 
     if (e.key === 'a' && e.ctrlKey && multiple && onSelectAll) {
-      onSelectAll(options.filter(option => option.type === 'option' && !option.disabled), e);
+      onSelectAll(filteredOptions.filter(option => option.type === 'option' && !option.disabled), e);
     } // =============================================================================
     // ARROWS UP AND DOWN: LOGIC TO CALCULATE NEXT OR PREV ITEM TO PSEUDOFOCUS FROM INPUT
     // =============================================================================
@@ -107,9 +110,9 @@ const useKeyboardNavigation = () => {
       e.stopPropagation();
 
       if ((showPopover || inline) && selectableOptions.length) {
-        const nextItemIndex = findInCircularList(options, currentItemIndex, isOptionFocuseable);
-        setFocusOptionIdx(options[nextItemIndex].dsId);
-        scrollOptionIntoView(options[nextItemIndex].dsId);
+        const nextItemIndex = findInCircularList(filteredOptions, currentItemIndex, isOptionFocuseable);
+        setFocusOptionIdx(filteredOptions[nextItemIndex].dsId);
+        scrollOptionIntoView(filteredOptions[nextItemIndex].dsId);
       }
     }
 
@@ -117,17 +120,17 @@ const useKeyboardNavigation = () => {
       e.preventDefault();
       e.stopPropagation();
       if (!selectableOptions.length) return;
-      const prevItemIndex = findInCircularList(options, currentItemIndex, isOptionFocuseable, -1);
+      const prevItemIndex = findInCircularList(filteredOptions, currentItemIndex, isOptionFocuseable, -1);
 
       if (showPopover || inline) {
-        setFocusOptionIdx(options[prevItemIndex].dsId);
-        scrollOptionIntoView(options[prevItemIndex].dsId);
+        setFocusOptionIdx(filteredOptions[prevItemIndex].dsId);
+        scrollOptionIntoView(filteredOptions[prevItemIndex].dsId);
       } else {
         setShowPopover(true);
         setTimeout(() => {
-          const prevItem = findInCircularList(options, 0, isOptionFocuseable, -1);
-          setFocusOptionIdx(options[prevItem].dsId);
-          scrollOptionIntoView(options[prevItem].dsId);
+          const prevItem = findInCircularList(filteredOptions, 0, isOptionFocuseable, -1);
+          setFocusOptionIdx(filteredOptions[prevItem].dsId);
+          scrollOptionIntoView(filteredOptions[prevItem].dsId);
         });
       }
     } // =============================================================================
@@ -135,14 +138,14 @@ const useKeyboardNavigation = () => {
     // =============================================================================
 
 
-    if (e.key === 'Backspace' && inputValue.length <= 0 && !inline) {
+    if (e.key === 'Backspace' && e.currentTarget.value.length <= 0 && !inline) {
       const lastValue = getLastValueSelected(selectedValues);
 
-      if (!inputValue && lastValue) {
+      if (!e.currentTarget.value && lastValue) {
         onChange(getSuggestedValueOnChange(lastValue, selectedValues), lastValue, e);
       }
 
-      if (onFilter) onFilter('');
+      if (onFilter) onFilter(allOptions, inputValue);
     }
 
     if (e.key === 'Tab' && !inline && !withoutPortal) {
@@ -154,12 +157,13 @@ const useKeyboardNavigation = () => {
         e.preventDefault();
         element.focus();
       }
-    } // waiting for validation from ux
-    // if (e.key === 'Tab' && multiple) {
-    // }
+    }
 
+    if (e.key === 'Tab' && !multiple && showPopover) {
+      setShowPopover(false);
+    }
   }, // 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]);
+  [onKeyDown, currentItem, onCreate, multiple, inputValue, inline, withoutPortal, setShowPopover, onCancel, onFilter, setInputValue, focusOptionIdx, showPopover, selectableOptions.length, filteredOptions, currentItemIndex, setFocusOptionIdx, selectedValues, onChange, selectAllCheckboxRef, toggleSelectionButtonRef]);
   return {
     onInputKeyDown
   };

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

@@ -1,11 +1,13 @@
 import { useContext, useCallback } from 'react';
 import { ComboBoxContext } from '../../ComboBoxCTX.js';
+import { filterOptions } from '../../utils/listHelper.js';
 
 const useMaskedOnChange = () => {
   const {
     props: {
       useMask,
-      onFilter
+      onFilter,
+      allOptions
     },
     setShowPopover,
     setInputValue,
@@ -17,16 +19,16 @@ const useMaskedOnChange = () => {
     setShowPopover(true);
 
     if (onFilter) {
-      onFilter(e.currentTarget.value);
+      onFilter(filterOptions(e.currentTarget.value, allOptions), e.currentTarget.value);
       setInputValue(e.currentTarget.value);
     }
-  }, [onFilter, setInputValue, setShowPopover, setShowSelectedOptions]); // onchange used when mask is provided
+  }, [allOptions, onFilter, setInputValue, setShowPopover, setShowSelectedOptions]); // onchange used when mask is provided
 
   const handleOnChangeMask = useCallback((_, mask) => {
     setShowSelectedOptions(false);
     setShowPopover(true);
-    if (mask && onFilter) onFilter(mask);
-  }, [onFilter, setShowPopover, setShowSelectedOptions]);
+    if (mask && onFilter) onFilter(filterOptions(mask, allOptions), mask);else if (!mask && onFilter) onFilter(allOptions, '');
+  }, [allOptions, onFilter, setShowPopover, setShowSelectedOptions]);
   const onChangeMask = useMask({
     valueSetter: setInputValue,
     onChange: handleOnChangeMask

package/esm/combobox/parts/dropdown-indicator/DropdownIndicator.js

@@ -1,6 +1,6 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import { useContext } from 'react';
-import ChevronSmallDown from '@elliemae/ds-icons/ChevronSmallDown';
+import { ChevronSmallDown } from '@elliemae/ds-icons';
 import { ComboBoxContext } from '../../ComboBoxCTX.js';
 import { StyledDropDownButton } from './styled.js';
 import { ComboboxDataTestid } from '../../ComboboxDataTestids.js';
@@ -27,4 +27,4 @@ const DropdownIndicator = () => {
   }, void 0, _ChevronSmallDown || (_ChevronSmallDown = /*#__PURE__*/_jsx(ChevronSmallDown, {})));
 };
 
-export { DropdownIndicator as default };
+export { DropdownIndicator, DropdownIndicator as default };

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

@@ -10,7 +10,7 @@ const useHeaderListHandlers = () => {
   const {
     props: {
       selectedValues,
-      options,
+      filteredOptions,
       onSelectAll,
       innerRef
     },
@@ -19,7 +19,7 @@ const useHeaderListHandlers = () => {
     setShowPopover
   } = useContext(ComboBoxContext);
   const multiSelectedValues = selectedValues;
-  const selectableOptions = getSelectableOptions(options);
+  const selectableOptions = getSelectableOptions(filteredOptions);
   const getCheckboxStatus = useMemo(() => {
     if (multiSelectedValues.length === selectableOptions.length) {
       return true;
@@ -40,13 +40,13 @@ const useHeaderListHandlers = () => {
   }, []);
   const handleSelectAllCheckboxChange = useCallback(e => {
     if ((!checkboxStatus || checkboxStatus === 'mixed') && onSelectAll) {
-      onSelectAll(options.filter(option => option.type === 'option' && !option.disabled), e);
+      onSelectAll(filteredOptions.filter(option => option.type === 'option' && !option.disabled), e);
       setCheckboxStatus(true);
     } else if (onSelectAll) {
       onSelectAll([], e);
       setCheckboxStatus(false);
     }
-  }, [checkboxStatus, onSelectAll, options]);
+  }, [checkboxStatus, onSelectAll, filteredOptions]);
   const handleToggleSelectedValuesFilter = useCallback(e => {
     e.preventDefault();
     setShowSelectedOptions(!showSelectedOptions);

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

@@ -1,5 +1,6 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import { useContext, useCallback, useMemo } from 'react';
+import { useOnElementResize } from '@elliemae/ds-utilities';
 import { StyledListWrapper, StyledVirtualListWrapper, StyledList, StyledNoResultsWrapper } from './styled.js';
 import { ComboboxDataTestid } from '../../ComboboxDataTestids.js';
 import { ComboBoxContext } from '../../ComboBoxCTX.js';
@@ -15,18 +16,22 @@ const MenuList = () => {
       menuMaxHeight,
       onCreate,
       inline,
-      options,
+      filteredOptions,
       selectedValues
     },
-    referenceElement,
+    controlsWrapperRef,
     listRef,
     inputValue,
     wrapperListRef,
     virtualListHelpers
   } = useContext(ComboBoxContext);
-  const multiple = Array.isArray(selectedValues);
-  const withHeader = !inline && multiple && options.length > 0 && inputValue === '';
+  const multiple = Array.isArray(selectedValues); // removing the header list if we are filtering or is inline cb or we have no options to show
+
+  const withHeader = !inline && multiple && filteredOptions.length > 0 && !inputValue;
   const ItemRenderer = useItemRenderer();
+  const {
+    width
+  } = useOnElementResize(controlsWrapperRef);
   const preventLoseInputFocus = useCallback(e => {
     e.preventDefault();
   }, []);
@@ -34,8 +39,9 @@ const MenuList = () => {
     ref: wrapperListRef,
     inline: inline,
     onMouseDown: preventLoseInputFocus,
-    minWidth: menuMinWidth || "".concat((referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.offsetWidth) || '100%'),
-    children: [withHeader && (_HeaderList || (_HeaderList = /*#__PURE__*/_jsx(HeaderList, {}))), options.length > 0 || onCreate ? /*#__PURE__*/jsx(StyledVirtualListWrapper, {
+    width: width,
+    minWidth: menuMinWidth,
+    children: [withHeader && (_HeaderList || (_HeaderList = /*#__PURE__*/_jsx(HeaderList, {}))), filteredOptions.length > 0 || onCreate ? /*#__PURE__*/jsx(StyledVirtualListWrapper, {
       inline: inline,
       maxHeight: menuMaxHeight,
       ref: listRef,
@@ -52,7 +58,7 @@ const MenuList = () => {
     }) : _StyledNoResultsWrapp || (_StyledNoResultsWrapp = /*#__PURE__*/_jsx(StyledNoResultsWrapper, {
       "aria-live": "polite"
     }, void 0, "No matches found"))]
-  }), [wrapperListRef, inline, menuMinWidth, referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.offsetWidth, withHeader, options.length, menuMaxHeight, listRef, virtualListHelpers === null || virtualListHelpers === void 0 ? void 0 : virtualListHelpers.totalSize, ItemRenderer, onCreate, preventLoseInputFocus]);
+  }), [wrapperListRef, inline, preventLoseInputFocus, width, menuMinWidth, withHeader, filteredOptions.length, onCreate, menuMaxHeight, listRef, virtualListHelpers === null || virtualListHelpers === void 0 ? void 0 : virtualListHelpers.totalSize, ItemRenderer]);
 };
 
 export { MenuList };

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

@@ -2,17 +2,28 @@ import _taggedTemplateLiteral from '@babel/runtime/helpers/esm/taggedTemplateLit
 import { styled } from '@elliemae/ds-system';
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
-const StyledListWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  min-width: ", ";\n  background-color: #ffffff;\n"])), props => props.inline ? '100%' : "".concat(props.minWidth, "px"));
+const StyledListWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  min-width: ", ";\n  width: ", ";\n  background-color: #ffffff;\n"])), _ref => {
+  let {
+    inline,
+    minWidth
+  } = _ref;
+  return inline ? '100%' : "".concat(minWidth, "px");
+}, _ref2 => {
+  let {
+    width
+  } = _ref2;
+  return "".concat(width, "px");
+});
 const StyledList = styled.ul(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: relative;\n  padding: 0;\n"])));
-const StyledVirtualListWrapper = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  overflow-y: auto;\n  margin-top: ", ";\n\n  max-height: ", ";\n"])), _ref => {
+const StyledVirtualListWrapper = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  overflow-y: auto;\n  margin-top: ", ";\n\n  max-height: ", ";\n"])), _ref3 => {
   let {
     withHeader
-  } = _ref;
+  } = _ref3;
   return withHeader ? '28px' : '';
-}, _ref2 => {
+}, _ref4 => {
   let {
     maxHeight
-  } = _ref2;
+  } = _ref4;
   return !maxHeight ? '400px' : "".concat(maxHeight, "px");
 });
 const StyledCreatableLabel = styled.span(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  font-weight: bold;\n  font-style: italic;\n"])));

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

@@ -25,12 +25,12 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 const useItemRenderer = () => {
   const {
     props: {
-      options,
+      filteredOptions,
       onCreate,
       onChange,
       selectedValues,
       onFilter,
-      innerRef
+      allOptions
     },
     setShowPopover,
     inputValue,
@@ -45,11 +45,11 @@ const useItemRenderer = () => {
       if (inputValue) {
         onCreate(inputValue);
         setInputValue('');
-        onFilter('');
+        onFilter(allOptions, inputValue);
       }
     } else if (option.type === MENU_OPTION_TYPES.OPTION) {
       if (!option.disabled) {
-        if (onFilter) onFilter('');
+        if (onFilter) onFilter(allOptions, inputValue);
         setInputValue('');
 
         if (!multiple) {
@@ -63,7 +63,7 @@ const useItemRenderer = () => {
 
     e.stopPropagation();
     e.preventDefault();
-  }, [onFilter, selectedValues, onChange, setShowPopover, multiple, innerRef]); // prevent blur from controls input
+  }, [onFilter, selectedValues, onChange, setShowPopover, multiple]); // prevent blur from controls input
 
   const handleOnMouseDown = useCallback(e => {
     e.preventDefault();
@@ -74,7 +74,7 @@ const useItemRenderer = () => {
     }
 
     return virtualListHelpers.virtualItems.map(vItem => {
-      const option = options[vItem.index];
+      const option = filteredOptions[vItem.index];
       const generalProps = {
         wrapperStyles: {
           position: 'absolute',
@@ -124,7 +124,7 @@ const useItemRenderer = () => {
               height: "16px",
               gutter: "xxs",
               alignItems: "center"
-            }, void 0, _StyledCreatableLabel || (_StyledCreatableLabel = /*#__PURE__*/_jsx(StyledCreatableLabel, {}, void 0, "Add:")), /*#__PURE__*/_jsx("span", {}, void 0, label));
+            }, void 0, _StyledCreatableLabel || (_StyledCreatableLabel = /*#__PURE__*/_jsx(StyledCreatableLabel, {}, void 0, "Add:")), /*#__PURE__*/_jsx("span", {}, void 0, "\"".concat(label, "\"")));
           },
           label: option.label,
           onClick: e => handleClick(option, e)
@@ -133,7 +133,7 @@ const useItemRenderer = () => {
 
       return /*#__PURE__*/jsx(Fragment, {});
     });
-  }, [options, focusOptionIdx, selectedValues, innerRef, virtualListHelpers === null || virtualListHelpers === void 0 ? void 0 : virtualListHelpers.virtualItems]);
+  }, [filteredOptions, focusOptionIdx, selectedValues, virtualListHelpers]);
 };
 
 export { useItemRenderer };

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

@@ -6,7 +6,7 @@ const useMenuListSetFocusOption = () => {
   const {
     props: {
       selectedValues,
-      options
+      filteredOptions
     },
     setFocusOptionIdx,
     hasFocus,
@@ -15,16 +15,16 @@ const useMenuListSetFocusOption = () => {
     scrollOptionIntoView
   } = useContext(ComboBoxContext);
   const getFirstOption = useCallback(() => {
-    for (let i = 0; i < options.length; i += 1) if (!['section', 'separator'].includes(options[i].type) && !options[i].disabled) {
-      setFocusOptionIdx(options[i].dsId);
+    for (let i = 0; i < filteredOptions.length; i += 1) if (!['section', 'separator'].includes(filteredOptions[i].type) && !filteredOptions[i].disabled) {
+      setFocusOptionIdx(filteredOptions[i].dsId);
       break;
     }
-  }, [options, setFocusOptionIdx]);
+  }, [filteredOptions, setFocusOptionIdx]);
   useEffect(() => {
     scrollOptionIntoView(focusOptionIdx); // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [focusOptionIdx]);
   useEffect(() => {
-    if (options.length === 0) {
+    if (filteredOptions.length === 0) {
       setFocusOptionIdx('');
     }
 
@@ -41,7 +41,7 @@ const useMenuListSetFocusOption = () => {
     }
 
     if (hasFocus) getFirstOption();
-  }, [getFirstOption, inputValue, selectedValues, hasFocus, setFocusOptionIdx, options.length]);
+  }, [getFirstOption, inputValue, selectedValues, hasFocus, setFocusOptionIdx, filteredOptions.length]);
 };
 
 export { useMenuListSetFocusOption };

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

@@ -12,7 +12,8 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 function noop() {}
 const ComboboxPropTypes = _objectSpread(_objectSpread({}, globalAttributesPropTypes), {}, {
   placeholder: PropTypes.string.description("input's placeholder value").defaultValue(''),
-  options: PropTypes.oneOfType([PropTypes.array, PropTypes.object]).isRequired.description('List of options').defaultValue([]),
+  allOptions: PropTypes.oneOfType([PropTypes.array, PropTypes.object]).isRequired.description('List of original options').defaultValue([]),
+  filteredOptions: PropTypes.oneOfType([PropTypes.array, PropTypes.object]).description('List of filtered options to show in the menu based on the current internal input filter value').defaultValue([]),
   selectedValues: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object]).isRequired.description('Array of option or single option selected'),
   disabled: PropTypes.bool.description('wheter or not the input is disabled').defaultValue('false'),
   autoFocus: PropTypes.bool.description('Whether the combo box uses auto focus or not').defaultValue('false'),

package/esm/combobox/utils/listHelper.js

@@ -6,6 +6,8 @@ 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 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
 import { MENU_OPTION_TYPES } from '../constants.js';
 
 const getSelectableOptions = options => options.filter(option => option.type === MENU_OPTION_TYPES.OPTION && !option.disabled);
@@ -30,15 +32,17 @@ const findInCircularList = function (list, from, criteria) {
 
   return from; // return same item
 };
+const getLastValueSelected = selectedValues => {
+  if (Array.isArray(selectedValues)) {
+    return selectedValues[selectedValues.length - 1];
+  }
+
+  return selectedValues;
+};
 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;
-    }
+    const lastValue = getLastValueSelected(selectedValues);
+    if (lastValue) return lastValue.dsId;
   }
 
   for (let i = 0; i < options.length; i += 1) if (!['section', 'separator'].includes(options[i].type) && !options[i].disabled) {
@@ -64,12 +68,34 @@ const getSuggestedValueOnChange = (selectedOption, selectedValues) => {
 
   return selectedOption;
 };
-const getLastValueSelected = selectedValues => {
-  if (Array.isArray(selectedValues)) {
-    return selectedValues[selectedValues.length - 1];
+const filterOptions = (inputValue, options) => options.filter(option => option.type === MENU_OPTION_TYPES.OPTION && option.label.toLowerCase().includes(inputValue.toLowerCase()));
+const selectedValuesWithSections = (optionsToParse, multiSelectedValue) => {
+  var _items2;
+
+  const items = [];
+  if (optionsToParse) optionsToParse.forEach(option => {
+    // const isSelectedValue = multiSelectedValue.find((item) => item?.dsId === option.dsId);
+    if (option.type === MENU_OPTION_TYPES.OPTION && isSelected(multiSelectedValue, option)) {
+      items.push(option);
+    }
+
+    if (option.type === MENU_OPTION_TYPES.SECTION) {
+      var _items;
+
+      if (((_items = items[items.length - 1]) === null || _items === void 0 ? void 0 : _items.type) === MENU_OPTION_TYPES.SECTION) {
+        items[items.length - 1] = option;
+      } else {
+        items.push(option);
+      }
+    }
+  });
+
+  if (((_items2 = items[items.length - 1]) === null || _items2 === void 0 ? void 0 : _items2.type) === MENU_OPTION_TYPES.SECTION) {
+    items.pop();
   }
 
-  return selectedValues;
+  return items;
 };
+const getFilteredOptionsSelected = (filteredOption, selectedValues) => filteredOption.filter(option => option.type === MENU_OPTION_TYPES.OPTION && isSelected(selectedValues, option));
 
-export { findInCircularList, getFirstOption, getLastValueSelected, getOptions, getSelectableOptions, getSuggestedValueOnChange, isSelected, isSelectedValueEmpty, isSelectedValueMultiple };
+export { filterOptions, findInCircularList, getFilteredOptionsSelected, getFirstOption, getLastValueSelected, getOptions, getSelectableOptions, getSuggestedValueOnChange, isSelected, isSelectedValueEmpty, isSelectedValueMultiple, selectedValuesWithSections };

package/esm/index.js

@@ -1,6 +1,6 @@
 export { DSAutocomplete, DSAutocompleteWithSchema } from './autocomplete/Autocomplete.js';
 export { DSControlledCheckbox, DSControlledCheckboxWithSchema } from './checkbox/ControlledCheckbox.js';
-export { DSComboBox, DSComboBoxWithSchema } from './combobox/ComboBox.js';
+export { DSComboBox, DSComboBox as DSComboBoxV3, DSComboBoxWithSchema } from './combobox/ComboBox.js';
 export { DSControlledDateRangePicker, DSControlledDateRangePickerWithSchema } from './date-range-picker/ControlledDateRangePicker.js';
 export { ControlledDateRangePickerDatatestid } from './date-range-picker/ControlledDateRangePickerDatatestid.js';
 export { CONTROLLED_DATE_RANGE_PICKER_TYPES } from './date-range-picker/ControlledDateRangePickerTypes.js';
@@ -11,10 +11,10 @@ export { deconstructValuesFromDateString, prependStringWithPlaceHolders } from '
 export { getValidationDateTimeStringMetaInfo } from './date-time-picker/utils/dateTimeHelpers.js';
 export { getDateStringFromDay, getDateValuesFromDate, getDayFromDateString, getValidationDateStringMetaInfo } from './date-time-picker/utils/dateHelpers.js';
 export { getValidationTimeStringMetaInfo } from './date-time-picker/utils/timeHelpers.js';
-export { UsePhoneMaskWithSchema, usePhoneMask } from './mask-hook/hooks/usePhoneMask.js';
-export { UseNumberMaskWithSchema, useNumberMask } from './mask-hook/hooks/useNumberMask.js';
-export { UseSSNMaskWithSchema, useSSNMask } from './mask-hook/hooks/useSSNMask.js';
-export { UseZipCodeMaskWithSchema, useZipCode } from './mask-hook/hooks/useZipCode.js';
+export { UsePhoneMaskWithSchema, getPhoneMaskedValue, usePhoneMask } from './mask-hook/hooks/usePhoneMask.js';
+export { UseNumberMaskWithSchema, getNumberMaskedValue, useNumberMask } from './mask-hook/hooks/useNumberMask.js';
+export { UseSSNMaskWithSchema, getSSNMaskedValue, useSSNMask } from './mask-hook/hooks/useSSNMask.js';
+export { UseZipCodeMaskWithSchema, getUseZipMaskedValue, useZipCodeMask } from './mask-hook/hooks/useZipCodeMask.js';
 export { DSInputText, DSInputTextWithSchema } from './text-input/DSInputText.js';
 export { DSInputTextDataTestIds } from './text-input/exported-related/data-test-ids.js';
 export { DSInputTextName, DSInputTextSlots } from './text-input/exported-related/theming.js';

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

@@ -1,4 +1,4 @@
-export { UsePhoneMaskWithSchema, usePhoneMask } from './usePhoneMask.js';
-export { UseNumberMaskWithSchema, useNumberMask } from './useNumberMask.js';
-export { UseSSNMaskWithSchema, useSSNMask } from './useSSNMask.js';
-export { UseZipCodeMaskWithSchema, useZipCode } from './useZipCode.js';
+export { UsePhoneMaskWithSchema, getPhoneMaskedValue, usePhoneMask } from './usePhoneMask.js';
+export { UseNumberMaskWithSchema, getNumberMaskedValue, useNumberMask } from './useNumberMask.js';
+export { UseSSNMaskWithSchema, getSSNMaskedValue, useSSNMask } from './useSSNMask.js';
+export { UseZipCodeMaskWithSchema, getUseZipMaskedValue, useZipCodeMask } from './useZipCodeMask.js';

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

@@ -156,7 +156,11 @@ const useNumberMask = props => {
     onBlur
   };
 };
+const getNumberMaskedValue = (value, opts) => {
+  const [maskedValue] = conformValue(value, value.length - 1, '', opts);
+  return maskedValue;
+};
 const UseNumberMaskWithSchema = describe(useNumberMask);
 UseNumberMaskWithSchema.propTypes = DSMaskNumberHookPropsTypes;
 
-export { UseNumberMaskWithSchema, useNumberMask };
+export { UseNumberMaskWithSchema, getNumberMaskedValue, useNumberMask };

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

@@ -78,7 +78,11 @@ const usePhoneMask = props => {
     onChange
   };
 };
+const getPhoneMaskedValue = (value, opts) => {
+  const [maskedValue] = conformValue(value, value.length - 1, '', opts);
+  return maskedValue;
+};
 const UsePhoneMaskWithSchema = describe(usePhoneMask);
 UsePhoneMaskWithSchema.propTypes = DSMaskPhoneHookPropsTypes;
 
-export { UsePhoneMaskWithSchema, usePhoneMask };
+export { UsePhoneMaskWithSchema, getPhoneMaskedValue, usePhoneMask };

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

@@ -61,7 +61,11 @@ const useSSNMask = props => {
     onChange
   };
 };
+const getSSNMaskedValue = value => {
+  const [maskedValue] = conformValue(value, value.length - 1, '');
+  return maskedValue;
+};
 const UseSSNMaskWithSchema = describe(useSSNMask);
 UseSSNMaskWithSchema.propTypes = DSMaskHookPropsTypes;
 
-export { UseSSNMaskWithSchema, useSSNMask };
+export { UseSSNMaskWithSchema, getSSNMaskedValue, useSSNMask };

package/esm/mask-hook/hooks/{useZipCode.js → useZipCodeMask.js}

@@ -14,14 +14,14 @@ const zipCodeSpecialChars = [['-', 5]];
 
 const conformValue = (rawValue, cursorPos, lastKeyCode) => {
   // Work with digits only
-  let maskedValue = rawValue.split('').filter(char => char >= '0' && char <= '9'); // We only consider first 5 digits
+  let maskedValue = rawValue.split('').filter(char => char >= '0' && char <= '9'); // We only consider first 9 digits
 
-  maskedValue = maskedValue.slice(0, 6);
+  maskedValue = maskedValue.slice(0, 9);
   const maskedPos = getPartialMaskedPos(rawValue, maskedValue, cursorPos);
   return addSpecialCharacters(maskedValue, zipCodeSpecialChars, maskedPos, lastKeyCode);
 };
 
-const useZipCode = props => {
+const useZipCodeMask = props => {
   const propsWithDefault = useMemoMergePropsWithDefault(props, DSMaskHookDefaultProps);
   useValidateTypescriptPropTypes(propsWithDefault, DSMaskHookPropsTypes);
   const {
@@ -58,7 +58,11 @@ const useZipCode = props => {
     onChange
   };
 };
-const UseZipCodeMaskWithSchema = describe(useZipCode);
+const getUseZipMaskedValue = value => {
+  const [maskedValue] = conformValue(value, value.length - 1, '');
+  return maskedValue;
+};
+const UseZipCodeMaskWithSchema = describe(useZipCodeMask);
 UseZipCodeMaskWithSchema.propTypes = DSMaskHookPropsTypes;
 
-export { UseZipCodeMaskWithSchema, useZipCode };
+export { UseZipCodeMaskWithSchema, getUseZipMaskedValue, useZipCodeMask };

package/esm/mask-hook/index.js

@@ -1,4 +1,4 @@
-export { UsePhoneMaskWithSchema, usePhoneMask } from './hooks/usePhoneMask.js';
-export { UseNumberMaskWithSchema, useNumberMask } from './hooks/useNumberMask.js';
-export { UseSSNMaskWithSchema, useSSNMask } from './hooks/useSSNMask.js';
-export { UseZipCodeMaskWithSchema, useZipCode } from './hooks/useZipCode.js';
+export { UsePhoneMaskWithSchema, getPhoneMaskedValue, usePhoneMask } from './hooks/usePhoneMask.js';
+export { UseNumberMaskWithSchema, getNumberMaskedValue, useNumberMask } from './hooks/useNumberMask.js';
+export { UseSSNMaskWithSchema, getSSNMaskedValue, useSSNMask } from './hooks/useSSNMask.js';
+export { UseZipCodeMaskWithSchema, getUseZipMaskedValue, useZipCodeMask } from './hooks/useZipCodeMask.js';