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

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

@@ -39,9 +39,7 @@ const HoursList = () => {
     handlePrevHour,
     handleNextHour,
     handleTimeWheelBtnChangeHours,
-    handlePrevHourBtnOnKeyDown,
-    handleCurrHourOnKeyDown,
-    handleNextHourBtnOnKeyDown
+    handleCurrHourOnKeyDown
   } = React.useContext(TimeWheelContext.TimeWheelContext);
   const {
     prevHourBtnRef,
@@ -49,28 +47,35 @@ const HoursList = () => {
     nextHourBtnRef,
     getIsDisabledTime,
     autoFocusHourTimeWheel,
-    hours
+    hours,
+    latestInteractionRegion,
+    currFocusDescriber
   } = React.useContext(ControlledDateTimePickerCTX.ControlledDateTimePickerContext);
+  const handleCurrYearRef = React.useCallback(ButtonDomNode => {
+    setTimeout(() => {
+      currHourBtnRef.current = 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, {
     "aria-label": "subtract one hour",
     buttonType: "raw",
     size: "m",
     onClick: handlePrevHour,
-    onKeyDown: handlePrevHourBtnOnKeyDown,
     innerRef: prevHourBtnRef,
     "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);
     const tabIndex = isCurrentListItem ? 0 : -1;
     const btnProps = {
       onKeyDown: isCurrentListItem ? handleCurrHourOnKeyDown : undefined,
-      innerRef: isCurrentListItem ? currHourBtnRef : undefined
+      innerRef: isCurrentListItem ? handleCurrYearRef : undefined
     };
     const styleProps = {
       isCurrentListItem,
@@ -82,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",
@@ -92,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
     })));
@@ -101,7 +106,6 @@ const HoursList = () => {
     buttonType: "raw",
     size: "m",
     onClick: handleNextHour,
-    onKeyDown: handleNextHourBtnOnKeyDown,
     innerRef: nextHourBtnRef,
     tabIndex: -1,
     "data-testid": ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.TIMEWHEEL.NEXT_HOUR

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

@@ -31,9 +31,7 @@ const MeridiemList = () => {
   const {
     currMeridiem,
     handleTimeWheelBtnChangeMeridiem,
-    handlePrevMeridiemBtnOnKeyDown,
-    handleCurrMeridiemOnKeyDown,
-    handleNextMeridiemBtnOnKeyDown
+    handleCurrMeridiemOnKeyDown
   } = React.useContext(TimeWheelContext.TimeWheelContext);
   const {
     prevMeridiemBtnRef,
@@ -41,13 +39,15 @@ const MeridiemList = () => {
     nextMeridiemBtnRef,
     getIsDisabledTime,
     hours,
-    minutes
+    minutes,
+    latestInteractionRegion,
+    currFocusDescriber
   } = 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 = {
@@ -64,6 +64,12 @@ const MeridiemList = () => {
   const styledPropsNextMeridiem = {
     isDisabled: isDisabledPm
   };
+  const handleCurrMeridiemRef = React.useCallback(ButtonDomNode => {
+    setTimeout(() => {
+      currMeridiemBtnRef.current = 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), {}, {
     "aria-label": "set am meridiem",
     "aria-disabled": isDisabledAm,
@@ -71,7 +77,6 @@ const MeridiemList = () => {
     buttonType: "raw",
     size: "m",
     onClick: e => handleTimeWheelBtnChangeMeridiem('AM', e),
-    onKeyDown: handlePrevMeridiemBtnOnKeyDown,
     innerRef: prevMeridiemBtnRef,
     tabIndex: -1,
     children: _ChevronSmallUp || (_ChevronSmallUp = /*#__PURE__*/_jsx__default["default"](dsIcons.ChevronSmallUp, {}))
@@ -80,13 +85,13 @@ 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",
     onClick: e => handleTimeWheelBtnChangeMeridiem('AM', e),
     onKeyDown: isAmCurrent ? handleCurrMeridiemOnKeyDown : undefined,
-    innerRef: isAmCurrent ? currMeridiemBtnRef : undefined,
+    innerRef: isAmCurrent ? handleCurrMeridiemRef : undefined,
     tabIndex: isAmCurrent ? 0 : -1,
     role: "spinbutton",
     "aria-valuemax": 1,
@@ -99,13 +104,13 @@ 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",
     onClick: e => handleTimeWheelBtnChangeMeridiem('PM', e),
     onKeyDown: isPmCurrent ? handleCurrMeridiemOnKeyDown : undefined,
-    innerRef: isPmCurrent ? currMeridiemBtnRef : undefined,
+    innerRef: isPmCurrent ? handleCurrMeridiemRef : undefined,
     tabIndex: isPmCurrent ? 0 : -1,
     role: "spinbutton",
     "aria-valuemax": 1,
@@ -120,7 +125,6 @@ const MeridiemList = () => {
     buttonType: "raw",
     size: "m",
     onClick: e => handleTimeWheelBtnChangeMeridiem('PM', e),
-    onKeyDown: handleNextMeridiemBtnOnKeyDown,
     innerRef: nextMeridiemBtnRef,
     tabIndex: -1,
     children: _ChevronSmallDown || (_ChevronSmallDown = /*#__PURE__*/_jsx__default["default"](dsIcons.ChevronSmallDown, {}))

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

@@ -39,37 +39,42 @@ const MinutesList = () => {
     handlePrevMinute,
     handleNextMinute,
     handleTimeWheelBtnChangeMinutes,
-    handlePrevMinuteBtnOnKeyDown,
-    handleCurrMinutesOnKeyDown,
-    handleNextMinuteBtnOnKeyDown
+    handleCurrMinutesOnKeyDown
   } = React.useContext(TimeWheelContext.TimeWheelContext);
   const {
     prevMinutesBtnRef,
     currMinutesBtnRef,
     nextMinutesBtnRef,
     getIsDisabledTime,
-    minutes
+    minutes,
+    currFocusDescriber,
+    latestInteractionRegion
   } = React.useContext(ControlledDateTimePickerCTX.ControlledDateTimePickerContext);
+  const handleCurrMeridiemRef = React.useCallback(ButtonDomNode => {
+    setTimeout(() => {
+      currMinutesBtnRef.current = 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, {
     "aria-label": "subtract one minute",
     buttonType: "raw",
     size: "m",
     onClick: handlePrevMinute,
-    onKeyDown: handlePrevMinuteBtnOnKeyDown,
     innerRef: prevMinutesBtnRef,
     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);
     const tabIndex = isCurrentListItem ? 0 : -1;
     const btnProps = {
       onKeyDown: isCurrentListItem ? handleCurrMinutesOnKeyDown : undefined,
-      innerRef: isCurrentListItem ? currMinutesBtnRef : undefined
+      innerRef: isCurrentListItem ? handleCurrMeridiemRef : undefined
     };
     const styledProps = {
       isCurrentListItem,
@@ -81,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",
@@ -91,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
     })));
@@ -100,7 +105,6 @@ const MinutesList = () => {
     buttonType: "raw",
     size: "m",
     onClick: handleNextMinute,
-    onKeyDown: handleNextMinuteBtnOnKeyDown,
     innerRef: nextMinutesBtnRef,
     "data-testid": ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.TIMEWHEEL.NEXT_MINUTE,
     tabIndex: -1

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"

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

@@ -35,7 +35,7 @@ const TimeWheelContent = /*#__PURE__*/React__default["default"].memo(_ref => {
     showShadow: showShadow,
     isControllerOnly: isControllerOnly,
     "data-testid": ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.CONTROLLER_COMPONENT.TIMEWHEEL
-  }, void 0, /*#__PURE__*/_jsx__default["default"](Styleds.StyledTimePickerHead, {}, void 0, "".concat(hours || '__', ":").concat(minutes || '__', " ").concat(meridiem || '__')), _StyledTimePickerWhee || (_StyledTimePickerWhee = /*#__PURE__*/_jsx__default["default"](Styleds.StyledTimePickerWheelsLegend, {}, void 0, /*#__PURE__*/_jsx__default["default"]("div", {}, void 0, "H"), /*#__PURE__*/_jsx__default["default"]("div", {}, void 0, "M"), /*#__PURE__*/_jsx__default["default"]("div", {}, void 0, "A"))), _StyledTimePickerWhee2 || (_StyledTimePickerWhee2 = /*#__PURE__*/_jsx__default["default"](Styleds.StyledTimePickerWheelWrapper, {}, void 0, /*#__PURE__*/_jsx__default["default"](HoursList.HoursList, {}), /*#__PURE__*/_jsx__default["default"](MinutesList.MinutesList, {}), /*#__PURE__*/_jsx__default["default"](MeridiemList.MeridiemList, {}))), _TimeWheelFooter || (_TimeWheelFooter = /*#__PURE__*/_jsx__default["default"](TimeWheelFooter.TimeWheelFooter, {})));
+  }, void 0, /*#__PURE__*/_jsx__default["default"](Styleds.StyledTimePickerHead, {}, void 0, `${hours || '__'}:${minutes || '__'} ${meridiem || '__'}`), _StyledTimePickerWhee || (_StyledTimePickerWhee = /*#__PURE__*/_jsx__default["default"](Styleds.StyledTimePickerWheelsLegend, {}, void 0, /*#__PURE__*/_jsx__default["default"]("div", {}, void 0, "H"), /*#__PURE__*/_jsx__default["default"]("div", {}, void 0, "M"), /*#__PURE__*/_jsx__default["default"]("div", {}, void 0, "A"))), _StyledTimePickerWhee2 || (_StyledTimePickerWhee2 = /*#__PURE__*/_jsx__default["default"](Styleds.StyledTimePickerWheelWrapper, {}, void 0, /*#__PURE__*/_jsx__default["default"](HoursList.HoursList, {}), /*#__PURE__*/_jsx__default["default"](MinutesList.MinutesList, {}), /*#__PURE__*/_jsx__default["default"](MeridiemList.MeridiemList, {}))), _TimeWheelFooter || (_TimeWheelFooter = /*#__PURE__*/_jsx__default["default"](TimeWheelFooter.TimeWheelFooter, {})));
 });
 
 exports.TimeWheelContent = TimeWheelContent;

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

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

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

@@ -18,7 +18,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) => stringHelpers.prependStringWithPlaceHolders("".concat(i * step), 2));
+  return new Array(length).fill('_').map((_v, i) => stringHelpers.prependStringWithPlaceHolders(`${i * step}`, 2));
 };
 
 const useCurrentDisplayedWheelsLogic = () => {
@@ -95,7 +95,7 @@ const useCurrentDisplayedWheelsLogic = () => {
   }, [handleChangeHours]);
   const handleChangeCurrHour = React.useCallback((offset, e) => {
     const newH = currHourNum + offset;
-    if (newH > 0 && newH <= 12) handleChangeHours(stringHelpers.prependStringWithPlaceHolders("".concat(newH), 2), e);
+    if (newH > 0 && newH <= 12) handleChangeHours(stringHelpers.prependStringWithPlaceHolders(`${newH}`, 2), e);
   }, [currHourNum, handleChangeHours]);
   const handlePrevHour = React.useCallback(e => {
     handleChangeCurrHour(-1, e);
@@ -108,7 +108,7 @@ const useCurrentDisplayedWheelsLogic = () => {
   }, [handleChangeMinutes]);
   const handleChangeCurrMinute = React.useCallback((offset, e) => {
     const newM = currMinuteNum + offset;
-    if (newM >= 0 && newM <= 59) handleChangeMinutes(stringHelpers.prependStringWithPlaceHolders("".concat(newM), 2), e);
+    if (newM >= 0 && newM <= 59) handleChangeMinutes(stringHelpers.prependStringWithPlaceHolders(`${newM}`, 2), e);
   }, [currMinuteNum, handleChangeMinutes]);
   const handlePrevMinute = React.useCallback(e => {
     handleChangeCurrMinute(-minutesInterval, e);