@elliemae/ds-controlled-form 2.0.0-next.1 → 2.0.0-next.6

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

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

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

@@ -3,72 +3,41 @@ import { deconstructValuesFromDateString, isValidDateString, dateTimeToDate, isV
 import { convertToPositiveNumberIfPossible } from '../utils/numberHelpers.js';
 
 /* eslint-disable max-len */
-const PREPEND = `ControlledDateTimePicker:
-  Invalid configuration detected::
-  
-    `;
+const PREPEND = "ControlledDateTimePicker:\n  Invalid configuration detected::\n  \n    ";
 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 = `
-
-    Received:`;
+const INLINE_RECEIVED_PREPEND = "\n\n    Received:";
 
 const throwInvalidDateTimeError = invalidValue => {
-  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}`);
+  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));
 };
 
 const throwInvalidDaterror = invalidValue => {
-  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}`);
+  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));
 };
 
 const throwInvalidTimerror = invalidValue => {
-  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}`);
+  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));
 };
 
 const throwUncontrolledDateError = (date, onDateChange) => {
-  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}(${typeof date})
-    ${onDateChange}(${typeof onDateChange})
-  ${NOT_A_DEFECT}`);
+  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    ").concat(date, "(").concat(typeof date, ")\n    ").concat(onDateChange, "(").concat(typeof onDateChange, ")\n  ").concat(NOT_A_DEFECT));
 };
 
 const throwUncontrolledTimeError = (time, onTimeChange) => {
-  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}(${typeof time})
-    ${onTimeChange}(${typeof onTimeChange})
-  ${NOT_A_DEFECT}`);
+  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    ").concat(time, "(").concat(typeof time, ")\n    ").concat(onTimeChange, "(").concat(typeof onTimeChange, ")\n  ").concat(NOT_A_DEFECT));
 };
 
 const throwUncontrolledDateTimeError = (dateTime, onDateTimeChange) => {
-  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}(${typeof dateTime})
-    ${onDateTimeChange}(${typeof onDateTimeChange})
-  ${NOT_A_DEFECT}`);
+  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    ").concat(dateTime, "(").concat(typeof dateTime, ")\n    ").concat(onDateTimeChange, "(").concat(typeof onDateTimeChange, ")\n  ").concat(NOT_A_DEFECT));
 };
 
 const throwInvalidEmptyPickerStartingMonthError = emptyPickerStartingMonth => {
-  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}`);
+  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));
 };
 
 const throwInvalidOnCalendarOpenFocusedDayError = onCalendarOpenFocusedDay => {
-  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}`);
+  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));
 };
 
 const useValidateProps = props => {

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

@@ -39,7 +39,7 @@ const DDInput = /*#__PURE__*/React.memo(({
     value: value,
     ref: contextRef,
     placeholder: placeholder,
-    "aria-label": `day input field, ${ariaCurrentValueForInputs}`,
+    "aria-label": "day input field, ".concat(ariaCurrentValueForInputs),
     "data-testid": ControlledDateTimePickerDatatestid.DATE_INPUTS.DAY
   });
 });

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

@@ -41,7 +41,7 @@ const MMInput = /*#__PURE__*/React.memo(({
     value: value,
     ref: contextRef,
     placeholder: placeholder,
-    "aria-label": `month input field, ${ariaCurrentValueForInputs}`,
+    "aria-label": "month input field, ".concat(ariaCurrentValueForInputs),
     "data-testid": ControlledDateTimePickerDatatestid.DATE_INPUTS.MONTH
   });
 });

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

@@ -39,7 +39,7 @@ const YYYYInput = /*#__PURE__*/React.memo(({
     value: value,
     ref: contextRef,
     placeholder: placeholder,
-    "aria-label": `year input field, ${ariaCurrentValueForInputs}`,
+    "aria-label": "year input field, ".concat(ariaCurrentValueForInputs),
     "data-testid": ControlledDateTimePickerDatatestid.DATE_INPUTS.YEAR
   });
 });

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

@@ -92,7 +92,7 @@ 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(`${newMonth}`, 2);
+      newMonth = prependStringWithPlaceHolders("".concat(newMonth), 2);
       handleChangeMonth(newMonth, e);
     }
   }, [onHomeKeyDown, onEndKeyDown, month, handleChangeMonth]);
@@ -151,7 +151,7 @@ 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(`${newDay}`, 2);
+      newDay = prependStringWithPlaceHolders("".concat(newDay), 2);
       handleChangeDay(newDay, e);
     }
   }, [onHomeKeyDown, onEndKeyDown, handleChangeDay, day]);
@@ -216,7 +216,7 @@ const useDateInputs = () => {
       const yearInteger = Number.isNaN(yearStringConvertedToInteger) ? 0 : yearStringConvertedToInteger;
       let newYear;
       if (key === 'ArrowUp') newYear = yearInteger + 1 <= 9999 ? yearInteger + 1 : yearInteger;else newYear = yearInteger - 1 > 0 ? yearInteger - 1 : 1;
-      newYear = prependStringWithPlaceHolders(`${newYear}`, 4);
+      newYear = prependStringWithPlaceHolders("".concat(newYear), 4);
       handleChangeYear(newYear, e);
     }
   }, [onHomeKeyDown, onEndKeyDown, handleChangeYear, year]);

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

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

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

@@ -17,8 +17,8 @@ const useGetFormattedCurrentDate = () => {
     currentMonth,
     currentYear
   } = useContext(CalendarContext);
-  const monthString = currentMonth >= 0 && currentMonth <= 11 ? `${getMonthNameByMonthNumber(currentMonth)} ` : '';
-  return useMemo(() => `${monthString}${currentYear}`, [monthString, currentYear]);
+  const monthString = currentMonth >= 0 && currentMonth <= 11 ? "".concat(getMonthNameByMonthNumber(currentMonth), " ") : '';
+  return useMemo(() => "".concat(monthString).concat(currentYear), [monthString, currentYear]);
 };
 
 const CalendarHead = () => {

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

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

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

@@ -79,9 +79,9 @@ const Day = ({
         day: dayNumber,
         year
       } = getDateValuesFromDate(day);
-      onMonthChange(`${month + 1}`, e, metaInfo);
-      onDayChange(`${dayNumber}`, e, metaInfo);
-      onYearChange(`${year}`, e, metaInfo);
+      onMonthChange("".concat(month + 1), e, metaInfo);
+      onDayChange("".concat(dayNumber), e, metaInfo);
+      onYearChange("".concat(year), e, metaInfo);
       handleChangeComposedDateString(newDateString, metaInfo);
       setLatestInteractionRegion('calendar-days');
       if (!isWithTimeWheelToo && !preventCloseOnSelection) closeCalendar();
@@ -90,7 +90,7 @@ const Day = ({
   const handleOnDayFocus = useCallback(() => {
     setLatestInteractionRegion('calendar-days');
   }, [setLatestInteractionRegion]);
-  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]);
+  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]);
   let dataTestid = ControlledDateTimePickerDatatestid.CALENDAR.DAY;
   if (isSelected) dataTestid = ControlledDateTimePickerDatatestid.CALENDAR.SELECTED_DAY;
   if (isFocused) dataTestid = ControlledDateTimePickerDatatestid.CALENDAR.FOCUSED_DAY;
@@ -103,7 +103,7 @@ const Day = ({
     'aria-colindex': colIndex
   }), {}, {
     children: /*#__PURE__*/_jsx(StyledDayBtn, {
-      "aria-label": `${getAriaDayFromDateString(dayAsString)}, ${weekDays[metaDay.day.getDay()]}`,
+      "aria-label": "".concat(getAriaDayFromDateString(dayAsString), ", ").concat(weekDays[metaDay.day.getDay()]),
       "aria-disabled": isOutOfRange || isDisabled,
       "aria-hidden": !!isInvisible,
       buttonType: "raw",
@@ -118,7 +118,7 @@ const Day = ({
       tabIndex: isSelected ? 0 : -1,
       "data-isfocused": isFocused,
       "data-testid": dataTestid
-    }, void 0, `${day.getDate()}`)
+    }, void 0, "".concat(day.getDate()))
   }));
 };
 

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

@@ -3,11 +3,7 @@ import { Grid } from '@elliemae/ds-grid';
 import { DSButtonV2 } from '@elliemae/ds-button';
 
 /* eslint-disable max-lines */
-const focusBorder = `
-  border-style: solid;
-  border-width: 2px;
-  border-radius: 50%;
-`;
+const focusBorder = "\n  border-style: solid;\n  border-width: 2px;\n  border-radius: 50%;\n";
 const StyledIconTriggerButton = /*#__PURE__*/styled(DSButtonV2).withConfig({
   componentId: "sc-18gg4kd-0"
 })(["color:", ";width:26px;height:26px;"], ({
@@ -68,7 +64,7 @@ const StyledWeekDaysListWrapper = /*#__PURE__*/styled(Grid).withConfig({
 }) => theme.fontSizes.label[400], ({
   isHeader,
   theme
-}) => isHeader ? `background: ${theme.colors.neutral['050']}` : '', ({
+}) => isHeader ? "background: ".concat(theme.colors.neutral['050']) : '', ({
   isHeader
 }) => isHeader ? 'text-transform: capitalize' : '', ({
   theme

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

@@ -1,3 +1,4 @@
+import 'core-js/modules/web.dom-collections.iterator.js';
 import { useContext, useState, useMemo, useCallback } from 'react';
 import { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';
 import { useKeyboardHandlers } from './useKeyboardHandlers.js';
@@ -5,8 +6,6 @@ import { useFocusLogic } from './useFocusLogic.js';
 import { usePopperTriggerLogic } from './usePopperTriggerLogic.js';
 import { useCurrentDisplayedMonthYearLogic } from './useCurrentDisplayedMonthYearLogic.js';
 
-/* eslint-disable complexity */
-
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 function sliceIntoChunks(arr, chunkSize) {
   const res = [];

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

@@ -1,8 +1,8 @@
+import 'core-js/modules/web.dom-collections.iterator.js';
 import { useEffect, useState, useMemo, createRef, useCallback } from 'react';
 import { useGetMonthYearFromDateStringOrEmptyStartingMonth } from '../../../utils/hooks/useGetMonthYearFromDateStringOrEmptyStartingMonth.js';
 import { getFiveBySevenCurrentMonthDaysMatrix, sumValuesToDate, getDateStringFromDay, sumFromDateValues } from '../../../utils/dateHelpers.js';
 
-/* eslint-disable complexity */
 const useCurrentDisplayedMonthYearLogic = () => {
   const {
     month: monthFromDateString,

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

@@ -1,9 +1,8 @@
+import 'core-js/modules/web.dom-collections.iterator.js';
 import { useState, useMemo, useCallback, useLayoutEffect } from 'react';
 import { compareTwoDatesDayEquality } from '../../../utils/dateHelpers.js';
 import { useGetStartingFocusedDay } from '../../../utils/hooks/useGetStartingFocusedDay.js';
 
-/* eslint-disable complexity */
-
 // eslint-disable-next-line max-params
 const loopWhileWaiting = (cb, shortcircuit = () => false, timePerTry = 100, maxTries = 5) => {
   let ab = maxTries;

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

@@ -1,8 +1,8 @@
+import 'core-js/modules/web.dom-collections.iterator.js';
 import { useState, useCallback, useMemo } from 'react';
 import { usePopper } from 'react-popper';
 import { useOnClickOutside } from '../../../utils/hooks/useOnClickOutside.js';
 
-/* eslint-disable complexity */
 const usePopperTriggerLogic = ({
   focusedDay,
   resetFocusedDayToStartDate,

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

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

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

@@ -1,3 +1,4 @@
+import 'core-js/modules/web.dom-collections.iterator.js';
 import { useContext, useState, useCallback, useMemo } from 'react';
 import { usePopper } from 'react-popper';
 import { CONTROLLED_DATE_TIME_PICKER_TYPES } from '../../../ControlledDateTimePickerTypes.js';
@@ -6,7 +7,6 @@ import { useOnClickOutside } from '../../../utils/hooks/useOnClickOutside.js';
 import { CalendarContext } from '../Calendar/CalendarContext.js';
 import { TimeWheelContext } from '../TimeWheel/TimeWheelContext.js';
 
-/* eslint-disable max-statements */
 const useConfigCalendarWithTimeWheelCTX = () => {
   const {
     pickerButtonRef,

package/esm/controlled-date-time-picker/parts/Pickers/TimeWheel/HoursList.js

@@ -42,9 +42,9 @@ const HoursList = () => {
     "data-testid": ControlledDateTimePickerDatatestid.TIMEWHEEL.PREV_HOUR,
     tabIndex: -1
   }, void 0, _ChevronSmallUp || (_ChevronSmallUp = /*#__PURE__*/_jsx(ChevronSmallUp, {})))), visibleHours.map(hourString => {
-    const key = `timewheel-hour-${hourString}`;
+    const key = "timewheel-hour-".concat(hourString);
     if (!hourString) return /*#__PURE__*/_jsx(StyledWheelListItem, {}, key);
-    const currHourTimeString = `${hourString}:${minutes || '00'} ${meridiem || 'AM'}`;
+    const currHourTimeString = "".concat(hourString, ":").concat(minutes || '00', " ").concat(meridiem || 'AM');
     const isEmptyCurrValueCurrentListItem = !hours && convertToPositiveNumberIfPossible(hourString) === currHourNum;
     const isCurrentListItem = isEmptyCurrValueCurrentListItem || hours === hourString;
     const isDisabled = getIsDisabledTime(currHourTimeString);
@@ -60,7 +60,7 @@ const HoursList = () => {
       autoFocus: autoFocusHourTimeWheel && isCurrentListItem,
       "data-testid": ControlledDateTimePickerDatatestid.TIMEWHEEL[isCurrentListItem ? 'CURRENT_HOUR' : 'HOUR'],
       selected: hours.length === 2 && convertToPositiveNumberIfPossible(hourString) === currHourNum,
-      "aria-label": `${hourString} hours`,
+      "aria-label": "".concat(hourString, " hours"),
       "aria-disabled": isDisabled,
       isDisabled: isDisabled,
       buttonType: "raw",
@@ -71,7 +71,7 @@ const HoursList = () => {
       "aria-valuemax": "12",
       "aria-valuemin": "1",
       "aria-valuenow": currHourNum,
-      "aria-valuetext": `${hourString} hours`
+      "aria-valuetext": "".concat(hourString, " hours")
     }, btnProps), {}, {
       children: hourString
     })));

package/esm/controlled-date-time-picker/parts/Pickers/TimeWheel/MeridiemList.js

@@ -22,9 +22,9 @@ const MeridiemList = () => {
   } = useContext(TimeWheelContext);
   const isAmCurrent = !meridiem || meridiem === 'AM';
   const isPmCurrent = meridiem === 'PM';
-  const hourMinuteString = `${hours || '01'}:${minutes || '00'}`;
-  const amTimeString = `${hourMinuteString} AM`;
-  const pmTimeString = `${hourMinuteString} PM`;
+  const hourMinuteString = "".concat(hours || '01', ":").concat(minutes || '00');
+  const amTimeString = "".concat(hourMinuteString, " AM");
+  const pmTimeString = "".concat(hourMinuteString, " PM");
   const isDisabledAm = getIsDisabledTime(amTimeString);
   const isDisabledPm = getIsDisabledTime(pmTimeString);
   return /*#__PURE__*/_jsx(StyledWheelList, {}, void 0, /*#__PURE__*/_jsx(StyledWheelListItem, {}, void 0, /*#__PURE__*/_jsx(StyledWheelChangeTimeBtn, {
@@ -44,7 +44,7 @@ const MeridiemList = () => {
     isCurrentListItem: isAmCurrent,
     "data-testid": ControlledDateTimePickerDatatestid.TIMEWHEEL[isAmCurrent ? 'CURRENT_MERIDIEM' : 'MERIDIEM'],
     selected: meridiem === 'AM',
-    "aria-label": `AM ${isAmCurrent ? 'selected' : ''}`,
+    "aria-label": "AM ".concat(isAmCurrent ? 'selected' : ''),
     "aria-disabled": isDisabledAm,
     isDisabled: isDisabledAm,
     buttonType: "raw",
@@ -63,7 +63,7 @@ const MeridiemList = () => {
   }, void 0, /*#__PURE__*/_jsx(StyledTimeBtn, {
     isCurrentListItem: isPmCurrent,
     "data-testid": ControlledDateTimePickerDatatestid.TIMEWHEEL[isPmCurrent ? 'CURRENT_MERIDIEM' : 'MERIDIEM'],
-    "aria-label": `PM ${isPmCurrent ? 'selected' : ''}`,
+    "aria-label": "PM ".concat(isPmCurrent ? 'selected' : ''),
     "aria-disabled": isDisabledPm,
     isDisabled: isDisabledPm,
     buttonType: "raw",

package/esm/controlled-date-time-picker/parts/Pickers/TimeWheel/MinutesList.js

@@ -41,9 +41,9 @@ const MinutesList = () => {
     tabIndex: -1,
     "data-testid": ControlledDateTimePickerDatatestid.TIMEWHEEL.PREV_MINUTE
   }, void 0, _ChevronSmallUp || (_ChevronSmallUp = /*#__PURE__*/_jsx(ChevronSmallUp, {})))), visibleMinutes.map(minutesString => {
-    const key = `timewheel-minutes-${minutesString}`;
+    const key = "timewheel-minutes-".concat(minutesString);
     if (!minutesString) return /*#__PURE__*/_jsx(StyledWheelListItem, {}, key);
-    const currMinutesTimeString = `${hours || '01'}:${minutesString} ${meridiem || 'AM'}`;
+    const currMinutesTimeString = "".concat(hours || '01', ":").concat(minutesString, " ").concat(meridiem || 'AM');
     const isEmptyCurrValueCurrentListItem = !minutes && convertToPositiveNumberIfPossible(minutesString) === currMinuteNum;
     const isCurrentListItem = isEmptyCurrValueCurrentListItem || minutes === minutesString;
     const isDisabled = getIsDisabledTime(currMinutesTimeString);
@@ -59,7 +59,7 @@ const MinutesList = () => {
       isCurrentListItem: isCurrentListItem,
       "data-testid": ControlledDateTimePickerDatatestid.TIMEWHEEL[isCurrentListItem ? 'CURRENT_MINUTE' : 'MINUTE'],
       selected: minutes.length === 2 && convertToPositiveNumberIfPossible(minutesString) === currMinuteNum,
-      "aria-label": `${minutesString} minutes`,
+      "aria-label": "".concat(minutesString, " minutes"),
       "aria-disabled": isDisabled,
       isDisabled: isDisabled,
       buttonType: "raw",
@@ -70,7 +70,7 @@ const MinutesList = () => {
       "aria-valuemax": "59",
       "aria-valuemin": "0",
       "aria-valuenow": currMinuteNum,
-      "aria-valuetext": `${minutesString} minutes`
+      "aria-valuetext": "".concat(minutesString, " minutes")
     }, btnProps), {}, {
       children: minutesString
     })));

package/esm/controlled-date-time-picker/parts/Pickers/TimeWheel/SecondsList.js

@@ -39,7 +39,7 @@ const SecondsList = () => {
     innerRef: prevSecondsBtnRef,
     tabIndex: -1
   }, void 0, _ChevronSmallUp || (_ChevronSmallUp = /*#__PURE__*/_jsx(ChevronSmallUp, {})))), visibleSeconds.map(secondsString => {
-    const key = `timewheel-seconds-${secondsString}`;
+    const key = "timewheel-seconds-".concat(secondsString);
     if (!secondsString) return /*#__PURE__*/_jsx(StyledWheelListItem, {}, key);
     const isEmptyCurrValueCurrentListItem = !seconds && convertToPositiveNumberIfPossible(secondsString) === currSecondNum;
     const isCurrentListItem = isEmptyCurrValueCurrentListItem || seconds === secondsString;
@@ -51,7 +51,7 @@ const SecondsList = () => {
     return /*#__PURE__*/_jsx(StyledWheelListItem, {
       isCurrentListItem: isCurrentListItem
     }, key, /*#__PURE__*/jsx(DSButton, _objectSpread(_objectSpread({
-      "aria-label": `set ${secondsString} seconds`,
+      "aria-label": "set ".concat(secondsString, " seconds"),
       buttonType: "raw",
       size: "l",
       variant: BUTTON_VARIANT.DEFAULT,

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

@@ -20,9 +20,7 @@ const StyledTimePickerContainer = /*#__PURE__*/styled.div.withConfig({
 })(["display:grid;position:relative;grid-template-columns:192px;grid-template-rows:36px 30px auto;grid-template-areas:'TimePickerHead' 'TimePickerWheelsLegend' 'VerticalWheelWrapper';", ""], ({
   showShadow,
   isControllerOnly
-}) => showShadow && !isControllerOnly ? `
-  box-shadow: 0 6px 20px 0 rgb(0 0 0 / 24%), 0 8px 17px 0 rgb(0 0 0 / 19%);
-  ` : '');
+}) => showShadow && !isControllerOnly ? "\n  box-shadow: 0 6px 20px 0 rgb(0 0 0 / 24%), 0 8px 17px 0 rgb(0 0 0 / 19%);\n  " : '');
 const StyledTimePickerHead = /*#__PURE__*/styled(Grid).withConfig({
   componentId: "sc-1nsw31l-3"
 })(["width:100%;grid-area:TimePickerHead;justify-content:center;align-items:center;background:", ";"], ({
@@ -68,69 +66,12 @@ const StyledTimeBtn = /*#__PURE__*/styled(DSButtonV2).withConfig({
   theme,
   isDisabled,
   selected
-}) => isDisabled ? `
-    color: ${selected ? theme.colors.neutral['000'] : theme.colors.neutral[500]};
-    cursor: not-allowed;
-    background-color:${selected ? theme.colors.danger[900] : theme.colors.neutral['000']};
-    font-weight: ${selected ? theme.fontWeights.semibold : ''};
-
-    &:before {
-      cursor: not-allowed;
-      position: absolute;
-      content: '';
-      top: 47%;
-      left: 0;
-      width: 100%;
-      height: 1px;
-      background-color: ${selected ? theme.colors.neutral['000'] : theme.colors.neutral[500]};
-      transform: rotate(45deg);
-      pointer-events: none;
-    }
-    &:hover {
-      color:${selected ? theme.colors.neutral['000'] : theme.colors.neutral[500]};
-      background-color:${selected ? theme.colors.danger[900] : theme.colors.neutral['000']};
-    }
-  ` : `
-      ${selected ? `
-      color: ${theme.colors.neutral['000']};
-      background-color:${theme.colors.brand[700]};
-      font-weight: ${theme.fontWeights.semibold};
-      &:hover {
-        color:${theme.colors.neutral['000']};
-        background-color:${theme.colors.brand[700]};
-      }
-      ` : `
-      color: ${theme.colors.neutral[800]};
-      background-color:${theme.colors.neutral['000']};
-      `}
-  `, ({
+}) => isDisabled ? "\n    color: ".concat(selected ? theme.colors.neutral['000'] : theme.colors.neutral[500], ";\n    cursor: not-allowed;\n    background-color:").concat(selected ? theme.colors.danger[900] : theme.colors.neutral['000'], ";\n    font-weight: ").concat(selected ? theme.fontWeights.semibold : '', ";\n\n    &:before {\n      cursor: not-allowed;\n      position: absolute;\n      content: '';\n      top: 47%;\n      left: 0;\n      width: 100%;\n      height: 1px;\n      background-color: ").concat(selected ? theme.colors.neutral['000'] : theme.colors.neutral[500], ";\n      transform: rotate(45deg);\n      pointer-events: none;\n    }\n    &:hover {\n      color:").concat(selected ? theme.colors.neutral['000'] : theme.colors.neutral[500], ";\n      background-color:").concat(selected ? theme.colors.danger[900] : theme.colors.neutral['000'], ";\n    }\n  ") : "\n      ".concat(selected ? "\n      color: ".concat(theme.colors.neutral['000'], ";\n      background-color:").concat(theme.colors.brand[700], ";\n      font-weight: ").concat(theme.fontWeights.semibold, ";\n      &:hover {\n        color:").concat(theme.colors.neutral['000'], ";\n        background-color:").concat(theme.colors.brand[700], ";\n      }\n      ") : "\n      color: ".concat(theme.colors.neutral[800], ";\n      background-color:").concat(theme.colors.neutral['000'], ";\n      "), "\n  "), ({
   theme,
   isCurrentListItem,
   selected,
   isDisabled
-}) => isCurrentListItem && !selected ? `
-        color: ${isDisabled ? theme.colors.danger[900] : theme.colors.brand[700]};
-        &:after {
-          position: absolute;
-          content: '';
-          border-radius: 50%;
-          top: -2px;
-          left: -2px;
-          width: calc(100% + 4px);
-          height: calc(100% + 4px);
-          border: 2px solid ${isDisabled ? theme.colors.danger[900] : theme.colors.brand[700]};
-          pointer-events: none;
-        }
-        ${isDisabled ? `
-          color: ${theme.colors.danger[900]};
-          &:hover {
-            color:${theme.colors.danger[900]};
-          }          
-          &:before{
-            background-color: ${theme.colors.danger[900]};
-          }
-        ` : ''}
-        ` : '');
+}) => isCurrentListItem && !selected ? "\n        color: ".concat(isDisabled ? theme.colors.danger[900] : theme.colors.brand[700], ";\n        &:after {\n          position: absolute;\n          content: '';\n          border-radius: 50%;\n          top: -2px;\n          left: -2px;\n          width: calc(100% + 4px);\n          height: calc(100% + 4px);\n          border: 2px solid ").concat(isDisabled ? theme.colors.danger[900] : theme.colors.brand[700], ";\n          pointer-events: none;\n        }\n        ").concat(isDisabled ? "\n          color: ".concat(theme.colors.danger[900], ";\n          &:hover {\n            color:").concat(theme.colors.danger[900], ";\n          }          \n          &:before{\n            background-color: ").concat(theme.colors.danger[900], ";\n          }\n        ") : '', "\n        ") : '');
 const StyledWheelListItem = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-1nsw31l-7"
 })(["margin:auto;width:36px;height:36px;display:flex;align-items:center;justify-content:center;position:relative;"]);

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

@@ -22,7 +22,7 @@ const TimeWheelContent = /*#__PURE__*/React.memo(({
     showShadow: showShadow,
     isControllerOnly: isControllerOnly,
     "data-testid": ControlledDateTimePickerDatatestid.CONTROLLER_COMPONENT.TIMEWHEEL
-  }, void 0, /*#__PURE__*/_jsx(StyledTimePickerHead, {}, void 0, `${hours || '__'}:${minutes || '__'} ${meridiem || '__'}`), _StyledTimePickerWhee || (_StyledTimePickerWhee = /*#__PURE__*/_jsx(StyledTimePickerWheelsLegend, {}, void 0, /*#__PURE__*/_jsx("div", {}, void 0, "H"), /*#__PURE__*/_jsx("div", {}, void 0, "M"), /*#__PURE__*/_jsx("div", {}, void 0, "A"))), _StyledTimePickerWhee2 || (_StyledTimePickerWhee2 = /*#__PURE__*/_jsx(StyledTimePickerWheelWrapper, {}, void 0, /*#__PURE__*/_jsx(HoursList, {}), /*#__PURE__*/_jsx(MinutesList, {}), /*#__PURE__*/_jsx(MeridiemList, {}))), _TimeWheelFooter || (_TimeWheelFooter = /*#__PURE__*/_jsx(TimeWheelFooter, {})));
+  }, void 0, /*#__PURE__*/_jsx(StyledTimePickerHead, {}, void 0, "".concat(hours || '__', ":").concat(minutes || '__', " ").concat(meridiem || '__')), _StyledTimePickerWhee || (_StyledTimePickerWhee = /*#__PURE__*/_jsx(StyledTimePickerWheelsLegend, {}, void 0, /*#__PURE__*/_jsx("div", {}, void 0, "H"), /*#__PURE__*/_jsx("div", {}, void 0, "M"), /*#__PURE__*/_jsx("div", {}, void 0, "A"))), _StyledTimePickerWhee2 || (_StyledTimePickerWhee2 = /*#__PURE__*/_jsx(StyledTimePickerWheelWrapper, {}, void 0, /*#__PURE__*/_jsx(HoursList, {}), /*#__PURE__*/_jsx(MinutesList, {}), /*#__PURE__*/_jsx(MeridiemList, {}))), _TimeWheelFooter || (_TimeWheelFooter = /*#__PURE__*/_jsx(TimeWheelFooter, {})));
 });
 
 export { TimeWheelContent };

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

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

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

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

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

@@ -1,3 +1,4 @@
+import 'core-js/modules/web.dom-collections.iterator.js';
 import { useState, useCallback, useMemo } from 'react';
 import { usePopper } from 'react-popper';
 import { useOnClickOutside } from '../../../utils/hooks/useOnClickOutside.js';