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

package/dist/cjs/parts/Pickers/Calendar/usePopperTriggerLogic.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/parts/Pickers/Calendar/usePopperTriggerLogic.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable complexity */\n/* eslint-disable max-statements */\n/* eslint-disable max-lines */\nimport type React from 'react';\nimport { useMemo, useCallback, useState, useContext } from 'react';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX';\nimport type { useFocusLogic } from './useFocusLogic';\n\ninterface UsePopperTriggerLogic {\n  focusLogic: ReturnType<typeof useFocusLogic>;\n  showCalendar: boolean;\n  setShowCalendar: StateSetter<boolean>;\n}\ninterface PopperTriggerLogicT {\n  referenceElement: HTMLButtonElement | null;\n  closeCalendar: () => void;\n  handleToggleCalendar: () => void;\n  handleSetTriggerRef: (instance: HTMLButtonElement) => void;\n  handleMenuWrapperKeyDown: (e: React.KeyboardEvent<HTMLElement>) => void;\n}\nexport const usePopperTriggerLogic = ({\n  focusLogic,\n  showCalendar,\n  setShowCalendar,\n}: UsePopperTriggerLogic): PopperTriggerLogicT => {\n  const { focusedDay, resetFocusedDayToStartDate } = focusLogic;\n  const {\n    props: { onPickerOpen, onPickerClose },\n    pickerButtonRef,\n    trackFocusCalendarMetafocusedDay,\n    trackFocusCalendarPrevMonth,\n    trackFocusPicker,\n    latestInteractionRegion,\n    currFocusDescriber,\n  } = useContext(ControlledDateTimePickerContext);\n  const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);\n  // onOpen we try to focus the day we should focus, if we should focus one\n  const handleOnPickerOpen = useCallback(() => {\n    onPickerOpen();\n  }, [onPickerOpen]);\n  const openCalendar = useCallback(() => {\n    if (focusedDay) trackFocusCalendarMetafocusedDay();\n    else trackFocusCalendarPrevMonth();\n    setShowCalendar(true);\n    handleOnPickerOpen();\n  }, [focusedDay, handleOnPickerOpen, setShowCalendar, trackFocusCalendarMetafocusedDay, trackFocusCalendarPrevMonth]);\n\n  const closeCalendar = useCallback(() => {\n    setShowCalendar(false);\n    onPickerClose();\n    resetFocusedDayToStartDate();\n    trackFocusPicker();\n  }, [setShowCalendar, onPickerClose, resetFocusedDayToStartDate, trackFocusPicker]);\n\n  const handleToggleCalendar = useCallback(() => {\n    const isOpening = !showCalendar;\n    if (isOpening) openCalendar();\n    else closeCalendar();\n  }, [closeCalendar, openCalendar, showCalendar]);\n\n  const handleSetTriggerRef = useCallback(\n    (newRef: HTMLButtonElement) => {\n      pickerButtonRef.current = newRef;\n      setReferenceElement(newRef);\n      if (latestInteractionRegion === 'picker-icon' && currFocusDescriber === 'date-picker-icon') newRef?.focus();\n    },\n    [currFocusDescriber, latestInteractionRegion, pickerButtonRef],\n  );\n  const handleMenuWrapperKeyDown = useCallback(\n    (e: React.KeyboardEvent<HTMLElement>) => {\n      const { key } = e;\n      if (key === 'Escape') {\n        closeCalendar();\n        trackFocusPicker();\n      }\n    },\n    [closeCalendar, trackFocusPicker],\n  );\n\n  return useMemo(\n    () => ({\n      referenceElement,\n      closeCalendar,\n      handleSetTriggerRef,\n      handleToggleCalendar,\n      handleMenuWrapperKeyDown,\n    }),\n    [closeCalendar, handleMenuWrapperKeyDown, handleSetTriggerRef, handleToggleCalendar, referenceElement],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "sourcesContent": ["/* eslint-disable complexity */\n/* eslint-disable max-statements */\n/* eslint-disable max-lines */\nimport type React from 'react';\nimport { useMemo, useCallback, useState, useContext } from 'react';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';\nimport type { useFocusLogic } from './useFocusLogic.js';\n\ninterface UsePopperTriggerLogic {\n  focusLogic: ReturnType<typeof useFocusLogic>;\n  showCalendar: boolean;\n  setShowCalendar: StateSetter<boolean>;\n}\ninterface PopperTriggerLogicT {\n  referenceElement: HTMLButtonElement | null;\n  closeCalendar: () => void;\n  handleToggleCalendar: () => void;\n  handleSetTriggerRef: (instance: HTMLButtonElement) => void;\n  handleMenuWrapperKeyDown: (e: React.KeyboardEvent<HTMLElement>) => void;\n}\nexport const usePopperTriggerLogic = ({\n  focusLogic,\n  showCalendar,\n  setShowCalendar,\n}: UsePopperTriggerLogic): PopperTriggerLogicT => {\n  const { focusedDay, resetFocusedDayToStartDate } = focusLogic;\n  const {\n    props: { onPickerOpen, onPickerClose },\n    pickerButtonRef,\n    trackFocusCalendarMetafocusedDay,\n    trackFocusCalendarPrevMonth,\n    trackFocusPicker,\n    latestInteractionRegion,\n    currFocusDescriber,\n  } = useContext(ControlledDateTimePickerContext);\n  const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);\n  // onOpen we try to focus the day we should focus, if we should focus one\n  const handleOnPickerOpen = useCallback(() => {\n    onPickerOpen();\n  }, [onPickerOpen]);\n  const openCalendar = useCallback(() => {\n    if (focusedDay) trackFocusCalendarMetafocusedDay();\n    else trackFocusCalendarPrevMonth();\n    setShowCalendar(true);\n    handleOnPickerOpen();\n  }, [focusedDay, handleOnPickerOpen, setShowCalendar, trackFocusCalendarMetafocusedDay, trackFocusCalendarPrevMonth]);\n\n  const closeCalendar = useCallback(() => {\n    setShowCalendar(false);\n    onPickerClose();\n    resetFocusedDayToStartDate();\n    trackFocusPicker();\n  }, [setShowCalendar, onPickerClose, resetFocusedDayToStartDate, trackFocusPicker]);\n\n  const handleToggleCalendar = useCallback(() => {\n    const isOpening = !showCalendar;\n    if (isOpening) openCalendar();\n    else closeCalendar();\n  }, [closeCalendar, openCalendar, showCalendar]);\n\n  const handleSetTriggerRef = useCallback(\n    (newRef: HTMLButtonElement) => {\n      pickerButtonRef.current = newRef;\n      setReferenceElement(newRef);\n      if (latestInteractionRegion === 'picker-icon' && currFocusDescriber === 'date-picker-icon') newRef?.focus();\n    },\n    [currFocusDescriber, latestInteractionRegion, pickerButtonRef],\n  );\n  const handleMenuWrapperKeyDown = useCallback(\n    (e: React.KeyboardEvent<HTMLElement>) => {\n      const { key } = e;\n      if (key === 'Escape') {\n        closeCalendar();\n        trackFocusPicker();\n      }\n    },\n    [closeCalendar, trackFocusPicker],\n  );\n\n  return useMemo(\n    () => ({\n      referenceElement,\n      closeCalendar,\n      handleSetTriggerRef,\n      handleToggleCalendar,\n      handleMenuWrapperKeyDown,\n    }),\n    [closeCalendar, handleMenuWrapperKeyDown, handleSetTriggerRef, handleToggleCalendar, referenceElement],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADIvB,mBAA2D;AAC3D,yCAAgD;AAezC,MAAM,wBAAwB,CAAC;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AACF,MAAkD;AAChD,QAAM,EAAE,YAAY,2BAA2B,IAAI;AACnD,QAAM;AAAA,IACJ,OAAO,EAAE,cAAc,cAAc;AAAA,IACrC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,kEAA+B;AAC9C,QAAM,CAAC,kBAAkB,mBAAmB,QAAI,uBAAmC,IAAI;AAEvF,QAAM,yBAAqB,0BAAY,MAAM;AAC3C,iBAAa;AAAA,EACf,GAAG,CAAC,YAAY,CAAC;AACjB,QAAM,mBAAe,0BAAY,MAAM;AACrC,QAAI;AAAY,uCAAiC;AAAA;AAC5C,kCAA4B;AACjC,oBAAgB,IAAI;AACpB,uBAAmB;AAAA,EACrB,GAAG,CAAC,YAAY,oBAAoB,iBAAiB,kCAAkC,2BAA2B,CAAC;AAEnH,QAAM,oBAAgB,0BAAY,MAAM;AACtC,oBAAgB,KAAK;AACrB,kBAAc;AACd,+BAA2B;AAC3B,qBAAiB;AAAA,EACnB,GAAG,CAAC,iBAAiB,eAAe,4BAA4B,gBAAgB,CAAC;AAEjF,QAAM,2BAAuB,0BAAY,MAAM;AAC7C,UAAM,YAAY,CAAC;AACnB,QAAI;AAAW,mBAAa;AAAA;AACvB,oBAAc;AAAA,EACrB,GAAG,CAAC,eAAe,cAAc,YAAY,CAAC;AAE9C,QAAM,0BAAsB;AAAA,IAC1B,CAAC,WAA8B;AAC7B,sBAAgB,UAAU;AAC1B,0BAAoB,MAAM;AAC1B,UAAI,4BAA4B,iBAAiB,uBAAuB;AAAoB,gBAAQ,MAAM;AAAA,IAC5G;AAAA,IACA,CAAC,oBAAoB,yBAAyB,eAAe;AAAA,EAC/D;AACA,QAAM,+BAA2B;AAAA,IAC/B,CAAC,MAAwC;AACvC,YAAM,EAAE,IAAI,IAAI;AAChB,UAAI,QAAQ,UAAU;AACpB,sBAAc;AACd,yBAAiB;AAAA,MACnB;AAAA,IACF;AAAA,IACA,CAAC,eAAe,gBAAgB;AAAA,EAClC;AAEA,aAAO;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,eAAe,0BAA0B,qBAAqB,sBAAsB,gBAAgB;AAAA,EACvG;AACF;",
   "names": []
 }

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

@@ -29,12 +29,12 @@ __export(CalendarWithTimeWheel_exports, {
 module.exports = __toCommonJS(CalendarWithTimeWheel_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_CalendarWithTimeWheelIconTrigger = require("./CalendarWithTimeWheelIconTrigger");
-var import_CalendarWithTimeWheelWrapper = require("./CalendarWithTimeWheelWrapper");
-var import_CalendarWithTimeWheelContext = require("./CalendarWithTimeWheelContext");
-var import_useConfigCalendarWithTimeWheelCTX = require("./useConfigCalendarWithTimeWheelCTX");
-var import_Calendar = require("../Calendar/Calendar");
-var import_TimeWheel = require("../TimeWheel/TimeWheel");
+var import_CalendarWithTimeWheelIconTrigger = require("./CalendarWithTimeWheelIconTrigger.js");
+var import_CalendarWithTimeWheelWrapper = require("./CalendarWithTimeWheelWrapper.js");
+var import_CalendarWithTimeWheelContext = require("./CalendarWithTimeWheelContext.js");
+var import_useConfigCalendarWithTimeWheelCTX = require("./useConfigCalendarWithTimeWheelCTX.js");
+var import_Calendar = require("../Calendar/Calendar.js");
+var import_TimeWheel = require("../TimeWheel/TimeWheel.js");
 const CalendarWithTimeWheelContent = () => {
   const ctx = (0, import_useConfigCalendarWithTimeWheelCTX.useConfigCalendarWithTimeWheelCTX)();
   const { showCalendarWithTimeWheel, isControllerOnly, handleMenuWrapperKeyDown } = ctx;

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/parts/Pickers/CalendarWithTimeWheel/CalendarWithTimeWheel.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-len */\nimport React from 'react';\nimport { CalendarWithTimeWheelIconTrigger } from './CalendarWithTimeWheelIconTrigger';\nimport { CalendarWithTimeWheelWrapper } from './CalendarWithTimeWheelWrapper';\nimport { CalendarWithTimeWheelContext } from './CalendarWithTimeWheelContext';\nimport { useConfigCalendarWithTimeWheelCTX } from './useConfigCalendarWithTimeWheelCTX';\nimport { WrappedCalendarContext } from '../Calendar/Calendar';\nimport { WrappedTimeWheelContext } from '../TimeWheel/TimeWheel';\n\nconst CalendarWithTimeWheelContent = () => {\n  const ctx = useConfigCalendarWithTimeWheelCTX();\n  const { showCalendarWithTimeWheel, isControllerOnly, handleMenuWrapperKeyDown } = ctx;\n\n  return (\n    <CalendarWithTimeWheelContext.Provider value={ctx}>\n      {isControllerOnly ? null : <CalendarWithTimeWheelIconTrigger />}\n      {isControllerOnly || showCalendarWithTimeWheel ? (\n        <>\n          {/* The <div> element is catching the \"ESC\" 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            <CalendarWithTimeWheelWrapper />\n          </div>\n        </>\n      ) : null}\n    </CalendarWithTimeWheelContext.Provider>\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 CalendarWithTimeWheel = () => (\n  <WrappedCalendarContext>\n    <WrappedTimeWheelContext>\n      <CalendarWithTimeWheelContent />\n    </WrappedTimeWheelContext>\n  </WrappedCalendarContext>\n);\n", "import * as React from 'react';\nexport { React };\n"],
+  "sourcesContent": ["/* eslint-disable max-len */\nimport React from 'react';\nimport { CalendarWithTimeWheelIconTrigger } from './CalendarWithTimeWheelIconTrigger.js';\nimport { CalendarWithTimeWheelWrapper } from './CalendarWithTimeWheelWrapper.js';\nimport { CalendarWithTimeWheelContext } from './CalendarWithTimeWheelContext.js';\nimport { useConfigCalendarWithTimeWheelCTX } from './useConfigCalendarWithTimeWheelCTX.js';\nimport { WrappedCalendarContext } from '../Calendar/Calendar.js';\nimport { WrappedTimeWheelContext } from '../TimeWheel/TimeWheel.js';\n\nconst CalendarWithTimeWheelContent = () => {\n  const ctx = useConfigCalendarWithTimeWheelCTX();\n  const { showCalendarWithTimeWheel, isControllerOnly, handleMenuWrapperKeyDown } = ctx;\n\n  return (\n    <CalendarWithTimeWheelContext.Provider value={ctx}>\n      {isControllerOnly ? null : <CalendarWithTimeWheelIconTrigger />}\n      {isControllerOnly || showCalendarWithTimeWheel ? (\n        <>\n          {/* The <div> element is catching the \"ESC\" 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            <CalendarWithTimeWheelWrapper />\n          </div>\n        </>\n      ) : null}\n    </CalendarWithTimeWheelContext.Provider>\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 CalendarWithTimeWheel = () => (\n  <WrappedCalendarContext>\n    <WrappedTimeWheelContext>\n      <CalendarWithTimeWheelContent />\n    </WrappedTimeWheelContext>\n  </WrappedCalendarContext>\n);\n", "import * as React from 'react';\nexport { React };\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADcnB;AAZJ,8CAAiD;AACjD,0CAA6C;AAC7C,0CAA6C;AAC7C,+CAAkD;AAClD,sBAAuC;AACvC,uBAAwC;AAExC,MAAM,+BAA+B,MAAM;AACzC,QAAM,UAAM,4EAAkC;AAC9C,QAAM,EAAE,2BAA2B,kBAAkB,yBAAyB,IAAI;AAElF,SACE,6CAAC,iEAA6B,UAA7B,EAAsC,OAAO,KAC3C;AAAA,uBAAmB,OAAO,4CAAC,4EAAiC;AAAA,IAC5D,oBAAoB,4BACnB,2EAIE,sDAAC,SAAI,WAAW,0BACd,sDAAC,oEAA6B,GAChC,GACF,IACE;AAAA,KACN;AAEJ;AAGO,MAAM,wBAAwB,MACnC,4CAAC,0CACC,sDAAC,4CACC,sDAAC,gCAA6B,GAChC,GACF;",
   "names": []
 }

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

@@ -29,19 +29,25 @@ __export(CalendarWithTimeWheelContent_exports, {
 module.exports = __toCommonJS(CalendarWithTimeWheelContent_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_Styleds = require("./Styleds");
-var import_CalendarWithTimeWheelFooter = require("./CalendarWithTimeWheelFooter");
-var import_TimeWheelContent = require("../TimeWheel/TimeWheelContent");
-var import_ControlledDateTimePickerCTX = require("../../../ControlledDateTimePickerCTX");
+var import_react = __toESM(require("react"));
+var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
+var import_ControlledDateTimePickerDatatestid = require("../../../ControlledDateTimePickerDatatestid.js");
+var import_Styleds = require("./Styleds.js");
+var import_CalendarWithTimeWheelFooter = require("./CalendarWithTimeWheelFooter.js");
+var import_TimeWheelContent = require("../TimeWheel/TimeWheelContent.js");
+var import_ControlledDateTimePickerCTX = require("../../../ControlledDateTimePickerCTX.js");
 const CalendarWithTimeWheelContent = () => {
-  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.CONTROLLER_COMPONENT.CALENDAR_TIMEWHEEL]),
+    [props]
+  );
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     import_Styleds.StyledCalendarWithTimeWheelWrapper,
     {
       isControllerOnly,
       "data-testid": import_ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.CONTROLLER_COMPONENT.CALENDAR_TIMEWHEEL,
+      ...ariaAndDataProps,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Styleds.StyledCalendar, {}),
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TimeWheelContent.TimeWheelContent, {}),

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/parts/Pickers/CalendarWithTimeWheel/CalendarWithTimeWheelContent.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADUnB;AAVJ,mBAAkC;AAClC,gDAAmD;AACnD,qBAAmE;AACnE,yCAA4C;AAC5C,8BAAiC;AACjC,yCAAgD;AAEzC,MAAM,+BAA+B,MAAmB;AAC7D,QAAM,EAAE,iBAAiB,QAAI,yBAAW,kEAA+B;AACvE,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,eAAa,6EAAmC,qBAAqB;AAAA,MAErE;AAAA,oDAAC,iCAAe;AAAA,QAChB,4CAAC,4CAAiB;AAAA,QAClB,4CAAC,kEAA4B;AAAA;AAAA;AAAA,EAC/B;AAEJ;",
-  "names": []
+  "sourcesContent": ["import React, { useContext } from 'react';\nimport { getPropsPerDatatestid } from '@elliemae/ds-props-helpers';\nimport { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid.js';\nimport { StyledCalendarWithTimeWheelWrapper, StyledCalendar } from './Styleds.js';\nimport { CalendarWithTimeWheelFooter } from './CalendarWithTimeWheelFooter.js';\nimport { TimeWheelContent } from '../TimeWheel/TimeWheelContent.js';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';\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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADenB;AAfJ,mBAAkC;AAClC,8BAAsC;AACtC,gDAAmD;AACnD,qBAAmE;AACnE,yCAA4C;AAC5C,8BAAiC;AACjC,yCAAgD;AAEzC,MAAM,+BAA+B,MAAmB;AAC7D,QAAM,EAAE,kBAAkB,MAAM,QAAI,yBAAW,kEAA+B;AAC9E,QAAM,mBAAmB,aAAAA,QAAM;AAAA,IAC7B,UAAM,+CAAsB,MAAM,6EAAmC,qBAAqB,mBAAmB;AAAA,IAC7G,CAAC,KAAK;AAAA,EACR;AACA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,eAAa,6EAAmC,qBAAqB;AAAA,MACpE,GAAG;AAAA,MAEJ;AAAA,oDAAC,iCAAe;AAAA,QAChB,4CAAC,4CAAiB;AAAA,QAClB,4CAAC,kEAA4B;AAAA;AAAA;AAAA,EAC/B;AAEJ;",
+  "names": ["React"]
 }

package/dist/cjs/parts/Pickers/CalendarWithTimeWheel/CalendarWithTimeWheelContext.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/parts/Pickers/CalendarWithTimeWheel/CalendarWithTimeWheelContext.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { createContext } from 'react';\nimport type { CalendarWithTimeWheelContextT } from './useConfigCalendarWithTimeWheelCTX';\nexport const defaultCalendarWithTimeWheelContext = {} as CalendarWithTimeWheelContextT;\n\n/** Context for cross component communication */\nexport const CalendarWithTimeWheelContext = createContext<CalendarWithTimeWheelContextT>(\n  defaultCalendarWithTimeWheelContext,\n);\n\nexport default CalendarWithTimeWheelContext;\n", "import * as React from 'react';\nexport { React };\n"],
+  "sourcesContent": ["import { createContext } from 'react';\nimport type { CalendarWithTimeWheelContextT } from './useConfigCalendarWithTimeWheelCTX.js';\nexport const defaultCalendarWithTimeWheelContext = {} as CalendarWithTimeWheelContextT;\n\n/** Context for cross component communication */\nexport const CalendarWithTimeWheelContext = createContext<CalendarWithTimeWheelContextT>(\n  defaultCalendarWithTimeWheelContext,\n);\n\nexport default CalendarWithTimeWheelContext;\n", "import * as React from 'react';\nexport { React };\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA8B;AAEvB,MAAM,sCAAsC,CAAC;AAG7C,MAAM,mCAA+B;AAAA,EAC1C;AACF;AAEA,IAAO,uCAAQ;",
   "names": []
 }

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

@@ -29,19 +29,26 @@ __export(CalendarWithTimeWheelFooter_exports, {
 module.exports = __toCommonJS(CalendarWithTimeWheelFooter_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_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");
 const CalendarWithTimeWheelFooter = () => {
   const {
+    props,
     props: { pickerFooterMsg, hasError }
   } = (0, import_react.useContext)(import_ControlledDateTimePickerCTX.ControlledDateTimePickerContext);
+  const ariaAndDataProps = import_react.default.useMemo(
+    () => (0, import_ds_props_helpers.getPropsPerDatatestid)(props[import_ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.FOOTERS.CALENDAR_TIMEWHEEL]),
+    [props]
+  );
   return pickerFooterMsg !== void 0 && hasError ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_Styleds.CalendarWithTimeWheelFooterMessage,
     {
       role: "alert",
       "data-testid": import_ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.FOOTERS.CALENDAR_TIMEWHEEL,
+      ...ariaAndDataProps,
       children: pickerFooterMsg
     }
   ) : null;

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/parts/Pickers/CalendarWithTimeWheel/CalendarWithTimeWheelFooter.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADUnB;AAVJ,mBAAkC;AAClC,gDAAmD;AACnD,yCAAgD;AAChD,qBAAmD;AAE5C,MAAM,8BAAmD,MAAM;AACpE,QAAM;AAAA,IACJ,OAAO,EAAE,iBAAiB,SAAS;AAAA,EACrC,QAAI,yBAAW,kEAA+B;AAC9C,SAAO,oBAAoB,UAAa,WACtC;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,eAAa,6EAAmC,QAAQ;AAAA,MAEvD;AAAA;AAAA,EACH,IACE;AACN;",
-  "names": []
+  "sourcesContent": ["import React, { useContext } from 'react';\nimport { getPropsPerDatatestid } from '@elliemae/ds-props-helpers';\nimport { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid.js';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';\nimport { CalendarWithTimeWheelFooterMessage } from './Styleds.js';\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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADgBnB;AAhBJ,mBAAkC;AAClC,8BAAsC;AACtC,gDAAmD;AACnD,yCAAgD;AAChD,qBAAmD;AAE5C,MAAM,8BAAmD,MAAM;AACpE,QAAM;AAAA,IACJ;AAAA,IACA,OAAO,EAAE,iBAAiB,SAAS;AAAA,EACrC,QAAI,yBAAW,kEAA+B;AAC9C,QAAM,mBAAmB,aAAAA,QAAM;AAAA,IAC7B,UAAM,+CAAsB,MAAM,6EAAmC,QAAQ,mBAAmB;AAAA,IAChG,CAAC,KAAK;AAAA,EACR;AACA,SAAO,oBAAoB,UAAa,WACtC;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,eAAa,6EAAmC,QAAQ;AAAA,MACvD,GAAG;AAAA,MAEH;AAAA;AAAA,EACH,IACE;AACN;",
+  "names": ["React"]
 }

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

@@ -29,12 +29,14 @@ __export(CalendarWithTimeWheelIconTrigger_exports, {
 module.exports = __toCommonJS(CalendarWithTimeWheelIconTrigger_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_CalendarWithTimeWheelContext = require("./CalendarWithTimeWheelContext");
-var import_Styleds = require("./Styleds");
-var import_ControlledDateTimePickerDatatestid = require("../../../ControlledDateTimePickerDatatestid");
+var import_CalendarWithTimeWheelContext = require("./CalendarWithTimeWheelContext.js");
+var import_Styleds = require("./Styleds.js");
+var import_ControlledDateTimePickerCTX = require("../../../ControlledDateTimePickerCTX.js");
+var import_ControlledDateTimePickerDatatestid = require("../../../ControlledDateTimePickerDatatestid.js");
 const CalendarWithTimeWheelIconTrigger = () => {
   const {
     handleSetTriggerRef,
@@ -43,6 +45,11 @@ const CalendarWithTimeWheelIconTrigger = () => {
     ariaCurrentValueForInputs,
     disabled
   } = (0, import_react.useContext)(import_CalendarWithTimeWheelContext.CalendarWithTimeWheelContext);
+  const { props } = (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.CALENDAR_TIMEWHEEL]),
+    [props]
+  );
   return (0, import_react.useMemo)(
     () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_Styleds.StyledIconTriggerButton,
@@ -56,10 +63,12 @@ const CalendarWithTimeWheelIconTrigger = () => {
         onKeyDown: handlePickerIconKeyDown,
         "data-testid": import_ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.PICKER_ICONS.CALENDAR_TIMEWHEEL,
         disabled,
+        ...ariaAndDataProps,
         children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.DatePicker, {})
       }
     ),
     [
+      ariaAndDataProps,
       ariaCurrentValueForInputs,
       disabled,
       handlePickerIconKeyDown,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/parts/Pickers/CalendarWithTimeWheel/CalendarWithTimeWheelIconTrigger.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD+Bf;AA/BR,mBAA2C;AAC3C,uBAA6B;AAC7B,sBAA2B;AAC3B,0CAA6C;AAC7C,qBAAwC;AACxC,gDAAmD;AAK5C,MAAM,mCAAmC,MAAmB;AACjE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,gEAA4B;AAC3C,aAAO;AAAA,IACL,MACE;AAAA,MAAC;AAAA;AAAA,QACC,cAAY,0CAA0C;AAAA,QACtD,YAAW;AAAA,QACX,MAAK;AAAA,QACL,MAAM,8BAAa;AAAA,QACnB,UAAU;AAAA,QACV,SAAS;AAAA,QACT,WAAW;AAAA,QACX,eAAa,6EAAmC,aAAa;AAAA,QAC7D;AAAA,QAEA,sDAAC,8BAAW;AAAA;AAAA,IACd;AAAA,IAEF;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;",
-  "names": []
+  "sourcesContent": ["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.js';\nimport { StyledIconTriggerButton } from './Styleds.js';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';\nimport { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid.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 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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADuCf;AAvCR,mBAA2C;AAC3C,8BAAsC;AACtC,uBAA6B;AAC7B,sBAA2B;AAC3B,0CAA6C;AAC7C,qBAAwC;AACxC,yCAAgD;AAChD,gDAAmD;AAK5C,MAAM,mCAAmC,MAAmB;AACjE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,gEAA4B;AAC3C,QAAM,EAAE,MAAM,QAAI,yBAAW,kEAA+B;AAC5D,QAAM,mBAAmB,aAAAA,QAAM;AAAA,IAC7B,UAAM,+CAAsB,MAAM,6EAAmC,aAAa,mBAAmB;AAAA,IACrG,CAAC,KAAK;AAAA,EACR;AACA,aAAO;AAAA,IACL,MACE;AAAA,MAAC;AAAA;AAAA,QACC,cAAY,0CAA0C;AAAA,QACtD,YAAW;AAAA,QACX,MAAK;AAAA,QACL,MAAM,8BAAa;AAAA,QACnB,UAAU;AAAA,QACV,SAAS;AAAA,QACT,WAAW;AAAA,QACX,eAAa,6EAAmC,aAAa;AAAA,QAC7D;AAAA,QACC,GAAG;AAAA,QAEJ,sDAAC,8BAAW;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/cjs/parts/Pickers/CalendarWithTimeWheel/CalendarWithTimeWheelWrapper.js

@@ -29,13 +29,20 @@ __export(CalendarWithTimeWheelWrapper_exports, {
 module.exports = __toCommonJS(CalendarWithTimeWheelWrapper_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_CalendarWithTimeWheelContent = require("./CalendarWithTimeWheelContent");
-var import_CalendarWithTimeWheelContext = require("./CalendarWithTimeWheelContext");
+var import_ControlledDateTimePickerDatatestid = require("../../../ControlledDateTimePickerDatatestid.js");
+var import_CalendarWithTimeWheelContent = require("./CalendarWithTimeWheelContent.js");
+var import_CalendarWithTimeWheelContext = require("./CalendarWithTimeWheelContext.js");
+var import_ControlledDateTimePickerCTX = require("../../../ControlledDateTimePickerCTX.js");
 const CalendarWithTimeWheelWrapper = () => {
   const { referenceElement, closeCalendar, isControllerOnly } = (0, import_react.useContext)(import_CalendarWithTimeWheelContext.CalendarWithTimeWheelContext);
+  const { 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.CALENDAR_TIMEWHEEL]),
+    [props]
+  );
   if (isControllerOnly)
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_CalendarWithTimeWheelContent.CalendarWithTimeWheelContent, {});
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -46,6 +53,7 @@ const CalendarWithTimeWheelWrapper = () => {
       referenceElement,
       withoutArrow: true,
       onClickOutside: closeCalendar,
+      ...ariaAndDataProps,
       children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_CalendarWithTimeWheelContent.CalendarWithTimeWheelContent, {})
     }
   );

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/parts/Pickers/CalendarWithTimeWheel/CalendarWithTimeWheelWrapper.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADQQ;AAR/B,mBAAkC;AAClC,yBAA2B;AAC3B,gDAAmD;AACnD,0CAA6C;AAC7C,0CAA6C;AAEtC,MAAM,+BAA+B,MAAmB;AAC7D,QAAM,EAAE,kBAAkB,eAAe,iBAAiB,QAAI,yBAAW,gEAA4B;AACrG,MAAI;AAAkB,WAAO,4CAAC,oEAA6B;AAE3D,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAW;AAAA,MACX,eAAa,6EAAmC,gBAAgB;AAAA,MAChE;AAAA,MACA,cAAY;AAAA,MACZ,gBAAgB;AAAA,MAEhB,sDAAC,oEAA6B;AAAA;AAAA,EAChC;AAEJ;",
-  "names": []
+  "sourcesContent": ["import React, { useContext } from 'react';\nimport { getPropsPerDatatestid } from '@elliemae/ds-props-helpers';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\nimport { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid.js';\nimport { CalendarWithTimeWheelContent } from './CalendarWithTimeWheelContent.js';\nimport { CalendarWithTimeWheelContext } from './CalendarWithTimeWheelContext.js';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';\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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADeQ;AAf/B,mBAAkC;AAClC,8BAAsC;AACtC,yBAA2B;AAC3B,gDAAmD;AACnD,0CAA6C;AAC7C,0CAA6C;AAC7C,yCAAgD;AAEzC,MAAM,+BAA+B,MAAmB;AAC7D,QAAM,EAAE,kBAAkB,eAAe,iBAAiB,QAAI,yBAAW,gEAA4B;AACrG,QAAM,EAAE,MAAM,QAAI,yBAAW,kEAA+B;AAC5D,QAAM,mBAAmB,aAAAA,QAAM;AAAA,IAC7B,UAAM,+CAAsB,MAAM,6EAAmC,gBAAgB,mBAAmB;AAAA,IACxG,CAAC,KAAK;AAAA,EACR;AACA,MAAI;AAAkB,WAAO,4CAAC,oEAA6B;AAE3D,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAW;AAAA,MACX,eAAa,6EAAmC,gBAAgB;AAAA,MAChE;AAAA,MACA,cAAY;AAAA,MACZ,gBAAgB;AAAA,MACf,GAAG;AAAA,MAEJ,sDAAC,oEAA6B;AAAA;AAAA,EAChC;AAEJ;",
+  "names": ["React"]
 }

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

@@ -33,8 +33,8 @@ module.exports = __toCommonJS(Styleds_exports);
 var React = __toESM(require("react"));
 var import_ds_system = require("@elliemae/ds-system");
 var import_ds_button = require("@elliemae/ds-button");
-var import_CalendarContent = require("../Calendar/CalendarContent");
-var import_theming = require("../../../exported-related/theming");
+var import_CalendarContent = require("../Calendar/CalendarContent.js");
+var import_theming = require("../../../exported-related/theming.js");
 const StyledIconTriggerButton = (0, import_ds_system.styled)(import_ds_button.DSButtonV2, {
   name: import_theming.DSControlledDateTimePickerName,
   slot: import_theming.DSControlledDateTimePickerSlots.PICKER_ICONS.CALENDAR_TIMEWHEEL

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/parts/Pickers/CalendarWithTimeWheel/Styleds.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { styled } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button';\nimport { CalendarContent } from '../Calendar/CalendarContent';\nimport { DSControlledDateTimePickerName, DSControlledDateTimePickerSlots } from '../../../exported-related/theming';\n\nexport const StyledIconTriggerButton = styled(DSButtonV2, {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.PICKER_ICONS.CALENDAR_TIMEWHEEL,\n})`\n  color: ${({ theme }) => theme.colors.brand['600']};\n  width: 26px;\n  height: 26px;\n`;\n\nexport const StyledCalendarWithTimeWheelWrapper = styled.div`\n  background: ${({ theme }) => theme.colors.neutral['000']};\n  display: grid;\n  grid-template-columns: 260px 192px;\n  grid-template-rows: 1fr;\n  column-gap: 0;\n\n  & > div:last-of-type {\n    box-shadow: -1px 0 0 0 ${({ theme }) => theme.colors.neutral[200]};\n  }\n`;\n\nexport const StyledCalendar = styled(CalendarContent)`\n  box-shadow: none;\n`;\n\nexport const CalendarWithTimeWheelFooterMessage = styled('footer', {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.FOOTERS.CALENDAR_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  grid-column: 1/3;\n  background-color: white;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
+  "sourcesContent": ["import { styled } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button';\nimport { CalendarContent } from '../Calendar/CalendarContent.js';\nimport { DSControlledDateTimePickerName, DSControlledDateTimePickerSlots } from '../../../exported-related/theming.js';\n\nexport const StyledIconTriggerButton = styled(DSButtonV2, {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.PICKER_ICONS.CALENDAR_TIMEWHEEL,\n})`\n  color: ${({ theme }) => theme.colors.brand['600']};\n  width: 26px;\n  height: 26px;\n`;\n\nexport const StyledCalendarWithTimeWheelWrapper = styled.div`\n  background: ${({ theme }) => theme.colors.neutral['000']};\n  display: grid;\n  grid-template-columns: 260px 192px;\n  grid-template-rows: 1fr;\n  column-gap: 0;\n\n  & > div:last-of-type {\n    box-shadow: -1px 0 0 0 ${({ theme }) => theme.colors.neutral[200]};\n  }\n`;\n\nexport const StyledCalendar = styled(CalendarContent)`\n  box-shadow: none;\n`;\n\nexport const CalendarWithTimeWheelFooterMessage = styled('footer', {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.FOOTERS.CALENDAR_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  grid-column: 1/3;\n  background-color: white;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;AACvB,uBAA2B;AAC3B,6BAAgC;AAChC,qBAAgF;AAEzE,MAAM,8BAA0B,yBAAO,6BAAY;AAAA,EACxD,MAAM;AAAA,EACN,MAAM,+CAAgC,aAAa;AACrD,CAAC;AAAA,WACU,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAKtC,MAAM,qCAAqC,wBAAO;AAAA,gBACzC,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,6BAOvB,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAI1D,MAAM,qBAAiB,yBAAO,sCAAe;AAAA;AAAA;AAI7C,MAAM,yCAAqC,yBAAO,UAAU;AAAA,EACjE,MAAM;AAAA,EACN,MAAM,+CAAgC,QAAQ;AAChD,CAAC;AAAA,0BACyB,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ;AAAA,cAChD,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA,aAC5B,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA,WAC7B,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,OAAO;AAAA;AAAA,iBAE7B,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY;AAAA,eACnC,CAAC,EAAE,MAAM,MAAM,MAAM,UAAU,UAAU;AAAA;AAAA;AAAA;AAAA;",
   "names": []
 }

package/dist/cjs/parts/Pickers/CalendarWithTimeWheel/useConfigCalendarWithTimeWheelCTX.js

@@ -29,10 +29,10 @@ __export(useConfigCalendarWithTimeWheelCTX_exports, {
 module.exports = __toCommonJS(useConfigCalendarWithTimeWheelCTX_exports);
 var React = __toESM(require("react"));
 var import_react = require("react");
-var import_ControlledDateTimePickerTypes = require("../../../ControlledDateTimePickerTypes");
-var import_ControlledDateTimePickerCTX = require("../../../ControlledDateTimePickerCTX");
-var import_CalendarContext = require("../Calendar/CalendarContext");
-var import_TimeWheelContext = require("../TimeWheel/TimeWheelContext");
+var import_ControlledDateTimePickerTypes = require("../../../ControlledDateTimePickerTypes.js");
+var import_ControlledDateTimePickerCTX = require("../../../ControlledDateTimePickerCTX.js");
+var import_CalendarContext = require("../Calendar/CalendarContext.js");
+var import_TimeWheelContext = require("../TimeWheel/TimeWheelContext.js");
 const useConfigCalendarWithTimeWheelCTX = () => {
   const {
     pickerButtonRef,

package/dist/cjs/parts/Pickers/CalendarWithTimeWheel/useConfigCalendarWithTimeWheelCTX.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/parts/Pickers/CalendarWithTimeWheel/useConfigCalendarWithTimeWheelCTX.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-statements */\n/* eslint-disable max-lines */\nimport type React from 'react';\nimport { useMemo, useState, useCallback, useContext } from 'react';\nimport { CONTROLLED_DATE_TIME_PICKER_TYPES } from '../../../ControlledDateTimePickerTypes';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX';\nimport { CalendarContext } from '../Calendar/CalendarContext';\nimport { TimeWheelContext } from '../TimeWheel/TimeWheelContext';\nimport type { DSControlledDateTimePickerInternalsT } from '../../../sharedTypes';\nexport interface CalendarWithTimeWheelContextT {\n  referenceElement: HTMLButtonElement | null;\n  ariaCurrentValueForInputs: string;\n  showCalendarWithTimeWheel: boolean;\n  closeCalendar: () => void;\n  handleToggleCalendarWithTimeWheel: (e: React.MouseEvent<HTMLButtonElement>) => void;\n  handleSetTriggerRef: (instance: HTMLButtonElement) => void;\n  handleMenuWrapperKeyDown: (e: React.KeyboardEvent<HTMLElement>) => void;\n  handlePickerIconKeyDown: (e: React.KeyboardEvent<HTMLButtonElement>) => void;\n  isControllerOnly: boolean;\n  disabled: boolean;\n}\nexport const useConfigCalendarWithTimeWheelCTX = (): CalendarWithTimeWheelContextT => {\n  const {\n    pickerButtonRef,\n    props: { type, onPickerOpen, onPickerClose, disabled },\n    withAnyInputs,\n    isWithTimeInputs,\n    ariaCurrentValueForInputs,\n    trackFocusFirstSegment,\n    trackFocusMeridiemInput,\n    trackFocusYearInput,\n    trackFocusPicker,\n    latestInteractionRegion,\n    currFocusDescriber,\n  } = useContext(ControlledDateTimePickerContext);\n  const { handleToggleCalendar } = useContext(CalendarContext);\n  const { handleToggleTimePicker } = useContext(TimeWheelContext);\n  const [showCalendarWithTimeWheel, setShowCalendarWithTimeWheel] = useState(false);\n  const onHomeKeyDown = useCallback(() => {\n    trackFocusFirstSegment();\n  }, [trackFocusFirstSegment]);\n  const handlePickerIconKeyDown: DSControlledDateTimePickerInternalsT.OnKeyDown<HTMLButtonElement> = useCallback(\n    (e) => {\n      const { key } = e;\n      if (['Home', 'End'].includes(key)) e.preventDefault();\n      if (['Home', 'End'].includes(key)) e.stopPropagation();\n      if (key === 'Home') onHomeKeyDown();\n      if (key === 'Backspace' && withAnyInputs) {\n        if (isWithTimeInputs) trackFocusMeridiemInput();\n        else trackFocusYearInput();\n      }\n    },\n    [isWithTimeInputs, onHomeKeyDown, trackFocusMeridiemInput, trackFocusYearInput, withAnyInputs],\n  );\n  const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);\n  const openCalendar = useCallback(() => {\n    setShowCalendarWithTimeWheel(true);\n    onPickerOpen();\n    setTimeout(() => handleToggleCalendar());\n    setTimeout(() => handleToggleTimePicker());\n  }, [handleToggleCalendar, handleToggleTimePicker, onPickerOpen]);\n  const closeCalendar = useCallback(() => {\n    setShowCalendarWithTimeWheel(false);\n    onPickerClose();\n    setTimeout(() => handleToggleCalendar());\n    setTimeout(() => handleToggleTimePicker());\n  }, [handleToggleCalendar, handleToggleTimePicker, onPickerClose]);\n\n  const handleToggleCalendarWithTimeWheel = useCallback(() => {\n    if (!showCalendarWithTimeWheel) openCalendar();\n    else closeCalendar();\n  }, [closeCalendar, openCalendar, showCalendarWithTimeWheel]);\n\n  const handleSetTriggerRef = useCallback(\n    (newRef: HTMLButtonElement) => {\n      pickerButtonRef.current = newRef;\n      setReferenceElement(newRef);\n      if (latestInteractionRegion === 'picker-icon' && currFocusDescriber === 'datetime-picker-icon') newRef?.focus();\n    },\n    [currFocusDescriber, latestInteractionRegion, pickerButtonRef],\n  );\n  const handleMenuWrapperKeyDown = useCallback(\n    (e: React.KeyboardEvent<HTMLElement>) => {\n      const { key } = e;\n      if (key === 'Escape') {\n        closeCalendar();\n        trackFocusPicker();\n      }\n    },\n    [closeCalendar, trackFocusPicker],\n  );\n\n  const isControllerOnly = useMemo(() => type === CONTROLLED_DATE_TIME_PICKER_TYPES.DATE_TIME.CONTROLLER_ONLY, [type]);\n\n  return useMemo(\n    () => ({\n      referenceElement,\n      showCalendarWithTimeWheel,\n      closeCalendar,\n      handleToggleCalendarWithTimeWheel,\n      handleSetTriggerRef,\n      handleMenuWrapperKeyDown,\n      handlePickerIconKeyDown,\n      isControllerOnly,\n      disabled,\n      ariaCurrentValueForInputs,\n    }),\n    [\n      referenceElement,\n      showCalendarWithTimeWheel,\n      closeCalendar,\n      handleToggleCalendarWithTimeWheel,\n      handleSetTriggerRef,\n      handleMenuWrapperKeyDown,\n      handlePickerIconKeyDown,\n      isControllerOnly,\n      disabled,\n      ariaCurrentValueForInputs,\n    ],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "sourcesContent": ["/* eslint-disable max-statements */\n/* eslint-disable max-lines */\nimport type React from 'react';\nimport { useMemo, useState, useCallback, useContext } from 'react';\nimport { CONTROLLED_DATE_TIME_PICKER_TYPES } from '../../../ControlledDateTimePickerTypes.js';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';\nimport { CalendarContext } from '../Calendar/CalendarContext.js';\nimport { TimeWheelContext } from '../TimeWheel/TimeWheelContext.js';\nimport type { DSControlledDateTimePickerInternalsT } from '../../../sharedTypes.js';\nexport interface CalendarWithTimeWheelContextT {\n  referenceElement: HTMLButtonElement | null;\n  ariaCurrentValueForInputs: string;\n  showCalendarWithTimeWheel: boolean;\n  closeCalendar: () => void;\n  handleToggleCalendarWithTimeWheel: (e: React.MouseEvent<HTMLButtonElement>) => void;\n  handleSetTriggerRef: (instance: HTMLButtonElement) => void;\n  handleMenuWrapperKeyDown: (e: React.KeyboardEvent<HTMLElement>) => void;\n  handlePickerIconKeyDown: (e: React.KeyboardEvent<HTMLButtonElement>) => void;\n  isControllerOnly: boolean;\n  disabled: boolean;\n}\nexport const useConfigCalendarWithTimeWheelCTX = (): CalendarWithTimeWheelContextT => {\n  const {\n    pickerButtonRef,\n    props: { type, onPickerOpen, onPickerClose, disabled },\n    withAnyInputs,\n    isWithTimeInputs,\n    ariaCurrentValueForInputs,\n    trackFocusFirstSegment,\n    trackFocusMeridiemInput,\n    trackFocusYearInput,\n    trackFocusPicker,\n    latestInteractionRegion,\n    currFocusDescriber,\n  } = useContext(ControlledDateTimePickerContext);\n  const { handleToggleCalendar } = useContext(CalendarContext);\n  const { handleToggleTimePicker } = useContext(TimeWheelContext);\n  const [showCalendarWithTimeWheel, setShowCalendarWithTimeWheel] = useState(false);\n  const onHomeKeyDown = useCallback(() => {\n    trackFocusFirstSegment();\n  }, [trackFocusFirstSegment]);\n  const handlePickerIconKeyDown: DSControlledDateTimePickerInternalsT.OnKeyDown<HTMLButtonElement> = useCallback(\n    (e) => {\n      const { key } = e;\n      if (['Home', 'End'].includes(key)) e.preventDefault();\n      if (['Home', 'End'].includes(key)) e.stopPropagation();\n      if (key === 'Home') onHomeKeyDown();\n      if (key === 'Backspace' && withAnyInputs) {\n        if (isWithTimeInputs) trackFocusMeridiemInput();\n        else trackFocusYearInput();\n      }\n    },\n    [isWithTimeInputs, onHomeKeyDown, trackFocusMeridiemInput, trackFocusYearInput, withAnyInputs],\n  );\n  const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);\n  const openCalendar = useCallback(() => {\n    setShowCalendarWithTimeWheel(true);\n    onPickerOpen();\n    setTimeout(() => handleToggleCalendar());\n    setTimeout(() => handleToggleTimePicker());\n  }, [handleToggleCalendar, handleToggleTimePicker, onPickerOpen]);\n  const closeCalendar = useCallback(() => {\n    setShowCalendarWithTimeWheel(false);\n    onPickerClose();\n    setTimeout(() => handleToggleCalendar());\n    setTimeout(() => handleToggleTimePicker());\n  }, [handleToggleCalendar, handleToggleTimePicker, onPickerClose]);\n\n  const handleToggleCalendarWithTimeWheel = useCallback(() => {\n    if (!showCalendarWithTimeWheel) openCalendar();\n    else closeCalendar();\n  }, [closeCalendar, openCalendar, showCalendarWithTimeWheel]);\n\n  const handleSetTriggerRef = useCallback(\n    (newRef: HTMLButtonElement) => {\n      pickerButtonRef.current = newRef;\n      setReferenceElement(newRef);\n      if (latestInteractionRegion === 'picker-icon' && currFocusDescriber === 'datetime-picker-icon') newRef?.focus();\n    },\n    [currFocusDescriber, latestInteractionRegion, pickerButtonRef],\n  );\n  const handleMenuWrapperKeyDown = useCallback(\n    (e: React.KeyboardEvent<HTMLElement>) => {\n      const { key } = e;\n      if (key === 'Escape') {\n        closeCalendar();\n        trackFocusPicker();\n      }\n    },\n    [closeCalendar, trackFocusPicker],\n  );\n\n  const isControllerOnly = useMemo(() => type === CONTROLLED_DATE_TIME_PICKER_TYPES.DATE_TIME.CONTROLLER_ONLY, [type]);\n\n  return useMemo(\n    () => ({\n      referenceElement,\n      showCalendarWithTimeWheel,\n      closeCalendar,\n      handleToggleCalendarWithTimeWheel,\n      handleSetTriggerRef,\n      handleMenuWrapperKeyDown,\n      handlePickerIconKeyDown,\n      isControllerOnly,\n      disabled,\n      ariaCurrentValueForInputs,\n    }),\n    [\n      referenceElement,\n      showCalendarWithTimeWheel,\n      closeCalendar,\n      handleToggleCalendarWithTimeWheel,\n      handleSetTriggerRef,\n      handleMenuWrapperKeyDown,\n      handlePickerIconKeyDown,\n      isControllerOnly,\n      disabled,\n      ariaCurrentValueForInputs,\n    ],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
   "mappings": "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",
   "names": []
 }

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

@@ -30,11 +30,11 @@ module.exports = __toCommonJS(PickersIcons_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = __toESM(require("react"));
-var import_ControlledDateTimePickerCTX = require("../../ControlledDateTimePickerCTX");
-var import_Styleds = require("../Styleds");
-var import_CalendarWithTimeWheel = require("./CalendarWithTimeWheel/CalendarWithTimeWheel");
-var import_Calendar = require("./Calendar/Calendar");
-var import_TimeWheel = require("./TimeWheel/TimeWheel");
+var import_ControlledDateTimePickerCTX = require("../../ControlledDateTimePickerCTX.js");
+var import_Styleds = require("../Styleds.js");
+var import_CalendarWithTimeWheel = require("./CalendarWithTimeWheel/CalendarWithTimeWheel.js");
+var import_Calendar = require("./Calendar/Calendar.js");
+var import_TimeWheel = require("./TimeWheel/TimeWheel.js");
 const PickersIcons = () => {
   const {
     hideDatePicker,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/Pickers/PickersIcons.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport { ControlledDateTimePickerContext } from '../../ControlledDateTimePickerCTX';\nimport { StyledPickersIconsWrapperGrid } from '../Styleds';\nimport { CalendarWithTimeWheel } from './CalendarWithTimeWheel/CalendarWithTimeWheel';\nimport { Calendar } from './Calendar/Calendar';\nimport { TimeWheel } from './TimeWheel/TimeWheel';\n\nexport const PickersIcons = (): JSX.Element => {\n  const {\n    hideDatePicker,\n    hideTimePicker,\n    hideDateTimePicker,\n    isControllerOnly,\n    props: { hasError },\n  } = React.useContext(ControlledDateTimePickerContext);\n\n  return (\n    <StyledPickersIconsWrapperGrid hasError={hasError} isControllerOnly={isControllerOnly}>\n      {!hideDatePicker && hideTimePicker && hideDateTimePicker ? <Calendar /> : null}\n      {hideDatePicker && !hideTimePicker && hideDateTimePicker ? <TimeWheel /> : null}\n      {hideDatePicker && hideTimePicker && !hideDateTimePicker ? <CalendarWithTimeWheel /> : null}\n    </StyledPickersIconsWrapperGrid>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "sourcesContent": ["import React from 'react';\nimport { ControlledDateTimePickerContext } from '../../ControlledDateTimePickerCTX.js';\nimport { StyledPickersIconsWrapperGrid } from '../Styleds.js';\nimport { CalendarWithTimeWheel } from './CalendarWithTimeWheel/CalendarWithTimeWheel.js';\nimport { Calendar } from './Calendar/Calendar.js';\nimport { TimeWheel } from './TimeWheel/TimeWheel.js';\n\nexport const PickersIcons = (): JSX.Element => {\n  const {\n    hideDatePicker,\n    hideTimePicker,\n    hideDateTimePicker,\n    isControllerOnly,\n    props: { hasError },\n  } = React.useContext(ControlledDateTimePickerContext);\n\n  return (\n    <StyledPickersIconsWrapperGrid hasError={hasError} isControllerOnly={isControllerOnly}>\n      {!hideDatePicker && hideTimePicker && hideDateTimePicker ? <Calendar /> : null}\n      {hideDatePicker && !hideTimePicker && hideDateTimePicker ? <TimeWheel /> : null}\n      {hideDatePicker && hideTimePicker && !hideDateTimePicker ? <CalendarWithTimeWheel /> : null}\n    </StyledPickersIconsWrapperGrid>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADiBnB;AAjBJ,mBAAkB;AAClB,yCAAgD;AAChD,qBAA8C;AAC9C,mCAAsC;AACtC,sBAAyB;AACzB,uBAA0B;AAEnB,MAAM,eAAe,MAAmB;AAC7C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,EAAE,SAAS;AAAA,EACpB,IAAI,aAAAA,QAAM,WAAW,kEAA+B;AAEpD,SACE,6CAAC,gDAA8B,UAAoB,kBAChD;AAAA,KAAC,kBAAkB,kBAAkB,qBAAqB,4CAAC,4BAAS,IAAK;AAAA,IACzE,kBAAkB,CAAC,kBAAkB,qBAAqB,4CAAC,8BAAU,IAAK;AAAA,IAC1E,kBAAkB,kBAAkB,CAAC,qBAAqB,4CAAC,sDAAsB,IAAK;AAAA,KACzF;AAEJ;",
   "names": ["React"]
 }

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

@@ -29,13 +29,14 @@ __export(HoursList_exports, {
 module.exports = __toCommonJS(HoursList_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 HoursList = () => {
   const {
     currHourNum,
@@ -55,8 +56,25 @@ const HoursList = () => {
     autoFocusHourTimeWheel,
     hours,
     latestInteractionRegion,
-    currFocusDescriber
+    currFocusDescriber,
+    props
   } = (0, import_react.useContext)(import_ControlledDateTimePickerCTX.ControlledDateTimePickerContext);
+  const ariaAndDataPropsPrevHour = import_react.default.useMemo(
+    () => (0, import_ds_props_helpers.getPropsPerDatatestid)(props[import_ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.TIMEWHEEL.PREV_HOUR]),
+    [props]
+  );
+  const ariaAndDataPropsNextHour = import_react.default.useMemo(
+    () => (0, import_ds_props_helpers.getPropsPerDatatestid)(props[import_ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.TIMEWHEEL.NEXT_HOUR]),
+    [props]
+  );
+  const ariaAndDataPropsCurrHour = import_react.default.useMemo(
+    () => (0, import_ds_props_helpers.getPropsPerDatatestid)(props[import_ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.TIMEWHEEL.CURRENT_HOUR]),
+    [props]
+  );
+  const ariaAndDataPropsHour = import_react.default.useMemo(
+    () => (0, import_ds_props_helpers.getPropsPerDatatestid)(props[import_ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.TIMEWHEEL.HOUR]),
+    [props]
+  );
   const handleCurrYearRef = (0, import_react.useCallback)(
     (ButtonDomNode) => {
       setTimeout(() => {
@@ -77,6 +95,7 @@ const HoursList = () => {
         onClick: handlePrevHour,
         innerRef: prevHourBtnRef,
         "data-testid": import_ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.TIMEWHEEL.PREV_HOUR,
+        ...ariaAndDataPropsPrevHour,
         tabIndex: -1,
         type: "button",
         children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.ChevronSmallUp, { color: ["brand-primary", "700"] })
@@ -119,6 +138,7 @@ const HoursList = () => {
           "aria-valuetext": `${hourString} hours`,
           type: "button",
           ...btnProps,
+          ...isCurrentListItem ? ariaAndDataPropsCurrHour : ariaAndDataPropsHour,
           children: hourString
         }
       ) }, key);
@@ -133,6 +153,7 @@ const HoursList = () => {
         innerRef: nextHourBtnRef,
         tabIndex: -1,
         "data-testid": import_ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.TIMEWHEEL.NEXT_HOUR,
+        ...ariaAndDataPropsNextHour,
         type: "button",
         children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.ChevronSmallDown, { color: ["brand-primary", "700"] })
       }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/parts/Pickers/TimeWheel/HoursList.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 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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADyCnB;AAxCJ,mBAA+C;AAC/C,sBAAiD;AACjD,gDAAmD;AACnD,yCAAgD;AAChD,2BAAkD;AAClD,qBAA8F;AAC9F,8BAAiC;AAE1B,MAAM,YAAY,MAAmB;AAC1C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,wCAAgB;AAC/B,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,kEAA+B;AAC9C,QAAM,wBAAoB;AAAA,IACxB,CAAC,kBAAqC;AACpC,iBAAW,MAAM;AACf,uBAAe,UAAU;AACzB,YAAI,4BAA4B,eAAe,uBAAuB;AACpE,yBAAe,QAAQ;AAAA,MAC3B,CAAC;AAAA,IACH;AAAA,IACA,CAAC,oBAAoB,yBAAyB,cAAc;AAAA,EAC9D;AACA,SACE,6CAAC,kCACC;AAAA,gDAAC,sCACC;AAAA,MAAC;AAAA;AAAA,QACC,cAAW;AAAA,QACX,YAAW;AAAA,QACX,MAAK;AAAA,QACL,SAAS;AAAA,QACT,UAAU;AAAA,QACV,eAAa,6EAAmC,UAAU;AAAA,QAC1D,UAAU;AAAA,QACV,MAAK;AAAA,QAEL,sDAAC,kCAAe,OAAO,CAAC,iBAAiB,KAAK,GAAG;AAAA;AAAA,IACnD,GACF;AAAA,IACC,aAAa,IAAI,CAAC,eAAe;AAChC,YAAM,MAAM,kBAAkB,cAAc;AAC5C,UAAI,CAAC;AAAY,eAAO,4CAAC,wCAAyB,GAAK;AACvD,YAAM,qBAAqB,GAAG,cAAc,iBAAiB;AAE7D,YAAM,kCAAkC,CAAC,aAAS,wDAAkC,UAAU,MAAM;AACpG,YAAM,oBAAoB,mCAAmC,UAAU;AACvE,YAAM,aAAa,kBAAkB,kBAAkB;AACvD,YAAM,WAAW,oBAAoB,IAAI;AACzC,YAAM,WAAW;AAAA,QACf,WAAW,oBAAoB,0BAA0B;AAAA,QACzD,UAAU,oBAAoB,oBAAoB;AAAA,MACpD;AACA,YAAM,aAAa;AAAA,QACjB;AAAA,QACA;AAAA,MACF;AACA,aACE,4CAAC,sCAAoB,mBACnB;AAAA,QAAC;AAAA;AAAA,UACE,GAAG;AAAA,UACJ,WAAW,0BAA0B;AAAA,UACrC,eAAa,6EAAmC,UAAU,oBAAoB,iBAAiB;AAAA,UAC/F,UAAU,MAAM,WAAW,SAAK,wDAAkC,UAAU,MAAM;AAAA,UAClF,cAAY,GAAG;AAAA,UACf,iBAAe;AAAA,UACf,YAAW;AAAA,UACX,MAAK;AAAA,UACL,SAAS,CAAC,MAA2C,8BAA8B,YAAY,CAAC;AAAA,UAChG;AAAA,UACA,MAAK;AAAA,UACL,iBAAe;AAAA,UACf,iBAAe;AAAA,UACf,iBAAe;AAAA,UACf,kBAAgB,GAAG;AAAA,UACnB,MAAK;AAAA,UACJ,GAAG;AAAA,UAEH;AAAA;AAAA,MACH,KArB8D,GAsBhE;AAAA,IAEJ,CAAC;AAAA,IACD,4CAAC,sCACC;AAAA,MAAC;AAAA;AAAA,QACC,cAAW;AAAA,QACX,YAAW;AAAA,QACX,MAAK;AAAA,QACL,SAAS;AAAA,QACT,UAAU;AAAA,QACV,UAAU;AAAA,QACV,eAAa,6EAAmC,UAAU;AAAA,QAC1D,MAAK;AAAA,QAEL,sDAAC,oCAAiB,OAAO,CAAC,iBAAiB,KAAK,GAAG;AAAA;AAAA,IACrD,GACF;AAAA,KACF;AAEJ;",
-  "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 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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
+  "names": ["React"]
 }