npm - @elliemae/ds-form-date-time-picker - Versions diffs - 3.18.0-next.0 → 3.18.0-next.2 - Mend

@elliemae/ds-form-date-time-picker 3.18.0-next.0 → 3.18.0-next.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (140) hide show

package/dist/cjs/parts/Pickers/CalendarWithTimeWheel/CalendarWithTimeWheelWrapper.js CHANGED Viewed

@@ -33,31 +33,28 @@ __export(CalendarWithTimeWheelWrapper_exports, {
 module.exports = __toCommonJS(CalendarWithTimeWheelWrapper_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_react = __toESM(require("react"));
-var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
+var import_react = require("react");
 var import_ds_popperjs = require("@elliemae/ds-popperjs");
 var import_ControlledDateTimePickerDatatestid = require("../../../ControlledDateTimePickerDatatestid.js");
 var import_CalendarWithTimeWheelContent = require("./CalendarWithTimeWheelContent.js");
 var import_CalendarWithTimeWheelContext = require("./CalendarWithTimeWheelContext.js");
 var import_ControlledDateTimePickerCTX = require("../../../ControlledDateTimePickerCTX.js");
+var import_ds_system = require("@elliemae/ds-system");
+const StyledPopper = (0, import_ds_system.styled)(import_ds_popperjs.DSPopperJS)``;
 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]
-  );
+  const { getProps } = (0, import_react.useContext)(import_ControlledDateTimePickerCTX.ControlledDateTimePickerContext);
   if (isControllerOnly)
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_CalendarWithTimeWheelContent.CalendarWithTimeWheelContent, {});
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_ds_popperjs.DSPopperJS,
+    StyledPopper,
     {
       showPopover: true,
       "data-testid": import_ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.CONTEXTUAL_MENU.CALENDAR_TIMEWHEEL,
       referenceElement,
       withoutArrow: true,
       onClickOutside: closeCalendar,
-      ...ariaAndDataProps,
+      getOwnerProps: getProps,
       children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_CalendarWithTimeWheelContent.CalendarWithTimeWheelContent, {})
     }
   );

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

@@ -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 { 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,kBAAkB,CAAC;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"]
+  "sourcesContent": ["import React, { useContext } from 'react';\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';\nimport { styled } from '@elliemae/ds-system';\n\nconst StyledPopper = styled(DSPopperJS)``;\n\nexport const CalendarWithTimeWheelWrapper = (): JSX.Element => {\n  const { referenceElement, closeCalendar, isControllerOnly } = useContext(CalendarWithTimeWheelContext);\n  const { getProps } = useContext(ControlledDateTimePickerContext);\n  if (isControllerOnly) return <CalendarWithTimeWheelContent />;\n\n  return (\n    <StyledPopper\n      showPopover\n      data-testid={ControlledDateTimePickerDatatestid.CONTEXTUAL_MENU.CALENDAR_TIMEWHEEL}\n      referenceElement={referenceElement}\n      withoutArrow\n      onClickOutside={closeCalendar}\n      getOwnerProps={getProps}\n    >\n      <CalendarWithTimeWheelContent />\n    </StyledPopper>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADaQ;AAb/B,mBAAkC;AAClC,yBAA2B;AAC3B,gDAAmD;AACnD,0CAA6C;AAC7C,0CAA6C;AAC7C,yCAAgD;AAChD,uBAAuB;AAEvB,MAAM,mBAAe,yBAAO,6BAAU;AAE/B,MAAM,+BAA+B,MAAmB;AAC7D,QAAM,EAAE,kBAAkB,eAAe,iBAAiB,QAAI,yBAAW,gEAA4B;AACrG,QAAM,EAAE,SAAS,QAAI,yBAAW,kEAA+B;AAC/D,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,MAChB,eAAe;AAAA,MAEf,sDAAC,oEAA6B;AAAA;AAAA,EAChC;AAEJ;",
+  "names": []
 }

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

@@ -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.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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",
+  "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: (\n    e: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>,\n  ) => 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/TimeWheel/HoursList.js CHANGED Viewed

@@ -33,8 +33,7 @@ __export(HoursList_exports, {
 module.exports = __toCommonJS(HoursList_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_react = __toESM(require("react"));
-var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
+var import_react = require("react");
 var import_ds_icons = require("@elliemae/ds-icons");
 var import_ControlledDateTimePickerDatatestid = require("../../../ControlledDateTimePickerDatatestid.js");
 var import_ControlledDateTimePickerCTX = require("../../../ControlledDateTimePickerCTX.js");
@@ -61,24 +60,8 @@ const HoursList = () => {
     hours,
     latestInteractionRegion,
     currFocusDescriber,
-    props
+    getProps
   } = (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(() => {
@@ -99,7 +82,7 @@ const HoursList = () => {
         onClick: handlePrevHour,
         innerRef: prevHourBtnRef,
         "data-testid": import_ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.TIMEWHEEL.PREV_HOUR,
-        ...ariaAndDataPropsPrevHour,
+        getOwnerProps: getProps,
         tabIndex: -1,
         type: "button",
         children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.ChevronSmallUp, { color: ["brand-primary", "700"] })
@@ -142,7 +125,7 @@ const HoursList = () => {
           "aria-valuetext": `${hourString} hours`,
           type: "button",
           ...btnProps,
-          ...isCurrentListItem ? ariaAndDataPropsCurrHour : ariaAndDataPropsHour,
+          getOwnerProps: getProps,
           children: hourString
         }
       ) }, key);
@@ -157,7 +140,7 @@ const HoursList = () => {
         innerRef: nextHourBtnRef,
         tabIndex: -1,
         "data-testid": import_ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.TIMEWHEEL.NEXT_HOUR,
-        ...ariaAndDataPropsNextHour,
+        getOwnerProps: getProps,
         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 CHANGED Viewed

@@ -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 { 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"]
+  "sourcesContent": ["/* eslint-disable complexity */\nimport React, { useContext, useCallback } from 'react';\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    getProps,\n  } = useContext(ControlledDateTimePickerContext);\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          getOwnerProps={getProps}\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> | React.KeyboardEvent<HTMLButtonElement>) =>\n                handleTimeWheelBtnChangeHours(hourString, e)\n              }\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              getOwnerProps={getProps}\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          getOwnerProps={getProps}\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": []
 }

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

@@ -34,9 +34,8 @@ __export(MeridiemList_exports, {
 module.exports = __toCommonJS(MeridiemList_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_react = __toESM(require("react"));
+var import_react = require("react");
 var import_ds_icons = require("@elliemae/ds-icons");
-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");
@@ -52,24 +51,8 @@ const MeridiemList = () => {
     minutes,
     latestInteractionRegion,
     currFocusDescriber,
-    props
+    getProps
   } = (0, import_react.useContext)(import_ControlledDateTimePickerCTX.ControlledDateTimePickerContext);
-  const ariaAndDataPropsPrevMeridiem = import_react.default.useMemo(
-    () => (0, import_ds_props_helpers.getPropsPerDatatestid)(props[import_ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.TIMEWHEEL.PREV_MERIDIEM]),
-    [props]
-  );
-  const ariaAndDataPropsNextMeridiem = import_react.default.useMemo(
-    () => (0, import_ds_props_helpers.getPropsPerDatatestid)(props[import_ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.TIMEWHEEL.NEXT_MERIDIEM]),
-    [props]
-  );
-  const ariaAndDataPropsCurrMeridiem = import_react.default.useMemo(
-    () => (0, import_ds_props_helpers.getPropsPerDatatestid)(props[import_ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.TIMEWHEEL.CURRENT_MERIDIEM]),
-    [props]
-  );
-  const ariaAndDataPropsMeridiem = import_react.default.useMemo(
-    () => (0, import_ds_props_helpers.getPropsPerDatatestid)(props[import_ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.TIMEWHEEL.MERIDIEM]),
-    [props]
-  );
   const isAmCurrent = !currMeridiem || currMeridiem === "AM";
   const isPmCurrent = currMeridiem === "PM";
   const hourMinuteString = `${hours || "01"}:${minutes || "00"}`;
@@ -105,7 +88,7 @@ const MeridiemList = () => {
         innerRef: prevMeridiemBtnRef,
         tabIndex: -1,
         type: "button",
-        ...ariaAndDataPropsPrevMeridiem,
+        getOwnerProps: getProps,
         children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.ChevronSmallUp, { color: ["brand-primary", "700"] })
       }
     ) }),
@@ -130,7 +113,7 @@ const MeridiemList = () => {
         "aria-valuenow": isPmCurrent ? 1 : 0,
         "aria-valuetext": isAmCurrent ? "ante meridiem" : "post meridiem",
         type: "button",
-        ...isAmCurrent ? ariaAndDataPropsCurrMeridiem : ariaAndDataPropsMeridiem,
+        getOwnerProps: getProps,
         children: "AM"
       }
     ) }),
@@ -154,7 +137,7 @@ const MeridiemList = () => {
         "aria-valuenow": isPmCurrent ? 1 : 0,
         "aria-valuetext": isAmCurrent ? "ante meridiem" : "post meridiem",
         type: "button",
-        ...isPmCurrent ? ariaAndDataPropsCurrMeridiem : ariaAndDataPropsMeridiem,
+        getOwnerProps: getProps,
         children: "PM"
       }
     ) }),
@@ -172,7 +155,7 @@ const MeridiemList = () => {
         innerRef: nextMeridiemBtnRef,
         tabIndex: -1,
         type: "button",
-        ...ariaAndDataPropsNextMeridiem,
+        getOwnerProps: getProps,
         children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.ChevronSmallDown, { color: ["brand-primary", "700"] })
       }
     ) })

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

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

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

@@ -34,8 +34,7 @@ __export(MinutesList_exports, {
 module.exports = __toCommonJS(MinutesList_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_react = __toESM(require("react"));
-var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
+var import_react = require("react");
 var import_ds_icons = require("@elliemae/ds-icons");
 var import_ControlledDateTimePickerDatatestid = require("../../../ControlledDateTimePickerDatatestid.js");
 var import_ControlledDateTimePickerCTX = require("../../../ControlledDateTimePickerCTX.js");
@@ -61,24 +60,8 @@ const MinutesList = () => {
     minutes,
     currFocusDescriber,
     latestInteractionRegion,
-    props
+    getProps
   } = (0, import_react.useContext)(import_ControlledDateTimePickerCTX.ControlledDateTimePickerContext);
-  const ariaAndDataPropsPrevMinute = import_react.default.useMemo(
-    () => (0, import_ds_props_helpers.getPropsPerDatatestid)(props[import_ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.TIMEWHEEL.PREV_MINUTE]),
-    [props]
-  );
-  const ariaAndDataPropsNextMinute = import_react.default.useMemo(
-    () => (0, import_ds_props_helpers.getPropsPerDatatestid)(props[import_ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.TIMEWHEEL.NEXT_MINUTE]),
-    [props]
-  );
-  const ariaAndDataPropsCurrMinute = import_react.default.useMemo(
-    () => (0, import_ds_props_helpers.getPropsPerDatatestid)(props[import_ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.TIMEWHEEL.CURRENT_MINUTE]),
-    [props]
-  );
-  const ariaAndDataPropsMinute = import_react.default.useMemo(
-    () => (0, import_ds_props_helpers.getPropsPerDatatestid)(props[import_ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.TIMEWHEEL.MINUTE]),
-    [props]
-  );
   const handleCurrMeridiemRef = (0, import_react.useCallback)(
     (ButtonDomNode) => {
       setTimeout(() => {
@@ -101,7 +84,7 @@ const MinutesList = () => {
         tabIndex: -1,
         "data-testid": import_ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.TIMEWHEEL.PREV_MINUTE,
         type: "button",
-        ...ariaAndDataPropsPrevMinute,
+        getOwnerProps: getProps,
         children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.ChevronSmallUp, { color: ["brand-primary", "700"] })
       }
     ) }),
@@ -143,7 +126,7 @@ const MinutesList = () => {
               "aria-valuetext": `${minutesString} minutes`,
               type: "button",
               ...btnProps,
-              ...isCurrentListItem ? ariaAndDataPropsCurrMinute : ariaAndDataPropsMinute,
+              getOwnerProps: getProps,
               children: minutesString
             }
           )
@@ -162,7 +145,7 @@ const MinutesList = () => {
         "data-testid": import_ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.TIMEWHEEL.NEXT_MINUTE,
         tabIndex: -1,
         type: "button",
-        ...ariaAndDataPropsNextMinute,
+        getOwnerProps: getProps,
         children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.ChevronSmallDown, { color: ["brand-primary", "700"] })
       }
     ) })

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

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

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

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

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

@@ -34,7 +34,6 @@ module.exports = __toCommonJS(TimeWheelContent_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = __toESM(require("react"));
-var import_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");
@@ -43,27 +42,19 @@ var import_MinutesList = require("./MinutesList.js");
 var import_MeridiemList = require("./MeridiemList.js");
 var import_TimeWheelFooter = require("./TimeWheelFooter.js");
 const TimeWheelContent = import_react.default.memo(() => {
-  const { isControllerOnly, hours, minutes, meridiem, props } = (0, import_react.useContext)(import_ControlledDateTimePickerCTX.ControlledDateTimePickerContext);
-  const ariaAndDataPropsHeaderLabel = import_react.default.useMemo(
-    () => (0, import_ds_props_helpers.getPropsPerDatatestid)(props[import_ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.TIMEWHEEL.HEADER_LABEL]),
-    [props]
-  );
-  const ariaAndDataPropsTimewheel = import_react.default.useMemo(
-    () => (0, import_ds_props_helpers.getPropsPerDatatestid)(props[import_ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.CONTROLLER_COMPONENT.TIMEWHEEL]),
-    [props]
-  );
+  const { isControllerOnly, hours, minutes, meridiem, getProps } = (0, import_react.useContext)(import_ControlledDateTimePickerCTX.ControlledDateTimePickerContext);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     import_Styleds.StyledTimePickerContainer,
     {
       isControllerOnly,
       "data-testid": import_ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.CONTROLLER_COMPONENT.TIMEWHEEL,
-      ...ariaAndDataPropsTimewheel,
+      getOwnerProps: getProps,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           import_Styleds.StyledTimePickerHead,
           {
             "data-testid": import_ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.TIMEWHEEL.HEADER_LABEL,
-            ...ariaAndDataPropsHeaderLabel,
+            getOwnerProps: getProps,
             children: `${hours || "__"}:${minutes || "__"} ${meridiem || "__"}`
           }
         ),

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

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

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

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