@elliemae/ds-form-date-time-picker 3.70.0-next.47 → 3.70.0-next.49

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/dist/cjs/parts/Pickers/TimeWheel/HoursList.js +4 -4
  2. package/dist/cjs/parts/Pickers/TimeWheel/HoursList.js.map +2 -2
  3. package/dist/cjs/parts/Pickers/TimeWheel/MeridiemList.js +4 -4
  4. package/dist/cjs/parts/Pickers/TimeWheel/MeridiemList.js.map +2 -2
  5. package/dist/cjs/parts/Pickers/TimeWheel/MinutesList.js +4 -4
  6. package/dist/cjs/parts/Pickers/TimeWheel/MinutesList.js.map +2 -2
  7. package/dist/esm/parts/Pickers/TimeWheel/HoursList.js +4 -4
  8. package/dist/esm/parts/Pickers/TimeWheel/HoursList.js.map +2 -2
  9. package/dist/esm/parts/Pickers/TimeWheel/MeridiemList.js +4 -4
  10. package/dist/esm/parts/Pickers/TimeWheel/MeridiemList.js.map +2 -2
  11. package/dist/esm/parts/Pickers/TimeWheel/MinutesList.js +4 -4
  12. package/dist/esm/parts/Pickers/TimeWheel/MinutesList.js.map +2 -2
  13. package/package.json +10 -10
package/dist/cjs/parts/Pickers/TimeWheel/HoursList.js CHANGED
@@ -97,8 +97,8 @@ const HoursList = () => {
97
97
  onClick: handlePrevHour,
98
98
  innerRef: prevHourBtnRef,
99
99
  "data-testid": import_constants.ControlledDateTimePickerDatatestid.TIMEWHEEL.PREV_HOUR,
100
- "aria-disabled": readOnly || applyAriaDisabled,
101
- applyAriaDisabled: applyAriaDisabled || readOnly,
100
+ applyAriaDisabled,
101
+ readOnly,
102
102
  getOwnerProps: getProps,
103
103
  tabIndex: -1,
104
104
  type: "button",
@@ -158,8 +158,8 @@ const HoursList = () => {
158
158
  innerRef: nextHourBtnRef,
159
159
  tabIndex: -1,
160
160
  "data-testid": import_constants.ControlledDateTimePickerDatatestid.TIMEWHEEL.NEXT_HOUR,
161
- "aria-disabled": readOnly || applyAriaDisabled,
162
- applyAriaDisabled: applyAriaDisabled || readOnly,
161
+ applyAriaDisabled,
162
+ readOnly,
163
163
  getOwnerProps: getProps,
164
164
  type: "button",
165
165
  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.ChevronSmallDown, { color: arrowColor })
package/dist/cjs/parts/Pickers/TimeWheel/HoursList.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../src/parts/Pickers/TimeWheel/HoursList.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["/* 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 // DSButtonV2 internally computes aria-disabled={applyAriaDisabled || disabled} and overrides any explicit prop.\n // Kept here as double safety and explicit documentation of intent.\n aria-disabled={readOnly || applyAriaDisabled}\n applyAriaDisabled={applyAriaDisabled || 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 // DSButtonV2 internally computes aria-disabled={applyAriaDisabled || disabled} and overrides any explicit prop.\n // Kept here as double safety and explicit documentation of intent.\n aria-disabled={readOnly || applyAriaDisabled}\n applyAriaDisabled={applyAriaDisabled || readOnly}\n getOwnerProps={getProps}\n type=\"button\"\n >\n <ChevronSmallDown color={arrowColor} />\n </StyledWheelChangeTimeBtn>\n </StyledWheelListItem>\n </StyledWheelList>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["/* 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", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": "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",
6
6
  "names": []
7
7
  }
package/dist/cjs/parts/Pickers/TimeWheel/MeridiemList.js CHANGED
@@ -136,8 +136,8 @@ const MeridiemVisualLayer = ({ isFocusedWheel }) => {
136
136
  innerRef: prevMeridiemBtnRef,
137
137
  tabIndex: -1,
138
138
  type: "button",
139
- "aria-disabled": readOnly || applyAriaDisabled,
140
- applyAriaDisabled: applyAriaDisabled || readOnly,
139
+ applyAriaDisabled,
140
+ readOnly,
141
141
  getOwnerProps: getProps,
142
142
  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.ChevronSmallUp, { color: arrowColor })
143
143
  }
@@ -194,8 +194,8 @@ const MeridiemVisualLayer = ({ isFocusedWheel }) => {
194
194
  innerRef: nextMeridiemBtnRef,
195
195
  tabIndex: -1,
196
196
  type: "button",
197
- "aria-disabled": readOnly || applyAriaDisabled,
198
- applyAriaDisabled: applyAriaDisabled || readOnly,
197
+ applyAriaDisabled,
198
+ readOnly,
199
199
  getOwnerProps: getProps,
200
200
  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.ChevronSmallDown, { color: arrowColor })
201
201
  }
package/dist/cjs/parts/Pickers/TimeWheel/MeridiemList.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../src/parts/Pickers/TimeWheel/MeridiemList.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["/* 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 // DSButtonV2 internally computes aria-disabled={applyAriaDisabled || disabled} and overrides any explicit prop.\n // Kept here as double safety and explicit documentation of intent.\n aria-disabled={readOnly || applyAriaDisabled}\n applyAriaDisabled={applyAriaDisabled || 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 // DSButtonV2 internally computes aria-disabled={applyAriaDisabled || disabled} and overrides any explicit prop.\n // Kept here as double safety and explicit documentation of intent.\n aria-disabled={readOnly || applyAriaDisabled}\n applyAriaDisabled={applyAriaDisabled || 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", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD+DnB;AA7DJ,sBAAgE;AAChE,mBAAyD;AACzD,uBAAmD;AACnD,yCAAgD;AAChD,qBAA8F;AAC9F,8BAAiC;AAEjC,MAAM,cAAmC;AAAA,EACvC,UAAU;AAAA,EACV,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,MAAM;AAAA,EACN,YAAY;AAAA,EACZ,QAAQ;AAAA,EACR,eAAe;AACjB;AASA,MAAM,oBAAoB,MAAmB;AAC3C,QAAM,EAAE,cAAc,4BAA4B,QAAI,yBAAW,wCAAgB;AACjF,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,EAAE,UAAU,kBAAkB;AAAA,EACvC,QAAI,yBAAW,kEAA+B;AAE9C,QAAM,cAAc,CAAC,gBAAgB,iBAAiB;AACtD,QAAM,OAAO,GAAG,WAAW;AAC3B,QAAM,OAAO,GAAG,WAAW;AAC3B,QAAM,mBAAmB,GAAG,SAAS,IAAI,IAAI,WAAW,IAAI;AAC5D,QAAM,2BAA2B,cAC7B,kBAAkB,GAAG,gBAAgB,KAAK,IAC1C,kBAAkB,GAAG,gBAAgB,KAAK;AAE9C,QAAM,uBAAmB;AAAA,IACvB,CAAC,mBAAmC;AAClC,iBAAW,MAAM;AACf,2BAAmB,UAAU;AAC7B,YAAI,4BAA4B,eAAe,uBAAuB;AACpE,0BAAgB,QAAQ;AAAA,MAC5B,CAAC;AAAA,IACH;AAAA,IACA,CAAC,oBAAoB,yBAAyB,kBAAkB;AAAA,EAClE;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,cAAW;AAAA,MACX,oBAAiB;AAAA,MACjB,iBAAe,YAAY;AAAA,MAC3B,gBAAc;AAAA,MACd,yBAAuB,cAAc,OAAO;AAAA,MAC5C,UAAU;AAAA,MACV,WAAW;AAAA,MACX,KAAK;AAAA,MACL,OAAO;AAAA,MACP,eAAa,oDAAmC,UAAU;AAAA,MAE1D;AAAA,oDAAC,SAAI,MAAK,UAAS,IAAI,MAAM,iBAAe,aAAa,MAAM,gBAE/D;AAAA,QACA,4CAAC,SAAI,MAAK,UAAS,IAAI,MAAM,iBAAe,aAAa,MAAM,gBAE/D;AAAA;AAAA;AAAA,EACF;AAEJ;AASA,MAAM,sBAAsB,CAAC,EAAE,eAAe,MAAgD;AAC5F,QAAM,EAAE,cAAc,iCAAiC,QAAI,yBAAW,wCAAgB;AACtF,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,EAAE,UAAU,kBAAkB;AAAA,EACvC,QAAI,yBAAW,kEAA+B;AAE9C,QAAM,cAAc,CAAC,gBAAgB,iBAAiB;AACtD,QAAM,cAAc,iBAAiB;AACrC,QAAM,mBAAmB,GAAG,SAAS,IAAI,IAAI,WAAW,IAAI;AAC5D,QAAM,gBAAgB,kBAAkB,GAAG,gBAAgB,KAAK;AAChE,QAAM,gBAAgB,kBAAkB,GAAG,gBAAgB,KAAK;AAEhE,QAAM,oBAAoB,YAAY;AACtC,QAAM,aAAa,CAAC,oBAAqB,CAAC,iBAAiB,KAAK,IAA2B;AAE3F,SACE,4EACE;AAAA,gDAAC,sCACC;AAAA,MAAC;AAAA;AAAA,QACC,cAAW;AAAA,QACX,eAAa,oDAAmC,UAAU;AAAA,QAC1D,YAAW;AAAA,QACX,MAAK;AAAA,QACL,SAAS,CAAC,MAAoF;AAC5F,2CAAiC,MAAM,CAAC;AACxC,6BAAmB,SAAS,MAAM;AAAA,QACpC;AAAA,QACA,UAAU;AAAA,QACV,UAAU;AAAA,QACV,MAAK;AAAA,QAGL,iBAAe,YAAY;AAAA,QAC3B,mBAAmB,qBAAqB;AAAA,QACxC,eAAe;AAAA,QAEf,sDAAC,kCAAe,OAAO,YAAY;AAAA;AAAA,IACrC,GACF;AAAA,IACC,iBAAiB,QAAQ,iBAAiB,KAAK,4CAAC,sCAAoB,eAAY,QAAO,IAAK;AAAA,IAC7F,4CAAC,sCAAoB,eAAY,QAC/B;AAAA,MAAC;AAAA;AAAA,QACC,+BAA+B;AAAA,QAC/B,uBAAuB;AAAA,QACvB,WAAW,eAAe,CAAC,CAAC;AAAA,QAC5B,UAAU,CAAC;AAAA,QACX,iBAAiB;AAAA,QACjB,eACE,oDAAmC,UACjC,cAAc,oCAAoC,yBACpD;AAAA,QAEF,SAAS,CAAC,MAA8E;AACtF,2CAAiC,MAAM,CAAC;AACxC,6BAAmB,SAAS,MAAM;AAAA,QACpC;AAAA,QACA,eAAe;AAAA,QACf,WAAW,YAAY;AAAA,QACxB;AAAA;AAAA,IAED,GACF;AAAA,IACA,4CAAC,sCAAoB,eAAY,QAC/B;AAAA,MAAC;AAAA;AAAA,QACC,+BAA+B;AAAA,QAC/B,WAAW,eAAe,CAAC,CAAC;AAAA,QAC5B,uBAAuB;AAAA,QACvB,UAAU,CAAC;AAAA,QACX,iBAAiB;AAAA,QACjB,eACE,oDAAmC,UACjC,cAAc,oCAAoC,yBACpD;AAAA,QAEF,SAAS,CAAC,MAA8E;AACtF,2CAAiC,MAAM,CAAC;AACxC,6BAAmB,SAAS,MAAM;AAAA,QACpC;AAAA,QACA,eAAe;AAAA,QACf,WAAW,YAAY;AAAA,QACxB;AAAA;AAAA,IAED,GACF;AAAA,IACC,iBAAiB,OAAO,4CAAC,sCAAoB,eAAY,QAAO,IAAK;AAAA,IACtE,4CAAC,sCACC;AAAA,MAAC;AAAA;AAAA,QACC,cAAW;AAAA,QACX,eAAa,oDAAmC,UAAU;AAAA,QAC1D,YAAW;AAAA,QACX,MAAK;AAAA,QACL,SAAS,CAAC,MAAoF;AAC5F,2CAAiC,MAAM,CAAC;AACxC,6BAAmB,SAAS,MAAM;AAAA,QACpC;AAAA,QACA,UAAU;AAAA,QACV,UAAU;AAAA,QACV,MAAK;AAAA,QAGL,iBAAe,YAAY;AAAA,QAC3B,mBAAmB,qBAAqB;AAAA,QACxC,eAAe;AAAA,QAEf,sDAAC,oCAAiB,OAAO,YAAY;AAAA;AAAA,IACvC,GACF;AAAA,KACF;AAEJ;AAEO,MAAM,eAAe,MAAmB;AAC7C,QAAM,CAAC,gBAAgB,iBAAiB,QAAI,uBAAS,KAAK;AAC1D,QAAM,EAAE,gCAAgC,QAAI,yBAAW,kEAA+B;AAEtF,QAAM,uBAAmB,0BAAY,MAAM;AACzC,sBAAkB,IAAI;AACtB,oCAAgC;AAAA,EAClC,GAAG,CAAC,mBAAmB,+BAA+B,CAAC;AAEvD,QAAM,sBAAkB;AAAA,IACtB,CAAC,MAAwC;AACvC,UAAI,CAAC,EAAE,cAAc,SAAS,EAAE,aAAqB,EAAG,mBAAkB,KAAK;AAAA,IACjF;AAAA,IACA,CAAC,iBAAiB;AAAA,EACpB;AAEA,SACE,6CAAC,kCAAgB,SAAS,kBAAkB,QAAQ,iBAClD;AAAA,gDAAC,qBAAkB;AAAA,IACnB,4CAAC,uBAAoB,gBAAgC;AAAA,KACvD;AAEJ;AAEA,IAAO,uBAAQ;",
4
+ "sourcesContent": ["/* 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", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": "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",
6
6
  "names": []
7
7
  }
package/dist/cjs/parts/Pickers/TimeWheel/MinutesList.js CHANGED
@@ -98,8 +98,8 @@ const MinutesList = () => {
98
98
  innerRef: prevMinutesBtnRef,
99
99
  tabIndex: -1,
100
100
  "data-testid": import_constants.ControlledDateTimePickerDatatestid.TIMEWHEEL.PREV_MINUTE,
101
- "aria-disabled": readOnly || applyAriaDisabled,
102
- applyAriaDisabled: applyAriaDisabled || readOnly,
101
+ applyAriaDisabled,
102
+ readOnly,
103
103
  type: "button",
104
104
  getOwnerProps: getProps,
105
105
  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.ChevronSmallUp, { color: arrowColor })
@@ -158,8 +158,8 @@ const MinutesList = () => {
158
158
  innerRef: nextMinutesBtnRef,
159
159
  "data-testid": import_constants.ControlledDateTimePickerDatatestid.TIMEWHEEL.NEXT_MINUTE,
160
160
  tabIndex: -1,
161
- "aria-disabled": readOnly || applyAriaDisabled,
162
- applyAriaDisabled: applyAriaDisabled || readOnly,
161
+ applyAriaDisabled,
162
+ readOnly,
163
163
  type: "button",
164
164
  getOwnerProps: getProps,
165
165
  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.ChevronSmallDown, { color: arrowColor })
package/dist/cjs/parts/Pickers/TimeWheel/MinutesList.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../src/parts/Pickers/TimeWheel/MinutesList.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["/* 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 // DSButtonV2 internally computes aria-disabled={applyAriaDisabled || disabled} and overrides any explicit prop.\n // Kept here as double safety and explicit documentation of intent.\n aria-disabled={readOnly || applyAriaDisabled}\n applyAriaDisabled={applyAriaDisabled || 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 // DSButtonV2 internally computes aria-disabled={applyAriaDisabled || disabled} and overrides any explicit prop.\n // Kept here as double safety and explicit documentation of intent.\n aria-disabled={readOnly || applyAriaDisabled}\n applyAriaDisabled={applyAriaDisabled || 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", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["/* 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", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": "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",
6
6
  "names": []
7
7
  }
package/dist/esm/parts/Pickers/TimeWheel/HoursList.js CHANGED
@@ -64,8 +64,8 @@ const HoursList = () => {
64
64
  onClick: handlePrevHour,
65
65
  innerRef: prevHourBtnRef,
66
66
  "data-testid": ControlledDateTimePickerDatatestid.TIMEWHEEL.PREV_HOUR,
67
- "aria-disabled": readOnly || applyAriaDisabled,
68
- applyAriaDisabled: applyAriaDisabled || readOnly,
67
+ applyAriaDisabled,
68
+ readOnly,
69
69
  getOwnerProps: getProps,
70
70
  tabIndex: -1,
71
71
  type: "button",
@@ -125,8 +125,8 @@ const HoursList = () => {
125
125
  innerRef: nextHourBtnRef,
126
126
  tabIndex: -1,
127
127
  "data-testid": ControlledDateTimePickerDatatestid.TIMEWHEEL.NEXT_HOUR,
128
- "aria-disabled": readOnly || applyAriaDisabled,
129
- applyAriaDisabled: applyAriaDisabled || readOnly,
128
+ applyAriaDisabled,
129
+ readOnly,
130
130
  getOwnerProps: getProps,
131
131
  type: "button",
132
132
  children: /* @__PURE__ */ jsx(ChevronSmallDown, { color: arrowColor })
package/dist/esm/parts/Pickers/TimeWheel/HoursList.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/Pickers/TimeWheel/HoursList.tsx"],
4
- "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 // DSButtonV2 internally computes aria-disabled={applyAriaDisabled || disabled} and overrides any explicit prop.\n // Kept here as double safety and explicit documentation of intent.\n aria-disabled={readOnly || applyAriaDisabled}\n applyAriaDisabled={applyAriaDisabled || 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 // DSButtonV2 internally computes aria-disabled={applyAriaDisabled || disabled} and overrides any explicit prop.\n // Kept here as double safety and explicit documentation of intent.\n aria-disabled={readOnly || applyAriaDisabled}\n applyAriaDisabled={applyAriaDisabled || readOnly}\n getOwnerProps={getProps}\n type=\"button\"\n >\n <ChevronSmallDown color={arrowColor} />\n </StyledWheelChangeTimeBtn>\n </StyledWheelListItem>\n </StyledWheelList>\n );\n};\n"],
5
- "mappings": "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",
4
+ "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"],
5
+ "mappings": "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",
6
6
  "names": []
7
7
  }
package/dist/esm/parts/Pickers/TimeWheel/MeridiemList.js CHANGED
@@ -102,8 +102,8 @@ const MeridiemVisualLayer = ({ isFocusedWheel }) => {
102
102
  innerRef: prevMeridiemBtnRef,
103
103
  tabIndex: -1,
104
104
  type: "button",
105
- "aria-disabled": readOnly || applyAriaDisabled,
106
- applyAriaDisabled: applyAriaDisabled || readOnly,
105
+ applyAriaDisabled,
106
+ readOnly,
107
107
  getOwnerProps: getProps,
108
108
  children: /* @__PURE__ */ jsx(ChevronSmallUp, { color: arrowColor })
109
109
  }
@@ -160,8 +160,8 @@ const MeridiemVisualLayer = ({ isFocusedWheel }) => {
160
160
  innerRef: nextMeridiemBtnRef,
161
161
  tabIndex: -1,
162
162
  type: "button",
163
- "aria-disabled": readOnly || applyAriaDisabled,
164
- applyAriaDisabled: applyAriaDisabled || readOnly,
163
+ applyAriaDisabled,
164
+ readOnly,
165
165
  getOwnerProps: getProps,
166
166
  children: /* @__PURE__ */ jsx(ChevronSmallDown, { color: arrowColor })
167
167
  }
package/dist/esm/parts/Pickers/TimeWheel/MeridiemList.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/Pickers/TimeWheel/MeridiemList.tsx"],
4
- "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 // DSButtonV2 internally computes aria-disabled={applyAriaDisabled || disabled} and overrides any explicit prop.\n // Kept here as double safety and explicit documentation of intent.\n aria-disabled={readOnly || applyAriaDisabled}\n applyAriaDisabled={applyAriaDisabled || 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 // DSButtonV2 internally computes aria-disabled={applyAriaDisabled || disabled} and overrides any explicit prop.\n // Kept here as double safety and explicit documentation of intent.\n aria-disabled={readOnly || applyAriaDisabled}\n applyAriaDisabled={applyAriaDisabled || 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"],
5
- "mappings": "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",
4
+ "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"],
5
+ "mappings": "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",
6
6
  "names": []
7
7
  }
package/dist/esm/parts/Pickers/TimeWheel/MinutesList.js CHANGED
@@ -64,8 +64,8 @@ const MinutesList = () => {
64
64
  innerRef: prevMinutesBtnRef,
65
65
  tabIndex: -1,
66
66
  "data-testid": ControlledDateTimePickerDatatestid.TIMEWHEEL.PREV_MINUTE,
67
- "aria-disabled": readOnly || applyAriaDisabled,
68
- applyAriaDisabled: applyAriaDisabled || readOnly,
67
+ applyAriaDisabled,
68
+ readOnly,
69
69
  type: "button",
70
70
  getOwnerProps: getProps,
71
71
  children: /* @__PURE__ */ jsx(ChevronSmallUp, { color: arrowColor })
@@ -124,8 +124,8 @@ const MinutesList = () => {
124
124
  innerRef: nextMinutesBtnRef,
125
125
  "data-testid": ControlledDateTimePickerDatatestid.TIMEWHEEL.NEXT_MINUTE,
126
126
  tabIndex: -1,
127
- "aria-disabled": readOnly || applyAriaDisabled,
128
- applyAriaDisabled: applyAriaDisabled || readOnly,
127
+ applyAriaDisabled,
128
+ readOnly,
129
129
  type: "button",
130
130
  getOwnerProps: getProps,
131
131
  children: /* @__PURE__ */ jsx(ChevronSmallDown, { color: arrowColor })
package/dist/esm/parts/Pickers/TimeWheel/MinutesList.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/Pickers/TimeWheel/MinutesList.tsx"],
4
- "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 // DSButtonV2 internally computes aria-disabled={applyAriaDisabled || disabled} and overrides any explicit prop.\n // Kept here as double safety and explicit documentation of intent.\n aria-disabled={readOnly || applyAriaDisabled}\n applyAriaDisabled={applyAriaDisabled || 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 // DSButtonV2 internally computes aria-disabled={applyAriaDisabled || disabled} and overrides any explicit prop.\n // Kept here as double safety and explicit documentation of intent.\n aria-disabled={readOnly || applyAriaDisabled}\n applyAriaDisabled={applyAriaDisabled || 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"],
5
- "mappings": "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",
4
+ "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"],
5
+ "mappings": "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",
6
6
  "names": []
7
7
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elliemae/ds-form-date-time-picker",
3
- "version": "3.70.0-next.47",
3
+ "version": "3.70.0-next.49",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - Controlled Form Date Time Picker",
6
6
  "files": [
@@ -37,13 +37,13 @@
37
37
  },
38
38
  "dependencies": {
39
39
  "uid": "^2.0.2",
40
- "@elliemae/ds-button-v2": "3.70.0-next.47",
41
- "@elliemae/ds-props-helpers": "3.70.0-next.47",
42
- "@elliemae/ds-icons": "3.70.0-next.47",
43
- "@elliemae/ds-grid": "3.70.0-next.47",
44
- "@elliemae/ds-typescript-helpers": "3.70.0-next.47",
45
- "@elliemae/ds-floating-context": "3.70.0-next.47",
46
- "@elliemae/ds-system": "3.70.0-next.47"
40
+ "@elliemae/ds-floating-context": "3.70.0-next.49",
41
+ "@elliemae/ds-button-v2": "3.70.0-next.49",
42
+ "@elliemae/ds-grid": "3.70.0-next.49",
43
+ "@elliemae/ds-icons": "3.70.0-next.49",
44
+ "@elliemae/ds-system": "3.70.0-next.49",
45
+ "@elliemae/ds-typescript-helpers": "3.70.0-next.49",
46
+ "@elliemae/ds-props-helpers": "3.70.0-next.49"
47
47
  },
48
48
  "devDependencies": {
49
49
  "@elliemae/pui-theme": "~2.13.0",
@@ -51,8 +51,8 @@
51
51
  "jest": "^30.0.0",
52
52
  "styled-components": "~5.3.9",
53
53
  "styled-system": "^5.1.5",
54
- "@elliemae/ds-monorepo-devops": "3.70.0-next.47",
55
- "@elliemae/ds-test-utils": "3.70.0-next.47"
54
+ "@elliemae/ds-test-utils": "3.70.0-next.49",
55
+ "@elliemae/ds-monorepo-devops": "3.70.0-next.49"
56
56
  },
57
57
  "peerDependencies": {
58
58
  "@elliemae/pui-theme": "~2.13.0",