@elliemae/ds-form-date-time-picker 3.15.0 → 3.16.0-next.10

package/dist/cjs/parts/Pickers/TimeWheel/MeridiemList.js

@@ -30,12 +30,13 @@ __export(MeridiemList_exports, {
 module.exports = __toCommonJS(MeridiemList_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_react = require("react");
+var import_react = __toESM(require("react"));
 var import_ds_icons = require("@elliemae/ds-icons");
-var import_ControlledDateTimePickerDatatestid = require("../../../ControlledDateTimePickerDatatestid");
-var import_ControlledDateTimePickerCTX = require("../../../ControlledDateTimePickerCTX");
-var import_Styleds = require("./Styleds");
-var import_TimeWheelContext = require("./TimeWheelContext");
+var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
+var import_ControlledDateTimePickerDatatestid = require("../../../ControlledDateTimePickerDatatestid.js");
+var import_ControlledDateTimePickerCTX = require("../../../ControlledDateTimePickerCTX.js");
+var import_Styleds = require("./Styleds.js");
+var import_TimeWheelContext = require("./TimeWheelContext.js");
 const MeridiemList = () => {
   const { currMeridiem, handleTimeWheelBtnChangeMeridiem, handleCurrMeridiemOnKeyDown } = (0, import_react.useContext)(import_TimeWheelContext.TimeWheelContext);
   const {
@@ -46,8 +47,25 @@ const MeridiemList = () => {
     hours,
     minutes,
     latestInteractionRegion,
-    currFocusDescriber
+    currFocusDescriber,
+    props
   } = (0, import_react.useContext)(import_ControlledDateTimePickerCTX.ControlledDateTimePickerContext);
+  const ariaAndDataPropsPrevMeridiem = import_react.default.useMemo(
+    () => (0, import_ds_props_helpers.getPropsPerDatatestid)(props[import_ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.TIMEWHEEL.PREV_MERIDIEM]),
+    [props]
+  );
+  const ariaAndDataPropsNextMeridiem = import_react.default.useMemo(
+    () => (0, import_ds_props_helpers.getPropsPerDatatestid)(props[import_ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.TIMEWHEEL.NEXT_MERIDIEM]),
+    [props]
+  );
+  const ariaAndDataPropsCurrMeridiem = import_react.default.useMemo(
+    () => (0, import_ds_props_helpers.getPropsPerDatatestid)(props[import_ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.TIMEWHEEL.CURRENT_MERIDIEM]),
+    [props]
+  );
+  const ariaAndDataPropsMeridiem = import_react.default.useMemo(
+    () => (0, import_ds_props_helpers.getPropsPerDatatestid)(props[import_ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.TIMEWHEEL.MERIDIEM]),
+    [props]
+  );
   const isAmCurrent = !currMeridiem || currMeridiem === "AM";
   const isPmCurrent = currMeridiem === "PM";
   const hourMinuteString = `${hours || "01"}:${minutes || "00"}`;
@@ -83,6 +101,7 @@ const MeridiemList = () => {
         innerRef: prevMeridiemBtnRef,
         tabIndex: -1,
         type: "button",
+        ...ariaAndDataPropsPrevMeridiem,
         children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.ChevronSmallUp, { color: ["brand-primary", "700"] })
       }
     ) }),
@@ -107,6 +126,7 @@ const MeridiemList = () => {
         "aria-valuenow": isPmCurrent ? 1 : 0,
         "aria-valuetext": isAmCurrent ? "ante meridiem" : "post meridiem",
         type: "button",
+        ...isAmCurrent ? ariaAndDataPropsCurrMeridiem : ariaAndDataPropsMeridiem,
         children: "AM"
       }
     ) }),
@@ -130,6 +150,7 @@ const MeridiemList = () => {
         "aria-valuenow": isPmCurrent ? 1 : 0,
         "aria-valuetext": isAmCurrent ? "ante meridiem" : "post meridiem",
         type: "button",
+        ...isPmCurrent ? ariaAndDataPropsCurrMeridiem : ariaAndDataPropsMeridiem,
         children: "PM"
       }
     ) }),
@@ -147,6 +168,7 @@ const MeridiemList = () => {
         innerRef: nextMeridiemBtnRef,
         tabIndex: -1,
         type: "button",
+        ...ariaAndDataPropsNextMeridiem,
         children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.ChevronSmallDown, { color: ["brand-primary", "700"] })
       }
     ) })

package/dist/cjs/parts/Pickers/TimeWheel/MeridiemList.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/parts/Pickers/TimeWheel/MeridiemList.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable complexity */\nimport React, { useContext, useCallback } from 'react';\nimport { ChevronSmallUp, ChevronSmallDown } from '@elliemae/ds-icons';\nimport { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX';\nimport { StyledWheelList, StyledWheelListItem, StyledTimeBtn, StyledWheelChangeTimeBtn } from './Styleds';\nimport { TimeWheelContext } from './TimeWheelContext';\n\nexport const MeridiemList = (): JSX.Element => {\n  const { currMeridiem, handleTimeWheelBtnChangeMeridiem, handleCurrMeridiemOnKeyDown } = useContext(TimeWheelContext);\n  const {\n    prevMeridiemBtnRef,\n    currMeridiemBtnRef,\n    nextMeridiemBtnRef,\n    getIsDisabledTime,\n    hours,\n    minutes,\n    latestInteractionRegion,\n    currFocusDescriber,\n  } = useContext(ControlledDateTimePickerContext);\n  const isAmCurrent = !currMeridiem || currMeridiem === 'AM';\n  const isPmCurrent = currMeridiem === 'PM';\n  const hourMinuteString = `${hours || '01'}:${minutes || '00'}`;\n  const amTimeString = `${hourMinuteString} AM`;\n  const pmTimeString = `${hourMinuteString} PM`;\n  const isDisabledAm = getIsDisabledTime(amTimeString);\n  const isDisabledPm = getIsDisabledTime(pmTimeString);\n  const styledPropsPrevMeridiem = { isDisabled: isDisabledAm };\n  const styledPropsCurrentAmMeridiem = { isCurrentListItem: isAmCurrent, isDisabled: isDisabledAm };\n  const styledPropsCurrentPmMeridiem = { isCurrentListItem: isPmCurrent, isDisabled: isDisabledPm };\n  const styledPropsNextMeridiem = { isDisabled: isDisabledPm };\n  const handleCurrMeridiemRef = useCallback(\n    (ButtonDomNode: HTMLButtonElement) => {\n      setTimeout(() => {\n        currMeridiemBtnRef.current = ButtonDomNode;\n        if (latestInteractionRegion === 'timewheel' && currFocusDescriber === 'timewheel-curr-meridiem')\n          ButtonDomNode?.focus?.();\n      });\n    },\n    [currFocusDescriber, latestInteractionRegion, currMeridiemBtnRef],\n  );\n  return (\n    <StyledWheelList>\n      <StyledWheelListItem>\n        <StyledWheelChangeTimeBtn\n          {...styledPropsPrevMeridiem}\n          aria-label=\"set am meridiem\"\n          aria-disabled={isDisabledAm}\n          data-testid={ControlledDateTimePickerDatatestid.TIMEWHEEL.PREV_MERIDIEM}\n          buttonType=\"raw\"\n          size=\"m\"\n          onClick={(e: React.MouseEvent<HTMLButtonElement>) => handleTimeWheelBtnChangeMeridiem('AM', e)}\n          innerRef={prevMeridiemBtnRef}\n          tabIndex={-1}\n          type=\"button\"\n        >\n          <ChevronSmallUp color={['brand-primary', '700']} />\n        </StyledWheelChangeTimeBtn>\n      </StyledWheelListItem>\n      {currMeridiem === 'AM' || currMeridiem === '' ? <StyledWheelListItem /> : null}\n      <StyledWheelListItem isCurrentListItem={isAmCurrent}>\n        <StyledTimeBtn\n          {...styledPropsCurrentAmMeridiem}\n          data-testid={ControlledDateTimePickerDatatestid.TIMEWHEEL[isAmCurrent ? 'CURRENT_MERIDIEM' : 'MERIDIEM']}\n          selected={currMeridiem === 'AM'}\n          aria-label={`AM ${isAmCurrent ? 'selected' : ''}`}\n          aria-disabled={isDisabledAm}\n          buttonType=\"raw\"\n          size=\"m\"\n          onClick={(e: React.MouseEvent<HTMLButtonElement>) => handleTimeWheelBtnChangeMeridiem('AM', e)}\n          onKeyDown={isAmCurrent ? handleCurrMeridiemOnKeyDown : undefined}\n          innerRef={isAmCurrent ? handleCurrMeridiemRef : undefined}\n          tabIndex={isAmCurrent ? 0 : -1}\n          role=\"spinbutton\"\n          aria-valuemax={1}\n          aria-valuemin={0}\n          aria-valuenow={isPmCurrent ? 1 : 0}\n          aria-valuetext={isAmCurrent ? 'ante meridiem' : 'post meridiem'}\n          type=\"button\"\n        >\n          AM\n        </StyledTimeBtn>\n      </StyledWheelListItem>\n      <StyledWheelListItem isCurrentListItem={isPmCurrent}>\n        <StyledTimeBtn\n          {...styledPropsCurrentPmMeridiem}\n          data-testid={ControlledDateTimePickerDatatestid.TIMEWHEEL[isPmCurrent ? 'CURRENT_MERIDIEM' : 'MERIDIEM']}\n          selected={currMeridiem === 'PM'}\n          aria-label={`PM ${isPmCurrent ? 'selected' : ''}`}\n          aria-disabled={isDisabledPm}\n          buttonType=\"raw\"\n          size=\"m\"\n          onClick={(e: React.MouseEvent<HTMLButtonElement>) => handleTimeWheelBtnChangeMeridiem('PM', e)}\n          onKeyDown={isPmCurrent ? handleCurrMeridiemOnKeyDown : undefined}\n          innerRef={isPmCurrent ? handleCurrMeridiemRef : undefined}\n          tabIndex={isPmCurrent ? 0 : -1}\n          role=\"spinbutton\"\n          aria-valuemax={1}\n          aria-valuemin={0}\n          aria-valuenow={isPmCurrent ? 1 : 0}\n          aria-valuetext={isAmCurrent ? 'ante meridiem' : 'post meridiem'}\n          type=\"button\"\n        >\n          PM\n        </StyledTimeBtn>\n      </StyledWheelListItem>\n      {currMeridiem === 'PM' ? <StyledWheelListItem /> : null}\n      <StyledWheelListItem>\n        <StyledWheelChangeTimeBtn\n          {...styledPropsNextMeridiem}\n          aria-label=\"set pm meridiem\"\n          aria-disabled={isDisabledPm}\n          data-testid={ControlledDateTimePickerDatatestid.TIMEWHEEL.NEXT_MERIDIEM}\n          buttonType=\"raw\"\n          size=\"m\"\n          onClick={(e: React.MouseEvent<HTMLButtonElement>) => handleTimeWheelBtnChangeMeridiem('PM', e)}\n          innerRef={nextMeridiemBtnRef}\n          tabIndex={-1}\n          type=\"button\"\n        >\n          <ChevronSmallDown color={['brand-primary', '700']} />\n        </StyledWheelChangeTimeBtn>\n      </StyledWheelListItem>\n    </StyledWheelList>\n  );\n};\n\nexport default MeridiemList;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
-  "names": []
+  "sourcesContent": ["/* eslint-disable complexity */\nimport React, { useContext, useCallback } from 'react';\nimport { ChevronSmallUp, ChevronSmallDown } from '@elliemae/ds-icons';\nimport { getPropsPerDatatestid } from '@elliemae/ds-props-helpers';\nimport { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid.js';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';\nimport { StyledWheelList, StyledWheelListItem, StyledTimeBtn, StyledWheelChangeTimeBtn } from './Styleds.js';\nimport { TimeWheelContext } from './TimeWheelContext.js';\n\nexport const MeridiemList = (): JSX.Element => {\n  const { currMeridiem, handleTimeWheelBtnChangeMeridiem, handleCurrMeridiemOnKeyDown } = useContext(TimeWheelContext);\n  const {\n    prevMeridiemBtnRef,\n    currMeridiemBtnRef,\n    nextMeridiemBtnRef,\n    getIsDisabledTime,\n    hours,\n    minutes,\n    latestInteractionRegion,\n    currFocusDescriber,\n    props,\n  } = useContext(ControlledDateTimePickerContext);\n  const ariaAndDataPropsPrevMeridiem = React.useMemo(\n    () => getPropsPerDatatestid(props[ControlledDateTimePickerDatatestid.TIMEWHEEL.PREV_MERIDIEM]),\n    [props],\n  );\n  const ariaAndDataPropsNextMeridiem = React.useMemo(\n    () => getPropsPerDatatestid(props[ControlledDateTimePickerDatatestid.TIMEWHEEL.NEXT_MERIDIEM]),\n    [props],\n  );\n  const ariaAndDataPropsCurrMeridiem = React.useMemo(\n    () => getPropsPerDatatestid(props[ControlledDateTimePickerDatatestid.TIMEWHEEL.CURRENT_MERIDIEM]),\n    [props],\n  );\n  const ariaAndDataPropsMeridiem = React.useMemo(\n    () => getPropsPerDatatestid(props[ControlledDateTimePickerDatatestid.TIMEWHEEL.MERIDIEM]),\n    [props],\n  );\n  const isAmCurrent = !currMeridiem || currMeridiem === 'AM';\n  const isPmCurrent = currMeridiem === 'PM';\n  const hourMinuteString = `${hours || '01'}:${minutes || '00'}`;\n  const amTimeString = `${hourMinuteString} AM`;\n  const pmTimeString = `${hourMinuteString} PM`;\n  const isDisabledAm = getIsDisabledTime(amTimeString);\n  const isDisabledPm = getIsDisabledTime(pmTimeString);\n  const styledPropsPrevMeridiem = { isDisabled: isDisabledAm };\n  const styledPropsCurrentAmMeridiem = { isCurrentListItem: isAmCurrent, isDisabled: isDisabledAm };\n  const styledPropsCurrentPmMeridiem = { isCurrentListItem: isPmCurrent, isDisabled: isDisabledPm };\n  const styledPropsNextMeridiem = { isDisabled: isDisabledPm };\n  const handleCurrMeridiemRef = useCallback(\n    (ButtonDomNode: HTMLButtonElement) => {\n      setTimeout(() => {\n        currMeridiemBtnRef.current = ButtonDomNode;\n        if (latestInteractionRegion === 'timewheel' && currFocusDescriber === 'timewheel-curr-meridiem')\n          ButtonDomNode?.focus?.();\n      });\n    },\n    [currFocusDescriber, latestInteractionRegion, currMeridiemBtnRef],\n  );\n  return (\n    <StyledWheelList>\n      <StyledWheelListItem>\n        <StyledWheelChangeTimeBtn\n          {...styledPropsPrevMeridiem}\n          aria-label=\"set am meridiem\"\n          aria-disabled={isDisabledAm}\n          data-testid={ControlledDateTimePickerDatatestid.TIMEWHEEL.PREV_MERIDIEM}\n          buttonType=\"raw\"\n          size=\"m\"\n          onClick={(e: React.MouseEvent<HTMLButtonElement>) => handleTimeWheelBtnChangeMeridiem('AM', e)}\n          innerRef={prevMeridiemBtnRef}\n          tabIndex={-1}\n          type=\"button\"\n          {...ariaAndDataPropsPrevMeridiem}\n        >\n          <ChevronSmallUp color={['brand-primary', '700']} />\n        </StyledWheelChangeTimeBtn>\n      </StyledWheelListItem>\n      {currMeridiem === 'AM' || currMeridiem === '' ? <StyledWheelListItem /> : null}\n      <StyledWheelListItem isCurrentListItem={isAmCurrent}>\n        <StyledTimeBtn\n          {...styledPropsCurrentAmMeridiem}\n          data-testid={ControlledDateTimePickerDatatestid.TIMEWHEEL[isAmCurrent ? 'CURRENT_MERIDIEM' : 'MERIDIEM']}\n          selected={currMeridiem === 'AM'}\n          aria-label={`AM ${isAmCurrent ? 'selected' : ''}`}\n          aria-disabled={isDisabledAm}\n          buttonType=\"raw\"\n          size=\"m\"\n          onClick={(e: React.MouseEvent<HTMLButtonElement>) => handleTimeWheelBtnChangeMeridiem('AM', e)}\n          onKeyDown={isAmCurrent ? handleCurrMeridiemOnKeyDown : undefined}\n          innerRef={isAmCurrent ? handleCurrMeridiemRef : undefined}\n          tabIndex={isAmCurrent ? 0 : -1}\n          role=\"spinbutton\"\n          aria-valuemax={1}\n          aria-valuemin={0}\n          aria-valuenow={isPmCurrent ? 1 : 0}\n          aria-valuetext={isAmCurrent ? 'ante meridiem' : 'post meridiem'}\n          type=\"button\"\n          {...(isAmCurrent ? ariaAndDataPropsCurrMeridiem : ariaAndDataPropsMeridiem)}\n        >\n          AM\n        </StyledTimeBtn>\n      </StyledWheelListItem>\n      <StyledWheelListItem isCurrentListItem={isPmCurrent}>\n        <StyledTimeBtn\n          {...styledPropsCurrentPmMeridiem}\n          data-testid={ControlledDateTimePickerDatatestid.TIMEWHEEL[isPmCurrent ? 'CURRENT_MERIDIEM' : 'MERIDIEM']}\n          selected={currMeridiem === 'PM'}\n          aria-label={`PM ${isPmCurrent ? 'selected' : ''}`}\n          aria-disabled={isDisabledPm}\n          buttonType=\"raw\"\n          size=\"m\"\n          onClick={(e: React.MouseEvent<HTMLButtonElement>) => handleTimeWheelBtnChangeMeridiem('PM', e)}\n          onKeyDown={isPmCurrent ? handleCurrMeridiemOnKeyDown : undefined}\n          innerRef={isPmCurrent ? handleCurrMeridiemRef : undefined}\n          tabIndex={isPmCurrent ? 0 : -1}\n          role=\"spinbutton\"\n          aria-valuemax={1}\n          aria-valuemin={0}\n          aria-valuenow={isPmCurrent ? 1 : 0}\n          aria-valuetext={isAmCurrent ? 'ante meridiem' : 'post meridiem'}\n          type=\"button\"\n          {...(isPmCurrent ? ariaAndDataPropsCurrMeridiem : ariaAndDataPropsMeridiem)}\n        >\n          PM\n        </StyledTimeBtn>\n      </StyledWheelListItem>\n      {currMeridiem === 'PM' ? <StyledWheelListItem /> : null}\n      <StyledWheelListItem>\n        <StyledWheelChangeTimeBtn\n          {...styledPropsNextMeridiem}\n          aria-label=\"set pm meridiem\"\n          aria-disabled={isDisabledPm}\n          data-testid={ControlledDateTimePickerDatatestid.TIMEWHEEL.NEXT_MERIDIEM}\n          buttonType=\"raw\"\n          size=\"m\"\n          onClick={(e: React.MouseEvent<HTMLButtonElement>) => handleTimeWheelBtnChangeMeridiem('PM', e)}\n          innerRef={nextMeridiemBtnRef}\n          tabIndex={-1}\n          type=\"button\"\n          {...ariaAndDataPropsNextMeridiem}\n        >\n          <ChevronSmallDown color={['brand-primary', '700']} />\n        </StyledWheelChangeTimeBtn>\n      </StyledWheelListItem>\n    </StyledWheelList>\n  );\n};\n\nexport default MeridiemList;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
+  "names": ["React"]
 }

package/dist/cjs/parts/Pickers/TimeWheel/MinutesList.js

@@ -30,13 +30,14 @@ __export(MinutesList_exports, {
 module.exports = __toCommonJS(MinutesList_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_react = require("react");
+var import_react = __toESM(require("react"));
+var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
 var import_ds_icons = require("@elliemae/ds-icons");
-var import_ControlledDateTimePickerDatatestid = require("../../../ControlledDateTimePickerDatatestid");
-var import_ControlledDateTimePickerCTX = require("../../../ControlledDateTimePickerCTX");
-var import_numberHelpers = require("../../../utils/numberHelpers");
-var import_Styleds = require("./Styleds");
-var import_TimeWheelContext = require("./TimeWheelContext");
+var import_ControlledDateTimePickerDatatestid = require("../../../ControlledDateTimePickerDatatestid.js");
+var import_ControlledDateTimePickerCTX = require("../../../ControlledDateTimePickerCTX.js");
+var import_numberHelpers = require("../../../utils/numberHelpers.js");
+var import_Styleds = require("./Styleds.js");
+var import_TimeWheelContext = require("./TimeWheelContext.js");
 const MinutesList = () => {
   const {
     currHourNum,
@@ -55,8 +56,25 @@ const MinutesList = () => {
     getIsDisabledTime,
     minutes,
     currFocusDescriber,
-    latestInteractionRegion
+    latestInteractionRegion,
+    props
   } = (0, import_react.useContext)(import_ControlledDateTimePickerCTX.ControlledDateTimePickerContext);
+  const ariaAndDataPropsPrevMinute = import_react.default.useMemo(
+    () => (0, import_ds_props_helpers.getPropsPerDatatestid)(props[import_ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.TIMEWHEEL.PREV_MINUTE]),
+    [props]
+  );
+  const ariaAndDataPropsNextMinute = import_react.default.useMemo(
+    () => (0, import_ds_props_helpers.getPropsPerDatatestid)(props[import_ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.TIMEWHEEL.NEXT_MINUTE]),
+    [props]
+  );
+  const ariaAndDataPropsCurrMinute = import_react.default.useMemo(
+    () => (0, import_ds_props_helpers.getPropsPerDatatestid)(props[import_ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.TIMEWHEEL.CURRENT_MINUTE]),
+    [props]
+  );
+  const ariaAndDataPropsMinute = import_react.default.useMemo(
+    () => (0, import_ds_props_helpers.getPropsPerDatatestid)(props[import_ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.TIMEWHEEL.MINUTE]),
+    [props]
+  );
   const handleCurrMeridiemRef = (0, import_react.useCallback)(
     (ButtonDomNode) => {
       setTimeout(() => {
@@ -79,6 +97,7 @@ const MinutesList = () => {
         tabIndex: -1,
         "data-testid": import_ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.TIMEWHEEL.PREV_MINUTE,
         type: "button",
+        ...ariaAndDataPropsPrevMinute,
         children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.ChevronSmallUp, { color: ["brand-primary", "700"] })
       }
     ) }),
@@ -120,6 +139,7 @@ const MinutesList = () => {
               "aria-valuetext": `${minutesString} minutes`,
               type: "button",
               ...btnProps,
+              ...isCurrentListItem ? ariaAndDataPropsCurrMinute : ariaAndDataPropsMinute,
               children: minutesString
             }
           )
@@ -138,6 +158,7 @@ const MinutesList = () => {
         "data-testid": import_ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.TIMEWHEEL.NEXT_MINUTE,
         tabIndex: -1,
         type: "button",
+        ...ariaAndDataPropsNextMinute,
         children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.ChevronSmallDown, { color: ["brand-primary", "700"] })
       }
     ) })

package/dist/cjs/parts/Pickers/TimeWheel/MinutesList.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/parts/Pickers/TimeWheel/MinutesList.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable complexity */\nimport React, { useContext, useCallback } from 'react';\nimport { ChevronSmallUp, ChevronSmallDown } from '@elliemae/ds-icons';\nimport { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX';\nimport { convertToPositiveNumberIfPossible } from '../../../utils/numberHelpers';\nimport { StyledWheelList, StyledWheelListItem, StyledTimeBtn, StyledWheelChangeTimeBtn } from './Styleds';\nimport { TimeWheelContext } from './TimeWheelContext';\n\nexport const MinutesList = (): JSX.Element => {\n  const {\n    currHourNum,\n    currMinuteNum,\n    currMeridiem,\n    visibleMinutes,\n    handlePrevMinute,\n    handleNextMinute,\n    handleTimeWheelBtnChangeMinutes,\n    handleCurrMinutesOnKeyDown,\n  } = useContext(TimeWheelContext);\n  const {\n    prevMinutesBtnRef,\n    currMinutesBtnRef,\n    nextMinutesBtnRef,\n    getIsDisabledTime,\n    minutes,\n    currFocusDescriber,\n    latestInteractionRegion,\n  } = useContext(ControlledDateTimePickerContext);\n  const handleCurrMeridiemRef = useCallback(\n    (ButtonDomNode: HTMLButtonElement) => {\n      setTimeout(() => {\n        currMinutesBtnRef.current = ButtonDomNode;\n        if (latestInteractionRegion === 'timewheel' && currFocusDescriber === 'timewheel-curr-minute')\n          ButtonDomNode?.focus?.();\n      });\n    },\n    [currFocusDescriber, latestInteractionRegion, currMinutesBtnRef],\n  );\n  return (\n    <StyledWheelList>\n      <StyledWheelListItem>\n        <StyledWheelChangeTimeBtn\n          aria-label=\"subtract one minute\"\n          buttonType=\"raw\"\n          size=\"m\"\n          onClick={handlePrevMinute}\n          innerRef={prevMinutesBtnRef}\n          tabIndex={-1}\n          data-testid={ControlledDateTimePickerDatatestid.TIMEWHEEL.PREV_MINUTE}\n          type=\"button\"\n        >\n          <ChevronSmallUp color={['brand-primary', '700']} />\n        </StyledWheelChangeTimeBtn>\n      </StyledWheelListItem>\n      {visibleMinutes.map((minutesString) => {\n        const key = `timewheel-minutes-${minutesString || ''}`;\n        if (!minutesString) return <StyledWheelListItem key={key} />;\n        const currMinutesTimeString = `${currHourNum}:${minutesString} ${currMeridiem}`;\n        const isEmptyCurrValueCurrentListItem =\n          !minutes && convertToPositiveNumberIfPossible(minutesString) === currMinuteNum;\n        const isCurrentListItem = isEmptyCurrValueCurrentListItem || minutes === minutesString;\n        const isDisabled = getIsDisabledTime(currMinutesTimeString);\n\n        const tabIndex = isCurrentListItem ? 0 : -1;\n        const btnProps = {\n          onKeyDown: isCurrentListItem ? handleCurrMinutesOnKeyDown : undefined,\n          innerRef: isCurrentListItem ? handleCurrMeridiemRef : undefined,\n        };\n        const styledProps = { isCurrentListItem, isDisabled };\n        return (\n          <StyledWheelListItem\n            key={key}\n            isCurrentListItem={isCurrentListItem}\n            selected={convertToPositiveNumberIfPossible(minutesString) === currMinuteNum}\n          >\n            <StyledTimeBtn\n              {...styledProps}\n              data-testid={\n                ControlledDateTimePickerDatatestid.TIMEWHEEL[isCurrentListItem ? 'CURRENT_MINUTE' : 'MINUTE']\n              }\n              selected={minutes.length === 2 && convertToPositiveNumberIfPossible(minutesString) === currMinuteNum}\n              aria-label={`${minutesString} minutes`}\n              aria-disabled={isDisabled}\n              buttonType=\"raw\"\n              size=\"m\"\n              onClick={(e: React.MouseEvent<HTMLButtonElement>) => handleTimeWheelBtnChangeMinutes(minutesString, e)}\n              tabIndex={tabIndex}\n              role=\"spinbutton\"\n              aria-valuemax={59}\n              aria-valuemin={0}\n              aria-valuenow={currMinuteNum}\n              aria-valuetext={`${minutesString} minutes`}\n              type=\"button\"\n              {...btnProps}\n            >\n              {minutesString}\n            </StyledTimeBtn>\n          </StyledWheelListItem>\n        );\n      })}\n      <StyledWheelListItem>\n        <StyledWheelChangeTimeBtn\n          aria-label=\"add one minute\"\n          buttonType=\"raw\"\n          size=\"m\"\n          onClick={handleNextMinute}\n          innerRef={nextMinutesBtnRef}\n          data-testid={ControlledDateTimePickerDatatestid.TIMEWHEEL.NEXT_MINUTE}\n          tabIndex={-1}\n          type=\"button\"\n        >\n          <ChevronSmallDown color={['brand-primary', '700']} />\n        </StyledWheelChangeTimeBtn>\n      </StyledWheelListItem>\n    </StyledWheelList>\n  );\n};\n\nexport default MinutesList;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
-  "names": []
+  "sourcesContent": ["/* eslint-disable complexity */\nimport React, { useContext, useCallback } from 'react';\nimport { getPropsPerDatatestid } from '@elliemae/ds-props-helpers';\nimport { ChevronSmallUp, ChevronSmallDown } from '@elliemae/ds-icons';\nimport { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid.js';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';\nimport { convertToPositiveNumberIfPossible } from '../../../utils/numberHelpers.js';\nimport { StyledWheelList, StyledWheelListItem, StyledTimeBtn, StyledWheelChangeTimeBtn } from './Styleds.js';\nimport { TimeWheelContext } from './TimeWheelContext.js';\n\nexport const MinutesList = (): JSX.Element => {\n  const {\n    currHourNum,\n    currMinuteNum,\n    currMeridiem,\n    visibleMinutes,\n    handlePrevMinute,\n    handleNextMinute,\n    handleTimeWheelBtnChangeMinutes,\n    handleCurrMinutesOnKeyDown,\n  } = useContext(TimeWheelContext);\n  const {\n    prevMinutesBtnRef,\n    currMinutesBtnRef,\n    nextMinutesBtnRef,\n    getIsDisabledTime,\n    minutes,\n    currFocusDescriber,\n    latestInteractionRegion,\n    props,\n  } = useContext(ControlledDateTimePickerContext);\n  const ariaAndDataPropsPrevMinute = React.useMemo(\n    () => getPropsPerDatatestid(props[ControlledDateTimePickerDatatestid.TIMEWHEEL.PREV_MINUTE]),\n    [props],\n  );\n  const ariaAndDataPropsNextMinute = React.useMemo(\n    () => getPropsPerDatatestid(props[ControlledDateTimePickerDatatestid.TIMEWHEEL.NEXT_MINUTE]),\n    [props],\n  );\n  const ariaAndDataPropsCurrMinute = React.useMemo(\n    () => getPropsPerDatatestid(props[ControlledDateTimePickerDatatestid.TIMEWHEEL.CURRENT_MINUTE]),\n    [props],\n  );\n  const ariaAndDataPropsMinute = React.useMemo(\n    () => getPropsPerDatatestid(props[ControlledDateTimePickerDatatestid.TIMEWHEEL.MINUTE]),\n    [props],\n  );\n\n  const handleCurrMeridiemRef = useCallback(\n    (ButtonDomNode: HTMLButtonElement) => {\n      setTimeout(() => {\n        currMinutesBtnRef.current = ButtonDomNode;\n        if (latestInteractionRegion === 'timewheel' && currFocusDescriber === 'timewheel-curr-minute')\n          ButtonDomNode?.focus?.();\n      });\n    },\n    [currFocusDescriber, latestInteractionRegion, currMinutesBtnRef],\n  );\n  return (\n    <StyledWheelList>\n      <StyledWheelListItem>\n        <StyledWheelChangeTimeBtn\n          aria-label=\"subtract one minute\"\n          buttonType=\"raw\"\n          size=\"m\"\n          onClick={handlePrevMinute}\n          innerRef={prevMinutesBtnRef}\n          tabIndex={-1}\n          data-testid={ControlledDateTimePickerDatatestid.TIMEWHEEL.PREV_MINUTE}\n          type=\"button\"\n          {...ariaAndDataPropsPrevMinute}\n        >\n          <ChevronSmallUp color={['brand-primary', '700']} />\n        </StyledWheelChangeTimeBtn>\n      </StyledWheelListItem>\n      {visibleMinutes.map((minutesString) => {\n        const key = `timewheel-minutes-${minutesString || ''}`;\n        if (!minutesString) return <StyledWheelListItem key={key} />;\n        const currMinutesTimeString = `${currHourNum}:${minutesString} ${currMeridiem}`;\n        const isEmptyCurrValueCurrentListItem =\n          !minutes && convertToPositiveNumberIfPossible(minutesString) === currMinuteNum;\n        const isCurrentListItem = isEmptyCurrValueCurrentListItem || minutes === minutesString;\n        const isDisabled = getIsDisabledTime(currMinutesTimeString);\n\n        const tabIndex = isCurrentListItem ? 0 : -1;\n        const btnProps = {\n          onKeyDown: isCurrentListItem ? handleCurrMinutesOnKeyDown : undefined,\n          innerRef: isCurrentListItem ? handleCurrMeridiemRef : undefined,\n        };\n        const styledProps = { isCurrentListItem, isDisabled };\n        return (\n          <StyledWheelListItem\n            key={key}\n            isCurrentListItem={isCurrentListItem}\n            selected={convertToPositiveNumberIfPossible(minutesString) === currMinuteNum}\n          >\n            <StyledTimeBtn\n              {...styledProps}\n              data-testid={\n                ControlledDateTimePickerDatatestid.TIMEWHEEL[isCurrentListItem ? 'CURRENT_MINUTE' : 'MINUTE']\n              }\n              selected={minutes.length === 2 && convertToPositiveNumberIfPossible(minutesString) === currMinuteNum}\n              aria-label={`${minutesString} minutes`}\n              aria-disabled={isDisabled}\n              buttonType=\"raw\"\n              size=\"m\"\n              onClick={(e: React.MouseEvent<HTMLButtonElement>) => handleTimeWheelBtnChangeMinutes(minutesString, e)}\n              tabIndex={tabIndex}\n              role=\"spinbutton\"\n              aria-valuemax={59}\n              aria-valuemin={0}\n              aria-valuenow={currMinuteNum}\n              aria-valuetext={`${minutesString} minutes`}\n              type=\"button\"\n              {...btnProps}\n              {...(isCurrentListItem ? ariaAndDataPropsCurrMinute : ariaAndDataPropsMinute)}\n            >\n              {minutesString}\n            </StyledTimeBtn>\n          </StyledWheelListItem>\n        );\n      })}\n      <StyledWheelListItem>\n        <StyledWheelChangeTimeBtn\n          aria-label=\"add one minute\"\n          buttonType=\"raw\"\n          size=\"m\"\n          onClick={handleNextMinute}\n          innerRef={nextMinutesBtnRef}\n          data-testid={ControlledDateTimePickerDatatestid.TIMEWHEEL.NEXT_MINUTE}\n          tabIndex={-1}\n          type=\"button\"\n          {...ariaAndDataPropsNextMinute}\n        >\n          <ChevronSmallDown color={['brand-primary', '700']} />\n        </StyledWheelChangeTimeBtn>\n      </StyledWheelListItem>\n    </StyledWheelList>\n  );\n};\n\nexport default MinutesList;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
+  "names": ["React"]
 }

package/dist/cjs/parts/Pickers/TimeWheel/Styleds.js

@@ -40,7 +40,7 @@ var React = __toESM(require("react"));
 var import_ds_system = require("@elliemae/ds-system");
 var import_ds_grid = require("@elliemae/ds-grid");
 var import_ds_button = require("@elliemae/ds-button");
-var import_theming = require("../../../exported-related/theming");
+var import_theming = require("../../../exported-related/theming.js");
 const focusBorder = import_ds_system.css`
   &:after {
     position: absolute;

package/dist/cjs/parts/Pickers/TimeWheel/Styleds.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/parts/Pickers/TimeWheel/Styleds.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable @typescript-eslint/indent */\nimport { css, styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSButtonV2 } from '@elliemae/ds-button';\nimport { DSControlledDateTimePickerName, DSControlledDateTimePickerSlots } from '../../../exported-related/theming';\n\ninterface StyledWheelListItemPropsT {\n  isCurrentListItem?: boolean;\n  selected?: boolean;\n}\n\ninterface StyledTimePickerContainerT {\n  showShadow?: boolean;\n  isControllerOnly: boolean;\n}\n\nconst focusBorder = css`\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 ${({ theme, isDisabled }) => (isDisabled ? theme.colors.danger[900] : theme.colors.brand[700])};\n  }\n`;\n\nconst diagonalLine = css`\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: ${({ theme, isCurrentListItem, selected }) => {\n      if (selected) return theme.colors.neutral['000'];\n      if (isCurrentListItem) return theme.colors.danger[900];\n      return theme.colors.neutral[500];\n    }};\n  }\n`;\n\nconst fontColorPerStatus = css`\n  ${({ theme, isDisabled, isCurrentListItem, selected }) => {\n    if (selected) return theme.colors.neutral['000'];\n    if (isDisabled && isCurrentListItem) return theme.colors.danger[900];\n    if (isDisabled) return theme.colors.neutral[500];\n    if (isCurrentListItem) return theme.colors.brand[600];\n    return theme.colors.neutral[800];\n  }};\n`;\n\nconst hoverBgPerStatus = css`\n  ${({ theme, selected, isDisabled }) => {\n    if (isDisabled && selected) return theme.colors.danger[900];\n    if (selected) return theme.colors.brand[700];\n    return theme.colors.neutral['000'];\n  }}\n`;\n\nexport const StyledIconTriggerButton = styled(DSButtonV2, {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.PICKER_ICONS.TIMEWHEEL,\n})`\n  color: ${({ theme }) => theme.colors.brand['600']};\n  width: 26px;\n  height: 26px;\n`;\n\nexport const StyledWheelList = styled.div`\n  width: 100%;\n  height: 100%;\n  margin: auto;\n  padding: 0;\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  &:focus-within {\n    &:before {\n      content: '';\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      border-radius: 2px;\n      border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n      box-shadow: 0 0 2px ${({ theme }) => theme.colors.brand[700]};\n    }\n  }\n`;\n\nexport const StyledTimePickerContainer = styled.div<StyledTimePickerContainerT>`\n  display: grid;\n  position: relative;\n  grid-template-columns: 192px;\n  grid-template-rows: 36px 30px auto;\n  grid-template-areas:\n    'TimePickerHead'\n    'TimePickerWheelsLegend'\n    'VerticalWheelWrapper';\n`;\n\nexport const StyledTimePickerHead = styled(Grid, {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.TIMEWHEEL.HEADER_LABEL,\n})`\n  width: 100%;\n  grid-area: TimePickerHead;\n  justify-content: center;\n  align-items: center;\n  background: ${({ theme }) => theme.colors.neutral['050']};\n`;\n\nexport const StyledTimePickerWheelsLegend = styled.div`\n  width: 100%;\n  height: 100;\n  grid-area: TimePickerWheelsLegend;\n  display: grid;\n  grid-template-columns: ${({ theme }) => theme.space.xl} ${({ theme }) => theme.space.xl} ${({ theme }) =>\n      theme.space.xl};\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  background: ${({ theme }) => theme.colors.neutral['050']};\n`;\n\nexport const StyledTimePickerWheelWrapper = styled.div`\n  width: 100%;\n  background: ${({ theme }) => theme.colors.neutral['000']};\n  grid-area: VerticalWheelWrapper;\n  display: grid;\n  grid-template-columns: ${({ theme }) => theme.space.xl} ${({ theme }) => theme.space.xl} ${({ theme }) =>\n      theme.space.xl};\n  grid-template-rows: 100%;\n  & ul:not(:last-child) {\n    position: relative;\n    &:after {\n      content: '';\n      position: absolute;\n      left: 100%;\n      top: 5%;\n      height: 90%;\n      width: 1px;\n      background: ${({ theme }) => theme.colors.neutral[200]};\n    }\n  }\n`;\n\nexport const StyledTimeBtn = styled(DSButtonV2, {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.TIMEWHEEL.TIME_BUTTON,\n})`\n  position: relative;\n  height: ${({ theme }) => theme.space.s};\n  width: ${({ theme }) => theme.space.s};\n  border-radius: 50%;\n\n  &:hover {\n    background-color: ${hoverBgPerStatus};\n  }\n\n  color: ${fontColorPerStatus};\n\n  ${({ selected, isCurrentListItem }) => (isCurrentListItem && !selected ? focusBorder : ``)}\n\n  ${({ isDisabled }) =>\n    isDisabled\n      ? css`\n          cursor: not-allowed;\n          ${diagonalLine};\n        `\n      : ``}\n\n  ${({ theme, selected, isDisabled }) =>\n    selected\n      ? css`\n    font-weight: ${theme.fontWeights.semibold};\n    background-color ${isDisabled ? theme.colors.danger[900] : theme.colors.brand[700]};\n    `\n      : ``};\n`;\n\nexport const StyledWheelListItem = styled.div<StyledWheelListItemPropsT>`\n  margin: auto;\n  width: 36px;\n  height: 36px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n`;\n\nexport const StyledWheelChangeTimeBtn = styled(DSButtonV2, {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.TIMEWHEEL.TIME_CHANGE_BUTTON,\n})`\n  height: ${({ theme }) => theme.space.s};\n  width: ${({ theme }) => theme.space.s};\n  min-width: ${({ theme }) => theme.space.s};\n  border-radius: 50%;\n`;\n\nexport const TimeWheelFooterMessage = styled('footer', {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.FOOTERS.TIMEWHEEL,\n})`\n  border-top: solid 1px ${({ theme }) => theme.colors.neutral[300]};\n  margin: 0 ${({ theme }) => theme.space.xxs2};\n  padding: ${({ theme }) => theme.space.xxs2} 0;\n  color: ${({ theme }) => theme.colors.danger[900]};\n  font-style: italic;\n  font-weight: ${({ theme }) => theme.fontWeights.thin};\n  font-size: ${({ theme }) => theme.fontSizes.microText[200]};\n  text-align: right;\n  background-color: white;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
+  "sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable @typescript-eslint/indent */\nimport { css, styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSButtonV2 } from '@elliemae/ds-button';\nimport { DSControlledDateTimePickerName, DSControlledDateTimePickerSlots } from '../../../exported-related/theming.js';\n\ninterface StyledWheelListItemPropsT {\n  isCurrentListItem?: boolean;\n  selected?: boolean;\n}\n\ninterface StyledTimePickerContainerT {\n  showShadow?: boolean;\n  isControllerOnly: boolean;\n}\n\nconst focusBorder = css`\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 ${({ theme, isDisabled }) => (isDisabled ? theme.colors.danger[900] : theme.colors.brand[700])};\n  }\n`;\n\nconst diagonalLine = css`\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: ${({ theme, isCurrentListItem, selected }) => {\n      if (selected) return theme.colors.neutral['000'];\n      if (isCurrentListItem) return theme.colors.danger[900];\n      return theme.colors.neutral[500];\n    }};\n  }\n`;\n\nconst fontColorPerStatus = css`\n  ${({ theme, isDisabled, isCurrentListItem, selected }) => {\n    if (selected) return theme.colors.neutral['000'];\n    if (isDisabled && isCurrentListItem) return theme.colors.danger[900];\n    if (isDisabled) return theme.colors.neutral[500];\n    if (isCurrentListItem) return theme.colors.brand[600];\n    return theme.colors.neutral[800];\n  }};\n`;\n\nconst hoverBgPerStatus = css`\n  ${({ theme, selected, isDisabled }) => {\n    if (isDisabled && selected) return theme.colors.danger[900];\n    if (selected) return theme.colors.brand[700];\n    return theme.colors.neutral['000'];\n  }}\n`;\n\nexport const StyledIconTriggerButton = styled(DSButtonV2, {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.PICKER_ICONS.TIMEWHEEL,\n})`\n  color: ${({ theme }) => theme.colors.brand['600']};\n  width: 26px;\n  height: 26px;\n`;\n\nexport const StyledWheelList = styled.div`\n  width: 100%;\n  height: 100%;\n  margin: auto;\n  padding: 0;\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  &:focus-within {\n    &:before {\n      content: '';\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      border-radius: 2px;\n      border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n      box-shadow: 0 0 2px ${({ theme }) => theme.colors.brand[700]};\n    }\n  }\n`;\n\nexport const StyledTimePickerContainer = styled.div<StyledTimePickerContainerT>`\n  display: grid;\n  position: relative;\n  grid-template-columns: 192px;\n  grid-template-rows: 36px 30px auto;\n  grid-template-areas:\n    'TimePickerHead'\n    'TimePickerWheelsLegend'\n    'VerticalWheelWrapper';\n`;\n\nexport const StyledTimePickerHead = styled(Grid, {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.TIMEWHEEL.HEADER_LABEL,\n})`\n  width: 100%;\n  grid-area: TimePickerHead;\n  justify-content: center;\n  align-items: center;\n  background: ${({ theme }) => theme.colors.neutral['050']};\n`;\n\nexport const StyledTimePickerWheelsLegend = styled.div`\n  width: 100%;\n  height: 100;\n  grid-area: TimePickerWheelsLegend;\n  display: grid;\n  grid-template-columns: ${({ theme }) => theme.space.xl} ${({ theme }) => theme.space.xl} ${({ theme }) =>\n      theme.space.xl};\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  background: ${({ theme }) => theme.colors.neutral['050']};\n`;\n\nexport const StyledTimePickerWheelWrapper = styled.div`\n  width: 100%;\n  background: ${({ theme }) => theme.colors.neutral['000']};\n  grid-area: VerticalWheelWrapper;\n  display: grid;\n  grid-template-columns: ${({ theme }) => theme.space.xl} ${({ theme }) => theme.space.xl} ${({ theme }) =>\n      theme.space.xl};\n  grid-template-rows: 100%;\n  & ul:not(:last-child) {\n    position: relative;\n    &:after {\n      content: '';\n      position: absolute;\n      left: 100%;\n      top: 5%;\n      height: 90%;\n      width: 1px;\n      background: ${({ theme }) => theme.colors.neutral[200]};\n    }\n  }\n`;\n\nexport const StyledTimeBtn = styled(DSButtonV2, {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.TIMEWHEEL.TIME_BUTTON,\n})`\n  position: relative;\n  height: ${({ theme }) => theme.space.s};\n  width: ${({ theme }) => theme.space.s};\n  border-radius: 50%;\n\n  &:hover {\n    background-color: ${hoverBgPerStatus};\n  }\n\n  color: ${fontColorPerStatus};\n\n  ${({ selected, isCurrentListItem }) => (isCurrentListItem && !selected ? focusBorder : ``)}\n\n  ${({ isDisabled }) =>\n    isDisabled\n      ? css`\n          cursor: not-allowed;\n          ${diagonalLine};\n        `\n      : ``}\n\n  ${({ theme, selected, isDisabled }) =>\n    selected\n      ? css`\n    font-weight: ${theme.fontWeights.semibold};\n    background-color ${isDisabled ? theme.colors.danger[900] : theme.colors.brand[700]};\n    `\n      : ``};\n`;\n\nexport const StyledWheelListItem = styled.div<StyledWheelListItemPropsT>`\n  margin: auto;\n  width: 36px;\n  height: 36px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n`;\n\nexport const StyledWheelChangeTimeBtn = styled(DSButtonV2, {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.TIMEWHEEL.TIME_CHANGE_BUTTON,\n})`\n  height: ${({ theme }) => theme.space.s};\n  width: ${({ theme }) => theme.space.s};\n  min-width: ${({ theme }) => theme.space.s};\n  border-radius: 50%;\n`;\n\nexport const TimeWheelFooterMessage = styled('footer', {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.FOOTERS.TIMEWHEEL,\n})`\n  border-top: solid 1px ${({ theme }) => theme.colors.neutral[300]};\n  margin: 0 ${({ theme }) => theme.space.xxs2};\n  padding: ${({ theme }) => theme.space.xxs2} 0;\n  color: ${({ theme }) => theme.colors.danger[900]};\n  font-style: italic;\n  font-weight: ${({ theme }) => theme.fontWeights.thin};\n  font-size: ${({ theme }) => theme.fontSizes.microText[200]};\n  text-align: right;\n  background-color: white;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
   "mappings": "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",
   "names": []
 }

package/dist/cjs/parts/Pickers/TimeWheel/TimeWheel.js

@@ -31,11 +31,11 @@ module.exports = __toCommonJS(TimeWheel_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
-var import_TimeWheelIconTrigger = require("./TimeWheelIconTrigger");
-var import_TimeWheelWrapper = require("./TimeWheelWrapper");
-var import_TimeWheelContext = require("./TimeWheelContext");
-var import_useConfigTimePickerCTX = require("./useConfigTimePickerCTX");
-var import_ControlledDateTimePickerCTX = require("../../../ControlledDateTimePickerCTX");
+var import_TimeWheelIconTrigger = require("./TimeWheelIconTrigger.js");
+var import_TimeWheelWrapper = require("./TimeWheelWrapper.js");
+var import_TimeWheelContext = require("./TimeWheelContext.js");
+var import_useConfigTimePickerCTX = require("./useConfigTimePickerCTX.js");
+var import_ControlledDateTimePickerCTX = require("../../../ControlledDateTimePickerCTX.js");
 const WrappedTimeWheelContext = ({ children }) => {
   const ctx = (0, import_useConfigTimePickerCTX.useConfigTimePickerCTX)();
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TimeWheelContext.TimeWheelContext.Provider, { value: ctx, children });

package/dist/cjs/parts/Pickers/TimeWheel/TimeWheel.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/parts/Pickers/TimeWheel/TimeWheel.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-len */\nimport React, { useContext } from 'react';\nimport { TimeWheelIconTrigger } from './TimeWheelIconTrigger';\nimport { TimeWheelWrapper } from './TimeWheelWrapper';\nimport { TimeWheelContext } from './TimeWheelContext';\nimport { useConfigTimePickerCTX } from './useConfigTimePickerCTX';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX';\n\n// the Context is Reused in CalendarWithTimeWheel\nexport const WrappedTimeWheelContext = ({ children }: { children: JSX.Element }) => {\n  const ctx = useConfigTimePickerCTX();\n  return <TimeWheelContext.Provider value={ctx}>{children}</TimeWheelContext.Provider>;\n};\n\nconst TimeWheelContent = () => {\n  const { showTimePicker, handleMenuWrapperKeyDown } = useContext(TimeWheelContext);\n  const { isControllerOnly } = useContext(ControlledDateTimePickerContext);\n\n  return (\n    <>\n      {isControllerOnly ? null : <TimeWheelIconTrigger />}\n      {isControllerOnly || showTimePicker ? (\n        <>\n          {/* The <div> element is catching the \"Escape\" key to close the calendar, there is no valid aria role for this */}\n          {/* https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-static-element-interactions.md#case-the-event-handler-is-only-being-used-to-capture-bubbled-events */}\n          {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}\n          <div onKeyDown={handleMenuWrapperKeyDown}>\n            <TimeWheelWrapper />\n          </div>\n        </>\n      ) : null}\n    </>\n  );\n};\n// we wrap in context in a separate statement so we can use the useContext and be sure it's correctly initialized\nexport const TimeWheel = (): JSX.Element => (\n  <WrappedTimeWheelContext>\n    <TimeWheelContent />\n  </WrappedTimeWheelContext>\n);\n", "import * as React from 'react';\nexport { React };\n"],
+  "sourcesContent": ["/* eslint-disable max-len */\nimport React, { useContext } from 'react';\nimport { TimeWheelIconTrigger } from './TimeWheelIconTrigger.js';\nimport { TimeWheelWrapper } from './TimeWheelWrapper.js';\nimport { TimeWheelContext } from './TimeWheelContext.js';\nimport { useConfigTimePickerCTX } from './useConfigTimePickerCTX.js';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';\n\n// the Context is Reused in CalendarWithTimeWheel\nexport const WrappedTimeWheelContext = ({ children }: { children: JSX.Element }) => {\n  const ctx = useConfigTimePickerCTX();\n  return <TimeWheelContext.Provider value={ctx}>{children}</TimeWheelContext.Provider>;\n};\n\nconst TimeWheelContent = () => {\n  const { showTimePicker, handleMenuWrapperKeyDown } = useContext(TimeWheelContext);\n  const { isControllerOnly } = useContext(ControlledDateTimePickerContext);\n\n  return (\n    <>\n      {isControllerOnly ? null : <TimeWheelIconTrigger />}\n      {isControllerOnly || showTimePicker ? (\n        <>\n          {/* The <div> element is catching the \"Escape\" key to close the calendar, there is no valid aria role for this */}\n          {/* https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-static-element-interactions.md#case-the-event-handler-is-only-being-used-to-capture-bubbled-events */}\n          {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}\n          <div onKeyDown={handleMenuWrapperKeyDown}>\n            <TimeWheelWrapper />\n          </div>\n        </>\n      ) : null}\n    </>\n  );\n};\n// we wrap in context in a separate statement so we can use the useContext and be sure it's correctly initialized\nexport const TimeWheel = (): JSX.Element => (\n  <WrappedTimeWheelContext>\n    <TimeWheelContent />\n  </WrappedTimeWheelContext>\n);\n", "import * as React from 'react';\nexport { React };\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADWd;AAVT,mBAAkC;AAClC,kCAAqC;AACrC,8BAAiC;AACjC,8BAAiC;AACjC,oCAAuC;AACvC,yCAAgD;AAGzC,MAAM,0BAA0B,CAAC,EAAE,SAAS,MAAiC;AAClF,QAAM,UAAM,sDAAuB;AACnC,SAAO,4CAAC,yCAAiB,UAAjB,EAA0B,OAAO,KAAM,UAAS;AAC1D;AAEA,MAAM,mBAAmB,MAAM;AAC7B,QAAM,EAAE,gBAAgB,yBAAyB,QAAI,yBAAW,wCAAgB;AAChF,QAAM,EAAE,iBAAiB,QAAI,yBAAW,kEAA+B;AAEvE,SACE,4EACG;AAAA,uBAAmB,OAAO,4CAAC,oDAAqB;AAAA,IAChD,oBAAoB,iBACnB,2EAIE,sDAAC,SAAI,WAAW,0BACd,sDAAC,4CAAiB,GACpB,GACF,IACE;AAAA,KACN;AAEJ;AAEO,MAAM,YAAY,MACvB,4CAAC,2BACC,sDAAC,oBAAiB,GACpB;",
   "names": []
 }

package/dist/cjs/parts/Pickers/TimeWheel/TimeWheelContent.js

@@ -30,22 +30,39 @@ module.exports = __toCommonJS(TimeWheelContent_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = __toESM(require("react"));
-var import_ControlledDateTimePickerDatatestid = require("../../../ControlledDateTimePickerDatatestid");
-var import_ControlledDateTimePickerCTX = require("../../../ControlledDateTimePickerCTX");
-var import_Styleds = require("./Styleds");
-var import_HoursList = require("./HoursList");
-var import_MinutesList = require("./MinutesList");
-var import_MeridiemList = require("./MeridiemList");
-var import_TimeWheelFooter = require("./TimeWheelFooter");
+var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
+var import_ControlledDateTimePickerDatatestid = require("../../../ControlledDateTimePickerDatatestid.js");
+var import_ControlledDateTimePickerCTX = require("../../../ControlledDateTimePickerCTX.js");
+var import_Styleds = require("./Styleds.js");
+var import_HoursList = require("./HoursList.js");
+var import_MinutesList = require("./MinutesList.js");
+var import_MeridiemList = require("./MeridiemList.js");
+var import_TimeWheelFooter = require("./TimeWheelFooter.js");
 const TimeWheelContent = import_react.default.memo(() => {
-  const { isControllerOnly, hours, minutes, meridiem } = (0, import_react.useContext)(import_ControlledDateTimePickerCTX.ControlledDateTimePickerContext);
+  const { isControllerOnly, hours, minutes, meridiem, props } = (0, import_react.useContext)(import_ControlledDateTimePickerCTX.ControlledDateTimePickerContext);
+  const ariaAndDataPropsHeaderLabel = import_react.default.useMemo(
+    () => (0, import_ds_props_helpers.getPropsPerDatatestid)(props[import_ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.TIMEWHEEL.HEADER_LABEL]),
+    [props]
+  );
+  const ariaAndDataPropsTimewheel = import_react.default.useMemo(
+    () => (0, import_ds_props_helpers.getPropsPerDatatestid)(props[import_ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.CONTROLLER_COMPONENT.TIMEWHEEL]),
+    [props]
+  );
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     import_Styleds.StyledTimePickerContainer,
     {
       isControllerOnly,
       "data-testid": import_ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.CONTROLLER_COMPONENT.TIMEWHEEL,
+      ...ariaAndDataPropsTimewheel,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Styleds.StyledTimePickerHead, { "data-testid": import_ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.TIMEWHEEL.HEADER_LABEL, children: `${hours || "__"}:${minutes || "__"} ${meridiem || "__"}` }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_Styleds.StyledTimePickerHead,
+          {
+            "data-testid": import_ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.TIMEWHEEL.HEADER_LABEL,
+            ...ariaAndDataPropsHeaderLabel,
+            children: `${hours || "__"}:${minutes || "__"} ${meridiem || "__"}`
+          }
+        ),
         /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Styleds.StyledTimePickerWheelsLegend, { children: [
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: "H" }),
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: "M" }),

package/dist/cjs/parts/Pickers/TimeWheel/TimeWheelContent.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/parts/Pickers/TimeWheel/TimeWheelContent.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useContext } from 'react';\nimport { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX';\nimport {\n  StyledTimePickerContainer,\n  StyledTimePickerHead,\n  StyledTimePickerWheelsLegend,\n  StyledTimePickerWheelWrapper,\n} from './Styleds';\nimport { HoursList } from './HoursList';\nimport { MinutesList } from './MinutesList';\nimport { MeridiemList } from './MeridiemList';\nimport { TimeWheelFooter } from './TimeWheelFooter';\n\nexport const TimeWheelContent = React.memo(() => {\n  const { isControllerOnly, hours, minutes, meridiem } = useContext(ControlledDateTimePickerContext);\n  return (\n    <StyledTimePickerContainer\n      isControllerOnly={isControllerOnly}\n      data-testid={ControlledDateTimePickerDatatestid.CONTROLLER_COMPONENT.TIMEWHEEL}\n    >\n      <StyledTimePickerHead data-testid={ControlledDateTimePickerDatatestid.TIMEWHEEL.HEADER_LABEL}>{`${\n        hours || '__'\n      }:${minutes || '__'} ${meridiem || '__'}`}</StyledTimePickerHead>\n      <StyledTimePickerWheelsLegend>\n        <div>H</div>\n        <div>M</div>\n        <div>A</div>\n      </StyledTimePickerWheelsLegend>\n      <StyledTimePickerWheelWrapper>\n        <HoursList />\n        <MinutesList />\n        <MeridiemList />\n      </StyledTimePickerWheelWrapper>\n      <TimeWheelFooter />\n    </StyledTimePickerContainer>\n  );\n});\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADqBjB;AArBN,mBAAkC;AAClC,gDAAmD;AACnD,yCAAgD;AAChD,qBAKO;AACP,uBAA0B;AAC1B,yBAA4B;AAC5B,0BAA6B;AAC7B,6BAAgC;AAEzB,MAAM,mBAAmB,aAAAA,QAAM,KAAK,MAAM;AAC/C,QAAM,EAAE,kBAAkB,OAAO,SAAS,SAAS,QAAI,yBAAW,kEAA+B;AACjG,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,eAAa,6EAAmC,qBAAqB;AAAA,MAErE;AAAA,oDAAC,uCAAqB,eAAa,6EAAmC,UAAU,cAAe,aAC7F,SAAS,QACP,WAAW,QAAQ,YAAY,QAAO;AAAA,QAC1C,6CAAC,+CACC;AAAA,sDAAC,SAAI,eAAC;AAAA,UACN,4CAAC,SAAI,eAAC;AAAA,UACN,4CAAC,SAAI,eAAC;AAAA,WACR;AAAA,QACA,6CAAC,+CACC;AAAA,sDAAC,8BAAU;AAAA,UACX,4CAAC,kCAAY;AAAA,UACb,4CAAC,oCAAa;AAAA,WAChB;AAAA,QACA,4CAAC,0CAAgB;AAAA;AAAA;AAAA,EACnB;AAEJ,CAAC;",
+  "sourcesContent": ["import React, { useContext } from 'react';\nimport { getPropsPerDatatestid } from '@elliemae/ds-props-helpers';\nimport { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid.js';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';\nimport {\n  StyledTimePickerContainer,\n  StyledTimePickerHead,\n  StyledTimePickerWheelsLegend,\n  StyledTimePickerWheelWrapper,\n} from './Styleds.js';\nimport { HoursList } from './HoursList.js';\nimport { MinutesList } from './MinutesList.js';\nimport { MeridiemList } from './MeridiemList.js';\nimport { TimeWheelFooter } from './TimeWheelFooter.js';\n\nexport const TimeWheelContent = React.memo(() => {\n  const { isControllerOnly, hours, minutes, meridiem, props } = useContext(ControlledDateTimePickerContext);\n  const ariaAndDataPropsHeaderLabel = React.useMemo(\n    () => getPropsPerDatatestid(props[ControlledDateTimePickerDatatestid.TIMEWHEEL.HEADER_LABEL]),\n    [props],\n  );\n  const ariaAndDataPropsTimewheel = React.useMemo(\n    () => getPropsPerDatatestid(props[ControlledDateTimePickerDatatestid.CONTROLLER_COMPONENT.TIMEWHEEL]),\n    [props],\n  );\n  return (\n    <StyledTimePickerContainer\n      isControllerOnly={isControllerOnly}\n      data-testid={ControlledDateTimePickerDatatestid.CONTROLLER_COMPONENT.TIMEWHEEL}\n      {...ariaAndDataPropsTimewheel}\n    >\n      <StyledTimePickerHead\n        data-testid={ControlledDateTimePickerDatatestid.TIMEWHEEL.HEADER_LABEL}\n        {...ariaAndDataPropsHeaderLabel}\n      >{`${hours || '__'}:${minutes || '__'} ${meridiem || '__'}`}</StyledTimePickerHead>\n      <StyledTimePickerWheelsLegend>\n        <div>H</div>\n        <div>M</div>\n        <div>A</div>\n      </StyledTimePickerWheelsLegend>\n      <StyledTimePickerWheelWrapper>\n        <HoursList />\n        <MinutesList />\n        <MeridiemList />\n      </StyledTimePickerWheelWrapper>\n      <TimeWheelFooter />\n    </StyledTimePickerContainer>\n  );\n});\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD+BjB;AA/BN,mBAAkC;AAClC,8BAAsC;AACtC,gDAAmD;AACnD,yCAAgD;AAChD,qBAKO;AACP,uBAA0B;AAC1B,yBAA4B;AAC5B,0BAA6B;AAC7B,6BAAgC;AAEzB,MAAM,mBAAmB,aAAAA,QAAM,KAAK,MAAM;AAC/C,QAAM,EAAE,kBAAkB,OAAO,SAAS,UAAU,MAAM,QAAI,yBAAW,kEAA+B;AACxG,QAAM,8BAA8B,aAAAA,QAAM;AAAA,IACxC,UAAM,+CAAsB,MAAM,6EAAmC,UAAU,aAAa;AAAA,IAC5F,CAAC,KAAK;AAAA,EACR;AACA,QAAM,4BAA4B,aAAAA,QAAM;AAAA,IACtC,UAAM,+CAAsB,MAAM,6EAAmC,qBAAqB,UAAU;AAAA,IACpG,CAAC,KAAK;AAAA,EACR;AACA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,eAAa,6EAAmC,qBAAqB;AAAA,MACpE,GAAG;AAAA,MAEJ;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,eAAa,6EAAmC,UAAU;AAAA,YACzD,GAAG;AAAA,YACJ,aAAG,SAAS,QAAQ,WAAW,QAAQ,YAAY;AAAA;AAAA,QAAO;AAAA,QAC5D,6CAAC,+CACC;AAAA,sDAAC,SAAI,eAAC;AAAA,UACN,4CAAC,SAAI,eAAC;AAAA,UACN,4CAAC,SAAI,eAAC;AAAA,WACR;AAAA,QACA,6CAAC,+CACC;AAAA,sDAAC,8BAAU;AAAA,UACX,4CAAC,kCAAY;AAAA,UACb,4CAAC,oCAAa;AAAA,WAChB;AAAA,QACA,4CAAC,0CAAgB;AAAA;AAAA;AAAA,EACnB;AAEJ,CAAC;",
   "names": ["React"]
 }

package/dist/cjs/parts/Pickers/TimeWheel/TimeWheelContext.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/parts/Pickers/TimeWheel/TimeWheelContext.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable @typescript-eslint/indent */\n/* eslint-disable max-lines */\nimport { createContext } from 'react';\nimport type { TimeWheelContextT } from './useConfigTimePickerCTX';\n\nexport const defaultTimePickerContext = {} as TimeWheelContextT;\n/** Context for cross component communication */\nexport const TimeWheelContext = createContext<TimeWheelContextT>(defaultTimePickerContext);\n\nexport default TimeWheelContext;\n", "import * as React from 'react';\nexport { React };\n"],
+  "sourcesContent": ["/* eslint-disable @typescript-eslint/indent */\n/* eslint-disable max-lines */\nimport { createContext } from 'react';\nimport type { TimeWheelContextT } from './useConfigTimePickerCTX.js';\n\nexport const defaultTimePickerContext = {} as TimeWheelContextT;\n/** Context for cross component communication */\nexport const TimeWheelContext = createContext<TimeWheelContextT>(defaultTimePickerContext);\n\nexport default TimeWheelContext;\n", "import * as React from 'react';\nexport { React };\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,mBAA8B;AAGvB,MAAM,2BAA2B,CAAC;AAElC,MAAM,uBAAmB,4BAAiC,wBAAwB;AAEzF,IAAO,2BAAQ;",
   "names": []
 }

package/dist/cjs/parts/Pickers/TimeWheel/TimeWheelFooter.js

@@ -29,17 +29,31 @@ __export(TimeWheelFooter_exports, {
 module.exports = __toCommonJS(TimeWheelFooter_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_react = require("react");
-var import_ControlledDateTimePickerDatatestid = require("../../../ControlledDateTimePickerDatatestid");
-var import_ControlledDateTimePickerCTX = require("../../../ControlledDateTimePickerCTX");
-var import_Styleds = require("./Styleds");
+var import_react = __toESM(require("react"));
+var import_ControlledDateTimePickerDatatestid = require("../../../ControlledDateTimePickerDatatestid.js");
+var import_ControlledDateTimePickerCTX = require("../../../ControlledDateTimePickerCTX.js");
+var import_Styleds = require("./Styleds.js");
+var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
 const TimeWheelFooter = () => {
   const {
+    props,
     props: { pickerFooterMsg, hasError },
     isWithCalendarToo
   } = (0, import_react.useContext)(import_ControlledDateTimePickerCTX.ControlledDateTimePickerContext);
+  const ariaAndDataProps = import_react.default.useMemo(
+    () => (0, import_ds_props_helpers.getPropsPerDatatestid)(props[import_ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.FOOTERS.TIMEWHEEL]),
+    [props]
+  );
   if (!isWithCalendarToo && pickerFooterMsg !== void 0 && hasError)
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Styleds.TimeWheelFooterMessage, { role: "alert", "data-testid": import_ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.FOOTERS.TIMEWHEEL, children: pickerFooterMsg });
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_Styleds.TimeWheelFooterMessage,
+      {
+        role: "alert",
+        "data-testid": import_ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.FOOTERS.TIMEWHEEL,
+        ...ariaAndDataProps,
+        children: pickerFooterMsg
+      }
+    );
   return null;
 };
 //# sourceMappingURL=TimeWheelFooter.js.map

package/dist/cjs/parts/Pickers/TimeWheel/TimeWheelFooter.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/parts/Pickers/TimeWheel/TimeWheelFooter.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useContext } from 'react';\nimport { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX';\nimport { TimeWheelFooterMessage } from './Styleds';\n\nexport const TimeWheelFooter: React.ComponentType = () => {\n  const {\n    props: { pickerFooterMsg, hasError },\n    isWithCalendarToo,\n  } = useContext(ControlledDateTimePickerContext);\n  if (!isWithCalendarToo && pickerFooterMsg !== undefined && hasError)\n    return (\n      <TimeWheelFooterMessage role=\"alert\" data-testid={ControlledDateTimePickerDatatestid.FOOTERS.TIMEWHEEL}>\n        {pickerFooterMsg}\n      </TimeWheelFooterMessage>\n    );\n  return null;\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADYjB;AAZN,mBAAkC;AAClC,gDAAmD;AACnD,yCAAgD;AAChD,qBAAuC;AAEhC,MAAM,kBAAuC,MAAM;AACxD,QAAM;AAAA,IACJ,OAAO,EAAE,iBAAiB,SAAS;AAAA,IACnC;AAAA,EACF,QAAI,yBAAW,kEAA+B;AAC9C,MAAI,CAAC,qBAAqB,oBAAoB,UAAa;AACzD,WACE,4CAAC,yCAAuB,MAAK,SAAQ,eAAa,6EAAmC,QAAQ,WAC1F,2BACH;AAEJ,SAAO;AACT;",
-  "names": []
+  "sourcesContent": ["import React, { useContext } from 'react';\nimport { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid.js';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';\nimport { TimeWheelFooterMessage } from './Styleds.js';\nimport { getPropsPerDatatestid } from '@elliemae/ds-props-helpers';\n\nexport const TimeWheelFooter: React.ComponentType = () => {\n  const {\n    props,\n    props: { pickerFooterMsg, hasError },\n    isWithCalendarToo,\n  } = useContext(ControlledDateTimePickerContext);\n  const ariaAndDataProps = React.useMemo(\n    () => getPropsPerDatatestid(props[ControlledDateTimePickerDatatestid.FOOTERS.TIMEWHEEL]),\n    [props],\n  );\n  if (!isWithCalendarToo && pickerFooterMsg !== undefined && hasError)\n    return (\n      <TimeWheelFooterMessage\n        role=\"alert\"\n        data-testid={ControlledDateTimePickerDatatestid.FOOTERS.TIMEWHEEL}\n        {...ariaAndDataProps}\n      >\n        {pickerFooterMsg}\n      </TimeWheelFooterMessage>\n    );\n  return null;\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADkBjB;AAlBN,mBAAkC;AAClC,gDAAmD;AACnD,yCAAgD;AAChD,qBAAuC;AACvC,8BAAsC;AAE/B,MAAM,kBAAuC,MAAM;AACxD,QAAM;AAAA,IACJ;AAAA,IACA,OAAO,EAAE,iBAAiB,SAAS;AAAA,IACnC;AAAA,EACF,QAAI,yBAAW,kEAA+B;AAC9C,QAAM,mBAAmB,aAAAA,QAAM;AAAA,IAC7B,UAAM,+CAAsB,MAAM,6EAAmC,QAAQ,UAAU;AAAA,IACvF,CAAC,KAAK;AAAA,EACR;AACA,MAAI,CAAC,qBAAqB,oBAAoB,UAAa;AACzD,WACE;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,eAAa,6EAAmC,QAAQ;AAAA,QACvD,GAAG;AAAA,QAEH;AAAA;AAAA,IACH;AAEJ,SAAO;AACT;",
+  "names": ["React"]
 }

package/dist/cjs/parts/Pickers/TimeWheel/TimeWheelIconTrigger.js

@@ -29,19 +29,25 @@ __export(TimeWheelIconTrigger_exports, {
 module.exports = __toCommonJS(TimeWheelIconTrigger_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_react = require("react");
+var import_react = __toESM(require("react"));
+var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
 var import_ds_button = require("@elliemae/ds-button");
 var import_ds_icons = require("@elliemae/ds-icons");
-var import_TimeWheelContext = require("./TimeWheelContext");
-var import_ControlledDateTimePickerDatatestid = require("../../../ControlledDateTimePickerDatatestid");
-var import_ControlledDateTimePickerCTX = require("../../../ControlledDateTimePickerCTX");
-var import_Styleds = require("./Styleds");
+var import_TimeWheelContext = require("./TimeWheelContext.js");
+var import_ControlledDateTimePickerDatatestid = require("../../../ControlledDateTimePickerDatatestid.js");
+var import_ControlledDateTimePickerCTX = require("../../../ControlledDateTimePickerCTX.js");
+var import_Styleds = require("./Styleds.js");
 const TimeWheelIconTrigger = () => {
   const { handleSetTriggerRef, handleToggleTimePicker, handlePickerIconKeyDown } = (0, import_react.useContext)(import_TimeWheelContext.TimeWheelContext);
   const {
+    props,
     props: { disabled },
     ariaCurrentValueForInputs
   } = (0, import_react.useContext)(import_ControlledDateTimePickerCTX.ControlledDateTimePickerContext);
+  const ariaAndDataProps = import_react.default.useMemo(
+    () => (0, import_ds_props_helpers.getPropsPerDatatestid)(props[import_ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.PICKER_ICONS.TIMEWHEEL]),
+    [props]
+  );
   return (0, import_react.useMemo)(
     () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_Styleds.StyledIconTriggerButton,
@@ -55,10 +61,18 @@ const TimeWheelIconTrigger = () => {
         "data-testid": import_ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.PICKER_ICONS.TIMEWHEEL,
         disabled,
         type: "button",
+        ...ariaAndDataProps,
         children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.RecentDocuments, {})
       }
     ),
-    [ariaCurrentValueForInputs, disabled, handlePickerIconKeyDown, handleSetTriggerRef, handleToggleTimePicker]
+    [
+      ariaAndDataProps,
+      ariaCurrentValueForInputs,
+      disabled,
+      handlePickerIconKeyDown,
+      handleSetTriggerRef,
+      handleToggleTimePicker
+    ]
   );
 };
 //# sourceMappingURL=TimeWheelIconTrigger.js.map

package/dist/cjs/parts/Pickers/TimeWheel/TimeWheelIconTrigger.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/parts/Pickers/TimeWheel/TimeWheelIconTrigger.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useContext, useMemo } from 'react';\nimport { BUTTON_SIZES } from '@elliemae/ds-button';\nimport { RecentDocuments } from '@elliemae/ds-icons';\nimport { TimeWheelContext } from './TimeWheelContext';\nimport { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX';\nimport { StyledIconTriggerButton } from './Styleds';\n\n// we memoize the Icon for maximum optimization\n// this is particularly useful due to how usePopper needs to check the references\n// since references are saved in a immutable way, we make sure to shortcircuit useless-re-renders\nexport const TimeWheelIconTrigger = (): JSX.Element => {\n  const { handleSetTriggerRef, handleToggleTimePicker, handlePickerIconKeyDown } = useContext(TimeWheelContext);\n  const {\n    props: { disabled },\n    ariaCurrentValueForInputs,\n  } = useContext(ControlledDateTimePickerContext);\n  return useMemo(\n    () => (\n      <StyledIconTriggerButton\n        aria-label={`time picker context menu trigger, ${ariaCurrentValueForInputs}`}\n        buttonType=\"icon\"\n        size={BUTTON_SIZES.M}\n        innerRef={handleSetTriggerRef}\n        onClick={handleToggleTimePicker}\n        onKeyDown={handlePickerIconKeyDown}\n        data-testid={ControlledDateTimePickerDatatestid.PICKER_ICONS.TIMEWHEEL}\n        disabled={disabled}\n        type=\"button\"\n      >\n        <RecentDocuments />\n      </StyledIconTriggerButton>\n    ),\n    [ariaCurrentValueForInputs, disabled, handlePickerIconKeyDown, handleSetTriggerRef, handleToggleTimePicker],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD8Bf;AA9BR,mBAA2C;AAC3C,uBAA6B;AAC7B,sBAAgC;AAChC,8BAAiC;AACjC,gDAAmD;AACnD,yCAAgD;AAChD,qBAAwC;AAKjC,MAAM,uBAAuB,MAAmB;AACrD,QAAM,EAAE,qBAAqB,wBAAwB,wBAAwB,QAAI,yBAAW,wCAAgB;AAC5G,QAAM;AAAA,IACJ,OAAO,EAAE,SAAS;AAAA,IAClB;AAAA,EACF,QAAI,yBAAW,kEAA+B;AAC9C,aAAO;AAAA,IACL,MACE;AAAA,MAAC;AAAA;AAAA,QACC,cAAY,qCAAqC;AAAA,QACjD,YAAW;AAAA,QACX,MAAM,8BAAa;AAAA,QACnB,UAAU;AAAA,QACV,SAAS;AAAA,QACT,WAAW;AAAA,QACX,eAAa,6EAAmC,aAAa;AAAA,QAC7D;AAAA,QACA,MAAK;AAAA,QAEL,sDAAC,mCAAgB;AAAA;AAAA,IACnB;AAAA,IAEF,CAAC,2BAA2B,UAAU,yBAAyB,qBAAqB,sBAAsB;AAAA,EAC5G;AACF;",
-  "names": []
+  "sourcesContent": ["import React, { useContext, useMemo } from 'react';\nimport { getPropsPerDatatestid } from '@elliemae/ds-props-helpers';\nimport { BUTTON_SIZES } from '@elliemae/ds-button';\nimport { RecentDocuments } from '@elliemae/ds-icons';\nimport { TimeWheelContext } from './TimeWheelContext.js';\nimport { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid.js';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';\nimport { StyledIconTriggerButton } from './Styleds.js';\n\n// we memoize the Icon for maximum optimization\n// this is particularly useful due to how usePopper needs to check the references\n// since references are saved in a immutable way, we make sure to shortcircuit useless-re-renders\nexport const TimeWheelIconTrigger = (): JSX.Element => {\n  const { handleSetTriggerRef, handleToggleTimePicker, handlePickerIconKeyDown } = useContext(TimeWheelContext);\n  const {\n    props,\n    props: { disabled },\n    ariaCurrentValueForInputs,\n  } = useContext(ControlledDateTimePickerContext);\n  const ariaAndDataProps = React.useMemo(\n    () => getPropsPerDatatestid(props[ControlledDateTimePickerDatatestid.PICKER_ICONS.TIMEWHEEL]),\n    [props],\n  );\n  return useMemo(\n    () => (\n      <StyledIconTriggerButton\n        aria-label={`time picker context menu trigger, ${ariaCurrentValueForInputs}`}\n        buttonType=\"icon\"\n        size={BUTTON_SIZES.M}\n        innerRef={handleSetTriggerRef}\n        onClick={handleToggleTimePicker}\n        onKeyDown={handlePickerIconKeyDown}\n        data-testid={ControlledDateTimePickerDatatestid.PICKER_ICONS.TIMEWHEEL}\n        disabled={disabled}\n        type=\"button\"\n        {...ariaAndDataProps}\n      >\n        <RecentDocuments />\n      </StyledIconTriggerButton>\n    ),\n    [\n      ariaAndDataProps,\n      ariaCurrentValueForInputs,\n      disabled,\n      handlePickerIconKeyDown,\n      handleSetTriggerRef,\n      handleToggleTimePicker,\n    ],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADqCf;AArCR,mBAA2C;AAC3C,8BAAsC;AACtC,uBAA6B;AAC7B,sBAAgC;AAChC,8BAAiC;AACjC,gDAAmD;AACnD,yCAAgD;AAChD,qBAAwC;AAKjC,MAAM,uBAAuB,MAAmB;AACrD,QAAM,EAAE,qBAAqB,wBAAwB,wBAAwB,QAAI,yBAAW,wCAAgB;AAC5G,QAAM;AAAA,IACJ;AAAA,IACA,OAAO,EAAE,SAAS;AAAA,IAClB;AAAA,EACF,QAAI,yBAAW,kEAA+B;AAC9C,QAAM,mBAAmB,aAAAA,QAAM;AAAA,IAC7B,UAAM,+CAAsB,MAAM,6EAAmC,aAAa,UAAU;AAAA,IAC5F,CAAC,KAAK;AAAA,EACR;AACA,aAAO;AAAA,IACL,MACE;AAAA,MAAC;AAAA;AAAA,QACC,cAAY,qCAAqC;AAAA,QACjD,YAAW;AAAA,QACX,MAAM,8BAAa;AAAA,QACnB,UAAU;AAAA,QACV,SAAS;AAAA,QACT,WAAW;AAAA,QACX,eAAa,6EAAmC,aAAa;AAAA,QAC7D;AAAA,QACA,MAAK;AAAA,QACJ,GAAG;AAAA,QAEJ,sDAAC,mCAAgB;AAAA;AAAA,IACnB;AAAA,IAEF;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;",
+  "names": ["React"]
 }

package/dist/cjs/parts/Pickers/TimeWheel/TimeWheelWrapper.js

@@ -29,15 +29,20 @@ __export(TimeWheelWrapper_exports, {
 module.exports = __toCommonJS(TimeWheelWrapper_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_react = require("react");
+var import_react = __toESM(require("react"));
+var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
 var import_ds_popperjs = require("@elliemae/ds-popperjs");
-var import_ControlledDateTimePickerDatatestid = require("../../../ControlledDateTimePickerDatatestid");
-var import_ControlledDateTimePickerCTX = require("../../../ControlledDateTimePickerCTX");
-var import_TimeWheelContent = require("./TimeWheelContent");
-var import_TimeWheelContext = require("./TimeWheelContext");
+var import_ControlledDateTimePickerDatatestid = require("../../../ControlledDateTimePickerDatatestid.js");
+var import_ControlledDateTimePickerCTX = require("../../../ControlledDateTimePickerCTX.js");
+var import_TimeWheelContent = require("./TimeWheelContent.js");
+var import_TimeWheelContext = require("./TimeWheelContext.js");
 const TimeWheelWrapper = () => {
   const { referenceElement, closeTimePicker } = (0, import_react.useContext)(import_TimeWheelContext.TimeWheelContext);
-  const { isControllerOnly } = (0, import_react.useContext)(import_ControlledDateTimePickerCTX.ControlledDateTimePickerContext);
+  const { isControllerOnly, props } = (0, import_react.useContext)(import_ControlledDateTimePickerCTX.ControlledDateTimePickerContext);
+  const ariaAndDataProps = import_react.default.useMemo(
+    () => (0, import_ds_props_helpers.getPropsPerDatatestid)(props[import_ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.CONTEXTUAL_MENU.TIMEWHEEL]),
+    [props]
+  );
   if (isControllerOnly)
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TimeWheelContent.TimeWheelContent, {});
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -48,6 +53,7 @@ const TimeWheelWrapper = () => {
       referenceElement,
       withoutArrow: true,
       onClickOutside: closeTimePicker,
+      ...ariaAndDataProps,
       children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TimeWheelContent.TimeWheelContent, {})
     }
   );