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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (30) hide show
  1. package/cjs/combobox/parts/controls-input/ControlsInput.js +1 -1
  2. package/cjs/combobox/parts/controls-input/styled.js +5 -0
  3. package/cjs/combobox/parts/controls-input/useControlsInput.js +5 -2
  4. package/cjs/combobox/parts/controls-input/useKeyboardNavigation.js +0 -2
  5. package/cjs/combobox/utils/listHelper.js +4 -1
  6. package/cjs/date-time-picker/parts/ClearButton/ClearButton.js +2 -1
  7. package/cjs/date-time-picker/parts/Pickers/Calendar/CalendarHead.js +8 -4
  8. package/cjs/date-time-picker/parts/Pickers/Calendar/CalendarIconTrigger.js +2 -1
  9. package/cjs/date-time-picker/parts/Pickers/Calendar/Day.js +2 -1
  10. package/cjs/date-time-picker/parts/Pickers/TimeWheel/HoursList.js +6 -3
  11. package/cjs/date-time-picker/parts/Pickers/TimeWheel/MeridiemList.js +4 -0
  12. package/cjs/date-time-picker/parts/Pickers/TimeWheel/MinutesList.js +6 -3
  13. package/cjs/date-time-picker/parts/Pickers/TimeWheel/SecondsList.js +6 -3
  14. package/cjs/date-time-picker/parts/Pickers/TimeWheel/TimeWheelIconTrigger.js +2 -1
  15. package/esm/combobox/parts/controls-input/ControlsInput.js +1 -1
  16. package/esm/combobox/parts/controls-input/styled.js +5 -0
  17. package/esm/combobox/parts/controls-input/useControlsInput.js +5 -2
  18. package/esm/combobox/parts/controls-input/useKeyboardNavigation.js +0 -2
  19. package/esm/combobox/utils/listHelper.js +4 -1
  20. package/esm/date-time-picker/parts/ClearButton/ClearButton.js +2 -1
  21. package/esm/date-time-picker/parts/Pickers/Calendar/CalendarHead.js +8 -4
  22. package/esm/date-time-picker/parts/Pickers/Calendar/CalendarIconTrigger.js +2 -1
  23. package/esm/date-time-picker/parts/Pickers/Calendar/Day.js +2 -1
  24. package/esm/date-time-picker/parts/Pickers/TimeWheel/HoursList.js +6 -3
  25. package/esm/date-time-picker/parts/Pickers/TimeWheel/MeridiemList.js +4 -0
  26. package/esm/date-time-picker/parts/Pickers/TimeWheel/MinutesList.js +6 -3
  27. package/esm/date-time-picker/parts/Pickers/TimeWheel/SecondsList.js +6 -3
  28. package/esm/date-time-picker/parts/Pickers/TimeWheel/TimeWheelIconTrigger.js +2 -1
  29. package/package.json +15 -15
  30. package/types/combobox/react-desc-prop-types.d.ts +0 -1
package/cjs/combobox/parts/controls-input/ControlsInput.js CHANGED
@@ -44,7 +44,7 @@ const ControlsInput = () => {
44
44
  return /*#__PURE__*/_jsx__default["default"](styled.StyledInputWrapper, {}, void 0, /*#__PURE__*/jsxRuntime.jsx(styled.StyledInputWidthReference, {
45
45
  ref: spanReference,
46
46
  children: spanReferenceText
47
- }), /*#__PURE__*/_jsx__default["default"](styled.StyledInputPlaceHolder, {}, void 0, /*#__PURE__*/_jsx__default["default"](dsTruncatedTooltipText.SimpleTruncatedTooltipText, {
47
+ }), showPlaceholder && /*#__PURE__*/_jsx__default["default"](styled.StyledInputPlaceHolder, {}, void 0, /*#__PURE__*/_jsx__default["default"](dsTruncatedTooltipText.SimpleTruncatedTooltipText, {
48
48
  value: showPlaceholder
49
49
  })), /*#__PURE__*/jsxRuntime.jsx(styled.StyledInput, {
50
50
  "data-testid": ComboboxDataTestids.ComboboxDataTestid.INPUT,
package/cjs/combobox/parts/controls-input/styled.js CHANGED
@@ -12,7 +12,9 @@ const StyledInput = dsSystem.styled('input', {
12
12
  font-size: 13px;
13
13
  line-height: 13px;
14
14
  border: none;
15
+ overflow: hidden;
15
16
  padding: 0;
17
+ z-index: 2;
16
18
  outline: none;
17
19
  color: ${props => props.theme.colors.neutral[700]};
18
20
  &:focus {
@@ -41,17 +43,20 @@ const StyledInputPlaceHolder = dsSystem.styled.div`
41
43
  & span::after {
42
44
  content: '';
43
45
  padding: 1px;
46
+ // solve italic font style clipping issue with overflow hidden.
44
47
  }
45
48
  `;
46
49
  const StyledInputWidthReference = dsSystem.styled.span`
47
50
  visibility: hidden;
48
51
  position: absolute;
49
52
  top: -9999px;
53
+ z-index: 1;
50
54
  `;
51
55
  const StyledInputWrapper = dsSystem.styled('div')`
52
56
  position: relative;
53
57
  align-items: center;
54
58
  display: flex;
59
+ padding-right: 1px;
55
60
  `;
56
61
 
57
62
  exports.StyledInput = StyledInput;
package/cjs/combobox/parts/controls-input/useControlsInput.js CHANGED
@@ -17,7 +17,6 @@ const useControlsInput = () => {
17
17
  },
18
18
  setHasFocus,
19
19
  inputValue,
20
- setMenuState,
21
20
  setInputValue
22
21
  } = React.useContext(ComboBoxCTX.ComboBoxContext);
23
22
  const [width, setWidth] = React.useState(1); // use span reference to calculate the real width for the input
@@ -26,7 +25,11 @@ const useControlsInput = () => {
26
25
  const showPlaceholder = !inputValue && listHelper.isSelectedValueEmpty(selectedValues) ? placeholder : null;
27
26
  const spanReferenceText = inputValue.replace(/\s/g, '\u00a0');
28
27
  React.useEffect(() => {
29
- setWidth(spanReference.current?.offsetWidth ? spanReference.current.offsetWidth + 2 : 1);
28
+ if (spanReference.current) {
29
+ spanReference.current.style.display = 'block';
30
+ setWidth(spanReference.current?.offsetWidth ? spanReference.current.offsetWidth + 2 : 1);
31
+ spanReference.current.style.display = 'none';
32
+ }
30
33
  }, [inputValue]); // if we se an input mask we configure inside here the proper mask
31
34
  // or a stardard combobox onchange event
32
35
 
package/cjs/combobox/parts/controls-input/useKeyboardNavigation.js CHANGED
@@ -158,8 +158,6 @@ const useKeyboardNavigation = () => {
158
158
  if (!e.currentTarget.value && lastValue) {
159
159
  onChange(listHelper.getSuggestedValueOnChange(lastValue, selectedValues), lastValue, e);
160
160
  }
161
-
162
- if (onFilter) onFilter(allOptions, inputValue);
163
161
  }
164
162
 
165
163
  if (e.key === 'Tab' && !inline && menuState) {
package/cjs/combobox/utils/listHelper.js CHANGED
@@ -72,7 +72,10 @@ const getSuggestedValueOnChange = (selectedOption, selectedValues) => {
72
72
 
73
73
  return selectedOption;
74
74
  };
75
- const filterOptions = (inputValue, options) => options.filter(option => option.type === constants.MENU_OPTION_TYPES.OPTION && option.label.toLowerCase().includes(inputValue.toLowerCase()));
75
+ const filterOptions = (inputValue, options) => {
76
+ if (inputValue === '') return options;
77
+ return options.filter(option => option.type === constants.MENU_OPTION_TYPES.OPTION && option.label.toLowerCase().includes(inputValue.toLowerCase()));
78
+ };
76
79
  const selectedValuesWithSections = (optionsToParse, multiSelectedValue) => {
77
80
  const items = [];
78
81
  if (optionsToParse) optionsToParse.forEach(option => {
package/cjs/date-time-picker/parts/ClearButton/ClearButton.js CHANGED
@@ -51,7 +51,8 @@ const ClearButton = () => {
51
51
  if (latestInteractionRegion === 'clear-btn' && currFocusDescriber === 'clear-btn') DomElem?.focus?.();
52
52
  },
53
53
  onClick: onClearClick,
54
- onKeyDown: onClearButtonKeyDown
54
+ onKeyDown: onClearButtonKeyDown,
55
+ type: "button"
55
56
  }, styledsAttrs), {}, {
56
57
  children: /*#__PURE__*/_jsx__default["default"](dsIcons.CloseMedium, {
57
58
  color: dsIcon.DSIconColors.PRIMARY
package/cjs/date-time-picker/parts/Pickers/Calendar/CalendarHead.js CHANGED
@@ -78,7 +78,8 @@ const CalendarHead = () => {
78
78
  onKeyDown: handlePrevYearKeyDown,
79
79
  onFocus: onPrevYearFocus,
80
80
  tabIndex: isControllerOnly ? -1 : 1,
81
- "data-testid": ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.CALENDAR.PREV_YEAR
81
+ "data-testid": ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.CALENDAR.PREV_YEAR,
82
+ type: "button"
82
83
  }, void 0, _ChevronDoubleLeft || (_ChevronDoubleLeft = /*#__PURE__*/_jsx__default["default"](dsIcons.ChevronDoubleLeft, {
83
84
  height: 14,
84
85
  width: 14,
@@ -92,7 +93,8 @@ const CalendarHead = () => {
92
93
  innerRef: handlePrevMonthRef,
93
94
  onKeyDown: handlePrevMonthKeyDown,
94
95
  onFocus: onPrevMonthFocus,
95
- "data-testid": ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.CALENDAR.PREV_MONTH // this is a tabstop for when the calendar is open
96
+ "data-testid": ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.CALENDAR.PREV_MONTH,
97
+ type: "button" // this is a tabstop for when the calendar is open
96
98
 
97
99
  }, void 0, _ChevronLeft || (_ChevronLeft = /*#__PURE__*/_jsx__default["default"](dsIcons.ChevronLeft, {
98
100
  fill: "#25292f"
@@ -104,7 +106,8 @@ const CalendarHead = () => {
104
106
  innerRef: handleNextMonthRef,
105
107
  onKeyDown: handleNextMonthKeyDown,
106
108
  onFocus: onNextMonthFocus,
107
- "data-testid": ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.CALENDAR.NEXT_MONTH
109
+ "data-testid": ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.CALENDAR.NEXT_MONTH,
110
+ type: "button"
108
111
  }, void 0, _ChevronRight || (_ChevronRight = /*#__PURE__*/_jsx__default["default"](dsIcons.ChevronRight, {
109
112
  fill: "#25292f"
110
113
  }))), /*#__PURE__*/_jsx__default["default"](Styleds.StyledHeaderButton, {
@@ -115,7 +118,8 @@ const CalendarHead = () => {
115
118
  innerRef: handleNextYearRef,
116
119
  onKeyDown: handleNextYearKeyDown,
117
120
  onFocus: onNextYearFocus,
118
- "data-testid": ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.CALENDAR.NEXT_YEAR
121
+ "data-testid": ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.CALENDAR.NEXT_YEAR,
122
+ type: "button"
119
123
  }, void 0, _ChevronDoubleRight || (_ChevronDoubleRight = /*#__PURE__*/_jsx__default["default"](dsIcons.ChevronDoubleRight, {
120
124
  height: 14,
121
125
  width: 14,
package/cjs/date-time-picker/parts/Pickers/Calendar/CalendarIconTrigger.js CHANGED
@@ -39,7 +39,8 @@ const CalendarIconTrigger = () => {
39
39
  onClick: handleToggleCalendar,
40
40
  onKeyDown: handlePickerIconKeyDown,
41
41
  "data-testid": ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.PICKER_ICONS.CALENDAR,
42
- disabled: disabled
42
+ disabled: disabled,
43
+ type: "button"
43
44
  }, void 0, _DatePicker || (_DatePicker = /*#__PURE__*/_jsx__default["default"](dsIcons.DatePicker, {}))), [ariaCurrentValueForInputs, handleSetTriggerRef, handleToggleCalendar, handlePickerIconKeyDown, disabled]);
44
45
  };
45
46
 
package/cjs/date-time-picker/parts/Pickers/Calendar/Day.js CHANGED
@@ -140,7 +140,8 @@ const Day = _ref => {
140
140
  innerRef: handleInnerRef,
141
141
  tabIndex: isSelected ? 0 : -1,
142
142
  "data-isfocused": isFocused,
143
- "data-testid": dataTestid
143
+ "data-testid": dataTestid,
144
+ type: "button"
144
145
  }, void 0, `${day.getDate()}`)
145
146
  }));
146
147
  };
package/cjs/date-time-picker/parts/Pickers/TimeWheel/HoursList.js CHANGED
@@ -64,7 +64,8 @@ const HoursList = () => {
64
64
  onClick: handlePrevHour,
65
65
  innerRef: prevHourBtnRef,
66
66
  "data-testid": ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.TIMEWHEEL.PREV_HOUR,
67
- tabIndex: -1
67
+ tabIndex: -1,
68
+ type: "button"
68
69
  }, void 0, _ChevronSmallUp || (_ChevronSmallUp = /*#__PURE__*/_jsx__default["default"](dsIcons.ChevronSmallUp, {})))), visibleHours.map(hourString => {
69
70
  const key = `timewheel-hour-${hourString || ''}`;
70
71
  if (!hourString) return /*#__PURE__*/_jsx__default["default"](Styleds.StyledWheelListItem, {}, key);
@@ -97,7 +98,8 @@ const HoursList = () => {
97
98
  "aria-valuemax": 12,
98
99
  "aria-valuemin": 1,
99
100
  "aria-valuenow": currHourNum,
100
- "aria-valuetext": `${hourString} hours`
101
+ "aria-valuetext": `${hourString} hours`,
102
+ type: "button"
101
103
  }, btnProps), {}, {
102
104
  children: hourString
103
105
  })));
@@ -108,7 +110,8 @@ const HoursList = () => {
108
110
  onClick: handleNextHour,
109
111
  innerRef: nextHourBtnRef,
110
112
  tabIndex: -1,
111
- "data-testid": ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.TIMEWHEEL.NEXT_HOUR
113
+ "data-testid": ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.TIMEWHEEL.NEXT_HOUR,
114
+ type: "button"
112
115
  }, void 0, _ChevronSmallDown || (_ChevronSmallDown = /*#__PURE__*/_jsx__default["default"](dsIcons.ChevronSmallDown, {})))));
113
116
  };
114
117
 
package/cjs/date-time-picker/parts/Pickers/TimeWheel/MeridiemList.js CHANGED
@@ -79,6 +79,7 @@ const MeridiemList = () => {
79
79
  onClick: e => handleTimeWheelBtnChangeMeridiem('AM', e),
80
80
  innerRef: prevMeridiemBtnRef,
81
81
  tabIndex: -1,
82
+ type: "button",
82
83
  children: _ChevronSmallUp || (_ChevronSmallUp = /*#__PURE__*/_jsx__default["default"](dsIcons.ChevronSmallUp, {}))
83
84
  }))), currMeridiem === 'AM' || currMeridiem === '' ? _StyledWheelListItem || (_StyledWheelListItem = /*#__PURE__*/_jsx__default["default"](Styleds.StyledWheelListItem, {})) : null, /*#__PURE__*/_jsx__default["default"](Styleds.StyledWheelListItem, {
84
85
  isCurrentListItem: isAmCurrent
@@ -98,6 +99,7 @@ const MeridiemList = () => {
98
99
  "aria-valuemin": 0,
99
100
  "aria-valuenow": isPmCurrent ? 1 : 0,
100
101
  "aria-valuetext": isAmCurrent ? 'ante meridiem' : 'post meridiem',
102
+ type: "button",
101
103
  children: "AM"
102
104
  }))), /*#__PURE__*/_jsx__default["default"](Styleds.StyledWheelListItem, {
103
105
  isCurrentListItem: isPmCurrent
@@ -117,6 +119,7 @@ const MeridiemList = () => {
117
119
  "aria-valuemin": 0,
118
120
  "aria-valuenow": isPmCurrent ? 1 : 0,
119
121
  "aria-valuetext": isAmCurrent ? 'ante meridiem' : 'post meridiem',
122
+ type: "button",
120
123
  children: "PM"
121
124
  }))), 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), {}, {
122
125
  "aria-label": "set pm meridiem",
@@ -127,6 +130,7 @@ const MeridiemList = () => {
127
130
  onClick: e => handleTimeWheelBtnChangeMeridiem('PM', e),
128
131
  innerRef: nextMeridiemBtnRef,
129
132
  tabIndex: -1,
133
+ type: "button",
130
134
  children: _ChevronSmallDown || (_ChevronSmallDown = /*#__PURE__*/_jsx__default["default"](dsIcons.ChevronSmallDown, {}))
131
135
  }))));
132
136
  };
package/cjs/date-time-picker/parts/Pickers/TimeWheel/MinutesList.js CHANGED
@@ -63,7 +63,8 @@ const MinutesList = () => {
63
63
  onClick: handlePrevMinute,
64
64
  innerRef: prevMinutesBtnRef,
65
65
  tabIndex: -1,
66
- "data-testid": ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.TIMEWHEEL.PREV_MINUTE
66
+ "data-testid": ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.TIMEWHEEL.PREV_MINUTE,
67
+ type: "button"
67
68
  }, void 0, _ChevronSmallUp || (_ChevronSmallUp = /*#__PURE__*/_jsx__default["default"](dsIcons.ChevronSmallUp, {})))), visibleMinutes.map(minutesString => {
68
69
  const key = `timewheel-minutes-${minutesString || ''}`;
69
70
  if (!minutesString) return /*#__PURE__*/_jsx__default["default"](Styleds.StyledWheelListItem, {}, key);
@@ -96,7 +97,8 @@ const MinutesList = () => {
96
97
  "aria-valuemax": 59,
97
98
  "aria-valuemin": 0,
98
99
  "aria-valuenow": currMinuteNum,
99
- "aria-valuetext": `${minutesString} minutes`
100
+ "aria-valuetext": `${minutesString} minutes`,
101
+ type: "button"
100
102
  }, btnProps), {}, {
101
103
  children: minutesString
102
104
  })));
@@ -107,7 +109,8 @@ const MinutesList = () => {
107
109
  onClick: handleNextMinute,
108
110
  innerRef: nextMinutesBtnRef,
109
111
  "data-testid": ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.TIMEWHEEL.NEXT_MINUTE,
110
- tabIndex: -1
112
+ tabIndex: -1,
113
+ type: "button"
111
114
  }, void 0, _ChevronSmallDown || (_ChevronSmallDown = /*#__PURE__*/_jsx__default["default"](dsIcons.ChevronSmallDown, {})))));
112
115
  };
113
116
 
package/cjs/date-time-picker/parts/Pickers/TimeWheel/SecondsList.js CHANGED
@@ -53,7 +53,8 @@ const SecondsList = () => {
53
53
  onClick: handlePrevSecond,
54
54
  onKeyDown: handlePrevSecondBtnOnKeyDown,
55
55
  innerRef: prevSecondsBtnRef,
56
- tabIndex: -1
56
+ tabIndex: -1,
57
+ type: "button"
57
58
  }, void 0, _ChevronSmallUp || (_ChevronSmallUp = /*#__PURE__*/_jsx__default["default"](dsIcons.ChevronSmallUp, {})))), visibleSeconds.map(secondsString => {
58
59
  const key = `timewheel-seconds-${secondsString}`;
59
60
  if (!secondsString) return /*#__PURE__*/_jsx__default["default"](Styleds.StyledWheelListItem, {}, key);
@@ -72,7 +73,8 @@ const SecondsList = () => {
72
73
  size: "l",
73
74
  variant: DSButton.BUTTON_VARIANT.DEFAULT,
74
75
  onClick: e => handleTimeWheelBtnChangeSeconds(secondsString, e),
75
- tabIndex: tabIndex
76
+ tabIndex: tabIndex,
77
+ type: "button"
76
78
  }, btnProps), {}, {
77
79
  children: secondsString
78
80
  })));
@@ -84,7 +86,8 @@ const SecondsList = () => {
84
86
  onClick: handleNextSecond,
85
87
  onKeyDown: handleNextSecondBtnOnKeyDown,
86
88
  innerRef: nextSecondsBtnRef,
87
- tabIndex: -1
89
+ tabIndex: -1,
90
+ type: "button"
88
91
  }, void 0, _ChevronSmallDown || (_ChevronSmallDown = /*#__PURE__*/_jsx__default["default"](dsIcons.ChevronSmallDown, {})))));
89
92
  };
90
93
 
package/cjs/date-time-picker/parts/Pickers/TimeWheel/TimeWheelIconTrigger.js CHANGED
@@ -38,7 +38,8 @@ const TimeWheelIconTrigger = () => {
38
38
  onClick: handleToggleTimePicker,
39
39
  onKeyDown: handlePickerIconKeyDown,
40
40
  "data-testid": ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.PICKER_ICONS.TIMEWHEEL,
41
- disabled: disabled
41
+ disabled: disabled,
42
+ type: "button"
42
43
  }, void 0, _RecentDocuments || (_RecentDocuments = /*#__PURE__*/_jsx__default["default"](dsIcons.RecentDocuments, {}))), [ariaCurrentValueForInputs, disabled, handlePickerIconKeyDown, handleSetTriggerRef, handleToggleTimePicker]);
43
44
  };
44
45
 
package/esm/combobox/parts/controls-input/ControlsInput.js CHANGED
@@ -36,7 +36,7 @@ const ControlsInput = () => {
36
36
  return /*#__PURE__*/_jsx(StyledInputWrapper, {}, void 0, /*#__PURE__*/jsx(StyledInputWidthReference, {
37
37
  ref: spanReference,
38
38
  children: spanReferenceText
39
- }), /*#__PURE__*/_jsx(StyledInputPlaceHolder, {}, void 0, /*#__PURE__*/_jsx(SimpleTruncatedTooltipText, {
39
+ }), showPlaceholder && /*#__PURE__*/_jsx(StyledInputPlaceHolder, {}, void 0, /*#__PURE__*/_jsx(SimpleTruncatedTooltipText, {
40
40
  value: showPlaceholder
41
41
  })), /*#__PURE__*/jsx(StyledInput, {
42
42
  "data-testid": ComboboxDataTestid.INPUT,
package/esm/combobox/parts/controls-input/styled.js CHANGED
@@ -8,7 +8,9 @@ const StyledInput = styled('input', {
8
8
  font-size: 13px;
9
9
  line-height: 13px;
10
10
  border: none;
11
+ overflow: hidden;
11
12
  padding: 0;
13
+ z-index: 2;
12
14
  outline: none;
13
15
  color: ${props => props.theme.colors.neutral[700]};
14
16
  &:focus {
@@ -37,17 +39,20 @@ const StyledInputPlaceHolder = styled.div`
37
39
  & span::after {
38
40
  content: '';
39
41
  padding: 1px;
42
+ // solve italic font style clipping issue with overflow hidden.
40
43
  }
41
44
  `;
42
45
  const StyledInputWidthReference = styled.span`
43
46
  visibility: hidden;
44
47
  position: absolute;
45
48
  top: -9999px;
49
+ z-index: 1;
46
50
  `;
47
51
  const StyledInputWrapper = styled('div')`
48
52
  position: relative;
49
53
  align-items: center;
50
54
  display: flex;
55
+ padding-right: 1px;
51
56
  `;
52
57
 
53
58
  export { StyledInput, StyledInputPlaceHolder, StyledInputWidthReference, StyledInputWrapper };
package/esm/combobox/parts/controls-input/useControlsInput.js CHANGED
@@ -13,7 +13,6 @@ const useControlsInput = () => {
13
13
  },
14
14
  setHasFocus,
15
15
  inputValue,
16
- setMenuState,
17
16
  setInputValue
18
17
  } = useContext(ComboBoxContext);
19
18
  const [width, setWidth] = useState(1); // use span reference to calculate the real width for the input
@@ -22,7 +21,11 @@ const useControlsInput = () => {
22
21
  const showPlaceholder = !inputValue && isSelectedValueEmpty(selectedValues) ? placeholder : null;
23
22
  const spanReferenceText = inputValue.replace(/\s/g, '\u00a0');
24
23
  useEffect(() => {
25
- setWidth(spanReference.current?.offsetWidth ? spanReference.current.offsetWidth + 2 : 1);
24
+ if (spanReference.current) {
25
+ spanReference.current.style.display = 'block';
26
+ setWidth(spanReference.current?.offsetWidth ? spanReference.current.offsetWidth + 2 : 1);
27
+ spanReference.current.style.display = 'none';
28
+ }
26
29
  }, [inputValue]); // if we se an input mask we configure inside here the proper mask
27
30
  // or a stardard combobox onchange event
28
31
 
package/esm/combobox/parts/controls-input/useKeyboardNavigation.js CHANGED
@@ -154,8 +154,6 @@ const useKeyboardNavigation = () => {
154
154
  if (!e.currentTarget.value && lastValue) {
155
155
  onChange(getSuggestedValueOnChange(lastValue, selectedValues), lastValue, e);
156
156
  }
157
-
158
- if (onFilter) onFilter(allOptions, inputValue);
159
157
  }
160
158
 
161
159
  if (e.key === 'Tab' && !inline && menuState) {
package/esm/combobox/utils/listHelper.js CHANGED
@@ -68,7 +68,10 @@ const getSuggestedValueOnChange = (selectedOption, selectedValues) => {
68
68
 
69
69
  return selectedOption;
70
70
  };
71
- const filterOptions = (inputValue, options) => options.filter(option => option.type === MENU_OPTION_TYPES.OPTION && option.label.toLowerCase().includes(inputValue.toLowerCase()));
71
+ const filterOptions = (inputValue, options) => {
72
+ if (inputValue === '') return options;
73
+ return options.filter(option => option.type === MENU_OPTION_TYPES.OPTION && option.label.toLowerCase().includes(inputValue.toLowerCase()));
74
+ };
72
75
  const selectedValuesWithSections = (optionsToParse, multiSelectedValue) => {
73
76
  const items = [];
74
77
  if (optionsToParse) optionsToParse.forEach(option => {
package/esm/date-time-picker/parts/ClearButton/ClearButton.js CHANGED
@@ -42,7 +42,8 @@ const ClearButton = () => {
42
42
  if (latestInteractionRegion === 'clear-btn' && currFocusDescriber === 'clear-btn') DomElem?.focus?.();
43
43
  },
44
44
  onClick: onClearClick,
45
- onKeyDown: onClearButtonKeyDown
45
+ onKeyDown: onClearButtonKeyDown,
46
+ type: "button"
46
47
  }, styledsAttrs), {}, {
47
48
  children: /*#__PURE__*/_jsx(CloseMedium, {
48
49
  color: DSIconColors.PRIMARY
package/esm/date-time-picker/parts/Pickers/Calendar/CalendarHead.js CHANGED
@@ -70,7 +70,8 @@ const CalendarHead = () => {
70
70
  onKeyDown: handlePrevYearKeyDown,
71
71
  onFocus: onPrevYearFocus,
72
72
  tabIndex: isControllerOnly ? -1 : 1,
73
- "data-testid": ControlledDateTimePickerDatatestid.CALENDAR.PREV_YEAR
73
+ "data-testid": ControlledDateTimePickerDatatestid.CALENDAR.PREV_YEAR,
74
+ type: "button"
74
75
  }, void 0, _ChevronDoubleLeft || (_ChevronDoubleLeft = /*#__PURE__*/_jsx(ChevronDoubleLeft, {
75
76
  height: 14,
76
77
  width: 14,
@@ -84,7 +85,8 @@ const CalendarHead = () => {
84
85
  innerRef: handlePrevMonthRef,
85
86
  onKeyDown: handlePrevMonthKeyDown,
86
87
  onFocus: onPrevMonthFocus,
87
- "data-testid": ControlledDateTimePickerDatatestid.CALENDAR.PREV_MONTH // this is a tabstop for when the calendar is open
88
+ "data-testid": ControlledDateTimePickerDatatestid.CALENDAR.PREV_MONTH,
89
+ type: "button" // this is a tabstop for when the calendar is open
88
90
 
89
91
  }, void 0, _ChevronLeft || (_ChevronLeft = /*#__PURE__*/_jsx(ChevronLeft, {
90
92
  fill: "#25292f"
@@ -96,7 +98,8 @@ const CalendarHead = () => {
96
98
  innerRef: handleNextMonthRef,
97
99
  onKeyDown: handleNextMonthKeyDown,
98
100
  onFocus: onNextMonthFocus,
99
- "data-testid": ControlledDateTimePickerDatatestid.CALENDAR.NEXT_MONTH
101
+ "data-testid": ControlledDateTimePickerDatatestid.CALENDAR.NEXT_MONTH,
102
+ type: "button"
100
103
  }, void 0, _ChevronRight || (_ChevronRight = /*#__PURE__*/_jsx(ChevronRight, {
101
104
  fill: "#25292f"
102
105
  }))), /*#__PURE__*/_jsx(StyledHeaderButton, {
@@ -107,7 +110,8 @@ const CalendarHead = () => {
107
110
  innerRef: handleNextYearRef,
108
111
  onKeyDown: handleNextYearKeyDown,
109
112
  onFocus: onNextYearFocus,
110
- "data-testid": ControlledDateTimePickerDatatestid.CALENDAR.NEXT_YEAR
113
+ "data-testid": ControlledDateTimePickerDatatestid.CALENDAR.NEXT_YEAR,
114
+ type: "button"
111
115
  }, void 0, _ChevronDoubleRight || (_ChevronDoubleRight = /*#__PURE__*/_jsx(ChevronDoubleRight, {
112
116
  height: 14,
113
117
  width: 14,
package/esm/date-time-picker/parts/Pickers/Calendar/CalendarIconTrigger.js CHANGED
@@ -31,7 +31,8 @@ const CalendarIconTrigger = () => {
31
31
  onClick: handleToggleCalendar,
32
32
  onKeyDown: handlePickerIconKeyDown,
33
33
  "data-testid": ControlledDateTimePickerDatatestid.PICKER_ICONS.CALENDAR,
34
- disabled: disabled
34
+ disabled: disabled,
35
+ type: "button"
35
36
  }, void 0, _DatePicker || (_DatePicker = /*#__PURE__*/_jsx(DatePicker, {}))), [ariaCurrentValueForInputs, handleSetTriggerRef, handleToggleCalendar, handlePickerIconKeyDown, disabled]);
36
37
  };
37
38
 
package/esm/date-time-picker/parts/Pickers/Calendar/Day.js CHANGED
@@ -131,7 +131,8 @@ const Day = _ref => {
131
131
  innerRef: handleInnerRef,
132
132
  tabIndex: isSelected ? 0 : -1,
133
133
  "data-isfocused": isFocused,
134
- "data-testid": dataTestid
134
+ "data-testid": dataTestid,
135
+ type: "button"
135
136
  }, void 0, `${day.getDate()}`)
136
137
  }));
137
138
  };
package/esm/date-time-picker/parts/Pickers/TimeWheel/HoursList.js CHANGED
@@ -55,7 +55,8 @@ const HoursList = () => {
55
55
  onClick: handlePrevHour,
56
56
  innerRef: prevHourBtnRef,
57
57
  "data-testid": ControlledDateTimePickerDatatestid.TIMEWHEEL.PREV_HOUR,
58
- tabIndex: -1
58
+ tabIndex: -1,
59
+ type: "button"
59
60
  }, void 0, _ChevronSmallUp || (_ChevronSmallUp = /*#__PURE__*/_jsx(ChevronSmallUp, {})))), visibleHours.map(hourString => {
60
61
  const key = `timewheel-hour-${hourString || ''}`;
61
62
  if (!hourString) return /*#__PURE__*/_jsx(StyledWheelListItem, {}, key);
@@ -88,7 +89,8 @@ const HoursList = () => {
88
89
  "aria-valuemax": 12,
89
90
  "aria-valuemin": 1,
90
91
  "aria-valuenow": currHourNum,
91
- "aria-valuetext": `${hourString} hours`
92
+ "aria-valuetext": `${hourString} hours`,
93
+ type: "button"
92
94
  }, btnProps), {}, {
93
95
  children: hourString
94
96
  })));
@@ -99,7 +101,8 @@ const HoursList = () => {
99
101
  onClick: handleNextHour,
100
102
  innerRef: nextHourBtnRef,
101
103
  tabIndex: -1,
102
- "data-testid": ControlledDateTimePickerDatatestid.TIMEWHEEL.NEXT_HOUR
104
+ "data-testid": ControlledDateTimePickerDatatestid.TIMEWHEEL.NEXT_HOUR,
105
+ type: "button"
103
106
  }, void 0, _ChevronSmallDown || (_ChevronSmallDown = /*#__PURE__*/_jsx(ChevronSmallDown, {})))));
104
107
  };
105
108
 
package/esm/date-time-picker/parts/Pickers/TimeWheel/MeridiemList.js CHANGED
@@ -70,6 +70,7 @@ const MeridiemList = () => {
70
70
  onClick: e => handleTimeWheelBtnChangeMeridiem('AM', e),
71
71
  innerRef: prevMeridiemBtnRef,
72
72
  tabIndex: -1,
73
+ type: "button",
73
74
  children: _ChevronSmallUp || (_ChevronSmallUp = /*#__PURE__*/_jsx(ChevronSmallUp, {}))
74
75
  }))), currMeridiem === 'AM' || currMeridiem === '' ? _StyledWheelListItem || (_StyledWheelListItem = /*#__PURE__*/_jsx(StyledWheelListItem, {})) : null, /*#__PURE__*/_jsx(StyledWheelListItem, {
75
76
  isCurrentListItem: isAmCurrent
@@ -89,6 +90,7 @@ const MeridiemList = () => {
89
90
  "aria-valuemin": 0,
90
91
  "aria-valuenow": isPmCurrent ? 1 : 0,
91
92
  "aria-valuetext": isAmCurrent ? 'ante meridiem' : 'post meridiem',
93
+ type: "button",
92
94
  children: "AM"
93
95
  }))), /*#__PURE__*/_jsx(StyledWheelListItem, {
94
96
  isCurrentListItem: isPmCurrent
@@ -108,6 +110,7 @@ const MeridiemList = () => {
108
110
  "aria-valuemin": 0,
109
111
  "aria-valuenow": isPmCurrent ? 1 : 0,
110
112
  "aria-valuetext": isAmCurrent ? 'ante meridiem' : 'post meridiem',
113
+ type: "button",
111
114
  children: "PM"
112
115
  }))), currMeridiem === 'PM' ? _StyledWheelListItem2 || (_StyledWheelListItem2 = /*#__PURE__*/_jsx(StyledWheelListItem, {})) : null, /*#__PURE__*/_jsx(StyledWheelListItem, {}, void 0, /*#__PURE__*/jsx(StyledWheelChangeTimeBtn, _objectSpread(_objectSpread({}, styledPropsNextMeridiem), {}, {
113
116
  "aria-label": "set pm meridiem",
@@ -118,6 +121,7 @@ const MeridiemList = () => {
118
121
  onClick: e => handleTimeWheelBtnChangeMeridiem('PM', e),
119
122
  innerRef: nextMeridiemBtnRef,
120
123
  tabIndex: -1,
124
+ type: "button",
121
125
  children: _ChevronSmallDown || (_ChevronSmallDown = /*#__PURE__*/_jsx(ChevronSmallDown, {}))
122
126
  }))));
123
127
  };
package/esm/date-time-picker/parts/Pickers/TimeWheel/MinutesList.js CHANGED
@@ -54,7 +54,8 @@ const MinutesList = () => {
54
54
  onClick: handlePrevMinute,
55
55
  innerRef: prevMinutesBtnRef,
56
56
  tabIndex: -1,
57
- "data-testid": ControlledDateTimePickerDatatestid.TIMEWHEEL.PREV_MINUTE
57
+ "data-testid": ControlledDateTimePickerDatatestid.TIMEWHEEL.PREV_MINUTE,
58
+ type: "button"
58
59
  }, void 0, _ChevronSmallUp || (_ChevronSmallUp = /*#__PURE__*/_jsx(ChevronSmallUp, {})))), visibleMinutes.map(minutesString => {
59
60
  const key = `timewheel-minutes-${minutesString || ''}`;
60
61
  if (!minutesString) return /*#__PURE__*/_jsx(StyledWheelListItem, {}, key);
@@ -87,7 +88,8 @@ const MinutesList = () => {
87
88
  "aria-valuemax": 59,
88
89
  "aria-valuemin": 0,
89
90
  "aria-valuenow": currMinuteNum,
90
- "aria-valuetext": `${minutesString} minutes`
91
+ "aria-valuetext": `${minutesString} minutes`,
92
+ type: "button"
91
93
  }, btnProps), {}, {
92
94
  children: minutesString
93
95
  })));
@@ -98,7 +100,8 @@ const MinutesList = () => {
98
100
  onClick: handleNextMinute,
99
101
  innerRef: nextMinutesBtnRef,
100
102
  "data-testid": ControlledDateTimePickerDatatestid.TIMEWHEEL.NEXT_MINUTE,
101
- tabIndex: -1
103
+ tabIndex: -1,
104
+ type: "button"
102
105
  }, void 0, _ChevronSmallDown || (_ChevronSmallDown = /*#__PURE__*/_jsx(ChevronSmallDown, {})))));
103
106
  };
104
107
 
package/esm/date-time-picker/parts/Pickers/TimeWheel/SecondsList.js CHANGED
@@ -43,7 +43,8 @@ const SecondsList = () => {
43
43
  onClick: handlePrevSecond,
44
44
  onKeyDown: handlePrevSecondBtnOnKeyDown,
45
45
  innerRef: prevSecondsBtnRef,
46
- tabIndex: -1
46
+ tabIndex: -1,
47
+ type: "button"
47
48
  }, void 0, _ChevronSmallUp || (_ChevronSmallUp = /*#__PURE__*/_jsx(ChevronSmallUp, {})))), visibleSeconds.map(secondsString => {
48
49
  const key = `timewheel-seconds-${secondsString}`;
49
50
  if (!secondsString) return /*#__PURE__*/_jsx(StyledWheelListItem, {}, key);
@@ -62,7 +63,8 @@ const SecondsList = () => {
62
63
  size: "l",
63
64
  variant: BUTTON_VARIANT.DEFAULT,
64
65
  onClick: e => handleTimeWheelBtnChangeSeconds(secondsString, e),
65
- tabIndex: tabIndex
66
+ tabIndex: tabIndex,
67
+ type: "button"
66
68
  }, btnProps), {}, {
67
69
  children: secondsString
68
70
  })));
@@ -74,7 +76,8 @@ const SecondsList = () => {
74
76
  onClick: handleNextSecond,
75
77
  onKeyDown: handleNextSecondBtnOnKeyDown,
76
78
  innerRef: nextSecondsBtnRef,
77
- tabIndex: -1
79
+ tabIndex: -1,
80
+ type: "button"
78
81
  }, void 0, _ChevronSmallDown || (_ChevronSmallDown = /*#__PURE__*/_jsx(ChevronSmallDown, {})))));
79
82
  };
80
83
 
package/esm/date-time-picker/parts/Pickers/TimeWheel/TimeWheelIconTrigger.js CHANGED
@@ -30,7 +30,8 @@ const TimeWheelIconTrigger = () => {
30
30
  onClick: handleToggleTimePicker,
31
31
  onKeyDown: handlePickerIconKeyDown,
32
32
  "data-testid": ControlledDateTimePickerDatatestid.PICKER_ICONS.TIMEWHEEL,
33
- disabled: disabled
33
+ disabled: disabled,
34
+ type: "button"
34
35
  }, void 0, _RecentDocuments || (_RecentDocuments = /*#__PURE__*/_jsx(RecentDocuments, {}))), [ariaCurrentValueForInputs, disabled, handlePickerIconKeyDown, handleSetTriggerRef, handleToggleTimePicker]);
35
36
  };
36
37
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elliemae/ds-controlled-form",
3
- "version": "2.4.3-rc.1",
3
+ "version": "2.4.3-rc.10",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - Controlled Form Controllers",
6
6
  "module": "./esm/index.js",
@@ -896,20 +896,20 @@
896
896
  "build": "node ../../scripts/build/build.js"
897
897
  },
898
898
  "dependencies": {
899
- "@elliemae/ds-button": "2.4.3-rc.1",
900
- "@elliemae/ds-circular-progress-indicator": "2.4.3-rc.1",
901
- "@elliemae/ds-controlled-form": "2.4.3-rc.1",
902
- "@elliemae/ds-form": "2.4.3-rc.1",
903
- "@elliemae/ds-form-layout-blocks": "2.4.3-rc.1",
904
- "@elliemae/ds-grid": "2.4.3-rc.1",
905
- "@elliemae/ds-icon": "2.4.3-rc.1",
906
- "@elliemae/ds-icons": "2.4.3-rc.1",
907
- "@elliemae/ds-pills": "2.4.3-rc.1",
908
- "@elliemae/ds-popperjs": "2.4.3-rc.1",
909
- "@elliemae/ds-props-helpers": "2.4.3-rc.1",
910
- "@elliemae/ds-system": "2.4.3-rc.1",
911
- "@elliemae/ds-tooltip": "2.4.3-rc.1",
912
- "@elliemae/ds-truncated-tooltip-text": "2.4.3-rc.1",
899
+ "@elliemae/ds-button": "2.4.3-rc.10",
900
+ "@elliemae/ds-circular-progress-indicator": "2.4.3-rc.10",
901
+ "@elliemae/ds-controlled-form": "2.4.3-rc.10",
902
+ "@elliemae/ds-form": "2.4.3-rc.10",
903
+ "@elliemae/ds-form-layout-blocks": "2.4.3-rc.10",
904
+ "@elliemae/ds-grid": "2.4.3-rc.10",
905
+ "@elliemae/ds-icon": "2.4.3-rc.10",
906
+ "@elliemae/ds-icons": "2.4.3-rc.10",
907
+ "@elliemae/ds-pills": "2.4.3-rc.10",
908
+ "@elliemae/ds-popperjs": "2.4.3-rc.10",
909
+ "@elliemae/ds-props-helpers": "2.4.3-rc.10",
910
+ "@elliemae/ds-system": "2.4.3-rc.10",
911
+ "@elliemae/ds-tooltip": "2.4.3-rc.10",
912
+ "@elliemae/ds-truncated-tooltip-text": "2.4.3-rc.10",
913
913
  "prop-types": "~15.7.2",
914
914
  "react-desc": "~4.1.3",
915
915
  "react-popper": "~2.2.5",
package/types/combobox/react-desc-prop-types.d.ts CHANGED
@@ -36,7 +36,6 @@ export declare namespace DSComboboxT {
36
36
  onCreate?: (label: string) => void;
37
37
  onFilter?: (newOptions: OptionTypes[], inputValue?: string) => void;
38
38
  onCancel?: () => void;
39
- onBlur?: () => void;
40
39
  onSelectAll?: (suggestedValue: OptionTypes[] | [], event: React.MouseEvent | React.KeyboardEvent) => null;
41
40
  onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>, value: ItemOption) => void;
42
41
  }