@elliemae/ds-controlled-form 2.4.3-rc.1 → 2.4.3-rc.12

package/cjs/combobox/ComboBoxCTX.js

@@ -18,7 +18,8 @@ const defaultProps = {
   startPlacementPreference: 'bottom-start',
   placementOrderPreference: ['bottom-start', 'bottom-end'],
   noOptionsMessage: 'No Matches Found',
-  filteredOptions: [] // override in useCombobox to avoid ref duplications when more than one cb is used
+  filteredOptions: [],
+  isNonClearable: false // override in useCombobox to avoid ref duplications when more than one cb is used
 
 };
 const defaultContext = {

package/cjs/combobox/parts/controls-input/ControlsInput.js

@@ -44,7 +44,7 @@ const ControlsInput = () => {
   return /*#__PURE__*/_jsx__default["default"](styled.StyledInputWrapper, {}, void 0, /*#__PURE__*/jsxRuntime.jsx(styled.StyledInputWidthReference, {
     ref: spanReference,
     children: spanReferenceText
-  }), /*#__PURE__*/_jsx__default["default"](styled.StyledInputPlaceHolder, {}, void 0, /*#__PURE__*/_jsx__default["default"](dsTruncatedTooltipText.SimpleTruncatedTooltipText, {
+  }), showPlaceholder && /*#__PURE__*/_jsx__default["default"](styled.StyledInputPlaceHolder, {}, void 0, /*#__PURE__*/_jsx__default["default"](dsTruncatedTooltipText.SimpleTruncatedTooltipText, {
     value: showPlaceholder
   })), /*#__PURE__*/jsxRuntime.jsx(styled.StyledInput, {
     "data-testid": ComboboxDataTestids.ComboboxDataTestid.INPUT,

package/cjs/combobox/parts/controls-input/styled.js

@@ -12,7 +12,9 @@ const StyledInput = dsSystem.styled('input', {
   font-size: 13px;
   line-height: 13px;
   border: none;
+  overflow: hidden;
   padding: 0;
+  z-index: 2;
   outline: none;
   color: ${props => props.theme.colors.neutral[700]};
   &:focus {
@@ -41,17 +43,20 @@ const StyledInputPlaceHolder = dsSystem.styled.div`
   & span::after {
     content: '';
     padding: 1px;
+    // solve italic font style clipping issue with overflow hidden.
   }
 `;
 const StyledInputWidthReference = dsSystem.styled.span`
   visibility: hidden;
   position: absolute;
   top: -9999px;
+  z-index: 1;
 `;
 const StyledInputWrapper = dsSystem.styled('div')`
   position: relative;
   align-items: center;
   display: flex;
+  padding-right: 1px;
 `;
 
 exports.StyledInput = StyledInput;

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

@@ -17,7 +17,6 @@ const useControlsInput = () => {
     },
     setHasFocus,
     inputValue,
-    setMenuState,
     setInputValue
   } = React.useContext(ComboBoxCTX.ComboBoxContext);
   const [width, setWidth] = React.useState(1); // use span reference to calculate the real width for the input
@@ -26,7 +25,11 @@ const useControlsInput = () => {
   const showPlaceholder = !inputValue && listHelper.isSelectedValueEmpty(selectedValues) ? placeholder : null;
   const spanReferenceText = inputValue.replace(/\s/g, '\u00a0');
   React.useEffect(() => {
-    setWidth(spanReference.current?.offsetWidth ? spanReference.current.offsetWidth + 2 : 1);
+    if (spanReference.current) {
+      spanReference.current.style.display = 'block';
+      setWidth(spanReference.current?.offsetWidth ? spanReference.current.offsetWidth + 2 : 1);
+      spanReference.current.style.display = 'none';
+    }
   }, [inputValue]); // if we se an input mask we configure inside here the proper mask
   // or a stardard combobox onchange event
 

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

@@ -18,6 +18,7 @@ const useKeyboardNavigation = () => {
   const {
     props: {
       allOptions,
+      isNonClearable,
       onCancel,
       onKeyDown,
       onChange,
@@ -156,10 +157,8 @@ const useKeyboardNavigation = () => {
       const lastValue = listHelper.getLastValueSelected(selectedValues);
 
       if (!e.currentTarget.value && lastValue) {
-        onChange(listHelper.getSuggestedValueOnChange(lastValue, selectedValues), lastValue, e);
+        onChange(listHelper.getSuggestedValueOnChange(lastValue, selectedValues, isNonClearable), lastValue, e);
       }
-
-      if (onFilter) onFilter(allOptions, inputValue);
     }
 
     if (e.key === 'Tab' && !inline && menuState) {
@@ -173,7 +172,7 @@ const useKeyboardNavigation = () => {
       }
     }
   }, // eslint-disable-next-line react-hooks/exhaustive-deps
-  [onKeyDown, currentItem, onCreate, multiple, inputValue, inline, withoutPortal, setMenuState, onCancel, onFilter, setInputValue, listRef, focusOptionIdx, menuState, selectableOptions.length, filteredOptions, currentItemIndex, setFocusOptionIdx, selectedValues, onChange, selectAllCheckboxRef, toggleSelectionButtonRef]);
+  [onKeyDown, currentItem, onCreate, multiple, inputValue, inline, withoutPortal, setMenuState, onCancel, onFilter, setInputValue, listRef, focusOptionIdx, menuState, selectableOptions.length, filteredOptions, currentItemIndex, setFocusOptionIdx, selectedValues, onChange, selectAllCheckboxRef, toggleSelectionButtonRef, isNonClearable]);
   return {
     onInputKeyDown
   };

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

@@ -37,6 +37,7 @@ const useItemRenderer = () => {
       filteredOptions,
       onCreate,
       onChange,
+      isNonClearable,
       selectedValues,
       onFilter,
       allOptions
@@ -66,7 +67,7 @@ const useItemRenderer = () => {
           setMenuState(false, 'selectOption', e);
         }
 
-        onChange(listHelper.getSuggestedValueOnChange(option, selectedValues), option, e);
+        onChange(listHelper.getSuggestedValueOnChange(option, selectedValues, isNonClearable), option, e);
       }
     } // prevent for loosing focus on input control
 

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

@@ -19,6 +19,7 @@ const RemovableSelectedValuePill = props => {
   const {
     props: {
       onChange,
+      isNonClearable,
       disabled,
       selectedValues,
       innerRef
@@ -28,7 +29,7 @@ const RemovableSelectedValuePill = props => {
     size: "s",
     label: pill.label,
     disabled: disabled,
-    type: disabled ? 'value' : 'removable',
+    type: disabled || isNonClearable ? 'value' : 'removable',
     tabIndex: -1,
     onRemove: e => {
       // preventing the menu to be opened

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

@@ -21,6 +21,7 @@ const useGroupPills = () => {
   const {
     props: {
       selectedValues,
+      isNonClearable,
       disabled,
       innerRef
     },
@@ -51,7 +52,7 @@ const useGroupPills = () => {
       let lastPillFit = -1;
       let currentWidth = 0;
       const referenceWidth = selectedOptionsRef.current.offsetWidth;
-      const pills = [...pillGroupRef.current.querySelectorAll(disabled ? '.ds-pill-wrapper-value' : '.ds-pill-wrapper-removable')];
+      const pills = [...pillGroupRef.current.querySelectorAll(disabled || isNonClearable ? '.ds-pill-wrapper-value' : '.ds-pill-wrapper-removable')];
       const pillsWidth = pills.map(pill => pill?.offsetWidth);
       pillsWidth.forEach((pillWidth, idx) => {
         currentWidth += pillWidth;
@@ -71,7 +72,7 @@ const useGroupPills = () => {
 
       if (pillGroupRef.current) pillGroupRef.current.style.width = 'fit-content';
     }
-  }, [selectedOptionsRef, innerRef, multiSelectedValues, pillsToShow, pillGroupRef, width, widthInput, disabled, selectedValuesLength]);
+  }, [selectedOptionsRef, innerRef, multiSelectedValues, pillsToShow, pillGroupRef, width, widthInput, disabled, selectedValuesLength, isNonClearable]);
   return pillsToShow || 1;
 };
 

package/cjs/combobox/utils/listHelper.js

@@ -55,11 +55,12 @@ const getFirstOption = (options, selectedValues, inputValue) => {
 
   return '';
 };
-const getSuggestedValueOnChange = (selectedOption, selectedValues) => {
+const getSuggestedValueOnChange = (selectedOption, selectedValues, isNonClearable) => {
   if (Array.isArray(selectedValues)) {
     const isFound = selectedValues.find(item => item.type === 'option' && item.value === selectedOption.value);
 
     if (isFound) {
+      if (isNonClearable) return selectedValues;
       return selectedValues.filter(item => item.type === 'option' && item.value !== selectedOption.value);
     }
 
@@ -67,12 +68,16 @@ const getSuggestedValueOnChange = (selectedOption, selectedValues) => {
   }
 
   if (selectedValues && selectedValues.dsId === selectedOption.dsId) {
+    if (isNonClearable) return selectedOption;
     return null;
   }
 
   return selectedOption;
 };
-const filterOptions = (inputValue, options) => options.filter(option => option.type === constants.MENU_OPTION_TYPES.OPTION && option.label.toLowerCase().includes(inputValue.toLowerCase()));
+const filterOptions = (inputValue, options) => {
+  if (inputValue === '') return options;
+  return options.filter(option => option.type === constants.MENU_OPTION_TYPES.OPTION && option.label.toLowerCase().includes(inputValue.toLowerCase()));
+};
 const selectedValuesWithSections = (optionsToParse, multiSelectedValue) => {
   const items = [];
   if (optionsToParse) optionsToParse.forEach(option => {

package/cjs/date-time-picker/parts/ClearButton/ClearButton.js

@@ -51,7 +51,8 @@ const ClearButton = () => {
       if (latestInteractionRegion === 'clear-btn' && currFocusDescriber === 'clear-btn') DomElem?.focus?.();
     },
     onClick: onClearClick,
-    onKeyDown: onClearButtonKeyDown
+    onKeyDown: onClearButtonKeyDown,
+    type: "button"
   }, styledsAttrs), {}, {
     children: /*#__PURE__*/_jsx__default["default"](dsIcons.CloseMedium, {
       color: dsIcon.DSIconColors.PRIMARY

package/cjs/date-time-picker/parts/Pickers/Calendar/CalendarHead.js

@@ -78,7 +78,8 @@ const CalendarHead = () => {
     onKeyDown: handlePrevYearKeyDown,
     onFocus: onPrevYearFocus,
     tabIndex: isControllerOnly ? -1 : 1,
-    "data-testid": ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.CALENDAR.PREV_YEAR
+    "data-testid": ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.CALENDAR.PREV_YEAR,
+    type: "button"
   }, void 0, _ChevronDoubleLeft || (_ChevronDoubleLeft = /*#__PURE__*/_jsx__default["default"](dsIcons.ChevronDoubleLeft, {
     height: 14,
     width: 14,
@@ -92,7 +93,8 @@ const CalendarHead = () => {
     innerRef: handlePrevMonthRef,
     onKeyDown: handlePrevMonthKeyDown,
     onFocus: onPrevMonthFocus,
-    "data-testid": ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.CALENDAR.PREV_MONTH // this is a tabstop for when the calendar is open
+    "data-testid": ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.CALENDAR.PREV_MONTH,
+    type: "button" // this is a tabstop for when the calendar is open
 
   }, void 0, _ChevronLeft || (_ChevronLeft = /*#__PURE__*/_jsx__default["default"](dsIcons.ChevronLeft, {
     fill: "#25292f"
@@ -104,7 +106,8 @@ const CalendarHead = () => {
     innerRef: handleNextMonthRef,
     onKeyDown: handleNextMonthKeyDown,
     onFocus: onNextMonthFocus,
-    "data-testid": ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.CALENDAR.NEXT_MONTH
+    "data-testid": ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.CALENDAR.NEXT_MONTH,
+    type: "button"
   }, void 0, _ChevronRight || (_ChevronRight = /*#__PURE__*/_jsx__default["default"](dsIcons.ChevronRight, {
     fill: "#25292f"
   }))), /*#__PURE__*/_jsx__default["default"](Styleds.StyledHeaderButton, {
@@ -115,7 +118,8 @@ const CalendarHead = () => {
     innerRef: handleNextYearRef,
     onKeyDown: handleNextYearKeyDown,
     onFocus: onNextYearFocus,
-    "data-testid": ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.CALENDAR.NEXT_YEAR
+    "data-testid": ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.CALENDAR.NEXT_YEAR,
+    type: "button"
   }, void 0, _ChevronDoubleRight || (_ChevronDoubleRight = /*#__PURE__*/_jsx__default["default"](dsIcons.ChevronDoubleRight, {
     height: 14,
     width: 14,

package/cjs/date-time-picker/parts/Pickers/Calendar/CalendarIconTrigger.js

@@ -39,7 +39,8 @@ const CalendarIconTrigger = () => {
     onClick: handleToggleCalendar,
     onKeyDown: handlePickerIconKeyDown,
     "data-testid": ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.PICKER_ICONS.CALENDAR,
-    disabled: disabled
+    disabled: disabled,
+    type: "button"
   }, void 0, _DatePicker || (_DatePicker = /*#__PURE__*/_jsx__default["default"](dsIcons.DatePicker, {}))), [ariaCurrentValueForInputs, handleSetTriggerRef, handleToggleCalendar, handlePickerIconKeyDown, disabled]);
 };
 

package/cjs/date-time-picker/parts/Pickers/Calendar/Day.js

@@ -140,7 +140,8 @@ const Day = _ref => {
       innerRef: handleInnerRef,
       tabIndex: isSelected ? 0 : -1,
       "data-isfocused": isFocused,
-      "data-testid": dataTestid
+      "data-testid": dataTestid,
+      type: "button"
     }, void 0, `${day.getDate()}`)
   }));
 };

package/cjs/date-time-picker/parts/Pickers/TimeWheel/HoursList.js

@@ -64,7 +64,8 @@ const HoursList = () => {
     onClick: handlePrevHour,
     innerRef: prevHourBtnRef,
     "data-testid": ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.TIMEWHEEL.PREV_HOUR,
-    tabIndex: -1
+    tabIndex: -1,
+    type: "button"
   }, void 0, _ChevronSmallUp || (_ChevronSmallUp = /*#__PURE__*/_jsx__default["default"](dsIcons.ChevronSmallUp, {})))), visibleHours.map(hourString => {
     const key = `timewheel-hour-${hourString || ''}`;
     if (!hourString) return /*#__PURE__*/_jsx__default["default"](Styleds.StyledWheelListItem, {}, key);
@@ -97,7 +98,8 @@ const HoursList = () => {
       "aria-valuemax": 12,
       "aria-valuemin": 1,
       "aria-valuenow": currHourNum,
-      "aria-valuetext": `${hourString} hours`
+      "aria-valuetext": `${hourString} hours`,
+      type: "button"
     }, btnProps), {}, {
       children: hourString
     })));
@@ -108,7 +110,8 @@ const HoursList = () => {
     onClick: handleNextHour,
     innerRef: nextHourBtnRef,
     tabIndex: -1,
-    "data-testid": ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.TIMEWHEEL.NEXT_HOUR
+    "data-testid": ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.TIMEWHEEL.NEXT_HOUR,
+    type: "button"
   }, void 0, _ChevronSmallDown || (_ChevronSmallDown = /*#__PURE__*/_jsx__default["default"](dsIcons.ChevronSmallDown, {})))));
 };
 

package/cjs/date-time-picker/parts/Pickers/TimeWheel/MeridiemList.js

@@ -79,6 +79,7 @@ const MeridiemList = () => {
     onClick: e => handleTimeWheelBtnChangeMeridiem('AM', e),
     innerRef: prevMeridiemBtnRef,
     tabIndex: -1,
+    type: "button",
     children: _ChevronSmallUp || (_ChevronSmallUp = /*#__PURE__*/_jsx__default["default"](dsIcons.ChevronSmallUp, {}))
   }))), currMeridiem === 'AM' || currMeridiem === '' ? _StyledWheelListItem || (_StyledWheelListItem = /*#__PURE__*/_jsx__default["default"](Styleds.StyledWheelListItem, {})) : null, /*#__PURE__*/_jsx__default["default"](Styleds.StyledWheelListItem, {
     isCurrentListItem: isAmCurrent
@@ -98,6 +99,7 @@ const MeridiemList = () => {
     "aria-valuemin": 0,
     "aria-valuenow": isPmCurrent ? 1 : 0,
     "aria-valuetext": isAmCurrent ? 'ante meridiem' : 'post meridiem',
+    type: "button",
     children: "AM"
   }))), /*#__PURE__*/_jsx__default["default"](Styleds.StyledWheelListItem, {
     isCurrentListItem: isPmCurrent
@@ -117,6 +119,7 @@ const MeridiemList = () => {
     "aria-valuemin": 0,
     "aria-valuenow": isPmCurrent ? 1 : 0,
     "aria-valuetext": isAmCurrent ? 'ante meridiem' : 'post meridiem',
+    type: "button",
     children: "PM"
   }))), currMeridiem === 'PM' ? _StyledWheelListItem2 || (_StyledWheelListItem2 = /*#__PURE__*/_jsx__default["default"](Styleds.StyledWheelListItem, {})) : null, /*#__PURE__*/_jsx__default["default"](Styleds.StyledWheelListItem, {}, void 0, /*#__PURE__*/jsxRuntime.jsx(Styleds.StyledWheelChangeTimeBtn, _objectSpread(_objectSpread({}, styledPropsNextMeridiem), {}, {
     "aria-label": "set pm meridiem",
@@ -127,6 +130,7 @@ const MeridiemList = () => {
     onClick: e => handleTimeWheelBtnChangeMeridiem('PM', e),
     innerRef: nextMeridiemBtnRef,
     tabIndex: -1,
+    type: "button",
     children: _ChevronSmallDown || (_ChevronSmallDown = /*#__PURE__*/_jsx__default["default"](dsIcons.ChevronSmallDown, {}))
   }))));
 };

package/cjs/date-time-picker/parts/Pickers/TimeWheel/MinutesList.js

@@ -63,7 +63,8 @@ const MinutesList = () => {
     onClick: handlePrevMinute,
     innerRef: prevMinutesBtnRef,
     tabIndex: -1,
-    "data-testid": ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.TIMEWHEEL.PREV_MINUTE
+    "data-testid": ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.TIMEWHEEL.PREV_MINUTE,
+    type: "button"
   }, void 0, _ChevronSmallUp || (_ChevronSmallUp = /*#__PURE__*/_jsx__default["default"](dsIcons.ChevronSmallUp, {})))), visibleMinutes.map(minutesString => {
     const key = `timewheel-minutes-${minutesString || ''}`;
     if (!minutesString) return /*#__PURE__*/_jsx__default["default"](Styleds.StyledWheelListItem, {}, key);
@@ -96,7 +97,8 @@ const MinutesList = () => {
       "aria-valuemax": 59,
       "aria-valuemin": 0,
       "aria-valuenow": currMinuteNum,
-      "aria-valuetext": `${minutesString} minutes`
+      "aria-valuetext": `${minutesString} minutes`,
+      type: "button"
     }, btnProps), {}, {
       children: minutesString
     })));
@@ -107,7 +109,8 @@ const MinutesList = () => {
     onClick: handleNextMinute,
     innerRef: nextMinutesBtnRef,
     "data-testid": ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.TIMEWHEEL.NEXT_MINUTE,
-    tabIndex: -1
+    tabIndex: -1,
+    type: "button"
   }, void 0, _ChevronSmallDown || (_ChevronSmallDown = /*#__PURE__*/_jsx__default["default"](dsIcons.ChevronSmallDown, {})))));
 };
 

package/cjs/date-time-picker/parts/Pickers/TimeWheel/SecondsList.js

@@ -53,7 +53,8 @@ const SecondsList = () => {
     onClick: handlePrevSecond,
     onKeyDown: handlePrevSecondBtnOnKeyDown,
     innerRef: prevSecondsBtnRef,
-    tabIndex: -1
+    tabIndex: -1,
+    type: "button"
   }, void 0, _ChevronSmallUp || (_ChevronSmallUp = /*#__PURE__*/_jsx__default["default"](dsIcons.ChevronSmallUp, {})))), visibleSeconds.map(secondsString => {
     const key = `timewheel-seconds-${secondsString}`;
     if (!secondsString) return /*#__PURE__*/_jsx__default["default"](Styleds.StyledWheelListItem, {}, key);
@@ -72,7 +73,8 @@ const SecondsList = () => {
       size: "l",
       variant: DSButton.BUTTON_VARIANT.DEFAULT,
       onClick: e => handleTimeWheelBtnChangeSeconds(secondsString, e),
-      tabIndex: tabIndex
+      tabIndex: tabIndex,
+      type: "button"
     }, btnProps), {}, {
       children: secondsString
     })));
@@ -84,7 +86,8 @@ const SecondsList = () => {
     onClick: handleNextSecond,
     onKeyDown: handleNextSecondBtnOnKeyDown,
     innerRef: nextSecondsBtnRef,
-    tabIndex: -1
+    tabIndex: -1,
+    type: "button"
   }, void 0, _ChevronSmallDown || (_ChevronSmallDown = /*#__PURE__*/_jsx__default["default"](dsIcons.ChevronSmallDown, {})))));
 };
 

package/cjs/date-time-picker/parts/Pickers/TimeWheel/TimeWheelIconTrigger.js

@@ -38,7 +38,8 @@ const TimeWheelIconTrigger = () => {
     onClick: handleToggleTimePicker,
     onKeyDown: handlePickerIconKeyDown,
     "data-testid": ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.PICKER_ICONS.TIMEWHEEL,
-    disabled: disabled
+    disabled: disabled,
+    type: "button"
   }, void 0, _RecentDocuments || (_RecentDocuments = /*#__PURE__*/_jsx__default["default"](dsIcons.RecentDocuments, {}))), [ariaCurrentValueForInputs, disabled, handlePickerIconKeyDown, handleSetTriggerRef, handleToggleTimePicker]);
 };
 

package/esm/combobox/ComboBoxCTX.js

@@ -14,7 +14,8 @@ const defaultProps = {
   startPlacementPreference: 'bottom-start',
   placementOrderPreference: ['bottom-start', 'bottom-end'],
   noOptionsMessage: 'No Matches Found',
-  filteredOptions: [] // override in useCombobox to avoid ref duplications when more than one cb is used
+  filteredOptions: [],
+  isNonClearable: false // override in useCombobox to avoid ref duplications when more than one cb is used
 
 };
 const defaultContext = {

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

@@ -36,7 +36,7 @@ const ControlsInput = () => {
   return /*#__PURE__*/_jsx(StyledInputWrapper, {}, void 0, /*#__PURE__*/jsx(StyledInputWidthReference, {
     ref: spanReference,
     children: spanReferenceText
-  }), /*#__PURE__*/_jsx(StyledInputPlaceHolder, {}, void 0, /*#__PURE__*/_jsx(SimpleTruncatedTooltipText, {
+  }), showPlaceholder && /*#__PURE__*/_jsx(StyledInputPlaceHolder, {}, void 0, /*#__PURE__*/_jsx(SimpleTruncatedTooltipText, {
     value: showPlaceholder
   })), /*#__PURE__*/jsx(StyledInput, {
     "data-testid": ComboboxDataTestid.INPUT,

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

@@ -8,7 +8,9 @@ const StyledInput = styled('input', {
   font-size: 13px;
   line-height: 13px;
   border: none;
+  overflow: hidden;
   padding: 0;
+  z-index: 2;
   outline: none;
   color: ${props => props.theme.colors.neutral[700]};
   &:focus {
@@ -37,17 +39,20 @@ const StyledInputPlaceHolder = styled.div`
   & span::after {
     content: '';
     padding: 1px;
+    // solve italic font style clipping issue with overflow hidden.
   }
 `;
 const StyledInputWidthReference = styled.span`
   visibility: hidden;
   position: absolute;
   top: -9999px;
+  z-index: 1;
 `;
 const StyledInputWrapper = styled('div')`
   position: relative;
   align-items: center;
   display: flex;
+  padding-right: 1px;
 `;
 
 export { StyledInput, StyledInputPlaceHolder, StyledInputWidthReference, StyledInputWrapper };

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

@@ -13,7 +13,6 @@ const useControlsInput = () => {
     },
     setHasFocus,
     inputValue,
-    setMenuState,
     setInputValue
   } = useContext(ComboBoxContext);
   const [width, setWidth] = useState(1); // use span reference to calculate the real width for the input
@@ -22,7 +21,11 @@ const useControlsInput = () => {
   const showPlaceholder = !inputValue && isSelectedValueEmpty(selectedValues) ? placeholder : null;
   const spanReferenceText = inputValue.replace(/\s/g, '\u00a0');
   useEffect(() => {
-    setWidth(spanReference.current?.offsetWidth ? spanReference.current.offsetWidth + 2 : 1);
+    if (spanReference.current) {
+      spanReference.current.style.display = 'block';
+      setWidth(spanReference.current?.offsetWidth ? spanReference.current.offsetWidth + 2 : 1);
+      spanReference.current.style.display = 'none';
+    }
   }, [inputValue]); // if we se an input mask we configure inside here the proper mask
   // or a stardard combobox onchange event
 

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

@@ -14,6 +14,7 @@ const useKeyboardNavigation = () => {
   const {
     props: {
       allOptions,
+      isNonClearable,
       onCancel,
       onKeyDown,
       onChange,
@@ -152,10 +153,8 @@ const useKeyboardNavigation = () => {
       const lastValue = getLastValueSelected(selectedValues);
 
       if (!e.currentTarget.value && lastValue) {
-        onChange(getSuggestedValueOnChange(lastValue, selectedValues), lastValue, e);
+        onChange(getSuggestedValueOnChange(lastValue, selectedValues, isNonClearable), lastValue, e);
       }
-
-      if (onFilter) onFilter(allOptions, inputValue);
     }
 
     if (e.key === 'Tab' && !inline && menuState) {
@@ -169,7 +168,7 @@ const useKeyboardNavigation = () => {
       }
     }
   }, // eslint-disable-next-line react-hooks/exhaustive-deps
-  [onKeyDown, currentItem, onCreate, multiple, inputValue, inline, withoutPortal, setMenuState, onCancel, onFilter, setInputValue, listRef, focusOptionIdx, menuState, selectableOptions.length, filteredOptions, currentItemIndex, setFocusOptionIdx, selectedValues, onChange, selectAllCheckboxRef, toggleSelectionButtonRef]);
+  [onKeyDown, currentItem, onCreate, multiple, inputValue, inline, withoutPortal, setMenuState, onCancel, onFilter, setInputValue, listRef, focusOptionIdx, menuState, selectableOptions.length, filteredOptions, currentItemIndex, setFocusOptionIdx, selectedValues, onChange, selectAllCheckboxRef, toggleSelectionButtonRef, isNonClearable]);
   return {
     onInputKeyDown
   };

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

@@ -28,6 +28,7 @@ const useItemRenderer = () => {
       filteredOptions,
       onCreate,
       onChange,
+      isNonClearable,
       selectedValues,
       onFilter,
       allOptions
@@ -57,7 +58,7 @@ const useItemRenderer = () => {
           setMenuState(false, 'selectOption', e);
         }
 
-        onChange(getSuggestedValueOnChange(option, selectedValues), option, e);
+        onChange(getSuggestedValueOnChange(option, selectedValues, isNonClearable), option, e);
       }
     } // prevent for loosing focus on input control
 

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

@@ -11,6 +11,7 @@ const RemovableSelectedValuePill = props => {
   const {
     props: {
       onChange,
+      isNonClearable,
       disabled,
       selectedValues,
       innerRef
@@ -20,7 +21,7 @@ const RemovableSelectedValuePill = props => {
     size: "s",
     label: pill.label,
     disabled: disabled,
-    type: disabled ? 'value' : 'removable',
+    type: disabled || isNonClearable ? 'value' : 'removable',
     tabIndex: -1,
     onRemove: e => {
       // preventing the menu to be opened

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

@@ -17,6 +17,7 @@ const useGroupPills = () => {
   const {
     props: {
       selectedValues,
+      isNonClearable,
       disabled,
       innerRef
     },
@@ -47,7 +48,7 @@ const useGroupPills = () => {
       let lastPillFit = -1;
       let currentWidth = 0;
       const referenceWidth = selectedOptionsRef.current.offsetWidth;
-      const pills = [...pillGroupRef.current.querySelectorAll(disabled ? '.ds-pill-wrapper-value' : '.ds-pill-wrapper-removable')];
+      const pills = [...pillGroupRef.current.querySelectorAll(disabled || isNonClearable ? '.ds-pill-wrapper-value' : '.ds-pill-wrapper-removable')];
       const pillsWidth = pills.map(pill => pill?.offsetWidth);
       pillsWidth.forEach((pillWidth, idx) => {
         currentWidth += pillWidth;
@@ -67,7 +68,7 @@ const useGroupPills = () => {
 
       if (pillGroupRef.current) pillGroupRef.current.style.width = 'fit-content';
     }
-  }, [selectedOptionsRef, innerRef, multiSelectedValues, pillsToShow, pillGroupRef, width, widthInput, disabled, selectedValuesLength]);
+  }, [selectedOptionsRef, innerRef, multiSelectedValues, pillsToShow, pillGroupRef, width, widthInput, disabled, selectedValuesLength, isNonClearable]);
   return pillsToShow || 1;
 };
 

package/esm/combobox/utils/listHelper.js

@@ -51,11 +51,12 @@ const getFirstOption = (options, selectedValues, inputValue) => {
 
   return '';
 };
-const getSuggestedValueOnChange = (selectedOption, selectedValues) => {
+const getSuggestedValueOnChange = (selectedOption, selectedValues, isNonClearable) => {
   if (Array.isArray(selectedValues)) {
     const isFound = selectedValues.find(item => item.type === 'option' && item.value === selectedOption.value);
 
     if (isFound) {
+      if (isNonClearable) return selectedValues;
       return selectedValues.filter(item => item.type === 'option' && item.value !== selectedOption.value);
     }
 
@@ -63,12 +64,16 @@ const getSuggestedValueOnChange = (selectedOption, selectedValues) => {
   }
 
   if (selectedValues && selectedValues.dsId === selectedOption.dsId) {
+    if (isNonClearable) return selectedOption;
     return null;
   }
 
   return selectedOption;
 };
-const filterOptions = (inputValue, options) => options.filter(option => option.type === MENU_OPTION_TYPES.OPTION && option.label.toLowerCase().includes(inputValue.toLowerCase()));
+const filterOptions = (inputValue, options) => {
+  if (inputValue === '') return options;
+  return options.filter(option => option.type === MENU_OPTION_TYPES.OPTION && option.label.toLowerCase().includes(inputValue.toLowerCase()));
+};
 const selectedValuesWithSections = (optionsToParse, multiSelectedValue) => {
   const items = [];
   if (optionsToParse) optionsToParse.forEach(option => {

package/esm/date-time-picker/parts/ClearButton/ClearButton.js

@@ -42,7 +42,8 @@ const ClearButton = () => {
       if (latestInteractionRegion === 'clear-btn' && currFocusDescriber === 'clear-btn') DomElem?.focus?.();
     },
     onClick: onClearClick,
-    onKeyDown: onClearButtonKeyDown
+    onKeyDown: onClearButtonKeyDown,
+    type: "button"
   }, styledsAttrs), {}, {
     children: /*#__PURE__*/_jsx(CloseMedium, {
       color: DSIconColors.PRIMARY

package/esm/date-time-picker/parts/Pickers/Calendar/CalendarHead.js

@@ -70,7 +70,8 @@ const CalendarHead = () => {
     onKeyDown: handlePrevYearKeyDown,
     onFocus: onPrevYearFocus,
     tabIndex: isControllerOnly ? -1 : 1,
-    "data-testid": ControlledDateTimePickerDatatestid.CALENDAR.PREV_YEAR
+    "data-testid": ControlledDateTimePickerDatatestid.CALENDAR.PREV_YEAR,
+    type: "button"
   }, void 0, _ChevronDoubleLeft || (_ChevronDoubleLeft = /*#__PURE__*/_jsx(ChevronDoubleLeft, {
     height: 14,
     width: 14,
@@ -84,7 +85,8 @@ const CalendarHead = () => {
     innerRef: handlePrevMonthRef,
     onKeyDown: handlePrevMonthKeyDown,
     onFocus: onPrevMonthFocus,
-    "data-testid": ControlledDateTimePickerDatatestid.CALENDAR.PREV_MONTH // this is a tabstop for when the calendar is open
+    "data-testid": ControlledDateTimePickerDatatestid.CALENDAR.PREV_MONTH,
+    type: "button" // this is a tabstop for when the calendar is open
 
   }, void 0, _ChevronLeft || (_ChevronLeft = /*#__PURE__*/_jsx(ChevronLeft, {
     fill: "#25292f"
@@ -96,7 +98,8 @@ const CalendarHead = () => {
     innerRef: handleNextMonthRef,
     onKeyDown: handleNextMonthKeyDown,
     onFocus: onNextMonthFocus,
-    "data-testid": ControlledDateTimePickerDatatestid.CALENDAR.NEXT_MONTH
+    "data-testid": ControlledDateTimePickerDatatestid.CALENDAR.NEXT_MONTH,
+    type: "button"
   }, void 0, _ChevronRight || (_ChevronRight = /*#__PURE__*/_jsx(ChevronRight, {
     fill: "#25292f"
   }))), /*#__PURE__*/_jsx(StyledHeaderButton, {
@@ -107,7 +110,8 @@ const CalendarHead = () => {
     innerRef: handleNextYearRef,
     onKeyDown: handleNextYearKeyDown,
     onFocus: onNextYearFocus,
-    "data-testid": ControlledDateTimePickerDatatestid.CALENDAR.NEXT_YEAR
+    "data-testid": ControlledDateTimePickerDatatestid.CALENDAR.NEXT_YEAR,
+    type: "button"
   }, void 0, _ChevronDoubleRight || (_ChevronDoubleRight = /*#__PURE__*/_jsx(ChevronDoubleRight, {
     height: 14,
     width: 14,

package/esm/date-time-picker/parts/Pickers/Calendar/CalendarIconTrigger.js

@@ -31,7 +31,8 @@ const CalendarIconTrigger = () => {
     onClick: handleToggleCalendar,
     onKeyDown: handlePickerIconKeyDown,
     "data-testid": ControlledDateTimePickerDatatestid.PICKER_ICONS.CALENDAR,
-    disabled: disabled
+    disabled: disabled,
+    type: "button"
   }, void 0, _DatePicker || (_DatePicker = /*#__PURE__*/_jsx(DatePicker, {}))), [ariaCurrentValueForInputs, handleSetTriggerRef, handleToggleCalendar, handlePickerIconKeyDown, disabled]);
 };
 

package/esm/date-time-picker/parts/Pickers/Calendar/Day.js

@@ -131,7 +131,8 @@ const Day = _ref => {
       innerRef: handleInnerRef,
       tabIndex: isSelected ? 0 : -1,
       "data-isfocused": isFocused,
-      "data-testid": dataTestid
+      "data-testid": dataTestid,
+      type: "button"
     }, void 0, `${day.getDate()}`)
   }));
 };

package/esm/date-time-picker/parts/Pickers/TimeWheel/HoursList.js

@@ -55,7 +55,8 @@ const HoursList = () => {
     onClick: handlePrevHour,
     innerRef: prevHourBtnRef,
     "data-testid": ControlledDateTimePickerDatatestid.TIMEWHEEL.PREV_HOUR,
-    tabIndex: -1
+    tabIndex: -1,
+    type: "button"
   }, void 0, _ChevronSmallUp || (_ChevronSmallUp = /*#__PURE__*/_jsx(ChevronSmallUp, {})))), visibleHours.map(hourString => {
     const key = `timewheel-hour-${hourString || ''}`;
     if (!hourString) return /*#__PURE__*/_jsx(StyledWheelListItem, {}, key);
@@ -88,7 +89,8 @@ const HoursList = () => {
       "aria-valuemax": 12,
       "aria-valuemin": 1,
       "aria-valuenow": currHourNum,
-      "aria-valuetext": `${hourString} hours`
+      "aria-valuetext": `${hourString} hours`,
+      type: "button"
     }, btnProps), {}, {
       children: hourString
     })));
@@ -99,7 +101,8 @@ const HoursList = () => {
     onClick: handleNextHour,
     innerRef: nextHourBtnRef,
     tabIndex: -1,
-    "data-testid": ControlledDateTimePickerDatatestid.TIMEWHEEL.NEXT_HOUR
+    "data-testid": ControlledDateTimePickerDatatestid.TIMEWHEEL.NEXT_HOUR,
+    type: "button"
   }, void 0, _ChevronSmallDown || (_ChevronSmallDown = /*#__PURE__*/_jsx(ChevronSmallDown, {})))));
 };
 

package/esm/date-time-picker/parts/Pickers/TimeWheel/MeridiemList.js

@@ -70,6 +70,7 @@ const MeridiemList = () => {
     onClick: e => handleTimeWheelBtnChangeMeridiem('AM', e),
     innerRef: prevMeridiemBtnRef,
     tabIndex: -1,
+    type: "button",
     children: _ChevronSmallUp || (_ChevronSmallUp = /*#__PURE__*/_jsx(ChevronSmallUp, {}))
   }))), currMeridiem === 'AM' || currMeridiem === '' ? _StyledWheelListItem || (_StyledWheelListItem = /*#__PURE__*/_jsx(StyledWheelListItem, {})) : null, /*#__PURE__*/_jsx(StyledWheelListItem, {
     isCurrentListItem: isAmCurrent
@@ -89,6 +90,7 @@ const MeridiemList = () => {
     "aria-valuemin": 0,
     "aria-valuenow": isPmCurrent ? 1 : 0,
     "aria-valuetext": isAmCurrent ? 'ante meridiem' : 'post meridiem',
+    type: "button",
     children: "AM"
   }))), /*#__PURE__*/_jsx(StyledWheelListItem, {
     isCurrentListItem: isPmCurrent
@@ -108,6 +110,7 @@ const MeridiemList = () => {
     "aria-valuemin": 0,
     "aria-valuenow": isPmCurrent ? 1 : 0,
     "aria-valuetext": isAmCurrent ? 'ante meridiem' : 'post meridiem',
+    type: "button",
     children: "PM"
   }))), currMeridiem === 'PM' ? _StyledWheelListItem2 || (_StyledWheelListItem2 = /*#__PURE__*/_jsx(StyledWheelListItem, {})) : null, /*#__PURE__*/_jsx(StyledWheelListItem, {}, void 0, /*#__PURE__*/jsx(StyledWheelChangeTimeBtn, _objectSpread(_objectSpread({}, styledPropsNextMeridiem), {}, {
     "aria-label": "set pm meridiem",
@@ -118,6 +121,7 @@ const MeridiemList = () => {
     onClick: e => handleTimeWheelBtnChangeMeridiem('PM', e),
     innerRef: nextMeridiemBtnRef,
     tabIndex: -1,
+    type: "button",
     children: _ChevronSmallDown || (_ChevronSmallDown = /*#__PURE__*/_jsx(ChevronSmallDown, {}))
   }))));
 };

package/esm/date-time-picker/parts/Pickers/TimeWheel/MinutesList.js

@@ -54,7 +54,8 @@ const MinutesList = () => {
     onClick: handlePrevMinute,
     innerRef: prevMinutesBtnRef,
     tabIndex: -1,
-    "data-testid": ControlledDateTimePickerDatatestid.TIMEWHEEL.PREV_MINUTE
+    "data-testid": ControlledDateTimePickerDatatestid.TIMEWHEEL.PREV_MINUTE,
+    type: "button"
   }, void 0, _ChevronSmallUp || (_ChevronSmallUp = /*#__PURE__*/_jsx(ChevronSmallUp, {})))), visibleMinutes.map(minutesString => {
     const key = `timewheel-minutes-${minutesString || ''}`;
     if (!minutesString) return /*#__PURE__*/_jsx(StyledWheelListItem, {}, key);
@@ -87,7 +88,8 @@ const MinutesList = () => {
       "aria-valuemax": 59,
       "aria-valuemin": 0,
       "aria-valuenow": currMinuteNum,
-      "aria-valuetext": `${minutesString} minutes`
+      "aria-valuetext": `${minutesString} minutes`,
+      type: "button"
     }, btnProps), {}, {
       children: minutesString
     })));
@@ -98,7 +100,8 @@ const MinutesList = () => {
     onClick: handleNextMinute,
     innerRef: nextMinutesBtnRef,
     "data-testid": ControlledDateTimePickerDatatestid.TIMEWHEEL.NEXT_MINUTE,
-    tabIndex: -1
+    tabIndex: -1,
+    type: "button"
   }, void 0, _ChevronSmallDown || (_ChevronSmallDown = /*#__PURE__*/_jsx(ChevronSmallDown, {})))));
 };
 

package/esm/date-time-picker/parts/Pickers/TimeWheel/SecondsList.js

@@ -43,7 +43,8 @@ const SecondsList = () => {
     onClick: handlePrevSecond,
     onKeyDown: handlePrevSecondBtnOnKeyDown,
     innerRef: prevSecondsBtnRef,
-    tabIndex: -1
+    tabIndex: -1,
+    type: "button"
   }, void 0, _ChevronSmallUp || (_ChevronSmallUp = /*#__PURE__*/_jsx(ChevronSmallUp, {})))), visibleSeconds.map(secondsString => {
     const key = `timewheel-seconds-${secondsString}`;
     if (!secondsString) return /*#__PURE__*/_jsx(StyledWheelListItem, {}, key);
@@ -62,7 +63,8 @@ const SecondsList = () => {
       size: "l",
       variant: BUTTON_VARIANT.DEFAULT,
       onClick: e => handleTimeWheelBtnChangeSeconds(secondsString, e),
-      tabIndex: tabIndex
+      tabIndex: tabIndex,
+      type: "button"
     }, btnProps), {}, {
       children: secondsString
     })));
@@ -74,7 +76,8 @@ const SecondsList = () => {
     onClick: handleNextSecond,
     onKeyDown: handleNextSecondBtnOnKeyDown,
     innerRef: nextSecondsBtnRef,
-    tabIndex: -1
+    tabIndex: -1,
+    type: "button"
   }, void 0, _ChevronSmallDown || (_ChevronSmallDown = /*#__PURE__*/_jsx(ChevronSmallDown, {})))));
 };
 

package/esm/date-time-picker/parts/Pickers/TimeWheel/TimeWheelIconTrigger.js

@@ -30,7 +30,8 @@ const TimeWheelIconTrigger = () => {
     onClick: handleToggleTimePicker,
     onKeyDown: handlePickerIconKeyDown,
     "data-testid": ControlledDateTimePickerDatatestid.PICKER_ICONS.TIMEWHEEL,
-    disabled: disabled
+    disabled: disabled,
+    type: "button"
   }, void 0, _RecentDocuments || (_RecentDocuments = /*#__PURE__*/_jsx(RecentDocuments, {}))), [ariaCurrentValueForInputs, disabled, handlePickerIconKeyDown, handleSetTriggerRef, handleToggleTimePicker]);
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-controlled-form",
-  "version": "2.4.3-rc.1",
+  "version": "2.4.3-rc.12",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Controlled Form Controllers",
   "module": "./esm/index.js",
@@ -896,20 +896,20 @@
     "build": "node ../../scripts/build/build.js"
   },
   "dependencies": {
-    "@elliemae/ds-button": "2.4.3-rc.1",
-    "@elliemae/ds-circular-progress-indicator": "2.4.3-rc.1",
-    "@elliemae/ds-controlled-form": "2.4.3-rc.1",
-    "@elliemae/ds-form": "2.4.3-rc.1",
-    "@elliemae/ds-form-layout-blocks": "2.4.3-rc.1",
-    "@elliemae/ds-grid": "2.4.3-rc.1",
-    "@elliemae/ds-icon": "2.4.3-rc.1",
-    "@elliemae/ds-icons": "2.4.3-rc.1",
-    "@elliemae/ds-pills": "2.4.3-rc.1",
-    "@elliemae/ds-popperjs": "2.4.3-rc.1",
-    "@elliemae/ds-props-helpers": "2.4.3-rc.1",
-    "@elliemae/ds-system": "2.4.3-rc.1",
-    "@elliemae/ds-tooltip": "2.4.3-rc.1",
-    "@elliemae/ds-truncated-tooltip-text": "2.4.3-rc.1",
+    "@elliemae/ds-button": "2.4.3-rc.12",
+    "@elliemae/ds-circular-progress-indicator": "2.4.3-rc.12",
+    "@elliemae/ds-controlled-form": "2.4.3-rc.12",
+    "@elliemae/ds-form": "2.4.3-rc.12",
+    "@elliemae/ds-form-layout-blocks": "2.4.3-rc.12",
+    "@elliemae/ds-grid": "2.4.3-rc.12",
+    "@elliemae/ds-icon": "2.4.3-rc.12",
+    "@elliemae/ds-icons": "2.4.3-rc.12",
+    "@elliemae/ds-pills": "2.4.3-rc.12",
+    "@elliemae/ds-popperjs": "2.4.3-rc.12",
+    "@elliemae/ds-props-helpers": "2.4.3-rc.12",
+    "@elliemae/ds-system": "2.4.3-rc.12",
+    "@elliemae/ds-tooltip": "2.4.3-rc.12",
+    "@elliemae/ds-truncated-tooltip-text": "2.4.3-rc.12",
     "prop-types": "~15.7.2",
     "react-desc": "~4.1.3",
     "react-popper": "~2.2.5",

package/types/combobox/react-desc-prop-types.d.ts

@@ -36,7 +36,6 @@ export declare namespace DSComboboxT {
         onCreate?: (label: string) => void;
         onFilter?: (newOptions: OptionTypes[], inputValue?: string) => void;
         onCancel?: () => void;
-        onBlur?: () => void;
         onSelectAll?: (suggestedValue: OptionTypes[] | [], event: React.MouseEvent | React.KeyboardEvent) => null;
         onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>, value: ItemOption) => void;
     }
@@ -53,6 +52,7 @@ export declare namespace DSComboboxT {
         inline: boolean;
         withoutPortal: boolean;
         zIndex: number;
+        isNonClearable: boolean;
         disabled: boolean;
         noOptionsMessage: string;
         innerRef: React.RefObject<HTMLInputElement>;

package/types/combobox/utils/listHelper.d.ts

@@ -7,7 +7,7 @@ export declare const isSelected: (value: DSComboboxT.SelectedOptionsT, activeOpt
 export declare const findInCircularList: (list: DSComboboxT.OptionTypes[], from: number, criteria: (item: DSComboboxT.OptionTypes) => boolean, step?: number) => number;
 export declare const getLastValueSelected: (selectedValues: DSComboboxT.SelectedOptionsT) => DSComboboxT.ItemOption | null;
 export declare const getFirstOption: (options: DSComboboxT.OptionTypes[], selectedValues: DSComboboxT.SelectedOptionsT, inputValue: string) => string;
-export declare const getSuggestedValueOnChange: (selectedOption: DSComboboxT.ItemOption, selectedValues: DSComboboxT.SelectedOptionsT) => DSComboboxT.ItemOption | DSComboboxT.ItemOption[] | null;
+export declare const getSuggestedValueOnChange: (selectedOption: DSComboboxT.ItemOption, selectedValues: DSComboboxT.SelectedOptionsT, isNonClearable?: boolean | undefined) => DSComboboxT.ItemOption | DSComboboxT.ItemOption[] | null;
 export declare const filterOptions: (inputValue: string, options: DSComboboxT.OptionTypes[]) => DSComboboxT.OptionTypes[];
 export declare const selectedValuesWithSections: (optionsToParse: DSComboboxT.OptionTypes[], multiSelectedValue: DSComboboxT.ItemOption[]) => DSComboboxT.OptionTypes[];
 export declare const getFilteredOptionsSelected: (filteredOption: DSComboboxT.OptionTypes[], selectedValues: DSComboboxT.ItemOption[]) => DSComboboxT.OptionTypes[];