@elliemae/ds-controlled-form 2.4.2-rc.12 → 2.4.2-rc.13

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

@@ -36,9 +36,9 @@ const MeridiemList = () => {
   } = useContext(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 = {
@@ -57,10 +57,8 @@ const MeridiemList = () => {
   };
   const handleCurrMeridiemRef = 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(StyledWheelList, {}, void 0, /*#__PURE__*/_jsx(StyledWheelListItem, {}, void 0, /*#__PURE__*/jsx(StyledWheelChangeTimeBtn, _objectSpread(_objectSpread({}, styledPropsPrevMeridiem), {}, {
@@ -78,7 +76,7 @@ const MeridiemList = () => {
   }, void 0, /*#__PURE__*/jsx(StyledTimeBtn, _objectSpread(_objectSpread({}, styledPropsCurrentAmMeridiem), {}, {
     "data-testid": 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",
@@ -97,7 +95,7 @@ const MeridiemList = () => {
   }, void 0, /*#__PURE__*/jsx(StyledTimeBtn, _objectSpread(_objectSpread({}, styledPropsCurrentPmMeridiem), {}, {
     "data-testid": 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/esm/date-time-picker/parts/Pickers/TimeWheel/MinutesList.js

@@ -43,10 +43,8 @@ const MinutesList = () => {
   } = useContext(ControlledDateTimePickerContext);
   const handleCurrMeridiemRef = 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(StyledWheelList, {}, void 0, /*#__PURE__*/_jsx(StyledWheelListItem, {}, void 0, /*#__PURE__*/_jsx(StyledWheelChangeTimeBtn, {
@@ -58,9 +56,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-".concat(minutesString || '');
+    const key = `timewheel-minutes-${minutesString || ''}`;
     if (!minutesString) return /*#__PURE__*/_jsx(StyledWheelListItem, {}, key);
-    const currMinutesTimeString = "".concat(currHourNum, ":").concat(minutesString, " ").concat(currMeridiem);
+    const currMinutesTimeString = `${currHourNum}:${minutesString} ${currMeridiem}`;
     const isEmptyCurrValueCurrentListItem = !minutes && convertToPositiveNumberIfPossible(minutesString) === currMinuteNum;
     const isCurrentListItem = isEmptyCurrValueCurrentListItem || minutes === minutesString;
     const isDisabled = getIsDisabledTime(currMinutesTimeString);
@@ -79,7 +77,7 @@ const MinutesList = () => {
     }, key, /*#__PURE__*/jsx(StyledTimeBtn, _objectSpread(_objectSpread(_objectSpread({}, styledProps), {}, {
       "data-testid": ControlledDateTimePickerDatatestid.TIMEWHEEL[isCurrentListItem ? 'CURRENT_MINUTE' : 'MINUTE'],
       selected: minutes.length === 2 && convertToPositiveNumberIfPossible(minutesString) === currMinuteNum,
-      "aria-label": "".concat(minutesString, " minutes"),
+      "aria-label": `${minutesString} minutes`,
       "aria-disabled": isDisabled,
       buttonType: "raw",
       size: "m",
@@ -89,7 +87,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/esm/date-time-picker/parts/Pickers/TimeWheel/SecondsList.js

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

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

@@ -1,18 +1,37 @@
-import _taggedTemplateLiteral from '@babel/runtime/helpers/esm/taggedTemplateLiteral';
 import styled from 'styled-components';
 import { css } from '@elliemae/ds-system';
 import { Grid } from '@elliemae/ds-grid';
 import { DSButtonV2 } from '@elliemae/ds-button';
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
-const focusBorder = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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 = 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 = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\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 = css`
+  &:before {
+    position: absolute;
+    content: '';
+    top: 48%;
+    left: -1px;
+    height: 1px;
+    width: calc(100% + 2px);
+    transform: rotate(45deg);
+    background-color: ${_ref2 => {
   let {
     theme,
     isCurrentListItem,
@@ -21,8 +40,11 @@ const diagonalLine = css(_templateObject2 || (_templateObject2 = _taggedTemplate
   if (selected) return theme.colors.neutral['000'];
   if (isCurrentListItem) return theme.colors.danger[900];
   return theme.colors.neutral[500];
-});
-const fontColorPerStatus = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  ", ";\n"])), _ref3 => {
+}};
+  }
+`;
+const fontColorPerStatus = css`
+  ${_ref3 => {
   let {
     theme,
     isDisabled,
@@ -34,8 +56,10 @@ const fontColorPerStatus = css(_templateObject3 || (_templateObject3 = _taggedTe
   if (isDisabled) return theme.colors.neutral[500];
   if (isCurrentListItem) return theme.colors.brand[600];
   return theme.colors.neutral[800];
-});
-const hoverBgPerStatus = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  ", "\n"])), _ref4 => {
+}};
+`;
+const hoverBgPerStatus = css`
+  ${_ref4 => {
   let {
     theme,
     selected,
@@ -44,7 +68,8 @@ const hoverBgPerStatus = css(_templateObject4 || (_templateObject4 = _taggedTemp
   if (isDisabled && selected) return theme.colors.danger[900];
   if (selected) return theme.colors.brand[700];
   return theme.colors.neutral['000'];
-});
+}}
+`;
 const StyledIconTriggerButton = /*#__PURE__*/styled(DSButtonV2).withConfig({
   componentId: "sc-u44anw-0"
 })(["color:", ";width:26px;height:26px;"], _ref5 => {
@@ -73,7 +98,9 @@ const StyledTimePickerContainer = /*#__PURE__*/styled.div.withConfig({
     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(Grid).withConfig({
   componentId: "sc-u44anw-3"
@@ -151,19 +178,25 @@ const StyledTimeBtn = /*#__PURE__*/styled(DSButtonV2).withConfig({
     selected,
     isCurrentListItem
   } = _ref21;
-  return isCurrentListItem && !selected ? focusBorder : "";
+  return isCurrentListItem && !selected ? focusBorder : ``;
 }, _ref22 => {
   let {
     isDisabled
   } = _ref22;
-  return isDisabled ? css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n          cursor: not-allowed;\n          ", ";\n        "])), diagonalLine) : "";
+  return isDisabled ? css`
+          cursor: not-allowed;
+          ${diagonalLine};
+        ` : ``;
 }, _ref23 => {
   let {
     theme,
     selected,
     isDisabled
   } = _ref23;
-  return selected ? css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    font-weight: ", ";\n    background-color ", ";\n    "])), theme.fontWeights.semibold, isDisabled ? theme.colors.danger[900] : theme.colors.brand[700]) : "";
+  return selected ? css`
+    font-weight: ${theme.fontWeights.semibold};
+    background-color ${isDisabled ? theme.colors.danger[900] : theme.colors.brand[700]};
+    ` : ``;
 });
 const StyledWheelListItem = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-u44anw-7"

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

@@ -26,7 +26,7 @@ const TimeWheelContent = /*#__PURE__*/React.memo(_ref => {
     showShadow: showShadow,
     isControllerOnly: isControllerOnly,
     "data-testid": ControlledDateTimePickerDatatestid.CONTROLLER_COMPONENT.TIMEWHEEL
-  }, 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, {})));
+  }, 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, {})));
 });
 
 export { TimeWheelContent };

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

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

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

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

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

@@ -1,4 +1,3 @@
-import 'core-js/modules/web.dom-collections.iterator.js';
 import { useContext, useState, useCallback, useMemo } from 'react';
 import { usePopper } from 'react-popper';
 import { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';
@@ -44,14 +43,12 @@ const usePopperTriggerLogic = () => {
     });
   }, [isWithCalendarToo, onPickerClose, onPickerOpen, trackFocusTimewheelCurrHour]);
   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))) closeTimePicker();
+    if (e.target instanceof Element && !pickerButtonRef?.current?.contains?.(e?.target)) closeTimePicker();
   });
   const handleSetTriggerRef = useCallback(newRef => {
     pickerButtonRef.current = newRef;
     setReferenceElement(newRef);
-    if (latestInteractionRegion === 'picker-icon' && currFocusDescriber === 'time-picker-icon') newRef === null || newRef === void 0 ? void 0 : newRef.focus();
+    if (latestInteractionRegion === 'picker-icon' && currFocusDescriber === 'time-picker-icon') newRef?.focus();
   }, [currFocusDescriber, latestInteractionRegion, pickerButtonRef]);
   const handleMenuWrapperKeyDown = useCallback(e => {
     const {

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

@@ -18,7 +18,7 @@ const Styled2DigitsInput = /*#__PURE__*/styled(ResettedInput).withConfig({
   let {
     disabled
   } = _ref;
-  return disabled ? "color: #616b7f;" : "";
+  return disabled ? `color: #616b7f;` : ``;
 });
 const StyledMin4DigitsInput = /*#__PURE__*/styled(ResettedInput).withConfig({
   componentId: "sc-2wbvze-4"
@@ -26,7 +26,7 @@ const StyledMin4DigitsInput = /*#__PURE__*/styled(ResettedInput).withConfig({
   let {
     disabled
   } = _ref2;
-  return disabled ? "color: #616b7f;" : "";
+  return disabled ? `color: #616b7f;` : ``;
 });
 const StyledInputsWrapperGrid = /*#__PURE__*/styled(Grid).withConfig({
   componentId: "sc-2wbvze-5"
@@ -34,7 +34,11 @@ const StyledInputsWrapperGrid = /*#__PURE__*/styled(Grid).withConfig({
   let {
     isControllerOnly
   } = _ref3;
-  return isControllerOnly ? "" : "\n  height: 28px;    \n  border-width: 1px;\n  border-style: solid;\n  ";
+  return isControllerOnly ? `` : `
+  height: 28px;    
+  border-width: 1px;
+  border-style: solid;
+  `;
 }, _ref4 => {
   let {
     theme,
@@ -59,7 +63,7 @@ const StyledInputsWrapperGrid = /*#__PURE__*/styled(Grid).withConfig({
     theme,
     disabled
   } = _ref7;
-  return disabled ? "background-color: ".concat(theme.colors.neutral[100], ";") : "";
+  return disabled ? `background-color: ${theme.colors.neutral[100]};` : ``;
 });
 const StyledDateInputsWrapperGrid = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-2wbvze-6"
@@ -73,14 +77,16 @@ const StyledPickersIconsWrapperGrid = /*#__PURE__*/styled(Grid).withConfig({
   let {
     isControllerOnly
   } = _ref8;
-  return isControllerOnly ? "" : "height: 26px;";
+  return isControllerOnly ? `` : `height: 26px;`;
 }, _ref9 => {
   let {
     theme,
     isControllerOnly,
     hasError
   } = _ref9;
-  return isControllerOnly ? "" : "\n    border-left: 1px solid ".concat(hasError ? theme.colors.danger[900] : theme.colors.neutral[200], "\n    ");
+  return isControllerOnly ? `` : `
+    border-left: 1px solid ${hasError ? theme.colors.danger[900] : theme.colors.neutral[200]}
+    `;
 });
 const StyledFocusWithIn = /*#__PURE__*/styled(Grid).withConfig({
   componentId: "sc-2wbvze-9"

package/esm/date-time-picker/parts/TimeInputs/HHInput.js

@@ -41,13 +41,11 @@ const HHInput = /*#__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": "hours input field ".concat(ariaCurrentValueForInputs),
+    "aria-label": `hours input field ${ariaCurrentValueForInputs}`,
     "data-testid": ControlledDateTimePickerDatatestid.TIME_INPUTS.HOUR,
     disabled: disabled,
     "aria-disabled": disabled

package/esm/date-time-picker/parts/TimeInputs/MeridiemInput.js

@@ -1,4 +1,3 @@
-import 'core-js/modules/web.dom-collections.iterator.js';
 import React, { useCallback } from 'react';
 import { Styled2DigitsInput } from '../Styleds.js';
 import { ControlledDateTimePickerDatatestid } from '../../ControlledDateTimePickerDatatestid.js';
@@ -29,9 +28,7 @@ const MeridiemInput = /*#__PURE__*/React.memo(_ref => {
     isFocused
   } = _ref;
   const validateOnChange = useCallback(e => {
-    var _e$target;
-
-    if (isInvalidMeridiem(e === null || e === void 0 ? void 0 : (_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.value)) {
+    if (isInvalidMeridiem(e?.target?.value)) {
       e.preventDefault();
       return;
     }
@@ -45,13 +42,11 @@ const MeridiemInput = /*#__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": "meridiem input field ".concat(ariaCurrentValueForInputs),
+    "aria-label": `meridiem input field ${ariaCurrentValueForInputs}`,
     "data-testid": ControlledDateTimePickerDatatestid.TIME_INPUTS.MERIDIEM,
     disabled: disabled,
     "aria-disabled": disabled

package/esm/date-time-picker/parts/TimeInputs/MinutesInput.js

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

package/esm/date-time-picker/parts/TimeInputs/useTimeInputs.js

@@ -39,9 +39,7 @@ const useTimeInputs = () => {
     trackFocusHourInput();
   }, [trackFocusHourInput]);
   const onHoursChange = useCallback(e => {
-    var _e$target;
-
-    let newHours = e === null || e === void 0 ? void 0 : (_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.value; // converts hours 2~9 to 07~09
+    let newHours = e?.target?.value; // converts hours 2~9 to 07~09
 
     if (Number.parseInt(newHours, 10) > 1) newHours = prependStringWithPlaceHolders(newHours, 2);
     handleChangeHours(newHours, e); // auto-advance functionality:
@@ -64,12 +62,12 @@ const useTimeInputs = () => {
       const hoursInteger = Number.isNaN(hoursStringConvertedToInteger) ? 0 : hoursStringConvertedToInteger;
       let newHours;
       if (key === 'ArrowUp') newHours = hoursInteger + 1 <= 12 ? hoursInteger + 1 : hoursInteger;else newHours = hoursInteger - 1 > 1 ? hoursInteger - 1 : 1;
-      newHours = prependStringWithPlaceHolders("".concat(newHours), 2);
+      newHours = prependStringWithPlaceHolders(`${newHours}`, 2);
       handleChangeHours(newHours, e);
     }
 
     if (!Number.isNaN(hoursStringConvertedToInteger) && key === ':') {
-      const newHours = prependStringWithPlaceHolders("".concat(hoursStringConvertedToInteger), 2);
+      const newHours = prependStringWithPlaceHolders(`${hoursStringConvertedToInteger}`, 2);
       handleChangeHours(newHours, e); // auto-advance functionality:
 
       if (newHours.length === 2) trackFocusMinuteInput();
@@ -84,9 +82,7 @@ const useTimeInputs = () => {
     if ((ctrlKey || metaKey) && key === ';') trackFocusLastSegment();
   }, [hours, isWithDateInputs, trackFocusYearInput, onHomeKeyDown, onEndKeyDown, trackFocusLastSegment, trackFocusMinuteInput, handleChangeHours]);
   const onHoursBlur = useCallback(e => {
-    var _e$target2;
-
-    const newHours = e === null || e === void 0 ? void 0 : (_e$target2 = e.target) === null || _e$target2 === void 0 ? void 0 : _e$target2.value;
+    const newHours = e?.target?.value;
     if (newHours === '0') handleChangeHours('01', e, {
       isAutomaticFillTrigger: true
     });else if (newHours.length > 0 && newHours.length < 2) handleChangeHours(prependStringWithPlaceHolders(newHours, 2), e, {
@@ -97,9 +93,7 @@ const useTimeInputs = () => {
     trackFocusMinuteInput();
   }, [trackFocusMinuteInput]);
   const onMinutesChange = useCallback(e => {
-    var _e$target3;
-
-    let newMinutes = e === null || e === void 0 ? void 0 : (_e$target3 = e.target) === null || _e$target3 === void 0 ? void 0 : _e$target3.value; // converts minutes 7~9 to 07~09
+    let newMinutes = e?.target?.value; // converts minutes 7~9 to 07~09
 
     if (Number.parseInt(newMinutes, 10) > 6) newMinutes = prependStringWithPlaceHolders(newMinutes, 2);
     handleChangeMinutes(newMinutes, e); // auto-advance functionality:
@@ -122,19 +116,19 @@ const useTimeInputs = () => {
       const minutesInteger = Number.isNaN(minutesStringConvertedToInteger) ? 0 : minutesStringConvertedToInteger;
       let newMinutes;
       if (key === 'ArrowUp') newMinutes = minutesInteger + minutesInterval <= 59 ? minutesInteger + minutesInterval : minutesInteger;else newMinutes = minutesInteger - minutesInterval > 0 ? minutesInteger - minutesInterval : 0;
-      newMinutes = prependStringWithPlaceHolders("".concat(newMinutes), 2);
+      newMinutes = prependStringWithPlaceHolders(`${newMinutes}`, 2);
       handleChangeMinutes(newMinutes, e);
     }
 
     if (!Number.isNaN(minutesStringConvertedToInteger) && key === ' ') {
-      const newMinutes = prependStringWithPlaceHolders("".concat(minutesStringConvertedToInteger), 2);
+      const newMinutes = prependStringWithPlaceHolders(`${minutesStringConvertedToInteger}`, 2);
       handleChangeMinutes(newMinutes, e); // auto-advance functionality:
 
       if (newMinutes.length === 2) trackFocusMeridiemInput();
     } // regressive backspace functionality
 
 
-    if (key === 'Backspace' && (minutes === null || minutes === void 0 ? void 0 : minutes.length) === 0) {
+    if (key === 'Backspace' && minutes?.length === 0) {
       trackFocusHourInput();
     } // focus last fragment on fill with now
 
@@ -142,9 +136,7 @@ const useTimeInputs = () => {
     if ((ctrlKey || metaKey) && key === ';') trackFocusLastSegment();
   }, [minutes, onHomeKeyDown, onEndKeyDown, trackFocusLastSegment, minutesInterval, handleChangeMinutes, trackFocusMeridiemInput, trackFocusHourInput]);
   const onMinutesBlur = useCallback(e => {
-    var _e$target4;
-
-    const newMinutes = e === null || e === void 0 ? void 0 : (_e$target4 = e.target) === null || _e$target4 === void 0 ? void 0 : _e$target4.value;
+    const newMinutes = e?.target?.value;
     if (newMinutes.length > 0 && newMinutes.length < 2) handleChangeMinutes(prependStringWithPlaceHolders(newMinutes, 2), e, {
       isAutomaticFillTrigger: true
     });
@@ -153,13 +145,11 @@ const useTimeInputs = () => {
     trackFocusMeridiemInput();
   }, [trackFocusMeridiemInput]);
   const onMeridiemChange = useCallback(e => {
-    var _e$target5, _e$target5$value, _e$target5$value$toUp;
-
-    let newMeridiem = e === null || e === void 0 ? void 0 : (_e$target5 = e.target) === null || _e$target5 === void 0 ? void 0 : (_e$target5$value = _e$target5.value) === null || _e$target5$value === void 0 ? void 0 : (_e$target5$value$toUp = _e$target5$value.toUpperCase) === null || _e$target5$value$toUp === void 0 ? void 0 : _e$target5$value$toUp.call(_e$target5$value); // if new value is length 1,
+    let newMeridiem = e?.target?.value?.toUpperCase?.(); // if new value is length 1,
     //   if previous value was empty, auto-complete
     //   if previous value was not empty, set to empty (regressive backspace)
 
-    if (newMeridiem.length === 1) if (meridiem === '') newMeridiem = "".concat(newMeridiem, "M");else newMeridiem = '';
+    if (newMeridiem.length === 1) if (meridiem === '') newMeridiem = `${newMeridiem}M`;else newMeridiem = '';
     handleChangeMeridiem(newMeridiem, e); // auto-advance functionality:
 
     if (newMeridiem.length === 2 && withAnyRightController) {
@@ -180,17 +170,15 @@ const useTimeInputs = () => {
     if (key === 'ArrowDown' && meridiem !== 'PM') handleChangeMeridiem('PM', e); // regressive backspace functionality
 
     if (key === 'Backspace') {
-      if ((meridiem === null || meridiem === void 0 ? void 0 : meridiem.length) === 2) handleChangeMeridiem('', e);else trackFocusMinuteInput();
+      if (meridiem?.length === 2) handleChangeMeridiem('', e);else trackFocusMinuteInput();
     } // focus last fragment on fill with now
 
 
     if ((ctrlKey || metaKey) && key === ';') trackFocusLastSegment();
   }, [onHomeKeyDown, onEndKeyDown, meridiem, handleChangeMeridiem, trackFocusLastSegment, trackFocusMinuteInput]);
   const onMeridiemBlur = useCallback(e => {
-    var _e$target6, _e$target6$value, _e$target6$value$toUp;
-
-    const newMeridiem = e === null || e === void 0 ? void 0 : (_e$target6 = e.target) === null || _e$target6 === void 0 ? void 0 : (_e$target6$value = _e$target6.value) === null || _e$target6$value === void 0 ? void 0 : (_e$target6$value$toUp = _e$target6$value.toUpperCase) === null || _e$target6$value$toUp === void 0 ? void 0 : _e$target6$value$toUp.call(_e$target6$value);
-    if (newMeridiem.length === 1) handleChangeMeridiem("".concat(newMeridiem, "M"), e, {
+    const newMeridiem = e?.target?.value?.toUpperCase?.();
+    if (newMeridiem.length === 1) handleChangeMeridiem(`${newMeridiem}M`, e, {
       isAutomaticFillTrigger: true
     });
   }, [handleChangeMeridiem]);