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

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

@@ -81,7 +81,7 @@ const useChangeHandlers = _ref => {
     appOnTimeChange(appTimeString, metaInfo); // don't do this on useEffect to avoid complete chaos
 
     setTimeString(newTimeString);
-    const newDateTimeString = "".concat(newDateString, " ").concat(newTimeString);
+    const newDateTimeString = `${newDateString} ${newTimeString}`;
 
     const newMetaInfo = _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, metaInfo), getTimeMetaInfo(newTimeString, metaInfo)), getDateMetaInfo(newDateString, metaInfo)), {}, {
       newDateString,
@@ -98,7 +98,7 @@ const useChangeHandlers = _ref => {
     appOnDateChange(appDateString, metaInfo); // don't do this on useEffect to avoid complete chaos
 
     setTempDateString(newDateString);
-    const newDateTimeString = "".concat(newDateString, " ").concat(tempTimeString);
+    const newDateTimeString = `${newDateString} ${tempTimeString}`;
 
     const newMetaInfo = _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, metaInfo), getTimeMetaInfo(tempTimeString, metaInfo)), getDateMetaInfo(newDateString, metaInfo)), {}, {
       newDateString,
@@ -114,7 +114,7 @@ const useChangeHandlers = _ref => {
     appOnTimeChange(appTimeString, metaInfo); // don't do this on useEffect to avoid complete chaos
 
     setTimeString(newTimeString);
-    const newDateTimeString = "".concat(tempDateString, " ").concat(newTimeString);
+    const newDateTimeString = `${tempDateString} ${newTimeString}`;
 
     const newMetaInfo = _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, metaInfo), getTimeMetaInfo(newTimeString, metaInfo)), getDateMetaInfo(tempDateString, metaInfo)), {}, {
       newDateTimeString,

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

@@ -59,7 +59,7 @@ const useControlledDateTimePicker = props => {
     isDateTimeSelector,
     isWithTimeInputs
   } = flags;
-  const ariaCurrentValueForInputs = "current values: ".concat(isWithDateInputs ? "".concat(announcedDateValues) : '').concat(isDateTimeSelector ? ', ' : '').concat(isWithTimeInputs ? "".concat(announcedTimeValues) : '');
+  const ariaCurrentValueForInputs = `current values: ${isWithDateInputs ? `${announcedDateValues}` : ''}${isDateTimeSelector ? ', ' : ''}${isWithTimeInputs ? `${announcedTimeValues}` : ''}`;
   const ctx = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
     props: propsWithDefaults,
     ariaCurrentValueForInputs,

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

@@ -1,6 +1,6 @@
-import 'core-js/modules/web.dom-collections.iterator.js';
 import { useState, useCallback, useMemo } from 'react';
 
+/* eslint-disable max-lines */
 const useFocusTracker = _ref => {
   let {
     DOMRefs,

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

@@ -34,8 +34,8 @@ const useGetDestructuredDateValues = _ref => {
   const yearNum = convertToPositiveNumberIfPossible(year);
   const announcedMonth = monthNum !== -1 ? monthNames[monthNum - 1] : 'empty month';
   const announcedDay = dayNum !== -1 ? announcableCardinalDays[dayNum] : 'empty day';
-  const announcedYear = yearNum !== -1 ? fillStringWithPlaceHolders("".concat(yearNum), 4, '0') : 'empty year';
-  const announcedDateValues = "".concat(announcedMonth, ", ").concat(announcedDay, ", ").concat(announcedYear);
+  const announcedYear = yearNum !== -1 ? fillStringWithPlaceHolders(`${yearNum}`, 4, '0') : 'empty year';
+  const announcedDateValues = `${announcedMonth}, ${announcedDay}, ${announcedYear}`;
   return useMemo(() => ({
     month,
     day,
@@ -69,12 +69,12 @@ const useGetDestructuredTimeValues = _ref2 => {
   const hoursNum = convertToPositiveNumberIfPossible(hours);
   const minutesNum = convertToPositiveNumberIfPossible(minutes); // 01 -> 1 ~ 09 -> 9 || 1_ -> 1 ~ 9_ -> 9 || empty...
 
-  const announcedHours = hoursNum !== -1 ? "".concat(hoursNum) : 'empty hours'; // 01 -> 1 ~ 09 -> 9 || 1_ -> 1 ~ 9_ -> 9 || empty...
+  const announcedHours = hoursNum !== -1 ? `${hoursNum}` : 'empty hours'; // 01 -> 1 ~ 09 -> 9 || 1_ -> 1 ~ 9_ -> 9 || empty...
 
-  const announcedMinutes = minutesNum !== -1 ? "".concat(minutesNum) : 'empty minutes';
+  const announcedMinutes = minutesNum !== -1 ? `${minutesNum}` : 'empty minutes';
   const announcedMeridiem = // eslint-disable-next-line no-nested-ternary
-  meridiem === 'PM' ? "post meridiem" : meridiem === 'AM' ? 'ante meridiem' : 'empty meriediem';
-  const announcedTimeValues = "".concat(announcedHours, ", ").concat(announcedMinutes, ", ").concat(announcedMeridiem);
+  meridiem === 'PM' ? `post meridiem` : meridiem === 'AM' ? 'ante meridiem' : 'empty meriediem';
+  const announcedTimeValues = `${announcedHours}, ${announcedMinutes}, ${announcedMeridiem}`;
   return useMemo(() => ({
     hours,
     minutes,

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

@@ -23,7 +23,7 @@ const useGetPropsBasedOnType = propsWithDefaults => {
   const appOnMonthChange = (isDateTime || isDate) && propsWithDefaults.onMonthChange ? propsWithDefaults.onMonthChange : noop;
   const appOnDayChange = (isDateTime || isDate) && propsWithDefaults.onDayChange ? propsWithDefaults.onDayChange : noop;
   const appOnYearChange = (isDateTime || isDate) && propsWithDefaults.onYearChange ? propsWithDefaults.onYearChange : noop;
-  const emptyPickerStartingMonthDefault = "".concat(new Date().getMonth() + 1, "/__/").concat(new Date().getFullYear());
+  const emptyPickerStartingMonthDefault = `${new Date().getMonth() + 1}/__/${new Date().getFullYear()}`;
   const emptyPickerStartingMonth = (isDateTime || isDate) && propsWithDefaults.emptyPickerStartingMonth ? propsWithDefaults.emptyPickerStartingMonth : emptyPickerStartingMonthDefault;
   const onCalendarOpenFocusedDay = (isDateTime || isDate) && propsWithDefaults.onCalendarOpenFocusedDay ? propsWithDefaults.onCalendarOpenFocusedDay : undefined;
   /* -------------------------- -------------- --------------------------*/

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

@@ -1,6 +1,6 @@
-import 'core-js/modules/web.dom-collections.iterator.js';
 import { useState, useRef, useMemo } from 'react';
 
+/* eslint-disable complexity */
 const useGetReferences = _ref => {
   let {
     isWithDateInputs,

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

@@ -1,8 +1,8 @@
-import 'core-js/modules/web.dom-collections.iterator.js';
 import { useMemo, useState } from 'react';
 import { getIsDateTime, getIsDate, getIsTime } from '../utils/typeGuards.js';
 import { dateTimeToDate, dateTimeToTime } from '../utils/stringHelpers.js';
 
+/* eslint-disable complexity */
 const useRelevantValueFromProps = props => {
   const dateStringFromProps = useMemo(() => {
     if (getIsDateTime(props)) return props.dateTime !== '' ? dateTimeToDate(props.dateTime) : '__/__/____';

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()}`)
   }));
 };