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

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

@@ -1,6 +1,5 @@
 import { useContext, useCallback, useMemo } from 'react';
 import { ControlledDateTimePickerContext } from '../../ControlledDateTimePickerCTX.js';
-import { homeEndArrowUpDownSemiKeys, homeEndArrowUpDownSpaceKeys, homeEndArrowUpDownKeys } from '../../utils/constants.js';
 import { prependStringWithPlaceHolders } from '../../utils/stringHelpers.js';
 
 /* eslint-disable complexity */
@@ -9,66 +8,53 @@ const useTimeInputs = () => {
     props: {
       disabled
     },
-    lastSegmentRef,
     hours,
     minutes,
     meridiem,
-    hideDate,
     withAnyRightController,
     withAnyPicker,
     withClearBtn,
     isWithDateInputs,
-    hourInputRef,
-    minutesInputRef,
-    meridiemInputRef,
-    yearInputRef,
-    clearButtonRef,
-    pickerButtonRef,
-    monthInputRef,
     autoFocusHourInput,
     handleChangeHours,
     handleChangeMinutes,
     handleChangeMeridiem,
-    setLatestInteractionRegion,
-    minutesInterval
+    minutesInterval,
+    trackFocusFirstSegment,
+    trackFocusLastSegment,
+    trackFocusHourInput,
+    trackFocusMinuteInput,
+    trackFocusMeridiemInput,
+    trackFocusClearBtn,
+    trackFocusPicker,
+    trackFocusYearInput
   } = useContext(ControlledDateTimePickerContext);
-  const setLatestInteractionRegionTimeInputs = useCallback(() => {
-    setLatestInteractionRegion('time-inputs');
-  }, [setLatestInteractionRegion]);
   const onHomeKeyDown = useCallback(() => {
-    var _monthInputRef$curren, _monthInputRef$curren2, _hourInputRef$current, _hourInputRef$current2;
-
-    if (!hideDate) monthInputRef === null || monthInputRef === void 0 ? void 0 : (_monthInputRef$curren = monthInputRef.current) === null || _monthInputRef$curren === void 0 ? void 0 : (_monthInputRef$curren2 = _monthInputRef$curren.focus) === null || _monthInputRef$curren2 === void 0 ? void 0 : _monthInputRef$curren2.call(_monthInputRef$curren);else hourInputRef === null || hourInputRef === void 0 ? void 0 : (_hourInputRef$current = hourInputRef.current) === null || _hourInputRef$current === void 0 ? void 0 : (_hourInputRef$current2 = _hourInputRef$current.focus) === null || _hourInputRef$current2 === void 0 ? void 0 : _hourInputRef$current2.call(_hourInputRef$current);
-  }, [hideDate, monthInputRef, hourInputRef]);
+    trackFocusFirstSegment();
+  }, [trackFocusFirstSegment]);
   const onEndKeyDown = useCallback(() => {
-    var _pickerButtonRef$curr, _pickerButtonRef$curr2, _clearButtonRef$curre, _clearButtonRef$curre2, _meridiemInputRef$cur, _meridiemInputRef$cur2;
-
-    if (withAnyPicker) pickerButtonRef === null || pickerButtonRef === void 0 ? void 0 : (_pickerButtonRef$curr = pickerButtonRef.current) === null || _pickerButtonRef$curr === void 0 ? void 0 : (_pickerButtonRef$curr2 = _pickerButtonRef$curr.focus) === null || _pickerButtonRef$curr2 === void 0 ? void 0 : _pickerButtonRef$curr2.call(_pickerButtonRef$curr);else if (withClearBtn) clearButtonRef === null || clearButtonRef === void 0 ? void 0 : (_clearButtonRef$curre = clearButtonRef.current) === null || _clearButtonRef$curre === void 0 ? void 0 : (_clearButtonRef$curre2 = _clearButtonRef$curre.focus) === null || _clearButtonRef$curre2 === void 0 ? void 0 : _clearButtonRef$curre2.call(_clearButtonRef$curre);else meridiemInputRef === null || meridiemInputRef === void 0 ? void 0 : (_meridiemInputRef$cur = meridiemInputRef.current) === null || _meridiemInputRef$cur === void 0 ? void 0 : (_meridiemInputRef$cur2 = _meridiemInputRef$cur.focus) === null || _meridiemInputRef$cur2 === void 0 ? void 0 : _meridiemInputRef$cur2.call(_meridiemInputRef$cur);
-  }, [withAnyPicker, pickerButtonRef, withClearBtn, clearButtonRef, meridiemInputRef]);
+    trackFocusLastSegment();
+  }, [trackFocusLastSegment]);
   const onHoursFocus = useCallback(() => {
-    setLatestInteractionRegionTimeInputs();
-  }, [setLatestInteractionRegionTimeInputs]);
+    trackFocusHourInput();
+  }, [trackFocusHourInput]);
   const onHoursChange = useCallback(e => {
-    var _e$target, _minutesInputRef$curr, _minutesInputRef$curr2;
-
-    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 = prependStringWithPlaceHolders(newHours, 2);
     handleChangeHours(newHours, e); // auto-advance functionality:
 
-    if (newHours.length === 2) minutesInputRef === null || minutesInputRef === void 0 ? void 0 : (_minutesInputRef$curr = minutesInputRef.current) === null || _minutesInputRef$curr === void 0 ? void 0 : (_minutesInputRef$curr2 = _minutesInputRef$curr.focus) === null || _minutesInputRef$curr2 === void 0 ? void 0 : _minutesInputRef$curr2.call(_minutesInputRef$curr);
-  }, [minutesInputRef, handleChangeHours]);
+    if (newHours.length === 2) trackFocusMinuteInput();
+  }, [handleChangeHours, trackFocusMinuteInput]);
   const onHoursKeyDown = useCallback(e => {
-    var _lastSegmentRef$curre, _lastSegmentRef$curre2;
-
     const {
       key,
       ctrlKey,
       metaKey
     } = e;
     const hoursStringConvertedToInteger = Number.parseInt(hours, 10);
-    if (homeEndArrowUpDownSemiKeys.includes(key)) e.preventDefault();
-    if (homeEndArrowUpDownSemiKeys.includes(key)) e.stopPropagation();
+    if (['Home', 'End', 'ArrowUp', 'ArrowDown', ':'].includes(key)) e.preventDefault();
+    if (['Home', 'End', 'ArrowUp', 'ArrowDown', ':'].includes(key)) e.stopPropagation();
     if (key === 'Home') onHomeKeyDown();
     if (key === 'End') onEndKeyDown();
 
@@ -76,33 +62,27 @@ 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 = prependStringWithPlaceHolders("".concat(newHours), 2);
+      newHours = prependStringWithPlaceHolders(`${newHours}`, 2);
       handleChangeHours(newHours, e);
     }
 
     if (!Number.isNaN(hoursStringConvertedToInteger) && key === ':') {
-      var _minutesInputRef$curr3, _minutesInputRef$curr4;
-
-      const newHours = prependStringWithPlaceHolders("".concat(hoursStringConvertedToInteger), 2);
+      const newHours = prependStringWithPlaceHolders(`${hoursStringConvertedToInteger}`, 2);
       handleChangeHours(newHours, e); // auto-advance functionality:
 
-      if (newHours.length === 2) minutesInputRef === null || minutesInputRef === void 0 ? void 0 : (_minutesInputRef$curr3 = minutesInputRef.current) === null || _minutesInputRef$curr3 === void 0 ? void 0 : (_minutesInputRef$curr4 = _minutesInputRef$curr3.focus) === null || _minutesInputRef$curr4 === void 0 ? void 0 : _minutesInputRef$curr4.call(_minutesInputRef$curr3);
+      if (newHours.length === 2) trackFocusMinuteInput();
     } // regressive backspace functionality
 
 
     if (key === 'Backspace' && hours.length === 0 && isWithDateInputs) {
-      var _yearInputRef$current, _yearInputRef$current2;
-
-      yearInputRef === null || yearInputRef === void 0 ? void 0 : (_yearInputRef$current = yearInputRef.current) === null || _yearInputRef$current === void 0 ? void 0 : (_yearInputRef$current2 = _yearInputRef$current.focus) === null || _yearInputRef$current2 === void 0 ? void 0 : _yearInputRef$current2.call(_yearInputRef$current);
+      trackFocusYearInput();
     } // focus last fragment on fill with now
 
 
-    if ((ctrlKey || metaKey) && key === ';') lastSegmentRef === null || lastSegmentRef === void 0 ? void 0 : (_lastSegmentRef$curre = lastSegmentRef.current) === null || _lastSegmentRef$curre === void 0 ? void 0 : (_lastSegmentRef$curre2 = _lastSegmentRef$curre.focus) === null || _lastSegmentRef$curre2 === void 0 ? void 0 : _lastSegmentRef$curre2.call(_lastSegmentRef$curre);
-  }, [hours, onHomeKeyDown, onEndKeyDown, isWithDateInputs, lastSegmentRef, handleChangeHours, minutesInputRef, yearInputRef]);
+    if ((ctrlKey || metaKey) && key === ';') trackFocusLastSegment();
+  }, [hours, isWithDateInputs, trackFocusYearInput, onHomeKeyDown, onEndKeyDown, trackFocusLastSegment, trackFocusMinuteInput, handleChangeHours]);
   const onHoursBlur = 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(prependStringWithPlaceHolders(newHours, 2), e, {
@@ -110,30 +90,25 @@ const useTimeInputs = () => {
     });
   }, [handleChangeHours]);
   const onMinutesFocus = useCallback(() => {
-    setLatestInteractionRegionTimeInputs();
-  }, [setLatestInteractionRegionTimeInputs]);
+    trackFocusMinuteInput();
+  }, [trackFocusMinuteInput]);
   const onMinutesChange = useCallback(e => {
-    var _e$target3, _meridiemInputRef$cur3, _meridiemInputRef$cur4;
-
-    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 = prependStringWithPlaceHolders(newMinutes, 2);
     handleChangeMinutes(newMinutes, e); // auto-advance functionality:
-    // if (newMinutes.length === 2) secondsInputRef?.current?.focus?.();
 
-    if (newMinutes.length === 2) meridiemInputRef === null || meridiemInputRef === void 0 ? void 0 : (_meridiemInputRef$cur3 = meridiemInputRef.current) === null || _meridiemInputRef$cur3 === void 0 ? void 0 : (_meridiemInputRef$cur4 = _meridiemInputRef$cur3.focus) === null || _meridiemInputRef$cur4 === void 0 ? void 0 : _meridiemInputRef$cur4.call(_meridiemInputRef$cur3);
-  }, [meridiemInputRef, handleChangeMinutes]);
+    if (newMinutes.length === 2) trackFocusMeridiemInput();
+  }, [handleChangeMinutes, trackFocusMeridiemInput]);
   const onMinutesKeyDown = useCallback(e => {
-    var _lastSegmentRef$curre3, _lastSegmentRef$curre4;
-
     const {
       key,
       ctrlKey,
       metaKey
     } = e;
     const minutesStringConvertedToInteger = Number.parseInt(minutes, 10);
-    if (homeEndArrowUpDownSpaceKeys.includes(key)) e.preventDefault();
-    if (homeEndArrowUpDownSpaceKeys.includes(key)) e.stopPropagation();
+    if (['Home', 'End', 'ArrowUp', 'ArrowDown', ' '].includes(key)) e.preventDefault();
+    if (['Home', 'End', 'ArrowUp', 'ArrowDown', ' '].includes(key)) e.stopPropagation();
     if (key === 'Home') onHomeKeyDown();
     if (key === 'End') onEndKeyDown();
 
@@ -141,86 +116,69 @@ 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 = prependStringWithPlaceHolders("".concat(newMinutes), 2);
+      newMinutes = prependStringWithPlaceHolders(`${newMinutes}`, 2);
       handleChangeMinutes(newMinutes, e);
     }
 
     if (!Number.isNaN(minutesStringConvertedToInteger) && key === ' ') {
-      var _meridiemInputRef$cur5, _meridiemInputRef$cur6;
-
-      const newMinutes = prependStringWithPlaceHolders("".concat(minutesStringConvertedToInteger), 2);
+      const newMinutes = prependStringWithPlaceHolders(`${minutesStringConvertedToInteger}`, 2);
       handleChangeMinutes(newMinutes, e); // auto-advance functionality:
-      // if (newMinutes.length === 2) secondsInputRef?.current?.focus?.();
 
-      if (newMinutes.length === 2) meridiemInputRef === null || meridiemInputRef === void 0 ? void 0 : (_meridiemInputRef$cur5 = meridiemInputRef.current) === null || _meridiemInputRef$cur5 === void 0 ? void 0 : (_meridiemInputRef$cur6 = _meridiemInputRef$cur5.focus) === null || _meridiemInputRef$cur6 === void 0 ? void 0 : _meridiemInputRef$cur6.call(_meridiemInputRef$cur5);
+      if (newMinutes.length === 2) trackFocusMeridiemInput();
     } // regressive backspace functionality
 
 
-    if (key === 'Backspace' && (minutes === null || minutes === void 0 ? void 0 : minutes.length) === 0) {
-      var _hourInputRef$current3, _hourInputRef$current4;
-
-      hourInputRef === null || hourInputRef === void 0 ? void 0 : (_hourInputRef$current3 = hourInputRef.current) === null || _hourInputRef$current3 === void 0 ? void 0 : (_hourInputRef$current4 = _hourInputRef$current3.focus) === null || _hourInputRef$current4 === void 0 ? void 0 : _hourInputRef$current4.call(_hourInputRef$current3);
+    if (key === 'Backspace' && minutes?.length === 0) {
+      trackFocusHourInput();
     } // focus last fragment on fill with now
 
 
-    if ((ctrlKey || metaKey) && key === ';') lastSegmentRef === null || lastSegmentRef === void 0 ? void 0 : (_lastSegmentRef$curre3 = lastSegmentRef.current) === null || _lastSegmentRef$curre3 === void 0 ? void 0 : (_lastSegmentRef$curre4 = _lastSegmentRef$curre3.focus) === null || _lastSegmentRef$curre4 === void 0 ? void 0 : _lastSegmentRef$curre4.call(_lastSegmentRef$curre3);
-  }, [minutes, onHomeKeyDown, onEndKeyDown, lastSegmentRef, minutesInterval, handleChangeMinutes, meridiemInputRef, hourInputRef]);
+    if ((ctrlKey || metaKey) && key === ';') trackFocusLastSegment();
+  }, [minutes, onHomeKeyDown, onEndKeyDown, trackFocusLastSegment, minutesInterval, handleChangeMinutes, trackFocusMeridiemInput, trackFocusHourInput]);
   const onMinutesBlur = 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(prependStringWithPlaceHolders(newMinutes, 2), e, {
       isAutomaticFillTrigger: true
     });
   }, [handleChangeMinutes]);
   const onMeridiemFocus = useCallback(() => {
-    setLatestInteractionRegionTimeInputs();
-  }, [setLatestInteractionRegionTimeInputs]);
+    trackFocusMeridiemInput();
+  }, [trackFocusMeridiemInput]);
   const onMeridiemChange = 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) {
-      var _clearButtonRef$curre3, _clearButtonRef$curre4, _pickerButtonRef$curr3, _pickerButtonRef$curr4;
-
-      if (withClearBtn) (_clearButtonRef$curre3 = clearButtonRef.current) === null || _clearButtonRef$curre3 === void 0 ? void 0 : (_clearButtonRef$curre4 = _clearButtonRef$curre3.focus) === null || _clearButtonRef$curre4 === void 0 ? void 0 : _clearButtonRef$curre4.call(_clearButtonRef$curre3);else if (withAnyPicker) pickerButtonRef === null || pickerButtonRef === void 0 ? void 0 : (_pickerButtonRef$curr3 = pickerButtonRef.current) === null || _pickerButtonRef$curr3 === void 0 ? void 0 : (_pickerButtonRef$curr4 = _pickerButtonRef$curr3.focus) === null || _pickerButtonRef$curr4 === void 0 ? void 0 : _pickerButtonRef$curr4.call(_pickerButtonRef$curr3);
+      if (withClearBtn) trackFocusClearBtn();else if (withAnyPicker) trackFocusPicker();
     }
-  }, [meridiem, handleChangeMeridiem, withAnyRightController, withClearBtn, clearButtonRef, withAnyPicker, pickerButtonRef]);
+  }, [meridiem, handleChangeMeridiem, withAnyRightController, withClearBtn, trackFocusClearBtn, withAnyPicker, trackFocusPicker]);
   const onMeridiemKeyDown = useCallback(e => {
-    var _lastSegmentRef$curre5, _lastSegmentRef$curre6;
-
     const {
       key,
       ctrlKey,
       metaKey
     } = e;
-    if (homeEndArrowUpDownKeys.includes(key)) e.preventDefault();
-    if (homeEndArrowUpDownKeys.includes(key)) e.stopPropagation();
+    if (['Home', 'End', 'ArrowUp', 'ArrowDown'].includes(key)) e.preventDefault();
+    if (['Home', 'End', 'ArrowUp', 'ArrowDown'].includes(key)) e.stopPropagation();
     if (key === 'Home') onHomeKeyDown();
     if (key === 'End') onEndKeyDown();
     if (key === 'ArrowUp' && meridiem !== 'AM') handleChangeMeridiem('AM', e);
     if (key === 'ArrowDown' && meridiem !== 'PM') handleChangeMeridiem('PM', e); // regressive backspace functionality
 
     if (key === 'Backspace') {
-      var _minutesInputRef$curr5, _minutesInputRef$curr6;
-
-      if ((meridiem === null || meridiem === void 0 ? void 0 : meridiem.length) === 2) handleChangeMeridiem('', e);else minutesInputRef === null || minutesInputRef === void 0 ? void 0 : (_minutesInputRef$curr5 = minutesInputRef.current) === null || _minutesInputRef$curr5 === void 0 ? void 0 : (_minutesInputRef$curr6 = _minutesInputRef$curr5.focus) === null || _minutesInputRef$curr6 === void 0 ? void 0 : _minutesInputRef$curr6.call(_minutesInputRef$curr5);
+      if (meridiem?.length === 2) handleChangeMeridiem('', e);else trackFocusMinuteInput();
     } // focus last fragment on fill with now
 
 
-    if ((ctrlKey || metaKey) && key === ';') lastSegmentRef === null || lastSegmentRef === void 0 ? void 0 : (_lastSegmentRef$curre5 = lastSegmentRef.current) === null || _lastSegmentRef$curre5 === void 0 ? void 0 : (_lastSegmentRef$curre6 = _lastSegmentRef$curre5.focus) === null || _lastSegmentRef$curre6 === void 0 ? void 0 : _lastSegmentRef$curre6.call(_lastSegmentRef$curre5);
-  }, [onHomeKeyDown, onEndKeyDown, meridiem, handleChangeMeridiem, lastSegmentRef, minutesInputRef]);
+    if ((ctrlKey || metaKey) && key === ';') trackFocusLastSegment();
+  }, [onHomeKeyDown, onEndKeyDown, meridiem, handleChangeMeridiem, trackFocusLastSegment, trackFocusMinuteInput]);
   const onMeridiemBlur = 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/esm/date-time-picker/utils/constants.js

@@ -33,14 +33,8 @@ const announcableCardinalDays = {
   30: 'thirtieth',
   31: 'thirty first'
 };
-const homeEndAllArrowKeys = ['Home', 'End', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'];
-const homeEndKeys = ['Home', 'End'];
-const homeEndArrowUpDownDashSlashesKeys = ['Home', 'End', 'ArrowUp', 'ArrowDown', '-', '/', '\\'];
-const homeEndArrowUpDownSpaceKeys = ['Home', 'End', 'ArrowUp', 'ArrowDown', ' '];
-const homeEndArrowUpDownSemiKeys = ['Home', 'End', 'ArrowUp', 'ArrowDown', ':'];
-const homeEndArrowUpDownKeys = ['Home', 'End', 'ArrowUp', 'ArrowDown'];
 const defaultMetaInfo = {
   isAutomaticFillTrigger: false
 };
 
-export { announcableCardinalDays, defaultMetaInfo, homeEndAllArrowKeys, homeEndArrowUpDownDashSlashesKeys, homeEndArrowUpDownKeys, homeEndArrowUpDownSemiKeys, homeEndArrowUpDownSpaceKeys, homeEndKeys, monthNames, weekDays };
+export { announcableCardinalDays, defaultMetaInfo, monthNames, weekDays };

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

@@ -1,42 +1,33 @@
 import 'core-js/modules/esnext.async-iterator.map.js';
 import 'core-js/modules/esnext.iterator.map.js';
-import 'core-js/modules/web.dom-collections.iterator.js';
 import { createRef } from 'react';
 import { monthNames } from './constants.js';
 import { prependStringWithPlaceHolders, deconstructValuesFromDateString, isIncompleteString } from './stringHelpers.js';
 import { convertToPositiveNumberIfPossible } from './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 = prependStringWithPlaceHolders("".concat(day.getMonth() + 1), 2); // months from 1-12
+  const monthFromDay = prependStringWithPlaceHolders(`${day.getMonth() + 1}`, 2); // months from 1-12
 
-  const dayFromDay = prependStringWithPlaceHolders("".concat(day.getDate()), 2);
-  const yearFromDay = prependStringWithPlaceHolders("".concat(day.getFullYear()), 4);
-  return "".concat(monthFromDay, "/").concat(dayFromDay, "/").concat(yearFromDay);
+  const dayFromDay = prependStringWithPlaceHolders(`${day.getDate()}`, 2);
+  const yearFromDay = 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 = prependStringWithPlaceHolders("".concat(twelveHourFormat), 2);
-  const minutesFromDay = prependStringWithPlaceHolders("".concat(minutesNum), 2);
-  return "".concat(hoursFromDay, ":").concat(minutesFromDay, " ").concat(meridiem);
+  const hoursFromDay = prependStringWithPlaceHolders(`${twelveHourFormat}`, 2);
+  const minutesFromDay = prependStringWithPlaceHolders(`${minutesNum}`, 2);
+  return `${hoursFromDay}:${minutesFromDay} ${meridiem}`;
 };
 const getMonthNameByMonthNumber = monthNumber => 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,
@@ -51,11 +42,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,
@@ -69,8 +56,6 @@ const getDayFromDateString = dateString => {
   return null;
 };
 const isValidDayForTheMonthDateString = dateString => {
-  var _getDayFromDateString, _getDayFromDateString2;
-
   if (isIncompleteString(dateString)) return true;
   const {
     month
@@ -78,7 +63,7 @@ const isValidDayForTheMonthDateString = dateString => {
   const monthInt = 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;
@@ -205,8 +190,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),
@@ -216,7 +199,7 @@ const getFiveBySevenCurrentMonthDaysMatrix = (month, year) => {
     isHidden: false,
     dayBtnRef: /*#__PURE__*/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),
@@ -226,7 +209,7 @@ const getFiveBySevenCurrentMonthDaysMatrix = (month, year) => {
     isHidden: false,
     dayBtnRef: /*#__PURE__*/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/esm/date-time-picker/utils/hooks/useGetStartingFocusedDay.js

@@ -25,50 +25,52 @@ const useGetStartingFocusedDay = () => {
     onCalendarOpenFocusedDay
   } = useContext(ControlledDateTimePickerContext);
   const dayFromInputValues = useGetDayFromDateString();
+  const {
+    month: inputValuesSplitMonth,
+    day: inputValuesSplitDay,
+    year: inputValuesDaySplitYear
+  } = dayFromInputValues ? getDateValuesFromDate(dayFromInputValues) : {
+    month: null,
+    day: null,
+    year: null
+  };
+  const isInputFilledAndValid = inputValuesSplitMonth && inputValuesSplitDay && inputValuesDaySplitYear && isValidDayForTheMonth(inputValuesSplitMonth, inputValuesDaySplitYear, inputValuesSplitDay);
+  const isOnCalendarOpenFocusedDayEmpty = !onCalendarOpenFocusedDay;
+  const shouldFillWithOnCalendarOpenFocusedDay = !isInputFilledAndValid && !isOnCalendarOpenFocusedDayEmpty;
   return useMemo(() => {
-    const startingDay = _objectSpread({}, empty);
+    const startingDay = _objectSpread({}, empty); // if input was filled start focus is the filled value (if it's valid day for the month)
 
-    if (dayFromInputValues) {
-      const {
-        month: inputValuesSplitMonth,
-        day: inputValuesSplitDay,
-        year: inputValuesDaySplitYear
-      } = getDateValuesFromDate(dayFromInputValues);
-      const isInputFilledAndValid = inputValuesSplitMonth && inputValuesSplitDay && inputValuesDaySplitYear && isValidDayForTheMonth(inputValuesSplitMonth, inputValuesDaySplitYear, inputValuesSplitDay);
-      const isOnCalendarOpenFocusedDayEmpty = !onCalendarOpenFocusedDay;
-      const shouldFillWithOnCalendarOpenFocusedDay = !isInputFilledAndValid && !isOnCalendarOpenFocusedDayEmpty; // if input was filled start focus is the filled value (if it's valid day for the month)
 
-      if (isInputFilledAndValid) {
-        startingDay.startFocusedMonth = inputValuesSplitMonth;
-        startingDay.startFocusedDay = inputValuesSplitDay;
-        startingDay.startFocusedYear = inputValuesDaySplitYear;
-        startingDay.startFocusedDate = dayFromInputValues; // if input was not filled (or filled invalid) and there is no onCalendarOpenFocusedDay start focus is not a day
-      } else if (isOnCalendarOpenFocusedDayEmpty) {
-        // if input was not filled and there is onCalendarOpenFocusedDay start focus is onCalendarOpenFocusedDay day
-        return empty;
-      } else if (shouldFillWithOnCalendarOpenFocusedDay) {
-        const {
-          month: focusedDaySplitMonth,
-          day: focusedDaySplitDay,
-          year: focusedDaySplitYear
-        } = deconstructValuesFromDateString(onCalendarOpenFocusedDay);
-        const monthAsInt = convertToPositiveNumberIfPossible(focusedDaySplitMonth);
-        const dayAsInt = convertToPositiveNumberIfPossible(focusedDaySplitDay);
-        const yearAsInt = convertToPositiveNumberIfPossible(focusedDaySplitYear); // if this condition is false, return will be the same as return empty
-        // because startFocusedMonth/Day/Year/Date will be === null
-        // which is the expected result
+    if (isInputFilledAndValid) {
+      startingDay.startFocusedMonth = inputValuesSplitMonth;
+      startingDay.startFocusedDay = inputValuesSplitDay;
+      startingDay.startFocusedYear = inputValuesDaySplitYear;
+      startingDay.startFocusedDate = dayFromInputValues; // if input was not filled (or filled invalid) and there is no onCalendarOpenFocusedDay start focus is not a day
+    } else if (isOnCalendarOpenFocusedDayEmpty) {
+      // if input was not filled and there is onCalendarOpenFocusedDay start focus is onCalendarOpenFocusedDay day
+      return empty;
+    } else if (shouldFillWithOnCalendarOpenFocusedDay) {
+      const {
+        month: focusedDaySplitMonth,
+        day: focusedDaySplitDay,
+        year: focusedDaySplitYear
+      } = deconstructValuesFromDateString(onCalendarOpenFocusedDay);
+      const monthAsInt = convertToPositiveNumberIfPossible(focusedDaySplitMonth);
+      const dayAsInt = convertToPositiveNumberIfPossible(focusedDaySplitDay);
+      const yearAsInt = convertToPositiveNumberIfPossible(focusedDaySplitYear); // if this condition is false, return will be the same as return empty
+      // because startFocusedMonth/Day/Year/Date will be === null
+      // which is the expected result
 
-        if (monthAsInt !== -1 && dayAsInt !== -1 && yearAsInt !== -1 && isValidDayForTheMonth(monthAsInt - 1, yearAsInt, dayAsInt)) {
-          startingDay.startFocusedMonth = monthAsInt;
-          startingDay.startFocusedDay = dayAsInt;
-          startingDay.startFocusedYear = yearAsInt;
-          startingDay.startFocusedDate = new Date(yearAsInt, monthAsInt - 1, dayAsInt);
-        }
+      if (monthAsInt !== -1 && dayAsInt !== -1 && yearAsInt !== -1 && isValidDayForTheMonth(monthAsInt - 1, yearAsInt, dayAsInt)) {
+        startingDay.startFocusedMonth = monthAsInt;
+        startingDay.startFocusedDay = dayAsInt;
+        startingDay.startFocusedYear = yearAsInt;
+        startingDay.startFocusedDate = new Date(yearAsInt, monthAsInt - 1, dayAsInt);
       }
     }
 
     return startingDay;
-  }, [dayFromInputValues, onCalendarOpenFocusedDay]);
+  }, [dayFromInputValues, inputValuesDaySplitYear, inputValuesSplitDay, inputValuesSplitMonth, isInputFilledAndValid, isOnCalendarOpenFocusedDayEmpty, onCalendarOpenFocusedDay, shouldFillWithOnCalendarOpenFocusedDay]);
 };
 
 export { useGetStartingFocusedDay };

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

@@ -3,10 +3,8 @@ import { useEffect } from 'react';
 const useOnClickOutside = (ref, handler) => {
   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/esm/date-time-picker/utils/stringHelpers.js

@@ -1,7 +1,5 @@
 import 'core-js/modules/esnext.async-iterator.map.js';
 import 'core-js/modules/esnext.iterator.map.js';
-import 'core-js/modules/web.dom-collections.iterator.js';
-import 'core-js/modules/es.string.replace.js';
 import { monthNames, announcableCardinalDays } from './constants.js';
 import { convertToPositiveNumberIfPossible } from './numberHelpers.js';
 
@@ -27,13 +25,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;
@@ -79,13 +73,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(' '); // <--['__:__','__']
@@ -131,7 +125,7 @@ const getAriaDayFromDateString = dateString => {
   const dayNum = convertToPositiveNumberIfPossible(dayString);
   const yearNum = convertToPositiveNumberIfPossible(yearString);
   if (monthNum === -1 || dayNum === -1 || yearNum === -1) return '';
-  return "".concat(monthNames[monthNum - 1], " ").concat(announcableCardinalDays[dayNum], " ").concat(yearNum);
+  return `${monthNames[monthNum - 1]} ${announcableCardinalDays[dayNum]} ${yearNum}`;
 };
 
 export { dateTimeToDate, dateTimeToTime, deconstructTimeValues, deconstructValuesFromDateString, deconstructValuesFromTimeString, fillStringWithPlaceHolders, getAriaDayFromDateString, getFormattedDateString, getFormattedTimeString, isEmptyDateStringMask, isEmptyDateTimeStringMask, isEmptyTimeStringMask, isIncompleteString, isValidDateString, isValidTimeString, prependStringWithPlaceHolders };

package/esm/input-group/InputGroup.js

@@ -6,10 +6,10 @@ import 'core-js/modules/esnext.iterator.for-each.js';
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import { useMemo } from 'react';
-import { describe, useValidateTypescriptPropTypes, useGetGlobalAttributes } from '@elliemae/ds-props-helpers';
+import { describe, useValidateTypescriptPropTypes, useGetGlobalAttributes, useGetXstyledProps } from '@elliemae/ds-props-helpers';
 import { StyledContainer, StyledLeftAddon, StyledInput, StyledRightAddon } from './styled.js';
 import { propTypes } from './react-desc-prop-types.js';
-import { InputGroupDataTestIds } from './InputGroupDataTestIds.js';
+import { InputGroupDataTestIds } from './exported-related/data-test-ids.js';
 import { jsxs } from 'react/jsx-runtime';
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -24,6 +24,7 @@ const DSInputGroup = props => {
     rightAddon
   } = props;
   const globals = useGetGlobalAttributes(props);
+  const xstyledProps = useGetXstyledProps(props);
   const cols = useMemo(() => {
     if (leftAddon && rightAddon) {
       return ['max-content', 'auto', 'max-content'];
@@ -39,10 +40,10 @@ const DSInputGroup = props => {
 
     return ['auto'];
   }, [leftAddon, rightAddon]);
-  return /*#__PURE__*/jsxs(StyledContainer, _objectSpread(_objectSpread({
+  return /*#__PURE__*/jsxs(StyledContainer, _objectSpread(_objectSpread(_objectSpread({
     cols: cols,
     "data-testid": InputGroupDataTestIds.CONTAINER
-  }, globals), {}, {
+  }, globals), xstyledProps), {}, {
     children: [leftAddon && /*#__PURE__*/_jsx(StyledLeftAddon, {
       "data-testid": InputGroupDataTestIds.LEFTADDON
     }, void 0, leftAddon), /*#__PURE__*/_jsx(StyledInput, {

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

@@ -0,0 +1,8 @@
+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'
+};
+
+export { InputGroupDataTestIds };

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

@@ -0,0 +1,2 @@
+export { InputGroupDataTestIds } from './data-test-ids.js';
+export { DSInputGroupName, DSInputGroupSlots } from './theming.js';

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

@@ -0,0 +1,8 @@
+const DSInputGroupName = 'ds-input-group';
+const DSInputGroupSlots = {
+  CONTAINER: 'root',
+  LEFT_ADDON: 'leftaddon',
+  RIGHT_ADDON: 'rightaddon'
+};
+
+export { DSInputGroupName, DSInputGroupSlots };