@elliemae/ds-controlled-form 2.0.0-alpha.10 → 2.0.0-alpha.14

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';
@@ -5,20 +6,25 @@ import { ControlledDateTimePickerContext } from '../../../ControlledDateTimePick
 import { useOnClickOutside } from '../../../utils/hooks/useOnClickOutside.js';
 import { CalendarContext } from '../Calendar/CalendarContext.js';
 import { TimeWheelContext } from '../TimeWheel/TimeWheelContext.js';
+import { homeEndKeys } from '../../../utils/constants.js';
 
-/* eslint-disable max-statements */
 const useConfigCalendarWithTimeWheelCTX = () => {
   const {
     pickerButtonRef,
     props: {
       type,
       onPickerOpen,
-      onPickerClose
+      onPickerClose,
+      disabled
     },
     hideDate,
     hideTime,
     monthInputRef,
     hourInputRef,
+    withAnyInputs,
+    isWithTimeInputs,
+    meridiemInputRef,
+    yearInputRef,
     ariaCurrentValueForInputs
   } = useContext(ControlledDateTimePickerContext);
   const {
@@ -37,12 +43,16 @@ const useConfigCalendarWithTimeWheelCTX = () => {
     const {
       key
     } = e;
-    const preventDefaultKeys = ['Home', 'End'];
-    const stopPropagationKeys = ['Home', 'End'];
-    if (preventDefaultKeys.includes(key)) e.preventDefault();
-    if (stopPropagationKeys.includes(key)) e.stopPropagation();
+    if (homeEndKeys.includes(key)) e.preventDefault();
+    if (homeEndKeys.includes(key)) e.stopPropagation();
     if (key === 'Home') onHomeKeyDown();
-  }, [onHomeKeyDown]);
+
+    if (key === 'Backspace' && withAnyInputs) {
+      var _meridiemInputRef$cur, _meridiemInputRef$cur2, _yearInputRef$current, _yearInputRef$current2;
+
+      if (isWithTimeInputs) meridiemInputRef === null || meridiemInputRef === void 0 ? void 0 : (_meridiemInputRef$cur = meridiemInputRef.current) === null || _meridiemInputRef$cur === void 0 ? void 0 : (_meridiemInputRef$cur2 = _meridiemInputRef$cur.focus) === null || _meridiemInputRef$cur2 === void 0 ? void 0 : _meridiemInputRef$cur2.call(_meridiemInputRef$cur);else yearInputRef === null || yearInputRef === void 0 ? void 0 : (_yearInputRef$current = yearInputRef.current) === null || _yearInputRef$current === void 0 ? void 0 : (_yearInputRef$current2 = _yearInputRef$current.focus) === null || _yearInputRef$current2 === void 0 ? void 0 : _yearInputRef$current2.call(_yearInputRef$current);
+    }
+  }, [isWithTimeInputs, meridiemInputRef, onHomeKeyDown, withAnyInputs, yearInputRef]);
   const [referenceElement, setReferenceElement] = useState(null);
   const [popperElement, setPopperElement] = useState(null);
   const [arrowElement, setArrowElement] = useState(null);
@@ -101,8 +111,9 @@ const useConfigCalendarWithTimeWheelCTX = () => {
     handleMenuWrapperKeyDown,
     handlePickerIconKeyDown,
     isControllerOnly,
+    disabled,
     ariaCurrentValueForInputs
-  }), [showCalendarWithTimeWheel, usePopperHelpers, handleToggleCalendarWithTimeWheel, handleSetTriggerRef, handleMenuWrapperKeyDown, handlePickerIconKeyDown, isControllerOnly, ariaCurrentValueForInputs]);
+  }), [showCalendarWithTimeWheel, usePopperHelpers, handleToggleCalendarWithTimeWheel, handleSetTriggerRef, handleMenuWrapperKeyDown, handlePickerIconKeyDown, isControllerOnly, disabled, ariaCurrentValueForInputs]);
 };
 
 export { useConfigCalendarWithTimeWheelCTX };

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

@@ -1,5 +1,12 @@
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'core-js/modules/esnext.async-iterator.map.js';
+import 'core-js/modules/esnext.iterator.map.js';
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
 import { useContext } from 'react';
 import { ChevronSmallUp, ChevronSmallDown } from '@elliemae/ds-icons';
 import { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid.js';
@@ -42,9 +49,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 +67,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 +78,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,8 @@ const MeridiemList = () => {
   }, void 0, /*#__PURE__*/_jsx(StyledTimeBtn, {
     isCurrentListItem: isPmCurrent,
     "data-testid": ControlledDateTimePickerDatatestid.TIMEWHEEL[isPmCurrent ? 'CURRENT_MERIDIEM' : 'MERIDIEM'],
-    "aria-label": `PM ${isPmCurrent ? 'selected' : ''}`,
+    selected: meridiem === 'PM',
+    "aria-label": "PM ".concat(isPmCurrent ? 'selected' : ''),
     "aria-disabled": isDisabledPm,
     isDisabled: isDisabledPm,
     buttonType: "raw",

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

@@ -1,5 +1,12 @@
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'core-js/modules/esnext.async-iterator.map.js';
+import 'core-js/modules/esnext.iterator.map.js';
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
 import { useContext } from 'react';
 import { ChevronSmallUp, ChevronSmallDown } from '@elliemae/ds-icons';
 import { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid.js';
@@ -41,9 +48,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 +66,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 +77,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

@@ -1,9 +1,15 @@
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'core-js/modules/esnext.async-iterator.map.js';
+import 'core-js/modules/esnext.iterator.map.js';
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
 import { useContext } from 'react';
-import DSButton, { BUTTON_VARIANT } from '@elliemae/ds-basic/Button';
-import ChevronSmallUp from '@elliemae/ds-icons/ChevronSmallUp';
-import ChevronSmallDown from '@elliemae/ds-icons/ChevronSmallDown';
+import DSButton, { BUTTON_VARIANT } from '@elliemae/ds-button';
+import { ChevronSmallUp, ChevronSmallDown } from '@elliemae/ds-icons';
 import { convertToPositiveNumberIfPossible } from '../../../utils/numberHelpers.js';
 import { StyledWheelList, StyledWheelListItem, StyledWheelChangeTimeBtn } from './Styleds.js';
 import { TimeWheelContext } from './TimeWheelContext.js';
@@ -39,7 +45,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 +57,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

@@ -1,162 +1,223 @@
+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';
 
-/* eslint-disable max-lines */
+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 => {
+  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 => {
+  let {
+    theme,
+    isCurrentListItem,
+    selected
+  } = _ref2;
+  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 => {
+  let {
+    theme,
+    isDisabled,
+    isCurrentListItem,
+    selected
+  } = _ref3;
+  if (selected) return theme.colors.neutral['000'];
+  if (isDisabled && isCurrentListItem) return theme.colors.danger[900];
+  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 => {
+  let {
+    theme,
+    selected,
+    isDisabled
+  } = _ref4;
+  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-1nsw31l-0"
-})(["color:", ";width:26px;height:26px;"], ({
-  theme
-}) => theme.colors.brand['600']);
+})(["color:", ";width:26px;height:26px;"], _ref5 => {
+  let {
+    theme
+  } = _ref5;
+  return theme.colors.brand['600'];
+});
 const StyledWheelList = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-1nsw31l-1"
-})(["width:100%;height:100%;margin:auto;padding:0;position:relative;display:flex;flex-direction:column;align-items:center;&:focus-within{&:before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;border-radius:2px;border:2px solid ", ";box-shadow:0 0 2px ", ";}}"], ({
-  theme
-}) => theme.colors.brand[700], ({
-  theme
-}) => theme.colors.brand[700]);
+})(["width:100%;height:100%;margin:auto;padding:0;position:relative;display:flex;flex-direction:column;align-items:center;&:focus-within{&:before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;border-radius:2px;border:2px solid ", ";box-shadow:0 0 2px ", ";}}"], _ref6 => {
+  let {
+    theme
+  } = _ref6;
+  return theme.colors.brand[700];
+}, _ref7 => {
+  let {
+    theme
+  } = _ref7;
+  return theme.colors.brand[700];
+});
 const StyledTimePickerContainer = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-1nsw31l-2"
-})(["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%);
-  ` : '');
+})(["display:grid;position:relative;grid-template-columns:192px;grid-template-rows:36px 30px auto;grid-template-areas:'TimePickerHead' 'TimePickerWheelsLegend' 'VerticalWheelWrapper';", ""], _ref8 => {
+  let {
+    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  " : '';
+});
 const StyledTimePickerHead = /*#__PURE__*/styled(Grid).withConfig({
   componentId: "sc-1nsw31l-3"
-})(["width:100%;grid-area:TimePickerHead;justify-content:center;align-items:center;background:", ";"], ({
-  theme
-}) => theme.colors.neutral['050']);
+})(["width:100%;grid-area:TimePickerHead;justify-content:center;align-items:center;background:", ";"], _ref9 => {
+  let {
+    theme
+  } = _ref9;
+  return theme.colors.neutral['050'];
+});
 const StyledTimePickerWheelsLegend = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-1nsw31l-4"
-})(["width:100%;height:100;grid-area:TimePickerWheelsLegend;display:grid;grid-template-columns:", " ", " ", ";align-items:center;justify-content:center;text-align:center;background:", ";"], ({
-  theme
-}) => theme.space.xl, ({
-  theme
-}) => theme.space.xl, ({
-  theme
-}) => theme.space.xl, ({
-  theme
-}) => theme.colors.neutral['050']);
+})(["width:100%;height:100;grid-area:TimePickerWheelsLegend;display:grid;grid-template-columns:", " ", " ", ";align-items:center;justify-content:center;text-align:center;background:", ";"], _ref10 => {
+  let {
+    theme
+  } = _ref10;
+  return theme.space.xl;
+}, _ref11 => {
+  let {
+    theme
+  } = _ref11;
+  return theme.space.xl;
+}, _ref12 => {
+  let {
+    theme
+  } = _ref12;
+  return theme.space.xl;
+}, _ref13 => {
+  let {
+    theme
+  } = _ref13;
+  return theme.colors.neutral['050'];
+});
 const StyledTimePickerWheelWrapper = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-1nsw31l-5"
-})(["width:100%;background:", ";grid-area:VerticalWheelWrapper;display:grid;grid-template-columns:", " ", " ", ";grid-template-rows:100%;& ul:not(:last-child){position:relative;&:after{content:'';position:absolute;left:100%;top:5%;height:90%;width:1px;background:", ";}}"], ({
-  theme
-}) => theme.colors.neutral['000'], ({
-  theme
-}) => theme.space.xl, ({
-  theme
-}) => theme.space.xl, ({
-  theme
-}) => theme.space.xl, ({
-  theme
-}) => theme.colors.neutral[200]);
+})(["width:100%;background:", ";grid-area:VerticalWheelWrapper;display:grid;grid-template-columns:", " ", " ", ";grid-template-rows:100%;& ul:not(:last-child){position:relative;&:after{content:'';position:absolute;left:100%;top:5%;height:90%;width:1px;background:", ";}}"], _ref14 => {
+  let {
+    theme
+  } = _ref14;
+  return theme.colors.neutral['000'];
+}, _ref15 => {
+  let {
+    theme
+  } = _ref15;
+  return theme.space.xl;
+}, _ref16 => {
+  let {
+    theme
+  } = _ref16;
+  return theme.space.xl;
+}, _ref17 => {
+  let {
+    theme
+  } = _ref17;
+  return theme.space.xl;
+}, _ref18 => {
+  let {
+    theme
+  } = _ref18;
+  return theme.colors.neutral[200];
+});
 const StyledTimeBtn = /*#__PURE__*/styled(DSButtonV2).withConfig({
   componentId: "sc-1nsw31l-6"
-})(["position:relative;height:", ";width:", ";min-width:", ";padding:0;border-radius:50%;font-weight:", ";color:", ";&:focus:not([disabled]){&:after{border:none;}}", " ", ""], ({
-  theme
-}) => theme.space.s, ({
-  theme
-}) => theme.space.s, ({
-  theme
-}) => theme.space.s, ({
-  theme
-}) => theme.fontWeights.regular, ({
-  theme
-}) => theme.colors.neutral[800], ({
-  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']};
-      `}
-  `, ({
-  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]};
-          }
-        ` : ''}
-        ` : '');
+})(["position:relative;height:", ";width:", ";border-radius:50%;&:hover{background-color:", ";}color:", ";", " ", " ", ";"], _ref19 => {
+  let {
+    theme
+  } = _ref19;
+  return theme.space.s;
+}, _ref20 => {
+  let {
+    theme
+  } = _ref20;
+  return theme.space.s;
+}, hoverBgPerStatus, fontColorPerStatus, _ref21 => {
+  let {
+    selected,
+    isCurrentListItem
+  } = _ref21;
+  return isCurrentListItem && !selected ? focusBorder : "";
+}, _ref22 => {
+  let {
+    isDisabled
+  } = _ref22;
+  return isDisabled ? css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n          cursor: not-allowed;\n          ", ";\n        "])), 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]) : "";
+});
 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;"]);
 const StyledWheelChangeTimeBtn = /*#__PURE__*/styled(DSButtonV2).withConfig({
   componentId: "sc-1nsw31l-8"
-})(["height:", ";width:", ";min-width:", ";border-radius:50%;"], ({
-  theme
-}) => theme.space.s, ({
-  theme
-}) => theme.space.s, ({
-  theme
-}) => theme.space.s);
+})(["height:", ";width:", ";min-width:", ";border-radius:50%;"], _ref24 => {
+  let {
+    theme
+  } = _ref24;
+  return theme.space.s;
+}, _ref25 => {
+  let {
+    theme
+  } = _ref25;
+  return theme.space.s;
+}, _ref26 => {
+  let {
+    theme
+  } = _ref26;
+  return theme.space.s;
+});
 const TimeWheelFooterMessage = /*#__PURE__*/styled.footer.withConfig({
   componentId: "sc-1nsw31l-9"
-})(["border-top:solid 1px ", ";margin:0 ", ";padding:", " 0;color:", ";font-style:italic;font-weight:", ";font-size:", ";text-align:right;"], ({
-  theme
-}) => theme.colors.neutral[300], ({
-  theme
-}) => theme.space.xxs2, ({
-  theme
-}) => theme.space.xxs2, ({
-  theme
-}) => theme.colors.danger[900], ({
-  theme
-}) => theme.fontWeights.thin, ({
-  theme
-}) => theme.fontSizes.microText[200]);
+})(["border-top:solid 1px ", ";margin:0 ", ";padding:", " 0;color:", ";font-style:italic;font-weight:", ";font-size:", ";text-align:right;"], _ref27 => {
+  let {
+    theme
+  } = _ref27;
+  return theme.colors.neutral[300];
+}, _ref28 => {
+  let {
+    theme
+  } = _ref28;
+  return theme.space.xxs2;
+}, _ref29 => {
+  let {
+    theme
+  } = _ref29;
+  return theme.space.xxs2;
+}, _ref30 => {
+  let {
+    theme
+  } = _ref30;
+  return theme.colors.danger[900];
+}, _ref31 => {
+  let {
+    theme
+  } = _ref31;
+  return theme.fontWeights.thin;
+}, _ref32 => {
+  let {
+    theme
+  } = _ref32;
+  return theme.fontSizes.microText[200];
+});
 
 export { StyledIconTriggerButton, StyledTimeBtn, StyledTimePickerContainer, StyledTimePickerHead, StyledTimePickerWheelWrapper, StyledTimePickerWheelsLegend, StyledWheelChangeTimeBtn, StyledWheelList, StyledWheelListItem, TimeWheelFooterMessage };

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

@@ -8,9 +8,10 @@ import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 
 var _TimeWheelIconTrigger, _TimeWheelWrapper;
 
-const WrappedTimeWheelContext = ({
-  children
-}) => {
+const WrappedTimeWheelContext = _ref => {
+  let {
+    children
+  } = _ref;
   const ctx = useConfigTimePickerCTX();
   return /*#__PURE__*/_jsx(TimeWheelContext.Provider, {
     value: ctx

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

@@ -9,9 +9,10 @@ import { TimeWheelFooter } from './TimeWheelFooter.js';
 import { TimeWheelContext } from './TimeWheelContext.js';
 
 var _StyledTimePickerWhee, _StyledTimePickerWhee2, _TimeWheelFooter;
-const TimeWheelContent = /*#__PURE__*/React.memo(({
-  showShadow
-}) => {
+const TimeWheelContent = /*#__PURE__*/React.memo(_ref => {
+  let {
+    showShadow
+  } = _ref;
   const {
     hours,
     minutes,
@@ -22,7 +23,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/TimeWheelContext.js

@@ -63,7 +63,8 @@ const defaultTimePickerContext = {
   prevMeridiemBtnRef: /*#__PURE__*/createRef(),
   currMeridiemBtnRef: /*#__PURE__*/createRef(),
   nextMeridiemBtnRef: /*#__PURE__*/createRef(),
-  getIsDisabledTime: () => false
+  getIsDisabledTime: () => false,
+  disabled: false
 };
 /** Context for cross component communication */