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

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

@@ -1,30 +1,33 @@
 import styled from 'styled-components';
 import { Grid } from '@elliemae/ds-grid';
-import DSButton from '@elliemae/ds-basic/Button';
+import { DSButtonV2 } from '@elliemae/ds-button';
 
 /* eslint-disable max-lines */
-const StyledWheelList = /*#__PURE__*/styled.ul.withConfig({
+const StyledIconTriggerButton = /*#__PURE__*/styled(DSButtonV2).withConfig({
   componentId: "sc-1nsw31l-0"
-})(["width:100%;height:100%;list-style:none;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 ", ";}}"], ({
+})(["color:", ";width:26px;height:26px;"], ({
+  theme
+}) => 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]);
 const StyledTimePickerContainer = /*#__PURE__*/styled.div.withConfig({
-  componentId: "sc-1nsw31l-1"
+  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%);
-  ` : '');
+}) => 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-2"
+  componentId: "sc-1nsw31l-3"
 })(["width:100%;grid-area:TimePickerHead;justify-content:center;align-items:center;background:", ";"], ({
   theme
 }) => theme.colors.neutral['050']);
 const StyledTimePickerWheelsLegend = /*#__PURE__*/styled.div.withConfig({
-  componentId: "sc-1nsw31l-3"
+  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, ({
@@ -35,7 +38,7 @@ const StyledTimePickerWheelsLegend = /*#__PURE__*/styled.div.withConfig({
   theme
 }) => theme.colors.neutral['050']);
 const StyledTimePickerWheelWrapper = /*#__PURE__*/styled.div.withConfig({
-  componentId: "sc-1nsw31l-4"
+  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'], ({
@@ -47,9 +50,9 @@ const StyledTimePickerWheelWrapper = /*#__PURE__*/styled.div.withConfig({
 }) => theme.space.xl, ({
   theme
 }) => theme.colors.neutral[200]);
-const StyledTimeBtn = /*#__PURE__*/styled(DSButton).withConfig({
-  componentId: "sc-1nsw31l-5"
-})(["position:relative;height:", ";width:", ";min-width:", ";padding:0;border-radius:50%;font-weight:", ";color:", ";&.em-ds-button--text:not([disabled]){}&:focus:not([disabled]){&:after{border:none;}}", " ", ""], ({
+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
@@ -63,81 +66,18 @@ const StyledTimeBtn = /*#__PURE__*/styled(DSButton).withConfig({
   theme,
   isDisabled,
   selected
-}) => isDisabled ? `
-    color: ${selected ? theme.colors.neutral['000'] : theme.colors.neutral[500]};
-    cursor: not-allowed;
-    background-color:${selected ? theme.colors.danger[900] : theme.colors.neutral['000']};
-    font-weight: ${selected ? theme.fontWeights.semibold : ''};
-
-    &:before {
-      cursor: not-allowed;
-      position: absolute;
-      content: '';
-      top: 47%;
-      left: 0;
-      width: 100%;
-      height: 1px;
-      background-color: ${selected ? theme.colors.neutral['000'] : theme.colors.neutral[500]};
-      transform: rotate(45deg);
-      pointer-events: none;
-    }
-    &.em-ds-button--text:not([disabled]) {
-      :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};
-      &.em-ds-button--text:not([disabled]) {
-        :hover {
-          color:${theme.colors.neutral['000']};
-          background-color:${theme.colors.brand[700]};
-        }
-      }
-      ` : `
-      color: ${theme.colors.neutral[800]};
-      background-color:${theme.colors.neutral['000']};
-      `}
-  `, ({
+}) => isDisabled ? "\n    color: ".concat(selected ? theme.colors.neutral['000'] : theme.colors.neutral[500], ";\n    cursor: not-allowed;\n    background-color:").concat(selected ? theme.colors.danger[900] : theme.colors.neutral['000'], ";\n    font-weight: ").concat(selected ? theme.fontWeights.semibold : '', ";\n\n    &:before {\n      cursor: not-allowed;\n      position: absolute;\n      content: '';\n      top: 47%;\n      left: 0;\n      width: 100%;\n      height: 1px;\n      background-color: ").concat(selected ? theme.colors.neutral['000'] : theme.colors.neutral[500], ";\n      transform: rotate(45deg);\n      pointer-events: none;\n    }\n    &:hover {\n      color:").concat(selected ? theme.colors.neutral['000'] : theme.colors.neutral[500], ";\n      background-color:").concat(selected ? theme.colors.danger[900] : theme.colors.neutral['000'], ";\n    }\n  ") : "\n      ".concat(selected ? "\n      color: ".concat(theme.colors.neutral['000'], ";\n      background-color:").concat(theme.colors.brand[700], ";\n      font-weight: ").concat(theme.fontWeights.semibold, ";\n      &:hover {\n        color:").concat(theme.colors.neutral['000'], ";\n        background-color:").concat(theme.colors.brand[700], ";\n      }\n      ") : "\n      color: ".concat(theme.colors.neutral[800], ";\n      background-color:").concat(theme.colors.neutral['000'], ";\n      "), "\n  "), ({
   theme,
   isCurrentListItem,
   selected,
   isDisabled
-}) => isCurrentListItem && !selected ? `
-        color: ${isDisabled ? theme.colors.danger[900] : theme.colors.brand[700]};
-        &:after {
-          position: absolute;
-          content: '';
-          border-radius: 50%;
-          top: -2px;
-          left: -2px;
-          width: calc(100% + 4px);
-          height: calc(100% + 4px);
-          border: 2px solid ${isDisabled ? theme.colors.danger[900] : theme.colors.brand[700]};
-          pointer-events: none;
-        }
-        ${isDisabled ? `
-          color: ${theme.colors.danger[900]};
-          &.em-ds-button--text:not([disabled]) {
-            :hover {
-              color:${theme.colors.danger[900]};
-            }
-          }
-          &:before{
-            background-color: ${theme.colors.danger[900]};
-          }
-        ` : undefined}
-        ` : undefined);
-const StyledWheelListItem = /*#__PURE__*/styled.li.withConfig({
-  componentId: "sc-1nsw31l-6"
-})(["margin:auto;width:36px;height:36px;display:flex;align-items:center;justify-content:center;position:relative;"]);
-const StyledWheelChangeTimeBtn = /*#__PURE__*/styled(DSButton).withConfig({
+}) => isCurrentListItem && !selected ? "\n        color: ".concat(isDisabled ? theme.colors.danger[900] : theme.colors.brand[700], ";\n        &:after {\n          position: absolute;\n          content: '';\n          border-radius: 50%;\n          top: -2px;\n          left: -2px;\n          width: calc(100% + 4px);\n          height: calc(100% + 4px);\n          border: 2px solid ").concat(isDisabled ? theme.colors.danger[900] : theme.colors.brand[700], ";\n          pointer-events: none;\n        }\n        ").concat(isDisabled ? "\n          color: ".concat(theme.colors.danger[900], ";\n          &:hover {\n            color:").concat(theme.colors.danger[900], ";\n          }          \n          &:before{\n            background-color: ").concat(theme.colors.danger[900], ";\n          }\n        ") : '', "\n        ") : '');
+const StyledWheelListItem = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-1nsw31l-7"
-})(["height:", ";width:", ";min-width:", ";border-radius:50%;&.em-ds-button--text.em-ds-button--text:not([disabled]),&.em-ds-button--text.em-ds-button--variant-focus{&:focus{&:after{border:none;}}}"], ({
+})(["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
@@ -145,7 +85,7 @@ const StyledWheelChangeTimeBtn = /*#__PURE__*/styled(DSButton).withConfig({
   theme
 }) => theme.space.s);
 const TimeWheelFooterMessage = /*#__PURE__*/styled.footer.withConfig({
-  componentId: "sc-1nsw31l-8"
+  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], ({
@@ -160,4 +100,4 @@ const TimeWheelFooterMessage = /*#__PURE__*/styled.footer.withConfig({
   theme
 }) => theme.fontSizes.microText[200]);
 
-export { StyledTimeBtn, StyledTimePickerContainer, StyledTimePickerHead, StyledTimePickerWheelWrapper, StyledTimePickerWheelsLegend, StyledWheelChangeTimeBtn, StyledWheelList, StyledWheelListItem, TimeWheelFooterMessage };
+export { StyledIconTriggerButton, StyledTimeBtn, StyledTimePickerContainer, StyledTimePickerHead, StyledTimePickerWheelWrapper, StyledTimePickerWheelsLegend, StyledWheelChangeTimeBtn, StyledWheelList, StyledWheelListItem, TimeWheelFooterMessage };

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

@@ -1,5 +1,6 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import React, { useContext } from 'react';
+import { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid.js';
 import { StyledTimePickerContainer, StyledTimePickerHead, StyledTimePickerWheelsLegend, StyledTimePickerWheelWrapper } from './Styleds.js';
 import { HoursList } from './HoursList.js';
 import { MinutesList } from './MinutesList.js';
@@ -19,8 +20,9 @@ const TimeWheelContent = /*#__PURE__*/React.memo(({
   } = useContext(TimeWheelContext);
   return /*#__PURE__*/_jsx(StyledTimePickerContainer, {
     showShadow: showShadow,
-    isControllerOnly: isControllerOnly
-  }, 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, {})));
+    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, {})));
 });
 
 export { TimeWheelContent };

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

@@ -6,6 +6,7 @@ import { createRef, createContext } from 'react';
 const noop = () => {};
 
 const defaultTimePickerContext = {
+  ariaCurrentValueForInputs: '',
   tempTimeString: '',
   showTimePicker: false,
   setShowTimePicker: noop,

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

@@ -1,11 +1,11 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import { useContext, useMemo } from 'react';
-import DSButton from '@elliemae/ds-basic/Button';
+import { DSIconColors } from '@elliemae/ds-icon';
+import { DSButtonV2, BUTTON_SIZES } from '@elliemae/ds-button';
 import RecentDocuments from '@elliemae/ds-icons/RecentDocuments';
 import { TimeWheelContext } from './TimeWheelContext.js';
 import { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid.js';
 
-var _RecentDocuments;
 // this is particularly useful due to how usePopper needs to check the references
 // since references are saved in a immutable way, we make sure to shortcircuit useless-re-renders
 
@@ -13,18 +13,20 @@ const TimeWheelIconTrigger = () => {
   const {
     handleSetTriggerRef,
     handleToggleTimePicker,
-    handlePickerIconKeyDown
+    handlePickerIconKeyDown,
+    ariaCurrentValueForInputs
   } = useContext(TimeWheelContext);
-  return useMemo(() => /*#__PURE__*/_jsx(DSButton, {
-    "aria-label": "time picker context menu trigger",
-    buttonType: "text",
-    leftIcon: _RecentDocuments || (_RecentDocuments = /*#__PURE__*/_jsx(RecentDocuments, {})),
-    size: "m",
+  return useMemo(() => /*#__PURE__*/_jsx(DSButtonV2, {
+    "aria-label": "time picker context menu trigger, ".concat(ariaCurrentValueForInputs),
+    buttonType: "icon",
+    size: BUTTON_SIZES.M,
     innerRef: handleSetTriggerRef,
     onClick: handleToggleTimePicker,
     onKeyDown: handlePickerIconKeyDown,
     "data-testid": ControlledDateTimePickerDatatestid.PICKER_ICONS.TIMEWHEEL
-  }), [handlePickerIconKeyDown, handleSetTriggerRef, handleToggleTimePicker]);
+  }, void 0, /*#__PURE__*/_jsx(RecentDocuments, {
+    color: DSIconColors.PRIMARY
+  })), [ariaCurrentValueForInputs, handlePickerIconKeyDown, handleSetTriggerRef, handleToggleTimePicker]);
 };
 
 export { TimeWheelIconTrigger };

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

@@ -1,6 +1,7 @@
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import { useContext } from 'react';
+import { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid.js';
 import { TimeWheelContent } from './TimeWheelContent.js';
 import { TimeWheelContext } from './TimeWheelContext.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
@@ -30,6 +31,7 @@ const TimeWheelWrapper = () => {
       zIndex: 110
     })
   }, attributes.popper), {}, {
+    "data-testid": ControlledDateTimePickerDatatestid.CONTEXTUAL_MENU.TIMEWHEEL,
     children: [_TimeWheelContent2 || (_TimeWheelContent2 = /*#__PURE__*/_jsx(TimeWheelContent, {
       showShadow: true
     })), /*#__PURE__*/jsx("div", {

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

@@ -31,7 +31,8 @@ const useConfigTimePickerCTX = () => {
     nextMeridiemBtnRef,
     isControllerOnly,
     isWithCalendarToo,
-    autoFocusHourTimeWheel
+    autoFocusHourTimeWheel,
+    ariaCurrentValueForInputs
   } = useContext(ControlledDateTimePickerContext);
   const {
     currHourNum,
@@ -172,8 +173,9 @@ const useConfigTimePickerCTX = () => {
     prevMeridiemBtnRef,
     currMeridiemBtnRef,
     nextMeridiemBtnRef,
-    getIsDisabledTime
-  }), [tempTimeString, isControllerOnly, autoFocusHourTimeWheel, showTimePicker, setShowTimePicker, setPopperElement, setArrowElement, usePopperHelpers, handleToggleTimePicker, handleSetTriggerRef, handleMenuWrapperKeyDown, currHourNum, hours, visibleHours, handlePrevHour, handleNextHour, handleTimeWheelBtnChangeHours, currMinuteNum, minutes, visibleMinutes, handlePrevMinute, handleNextMinute, handleTimeWheelBtnChangeMinutes, meridiem, handleTimeWheelBtnChangeMeridiem, handlePrevHourBtnOnKeyDown, handleCurrHourOnKeyDown, handleNextHourBtnOnKeyDown, handlePrevMinuteBtnOnKeyDown, handleCurrMinutesOnKeyDown, handleNextMinuteBtnOnKeyDown, handlePrevMeridiemBtnOnKeyDown, handleCurrMeridiemOnKeyDown, handleNextMeridiemBtnOnKeyDown, handlePickerIconKeyDown, prevHourBtnRef, currHourBtnRef, nextHourBtnRef, prevMinutesBtnRef, currMinutesBtnRef, nextMinutesBtnRef, prevMeridiemBtnRef, currMeridiemBtnRef, nextMeridiemBtnRef, getIsDisabledTime]);
+    getIsDisabledTime,
+    ariaCurrentValueForInputs
+  }), [tempTimeString, isControllerOnly, autoFocusHourTimeWheel, showTimePicker, setShowTimePicker, setPopperElement, setArrowElement, usePopperHelpers, handleToggleTimePicker, handleSetTriggerRef, handleMenuWrapperKeyDown, currHourNum, hours, visibleHours, handlePrevHour, handleNextHour, handleTimeWheelBtnChangeHours, currMinuteNum, minutes, visibleMinutes, handlePrevMinute, handleNextMinute, handleTimeWheelBtnChangeMinutes, meridiem, handleTimeWheelBtnChangeMeridiem, handlePrevHourBtnOnKeyDown, handleCurrHourOnKeyDown, handleNextHourBtnOnKeyDown, handlePrevMinuteBtnOnKeyDown, handleCurrMinutesOnKeyDown, handleNextMinuteBtnOnKeyDown, handlePrevMeridiemBtnOnKeyDown, handleCurrMeridiemOnKeyDown, handleNextMeridiemBtnOnKeyDown, handlePickerIconKeyDown, prevHourBtnRef, currHourBtnRef, nextHourBtnRef, prevMinutesBtnRef, currMinutesBtnRef, nextMinutesBtnRef, prevMeridiemBtnRef, currMeridiemBtnRef, nextMeridiemBtnRef, getIsDisabledTime, ariaCurrentValueForInputs]);
 };
 
 export { useConfigTimePickerCTX };

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

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

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

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

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

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 import { Grid } from '@elliemae/ds-grid';
-import DSButton from '@elliemae/ds-basic/Button';
+import { DSButtonV2 } from '@elliemae/ds-button';
 
 /* eslint-disable max-lines */
 const ResettedInput = /*#__PURE__*/styled.input.withConfig({
@@ -24,10 +24,7 @@ const StyledInputsWrapperGrid = /*#__PURE__*/styled(Grid).withConfig({
   theme,
   isControllerOnly,
   hasError
-}) => isControllerOnly ? undefined : `
-  height: 28px;    
-  border: 1px solid ${hasError ? theme.colors.danger[900] : theme.colors.neutral[200]};
-  `, ({
+}) => isControllerOnly ? undefined : "\n  height: 28px;    \n  border: 1px solid ".concat(hasError ? theme.colors.danger[900] : theme.colors.neutral[200], ";\n  "), ({
   justPicker
 }) => justPicker ? '0' : '2px', ({
   withAnyPicker
@@ -40,23 +37,21 @@ const StyledTimeInputsWrapperGrid = /*#__PURE__*/styled.div.withConfig({
 })(["display:grid;grid-template-columns:24px min-content 24px min-content 24px min-content 24px;grid-template-rows:min-content;padding:6px 0;gap:0px 0px;align-items:center;input,p{margin:0;}"]);
 const StyledPickersIconsWrapperGrid = /*#__PURE__*/styled(Grid).withConfig({
   componentId: "sc-1t4k08s-8"
-})(["position:relative;", " & > .em-ds-button--text:not([disabled]){height:26px;width:26px;&:focus{&:after{top:-1px;left:-1px;width:calc(100% + 2px);height:calc(100% + 2px);}}}:before{content:'';position:absolute;top:0px;left:-1px;width:100%;height:100%;border-radius:2px;z-index:-1;", "}"], ({
+})(["position:relative;", ":before{content:'';position:absolute;top:0px;left:-1px;width:100%;height:100%;border-radius:2px;z-index:-1;", "}"], ({
   isControllerOnly
 }) => isControllerOnly ? undefined : 'height: 26px;', ({
   theme,
   isControllerOnly,
   hasError
-}) => isControllerOnly ? undefined : `
-    border-left: 1px solid ${hasError ? theme.colors.danger[900] : theme.colors.neutral[200]}
-    `);
+}) => isControllerOnly ? undefined : "\n    border-left: 1px solid ".concat(hasError ? theme.colors.danger[900] : theme.colors.neutral[200], "\n    "));
 const StyledFocusWithIn = /*#__PURE__*/styled(Grid).withConfig({
   componentId: "sc-1t4k08s-9"
 })(["position:relative;&:focus-within{&:after{display:block;content:' ';position:absolute;top:-5px;left:-2px;width:calc(100% + 4px);height:calc(100% + 10px);border:2px solid ", ";border-radius:2px;pointer-events:none;}}"], ({
   theme
 }) => theme.colors.brand[700]);
-const StyledClearButton = /*#__PURE__*/styled(DSButton).withConfig({
+const StyledClearButton = /*#__PURE__*/styled(DSButtonV2).withConfig({
   componentId: "sc-1t4k08s-10"
-})(["height:26px;position:relative;visibility:", ";&.em-ds-button--m.em-ds-button--icon-only{width:27px;}&.em-ds-button--text:not([disabled]){&:focus{&:after{top:-1px;left:-1px;width:calc(100% + 2px);height:calc(100% + 2px);}}}"], ({
+})(["height:26px;position:relative;visibility:", ";"], ({
   shouldDisplay
 }) => shouldDisplay ? 'visible' : 'hidden');
 

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

@@ -18,6 +18,7 @@ const HHInput = /*#__PURE__*/React.memo(({
   onKeyDown,
   value,
   placeholder,
+  ariaCurrentValueForInputs,
   contextRef,
   autoFocusHourInput
 }) => {
@@ -40,7 +41,7 @@ const HHInput = /*#__PURE__*/React.memo(({
     value: value,
     ref: contextRef,
     placeholder: placeholder,
-    "aria-label": "hours input field",
+    "aria-label": "hours input field ".concat(ariaCurrentValueForInputs),
     "data-testid": ControlledDateTimePickerDatatestid.TIME_INPUTS.HOUR
   });
 });

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

@@ -1,3 +1,4 @@
+import 'core-js/modules/web.dom-collections.iterator.js';
 import React, { useCallback } from 'react';
 import { Styled2DigitsInput } from '../Styleds.js';
 import { ControlledDateTimePickerDatatestid } from '../../ControlledDateTimePickerDatatestid.js';
@@ -21,6 +22,7 @@ const MeridiemInput = /*#__PURE__*/React.memo(({
   onKeyDown,
   value,
   placeholder,
+  ariaCurrentValueForInputs,
   contextRef
 }) => {
   const validateOnChange = useCallback(e => {
@@ -41,7 +43,7 @@ const MeridiemInput = /*#__PURE__*/React.memo(({
     value: value,
     ref: contextRef,
     placeholder: placeholder,
-    "aria-label": "meridiem input field",
+    "aria-label": "meridiem input field ".concat(ariaCurrentValueForInputs),
     "data-testid": ControlledDateTimePickerDatatestid.TIME_INPUTS.MERIDIEM
   });
 });

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

@@ -18,6 +18,7 @@ const MinutesInput = /*#__PURE__*/React.memo(({
   onKeyDown,
   value,
   placeholder,
+  ariaCurrentValueForInputs,
   contextRef
 }) => {
   const validateOnChange = useCallback(e => {
@@ -38,7 +39,7 @@ const MinutesInput = /*#__PURE__*/React.memo(({
     value: value,
     ref: contextRef,
     placeholder: placeholder,
-    "aria-label": "minutes input field",
+    "aria-label": "minutes input field ".concat(ariaCurrentValueForInputs),
     "data-testid": ControlledDateTimePickerDatatestid.TIME_INPUTS.MINUTE
   });
 });

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

@@ -38,7 +38,8 @@ const TimeInputs = () => {
     hourInputRef,
     minutesInputRef,
     // secondsInputRef,
-    meridiemInputRef
+    meridiemInputRef,
+    ariaCurrentValueForInputs
   } = useContext(ControlledDateTimePickerContext);
   return /*#__PURE__*/_jsx(Grid, {
     cols: [fixedValues.smallInputWidth, fixedValues.separatorWidth, fixedValues.smallInputWidth, fixedValues.separatorWidth, fixedValues.smallInputWidth]
@@ -50,6 +51,7 @@ const TimeInputs = () => {
     onKeyDown: onHoursKeyDown,
     contextRef: hourInputRef,
     placeholder: "HH",
+    ariaCurrentValueForInputs: ariaCurrentValueForInputs,
     autoFocusHourInput: autoFocusHourInput
   })), _StyledColonSeparator || (_StyledColonSeparator = /*#__PURE__*/_jsx(StyledColonSeparator, {
     alignItems: "center"
@@ -60,7 +62,8 @@ const TimeInputs = () => {
     onFocus: onMeridiemFocus,
     onKeyDown: onMinutesKeyDown,
     contextRef: minutesInputRef,
-    placeholder: "MM"
+    placeholder: "MM",
+    ariaCurrentValueForInputs: ariaCurrentValueForInputs
   })), _StyledSeparator || (_StyledSeparator = /*#__PURE__*/_jsx(StyledSeparator, {}, void 0, " ")), /*#__PURE__*/_jsx(StyledFocusWithIn, {}, void 0, /*#__PURE__*/_jsx(MeridiemInput, {
     value: meridiem,
     onChange: onMeridiemChange,
@@ -68,7 +71,8 @@ const TimeInputs = () => {
     onFocus: onMinutesFocus,
     onKeyDown: onMeridiemKeyDown,
     contextRef: meridiemInputRef,
-    placeholder: "AM"
+    placeholder: "AM",
+    ariaCurrentValueForInputs: ariaCurrentValueForInputs
   })));
 };
 

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

@@ -1,42 +1,29 @@
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import { useContext, useCallback, useMemo } from 'react';
 import { ControlledDateTimePickerContext } from '../../ControlledDateTimePickerCTX.js';
-import { getFormattedTimeString, prependStringWithPlaceHolders, dateTimeToTime, deconstructTimeValues } from '../../utils/stringHelpers.js';
+import { getFormattedTimeString, prependStringWithPlaceHolders } from '../../utils/stringHelpers.js';
 import { getValidationTimeStringMetaInfo } from '../../utils/timeHelpers.js';
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-// our source of truth is either the time props or dateTime props
-// based on wheter it's a dateTime picker
-// or a time picker (it's time picker when hideDate is true)
-
-const useGetDestructuredTimeValues = ({
-  time,
-  dateTime,
-  isDateTimeSelector
-}) => {
-  const timeStringFromProps = useMemo(() => isDateTimeSelector ? dateTimeToTime(dateTime) : time, [time, dateTime, isDateTimeSelector]);
-  const deconstructedValues = useMemo(() => deconstructTimeValues(timeStringFromProps), [timeStringFromProps]);
-  return deconstructedValues;
-};
-
 const useTimeInputs = () => {
   const {
     props: {
-      time,
-      dateTime,
       onHourChange: appOnHourChange,
       onMinuteChange: appOnMinuteChange,
       // onSecondsChange: appOnSecondsChange,
       onMeridiemChange: appOnMeridiemChange,
-      getIsDisabledTime
+      getIsDisabledTime,
+      minutesInterval
     },
+    hours,
+    minutes,
+    meridiem,
     hideDate,
     withAnyRightController,
     withAnyPicker,
     withClearBtn,
-    isDateTimeSelector,
     hourInputRef,
     minutesInputRef,
     // secondsInputRef,
@@ -48,16 +35,6 @@ const useTimeInputs = () => {
     handleChangeComposedTimeString,
     setLatestInteractionRegion
   } = useContext(ControlledDateTimePickerContext);
-  const {
-    hours,
-    minutes,
-    // seconds,
-    meridiem
-  } = useGetDestructuredTimeValues({
-    time,
-    dateTime,
-    isDateTimeSelector
-  });
   const setLatestInteractionRegionTimeInputs = useCallback(() => {
     setLatestInteractionRegion('time-inputs');
   }, [setLatestInteractionRegion]);
@@ -117,7 +94,7 @@ 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(`${newHours}`, 2);
+      newHours = prependStringWithPlaceHolders("".concat(newHours), 2);
       handleChangeHours(newHours, e);
     }
   }, [onHomeKeyDown, onEndKeyDown, handleChangeHours, hours]);
@@ -177,11 +154,11 @@ const useTimeInputs = () => {
       const minutesStringConvertedToInteger = Number.parseInt(minutes, 10);
       const minutesInteger = Number.isNaN(minutesStringConvertedToInteger) ? 0 : minutesStringConvertedToInteger;
       let newMinutes;
-      if (key === 'ArrowUp') newMinutes = minutesInteger + 1 <= 59 ? minutesInteger + 1 : minutesInteger;else newMinutes = minutesInteger - 1 > 0 ? minutesInteger - 1 : 0;
-      newMinutes = prependStringWithPlaceHolders(`${newMinutes}`, 2);
+      if (key === 'ArrowUp') newMinutes = minutesInteger + minutesInterval <= 59 ? minutesInteger + minutesInterval : minutesInteger;else newMinutes = minutesInteger - minutesInterval > 0 ? minutesInteger - minutesInterval : 0;
+      newMinutes = prependStringWithPlaceHolders("".concat(newMinutes), 2);
       handleChangeMinutes(newMinutes, e);
     }
-  }, [onHomeKeyDown, onEndKeyDown, handleChangeMinutes, minutes]);
+  }, [onHomeKeyDown, onEndKeyDown, minutes, minutesInterval, handleChangeMinutes]);
   const onMinutesBlur = useCallback(e => {
     var _e$target4;
 
@@ -280,7 +257,7 @@ const useTimeInputs = () => {
     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 (newMeridiem.length === 1) newMeridiem = `${newMeridiem}M`;
+    if (newMeridiem.length === 1) newMeridiem = "".concat(newMeridiem, "M");
     handleChangeMeridiem(newMeridiem, e); // auto-advance functionality:
 
     if (newMeridiem.length === 2 && withAnyRightController) {
@@ -306,7 +283,7 @@ const useTimeInputs = () => {
     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(`${newMeridiem}M`, e, {
+    if (newMeridiem.length === 1) handleChangeMeridiem("".concat(newMeridiem, "M"), e, {
       isAutomaticFillTrigger: true
     });
   }, [handleChangeMeridiem]);

package/esm/controlled-date-time-picker/utils/constants.js

@@ -0,0 +1,37 @@
+const weekDays = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
+const monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
+const announcableCardinalDays = {
+  1: 'first',
+  2: 'second',
+  3: 'third',
+  4: 'fourth',
+  5: 'fifth',
+  6: 'sixth',
+  7: 'seventh',
+  8: 'eighth',
+  9: 'ninth',
+  10: 'tenth',
+  11: 'eleventh',
+  12: 'twelfth',
+  13: 'thirteenth',
+  14: 'fourteenth',
+  15: 'fifteenth',
+  16: 'sixteenth',
+  17: 'seventeenth',
+  18: 'eighteenth',
+  19: 'ninteenth',
+  20: 'twentieth',
+  21: 'twentie first',
+  22: 'twentie second',
+  23: 'twentie third',
+  24: 'twentie fourth',
+  25: 'twentie fifth',
+  26: 'twentie sixth',
+  27: 'twentie seventh',
+  28: 'twentie eighth',
+  29: 'twentie ninth',
+  30: 'thirtieth',
+  31: 'thirty first'
+};
+
+export { announcableCardinalDays, monthNames, weekDays };

package/esm/controlled-date-time-picker/utils/dateHelpers.js

@@ -1,9 +1,9 @@
+import 'core-js/modules/web.dom-collections.iterator.js';
 import { createRef } from 'react';
+import { monthNames } from './constants.js';
 import { isIncompleteString, deconstructValuesFromDateString, prependStringWithPlaceHolders } from './stringHelpers.js';
 import { convertToPositiveNumberIfPossible } from './numberHelpers.js';
 
-/* eslint-disable max-lines */
-const monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
 const getLastDayOfMonth = (month, year) => new Date(year, month + 1, 0);
 const isValidDayForTheMonth = (month, year, day) => {
   var _Date, _Date$getMonth;
@@ -184,11 +184,11 @@ const getDateValuesFromDate = day => {
   };
 };
 const getDateStringFromDay = day => {
-  const monthFromDay = prependStringWithPlaceHolders(`${day.getMonth() + 1}`, 2); // months from 1-12
+  const monthFromDay = prependStringWithPlaceHolders("".concat(day.getMonth() + 1), 2); // months from 1-12
 
-  const dayFromDay = prependStringWithPlaceHolders(`${day.getDate()}`, 2);
-  const yearFromDay = prependStringWithPlaceHolders(`${day.getFullYear()}`, 4);
-  return `${monthFromDay}/${dayFromDay}/${yearFromDay}`;
+  const dayFromDay = prependStringWithPlaceHolders("".concat(day.getDate()), 2);
+  const yearFromDay = prependStringWithPlaceHolders("".concat(day.getFullYear()), 4);
+  return "".concat(monthFromDay, "/").concat(dayFromDay, "/").concat(yearFromDay);
 };
 const getDayFromDateString = dateString => {
   const {