@elliemae/ds-controlled-form 2.4.2 → 2.4.3-rc.10

package/cjs/checkbox/ControlledCheckbox.js

@@ -86,7 +86,7 @@ const DSControlledCheckbox = props => {
       "aria-controls": ariaControls || legacyAriaControls,
       disabled: disabled,
       readOnly: readOnly,
-      onClick: onChange,
+      onClick: !disabled && onChange,
       "aria-checked": checked
     }, restGlobals), {}, {
       tabIndex: 0
@@ -101,15 +101,20 @@ const DSControlledCheckbox = props => {
       disabled: disabled,
       readOnly: readOnly,
       onChange: onChange
-    }, restGlobals))), label && /*#__PURE__*/_jsx__default["default"](styles.StyledLabel, {
+    }, restGlobals))), label && /*#__PURE__*/jsxRuntime.jsx(styles.StyledLabel, _objectSpread(_objectSpread({
       htmlFor: id,
       disabled: disabled,
       readOnly: readOnly,
       checked: checked,
+      disabled: disabled,
       "data-testid": "ds-checkbox-label",
       wrapLabel: wrapLabel
-    }, void 0, wrapLabel ? /*#__PURE__*/_jsx__default["default"](styles.StyledWrapLabel, {}, void 0, label) : /*#__PURE__*/_jsx__default["default"](dsTruncatedTooltipText.SimpleTruncatedTooltipText, {
-      value: label
+    }, !disabled && (ariaControls || legacyAriaControls) ? {
+      onClick: onChange
+    } : {}), {}, {
+      children: wrapLabel ? /*#__PURE__*/_jsx__default["default"](styles.StyledWrapLabel, {}, void 0, label) : /*#__PURE__*/_jsx__default["default"](dsTruncatedTooltipText.SimpleTruncatedTooltipText, {
+        value: label
+      })
     }))]
   }));
 };

package/cjs/checkbox/styles.js

@@ -105,9 +105,6 @@ const checkboxStyles = dsSystem.css`
   &:hover {
     cursor: pointer;
   }
-  &:disabled {
-    cursor: not-allowed;
-  }
   width: 100%;
   height: 100%;
   position: absolute;
@@ -120,40 +117,58 @@ const StyledInput = dsSystem.styled('input', {
   slot: theming.DSCheckboxSlots.INPUT
 })`
   ${checkboxStyles}
+  &:disabled {
+    cursor: not-allowed;
+  }
 `;
 const StyledInputMixed = dsSystem.styled('div', {
   name: theming.DSCheckboxName,
   slot: theming.DSCheckboxSlots.INPUT
 })`
   ${checkboxStyles}
+  ${_ref11 => {
+  let {
+    disabled
+  } = _ref11;
+  return disabled ? `&:hover {
+    cursor: not-allowed;
+  }` : '';
+}}
 `;
 const StyledLabel = dsSystem.styled('label', {
   name: theming.DSCheckboxName,
   slot: theming.DSCheckboxSlots.LABEL
 })`
-  &:hover {
-    cursor: pointer;
-  }
-  ${_ref11 => {
+  ${_ref12 => {
   let {
     wrapLabel,
     theme
-  } = _ref11;
+  } = _ref12;
   return wrapLabel ? 'padding: 8px 0px 8px 8px;' : `padding-left: ${theme.space.xxs}`;
 }};
 
-  color: ${_ref12 => {
+  color: ${_ref13 => {
   let {
     theme,
     disabled,
-    readOnly,
-    checked
-  } = _ref12;
-  return disabled && checked !== true || readOnly ? theme.colors.neutral[500] : theme.colors.neutral[800];
+    readOnly
+  } = _ref13;
+  return disabled || readOnly ? theme.colors.neutral[500] : theme.colors.neutral[800];
 }};
   font-size: 13px;
   line-height: 13px;
   display: inherit;
+
+  ${_ref14 => {
+  let {
+    disabled
+  } = _ref14;
+  return disabled ? `&:hover {
+    cursor: not-allowed;
+  }` : `&:hover {
+    cursor: pointer;
+  }`;
+}}
 `;
 const StyledWrapLabel = dsSystem.styled('span')``;
 

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

@@ -158,8 +158,6 @@ const useKeyboardNavigation = () => {
       if (!e.currentTarget.value && lastValue) {
         onChange(listHelper.getSuggestedValueOnChange(lastValue, selectedValues), lastValue, e);
       }
-
-      if (onFilter) onFilter(allOptions, inputValue);
     }
 
     if (e.key === 'Tab' && !inline && menuState) {

package/cjs/combobox/utils/listHelper.js

@@ -72,7 +72,10 @@ const getSuggestedValueOnChange = (selectedOption, selectedValues) => {
 
   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/checkbox/ControlledCheckbox.js

@@ -76,7 +76,7 @@ const DSControlledCheckbox = props => {
       "aria-controls": ariaControls || legacyAriaControls,
       disabled: disabled,
       readOnly: readOnly,
-      onClick: onChange,
+      onClick: !disabled && onChange,
       "aria-checked": checked
     }, restGlobals), {}, {
       tabIndex: 0
@@ -91,15 +91,20 @@ const DSControlledCheckbox = props => {
       disabled: disabled,
       readOnly: readOnly,
       onChange: onChange
-    }, restGlobals))), label && /*#__PURE__*/_jsx(StyledLabel, {
+    }, restGlobals))), label && /*#__PURE__*/jsx(StyledLabel, _objectSpread(_objectSpread({
       htmlFor: id,
       disabled: disabled,
       readOnly: readOnly,
       checked: checked,
+      disabled: disabled,
       "data-testid": "ds-checkbox-label",
       wrapLabel: wrapLabel
-    }, void 0, wrapLabel ? /*#__PURE__*/_jsx(StyledWrapLabel, {}, void 0, label) : /*#__PURE__*/_jsx(SimpleTruncatedTooltipText, {
-      value: label
+    }, !disabled && (ariaControls || legacyAriaControls) ? {
+      onClick: onChange
+    } : {}), {}, {
+      children: wrapLabel ? /*#__PURE__*/_jsx(StyledWrapLabel, {}, void 0, label) : /*#__PURE__*/_jsx(SimpleTruncatedTooltipText, {
+        value: label
+      })
     }))]
   }));
 };

package/esm/checkbox/styles.js

@@ -101,9 +101,6 @@ const checkboxStyles = css`
   &:hover {
     cursor: pointer;
   }
-  &:disabled {
-    cursor: not-allowed;
-  }
   width: 100%;
   height: 100%;
   position: absolute;
@@ -116,40 +113,58 @@ const StyledInput = styled('input', {
   slot: DSCheckboxSlots.INPUT
 })`
   ${checkboxStyles}
+  &:disabled {
+    cursor: not-allowed;
+  }
 `;
 const StyledInputMixed = styled('div', {
   name: DSCheckboxName,
   slot: DSCheckboxSlots.INPUT
 })`
   ${checkboxStyles}
+  ${_ref11 => {
+  let {
+    disabled
+  } = _ref11;
+  return disabled ? `&:hover {
+    cursor: not-allowed;
+  }` : '';
+}}
 `;
 const StyledLabel = styled('label', {
   name: DSCheckboxName,
   slot: DSCheckboxSlots.LABEL
 })`
-  &:hover {
-    cursor: pointer;
-  }
-  ${_ref11 => {
+  ${_ref12 => {
   let {
     wrapLabel,
     theme
-  } = _ref11;
+  } = _ref12;
   return wrapLabel ? 'padding: 8px 0px 8px 8px;' : `padding-left: ${theme.space.xxs}`;
 }};
 
-  color: ${_ref12 => {
+  color: ${_ref13 => {
   let {
     theme,
     disabled,
-    readOnly,
-    checked
-  } = _ref12;
-  return disabled && checked !== true || readOnly ? theme.colors.neutral[500] : theme.colors.neutral[800];
+    readOnly
+  } = _ref13;
+  return disabled || readOnly ? theme.colors.neutral[500] : theme.colors.neutral[800];
 }};
   font-size: 13px;
   line-height: 13px;
   display: inherit;
+
+  ${_ref14 => {
+  let {
+    disabled
+  } = _ref14;
+  return disabled ? `&:hover {
+    cursor: not-allowed;
+  }` : `&:hover {
+    cursor: pointer;
+  }`;
+}}
 `;
 const StyledWrapLabel = styled('span')``;
 

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

@@ -154,8 +154,6 @@ const useKeyboardNavigation = () => {
       if (!e.currentTarget.value && lastValue) {
         onChange(getSuggestedValueOnChange(lastValue, selectedValues), lastValue, e);
       }
-
-      if (onFilter) onFilter(allOptions, inputValue);
     }
 
     if (e.key === 'Tab' && !inline && menuState) {

package/esm/combobox/utils/listHelper.js

@@ -68,7 +68,10 @@ const getSuggestedValueOnChange = (selectedOption, selectedValues) => {
 
   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.2",
+  "version": "2.4.3-rc.10",
   "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.2",
-    "@elliemae/ds-circular-progress-indicator": "2.4.2",
-    "@elliemae/ds-controlled-form": "2.4.2",
-    "@elliemae/ds-form": "2.4.2",
-    "@elliemae/ds-form-layout-blocks": "2.4.2",
-    "@elliemae/ds-grid": "2.4.2",
-    "@elliemae/ds-icon": "2.4.2",
-    "@elliemae/ds-icons": "2.4.2",
-    "@elliemae/ds-pills": "2.4.2",
-    "@elliemae/ds-popperjs": "2.4.2",
-    "@elliemae/ds-props-helpers": "2.4.2",
-    "@elliemae/ds-system": "2.4.2",
-    "@elliemae/ds-tooltip": "2.4.2",
-    "@elliemae/ds-truncated-tooltip-text": "2.4.2",
+    "@elliemae/ds-button": "2.4.3-rc.10",
+    "@elliemae/ds-circular-progress-indicator": "2.4.3-rc.10",
+    "@elliemae/ds-controlled-form": "2.4.3-rc.10",
+    "@elliemae/ds-form": "2.4.3-rc.10",
+    "@elliemae/ds-form-layout-blocks": "2.4.3-rc.10",
+    "@elliemae/ds-grid": "2.4.3-rc.10",
+    "@elliemae/ds-icon": "2.4.3-rc.10",
+    "@elliemae/ds-icons": "2.4.3-rc.10",
+    "@elliemae/ds-pills": "2.4.3-rc.10",
+    "@elliemae/ds-popperjs": "2.4.3-rc.10",
+    "@elliemae/ds-props-helpers": "2.4.3-rc.10",
+    "@elliemae/ds-system": "2.4.3-rc.10",
+    "@elliemae/ds-tooltip": "2.4.3-rc.10",
+    "@elliemae/ds-truncated-tooltip-text": "2.4.3-rc.10",
     "prop-types": "~15.7.2",
     "react-desc": "~4.1.3",
     "react-popper": "~2.2.5",

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

@@ -6,6 +6,7 @@ export declare namespace DSControlledCheckboxT {
         tabIndex?: number;
         hasError?: boolean;
         wrapLabel: boolean;
+        disabled: boolean;
     }
     interface OptionalProps {
         innerRef: React.RefObject<HTMLInputElement> | React.LegacyRef<HTMLInputElement>;

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;
     }