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

package/esm/combobox/utils/listHelper.js

@@ -5,7 +5,6 @@ import 'core-js/modules/esnext.async-iterator.some.js';
 import 'core-js/modules/esnext.iterator.some.js';
 import 'core-js/modules/esnext.async-iterator.find.js';
 import 'core-js/modules/esnext.iterator.find.js';
-import 'core-js/modules/web.dom-collections.iterator.js';
 import 'core-js/modules/esnext.async-iterator.for-each.js';
 import 'core-js/modules/esnext.iterator.for-each.js';
 import { MENU_OPTION_TYPES } from '../constants.js';
@@ -17,11 +16,11 @@ const isSelectedValueMultiple = value => Array.isArray(value);
 const isSelected = (value, activeOption) => {
   if (isSelectedValueMultiple(value)) {
     const multiValue = value;
-    return multiValue.some(item => (item === null || item === void 0 ? void 0 : item.value) === (activeOption === null || activeOption === void 0 ? void 0 : activeOption.value));
+    return multiValue.some(item => item?.value === activeOption?.value);
   }
 
   const singleValue = value;
-  return (singleValue === null || singleValue === void 0 ? void 0 : singleValue.value) === activeOption.value;
+  return singleValue?.value === activeOption.value;
 };
 const findInCircularList = function (list, from, criteria) {
   let step = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 1;
@@ -71,8 +70,6 @@ const getSuggestedValueOnChange = (selectedOption, selectedValues) => {
 };
 const filterOptions = (inputValue, options) => options.filter(option => option.type === MENU_OPTION_TYPES.OPTION && option.label.toLowerCase().includes(inputValue.toLowerCase()));
 const selectedValuesWithSections = (optionsToParse, multiSelectedValue) => {
-  var _items2;
-
   const items = [];
   if (optionsToParse) optionsToParse.forEach(option => {
     // const isSelectedValue = multiSelectedValue.find((item) => item?.dsId === option.dsId);
@@ -81,9 +78,7 @@ const selectedValuesWithSections = (optionsToParse, multiSelectedValue) => {
     }
 
     if (option.type === MENU_OPTION_TYPES.SECTION) {
-      var _items;
-
-      if (((_items = items[items.length - 1]) === null || _items === void 0 ? void 0 : _items.type) === MENU_OPTION_TYPES.SECTION) {
+      if (items[items.length - 1]?.type === MENU_OPTION_TYPES.SECTION) {
         items[items.length - 1] = option;
       } else {
         items.push(option);
@@ -91,12 +86,21 @@ const selectedValuesWithSections = (optionsToParse, multiSelectedValue) => {
     }
   });
 
-  if (((_items2 = items[items.length - 1]) === null || _items2 === void 0 ? void 0 : _items2.type) === MENU_OPTION_TYPES.SECTION) {
+  if (items[items.length - 1]?.type === MENU_OPTION_TYPES.SECTION) {
     items.pop();
   }
 
   return items;
 };
 const getFilteredOptionsSelected = (filteredOption, selectedValues) => filteredOption.filter(option => option.type === MENU_OPTION_TYPES.OPTION && isSelected(selectedValues, option));
+const scrollIfNeeded = function (elem) {
+  let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
+    behavior: 'smooth',
+    block: 'end',
+    inline: 'nearest'
+  };
+  const bounding = elem.getBoundingClientRect();
+  if (!(bounding.top >= 0 && bounding.left >= 0 && bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight) && bounding.right <= (window.innerWidth || document.documentElement.clientWidth))) elem.scrollIntoView(options);
+};
 
-export { filterOptions, findInCircularList, getFilteredOptionsSelected, getFirstOption, getLastValueSelected, getOptions, getSelectableOptions, getSuggestedValueOnChange, isSelected, isSelectedValueEmpty, isSelectedValueMultiple, selectedValuesWithSections };
+export { filterOptions, findInCircularList, getFilteredOptionsSelected, getFirstOption, getLastValueSelected, getOptions, getSelectableOptions, getSuggestedValueOnChange, isSelected, isSelectedValueEmpty, isSelectedValueMultiple, scrollIfNeeded, selectedValuesWithSections };

package/esm/date-range-picker/config/useRangePickerLogic.js

@@ -4,12 +4,10 @@ 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 { useState, useEffect, useCallback, useMemo } from 'react';
 import '../../date-time-picker/ControlledDateTimePicker.js';
 import 'core-js/modules/esnext.async-iterator.map.js';
 import 'core-js/modules/esnext.iterator.map.js';
-import 'core-js/modules/es.string.replace.js';
 import { getDayFromDateString } from '../../date-time-picker/utils/dateHelpers.js';
 
 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; }
@@ -46,7 +44,7 @@ const useRangePickerLogic = _ref => {
     const dateToString = calendarChangeIsFrom ? toDate : changedDay;
     const dateTo = getDayFromDateString(dateToString); // we force the "from" to ALWAYS be before the "to" date
 
-    const isToBeforeFrom = (dateTo === null || dateTo === void 0 ? void 0 : dateTo.getTime()) < (dateFrom === null || dateFrom === void 0 ? void 0 : dateFrom.getTime());
+    const isToBeforeFrom = dateTo?.getTime() < dateFrom?.getTime();
     const newDateFromString = isToBeforeFrom ? dateToString : dateFromString;
     const forcingFromDatePick = isToBeforeFrom ? !calendarChangeIsFrom : false;
     const newDateToString = isToBeforeFrom ? dateFromString : dateToString;
@@ -121,19 +119,17 @@ const useRangePickerLogic = _ref => {
   }, [getChangedDayStringValues, onFromDateChange, onToDateChange]);
   const getIsStartRangeDay = useCallback(dayString => dayString === fromDate, [fromDate]);
   const getIsDayInRange = useCallback(dayString => {
-    var _getDayFromDateString;
-
     const dayFrom = getDayFromDateString(fromDate);
     const dayTo = getDayFromDateString(toDate);
     if (!dayFrom || !dayTo || !dayString) return false;
-    const newDayTime = (_getDayFromDateString = getDayFromDateString(dayString)) === null || _getDayFromDateString === void 0 ? void 0 : _getDayFromDateString.getTime();
+    const newDayTime = getDayFromDateString(dayString)?.getTime();
     return newDayTime <= dayTo.getTime() && newDayTime >= dayFrom.getTime();
   }, [fromDate, toDate]);
   const getIsEndRangeDay = useCallback(dayString => dayString === toDate, [toDate]);
   const getIsToBeforeFrom = useCallback((fromString, toString) => {
     const dateFrom = getDayFromDateString(fromString);
     const dateTo = getDayFromDateString(toString);
-    return (dateTo === null || dateTo === void 0 ? void 0 : dateTo.getTime()) < (dateFrom === null || dateFrom === void 0 ? void 0 : dateFrom.getTime());
+    return dateTo?.getTime() < dateFrom?.getTime();
   }, []);
   const handleFromDateChange = useCallback((newVal, metaInfo) => {
     const isIncorrectOrder = getIsToBeforeFrom(newVal, toDate);

package/esm/date-range-picker/parts/ControlledDateRangeCalendar.js

@@ -4,8 +4,6 @@ import { DSControlledDateTimePicker } from '../../date-time-picker/ControlledDat
 import { CONTROLLED_DATE_TIME_PICKER_TYPES } from '../../date-time-picker/ControlledDateTimePickerTypes.js';
 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 'core-js/modules/esnext.async-iterator.filter.js';
 import 'core-js/modules/esnext.iterator.constructor.js';
 import 'core-js/modules/esnext.iterator.filter.js';

package/esm/date-range-picker/parts/ControlledDateRangeFromDate.js

@@ -5,8 +5,6 @@ import { DSControlledDateTimePicker } from '../../date-time-picker/ControlledDat
 import { CONTROLLED_DATE_TIME_PICKER_TYPES } from '../../date-time-picker/ControlledDateTimePickerTypes.js';
 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 'core-js/modules/esnext.async-iterator.filter.js';
 import 'core-js/modules/esnext.iterator.constructor.js';
 import 'core-js/modules/esnext.iterator.filter.js';

package/esm/date-range-picker/parts/ControlledDateRangeToDate.js

@@ -5,8 +5,6 @@ import { DSControlledDateTimePicker } from '../../date-time-picker/ControlledDat
 import { CONTROLLED_DATE_TIME_PICKER_TYPES } from '../../date-time-picker/ControlledDateTimePickerTypes.js';
 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 'core-js/modules/esnext.async-iterator.filter.js';
 import 'core-js/modules/esnext.iterator.constructor.js';
 import 'core-js/modules/esnext.iterator.filter.js';

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",