@elliemae/ds-form-date-time-picker 3.16.0-next.2 → 3.16.0-next.3

package/dist/esm/parts/Pickers/CalendarWithTimeWheel/CalendarWithTimeWheelContent.js

@@ -1,18 +1,24 @@
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useContext } from "react";
+import React2, { useContext } from "react";
+import { getPropsPerDatatestid } from "@elliemae/ds-props-helpers";
 import { ControlledDateTimePickerDatatestid } from "../../../ControlledDateTimePickerDatatestid";
 import { StyledCalendarWithTimeWheelWrapper, StyledCalendar } from "./Styleds";
 import { CalendarWithTimeWheelFooter } from "./CalendarWithTimeWheelFooter";
 import { TimeWheelContent } from "../TimeWheel/TimeWheelContent";
 import { ControlledDateTimePickerContext } from "../../../ControlledDateTimePickerCTX";
 const CalendarWithTimeWheelContent = () => {
-  const { isControllerOnly } = useContext(ControlledDateTimePickerContext);
+  const { isControllerOnly, props } = useContext(ControlledDateTimePickerContext);
+  const ariaAndDataProps = React2.useMemo(
+    () => getPropsPerDatatestid(props[ControlledDateTimePickerDatatestid.CONTROLLER_COMPONENT.CALENDAR_TIMEWHEEL]),
+    [props]
+  );
   return /* @__PURE__ */ jsxs(
     StyledCalendarWithTimeWheelWrapper,
     {
       isControllerOnly,
       "data-testid": ControlledDateTimePickerDatatestid.CONTROLLER_COMPONENT.CALENDAR_TIMEWHEEL,
+      ...ariaAndDataProps,
       children: [
         /* @__PURE__ */ jsx(StyledCalendar, {}),
         /* @__PURE__ */ jsx(TimeWheelContent, {}),

package/dist/esm/parts/Pickers/CalendarWithTimeWheel/CalendarWithTimeWheelContent.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/Pickers/CalendarWithTimeWheel/CalendarWithTimeWheelContent.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid';\nimport { StyledCalendarWithTimeWheelWrapper, StyledCalendar } from './Styleds';\nimport { CalendarWithTimeWheelFooter } from './CalendarWithTimeWheelFooter';\nimport { TimeWheelContent } from '../TimeWheel/TimeWheelContent';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX';\n\nexport const CalendarWithTimeWheelContent = (): JSX.Element => {\n  const { isControllerOnly } = useContext(ControlledDateTimePickerContext);\n  return (\n    <StyledCalendarWithTimeWheelWrapper\n      isControllerOnly={isControllerOnly}\n      data-testid={ControlledDateTimePickerDatatestid.CONTROLLER_COMPONENT.CALENDAR_TIMEWHEEL}\n    >\n      <StyledCalendar />\n      <TimeWheelContent />\n      <CalendarWithTimeWheelFooter />\n    </StyledCalendarWithTimeWheelWrapper>\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACUnB,SAIE,KAJF;AAVJ,SAAgB,kBAAkB;AAClC,SAAS,0CAA0C;AACnD,SAAS,oCAAoC,sBAAsB;AACnE,SAAS,mCAAmC;AAC5C,SAAS,wBAAwB;AACjC,SAAS,uCAAuC;AAEzC,MAAM,+BAA+B,MAAmB;AAC7D,QAAM,EAAE,iBAAiB,IAAI,WAAW,+BAA+B;AACvE,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,eAAa,mCAAmC,qBAAqB;AAAA,MAErE;AAAA,4BAAC,kBAAe;AAAA,QAChB,oBAAC,oBAAiB;AAAA,QAClB,oBAAC,+BAA4B;AAAA;AAAA;AAAA,EAC/B;AAEJ;",
-  "names": []
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport { getPropsPerDatatestid } from '@elliemae/ds-props-helpers';\nimport { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid';\nimport { StyledCalendarWithTimeWheelWrapper, StyledCalendar } from './Styleds';\nimport { CalendarWithTimeWheelFooter } from './CalendarWithTimeWheelFooter';\nimport { TimeWheelContent } from '../TimeWheel/TimeWheelContent';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX';\n\nexport const CalendarWithTimeWheelContent = (): JSX.Element => {\n  const { isControllerOnly, props } = useContext(ControlledDateTimePickerContext);\n  const ariaAndDataProps = React.useMemo(\n    () => getPropsPerDatatestid(props[ControlledDateTimePickerDatatestid.CONTROLLER_COMPONENT.CALENDAR_TIMEWHEEL]),\n    [props],\n  );\n  return (\n    <StyledCalendarWithTimeWheelWrapper\n      isControllerOnly={isControllerOnly}\n      data-testid={ControlledDateTimePickerDatatestid.CONTROLLER_COMPONENT.CALENDAR_TIMEWHEEL}\n      {...ariaAndDataProps}\n    >\n      <StyledCalendar />\n      <TimeWheelContent />\n      <CalendarWithTimeWheelFooter />\n    </StyledCalendarWithTimeWheelWrapper>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACenB,SAKE,KALF;AAfJ,OAAOA,UAAS,kBAAkB;AAClC,SAAS,6BAA6B;AACtC,SAAS,0CAA0C;AACnD,SAAS,oCAAoC,sBAAsB;AACnE,SAAS,mCAAmC;AAC5C,SAAS,wBAAwB;AACjC,SAAS,uCAAuC;AAEzC,MAAM,+BAA+B,MAAmB;AAC7D,QAAM,EAAE,kBAAkB,MAAM,IAAI,WAAW,+BAA+B;AAC9E,QAAM,mBAAmBA,OAAM;AAAA,IAC7B,MAAM,sBAAsB,MAAM,mCAAmC,qBAAqB,mBAAmB;AAAA,IAC7G,CAAC,KAAK;AAAA,EACR;AACA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,eAAa,mCAAmC,qBAAqB;AAAA,MACpE,GAAG;AAAA,MAEJ;AAAA,4BAAC,kBAAe;AAAA,QAChB,oBAAC,oBAAiB;AAAA,QAClB,oBAAC,+BAA4B;AAAA;AAAA;AAAA,EAC/B;AAEJ;",
+  "names": ["React"]
 }

package/dist/esm/parts/Pickers/CalendarWithTimeWheel/CalendarWithTimeWheelFooter.js

@@ -1,18 +1,25 @@
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
-import { useContext } from "react";
+import React2, { useContext } from "react";
+import { getPropsPerDatatestid } from "@elliemae/ds-props-helpers";
 import { ControlledDateTimePickerDatatestid } from "../../../ControlledDateTimePickerDatatestid";
 import { ControlledDateTimePickerContext } from "../../../ControlledDateTimePickerCTX";
 import { CalendarWithTimeWheelFooterMessage } from "./Styleds";
 const CalendarWithTimeWheelFooter = () => {
   const {
+    props,
     props: { pickerFooterMsg, hasError }
   } = useContext(ControlledDateTimePickerContext);
+  const ariaAndDataProps = React2.useMemo(
+    () => getPropsPerDatatestid(props[ControlledDateTimePickerDatatestid.FOOTERS.CALENDAR_TIMEWHEEL]),
+    [props]
+  );
   return pickerFooterMsg !== void 0 && hasError ? /* @__PURE__ */ jsx(
     CalendarWithTimeWheelFooterMessage,
     {
       role: "alert",
       "data-testid": ControlledDateTimePickerDatatestid.FOOTERS.CALENDAR_TIMEWHEEL,
+      ...ariaAndDataProps,
       children: pickerFooterMsg
     }
   ) : null;

package/dist/esm/parts/Pickers/CalendarWithTimeWheel/CalendarWithTimeWheelFooter.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/Pickers/CalendarWithTimeWheel/CalendarWithTimeWheelFooter.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX';\nimport { CalendarWithTimeWheelFooterMessage } from './Styleds';\n\nexport const CalendarWithTimeWheelFooter: React.ComponentType = () => {\n  const {\n    props: { pickerFooterMsg, hasError },\n  } = useContext(ControlledDateTimePickerContext);\n  return pickerFooterMsg !== undefined && hasError ? (\n    <CalendarWithTimeWheelFooterMessage\n      role=\"alert\"\n      data-testid={ControlledDateTimePickerDatatestid.FOOTERS.CALENDAR_TIMEWHEEL}\n    >\n      {pickerFooterMsg}\n    </CalendarWithTimeWheelFooterMessage>\n  ) : null;\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACUnB;AAVJ,SAAgB,kBAAkB;AAClC,SAAS,0CAA0C;AACnD,SAAS,uCAAuC;AAChD,SAAS,0CAA0C;AAE5C,MAAM,8BAAmD,MAAM;AACpE,QAAM;AAAA,IACJ,OAAO,EAAE,iBAAiB,SAAS;AAAA,EACrC,IAAI,WAAW,+BAA+B;AAC9C,SAAO,oBAAoB,UAAa,WACtC;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,eAAa,mCAAmC,QAAQ;AAAA,MAEvD;AAAA;AAAA,EACH,IACE;AACN;",
-  "names": []
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport { getPropsPerDatatestid } from '@elliemae/ds-props-helpers';\nimport { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX';\nimport { CalendarWithTimeWheelFooterMessage } from './Styleds';\n\nexport const CalendarWithTimeWheelFooter: React.ComponentType = () => {\n  const {\n    props,\n    props: { pickerFooterMsg, hasError },\n  } = useContext(ControlledDateTimePickerContext);\n  const ariaAndDataProps = React.useMemo(\n    () => getPropsPerDatatestid(props[ControlledDateTimePickerDatatestid.FOOTERS.CALENDAR_TIMEWHEEL]),\n    [props],\n  );\n  return pickerFooterMsg !== undefined && hasError ? (\n    <CalendarWithTimeWheelFooterMessage\n      role=\"alert\"\n      data-testid={ControlledDateTimePickerDatatestid.FOOTERS.CALENDAR_TIMEWHEEL}\n      {...ariaAndDataProps}\n    >\n      {pickerFooterMsg}\n    </CalendarWithTimeWheelFooterMessage>\n  ) : null;\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACgBnB;AAhBJ,OAAOA,UAAS,kBAAkB;AAClC,SAAS,6BAA6B;AACtC,SAAS,0CAA0C;AACnD,SAAS,uCAAuC;AAChD,SAAS,0CAA0C;AAE5C,MAAM,8BAAmD,MAAM;AACpE,QAAM;AAAA,IACJ;AAAA,IACA,OAAO,EAAE,iBAAiB,SAAS;AAAA,EACrC,IAAI,WAAW,+BAA+B;AAC9C,QAAM,mBAAmBA,OAAM;AAAA,IAC7B,MAAM,sBAAsB,MAAM,mCAAmC,QAAQ,mBAAmB;AAAA,IAChG,CAAC,KAAK;AAAA,EACR;AACA,SAAO,oBAAoB,UAAa,WACtC;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,eAAa,mCAAmC,QAAQ;AAAA,MACvD,GAAG;AAAA,MAEH;AAAA;AAAA,EACH,IACE;AACN;",
+  "names": ["React"]
 }

package/dist/esm/parts/Pickers/CalendarWithTimeWheel/CalendarWithTimeWheelIconTrigger.js

@@ -1,10 +1,12 @@
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
-import { useContext, useMemo } from "react";
+import React2, { useContext, useMemo } from "react";
+import { getPropsPerDatatestid } from "@elliemae/ds-props-helpers";
 import { BUTTON_SIZES } from "@elliemae/ds-button";
 import { DatePicker } from "@elliemae/ds-icons";
 import { CalendarWithTimeWheelContext } from "./CalendarWithTimeWheelContext";
 import { StyledIconTriggerButton } from "./Styleds";
+import { ControlledDateTimePickerContext } from "../../../ControlledDateTimePickerCTX";
 import { ControlledDateTimePickerDatatestid } from "../../../ControlledDateTimePickerDatatestid";
 const CalendarWithTimeWheelIconTrigger = () => {
   const {
@@ -14,6 +16,11 @@ const CalendarWithTimeWheelIconTrigger = () => {
     ariaCurrentValueForInputs,
     disabled
   } = useContext(CalendarWithTimeWheelContext);
+  const { props } = useContext(ControlledDateTimePickerContext);
+  const ariaAndDataProps = React2.useMemo(
+    () => getPropsPerDatatestid(props[ControlledDateTimePickerDatatestid.PICKER_ICONS.CALENDAR_TIMEWHEEL]),
+    [props]
+  );
   return useMemo(
     () => /* @__PURE__ */ jsx(
       StyledIconTriggerButton,
@@ -27,10 +34,12 @@ const CalendarWithTimeWheelIconTrigger = () => {
         onKeyDown: handlePickerIconKeyDown,
         "data-testid": ControlledDateTimePickerDatatestid.PICKER_ICONS.CALENDAR_TIMEWHEEL,
         disabled,
+        ...ariaAndDataProps,
         children: /* @__PURE__ */ jsx(DatePicker, {})
       }
     ),
     [
+      ariaAndDataProps,
       ariaCurrentValueForInputs,
       disabled,
       handlePickerIconKeyDown,

package/dist/esm/parts/Pickers/CalendarWithTimeWheel/CalendarWithTimeWheelIconTrigger.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/Pickers/CalendarWithTimeWheel/CalendarWithTimeWheelIconTrigger.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useMemo } from 'react';\nimport { BUTTON_SIZES } from '@elliemae/ds-button';\nimport { DatePicker } from '@elliemae/ds-icons';\nimport { CalendarWithTimeWheelContext } from './CalendarWithTimeWheelContext';\nimport { StyledIconTriggerButton } from './Styleds';\nimport { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid';\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 CalendarWithTimeWheelIconTrigger = (): JSX.Element => {\n  const {\n    handleSetTriggerRef,\n    handleToggleCalendarWithTimeWheel,\n    handlePickerIconKeyDown,\n    ariaCurrentValueForInputs,\n    disabled,\n  } = useContext(CalendarWithTimeWheelContext);\n  return useMemo(\n    () => (\n      <StyledIconTriggerButton\n        aria-label={`date time picker context menu trigger, ${ariaCurrentValueForInputs}`}\n        buttonType=\"icon\"\n        type=\"button\"\n        size={BUTTON_SIZES.M}\n        innerRef={handleSetTriggerRef}\n        onClick={handleToggleCalendarWithTimeWheel}\n        onKeyDown={handlePickerIconKeyDown}\n        data-testid={ControlledDateTimePickerDatatestid.PICKER_ICONS.CALENDAR_TIMEWHEEL}\n        disabled={disabled}\n      >\n        <DatePicker />\n      </StyledIconTriggerButton>\n    ),\n    [\n      ariaCurrentValueForInputs,\n      disabled,\n      handlePickerIconKeyDown,\n      handleSetTriggerRef,\n      handleToggleCalendarWithTimeWheel,\n    ],\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;AC+Bf;AA/BR,SAAgB,YAAY,eAAe;AAC3C,SAAS,oBAAoB;AAC7B,SAAS,kBAAkB;AAC3B,SAAS,oCAAoC;AAC7C,SAAS,+BAA+B;AACxC,SAAS,0CAA0C;AAK5C,MAAM,mCAAmC,MAAmB;AACjE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,4BAA4B;AAC3C,SAAO;AAAA,IACL,MACE;AAAA,MAAC;AAAA;AAAA,QACC,cAAY,0CAA0C;AAAA,QACtD,YAAW;AAAA,QACX,MAAK;AAAA,QACL,MAAM,aAAa;AAAA,QACnB,UAAU;AAAA,QACV,SAAS;AAAA,QACT,WAAW;AAAA,QACX,eAAa,mCAAmC,aAAa;AAAA,QAC7D;AAAA,QAEA,8BAAC,cAAW;AAAA;AAAA,IACd;AAAA,IAEF;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;",
-  "names": []
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useMemo } from 'react';\nimport { getPropsPerDatatestid } from '@elliemae/ds-props-helpers';\nimport { BUTTON_SIZES } from '@elliemae/ds-button';\nimport { DatePicker } from '@elliemae/ds-icons';\nimport { CalendarWithTimeWheelContext } from './CalendarWithTimeWheelContext';\nimport { StyledIconTriggerButton } from './Styleds';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX';\nimport { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid';\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 CalendarWithTimeWheelIconTrigger = (): JSX.Element => {\n  const {\n    handleSetTriggerRef,\n    handleToggleCalendarWithTimeWheel,\n    handlePickerIconKeyDown,\n    ariaCurrentValueForInputs,\n    disabled,\n  } = useContext(CalendarWithTimeWheelContext);\n  const { props } = useContext(ControlledDateTimePickerContext);\n  const ariaAndDataProps = React.useMemo(\n    () => getPropsPerDatatestid(props[ControlledDateTimePickerDatatestid.PICKER_ICONS.CALENDAR_TIMEWHEEL]),\n    [props],\n  );\n  return useMemo(\n    () => (\n      <StyledIconTriggerButton\n        aria-label={`date time picker context menu trigger, ${ariaCurrentValueForInputs}`}\n        buttonType=\"icon\"\n        type=\"button\"\n        size={BUTTON_SIZES.M}\n        innerRef={handleSetTriggerRef}\n        onClick={handleToggleCalendarWithTimeWheel}\n        onKeyDown={handlePickerIconKeyDown}\n        data-testid={ControlledDateTimePickerDatatestid.PICKER_ICONS.CALENDAR_TIMEWHEEL}\n        disabled={disabled}\n        {...ariaAndDataProps}\n      >\n        <DatePicker />\n      </StyledIconTriggerButton>\n    ),\n    [\n      ariaAndDataProps,\n      ariaCurrentValueForInputs,\n      disabled,\n      handlePickerIconKeyDown,\n      handleSetTriggerRef,\n      handleToggleCalendarWithTimeWheel,\n    ],\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACuCf;AAvCR,OAAOA,UAAS,YAAY,eAAe;AAC3C,SAAS,6BAA6B;AACtC,SAAS,oBAAoB;AAC7B,SAAS,kBAAkB;AAC3B,SAAS,oCAAoC;AAC7C,SAAS,+BAA+B;AACxC,SAAS,uCAAuC;AAChD,SAAS,0CAA0C;AAK5C,MAAM,mCAAmC,MAAmB;AACjE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,4BAA4B;AAC3C,QAAM,EAAE,MAAM,IAAI,WAAW,+BAA+B;AAC5D,QAAM,mBAAmBA,OAAM;AAAA,IAC7B,MAAM,sBAAsB,MAAM,mCAAmC,aAAa,mBAAmB;AAAA,IACrG,CAAC,KAAK;AAAA,EACR;AACA,SAAO;AAAA,IACL,MACE;AAAA,MAAC;AAAA;AAAA,QACC,cAAY,0CAA0C;AAAA,QACtD,YAAW;AAAA,QACX,MAAK;AAAA,QACL,MAAM,aAAa;AAAA,QACnB,UAAU;AAAA,QACV,SAAS;AAAA,QACT,WAAW;AAAA,QACX,eAAa,mCAAmC,aAAa;AAAA,QAC7D;AAAA,QACC,GAAG;AAAA,QAEJ,8BAAC,cAAW;AAAA;AAAA,IACd;AAAA,IAEF;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;",
+  "names": ["React"]
 }

package/dist/esm/parts/Pickers/CalendarWithTimeWheel/CalendarWithTimeWheelWrapper.js

@@ -1,12 +1,19 @@
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
-import { useContext } from "react";
+import React2, { useContext } from "react";
+import { getPropsPerDatatestid } from "@elliemae/ds-props-helpers";
 import { DSPopperJS } from "@elliemae/ds-popperjs";
 import { ControlledDateTimePickerDatatestid } from "../../../ControlledDateTimePickerDatatestid";
 import { CalendarWithTimeWheelContent } from "./CalendarWithTimeWheelContent";
 import { CalendarWithTimeWheelContext } from "./CalendarWithTimeWheelContext";
+import { ControlledDateTimePickerContext } from "../../../ControlledDateTimePickerCTX";
 const CalendarWithTimeWheelWrapper = () => {
   const { referenceElement, closeCalendar, isControllerOnly } = useContext(CalendarWithTimeWheelContext);
+  const { props } = useContext(ControlledDateTimePickerContext);
+  const ariaAndDataProps = React2.useMemo(
+    () => getPropsPerDatatestid(props[ControlledDateTimePickerDatatestid.CONTEXTUAL_MENU.CALENDAR_TIMEWHEEL]),
+    [props]
+  );
   if (isControllerOnly)
     return /* @__PURE__ */ jsx(CalendarWithTimeWheelContent, {});
   return /* @__PURE__ */ jsx(
@@ -17,6 +24,7 @@ const CalendarWithTimeWheelWrapper = () => {
       referenceElement,
       withoutArrow: true,
       onClickOutside: closeCalendar,
+      ...ariaAndDataProps,
       children: /* @__PURE__ */ jsx(CalendarWithTimeWheelContent, {})
     }
   );

package/dist/esm/parts/Pickers/CalendarWithTimeWheel/CalendarWithTimeWheelWrapper.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/Pickers/CalendarWithTimeWheel/CalendarWithTimeWheelWrapper.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\nimport { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid';\nimport { CalendarWithTimeWheelContent } from './CalendarWithTimeWheelContent';\nimport { CalendarWithTimeWheelContext } from './CalendarWithTimeWheelContext';\n\nexport const CalendarWithTimeWheelWrapper = (): JSX.Element => {\n  const { referenceElement, closeCalendar, isControllerOnly } = useContext(CalendarWithTimeWheelContext);\n  if (isControllerOnly) return <CalendarWithTimeWheelContent />;\n\n  return (\n    <DSPopperJS\n      showPopover\n      data-testid={ControlledDateTimePickerDatatestid.CONTEXTUAL_MENU.CALENDAR_TIMEWHEEL}\n      referenceElement={referenceElement}\n      withoutArrow\n      onClickOutside={closeCalendar}\n    >\n      <CalendarWithTimeWheelContent />\n    </DSPopperJS>\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACQQ;AAR/B,SAAgB,kBAAkB;AAClC,SAAS,kBAAkB;AAC3B,SAAS,0CAA0C;AACnD,SAAS,oCAAoC;AAC7C,SAAS,oCAAoC;AAEtC,MAAM,+BAA+B,MAAmB;AAC7D,QAAM,EAAE,kBAAkB,eAAe,iBAAiB,IAAI,WAAW,4BAA4B;AACrG,MAAI;AAAkB,WAAO,oBAAC,gCAA6B;AAE3D,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAW;AAAA,MACX,eAAa,mCAAmC,gBAAgB;AAAA,MAChE;AAAA,MACA,cAAY;AAAA,MACZ,gBAAgB;AAAA,MAEhB,8BAAC,gCAA6B;AAAA;AAAA,EAChC;AAEJ;",
-  "names": []
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport { getPropsPerDatatestid } from '@elliemae/ds-props-helpers';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\nimport { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid';\nimport { CalendarWithTimeWheelContent } from './CalendarWithTimeWheelContent';\nimport { CalendarWithTimeWheelContext } from './CalendarWithTimeWheelContext';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX';\n\nexport const CalendarWithTimeWheelWrapper = (): JSX.Element => {\n  const { referenceElement, closeCalendar, isControllerOnly } = useContext(CalendarWithTimeWheelContext);\n  const { props } = useContext(ControlledDateTimePickerContext);\n  const ariaAndDataProps = React.useMemo(\n    () => getPropsPerDatatestid(props[ControlledDateTimePickerDatatestid.CONTEXTUAL_MENU.CALENDAR_TIMEWHEEL]),\n    [props],\n  );\n  if (isControllerOnly) return <CalendarWithTimeWheelContent />;\n\n  return (\n    <DSPopperJS\n      showPopover\n      data-testid={ControlledDateTimePickerDatatestid.CONTEXTUAL_MENU.CALENDAR_TIMEWHEEL}\n      referenceElement={referenceElement}\n      withoutArrow\n      onClickOutside={closeCalendar}\n      {...ariaAndDataProps}\n    >\n      <CalendarWithTimeWheelContent />\n    </DSPopperJS>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACeQ;AAf/B,OAAOA,UAAS,kBAAkB;AAClC,SAAS,6BAA6B;AACtC,SAAS,kBAAkB;AAC3B,SAAS,0CAA0C;AACnD,SAAS,oCAAoC;AAC7C,SAAS,oCAAoC;AAC7C,SAAS,uCAAuC;AAEzC,MAAM,+BAA+B,MAAmB;AAC7D,QAAM,EAAE,kBAAkB,eAAe,iBAAiB,IAAI,WAAW,4BAA4B;AACrG,QAAM,EAAE,MAAM,IAAI,WAAW,+BAA+B;AAC5D,QAAM,mBAAmBA,OAAM;AAAA,IAC7B,MAAM,sBAAsB,MAAM,mCAAmC,gBAAgB,mBAAmB;AAAA,IACxG,CAAC,KAAK;AAAA,EACR;AACA,MAAI;AAAkB,WAAO,oBAAC,gCAA6B;AAE3D,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAW;AAAA,MACX,eAAa,mCAAmC,gBAAgB;AAAA,MAChE;AAAA,MACA,cAAY;AAAA,MACZ,gBAAgB;AAAA,MACf,GAAG;AAAA,MAEJ,8BAAC,gCAA6B;AAAA;AAAA,EAChC;AAEJ;",
+  "names": ["React"]
 }

package/dist/esm/parts/Pickers/TimeWheel/HoursList.js

@@ -1,6 +1,7 @@
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useContext, useCallback } from "react";
+import React2, { useContext, useCallback } from "react";
+import { getPropsPerDatatestid } from "@elliemae/ds-props-helpers";
 import { ChevronSmallUp, ChevronSmallDown } from "@elliemae/ds-icons";
 import { ControlledDateTimePickerDatatestid } from "../../../ControlledDateTimePickerDatatestid";
 import { ControlledDateTimePickerContext } from "../../../ControlledDateTimePickerCTX";
@@ -26,8 +27,25 @@ const HoursList = () => {
     autoFocusHourTimeWheel,
     hours,
     latestInteractionRegion,
-    currFocusDescriber
+    currFocusDescriber,
+    props
   } = useContext(ControlledDateTimePickerContext);
+  const ariaAndDataPropsPrevHour = React2.useMemo(
+    () => getPropsPerDatatestid(props[ControlledDateTimePickerDatatestid.TIMEWHEEL.PREV_HOUR]),
+    [props]
+  );
+  const ariaAndDataPropsNextHour = React2.useMemo(
+    () => getPropsPerDatatestid(props[ControlledDateTimePickerDatatestid.TIMEWHEEL.NEXT_HOUR]),
+    [props]
+  );
+  const ariaAndDataPropsCurrHour = React2.useMemo(
+    () => getPropsPerDatatestid(props[ControlledDateTimePickerDatatestid.TIMEWHEEL.CURRENT_HOUR]),
+    [props]
+  );
+  const ariaAndDataPropsHour = React2.useMemo(
+    () => getPropsPerDatatestid(props[ControlledDateTimePickerDatatestid.TIMEWHEEL.HOUR]),
+    [props]
+  );
   const handleCurrYearRef = useCallback(
     (ButtonDomNode) => {
       setTimeout(() => {
@@ -48,6 +66,7 @@ const HoursList = () => {
         onClick: handlePrevHour,
         innerRef: prevHourBtnRef,
         "data-testid": ControlledDateTimePickerDatatestid.TIMEWHEEL.PREV_HOUR,
+        ...ariaAndDataPropsPrevHour,
         tabIndex: -1,
         type: "button",
         children: /* @__PURE__ */ jsx(ChevronSmallUp, { color: ["brand-primary", "700"] })
@@ -90,6 +109,7 @@ const HoursList = () => {
           "aria-valuetext": `${hourString} hours`,
           type: "button",
           ...btnProps,
+          ...isCurrentListItem ? ariaAndDataPropsCurrHour : ariaAndDataPropsHour,
           children: hourString
         }
       ) }, key);
@@ -104,6 +124,7 @@ const HoursList = () => {
         innerRef: nextHourBtnRef,
         tabIndex: -1,
         "data-testid": ControlledDateTimePickerDatatestid.TIMEWHEEL.NEXT_HOUR,
+        ...ariaAndDataPropsNextHour,
         type: "button",
         children: /* @__PURE__ */ jsx(ChevronSmallDown, { color: ["brand-primary", "700"] })
       }

package/dist/esm/parts/Pickers/TimeWheel/HoursList.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/Pickers/TimeWheel/HoursList.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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 HoursList = (): JSX.Element => {\n  const {\n    currHourNum,\n    currMinuteNum,\n    currMeridiem,\n    visibleHours,\n    handlePrevHour,\n    handleNextHour,\n    handleTimeWheelBtnChangeHours,\n    handleCurrHourOnKeyDown,\n  } = useContext(TimeWheelContext);\n  const {\n    prevHourBtnRef,\n    currHourBtnRef,\n    nextHourBtnRef,\n    getIsDisabledTime,\n    autoFocusHourTimeWheel,\n    hours,\n    latestInteractionRegion,\n    currFocusDescriber,\n  } = useContext(ControlledDateTimePickerContext);\n  const handleCurrYearRef = useCallback(\n    (ButtonDomNode: HTMLButtonElement) => {\n      setTimeout(() => {\n        currHourBtnRef.current = ButtonDomNode;\n        if (latestInteractionRegion === 'timewheel' && currFocusDescriber === 'timewheel-curr-hour')\n          ButtonDomNode?.focus?.();\n      });\n    },\n    [currFocusDescriber, latestInteractionRegion, currHourBtnRef],\n  );\n  return (\n    <StyledWheelList>\n      <StyledWheelListItem>\n        <StyledWheelChangeTimeBtn\n          aria-label=\"subtract one hour\"\n          buttonType=\"raw\"\n          size=\"m\"\n          onClick={handlePrevHour}\n          innerRef={prevHourBtnRef}\n          data-testid={ControlledDateTimePickerDatatestid.TIMEWHEEL.PREV_HOUR}\n          tabIndex={-1}\n          type=\"button\"\n        >\n          <ChevronSmallUp color={['brand-primary', '700']} />\n        </StyledWheelChangeTimeBtn>\n      </StyledWheelListItem>\n      {visibleHours.map((hourString) => {\n        const key = `timewheel-hour-${hourString || ''}`;\n        if (!hourString) return <StyledWheelListItem key={key} />;\n        const currHourTimeString = `${hourString}:${currMinuteNum} ${currMeridiem}`;\n\n        const isEmptyCurrValueCurrentListItem = !hours && convertToPositiveNumberIfPossible(hourString) === currHourNum;\n        const isCurrentListItem = isEmptyCurrValueCurrentListItem || hours === hourString;\n        const isDisabled = getIsDisabledTime(currHourTimeString);\n        const tabIndex = isCurrentListItem ? 0 : -1;\n        const btnProps = {\n          onKeyDown: isCurrentListItem ? handleCurrHourOnKeyDown : undefined,\n          innerRef: isCurrentListItem ? handleCurrYearRef : undefined,\n        };\n        const styleProps = {\n          isCurrentListItem,\n          isDisabled,\n        };\n        return (\n          <StyledWheelListItem isCurrentListItem={isCurrentListItem} key={key}>\n            <StyledTimeBtn\n              {...styleProps}\n              autoFocus={autoFocusHourTimeWheel && isCurrentListItem}\n              data-testid={ControlledDateTimePickerDatatestid.TIMEWHEEL[isCurrentListItem ? 'CURRENT_HOUR' : 'HOUR']}\n              selected={hours.length === 2 && convertToPositiveNumberIfPossible(hourString) === currHourNum}\n              aria-label={`${hourString} hours`}\n              aria-disabled={isDisabled}\n              buttonType=\"raw\"\n              size=\"m\"\n              onClick={(e: React.MouseEvent<HTMLButtonElement>) => handleTimeWheelBtnChangeHours(hourString, e)}\n              tabIndex={tabIndex}\n              role=\"spinbutton\"\n              aria-valuemax={12}\n              aria-valuemin={1}\n              aria-valuenow={currHourNum}\n              aria-valuetext={`${hourString} hours`}\n              type=\"button\"\n              {...btnProps}\n            >\n              {hourString}\n            </StyledTimeBtn>\n          </StyledWheelListItem>\n        );\n      })}\n      <StyledWheelListItem>\n        <StyledWheelChangeTimeBtn\n          aria-label=\"add one hour\"\n          buttonType=\"raw\"\n          size=\"m\"\n          onClick={handleNextHour}\n          innerRef={nextHourBtnRef}\n          tabIndex={-1}\n          data-testid={ControlledDateTimePickerDatatestid.TIMEWHEEL.NEXT_HOUR}\n          type=\"button\"\n        >\n          <ChevronSmallDown color={['brand-primary', '700']} />\n        </StyledWheelChangeTimeBtn>\n      </StyledWheelListItem>\n    </StyledWheelList>\n  );\n};\n"],
-  "mappings": "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",
-  "names": []
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX';\nimport { convertToPositiveNumberIfPossible } from '../../../utils/numberHelpers';\nimport { StyledWheelList, StyledWheelListItem, StyledTimeBtn, StyledWheelChangeTimeBtn } from './Styleds';\nimport { TimeWheelContext } from './TimeWheelContext';\n\nexport const HoursList = (): JSX.Element => {\n  const {\n    currHourNum,\n    currMinuteNum,\n    currMeridiem,\n    visibleHours,\n    handlePrevHour,\n    handleNextHour,\n    handleTimeWheelBtnChangeHours,\n    handleCurrHourOnKeyDown,\n  } = useContext(TimeWheelContext);\n  const {\n    prevHourBtnRef,\n    currHourBtnRef,\n    nextHourBtnRef,\n    getIsDisabledTime,\n    autoFocusHourTimeWheel,\n    hours,\n    latestInteractionRegion,\n    currFocusDescriber,\n    props,\n  } = useContext(ControlledDateTimePickerContext);\n  const ariaAndDataPropsPrevHour = React.useMemo(\n    () => getPropsPerDatatestid(props[ControlledDateTimePickerDatatestid.TIMEWHEEL.PREV_HOUR]),\n    [props],\n  );\n  const ariaAndDataPropsNextHour = React.useMemo(\n    () => getPropsPerDatatestid(props[ControlledDateTimePickerDatatestid.TIMEWHEEL.NEXT_HOUR]),\n    [props],\n  );\n  const ariaAndDataPropsCurrHour = React.useMemo(\n    () => getPropsPerDatatestid(props[ControlledDateTimePickerDatatestid.TIMEWHEEL.CURRENT_HOUR]),\n    [props],\n  );\n  const ariaAndDataPropsHour = React.useMemo(\n    () => getPropsPerDatatestid(props[ControlledDateTimePickerDatatestid.TIMEWHEEL.HOUR]),\n    [props],\n  );\n  const handleCurrYearRef = useCallback(\n    (ButtonDomNode: HTMLButtonElement) => {\n      setTimeout(() => {\n        currHourBtnRef.current = ButtonDomNode;\n        if (latestInteractionRegion === 'timewheel' && currFocusDescriber === 'timewheel-curr-hour')\n          ButtonDomNode?.focus?.();\n      });\n    },\n    [currFocusDescriber, latestInteractionRegion, currHourBtnRef],\n  );\n  return (\n    <StyledWheelList>\n      <StyledWheelListItem>\n        <StyledWheelChangeTimeBtn\n          aria-label=\"subtract one hour\"\n          buttonType=\"raw\"\n          size=\"m\"\n          onClick={handlePrevHour}\n          innerRef={prevHourBtnRef}\n          data-testid={ControlledDateTimePickerDatatestid.TIMEWHEEL.PREV_HOUR}\n          {...ariaAndDataPropsPrevHour}\n          tabIndex={-1}\n          type=\"button\"\n        >\n          <ChevronSmallUp color={['brand-primary', '700']} />\n        </StyledWheelChangeTimeBtn>\n      </StyledWheelListItem>\n      {visibleHours.map((hourString) => {\n        const key = `timewheel-hour-${hourString || ''}`;\n        if (!hourString) return <StyledWheelListItem key={key} />;\n        const currHourTimeString = `${hourString}:${currMinuteNum} ${currMeridiem}`;\n\n        const isEmptyCurrValueCurrentListItem = !hours && convertToPositiveNumberIfPossible(hourString) === currHourNum;\n        const isCurrentListItem = isEmptyCurrValueCurrentListItem || hours === hourString;\n        const isDisabled = getIsDisabledTime(currHourTimeString);\n        const tabIndex = isCurrentListItem ? 0 : -1;\n        const btnProps = {\n          onKeyDown: isCurrentListItem ? handleCurrHourOnKeyDown : undefined,\n          innerRef: isCurrentListItem ? handleCurrYearRef : undefined,\n        };\n        const styleProps = {\n          isCurrentListItem,\n          isDisabled,\n        };\n        return (\n          <StyledWheelListItem isCurrentListItem={isCurrentListItem} key={key}>\n            <StyledTimeBtn\n              {...styleProps}\n              autoFocus={autoFocusHourTimeWheel && isCurrentListItem}\n              data-testid={ControlledDateTimePickerDatatestid.TIMEWHEEL[isCurrentListItem ? 'CURRENT_HOUR' : 'HOUR']}\n              selected={hours.length === 2 && convertToPositiveNumberIfPossible(hourString) === currHourNum}\n              aria-label={`${hourString} hours`}\n              aria-disabled={isDisabled}\n              buttonType=\"raw\"\n              size=\"m\"\n              onClick={(e: React.MouseEvent<HTMLButtonElement>) => handleTimeWheelBtnChangeHours(hourString, e)}\n              tabIndex={tabIndex}\n              role=\"spinbutton\"\n              aria-valuemax={12}\n              aria-valuemin={1}\n              aria-valuenow={currHourNum}\n              aria-valuetext={`${hourString} hours`}\n              type=\"button\"\n              {...btnProps}\n              {...(isCurrentListItem ? ariaAndDataPropsCurrHour : ariaAndDataPropsHour)}\n            >\n              {hourString}\n            </StyledTimeBtn>\n          </StyledWheelListItem>\n        );\n      })}\n      <StyledWheelListItem>\n        <StyledWheelChangeTimeBtn\n          aria-label=\"add one hour\"\n          buttonType=\"raw\"\n          size=\"m\"\n          onClick={handleNextHour}\n          innerRef={nextHourBtnRef}\n          tabIndex={-1}\n          data-testid={ControlledDateTimePickerDatatestid.TIMEWHEEL.NEXT_HOUR}\n          {...ariaAndDataPropsNextHour}\n          type=\"button\"\n        >\n          <ChevronSmallDown color={['brand-primary', '700']} />\n        </StyledWheelChangeTimeBtn>\n      </StyledWheelListItem>\n    </StyledWheelList>\n  );\n};\n"],
+  "mappings": "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",
+  "names": ["React"]
 }

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

@@ -1,7 +1,8 @@
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useContext, useCallback } from "react";
+import React2, { useContext, useCallback } from "react";
 import { ChevronSmallUp, ChevronSmallDown } from "@elliemae/ds-icons";
+import { getPropsPerDatatestid } from "@elliemae/ds-props-helpers";
 import { ControlledDateTimePickerDatatestid } from "../../../ControlledDateTimePickerDatatestid";
 import { ControlledDateTimePickerContext } from "../../../ControlledDateTimePickerCTX";
 import { StyledWheelList, StyledWheelListItem, StyledTimeBtn, StyledWheelChangeTimeBtn } from "./Styleds";
@@ -16,8 +17,25 @@ const MeridiemList = () => {
     hours,
     minutes,
     latestInteractionRegion,
-    currFocusDescriber
+    currFocusDescriber,
+    props
   } = useContext(ControlledDateTimePickerContext);
+  const ariaAndDataPropsPrevMeridiem = React2.useMemo(
+    () => getPropsPerDatatestid(props[ControlledDateTimePickerDatatestid.TIMEWHEEL.PREV_MERIDIEM]),
+    [props]
+  );
+  const ariaAndDataPropsNextMeridiem = React2.useMemo(
+    () => getPropsPerDatatestid(props[ControlledDateTimePickerDatatestid.TIMEWHEEL.NEXT_MERIDIEM]),
+    [props]
+  );
+  const ariaAndDataPropsCurrMeridiem = React2.useMemo(
+    () => getPropsPerDatatestid(props[ControlledDateTimePickerDatatestid.TIMEWHEEL.CURRENT_MERIDIEM]),
+    [props]
+  );
+  const ariaAndDataPropsMeridiem = React2.useMemo(
+    () => getPropsPerDatatestid(props[ControlledDateTimePickerDatatestid.TIMEWHEEL.MERIDIEM]),
+    [props]
+  );
   const isAmCurrent = !currMeridiem || currMeridiem === "AM";
   const isPmCurrent = currMeridiem === "PM";
   const hourMinuteString = `${hours || "01"}:${minutes || "00"}`;
@@ -53,6 +71,7 @@ const MeridiemList = () => {
         innerRef: prevMeridiemBtnRef,
         tabIndex: -1,
         type: "button",
+        ...ariaAndDataPropsPrevMeridiem,
         children: /* @__PURE__ */ jsx(ChevronSmallUp, { color: ["brand-primary", "700"] })
       }
     ) }),
@@ -77,6 +96,7 @@ const MeridiemList = () => {
         "aria-valuenow": isPmCurrent ? 1 : 0,
         "aria-valuetext": isAmCurrent ? "ante meridiem" : "post meridiem",
         type: "button",
+        ...isAmCurrent ? ariaAndDataPropsCurrMeridiem : ariaAndDataPropsMeridiem,
         children: "AM"
       }
     ) }),
@@ -100,6 +120,7 @@ const MeridiemList = () => {
         "aria-valuenow": isPmCurrent ? 1 : 0,
         "aria-valuetext": isAmCurrent ? "ante meridiem" : "post meridiem",
         type: "button",
+        ...isPmCurrent ? ariaAndDataPropsCurrMeridiem : ariaAndDataPropsMeridiem,
         children: "PM"
       }
     ) }),
@@ -117,6 +138,7 @@ const MeridiemList = () => {
         innerRef: nextMeridiemBtnRef,
         tabIndex: -1,
         type: "button",
+        ...ariaAndDataPropsNextMeridiem,
         children: /* @__PURE__ */ jsx(ChevronSmallDown, { color: ["brand-primary", "700"] })
       }
     ) })

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/Pickers/TimeWheel/MeridiemList.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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"],
-  "mappings": "AAAA,YAAY,WAAW;AC0CnB,SAcM,KAdN;AAzCJ,SAAgB,YAAY,mBAAmB;AAC/C,SAAS,gBAAgB,wBAAwB;AACjD,SAAS,0CAA0C;AACnD,SAAS,uCAAuC;AAChD,SAAS,iBAAiB,qBAAqB,eAAe,gCAAgC;AAC9F,SAAS,wBAAwB;AAE1B,MAAM,eAAe,MAAmB;AAC7C,QAAM,EAAE,cAAc,kCAAkC,4BAA4B,IAAI,WAAW,gBAAgB;AACnH,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,+BAA+B;AAC9C,QAAM,cAAc,CAAC,gBAAgB,iBAAiB;AACtD,QAAM,cAAc,iBAAiB;AACrC,QAAM,mBAAmB,GAAG,SAAS,QAAQ,WAAW;AACxD,QAAM,eAAe,GAAG;AACxB,QAAM,eAAe,GAAG;AACxB,QAAM,eAAe,kBAAkB,YAAY;AACnD,QAAM,eAAe,kBAAkB,YAAY;AACnD,QAAM,0BAA0B,EAAE,YAAY,aAAa;AAC3D,QAAM,+BAA+B,EAAE,mBAAmB,aAAa,YAAY,aAAa;AAChG,QAAM,+BAA+B,EAAE,mBAAmB,aAAa,YAAY,aAAa;AAChG,QAAM,0BAA0B,EAAE,YAAY,aAAa;AAC3D,QAAM,wBAAwB;AAAA,IAC5B,CAAC,kBAAqC;AACpC,iBAAW,MAAM;AACf,2BAAmB,UAAU;AAC7B,YAAI,4BAA4B,eAAe,uBAAuB;AACpE,yBAAe,QAAQ;AAAA,MAC3B,CAAC;AAAA,IACH;AAAA,IACA,CAAC,oBAAoB,yBAAyB,kBAAkB;AAAA,EAClE;AACA,SACE,qBAAC,mBACC;AAAA,wBAAC,uBACC;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,cAAW;AAAA,QACX,iBAAe;AAAA,QACf,eAAa,mCAAmC,UAAU;AAAA,QAC1D,YAAW;AAAA,QACX,MAAK;AAAA,QACL,SAAS,CAAC,MAA2C,iCAAiC,MAAM,CAAC;AAAA,QAC7F,UAAU;AAAA,QACV,UAAU;AAAA,QACV,MAAK;AAAA,QAEL,8BAAC,kBAAe,OAAO,CAAC,iBAAiB,KAAK,GAAG;AAAA;AAAA,IACnD,GACF;AAAA,IACC,iBAAiB,QAAQ,iBAAiB,KAAK,oBAAC,uBAAoB,IAAK;AAAA,IAC1E,oBAAC,uBAAoB,mBAAmB,aACtC;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,eAAa,mCAAmC,UAAU,cAAc,qBAAqB;AAAA,QAC7F,UAAU,iBAAiB;AAAA,QAC3B,cAAY,MAAM,cAAc,aAAa;AAAA,QAC7C,iBAAe;AAAA,QACf,YAAW;AAAA,QACX,MAAK;AAAA,QACL,SAAS,CAAC,MAA2C,iCAAiC,MAAM,CAAC;AAAA,QAC7F,WAAW,cAAc,8BAA8B;AAAA,QACvD,UAAU,cAAc,wBAAwB;AAAA,QAChD,UAAU,cAAc,IAAI;AAAA,QAC5B,MAAK;AAAA,QACL,iBAAe;AAAA,QACf,iBAAe;AAAA,QACf,iBAAe,cAAc,IAAI;AAAA,QACjC,kBAAgB,cAAc,kBAAkB;AAAA,QAChD,MAAK;AAAA,QACN;AAAA;AAAA,IAED,GACF;AAAA,IACA,oBAAC,uBAAoB,mBAAmB,aACtC;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,eAAa,mCAAmC,UAAU,cAAc,qBAAqB;AAAA,QAC7F,UAAU,iBAAiB;AAAA,QAC3B,cAAY,MAAM,cAAc,aAAa;AAAA,QAC7C,iBAAe;AAAA,QACf,YAAW;AAAA,QACX,MAAK;AAAA,QACL,SAAS,CAAC,MAA2C,iCAAiC,MAAM,CAAC;AAAA,QAC7F,WAAW,cAAc,8BAA8B;AAAA,QACvD,UAAU,cAAc,wBAAwB;AAAA,QAChD,UAAU,cAAc,IAAI;AAAA,QAC5B,MAAK;AAAA,QACL,iBAAe;AAAA,QACf,iBAAe;AAAA,QACf,iBAAe,cAAc,IAAI;AAAA,QACjC,kBAAgB,cAAc,kBAAkB;AAAA,QAChD,MAAK;AAAA,QACN;AAAA;AAAA,IAED,GACF;AAAA,IACC,iBAAiB,OAAO,oBAAC,uBAAoB,IAAK;AAAA,IACnD,oBAAC,uBACC;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,cAAW;AAAA,QACX,iBAAe;AAAA,QACf,eAAa,mCAAmC,UAAU;AAAA,QAC1D,YAAW;AAAA,QACX,MAAK;AAAA,QACL,SAAS,CAAC,MAA2C,iCAAiC,MAAM,CAAC;AAAA,QAC7F,UAAU;AAAA,QACV,UAAU;AAAA,QACV,MAAK;AAAA,QAEL,8BAAC,oBAAiB,OAAO,CAAC,iBAAiB,KAAK,GAAG;AAAA;AAAA,IACrD,GACF;AAAA,KACF;AAEJ;AAEA,IAAO,uBAAQ;",
-  "names": []
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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';\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    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"],
+  "mappings": "AAAA,YAAY,WAAW;AC4DnB,SAeM,KAfN;AA3DJ,OAAOA,UAAS,YAAY,mBAAmB;AAC/C,SAAS,gBAAgB,wBAAwB;AACjD,SAAS,6BAA6B;AACtC,SAAS,0CAA0C;AACnD,SAAS,uCAAuC;AAChD,SAAS,iBAAiB,qBAAqB,eAAe,gCAAgC;AAC9F,SAAS,wBAAwB;AAE1B,MAAM,eAAe,MAAmB;AAC7C,QAAM,EAAE,cAAc,kCAAkC,4BAA4B,IAAI,WAAW,gBAAgB;AACnH,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,+BAA+B;AAC9C,QAAM,+BAA+BA,OAAM;AAAA,IACzC,MAAM,sBAAsB,MAAM,mCAAmC,UAAU,cAAc;AAAA,IAC7F,CAAC,KAAK;AAAA,EACR;AACA,QAAM,+BAA+BA,OAAM;AAAA,IACzC,MAAM,sBAAsB,MAAM,mCAAmC,UAAU,cAAc;AAAA,IAC7F,CAAC,KAAK;AAAA,EACR;AACA,QAAM,+BAA+BA,OAAM;AAAA,IACzC,MAAM,sBAAsB,MAAM,mCAAmC,UAAU,iBAAiB;AAAA,IAChG,CAAC,KAAK;AAAA,EACR;AACA,QAAM,2BAA2BA,OAAM;AAAA,IACrC,MAAM,sBAAsB,MAAM,mCAAmC,UAAU,SAAS;AAAA,IACxF,CAAC,KAAK;AAAA,EACR;AACA,QAAM,cAAc,CAAC,gBAAgB,iBAAiB;AACtD,QAAM,cAAc,iBAAiB;AACrC,QAAM,mBAAmB,GAAG,SAAS,QAAQ,WAAW;AACxD,QAAM,eAAe,GAAG;AACxB,QAAM,eAAe,GAAG;AACxB,QAAM,eAAe,kBAAkB,YAAY;AACnD,QAAM,eAAe,kBAAkB,YAAY;AACnD,QAAM,0BAA0B,EAAE,YAAY,aAAa;AAC3D,QAAM,+BAA+B,EAAE,mBAAmB,aAAa,YAAY,aAAa;AAChG,QAAM,+BAA+B,EAAE,mBAAmB,aAAa,YAAY,aAAa;AAChG,QAAM,0BAA0B,EAAE,YAAY,aAAa;AAC3D,QAAM,wBAAwB;AAAA,IAC5B,CAAC,kBAAqC;AACpC,iBAAW,MAAM;AACf,2BAAmB,UAAU;AAC7B,YAAI,4BAA4B,eAAe,uBAAuB;AACpE,yBAAe,QAAQ;AAAA,MAC3B,CAAC;AAAA,IACH;AAAA,IACA,CAAC,oBAAoB,yBAAyB,kBAAkB;AAAA,EAClE;AACA,SACE,qBAAC,mBACC;AAAA,wBAAC,uBACC;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,cAAW;AAAA,QACX,iBAAe;AAAA,QACf,eAAa,mCAAmC,UAAU;AAAA,QAC1D,YAAW;AAAA,QACX,MAAK;AAAA,QACL,SAAS,CAAC,MAA2C,iCAAiC,MAAM,CAAC;AAAA,QAC7F,UAAU;AAAA,QACV,UAAU;AAAA,QACV,MAAK;AAAA,QACJ,GAAG;AAAA,QAEJ,8BAAC,kBAAe,OAAO,CAAC,iBAAiB,KAAK,GAAG;AAAA;AAAA,IACnD,GACF;AAAA,IACC,iBAAiB,QAAQ,iBAAiB,KAAK,oBAAC,uBAAoB,IAAK;AAAA,IAC1E,oBAAC,uBAAoB,mBAAmB,aACtC;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,eAAa,mCAAmC,UAAU,cAAc,qBAAqB;AAAA,QAC7F,UAAU,iBAAiB;AAAA,QAC3B,cAAY,MAAM,cAAc,aAAa;AAAA,QAC7C,iBAAe;AAAA,QACf,YAAW;AAAA,QACX,MAAK;AAAA,QACL,SAAS,CAAC,MAA2C,iCAAiC,MAAM,CAAC;AAAA,QAC7F,WAAW,cAAc,8BAA8B;AAAA,QACvD,UAAU,cAAc,wBAAwB;AAAA,QAChD,UAAU,cAAc,IAAI;AAAA,QAC5B,MAAK;AAAA,QACL,iBAAe;AAAA,QACf,iBAAe;AAAA,QACf,iBAAe,cAAc,IAAI;AAAA,QACjC,kBAAgB,cAAc,kBAAkB;AAAA,QAChD,MAAK;AAAA,QACJ,GAAI,cAAc,+BAA+B;AAAA,QACnD;AAAA;AAAA,IAED,GACF;AAAA,IACA,oBAAC,uBAAoB,mBAAmB,aACtC;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,eAAa,mCAAmC,UAAU,cAAc,qBAAqB;AAAA,QAC7F,UAAU,iBAAiB;AAAA,QAC3B,cAAY,MAAM,cAAc,aAAa;AAAA,QAC7C,iBAAe;AAAA,QACf,YAAW;AAAA,QACX,MAAK;AAAA,QACL,SAAS,CAAC,MAA2C,iCAAiC,MAAM,CAAC;AAAA,QAC7F,WAAW,cAAc,8BAA8B;AAAA,QACvD,UAAU,cAAc,wBAAwB;AAAA,QAChD,UAAU,cAAc,IAAI;AAAA,QAC5B,MAAK;AAAA,QACL,iBAAe;AAAA,QACf,iBAAe;AAAA,QACf,iBAAe,cAAc,IAAI;AAAA,QACjC,kBAAgB,cAAc,kBAAkB;AAAA,QAChD,MAAK;AAAA,QACJ,GAAI,cAAc,+BAA+B;AAAA,QACnD;AAAA;AAAA,IAED,GACF;AAAA,IACC,iBAAiB,OAAO,oBAAC,uBAAoB,IAAK;AAAA,IACnD,oBAAC,uBACC;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,cAAW;AAAA,QACX,iBAAe;AAAA,QACf,eAAa,mCAAmC,UAAU;AAAA,QAC1D,YAAW;AAAA,QACX,MAAK;AAAA,QACL,SAAS,CAAC,MAA2C,iCAAiC,MAAM,CAAC;AAAA,QAC7F,UAAU;AAAA,QACV,UAAU;AAAA,QACV,MAAK;AAAA,QACJ,GAAG;AAAA,QAEJ,8BAAC,oBAAiB,OAAO,CAAC,iBAAiB,KAAK,GAAG;AAAA;AAAA,IACrD,GACF;AAAA,KACF;AAEJ;AAEA,IAAO,uBAAQ;",
+  "names": ["React"]
 }

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

@@ -1,6 +1,7 @@
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useContext, useCallback } from "react";
+import React2, { useContext, useCallback } from "react";
+import { getPropsPerDatatestid } from "@elliemae/ds-props-helpers";
 import { ChevronSmallUp, ChevronSmallDown } from "@elliemae/ds-icons";
 import { ControlledDateTimePickerDatatestid } from "../../../ControlledDateTimePickerDatatestid";
 import { ControlledDateTimePickerContext } from "../../../ControlledDateTimePickerCTX";
@@ -25,8 +26,25 @@ const MinutesList = () => {
     getIsDisabledTime,
     minutes,
     currFocusDescriber,
-    latestInteractionRegion
+    latestInteractionRegion,
+    props
   } = useContext(ControlledDateTimePickerContext);
+  const ariaAndDataPropsPrevMinute = React2.useMemo(
+    () => getPropsPerDatatestid(props[ControlledDateTimePickerDatatestid.TIMEWHEEL.PREV_MINUTE]),
+    [props]
+  );
+  const ariaAndDataPropsNextMinute = React2.useMemo(
+    () => getPropsPerDatatestid(props[ControlledDateTimePickerDatatestid.TIMEWHEEL.NEXT_MINUTE]),
+    [props]
+  );
+  const ariaAndDataPropsCurrMinute = React2.useMemo(
+    () => getPropsPerDatatestid(props[ControlledDateTimePickerDatatestid.TIMEWHEEL.CURRENT_MINUTE]),
+    [props]
+  );
+  const ariaAndDataPropsMinute = React2.useMemo(
+    () => getPropsPerDatatestid(props[ControlledDateTimePickerDatatestid.TIMEWHEEL.MINUTE]),
+    [props]
+  );
   const handleCurrMeridiemRef = useCallback(
     (ButtonDomNode) => {
       setTimeout(() => {
@@ -49,6 +67,7 @@ const MinutesList = () => {
         tabIndex: -1,
         "data-testid": ControlledDateTimePickerDatatestid.TIMEWHEEL.PREV_MINUTE,
         type: "button",
+        ...ariaAndDataPropsPrevMinute,
         children: /* @__PURE__ */ jsx(ChevronSmallUp, { color: ["brand-primary", "700"] })
       }
     ) }),
@@ -90,6 +109,7 @@ const MinutesList = () => {
               "aria-valuetext": `${minutesString} minutes`,
               type: "button",
               ...btnProps,
+              ...isCurrentListItem ? ariaAndDataPropsCurrMinute : ariaAndDataPropsMinute,
               children: minutesString
             }
           )
@@ -108,6 +128,7 @@ const MinutesList = () => {
         "data-testid": ControlledDateTimePickerDatatestid.TIMEWHEEL.NEXT_MINUTE,
         tabIndex: -1,
         type: "button",
+        ...ariaAndDataPropsNextMinute,
         children: /* @__PURE__ */ jsx(ChevronSmallDown, { color: ["brand-primary", "700"] })
       }
     ) })

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/Pickers/TimeWheel/MinutesList.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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"],
-  "mappings": "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",
-  "names": []
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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';\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    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"],
+  "mappings": "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",
+  "names": ["React"]
 }

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

@@ -1,6 +1,7 @@
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import React2, { useContext } from "react";
+import { getPropsPerDatatestid } from "@elliemae/ds-props-helpers";
 import { ControlledDateTimePickerDatatestid } from "../../../ControlledDateTimePickerDatatestid";
 import { ControlledDateTimePickerContext } from "../../../ControlledDateTimePickerCTX";
 import {
@@ -14,14 +15,30 @@ import { MinutesList } from "./MinutesList";
 import { MeridiemList } from "./MeridiemList";
 import { TimeWheelFooter } from "./TimeWheelFooter";
 const TimeWheelContent = React2.memo(() => {
-  const { isControllerOnly, hours, minutes, meridiem } = useContext(ControlledDateTimePickerContext);
+  const { isControllerOnly, hours, minutes, meridiem, props } = useContext(ControlledDateTimePickerContext);
+  const ariaAndDataPropsHeaderLabel = React2.useMemo(
+    () => getPropsPerDatatestid(props[ControlledDateTimePickerDatatestid.TIMEWHEEL.HEADER_LABEL]),
+    [props]
+  );
+  const ariaAndDataPropsTimewheel = React2.useMemo(
+    () => getPropsPerDatatestid(props[ControlledDateTimePickerDatatestid.CONTROLLER_COMPONENT.TIMEWHEEL]),
+    [props]
+  );
   return /* @__PURE__ */ jsxs(
     StyledTimePickerContainer,
     {
       isControllerOnly,
       "data-testid": ControlledDateTimePickerDatatestid.CONTROLLER_COMPONENT.TIMEWHEEL,
+      ...ariaAndDataPropsTimewheel,
       children: [
-        /* @__PURE__ */ jsx(StyledTimePickerHead, { "data-testid": ControlledDateTimePickerDatatestid.TIMEWHEEL.HEADER_LABEL, children: `${hours || "__"}:${minutes || "__"} ${meridiem || "__"}` }),
+        /* @__PURE__ */ jsx(
+          StyledTimePickerHead,
+          {
+            "data-testid": ControlledDateTimePickerDatatestid.TIMEWHEEL.HEADER_LABEL,
+            ...ariaAndDataPropsHeaderLabel,
+            children: `${hours || "__"}:${minutes || "__"} ${meridiem || "__"}`
+          }
+        ),
         /* @__PURE__ */ jsxs(StyledTimePickerWheelsLegend, { children: [
           /* @__PURE__ */ jsx("div", { children: "H" }),
           /* @__PURE__ */ jsx("div", { children: "M" }),

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/Pickers/TimeWheel/TimeWheelContent.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
-  "mappings": "AAAA,YAAY,WAAW;ACqBjB,cAGA,YAHA;AArBN,OAAOA,UAAS,kBAAkB;AAClC,SAAS,0CAA0C;AACnD,SAAS,uCAAuC;AAChD;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,iBAAiB;AAC1B,SAAS,mBAAmB;AAC5B,SAAS,oBAAoB;AAC7B,SAAS,uBAAuB;AAEzB,MAAM,mBAAmBA,OAAM,KAAK,MAAM;AAC/C,QAAM,EAAE,kBAAkB,OAAO,SAAS,SAAS,IAAI,WAAW,+BAA+B;AACjG,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,eAAa,mCAAmC,qBAAqB;AAAA,MAErE;AAAA,4BAAC,wBAAqB,eAAa,mCAAmC,UAAU,cAAe,aAC7F,SAAS,QACP,WAAW,QAAQ,YAAY,QAAO;AAAA,QAC1C,qBAAC,gCACC;AAAA,8BAAC,SAAI,eAAC;AAAA,UACN,oBAAC,SAAI,eAAC;AAAA,UACN,oBAAC,SAAI,eAAC;AAAA,WACR;AAAA,QACA,qBAAC,gCACC;AAAA,8BAAC,aAAU;AAAA,UACX,oBAAC,eAAY;AAAA,UACb,oBAAC,gBAAa;AAAA,WAChB;AAAA,QACA,oBAAC,mBAAgB;AAAA;AAAA;AAAA,EACnB;AAEJ,CAAC;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport { getPropsPerDatatestid } from '@elliemae/ds-props-helpers';\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, 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"],
+  "mappings": "AAAA,YAAY,WAAW;AC+BjB,cAIA,YAJA;AA/BN,OAAOA,UAAS,kBAAkB;AAClC,SAAS,6BAA6B;AACtC,SAAS,0CAA0C;AACnD,SAAS,uCAAuC;AAChD;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,iBAAiB;AAC1B,SAAS,mBAAmB;AAC5B,SAAS,oBAAoB;AAC7B,SAAS,uBAAuB;AAEzB,MAAM,mBAAmBA,OAAM,KAAK,MAAM;AAC/C,QAAM,EAAE,kBAAkB,OAAO,SAAS,UAAU,MAAM,IAAI,WAAW,+BAA+B;AACxG,QAAM,8BAA8BA,OAAM;AAAA,IACxC,MAAM,sBAAsB,MAAM,mCAAmC,UAAU,aAAa;AAAA,IAC5F,CAAC,KAAK;AAAA,EACR;AACA,QAAM,4BAA4BA,OAAM;AAAA,IACtC,MAAM,sBAAsB,MAAM,mCAAmC,qBAAqB,UAAU;AAAA,IACpG,CAAC,KAAK;AAAA,EACR;AACA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,eAAa,mCAAmC,qBAAqB;AAAA,MACpE,GAAG;AAAA,MAEJ;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,eAAa,mCAAmC,UAAU;AAAA,YACzD,GAAG;AAAA,YACJ,aAAG,SAAS,QAAQ,WAAW,QAAQ,YAAY;AAAA;AAAA,QAAO;AAAA,QAC5D,qBAAC,gCACC;AAAA,8BAAC,SAAI,eAAC;AAAA,UACN,oBAAC,SAAI,eAAC;AAAA,UACN,oBAAC,SAAI,eAAC;AAAA,WACR;AAAA,QACA,qBAAC,gCACC;AAAA,8BAAC,aAAU;AAAA,UACX,oBAAC,eAAY;AAAA,UACb,oBAAC,gBAAa;AAAA,WAChB;AAAA,QACA,oBAAC,mBAAgB;AAAA;AAAA;AAAA,EACnB;AAEJ,CAAC;",
   "names": ["React"]
 }