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

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

@@ -11,7 +11,6 @@ var HoursList = require('./HoursList.js');
 var MinutesList = require('./MinutesList.js');
 var MeridiemList = require('./MeridiemList.js');
 var TimeWheelFooter = require('./TimeWheelFooter.js');
-var TimeWheelContext = require('./TimeWheelContext.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -24,18 +23,16 @@ const TimeWheelContent = /*#__PURE__*/React__default["default"].memo(_ref => {
     showShadow
   } = _ref;
   const {
+    isControllerOnly,
     hours,
     minutes,
     meridiem
-  } = React.useContext(TimeWheelContext.TimeWheelContext);
-  const {
-    isControllerOnly
   } = React.useContext(ControlledDateTimePickerCTX.ControlledDateTimePickerContext);
   return /*#__PURE__*/_jsx__default["default"](Styleds.StyledTimePickerContainer, {
     showShadow: showShadow,
     isControllerOnly: isControllerOnly,
     "data-testid": ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.CONTROLLER_COMPONENT.TIMEWHEEL
-  }, void 0, /*#__PURE__*/_jsx__default["default"](Styleds.StyledTimePickerHead, {}, void 0, "".concat(hours || '__', ":").concat(minutes || '__', " ").concat(meridiem || '__')), _StyledTimePickerWhee || (_StyledTimePickerWhee = /*#__PURE__*/_jsx__default["default"](Styleds.StyledTimePickerWheelsLegend, {}, void 0, /*#__PURE__*/_jsx__default["default"]("div", {}, void 0, "H"), /*#__PURE__*/_jsx__default["default"]("div", {}, void 0, "M"), /*#__PURE__*/_jsx__default["default"]("div", {}, void 0, "A"))), _StyledTimePickerWhee2 || (_StyledTimePickerWhee2 = /*#__PURE__*/_jsx__default["default"](Styleds.StyledTimePickerWheelWrapper, {}, void 0, /*#__PURE__*/_jsx__default["default"](HoursList.HoursList, {}), /*#__PURE__*/_jsx__default["default"](MinutesList.MinutesList, {}), /*#__PURE__*/_jsx__default["default"](MeridiemList.MeridiemList, {}))), _TimeWheelFooter || (_TimeWheelFooter = /*#__PURE__*/_jsx__default["default"](TimeWheelFooter.TimeWheelFooter, {})));
+  }, void 0, /*#__PURE__*/_jsx__default["default"](Styleds.StyledTimePickerHead, {}, void 0, `${hours || '__'}:${minutes || '__'} ${meridiem || '__'}`), _StyledTimePickerWhee || (_StyledTimePickerWhee = /*#__PURE__*/_jsx__default["default"](Styleds.StyledTimePickerWheelsLegend, {}, void 0, /*#__PURE__*/_jsx__default["default"]("div", {}, void 0, "H"), /*#__PURE__*/_jsx__default["default"]("div", {}, void 0, "M"), /*#__PURE__*/_jsx__default["default"]("div", {}, void 0, "A"))), _StyledTimePickerWhee2 || (_StyledTimePickerWhee2 = /*#__PURE__*/_jsx__default["default"](Styleds.StyledTimePickerWheelWrapper, {}, void 0, /*#__PURE__*/_jsx__default["default"](HoursList.HoursList, {}), /*#__PURE__*/_jsx__default["default"](MinutesList.MinutesList, {}), /*#__PURE__*/_jsx__default["default"](MeridiemList.MeridiemList, {}))), _TimeWheelFooter || (_TimeWheelFooter = /*#__PURE__*/_jsx__default["default"](TimeWheelFooter.TimeWheelFooter, {})));
 });
 
 exports.TimeWheelContent = TimeWheelContent;

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

@@ -31,7 +31,7 @@ const TimeWheelIconTrigger = () => {
     ariaCurrentValueForInputs
   } = React.useContext(ControlledDateTimePickerCTX.ControlledDateTimePickerContext);
   return React.useMemo(() => /*#__PURE__*/_jsx__default["default"](DSButton.DSButtonV2, {
-    "aria-label": "time picker context menu trigger, ".concat(ariaCurrentValueForInputs),
+    "aria-label": `time picker context menu trigger, ${ariaCurrentValueForInputs}`,
     buttonType: "icon",
     size: DSButton.BUTTON_SIZES.M,
     innerRef: handleSetTriggerRef,

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

@@ -18,7 +18,7 @@ const hoursStartPositionOffset = 1; // if array start from 01, this is 1, if sta
 const getTotalMinuteListWithStep = function () {
   let step = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
   const length = Math.ceil(60 / step);
-  return new Array(length).fill('_').map((_v, i) => stringHelpers.prependStringWithPlaceHolders("".concat(i * step), 2));
+  return new Array(length).fill('_').map((_v, i) => stringHelpers.prependStringWithPlaceHolders(`${i * step}`, 2));
 };
 
 const useCurrentDisplayedWheelsLogic = () => {
@@ -95,7 +95,7 @@ const useCurrentDisplayedWheelsLogic = () => {
   }, [handleChangeHours]);
   const handleChangeCurrHour = React.useCallback((offset, e) => {
     const newH = currHourNum + offset;
-    if (newH > 0 && newH <= 12) handleChangeHours(stringHelpers.prependStringWithPlaceHolders("".concat(newH), 2), e);
+    if (newH > 0 && newH <= 12) handleChangeHours(stringHelpers.prependStringWithPlaceHolders(`${newH}`, 2), e);
   }, [currHourNum, handleChangeHours]);
   const handlePrevHour = React.useCallback(e => {
     handleChangeCurrHour(-1, e);
@@ -108,7 +108,7 @@ const useCurrentDisplayedWheelsLogic = () => {
   }, [handleChangeMinutes]);
   const handleChangeCurrMinute = React.useCallback((offset, e) => {
     const newM = currMinuteNum + offset;
-    if (newM >= 0 && newM <= 59) handleChangeMinutes(stringHelpers.prependStringWithPlaceHolders("".concat(newM), 2), e);
+    if (newM >= 0 && newM <= 59) handleChangeMinutes(stringHelpers.prependStringWithPlaceHolders(`${newM}`, 2), e);
   }, [currMinuteNum, handleChangeMinutes]);
   const handlePrevMinute = React.useCallback(e => {
     handleChangeCurrMinute(-minutesInterval, e);

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

@@ -2,7 +2,6 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('core-js/modules/web.dom-collections.iterator.js');
 var React = require('react');
 var reactPopper = require('react-popper');
 var ControlledDateTimePickerCTX = require('../../../ControlledDateTimePickerCTX.js');
@@ -48,14 +47,12 @@ const usePopperTriggerLogic = () => {
     });
   }, [isWithCalendarToo, onPickerClose, onPickerOpen, trackFocusTimewheelCurrHour]);
   useOnClickOutside.useOnClickOutside(popperElement, e => {
-    var _pickerButtonRef$curr, _pickerButtonRef$curr2;
-
-    if (e.target instanceof Element && !(pickerButtonRef !== null && pickerButtonRef !== void 0 && (_pickerButtonRef$curr = pickerButtonRef.current) !== null && _pickerButtonRef$curr !== void 0 && (_pickerButtonRef$curr2 = _pickerButtonRef$curr.contains) !== null && _pickerButtonRef$curr2 !== void 0 && _pickerButtonRef$curr2.call(_pickerButtonRef$curr, e === null || e === void 0 ? void 0 : e.target))) closeTimePicker();
+    if (e.target instanceof Element && !pickerButtonRef?.current?.contains?.(e?.target)) closeTimePicker();
   });
   const handleSetTriggerRef = React.useCallback(newRef => {
     pickerButtonRef.current = newRef;
     setReferenceElement(newRef);
-    if (latestInteractionRegion === 'picker-icon' && currFocusDescriber === 'time-picker-icon') newRef === null || newRef === void 0 ? void 0 : newRef.focus();
+    if (latestInteractionRegion === 'picker-icon' && currFocusDescriber === 'time-picker-icon') newRef?.focus();
   }, [currFocusDescriber, latestInteractionRegion, pickerButtonRef]);
   const handleMenuWrapperKeyDown = React.useCallback(e => {
     const {

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

@@ -26,7 +26,7 @@ const Styled2DigitsInput = /*#__PURE__*/styled__default["default"](ResettedInput
   let {
     disabled
   } = _ref;
-  return disabled ? "color: #616b7f;" : "";
+  return disabled ? `color: #616b7f;` : ``;
 });
 const StyledMin4DigitsInput = /*#__PURE__*/styled__default["default"](ResettedInput).withConfig({
   componentId: "sc-2wbvze-4"
@@ -34,7 +34,7 @@ const StyledMin4DigitsInput = /*#__PURE__*/styled__default["default"](ResettedIn
   let {
     disabled
   } = _ref2;
-  return disabled ? "color: #616b7f;" : "";
+  return disabled ? `color: #616b7f;` : ``;
 });
 const StyledInputsWrapperGrid = /*#__PURE__*/styled__default["default"](dsGrid.Grid).withConfig({
   componentId: "sc-2wbvze-5"
@@ -42,7 +42,11 @@ const StyledInputsWrapperGrid = /*#__PURE__*/styled__default["default"](dsGrid.G
   let {
     isControllerOnly
   } = _ref3;
-  return isControllerOnly ? "" : "\n  height: 28px;    \n  border-width: 1px;\n  border-style: solid;\n  ";
+  return isControllerOnly ? `` : `
+  height: 28px;    
+  border-width: 1px;
+  border-style: solid;
+  `;
 }, _ref4 => {
   let {
     theme,
@@ -67,7 +71,7 @@ const StyledInputsWrapperGrid = /*#__PURE__*/styled__default["default"](dsGrid.G
     theme,
     disabled
   } = _ref7;
-  return disabled ? "background-color: ".concat(theme.colors.neutral[100], ";") : "";
+  return disabled ? `background-color: ${theme.colors.neutral[100]};` : ``;
 });
 const StyledDateInputsWrapperGrid = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-2wbvze-6"
@@ -81,14 +85,16 @@ const StyledPickersIconsWrapperGrid = /*#__PURE__*/styled__default["default"](ds
   let {
     isControllerOnly
   } = _ref8;
-  return isControllerOnly ? "" : "height: 26px;";
+  return isControllerOnly ? `` : `height: 26px;`;
 }, _ref9 => {
   let {
     theme,
     isControllerOnly,
     hasError
   } = _ref9;
-  return isControllerOnly ? "" : "\n    border-left: 1px solid ".concat(hasError ? theme.colors.danger[900] : theme.colors.neutral[200], "\n    ");
+  return isControllerOnly ? `` : `
+    border-left: 1px solid ${hasError ? theme.colors.danger[900] : theme.colors.neutral[200]}
+    `;
 });
 const StyledFocusWithIn = /*#__PURE__*/styled__default["default"](dsGrid.Grid).withConfig({
   componentId: "sc-2wbvze-9"

package/cjs/date-time-picker/parts/TimeInputs/HHInput.js

@@ -49,13 +49,11 @@ const HHInput = /*#__PURE__*/React__default["default"].memo(_ref => {
     onKeyDown: onKeyDown,
     value: value,
     ref: DomElem => {
-      var _DomElem$focus;
-
       contextRef.current = DomElem;
-      if (isFocused) DomElem === null || DomElem === void 0 ? void 0 : (_DomElem$focus = DomElem.focus) === null || _DomElem$focus === void 0 ? void 0 : _DomElem$focus.call(DomElem);
+      if (isFocused) DomElem?.focus?.();
     },
     placeholder: placeholder,
-    "aria-label": "hours input field ".concat(ariaCurrentValueForInputs),
+    "aria-label": `hours input field ${ariaCurrentValueForInputs}`,
     "data-testid": ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.TIME_INPUTS.HOUR,
     disabled: disabled,
     "aria-disabled": disabled

package/cjs/date-time-picker/parts/TimeInputs/MeridiemInput.js

@@ -2,7 +2,6 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('core-js/modules/web.dom-collections.iterator.js');
 var React = require('react');
 var Styleds = require('../Styleds.js');
 var ControlledDateTimePickerDatatestid = require('../../ControlledDateTimePickerDatatestid.js');
@@ -37,9 +36,7 @@ const MeridiemInput = /*#__PURE__*/React__default["default"].memo(_ref => {
     isFocused
   } = _ref;
   const validateOnChange = React.useCallback(e => {
-    var _e$target;
-
-    if (isInvalidMeridiem(e === null || e === void 0 ? void 0 : (_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.value)) {
+    if (isInvalidMeridiem(e?.target?.value)) {
       e.preventDefault();
       return;
     }
@@ -53,13 +50,11 @@ const MeridiemInput = /*#__PURE__*/React__default["default"].memo(_ref => {
     onKeyDown: onKeyDown,
     value: value,
     ref: DomElem => {
-      var _DomElem$focus;
-
       contextRef.current = DomElem;
-      if (isFocused) DomElem === null || DomElem === void 0 ? void 0 : (_DomElem$focus = DomElem.focus) === null || _DomElem$focus === void 0 ? void 0 : _DomElem$focus.call(DomElem);
+      if (isFocused) DomElem?.focus?.();
     },
     placeholder: placeholder,
-    "aria-label": "meridiem input field ".concat(ariaCurrentValueForInputs),
+    "aria-label": `meridiem input field ${ariaCurrentValueForInputs}`,
     "data-testid": ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.TIME_INPUTS.MERIDIEM,
     disabled: disabled,
     "aria-disabled": disabled

package/cjs/date-time-picker/parts/TimeInputs/MinutesInput.js

@@ -33,9 +33,7 @@ const MinutesInput = /*#__PURE__*/React__default["default"].memo(_ref => {
     isFocused
   } = _ref;
   const validateOnChange = React.useCallback(e => {
-    var _e$target;
-
-    if (isInvalidMinute(e === null || e === void 0 ? void 0 : (_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.value)) {
+    if (isInvalidMinute(e?.target?.value)) {
       e.preventDefault();
       return;
     }
@@ -49,13 +47,11 @@ const MinutesInput = /*#__PURE__*/React__default["default"].memo(_ref => {
     onKeyDown: onKeyDown,
     value: value,
     ref: DomElem => {
-      var _DomElem$focus;
-
       contextRef.current = DomElem;
-      if (isFocused) DomElem === null || DomElem === void 0 ? void 0 : (_DomElem$focus = DomElem.focus) === null || _DomElem$focus === void 0 ? void 0 : _DomElem$focus.call(DomElem);
+      if (isFocused) DomElem?.focus?.();
     },
     placeholder: placeholder,
-    "aria-label": "minutes input field ".concat(ariaCurrentValueForInputs),
+    "aria-label": `minutes input field ${ariaCurrentValueForInputs}`,
     "data-testid": ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.TIME_INPUTS.MINUTE,
     disabled: disabled,
     "aria-disabled": disabled

package/cjs/date-time-picker/parts/TimeInputs/useTimeInputs.js

@@ -43,9 +43,7 @@ const useTimeInputs = () => {
     trackFocusHourInput();
   }, [trackFocusHourInput]);
   const onHoursChange = React.useCallback(e => {
-    var _e$target;
-
-    let newHours = e === null || e === void 0 ? void 0 : (_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.value; // converts hours 2~9 to 07~09
+    let newHours = e?.target?.value; // converts hours 2~9 to 07~09
 
     if (Number.parseInt(newHours, 10) > 1) newHours = stringHelpers.prependStringWithPlaceHolders(newHours, 2);
     handleChangeHours(newHours, e); // auto-advance functionality:
@@ -68,12 +66,12 @@ const useTimeInputs = () => {
       const hoursInteger = Number.isNaN(hoursStringConvertedToInteger) ? 0 : hoursStringConvertedToInteger;
       let newHours;
       if (key === 'ArrowUp') newHours = hoursInteger + 1 <= 12 ? hoursInteger + 1 : hoursInteger;else newHours = hoursInteger - 1 > 1 ? hoursInteger - 1 : 1;
-      newHours = stringHelpers.prependStringWithPlaceHolders("".concat(newHours), 2);
+      newHours = stringHelpers.prependStringWithPlaceHolders(`${newHours}`, 2);
       handleChangeHours(newHours, e);
     }
 
     if (!Number.isNaN(hoursStringConvertedToInteger) && key === ':') {
-      const newHours = stringHelpers.prependStringWithPlaceHolders("".concat(hoursStringConvertedToInteger), 2);
+      const newHours = stringHelpers.prependStringWithPlaceHolders(`${hoursStringConvertedToInteger}`, 2);
       handleChangeHours(newHours, e); // auto-advance functionality:
 
       if (newHours.length === 2) trackFocusMinuteInput();
@@ -88,9 +86,7 @@ const useTimeInputs = () => {
     if ((ctrlKey || metaKey) && key === ';') trackFocusLastSegment();
   }, [hours, isWithDateInputs, trackFocusYearInput, onHomeKeyDown, onEndKeyDown, trackFocusLastSegment, trackFocusMinuteInput, handleChangeHours]);
   const onHoursBlur = React.useCallback(e => {
-    var _e$target2;
-
-    const newHours = e === null || e === void 0 ? void 0 : (_e$target2 = e.target) === null || _e$target2 === void 0 ? void 0 : _e$target2.value;
+    const newHours = e?.target?.value;
     if (newHours === '0') handleChangeHours('01', e, {
       isAutomaticFillTrigger: true
     });else if (newHours.length > 0 && newHours.length < 2) handleChangeHours(stringHelpers.prependStringWithPlaceHolders(newHours, 2), e, {
@@ -101,9 +97,7 @@ const useTimeInputs = () => {
     trackFocusMinuteInput();
   }, [trackFocusMinuteInput]);
   const onMinutesChange = React.useCallback(e => {
-    var _e$target3;
-
-    let newMinutes = e === null || e === void 0 ? void 0 : (_e$target3 = e.target) === null || _e$target3 === void 0 ? void 0 : _e$target3.value; // converts minutes 7~9 to 07~09
+    let newMinutes = e?.target?.value; // converts minutes 7~9 to 07~09
 
     if (Number.parseInt(newMinutes, 10) > 6) newMinutes = stringHelpers.prependStringWithPlaceHolders(newMinutes, 2);
     handleChangeMinutes(newMinutes, e); // auto-advance functionality:
@@ -126,19 +120,19 @@ const useTimeInputs = () => {
       const minutesInteger = Number.isNaN(minutesStringConvertedToInteger) ? 0 : minutesStringConvertedToInteger;
       let newMinutes;
       if (key === 'ArrowUp') newMinutes = minutesInteger + minutesInterval <= 59 ? minutesInteger + minutesInterval : minutesInteger;else newMinutes = minutesInteger - minutesInterval > 0 ? minutesInteger - minutesInterval : 0;
-      newMinutes = stringHelpers.prependStringWithPlaceHolders("".concat(newMinutes), 2);
+      newMinutes = stringHelpers.prependStringWithPlaceHolders(`${newMinutes}`, 2);
       handleChangeMinutes(newMinutes, e);
     }
 
     if (!Number.isNaN(minutesStringConvertedToInteger) && key === ' ') {
-      const newMinutes = stringHelpers.prependStringWithPlaceHolders("".concat(minutesStringConvertedToInteger), 2);
+      const newMinutes = stringHelpers.prependStringWithPlaceHolders(`${minutesStringConvertedToInteger}`, 2);
       handleChangeMinutes(newMinutes, e); // auto-advance functionality:
 
       if (newMinutes.length === 2) trackFocusMeridiemInput();
     } // regressive backspace functionality
 
 
-    if (key === 'Backspace' && (minutes === null || minutes === void 0 ? void 0 : minutes.length) === 0) {
+    if (key === 'Backspace' && minutes?.length === 0) {
       trackFocusHourInput();
     } // focus last fragment on fill with now
 
@@ -146,9 +140,7 @@ const useTimeInputs = () => {
     if ((ctrlKey || metaKey) && key === ';') trackFocusLastSegment();
   }, [minutes, onHomeKeyDown, onEndKeyDown, trackFocusLastSegment, minutesInterval, handleChangeMinutes, trackFocusMeridiemInput, trackFocusHourInput]);
   const onMinutesBlur = React.useCallback(e => {
-    var _e$target4;
-
-    const newMinutes = e === null || e === void 0 ? void 0 : (_e$target4 = e.target) === null || _e$target4 === void 0 ? void 0 : _e$target4.value;
+    const newMinutes = e?.target?.value;
     if (newMinutes.length > 0 && newMinutes.length < 2) handleChangeMinutes(stringHelpers.prependStringWithPlaceHolders(newMinutes, 2), e, {
       isAutomaticFillTrigger: true
     });
@@ -157,13 +149,11 @@ const useTimeInputs = () => {
     trackFocusMeridiemInput();
   }, [trackFocusMeridiemInput]);
   const onMeridiemChange = React.useCallback(e => {
-    var _e$target5, _e$target5$value, _e$target5$value$toUp;
-
-    let newMeridiem = e === null || e === void 0 ? void 0 : (_e$target5 = e.target) === null || _e$target5 === void 0 ? void 0 : (_e$target5$value = _e$target5.value) === null || _e$target5$value === void 0 ? void 0 : (_e$target5$value$toUp = _e$target5$value.toUpperCase) === null || _e$target5$value$toUp === void 0 ? void 0 : _e$target5$value$toUp.call(_e$target5$value); // if new value is length 1,
+    let newMeridiem = e?.target?.value?.toUpperCase?.(); // if new value is length 1,
     //   if previous value was empty, auto-complete
     //   if previous value was not empty, set to empty (regressive backspace)
 
-    if (newMeridiem.length === 1) if (meridiem === '') newMeridiem = "".concat(newMeridiem, "M");else newMeridiem = '';
+    if (newMeridiem.length === 1) if (meridiem === '') newMeridiem = `${newMeridiem}M`;else newMeridiem = '';
     handleChangeMeridiem(newMeridiem, e); // auto-advance functionality:
 
     if (newMeridiem.length === 2 && withAnyRightController) {
@@ -184,17 +174,15 @@ const useTimeInputs = () => {
     if (key === 'ArrowDown' && meridiem !== 'PM') handleChangeMeridiem('PM', e); // regressive backspace functionality
 
     if (key === 'Backspace') {
-      if ((meridiem === null || meridiem === void 0 ? void 0 : meridiem.length) === 2) handleChangeMeridiem('', e);else trackFocusMinuteInput();
+      if (meridiem?.length === 2) handleChangeMeridiem('', e);else trackFocusMinuteInput();
     } // focus last fragment on fill with now
 
 
     if ((ctrlKey || metaKey) && key === ';') trackFocusLastSegment();
   }, [onHomeKeyDown, onEndKeyDown, meridiem, handleChangeMeridiem, trackFocusLastSegment, trackFocusMinuteInput]);
   const onMeridiemBlur = React.useCallback(e => {
-    var _e$target6, _e$target6$value, _e$target6$value$toUp;
-
-    const newMeridiem = e === null || e === void 0 ? void 0 : (_e$target6 = e.target) === null || _e$target6 === void 0 ? void 0 : (_e$target6$value = _e$target6.value) === null || _e$target6$value === void 0 ? void 0 : (_e$target6$value$toUp = _e$target6$value.toUpperCase) === null || _e$target6$value$toUp === void 0 ? void 0 : _e$target6$value$toUp.call(_e$target6$value);
-    if (newMeridiem.length === 1) handleChangeMeridiem("".concat(newMeridiem, "M"), e, {
+    const newMeridiem = e?.target?.value?.toUpperCase?.();
+    if (newMeridiem.length === 1) handleChangeMeridiem(`${newMeridiem}M`, e, {
       isAutomaticFillTrigger: true
     });
   }, [handleChangeMeridiem]);

package/cjs/date-time-picker/utils/dateHelpers.js

@@ -4,43 +4,34 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 require('core-js/modules/esnext.async-iterator.map.js');
 require('core-js/modules/esnext.iterator.map.js');
-require('core-js/modules/web.dom-collections.iterator.js');
 var React = require('react');
 var constants = require('./constants.js');
 var stringHelpers = require('./stringHelpers.js');
 var numberHelpers = require('./numberHelpers.js');
 
-const getDateValuesFromDate = day => {
-  var _day$getMonth, _day$getDate, _day$getFullYear;
-
-  return {
-    month: day === null || day === void 0 ? void 0 : (_day$getMonth = day.getMonth) === null || _day$getMonth === void 0 ? void 0 : _day$getMonth.call(day),
-    day: day === null || day === void 0 ? void 0 : (_day$getDate = day.getDate) === null || _day$getDate === void 0 ? void 0 : _day$getDate.call(day),
-    year: day === null || day === void 0 ? void 0 : (_day$getFullYear = day.getFullYear) === null || _day$getFullYear === void 0 ? void 0 : _day$getFullYear.call(day)
-  };
-};
+const getDateValuesFromDate = day => ({
+  month: day?.getMonth?.(),
+  day: day?.getDate?.(),
+  year: day?.getFullYear?.()
+});
 const getDateStringFromDay = day => {
-  const monthFromDay = stringHelpers.prependStringWithPlaceHolders("".concat(day.getMonth() + 1), 2); // months from 1-12
+  const monthFromDay = stringHelpers.prependStringWithPlaceHolders(`${day.getMonth() + 1}`, 2); // months from 1-12
 
-  const dayFromDay = stringHelpers.prependStringWithPlaceHolders("".concat(day.getDate()), 2);
-  const yearFromDay = stringHelpers.prependStringWithPlaceHolders("".concat(day.getFullYear()), 4);
-  return "".concat(monthFromDay, "/").concat(dayFromDay, "/").concat(yearFromDay);
+  const dayFromDay = stringHelpers.prependStringWithPlaceHolders(`${day.getDate()}`, 2);
+  const yearFromDay = stringHelpers.prependStringWithPlaceHolders(`${day.getFullYear()}`, 4);
+  return `${monthFromDay}/${dayFromDay}/${yearFromDay}`;
 };
 const getTimeStringFromDay = day => {
   const hoursNum = day.getHours();
   const meridiem = hoursNum > 12 ? 'PM' : 'AM';
   const twelveHourFormat = hoursNum > 12 ? hoursNum - 12 : hoursNum;
   const minutesNum = day.getMinutes();
-  const hoursFromDay = stringHelpers.prependStringWithPlaceHolders("".concat(twelveHourFormat), 2);
-  const minutesFromDay = stringHelpers.prependStringWithPlaceHolders("".concat(minutesNum), 2);
-  return "".concat(hoursFromDay, ":").concat(minutesFromDay, " ").concat(meridiem);
+  const hoursFromDay = stringHelpers.prependStringWithPlaceHolders(`${twelveHourFormat}`, 2);
+  const minutesFromDay = stringHelpers.prependStringWithPlaceHolders(`${minutesNum}`, 2);
+  return `${hoursFromDay}:${minutesFromDay} ${meridiem}`;
 };
 const getMonthNameByMonthNumber = monthNumber => constants.monthNames[monthNumber];
-const isSameDateMoment = (dateA, dateB) => {
-  var _dateA$getTime, _dateB$getTime;
-
-  return (dateA === null || dateA === void 0 ? void 0 : (_dateA$getTime = dateA.getTime) === null || _dateA$getTime === void 0 ? void 0 : _dateA$getTime.call(dateA)) === (dateB === null || dateB === void 0 ? void 0 : (_dateB$getTime = dateB.getTime) === null || _dateB$getTime === void 0 ? void 0 : _dateB$getTime.call(dateB));
-};
+const isSameDateMoment = (dateA, dateB) => dateA?.getTime?.() === dateB?.getTime?.();
 const compareTwoDatesDayEquality = (dayA, dayB) => {
   const {
     day: currD,
@@ -55,11 +46,7 @@ const compareTwoDatesDayEquality = (dayA, dayB) => {
   return currD === focusD && currM === focusM && currY === focusY;
 };
 const getLastDayOfMonth = (month, year) => new Date(year, month + 1, 0);
-const isValidDayForTheMonth = (month, year, day) => {
-  var _Date, _Date$getMonth;
-
-  return ((_Date = new Date(year, month, day)) === null || _Date === void 0 ? void 0 : (_Date$getMonth = _Date.getMonth) === null || _Date$getMonth === void 0 ? void 0 : _Date$getMonth.call(_Date)) === month;
-};
+const isValidDayForTheMonth = (month, year, day) => new Date(year, month, day)?.getMonth?.() === month;
 const getDayFromDateString = dateString => {
   const {
     month,
@@ -73,8 +60,6 @@ const getDayFromDateString = dateString => {
   return null;
 };
 const isValidDayForTheMonthDateString = dateString => {
-  var _getDayFromDateString, _getDayFromDateString2;
-
   if (stringHelpers.isIncompleteString(dateString)) return true;
   const {
     month
@@ -82,7 +67,7 @@ const isValidDayForTheMonthDateString = dateString => {
   const monthInt = numberHelpers.convertToPositiveNumberIfPossible(month);
   if (monthInt === -1) return false;
   const monthDateMonth = monthInt - 1;
-  return ((_getDayFromDateString = getDayFromDateString(dateString)) === null || _getDayFromDateString === void 0 ? void 0 : (_getDayFromDateString2 = _getDayFromDateString.getMonth) === null || _getDayFromDateString2 === void 0 ? void 0 : _getDayFromDateString2.call(_getDayFromDateString)) === monthDateMonth;
+  return getDayFromDateString(dateString)?.getMonth?.() === monthDateMonth;
 };
 const getValidationDateStringMetaInfo = function (dateString) {
   let getIsOutOfRangeDay = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : day => false;
@@ -209,8 +194,6 @@ const getFirstXDaysFromNextMonth = (month, year, howMany) => {
   return days;
 };
 const getFiveBySevenCurrentMonthDaysMatrix = (month, year) => {
-  var _currentMonthDays$, _currentMonthDays$$da, _currentMonthDays, _currentMonthDays$day;
-
   const currentMonthDays = getDaysInMonth(month, year).map(day => ({
     day,
     dayAsString: getDateStringFromDay(day),
@@ -220,7 +203,7 @@ const getFiveBySevenCurrentMonthDaysMatrix = (month, year) => {
     isHidden: false,
     dayBtnRef: /*#__PURE__*/React.createRef()
   }));
-  const firstDayOfTheMonthWeekDay = currentMonthDays === null || currentMonthDays === void 0 ? void 0 : (_currentMonthDays$ = currentMonthDays[0]) === null || _currentMonthDays$ === void 0 ? void 0 : (_currentMonthDays$$da = _currentMonthDays$.day) === null || _currentMonthDays$$da === void 0 ? void 0 : _currentMonthDays$$da.getDay();
+  const firstDayOfTheMonthWeekDay = currentMonthDays?.[0]?.day?.getDay();
   const previousMonthDaysToPrepend = getLastXDaysFromPreviousMonth(month, year, firstDayOfTheMonthWeekDay).map(day => ({
     day,
     dayAsString: getDateStringFromDay(day),
@@ -230,7 +213,7 @@ const getFiveBySevenCurrentMonthDaysMatrix = (month, year) => {
     isHidden: false,
     dayBtnRef: /*#__PURE__*/React.createRef()
   }));
-  const lastDayOfTheMonthWeekDay = currentMonthDays === null || currentMonthDays === void 0 ? void 0 : (_currentMonthDays = currentMonthDays[currentMonthDays.length - 1]) === null || _currentMonthDays === void 0 ? void 0 : (_currentMonthDays$day = _currentMonthDays.day) === null || _currentMonthDays$day === void 0 ? void 0 : _currentMonthDays$day.getDay();
+  const lastDayOfTheMonthWeekDay = currentMonthDays?.[currentMonthDays.length - 1]?.day?.getDay();
   const nextMonthDaysToAppend = getFirstXDaysFromNextMonth(month, year, 6 - lastDayOfTheMonthWeekDay).map(day => ({
     day,
     dayAsString: getDateStringFromDay(day),

package/cjs/date-time-picker/utils/hooks/useOnClickOutside.js

@@ -7,10 +7,8 @@ var React = require('react');
 const useOnClickOutside = (ref, handler) => {
   React.useEffect(() => {
     const listener = event => {
-      var _ref$contains;
-
       // Do nothing if clicking ref's element or descendent elements
-      if (event.target instanceof Element) if (!ref || ref !== null && ref !== void 0 && (_ref$contains = ref.contains) !== null && _ref$contains !== void 0 && _ref$contains.call(ref, event.target)) {
+      if (event.target instanceof Element) if (!ref || ref?.contains?.(event.target)) {
         return;
       }
       handler(event);

package/cjs/date-time-picker/utils/stringHelpers.js

@@ -4,8 +4,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 require('core-js/modules/esnext.async-iterator.map.js');
 require('core-js/modules/esnext.iterator.map.js');
-require('core-js/modules/web.dom-collections.iterator.js');
-require('core-js/modules/es.string.replace.js');
 var constants = require('./constants.js');
 var numberHelpers = require('./numberHelpers.js');
 
@@ -31,13 +29,9 @@ const getFormattedDateString = _ref => {
   const finalMonth = fillStringWithPlaceHolders(month, 2);
   const finalDay = fillStringWithPlaceHolders(day, 2);
   const finalYear = fillStringWithPlaceHolders(year, 4);
-  return "".concat(finalMonth, "/").concat(finalDay, "/").concat(finalYear);
-};
-const dateTimeToDate = dateTime => {
-  var _dateTime$split, _dateTime$split$call;
-
-  return dateTime === null || dateTime === void 0 ? void 0 : (_dateTime$split = dateTime.split) === null || _dateTime$split === void 0 ? void 0 : (_dateTime$split$call = _dateTime$split.call(dateTime, ' ')) === null || _dateTime$split$call === void 0 ? void 0 : _dateTime$split$call[0];
+  return `${finalMonth}/${finalDay}/${finalYear}`;
 };
+const dateTimeToDate = dateTime => dateTime?.split?.(' ')?.[0];
 const deconstructValuesFromDateString = dateString => {
   const [dirtyMonth = '', dirtyDay = '', dirtyYear = ''] = dateString.split('/');
   const replaceAllRegexp = /_/g;
@@ -83,13 +77,13 @@ const getFormattedTimeString = _ref2 => {
 
   const finalMeridiem = fillStringWithPlaceHolders(meridiem, 2); // return `${finalHour}:${finalMinutes}:${finalSeconds} ${finalMeridiem}`;// <-- seconds format
 
-  return "".concat(finalHour, ":").concat(finalMinutes, " ").concat(finalMeridiem);
+  return `${finalHour}:${finalMinutes} ${finalMeridiem}`;
 };
 const dateTimeToTime = dateTime => {
   const [// eslint-disable-next-line @typescript-eslint/no-unused-vars, no-unused-vars
   date, // timeNumbers = '__:__:__', // <-- seconds format
   timeNumbers = '__:__', timeMeridiem = '__'] = dateTime.split(' ');
-  return "".concat(timeNumbers, " ").concat(timeMeridiem);
+  return `${timeNumbers} ${timeMeridiem}`;
 };
 const deconstructTimeValues = timeString => {
   const [dirtyTimes = '', dirtyMeridiem] = timeString.split(' '); // <--['__:__','__']
@@ -135,7 +129,7 @@ const getAriaDayFromDateString = dateString => {
   const dayNum = numberHelpers.convertToPositiveNumberIfPossible(dayString);
   const yearNum = numberHelpers.convertToPositiveNumberIfPossible(yearString);
   if (monthNum === -1 || dayNum === -1 || yearNum === -1) return '';
-  return "".concat(constants.monthNames[monthNum - 1], " ").concat(constants.announcableCardinalDays[dayNum], " ").concat(yearNum);
+  return `${constants.monthNames[monthNum - 1]} ${constants.announcableCardinalDays[dayNum]} ${yearNum}`;
 };
 
 exports.dateTimeToDate = dateTimeToDate;

package/cjs/input-group/InputGroup.js

@@ -13,7 +13,7 @@ var React = require('react');
 var dsPropsHelpers = require('@elliemae/ds-props-helpers');
 var styled = require('./styled.js');
 var reactDescPropTypes = require('./react-desc-prop-types.js');
-var InputGroupDataTestIds = require('./InputGroupDataTestIds.js');
+var dataTestIds = require('./exported-related/data-test-ids.js');
 var jsxRuntime = require('react/jsx-runtime');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -33,6 +33,7 @@ const DSInputGroup = props => {
     rightAddon
   } = props;
   const globals = dsPropsHelpers.useGetGlobalAttributes(props);
+  const xstyledProps = dsPropsHelpers.useGetXstyledProps(props);
   const cols = React.useMemo(() => {
     if (leftAddon && rightAddon) {
       return ['max-content', 'auto', 'max-content'];
@@ -48,16 +49,16 @@ const DSInputGroup = props => {
 
     return ['auto'];
   }, [leftAddon, rightAddon]);
-  return /*#__PURE__*/jsxRuntime.jsxs(styled.StyledContainer, _objectSpread(_objectSpread({
+  return /*#__PURE__*/jsxRuntime.jsxs(styled.StyledContainer, _objectSpread(_objectSpread(_objectSpread({
     cols: cols,
-    "data-testid": InputGroupDataTestIds.InputGroupDataTestIds.CONTAINER
-  }, globals), {}, {
+    "data-testid": dataTestIds.InputGroupDataTestIds.CONTAINER
+  }, globals), xstyledProps), {}, {
     children: [leftAddon && /*#__PURE__*/_jsx__default["default"](styled.StyledLeftAddon, {
-      "data-testid": InputGroupDataTestIds.InputGroupDataTestIds.LEFTADDON
+      "data-testid": dataTestIds.InputGroupDataTestIds.LEFTADDON
     }, void 0, leftAddon), /*#__PURE__*/_jsx__default["default"](styled.StyledInput, {
-      "data-testid": InputGroupDataTestIds.InputGroupDataTestIds.INPUTCONTAINER
+      "data-testid": dataTestIds.InputGroupDataTestIds.INPUTCONTAINER
     }, void 0, children), rightAddon && /*#__PURE__*/_jsx__default["default"](styled.StyledRightAddon, {
-      "data-testid": InputGroupDataTestIds.InputGroupDataTestIds.RIGHTADDON
+      "data-testid": dataTestIds.InputGroupDataTestIds.RIGHTADDON
     }, void 0, rightAddon)]
   }));
 };

package/cjs/input-group/exported-related/data-test-ids.js

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const InputGroupDataTestIds = {
+  CONTAINER: 'ds-input-group-container',
+  LEFTADDON: 'ds-input-group-left-addon',
+  RIGHTADDON: 'ds-input-group-right-addon',
+  INPUTCONTAINER: 'ds-input-group-input-container'
+};
+
+exports.InputGroupDataTestIds = InputGroupDataTestIds;

package/cjs/input-group/exported-related/index.js

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var dataTestIds = require('./data-test-ids.js');
+var theming = require('./theming.js');
+
+
+
+exports.InputGroupDataTestIds = dataTestIds.InputGroupDataTestIds;
+exports.DSInputGroupName = theming.DSInputGroupName;
+exports.DSInputGroupSlots = theming.DSInputGroupSlots;

package/cjs/input-group/exported-related/theming.js

@@ -0,0 +1,13 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const DSInputGroupName = 'ds-input-group';
+const DSInputGroupSlots = {
+  CONTAINER: 'root',
+  LEFT_ADDON: 'leftaddon',
+  RIGHT_ADDON: 'rightaddon'
+};
+
+exports.DSInputGroupName = DSInputGroupName;
+exports.DSInputGroupSlots = DSInputGroupSlots;