npm - @elliemae/ds-form-date-time-picker - Versions diffs - 3.60.0-next.6 → 3.60.0-next.60 - Mend

@elliemae/ds-form-date-time-picker 3.60.0-next.6 → 3.60.0-next.60

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

Files changed (156) hide show

package/dist/cjs/config/useControlledDateTimePicker.js CHANGED Viewed

@@ -34,6 +34,7 @@ module.exports = __toCommonJS(useControlledDateTimePicker_exports);
 var React = __toESM(require("react"));
 var import_react = __toESM(require("react"));
 var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
+var import_uid = require("uid");
 var import_useGetPropsWithDefault = require("./useGetPropsWithDefault.js");
 var import_useFocusTracker = require("./useFocusTracker.js");
 var import_useGetFlags = require("./useGetFlags.js");
@@ -46,6 +47,7 @@ var import_useGlobalKeyHandlers = require("./useGlobalKeyHandlers.js");
 var import_useValidateProps = require("./useValidateProps.js");
 const useControlledDateTimePicker = (props) => {
   (0, import_useValidateProps.useValidateProps)(props);
+  const instanceUid = (0, import_react.useMemo)(() => `ds-dtp-${(0, import_uid.uid)(6)}`, []);
   const propsWithDefaults = (0, import_useGetPropsWithDefault.useGetDatePickerWithDefaultsProps)(props);
   const flags = (0, import_useGetFlags.useGetFlags)(propsWithDefaults);
   const DOMRefs = (0, import_useGetReferences.useGetReferences)(flags);
@@ -72,6 +74,7 @@ const useControlledDateTimePicker = (props) => {
       props: propsWithDefaults,
       getProps,
       ariaCurrentValueForInputs,
+      instanceUid,
       // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
       xstyledAttrs,
       globalAttrs,
@@ -88,6 +91,7 @@ const useControlledDateTimePicker = (props) => {
       propsWithDefaults,
       getProps,
       ariaCurrentValueForInputs,
+      instanceUid,
       xstyledAttrs,
       globalAttrs,
       focusTrackers,

package/dist/cjs/config/useControlledDateTimePicker.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/config/useControlledDateTimePicker.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useCallback } from 'react';\nimport { useGetGlobalAttributes, useGetXstyledProps } from '@elliemae/ds-props-helpers';\nimport { useGetDatePickerWithDefaultsProps } from './useGetPropsWithDefault.js';\nimport { useFocusTracker } from './useFocusTracker.js';\nimport { useGetFlags } from './useGetFlags.js';\nimport { useGetReferences } from './useGetReferences.js';\nimport { useRelevantValueFromProps } from './useRelevantValueFromProps.js';\nimport { useGetPropsBasedOnType } from './useGetPropsBasedOnType.js';\nimport { useGetDestructuredValues } from './useGetDestructuredValues.js';\nimport { useChangeHandlers } from './useChangeHandlers.js';\nimport { useGlobalKeyHandlers } from './useGlobalKeyHandlers.js';\nimport { useValidateProps } from './useValidateProps.js';\nimport type { DSControlledDateTimePickerT } from '../react-desc-prop-types.js';\n\nexport type ControlledDateTimePickerContextT = ReturnType<typeof useGetFlags> &\n  ReturnType<typeof useFocusTracker> &\n  ReturnType<typeof useGetReferences> &\n  ReturnType<typeof useGetPropsBasedOnType> &\n  ReturnType<typeof useRelevantValueFromProps> &\n  ReturnType<typeof useGetDestructuredValues> &\n  ReturnType<typeof useChangeHandlers> &\n  ReturnType<typeof useGlobalKeyHandlers> & {\n    props: DSControlledDateTimePickerT.InternalProps;\n    getProps: () => DSControlledDateTimePickerT.InternalProps;\n    ariaCurrentValueForInputs: string;\n    globalAttrs: Record<string, unknown>;\n    xstyledAttrs: Record<string, unknown>;\n  };\n\nexport const useControlledDateTimePicker = (\n  props: DSControlledDateTimePickerT.Props,\n): ControlledDateTimePickerContextT => {\n  // if we detect wrong props configuration we throw meaningful errors\n  useValidateProps(props);\n\n  const propsWithDefaults = useGetDatePickerWithDefaultsProps(props);\n\n  const flags = useGetFlags(propsWithDefaults);\n  const DOMRefs = useGetReferences(flags); // refs are used for \"auto-advance\" feature\n  const focusTrackers = useFocusTracker({ DOMRefs, flags });\n  const relevantValues = useRelevantValueFromProps(propsWithDefaults);\n  const propsBasedOnType = useGetPropsBasedOnType(propsWithDefaults);\n  const destructuredValues = useGetDestructuredValues({ ...propsBasedOnType, ...flags });\n  const changeHandlers = useChangeHandlers({\n    relevantValues,\n    destructuredValues,\n    propsBasedOnType,\n    DOMRefs,\n    focusTrackers,\n  });\n\n  const globalKeyHandlers = useGlobalKeyHandlers({ changeHandlers, propsBasedOnType, DOMRefs, flags, focusTrackers });\n\n  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-call\n  // const dataAttrs = getDataProps<DSControlledDateTimePickerT.InternalProps>(propsWithDefaults);\n\n  const xstyledAttrs = useGetXstyledProps(propsWithDefaults) as Record<string, unknown>;\n\n  const globalAttrs = useGetGlobalAttributes(propsWithDefaults) as Record<string, unknown>;\n\n  const { announcedDateValues, announcedTimeValues } = destructuredValues;\n  const { isWithDateInputs, isDateTimeSelector, isWithTimeInputs } = flags;\n\n  const ariaCurrentValueForInputs = `current values: ${isWithDateInputs ? `${announcedDateValues}` : ''}${\n    isDateTimeSelector ? ', ' : ''\n  }${isWithTimeInputs ? `${announcedTimeValues}` : ''}`;\n\n  const getProps = useCallback(() => propsWithDefaults, [propsWithDefaults]);\n\n  const ctx = React.useMemo(\n    () => ({\n      props: propsWithDefaults,\n      getProps,\n      ariaCurrentValueForInputs,\n      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n      xstyledAttrs,\n      globalAttrs,\n      ...focusTrackers,\n      ...flags,\n      ...DOMRefs,\n      ...relevantValues,\n      ...propsBasedOnType,\n      ...destructuredValues,\n      ...changeHandlers,\n      ...globalKeyHandlers,\n    }),\n    [\n      propsWithDefaults,\n      getProps,\n      ariaCurrentValueForInputs,\n      xstyledAttrs,\n      globalAttrs,\n      focusTrackers,\n      flags,\n      DOMRefs,\n      relevantValues,\n      propsBasedOnType,\n      destructuredValues,\n      changeHandlers,\n      globalKeyHandlers,\n    ],\n  );\n\n  return ctx;\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAmC;AACnC,8BAA2D;AAC3D,oCAAkD;AAClD,6BAAgC;AAChC,yBAA4B;AAC5B,8BAAiC;AACjC,uCAA0C;AAC1C,oCAAuC;AACvC,sCAAyC;AACzC,+BAAkC;AAClC,kCAAqC;AACrC,8BAAiC;AAkB1B,MAAM,8BAA8B,CACzC,UACqC;AAErC,gDAAiB,KAAK;AAEtB,QAAM,wBAAoB,iEAAkC,KAAK;AAEjE,QAAM,YAAQ,gCAAY,iBAAiB;AAC3C,QAAM,cAAU,0CAAiB,KAAK;AACtC,QAAM,oBAAgB,wCAAgB,EAAE,SAAS,MAAM,CAAC;AACxD,QAAM,qBAAiB,4DAA0B,iBAAiB;AAClE,QAAM,uBAAmB,sDAAuB,iBAAiB;AACjE,QAAM,yBAAqB,0DAAyB,EAAE,GAAG,kBAAkB,GAAG,MAAM,CAAC;AACrF,QAAM,qBAAiB,4CAAkB;AAAA,IACvC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,wBAAoB,kDAAqB,EAAE,gBAAgB,kBAAkB,SAAS,OAAO,cAAc,CAAC;AAKlH,QAAM,mBAAe,4CAAmB,iBAAiB;AAEzD,QAAM,kBAAc,gDAAuB,iBAAiB;AAE5D,QAAM,EAAE,qBAAqB,oBAAoB,IAAI;AACrD,QAAM,EAAE,kBAAkB,oBAAoB,iBAAiB,IAAI;AAEnE,QAAM,4BAA4B,mBAAmB,mBAAmB,GAAG,mBAAmB,KAAK,EAAE,GACnG,qBAAqB,OAAO,EAC9B,GAAG,mBAAmB,GAAG,mBAAmB,KAAK,EAAE;AAEnD,QAAM,eAAW,0BAAY,MAAM,mBAAmB,CAAC,iBAAiB,CAAC;AAEzE,QAAM,MAAM,aAAAA,QAAM;AAAA,IAChB,OAAO;AAAA,MACL,OAAO;AAAA,MACP;AAAA,MACA;AAAA;AAAA,MAEA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,IACL;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,SAAO;AACT;",
+  "sourcesContent": ["import React, { useCallback, useMemo } from 'react';\nimport { useGetGlobalAttributes, useGetXstyledProps } from '@elliemae/ds-props-helpers';\nimport { uid } from 'uid';\nimport { useGetDatePickerWithDefaultsProps } from './useGetPropsWithDefault.js';\nimport { useFocusTracker } from './useFocusTracker.js';\nimport { useGetFlags } from './useGetFlags.js';\nimport { useGetReferences } from './useGetReferences.js';\nimport { useRelevantValueFromProps } from './useRelevantValueFromProps.js';\nimport { useGetPropsBasedOnType } from './useGetPropsBasedOnType.js';\nimport { useGetDestructuredValues } from './useGetDestructuredValues.js';\nimport { useChangeHandlers } from './useChangeHandlers.js';\nimport { useGlobalKeyHandlers } from './useGlobalKeyHandlers.js';\nimport { useValidateProps } from './useValidateProps.js';\nimport type { DSControlledDateTimePickerT } from '../react-desc-prop-types.js';\n\nexport type ControlledDateTimePickerContextT = ReturnType<typeof useGetFlags> &\n  ReturnType<typeof useFocusTracker> &\n  ReturnType<typeof useGetReferences> &\n  ReturnType<typeof useGetPropsBasedOnType> &\n  ReturnType<typeof useRelevantValueFromProps> &\n  ReturnType<typeof useGetDestructuredValues> &\n  ReturnType<typeof useChangeHandlers> &\n  ReturnType<typeof useGlobalKeyHandlers> & {\n    props: DSControlledDateTimePickerT.InternalProps;\n    getProps: () => DSControlledDateTimePickerT.InternalProps;\n    ariaCurrentValueForInputs: string;\n    globalAttrs: Record<string, unknown>;\n    xstyledAttrs: Record<string, unknown>;\n    instanceUid: string;\n  };\n\nexport const useControlledDateTimePicker = (\n  props: DSControlledDateTimePickerT.Props,\n): ControlledDateTimePickerContextT => {\n  // if we detect wrong props configuration we throw meaningful errors\n  useValidateProps(props);\n\n  const instanceUid = useMemo(() => `ds-dtp-${uid(6)}`, []);\n  const propsWithDefaults = useGetDatePickerWithDefaultsProps(props);\n\n  const flags = useGetFlags(propsWithDefaults);\n  const DOMRefs = useGetReferences(flags); // refs are used for \"auto-advance\" feature\n  const focusTrackers = useFocusTracker({ DOMRefs, flags });\n  const relevantValues = useRelevantValueFromProps(propsWithDefaults);\n  const propsBasedOnType = useGetPropsBasedOnType(propsWithDefaults);\n  const destructuredValues = useGetDestructuredValues({ ...propsBasedOnType, ...flags });\n  const changeHandlers = useChangeHandlers({\n    relevantValues,\n    destructuredValues,\n    propsBasedOnType,\n    DOMRefs,\n    focusTrackers,\n  });\n\n  const globalKeyHandlers = useGlobalKeyHandlers({ changeHandlers, propsBasedOnType, DOMRefs, flags, focusTrackers });\n\n  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-call\n  // const dataAttrs = getDataProps<DSControlledDateTimePickerT.InternalProps>(propsWithDefaults);\n\n  const xstyledAttrs = useGetXstyledProps(propsWithDefaults) as Record<string, unknown>;\n\n  const globalAttrs = useGetGlobalAttributes(propsWithDefaults) as Record<string, unknown>;\n\n  const { announcedDateValues, announcedTimeValues } = destructuredValues;\n  const { isWithDateInputs, isDateTimeSelector, isWithTimeInputs } = flags;\n\n  const ariaCurrentValueForInputs = `current values: ${isWithDateInputs ? `${announcedDateValues}` : ''}${\n    isDateTimeSelector ? ', ' : ''\n  }${isWithTimeInputs ? `${announcedTimeValues}` : ''}`;\n\n  const getProps = useCallback(() => propsWithDefaults, [propsWithDefaults]);\n\n  const ctx = React.useMemo(\n    () => ({\n      props: propsWithDefaults,\n      getProps,\n      ariaCurrentValueForInputs,\n      instanceUid,\n      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n      xstyledAttrs,\n      globalAttrs,\n      ...focusTrackers,\n      ...flags,\n      ...DOMRefs,\n      ...relevantValues,\n      ...propsBasedOnType,\n      ...destructuredValues,\n      ...changeHandlers,\n      ...globalKeyHandlers,\n    }),\n    [\n      propsWithDefaults,\n      getProps,\n      ariaCurrentValueForInputs,\n      instanceUid,\n      xstyledAttrs,\n      globalAttrs,\n      focusTrackers,\n      flags,\n      DOMRefs,\n      relevantValues,\n      propsBasedOnType,\n      destructuredValues,\n      changeHandlers,\n      globalKeyHandlers,\n    ],\n  );\n\n  return ctx;\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA4C;AAC5C,8BAA2D;AAC3D,iBAAoB;AACpB,oCAAkD;AAClD,6BAAgC;AAChC,yBAA4B;AAC5B,8BAAiC;AACjC,uCAA0C;AAC1C,oCAAuC;AACvC,sCAAyC;AACzC,+BAAkC;AAClC,kCAAqC;AACrC,8BAAiC;AAmB1B,MAAM,8BAA8B,CACzC,UACqC;AAErC,gDAAiB,KAAK;AAEtB,QAAM,kBAAc,sBAAQ,MAAM,cAAU,gBAAI,CAAC,CAAC,IAAI,CAAC,CAAC;AACxD,QAAM,wBAAoB,iEAAkC,KAAK;AAEjE,QAAM,YAAQ,gCAAY,iBAAiB;AAC3C,QAAM,cAAU,0CAAiB,KAAK;AACtC,QAAM,oBAAgB,wCAAgB,EAAE,SAAS,MAAM,CAAC;AACxD,QAAM,qBAAiB,4DAA0B,iBAAiB;AAClE,QAAM,uBAAmB,sDAAuB,iBAAiB;AACjE,QAAM,yBAAqB,0DAAyB,EAAE,GAAG,kBAAkB,GAAG,MAAM,CAAC;AACrF,QAAM,qBAAiB,4CAAkB;AAAA,IACvC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,wBAAoB,kDAAqB,EAAE,gBAAgB,kBAAkB,SAAS,OAAO,cAAc,CAAC;AAKlH,QAAM,mBAAe,4CAAmB,iBAAiB;AAEzD,QAAM,kBAAc,gDAAuB,iBAAiB;AAE5D,QAAM,EAAE,qBAAqB,oBAAoB,IAAI;AACrD,QAAM,EAAE,kBAAkB,oBAAoB,iBAAiB,IAAI;AAEnE,QAAM,4BAA4B,mBAAmB,mBAAmB,GAAG,mBAAmB,KAAK,EAAE,GACnG,qBAAqB,OAAO,EAC9B,GAAG,mBAAmB,GAAG,mBAAmB,KAAK,EAAE;AAEnD,QAAM,eAAW,0BAAY,MAAM,mBAAmB,CAAC,iBAAiB,CAAC;AAEzE,QAAM,MAAM,aAAAA,QAAM;AAAA,IAChB,OAAO;AAAA,MACL,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA;AAAA,MAEA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,IACL;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,SAAO;AACT;",
   "names": ["React"]
 }

package/dist/cjs/config/useFocusTracker.js CHANGED Viewed

@@ -37,7 +37,7 @@ const useFocusTracker = ({ DOMRefs, flags }) => {
   const [latestInteractionRegion, setLatestInteractionRegion] = (0, import_react.useState)("");
   const [currFocusDescriber, setCurrFocusDescriber] = (0, import_react.useState)("");
   const { firstSegment, lastSegment } = DOMRefs;
-  const { isDateSelector, isTimeSelector } = flags;
+  const { isDateSelector, isTimeSelector, isControllerOnly } = flags;
   const trackFocusPicker = (0, import_react.useCallback)(() => {
     let picker = "datetime-picker-icon";
     if (isDateSelector) picker = "date-picker-icon";
@@ -68,17 +68,28 @@ const useFocusTracker = ({ DOMRefs, flags }) => {
     if (latestInteractionRegion !== "") setLatestInteractionRegion("");
     if (currFocusDescriber !== "") setCurrFocusDescriber("");
   }, [currFocusDescriber, latestInteractionRegion]);
-  const handleComponentBlurs = (0, import_react.useCallback)(() => {
-    let shouldShortCircuit = false;
-    if (latestInteractionRegion === "calendar-days" && currFocusDescriber === "calendar-metafocused-day")
-      shouldShortCircuit = true;
-    if (latestInteractionRegion === "calendar-head" && currFocusDescriber === "calendar-prev-month")
-      shouldShortCircuit = true;
-    if (latestInteractionRegion === "timewheel" && currFocusDescriber === "timewheel-curr-hour")
-      shouldShortCircuit = true;
-    if (shouldShortCircuit) return;
-    trackFocusResetter();
-  }, [currFocusDescriber, latestInteractionRegion, trackFocusResetter]);
+  const handleComponentBlurs = (0, import_react.useCallback)(
+    (e) => {
+      if (isControllerOnly) {
+        const relatedTarget = e.relatedTarget;
+        if (relatedTarget && e.currentTarget.contains(relatedTarget)) {
+          return;
+        }
+        trackFocusResetter();
+        return;
+      }
+      let shouldShortCircuit = false;
+      if (latestInteractionRegion === "calendar-days" && currFocusDescriber === "calendar-metafocused-day")
+        shouldShortCircuit = true;
+      if (latestInteractionRegion === "calendar-head" && currFocusDescriber === "calendar-prev-month")
+        shouldShortCircuit = true;
+      if (latestInteractionRegion === "timewheel" && currFocusDescriber === "timewheel-curr-hour")
+        shouldShortCircuit = true;
+      if (shouldShortCircuit) return;
+      trackFocusResetter();
+    },
+    [currFocusDescriber, isControllerOnly, latestInteractionRegion, trackFocusResetter]
+  );
   return (0, import_react.useMemo)(
     () => ({
       latestInteractionRegion,

package/dist/cjs/config/useFocusTracker.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/config/useFocusTracker.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable complexity */\n/* eslint-disable max-lines */\n/* eslint-disable indent */\n/* eslint-disable max-params */\n/* eslint-disable max-statements */\nimport { useCallback, useMemo, useState } from 'react';\nimport type { useGetReferences } from './useGetReferences.js';\nimport type { useGetFlags } from './useGetFlags.js';\n\ntype LatestInteractionRegion =\n  | 'calendar-days'\n  | 'calendar-head'\n  | 'timewheel'\n  | 'date-inputs'\n  | 'time-inputs'\n  | 'clear-btn'\n  | 'picker-icon'\n  | '';\ntype CurrFocusDescriber =\n  | 'first-segment'\n  | 'month-input'\n  | 'day-input'\n  | 'year-input'\n  | 'hour-input'\n  | 'minute-input'\n  | 'meridiem-input'\n  | 'last-segment'\n  | 'clear-btn'\n  | 'date-picker-icon'\n  | 'time-picker-icon'\n  | 'datetime-picker-icon'\n  | 'calendar-prev-month'\n  | 'calendar-next-month'\n  | 'calendar-prev-year'\n  | 'calendar-next-year'\n  | 'calendar-metafocused-day'\n  | 'timewheel-curr-hour'\n  | 'timewheel-curr-minute'\n  | 'timewheel-curr-meridiem'\n  | '';\n\ninterface Config {\n  DOMRefs: ReturnType<typeof useGetReferences>;\n  flags: ReturnType<typeof useGetFlags>;\n}\nexport const useFocusTracker = ({ DOMRefs, flags }: Config) => {\n  const [latestInteractionRegion, setLatestInteractionRegion] = useState<LatestInteractionRegion>('');\n  const [currFocusDescriber, setCurrFocusDescriber] = useState<CurrFocusDescriber>('');\n  const { firstSegment, lastSegment } = DOMRefs;\n  const { isDateSelector, isTimeSelector } = flags;\n\n  const trackFocusPicker = useCallback(() => {\n    let picker = 'datetime-picker-icon' as CurrFocusDescriber;\n    if (isDateSelector) picker = 'date-picker-icon';\n    if (isTimeSelector) picker = 'time-picker-icon';\n    if (latestInteractionRegion !== 'picker-icon') setLatestInteractionRegion('picker-icon');\n    if (picker !== currFocusDescriber) setCurrFocusDescriber(picker);\n  }, [currFocusDescriber, isDateSelector, isTimeSelector, latestInteractionRegion]);\n\n  /*\n   depending on the polymorphic props, the first segment can be:\n    - month-input (when date inputs are present)\n    - hour-input (when ONLY time inputs are present)\n    - datetime-picker-icon (when picker is present and we are selecting both date and time)\n    - date-picker-icon (when picker is present and no time selection is involved)\n    - time-picker-icon (when picker is present and no date selection is involved)\n  */\n  const trackFocusFirstSegment = useCallback(() => {\n    let region = 'date-inputs' as LatestInteractionRegion;\n    if (firstSegment === 'hour-input') region = 'time-inputs';\n    if (firstSegment === 'date-picker-icon') region = 'picker-icon';\n    if (firstSegment === 'time-picker-icon') region = 'picker-icon';\n    if (firstSegment === 'datetime-picker-icon') region = 'picker-icon';\n    if (region !== latestInteractionRegion) setLatestInteractionRegion(region);\n    if (firstSegment !== currFocusDescriber) setCurrFocusDescriber(firstSegment);\n  }, [currFocusDescriber, firstSegment, latestInteractionRegion]);\n\n  /*\n   depending on the polymorphic props, the last segment can be:\n    - year-input (when ONLY date inputs are present)\n    - meridiem-input (when time inputs are present)\n    - clear-btn (when clearable is true and there is no picker)\n    - datetime-picker-icon (when picker is present and we are selecting both date and time)\n    - date-picker-icon (when picker is present and no time selection is involved)\n    - time-picker-icon (when picker is present and no date selection is involved)\n  */\n  const trackFocusLastSegment = useCallback(() => {\n    let region = 'date-inputs' as LatestInteractionRegion;\n    if (lastSegment === 'meridiem-input') region = 'time-inputs';\n    if (lastSegment === 'clear-btn') region = 'clear-btn';\n    if (lastSegment === 'date-picker-icon') region = 'picker-icon';\n    if (lastSegment === 'time-picker-icon') region = 'picker-icon';\n    if (lastSegment === 'datetime-picker-icon') region = 'picker-icon';\n    if (region !== latestInteractionRegion) setLatestInteractionRegion(region);\n    if (lastSegment !== currFocusDescriber) setCurrFocusDescriber(lastSegment);\n  }, [currFocusDescriber, lastSegment, latestInteractionRegion]);\n\n  const trackFocusResetter = useCallback(() => {\n    if (latestInteractionRegion !== '') setLatestInteractionRegion('');\n    if (currFocusDescriber !== '') setCurrFocusDescriber('');\n  }, [currFocusDescriber, latestInteractionRegion]);\n\n  const handleComponentBlurs = useCallback(() => {\n    /* our code base is trying to avoid side-effects and we also try to be imperative\n    due to how \"portals\" work, when we open a portal the \"blur\" event is triggered\n    we need to distinguish between\n     - a blur that is caused by a portal opening\n           vs\n     - a blur that is caused by a user moving focus to another element\n    we can do this by checking the currFocusDescriber and latestInteractionRegion\n    we know that blur is triggered by portal opening when:\n      - latestInteractionRegion === 'calendar-days' && currFocusDescriber === 'calendar-metafocused-day'\n        (this is the case when we open the calendar or calendarWithTimeWheel with a preselected date)\n      - latestInteractionRegion === 'calendar-head' && currFocusDescriber === 'calendar-prev-month'\n        (this is the case when we open the calendar or calendarWithTimeWheel without a preselected date)\n      - latestInteractionRegion === 'timewheel' && currFocusDescriber === 'timewheel-curr-hour'\n        (this is the case when we open any timewheel ONLY)\n    */\n    let shouldShortCircuit = false;\n    // preselected date OR filled date value OR onCalendarOpenFocusedDay is present\n    if (latestInteractionRegion === 'calendar-days' && currFocusDescriber === 'calendar-metafocused-day')\n      shouldShortCircuit = true;\n    // empty date value AND no onCalendarOpenFocusedDay is present\n    if (latestInteractionRegion === 'calendar-head' && currFocusDescriber === 'calendar-prev-month')\n      shouldShortCircuit = true;\n\n    // only time wheel is present in the contextual region\n    if (latestInteractionRegion === 'timewheel' && currFocusDescriber === 'timewheel-curr-hour')\n      shouldShortCircuit = true;\n\n    if (shouldShortCircuit) return;\n    trackFocusResetter();\n  }, [currFocusDescriber, latestInteractionRegion, trackFocusResetter]);\n\n  return useMemo(\n    () => ({\n      latestInteractionRegion,\n      setLatestInteractionRegion,\n      currFocusDescriber,\n      setCurrFocusDescriber,\n      trackFocusResetter,\n      trackFocusMonthInput: () => {\n        if (latestInteractionRegion !== 'date-inputs') setLatestInteractionRegion('date-inputs');\n        if (currFocusDescriber !== 'month-input') setCurrFocusDescriber('month-input');\n      },\n      trackFocusDayInput: () => {\n        if (latestInteractionRegion !== 'date-inputs') setLatestInteractionRegion('date-inputs');\n        if (currFocusDescriber !== 'day-input') setCurrFocusDescriber('day-input');\n      },\n      trackFocusYearInput: () => {\n        if (latestInteractionRegion !== 'date-inputs') setLatestInteractionRegion('date-inputs');\n        if (currFocusDescriber !== 'year-input') setCurrFocusDescriber('year-input');\n      },\n      trackFocusHourInput: () => {\n        if (latestInteractionRegion !== 'time-inputs') setLatestInteractionRegion('time-inputs');\n        if (currFocusDescriber !== 'hour-input') setCurrFocusDescriber('hour-input');\n      },\n      trackFocusMinuteInput: () => {\n        if (latestInteractionRegion !== 'time-inputs') setLatestInteractionRegion('time-inputs');\n        if (currFocusDescriber !== 'minute-input') setCurrFocusDescriber('minute-input');\n      },\n      trackFocusMeridiemInput: () => {\n        if (latestInteractionRegion !== 'time-inputs') setLatestInteractionRegion('time-inputs');\n        if (currFocusDescriber !== 'meridiem-input') setCurrFocusDescriber('meridiem-input');\n      },\n      trackFocusClearBtn: () => {\n        if (latestInteractionRegion !== 'clear-btn') setLatestInteractionRegion('clear-btn');\n        if (currFocusDescriber !== 'clear-btn') setCurrFocusDescriber('clear-btn');\n      },\n      trackFocusDatePickerIcon: () => {\n        if (latestInteractionRegion !== 'picker-icon') setLatestInteractionRegion('picker-icon');\n        if (currFocusDescriber !== 'date-picker-icon') setCurrFocusDescriber('date-picker-icon');\n      },\n      trackFocusTimePickerIcon: () => {\n        if (latestInteractionRegion !== 'picker-icon') setLatestInteractionRegion('picker-icon');\n        if (currFocusDescriber !== 'time-picker-icon') setCurrFocusDescriber('time-picker-icon');\n      },\n      trackFocusDatetimePickerIcon: () => {\n        if (latestInteractionRegion !== 'picker-icon') setLatestInteractionRegion('picker-icon');\n        if (currFocusDescriber !== 'datetime-picker-icon') setCurrFocusDescriber('datetime-picker-icon');\n      },\n      trackFocusCalendarPrevMonth: () => {\n        if (latestInteractionRegion !== 'calendar-head') setLatestInteractionRegion('calendar-head');\n        if (currFocusDescriber !== 'calendar-prev-month') setCurrFocusDescriber('calendar-prev-month');\n      },\n      trackFocusCalendarNextMonth: () => {\n        if (latestInteractionRegion !== 'calendar-head') setLatestInteractionRegion('calendar-head');\n        if (currFocusDescriber !== 'calendar-next-month') setCurrFocusDescriber('calendar-next-month');\n      },\n      trackFocusCalendarPrevYear: () => {\n        if (latestInteractionRegion !== 'calendar-head') setLatestInteractionRegion('calendar-head');\n        if (currFocusDescriber !== 'calendar-prev-year') setCurrFocusDescriber('calendar-prev-year');\n      },\n      trackFocusCalendarNextYear: () => {\n        if (latestInteractionRegion !== 'calendar-head') setLatestInteractionRegion('calendar-head');\n        if (currFocusDescriber !== 'calendar-next-year') setCurrFocusDescriber('calendar-next-year');\n      },\n      trackFocusCalendarMetafocusedDay: () => {\n        if (latestInteractionRegion !== 'calendar-days') setLatestInteractionRegion('calendar-days');\n        if (currFocusDescriber !== 'calendar-metafocused-day') setCurrFocusDescriber('calendar-metafocused-day');\n      },\n      trackFocusTimewheelCurrHour: () => {\n        if (latestInteractionRegion !== 'timewheel') setLatestInteractionRegion('timewheel');\n        if (currFocusDescriber !== 'timewheel-curr-hour') setCurrFocusDescriber('timewheel-curr-hour');\n      },\n      trackFocusTimewheelCurrMinute: () => {\n        if (latestInteractionRegion !== 'timewheel') setLatestInteractionRegion('timewheel');\n        if (currFocusDescriber !== 'timewheel-curr-minute') setCurrFocusDescriber('timewheel-curr-minute');\n      },\n      trackFocusTimewheelCurrMeridiem: () => {\n        if (latestInteractionRegion !== 'timewheel') setLatestInteractionRegion('timewheel');\n        if (currFocusDescriber !== 'timewheel-curr-meridiem') setCurrFocusDescriber('timewheel-curr-meridiem');\n      },\n      trackFocusPicker,\n      trackFocusFirstSegment,\n      trackFocusLastSegment,\n      handleComponentBlurs,\n    }),\n    [\n      latestInteractionRegion,\n      currFocusDescriber,\n      trackFocusResetter,\n      trackFocusPicker,\n      trackFocusFirstSegment,\n      trackFocusLastSegment,\n      handleComponentBlurs,\n    ],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["/* eslint-disable complexity */\n/* eslint-disable max-lines */\n/* eslint-disable indent */\n/* eslint-disable max-params */\n/* eslint-disable max-statements */\nimport { useCallback, useMemo, useState } from 'react';\nimport type { useGetReferences } from './useGetReferences.js';\nimport type { useGetFlags } from './useGetFlags.js';\n\ntype LatestInteractionRegion =\n  | 'calendar-days'\n  | 'calendar-head'\n  | 'timewheel'\n  | 'date-inputs'\n  | 'time-inputs'\n  | 'clear-btn'\n  | 'picker-icon'\n  | '';\ntype CurrFocusDescriber =\n  | 'first-segment'\n  | 'month-input'\n  | 'day-input'\n  | 'year-input'\n  | 'hour-input'\n  | 'minute-input'\n  | 'meridiem-input'\n  | 'last-segment'\n  | 'clear-btn'\n  | 'date-picker-icon'\n  | 'time-picker-icon'\n  | 'datetime-picker-icon'\n  | 'calendar-prev-month'\n  | 'calendar-next-month'\n  | 'calendar-prev-year'\n  | 'calendar-next-year'\n  | 'calendar-metafocused-day'\n  | 'timewheel-curr-hour'\n  | 'timewheel-curr-minute'\n  | 'timewheel-curr-meridiem'\n  | '';\n\ninterface Config {\n  DOMRefs: ReturnType<typeof useGetReferences>;\n  flags: ReturnType<typeof useGetFlags>;\n}\nexport const useFocusTracker = ({ DOMRefs, flags }: Config) => {\n  const [latestInteractionRegion, setLatestInteractionRegion] = useState<LatestInteractionRegion>('');\n  const [currFocusDescriber, setCurrFocusDescriber] = useState<CurrFocusDescriber>('');\n  const { firstSegment, lastSegment } = DOMRefs;\n  const { isDateSelector, isTimeSelector, isControllerOnly } = flags;\n\n  const trackFocusPicker = useCallback(() => {\n    let picker = 'datetime-picker-icon' as CurrFocusDescriber;\n    if (isDateSelector) picker = 'date-picker-icon';\n    if (isTimeSelector) picker = 'time-picker-icon';\n    if (latestInteractionRegion !== 'picker-icon') setLatestInteractionRegion('picker-icon');\n    if (picker !== currFocusDescriber) setCurrFocusDescriber(picker);\n  }, [currFocusDescriber, isDateSelector, isTimeSelector, latestInteractionRegion]);\n\n  /*\n   depending on the polymorphic props, the first segment can be:\n    - month-input (when date inputs are present)\n    - hour-input (when ONLY time inputs are present)\n    - datetime-picker-icon (when picker is present and we are selecting both date and time)\n    - date-picker-icon (when picker is present and no time selection is involved)\n    - time-picker-icon (when picker is present and no date selection is involved)\n  */\n  const trackFocusFirstSegment = useCallback(() => {\n    let region = 'date-inputs' as LatestInteractionRegion;\n    if (firstSegment === 'hour-input') region = 'time-inputs';\n    if (firstSegment === 'date-picker-icon') region = 'picker-icon';\n    if (firstSegment === 'time-picker-icon') region = 'picker-icon';\n    if (firstSegment === 'datetime-picker-icon') region = 'picker-icon';\n    if (region !== latestInteractionRegion) setLatestInteractionRegion(region);\n    if (firstSegment !== currFocusDescriber) setCurrFocusDescriber(firstSegment);\n  }, [currFocusDescriber, firstSegment, latestInteractionRegion]);\n\n  /*\n   depending on the polymorphic props, the last segment can be:\n    - year-input (when ONLY date inputs are present)\n    - meridiem-input (when time inputs are present)\n    - clear-btn (when clearable is true and there is no picker)\n    - datetime-picker-icon (when picker is present and we are selecting both date and time)\n    - date-picker-icon (when picker is present and no time selection is involved)\n    - time-picker-icon (when picker is present and no date selection is involved)\n  */\n  const trackFocusLastSegment = useCallback(() => {\n    let region = 'date-inputs' as LatestInteractionRegion;\n    if (lastSegment === 'meridiem-input') region = 'time-inputs';\n    if (lastSegment === 'clear-btn') region = 'clear-btn';\n    if (lastSegment === 'date-picker-icon') region = 'picker-icon';\n    if (lastSegment === 'time-picker-icon') region = 'picker-icon';\n    if (lastSegment === 'datetime-picker-icon') region = 'picker-icon';\n    if (region !== latestInteractionRegion) setLatestInteractionRegion(region);\n    if (lastSegment !== currFocusDescriber) setCurrFocusDescriber(lastSegment);\n  }, [currFocusDescriber, lastSegment, latestInteractionRegion]);\n\n  const trackFocusResetter = useCallback(() => {\n    if (latestInteractionRegion !== '') setLatestInteractionRegion('');\n    if (currFocusDescriber !== '') setCurrFocusDescriber('');\n  }, [currFocusDescriber, latestInteractionRegion]);\n\n  const handleComponentBlurs = useCallback(\n    (e: React.FocusEvent<HTMLElement>) => {\n      /**\n       * In controller only mode, we want to reset the focus tracker when the user moves focus outside of the component\n       * this is because in controller only mode we don't have a portal that we need to account for,\n       * so any blur event that happens when we are in controller only mode should be treated as a user moving focus outside of the component\n       */\n      if (isControllerOnly) {\n        const relatedTarget = e.relatedTarget as HTMLElement | null;\n        if (relatedTarget && (e.currentTarget as HTMLElement).contains(relatedTarget)) {\n          return;\n        }\n        trackFocusResetter();\n        return;\n      }\n      /* our code base is trying to avoid side-effects and we also try to be imperative\n    due to how \"portals\" work, when we open a portal the \"blur\" event is triggered\n    we need to distinguish between\n     - a blur that is caused by a portal opening\n           vs\n     - a blur that is caused by a user moving focus to another element\n    we can do this by checking the currFocusDescriber and latestInteractionRegion\n    we know that blur is triggered by portal opening when:\n      - latestInteractionRegion === 'calendar-days' && currFocusDescriber === 'calendar-metafocused-day'\n        (this is the case when we open the calendar or calendarWithTimeWheel with a preselected date)\n      - latestInteractionRegion === 'calendar-head' && currFocusDescriber === 'calendar-prev-month'\n        (this is the case when we open the calendar or calendarWithTimeWheel without a preselected date)\n      - latestInteractionRegion === 'timewheel' && currFocusDescriber === 'timewheel-curr-hour'\n        (this is the case when we open any timewheel ONLY)\n    */\n      let shouldShortCircuit = false;\n      // preselected date OR filled date value OR onCalendarOpenFocusedDay is present\n      if (latestInteractionRegion === 'calendar-days' && currFocusDescriber === 'calendar-metafocused-day')\n        shouldShortCircuit = true;\n      // empty date value AND no onCalendarOpenFocusedDay is present\n      if (latestInteractionRegion === 'calendar-head' && currFocusDescriber === 'calendar-prev-month')\n        shouldShortCircuit = true;\n\n      // only time wheel is present in the contextual region\n      if (latestInteractionRegion === 'timewheel' && currFocusDescriber === 'timewheel-curr-hour')\n        shouldShortCircuit = true;\n\n      if (shouldShortCircuit) return;\n      trackFocusResetter();\n    },\n    [currFocusDescriber, isControllerOnly, latestInteractionRegion, trackFocusResetter],\n  );\n\n  return useMemo(\n    () => ({\n      latestInteractionRegion,\n      setLatestInteractionRegion,\n      currFocusDescriber,\n      setCurrFocusDescriber,\n      trackFocusResetter,\n      trackFocusMonthInput: () => {\n        if (latestInteractionRegion !== 'date-inputs') setLatestInteractionRegion('date-inputs');\n        if (currFocusDescriber !== 'month-input') setCurrFocusDescriber('month-input');\n      },\n      trackFocusDayInput: () => {\n        if (latestInteractionRegion !== 'date-inputs') setLatestInteractionRegion('date-inputs');\n        if (currFocusDescriber !== 'day-input') setCurrFocusDescriber('day-input');\n      },\n      trackFocusYearInput: () => {\n        if (latestInteractionRegion !== 'date-inputs') setLatestInteractionRegion('date-inputs');\n        if (currFocusDescriber !== 'year-input') setCurrFocusDescriber('year-input');\n      },\n      trackFocusHourInput: () => {\n        if (latestInteractionRegion !== 'time-inputs') setLatestInteractionRegion('time-inputs');\n        if (currFocusDescriber !== 'hour-input') setCurrFocusDescriber('hour-input');\n      },\n      trackFocusMinuteInput: () => {\n        if (latestInteractionRegion !== 'time-inputs') setLatestInteractionRegion('time-inputs');\n        if (currFocusDescriber !== 'minute-input') setCurrFocusDescriber('minute-input');\n      },\n      trackFocusMeridiemInput: () => {\n        if (latestInteractionRegion !== 'time-inputs') setLatestInteractionRegion('time-inputs');\n        if (currFocusDescriber !== 'meridiem-input') setCurrFocusDescriber('meridiem-input');\n      },\n      trackFocusClearBtn: () => {\n        if (latestInteractionRegion !== 'clear-btn') setLatestInteractionRegion('clear-btn');\n        if (currFocusDescriber !== 'clear-btn') setCurrFocusDescriber('clear-btn');\n      },\n      trackFocusDatePickerIcon: () => {\n        if (latestInteractionRegion !== 'picker-icon') setLatestInteractionRegion('picker-icon');\n        if (currFocusDescriber !== 'date-picker-icon') setCurrFocusDescriber('date-picker-icon');\n      },\n      trackFocusTimePickerIcon: () => {\n        if (latestInteractionRegion !== 'picker-icon') setLatestInteractionRegion('picker-icon');\n        if (currFocusDescriber !== 'time-picker-icon') setCurrFocusDescriber('time-picker-icon');\n      },\n      trackFocusDatetimePickerIcon: () => {\n        if (latestInteractionRegion !== 'picker-icon') setLatestInteractionRegion('picker-icon');\n        if (currFocusDescriber !== 'datetime-picker-icon') setCurrFocusDescriber('datetime-picker-icon');\n      },\n      trackFocusCalendarPrevMonth: () => {\n        if (latestInteractionRegion !== 'calendar-head') setLatestInteractionRegion('calendar-head');\n        if (currFocusDescriber !== 'calendar-prev-month') setCurrFocusDescriber('calendar-prev-month');\n      },\n      trackFocusCalendarNextMonth: () => {\n        if (latestInteractionRegion !== 'calendar-head') setLatestInteractionRegion('calendar-head');\n        if (currFocusDescriber !== 'calendar-next-month') setCurrFocusDescriber('calendar-next-month');\n      },\n      trackFocusCalendarPrevYear: () => {\n        if (latestInteractionRegion !== 'calendar-head') setLatestInteractionRegion('calendar-head');\n        if (currFocusDescriber !== 'calendar-prev-year') setCurrFocusDescriber('calendar-prev-year');\n      },\n      trackFocusCalendarNextYear: () => {\n        if (latestInteractionRegion !== 'calendar-head') setLatestInteractionRegion('calendar-head');\n        if (currFocusDescriber !== 'calendar-next-year') setCurrFocusDescriber('calendar-next-year');\n      },\n      trackFocusCalendarMetafocusedDay: () => {\n        if (latestInteractionRegion !== 'calendar-days') setLatestInteractionRegion('calendar-days');\n        if (currFocusDescriber !== 'calendar-metafocused-day') setCurrFocusDescriber('calendar-metafocused-day');\n      },\n      trackFocusTimewheelCurrHour: () => {\n        if (latestInteractionRegion !== 'timewheel') setLatestInteractionRegion('timewheel');\n        if (currFocusDescriber !== 'timewheel-curr-hour') setCurrFocusDescriber('timewheel-curr-hour');\n      },\n      trackFocusTimewheelCurrMinute: () => {\n        if (latestInteractionRegion !== 'timewheel') setLatestInteractionRegion('timewheel');\n        if (currFocusDescriber !== 'timewheel-curr-minute') setCurrFocusDescriber('timewheel-curr-minute');\n      },\n      trackFocusTimewheelCurrMeridiem: () => {\n        if (latestInteractionRegion !== 'timewheel') setLatestInteractionRegion('timewheel');\n        if (currFocusDescriber !== 'timewheel-curr-meridiem') setCurrFocusDescriber('timewheel-curr-meridiem');\n      },\n      trackFocusPicker,\n      trackFocusFirstSegment,\n      trackFocusLastSegment,\n      handleComponentBlurs,\n    }),\n    [\n      latestInteractionRegion,\n      currFocusDescriber,\n      trackFocusResetter,\n      trackFocusPicker,\n      trackFocusFirstSegment,\n      trackFocusLastSegment,\n      handleComponentBlurs,\n    ],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/cjs/index.js CHANGED Viewed

@@ -37,6 +37,7 @@ __export(index_exports, {
   DSControlledDateTimePickerSlotsFlatten: () => import_constants.DSControlledDateTimePickerSlotsFlatten,
   DSControlledDateTimePickerWithSchema: () => import_ControlledDateTimePicker.DSControlledDateTimePickerWithSchema,
   deconstructValuesFromDateString: () => import_stringHelpers.deconstructValuesFromDateString,
+  getAriaDayFromDateString: () => import_stringHelpers.getAriaDayFromDateString,
   getDateStringFromDay: () => import_dateHelpers.getDateStringFromDay,
   getDateValuesFromDate: () => import_dateHelpers.getDateValuesFromDate,
   getDayFromDateString: () => import_dateHelpers.getDayFromDateString,

package/dist/cjs/index.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/index.ts", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["export {\n  ControlledDateTimePickerDatatestid,\n  ControlledDateTimePickerDatatestidFlattened,\n  DSControlledDateTimePickerName,\n  DSControlledDateTimePickerSlots,\n  DSControlledDateTimePickerSlotsFlatten,\n} from './constants/index.js';\nexport { DSControlledDateTimePicker, DSControlledDateTimePickerWithSchema } from './ControlledDateTimePicker.js';\n\nexport { CONTROLLED_DATE_TIME_PICKER_TYPES } from './constants/ControlledDateTimePickerTypes.js';\nexport { type DSControlledDateTimePickerT } from './react-desc-prop-types.js';\nexport {\n  getDateStringFromDay,\n  getDateValuesFromDate,\n  getDayFromDateString,\n  getValidationDateStringMetaInfo,\n} from './utils/dateHelpers.js';\nexport { getValidationDateTimeStringMetaInfo } from './utils/dateTimeHelpers.js';\nexport {\n  deconstructValuesFromDateString,\n  isValidDateString,\n  isValidTimeString,\n  prependStringWithPlaceHolders,\n} from './utils/stringHelpers.js';\nexport { getValidationTimeStringMetaInfo } from './utils/timeHelpers.js';\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAMO;AACP,sCAAiF;AAEjF,2CAAkD;AAElD,yBAKO;AACP,6BAAoD;AACpD,2BAKO;AACP,yBAAgD;",
+  "sourcesContent": ["export {\n  ControlledDateTimePickerDatatestid,\n  ControlledDateTimePickerDatatestidFlattened,\n  DSControlledDateTimePickerName,\n  DSControlledDateTimePickerSlots,\n  DSControlledDateTimePickerSlotsFlatten,\n} from './constants/index.js';\nexport { DSControlledDateTimePicker, DSControlledDateTimePickerWithSchema } from './ControlledDateTimePicker.js';\n\nexport { CONTROLLED_DATE_TIME_PICKER_TYPES } from './constants/ControlledDateTimePickerTypes.js';\nexport { type DSControlledDateTimePickerT } from './react-desc-prop-types.js';\nexport {\n  getDateStringFromDay,\n  getDateValuesFromDate,\n  getDayFromDateString,\n  getValidationDateStringMetaInfo,\n} from './utils/dateHelpers.js';\nexport { getValidationDateTimeStringMetaInfo } from './utils/dateTimeHelpers.js';\nexport {\n  deconstructValuesFromDateString,\n  isValidDateString,\n  isValidTimeString,\n  prependStringWithPlaceHolders,\n  getAriaDayFromDateString,\n} from './utils/stringHelpers.js';\nexport { getValidationTimeStringMetaInfo } from './utils/timeHelpers.js';\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAMO;AACP,sCAAiF;AAEjF,2CAAkD;AAElD,yBAKO;AACP,6BAAoD;AACpD,2BAMO;AACP,yBAAgD;",
   "names": []
 }

package/dist/cjs/parts/ControlledDateTimePickerContent.js CHANGED Viewed

@@ -84,7 +84,7 @@ const ControlledDateTimePickerContent = () => {
       "data-testid": import_constants.ControlledDateTimePickerDatatestid.CONTAINER,
       getOwnerProps: getProps,
       onlyPicker,
-      readOnlyStyles: readOnly || applyAriaDisabled,
+      $readOnlyStyles: readOnly || applyAriaDisabled,
       ...styledsAttrs,
       ...(0, import_lodash_es.omit)(globalAttrs, "tabIndex", "autoFocus"),
       ...xstyledAttrs,

package/dist/cjs/parts/ControlledDateTimePickerContent.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/parts/ControlledDateTimePickerContent.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable complexity */\nimport { Grid } from '@elliemae/ds-grid';\nimport { omit } from 'lodash-es';\nimport { useContext } from 'react';\nimport { ControlledDateTimePickerDatatestid } from '../constants/index.js';\nimport { ControlledDateTimePickerContext } from '../ControlledDateTimePickerCTX.js';\nimport { ClearButton } from './ClearButton/ClearButton.js';\nimport { DateInputs } from './DateInputs/DateInputs.js';\nimport { PickersIcons } from './Pickers/PickersIcons.js';\nimport { StyledInputsWrapperGrid } from './Styleds.js';\nimport { TimeInputs } from './TimeInputs/TimeInputs.js';\n\nexport const ControlledDateTimePickerContent = (): JSX.Element => {\n  const {\n    props: { hasError, disabled, readOnly, applyAriaDisabled },\n    getProps,\n    hideDate,\n    hideTime,\n    withAnyPicker,\n    withAnyRightController,\n    shouldPreserveClearableSpace,\n    isControllerOnly,\n    globalAttrs,\n    xstyledAttrs,\n    onGlobalKeyDown,\n    handleComponentBlurs,\n  } = useContext(ControlledDateTimePickerContext);\n\n  const styledsAttrs = {\n    justPicker: hideDate && hideTime,\n    withAnyPicker,\n    hasError,\n    isControllerOnly,\n  };\n\n  const mainCols = [];\n  if (!hideDate) mainCols.push('auto');\n  if (!hideTime) mainCols.push('auto');\n  if (withAnyRightController) mainCols.push('auto');\n\n  const rightControlCols = [];\n  if (shouldPreserveClearableSpace) rightControlCols.push('28px');\n  if (withAnyPicker) rightControlCols.push('auto');\n\n  const onlyPicker = hideDate && hideTime;\n  return (\n    <>\n      {/* The <div> element is catching the component-wise global hotkeys, there is no valid aria role for this */}\n      {/* eslint-disable-next-line max-len */}\n      {/* https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-static-element-interactions.md#case-the-event-handler-is-only-being-used-to-capture-bubbled-events */}\n      {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}\n      <StyledInputsWrapperGrid\n        cols={mainCols}\n        gutter=\"xxs\"\n        pr={!withAnyRightController ? '2px' : '0px'}\n        onKeyDown={onGlobalKeyDown}\n        disabled={disabled}\n        onBlur={handleComponentBlurs}\n        data-testid={ControlledDateTimePickerDatatestid.CONTAINER}\n        getOwnerProps={getProps}\n        onlyPicker={onlyPicker}\n        readOnlyStyles={readOnly || applyAriaDisabled}\n        {...styledsAttrs}\n        {...omit(globalAttrs, 'tabIndex', 'autoFocus')}\n        {...xstyledAttrs}\n      >\n        {hideDate ? null : <DateInputs />}\n        {hideTime ? null : <TimeInputs />}\n        {withAnyRightController ? (\n          <Grid cols={rightControlCols}>\n            {shouldPreserveClearableSpace ? <ClearButton /> : null}\n            {withAnyPicker ? <PickersIcons /> : null}\n          </Grid>\n        ) : null}\n      </StyledInputsWrapperGrid>\n    </>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD8CnB;AA7CJ,qBAAqB;AACrB,uBAAqB;AACrB,mBAA2B;AAC3B,uBAAmD;AACnD,yCAAgD;AAChD,yBAA4B;AAC5B,wBAA2B;AAC3B,0BAA6B;AAC7B,qBAAwC;AACxC,wBAA2B;AAEpB,MAAM,kCAAkC,MAAmB;AAChE,QAAM;AAAA,IACJ,OAAO,EAAE,UAAU,UAAU,UAAU,kBAAkB;AAAA,IACzD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,kEAA+B;AAE9C,QAAM,eAAe;AAAA,IACnB,YAAY,YAAY;AAAA,IACxB;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,QAAM,WAAW,CAAC;AAClB,MAAI,CAAC,SAAU,UAAS,KAAK,MAAM;AACnC,MAAI,CAAC,SAAU,UAAS,KAAK,MAAM;AACnC,MAAI,uBAAwB,UAAS,KAAK,MAAM;AAEhD,QAAM,mBAAmB,CAAC;AAC1B,MAAI,6BAA8B,kBAAiB,KAAK,MAAM;AAC9D,MAAI,cAAe,kBAAiB,KAAK,MAAM;AAE/C,QAAM,aAAa,YAAY;AAC/B,SACE,2EAKE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM;AAAA,MACN,QAAO;AAAA,MACP,IAAI,CAAC,yBAAyB,QAAQ;AAAA,MACtC,WAAW;AAAA,MACX;AAAA,MACA,QAAQ;AAAA,MACR,eAAa,oDAAmC;AAAA,MAChD,eAAe;AAAA,MACf;AAAA,MACA,gBAAgB,YAAY;AAAA,MAC3B,GAAG;AAAA,MACH,OAAG,uBAAK,aAAa,YAAY,WAAW;AAAA,MAC5C,GAAG;AAAA,MAEH;AAAA,mBAAW,OAAO,4CAAC,gCAAW;AAAA,QAC9B,WAAW,OAAO,4CAAC,gCAAW;AAAA,QAC9B,yBACC,6CAAC,uBAAK,MAAM,kBACT;AAAA,yCAA+B,4CAAC,kCAAY,IAAK;AAAA,UACjD,gBAAgB,4CAAC,oCAAa,IAAK;AAAA,WACtC,IACE;AAAA;AAAA;AAAA,EACN,GACF;AAEJ;",
+  "sourcesContent": ["/* eslint-disable complexity */\nimport { Grid } from '@elliemae/ds-grid';\nimport { omit } from 'lodash-es';\nimport { useContext } from 'react';\nimport { ControlledDateTimePickerDatatestid } from '../constants/index.js';\nimport { ControlledDateTimePickerContext } from '../ControlledDateTimePickerCTX.js';\nimport { ClearButton } from './ClearButton/ClearButton.js';\nimport { DateInputs } from './DateInputs/DateInputs.js';\nimport { PickersIcons } from './Pickers/PickersIcons.js';\nimport { StyledInputsWrapperGrid } from './Styleds.js';\nimport { TimeInputs } from './TimeInputs/TimeInputs.js';\n\nexport const ControlledDateTimePickerContent = (): JSX.Element => {\n  const {\n    props: { hasError, disabled, readOnly, applyAriaDisabled },\n    getProps,\n    hideDate,\n    hideTime,\n    withAnyPicker,\n    withAnyRightController,\n    shouldPreserveClearableSpace,\n    isControllerOnly,\n    globalAttrs,\n    xstyledAttrs,\n    onGlobalKeyDown,\n    handleComponentBlurs,\n  } = useContext(ControlledDateTimePickerContext);\n\n  const styledsAttrs = {\n    justPicker: hideDate && hideTime,\n    withAnyPicker,\n    hasError,\n    isControllerOnly,\n  };\n\n  const mainCols = [];\n  if (!hideDate) mainCols.push('auto');\n  if (!hideTime) mainCols.push('auto');\n  if (withAnyRightController) mainCols.push('auto');\n\n  const rightControlCols = [];\n  if (shouldPreserveClearableSpace) rightControlCols.push('28px');\n  if (withAnyPicker) rightControlCols.push('auto');\n\n  const onlyPicker = hideDate && hideTime;\n  return (\n    <>\n      {/* The <div> element is catching the component-wise global hotkeys, there is no valid aria role for this */}\n      {/* eslint-disable-next-line max-len */}\n      {/* https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-static-element-interactions.md#case-the-event-handler-is-only-being-used-to-capture-bubbled-events */}\n      {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}\n      <StyledInputsWrapperGrid\n        cols={mainCols}\n        gutter=\"xxs\"\n        pr={!withAnyRightController ? '2px' : '0px'}\n        onKeyDown={onGlobalKeyDown}\n        disabled={disabled}\n        onBlur={handleComponentBlurs}\n        data-testid={ControlledDateTimePickerDatatestid.CONTAINER}\n        getOwnerProps={getProps}\n        onlyPicker={onlyPicker}\n        $readOnlyStyles={readOnly || applyAriaDisabled}\n        {...styledsAttrs}\n        {...omit(globalAttrs, 'tabIndex', 'autoFocus')}\n        {...xstyledAttrs}\n      >\n        {hideDate ? null : <DateInputs />}\n        {hideTime ? null : <TimeInputs />}\n        {withAnyRightController ? (\n          <Grid cols={rightControlCols}>\n            {shouldPreserveClearableSpace ? <ClearButton /> : null}\n            {withAnyPicker ? <PickersIcons /> : null}\n          </Grid>\n        ) : null}\n      </StyledInputsWrapperGrid>\n    </>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD8CnB;AA7CJ,qBAAqB;AACrB,uBAAqB;AACrB,mBAA2B;AAC3B,uBAAmD;AACnD,yCAAgD;AAChD,yBAA4B;AAC5B,wBAA2B;AAC3B,0BAA6B;AAC7B,qBAAwC;AACxC,wBAA2B;AAEpB,MAAM,kCAAkC,MAAmB;AAChE,QAAM;AAAA,IACJ,OAAO,EAAE,UAAU,UAAU,UAAU,kBAAkB;AAAA,IACzD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,kEAA+B;AAE9C,QAAM,eAAe;AAAA,IACnB,YAAY,YAAY;AAAA,IACxB;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,QAAM,WAAW,CAAC;AAClB,MAAI,CAAC,SAAU,UAAS,KAAK,MAAM;AACnC,MAAI,CAAC,SAAU,UAAS,KAAK,MAAM;AACnC,MAAI,uBAAwB,UAAS,KAAK,MAAM;AAEhD,QAAM,mBAAmB,CAAC;AAC1B,MAAI,6BAA8B,kBAAiB,KAAK,MAAM;AAC9D,MAAI,cAAe,kBAAiB,KAAK,MAAM;AAE/C,QAAM,aAAa,YAAY;AAC/B,SACE,2EAKE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM;AAAA,MACN,QAAO;AAAA,MACP,IAAI,CAAC,yBAAyB,QAAQ;AAAA,MACtC,WAAW;AAAA,MACX;AAAA,MACA,QAAQ;AAAA,MACR,eAAa,oDAAmC;AAAA,MAChD,eAAe;AAAA,MACf;AAAA,MACA,iBAAiB,YAAY;AAAA,MAC5B,GAAG;AAAA,MACH,OAAG,uBAAK,aAAa,YAAY,WAAW;AAAA,MAC5C,GAAG;AAAA,MAEH;AAAA,mBAAW,OAAO,4CAAC,gCAAW;AAAA,QAC9B,WAAW,OAAO,4CAAC,gCAAW;AAAA,QAC9B,yBACC,6CAAC,uBAAK,MAAM,kBACT;AAAA,yCAA+B,4CAAC,kCAAY,IAAK;AAAA,UACjD,gBAAgB,4CAAC,oCAAa,IAAK;AAAA,WACtC,IACE;AAAA;AAAA;AAAA,EACN,GACF;AAEJ;",
   "names": []
 }

package/dist/cjs/parts/DateInputs/DDInput.js CHANGED Viewed

@@ -36,6 +36,8 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = __toESM(require("react"));
 var import_constants = require("../../constants/index.js");
 var import_Styleds = require("../Styleds.js");
+var import_constants2 = require("../../utils/constants.js");
+var import_numberHelpers = require("../../utils/numberHelpers.js");
 const regExpNumbers = /^[0-9]+$/;
 const isInvalidDay = (day) => {
   if (day === "") return false;
@@ -70,6 +72,7 @@ const DDInput = import_react.default.memo(
       },
       [onChange]
     );
+    const dayNum = (0, import_numberHelpers.convertToPositiveNumberIfPossible)(value);
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_Styleds.StyledDateInput,
       {
@@ -90,7 +93,12 @@ const DDInput = import_react.default.memo(
         "aria-disabled": applyAriaDisabled,
         "aria-invalid": hasError,
         getOwnerProps: getProps,
-        readOnly
+        readOnly,
+        role: "spinbutton",
+        "aria-valuemin": 1,
+        "aria-valuemax": 31,
+        "aria-valuenow": dayNum === -1 ? void 0 : dayNum,
+        "aria-valuetext": dayNum === -1 ? "empty" : import_constants2.announcableCardinalDays[dayNum]
       }
     );
   }

package/dist/cjs/parts/DateInputs/DDInput.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/DateInputs/DDInput.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["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 { StyledDateInput } from '../Styleds.js';\n\nconst regExpNumbers = /^[0-9]+$/;\nconst isInvalidDay = (day: string) => {\n  if (day === '') return false;\n  const numberOnly = regExpNumbers.test(day);\n  return day.length > 2 || day === '00' || !numberOnly || Number.parseInt(day, 10) > 31;\n};\n\ninterface DDInputsPropsT {\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  placeholder: string;\n  ariaCurrentValueForInputs: string;\n  contextRef: React.MutableRefObject<HTMLInputElement | null>;\n  tabIndex?: TypescriptHelpersT.WCAGTabIndex;\n  isFocused: boolean;\n  getProps: ControlledDateTimePickerContextT['getProps'];\n  readOnly: boolean;\n}\nexport const DDInput = React.memo(\n  ({\n    onChange,\n    onBlur,\n    onFocus,\n    onKeyDown,\n    value,\n    disabled,\n    applyAriaDisabled,\n    hasError,\n    contextRef,\n    tabIndex,\n    placeholder,\n    ariaCurrentValueForInputs,\n    isFocused,\n    getProps,\n    readOnly,\n  }: DDInputsPropsT): JSX.Element => {\n    const validateOnChange = useCallback(\n      (e: React.ChangeEvent<HTMLInputElement>) => {\n        if (isInvalidDay(e?.currentTarget?.value)) {\n          e.preventDefault();\n          return;\n        }\n        onChange(e);\n      },\n      [onChange],\n    );\n    return (\n      <StyledDateInput\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        placeholder={placeholder}\n        aria-label={`day input field, ${ariaCurrentValueForInputs}`}\n        data-testid={ControlledDateTimePickerDatatestid.DATE_INPUTS.DAY}\n        disabled={disabled}\n        aria-disabled={applyAriaDisabled}\n        aria-invalid={hasError}\n        getOwnerProps={getProps}\n        readOnly={readOnly}\n      />\n    );\n  },\n);\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD4DjB;AA3DN,mBAAmC;AAEnC,uBAAmD;AAEnD,qBAAgC;AAEhC,MAAM,gBAAgB;AACtB,MAAM,eAAe,CAAC,QAAgB;AACpC,MAAI,QAAQ,GAAI,QAAO;AACvB,QAAM,aAAa,cAAc,KAAK,GAAG;AACzC,SAAO,IAAI,SAAS,KAAK,QAAQ,QAAQ,CAAC,cAAc,OAAO,SAAS,KAAK,EAAE,IAAI;AACrF;AAmBO,MAAM,UAAU,aAAAA,QAAM;AAAA,EAC3B,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,MAAmC;AACjC,UAAM,uBAAmB;AAAA,MACvB,CAAC,MAA2C;AAC1C,YAAI,aAAa,GAAG,eAAe,KAAK,GAAG;AACzC,YAAE,eAAe;AACjB;AAAA,QACF;AACA,iBAAS,CAAC;AAAA,MACZ;AAAA,MACA,CAAC,QAAQ;AAAA,IACX;AACA,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;AAAA,QACA,cAAY,oBAAoB,yBAAyB;AAAA,QACzD,eAAa,oDAAmC,YAAY;AAAA,QAC5D;AAAA,QACA,iBAAe;AAAA,QACf,gBAAc;AAAA,QACd,eAAe;AAAA,QACf;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;",
-  "names": ["React"]
+  "sourcesContent": ["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 { StyledDateInput } from '../Styleds.js';\nimport { announcableCardinalDays } from '../../utils/constants.js';\nimport { convertToPositiveNumberIfPossible } from '../../utils/numberHelpers.js';\n\nconst regExpNumbers = /^[0-9]+$/;\nconst isInvalidDay = (day: string) => {\n  if (day === '') return false;\n  const numberOnly = regExpNumbers.test(day);\n  return day.length > 2 || day === '00' || !numberOnly || Number.parseInt(day, 10) > 31;\n};\n\ninterface DDInputsPropsT {\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  placeholder: string;\n  ariaCurrentValueForInputs: string;\n  contextRef: React.MutableRefObject<HTMLInputElement | null>;\n  tabIndex?: TypescriptHelpersT.WCAGTabIndex;\n  isFocused: boolean;\n  getProps: ControlledDateTimePickerContextT['getProps'];\n  readOnly: boolean;\n}\nexport const DDInput = React.memo(\n  ({\n    onChange,\n    onBlur,\n    onFocus,\n    onKeyDown,\n    value,\n    disabled,\n    applyAriaDisabled,\n    hasError,\n    contextRef,\n    tabIndex,\n    placeholder,\n    ariaCurrentValueForInputs,\n    isFocused,\n    getProps,\n    readOnly,\n  }: DDInputsPropsT): JSX.Element => {\n    const validateOnChange = useCallback(\n      (e: React.ChangeEvent<HTMLInputElement>) => {\n        if (isInvalidDay(e?.currentTarget?.value)) {\n          e.preventDefault();\n          return;\n        }\n        onChange(e);\n      },\n      [onChange],\n    );\n    const dayNum = convertToPositiveNumberIfPossible(value) as DSControlledDateTimePickerInternalsT.DateDay | -1;\n\n    return (\n      <StyledDateInput\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        placeholder={placeholder}\n        aria-label={`day input field, ${ariaCurrentValueForInputs}`}\n        data-testid={ControlledDateTimePickerDatatestid.DATE_INPUTS.DAY}\n        disabled={disabled}\n        aria-disabled={applyAriaDisabled}\n        aria-invalid={hasError}\n        getOwnerProps={getProps}\n        readOnly={readOnly}\n        role=\"spinbutton\"\n        aria-valuemin={1}\n        aria-valuemax={31}\n        aria-valuenow={dayNum === -1 ? undefined : dayNum}\n        aria-valuetext={dayNum === -1 ? 'empty' : announcableCardinalDays[dayNum]}\n      />\n    );\n  },\n);\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADgEjB;AA/DN,mBAAmC;AAEnC,uBAAmD;AAEnD,qBAAgC;AAChC,IAAAA,oBAAwC;AACxC,2BAAkD;AAElD,MAAM,gBAAgB;AACtB,MAAM,eAAe,CAAC,QAAgB;AACpC,MAAI,QAAQ,GAAI,QAAO;AACvB,QAAM,aAAa,cAAc,KAAK,GAAG;AACzC,SAAO,IAAI,SAAS,KAAK,QAAQ,QAAQ,CAAC,cAAc,OAAO,SAAS,KAAK,EAAE,IAAI;AACrF;AAmBO,MAAM,UAAU,aAAAC,QAAM;AAAA,EAC3B,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,MAAmC;AACjC,UAAM,uBAAmB;AAAA,MACvB,CAAC,MAA2C;AAC1C,YAAI,aAAa,GAAG,eAAe,KAAK,GAAG;AACzC,YAAE,eAAe;AACjB;AAAA,QACF;AACA,iBAAS,CAAC;AAAA,MACZ;AAAA,MACA,CAAC,QAAQ;AAAA,IACX;AACA,UAAM,aAAS,wDAAkC,KAAK;AAEtD,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;AAAA,QACA,cAAY,oBAAoB,yBAAyB;AAAA,QACzD,eAAa,oDAAmC,YAAY;AAAA,QAC5D;AAAA,QACA,iBAAe;AAAA,QACf,gBAAc;AAAA,QACd,eAAe;AAAA,QACf;AAAA,QACA,MAAK;AAAA,QACL,iBAAe;AAAA,QACf,iBAAe;AAAA,QACf,iBAAe,WAAW,KAAK,SAAY;AAAA,QAC3C,kBAAgB,WAAW,KAAK,UAAU,0CAAwB,MAAM;AAAA;AAAA,IAC1E;AAAA,EAEJ;AACF;",
+  "names": ["import_constants", "React"]
 }

package/dist/cjs/parts/DateInputs/MMInput.js CHANGED Viewed

@@ -37,6 +37,8 @@ var import_ds_system = require("@elliemae/ds-system");
 var import_react = __toESM(require("react"));
 var import_constants = require("../../constants/index.js");
 var import_Styleds = require("../Styleds.js");
+var import_numberHelpers = require("../../utils/numberHelpers.js");
+var import_constants2 = require("../../utils/constants.js");
 const regExpNumbers = /^[0-9]+$/;
 const isInvalidMonth = (month) => {
   if (month === "") return false;
@@ -86,6 +88,7 @@ const MMInput = import_react.default.memo(
       }
       return handleRef;
     }, [handleRef, innerRef]);
+    const monthNum = (0, import_numberHelpers.convertToPositiveNumberIfPossible)(value);
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_Styleds.StyledMonthInput,
       {
@@ -104,7 +107,12 @@ const MMInput = import_react.default.memo(
         "aria-disabled": applyAriaDisabled,
         "aria-invalid": hasError,
         getOwnerProps: getProps,
-        readOnly
+        readOnly,
+        role: "spinbutton",
+        "aria-valuemin": 1,
+        "aria-valuemax": 12,
+        "aria-valuenow": monthNum === -1 ? void 0 : monthNum,
+        "aria-valuetext": monthNum === -1 ? "empty" : import_constants2.monthNames[monthNum - 1]
       }
     );
   }

package/dist/cjs/parts/DateInputs/MMInput.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/DateInputs/MMInput.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { setMultipleRefs } from '@elliemae/ds-system';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport React, { useCallback, useMemo } from 'react';\nimport type { ControlledDateTimePickerContextT } from '../../config/useControlledDateTimePicker.js';\nimport { ControlledDateTimePickerDatatestid } from '../../constants/index.js';\nimport type { DSControlledDateTimePickerInternalsT } from '../../sharedTypes.js';\nimport { StyledMonthInput } from '../Styleds.js';\n\nconst regExpNumbers = /^[0-9]+$/;\nconst isInvalidMonth = (month: string) => {\n  if (month === '') return false;\n  const numberOnly = regExpNumbers.test(month);\n  return month.length > 2 || month === '00' || !numberOnly || Number.parseInt(month, 10) > 12;\n};\ninterface MMInputsPropsT {\n  onChange: DSControlledDateTimePickerInternalsT.OnChangeFunc;\n  onBlur: DSControlledDateTimePickerInternalsT.OnBlurFunc;\n  onFocus: DSControlledDateTimePickerInternalsT.OnFocusFunc;\n  onKeyDown: DSControlledDateTimePickerInternalsT.OnKeyDown;\n  autoFocusMonthInput: boolean;\n  value: string;\n  disabled: boolean;\n  applyAriaDisabled?: boolean;\n  hasError: boolean;\n  contextRef: React.MutableRefObject<HTMLInputElement | null>;\n  placeholder: string;\n  ariaCurrentValueForInputs: string;\n  isFocused: boolean;\n  innerRef?:\n    | React.MutableRefObject<HTMLInputElement | HTMLButtonElement | null>\n    | ((ref: HTMLInputElement | HTMLButtonElement | null) => void);\n  tabIndex?: TypescriptHelpersT.WCAGTabIndex;\n  getProps: ControlledDateTimePickerContextT['getProps'];\n  readOnly: boolean;\n}\nexport const MMInput = React.memo(\n  ({\n    onChange,\n    onBlur,\n    onFocus,\n    onKeyDown,\n    value,\n    disabled,\n    applyAriaDisabled,\n    hasError,\n    placeholder,\n    contextRef,\n    innerRef,\n    tabIndex,\n    autoFocusMonthInput,\n    ariaCurrentValueForInputs,\n    isFocused,\n    getProps,\n    readOnly,\n  }: MMInputsPropsT): JSX.Element => {\n    const validateOnChange = useCallback(\n      (e: React.ChangeEvent<HTMLInputElement>) => {\n        if (isInvalidMonth(e?.target?.value)) {\n          e.preventDefault();\n          return;\n        }\n        onChange(e);\n      },\n      [onChange],\n    );\n\n    const handleRef = useCallback(\n      (DomElem: HTMLInputElement) => {\n        (contextRef as React.MutableRefObject<HTMLInputElement>).current = DomElem;\n        if (isFocused) DomElem?.focus?.();\n      },\n      [contextRef, isFocused],\n    );\n\n    const currentRef = useMemo(() => {\n      if (innerRef) {\n        return setMultipleRefs([handleRef, innerRef]);\n      }\n      return handleRef;\n    }, [handleRef, innerRef]);\n\n    return (\n      <StyledMonthInput\n        autoFocus={autoFocusMonthInput}\n        onChange={validateOnChange}\n        onBlur={onBlur}\n        onFocus={onFocus}\n        onKeyDown={onKeyDown}\n        value={value}\n        innerRef={currentRef}\n        tabIndex={tabIndex}\n        placeholder={placeholder}\n        aria-label={`month input field, ${ariaCurrentValueForInputs}`}\n        data-testid={ControlledDateTimePickerDatatestid.DATE_INPUTS.MONTH}\n        disabled={disabled}\n        aria-disabled={applyAriaDisabled}\n        aria-invalid={hasError}\n        getOwnerProps={getProps}\n        readOnly={readOnly}\n      />\n    );\n  },\n);\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADkFjB;AAlFN,uBAAgC;AAEhC,mBAA4C;AAE5C,uBAAmD;AAEnD,qBAAiC;AAEjC,MAAM,gBAAgB;AACtB,MAAM,iBAAiB,CAAC,UAAkB;AACxC,MAAI,UAAU,GAAI,QAAO;AACzB,QAAM,aAAa,cAAc,KAAK,KAAK;AAC3C,SAAO,MAAM,SAAS,KAAK,UAAU,QAAQ,CAAC,cAAc,OAAO,SAAS,OAAO,EAAE,IAAI;AAC3F;AAsBO,MAAM,UAAU,aAAAA,QAAM;AAAA,EAC3B,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,IACA;AAAA,IACA;AAAA,EACF,MAAmC;AACjC,UAAM,uBAAmB;AAAA,MACvB,CAAC,MAA2C;AAC1C,YAAI,eAAe,GAAG,QAAQ,KAAK,GAAG;AACpC,YAAE,eAAe;AACjB;AAAA,QACF;AACA,iBAAS,CAAC;AAAA,MACZ;AAAA,MACA,CAAC,QAAQ;AAAA,IACX;AAEA,UAAM,gBAAY;AAAA,MAChB,CAAC,YAA8B;AAC7B,QAAC,WAAwD,UAAU;AACnE,YAAI,UAAW,UAAS,QAAQ;AAAA,MAClC;AAAA,MACA,CAAC,YAAY,SAAS;AAAA,IACxB;AAEA,UAAM,iBAAa,sBAAQ,MAAM;AAC/B,UAAI,UAAU;AACZ,mBAAO,kCAAgB,CAAC,WAAW,QAAQ,CAAC;AAAA,MAC9C;AACA,aAAO;AAAA,IACT,GAAG,CAAC,WAAW,QAAQ,CAAC;AAExB,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAW;AAAA,QACX,UAAU;AAAA,QACV;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,UAAU;AAAA,QACV;AAAA,QACA;AAAA,QACA,cAAY,sBAAsB,yBAAyB;AAAA,QAC3D,eAAa,oDAAmC,YAAY;AAAA,QAC5D;AAAA,QACA,iBAAe;AAAA,QACf,gBAAc;AAAA,QACd,eAAe;AAAA,QACf;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;",
-  "names": ["React"]
+  "sourcesContent": ["import { setMultipleRefs } from '@elliemae/ds-system';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport React, { useCallback, useMemo } from 'react';\nimport type { ControlledDateTimePickerContextT } from '../../config/useControlledDateTimePicker.js';\nimport { ControlledDateTimePickerDatatestid } from '../../constants/index.js';\nimport type { DSControlledDateTimePickerInternalsT } from '../../sharedTypes.js';\nimport { StyledMonthInput } from '../Styleds.js';\nimport { convertToPositiveNumberIfPossible } from '../../utils/numberHelpers.js';\nimport { monthNames } from '../../utils/constants.js';\n\nconst regExpNumbers = /^[0-9]+$/;\nconst isInvalidMonth = (month: string) => {\n  if (month === '') return false;\n  const numberOnly = regExpNumbers.test(month);\n  return month.length > 2 || month === '00' || !numberOnly || Number.parseInt(month, 10) > 12;\n};\ninterface MMInputsPropsT {\n  onChange: DSControlledDateTimePickerInternalsT.OnChangeFunc;\n  onBlur: DSControlledDateTimePickerInternalsT.OnBlurFunc;\n  onFocus: DSControlledDateTimePickerInternalsT.OnFocusFunc;\n  onKeyDown: DSControlledDateTimePickerInternalsT.OnKeyDown;\n  autoFocusMonthInput: boolean;\n  value: string;\n  disabled: boolean;\n  applyAriaDisabled?: boolean;\n  hasError: boolean;\n  contextRef: React.MutableRefObject<HTMLInputElement | null>;\n  placeholder: string;\n  ariaCurrentValueForInputs: string;\n  isFocused: boolean;\n  innerRef?:\n    | React.MutableRefObject<HTMLInputElement | HTMLButtonElement | null>\n    | ((ref: HTMLInputElement | HTMLButtonElement | null) => void);\n  tabIndex?: TypescriptHelpersT.WCAGTabIndex;\n  getProps: ControlledDateTimePickerContextT['getProps'];\n  readOnly: boolean;\n}\nexport const MMInput = React.memo(\n  ({\n    onChange,\n    onBlur,\n    onFocus,\n    onKeyDown,\n    value,\n    disabled,\n    applyAriaDisabled,\n    hasError,\n    placeholder,\n    contextRef,\n    innerRef,\n    tabIndex,\n    autoFocusMonthInput,\n    ariaCurrentValueForInputs,\n    isFocused,\n    getProps,\n    readOnly,\n  }: MMInputsPropsT): JSX.Element => {\n    const validateOnChange = useCallback(\n      (e: React.ChangeEvent<HTMLInputElement>) => {\n        if (isInvalidMonth(e?.target?.value)) {\n          e.preventDefault();\n          return;\n        }\n        onChange(e);\n      },\n      [onChange],\n    );\n\n    const handleRef = useCallback(\n      (DomElem: HTMLInputElement) => {\n        (contextRef as React.MutableRefObject<HTMLInputElement>).current = DomElem;\n        if (isFocused) DomElem?.focus?.();\n      },\n      [contextRef, isFocused],\n    );\n\n    const currentRef = useMemo(() => {\n      if (innerRef) {\n        return setMultipleRefs([handleRef, innerRef]);\n      }\n      return handleRef;\n    }, [handleRef, innerRef]);\n\n    const monthNum = convertToPositiveNumberIfPossible(value);\n\n    return (\n      <StyledMonthInput\n        autoFocus={autoFocusMonthInput}\n        onChange={validateOnChange}\n        onBlur={onBlur}\n        onFocus={onFocus}\n        onKeyDown={onKeyDown}\n        value={value}\n        innerRef={currentRef}\n        tabIndex={tabIndex}\n        placeholder={placeholder}\n        aria-label={`month input field, ${ariaCurrentValueForInputs}`}\n        data-testid={ControlledDateTimePickerDatatestid.DATE_INPUTS.MONTH}\n        disabled={disabled}\n        aria-disabled={applyAriaDisabled}\n        aria-invalid={hasError}\n        getOwnerProps={getProps}\n        readOnly={readOnly}\n        role=\"spinbutton\"\n        aria-valuemin={1}\n        aria-valuemax={12}\n        aria-valuenow={monthNum === -1 ? undefined : monthNum}\n        aria-valuetext={monthNum === -1 ? 'empty' : monthNames[monthNum - 1]}\n      />\n    );\n  },\n);\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADsFjB;AAtFN,uBAAgC;AAEhC,mBAA4C;AAE5C,uBAAmD;AAEnD,qBAAiC;AACjC,2BAAkD;AAClD,IAAAA,oBAA2B;AAE3B,MAAM,gBAAgB;AACtB,MAAM,iBAAiB,CAAC,UAAkB;AACxC,MAAI,UAAU,GAAI,QAAO;AACzB,QAAM,aAAa,cAAc,KAAK,KAAK;AAC3C,SAAO,MAAM,SAAS,KAAK,UAAU,QAAQ,CAAC,cAAc,OAAO,SAAS,OAAO,EAAE,IAAI;AAC3F;AAsBO,MAAM,UAAU,aAAAC,QAAM;AAAA,EAC3B,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,IACA;AAAA,IACA;AAAA,EACF,MAAmC;AACjC,UAAM,uBAAmB;AAAA,MACvB,CAAC,MAA2C;AAC1C,YAAI,eAAe,GAAG,QAAQ,KAAK,GAAG;AACpC,YAAE,eAAe;AACjB;AAAA,QACF;AACA,iBAAS,CAAC;AAAA,MACZ;AAAA,MACA,CAAC,QAAQ;AAAA,IACX;AAEA,UAAM,gBAAY;AAAA,MAChB,CAAC,YAA8B;AAC7B,QAAC,WAAwD,UAAU;AACnE,YAAI,UAAW,UAAS,QAAQ;AAAA,MAClC;AAAA,MACA,CAAC,YAAY,SAAS;AAAA,IACxB;AAEA,UAAM,iBAAa,sBAAQ,MAAM;AAC/B,UAAI,UAAU;AACZ,mBAAO,kCAAgB,CAAC,WAAW,QAAQ,CAAC;AAAA,MAC9C;AACA,aAAO;AAAA,IACT,GAAG,CAAC,WAAW,QAAQ,CAAC;AAExB,UAAM,eAAW,wDAAkC,KAAK;AAExD,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAW;AAAA,QACX,UAAU;AAAA,QACV;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,UAAU;AAAA,QACV;AAAA,QACA;AAAA,QACA,cAAY,sBAAsB,yBAAyB;AAAA,QAC3D,eAAa,oDAAmC,YAAY;AAAA,QAC5D;AAAA,QACA,iBAAe;AAAA,QACf,gBAAc;AAAA,QACd,eAAe;AAAA,QACf;AAAA,QACA,MAAK;AAAA,QACL,iBAAe;AAAA,QACf,iBAAe;AAAA,QACf,iBAAe,aAAa,KAAK,SAAY;AAAA,QAC7C,kBAAgB,aAAa,KAAK,UAAU,6BAAW,WAAW,CAAC;AAAA;AAAA,IACrE;AAAA,EAEJ;AACF;",
+  "names": ["import_constants", "React"]
 }

package/dist/cjs/parts/DateInputs/YYYYInput.js CHANGED Viewed

@@ -36,6 +36,8 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = __toESM(require("react"));
 var import_constants = require("../../constants/index.js");
 var import_Styleds = require("../Styleds.js");
+var import_numberHelpers = require("../../utils/numberHelpers.js");
+var import_stringHelpers = require("../../utils/stringHelpers.js");
 const regExpNumbers = /^[0-9]+$/;
 const isInvalidYear = (year) => {
   if (year === "") return false;
@@ -70,6 +72,7 @@ const YYYYInput = import_react.default.memo(
       },
       [onChange]
     );
+    const yearNum = (0, import_numberHelpers.convertToPositiveNumberIfPossible)(value);
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_Styleds.StyledYearInput,
       {
@@ -90,7 +93,12 @@ const YYYYInput = import_react.default.memo(
         "aria-disabled": applyAriaDisabled,
         "aria-invalid": hasError,
         getOwnerProps: getProps,
-        readOnly
+        readOnly,
+        role: "spinbutton",
+        "aria-valuemin": 0,
+        "aria-valuemax": 9999,
+        "aria-valuenow": yearNum === -1 ? void 0 : yearNum,
+        "aria-valuetext": yearNum === -1 ? "empty" : (0, import_stringHelpers.fillStringWithPlaceHolders)(`${yearNum}`, 4, "0")
       }
     );
   }

package/dist/cjs/parts/DateInputs/YYYYInput.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/DateInputs/YYYYInput.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["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';\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    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      />\n    );\n  },\n);\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD2DjB;AA1DN,mBAAmC;AAEnC,uBAAmD;AAEnD,qBAAgC;AAChC,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,YAAY,aAAAA,QAAM;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,uBAAmB;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;AACA,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,oDAAmC,YAAY;AAAA,QAC5D;AAAA,QACA,cAAY,qBAAqB,yBAAyB;AAAA,QAC1D;AAAA,QACA,iBAAe;AAAA,QACf,gBAAc;AAAA,QACd,eAAe;AAAA,QACf;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;",
+  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADgEjB;AA/DN,mBAAmC;AAEnC,uBAAmD;AAEnD,qBAAgC;AAChC,2BAAkD;AAClD,2BAA2C;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,YAAY,aAAAA,QAAM;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,uBAAmB;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,cAAU,wDAAkC,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,oDAAmC,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,cAAU,iDAA2B,GAAG,OAAO,IAAI,GAAG,GAAG;AAAA;AAAA,IAC5F;AAAA,EAEJ;AACF;",
   "names": ["React"]
 }

package/dist/cjs/parts/Pickers/Calendar/CalendarContent.js CHANGED Viewed

@@ -53,7 +53,7 @@ const CalendarContent = ({ className = "" }) => {
       className,
       "data-testid": import_constants.ControlledDateTimePickerDatatestid.CONTROLLER_COMPONENT.CALENDAR,
       getOwnerProps: getProps,
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Styleds.StyledCalendarWrapper, { readOnlyStyles: readOnly || applyAriaDisabled, children: [
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Styleds.StyledCalendarWrapper, { $readOnlyStyles: readOnly || applyAriaDisabled, children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_CalendarHead.CalendarHead, {}),
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_CalendarBody.CalendarBody, { weekRowsNum: daysMatrixByWeekday.length }),
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_CalendarFooter.CalendarFooter, {})

package/dist/cjs/parts/Pickers/Calendar/CalendarContent.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/parts/Pickers/Calendar/CalendarContent.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-len */\nimport { useContext } from 'react';\nimport { ControlledDateTimePickerDatatestid } from '../../../constants/index.js';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';\nimport { CalendarBody } from './CalendarBody.js';\nimport { CalendarContext } from './CalendarContext.js';\nimport { CalendarFooter } from './CalendarFooter.js';\nimport { CalendarHead } from './CalendarHead.js';\nimport { StyledCalendarWrapper, StyledShadowWrapper } from './Styleds.js';\n\n// ({ className = '' }: { className?: string })\n// <StyledShadowWrapper className={className}>\n// is required for styled-components, without this we can't styled(CalendarContent)...\n// https://stackoverflow.com/questions/52542817/styled-components-not-applying-style-to-custom-functional-react-component\nexport const CalendarContent = ({ className = '' }: { className?: string }): JSX.Element => {\n  const {\n    getProps,\n    props: { readOnly, applyAriaDisabled },\n  } = useContext(ControlledDateTimePickerContext);\n  const { daysMatrixByWeekday } = useContext(CalendarContext);\n\n  return (\n    <StyledShadowWrapper\n      className={className}\n      data-testid={ControlledDateTimePickerDatatestid.CONTROLLER_COMPONENT.CALENDAR}\n      getOwnerProps={getProps}\n    >\n      <StyledCalendarWrapper readOnlyStyles={readOnly || applyAriaDisabled}>\n        <CalendarHead />\n        <CalendarBody weekRowsNum={daysMatrixByWeekday.length} />\n        <CalendarFooter />\n      </StyledCalendarWrapper>\n    </StyledShadowWrapper>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD2BjB;AA1BN,mBAA2B;AAC3B,uBAAmD;AACnD,yCAAgD;AAChD,0BAA6B;AAC7B,6BAAgC;AAChC,4BAA+B;AAC/B,0BAA6B;AAC7B,qBAA2D;AAMpD,MAAM,kBAAkB,CAAC,EAAE,YAAY,GAAG,MAA2C;AAC1F,QAAM;AAAA,IACJ;AAAA,IACA,OAAO,EAAE,UAAU,kBAAkB;AAAA,EACvC,QAAI,yBAAW,kEAA+B;AAC9C,QAAM,EAAE,oBAAoB,QAAI,yBAAW,sCAAe;AAE1D,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,eAAa,oDAAmC,qBAAqB;AAAA,MACrE,eAAe;AAAA,MAEf,uDAAC,wCAAsB,gBAAgB,YAAY,mBACjD;AAAA,oDAAC,oCAAa;AAAA,QACd,4CAAC,oCAAa,aAAa,oBAAoB,QAAQ;AAAA,QACvD,4CAAC,wCAAe;AAAA,SAClB;AAAA;AAAA,EACF;AAEJ;",
+  "sourcesContent": ["/* eslint-disable max-len */\nimport { useContext } from 'react';\nimport { ControlledDateTimePickerDatatestid } from '../../../constants/index.js';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';\nimport { CalendarBody } from './CalendarBody.js';\nimport { CalendarContext } from './CalendarContext.js';\nimport { CalendarFooter } from './CalendarFooter.js';\nimport { CalendarHead } from './CalendarHead.js';\nimport { StyledCalendarWrapper, StyledShadowWrapper } from './Styleds.js';\n\n// ({ className = '' }: { className?: string })\n// <StyledShadowWrapper className={className}>\n// is required for styled-components, without this we can't styled(CalendarContent)...\n// https://stackoverflow.com/questions/52542817/styled-components-not-applying-style-to-custom-functional-react-component\nexport const CalendarContent = ({ className = '' }: { className?: string }): JSX.Element => {\n  const {\n    getProps,\n    props: { readOnly, applyAriaDisabled },\n  } = useContext(ControlledDateTimePickerContext);\n  const { daysMatrixByWeekday } = useContext(CalendarContext);\n\n  return (\n    <StyledShadowWrapper\n      className={className}\n      data-testid={ControlledDateTimePickerDatatestid.CONTROLLER_COMPONENT.CALENDAR}\n      getOwnerProps={getProps}\n    >\n      <StyledCalendarWrapper $readOnlyStyles={readOnly || applyAriaDisabled}>\n        <CalendarHead />\n        <CalendarBody weekRowsNum={daysMatrixByWeekday.length} />\n        <CalendarFooter />\n      </StyledCalendarWrapper>\n    </StyledShadowWrapper>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD2BjB;AA1BN,mBAA2B;AAC3B,uBAAmD;AACnD,yCAAgD;AAChD,0BAA6B;AAC7B,6BAAgC;AAChC,4BAA+B;AAC/B,0BAA6B;AAC7B,qBAA2D;AAMpD,MAAM,kBAAkB,CAAC,EAAE,YAAY,GAAG,MAA2C;AAC1F,QAAM;AAAA,IACJ;AAAA,IACA,OAAO,EAAE,UAAU,kBAAkB;AAAA,EACvC,QAAI,yBAAW,kEAA+B;AAC9C,QAAM,EAAE,oBAAoB,QAAI,yBAAW,sCAAe;AAE1D,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,eAAa,oDAAmC,qBAAqB;AAAA,MACrE,eAAe;AAAA,MAEf,uDAAC,wCAAsB,iBAAiB,YAAY,mBAClD;AAAA,oDAAC,oCAAa;AAAA,QACd,4CAAC,oCAAa,aAAa,oBAAoB,QAAQ;AAAA,QACvD,4CAAC,wCAAe;AAAA,SAClB;AAAA;AAAA,EACF;AAEJ;",
   "names": []
 }

package/dist/cjs/parts/Pickers/Calendar/CalendarDaysList.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/parts/Pickers/Calendar/CalendarDaysList.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport { Day } from './Day.js';\nimport { StyledWeekDaysListWrapper } from './Styleds.js';\nimport type { DSControlledDateTimePickerInternalsT } from '../../../sharedTypes.js';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';\nexport const CalendarDaysList = React.memo(\n  ({ invisibleFirstDay, daysMatrixByWeekday, invisibleLastDay, innerRef }: CalendarDaysListPropsT): JSX.Element => {\n    const { getProps } = React.useContext(ControlledDateTimePickerContext);\n\n    return (\n      <div ref={innerRef} role=\"rowgroup\">\n        {invisibleFirstDay ? (\n          <div role=\"row\" style={{ display: 'none' }}>\n            <Day key={`ds-calendar-${invisibleFirstDay.day.toString()}`} metaDay={invisibleFirstDay} isInvisible />\n          </div>\n        ) : null}\n        {daysMatrixByWeekday.map((week, i) => (\n          <StyledWeekDaysListWrapper\n            key={`ds-calendar-week-${week[0].day.toString()}-${week[6].day.toString()}`}\n            role=\"row\"\n            aria-rowindex={i + 1}\n            cols={['2.4615rem', '2.4615rem', '2.4615rem', '2.4615rem', '2.4615rem', '2.4615rem', '2.4615rem']}\n            rows={['2.1538rem']}\n            py=\"xxxs\"\n            px=\"2px\"\n            justifyContent=\"space-between\"\n            alignItems=\"center\"\n            getOwnerProps={getProps}\n          >\n            {week.map((metaDay, z) => (\n              <Day key={`ds-calendar-${metaDay.day.toString()}`} metaDay={metaDay} colIndex={z + 1} />\n            ))}\n          </StyledWeekDaysListWrapper>\n        ))}\n        {invisibleLastDay ? (\n          <div role=\"row\" style={{ display: 'none' }}>\n            <Day key={`ds-calendar-${invisibleLastDay.day.toString()}`} metaDay={invisibleLastDay} isInvisible />\n          </div>\n        ) : null}\n      </div>\n    );\n  },\n);\nexport interface CalendarDaysListPropsT {\n  invisibleFirstDay?: DSControlledDateTimePickerInternalsT.MetaMonthDay;\n  daysMatrixByWeekday: DSControlledDateTimePickerInternalsT.MetaMonthDay[][];\n  invisibleLastDay?: DSControlledDateTimePickerInternalsT.MetaMonthDay;\n  innerRef: React.RefObject<HTMLDivElement>;\n}\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADUjB;AAVN,mBAAkB;AAClB,iBAAoB;AACpB,qBAA0C;AAE1C,yCAAgD;AACzC,MAAM,mBAAmB,aAAAA,QAAM;AAAA,EACpC,CAAC,EAAE,mBAAmB,qBAAqB,kBAAkB,SAAS,MAA2C;AAC/G,UAAM,EAAE,SAAS,IAAI,aAAAA,QAAM,WAAW,kEAA+B;AAErE,WACE,6CAAC,SAAI,KAAK,UAAU,MAAK,YACtB;AAAA,0BACC,4CAAC,SAAI,MAAK,OAAM,OAAO,EAAE,SAAS,OAAO,GACvC,sDAAC,kBAA4D,SAAS,mBAAmB,aAAW,QAA1F,eAAe,kBAAkB,IAAI,SAAS,CAAC,EAA4C,GACvG,IACE;AAAA,MACH,oBAAoB,IAAI,CAAC,MAAM,MAC9B;AAAA,QAAC;AAAA;AAAA,UAEC,MAAK;AAAA,UACL,iBAAe,IAAI;AAAA,UACnB,MAAM,CAAC,aAAa,aAAa,aAAa,aAAa,aAAa,aAAa,WAAW;AAAA,UAChG,MAAM,CAAC,WAAW;AAAA,UAClB,IAAG;AAAA,UACH,IAAG;AAAA,UACH,gBAAe;AAAA,UACf,YAAW;AAAA,UACX,eAAe;AAAA,UAEd,eAAK,IAAI,CAAC,SAAS,MAClB,4CAAC,kBAAkD,SAAkB,UAAU,IAAI,KAAzE,eAAe,QAAQ,IAAI,SAAS,CAAC,EAAuC,CACvF;AAAA;AAAA,QAbI,oBAAoB,KAAK,CAAC,EAAE,IAAI,SAAS,CAAC,IAAI,KAAK,CAAC,EAAE,IAAI,SAAS,CAAC;AAAA,MAc3E,CACD;AAAA,MACA,mBACC,4CAAC,SAAI,MAAK,OAAM,OAAO,EAAE,SAAS,OAAO,GACvC,sDAAC,kBAA2D,SAAS,kBAAkB,aAAW,QAAxF,eAAe,iBAAiB,IAAI,SAAS,CAAC,EAA2C,GACrG,IACE;AAAA,OACN;AAAA,EAEJ;AACF;",
+  "sourcesContent": ["import React from 'react';\nimport { Day } from './Day.js';\nimport { StyledWeekDaysListWrapper } from './Styleds.js';\nimport type { DSControlledDateTimePickerT } from '../../../react-desc-prop-types.js';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';\n\nexport interface CalendarDaysListPropsT {\n  invisibleFirstDay?: DSControlledDateTimePickerT.MetaMonthDay;\n  daysMatrixByWeekday: DSControlledDateTimePickerT.MetaMonthDay[][];\n  invisibleLastDay?: DSControlledDateTimePickerT.MetaMonthDay;\n  innerRef: React.RefObject<HTMLDivElement>;\n}\n\nexport const CalendarDaysList = React.memo(\n  ({ invisibleFirstDay, daysMatrixByWeekday, invisibleLastDay, innerRef }: CalendarDaysListPropsT): JSX.Element => {\n    const { getProps } = React.useContext(ControlledDateTimePickerContext);\n\n    return (\n      <div ref={innerRef} role=\"rowgroup\">\n        {invisibleFirstDay ? (\n          <div role=\"row\" style={{ display: 'none' }}>\n            <Day key={`ds-calendar-${invisibleFirstDay.day.toString()}`} metaDay={invisibleFirstDay} isInvisible />\n          </div>\n        ) : null}\n        {daysMatrixByWeekday.map((week, i) => (\n          <StyledWeekDaysListWrapper\n            key={`ds-calendar-week-${week[0].day.toString()}-${week[6].day.toString()}`}\n            role=\"row\"\n            aria-rowindex={i + 1}\n            cols={['2.4615rem', '2.4615rem', '2.4615rem', '2.4615rem', '2.4615rem', '2.4615rem', '2.4615rem']}\n            rows={['2.1538rem']}\n            py=\"xxxs\"\n            px=\"2px\"\n            justifyContent=\"space-between\"\n            alignItems=\"center\"\n            getOwnerProps={getProps}\n          >\n            {week.map((metaDay, z) => (\n              <Day key={`ds-calendar-${metaDay.day.toString()}`} metaDay={metaDay} colIndex={z + 1} />\n            ))}\n          </StyledWeekDaysListWrapper>\n        ))}\n        {invisibleLastDay ? (\n          <div role=\"row\" style={{ display: 'none' }}>\n            <Day key={`ds-calendar-${invisibleLastDay.day.toString()}`} metaDay={invisibleLastDay} isInvisible />\n          </div>\n        ) : null}\n      </div>\n    );\n  },\n);\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADkBjB;AAlBN,mBAAkB;AAClB,iBAAoB;AACpB,qBAA0C;AAE1C,yCAAgD;AASzC,MAAM,mBAAmB,aAAAA,QAAM;AAAA,EACpC,CAAC,EAAE,mBAAmB,qBAAqB,kBAAkB,SAAS,MAA2C;AAC/G,UAAM,EAAE,SAAS,IAAI,aAAAA,QAAM,WAAW,kEAA+B;AAErE,WACE,6CAAC,SAAI,KAAK,UAAU,MAAK,YACtB;AAAA,0BACC,4CAAC,SAAI,MAAK,OAAM,OAAO,EAAE,SAAS,OAAO,GACvC,sDAAC,kBAA4D,SAAS,mBAAmB,aAAW,QAA1F,eAAe,kBAAkB,IAAI,SAAS,CAAC,EAA4C,GACvG,IACE;AAAA,MACH,oBAAoB,IAAI,CAAC,MAAM,MAC9B;AAAA,QAAC;AAAA;AAAA,UAEC,MAAK;AAAA,UACL,iBAAe,IAAI;AAAA,UACnB,MAAM,CAAC,aAAa,aAAa,aAAa,aAAa,aAAa,aAAa,WAAW;AAAA,UAChG,MAAM,CAAC,WAAW;AAAA,UAClB,IAAG;AAAA,UACH,IAAG;AAAA,UACH,gBAAe;AAAA,UACf,YAAW;AAAA,UACX,eAAe;AAAA,UAEd,eAAK,IAAI,CAAC,SAAS,MAClB,4CAAC,kBAAkD,SAAkB,UAAU,IAAI,KAAzE,eAAe,QAAQ,IAAI,SAAS,CAAC,EAAuC,CACvF;AAAA;AAAA,QAbI,oBAAoB,KAAK,CAAC,EAAE,IAAI,SAAS,CAAC,IAAI,KAAK,CAAC,EAAE,IAAI,SAAS,CAAC;AAAA,MAc3E,CACD;AAAA,MACA,mBACC,4CAAC,SAAI,MAAK,OAAM,OAAO,EAAE,SAAS,OAAO,GACvC,sDAAC,kBAA2D,SAAS,kBAAkB,aAAW,QAAxF,eAAe,iBAAiB,IAAI,SAAS,CAAC,EAA2C,GACrG,IACE;AAAA,OACN;AAAA,EAEJ;AACF;",
   "names": ["React"]
 }

package/dist/cjs/parts/Pickers/Calendar/CalendarFooter.js CHANGED Viewed

@@ -51,7 +51,7 @@ const CalendarFooter = () => {
         role: "alert",
         getOwnerProps: getProps,
         "data-testid": import_constants.ControlledDateTimePickerDatatestid.FOOTERS.CALENDAR,
-        readOnlyStyles: readOnly || applyAriaDisabled,
+        $readOnlyStyles: readOnly || applyAriaDisabled,
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
             import_ds_icons.AlertsSmallFill,

package/dist/cjs/parts/Pickers/Calendar/CalendarFooter.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/parts/Pickers/Calendar/CalendarFooter.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { AlertsSmallFill } from '@elliemae/ds-icons';\nimport React, { useContext } from 'react';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';\n\nimport { ControlledDateTimePickerDatatestid } from '../../../constants/index.js';\nimport { CalendarFooterMessage } from './Styleds.js';\nexport const CalendarFooter: React.ComponentType = () => {\n  const {\n    props: { pickerFooterMsg, hasError, readOnly, applyAriaDisabled },\n    getProps,\n    isWithTimeWheelToo,\n  } = useContext(ControlledDateTimePickerContext);\n  if (pickerFooterMsg !== undefined && !isWithTimeWheelToo && hasError)\n    return (\n      <CalendarFooterMessage\n        role=\"alert\"\n        getOwnerProps={getProps}\n        data-testid={ControlledDateTimePickerDatatestid.FOOTERS.CALENDAR}\n        readOnlyStyles={readOnly || applyAriaDisabled}\n      >\n        <AlertsSmallFill\n          width={8}\n          height={8}\n          color={['danger', '900']}\n          style={{ marginRight: '0.5rem', marginBottom: '2px' }}\n        />\n        {pickerFooterMsg}\n      </CalendarFooterMessage>\n    );\n  return null;\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADcjB;AAdN,sBAAgC;AAChC,mBAAkC;AAClC,yCAAgD;AAEhD,uBAAmD;AACnD,qBAAsC;AAC/B,MAAM,iBAAsC,MAAM;AACvD,QAAM;AAAA,IACJ,OAAO,EAAE,iBAAiB,UAAU,UAAU,kBAAkB;AAAA,IAChE;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,kEAA+B;AAC9C,MAAI,oBAAoB,UAAa,CAAC,sBAAsB;AAC1D,WACE;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,eAAe;AAAA,QACf,eAAa,oDAAmC,QAAQ;AAAA,QACxD,gBAAgB,YAAY;AAAA,QAE5B;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,OAAO;AAAA,cACP,QAAQ;AAAA,cACR,OAAO,CAAC,UAAU,KAAK;AAAA,cACvB,OAAO,EAAE,aAAa,UAAU,cAAc,MAAM;AAAA;AAAA,UACtD;AAAA,UACC;AAAA;AAAA;AAAA,IACH;AAEJ,SAAO;AACT;",
+  "sourcesContent": ["import { AlertsSmallFill } from '@elliemae/ds-icons';\nimport React, { useContext } from 'react';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';\n\nimport { ControlledDateTimePickerDatatestid } from '../../../constants/index.js';\nimport { CalendarFooterMessage } from './Styleds.js';\nexport const CalendarFooter: React.ComponentType = () => {\n  const {\n    props: { pickerFooterMsg, hasError, readOnly, applyAriaDisabled },\n    getProps,\n    isWithTimeWheelToo,\n  } = useContext(ControlledDateTimePickerContext);\n  if (pickerFooterMsg !== undefined && !isWithTimeWheelToo && hasError)\n    return (\n      <CalendarFooterMessage\n        role=\"alert\"\n        getOwnerProps={getProps}\n        data-testid={ControlledDateTimePickerDatatestid.FOOTERS.CALENDAR}\n        $readOnlyStyles={readOnly || applyAriaDisabled}\n      >\n        <AlertsSmallFill\n          width={8}\n          height={8}\n          color={['danger', '900']}\n          style={{ marginRight: '0.5rem', marginBottom: '2px' }}\n        />\n        {pickerFooterMsg}\n      </CalendarFooterMessage>\n    );\n  return null;\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADcjB;AAdN,sBAAgC;AAChC,mBAAkC;AAClC,yCAAgD;AAEhD,uBAAmD;AACnD,qBAAsC;AAC/B,MAAM,iBAAsC,MAAM;AACvD,QAAM;AAAA,IACJ,OAAO,EAAE,iBAAiB,UAAU,UAAU,kBAAkB;AAAA,IAChE;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,kEAA+B;AAC9C,MAAI,oBAAoB,UAAa,CAAC,sBAAsB;AAC1D,WACE;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,eAAe;AAAA,QACf,eAAa,oDAAmC,QAAQ;AAAA,QACxD,iBAAiB,YAAY;AAAA,QAE7B;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,OAAO;AAAA,cACP,QAAQ;AAAA,cACR,OAAO,CAAC,UAAU,KAAK;AAAA,cACvB,OAAO,EAAE,aAAa,UAAU,cAAc,MAAM;AAAA;AAAA,UACtD;AAAA,UACC;AAAA;AAAA;AAAA,IACH;AAEJ,SAAO;AACT;",
   "names": []
 }