@elliemae/ds-form-date-time-picker 3.80.0-next.2 → 3.80.0-next.20

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/Pickers/TimeWheel/HoursList.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport { ChevronSmallDown, ChevronSmallUp, type SvgIconT } from '@elliemae/ds-icons';\nimport React, { useCallback, useContext, useState } from 'react';\nimport { ControlledDateTimePickerDatatestid } from '../../../constants/index.js';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';\nimport { convertToPositiveNumberIfPossible } from '../../../utils/numberHelpers.js';\nimport { StyledTimeBtn, StyledWheelChangeTimeBtn, StyledWheelList, StyledWheelListItem } 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    trackFocusTimewheelCurrHour,\n    getProps,\n    props: { readOnly, applyAriaDisabled },\n  } = useContext(ControlledDateTimePickerContext);\n\n  const handleCurrYearRef = useCallback(\n    (ButtonDomNode: HTMLDivElement) => {\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\n  const [isFocusedWheel, setIsFocusedWheel] = useState(false);\n\n  const handleWheelFocus = useCallback(() => {\n    setIsFocusedWheel(true);\n    trackFocusTimewheelCurrHour();\n  }, [setIsFocusedWheel, trackFocusTimewheelCurrHour]);\n\n  const handleWheelBlur = useCallback(\n    (e: React.FocusEvent<HTMLDivElement>) => {\n      if (!e.currentTarget.contains(e.relatedTarget as Node)) setIsFocusedWheel(false);\n    },\n    [setIsFocusedWheel],\n  );\n\n  const hasDisabledStyles = readOnly || applyAriaDisabled;\n\n  const arrowColor = !hasDisabledStyles ? (['brand-primary', '700'] as SvgIconT.ColorType) : undefined;\n  return (\n    <StyledWheelList onFocus={handleWheelFocus} onBlur={handleWheelBlur}>\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          applyAriaDisabled={applyAriaDisabled}\n          readOnly={readOnly}\n          getOwnerProps={getProps}\n          tabIndex={-1}\n          type=\"button\"\n        >\n          <ChevronSmallUp color={arrowColor} />\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 isTheItemVisuallyInTheCenter = isEmptyCurrValueCurrentListItem || hours === hourString;\n        const isNotAValidSelection = getIsDisabledTime(currHourTimeString);\n        const tabIndex = isTheItemVisuallyInTheCenter ? 0 : -1;\n        const isSelected = hours.length === 2 && convertToPositiveNumberIfPossible(hourString) === currHourNum;\n        const btnProps = {\n          role: 'spinbutton',\n          ...(isSelected && {\n            'aria-valuenow': convertToPositiveNumberIfPossible(hourString),\n            'aria-valuetext': `${hourString} hours`,\n          }),\n          'aria-valuemin': 1,\n          'aria-valuemax': 12,\n          'aria-label': `${hourString} hours`,\n          'aria-disabled': readOnly || applyAriaDisabled,\n          'aria-invalid': isNotAValidSelection,\n          'aria-readonly': readOnly || applyAriaDisabled,\n          onKeyDown: isTheItemVisuallyInTheCenter ? handleCurrHourOnKeyDown : undefined,\n          innerRef: isTheItemVisuallyInTheCenter ? handleCurrYearRef : undefined,\n        };\n        return (\n          <StyledWheelListItem key={key}>\n            <StyledTimeBtn\n              $isTheItemVisuallyInTheCenter={isTheItemVisuallyInTheCenter}\n              $isNotAValidSelection={isNotAValidSelection}\n              $selected={isSelected}\n              $isUnset={!hours}\n              $readOnly={readOnly || applyAriaDisabled}\n              $isFocusedWheel={isFocusedWheel}\n              autoFocus={autoFocusHourTimeWheel && isTheItemVisuallyInTheCenter}\n              data-testid={\n                ControlledDateTimePickerDatatestid.TIMEWHEEL[isTheItemVisuallyInTheCenter ? 'CURRENT_HOUR' : 'HOUR']\n              }\n              onClick={(e: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) =>\n                handleTimeWheelBtnChangeHours(hourString, e)\n              }\n              tabIndex={tabIndex}\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          applyAriaDisabled={applyAriaDisabled}\n          readOnly={readOnly}\n          getOwnerProps={getProps}\n          type=\"button\"\n        >\n          <ChevronSmallDown color={arrowColor} />\n        </StyledWheelChangeTimeBtn>\n      </StyledWheelListItem>\n    </StyledWheelList>\n  );\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport { ChevronSmallDown, ChevronSmallUp, type SvgIconT } from '@elliemae/ds-icons';\nimport React, { useCallback, useContext, useState } from 'react';\nimport { ControlledDateTimePickerDatatestid } from '../../../constants/index.js';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';\nimport { convertToPositiveNumberIfPossible } from '../../../utils/numberHelpers.js';\nimport { StyledTimeBtn, StyledWheelChangeTimeBtn, StyledWheelList, StyledWheelListItem } 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    trackFocusTimewheelCurrHour,\n    getProps,\n    props: { readOnly, applyAriaDisabled },\n  } = useContext(ControlledDateTimePickerContext);\n\n  const handleCurrYearRef = useCallback(\n    (ButtonDomNode: HTMLDivElement) => {\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\n  const [isFocusedWheel, setIsFocusedWheel] = useState(false);\n\n  const handleWheelFocus = useCallback(() => {\n    setIsFocusedWheel(true);\n    trackFocusTimewheelCurrHour();\n  }, [setIsFocusedWheel, trackFocusTimewheelCurrHour]);\n\n  const handleWheelBlur = useCallback(\n    (e: React.FocusEvent<HTMLDivElement>) => {\n      if (!e.currentTarget.contains(e.relatedTarget as Node)) setIsFocusedWheel(false);\n    },\n    [setIsFocusedWheel],\n  );\n\n  const hasDisabledStyles = readOnly || applyAriaDisabled;\n\n  const arrowColor = !hasDisabledStyles ? (['brand-primary', '700'] as SvgIconT.ColorType) : undefined;\n  return (\n    <StyledWheelList onFocus={handleWheelFocus} onBlur={handleWheelBlur} getOwnerProps={getProps}>\n      <StyledWheelListItem getOwnerProps={getProps}>\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          applyAriaDisabled={applyAriaDisabled}\n          readOnly={readOnly}\n          getOwnerProps={getProps}\n          tabIndex={-1}\n          type=\"button\"\n        >\n          <ChevronSmallUp color={arrowColor} />\n        </StyledWheelChangeTimeBtn>\n      </StyledWheelListItem>\n      {visibleHours.map((hourString) => {\n        const key = `timewheel-hour-${hourString || ''}`;\n        if (!hourString) return <StyledWheelListItem key={key} getOwnerProps={getProps} />;\n        const currHourTimeString = `${hourString}:${currMinuteNum} ${currMeridiem}`;\n\n        const isEmptyCurrValueCurrentListItem = !hours && convertToPositiveNumberIfPossible(hourString) === currHourNum;\n        const isTheItemVisuallyInTheCenter = isEmptyCurrValueCurrentListItem || hours === hourString;\n        const isNotAValidSelection = getIsDisabledTime(currHourTimeString);\n        const tabIndex = isTheItemVisuallyInTheCenter ? 0 : -1;\n        const isSelected = hours.length === 2 && convertToPositiveNumberIfPossible(hourString) === currHourNum;\n        const btnProps = {\n          role: 'spinbutton',\n          ...(isSelected && {\n            'aria-valuenow': convertToPositiveNumberIfPossible(hourString),\n            'aria-valuetext': `${hourString} hours`,\n          }),\n          'aria-valuemin': 1,\n          'aria-valuemax': 12,\n          'aria-label': `${hourString} hours`,\n          'aria-disabled': readOnly || applyAriaDisabled,\n          'aria-invalid': isNotAValidSelection,\n          'aria-readonly': readOnly || applyAriaDisabled,\n          onKeyDown: isTheItemVisuallyInTheCenter ? handleCurrHourOnKeyDown : undefined,\n          innerRef: isTheItemVisuallyInTheCenter ? handleCurrYearRef : undefined,\n        };\n        return (\n          <StyledWheelListItem key={key} getOwnerProps={getProps}>\n            <StyledTimeBtn\n              $isTheItemVisuallyInTheCenter={isTheItemVisuallyInTheCenter}\n              $isNotAValidSelection={isNotAValidSelection}\n              $selected={isSelected}\n              $isUnset={!hours}\n              $readOnly={readOnly || applyAriaDisabled}\n              $isFocusedWheel={isFocusedWheel}\n              autoFocus={autoFocusHourTimeWheel && isTheItemVisuallyInTheCenter}\n              data-testid={\n                ControlledDateTimePickerDatatestid.TIMEWHEEL[isTheItemVisuallyInTheCenter ? 'CURRENT_HOUR' : 'HOUR']\n              }\n              onClick={(e: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) =>\n                handleTimeWheelBtnChangeHours(hourString, e)\n              }\n              tabIndex={tabIndex}\n              {...btnProps}\n              getOwnerProps={getProps}\n            >\n              {hourString}\n            </StyledTimeBtn>\n          </StyledWheelListItem>\n        );\n      })}\n      <StyledWheelListItem getOwnerProps={getProps}>\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          applyAriaDisabled={applyAriaDisabled}\n          readOnly={readOnly}\n          getOwnerProps={getProps}\n          type=\"button\"\n        >\n          <ChevronSmallDown color={arrowColor} />\n        </StyledWheelChangeTimeBtn>\n      </StyledWheelListItem>\n    </StyledWheelList>\n  );\n};\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -88,7 +88,7 @@ const MeridiemVisualLayer = ({ isFocusedWheel }) => {
   const hasDisabledStyles = readOnly || applyAriaDisabled;
   const arrowColor = !hasDisabledStyles ? ["brand-primary", "700"] : void 0;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(StyledWheelListItem, { children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(StyledWheelListItem, { getOwnerProps: getProps, children: /* @__PURE__ */ jsx(
       StyledWheelChangeTimeBtn,
       {
         "aria-label": "set am meridiem",
@@ -108,8 +108,8 @@ const MeridiemVisualLayer = ({ isFocusedWheel }) => {
         children: /* @__PURE__ */ jsx(ChevronSmallUp, { color: arrowColor })
       }
     ) }),
-    currMeridiem === "AM" || currMeridiem === "" ? /* @__PURE__ */ jsx(StyledWheelListItem, { "aria-hidden": "true" }) : null,
-    /* @__PURE__ */ jsx(StyledWheelListItem, { "aria-hidden": "true", children: /* @__PURE__ */ jsx(
+    currMeridiem === "AM" || currMeridiem === "" ? /* @__PURE__ */ jsx(StyledWheelListItem, { "aria-hidden": "true", getOwnerProps: getProps }) : null,
+    /* @__PURE__ */ jsx(StyledWheelListItem, { "aria-hidden": "true", getOwnerProps: getProps, children: /* @__PURE__ */ jsx(
       StyledTimeBtn,
       {
         $isTheItemVisuallyInTheCenter: isAmCurrent,
@@ -127,7 +127,7 @@ const MeridiemVisualLayer = ({ isFocusedWheel }) => {
         children: "AM"
       }
     ) }),
-    /* @__PURE__ */ jsx(StyledWheelListItem, { "aria-hidden": "true", children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(StyledWheelListItem, { "aria-hidden": "true", getOwnerProps: getProps, children: /* @__PURE__ */ jsx(
       StyledTimeBtn,
       {
         $isTheItemVisuallyInTheCenter: isPmCurrent,
@@ -145,8 +145,8 @@ const MeridiemVisualLayer = ({ isFocusedWheel }) => {
         children: "PM"
       }
     ) }),
-    currMeridiem === "PM" ? /* @__PURE__ */ jsx(StyledWheelListItem, { "aria-hidden": "true" }) : null,
-    /* @__PURE__ */ jsx(StyledWheelListItem, { children: /* @__PURE__ */ jsx(
+    currMeridiem === "PM" ? /* @__PURE__ */ jsx(StyledWheelListItem, { "aria-hidden": "true", getOwnerProps: getProps }) : null,
+    /* @__PURE__ */ jsx(StyledWheelListItem, { getOwnerProps: getProps, children: /* @__PURE__ */ jsx(
       StyledWheelChangeTimeBtn,
       {
         "aria-label": "set pm meridiem",
@@ -170,7 +170,7 @@ const MeridiemVisualLayer = ({ isFocusedWheel }) => {
 };
 const MeridiemList = () => {
   const [isFocusedWheel, setIsFocusedWheel] = useState(false);
-  const { trackFocusTimewheelCurrMeridiem } = useContext(ControlledDateTimePickerContext);
+  const { trackFocusTimewheelCurrMeridiem, getProps } = useContext(ControlledDateTimePickerContext);
   const handleWheelFocus = useCallback(() => {
     setIsFocusedWheel(true);
     trackFocusTimewheelCurrMeridiem();
@@ -181,7 +181,7 @@ const MeridiemList = () => {
     },
     [setIsFocusedWheel]
   );
-  return /* @__PURE__ */ jsxs(StyledWheelList, { onFocus: handleWheelFocus, onBlur: handleWheelBlur, children: [
+  return /* @__PURE__ */ jsxs(StyledWheelList, { onFocus: handleWheelFocus, onBlur: handleWheelBlur, getOwnerProps: getProps, children: [
     /* @__PURE__ */ jsx(MeridiemA11yLayer, {}),
     /* @__PURE__ */ jsx(MeridiemVisualLayer, { isFocusedWheel })
   ] });

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/Pickers/TimeWheel/MeridiemList.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable complexity */\nimport { ChevronSmallDown, ChevronSmallUp, type SvgIconT } from '@elliemae/ds-icons';\nimport React, { useCallback, useContext, useState } from 'react';\nimport { ControlledDateTimePickerDatatestid } from '../../../constants/index.js';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';\nimport { StyledTimeBtn, StyledWheelChangeTimeBtn, StyledWheelList, StyledWheelListItem } from './Styleds.js';\nimport { TimeWheelContext } from './TimeWheelContext.js';\n\nconst srOnlyStyle: React.CSSProperties = {\n  position: 'absolute',\n  width: '1px',\n  height: '1px',\n  padding: 0,\n  margin: '-1px',\n  overflow: 'hidden',\n  clip: 'rect(0, 0, 0, 0)',\n  whiteSpace: 'nowrap',\n  border: 0,\n  pointerEvents: 'none',\n};\n\n/**\n * A11y layer: the true semantic contract for screen readers and keyboard users.\n * It is visually hidden and pointer-event-free \u2014 it exists solely to provide a\n * valid, focused listbox with two options that AT can read and keyboard can operate.\n * The visual layer below is fully aria-hidden; this layer is the single source of\n * truth for all assistive technology interaction.\n */\nconst MeridiemA11yLayer = (): JSX.Element => {\n  const { currMeridiem, handleCurrMeridiemOnKeyDown } = useContext(TimeWheelContext);\n  const {\n    currMeridiemBtnRef,\n    meridiem,\n    instanceUid,\n    latestInteractionRegion,\n    currFocusDescriber,\n    getIsDisabledTime,\n    hours,\n    minutes,\n    props: { readOnly, applyAriaDisabled },\n  } = useContext(ControlledDateTimePickerContext);\n\n  const isAmCurrent = !currMeridiem || currMeridiem === 'AM';\n  const amId = `${instanceUid}-meridiem-am`;\n  const pmId = `${instanceUid}-meridiem-pm`;\n  const hourMinuteString = `${hours || '01'}:${minutes || '00'}`;\n  const isCurrentMeridiemInvalid = isAmCurrent\n    ? getIsDisabledTime(`${hourMinuteString} AM`)\n    : getIsDisabledTime(`${hourMinuteString} PM`);\n\n  const handleListboxRef = useCallback(\n    (listboxDomNode: HTMLDivElement) => {\n      setTimeout(() => {\n        currMeridiemBtnRef.current = listboxDomNode;\n        if (latestInteractionRegion === 'timewheel' && currFocusDescriber === 'timewheel-curr-meridiem')\n          listboxDomNode?.focus?.();\n      });\n    },\n    [currFocusDescriber, latestInteractionRegion, currMeridiemBtnRef],\n  );\n\n  return (\n    <div\n      role=\"listbox\"\n      aria-label=\"Meridiem\"\n      aria-orientation=\"vertical\"\n      aria-disabled={readOnly || applyAriaDisabled}\n      aria-invalid={isCurrentMeridiemInvalid}\n      aria-activedescendant={isAmCurrent ? amId : pmId}\n      tabIndex={0}\n      onKeyDown={handleCurrMeridiemOnKeyDown}\n      ref={handleListboxRef}\n      style={srOnlyStyle}\n      data-testid={ControlledDateTimePickerDatatestid.TIMEWHEEL.CURRENT_MERIDIEM}\n    >\n      <div role=\"option\" id={amId} aria-selected={meridiem === 'AM'}>\n        AM\n      </div>\n      <div role=\"option\" id={pmId} aria-selected={meridiem === 'PM'}>\n        PM\n      </div>\n    </div>\n  );\n};\n\n/**\n * Visual layer: the presentation surface that mouse users see and interact with.\n * All elements are aria-hidden \u2014 AT never reaches this layer. The chevron buttons\n * and AM/PM items are click-only affordances; on click they update state and redirect\n * focus to the a11y layer above so keyboard can continue from there. No ARIA roles,\n * labels, or keyboard handlers live here.\n */\nconst MeridiemVisualLayer = ({ isFocusedWheel }: { isFocusedWheel: boolean }): JSX.Element => {\n  const { currMeridiem, handleTimeWheelBtnChangeMeridiem } = useContext(TimeWheelContext);\n  const {\n    prevMeridiemBtnRef,\n    currMeridiemBtnRef,\n    nextMeridiemBtnRef,\n    getIsDisabledTime,\n    hours,\n    minutes,\n    meridiem,\n    getProps,\n    props: { readOnly, applyAriaDisabled },\n  } = useContext(ControlledDateTimePickerContext);\n\n  const isAmCurrent = !currMeridiem || currMeridiem === 'AM';\n  const isPmCurrent = currMeridiem === 'PM';\n  const hourMinuteString = `${hours || '01'}:${minutes || '00'}`;\n  const isNotAValidAm = getIsDisabledTime(`${hourMinuteString} AM`);\n  const isNotAValidPm = getIsDisabledTime(`${hourMinuteString} PM`);\n\n  const hasDisabledStyles = readOnly || applyAriaDisabled;\n  const arrowColor = !hasDisabledStyles ? (['brand-primary', '700'] as SvgIconT.ColorType) : undefined;\n\n  return (\n    <>\n      <StyledWheelListItem>\n        <StyledWheelChangeTimeBtn\n          aria-label=\"set am meridiem\"\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            currMeridiemBtnRef.current?.focus();\n          }}\n          innerRef={prevMeridiemBtnRef}\n          tabIndex={-1}\n          type=\"button\"\n          applyAriaDisabled={applyAriaDisabled}\n          readOnly={readOnly}\n          getOwnerProps={getProps}\n        >\n          <ChevronSmallUp color={arrowColor} />\n        </StyledWheelChangeTimeBtn>\n      </StyledWheelListItem>\n      {currMeridiem === 'AM' || currMeridiem === '' ? <StyledWheelListItem aria-hidden=\"true\" /> : null}\n      <StyledWheelListItem aria-hidden=\"true\">\n        <StyledTimeBtn\n          $isTheItemVisuallyInTheCenter={isAmCurrent}\n          $isNotAValidSelection={isNotAValidAm}\n          $selected={isAmCurrent && !!meridiem}\n          $isUnset={!meridiem}\n          $isFocusedWheel={isFocusedWheel}\n          data-testid={\n            ControlledDateTimePickerDatatestid.TIMEWHEEL[\n              isAmCurrent ? 'CURRENT_MERIDIEM_VISUAL_ELEMENT' : 'MERIDIEM_VISUAL_ELEMENT'\n            ]\n          }\n          onClick={(e: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) => {\n            handleTimeWheelBtnChangeMeridiem('AM', e);\n            currMeridiemBtnRef.current?.focus();\n          }}\n          getOwnerProps={getProps}\n          $readOnly={readOnly || applyAriaDisabled}\n        >\n          AM\n        </StyledTimeBtn>\n      </StyledWheelListItem>\n      <StyledWheelListItem aria-hidden=\"true\">\n        <StyledTimeBtn\n          $isTheItemVisuallyInTheCenter={isPmCurrent}\n          $selected={isPmCurrent && !!meridiem}\n          $isNotAValidSelection={isNotAValidPm}\n          $isUnset={!meridiem}\n          $isFocusedWheel={isFocusedWheel}\n          data-testid={\n            ControlledDateTimePickerDatatestid.TIMEWHEEL[\n              isPmCurrent ? 'CURRENT_MERIDIEM_VISUAL_ELEMENT' : 'MERIDIEM_VISUAL_ELEMENT'\n            ]\n          }\n          onClick={(e: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) => {\n            handleTimeWheelBtnChangeMeridiem('PM', e);\n            currMeridiemBtnRef.current?.focus();\n          }}\n          getOwnerProps={getProps}\n          $readOnly={readOnly || applyAriaDisabled}\n        >\n          PM\n        </StyledTimeBtn>\n      </StyledWheelListItem>\n      {currMeridiem === 'PM' ? <StyledWheelListItem aria-hidden=\"true\" /> : null}\n      <StyledWheelListItem>\n        <StyledWheelChangeTimeBtn\n          aria-label=\"set pm meridiem\"\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            currMeridiemBtnRef.current?.focus();\n          }}\n          innerRef={nextMeridiemBtnRef}\n          tabIndex={-1}\n          type=\"button\"\n          applyAriaDisabled={applyAriaDisabled}\n          readOnly={readOnly}\n          getOwnerProps={getProps}\n        >\n          <ChevronSmallDown color={arrowColor} />\n        </StyledWheelChangeTimeBtn>\n      </StyledWheelListItem>\n    </>\n  );\n};\n\nexport const MeridiemList = (): JSX.Element => {\n  const [isFocusedWheel, setIsFocusedWheel] = useState(false);\n  const { trackFocusTimewheelCurrMeridiem } = useContext(ControlledDateTimePickerContext);\n\n  const handleWheelFocus = useCallback(() => {\n    setIsFocusedWheel(true);\n    trackFocusTimewheelCurrMeridiem();\n  }, [setIsFocusedWheel, trackFocusTimewheelCurrMeridiem]);\n\n  const handleWheelBlur = useCallback(\n    (e: React.FocusEvent<HTMLDivElement>) => {\n      if (!e.currentTarget.contains(e.relatedTarget as Node)) setIsFocusedWheel(false);\n    },\n    [setIsFocusedWheel],\n  );\n\n  return (\n    <StyledWheelList onFocus={handleWheelFocus} onBlur={handleWheelBlur}>\n      <MeridiemA11yLayer />\n      <MeridiemVisualLayer isFocusedWheel={isFocusedWheel} />\n    </StyledWheelList>\n  );\n};\n\nexport default MeridiemList;\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable complexity */\nimport { ChevronSmallDown, ChevronSmallUp, type SvgIconT } from '@elliemae/ds-icons';\nimport React, { useCallback, useContext, useState } from 'react';\nimport { ControlledDateTimePickerDatatestid } from '../../../constants/index.js';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';\nimport { StyledTimeBtn, StyledWheelChangeTimeBtn, StyledWheelList, StyledWheelListItem } from './Styleds.js';\nimport { TimeWheelContext } from './TimeWheelContext.js';\n\nconst srOnlyStyle: React.CSSProperties = {\n  position: 'absolute',\n  width: '1px',\n  height: '1px',\n  padding: 0,\n  margin: '-1px',\n  overflow: 'hidden',\n  clip: 'rect(0, 0, 0, 0)',\n  whiteSpace: 'nowrap',\n  border: 0,\n  pointerEvents: 'none',\n};\n\n/**\n * A11y layer: the true semantic contract for screen readers and keyboard users.\n * It is visually hidden and pointer-event-free \u2014 it exists solely to provide a\n * valid, focused listbox with two options that AT can read and keyboard can operate.\n * The visual layer below is fully aria-hidden; this layer is the single source of\n * truth for all assistive technology interaction.\n */\nconst MeridiemA11yLayer = (): JSX.Element => {\n  const { currMeridiem, handleCurrMeridiemOnKeyDown } = useContext(TimeWheelContext);\n  const {\n    currMeridiemBtnRef,\n    meridiem,\n    instanceUid,\n    latestInteractionRegion,\n    currFocusDescriber,\n    getIsDisabledTime,\n    hours,\n    minutes,\n    props: { readOnly, applyAriaDisabled },\n  } = useContext(ControlledDateTimePickerContext);\n\n  const isAmCurrent = !currMeridiem || currMeridiem === 'AM';\n  const amId = `${instanceUid}-meridiem-am`;\n  const pmId = `${instanceUid}-meridiem-pm`;\n  const hourMinuteString = `${hours || '01'}:${minutes || '00'}`;\n  const isCurrentMeridiemInvalid = isAmCurrent\n    ? getIsDisabledTime(`${hourMinuteString} AM`)\n    : getIsDisabledTime(`${hourMinuteString} PM`);\n\n  const handleListboxRef = useCallback(\n    (listboxDomNode: HTMLDivElement) => {\n      setTimeout(() => {\n        currMeridiemBtnRef.current = listboxDomNode;\n        if (latestInteractionRegion === 'timewheel' && currFocusDescriber === 'timewheel-curr-meridiem')\n          listboxDomNode?.focus?.();\n      });\n    },\n    [currFocusDescriber, latestInteractionRegion, currMeridiemBtnRef],\n  );\n\n  return (\n    <div\n      role=\"listbox\"\n      aria-label=\"Meridiem\"\n      aria-orientation=\"vertical\"\n      aria-disabled={readOnly || applyAriaDisabled}\n      aria-invalid={isCurrentMeridiemInvalid}\n      aria-activedescendant={isAmCurrent ? amId : pmId}\n      tabIndex={0}\n      onKeyDown={handleCurrMeridiemOnKeyDown}\n      ref={handleListboxRef}\n      style={srOnlyStyle}\n      data-testid={ControlledDateTimePickerDatatestid.TIMEWHEEL.CURRENT_MERIDIEM}\n    >\n      <div role=\"option\" id={amId} aria-selected={meridiem === 'AM'}>\n        AM\n      </div>\n      <div role=\"option\" id={pmId} aria-selected={meridiem === 'PM'}>\n        PM\n      </div>\n    </div>\n  );\n};\n\n/**\n * Visual layer: the presentation surface that mouse users see and interact with.\n * All elements are aria-hidden \u2014 AT never reaches this layer. The chevron buttons\n * and AM/PM items are click-only affordances; on click they update state and redirect\n * focus to the a11y layer above so keyboard can continue from there. No ARIA roles,\n * labels, or keyboard handlers live here.\n */\nconst MeridiemVisualLayer = ({ isFocusedWheel }: { isFocusedWheel: boolean }): JSX.Element => {\n  const { currMeridiem, handleTimeWheelBtnChangeMeridiem } = useContext(TimeWheelContext);\n  const {\n    prevMeridiemBtnRef,\n    currMeridiemBtnRef,\n    nextMeridiemBtnRef,\n    getIsDisabledTime,\n    hours,\n    minutes,\n    meridiem,\n    getProps,\n    props: { readOnly, applyAriaDisabled },\n  } = useContext(ControlledDateTimePickerContext);\n\n  const isAmCurrent = !currMeridiem || currMeridiem === 'AM';\n  const isPmCurrent = currMeridiem === 'PM';\n  const hourMinuteString = `${hours || '01'}:${minutes || '00'}`;\n  const isNotAValidAm = getIsDisabledTime(`${hourMinuteString} AM`);\n  const isNotAValidPm = getIsDisabledTime(`${hourMinuteString} PM`);\n\n  const hasDisabledStyles = readOnly || applyAriaDisabled;\n  const arrowColor = !hasDisabledStyles ? (['brand-primary', '700'] as SvgIconT.ColorType) : undefined;\n\n  return (\n    <>\n      <StyledWheelListItem getOwnerProps={getProps}>\n        <StyledWheelChangeTimeBtn\n          aria-label=\"set am meridiem\"\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            currMeridiemBtnRef.current?.focus();\n          }}\n          innerRef={prevMeridiemBtnRef}\n          tabIndex={-1}\n          type=\"button\"\n          applyAriaDisabled={applyAriaDisabled}\n          readOnly={readOnly}\n          getOwnerProps={getProps}\n        >\n          <ChevronSmallUp color={arrowColor} />\n        </StyledWheelChangeTimeBtn>\n      </StyledWheelListItem>\n      {currMeridiem === 'AM' || currMeridiem === '' ? (\n        <StyledWheelListItem aria-hidden=\"true\" getOwnerProps={getProps} />\n      ) : null}\n      <StyledWheelListItem aria-hidden=\"true\" getOwnerProps={getProps}>\n        <StyledTimeBtn\n          $isTheItemVisuallyInTheCenter={isAmCurrent}\n          $isNotAValidSelection={isNotAValidAm}\n          $selected={isAmCurrent && !!meridiem}\n          $isUnset={!meridiem}\n          $isFocusedWheel={isFocusedWheel}\n          data-testid={\n            ControlledDateTimePickerDatatestid.TIMEWHEEL[\n              isAmCurrent ? 'CURRENT_MERIDIEM_VISUAL_ELEMENT' : 'MERIDIEM_VISUAL_ELEMENT'\n            ]\n          }\n          onClick={(e: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) => {\n            handleTimeWheelBtnChangeMeridiem('AM', e);\n            currMeridiemBtnRef.current?.focus();\n          }}\n          getOwnerProps={getProps}\n          $readOnly={readOnly || applyAriaDisabled}\n        >\n          AM\n        </StyledTimeBtn>\n      </StyledWheelListItem>\n      <StyledWheelListItem aria-hidden=\"true\" getOwnerProps={getProps}>\n        <StyledTimeBtn\n          $isTheItemVisuallyInTheCenter={isPmCurrent}\n          $selected={isPmCurrent && !!meridiem}\n          $isNotAValidSelection={isNotAValidPm}\n          $isUnset={!meridiem}\n          $isFocusedWheel={isFocusedWheel}\n          data-testid={\n            ControlledDateTimePickerDatatestid.TIMEWHEEL[\n              isPmCurrent ? 'CURRENT_MERIDIEM_VISUAL_ELEMENT' : 'MERIDIEM_VISUAL_ELEMENT'\n            ]\n          }\n          onClick={(e: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) => {\n            handleTimeWheelBtnChangeMeridiem('PM', e);\n            currMeridiemBtnRef.current?.focus();\n          }}\n          getOwnerProps={getProps}\n          $readOnly={readOnly || applyAriaDisabled}\n        >\n          PM\n        </StyledTimeBtn>\n      </StyledWheelListItem>\n      {currMeridiem === 'PM' ? <StyledWheelListItem aria-hidden=\"true\" getOwnerProps={getProps} /> : null}\n      <StyledWheelListItem getOwnerProps={getProps}>\n        <StyledWheelChangeTimeBtn\n          aria-label=\"set pm meridiem\"\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            currMeridiemBtnRef.current?.focus();\n          }}\n          innerRef={nextMeridiemBtnRef}\n          tabIndex={-1}\n          type=\"button\"\n          applyAriaDisabled={applyAriaDisabled}\n          readOnly={readOnly}\n          getOwnerProps={getProps}\n        >\n          <ChevronSmallDown color={arrowColor} />\n        </StyledWheelChangeTimeBtn>\n      </StyledWheelListItem>\n    </>\n  );\n};\n\nexport const MeridiemList = (): JSX.Element => {\n  const [isFocusedWheel, setIsFocusedWheel] = useState(false);\n  const { trackFocusTimewheelCurrMeridiem, getProps } = useContext(ControlledDateTimePickerContext);\n\n  const handleWheelFocus = useCallback(() => {\n    setIsFocusedWheel(true);\n    trackFocusTimewheelCurrMeridiem();\n  }, [setIsFocusedWheel, trackFocusTimewheelCurrMeridiem]);\n\n  const handleWheelBlur = useCallback(\n    (e: React.FocusEvent<HTMLDivElement>) => {\n      if (!e.currentTarget.contains(e.relatedTarget as Node)) setIsFocusedWheel(false);\n    },\n    [setIsFocusedWheel],\n  );\n\n  return (\n    <StyledWheelList onFocus={handleWheelFocus} onBlur={handleWheelBlur} getOwnerProps={getProps}>\n      <MeridiemA11yLayer />\n      <MeridiemVisualLayer isFocusedWheel={isFocusedWheel} />\n    </StyledWheelList>\n  );\n};\n\nexport default MeridiemList;\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -53,8 +53,8 @@ const MinutesList = () => {
   );
   const hasDisabledStyles = readOnly || applyAriaDisabled;
   const arrowColor = !hasDisabledStyles ? ["brand-primary", "700"] : void 0;
-  return /* @__PURE__ */ jsxs(StyledWheelList, { onFocus: handleWheelFocus, onBlur: handleWheelBlur, children: [
-    /* @__PURE__ */ jsx(StyledWheelListItem, { children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(StyledWheelList, { onFocus: handleWheelFocus, onBlur: handleWheelBlur, getOwnerProps: getProps, children: [
+    /* @__PURE__ */ jsx(StyledWheelListItem, { getOwnerProps: getProps, children: /* @__PURE__ */ jsx(
       StyledWheelChangeTimeBtn,
       {
         "aria-label": "subtract one minute",
@@ -73,7 +73,7 @@ const MinutesList = () => {
     ) }),
     visibleMinutes.map((minutesString) => {
       const key = `timewheel-minutes-${minutesString || ""}`;
-      if (!minutesString) return /* @__PURE__ */ jsx(StyledWheelListItem, {}, key);
+      if (!minutesString) return /* @__PURE__ */ jsx(StyledWheelListItem, { getOwnerProps: getProps }, key);
       const currMinutesTimeString = `${currHourNum}:${minutesString} ${currMeridiem}`;
       const isEmptyCurrValueCurrentListItem = !minutes && convertToPositiveNumberIfPossible(minutesString) === currMinuteNum;
       const isTheItemVisuallyInTheCenter = isEmptyCurrValueCurrentListItem || minutes === minutesString;
@@ -95,7 +95,7 @@ const MinutesList = () => {
         onKeyDown: isTheItemVisuallyInTheCenter ? handleCurrMinutesOnKeyDown : void 0,
         innerRef: isTheItemVisuallyInTheCenter ? handleCurrMeridiemRef : void 0
       };
-      return /* @__PURE__ */ jsx(StyledWheelListItem, { children: /* @__PURE__ */ jsx(
+      return /* @__PURE__ */ jsx(StyledWheelListItem, { getOwnerProps: getProps, children: /* @__PURE__ */ jsx(
         StyledTimeBtn,
         {
           $isTheItemVisuallyInTheCenter: isTheItemVisuallyInTheCenter,
@@ -114,7 +114,7 @@ const MinutesList = () => {
         }
       ) }, key);
     }),
-    /* @__PURE__ */ jsx(StyledWheelListItem, { children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(StyledWheelListItem, { getOwnerProps: getProps, children: /* @__PURE__ */ jsx(
       StyledWheelChangeTimeBtn,
       {
         "aria-label": "add one minute",

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/Pickers/TimeWheel/MinutesList.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport { ChevronSmallDown, ChevronSmallUp, type SvgIconT } from '@elliemae/ds-icons';\nimport React, { useCallback, useContext, useState } from 'react';\nimport { ControlledDateTimePickerDatatestid } from '../../../constants/index.js';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';\nimport { convertToPositiveNumberIfPossible } from '../../../utils/numberHelpers.js';\nimport { StyledTimeBtn, StyledWheelChangeTimeBtn, StyledWheelList, StyledWheelListItem } 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    trackFocusTimewheelCurrMinute,\n    getProps,\n    props: { readOnly, applyAriaDisabled },\n  } = useContext(ControlledDateTimePickerContext);\n\n  const handleCurrMeridiemRef = useCallback(\n    (ButtonDomNode: HTMLDivElement) => {\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\n  const [isFocusedWheel, setIsFocusedWheel] = useState(false);\n\n  const handleWheelFocus = useCallback(() => {\n    setIsFocusedWheel(true);\n    trackFocusTimewheelCurrMinute();\n  }, [setIsFocusedWheel, trackFocusTimewheelCurrMinute]);\n\n  const handleWheelBlur = useCallback(\n    (e: React.FocusEvent<HTMLDivElement>) => {\n      if (!e.currentTarget.contains(e.relatedTarget as Node)) setIsFocusedWheel(false);\n    },\n    [setIsFocusedWheel],\n  );\n\n  const hasDisabledStyles = readOnly || applyAriaDisabled;\n\n  const arrowColor = !hasDisabledStyles ? (['brand-primary', '700'] as SvgIconT.ColorType) : undefined;\n  return (\n    <StyledWheelList onFocus={handleWheelFocus} onBlur={handleWheelBlur}>\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          applyAriaDisabled={applyAriaDisabled}\n          readOnly={readOnly}\n          type=\"button\"\n          getOwnerProps={getProps}\n        >\n          <ChevronSmallUp color={arrowColor} />\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 isTheItemVisuallyInTheCenter = isEmptyCurrValueCurrentListItem || minutes === minutesString;\n        const isNotAValidSelection = getIsDisabledTime(currMinutesTimeString);\n\n        const tabIndex = isTheItemVisuallyInTheCenter ? 0 : -1;\n        const isSelected = minutes.length === 2 && convertToPositiveNumberIfPossible(minutesString) === currMinuteNum;\n        const btnProps = {\n          role: 'spinbutton',\n          ...(isSelected && {\n            'aria-valuenow': convertToPositiveNumberIfPossible(minutesString),\n            'aria-valuetext': `${minutesString} minutes`,\n          }),\n          'aria-label': `${minutesString} minutes`,\n          'aria-valuemin': 0,\n          'aria-valuemax': 59,\n          'aria-disabled': readOnly || applyAriaDisabled,\n          'aria-invalid': isNotAValidSelection,\n          'aria-readonly': readOnly || applyAriaDisabled,\n          onKeyDown: isTheItemVisuallyInTheCenter ? handleCurrMinutesOnKeyDown : undefined,\n          innerRef: isTheItemVisuallyInTheCenter ? handleCurrMeridiemRef : undefined,\n        };\n        return (\n          <StyledWheelListItem key={key}>\n            <StyledTimeBtn\n              $isTheItemVisuallyInTheCenter={isTheItemVisuallyInTheCenter}\n              $isNotAValidSelection={isNotAValidSelection}\n              $selected={isSelected}\n              $isUnset={!minutes}\n              $readOnly={readOnly || applyAriaDisabled}\n              $isFocusedWheel={isFocusedWheel}\n              data-testid={\n                ControlledDateTimePickerDatatestid.TIMEWHEEL[isTheItemVisuallyInTheCenter ? 'CURRENT_MINUTE' : 'MINUTE']\n              }\n              onClick={(e: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) =>\n                handleTimeWheelBtnChangeMinutes(minutesString, e)\n              }\n              tabIndex={tabIndex}\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          applyAriaDisabled={applyAriaDisabled}\n          readOnly={readOnly}\n          type=\"button\"\n          getOwnerProps={getProps}\n        >\n          <ChevronSmallDown color={arrowColor} />\n        </StyledWheelChangeTimeBtn>\n      </StyledWheelListItem>\n    </StyledWheelList>\n  );\n};\n\nexport default MinutesList;\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport { ChevronSmallDown, ChevronSmallUp, type SvgIconT } from '@elliemae/ds-icons';\nimport React, { useCallback, useContext, useState } from 'react';\nimport { ControlledDateTimePickerDatatestid } from '../../../constants/index.js';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';\nimport { convertToPositiveNumberIfPossible } from '../../../utils/numberHelpers.js';\nimport { StyledTimeBtn, StyledWheelChangeTimeBtn, StyledWheelList, StyledWheelListItem } 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    trackFocusTimewheelCurrMinute,\n    getProps,\n    props: { readOnly, applyAriaDisabled },\n  } = useContext(ControlledDateTimePickerContext);\n\n  const handleCurrMeridiemRef = useCallback(\n    (ButtonDomNode: HTMLDivElement) => {\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\n  const [isFocusedWheel, setIsFocusedWheel] = useState(false);\n\n  const handleWheelFocus = useCallback(() => {\n    setIsFocusedWheel(true);\n    trackFocusTimewheelCurrMinute();\n  }, [setIsFocusedWheel, trackFocusTimewheelCurrMinute]);\n\n  const handleWheelBlur = useCallback(\n    (e: React.FocusEvent<HTMLDivElement>) => {\n      if (!e.currentTarget.contains(e.relatedTarget as Node)) setIsFocusedWheel(false);\n    },\n    [setIsFocusedWheel],\n  );\n\n  const hasDisabledStyles = readOnly || applyAriaDisabled;\n\n  const arrowColor = !hasDisabledStyles ? (['brand-primary', '700'] as SvgIconT.ColorType) : undefined;\n  return (\n    <StyledWheelList onFocus={handleWheelFocus} onBlur={handleWheelBlur} getOwnerProps={getProps}>\n      <StyledWheelListItem getOwnerProps={getProps}>\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          applyAriaDisabled={applyAriaDisabled}\n          readOnly={readOnly}\n          type=\"button\"\n          getOwnerProps={getProps}\n        >\n          <ChevronSmallUp color={arrowColor} />\n        </StyledWheelChangeTimeBtn>\n      </StyledWheelListItem>\n      {visibleMinutes.map((minutesString) => {\n        const key = `timewheel-minutes-${minutesString || ''}`;\n        if (!minutesString) return <StyledWheelListItem key={key} getOwnerProps={getProps} />;\n        const currMinutesTimeString = `${currHourNum}:${minutesString} ${currMeridiem}`;\n        const isEmptyCurrValueCurrentListItem =\n          !minutes && convertToPositiveNumberIfPossible(minutesString) === currMinuteNum;\n        const isTheItemVisuallyInTheCenter = isEmptyCurrValueCurrentListItem || minutes === minutesString;\n        const isNotAValidSelection = getIsDisabledTime(currMinutesTimeString);\n\n        const tabIndex = isTheItemVisuallyInTheCenter ? 0 : -1;\n        const isSelected = minutes.length === 2 && convertToPositiveNumberIfPossible(minutesString) === currMinuteNum;\n        const btnProps = {\n          role: 'spinbutton',\n          ...(isSelected && {\n            'aria-valuenow': convertToPositiveNumberIfPossible(minutesString),\n            'aria-valuetext': `${minutesString} minutes`,\n          }),\n          'aria-label': `${minutesString} minutes`,\n          'aria-valuemin': 0,\n          'aria-valuemax': 59,\n          'aria-disabled': readOnly || applyAriaDisabled,\n          'aria-invalid': isNotAValidSelection,\n          'aria-readonly': readOnly || applyAriaDisabled,\n          onKeyDown: isTheItemVisuallyInTheCenter ? handleCurrMinutesOnKeyDown : undefined,\n          innerRef: isTheItemVisuallyInTheCenter ? handleCurrMeridiemRef : undefined,\n        };\n        return (\n          <StyledWheelListItem key={key} getOwnerProps={getProps}>\n            <StyledTimeBtn\n              $isTheItemVisuallyInTheCenter={isTheItemVisuallyInTheCenter}\n              $isNotAValidSelection={isNotAValidSelection}\n              $selected={isSelected}\n              $isUnset={!minutes}\n              $readOnly={readOnly || applyAriaDisabled}\n              $isFocusedWheel={isFocusedWheel}\n              data-testid={\n                ControlledDateTimePickerDatatestid.TIMEWHEEL[isTheItemVisuallyInTheCenter ? 'CURRENT_MINUTE' : 'MINUTE']\n              }\n              onClick={(e: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) =>\n                handleTimeWheelBtnChangeMinutes(minutesString, e)\n              }\n              tabIndex={tabIndex}\n              type=\"button\"\n              {...btnProps}\n              getOwnerProps={getProps}\n            >\n              {minutesString}\n            </StyledTimeBtn>\n          </StyledWheelListItem>\n        );\n      })}\n      <StyledWheelListItem getOwnerProps={getProps}>\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          applyAriaDisabled={applyAriaDisabled}\n          readOnly={readOnly}\n          type=\"button\"\n          getOwnerProps={getProps}\n        >\n          <ChevronSmallDown color={arrowColor} />\n        </StyledWheelChangeTimeBtn>\n      </StyledWheelListItem>\n    </StyledWheelList>\n  );\n};\n\nexport default MinutesList;\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -2,7 +2,11 @@ import * as React from "react";
 import { DSButtonV2 } from "@elliemae/ds-button-v2";
 import { Grid } from "@elliemae/ds-grid";
 import { css, styled } from "@elliemae/ds-system";
-import { DSControlledDateTimePickerName, DSControlledDateTimePickerSlots } from "../../../constants/index.js";
+import {
+  DSControlledDateTimePickerName,
+  DSControlledDateTimePickerSlots,
+  FORM_DATE_TIME_PICKER_SLOTS
+} from "../../../constants/index.js";
 const focusBorder = (props) => {
   const { theme, $isTheItemVisuallyInTheCenter, $selected, $isFocusedWheel } = props;
   if ($isTheItemVisuallyInTheCenter && !$selected && $isFocusedWheel)
@@ -114,7 +118,10 @@ const StyledIconTriggerButton = styled(DSButtonV2, {
   width: 2rem;
   height: 2rem;
 `;
-const StyledWheelList = styled.div`
+const StyledWheelList = styled("div", {
+  name: DSControlledDateTimePickerName,
+  slot: FORM_DATE_TIME_PICKER_SLOTS.TIMEWHEEL_WHEEL_LIST
+})`
   width: 100%;
   height: 100%;
   margin: auto;
@@ -160,7 +167,10 @@ const StyledTimePickerHead = styled(Grid, {
   align-items: center;
   background: ${({ theme }) => theme.colors.neutral["050"]};
 `;
-const StyledTimePickerWheelsLegend = styled.div`
+const StyledTimePickerWheelsLegend = styled("div", {
+  name: DSControlledDateTimePickerName,
+  slot: FORM_DATE_TIME_PICKER_SLOTS.TIMEWHEEL_WHEELS_LEGEND
+})`
   width: 100%;
   height: 100%;
   grid-area: TimePickerWheelsLegend;
@@ -171,7 +181,10 @@ const StyledTimePickerWheelsLegend = styled.div`
   text-align: center;
   background: ${({ theme }) => theme.colors.neutral["050"]};
 `;
-const StyledTimePickerWheelWrapper = styled.div`
+const StyledTimePickerWheelWrapper = styled("div", {
+  name: DSControlledDateTimePickerName,
+  slot: FORM_DATE_TIME_PICKER_SLOTS.TIMEWHEEL_WHEEL_WRAPPER
+})`
   background-color: ${({ theme, $readOnlyStyles }) => $readOnlyStyles ? theme.colors.neutral["050"] : theme.colors.neutral["000"]};
   width: 100%;
   grid-area: VerticalWheelWrapper;
@@ -216,7 +229,10 @@ const StyledTimeBtn = styled(Grid, {
   ${focusBorder}
   ${fontWeight}
 `;
-const StyledWheelListItem = styled.div`
+const StyledWheelListItem = styled("div", {
+  name: DSControlledDateTimePickerName,
+  slot: FORM_DATE_TIME_PICKER_SLOTS.TIMEWHEEL_WHEEL_LIST_ITEM
+})`
   margin: auto;
   width: 36px;
   height: 36px;

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/Pickers/TimeWheel/Styleds.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable prefer-destructuring */\n/* eslint-disable complexity */\n/* eslint-disable max-lines */\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { Grid } from '@elliemae/ds-grid';\nimport { css, styled, type Theme } from '@elliemae/ds-system';\nimport { DSControlledDateTimePickerName, DSControlledDateTimePickerSlots } from '../../../constants/index.js';\n\ninterface StyledWheelListItemPropsT {\n  $isTheItemVisuallyInTheCenter?: boolean;\n  $selected?: boolean;\n  $isNotAValidSelection?: boolean;\n  $readOnly?: boolean;\n  $isUnset?: boolean;\n  $isFocusedWheel?: boolean;\n}\n\ninterface StyledTimePickerContainerT {\n  showShadow?: boolean;\n  isControllerOnly: boolean;\n}\n\n// Focus ring \u2014 always brand-700 regardless of validity or readOnly state.\n// Only rendered for the visually centred item when the wheel is focused and the item is not selected.\nconst focusBorder = (props: StyledWheelListItemPropsT & { theme: Theme }) => {\n  const { theme, $isTheItemVisuallyInTheCenter, $selected, $isFocusedWheel } = props;\n  if ($isTheItemVisuallyInTheCenter && !$selected && $isFocusedWheel)\n    return css<StyledWheelListItemPropsT>`\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.colors.brand[700]};\n      }\n    `;\n  return css``;\n};\n\n// Diagonal line for invalid items. Colour is neutral at rest in all states \u2014\n// the focus ring (::after) is the sole blue/brand focus signal.\nconst diagonalLine = (props: StyledWheelListItemPropsT & { theme: Theme }) => {\n  const { theme, $selected, $isNotAValidSelection, $readOnly } = props;\n  if (!$isNotAValidSelection) return css``;\n\n  let beforeBgColor = theme.colors.neutral[500]; // idle not-selected\n  if ($readOnly && !$selected) beforeBgColor = theme.colors.neutral[700]; // readOnly not-selected\n  if ($selected) beforeBgColor = theme.colors.neutral['000']; // selected always white\n\n  return css<StyledWheelListItemPropsT>`\n    cursor: not-allowed;\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: ${beforeBgColor};\n    }\n  `;\n};\n\n// Text colour. On focus the invalid case resolves to brand-700 (not danger-900) for\n// consistency with the universal blue focus ring decision.\nconst fontColor = (props: StyledWheelListItemPropsT & { theme: Theme }) => {\n  const { theme, $selected, $readOnly, $isNotAValidSelection, $isFocusedWheel, $isTheItemVisuallyInTheCenter } = props;\n\n  let color = theme.colors.neutral[700]; // default\n  if ($selected) color = theme.colors.neutral['000']; // selected always white\n\n  // For items that can't receive :focus (meridiem visual layer), drive focused-center colour via props.\n  // Hours/minutes also benefit from this \u2014 :focus below applies the same value.\n  if ($isTheItemVisuallyInTheCenter && $isFocusedWheel && !$selected && !$readOnly) {\n    color = theme.colors.brand[700]; // always brand, matches the blue focus ring\n  }\n\n  // Hover: valid not-selected not-readOnly \u2192 brand-700; all other cases \u2192 no change\n  const hoverColor = !$selected && !$readOnly && !$isNotAValidSelection ? theme.colors.brand[700] : '';\n\n  // Focus (:focus fires on hours/minutes; meridiem relies on the prop-driven path above)\n  // Matches focus ring: always brand when interactive, no change when readOnly or selected\n  const focusColor = !$selected && !$readOnly ? theme.colors.brand[700] : '';\n\n  return css<StyledWheelListItemPropsT>`\n    color: ${color};\n    &:hover {\n      color: ${hoverColor};\n    }\n    &:focus {\n      color: ${focusColor};\n    }\n  `;\n};\n\n// Background colours at rest and on hover.\n// Hover matrix (readOnly always wins):\n//   readOnly  \u2192 selected: neutral-700 | not-selected: neutral-100\n//   invalid   \u2192 selected: danger-950  | not-selected: danger-200 hardcoded to #fffcfc due to contrast failure of danger-200 token\n//   valid     \u2192 selected: brand-800   | not-selected: brand-100\nconst btnBgColorPerStatus = (props: StyledWheelListItemPropsT & { theme: Theme }) => {\n  const { theme, $selected, $isNotAValidSelection, $readOnly, $isFocusedWheel, $isTheItemVisuallyInTheCenter } = props;\n\n  // Rest background: only selected items have a non-transparent background.\n  let bgColor = '';\n  if ($selected) {\n    bgColor = theme.colors.brand[600];\n    if ($isNotAValidSelection) bgColor = theme.colors.danger[900]; // invalid selected: red\n    if ($readOnly) bgColor = theme.colors.neutral[500]; // readOnly always wins: grey\n  }\n\n  // When the wheel column is active (focused), drive the selected centre item to the\n  // same colour as its hover state \u2014 :hover won't fire on keyboard navigation and\n  // meridiem visual items can't receive :focus at all.\n  if ($isTheItemVisuallyInTheCenter && $isFocusedWheel && $selected) {\n    if ($readOnly) bgColor = theme.colors.neutral[700];\n    else if ($isNotAValidSelection) bgColor = theme.colors.danger[950];\n    else bgColor = theme.colors.brand[800];\n  }\n\n  // Hover background \u2014 new spec, clean if/else, no empty-string leaks.\n  let hoverBgColor: string;\n  if ($readOnly) {\n    hoverBgColor = $selected ? theme.colors.neutral[700] : theme.colors.neutral[100];\n  } else if ($isNotAValidSelection) {\n    // TODO: danger[200] and danger[400] are currently the same token and both fail contrast\n    // against common dimsum color combinations. Hardcoded until the theme token is fixed.\n    hoverBgColor = $selected ? theme.colors.danger[950] : '#fffcfc'; // this is hardcoded because danger 200 fails contrast, pending theme token fix\n  } else {\n    hoverBgColor = $selected ? theme.colors.brand[800] : theme.colors.brand[100];\n  }\n\n  return css`\n    background-color: ${bgColor};\n    &:hover {\n      background-color: ${hoverBgColor};\n    }\n  `;\n};\n\nconst cursor = (props: StyledWheelListItemPropsT & { theme: Theme }) => {\n  const cursorStyle = props.$readOnly || props.$isNotAValidSelection ? 'not-allowed' : 'pointer';\n  return css`\n    cursor: ${cursorStyle};\n  `;\n};\n\n// Font weight: selected \u2192 semibold at rest (no hover override needed, it is already semibold).\n// Not selected \u2192 semibold on hover only.\nconst fontWeight = (props: StyledWheelListItemPropsT & { theme: Theme }) => {\n  const { theme, $selected } = props;\n  if ($selected) {\n    return css`\n      font-weight: ${theme.fontWeights.semibold};\n    `;\n  }\n  return css`\n    &:hover {\n      font-weight: ${theme.fontWeights.semibold};\n    }\n  `;\n};\n\nexport const StyledIconTriggerButton = styled(DSButtonV2, {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.PICKER_ICONS.TIMEWHEEL,\n})`\n  color: ${({ theme }) => theme.colors.brand['800']};\n  width: 2rem;\n  height: 2rem;\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', {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.CONTROLLER_COMPONENT.TIMEWHEEL,\n})<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<{ $readOnlyStyles?: boolean }>`\n  background-color: ${({ theme, $readOnlyStyles }) =>\n    $readOnlyStyles ? theme.colors.neutral['050'] : theme.colors.neutral['000']};\n  width: 100%;\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['300']};\n    }\n  }\n\n  > *:not(:last-child) {\n    border-right: 1px solid ${({ theme }) => theme.colors.neutral[200]};\n  }\n`;\n\nexport const StyledTimeBtn = styled(Grid, {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.TIMEWHEEL.TIME_BUTTON,\n})<StyledWheelListItemPropsT>`\n  position: relative;\n  height: ${({ theme }) => theme.space.s};\n  width: ${({ theme }) => theme.space.s};\n  border-radius: 50%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  &:focus {\n    outline: none;\n  }\n  ${cursor}\n  ${fontColor}\n  ${diagonalLine}\n  ${btnBgColorPerStatus}\n  ${focusBorder}\n  ${fontWeight}\n`;\n\nexport const StyledWheelListItem = styled.div`\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('div', {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.FOOTERS.TIMEWHEEL,\n})<{ $readOnlyStyles?: boolean }>`\n  border-top: solid 1px ${({ theme }) => theme.colors.neutral[300]};\n  padding: ${({ theme }) => theme.space.xxs2};\n  color: ${({ theme }) => theme.colors.danger[900]};\n  font-size: ${({ theme }) => theme.fontSizes.microText[200]};\n  text-align: right;\n  background-color: ${({ theme, $readOnlyStyles }) =>\n    $readOnlyStyles ? theme.colors.neutral['050'] : theme.colors.neutral['000']};\n`;\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable prefer-destructuring */\n/* eslint-disable complexity */\n/* eslint-disable max-lines */\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { Grid } from '@elliemae/ds-grid';\nimport { css, styled, type Theme } from '@elliemae/ds-system';\nimport {\n  DSControlledDateTimePickerName,\n  DSControlledDateTimePickerSlots,\n  FORM_DATE_TIME_PICKER_SLOTS,\n} from '../../../constants/index.js';\n\ninterface StyledWheelListItemPropsT {\n  $isTheItemVisuallyInTheCenter?: boolean;\n  $selected?: boolean;\n  $isNotAValidSelection?: boolean;\n  $readOnly?: boolean;\n  $isUnset?: boolean;\n  $isFocusedWheel?: boolean;\n}\n\ninterface StyledTimePickerContainerT {\n  showShadow?: boolean;\n  isControllerOnly: boolean;\n}\n\n// Focus ring \u2014 always brand-700 regardless of validity or readOnly state.\n// Only rendered for the visually centred item when the wheel is focused and the item is not selected.\nconst focusBorder = (props: StyledWheelListItemPropsT & { theme: Theme }) => {\n  const { theme, $isTheItemVisuallyInTheCenter, $selected, $isFocusedWheel } = props;\n  if ($isTheItemVisuallyInTheCenter && !$selected && $isFocusedWheel)\n    return css<StyledWheelListItemPropsT>`\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.colors.brand[700]};\n      }\n    `;\n  return css``;\n};\n\n// Diagonal line for invalid items. Colour is neutral at rest in all states \u2014\n// the focus ring (::after) is the sole blue/brand focus signal.\nconst diagonalLine = (props: StyledWheelListItemPropsT & { theme: Theme }) => {\n  const { theme, $selected, $isNotAValidSelection, $readOnly } = props;\n  if (!$isNotAValidSelection) return css``;\n\n  let beforeBgColor = theme.colors.neutral[500]; // idle not-selected\n  if ($readOnly && !$selected) beforeBgColor = theme.colors.neutral[700]; // readOnly not-selected\n  if ($selected) beforeBgColor = theme.colors.neutral['000']; // selected always white\n\n  return css<StyledWheelListItemPropsT>`\n    cursor: not-allowed;\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: ${beforeBgColor};\n    }\n  `;\n};\n\n// Text colour. On focus the invalid case resolves to brand-700 (not danger-900) for\n// consistency with the universal blue focus ring decision.\nconst fontColor = (props: StyledWheelListItemPropsT & { theme: Theme }) => {\n  const { theme, $selected, $readOnly, $isNotAValidSelection, $isFocusedWheel, $isTheItemVisuallyInTheCenter } = props;\n\n  let color = theme.colors.neutral[700]; // default\n  if ($selected) color = theme.colors.neutral['000']; // selected always white\n\n  // For items that can't receive :focus (meridiem visual layer), drive focused-center colour via props.\n  // Hours/minutes also benefit from this \u2014 :focus below applies the same value.\n  if ($isTheItemVisuallyInTheCenter && $isFocusedWheel && !$selected && !$readOnly) {\n    color = theme.colors.brand[700]; // always brand, matches the blue focus ring\n  }\n\n  // Hover: valid not-selected not-readOnly \u2192 brand-700; all other cases \u2192 no change\n  const hoverColor = !$selected && !$readOnly && !$isNotAValidSelection ? theme.colors.brand[700] : '';\n\n  // Focus (:focus fires on hours/minutes; meridiem relies on the prop-driven path above)\n  // Matches focus ring: always brand when interactive, no change when readOnly or selected\n  const focusColor = !$selected && !$readOnly ? theme.colors.brand[700] : '';\n\n  return css<StyledWheelListItemPropsT>`\n    color: ${color};\n    &:hover {\n      color: ${hoverColor};\n    }\n    &:focus {\n      color: ${focusColor};\n    }\n  `;\n};\n\n// Background colours at rest and on hover.\n// Hover matrix (readOnly always wins):\n//   readOnly  \u2192 selected: neutral-700 | not-selected: neutral-100\n//   invalid   \u2192 selected: danger-950  | not-selected: danger-200 hardcoded to #fffcfc due to contrast failure of danger-200 token\n//   valid     \u2192 selected: brand-800   | not-selected: brand-100\nconst btnBgColorPerStatus = (props: StyledWheelListItemPropsT & { theme: Theme }) => {\n  const { theme, $selected, $isNotAValidSelection, $readOnly, $isFocusedWheel, $isTheItemVisuallyInTheCenter } = props;\n\n  // Rest background: only selected items have a non-transparent background.\n  let bgColor = '';\n  if ($selected) {\n    bgColor = theme.colors.brand[600];\n    if ($isNotAValidSelection) bgColor = theme.colors.danger[900]; // invalid selected: red\n    if ($readOnly) bgColor = theme.colors.neutral[500]; // readOnly always wins: grey\n  }\n\n  // When the wheel column is active (focused), drive the selected centre item to the\n  // same colour as its hover state \u2014 :hover won't fire on keyboard navigation and\n  // meridiem visual items can't receive :focus at all.\n  if ($isTheItemVisuallyInTheCenter && $isFocusedWheel && $selected) {\n    if ($readOnly) bgColor = theme.colors.neutral[700];\n    else if ($isNotAValidSelection) bgColor = theme.colors.danger[950];\n    else bgColor = theme.colors.brand[800];\n  }\n\n  // Hover background \u2014 new spec, clean if/else, no empty-string leaks.\n  let hoverBgColor: string;\n  if ($readOnly) {\n    hoverBgColor = $selected ? theme.colors.neutral[700] : theme.colors.neutral[100];\n  } else if ($isNotAValidSelection) {\n    // TODO: danger[200] and danger[400] are currently the same token and both fail contrast\n    // against common dimsum color combinations. Hardcoded until the theme token is fixed.\n    hoverBgColor = $selected ? theme.colors.danger[950] : '#fffcfc'; // this is hardcoded because danger 200 fails contrast, pending theme token fix\n  } else {\n    hoverBgColor = $selected ? theme.colors.brand[800] : theme.colors.brand[100];\n  }\n\n  return css`\n    background-color: ${bgColor};\n    &:hover {\n      background-color: ${hoverBgColor};\n    }\n  `;\n};\n\nconst cursor = (props: StyledWheelListItemPropsT & { theme: Theme }) => {\n  const cursorStyle = props.$readOnly || props.$isNotAValidSelection ? 'not-allowed' : 'pointer';\n  return css`\n    cursor: ${cursorStyle};\n  `;\n};\n\n// Font weight: selected \u2192 semibold at rest (no hover override needed, it is already semibold).\n// Not selected \u2192 semibold on hover only.\nconst fontWeight = (props: StyledWheelListItemPropsT & { theme: Theme }) => {\n  const { theme, $selected } = props;\n  if ($selected) {\n    return css`\n      font-weight: ${theme.fontWeights.semibold};\n    `;\n  }\n  return css`\n    &:hover {\n      font-weight: ${theme.fontWeights.semibold};\n    }\n  `;\n};\n\nexport const StyledIconTriggerButton = styled(DSButtonV2, {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.PICKER_ICONS.TIMEWHEEL,\n})`\n  color: ${({ theme }) => theme.colors.brand['800']};\n  width: 2rem;\n  height: 2rem;\n`;\n\n// DEV-001: this element's :focus-within is the WCAG 2.4.11 focus indicator for the meridiem\n// column. Adding name/slot only adds attributes \u2014 it must not change the CSS below.\nexport const StyledWheelList = styled('div', {\n  name: DSControlledDateTimePickerName,\n  slot: FORM_DATE_TIME_PICKER_SLOTS.TIMEWHEEL_WHEEL_LIST,\n})`\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', {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.CONTROLLER_COMPONENT.TIMEWHEEL,\n})<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  name: DSControlledDateTimePickerName,\n  slot: FORM_DATE_TIME_PICKER_SLOTS.TIMEWHEEL_WHEELS_LEGEND,\n})`\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  name: DSControlledDateTimePickerName,\n  slot: FORM_DATE_TIME_PICKER_SLOTS.TIMEWHEEL_WHEEL_WRAPPER,\n})<{ $readOnlyStyles?: boolean }>`\n  background-color: ${({ theme, $readOnlyStyles }) =>\n    $readOnlyStyles ? theme.colors.neutral['050'] : theme.colors.neutral['000']};\n  width: 100%;\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['300']};\n    }\n  }\n\n  > *:not(:last-child) {\n    border-right: 1px solid ${({ theme }) => theme.colors.neutral[200]};\n  }\n`;\n\nexport const StyledTimeBtn = styled(Grid, {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.TIMEWHEEL.TIME_BUTTON,\n})<StyledWheelListItemPropsT>`\n  position: relative;\n  height: ${({ theme }) => theme.space.s};\n  width: ${({ theme }) => theme.space.s};\n  border-radius: 50%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  &:focus {\n    outline: none;\n  }\n  ${cursor}\n  ${fontColor}\n  ${diagonalLine}\n  ${btnBgColorPerStatus}\n  ${focusBorder}\n  ${fontWeight}\n`;\n\nexport const StyledWheelListItem = styled('div', {\n  name: DSControlledDateTimePickerName,\n  slot: FORM_DATE_TIME_PICKER_SLOTS.TIMEWHEEL_WHEEL_LIST_ITEM,\n})`\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('div', {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.FOOTERS.TIMEWHEEL,\n})<{ $readOnlyStyles?: boolean }>`\n  border-top: solid 1px ${({ theme }) => theme.colors.neutral[300]};\n  padding: ${({ theme }) => theme.space.xxs2};\n  color: ${({ theme }) => theme.colors.danger[900]};\n  font-size: ${({ theme }) => theme.fontSizes.microText[200]};\n  text-align: right;\n  background-color: ${({ theme, $readOnlyStyles }) =>\n    $readOnlyStyles ? theme.colors.neutral['050'] : theme.colors.neutral['000']};\n`;\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -39,12 +39,12 @@ const TimeWheelContent = React2.memo(() => {
             children: `${hours || "__"}:${minutes || "__"} ${meridiem || "__"}`
           }
         ),
-        /* @__PURE__ */ jsxs(StyledTimePickerWheelsLegend, { children: [
+        /* @__PURE__ */ jsxs(StyledTimePickerWheelsLegend, { getOwnerProps: getProps, children: [
           /* @__PURE__ */ jsx("div", { children: "H" }),
           /* @__PURE__ */ jsx("div", { children: "M" }),
           /* @__PURE__ */ jsx("div", { children: "A" })
         ] }),
-        /* @__PURE__ */ jsxs(StyledTimePickerWheelWrapper, { $readOnlyStyles: readOnly || applyAriaDisabled, children: [
+        /* @__PURE__ */ jsxs(StyledTimePickerWheelWrapper, { $readOnlyStyles: readOnly || applyAriaDisabled, getOwnerProps: getProps, children: [
           /* @__PURE__ */ jsx(HoursList, {}),
           /* @__PURE__ */ jsx(MinutesList, {}),
           /* @__PURE__ */ jsx(MeridiemList, {})

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/Pickers/TimeWheel/TimeWheelContent.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport { ControlledDateTimePickerDatatestid } from '../../../constants/index.js';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';\nimport { HoursList } from './HoursList.js';\nimport { MeridiemList } from './MeridiemList.js';\nimport { MinutesList } from './MinutesList.js';\nimport {\n  StyledTimePickerContainer,\n  StyledTimePickerHead,\n  StyledTimePickerWheelsLegend,\n  StyledTimePickerWheelWrapper,\n} from './Styleds.js';\nimport { TimeWheelFooter } from './TimeWheelFooter.js';\n\nexport const TimeWheelContent = React.memo(() => {\n  const {\n    isControllerOnly,\n    hours,\n    minutes,\n    meridiem,\n    getProps,\n    props: { readOnly, applyAriaDisabled },\n  } = useContext(ControlledDateTimePickerContext);\n\n  return (\n    <StyledTimePickerContainer\n      isControllerOnly={isControllerOnly}\n      data-testid={ControlledDateTimePickerDatatestid.CONTROLLER_COMPONENT.TIMEWHEEL}\n      getOwnerProps={getProps}\n      role=\"region\"\n      aria-label=\"timewheel\"\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 $readOnlyStyles={readOnly || applyAriaDisabled}>\n        <HoursList />\n        <MinutesList />\n        <MeridiemList />\n      </StyledTimePickerWheelWrapper>\n      <TimeWheelFooter />\n    </StyledTimePickerContainer>\n  );\n});\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACgCjB,cAIA,YAJA;AAhCN,OAAOA,UAAS,kBAAkB;AAClC,SAAS,0CAA0C;AACnD,SAAS,uCAAuC;AAChD,SAAS,iBAAiB;AAC1B,SAAS,oBAAoB;AAC7B,SAAS,mBAAmB;AAC5B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,uBAAuB;AAEzB,MAAM,mBAAmBA,OAAM,KAAK,MAAM;AAC/C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,EAAE,UAAU,kBAAkB;AAAA,EACvC,IAAI,WAAW,+BAA+B;AAE9C,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,eAAa,mCAAmC,qBAAqB;AAAA,MACrE,eAAe;AAAA,MACf,MAAK;AAAA,MACL,cAAW;AAAA,MAEX;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,eAAa,mCAAmC,UAAU;AAAA,YAC1D,eAAe;AAAA,YACf,aAAG,SAAS,IAAI,IAAI,WAAW,IAAI,IAAI,YAAY,IAAI;AAAA;AAAA,QAAG;AAAA,QAC5D,qBAAC,gCACC;AAAA,8BAAC,SAAI,eAAC;AAAA,UACN,oBAAC,SAAI,eAAC;AAAA,UACN,oBAAC,SAAI,eAAC;AAAA,WACR;AAAA,QACA,qBAAC,gCAA6B,iBAAiB,YAAY,mBACzD;AAAA,8BAAC,aAAU;AAAA,UACX,oBAAC,eAAY;AAAA,UACb,oBAAC,gBAAa;AAAA,WAChB;AAAA,QACA,oBAAC,mBAAgB;AAAA;AAAA;AAAA,EACnB;AAEJ,CAAC;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport { ControlledDateTimePickerDatatestid } from '../../../constants/index.js';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';\nimport { HoursList } from './HoursList.js';\nimport { MeridiemList } from './MeridiemList.js';\nimport { MinutesList } from './MinutesList.js';\nimport {\n  StyledTimePickerContainer,\n  StyledTimePickerHead,\n  StyledTimePickerWheelsLegend,\n  StyledTimePickerWheelWrapper,\n} from './Styleds.js';\nimport { TimeWheelFooter } from './TimeWheelFooter.js';\n\nexport const TimeWheelContent = React.memo(() => {\n  const {\n    isControllerOnly,\n    hours,\n    minutes,\n    meridiem,\n    getProps,\n    props: { readOnly, applyAriaDisabled },\n  } = useContext(ControlledDateTimePickerContext);\n\n  return (\n    <StyledTimePickerContainer\n      isControllerOnly={isControllerOnly}\n      data-testid={ControlledDateTimePickerDatatestid.CONTROLLER_COMPONENT.TIMEWHEEL}\n      getOwnerProps={getProps}\n      role=\"region\"\n      aria-label=\"timewheel\"\n    >\n      <StyledTimePickerHead\n        data-testid={ControlledDateTimePickerDatatestid.TIMEWHEEL.HEADER_LABEL}\n        getOwnerProps={getProps}\n      >{`${hours || '__'}:${minutes || '__'} ${meridiem || '__'}`}</StyledTimePickerHead>\n      <StyledTimePickerWheelsLegend getOwnerProps={getProps}>\n        <div>H</div>\n        <div>M</div>\n        <div>A</div>\n      </StyledTimePickerWheelsLegend>\n      <StyledTimePickerWheelWrapper $readOnlyStyles={readOnly || applyAriaDisabled} getOwnerProps={getProps}>\n        <HoursList />\n        <MinutesList />\n        <MeridiemList />\n      </StyledTimePickerWheelWrapper>\n      <TimeWheelFooter />\n    </StyledTimePickerContainer>\n  );\n});\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACgCjB,cAIA,YAJA;AAhCN,OAAOA,UAAS,kBAAkB;AAClC,SAAS,0CAA0C;AACnD,SAAS,uCAAuC;AAChD,SAAS,iBAAiB;AAC1B,SAAS,oBAAoB;AAC7B,SAAS,mBAAmB;AAC5B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,uBAAuB;AAEzB,MAAM,mBAAmBA,OAAM,KAAK,MAAM;AAC/C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,EAAE,UAAU,kBAAkB;AAAA,EACvC,IAAI,WAAW,+BAA+B;AAE9C,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,eAAa,mCAAmC,qBAAqB;AAAA,MACrE,eAAe;AAAA,MACf,MAAK;AAAA,MACL,cAAW;AAAA,MAEX;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,eAAa,mCAAmC,UAAU;AAAA,YAC1D,eAAe;AAAA,YACf,aAAG,SAAS,IAAI,IAAI,WAAW,IAAI,IAAI,YAAY,IAAI;AAAA;AAAA,QAAG;AAAA,QAC5D,qBAAC,gCAA6B,eAAe,UAC3C;AAAA,8BAAC,SAAI,eAAC;AAAA,UACN,oBAAC,SAAI,eAAC;AAAA,UACN,oBAAC,SAAI,eAAC;AAAA,WACR;AAAA,QACA,qBAAC,gCAA6B,iBAAiB,YAAY,mBAAmB,eAAe,UAC3F;AAAA,8BAAC,aAAU;AAAA,UACX,oBAAC,eAAY;AAAA,UACb,oBAAC,gBAAa;AAAA,WAChB;AAAA,QACA,oBAAC,mBAAgB;AAAA;AAAA;AAAA,EACnB;AAEJ,CAAC;",
   "names": ["React"]
 }

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

@@ -15,14 +15,15 @@ const usePopperTriggerLogic = () => {
   const [referenceElement, setReferenceElement] = useState(null);
   const closeTimePicker = useCallback(() => {
     setShowTimePicker(false);
-    onPickerClose();
-  }, [onPickerClose]);
+    if (!isWithCalendarToo) onPickerClose();
+  }, [isWithCalendarToo, onPickerClose]);
   const handleToggleTimePicker = useCallback(() => {
     if (disabled) return;
     setShowTimePicker((oldShowCalendar) => {
+      if (isWithCalendarToo) return !oldShowCalendar;
       if (!oldShowCalendar) {
         onPickerOpen();
-        if (!isWithCalendarToo) trackFocusTimewheelCurrHour();
+        trackFocusTimewheelCurrHour();
       } else onPickerClose();
       return !oldShowCalendar;
     });

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/Pickers/TimeWheel/usePopperTriggerLogic.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useState, useCallback, useMemo, useContext } from 'react';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';\n\ninterface PopperTriggerLogicT {\n  referenceElement: HTMLButtonElement | null;\n  showTimePicker: boolean;\n  closeTimePicker: () => void;\n  setShowTimePicker: TypescriptHelpersT.StateSetter<boolean>;\n  handleToggleTimePicker: () => void;\n  handleSetTriggerRef: (instance: HTMLButtonElement) => void;\n  handleMenuWrapperKeyDown: (e: React.KeyboardEvent<HTMLElement>) => void;\n}\nexport const usePopperTriggerLogic = (): PopperTriggerLogicT => {\n  const {\n    pickerButtonRef,\n    props: { onPickerClose, onPickerOpen, disabled },\n    isWithCalendarToo,\n    trackFocusTimewheelCurrHour,\n    trackFocusPicker,\n    latestInteractionRegion,\n    currFocusDescriber,\n  } = useContext(ControlledDateTimePickerContext);\n  const [showTimePicker, setShowTimePicker] = useState(false);\n  const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);\n  const closeTimePicker = useCallback(() => {\n    setShowTimePicker(false);\n    onPickerClose();\n  }, [onPickerClose]);\n  const handleToggleTimePicker = useCallback(() => {\n    if (disabled) return;\n    setShowTimePicker((oldShowCalendar) => {\n      if (!oldShowCalendar) {\n        onPickerOpen();\n        if (!isWithCalendarToo) trackFocusTimewheelCurrHour();\n      } else onPickerClose();\n      return !oldShowCalendar;\n    });\n  }, [disabled, isWithCalendarToo, onPickerClose, onPickerOpen, trackFocusTimewheelCurrHour]);\n\n  const handleSetTriggerRef = useCallback(\n    (newRef: HTMLButtonElement) => {\n      pickerButtonRef.current = newRef;\n      setReferenceElement(newRef);\n\n      if (latestInteractionRegion === 'picker-icon' && currFocusDescriber === 'time-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        closeTimePicker();\n        trackFocusPicker();\n      }\n    },\n    [closeTimePicker, trackFocusPicker],\n  );\n  return useMemo(\n    () => ({\n      referenceElement,\n      showTimePicker,\n      setShowTimePicker,\n      handleToggleTimePicker,\n      handleSetTriggerRef,\n      handleMenuWrapperKeyDown,\n      closeTimePicker,\n    }),\n    [\n      closeTimePicker,\n      handleMenuWrapperKeyDown,\n      handleSetTriggerRef,\n      handleToggleTimePicker,\n      referenceElement,\n      showTimePicker,\n    ],\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,UAAU,aAAa,SAAS,kBAAkB;AAE3D,SAAS,uCAAuC;AAWzC,MAAM,wBAAwB,MAA2B;AAC9D,QAAM;AAAA,IACJ;AAAA,IACA,OAAO,EAAE,eAAe,cAAc,SAAS;AAAA,IAC/C;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,+BAA+B;AAC9C,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAS,KAAK;AAC1D,QAAM,CAAC,kBAAkB,mBAAmB,IAAI,SAAmC,IAAI;AACvF,QAAM,kBAAkB,YAAY,MAAM;AACxC,sBAAkB,KAAK;AACvB,kBAAc;AAAA,EAChB,GAAG,CAAC,aAAa,CAAC;AAClB,QAAM,yBAAyB,YAAY,MAAM;AAC/C,QAAI,SAAU;AACd,sBAAkB,CAAC,oBAAoB;AACrC,UAAI,CAAC,iBAAiB;AACpB,qBAAa;AACb,YAAI,CAAC,kBAAmB,6BAA4B;AAAA,MACtD,MAAO,eAAc;AACrB,aAAO,CAAC;AAAA,IACV,CAAC;AAAA,EACH,GAAG,CAAC,UAAU,mBAAmB,eAAe,cAAc,2BAA2B,CAAC;AAE1F,QAAM,sBAAsB;AAAA,IAC1B,CAAC,WAA8B;AAC7B,sBAAgB,UAAU;AAC1B,0BAAoB,MAAM;AAE1B,UAAI,4BAA4B,iBAAiB,uBAAuB,mBAAoB,SAAQ,MAAM;AAAA,IAC5G;AAAA,IACA,CAAC,oBAAoB,yBAAyB,eAAe;AAAA,EAC/D;AACA,QAAM,2BAA2B;AAAA,IAC/B,CAAC,MAAwC;AACvC,YAAM,EAAE,IAAI,IAAI;AAChB,UAAI,QAAQ,UAAU;AACpB,wBAAgB;AAChB,yBAAiB;AAAA,MACnB;AAAA,IACF;AAAA,IACA,CAAC,iBAAiB,gBAAgB;AAAA,EACpC;AACA,SAAO;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useState, useCallback, useMemo, useContext } from 'react';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';\n\ninterface PopperTriggerLogicT {\n  referenceElement: HTMLButtonElement | null;\n  showTimePicker: boolean;\n  closeTimePicker: () => void;\n  setShowTimePicker: TypescriptHelpersT.StateSetter<boolean>;\n  handleToggleTimePicker: () => void;\n  handleSetTriggerRef: (instance: HTMLButtonElement) => void;\n  handleMenuWrapperKeyDown: (e: React.KeyboardEvent<HTMLElement>) => void;\n}\nexport const usePopperTriggerLogic = (): PopperTriggerLogicT => {\n  const {\n    pickerButtonRef,\n    props: { onPickerClose, onPickerOpen, disabled },\n    isWithCalendarToo,\n    trackFocusTimewheelCurrHour,\n    trackFocusPicker,\n    latestInteractionRegion,\n    currFocusDescriber,\n  } = useContext(ControlledDateTimePickerContext);\n  const [showTimePicker, setShowTimePicker] = useState(false);\n  const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);\n  // Mirror of the guard in `Calendar/usePopperTriggerLogic.tsx` \u2014 see the comment there. The flag\n  // already gated the focus tracking below; it now gates the callbacks too.\n  const closeTimePicker = useCallback(() => {\n    setShowTimePicker(false);\n    if (!isWithCalendarToo) onPickerClose();\n  }, [isWithCalendarToo, onPickerClose]);\n  const handleToggleTimePicker = useCallback(() => {\n    if (disabled) return;\n    setShowTimePicker((oldShowCalendar) => {\n      if (isWithCalendarToo) return !oldShowCalendar;\n      if (!oldShowCalendar) {\n        onPickerOpen();\n        trackFocusTimewheelCurrHour();\n      } else onPickerClose();\n      return !oldShowCalendar;\n    });\n  }, [disabled, isWithCalendarToo, onPickerClose, onPickerOpen, trackFocusTimewheelCurrHour]);\n\n  const handleSetTriggerRef = useCallback(\n    (newRef: HTMLButtonElement) => {\n      pickerButtonRef.current = newRef;\n      setReferenceElement(newRef);\n\n      if (latestInteractionRegion === 'picker-icon' && currFocusDescriber === 'time-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        closeTimePicker();\n        trackFocusPicker();\n      }\n    },\n    [closeTimePicker, trackFocusPicker],\n  );\n  return useMemo(\n    () => ({\n      referenceElement,\n      showTimePicker,\n      setShowTimePicker,\n      handleToggleTimePicker,\n      handleSetTriggerRef,\n      handleMenuWrapperKeyDown,\n      closeTimePicker,\n    }),\n    [\n      closeTimePicker,\n      handleMenuWrapperKeyDown,\n      handleSetTriggerRef,\n      handleToggleTimePicker,\n      referenceElement,\n      showTimePicker,\n    ],\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,UAAU,aAAa,SAAS,kBAAkB;AAE3D,SAAS,uCAAuC;AAWzC,MAAM,wBAAwB,MAA2B;AAC9D,QAAM;AAAA,IACJ;AAAA,IACA,OAAO,EAAE,eAAe,cAAc,SAAS;AAAA,IAC/C;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,+BAA+B;AAC9C,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAS,KAAK;AAC1D,QAAM,CAAC,kBAAkB,mBAAmB,IAAI,SAAmC,IAAI;AAGvF,QAAM,kBAAkB,YAAY,MAAM;AACxC,sBAAkB,KAAK;AACvB,QAAI,CAAC,kBAAmB,eAAc;AAAA,EACxC,GAAG,CAAC,mBAAmB,aAAa,CAAC;AACrC,QAAM,yBAAyB,YAAY,MAAM;AAC/C,QAAI,SAAU;AACd,sBAAkB,CAAC,oBAAoB;AACrC,UAAI,kBAAmB,QAAO,CAAC;AAC/B,UAAI,CAAC,iBAAiB;AACpB,qBAAa;AACb,oCAA4B;AAAA,MAC9B,MAAO,eAAc;AACrB,aAAO,CAAC;AAAA,IACV,CAAC;AAAA,EACH,GAAG,CAAC,UAAU,mBAAmB,eAAe,cAAc,2BAA2B,CAAC;AAE1F,QAAM,sBAAsB;AAAA,IAC1B,CAAC,WAA8B;AAC7B,sBAAgB,UAAU;AAC1B,0BAAoB,MAAM;AAE1B,UAAI,4BAA4B,iBAAiB,uBAAuB,mBAAoB,SAAQ,MAAM;AAAA,IAC5G;AAAA,IACA,CAAC,oBAAoB,yBAAyB,eAAe;AAAA,EAC/D;AACA,QAAM,2BAA2B;AAAA,IAC/B,CAAC,MAAwC;AACvC,YAAM,EAAE,IAAI,IAAI;AAChB,UAAI,QAAQ,UAAU;AACpB,wBAAgB;AAChB,yBAAiB;AAAA,MACnB;AAAA,IACF;AAAA,IACA,CAAC,iBAAiB,gBAAgB;AAAA,EACpC;AACA,SAAO;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;",
   "names": []
 }