@elliemae/ds-controlled-form 2.4.3-rc.8 → 2.4.4-rc.0

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/useKeyboardNavigation.js

@@ -18,6 +18,7 @@ const useKeyboardNavigation = () => {
   const {
     props: {
       allOptions,
+      isNonClearable,
       onCancel,
       onKeyDown,
       onChange,
@@ -156,7 +157,7 @@ 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);
       }
     }
 
@@ -171,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,6 +68,7 @@ const getSuggestedValueOnChange = (selectedOption, selectedValues) => {
   }
 
   if (selectedValues && selectedValues.dsId === selectedOption.dsId) {
+    if (isNonClearable) return selectedOption;
     return null;
   }
 

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/useKeyboardNavigation.js

@@ -14,6 +14,7 @@ const useKeyboardNavigation = () => {
   const {
     props: {
       allOptions,
+      isNonClearable,
       onCancel,
       onKeyDown,
       onChange,
@@ -152,7 +153,7 @@ const useKeyboardNavigation = () => {
       const lastValue = getLastValueSelected(selectedValues);
 
       if (!e.currentTarget.value && lastValue) {
-        onChange(getSuggestedValueOnChange(lastValue, selectedValues), lastValue, e);
+        onChange(getSuggestedValueOnChange(lastValue, selectedValues, isNonClearable), lastValue, e);
       }
     }
 
@@ -167,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,6 +64,7 @@ const getSuggestedValueOnChange = (selectedOption, selectedValues) => {
   }
 
   if (selectedValues && selectedValues.dsId === selectedOption.dsId) {
+    if (isNonClearable) return selectedOption;
     return null;
   }
 

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.8",
+  "version": "2.4.4-rc.0",
   "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.8",
-    "@elliemae/ds-circular-progress-indicator": "2.4.3-rc.8",
-    "@elliemae/ds-controlled-form": "2.4.3-rc.8",
-    "@elliemae/ds-form": "2.4.3-rc.8",
-    "@elliemae/ds-form-layout-blocks": "2.4.3-rc.8",
-    "@elliemae/ds-grid": "2.4.3-rc.8",
-    "@elliemae/ds-icon": "2.4.3-rc.8",
-    "@elliemae/ds-icons": "2.4.3-rc.8",
-    "@elliemae/ds-pills": "2.4.3-rc.8",
-    "@elliemae/ds-popperjs": "2.4.3-rc.8",
-    "@elliemae/ds-props-helpers": "2.4.3-rc.8",
-    "@elliemae/ds-system": "2.4.3-rc.8",
-    "@elliemae/ds-tooltip": "2.4.3-rc.8",
-    "@elliemae/ds-truncated-tooltip-text": "2.4.3-rc.8",
+    "@elliemae/ds-button": "2.4.4-rc.0",
+    "@elliemae/ds-circular-progress-indicator": "2.4.4-rc.0",
+    "@elliemae/ds-controlled-form": "2.4.4-rc.0",
+    "@elliemae/ds-form": "2.4.4-rc.0",
+    "@elliemae/ds-form-layout-blocks": "2.4.4-rc.0",
+    "@elliemae/ds-grid": "2.4.4-rc.0",
+    "@elliemae/ds-icon": "2.4.4-rc.0",
+    "@elliemae/ds-icons": "2.4.4-rc.0",
+    "@elliemae/ds-pills": "2.4.4-rc.0",
+    "@elliemae/ds-popperjs": "2.4.4-rc.0",
+    "@elliemae/ds-props-helpers": "2.4.4-rc.0",
+    "@elliemae/ds-system": "2.4.4-rc.0",
+    "@elliemae/ds-tooltip": "2.4.4-rc.0",
+    "@elliemae/ds-truncated-tooltip-text": "2.4.4-rc.0",
     "prop-types": "~15.7.2",
     "react-desc": "~4.1.3",
     "react-popper": "~2.2.5",

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

@@ -52,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[];