@elliemae/ds-controlled-form 2.4.2-rc.3 → 2.4.3-rc.0

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

@@ -23,8 +23,8 @@ const useGetFormattedCurrentDate = () => {
     currentMonth,
     currentYear
   } = React.useContext(CalendarContext.CalendarContext);
-  const monthString = currentMonth >= 0 && currentMonth <= 11 ? "".concat(dateHelpers.getMonthNameByMonthNumber(currentMonth), " ") : '';
-  return React.useMemo(() => "".concat(monthString).concat(currentYear), [monthString, currentYear]);
+  const monthString = currentMonth >= 0 && currentMonth <= 11 ? `${dateHelpers.getMonthNameByMonthNumber(currentMonth)} ` : '';
+  return React.useMemo(() => `${monthString}${currentYear}`, [monthString, currentYear]);
 };
 
 const CalendarHead = () => {
@@ -54,28 +54,20 @@ const CalendarHead = () => {
     currFocusDescriber
   } = React.useContext(ControlledDateTimePickerCTX.ControlledDateTimePickerContext);
   const handlePrevYearRef = React.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 = React.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 = React.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 = React.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__default["default"](Styleds.StyledHeader, {}, void 0, /*#__PURE__*/_jsx__default["default"](Styleds.StyledHeaderButton, {
     "aria-label": "previous year",

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

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

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

@@ -67,7 +67,7 @@ const Day = _ref => {
     handleFocusMetaDayByDay,
     closeCalendar
   } = React.useContext(CalendarContext.CalendarContext);
-  const isFocusedMetaDay = focusedDay !== null && focusedDay !== void 0 && focusedDay.day ? dateHelpers.compareTwoDatesDayEquality(metaDay === null || metaDay === void 0 ? void 0 : metaDay.day, focusedDay === null || focusedDay === void 0 ? void 0 : focusedDay.day) : false;
+  const isFocusedMetaDay = focusedDay?.day ? dateHelpers.compareTwoDatesDayEquality(metaDay?.day, focusedDay?.day) : false;
   const isSelected = React.useMemo(() => {
     const selectedDate = dateHelpers.getDayFromDateString(dateStringFromProps);
     return selectedDate ? dateHelpers.isSameDateMoment(day, selectedDate) : false;
@@ -93,9 +93,9 @@ const Day = _ref => {
         day: dayNumber,
         year
       } = dateHelpers.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();
@@ -103,16 +103,14 @@ const Day = _ref => {
   }, [handleFocusMetaDayByDay, day, isDisabled, isOutOfRange, appOnMonthChange, appOnDayChange, appOnYearChange, handleChangeComposedDateString, trackFocusCalendarMetafocusedDay, isWithTimeWheelToo, preventCloseOnSelection, closeCalendar]);
   const handleInnerRef = React.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 = React.useCallback(() => {
     trackFocusCalendarMetafocusedDay('calendar-days');
   }, [trackFocusCalendarMetafocusedDay]);
-  const dayClassModifiers = React.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 = React.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.ControlledDateTimePickerDatatestid.CALENDAR.DAY;
   if (isSelected) dataTestid = ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.CALENDAR.SELECTED_DAY;
   if (isFocused) dataTestid = ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.CALENDAR.FOCUSED_DAY;
@@ -128,7 +126,7 @@ const Day = _ref => {
     'aria-colindex': colIndex
   }), {}, {
     children: /*#__PURE__*/_jsx__default["default"](Styleds.StyledDayBtn, {
-      "aria-label": "".concat(stringHelpers.getAriaDayFromDateString(dayAsString), ", ").concat(constants.weekDays[metaDay.day.getDay()]),
+      "aria-label": `${stringHelpers.getAriaDayFromDateString(dayAsString)}, ${constants.weekDays[metaDay.day.getDay()]}`,
       "aria-disabled": isOutOfRange || isDisabled,
       "aria-hidden": !!isInvisible,
       buttonType: "raw",
@@ -143,7 +141,7 @@ const Day = _ref => {
       tabIndex: isSelected ? 0 : -1,
       "data-isfocused": isFocused,
       "data-testid": dataTestid
-    }, void 0, "".concat(day.getDate()))
+    }, void 0, `${day.getDate()}`)
   }));
 };
 

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

@@ -2,7 +2,6 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
 var styled = require('styled-components');
 var dsSystem = require('@elliemae/ds-system');
 var dsGrid = require('@elliemae/ds-grid');
@@ -10,46 +9,76 @@ var DSButton = require('@elliemae/ds-button');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefaultLegacy(_taggedTemplateLiteral);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
-const diagonalLine = dsSystem.css(_templateObject || (_templateObject = _taggedTemplateLiteral__default["default"](["\n  &:before {\n    position: absolute;\n    content: '';\n    top: 48%;\n    left: -2px;\n    height: 1px;\n    width: calc(100% + 4px);\n    transform: rotate(45deg);\n    background-color: ", ";\n  }\n"])), _ref => {
+/* eslint-disable max-lines */
+const diagonalLine = dsSystem.css`
+  &:before {
+    position: absolute;
+    content: '';
+    top: 48%;
+    left: -2px;
+    height: 1px;
+    width: calc(100% + 4px);
+    transform: rotate(45deg);
+    background-color: ${_ref => {
   let {
     theme
   } = _ref;
   return theme.colors.neutral[500];
-});
-const focusBorder = dsSystem.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default["default"](["\n  &:after {\n    position: absolute;\n    content: '';\n    top: -4px;\n    left: -4px;\n    width: calc(100% + 8px);\n    height: calc(100% + 8px);\n    border-radius: 50%;\n  }\n"])));
+}};
+  }
+`;
+const focusBorder = dsSystem.css`
+  &:after {
+    position: absolute;
+    content: '';
+    top: -4px;
+    left: -4px;
+    width: calc(100% + 8px);
+    height: calc(100% + 8px);
+    border-radius: 50%;
+  }
+`;
 const backgroundDateRange = {
-  inRange: dsSystem.css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral__default["default"](["\n    background-color: ", ";\n    box-shadow: 4px 0 0 0 ", ";\n  "])), _ref2 => {
+  inRange: dsSystem.css`
+    background-color: ${_ref2 => {
     let {
       theme
     } = _ref2;
     return theme.colors.brand[200];
-  }, _ref3 => {
+  }};
+    box-shadow: 4px 0 0 0 ${_ref3 => {
     let {
       theme
     } = _ref3;
     return theme.colors.brand[200];
-  }),
-  startRange: dsSystem.css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral__default["default"](["\n    background-color: ", ";\n    border-radius: 50% 0 0 50%;\n    box-shadow: 4px 0 0 0 ", ";\n  "])), _ref4 => {
+  }};
+  `,
+  startRange: dsSystem.css`
+    background-color: ${_ref4 => {
     let {
       theme
     } = _ref4;
     return theme.colors.brand[200];
-  }, _ref5 => {
+  }};
+    border-radius: 50% 0 0 50%;
+    box-shadow: 4px 0 0 0 ${_ref5 => {
     let {
       theme
     } = _ref5;
     return theme.colors.brand[200];
-  }),
-  endRange: dsSystem.css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral__default["default"](["\n    background-color: ", ";\n    border-radius: 0 50% 50% 0;\n  "])), _ref6 => {
+  }};
+  `,
+  endRange: dsSystem.css`
+    background-color: ${_ref6 => {
     let {
       theme
     } = _ref6;
     return theme.colors.brand[200];
-  })
+  }};
+    border-radius: 0 50% 50% 0;
+  `
 };
 const StyledIconTriggerButton = /*#__PURE__*/styled__default["default"](DSButton.DSButtonV2).withConfig({
   componentId: "sc-1vlmm1g-0"
@@ -139,7 +168,7 @@ const StyledWeekDaysListWrapper = /*#__PURE__*/styled__default["default"](dsGrid
     isHeader,
     theme
   } = _ref19;
-  return isHeader ? "background: ".concat(theme.colors.neutral['050']) : '';
+  return isHeader ? `background: ${theme.colors.neutral['050']}` : '';
 }, _ref20 => {
   let {
     isHeader

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

@@ -2,13 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _defineProperty = require('@babel/runtime/helpers/defineProperty');
-require('core-js/modules/web.dom-collections.iterator.js');
 require('core-js/modules/esnext.async-iterator.filter.js');
 require('core-js/modules/esnext.iterator.constructor.js');
 require('core-js/modules/esnext.iterator.filter.js');
 require('core-js/modules/esnext.async-iterator.for-each.js');
 require('core-js/modules/esnext.iterator.for-each.js');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var React = require('react');
 var ControlledDateTimePickerCTX = require('../../../ControlledDateTimePickerCTX.js');
 var useCurrentDisplayedMonthYearLogic = require('./useCurrentDisplayedMonthYearLogic.js');

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

@@ -2,11 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('core-js/modules/web.dom-collections.iterator.js');
 var React = require('react');
 var useGetMonthYearFromDateStringOrEmptyStartingMonth = require('../../../utils/hooks/useGetMonthYearFromDateStringOrEmptyStartingMonth.js');
 var dateHelpers = require('../../../utils/dateHelpers.js');
 
+/* eslint-disable complexity */
+
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 function sliceIntoChunks(arr, chunkSize) {
   const res = [];

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

@@ -2,7 +2,6 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('core-js/modules/web.dom-collections.iterator.js');
 require('core-js/modules/esnext.async-iterator.find.js');
 require('core-js/modules/esnext.iterator.constructor.js');
 require('core-js/modules/esnext.iterator.find.js');

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

@@ -2,12 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('core-js/modules/web.dom-collections.iterator.js');
 var React = require('react');
 var reactPopper = require('react-popper');
 var ControlledDateTimePickerCTX = require('../../../ControlledDateTimePickerCTX.js');
 var useOnClickOutside = require('../../../utils/hooks/useOnClickOutside.js');
 
+/* eslint-disable complexity */
 const usePopperTriggerLogic = _ref => {
   let {
     focusLogic,
@@ -63,7 +63,7 @@ const usePopperTriggerLogic = _ref => {
   const handleSetTriggerRef = React.useCallback(newRef => {
     pickerButtonRef.current = newRef;
     setReferenceElement(newRef);
-    if (latestInteractionRegion === 'picker-icon' && currFocusDescriber === 'date-picker-icon') newRef === null || newRef === void 0 ? void 0 : newRef.focus();
+    if (latestInteractionRegion === 'picker-icon' && currFocusDescriber === 'date-picker-icon') newRef?.focus();
   }, [currFocusDescriber, latestInteractionRegion, pickerButtonRef]);
   const handleMenuWrapperKeyDown = React.useCallback(e => {
     const {
@@ -76,9 +76,7 @@ const usePopperTriggerLogic = _ref => {
     }
   }, [closeCalendar, trackFocusPicker]);
   useOnClickOutside.useOnClickOutside(popperElement, e => {
-    var _pickerButtonRef$curr, _pickerButtonRef$curr2;
-
-    if (e.target instanceof Element && !(pickerButtonRef !== null && pickerButtonRef !== void 0 && (_pickerButtonRef$curr = pickerButtonRef.current) !== null && _pickerButtonRef$curr !== void 0 && (_pickerButtonRef$curr2 = _pickerButtonRef$curr.contains) !== null && _pickerButtonRef$curr2 !== void 0 && _pickerButtonRef$curr2.call(_pickerButtonRef$curr, e === null || e === void 0 ? void 0 : e.target))) closeCalendar();
+    if (e.target instanceof Element && !pickerButtonRef?.current?.contains?.(e?.target)) closeCalendar();
   });
   return React.useMemo(() => ({
     closeCalendar,

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

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

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

@@ -2,7 +2,6 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('core-js/modules/web.dom-collections.iterator.js');
 var React = require('react');
 var reactPopper = require('react-popper');
 var ControlledDateTimePickerTypes = require('../../../ControlledDateTimePickerTypes.js');
@@ -11,6 +10,7 @@ var useOnClickOutside = require('../../../utils/hooks/useOnClickOutside.js');
 var CalendarContext = require('../Calendar/CalendarContext.js');
 var TimeWheelContext = require('../TimeWheel/TimeWheelContext.js');
 
+/* eslint-disable max-statements */
 const useConfigCalendarWithTimeWheelCTX = () => {
   const {
     pickerButtonRef,
@@ -79,14 +79,12 @@ const useConfigCalendarWithTimeWheelCTX = () => {
     if (!showCalendarWithTimeWheel) openCalendar();else closeCalendar();
   }, [closeCalendar, openCalendar, showCalendarWithTimeWheel]);
   useOnClickOutside.useOnClickOutside(popperElement, e => {
-    var _pickerButtonRef$curr, _pickerButtonRef$curr2;
-
-    if (e.target instanceof Element && !(pickerButtonRef !== null && pickerButtonRef !== void 0 && (_pickerButtonRef$curr = pickerButtonRef.current) !== null && _pickerButtonRef$curr !== void 0 && (_pickerButtonRef$curr2 = _pickerButtonRef$curr.contains) !== null && _pickerButtonRef$curr2 !== void 0 && _pickerButtonRef$curr2.call(_pickerButtonRef$curr, e === null || e === void 0 ? void 0 : e.target))) closeCalendar();
+    if (e.target instanceof Element && !pickerButtonRef?.current?.contains?.(e?.target)) closeCalendar();
   });
   const handleSetTriggerRef = React.useCallback(newRef => {
     pickerButtonRef.current = newRef;
     setReferenceElement(newRef);
-    if (latestInteractionRegion === 'picker-icon' && currFocusDescriber === 'datetime-picker-icon') newRef === null || newRef === void 0 ? void 0 : newRef.focus();
+    if (latestInteractionRegion === 'picker-icon' && currFocusDescriber === 'datetime-picker-icon') newRef?.focus();
   }, [currFocusDescriber, latestInteractionRegion, pickerButtonRef]);
   const handleMenuWrapperKeyDown = React.useCallback(e => {
     const {

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

@@ -53,10 +53,8 @@ const HoursList = () => {
   } = React.useContext(ControlledDateTimePickerCTX.ControlledDateTimePickerContext);
   const handleCurrYearRef = React.useCallback(ButtonDomNode => {
     setTimeout(() => {
-      var _ButtonDomNode$focus;
-
       currHourBtnRef.current = ButtonDomNode;
-      if (latestInteractionRegion === 'timewheel' && currFocusDescriber === 'timewheel-curr-hour') ButtonDomNode === null || ButtonDomNode === void 0 ? void 0 : (_ButtonDomNode$focus = ButtonDomNode.focus) === null || _ButtonDomNode$focus === void 0 ? void 0 : _ButtonDomNode$focus.call(ButtonDomNode);
+      if (latestInteractionRegion === 'timewheel' && currFocusDescriber === 'timewheel-curr-hour') ButtonDomNode?.focus?.();
     });
   }, [currFocusDescriber, latestInteractionRegion, currHourBtnRef]);
   return /*#__PURE__*/_jsx__default["default"](Styleds.StyledWheelList, {}, void 0, /*#__PURE__*/_jsx__default["default"](Styleds.StyledWheelListItem, {}, void 0, /*#__PURE__*/_jsx__default["default"](Styleds.StyledWheelChangeTimeBtn, {
@@ -68,9 +66,9 @@ const HoursList = () => {
     "data-testid": ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.TIMEWHEEL.PREV_HOUR,
     tabIndex: -1
   }, void 0, _ChevronSmallUp || (_ChevronSmallUp = /*#__PURE__*/_jsx__default["default"](dsIcons.ChevronSmallUp, {})))), visibleHours.map(hourString => {
-    const key = "timewheel-hour-".concat(hourString || '');
+    const key = `timewheel-hour-${hourString || ''}`;
     if (!hourString) return /*#__PURE__*/_jsx__default["default"](Styleds.StyledWheelListItem, {}, key);
-    const currHourTimeString = "".concat(hourString, ":").concat(currMinuteNum, " ").concat(currMeridiem);
+    const currHourTimeString = `${hourString}:${currMinuteNum} ${currMeridiem}`;
     const isEmptyCurrValueCurrentListItem = !hours && numberHelpers.convertToPositiveNumberIfPossible(hourString) === currHourNum;
     const isCurrentListItem = isEmptyCurrValueCurrentListItem || hours === hourString;
     const isDisabled = getIsDisabledTime(currHourTimeString);
@@ -89,7 +87,7 @@ const HoursList = () => {
       autoFocus: autoFocusHourTimeWheel && isCurrentListItem,
       "data-testid": ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.TIMEWHEEL[isCurrentListItem ? 'CURRENT_HOUR' : 'HOUR'],
       selected: hours.length === 2 && numberHelpers.convertToPositiveNumberIfPossible(hourString) === currHourNum,
-      "aria-label": "".concat(hourString, " hours"),
+      "aria-label": `${hourString} hours`,
       "aria-disabled": isDisabled,
       buttonType: "raw",
       size: "m",
@@ -99,7 +97,7 @@ const HoursList = () => {
       "aria-valuemax": 12,
       "aria-valuemin": 1,
       "aria-valuenow": currHourNum,
-      "aria-valuetext": "".concat(hourString, " hours")
+      "aria-valuetext": `${hourString} hours`
     }, btnProps), {}, {
       children: hourString
     })));

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

@@ -45,9 +45,9 @@ const MeridiemList = () => {
   } = React.useContext(ControlledDateTimePickerCTX.ControlledDateTimePickerContext);
   const isAmCurrent = !currMeridiem || currMeridiem === 'AM';
   const isPmCurrent = currMeridiem === 'PM';
-  const hourMinuteString = "".concat(hours || '01', ":").concat(minutes || '00');
-  const amTimeString = "".concat(hourMinuteString, " AM");
-  const pmTimeString = "".concat(hourMinuteString, " PM");
+  const hourMinuteString = `${hours || '01'}:${minutes || '00'}`;
+  const amTimeString = `${hourMinuteString} AM`;
+  const pmTimeString = `${hourMinuteString} PM`;
   const isDisabledAm = getIsDisabledTime(amTimeString);
   const isDisabledPm = getIsDisabledTime(pmTimeString);
   const styledPropsPrevMeridiem = {
@@ -66,10 +66,8 @@ const MeridiemList = () => {
   };
   const handleCurrMeridiemRef = React.useCallback(ButtonDomNode => {
     setTimeout(() => {
-      var _ButtonDomNode$focus;
-
       currMeridiemBtnRef.current = ButtonDomNode;
-      if (latestInteractionRegion === 'timewheel' && currFocusDescriber === 'timewheel-curr-meridiem') ButtonDomNode === null || ButtonDomNode === void 0 ? void 0 : (_ButtonDomNode$focus = ButtonDomNode.focus) === null || _ButtonDomNode$focus === void 0 ? void 0 : _ButtonDomNode$focus.call(ButtonDomNode);
+      if (latestInteractionRegion === 'timewheel' && currFocusDescriber === 'timewheel-curr-meridiem') ButtonDomNode?.focus?.();
     });
   }, [currFocusDescriber, latestInteractionRegion, currMeridiemBtnRef]);
   return /*#__PURE__*/_jsx__default["default"](Styleds.StyledWheelList, {}, void 0, /*#__PURE__*/_jsx__default["default"](Styleds.StyledWheelListItem, {}, void 0, /*#__PURE__*/jsxRuntime.jsx(Styleds.StyledWheelChangeTimeBtn, _objectSpread(_objectSpread({}, styledPropsPrevMeridiem), {}, {
@@ -87,7 +85,7 @@ const MeridiemList = () => {
   }, void 0, /*#__PURE__*/jsxRuntime.jsx(Styleds.StyledTimeBtn, _objectSpread(_objectSpread({}, styledPropsCurrentAmMeridiem), {}, {
     "data-testid": ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.TIMEWHEEL[isAmCurrent ? 'CURRENT_MERIDIEM' : 'MERIDIEM'],
     selected: currMeridiem === 'AM',
-    "aria-label": "AM ".concat(isAmCurrent ? 'selected' : ''),
+    "aria-label": `AM ${isAmCurrent ? 'selected' : ''}`,
     "aria-disabled": isDisabledAm,
     buttonType: "raw",
     size: "m",
@@ -106,7 +104,7 @@ const MeridiemList = () => {
   }, void 0, /*#__PURE__*/jsxRuntime.jsx(Styleds.StyledTimeBtn, _objectSpread(_objectSpread({}, styledPropsCurrentPmMeridiem), {}, {
     "data-testid": ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.TIMEWHEEL[isPmCurrent ? 'CURRENT_MERIDIEM' : 'MERIDIEM'],
     selected: currMeridiem === 'PM',
-    "aria-label": "PM ".concat(isPmCurrent ? 'selected' : ''),
+    "aria-label": `PM ${isPmCurrent ? 'selected' : ''}`,
     "aria-disabled": isDisabledPm,
     buttonType: "raw",
     size: "m",

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

@@ -52,10 +52,8 @@ const MinutesList = () => {
   } = React.useContext(ControlledDateTimePickerCTX.ControlledDateTimePickerContext);
   const handleCurrMeridiemRef = React.useCallback(ButtonDomNode => {
     setTimeout(() => {
-      var _ButtonDomNode$focus;
-
       currMinutesBtnRef.current = ButtonDomNode;
-      if (latestInteractionRegion === 'timewheel' && currFocusDescriber === 'timewheel-curr-minute') ButtonDomNode === null || ButtonDomNode === void 0 ? void 0 : (_ButtonDomNode$focus = ButtonDomNode.focus) === null || _ButtonDomNode$focus === void 0 ? void 0 : _ButtonDomNode$focus.call(ButtonDomNode);
+      if (latestInteractionRegion === 'timewheel' && currFocusDescriber === 'timewheel-curr-minute') ButtonDomNode?.focus?.();
     });
   }, [currFocusDescriber, latestInteractionRegion, currMinutesBtnRef]);
   return /*#__PURE__*/_jsx__default["default"](Styleds.StyledWheelList, {}, void 0, /*#__PURE__*/_jsx__default["default"](Styleds.StyledWheelListItem, {}, void 0, /*#__PURE__*/_jsx__default["default"](Styleds.StyledWheelChangeTimeBtn, {
@@ -67,9 +65,9 @@ const MinutesList = () => {
     tabIndex: -1,
     "data-testid": ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.TIMEWHEEL.PREV_MINUTE
   }, void 0, _ChevronSmallUp || (_ChevronSmallUp = /*#__PURE__*/_jsx__default["default"](dsIcons.ChevronSmallUp, {})))), visibleMinutes.map(minutesString => {
-    const key = "timewheel-minutes-".concat(minutesString || '');
+    const key = `timewheel-minutes-${minutesString || ''}`;
     if (!minutesString) return /*#__PURE__*/_jsx__default["default"](Styleds.StyledWheelListItem, {}, key);
-    const currMinutesTimeString = "".concat(currHourNum, ":").concat(minutesString, " ").concat(currMeridiem);
+    const currMinutesTimeString = `${currHourNum}:${minutesString} ${currMeridiem}`;
     const isEmptyCurrValueCurrentListItem = !minutes && numberHelpers.convertToPositiveNumberIfPossible(minutesString) === currMinuteNum;
     const isCurrentListItem = isEmptyCurrValueCurrentListItem || minutes === minutesString;
     const isDisabled = getIsDisabledTime(currMinutesTimeString);
@@ -88,7 +86,7 @@ const MinutesList = () => {
     }, key, /*#__PURE__*/jsxRuntime.jsx(Styleds.StyledTimeBtn, _objectSpread(_objectSpread(_objectSpread({}, styledProps), {}, {
       "data-testid": ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.TIMEWHEEL[isCurrentListItem ? 'CURRENT_MINUTE' : 'MINUTE'],
       selected: minutes.length === 2 && numberHelpers.convertToPositiveNumberIfPossible(minutesString) === currMinuteNum,
-      "aria-label": "".concat(minutesString, " minutes"),
+      "aria-label": `${minutesString} minutes`,
       "aria-disabled": isDisabled,
       buttonType: "raw",
       size: "m",
@@ -98,7 +96,7 @@ const MinutesList = () => {
       "aria-valuemax": 59,
       "aria-valuemin": 0,
       "aria-valuenow": currMinuteNum,
-      "aria-valuetext": "".concat(minutesString, " minutes")
+      "aria-valuetext": `${minutesString} minutes`
     }, btnProps), {}, {
       children: minutesString
     })));

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

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

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

@@ -2,7 +2,6 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
 var styled = require('styled-components');
 var dsSystem = require('@elliemae/ds-system');
 var dsGrid = require('@elliemae/ds-grid');
@@ -10,18 +9,37 @@ var DSButton = require('@elliemae/ds-button');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefaultLegacy(_taggedTemplateLiteral);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
-const focusBorder = dsSystem.css(_templateObject || (_templateObject = _taggedTemplateLiteral__default["default"](["\n  &:after {\n    position: absolute;\n    content: '';\n    top: -2px;\n    left: -2px;\n    width: calc(100% + 4px);\n    height: calc(100% + 4px);\n    border-radius: 50%;\n    border: 2px solid ", ";\n  }\n"])), _ref => {
+/* eslint-disable max-lines */
+const focusBorder = dsSystem.css`
+  &:after {
+    position: absolute;
+    content: '';
+    top: -2px;
+    left: -2px;
+    width: calc(100% + 4px);
+    height: calc(100% + 4px);
+    border-radius: 50%;
+    border: 2px solid ${_ref => {
   let {
     theme,
     isDisabled
   } = _ref;
   return isDisabled ? theme.colors.danger[900] : theme.colors.brand[700];
-});
-const diagonalLine = dsSystem.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default["default"](["\n  &:before {\n    position: absolute;\n    content: '';\n    top: 48%;\n    left: -1px;\n    height: 1px;\n    width: calc(100% + 2px);\n    transform: rotate(45deg);\n    background-color: ", ";\n  }\n"])), _ref2 => {
+}};
+  }
+`;
+const diagonalLine = dsSystem.css`
+  &:before {
+    position: absolute;
+    content: '';
+    top: 48%;
+    left: -1px;
+    height: 1px;
+    width: calc(100% + 2px);
+    transform: rotate(45deg);
+    background-color: ${_ref2 => {
   let {
     theme,
     isCurrentListItem,
@@ -30,8 +48,11 @@ const diagonalLine = dsSystem.css(_templateObject2 || (_templateObject2 = _tagge
   if (selected) return theme.colors.neutral['000'];
   if (isCurrentListItem) return theme.colors.danger[900];
   return theme.colors.neutral[500];
-});
-const fontColorPerStatus = dsSystem.css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral__default["default"](["\n  ", ";\n"])), _ref3 => {
+}};
+  }
+`;
+const fontColorPerStatus = dsSystem.css`
+  ${_ref3 => {
   let {
     theme,
     isDisabled,
@@ -43,8 +64,10 @@ const fontColorPerStatus = dsSystem.css(_templateObject3 || (_templateObject3 =
   if (isDisabled) return theme.colors.neutral[500];
   if (isCurrentListItem) return theme.colors.brand[600];
   return theme.colors.neutral[800];
-});
-const hoverBgPerStatus = dsSystem.css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral__default["default"](["\n  ", "\n"])), _ref4 => {
+}};
+`;
+const hoverBgPerStatus = dsSystem.css`
+  ${_ref4 => {
   let {
     theme,
     selected,
@@ -53,7 +76,8 @@ const hoverBgPerStatus = dsSystem.css(_templateObject4 || (_templateObject4 = _t
   if (isDisabled && selected) return theme.colors.danger[900];
   if (selected) return theme.colors.brand[700];
   return theme.colors.neutral['000'];
-});
+}}
+`;
 const StyledIconTriggerButton = /*#__PURE__*/styled__default["default"](DSButton.DSButtonV2).withConfig({
   componentId: "sc-u44anw-0"
 })(["color:", ";width:26px;height:26px;"], _ref5 => {
@@ -82,7 +106,9 @@ const StyledTimePickerContainer = /*#__PURE__*/styled__default["default"].div.wi
     showShadow,
     isControllerOnly
   } = _ref8;
-  return showShadow && !isControllerOnly ? "\n  box-shadow: 0 6px 20px 0 rgb(0 0 0 / 24%), 0 8px 17px 0 rgb(0 0 0 / 19%);\n  " : '';
+  return showShadow && !isControllerOnly ? `
+  box-shadow: 0 6px 20px 0 rgb(0 0 0 / 24%), 0 8px 17px 0 rgb(0 0 0 / 19%);
+  ` : '';
 });
 const StyledTimePickerHead = /*#__PURE__*/styled__default["default"](dsGrid.Grid).withConfig({
   componentId: "sc-u44anw-3"
@@ -160,19 +186,25 @@ const StyledTimeBtn = /*#__PURE__*/styled__default["default"](DSButton.DSButtonV
     selected,
     isCurrentListItem
   } = _ref21;
-  return isCurrentListItem && !selected ? focusBorder : "";
+  return isCurrentListItem && !selected ? focusBorder : ``;
 }, _ref22 => {
   let {
     isDisabled
   } = _ref22;
-  return isDisabled ? dsSystem.css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral__default["default"](["\n          cursor: not-allowed;\n          ", ";\n        "])), diagonalLine) : "";
+  return isDisabled ? dsSystem.css`
+          cursor: not-allowed;
+          ${diagonalLine};
+        ` : ``;
 }, _ref23 => {
   let {
     theme,
     selected,
     isDisabled
   } = _ref23;
-  return selected ? dsSystem.css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral__default["default"](["\n    font-weight: ", ";\n    background-color ", ";\n    "])), theme.fontWeights.semibold, isDisabled ? theme.colors.danger[900] : theme.colors.brand[700]) : "";
+  return selected ? dsSystem.css`
+    font-weight: ${theme.fontWeights.semibold};
+    background-color ${isDisabled ? theme.colors.danger[900] : theme.colors.brand[700]};
+    ` : ``;
 });
 const StyledWheelListItem = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-u44anw-7"