@elliemae/ds-controlled-form 2.4.2-rc.11 → 2.4.2-rc.14

package/esm/date-time-picker/config/useValidateProps.js

@@ -1,43 +1,74 @@
+import 'core-js/modules/es.error.cause.js';
 import { deconstructValuesFromDateString, isValidDateString, dateTimeToDate, isValidTimeString, dateTimeToTime } from '../utils/stringHelpers.js';
 import { convertToPositiveNumberIfPossible } from '../utils/numberHelpers.js';
 import { getIsDateTime, getIsDate, getIsTime } from '../utils/typeGuards.js';
 
-/* eslint-disable max-statements */
-const PREPEND = "ControlledDateTimePicker:\n  Invalid configuration detected::\n  \n    ";
+const PREPEND = `ControlledDateTimePicker:
+  Invalid configuration detected::
+  
+    `;
 const NOT_A_DEFECT = ''; // '\n\n\t\tThis is not a defect, please check\n\n\t\thttps://qa.dimsum.rd.elliemae.io/?path=/story/components-desktop-components-d-controlledform-date-time-picker--basic\n\n\t\tfor instructions on how to use the component correctly\n\n';
 
-const INLINE_RECEIVED_PREPEND = "\n\n    Received:";
+const INLINE_RECEIVED_PREPEND = `
+
+    Received:`;
 
 const throwInvalidDateTimeError = invalidValue => {
-  throw new Error("".concat(PREPEND, "the \"dateTime\" you are providing is not respecting the format it must respect.").concat(INLINE_RECEIVED_PREPEND).concat(invalidValue, "(").concat(typeof invalidValue, ")").concat(NOT_A_DEFECT));
+  throw new Error(`${PREPEND}the "dateTime" you are providing is not respecting the format it must respect.${INLINE_RECEIVED_PREPEND}${invalidValue}(${typeof invalidValue})${NOT_A_DEFECT}`);
 };
 
 const throwInvalidDaterror = invalidValue => {
-  throw new Error("".concat(PREPEND, "the \"date\" you are providing is not respecting the format it must respect.").concat(INLINE_RECEIVED_PREPEND).concat(invalidValue, "(").concat(typeof invalidValue, ")").concat(NOT_A_DEFECT));
+  throw new Error(`${PREPEND}the "date" you are providing is not respecting the format it must respect.${INLINE_RECEIVED_PREPEND}${invalidValue}(${typeof invalidValue})${NOT_A_DEFECT}`);
 };
 
 const throwInvalidTimerror = invalidValue => {
-  throw new Error("".concat(PREPEND, "the \"time\" you are providing is not respecting the format it must respect.").concat(INLINE_RECEIVED_PREPEND).concat(invalidValue, "(").concat(typeof invalidValue, ")").concat(NOT_A_DEFECT));
+  throw new Error(`${PREPEND}the "time" you are providing is not respecting the format it must respect.${INLINE_RECEIVED_PREPEND}${invalidValue}(${typeof invalidValue})${NOT_A_DEFECT}`);
 };
 
 const throwUncontrolledDateError = (date, onDateChange) => {
-  throw new Error("".concat(PREPEND, "you are trying to use a date selector while providing a non-string \"date\" or providing a non-function to \"onDateChange\"\n  the full-controlled pattern must be used\n\tcheck https://reactjs.org/docs/forms.html#controlled-components for more informations\n\n  Received:\n    date: ").concat(date, "(").concat(typeof date, ")\n    onDateChange: (").concat(typeof onDateChange, ")\n  ").concat(NOT_A_DEFECT));
+  throw new Error(`${PREPEND}you are trying to use a date selector while providing a non-string "date" or providing a non-function to "onDateChange"
+  the full-controlled pattern must be used\n\tcheck https://reactjs.org/docs/forms.html#controlled-components for more informations
+
+  Received:
+    date: ${date}(${typeof date})
+    onDateChange: (${typeof onDateChange})
+  ${NOT_A_DEFECT}`);
 };
 
 const throwUncontrolledTimeError = (time, onTimeChange) => {
-  throw new Error("".concat(PREPEND, "you are trying to use a time selector while providing a non-string \"time\" or providing a non-function to \"onTimeChange\"\n  the full-controlled pattern must be used\n\tcheck https://reactjs.org/docs/forms.html#controlled-components for more informations\n\n  Received:\n    time: ").concat(time, "(").concat(typeof time, ")\n    onTimeChange: (").concat(typeof onTimeChange, ")\n  ").concat(NOT_A_DEFECT));
+  throw new Error(`${PREPEND}you are trying to use a time selector while providing a non-string "time" or providing a non-function to "onTimeChange"
+  the full-controlled pattern must be used\n\tcheck https://reactjs.org/docs/forms.html#controlled-components for more informations
+
+  Received:
+    time: ${time}(${typeof time})
+    onTimeChange: (${typeof onTimeChange})
+  ${NOT_A_DEFECT}`);
 };
 
 const throwUncontrolledDateTimeError = (dateTime, onDateTimeChange) => {
-  throw new Error("".concat(PREPEND, "you are trying to use a date-time selector while providing a non-string \"dateTime\" or providing a non-function to \"onDateTimeChange\"\n  the full-controlled pattern must be used\n\tcheck https://reactjs.org/docs/forms.html#controlled-components for more informations\n\n  Received:\n    dateTime: ").concat(dateTime, "(").concat(typeof dateTime, ")\n    onDateTimeChange: (").concat(typeof onDateTimeChange, ")\n  ").concat(NOT_A_DEFECT));
+  throw new Error(`${PREPEND}you are trying to use a date-time selector while providing a non-string "dateTime" or providing a non-function to "onDateTimeChange"
+  the full-controlled pattern must be used\n\tcheck https://reactjs.org/docs/forms.html#controlled-components for more informations
+
+  Received:
+    dateTime: ${dateTime}(${typeof dateTime})
+    onDateTimeChange: (${typeof onDateTimeChange})
+  ${NOT_A_DEFECT}`);
 };
 
 const throwInvalidEmptyPickerStartingMonthError = emptyPickerStartingMonth => {
-  throw new Error("".concat(PREPEND, "the provided emptyPickerStartingMonth props is invalid. please provide a string with the format mm/__/yyyy, (mm 01~12, yyyy 0001~9999) \n\n  Received:\n    ").concat(emptyPickerStartingMonth, "(").concat(typeof emptyPickerStartingMonth, ")\n  ").concat(NOT_A_DEFECT));
+  throw new Error(`${PREPEND}the provided emptyPickerStartingMonth props is invalid. please provide a string with the format mm/__/yyyy, (mm 01~12, yyyy 0001~9999) 
+
+  Received:
+    ${emptyPickerStartingMonth}(${typeof emptyPickerStartingMonth})
+  ${NOT_A_DEFECT}`);
 };
 
 const throwInvalidOnCalendarOpenFocusedDayError = onCalendarOpenFocusedDay => {
-  throw new Error("".concat(PREPEND, "the provided onCalendarOpenFocusedDay props is invalid. please provide a string with the format mm/dd/yyyy, (mm 01~12, dd 01~31, yyyy 0001~9999) \n\n  Received:\n    ").concat(onCalendarOpenFocusedDay, "(").concat(typeof onCalendarOpenFocusedDay, ")\n  ").concat(NOT_A_DEFECT));
+  throw new Error(`${PREPEND}the provided onCalendarOpenFocusedDay props is invalid. please provide a string with the format mm/dd/yyyy, (mm 01~12, dd 01~31, yyyy 0001~9999) 
+
+  Received:
+    ${onCalendarOpenFocusedDay}(${typeof onCalendarOpenFocusedDay})
+  ${NOT_A_DEFECT}`);
 };
 
 const useValidateProps = props => {

package/esm/date-time-picker/parts/ClearButton/ClearButton.js

@@ -38,10 +38,8 @@ const ClearButton = () => {
     size: BUTTON_SIZES.M,
     "data-testid": ControlledDateTimePickerDatatestid.CLEAR_BUTTON,
     innerRef: DomElem => {
-      var _DomElem$focus;
-
       clearButtonRef.current = DomElem;
-      if (latestInteractionRegion === 'clear-btn' && currFocusDescriber === 'clear-btn') DomElem === null || DomElem === void 0 ? void 0 : (_DomElem$focus = DomElem.focus) === null || _DomElem$focus === void 0 ? void 0 : _DomElem$focus.call(DomElem);
+      if (latestInteractionRegion === 'clear-btn' && currFocusDescriber === 'clear-btn') DomElem?.focus?.();
     },
     onClick: onClearClick,
     onKeyDown: onClearButtonKeyDown

package/esm/date-time-picker/parts/DateInputs/DDInput.js

@@ -25,9 +25,7 @@ const DDInput = /*#__PURE__*/React.memo(_ref => {
     isFocused
   } = _ref;
   const validateOnChange = useCallback(e => {
-    var _e$target;
-
-    if (isInvalidDay(e === null || e === void 0 ? void 0 : (_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.value)) {
+    if (isInvalidDay(e?.target?.value)) {
       e.preventDefault();
       return;
     }
@@ -41,13 +39,11 @@ const DDInput = /*#__PURE__*/React.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": "day input field, ".concat(ariaCurrentValueForInputs),
+    "aria-label": `day input field, ${ariaCurrentValueForInputs}`,
     "data-testid": ControlledDateTimePickerDatatestid.DATE_INPUTS.DAY,
     disabled: disabled,
     "aria-disabled": disabled

package/esm/date-time-picker/parts/DateInputs/MMInput.js

@@ -26,9 +26,7 @@ const MMInput = /*#__PURE__*/React.memo(_ref => {
     isFocused
   } = _ref;
   const validateOnChange = useCallback(e => {
-    var _e$target;
-
-    if (isInvalidMonth(e === null || e === void 0 ? void 0 : (_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.value)) {
+    if (isInvalidMonth(e?.target?.value)) {
       e.preventDefault();
       return;
     }
@@ -43,13 +41,11 @@ const MMInput = /*#__PURE__*/React.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": "month input field, ".concat(ariaCurrentValueForInputs),
+    "aria-label": `month input field, ${ariaCurrentValueForInputs}`,
     "data-testid": ControlledDateTimePickerDatatestid.DATE_INPUTS.MONTH,
     disabled: disabled,
     "aria-disabled": disabled

package/esm/date-time-picker/parts/DateInputs/YYYYInput.js

@@ -25,9 +25,7 @@ const YYYYInput = /*#__PURE__*/React.memo(_ref => {
     isFocused
   } = _ref;
   const validateOnChange = useCallback(e => {
-    var _e$target;
-
-    if (isInvalidYear(e === null || e === void 0 ? void 0 : (_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.value)) {
+    if (isInvalidYear(e?.target?.value)) {
       e.preventDefault();
       return;
     }
@@ -41,13 +39,11 @@ const YYYYInput = /*#__PURE__*/React.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": "year input field, ".concat(ariaCurrentValueForInputs),
+    "aria-label": `year input field, ${ariaCurrentValueForInputs}`,
     "data-testid": ControlledDateTimePickerDatatestid.DATE_INPUTS.YEAR,
     disabled: disabled,
     "aria-disabled": disabled

package/esm/date-time-picker/parts/DateInputs/useDateInputs.js

@@ -67,9 +67,7 @@ const useDateInputs = () => {
     trackFocusMonthInput();
   }, [trackFocusMonthInput]);
   const onMonthChange = useCallback(e => {
-    var _e$target;
-
-    let newMonth = e === null || e === void 0 ? void 0 : (_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.value; // converts months 2~9 to 02~09
+    let newMonth = e?.target?.value; // converts months 2~9 to 02~09
 
     if (Number.parseInt(newMonth, 10) > 1) newMonth = prependStringWithPlaceHolders(newMonth, 2);
     handleChangeMonth(newMonth, e); // auto-advance functionality:
@@ -92,12 +90,12 @@ const useDateInputs = () => {
       const monthInteger = Number.isNaN(monthStringConvertedToInteger) ? 0 : monthStringConvertedToInteger;
       let newMonth;
       if (key === 'ArrowUp') newMonth = monthInteger + 1 <= 12 ? monthInteger + 1 : monthInteger;else newMonth = monthInteger - 1 > 0 ? monthInteger - 1 : 1;
-      newMonth = prependStringWithPlaceHolders("".concat(newMonth), 2);
+      newMonth = prependStringWithPlaceHolders(`${newMonth}`, 2);
       handleChangeMonth(newMonth, e);
     }
 
     if (!Number.isNaN(monthStringConvertedToInteger) && (key === '-' || key === '/' || key === '\\')) {
-      const newMonth = prependStringWithPlaceHolders("".concat(monthStringConvertedToInteger), 2);
+      const newMonth = prependStringWithPlaceHolders(`${monthStringConvertedToInteger}`, 2);
       handleChangeMonth(newMonth, e); // auto-advance functionality:
 
       if (newMonth.length === 2) trackFocusDayInput();
@@ -107,9 +105,7 @@ const useDateInputs = () => {
     if ((ctrlKey || metaKey) && key === ';') trackFocusLastSegment();
   }, [month, onHomeKeyDown, onEndKeyDown, trackFocusLastSegment, trackFocusDayInput, handleChangeMonth]);
   const onMonthBlur = useCallback(e => {
-    var _e$target2;
-
-    const newMonth = e === null || e === void 0 ? void 0 : (_e$target2 = e.target) === null || _e$target2 === void 0 ? void 0 : _e$target2.value;
+    const newMonth = e?.target?.value;
     if (newMonth === '0') handleChangeMonth('01', e, {
       isAutomaticFillTrigger: true
     });else if (newMonth.length > 0 && newMonth.length < 2) handleChangeMonth(prependStringWithPlaceHolders(newMonth, 2), e, {
@@ -135,9 +131,7 @@ const useDateInputs = () => {
     trackFocusDayInput();
   }, [trackFocusDayInput]);
   const onDayChange = useCallback(e => {
-    var _e$target3;
-
-    let newDay = e === null || e === void 0 ? void 0 : (_e$target3 = e.target) === null || _e$target3 === void 0 ? void 0 : _e$target3.value; // converts days 4~9 to 04~09
+    let newDay = e?.target?.value; // converts days 4~9 to 04~09
 
     if (Number.parseInt(newDay, 10) > 3) newDay = prependStringWithPlaceHolders(newDay, 2);
     handleChangeDay(newDay, e); // auto-advance functionality:
@@ -160,19 +154,19 @@ const useDateInputs = () => {
       const dayInteger = Number.isNaN(dayStringConvertedToInteger) ? 0 : dayStringConvertedToInteger;
       let newDay;
       if (key === 'ArrowUp') newDay = dayInteger + 1 <= 31 ? dayInteger + 1 : dayInteger;else newDay = dayInteger - 1 > 0 ? dayInteger - 1 : 1;
-      newDay = prependStringWithPlaceHolders("".concat(newDay), 2);
+      newDay = prependStringWithPlaceHolders(`${newDay}`, 2);
       handleChangeDay(newDay, e);
     }
 
     if (!Number.isNaN(dayStringConvertedToInteger) && (key === '-' || key === '/' || key === '\\')) {
-      const newDay = prependStringWithPlaceHolders("".concat(dayStringConvertedToInteger), 2);
+      const newDay = prependStringWithPlaceHolders(`${dayStringConvertedToInteger}`, 2);
       handleChangeDay(newDay, e); // auto-advance functionality:
 
       if (newDay.length === 2) trackFocusYearInput();
     } // regressive backspace functionality
 
 
-    if (key === 'Backspace' && (day === null || day === void 0 ? void 0 : day.length) === 0) {
+    if (key === 'Backspace' && day?.length === 0) {
       trackFocusMonthInput();
     } // focus last fragment on fill with now
 
@@ -180,9 +174,7 @@ const useDateInputs = () => {
     if ((ctrlKey || metaKey) && key === ';') trackFocusLastSegment();
   }, [day, onHomeKeyDown, onEndKeyDown, trackFocusLastSegment, handleChangeDay, trackFocusYearInput, trackFocusMonthInput]);
   const onDayBlur = useCallback(e => {
-    var _e$target4;
-
-    const newDay = e === null || e === void 0 ? void 0 : (_e$target4 = e.target) === null || _e$target4 === void 0 ? void 0 : _e$target4.value;
+    const newDay = e?.target?.value;
     if (newDay === '0') handleChangeDay('01', e, {
       isAutomaticFillTrigger: true
     });else if (newDay.length > 0 && newDay.length < 2) handleChangeDay(prependStringWithPlaceHolders(newDay, 2), e, {
@@ -208,9 +200,7 @@ const useDateInputs = () => {
     trackFocusYearInput();
   }, [trackFocusYearInput]);
   const onYearChange = useCallback(e => {
-    var _e$target5;
-
-    const newYear = e === null || e === void 0 ? void 0 : (_e$target5 = e.target) === null || _e$target5 === void 0 ? void 0 : _e$target5.value;
+    const newYear = e?.target?.value;
     handleChangeYear(newYear, e); // auto-advance functionality:
 
     if (newYear.length === 4) {
@@ -229,12 +219,12 @@ const useDateInputs = () => {
 
     const yearStringConvertedToInteger = Number.parseInt(year, 10);
     const yearInteger = Number.isNaN(yearStringConvertedToInteger) ? 0 : yearStringConvertedToInteger;
-    let newYear = yearInteger !== 0 ? fillStringWithPlaceHolders("".concat(yearInteger), 4, '0') : '';
+    let newYear = yearInteger !== 0 ? fillStringWithPlaceHolders(`${yearInteger}`, 4, '0') : '';
 
     if (key === 'ArrowUp' || key === 'ArrowDown') {
       let newYearInteger;
       if (key === 'ArrowUp') newYearInteger = yearInteger + 1 <= 9999 ? yearInteger + 1 : yearInteger;else newYearInteger = yearInteger - 1 > 0 ? yearInteger - 1 : 1;
-      newYear = prependStringWithPlaceHolders("".concat(newYearInteger), 4);
+      newYear = prependStringWithPlaceHolders(`${newYearInteger}`, 4);
     }
 
     const isAutomaticFillTrigger = newYear !== year && ['Tab', ' '].includes(key);
@@ -267,7 +257,7 @@ const useDateInputs = () => {
     /* ********** regressive backspace logic ********** */
 
 
-    if (key === 'Backspace' && (year === null || year === void 0 ? void 0 : year.length) === 0) {
+    if (key === 'Backspace' && year?.length === 0) {
       trackFocusDayInput();
     } // focus last fragment on fill with now
 

package/esm/date-time-picker/parts/Pickers/Calendar/CalendarDaysList.js

@@ -19,7 +19,7 @@ const CalendarDaysList = /*#__PURE__*/React.memo(_ref => {
     children: [invisibleFirstDay ? /*#__PURE__*/_jsx(Day, {
       metaDay: invisibleFirstDay,
       isInvisible: true
-    }, "ds-calendar-".concat(invisibleFirstDay.day.toString())) : null, daysMatrixByWeekday.map((week, i) => /*#__PURE__*/_jsx(StyledWeekDaysListWrapper, {
+    }, `ds-calendar-${invisibleFirstDay.day.toString()}`) : null, daysMatrixByWeekday.map((week, i) => /*#__PURE__*/_jsx(StyledWeekDaysListWrapper, {
       role: "row",
       "aria-rowindex": i + 1,
       cols: ['32px', '32px', '32px', '32px', '32px', '32px', '32px'],
@@ -28,13 +28,13 @@ const CalendarDaysList = /*#__PURE__*/React.memo(_ref => {
       px: "2px",
       justifyContent: "space-between",
       alignItems: "center"
-    }, "ds-calendar-week-".concat(week[0].day.toString(), "-").concat(week[6].day.toString()), week.map((metaDay, z) => /*#__PURE__*/_jsx(Day, {
+    }, `ds-calendar-week-${week[0].day.toString()}-${week[6].day.toString()}`, week.map((metaDay, z) => /*#__PURE__*/_jsx(Day, {
       metaDay: metaDay,
       colIndex: z + 1
-    }, "ds-calendar-".concat(metaDay.day.toString()))))), invisibleLastDay ? /*#__PURE__*/_jsx(Day, {
+    }, `ds-calendar-${metaDay.day.toString()}`)))), invisibleLastDay ? /*#__PURE__*/_jsx(Day, {
       metaDay: invisibleLastDay,
       isInvisible: true
-    }, "ds-calendar-".concat(invisibleLastDay.day.toString())) : null]
+    }, `ds-calendar-${invisibleLastDay.day.toString()}`) : null]
   });
 });
 

package/esm/date-time-picker/parts/Pickers/Calendar/CalendarHead.js

@@ -15,8 +15,8 @@ const useGetFormattedCurrentDate = () => {
     currentMonth,
     currentYear
   } = useContext(CalendarContext);
-  const monthString = currentMonth >= 0 && currentMonth <= 11 ? "".concat(getMonthNameByMonthNumber(currentMonth), " ") : '';
-  return useMemo(() => "".concat(monthString).concat(currentYear), [monthString, currentYear]);
+  const monthString = currentMonth >= 0 && currentMonth <= 11 ? `${getMonthNameByMonthNumber(currentMonth)} ` : '';
+  return useMemo(() => `${monthString}${currentYear}`, [monthString, currentYear]);
 };
 
 const CalendarHead = () => {
@@ -46,28 +46,20 @@ const CalendarHead = () => {
     currFocusDescriber
   } = useContext(ControlledDateTimePickerContext);
   const handlePrevYearRef = useCallback(ButtonDomNode => {
-    var _ButtonDomNode$focus;
-
     prevYearBtnRef.current = ButtonDomNode;
-    if (latestInteractionRegion === 'calendar-head' && currFocusDescriber === 'calendar-prev-year') ButtonDomNode === null || ButtonDomNode === void 0 ? void 0 : (_ButtonDomNode$focus = ButtonDomNode.focus) === null || _ButtonDomNode$focus === void 0 ? void 0 : _ButtonDomNode$focus.call(ButtonDomNode);
+    if (latestInteractionRegion === 'calendar-head' && currFocusDescriber === 'calendar-prev-year') ButtonDomNode?.focus?.();
   }, [currFocusDescriber, latestInteractionRegion, prevYearBtnRef]);
   const handlePrevMonthRef = useCallback(ButtonDomNode => {
-    var _ButtonDomNode$focus2;
-
     prevMonthBtnRef.current = ButtonDomNode;
-    if (latestInteractionRegion === 'calendar-head' && currFocusDescriber === 'calendar-prev-month') ButtonDomNode === null || ButtonDomNode === void 0 ? void 0 : (_ButtonDomNode$focus2 = ButtonDomNode.focus) === null || _ButtonDomNode$focus2 === void 0 ? void 0 : _ButtonDomNode$focus2.call(ButtonDomNode);
+    if (latestInteractionRegion === 'calendar-head' && currFocusDescriber === 'calendar-prev-month') ButtonDomNode?.focus?.();
   }, [currFocusDescriber, latestInteractionRegion, prevMonthBtnRef]);
   const handleNextMonthRef = useCallback(ButtonDomNode => {
-    var _ButtonDomNode$focus3;
-
     nextMonthBtnRef.current = ButtonDomNode;
-    if (latestInteractionRegion === 'calendar-head' && currFocusDescriber === 'calendar-next-month') ButtonDomNode === null || ButtonDomNode === void 0 ? void 0 : (_ButtonDomNode$focus3 = ButtonDomNode.focus) === null || _ButtonDomNode$focus3 === void 0 ? void 0 : _ButtonDomNode$focus3.call(ButtonDomNode);
+    if (latestInteractionRegion === 'calendar-head' && currFocusDescriber === 'calendar-next-month') ButtonDomNode?.focus?.();
   }, [currFocusDescriber, latestInteractionRegion, nextMonthBtnRef]);
   const handleNextYearRef = useCallback(ButtonDomNode => {
-    var _ButtonDomNode$focus4;
-
     nextYearBtnRef.current = ButtonDomNode;
-    if (latestInteractionRegion === 'calendar-head' && currFocusDescriber === 'calendar-next-year') ButtonDomNode === null || ButtonDomNode === void 0 ? void 0 : (_ButtonDomNode$focus4 = ButtonDomNode.focus) === null || _ButtonDomNode$focus4 === void 0 ? void 0 : _ButtonDomNode$focus4.call(ButtonDomNode);
+    if (latestInteractionRegion === 'calendar-head' && currFocusDescriber === 'calendar-next-year') ButtonDomNode?.focus?.();
   }, [currFocusDescriber, latestInteractionRegion, nextYearBtnRef]);
   return /*#__PURE__*/_jsx(StyledHeader, {}, void 0, /*#__PURE__*/_jsx(StyledHeaderButton, {
     "aria-label": "previous year",

package/esm/date-time-picker/parts/Pickers/Calendar/CalendarIconTrigger.js

@@ -24,7 +24,7 @@ const CalendarIconTrigger = () => {
     ariaCurrentValueForInputs
   } = useContext(ControlledDateTimePickerContext);
   return useMemo(() => /*#__PURE__*/_jsx(StyledIconTriggerButton, {
-    "aria-label": "date picker context menu trigger, ".concat(ariaCurrentValueForInputs),
+    "aria-label": `date picker context menu trigger, ${ariaCurrentValueForInputs}`,
     buttonType: "icon",
     size: BUTTON_SIZES.M,
     innerRef: handleSetTriggerRef,

package/esm/date-time-picker/parts/Pickers/Calendar/Day.js

@@ -58,7 +58,7 @@ const Day = _ref => {
     handleFocusMetaDayByDay,
     closeCalendar
   } = useContext(CalendarContext);
-  const isFocusedMetaDay = focusedDay !== null && focusedDay !== void 0 && focusedDay.day ? compareTwoDatesDayEquality(metaDay === null || metaDay === void 0 ? void 0 : metaDay.day, focusedDay === null || focusedDay === void 0 ? void 0 : focusedDay.day) : false;
+  const isFocusedMetaDay = focusedDay?.day ? compareTwoDatesDayEquality(metaDay?.day, focusedDay?.day) : false;
   const isSelected = useMemo(() => {
     const selectedDate = getDayFromDateString(dateStringFromProps);
     return selectedDate ? isSameDateMoment(day, selectedDate) : false;
@@ -84,9 +84,9 @@ const Day = _ref => {
         day: dayNumber,
         year
       } = getDateValuesFromDate(day);
-      appOnMonthChange("".concat(month + 1), e, metaInfo);
-      if (dayNumber) appOnDayChange("".concat(dayNumber), e, metaInfo);
-      appOnYearChange("".concat(year), e, metaInfo);
+      appOnMonthChange(`${month + 1}`, e, metaInfo);
+      if (dayNumber) appOnDayChange(`${dayNumber}`, e, metaInfo);
+      appOnYearChange(`${year}`, e, metaInfo);
       handleChangeComposedDateString(newDateString, metaInfo);
       trackFocusCalendarMetafocusedDay();
       if (!isWithTimeWheelToo && !preventCloseOnSelection) closeCalendar();
@@ -94,16 +94,14 @@ const Day = _ref => {
   }, [handleFocusMetaDayByDay, day, isDisabled, isOutOfRange, appOnMonthChange, appOnDayChange, appOnYearChange, handleChangeComposedDateString, trackFocusCalendarMetafocusedDay, isWithTimeWheelToo, preventCloseOnSelection, closeCalendar]);
   const handleInnerRef = useCallback(ButtonDomNode => {
     window.requestAnimationFrame(() => {
-      var _ButtonDomNode$focus;
-
       dayBtnRef.current = ButtonDomNode;
-      if (isFocused) ButtonDomNode === null || ButtonDomNode === void 0 ? void 0 : (_ButtonDomNode$focus = ButtonDomNode.focus) === null || _ButtonDomNode$focus === void 0 ? void 0 : _ButtonDomNode$focus.call(ButtonDomNode);
+      if (isFocused) ButtonDomNode?.focus?.();
     });
   }, [dayBtnRef, isFocused]);
   const handleOnDayFocus = useCallback(() => {
     trackFocusCalendarMetafocusedDay('calendar-days');
   }, [trackFocusCalendarMetafocusedDay]);
-  const dayClassModifiers = useMemo(() => "dayWrapper ".concat(isSelected ? 'selectedDay ' : '').concat(isDisabled ? 'disabledDay ' : '').concat(isOutOfRange ? 'outOfRangeDay ' : '').concat(isFocused ? 'focusedDay ' : '').concat(isStartRangeDay ? 'startRangeDay ' : '').concat(isDayInRange ? 'inRangeDay ' : '').concat(isEndRangeDay ? 'endRangeDay ' : '').concat(isCurrMonthDay ? '' : 'notCurrentMonth'), [isSelected, isDisabled, isOutOfRange, isFocused, isStartRangeDay, isDayInRange, isEndRangeDay, isCurrMonthDay]);
+  const dayClassModifiers = useMemo(() => `dayWrapper ${isSelected ? 'selectedDay ' : ''}${isDisabled ? 'disabledDay ' : ''}${isOutOfRange ? 'outOfRangeDay ' : ''}${isFocused ? 'focusedDay ' : ''}${isStartRangeDay ? 'startRangeDay ' : ''}${isDayInRange ? 'inRangeDay ' : ''}${isEndRangeDay ? 'endRangeDay ' : ''}${isCurrMonthDay ? '' : 'notCurrentMonth'}`, [isSelected, isDisabled, isOutOfRange, isFocused, isStartRangeDay, isDayInRange, isEndRangeDay, isCurrMonthDay]);
   let dataTestid = ControlledDateTimePickerDatatestid.CALENDAR.DAY;
   if (isSelected) dataTestid = ControlledDateTimePickerDatatestid.CALENDAR.SELECTED_DAY;
   if (isFocused) dataTestid = ControlledDateTimePickerDatatestid.CALENDAR.FOCUSED_DAY;
@@ -119,7 +117,7 @@ const Day = _ref => {
     'aria-colindex': colIndex
   }), {}, {
     children: /*#__PURE__*/_jsx(StyledDayBtn, {
-      "aria-label": "".concat(getAriaDayFromDateString(dayAsString), ", ").concat(weekDays[metaDay.day.getDay()]),
+      "aria-label": `${getAriaDayFromDateString(dayAsString)}, ${weekDays[metaDay.day.getDay()]}`,
       "aria-disabled": isOutOfRange || isDisabled,
       "aria-hidden": !!isInvisible,
       buttonType: "raw",
@@ -134,7 +132,7 @@ const Day = _ref => {
       tabIndex: isSelected ? 0 : -1,
       "data-isfocused": isFocused,
       "data-testid": dataTestid
-    }, void 0, "".concat(day.getDate()))
+    }, void 0, `${day.getDate()}`)
   }));
 };
 

package/esm/date-time-picker/parts/Pickers/Calendar/Styleds.js

@@ -1,46 +1,76 @@
-import _taggedTemplateLiteral from '@babel/runtime/helpers/esm/taggedTemplateLiteral';
 import styled from 'styled-components';
 import { css } from '@elliemae/ds-system';
 import { Grid } from '@elliemae/ds-grid';
 import { DSButtonV2 } from '@elliemae/ds-button';
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
-const diagonalLine = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  &:before {\n    position: absolute;\n    content: '';\n    top: 48%;\n    left: -2px;\n    height: 1px;\n    width: calc(100% + 4px);\n    transform: rotate(45deg);\n    background-color: ", ";\n  }\n"])), _ref => {
+/* eslint-disable max-lines */
+const diagonalLine = css`
+  &:before {
+    position: absolute;
+    content: '';
+    top: 48%;
+    left: -2px;
+    height: 1px;
+    width: calc(100% + 4px);
+    transform: rotate(45deg);
+    background-color: ${_ref => {
   let {
     theme
   } = _ref;
   return theme.colors.neutral[500];
-});
-const focusBorder = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  &:after {\n    position: absolute;\n    content: '';\n    top: -4px;\n    left: -4px;\n    width: calc(100% + 8px);\n    height: calc(100% + 8px);\n    border-radius: 50%;\n  }\n"])));
+}};
+  }
+`;
+const focusBorder = css`
+  &:after {
+    position: absolute;
+    content: '';
+    top: -4px;
+    left: -4px;
+    width: calc(100% + 8px);
+    height: calc(100% + 8px);
+    border-radius: 50%;
+  }
+`;
 const backgroundDateRange = {
-  inRange: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    background-color: ", ";\n    box-shadow: 4px 0 0 0 ", ";\n  "])), _ref2 => {
+  inRange: css`
+    background-color: ${_ref2 => {
     let {
       theme
     } = _ref2;
     return theme.colors.brand[200];
-  }, _ref3 => {
+  }};
+    box-shadow: 4px 0 0 0 ${_ref3 => {
     let {
       theme
     } = _ref3;
     return theme.colors.brand[200];
-  }),
-  startRange: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    background-color: ", ";\n    border-radius: 50% 0 0 50%;\n    box-shadow: 4px 0 0 0 ", ";\n  "])), _ref4 => {
+  }};
+  `,
+  startRange: css`
+    background-color: ${_ref4 => {
     let {
       theme
     } = _ref4;
     return theme.colors.brand[200];
-  }, _ref5 => {
+  }};
+    border-radius: 50% 0 0 50%;
+    box-shadow: 4px 0 0 0 ${_ref5 => {
     let {
       theme
     } = _ref5;
     return theme.colors.brand[200];
-  }),
-  endRange: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    background-color: ", ";\n    border-radius: 0 50% 50% 0;\n  "])), _ref6 => {
+  }};
+  `,
+  endRange: css`
+    background-color: ${_ref6 => {
     let {
       theme
     } = _ref6;
     return theme.colors.brand[200];
-  })
+  }};
+    border-radius: 0 50% 50% 0;
+  `
 };
 const StyledIconTriggerButton = /*#__PURE__*/styled(DSButtonV2).withConfig({
   componentId: "sc-1vlmm1g-0"
@@ -130,7 +160,7 @@ const StyledWeekDaysListWrapper = /*#__PURE__*/styled(Grid).withConfig({
     isHeader,
     theme
   } = _ref19;
-  return isHeader ? "background: ".concat(theme.colors.neutral['050']) : '';
+  return isHeader ? `background: ${theme.colors.neutral['050']}` : '';
 }, _ref20 => {
   let {
     isHeader

package/esm/date-time-picker/parts/Pickers/Calendar/useConfigCalendarCTX.js

@@ -4,7 +4,6 @@ import 'core-js/modules/esnext.iterator.filter.js';
 import 'core-js/modules/esnext.async-iterator.for-each.js';
 import 'core-js/modules/esnext.iterator.for-each.js';
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
-import 'core-js/modules/web.dom-collections.iterator.js';
 import { useContext, useState, useCallback, useMemo } from 'react';
 import { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';
 import { useCurrentDisplayedMonthYearLogic } from './useCurrentDisplayedMonthYearLogic.js';

package/esm/date-time-picker/parts/Pickers/Calendar/useCurrentDisplayedMonthYearLogic.js

@@ -1,8 +1,9 @@
-import 'core-js/modules/web.dom-collections.iterator.js';
 import { useState, useEffect, useMemo, createRef, useCallback } from 'react';
 import { useGetMonthYearFromDateStringOrEmptyStartingMonth } from '../../../utils/hooks/useGetMonthYearFromDateStringOrEmptyStartingMonth.js';
 import { getFiveBySevenCurrentMonthDaysMatrix, sumValuesToDate, getDateStringFromDay, sumFromDateValues } from '../../../utils/dateHelpers.js';
 
+/* eslint-disable complexity */
+
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 function sliceIntoChunks(arr, chunkSize) {
   const res = [];

package/esm/date-time-picker/parts/Pickers/Calendar/useFocusLogic.js

@@ -1,4 +1,3 @@
-import 'core-js/modules/web.dom-collections.iterator.js';
 import 'core-js/modules/esnext.async-iterator.find.js';
 import 'core-js/modules/esnext.iterator.constructor.js';
 import 'core-js/modules/esnext.iterator.find.js';

package/esm/date-time-picker/parts/Pickers/Calendar/usePopperTriggerLogic.js

@@ -1,9 +1,9 @@
-import 'core-js/modules/web.dom-collections.iterator.js';
 import { useContext, useState, useCallback, useMemo } from 'react';
 import { usePopper } from 'react-popper';
 import { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';
 import { useOnClickOutside } from '../../../utils/hooks/useOnClickOutside.js';
 
+/* eslint-disable complexity */
 const usePopperTriggerLogic = _ref => {
   let {
     focusLogic,
@@ -59,7 +59,7 @@ const usePopperTriggerLogic = _ref => {
   const handleSetTriggerRef = useCallback(newRef => {
     pickerButtonRef.current = newRef;
     setReferenceElement(newRef);
-    if (latestInteractionRegion === 'picker-icon' && currFocusDescriber === 'date-picker-icon') newRef === null || newRef === void 0 ? void 0 : newRef.focus();
+    if (latestInteractionRegion === 'picker-icon' && currFocusDescriber === 'date-picker-icon') newRef?.focus();
   }, [currFocusDescriber, latestInteractionRegion, pickerButtonRef]);
   const handleMenuWrapperKeyDown = useCallback(e => {
     const {
@@ -72,9 +72,7 @@ const usePopperTriggerLogic = _ref => {
     }
   }, [closeCalendar, trackFocusPicker]);
   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))) closeCalendar();
+    if (e.target instanceof Element && !pickerButtonRef?.current?.contains?.(e?.target)) closeCalendar();
   });
   return useMemo(() => ({
     closeCalendar,

package/esm/date-time-picker/parts/Pickers/CalendarWithTimeWheel/CalendarWithTimeWheelIconTrigger.js

@@ -19,7 +19,7 @@ const CalendarWithTimeWheelIconTrigger = () => {
     disabled
   } = useContext(CalendarWithTimeWheelContext);
   return useMemo(() => /*#__PURE__*/_jsx(StyledIconTriggerButton, {
-    "aria-label": "date time picker context menu trigger, ".concat(ariaCurrentValueForInputs),
+    "aria-label": `date time picker context menu trigger, ${ariaCurrentValueForInputs}`,
     buttonType: "icon",
     type: "button",
     size: BUTTON_SIZES.M,