@elliemae/ds-form-date-time-picker 3.62.1 → 3.70.0-alpha.9

package/dist/esm/parts/DateInputs/YYYYInput.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/DateInputs/YYYYInput.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport React, { useCallback } from 'react';\nimport type { ControlledDateTimePickerContextT } from '../../config/useControlledDateTimePicker.js';\nimport { ControlledDateTimePickerDatatestid } from '../../constants/index.js';\nimport type { DSControlledDateTimePickerInternalsT } from '../../sharedTypes.js';\nimport { StyledYearInput } from '../Styleds.js';\nimport { convertToPositiveNumberIfPossible } from '../../utils/numberHelpers.js';\nimport { fillStringWithPlaceHolders } from '../../utils/stringHelpers.js';\nconst regExpNumbers = /^[0-9]+$/;\nconst isInvalidYear = (year: string) => {\n  if (year === '') return false;\n  const numberOnly = regExpNumbers.test(year);\n  return year.length > 4 || !numberOnly || Number.parseInt(year, 10) > 9999;\n};\n\ninterface YYYYInputsPropsT {\n  onChange: DSControlledDateTimePickerInternalsT.OnChangeFunc;\n  onBlur: DSControlledDateTimePickerInternalsT.OnBlurFunc;\n  onFocus: DSControlledDateTimePickerInternalsT.OnFocusFunc;\n  onKeyDown: DSControlledDateTimePickerInternalsT.OnKeyDown;\n  value: string;\n  disabled: boolean;\n  applyAriaDisabled?: boolean;\n  hasError: boolean;\n  contextRef: React.MutableRefObject<HTMLInputElement | null>;\n  tabIndex?: TypescriptHelpersT.WCAGTabIndex;\n  placeholder: string;\n  ariaCurrentValueForInputs: string;\n  isFocused: boolean;\n  getProps: ControlledDateTimePickerContextT['getProps'];\n  readOnly: boolean;\n}\nexport const YYYYInput = React.memo(\n  ({\n    onChange,\n    onBlur,\n    onFocus,\n    onKeyDown,\n    value,\n    disabled,\n    applyAriaDisabled,\n    hasError,\n    placeholder,\n    contextRef,\n    tabIndex,\n    ariaCurrentValueForInputs,\n    isFocused,\n    getProps,\n    readOnly,\n  }: YYYYInputsPropsT): JSX.Element => {\n    const validateOnChange = useCallback(\n      (e: React.ChangeEvent<HTMLInputElement>) => {\n        if (isInvalidYear(e?.currentTarget?.value)) {\n          e.preventDefault();\n          return;\n        }\n        onChange(e);\n      },\n      [onChange],\n    );\n\n    const yearNum = convertToPositiveNumberIfPossible(value);\n\n    return (\n      <StyledYearInput\n        onChange={validateOnChange}\n        onBlur={onBlur}\n        onFocus={onFocus}\n        onKeyDown={onKeyDown}\n        value={value}\n        innerRef={(DomElem: HTMLInputElement) => {\n          (contextRef as React.MutableRefObject<HTMLInputElement>).current = DomElem;\n          if (isFocused) DomElem?.focus?.();\n        }}\n        tabIndex={tabIndex}\n        data-testid={ControlledDateTimePickerDatatestid.DATE_INPUTS.YEAR}\n        placeholder={placeholder}\n        aria-label={`year input field, ${ariaCurrentValueForInputs}`}\n        disabled={disabled}\n        aria-disabled={applyAriaDisabled}\n        aria-invalid={hasError}\n        getOwnerProps={getProps}\n        readOnly={readOnly}\n        role=\"spinbutton\"\n        aria-valuemin={0}\n        aria-valuemax={9999}\n        aria-valuenow={yearNum === -1 ? undefined : yearNum}\n        aria-valuetext={yearNum === -1 ? 'empty' : fillStringWithPlaceHolders(`${yearNum}`, 4, '0')}\n      />\n    );\n  },\n);\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACgEjB;AA/DN,OAAOA,UAAS,mBAAmB;AAEnC,SAAS,0CAA0C;AAEnD,SAAS,uBAAuB;AAChC,SAAS,yCAAyC;AAClD,SAAS,kCAAkC;AAC3C,MAAM,gBAAgB;AACtB,MAAM,gBAAgB,CAAC,SAAiB;AACtC,MAAI,SAAS,GAAI,QAAO;AACxB,QAAM,aAAa,cAAc,KAAK,IAAI;AAC1C,SAAO,KAAK,SAAS,KAAK,CAAC,cAAc,OAAO,SAAS,MAAM,EAAE,IAAI;AACvE;AAmBO,MAAM,YAAYA,OAAM;AAAA,EAC7B,CAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,MAAqC;AACnC,UAAM,mBAAmB;AAAA,MACvB,CAAC,MAA2C;AAC1C,YAAI,cAAc,GAAG,eAAe,KAAK,GAAG;AAC1C,YAAE,eAAe;AACjB;AAAA,QACF;AACA,iBAAS,CAAC;AAAA,MACZ;AAAA,MACA,CAAC,QAAQ;AAAA,IACX;AAEA,UAAM,UAAU,kCAAkC,KAAK;AAEvD,WACE;AAAA,MAAC;AAAA;AAAA,QACC,UAAU;AAAA,QACV;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,UAAU,CAAC,YAA8B;AACvC,UAAC,WAAwD,UAAU;AACnE,cAAI,UAAW,UAAS,QAAQ;AAAA,QAClC;AAAA,QACA;AAAA,QACA,eAAa,mCAAmC,YAAY;AAAA,QAC5D;AAAA,QACA,cAAY,qBAAqB,yBAAyB;AAAA,QAC1D;AAAA,QACA,iBAAe;AAAA,QACf,gBAAc;AAAA,QACd,eAAe;AAAA,QACf;AAAA,QACA,MAAK;AAAA,QACL,iBAAe;AAAA,QACf,iBAAe;AAAA,QACf,iBAAe,YAAY,KAAK,SAAY;AAAA,QAC5C,kBAAgB,YAAY,KAAK,UAAU,2BAA2B,GAAG,OAAO,IAAI,GAAG,GAAG;AAAA;AAAA,IAC5F;AAAA,EAEJ;AACF;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport React, { useCallback } from 'react';\nimport type { ControlledDateTimePickerContextT } from '../../config/useControlledDateTimePicker.js';\nimport { ControlledDateTimePickerDatatestid } from '../../constants/index.js';\nimport type { DSControlledDateTimePickerInternalsT } from '../../sharedTypes.js';\nimport { StyledYearInput } from '../Styleds.js';\nimport { convertToPositiveNumberIfPossible } from '../../utils/numberHelpers.js';\nimport { fillStringWithPlaceHolders } from '../../utils/stringHelpers.js';\nconst regExpNumbers = /^[0-9]+$/;\nconst isInvalidYear = (year: string) => {\n  if (year === '') return false;\n  const numberOnly = regExpNumbers.test(year);\n  return year.length > 4 || !numberOnly || Number.parseInt(year, 10) > 9999;\n};\n\ninterface YYYYInputsPropsT {\n  onChange: DSControlledDateTimePickerInternalsT.OnChangeFunc;\n  onBlur: DSControlledDateTimePickerInternalsT.OnBlurFunc;\n  onFocus: DSControlledDateTimePickerInternalsT.OnFocusFunc;\n  onKeyDown: DSControlledDateTimePickerInternalsT.OnKeyDown;\n  value: string;\n  disabled: boolean;\n  applyAriaDisabled?: boolean;\n  hasError: boolean;\n  contextRef: React.MutableRefObject<HTMLInputElement | null>;\n  tabIndex?: TypescriptHelpersT.WCAGTabIndex;\n  placeholder: string;\n  isFocused: boolean;\n  getProps: ControlledDateTimePickerContextT['getProps'];\n  readOnly: boolean;\n}\nexport const YYYYInput = React.memo(\n  ({\n    onChange,\n    onBlur,\n    onFocus,\n    onKeyDown,\n    value,\n    disabled,\n    applyAriaDisabled,\n    hasError,\n    placeholder,\n    contextRef,\n    tabIndex,\n    isFocused,\n    getProps,\n    readOnly,\n  }: YYYYInputsPropsT): JSX.Element => {\n    const validateOnChange = useCallback(\n      (e: React.ChangeEvent<HTMLInputElement>) => {\n        if (isInvalidYear(e?.currentTarget?.value)) {\n          e.preventDefault();\n          return;\n        }\n        onChange(e);\n      },\n      [onChange],\n    );\n\n    const yearNum = convertToPositiveNumberIfPossible(value);\n\n    return (\n      <StyledYearInput\n        onChange={validateOnChange}\n        onBlur={onBlur}\n        onFocus={onFocus}\n        onKeyDown={onKeyDown}\n        value={value}\n        innerRef={(DomElem: HTMLInputElement) => {\n          (contextRef as React.MutableRefObject<HTMLInputElement>).current = DomElem;\n          if (isFocused) DomElem?.focus?.();\n        }}\n        tabIndex={tabIndex}\n        data-testid={ControlledDateTimePickerDatatestid.DATE_INPUTS.YEAR}\n        placeholder={placeholder}\n        aria-label=\"year\"\n        disabled={disabled}\n        aria-disabled={applyAriaDisabled}\n        aria-invalid={hasError}\n        getOwnerProps={getProps}\n        readOnly={readOnly}\n        role=\"spinbutton\"\n        aria-valuemin={0}\n        aria-valuemax={9999}\n        // when empty, valuenow falls back to the min (not omitted) so VoiceOver honors\n        // aria-valuetext=\"empty\" instead of announcing a computed position percentage\n        aria-valuenow={yearNum === -1 ? 0 : yearNum}\n        aria-valuetext={yearNum === -1 ? 'empty' : fillStringWithPlaceHolders(`${yearNum}`, 4, '0')}\n      />\n    );\n  },\n);\n"],
+  "mappings": "AAAA,YAAY,WAAW;AC8DjB;AA7DN,OAAOA,UAAS,mBAAmB;AAEnC,SAAS,0CAA0C;AAEnD,SAAS,uBAAuB;AAChC,SAAS,yCAAyC;AAClD,SAAS,kCAAkC;AAC3C,MAAM,gBAAgB;AACtB,MAAM,gBAAgB,CAAC,SAAiB;AACtC,MAAI,SAAS,GAAI,QAAO;AACxB,QAAM,aAAa,cAAc,KAAK,IAAI;AAC1C,SAAO,KAAK,SAAS,KAAK,CAAC,cAAc,OAAO,SAAS,MAAM,EAAE,IAAI;AACvE;AAkBO,MAAM,YAAYA,OAAM;AAAA,EAC7B,CAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,MAAqC;AACnC,UAAM,mBAAmB;AAAA,MACvB,CAAC,MAA2C;AAC1C,YAAI,cAAc,GAAG,eAAe,KAAK,GAAG;AAC1C,YAAE,eAAe;AACjB;AAAA,QACF;AACA,iBAAS,CAAC;AAAA,MACZ;AAAA,MACA,CAAC,QAAQ;AAAA,IACX;AAEA,UAAM,UAAU,kCAAkC,KAAK;AAEvD,WACE;AAAA,MAAC;AAAA;AAAA,QACC,UAAU;AAAA,QACV;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,UAAU,CAAC,YAA8B;AACvC,UAAC,WAAwD,UAAU;AACnE,cAAI,UAAW,UAAS,QAAQ;AAAA,QAClC;AAAA,QACA;AAAA,QACA,eAAa,mCAAmC,YAAY;AAAA,QAC5D;AAAA,QACA,cAAW;AAAA,QACX;AAAA,QACA,iBAAe;AAAA,QACf,gBAAc;AAAA,QACd,eAAe;AAAA,QACf;AAAA,QACA,MAAK;AAAA,QACL,iBAAe;AAAA,QACf,iBAAe;AAAA,QAGf,iBAAe,YAAY,KAAK,IAAI;AAAA,QACpC,kBAAgB,YAAY,KAAK,UAAU,2BAA2B,GAAG,OAAO,IAAI,GAAG,GAAG;AAAA;AAAA,IAC5F;AAAA,EAEJ;AACF;",
   "names": ["React"]
 }

package/dist/esm/parts/Pickers/Calendar/CalendarWrapper.js

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
-import { DSPopperJS } from "@elliemae/ds-popperjs";
+import { useFloatingContext, FloatingWrapper } from "@elliemae/ds-floating-context";
 import { styled } from "@elliemae/ds-system";
 import { useContext } from "react";
 import {
@@ -11,23 +11,35 @@ import {
 import { ControlledDateTimePickerContext } from "../../../ControlledDateTimePickerCTX.js";
 import { CalendarContent } from "./CalendarContent.js";
 import { CalendarContext } from "./CalendarContext.js";
-const StyledPopper = styled(DSPopperJS, {
+const StyledFloatingWrapper = styled(FloatingWrapper, {
   name: DSControlledDateTimePickerName,
   slot: DSControlledDateTimePickerSlots.CONTEXTUAL_MENU.CALENDAR
 })``;
 const CalendarWrapper = () => {
   const { isControllerOnly, getProps } = useContext(ControlledDateTimePickerContext);
   const { referenceElement, closeCalendar } = useContext(CalendarContext);
+  const {
+    refs,
+    floatingStyles,
+    context,
+    isOpen: isFloatingOpen
+  } = useFloatingContext({
+    externallyControlledIsOpen: !isControllerOnly && !!referenceElement,
+    externalReferenceElement: referenceElement,
+    withoutAnimation: true,
+    customOffset: [0, 0],
+    onClickOutside: isControllerOnly ? void 0 : closeCalendar
+  });
   if (isControllerOnly) return /* @__PURE__ */ jsx(CalendarContent, {});
   if (!referenceElement) return null;
   return /* @__PURE__ */ jsx(
-    StyledPopper,
+    StyledFloatingWrapper,
     {
-      showPopover: true,
+      innerRef: refs.setFloating,
+      isOpen: isFloatingOpen,
+      floatingStyles,
+      context,
       "data-testid": ControlledDateTimePickerDatatestid.CONTEXTUAL_MENU.CALENDAR,
-      referenceElement,
-      withoutArrow: true,
-      onClickOutside: closeCalendar,
       getOwnerProps: getProps,
       "aria-label": "calendar header",
       role: "dialog",

package/dist/esm/parts/Pickers/Calendar/CalendarWrapper.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/Pickers/Calendar/CalendarWrapper.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { DSPopperJS } from '@elliemae/ds-popperjs';\nimport { styled } from '@elliemae/ds-system';\nimport { useContext } from 'react';\nimport {\n  ControlledDateTimePickerDatatestid,\n  DSControlledDateTimePickerName,\n  DSControlledDateTimePickerSlots,\n} from '../../../constants/index.js';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';\nimport { CalendarContent } from './CalendarContent.js';\nimport { CalendarContext } from './CalendarContext.js';\nconst StyledPopper = styled(DSPopperJS, {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.CONTEXTUAL_MENU.CALENDAR,\n})``;\nexport const CalendarWrapper = (): JSX.Element | null => {\n  const { isControllerOnly, getProps } = useContext(ControlledDateTimePickerContext);\n  const { referenceElement, closeCalendar } = useContext(CalendarContext);\n\n  if (isControllerOnly) return <CalendarContent />;\n  if (!referenceElement) return null;\n  return (\n    <StyledPopper\n      showPopover\n      data-testid={ControlledDateTimePickerDatatestid.CONTEXTUAL_MENU.CALENDAR}\n      referenceElement={referenceElement}\n      withoutArrow\n      onClickOutside={closeCalendar}\n      getOwnerProps={getProps}\n      aria-label=\"calendar header\"\n      role=\"dialog\"\n    >\n      <CalendarContent />\n    </StyledPopper>\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACmBQ;AAnB/B,SAAS,kBAAkB;AAC3B,SAAS,cAAc;AACvB,SAAS,kBAAkB;AAC3B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,uCAAuC;AAChD,SAAS,uBAAuB;AAChC,SAAS,uBAAuB;AAChC,MAAM,eAAe,OAAO,YAAY;AAAA,EACtC,MAAM;AAAA,EACN,MAAM,gCAAgC,gBAAgB;AACxD,CAAC;AACM,MAAM,kBAAkB,MAA0B;AACvD,QAAM,EAAE,kBAAkB,SAAS,IAAI,WAAW,+BAA+B;AACjF,QAAM,EAAE,kBAAkB,cAAc,IAAI,WAAW,eAAe;AAEtE,MAAI,iBAAkB,QAAO,oBAAC,mBAAgB;AAC9C,MAAI,CAAC,iBAAkB,QAAO;AAC9B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAW;AAAA,MACX,eAAa,mCAAmC,gBAAgB;AAAA,MAChE;AAAA,MACA,cAAY;AAAA,MACZ,gBAAgB;AAAA,MAChB,eAAe;AAAA,MACf,cAAW;AAAA,MACX,MAAK;AAAA,MAEL,8BAAC,mBAAgB;AAAA;AAAA,EACnB;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useFloatingContext, FloatingWrapper } from '@elliemae/ds-floating-context';\nimport { styled } from '@elliemae/ds-system';\nimport React, { useContext } from 'react';\nimport {\n  ControlledDateTimePickerDatatestid,\n  DSControlledDateTimePickerName,\n  DSControlledDateTimePickerSlots,\n} from '../../../constants/index.js';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';\nimport { CalendarContent } from './CalendarContent.js';\nimport { CalendarContext } from './CalendarContext.js';\n\nconst StyledFloatingWrapper = styled(FloatingWrapper, {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.CONTEXTUAL_MENU.CALENDAR,\n})``;\n\nexport const CalendarWrapper = (): JSX.Element | null => {\n  const { isControllerOnly, getProps } = useContext(ControlledDateTimePickerContext);\n  const { referenceElement, closeCalendar } = useContext(CalendarContext);\n\n  const {\n    refs,\n    floatingStyles,\n    context,\n    isOpen: isFloatingOpen,\n  } = useFloatingContext({\n    externallyControlledIsOpen: !isControllerOnly && !!referenceElement,\n    externalReferenceElement: referenceElement,\n    withoutAnimation: true,\n    customOffset: [0, 0],\n    onClickOutside: isControllerOnly ? undefined : closeCalendar,\n  });\n\n  if (isControllerOnly) return <CalendarContent />;\n  if (!referenceElement) return null;\n\n  return (\n    <StyledFloatingWrapper\n      innerRef={refs.setFloating}\n      isOpen={isFloatingOpen}\n      floatingStyles={floatingStyles}\n      context={context}\n      data-testid={ControlledDateTimePickerDatatestid.CONTEXTUAL_MENU.CALENDAR}\n      getOwnerProps={getProps}\n      aria-label=\"calendar header\"\n      role=\"dialog\"\n    >\n      <CalendarContent />\n    </StyledFloatingWrapper>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACkCQ;AAlC/B,SAAS,oBAAoB,uBAAuB;AACpD,SAAS,cAAc;AACvB,SAAgB,kBAAkB;AAClC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,uCAAuC;AAChD,SAAS,uBAAuB;AAChC,SAAS,uBAAuB;AAEhC,MAAM,wBAAwB,OAAO,iBAAiB;AAAA,EACpD,MAAM;AAAA,EACN,MAAM,gCAAgC,gBAAgB;AACxD,CAAC;AAEM,MAAM,kBAAkB,MAA0B;AACvD,QAAM,EAAE,kBAAkB,SAAS,IAAI,WAAW,+BAA+B;AACjF,QAAM,EAAE,kBAAkB,cAAc,IAAI,WAAW,eAAe;AAEtE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,EACV,IAAI,mBAAmB;AAAA,IACrB,4BAA4B,CAAC,oBAAoB,CAAC,CAAC;AAAA,IACnD,0BAA0B;AAAA,IAC1B,kBAAkB;AAAA,IAClB,cAAc,CAAC,GAAG,CAAC;AAAA,IACnB,gBAAgB,mBAAmB,SAAY;AAAA,EACjD,CAAC;AAED,MAAI,iBAAkB,QAAO,oBAAC,mBAAgB;AAC9C,MAAI,CAAC,iBAAkB,QAAO;AAE9B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU,KAAK;AAAA,MACf,QAAQ;AAAA,MACR;AAAA,MACA;AAAA,MACA,eAAa,mCAAmC,gBAAgB;AAAA,MAChE,eAAe;AAAA,MACf,cAAW;AAAA,MACX,MAAK;AAAA,MAEL,8BAAC,mBAAgB;AAAA;AAAA,EACnB;AAEJ;",
   "names": []
 }

package/dist/esm/parts/Pickers/Calendar/useCurrentDisplayedMonthYearLogic.js

@@ -1,6 +1,7 @@
 import * as React from "react";
 import { useMemo, useCallback, useState, useEffect, createRef, useRef } from "react";
 import { useGetMonthYearFromDateStringOrEmptyStartingMonth } from "../../../utils/hooks/useGetMonthYearFromDateStringOrEmptyStartingMonth.js";
+import { useGetStartingFocusedDay } from "../../../utils/hooks/useGetStartingFocusedDay.js";
 import {
   getSixBySevenCurrentMonthDaysMatrix,
   sumFromDateValues,
@@ -44,7 +45,10 @@ const getDaysArrays = (currentMonth, currentYear) => {
   return [hiddenPrevMetaday, ...newDaysArray, hiddenNextMetaday];
 };
 const useCurrentDisplayedMonthYearLogic = () => {
-  const { month: monthFromDateString, year: yearFromDateString } = useGetMonthYearFromDateStringOrEmptyStartingMonth();
+  const { month: monthFromDateStringFallback, year: yearFromDateStringFallback } = useGetMonthYearFromDateStringOrEmptyStartingMonth();
+  const { startFocusedDate } = useGetStartingFocusedDay();
+  const monthFromDateString = startFocusedDate ? startFocusedDate.getMonth() : monthFromDateStringFallback;
+  const yearFromDateString = startFocusedDate ? startFocusedDate.getFullYear() : yearFromDateStringFallback;
   const [currentMonth, setCurrentMonth] = useState(monthFromDateString);
   const [currentYear, setCurrentYear] = useState(yearFromDateString);
   const daysArraysRef = useRef([]);

package/dist/esm/parts/Pickers/Calendar/useCurrentDisplayedMonthYearLogic.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/Pickers/Calendar/useCurrentDisplayedMonthYearLogic.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\n/* eslint-disable max-statements */\n/* eslint-disable max-lines */\nimport { useMemo, useCallback, useState, useEffect, createRef, useRef } from 'react';\n// eslint-disable-next-line max-len\nimport { useGetMonthYearFromDateStringOrEmptyStartingMonth } from '../../../utils/hooks/useGetMonthYearFromDateStringOrEmptyStartingMonth.js';\nimport {\n  getSixBySevenCurrentMonthDaysMatrix,\n  sumFromDateValues,\n  sumValuesToDate,\n  getDateStringFromDay,\n} from '../../../utils/dateHelpers.js';\nimport type { DSControlledDateTimePickerT } from '../../../react-desc-prop-types.js';\nimport type { DSControlledDateTimePickerInternalsT } from '../../../sharedTypes.js';\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nfunction sliceIntoChunks<T = any>(arr: Array<T>, chunkSize: number): Array<Array<T>> {\n  const res = [];\n  for (let i = 0; i < arr.length; i += chunkSize) {\n    const chunk = arr.slice(i, i + chunkSize);\n    res.push(chunk);\n  }\n  return res;\n}\ninterface UseCurrentDisplayedMonthYearLogicT {\n  currentMonth: DSControlledDateTimePickerInternalsT.DateMonth;\n  currentYear: number;\n  daysArray: DSControlledDateTimePickerT.MetaMonthDay[];\n  invisibleFirstDay?: DSControlledDateTimePickerT.MetaMonthDay;\n  daysMatrixByWeekday: DSControlledDateTimePickerT.MetaMonthDay[][];\n  invisibleLastDay?: DSControlledDateTimePickerT.MetaMonthDay;\n  handlePrevMonth: () => void;\n  handlePrevYear: () => void;\n  handleNextMonth: () => void;\n  handleNextYear: () => void;\n  daysArraysRef: React.MutableRefObject<DSControlledDateTimePickerT.MetaMonthDay[]>;\n  resetMonthYear: () => void;\n}\n\nconst getDaysArrays = (currentMonth: DSControlledDateTimePickerInternalsT.DateMonth, currentYear: number) => {\n  const newDaysArray = getSixBySevenCurrentMonthDaysMatrix(currentMonth, currentYear);\n  const hiddenPrevDay = sumValuesToDate(newDaysArray[0].day, {\n    daysToSum: -1,\n  });\n  const hiddenPrevMetaday = {\n    day: hiddenPrevDay,\n    dayAsString: getDateStringFromDay(hiddenPrevDay),\n    isPrevMonthDay: true,\n    isNextMonthDay: false,\n    isCurrMonthDay: false,\n    dayBtnRef: createRef<HTMLButtonElement>() as React.MutableRefObject<HTMLButtonElement>,\n    isHidden: true,\n  };\n  const hiddenNextDay = sumValuesToDate(newDaysArray[newDaysArray.length - 1].day, {\n    daysToSum: 1,\n  });\n  const hiddenNextMetaday = {\n    day: hiddenNextDay,\n    dayAsString: getDateStringFromDay(hiddenNextDay),\n    isPrevMonthDay: false,\n    isNextMonthDay: true,\n    isCurrMonthDay: false,\n    dayBtnRef: createRef<HTMLButtonElement>() as React.MutableRefObject<HTMLButtonElement>,\n    isHidden: true,\n  };\n  return [hiddenPrevMetaday, ...newDaysArray, hiddenNextMetaday];\n};\nexport const useCurrentDisplayedMonthYearLogic = (): UseCurrentDisplayedMonthYearLogicT => {\n  const { month: monthFromDateString, year: yearFromDateString } = useGetMonthYearFromDateStringOrEmptyStartingMonth();\n  const [currentMonth, setCurrentMonth] = useState(monthFromDateString);\n  const [currentYear, setCurrentYear] = useState(yearFromDateString);\n\n  const daysArraysRef = useRef<DSControlledDateTimePickerT.MetaMonthDay[]>([]);\n\n  const resetMonthYear = useCallback(() => {\n    setCurrentMonth(monthFromDateString);\n    setCurrentYear(yearFromDateString);\n  }, [monthFromDateString, yearFromDateString]);\n  // side-effects are really really controlled in this case so use-effect should be fine\n  // don't add 200 side-effects to those or else Chaos would hunt us for the years to come\n  useEffect(() => {\n    setCurrentMonth(monthFromDateString);\n  }, [monthFromDateString]);\n  useEffect(() => {\n    setCurrentYear(yearFromDateString);\n  }, [yearFromDateString]);\n\n  const daysArray = useMemo(() => getDaysArrays(currentMonth, currentYear), [currentMonth, currentYear]);\n\n  daysArraysRef.current = daysArray;\n\n  const handlePrevYear = useCallback(() => {\n    const { year: newYear } = sumFromDateValues({ month: currentMonth, year: currentYear }, { yearsToSum: -1 });\n    setCurrentYear(newYear);\n  }, [currentMonth, currentYear]);\n\n  const handlePrevMonth = useCallback(() => {\n    const { month: newMonth, year: newYear } = sumFromDateValues(\n      { month: currentMonth, year: currentYear },\n      { monthsToSum: -1 },\n    );\n    setCurrentMonth(newMonth);\n    setCurrentYear(newYear);\n    daysArraysRef.current = getDaysArrays(newMonth, newYear);\n  }, [currentMonth, currentYear]);\n\n  const handleNextMonth = useCallback(() => {\n    const { month: newMonth, year: newYear } = sumFromDateValues(\n      { month: currentMonth, year: currentYear },\n      { monthsToSum: 1 },\n    );\n    setCurrentMonth(newMonth);\n    setCurrentYear(newYear);\n    daysArraysRef.current = getDaysArrays(newMonth, newYear);\n  }, [currentMonth, currentYear]);\n\n  const handleNextYear = useCallback(() => {\n    const { year: newYear } = sumFromDateValues({ month: currentMonth, year: currentYear }, { yearsToSum: 1 });\n    setCurrentYear(newYear);\n  }, [currentMonth, currentYear]);\n\n  const { invisibleFirstDay, daysMatrixByWeekday, invisibleLastDay } = useMemo(() => {\n    const [invisible1stDay, ...otherDays] = [...daysArray];\n    const invisibleDayLast = otherDays.pop();\n    return {\n      invisibleFirstDay: invisible1stDay,\n      daysMatrixByWeekday: sliceIntoChunks<DSControlledDateTimePickerT.MetaMonthDay>(otherDays, 7),\n      invisibleLastDay: invisibleDayLast,\n    };\n  }, [daysArray]);\n\n  return useMemo(\n    () => ({\n      currentMonth,\n      currentYear,\n      daysArray,\n      invisibleFirstDay,\n      daysMatrixByWeekday,\n      invisibleLastDay,\n      handlePrevYear,\n      handlePrevMonth,\n      handleNextMonth,\n      handleNextYear,\n      daysArraysRef,\n      resetMonthYear,\n    }),\n    [\n      currentMonth,\n      currentYear,\n      daysArray,\n      daysMatrixByWeekday,\n      handleNextMonth,\n      handleNextYear,\n      handlePrevMonth,\n      handlePrevYear,\n      invisibleFirstDay,\n      invisibleLastDay,\n      resetMonthYear,\n    ],\n  );\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\n/* eslint-disable max-statements */\n/* eslint-disable max-lines */\nimport { useMemo, useCallback, useState, useEffect, createRef, useRef } from 'react';\n// eslint-disable-next-line max-len\nimport { useGetMonthYearFromDateStringOrEmptyStartingMonth } from '../../../utils/hooks/useGetMonthYearFromDateStringOrEmptyStartingMonth.js';\nimport { useGetStartingFocusedDay } from '../../../utils/hooks/useGetStartingFocusedDay.js';\nimport {\n  getSixBySevenCurrentMonthDaysMatrix,\n  sumFromDateValues,\n  sumValuesToDate,\n  getDateStringFromDay,\n} from '../../../utils/dateHelpers.js';\nimport type { DSControlledDateTimePickerT } from '../../../react-desc-prop-types.js';\nimport type { DSControlledDateTimePickerInternalsT } from '../../../sharedTypes.js';\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nfunction sliceIntoChunks<T = any>(arr: Array<T>, chunkSize: number): Array<Array<T>> {\n  const res = [];\n  for (let i = 0; i < arr.length; i += chunkSize) {\n    const chunk = arr.slice(i, i + chunkSize);\n    res.push(chunk);\n  }\n  return res;\n}\ninterface UseCurrentDisplayedMonthYearLogicT {\n  currentMonth: DSControlledDateTimePickerInternalsT.DateMonth;\n  currentYear: number;\n  daysArray: DSControlledDateTimePickerT.MetaMonthDay[];\n  invisibleFirstDay?: DSControlledDateTimePickerT.MetaMonthDay;\n  daysMatrixByWeekday: DSControlledDateTimePickerT.MetaMonthDay[][];\n  invisibleLastDay?: DSControlledDateTimePickerT.MetaMonthDay;\n  handlePrevMonth: () => void;\n  handlePrevYear: () => void;\n  handleNextMonth: () => void;\n  handleNextYear: () => void;\n  daysArraysRef: React.MutableRefObject<DSControlledDateTimePickerT.MetaMonthDay[]>;\n  resetMonthYear: () => void;\n}\n\nconst getDaysArrays = (currentMonth: DSControlledDateTimePickerInternalsT.DateMonth, currentYear: number) => {\n  const newDaysArray = getSixBySevenCurrentMonthDaysMatrix(currentMonth, currentYear);\n  const hiddenPrevDay = sumValuesToDate(newDaysArray[0].day, {\n    daysToSum: -1,\n  });\n  const hiddenPrevMetaday = {\n    day: hiddenPrevDay,\n    dayAsString: getDateStringFromDay(hiddenPrevDay),\n    isPrevMonthDay: true,\n    isNextMonthDay: false,\n    isCurrMonthDay: false,\n    dayBtnRef: createRef<HTMLButtonElement>() as React.MutableRefObject<HTMLButtonElement>,\n    isHidden: true,\n  };\n  const hiddenNextDay = sumValuesToDate(newDaysArray[newDaysArray.length - 1].day, {\n    daysToSum: 1,\n  });\n  const hiddenNextMetaday = {\n    day: hiddenNextDay,\n    dayAsString: getDateStringFromDay(hiddenNextDay),\n    isPrevMonthDay: false,\n    isNextMonthDay: true,\n    isCurrMonthDay: false,\n    dayBtnRef: createRef<HTMLButtonElement>() as React.MutableRefObject<HTMLButtonElement>,\n    isHidden: true,\n  };\n  return [hiddenPrevMetaday, ...newDaysArray, hiddenNextMetaday];\n};\nexport const useCurrentDisplayedMonthYearLogic = (): UseCurrentDisplayedMonthYearLogicT => {\n  const { month: monthFromDateStringFallback, year: yearFromDateStringFallback } =\n    useGetMonthYearFromDateStringOrEmptyStartingMonth();\n  const { startFocusedDate } = useGetStartingFocusedDay();\n\n  /*\n   * PUI-15900 https://jira.elliemae.io/browse/PUI-15900\n   *\n   * The displayed month must stay aligned with the day the calendar will focus on open\n   * (see useFocusLogic / useGetStartingFocusedDay). When the input holds a partial date\n   * (e.g. a month with no day/year), `useGetMonthYearFromDateStringOrEmptyStartingMonth`\n   * would drive the grid to that partial month, while the starting focused day resolves\n   * to `onCalendarOpenFocusedDay` \u2014 a day in a different month that is then not rendered,\n   * so focus is lost.\n   *\n   * Whenever a starting focused day is resolved (a complete valid input date, or\n   * `onCalendarOpenFocusedDay` when the input is incomplete) the grid follows THAT day's\n   * month/year, so the focused day is always visible. Only when there is no starting\n   * focused day do we fall back to the input/emptyPickerStartingMonth month.\n   */\n  const monthFromDateString = startFocusedDate\n    ? (startFocusedDate.getMonth() as DSControlledDateTimePickerInternalsT.DateMonth)\n    : monthFromDateStringFallback;\n  const yearFromDateString = startFocusedDate ? startFocusedDate.getFullYear() : yearFromDateStringFallback;\n\n  const [currentMonth, setCurrentMonth] = useState(monthFromDateString);\n  const [currentYear, setCurrentYear] = useState(yearFromDateString);\n\n  const daysArraysRef = useRef<DSControlledDateTimePickerT.MetaMonthDay[]>([]);\n\n  const resetMonthYear = useCallback(() => {\n    setCurrentMonth(monthFromDateString);\n    setCurrentYear(yearFromDateString);\n  }, [monthFromDateString, yearFromDateString]);\n  // side-effects are really really controlled in this case so use-effect should be fine\n  // don't add 200 side-effects to those or else Chaos would hunt us for the years to come\n  useEffect(() => {\n    setCurrentMonth(monthFromDateString);\n  }, [monthFromDateString]);\n  useEffect(() => {\n    setCurrentYear(yearFromDateString);\n  }, [yearFromDateString]);\n\n  const daysArray = useMemo(() => getDaysArrays(currentMonth, currentYear), [currentMonth, currentYear]);\n\n  daysArraysRef.current = daysArray;\n\n  const handlePrevYear = useCallback(() => {\n    const { year: newYear } = sumFromDateValues({ month: currentMonth, year: currentYear }, { yearsToSum: -1 });\n    setCurrentYear(newYear);\n  }, [currentMonth, currentYear]);\n\n  const handlePrevMonth = useCallback(() => {\n    const { month: newMonth, year: newYear } = sumFromDateValues(\n      { month: currentMonth, year: currentYear },\n      { monthsToSum: -1 },\n    );\n    setCurrentMonth(newMonth);\n    setCurrentYear(newYear);\n    daysArraysRef.current = getDaysArrays(newMonth, newYear);\n  }, [currentMonth, currentYear]);\n\n  const handleNextMonth = useCallback(() => {\n    const { month: newMonth, year: newYear } = sumFromDateValues(\n      { month: currentMonth, year: currentYear },\n      { monthsToSum: 1 },\n    );\n    setCurrentMonth(newMonth);\n    setCurrentYear(newYear);\n    daysArraysRef.current = getDaysArrays(newMonth, newYear);\n  }, [currentMonth, currentYear]);\n\n  const handleNextYear = useCallback(() => {\n    const { year: newYear } = sumFromDateValues({ month: currentMonth, year: currentYear }, { yearsToSum: 1 });\n    setCurrentYear(newYear);\n  }, [currentMonth, currentYear]);\n\n  const { invisibleFirstDay, daysMatrixByWeekday, invisibleLastDay } = useMemo(() => {\n    const [invisible1stDay, ...otherDays] = [...daysArray];\n    const invisibleDayLast = otherDays.pop();\n    return {\n      invisibleFirstDay: invisible1stDay,\n      daysMatrixByWeekday: sliceIntoChunks<DSControlledDateTimePickerT.MetaMonthDay>(otherDays, 7),\n      invisibleLastDay: invisibleDayLast,\n    };\n  }, [daysArray]);\n\n  return useMemo(\n    () => ({\n      currentMonth,\n      currentYear,\n      daysArray,\n      invisibleFirstDay,\n      daysMatrixByWeekday,\n      invisibleLastDay,\n      handlePrevYear,\n      handlePrevMonth,\n      handleNextMonth,\n      handleNextYear,\n      daysArraysRef,\n      resetMonthYear,\n    }),\n    [\n      currentMonth,\n      currentYear,\n      daysArray,\n      daysMatrixByWeekday,\n      handleNextMonth,\n      handleNextYear,\n      handlePrevMonth,\n      handlePrevYear,\n      invisibleFirstDay,\n      invisibleLastDay,\n      resetMonthYear,\n    ],\n  );\n};\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -1,8 +1,8 @@
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
-import { DSPopperJS } from "@elliemae/ds-popperjs";
-import { styled } from "@elliemae/ds-system";
 import { useContext } from "react";
+import { useFloatingContext, FloatingWrapper } from "@elliemae/ds-floating-context";
+import { styled } from "@elliemae/ds-system";
 import { ControlledDateTimePickerContext } from "../../../ControlledDateTimePickerCTX.js";
 import {
   ControlledDateTimePickerDatatestid,
@@ -11,23 +11,35 @@ import {
 } from "../../../constants/index.js";
 import { CalendarWithTimeWheelContent } from "./CalendarWithTimeWheelContent.js";
 import { CalendarWithTimeWheelContext } from "./CalendarWithTimeWheelContext.js";
-const StyledPopper = styled(DSPopperJS, {
+const StyledFloatingWrapper = styled(FloatingWrapper, {
   name: DSControlledDateTimePickerName,
   slot: DSControlledDateTimePickerSlots.CONTEXTUAL_MENU.CALENDAR_TIMEWHEEL
 })``;
 const CalendarWithTimeWheelWrapper = () => {
   const { referenceElement, closeCalendar, isControllerOnly } = useContext(CalendarWithTimeWheelContext);
   const { getProps } = useContext(ControlledDateTimePickerContext);
+  const {
+    refs,
+    floatingStyles,
+    context,
+    isOpen: isFloatingOpen
+  } = useFloatingContext({
+    externallyControlledIsOpen: !isControllerOnly && !!referenceElement,
+    externalReferenceElement: referenceElement,
+    withoutAnimation: true,
+    customOffset: [0, 0],
+    onClickOutside: isControllerOnly ? void 0 : closeCalendar
+  });
   if (isControllerOnly) return /* @__PURE__ */ jsx(CalendarWithTimeWheelContent, {});
   if (!referenceElement) return null;
   return /* @__PURE__ */ jsx(
-    StyledPopper,
+    StyledFloatingWrapper,
     {
-      showPopover: true,
+      innerRef: refs.setFloating,
+      isOpen: isFloatingOpen,
+      floatingStyles,
+      context,
       "data-testid": ControlledDateTimePickerDatatestid.CONTEXTUAL_MENU.CALENDAR_TIMEWHEEL,
-      referenceElement,
-      withoutArrow: true,
-      onClickOutside: closeCalendar,
       getOwnerProps: getProps,
       "aria-label": "calendar header",
       role: "dialog",

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/Pickers/CalendarWithTimeWheel/CalendarWithTimeWheelWrapper.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { DSPopperJS } from '@elliemae/ds-popperjs';\nimport { styled } from '@elliemae/ds-system';\nimport { useContext } from 'react';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';\nimport {\n  ControlledDateTimePickerDatatestid,\n  DSControlledDateTimePickerName,\n  DSControlledDateTimePickerSlots,\n} from '../../../constants/index.js';\nimport { CalendarWithTimeWheelContent } from './CalendarWithTimeWheelContent.js';\nimport { CalendarWithTimeWheelContext } from './CalendarWithTimeWheelContext.js';\nconst StyledPopper = styled(DSPopperJS, {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.CONTEXTUAL_MENU.CALENDAR_TIMEWHEEL,\n})``;\n\nexport const CalendarWithTimeWheelWrapper = () => {\n  const { referenceElement, closeCalendar, isControllerOnly } = useContext(CalendarWithTimeWheelContext);\n  const { getProps } = useContext(ControlledDateTimePickerContext);\n  if (isControllerOnly) return <CalendarWithTimeWheelContent />;\n  if (!referenceElement) return null;\n  return (\n    <StyledPopper\n      showPopover\n      data-testid={ControlledDateTimePickerDatatestid.CONTEXTUAL_MENU.CALENDAR_TIMEWHEEL}\n      referenceElement={referenceElement}\n      withoutArrow\n      onClickOutside={closeCalendar}\n      getOwnerProps={getProps}\n      aria-label=\"calendar header\"\n      role=\"dialog\"\n    >\n      <CalendarWithTimeWheelContent />\n    </StyledPopper>\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACmBQ;AAnB/B,SAAS,kBAAkB;AAC3B,SAAS,cAAc;AACvB,SAAS,kBAAkB;AAC3B,SAAS,uCAAuC;AAChD;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,oCAAoC;AAC7C,SAAS,oCAAoC;AAC7C,MAAM,eAAe,OAAO,YAAY;AAAA,EACtC,MAAM;AAAA,EACN,MAAM,gCAAgC,gBAAgB;AACxD,CAAC;AAEM,MAAM,+BAA+B,MAAM;AAChD,QAAM,EAAE,kBAAkB,eAAe,iBAAiB,IAAI,WAAW,4BAA4B;AACrG,QAAM,EAAE,SAAS,IAAI,WAAW,+BAA+B;AAC/D,MAAI,iBAAkB,QAAO,oBAAC,gCAA6B;AAC3D,MAAI,CAAC,iBAAkB,QAAO;AAC9B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAW;AAAA,MACX,eAAa,mCAAmC,gBAAgB;AAAA,MAChE;AAAA,MACA,cAAY;AAAA,MACZ,gBAAgB;AAAA,MAChB,eAAe;AAAA,MACf,cAAW;AAAA,MACX,MAAK;AAAA,MAEL,8BAAC,gCAA6B;AAAA;AAAA,EAChC;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport { useFloatingContext, FloatingWrapper } from '@elliemae/ds-floating-context';\nimport { styled } from '@elliemae/ds-system';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';\nimport {\n  ControlledDateTimePickerDatatestid,\n  DSControlledDateTimePickerName,\n  DSControlledDateTimePickerSlots,\n} from '../../../constants/index.js';\nimport { CalendarWithTimeWheelContent } from './CalendarWithTimeWheelContent.js';\nimport { CalendarWithTimeWheelContext } from './CalendarWithTimeWheelContext.js';\n\nconst StyledFloatingWrapper = styled(FloatingWrapper, {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.CONTEXTUAL_MENU.CALENDAR_TIMEWHEEL,\n})``;\n\nexport const CalendarWithTimeWheelWrapper = () => {\n  const { referenceElement, closeCalendar, isControllerOnly } = useContext(CalendarWithTimeWheelContext);\n  const { getProps } = useContext(ControlledDateTimePickerContext);\n\n  const {\n    refs,\n    floatingStyles,\n    context,\n    isOpen: isFloatingOpen,\n  } = useFloatingContext({\n    externallyControlledIsOpen: !isControllerOnly && !!referenceElement,\n    externalReferenceElement: referenceElement,\n    withoutAnimation: true,\n    customOffset: [0, 0],\n    onClickOutside: isControllerOnly ? undefined : closeCalendar,\n  });\n\n  if (isControllerOnly) return <CalendarWithTimeWheelContent />;\n  if (!referenceElement) return null;\n\n  return (\n    <StyledFloatingWrapper\n      innerRef={refs.setFloating}\n      isOpen={isFloatingOpen}\n      floatingStyles={floatingStyles}\n      context={context}\n      data-testid={ControlledDateTimePickerDatatestid.CONTEXTUAL_MENU.CALENDAR_TIMEWHEEL}\n      getOwnerProps={getProps}\n      aria-label=\"calendar header\"\n      role=\"dialog\"\n    >\n      <CalendarWithTimeWheelContent />\n    </StyledFloatingWrapper>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACkCQ;AAlC/B,SAAgB,kBAAkB;AAClC,SAAS,oBAAoB,uBAAuB;AACpD,SAAS,cAAc;AACvB,SAAS,uCAAuC;AAChD;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,oCAAoC;AAC7C,SAAS,oCAAoC;AAE7C,MAAM,wBAAwB,OAAO,iBAAiB;AAAA,EACpD,MAAM;AAAA,EACN,MAAM,gCAAgC,gBAAgB;AACxD,CAAC;AAEM,MAAM,+BAA+B,MAAM;AAChD,QAAM,EAAE,kBAAkB,eAAe,iBAAiB,IAAI,WAAW,4BAA4B;AACrG,QAAM,EAAE,SAAS,IAAI,WAAW,+BAA+B;AAE/D,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,EACV,IAAI,mBAAmB;AAAA,IACrB,4BAA4B,CAAC,oBAAoB,CAAC,CAAC;AAAA,IACnD,0BAA0B;AAAA,IAC1B,kBAAkB;AAAA,IAClB,cAAc,CAAC,GAAG,CAAC;AAAA,IACnB,gBAAgB,mBAAmB,SAAY;AAAA,EACjD,CAAC;AAED,MAAI,iBAAkB,QAAO,oBAAC,gCAA6B;AAC3D,MAAI,CAAC,iBAAkB,QAAO;AAE9B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU,KAAK;AAAA,MACf,QAAQ;AAAA,MACR;AAAA,MACA;AAAA,MACA,eAAa,mCAAmC,gBAAgB;AAAA,MAChE,eAAe;AAAA,MACf,cAAW;AAAA,MACX,MAAK;AAAA,MAEL,8BAAC,gCAA6B;AAAA;AAAA,EAChC;AAEJ;",
   "names": []
 }

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

@@ -64,8 +64,8 @@ const HoursList = () => {
         onClick: handlePrevHour,
         innerRef: prevHourBtnRef,
         "data-testid": ControlledDateTimePickerDatatestid.TIMEWHEEL.PREV_HOUR,
-        "aria-disabled": readOnly || applyAriaDisabled,
-        applyAriaDisabled: applyAriaDisabled || readOnly,
+        applyAriaDisabled,
+        readOnly,
         getOwnerProps: getProps,
         tabIndex: -1,
         type: "button",
@@ -125,8 +125,8 @@ const HoursList = () => {
         innerRef: nextHourBtnRef,
         tabIndex: -1,
         "data-testid": ControlledDateTimePickerDatatestid.TIMEWHEEL.NEXT_HOUR,
-        "aria-disabled": readOnly || applyAriaDisabled,
-        applyAriaDisabled: applyAriaDisabled || readOnly,
+        applyAriaDisabled,
+        readOnly,
         getOwnerProps: getProps,
         type: "button",
         children: /* @__PURE__ */ jsx(ChevronSmallDown, { color: arrowColor })

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

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

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

@@ -102,8 +102,8 @@ const MeridiemVisualLayer = ({ isFocusedWheel }) => {
         innerRef: prevMeridiemBtnRef,
         tabIndex: -1,
         type: "button",
-        "aria-disabled": readOnly || applyAriaDisabled,
-        applyAriaDisabled: applyAriaDisabled || readOnly,
+        applyAriaDisabled,
+        readOnly,
         getOwnerProps: getProps,
         children: /* @__PURE__ */ jsx(ChevronSmallUp, { color: arrowColor })
       }
@@ -160,8 +160,8 @@ const MeridiemVisualLayer = ({ isFocusedWheel }) => {
         innerRef: nextMeridiemBtnRef,
         tabIndex: -1,
         type: "button",
-        "aria-disabled": readOnly || applyAriaDisabled,
-        applyAriaDisabled: applyAriaDisabled || readOnly,
+        applyAriaDisabled,
+        readOnly,
         getOwnerProps: getProps,
         children: /* @__PURE__ */ jsx(ChevronSmallDown, { color: arrowColor })
       }

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

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

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

@@ -64,8 +64,8 @@ const MinutesList = () => {
         innerRef: prevMinutesBtnRef,
         tabIndex: -1,
         "data-testid": ControlledDateTimePickerDatatestid.TIMEWHEEL.PREV_MINUTE,
-        "aria-disabled": readOnly || applyAriaDisabled,
-        applyAriaDisabled: applyAriaDisabled || readOnly,
+        applyAriaDisabled,
+        readOnly,
         type: "button",
         getOwnerProps: getProps,
         children: /* @__PURE__ */ jsx(ChevronSmallUp, { color: arrowColor })
@@ -124,8 +124,8 @@ const MinutesList = () => {
         innerRef: nextMinutesBtnRef,
         "data-testid": ControlledDateTimePickerDatatestid.TIMEWHEEL.NEXT_MINUTE,
         tabIndex: -1,
-        "aria-disabled": readOnly || applyAriaDisabled,
-        applyAriaDisabled: applyAriaDisabled || readOnly,
+        applyAriaDisabled,
+        readOnly,
         type: "button",
         getOwnerProps: getProps,
         children: /* @__PURE__ */ jsx(ChevronSmallDown, { color: arrowColor })

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

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

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

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