@elliemae/ds-form-date-time-picker 3.15.0 → 3.16.0-next.10

package/dist/cjs/config/useGlobalKeyHandlers.js

@@ -29,9 +29,9 @@ __export(useGlobalKeyHandlers_exports, {
 module.exports = __toCommonJS(useGlobalKeyHandlers_exports);
 var React = __toESM(require("react"));
 var import_react = require("react");
-var import_dateHelpers = require("../utils/dateHelpers");
-var import_timeHelpers = require("../utils/timeHelpers");
-var import_stringHelpers = require("../utils/stringHelpers");
+var import_dateHelpers = require("../utils/dateHelpers.js");
+var import_timeHelpers = require("../utils/timeHelpers.js");
+var import_stringHelpers = require("../utils/stringHelpers.js");
 const useGlobalKeyHandlers = ({ propsBasedOnType, changeHandlers, focusTrackers, flags }) => {
   const {
     getIsOutOfRangeDay,

package/dist/cjs/config/useGlobalKeyHandlers.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/config/useGlobalKeyHandlers.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable no-nested-ternary */\n/* eslint-disable max-lines */\n/* eslint-disable import/prefer-default-export */\n/* eslint-disable complexity */\n/* eslint-disable max-statements */\nimport { useCallback, useMemo } from 'react';\nimport type { useChangeHandlers } from './useChangeHandlers';\nimport type { useGetPropsBasedOnType } from './useGetPropsBasedOnType';\nimport type { useGetReferences } from './useGetReferences';\nimport type { useGetFlags } from './useGetFlags';\nimport type { useFocusTracker } from './useFocusTracker';\nimport { getValidationDateStringMetaInfo, getDateStringFromDay, getTimeStringFromDay } from '../utils/dateHelpers';\nimport { getValidationTimeStringMetaInfo } from '../utils/timeHelpers';\nimport { deconstructValuesFromDateString, deconstructValuesFromTimeString } from '../utils/stringHelpers';\nimport type { DSControlledDateTimePickerT } from '../propTypes';\n\ninterface Config {\n  propsBasedOnType: ReturnType<typeof useGetPropsBasedOnType>;\n  changeHandlers: ReturnType<typeof useChangeHandlers>;\n  DOMRefs: ReturnType<typeof useGetReferences>;\n  flags: ReturnType<typeof useGetFlags>;\n  focusTrackers: ReturnType<typeof useFocusTracker>;\n}\n\nexport const useGlobalKeyHandlers = ({ propsBasedOnType, changeHandlers, focusTrackers, flags }: Config) => {\n  const {\n    getIsOutOfRangeDay,\n    getIsDisabledDay,\n    getIsDisabledTime,\n    appOnMonthChange,\n    appOnDayChange,\n    appOnYearChange,\n    appOnHourChange,\n    appOnMinuteChange,\n    appOnMeridiemChange,\n  } = propsBasedOnType;\n  const { handleChangeComposedDateTimeString, handleClearAll } = changeHandlers;\n  const { trackFocusLastSegment, trackFocusClearBtn } = focusTrackers;\n  const { withAnyPicker, shouldPreserveClearableSpace } = flags;\n\n  const onFillWithCurrentDateKeys = useCallback(\n    (\n      e: React.KeyboardEvent<HTMLInputElement | HTMLButtonElement>,\n      metaInfo: Partial<DSControlledDateTimePickerT.InternalInputsChangeMetaInfo> = { isAutomaticFillTrigger: true },\n    ) => {\n      const now = new Date();\n      const nowDateString = getDateStringFromDay(now);\n      const nowTimeString = getTimeStringFromDay(now);\n      const finalMetaInfo: DSControlledDateTimePickerT.InternalInputsChangeMetaInfo = {\n        ...metaInfo,\n        ...getValidationDateStringMetaInfo(nowDateString, getIsOutOfRangeDay, getIsDisabledDay),\n        ...getValidationTimeStringMetaInfo(nowTimeString, getIsDisabledTime),\n        newDateString: nowDateString,\n      };\n      const { month, day, year } = deconstructValuesFromDateString(nowDateString);\n      appOnMonthChange(month, e, metaInfo);\n      appOnDayChange(day, e, metaInfo);\n      appOnYearChange(year, e, metaInfo);\n      const { hours, minutes, meridiem } = deconstructValuesFromTimeString(nowTimeString);\n      appOnHourChange(hours, e, metaInfo);\n      appOnMinuteChange(minutes, e, metaInfo);\n      appOnMeridiemChange(meridiem, e, metaInfo);\n      handleChangeComposedDateTimeString(nowDateString, nowTimeString, finalMetaInfo);\n      // trackFocusLastSegment is not enough here,\n      //  after this key combination the value may change from empty to non-empty\n      //  when non empty the last segment may become the clear-btn (clear btn only appears when non empty)\n      //  as such this must be micro-managed here\n      if (shouldPreserveClearableSpace && !withAnyPicker) trackFocusClearBtn();\n      else trackFocusLastSegment();\n    },\n    [\n      appOnDayChange,\n      appOnHourChange,\n      appOnMeridiemChange,\n      appOnMinuteChange,\n      appOnMonthChange,\n      appOnYearChange,\n      getIsDisabledDay,\n      getIsDisabledTime,\n      getIsOutOfRangeDay,\n      handleChangeComposedDateTimeString,\n      shouldPreserveClearableSpace,\n      trackFocusClearBtn,\n      trackFocusLastSegment,\n      withAnyPicker,\n    ],\n  );\n\n  const onGlobalKeyDown = useCallback(\n    (e: React.KeyboardEvent<HTMLInputElement | HTMLButtonElement>) => {\n      const { key, ctrlKey, metaKey } = e;\n      if ((ctrlKey || metaKey) && key === ';') {\n        onFillWithCurrentDateKeys(e);\n      }\n      if ((ctrlKey || metaKey) && (key === 'Delete' || key === 'Backspace')) handleClearAll(e);\n    },\n    [handleClearAll, onFillWithCurrentDateKeys],\n  );\n\n  return useMemo(\n    () => ({\n      onFillWithCurrentDateKeys,\n      onGlobalKeyDown,\n    }),\n    [onFillWithCurrentDateKeys, onGlobalKeyDown],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "sourcesContent": ["/* eslint-disable no-nested-ternary */\n/* eslint-disable max-lines */\n/* eslint-disable import/prefer-default-export */\n/* eslint-disable complexity */\n/* eslint-disable max-statements */\nimport { useCallback, useMemo } from 'react';\nimport type { useChangeHandlers } from './useChangeHandlers.js';\nimport type { useGetPropsBasedOnType } from './useGetPropsBasedOnType.js';\nimport type { useGetReferences } from './useGetReferences.js';\nimport type { useGetFlags } from './useGetFlags.js';\nimport type { useFocusTracker } from './useFocusTracker.js';\nimport { getValidationDateStringMetaInfo, getDateStringFromDay, getTimeStringFromDay } from '../utils/dateHelpers.js';\nimport { getValidationTimeStringMetaInfo } from '../utils/timeHelpers.js';\nimport { deconstructValuesFromDateString, deconstructValuesFromTimeString } from '../utils/stringHelpers.js';\nimport type { DSControlledDateTimePickerT } from '../propTypes.js';\n\ninterface Config {\n  propsBasedOnType: ReturnType<typeof useGetPropsBasedOnType>;\n  changeHandlers: ReturnType<typeof useChangeHandlers>;\n  DOMRefs: ReturnType<typeof useGetReferences>;\n  flags: ReturnType<typeof useGetFlags>;\n  focusTrackers: ReturnType<typeof useFocusTracker>;\n}\n\nexport const useGlobalKeyHandlers = ({ propsBasedOnType, changeHandlers, focusTrackers, flags }: Config) => {\n  const {\n    getIsOutOfRangeDay,\n    getIsDisabledDay,\n    getIsDisabledTime,\n    appOnMonthChange,\n    appOnDayChange,\n    appOnYearChange,\n    appOnHourChange,\n    appOnMinuteChange,\n    appOnMeridiemChange,\n  } = propsBasedOnType;\n  const { handleChangeComposedDateTimeString, handleClearAll } = changeHandlers;\n  const { trackFocusLastSegment, trackFocusClearBtn } = focusTrackers;\n  const { withAnyPicker, shouldPreserveClearableSpace } = flags;\n\n  const onFillWithCurrentDateKeys = useCallback(\n    (\n      e: React.KeyboardEvent<HTMLInputElement | HTMLButtonElement>,\n      metaInfo: Partial<DSControlledDateTimePickerT.InternalInputsChangeMetaInfo> = { isAutomaticFillTrigger: true },\n    ) => {\n      const now = new Date();\n      const nowDateString = getDateStringFromDay(now);\n      const nowTimeString = getTimeStringFromDay(now);\n      const finalMetaInfo: DSControlledDateTimePickerT.InternalInputsChangeMetaInfo = {\n        ...metaInfo,\n        ...getValidationDateStringMetaInfo(nowDateString, getIsOutOfRangeDay, getIsDisabledDay),\n        ...getValidationTimeStringMetaInfo(nowTimeString, getIsDisabledTime),\n        newDateString: nowDateString,\n      };\n      const { month, day, year } = deconstructValuesFromDateString(nowDateString);\n      appOnMonthChange(month, e, metaInfo);\n      appOnDayChange(day, e, metaInfo);\n      appOnYearChange(year, e, metaInfo);\n      const { hours, minutes, meridiem } = deconstructValuesFromTimeString(nowTimeString);\n      appOnHourChange(hours, e, metaInfo);\n      appOnMinuteChange(minutes, e, metaInfo);\n      appOnMeridiemChange(meridiem, e, metaInfo);\n      handleChangeComposedDateTimeString(nowDateString, nowTimeString, finalMetaInfo);\n      // trackFocusLastSegment is not enough here,\n      //  after this key combination the value may change from empty to non-empty\n      //  when non empty the last segment may become the clear-btn (clear btn only appears when non empty)\n      //  as such this must be micro-managed here\n      if (shouldPreserveClearableSpace && !withAnyPicker) trackFocusClearBtn();\n      else trackFocusLastSegment();\n    },\n    [\n      appOnDayChange,\n      appOnHourChange,\n      appOnMeridiemChange,\n      appOnMinuteChange,\n      appOnMonthChange,\n      appOnYearChange,\n      getIsDisabledDay,\n      getIsDisabledTime,\n      getIsOutOfRangeDay,\n      handleChangeComposedDateTimeString,\n      shouldPreserveClearableSpace,\n      trackFocusClearBtn,\n      trackFocusLastSegment,\n      withAnyPicker,\n    ],\n  );\n\n  const onGlobalKeyDown = useCallback(\n    (e: React.KeyboardEvent<HTMLInputElement | HTMLButtonElement>) => {\n      const { key, ctrlKey, metaKey } = e;\n      if ((ctrlKey || metaKey) && key === ';') {\n        onFillWithCurrentDateKeys(e);\n      }\n      if ((ctrlKey || metaKey) && (key === 'Delete' || key === 'Backspace')) handleClearAll(e);\n    },\n    [handleClearAll, onFillWithCurrentDateKeys],\n  );\n\n  return useMemo(\n    () => ({\n      onFillWithCurrentDateKeys,\n      onGlobalKeyDown,\n    }),\n    [onFillWithCurrentDateKeys, onGlobalKeyDown],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADKvB,mBAAqC;AAMrC,yBAA4F;AAC5F,yBAAgD;AAChD,2BAAiF;AAW1E,MAAM,uBAAuB,CAAC,EAAE,kBAAkB,gBAAgB,eAAe,MAAM,MAAc;AAC1G,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,EAAE,oCAAoC,eAAe,IAAI;AAC/D,QAAM,EAAE,uBAAuB,mBAAmB,IAAI;AACtD,QAAM,EAAE,eAAe,6BAA6B,IAAI;AAExD,QAAM,gCAA4B;AAAA,IAChC,CACE,GACA,WAA8E,EAAE,wBAAwB,KAAK,MAC1G;AACH,YAAM,MAAM,IAAI,KAAK;AACrB,YAAM,oBAAgB,yCAAqB,GAAG;AAC9C,YAAM,oBAAgB,yCAAqB,GAAG;AAC9C,YAAM,gBAA0E;AAAA,QAC9E,GAAG;AAAA,QACH,OAAG,oDAAgC,eAAe,oBAAoB,gBAAgB;AAAA,QACtF,OAAG,oDAAgC,eAAe,iBAAiB;AAAA,QACnE,eAAe;AAAA,MACjB;AACA,YAAM,EAAE,OAAO,KAAK,KAAK,QAAI,sDAAgC,aAAa;AAC1E,uBAAiB,OAAO,GAAG,QAAQ;AACnC,qBAAe,KAAK,GAAG,QAAQ;AAC/B,sBAAgB,MAAM,GAAG,QAAQ;AACjC,YAAM,EAAE,OAAO,SAAS,SAAS,QAAI,sDAAgC,aAAa;AAClF,sBAAgB,OAAO,GAAG,QAAQ;AAClC,wBAAkB,SAAS,GAAG,QAAQ;AACtC,0BAAoB,UAAU,GAAG,QAAQ;AACzC,yCAAmC,eAAe,eAAe,aAAa;AAK9E,UAAI,gCAAgC,CAAC;AAAe,2BAAmB;AAAA;AAClE,8BAAsB;AAAA,IAC7B;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,QAAM,sBAAkB;AAAA,IACtB,CAAC,MAAiE;AAChE,YAAM,EAAE,KAAK,SAAS,QAAQ,IAAI;AAClC,WAAK,WAAW,YAAY,QAAQ,KAAK;AACvC,kCAA0B,CAAC;AAAA,MAC7B;AACA,WAAK,WAAW,aAAa,QAAQ,YAAY,QAAQ;AAAc,uBAAe,CAAC;AAAA,IACzF;AAAA,IACA,CAAC,gBAAgB,yBAAyB;AAAA,EAC5C;AAEA,aAAO;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,2BAA2B,eAAe;AAAA,EAC7C;AACF;",
   "names": []
 }

package/dist/cjs/config/useRelevantValueFromProps.js

@@ -29,8 +29,8 @@ __export(useRelevantValueFromProps_exports, {
 module.exports = __toCommonJS(useRelevantValueFromProps_exports);
 var React = __toESM(require("react"));
 var import_react = require("react");
-var import_typeGuards = require("../utils/typeGuards");
-var import_stringHelpers = require("../utils/stringHelpers");
+var import_typeGuards = require("../utils/typeGuards.js");
+var import_stringHelpers = require("../utils/stringHelpers.js");
 const useRelevantValueFromProps = (props) => {
   const dateStringFromProps = (0, import_react.useMemo)(() => {
     if ((0, import_typeGuards.getIsDateTime)(props))

package/dist/cjs/config/useRelevantValueFromProps.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/config/useRelevantValueFromProps.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable complexity */\n/* eslint-disable max-statements */\nimport { useMemo, useState } from 'react';\nimport { getIsDateTime, getIsDate, getIsTime } from '../utils/typeGuards';\nimport { dateTimeToTime, dateTimeToDate } from '../utils/stringHelpers';\nimport type { DSControlledDateTimePickerT } from '../propTypes';\n\nexport const useRelevantValueFromProps = (props: DSControlledDateTimePickerT.InternalProps) => {\n  const dateStringFromProps = useMemo(() => {\n    if (getIsDateTime(props)) return props.dateTime !== '' ? dateTimeToDate(props.dateTime) : '__/__/____';\n    if (getIsDate(props)) return props.date !== '' ? props.date : '__/__/____';\n    return '__/__/____';\n  }, [props]);\n  const timeStringFromProps = useMemo(() => {\n    if (getIsDateTime(props)) return props.dateTime !== '' ? dateTimeToTime(props.dateTime) : '__:__ __';\n    if (getIsTime(props)) return props.time !== '' ? props.time : '__:__ __';\n    return '__:__ __';\n  }, [props]);\n\n  // don't use tempDateString to trigger useEffect for onDateChange\n  // that is an anti-pattern and leads to a lot of issue\n  // if you don't believe me, check date-time-picker v1 which is doing it\n  const [tempDateString, setTempDateString] = useState(dateStringFromProps);\n  // don't use tempTimeString to trigger useEffect for onTimeChange\n  // that is an anti-pattern and leads to a lot of issue\n  // if you don't believe me, check date-time-picker v1 which is doing it\n  const [tempTimeString, setTimeString] = useState(timeStringFromProps);\n\n  return useMemo(\n    () => ({\n      dateStringFromProps,\n      timeStringFromProps,\n      tempDateString,\n      setTempDateString,\n      tempTimeString,\n      setTimeString,\n    }),\n    [dateStringFromProps, tempDateString, tempTimeString, timeStringFromProps],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "sourcesContent": ["/* eslint-disable complexity */\n/* eslint-disable max-statements */\nimport { useMemo, useState } from 'react';\nimport { getIsDateTime, getIsDate, getIsTime } from '../utils/typeGuards.js';\nimport { dateTimeToTime, dateTimeToDate } from '../utils/stringHelpers.js';\nimport type { DSControlledDateTimePickerT } from '../propTypes.js';\n\nexport const useRelevantValueFromProps = (props: DSControlledDateTimePickerT.InternalProps) => {\n  const dateStringFromProps = useMemo(() => {\n    if (getIsDateTime(props)) return props.dateTime !== '' ? dateTimeToDate(props.dateTime) : '__/__/____';\n    if (getIsDate(props)) return props.date !== '' ? props.date : '__/__/____';\n    return '__/__/____';\n  }, [props]);\n  const timeStringFromProps = useMemo(() => {\n    if (getIsDateTime(props)) return props.dateTime !== '' ? dateTimeToTime(props.dateTime) : '__:__ __';\n    if (getIsTime(props)) return props.time !== '' ? props.time : '__:__ __';\n    return '__:__ __';\n  }, [props]);\n\n  // don't use tempDateString to trigger useEffect for onDateChange\n  // that is an anti-pattern and leads to a lot of issue\n  // if you don't believe me, check date-time-picker v1 which is doing it\n  const [tempDateString, setTempDateString] = useState(dateStringFromProps);\n  // don't use tempTimeString to trigger useEffect for onTimeChange\n  // that is an anti-pattern and leads to a lot of issue\n  // if you don't believe me, check date-time-picker v1 which is doing it\n  const [tempTimeString, setTimeString] = useState(timeStringFromProps);\n\n  return useMemo(\n    () => ({\n      dateStringFromProps,\n      timeStringFromProps,\n      tempDateString,\n      setTempDateString,\n      tempTimeString,\n      setTimeString,\n    }),\n    [dateStringFromProps, tempDateString, tempTimeString, timeStringFromProps],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,mBAAkC;AAClC,wBAAoD;AACpD,2BAA+C;AAGxC,MAAM,4BAA4B,CAAC,UAAqD;AAC7F,QAAM,0BAAsB,sBAAQ,MAAM;AACxC,YAAI,iCAAc,KAAK;AAAG,aAAO,MAAM,aAAa,SAAK,qCAAe,MAAM,QAAQ,IAAI;AAC1F,YAAI,6BAAU,KAAK;AAAG,aAAO,MAAM,SAAS,KAAK,MAAM,OAAO;AAC9D,WAAO;AAAA,EACT,GAAG,CAAC,KAAK,CAAC;AACV,QAAM,0BAAsB,sBAAQ,MAAM;AACxC,YAAI,iCAAc,KAAK;AAAG,aAAO,MAAM,aAAa,SAAK,qCAAe,MAAM,QAAQ,IAAI;AAC1F,YAAI,6BAAU,KAAK;AAAG,aAAO,MAAM,SAAS,KAAK,MAAM,OAAO;AAC9D,WAAO;AAAA,EACT,GAAG,CAAC,KAAK,CAAC;AAKV,QAAM,CAAC,gBAAgB,iBAAiB,QAAI,uBAAS,mBAAmB;AAIxE,QAAM,CAAC,gBAAgB,aAAa,QAAI,uBAAS,mBAAmB;AAEpE,aAAO;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,qBAAqB,gBAAgB,gBAAgB,mBAAmB;AAAA,EAC3E;AACF;",
   "names": []
 }

package/dist/cjs/config/useValidateProps.js

@@ -28,9 +28,9 @@ __export(useValidateProps_exports, {
 });
 module.exports = __toCommonJS(useValidateProps_exports);
 var React = __toESM(require("react"));
-var import_stringHelpers = require("../utils/stringHelpers");
-var import_numberHelpers = require("../utils/numberHelpers");
-var import_typeGuards = require("../utils/typeGuards");
+var import_stringHelpers = require("../utils/stringHelpers.js");
+var import_numberHelpers = require("../utils/numberHelpers.js");
+var import_typeGuards = require("../utils/typeGuards.js");
 const PREPEND = `ControlledDateTimePicker:
   Invalid configuration detected::
   

package/dist/cjs/config/useValidateProps.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/config/useValidateProps.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport type { DSControlledDateTimePickerT } from '../propTypes';\nimport {\n  dateTimeToDate,\n  isValidDateString,\n  dateTimeToTime,\n  isValidTimeString,\n  deconstructValuesFromDateString,\n} from '../utils/stringHelpers';\nimport { convertToPositiveNumberIfPossible } from '../utils/numberHelpers';\nimport { getIsDateTime, getIsDate, getIsTime } from '../utils/typeGuards';\nconst PREPEND = `ControlledDateTimePicker:\n  Invalid configuration detected::\n  \n    `;\nconst NOT_A_DEFECT = '';\n// '\\n\\n\\t\\tThis is not a defect, please check\\n\\n\\t\\thttps://qa.dimsum.rd.elliemae.io/?path=/story/components-desktop-components-d-controlledform-date-time-picker--basic\\n\\n\\t\\tfor instructions on how to use the component correctly\\n\\n';\nconst INLINE_RECEIVED_PREPEND = `\n\n    Received:`;\nconst throwInvalidDateTimeError = (invalidValue: string) => {\n  throw new Error(\n    `${PREPEND}the \"dateTime\" you are providing is not respecting the format it must respect.${INLINE_RECEIVED_PREPEND}${invalidValue}(${typeof invalidValue})${NOT_A_DEFECT}`,\n  );\n};\nconst throwInvalidDaterror = (invalidValue: string) => {\n  throw new Error(\n    `${PREPEND}the \"date\" you are providing is not respecting the format it must respect.${INLINE_RECEIVED_PREPEND}${invalidValue}(${typeof invalidValue})${NOT_A_DEFECT}`,\n  );\n};\nconst throwInvalidTimerror = (invalidValue: string) => {\n  throw new Error(\n    `${PREPEND}the \"time\" you are providing is not respecting the format it must respect.${INLINE_RECEIVED_PREPEND}${invalidValue}(${typeof invalidValue})${NOT_A_DEFECT}`,\n  );\n};\nconst throwUncontrolledDateError = (date: string, onDateChange: unknown) => {\n  throw new Error(\n    `${PREPEND}you are trying to use a date selector while providing a non-string \"date\" or providing a non-function to \"onDateChange\"\n  the full-controlled pattern must be used\\n\\tcheck https://reactjs.org/docs/forms.html#controlled-components for more informations\n\n  Received:\n    date: ${date}(${typeof date})\n    onDateChange: (${typeof onDateChange})\n  ${NOT_A_DEFECT}`,\n  );\n};\nconst throwUncontrolledTimeError = (time: string, onTimeChange: unknown) => {\n  throw new Error(\n    `${PREPEND}you are trying to use a time selector while providing a non-string \"time\" or providing a non-function to \"onTimeChange\"\n  the full-controlled pattern must be used\\n\\tcheck https://reactjs.org/docs/forms.html#controlled-components for more informations\n\n  Received:\n    time: ${time}(${typeof time})\n    onTimeChange: (${typeof onTimeChange})\n  ${NOT_A_DEFECT}`,\n  );\n};\n\nconst throwUncontrolledDateTimeError = (dateTime: string, onDateTimeChange: unknown) => {\n  throw new Error(\n    `${PREPEND}you are trying to use a date-time selector while providing a non-string \"dateTime\" or providing a non-function to \"onDateTimeChange\"\n  the full-controlled pattern must be used\\n\\tcheck https://reactjs.org/docs/forms.html#controlled-components for more informations\n\n  Received:\n    dateTime: ${dateTime}(${typeof dateTime})\n    onDateTimeChange: (${typeof onDateTimeChange})\n  ${NOT_A_DEFECT}`,\n  );\n};\nconst throwInvalidEmptyPickerStartingMonthError = (emptyPickerStartingMonth: string) => {\n  throw new Error(\n    `${PREPEND}the provided emptyPickerStartingMonth props is invalid. please provide a string with the format mm/__/yyyy, (mm 01~12, yyyy 0001~9999) \n\n  Received:\n    ${emptyPickerStartingMonth}(${typeof emptyPickerStartingMonth})\n  ${NOT_A_DEFECT}`,\n  );\n};\nconst throwInvalidOnCalendarOpenFocusedDayError = (onCalendarOpenFocusedDay: string) => {\n  throw new Error(\n    `${PREPEND}the provided onCalendarOpenFocusedDay props is invalid. please provide a string with the format mm/dd/yyyy, (mm 01~12, dd 01~31, yyyy 0001~9999) \n\n  Received:\n    ${onCalendarOpenFocusedDay}(${typeof onCalendarOpenFocusedDay})\n  ${NOT_A_DEFECT}`,\n  );\n};\nexport const useValidateProps = (props: DSControlledDateTimePickerT.Props): void => {\n  // validate date-related props\n  if (getIsDateTime(props) || getIsDate(props)) {\n    const { emptyPickerStartingMonth, onCalendarOpenFocusedDay } = props;\n\n    // validate generic use-cases\n    if (emptyPickerStartingMonth) {\n      const { month: stringMonthVal, year: stringYearVal } = deconstructValuesFromDateString(emptyPickerStartingMonth);\n      const monthNum = convertToPositiveNumberIfPossible(stringMonthVal);\n      const yearNum = convertToPositiveNumberIfPossible(stringYearVal);\n      if (monthNum <= 0 || monthNum >= 13 || yearNum <= 0 || yearNum > 9999)\n        throwInvalidEmptyPickerStartingMonthError(emptyPickerStartingMonth);\n    }\n    if (onCalendarOpenFocusedDay) {\n      const {\n        month: stringMonthVal,\n        day: stringDayVal,\n        year: stringYearVal,\n      } = deconstructValuesFromDateString(onCalendarOpenFocusedDay);\n      const monthNum = convertToPositiveNumberIfPossible(stringMonthVal);\n      const dayNum = convertToPositiveNumberIfPossible(stringDayVal);\n      const yearNum = convertToPositiveNumberIfPossible(stringYearVal);\n      if (monthNum <= 0 || monthNum >= 13 || dayNum <= 0 || dayNum > 31 || yearNum <= 0 || yearNum > 9999)\n        throwInvalidOnCalendarOpenFocusedDayError(onCalendarOpenFocusedDay);\n    }\n  }\n  // validate full datetime cases\n  if (getIsDateTime(props)) {\n    const { dateTime, onDateTimeChange } = props;\n    if (typeof dateTime !== 'string' || typeof onDateTimeChange !== 'function')\n      throwUncontrolledDateTimeError(dateTime, onDateTimeChange);\n    else if (!isValidDateString(dateTimeToDate(dateTime)) || !isValidTimeString(dateTimeToTime(dateTime)))\n      throwInvalidDateTimeError(dateTimeToTime(dateTime));\n  }\n\n  // validate date-only cases\n  if (getIsDate(props)) {\n    const { date, onDateChange } = props;\n    if (typeof date !== 'string' || typeof onDateChange !== 'function') throwUncontrolledDateError(date, onDateChange);\n    else if (!isValidDateString(date)) throwInvalidDaterror(date);\n  }\n\n  // validate time-only cases\n\n  if (getIsTime(props)) {\n    const { time, onTimeChange } = props;\n    if (typeof time !== 'string' || typeof onTimeChange !== 'function') throwUncontrolledTimeError(time, onTimeChange);\n    else if (!isValidTimeString(time)) throwInvalidTimerror(time);\n  }\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "sourcesContent": ["/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport type { DSControlledDateTimePickerT } from '../propTypes.js';\nimport {\n  dateTimeToDate,\n  isValidDateString,\n  dateTimeToTime,\n  isValidTimeString,\n  deconstructValuesFromDateString,\n} from '../utils/stringHelpers.js';\nimport { convertToPositiveNumberIfPossible } from '../utils/numberHelpers.js';\nimport { getIsDateTime, getIsDate, getIsTime } from '../utils/typeGuards.js';\nconst PREPEND = `ControlledDateTimePicker:\n  Invalid configuration detected::\n  \n    `;\nconst NOT_A_DEFECT = '';\n// '\\n\\n\\t\\tThis is not a defect, please check\\n\\n\\t\\thttps://qa.dimsum.rd.elliemae.io/?path=/story/components-desktop-components-d-controlledform-date-time-picker--basic\\n\\n\\t\\tfor instructions on how to use the component correctly\\n\\n';\nconst INLINE_RECEIVED_PREPEND = `\n\n    Received:`;\nconst throwInvalidDateTimeError = (invalidValue: string) => {\n  throw new Error(\n    `${PREPEND}the \"dateTime\" you are providing is not respecting the format it must respect.${INLINE_RECEIVED_PREPEND}${invalidValue}(${typeof invalidValue})${NOT_A_DEFECT}`,\n  );\n};\nconst throwInvalidDaterror = (invalidValue: string) => {\n  throw new Error(\n    `${PREPEND}the \"date\" you are providing is not respecting the format it must respect.${INLINE_RECEIVED_PREPEND}${invalidValue}(${typeof invalidValue})${NOT_A_DEFECT}`,\n  );\n};\nconst throwInvalidTimerror = (invalidValue: string) => {\n  throw new Error(\n    `${PREPEND}the \"time\" you are providing is not respecting the format it must respect.${INLINE_RECEIVED_PREPEND}${invalidValue}(${typeof invalidValue})${NOT_A_DEFECT}`,\n  );\n};\nconst throwUncontrolledDateError = (date: string, onDateChange: unknown) => {\n  throw new Error(\n    `${PREPEND}you are trying to use a date selector while providing a non-string \"date\" or providing a non-function to \"onDateChange\"\n  the full-controlled pattern must be used\\n\\tcheck https://reactjs.org/docs/forms.html#controlled-components for more informations\n\n  Received:\n    date: ${date}(${typeof date})\n    onDateChange: (${typeof onDateChange})\n  ${NOT_A_DEFECT}`,\n  );\n};\nconst throwUncontrolledTimeError = (time: string, onTimeChange: unknown) => {\n  throw new Error(\n    `${PREPEND}you are trying to use a time selector while providing a non-string \"time\" or providing a non-function to \"onTimeChange\"\n  the full-controlled pattern must be used\\n\\tcheck https://reactjs.org/docs/forms.html#controlled-components for more informations\n\n  Received:\n    time: ${time}(${typeof time})\n    onTimeChange: (${typeof onTimeChange})\n  ${NOT_A_DEFECT}`,\n  );\n};\n\nconst throwUncontrolledDateTimeError = (dateTime: string, onDateTimeChange: unknown) => {\n  throw new Error(\n    `${PREPEND}you are trying to use a date-time selector while providing a non-string \"dateTime\" or providing a non-function to \"onDateTimeChange\"\n  the full-controlled pattern must be used\\n\\tcheck https://reactjs.org/docs/forms.html#controlled-components for more informations\n\n  Received:\n    dateTime: ${dateTime}(${typeof dateTime})\n    onDateTimeChange: (${typeof onDateTimeChange})\n  ${NOT_A_DEFECT}`,\n  );\n};\nconst throwInvalidEmptyPickerStartingMonthError = (emptyPickerStartingMonth: string) => {\n  throw new Error(\n    `${PREPEND}the provided emptyPickerStartingMonth props is invalid. please provide a string with the format mm/__/yyyy, (mm 01~12, yyyy 0001~9999) \n\n  Received:\n    ${emptyPickerStartingMonth}(${typeof emptyPickerStartingMonth})\n  ${NOT_A_DEFECT}`,\n  );\n};\nconst throwInvalidOnCalendarOpenFocusedDayError = (onCalendarOpenFocusedDay: string) => {\n  throw new Error(\n    `${PREPEND}the provided onCalendarOpenFocusedDay props is invalid. please provide a string with the format mm/dd/yyyy, (mm 01~12, dd 01~31, yyyy 0001~9999) \n\n  Received:\n    ${onCalendarOpenFocusedDay}(${typeof onCalendarOpenFocusedDay})\n  ${NOT_A_DEFECT}`,\n  );\n};\nexport const useValidateProps = (props: DSControlledDateTimePickerT.Props): void => {\n  // validate date-related props\n  if (getIsDateTime(props) || getIsDate(props)) {\n    const { emptyPickerStartingMonth, onCalendarOpenFocusedDay } = props;\n\n    // validate generic use-cases\n    if (emptyPickerStartingMonth) {\n      const { month: stringMonthVal, year: stringYearVal } = deconstructValuesFromDateString(emptyPickerStartingMonth);\n      const monthNum = convertToPositiveNumberIfPossible(stringMonthVal);\n      const yearNum = convertToPositiveNumberIfPossible(stringYearVal);\n      if (monthNum <= 0 || monthNum >= 13 || yearNum <= 0 || yearNum > 9999)\n        throwInvalidEmptyPickerStartingMonthError(emptyPickerStartingMonth);\n    }\n    if (onCalendarOpenFocusedDay) {\n      const {\n        month: stringMonthVal,\n        day: stringDayVal,\n        year: stringYearVal,\n      } = deconstructValuesFromDateString(onCalendarOpenFocusedDay);\n      const monthNum = convertToPositiveNumberIfPossible(stringMonthVal);\n      const dayNum = convertToPositiveNumberIfPossible(stringDayVal);\n      const yearNum = convertToPositiveNumberIfPossible(stringYearVal);\n      if (monthNum <= 0 || monthNum >= 13 || dayNum <= 0 || dayNum > 31 || yearNum <= 0 || yearNum > 9999)\n        throwInvalidOnCalendarOpenFocusedDayError(onCalendarOpenFocusedDay);\n    }\n  }\n  // validate full datetime cases\n  if (getIsDateTime(props)) {\n    const { dateTime, onDateTimeChange } = props;\n    if (typeof dateTime !== 'string' || typeof onDateTimeChange !== 'function')\n      throwUncontrolledDateTimeError(dateTime, onDateTimeChange);\n    else if (!isValidDateString(dateTimeToDate(dateTime)) || !isValidTimeString(dateTimeToTime(dateTime)))\n      throwInvalidDateTimeError(dateTimeToTime(dateTime));\n  }\n\n  // validate date-only cases\n  if (getIsDate(props)) {\n    const { date, onDateChange } = props;\n    if (typeof date !== 'string' || typeof onDateChange !== 'function') throwUncontrolledDateError(date, onDateChange);\n    else if (!isValidDateString(date)) throwInvalidDaterror(date);\n  }\n\n  // validate time-only cases\n\n  if (getIsTime(props)) {\n    const { time, onTimeChange } = props;\n    if (typeof time !== 'string' || typeof onTimeChange !== 'function') throwUncontrolledTimeError(time, onTimeChange);\n    else if (!isValidTimeString(time)) throwInvalidTimerror(time);\n  }\n};\n", "import * as React from 'react';\nexport { React };\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,2BAMO;AACP,2BAAkD;AAClD,wBAAoD;AACpD,MAAM,UAAU;AAAA;AAAA;AAAA;AAIhB,MAAM,eAAe;AAErB,MAAM,0BAA0B;AAAA;AAAA;AAGhC,MAAM,4BAA4B,CAAC,iBAAyB;AAC1D,QAAM,IAAI;AAAA,IACR,GAAG,wFAAwF,0BAA0B,gBAAgB,OAAO,gBAAgB;AAAA,EAC9J;AACF;AACA,MAAM,uBAAuB,CAAC,iBAAyB;AACrD,QAAM,IAAI;AAAA,IACR,GAAG,oFAAoF,0BAA0B,gBAAgB,OAAO,gBAAgB;AAAA,EAC1J;AACF;AACA,MAAM,uBAAuB,CAAC,iBAAyB;AACrD,QAAM,IAAI;AAAA,IACR,GAAG,oFAAoF,0BAA0B,gBAAgB,OAAO,gBAAgB;AAAA,EAC1J;AACF;AACA,MAAM,6BAA6B,CAAC,MAAc,iBAA0B;AAC1E,QAAM,IAAI;AAAA,IACR,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA,YAIK,QAAQ,OAAO;AAAA,qBACN,OAAO;AAAA,IACxB;AAAA,EACF;AACF;AACA,MAAM,6BAA6B,CAAC,MAAc,iBAA0B;AAC1E,QAAM,IAAI;AAAA,IACR,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA,YAIK,QAAQ,OAAO;AAAA,qBACN,OAAO;AAAA,IACxB;AAAA,EACF;AACF;AAEA,MAAM,iCAAiC,CAAC,UAAkB,qBAA8B;AACtF,QAAM,IAAI;AAAA,IACR,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA,gBAIS,YAAY,OAAO;AAAA,yBACV,OAAO;AAAA,IAC5B;AAAA,EACF;AACF;AACA,MAAM,4CAA4C,CAAC,6BAAqC;AACtF,QAAM,IAAI;AAAA,IACR,GAAG;AAAA;AAAA;AAAA,MAGD,4BAA4B,OAAO;AAAA,IACrC;AAAA,EACF;AACF;AACA,MAAM,4CAA4C,CAAC,6BAAqC;AACtF,QAAM,IAAI;AAAA,IACR,GAAG;AAAA;AAAA;AAAA,MAGD,4BAA4B,OAAO;AAAA,IACrC;AAAA,EACF;AACF;AACO,MAAM,mBAAmB,CAAC,UAAmD;AAElF,UAAI,iCAAc,KAAK,SAAK,6BAAU,KAAK,GAAG;AAC5C,UAAM,EAAE,0BAA0B,yBAAyB,IAAI;AAG/D,QAAI,0BAA0B;AAC5B,YAAM,EAAE,OAAO,gBAAgB,MAAM,cAAc,QAAI,sDAAgC,wBAAwB;AAC/G,YAAM,eAAW,wDAAkC,cAAc;AACjE,YAAM,cAAU,wDAAkC,aAAa;AAC/D,UAAI,YAAY,KAAK,YAAY,MAAM,WAAW,KAAK,UAAU;AAC/D,kDAA0C,wBAAwB;AAAA,IACtE;AACA,QAAI,0BAA0B;AAC5B,YAAM;AAAA,QACJ,OAAO;AAAA,QACP,KAAK;AAAA,QACL,MAAM;AAAA,MACR,QAAI,sDAAgC,wBAAwB;AAC5D,YAAM,eAAW,wDAAkC,cAAc;AACjE,YAAM,aAAS,wDAAkC,YAAY;AAC7D,YAAM,cAAU,wDAAkC,aAAa;AAC/D,UAAI,YAAY,KAAK,YAAY,MAAM,UAAU,KAAK,SAAS,MAAM,WAAW,KAAK,UAAU;AAC7F,kDAA0C,wBAAwB;AAAA,IACtE;AAAA,EACF;AAEA,UAAI,iCAAc,KAAK,GAAG;AACxB,UAAM,EAAE,UAAU,iBAAiB,IAAI;AACvC,QAAI,OAAO,aAAa,YAAY,OAAO,qBAAqB;AAC9D,qCAA+B,UAAU,gBAAgB;AAAA,aAClD,KAAC,4CAAkB,qCAAe,QAAQ,CAAC,KAAK,KAAC,4CAAkB,qCAAe,QAAQ,CAAC;AAClG,oCAA0B,qCAAe,QAAQ,CAAC;AAAA,EACtD;AAGA,UAAI,6BAAU,KAAK,GAAG;AACpB,UAAM,EAAE,MAAM,aAAa,IAAI;AAC/B,QAAI,OAAO,SAAS,YAAY,OAAO,iBAAiB;AAAY,iCAA2B,MAAM,YAAY;AAAA,aACxG,KAAC,wCAAkB,IAAI;AAAG,2BAAqB,IAAI;AAAA,EAC9D;AAIA,UAAI,6BAAU,KAAK,GAAG;AACpB,UAAM,EAAE,MAAM,aAAa,IAAI;AAC/B,QAAI,OAAO,SAAS,YAAY,OAAO,iBAAiB;AAAY,iCAA2B,MAAM,YAAY;AAAA,aACxG,KAAC,wCAAkB,IAAI;AAAG,2BAAqB,IAAI;AAAA,EAC9D;AACF;",
   "names": []
 }

package/dist/cjs/index.js

@@ -41,13 +41,13 @@ __export(src_exports, {
 });
 module.exports = __toCommonJS(src_exports);
 var React = __toESM(require("react"));
-var import_ControlledDateTimePicker = require("./ControlledDateTimePicker");
-var import_ControlledDateTimePickerDatatestid = require("./ControlledDateTimePickerDatatestid");
-var import_ControlledDateTimePickerTypes = require("./ControlledDateTimePickerTypes");
-var import_stringHelpers = require("./utils/stringHelpers");
-var import_dateTimeHelpers = require("./utils/dateTimeHelpers");
-var import_dateHelpers = require("./utils/dateHelpers");
-var import_timeHelpers = require("./utils/timeHelpers");
-var import_theming = require("./exported-related/theming");
-var import_propTypes = require("./propTypes");
+var import_ControlledDateTimePicker = require("./ControlledDateTimePicker.js");
+var import_ControlledDateTimePickerDatatestid = require("./ControlledDateTimePickerDatatestid.js");
+var import_ControlledDateTimePickerTypes = require("./ControlledDateTimePickerTypes.js");
+var import_stringHelpers = require("./utils/stringHelpers.js");
+var import_dateTimeHelpers = require("./utils/dateTimeHelpers.js");
+var import_dateHelpers = require("./utils/dateHelpers.js");
+var import_timeHelpers = require("./utils/timeHelpers.js");
+var import_theming = require("./exported-related/theming.js");
+var import_propTypes = require("./propTypes.js");
 //# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/index.ts", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["export { DSControlledDateTimePickerWithSchema, DSControlledDateTimePicker } from './ControlledDateTimePicker';\nexport { ControlledDateTimePickerDatatestid } from './ControlledDateTimePickerDatatestid';\nexport { CONTROLLED_DATE_TIME_PICKER_TYPES } from './ControlledDateTimePickerTypes';\nexport { deconstructValuesFromDateString, prependStringWithPlaceHolders } from './utils/stringHelpers';\nexport { getValidationDateTimeStringMetaInfo } from './utils/dateTimeHelpers';\nexport {\n  getValidationDateStringMetaInfo,\n  getDateStringFromDay,\n  getDayFromDateString,\n  getDateValuesFromDate,\n} from './utils/dateHelpers';\nexport { getValidationTimeStringMetaInfo } from './utils/timeHelpers';\nexport { DSControlledDateTimePickerName, DSControlledDateTimePickerSlots } from './exported-related/theming';\nexport { type DSControlledDateTimePickerT } from './propTypes';\n", "import * as React from 'react';\nexport { React };\n"],
+  "sourcesContent": ["export { DSControlledDateTimePickerWithSchema, DSControlledDateTimePicker } from './ControlledDateTimePicker.js';\nexport { ControlledDateTimePickerDatatestid } from './ControlledDateTimePickerDatatestid.js';\nexport { CONTROLLED_DATE_TIME_PICKER_TYPES } from './ControlledDateTimePickerTypes.js';\nexport { deconstructValuesFromDateString, prependStringWithPlaceHolders } from './utils/stringHelpers.js';\nexport { getValidationDateTimeStringMetaInfo } from './utils/dateTimeHelpers.js';\nexport {\n  getValidationDateStringMetaInfo,\n  getDateStringFromDay,\n  getDayFromDateString,\n  getDateValuesFromDate,\n} from './utils/dateHelpers.js';\nexport { getValidationTimeStringMetaInfo } from './utils/timeHelpers.js';\nexport { DSControlledDateTimePickerName, DSControlledDateTimePickerSlots } from './exported-related/theming.js';\nexport { type DSControlledDateTimePickerT } from './propTypes.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;ACAA,YAAuB;ADAvB,sCAAiF;AACjF,gDAAmD;AACnD,2CAAkD;AAClD,2BAA+E;AAC/E,6BAAoD;AACpD,yBAKO;AACP,yBAAgD;AAChD,qBAAgF;AAChF,uBAAiD;",
   "names": []
 }

package/dist/cjs/package.json

@@ -0,0 +1,7 @@
+{
+  "type": "commonjs",
+  "sideEffects": [
+    "*.css",
+    "*.scss"
+  ]
+}

package/dist/cjs/parts/ClearButton/ClearButton.js

@@ -29,20 +29,25 @@ __export(ClearButton_exports, {
 module.exports = __toCommonJS(ClearButton_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_react = require("react");
+var import_react = __toESM(require("react"));
 var import_ds_icons = require("@elliemae/ds-icons");
 var import_ds_icon = require("@elliemae/ds-icon");
 var import_ds_button = require("@elliemae/ds-button");
-var import_Styleds = require("../Styleds");
-var import_ControlledDateTimePickerDatatestid = require("../../ControlledDateTimePickerDatatestid");
-var import_ControlledDateTimePickerCTX = require("../../ControlledDateTimePickerCTX");
-var import_useClearButton = require("./useClearButton");
+var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
+var import_Styleds = require("../Styleds.js");
+var import_ControlledDateTimePickerDatatestid = require("../../ControlledDateTimePickerDatatestid.js");
+var import_ControlledDateTimePickerCTX = require("../../ControlledDateTimePickerCTX.js");
+var import_useClearButton = require("./useClearButton.js");
 const ClearButton = () => {
   const { onClearClick, onClearButtonKeyDown, clearButtonRef, withClearBtn } = (0, import_useClearButton.useClearButton)();
   const styledsAttrs = {
     shouldDisplay: withClearBtn
   };
-  const { latestInteractionRegion, currFocusDescriber } = (0, import_react.useContext)(import_ControlledDateTimePickerCTX.ControlledDateTimePickerContext);
+  const { latestInteractionRegion, currFocusDescriber, props } = (0, import_react.useContext)(import_ControlledDateTimePickerCTX.ControlledDateTimePickerContext);
+  const ariaAndDataProps = import_react.default.useMemo(
+    () => (0, import_ds_props_helpers.getPropsPerDatatestid)(props[import_ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.CLEAR_BUTTON]),
+    [props]
+  );
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_Styleds.StyledClearButton,
     {
@@ -59,6 +64,7 @@ const ClearButton = () => {
       onKeyDown: onClearButtonKeyDown,
       type: "button",
       ...styledsAttrs,
+      ...ariaAndDataProps,
       children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.CloseMedium, { color: import_ds_icon.DSIconColors.PRIMARY })
     }
   );

package/dist/cjs/parts/ClearButton/ClearButton.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/ClearButton/ClearButton.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable @typescript-eslint/no-unsafe-member-access,  @typescript-eslint/no-unsafe-assignment */\nimport React, { useContext } from 'react';\nimport { CloseMedium } from '@elliemae/ds-icons';\nimport { DSIconColors } from '@elliemae/ds-icon';\nimport { BUTTON_SIZES } from '@elliemae/ds-button';\nimport { StyledClearButton } from '../Styleds';\nimport { ControlledDateTimePickerDatatestid } from '../../ControlledDateTimePickerDatatestid';\nimport { ControlledDateTimePickerContext } from '../../ControlledDateTimePickerCTX';\nimport { useClearButton } from './useClearButton';\n\nexport const ClearButton = (): JSX.Element => {\n  const { onClearClick, onClearButtonKeyDown, clearButtonRef, withClearBtn } = useClearButton();\n  const styledsAttrs = {\n    shouldDisplay: withClearBtn,\n  };\n  const { latestInteractionRegion, currFocusDescriber } = useContext(ControlledDateTimePickerContext);\n\n  return (\n    <StyledClearButton\n      aria-label=\"clear selected date\"\n      buttonType=\"icon\"\n      size={BUTTON_SIZES.M}\n      data-testid={ControlledDateTimePickerDatatestid.CLEAR_BUTTON}\n      innerRef={(DomElem: HTMLButtonElement) => {\n        clearButtonRef.current = DomElem;\n        if (latestInteractionRegion === 'clear-btn' && currFocusDescriber === 'clear-btn') DomElem?.focus?.();\n      }}\n      onClick={onClearClick}\n      onKeyDown={onClearButtonKeyDown}\n      type=\"button\"\n      {...styledsAttrs}\n    >\n      <CloseMedium color={DSIconColors.PRIMARY} />\n    </StyledClearButton>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADgCjB;AA/BN,mBAAkC;AAClC,sBAA4B;AAC5B,qBAA6B;AAC7B,uBAA6B;AAC7B,qBAAkC;AAClC,gDAAmD;AACnD,yCAAgD;AAChD,4BAA+B;AAExB,MAAM,cAAc,MAAmB;AAC5C,QAAM,EAAE,cAAc,sBAAsB,gBAAgB,aAAa,QAAI,sCAAe;AAC5F,QAAM,eAAe;AAAA,IACnB,eAAe;AAAA,EACjB;AACA,QAAM,EAAE,yBAAyB,mBAAmB,QAAI,yBAAW,kEAA+B;AAElG,SACE;AAAA,IAAC;AAAA;AAAA,MACC,cAAW;AAAA,MACX,YAAW;AAAA,MACX,MAAM,8BAAa;AAAA,MACnB,eAAa,6EAAmC;AAAA,MAChD,UAAU,CAAC,YAA+B;AACxC,uBAAe,UAAU;AACzB,YAAI,4BAA4B,eAAe,uBAAuB;AAAa,mBAAS,QAAQ;AAAA,MACtG;AAAA,MACA,SAAS;AAAA,MACT,WAAW;AAAA,MACX,MAAK;AAAA,MACJ,GAAG;AAAA,MAEJ,sDAAC,+BAAY,OAAO,4BAAa,SAAS;AAAA;AAAA,EAC5C;AAEJ;",
-  "names": []
+  "sourcesContent": ["/* eslint-disable @typescript-eslint/no-unsafe-member-access,  @typescript-eslint/no-unsafe-assignment */\nimport React, { useContext } from 'react';\nimport { CloseMedium } from '@elliemae/ds-icons';\nimport { DSIconColors } from '@elliemae/ds-icon';\nimport { BUTTON_SIZES } from '@elliemae/ds-button';\nimport { getPropsPerDatatestid } from '@elliemae/ds-props-helpers';\nimport { StyledClearButton } from '../Styleds.js';\nimport { ControlledDateTimePickerDatatestid } from '../../ControlledDateTimePickerDatatestid.js';\nimport { ControlledDateTimePickerContext } from '../../ControlledDateTimePickerCTX.js';\nimport { useClearButton } from './useClearButton.js';\n\nexport const ClearButton = (): JSX.Element => {\n  const { onClearClick, onClearButtonKeyDown, clearButtonRef, withClearBtn } = useClearButton();\n  const styledsAttrs = {\n    shouldDisplay: withClearBtn,\n  };\n  const { latestInteractionRegion, currFocusDescriber, props } = useContext(ControlledDateTimePickerContext);\n  const ariaAndDataProps = React.useMemo(\n    () => getPropsPerDatatestid(props[ControlledDateTimePickerDatatestid.CLEAR_BUTTON]),\n    [props],\n  );\n\n  return (\n    <StyledClearButton\n      aria-label=\"clear selected date\"\n      buttonType=\"icon\"\n      size={BUTTON_SIZES.M}\n      data-testid={ControlledDateTimePickerDatatestid.CLEAR_BUTTON}\n      innerRef={(DomElem: HTMLButtonElement) => {\n        clearButtonRef.current = DomElem;\n        if (latestInteractionRegion === 'clear-btn' && currFocusDescriber === 'clear-btn') DomElem?.focus?.();\n      }}\n      onClick={onClearClick}\n      onKeyDown={onClearButtonKeyDown}\n      type=\"button\"\n      {...styledsAttrs}\n      {...ariaAndDataProps}\n    >\n      <CloseMedium color={DSIconColors.PRIMARY} />\n    </StyledClearButton>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADsCjB;AArCN,mBAAkC;AAClC,sBAA4B;AAC5B,qBAA6B;AAC7B,uBAA6B;AAC7B,8BAAsC;AACtC,qBAAkC;AAClC,gDAAmD;AACnD,yCAAgD;AAChD,4BAA+B;AAExB,MAAM,cAAc,MAAmB;AAC5C,QAAM,EAAE,cAAc,sBAAsB,gBAAgB,aAAa,QAAI,sCAAe;AAC5F,QAAM,eAAe;AAAA,IACnB,eAAe;AAAA,EACjB;AACA,QAAM,EAAE,yBAAyB,oBAAoB,MAAM,QAAI,yBAAW,kEAA+B;AACzG,QAAM,mBAAmB,aAAAA,QAAM;AAAA,IAC7B,UAAM,+CAAsB,MAAM,6EAAmC,aAAa;AAAA,IAClF,CAAC,KAAK;AAAA,EACR;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,cAAW;AAAA,MACX,YAAW;AAAA,MACX,MAAM,8BAAa;AAAA,MACnB,eAAa,6EAAmC;AAAA,MAChD,UAAU,CAAC,YAA+B;AACxC,uBAAe,UAAU;AACzB,YAAI,4BAA4B,eAAe,uBAAuB;AAAa,mBAAS,QAAQ;AAAA,MACtG;AAAA,MACA,SAAS;AAAA,MACT,WAAW;AAAA,MACX,MAAK;AAAA,MACJ,GAAG;AAAA,MACH,GAAG;AAAA,MAEJ,sDAAC,+BAAY,OAAO,4BAAa,SAAS;AAAA;AAAA,EAC5C;AAEJ;",
+  "names": ["React"]
 }

package/dist/cjs/parts/ClearButton/useClearButton.js

@@ -29,7 +29,7 @@ __export(useClearButton_exports, {
 module.exports = __toCommonJS(useClearButton_exports);
 var React = __toESM(require("react"));
 var import_react = require("react");
-var import_ControlledDateTimePickerCTX = require("../../ControlledDateTimePickerCTX");
+var import_ControlledDateTimePickerCTX = require("../../ControlledDateTimePickerCTX.js");
 const useClearButton = () => {
   const {
     handleClearAll,

package/dist/cjs/parts/ClearButton/useClearButton.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/ClearButton/useClearButton.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-statements */\n/* eslint-disable max-lines */\nimport { useCallback, useMemo, useContext } from 'react';\nimport { ControlledDateTimePickerContext } from '../../ControlledDateTimePickerCTX';\nimport type { DSControlledDateTimePickerInternalsT } from '../../sharedTypes';\n\ninterface UseOnClearClickR {\n  onClearClick: DSControlledDateTimePickerInternalsT.OnDSBtnClick;\n  onClearButtonKeyDown: DSControlledDateTimePickerInternalsT.OnKeyDown<HTMLButtonElement>;\n  clearButtonRef: React.MutableRefObject<HTMLButtonElement | null>;\n  withAnyPicker: boolean;\n  withClearBtn: boolean;\n}\nexport const useClearButton = (): UseOnClearClickR => {\n  const {\n    handleClearAll,\n    clearButtonRef,\n    withAnyPicker,\n    withClearBtn,\n    withAnyInputs,\n    isWithTimeInputs,\n    isWithDateInputs,\n    trackFocusFirstSegment,\n    trackFocusMeridiemInput,\n    trackFocusYearInput,\n    trackFocusPicker,\n  } = useContext(ControlledDateTimePickerContext);\n\n  const onClearClick: DSControlledDateTimePickerInternalsT.OnDSBtnClick = useCallback(\n    (e) => {\n      handleClearAll(e);\n      trackFocusFirstSegment();\n    },\n    [handleClearAll, trackFocusFirstSegment],\n  );\n  const onHomeKeyDown = useCallback(() => {\n    trackFocusFirstSegment();\n  }, [trackFocusFirstSegment]);\n  const onEndKeyDown = useCallback(() => {\n    if (withAnyPicker) trackFocusPicker();\n  }, [withAnyPicker, trackFocusPicker]);\n\n  const onClearButtonKeyDown: DSControlledDateTimePickerInternalsT.OnKeyDown<HTMLButtonElement> = useCallback(\n    (e) => {\n      const { key } = e;\n      const preventDefaultKeys = ['Home', 'End'];\n      const stopPropagationKeys = ['Home', 'End'];\n      if (preventDefaultKeys.includes(key)) e.preventDefault();\n      if (stopPropagationKeys.includes(key)) e.stopPropagation();\n      if (key === 'Home') onHomeKeyDown();\n      if (key === 'End') onEndKeyDown();\n      if (key === 'Backspace' && withAnyInputs) {\n        if (isWithTimeInputs) trackFocusMeridiemInput();\n        else if (isWithDateInputs) trackFocusYearInput();\n      }\n    },\n    [\n      isWithDateInputs,\n      isWithTimeInputs,\n      onEndKeyDown,\n      onHomeKeyDown,\n      trackFocusMeridiemInput,\n      trackFocusYearInput,\n      withAnyInputs,\n    ],\n  );\n\n  return useMemo(\n    () => ({ onClearClick, onClearButtonKeyDown, clearButtonRef, withAnyPicker, withClearBtn }),\n    [onClearClick, onClearButtonKeyDown, clearButtonRef, withAnyPicker, withClearBtn],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "sourcesContent": ["/* eslint-disable max-statements */\n/* eslint-disable max-lines */\nimport { useCallback, useMemo, useContext } from 'react';\nimport { ControlledDateTimePickerContext } from '../../ControlledDateTimePickerCTX.js';\nimport type { DSControlledDateTimePickerInternalsT } from '../../sharedTypes.js';\n\ninterface UseOnClearClickR {\n  onClearClick: DSControlledDateTimePickerInternalsT.OnDSBtnClick;\n  onClearButtonKeyDown: DSControlledDateTimePickerInternalsT.OnKeyDown<HTMLButtonElement>;\n  clearButtonRef: React.MutableRefObject<HTMLButtonElement | null>;\n  withAnyPicker: boolean;\n  withClearBtn: boolean;\n}\nexport const useClearButton = (): UseOnClearClickR => {\n  const {\n    handleClearAll,\n    clearButtonRef,\n    withAnyPicker,\n    withClearBtn,\n    withAnyInputs,\n    isWithTimeInputs,\n    isWithDateInputs,\n    trackFocusFirstSegment,\n    trackFocusMeridiemInput,\n    trackFocusYearInput,\n    trackFocusPicker,\n  } = useContext(ControlledDateTimePickerContext);\n\n  const onClearClick: DSControlledDateTimePickerInternalsT.OnDSBtnClick = useCallback(\n    (e) => {\n      handleClearAll(e);\n      trackFocusFirstSegment();\n    },\n    [handleClearAll, trackFocusFirstSegment],\n  );\n  const onHomeKeyDown = useCallback(() => {\n    trackFocusFirstSegment();\n  }, [trackFocusFirstSegment]);\n  const onEndKeyDown = useCallback(() => {\n    if (withAnyPicker) trackFocusPicker();\n  }, [withAnyPicker, trackFocusPicker]);\n\n  const onClearButtonKeyDown: DSControlledDateTimePickerInternalsT.OnKeyDown<HTMLButtonElement> = useCallback(\n    (e) => {\n      const { key } = e;\n      const preventDefaultKeys = ['Home', 'End'];\n      const stopPropagationKeys = ['Home', 'End'];\n      if (preventDefaultKeys.includes(key)) e.preventDefault();\n      if (stopPropagationKeys.includes(key)) e.stopPropagation();\n      if (key === 'Home') onHomeKeyDown();\n      if (key === 'End') onEndKeyDown();\n      if (key === 'Backspace' && withAnyInputs) {\n        if (isWithTimeInputs) trackFocusMeridiemInput();\n        else if (isWithDateInputs) trackFocusYearInput();\n      }\n    },\n    [\n      isWithDateInputs,\n      isWithTimeInputs,\n      onEndKeyDown,\n      onHomeKeyDown,\n      trackFocusMeridiemInput,\n      trackFocusYearInput,\n      withAnyInputs,\n    ],\n  );\n\n  return useMemo(\n    () => ({ onClearClick, onClearButtonKeyDown, clearButtonRef, withAnyPicker, withClearBtn }),\n    [onClearClick, onClearButtonKeyDown, clearButtonRef, withAnyPicker, withClearBtn],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,mBAAiD;AACjD,yCAAgD;AAUzC,MAAM,iBAAiB,MAAwB;AACpD,QAAM;AAAA,IACJ;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,mBAAkE;AAAA,IACtE,CAAC,MAAM;AACL,qBAAe,CAAC;AAChB,6BAAuB;AAAA,IACzB;AAAA,IACA,CAAC,gBAAgB,sBAAsB;AAAA,EACzC;AACA,QAAM,oBAAgB,0BAAY,MAAM;AACtC,2BAAuB;AAAA,EACzB,GAAG,CAAC,sBAAsB,CAAC;AAC3B,QAAM,mBAAe,0BAAY,MAAM;AACrC,QAAI;AAAe,uBAAiB;AAAA,EACtC,GAAG,CAAC,eAAe,gBAAgB,CAAC;AAEpC,QAAM,2BAA0F;AAAA,IAC9F,CAAC,MAAM;AACL,YAAM,EAAE,IAAI,IAAI;AAChB,YAAM,qBAAqB,CAAC,QAAQ,KAAK;AACzC,YAAM,sBAAsB,CAAC,QAAQ,KAAK;AAC1C,UAAI,mBAAmB,SAAS,GAAG;AAAG,UAAE,eAAe;AACvD,UAAI,oBAAoB,SAAS,GAAG;AAAG,UAAE,gBAAgB;AACzD,UAAI,QAAQ;AAAQ,sBAAc;AAClC,UAAI,QAAQ;AAAO,qBAAa;AAChC,UAAI,QAAQ,eAAe,eAAe;AACxC,YAAI;AAAkB,kCAAwB;AAAA,iBACrC;AAAkB,8BAAoB;AAAA,MACjD;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,aAAO;AAAA,IACL,OAAO,EAAE,cAAc,sBAAsB,gBAAgB,eAAe,aAAa;AAAA,IACzF,CAAC,cAAc,sBAAsB,gBAAgB,eAAe,YAAY;AAAA,EAClF;AACF;",
   "names": []
 }

package/dist/cjs/parts/ControlledDateTimePickerContent.js

@@ -29,17 +29,19 @@ __export(ControlledDateTimePickerContent_exports, {
 module.exports = __toCommonJS(ControlledDateTimePickerContent_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_react = require("react");
+var import_react = __toESM(require("react"));
 var import_ds_grid = require("@elliemae/ds-grid");
-var import_ControlledDateTimePickerCTX = require("../ControlledDateTimePickerCTX");
-var import_Styleds = require("./Styleds");
-var import_DateInputs = require("./DateInputs/DateInputs");
-var import_TimeInputs = require("./TimeInputs/TimeInputs");
-var import_PickersIcons = require("./Pickers/PickersIcons");
-var import_ClearButton = require("./ClearButton/ClearButton");
-var import_ControlledDateTimePickerDatatestid = require("../ControlledDateTimePickerDatatestid");
+var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
+var import_ControlledDateTimePickerCTX = require("../ControlledDateTimePickerCTX.js");
+var import_Styleds = require("./Styleds.js");
+var import_DateInputs = require("./DateInputs/DateInputs.js");
+var import_TimeInputs = require("./TimeInputs/TimeInputs.js");
+var import_PickersIcons = require("./Pickers/PickersIcons.js");
+var import_ClearButton = require("./ClearButton/ClearButton.js");
+var import_ControlledDateTimePickerDatatestid = require("../ControlledDateTimePickerDatatestid.js");
 const ControlledDateTimePickerContent = () => {
   const {
+    props,
     props: { hasError, disabled },
     hideDate,
     hideTime,
@@ -52,6 +54,10 @@ const ControlledDateTimePickerContent = () => {
     onGlobalKeyDown,
     trackFocusResetter
   } = (0, import_react.useContext)(import_ControlledDateTimePickerCTX.ControlledDateTimePickerContext);
+  const ariaAndDataProps = import_react.default.useMemo(
+    () => (0, import_ds_props_helpers.getPropsPerDatatestid)(props[import_ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.CONTAINER]),
+    [props]
+  );
   const styledsAttrs = {
     justPicker: hideDate && hideTime,
     withAnyPicker,
@@ -81,6 +87,7 @@ const ControlledDateTimePickerContent = () => {
       onBlur: trackFocusResetter,
       "data-testid": import_ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.CONTAINER,
       ...styledsAttrs,
+      ...ariaAndDataProps,
       ...globalAttrs,
       ...xstyledAttrs,
       children: [

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/parts/ControlledDateTimePickerContent.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable complexity */\nimport React, { useContext } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { ControlledDateTimePickerContext } from '../ControlledDateTimePickerCTX';\nimport { StyledInputsWrapperGrid } from './Styleds';\nimport { DateInputs } from './DateInputs/DateInputs';\nimport { TimeInputs } from './TimeInputs/TimeInputs';\nimport { PickersIcons } from './Pickers/PickersIcons';\nimport { ClearButton } from './ClearButton/ClearButton';\nimport { ControlledDateTimePickerDatatestid } from '../ControlledDateTimePickerDatatestid';\n\nexport const ControlledDateTimePickerContent = (): JSX.Element => {\n  const {\n    props: { hasError, disabled },\n    hideDate,\n    hideTime,\n    withAnyPicker,\n    withAnyRightController,\n    shouldPreserveClearableSpace,\n    isControllerOnly,\n    globalAttrs,\n    xstyledAttrs,\n    onGlobalKeyDown,\n    trackFocusResetter,\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  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={trackFocusResetter}\n        data-testid={ControlledDateTimePickerDatatestid.CONTAINER}\n        {...styledsAttrs}\n        {...globalAttrs}\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;AD2CnB;AA1CJ,mBAAkC;AAClC,qBAAqB;AACrB,yCAAgD;AAChD,qBAAwC;AACxC,wBAA2B;AAC3B,wBAA2B;AAC3B,0BAA6B;AAC7B,yBAA4B;AAC5B,gDAAmD;AAE5C,MAAM,kCAAkC,MAAmB;AAChE,QAAM;AAAA,IACJ,OAAO,EAAE,UAAU,SAAS;AAAA,IAC5B;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;AAAU,aAAS,KAAK,MAAM;AACnC,MAAI,CAAC;AAAU,aAAS,KAAK,MAAM;AACnC,MAAI;AAAwB,aAAS,KAAK,MAAM;AAEhD,QAAM,mBAAmB,CAAC;AAC1B,MAAI;AAA8B,qBAAiB,KAAK,MAAM;AAC9D,MAAI;AAAe,qBAAiB,KAAK,MAAM;AAE/C,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,6EAAmC;AAAA,MAC/C,GAAG;AAAA,MACH,GAAG;AAAA,MACH,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": []
+  "sourcesContent": ["/* eslint-disable complexity */\nimport React, { useContext } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { getPropsPerDatatestid } from '@elliemae/ds-props-helpers';\nimport { ControlledDateTimePickerContext } from '../ControlledDateTimePickerCTX.js';\nimport { StyledInputsWrapperGrid } from './Styleds.js';\nimport { DateInputs } from './DateInputs/DateInputs.js';\nimport { TimeInputs } from './TimeInputs/TimeInputs.js';\nimport { PickersIcons } from './Pickers/PickersIcons.js';\nimport { ClearButton } from './ClearButton/ClearButton.js';\nimport { ControlledDateTimePickerDatatestid } from '../ControlledDateTimePickerDatatestid.js';\n\nexport const ControlledDateTimePickerContent = (): JSX.Element => {\n  const {\n    props,\n    props: { hasError, disabled },\n    hideDate,\n    hideTime,\n    withAnyPicker,\n    withAnyRightController,\n    shouldPreserveClearableSpace,\n    isControllerOnly,\n    globalAttrs,\n    xstyledAttrs,\n    onGlobalKeyDown,\n    trackFocusResetter,\n  } = useContext(ControlledDateTimePickerContext);\n  const ariaAndDataProps = React.useMemo(\n    () => getPropsPerDatatestid(props[ControlledDateTimePickerDatatestid.CONTAINER]),\n    [props],\n  );\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  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={trackFocusResetter}\n        data-testid={ControlledDateTimePickerDatatestid.CONTAINER}\n        {...styledsAttrs}\n        {...ariaAndDataProps}\n        {...globalAttrs}\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;ADiDnB;AAhDJ,mBAAkC;AAClC,qBAAqB;AACrB,8BAAsC;AACtC,yCAAgD;AAChD,qBAAwC;AACxC,wBAA2B;AAC3B,wBAA2B;AAC3B,0BAA6B;AAC7B,yBAA4B;AAC5B,gDAAmD;AAE5C,MAAM,kCAAkC,MAAmB;AAChE,QAAM;AAAA,IACJ;AAAA,IACA,OAAO,EAAE,UAAU,SAAS;AAAA,IAC5B;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,kEAA+B;AAC9C,QAAM,mBAAmB,aAAAA,QAAM;AAAA,IAC7B,UAAM,+CAAsB,MAAM,6EAAmC,UAAU;AAAA,IAC/E,CAAC,KAAK;AAAA,EACR;AAEA,QAAM,eAAe;AAAA,IACnB,YAAY,YAAY;AAAA,IACxB;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,QAAM,WAAW,CAAC;AAClB,MAAI,CAAC;AAAU,aAAS,KAAK,MAAM;AACnC,MAAI,CAAC;AAAU,aAAS,KAAK,MAAM;AACnC,MAAI;AAAwB,aAAS,KAAK,MAAM;AAEhD,QAAM,mBAAmB,CAAC;AAC1B,MAAI;AAA8B,qBAAiB,KAAK,MAAM;AAC9D,MAAI;AAAe,qBAAiB,KAAK,MAAM;AAE/C,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,6EAAmC;AAAA,MAC/C,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACH,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": ["React"]
 }

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

@@ -30,8 +30,8 @@ module.exports = __toCommonJS(DDInput_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = __toESM(require("react"));
-var import_ControlledDateTimePickerDatatestid = require("../../ControlledDateTimePickerDatatestid");
-var import_Styleds = require("../Styleds");
+var import_ControlledDateTimePickerDatatestid = require("../../ControlledDateTimePickerDatatestid.js");
+var import_Styleds = require("../Styleds.js");
 const regExpNumbers = /^[0-9]+$/;
 const isInvalidDay = (day) => {
   if (day === "")
@@ -50,7 +50,8 @@ const DDInput = import_react.default.memo(
     contextRef,
     placeholder,
     ariaCurrentValueForInputs,
-    isFocused
+    isFocused,
+    ariaAndDataProps
   }) => {
     const validateOnChange = (0, import_react.useCallback)(
       (e) => {
@@ -79,7 +80,8 @@ const DDInput = import_react.default.memo(
         "aria-label": `day input field, ${ariaCurrentValueForInputs}`,
         "data-testid": import_ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.DATE_INPUTS.DAY,
         disabled,
-        "aria-disabled": disabled
+        "aria-disabled": disabled,
+        ...ariaAndDataProps
       }
     );
   }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/DateInputs/DDInput.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useCallback } from 'react';\nimport { ControlledDateTimePickerDatatestid } from '../../ControlledDateTimePickerDatatestid';\nimport { Styled2DigitsInput } from '../Styleds';\nimport type { DSControlledDateTimePickerInternalsT } from '../../sharedTypes';\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  placeholder: string;\n  ariaCurrentValueForInputs: string;\n  contextRef: React.MutableRefObject<HTMLInputElement | null>;\n  isFocused: boolean;\n}\nexport const DDInput = React.memo(\n  ({\n    onChange,\n    onBlur,\n    onFocus,\n    onKeyDown,\n    value,\n    disabled,\n    contextRef,\n    placeholder,\n    ariaCurrentValueForInputs,\n    isFocused,\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      <Styled2DigitsInput\n        onChange={validateOnChange}\n        onBlur={onBlur}\n        onFocus={onFocus}\n        onKeyDown={onKeyDown}\n        value={value}\n        ref={(DomElem: HTMLInputElement) => {\n          (contextRef as React.MutableRefObject<HTMLInputElement>).current = DomElem;\n          if (isFocused) DomElem?.focus?.();\n        }}\n        placeholder={placeholder}\n        aria-label={`day input field, ${ariaCurrentValueForInputs}`}\n        data-testid={ControlledDateTimePickerDatatestid.DATE_INPUTS.DAY}\n        disabled={disabled}\n        aria-disabled={disabled}\n      />\n    );\n  },\n);\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADgDjB;AAhDN,mBAAmC;AACnC,gDAAmD;AACnD,qBAAmC;AAGnC,MAAM,gBAAgB;AACtB,MAAM,eAAe,CAAC,QAAgB;AACpC,MAAI,QAAQ;AAAI,WAAO;AACvB,QAAM,aAAa,cAAc,KAAK,GAAG;AACzC,SAAO,IAAI,SAAS,KAAK,QAAQ,QAAQ,CAAC,cAAc,OAAO,SAAS,KAAK,EAAE,IAAI;AACrF;AAcO,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,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,KAAK,CAAC,YAA8B;AAClC,UAAC,WAAwD,UAAU;AACnE,cAAI;AAAW,qBAAS,QAAQ;AAAA,QAClC;AAAA,QACA;AAAA,QACA,cAAY,oBAAoB;AAAA,QAChC,eAAa,6EAAmC,YAAY;AAAA,QAC5D;AAAA,QACA,iBAAe;AAAA;AAAA,IACjB;AAAA,EAEJ;AACF;",
+  "sourcesContent": ["import React, { useCallback } from 'react';\nimport { ControlledDateTimePickerDatatestid } from '../../ControlledDateTimePickerDatatestid.js';\nimport { Styled2DigitsInput } from '../Styleds.js';\nimport type { DSControlledDateTimePickerInternalsT } from '../../sharedTypes.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  placeholder: string;\n  ariaCurrentValueForInputs: string;\n  contextRef: React.MutableRefObject<HTMLInputElement | null>;\n  isFocused: boolean;\n  ariaAndDataProps?: AriaAndDataProps;\n}\nexport const DDInput = React.memo(\n  ({\n    onChange,\n    onBlur,\n    onFocus,\n    onKeyDown,\n    value,\n    disabled,\n    contextRef,\n    placeholder,\n    ariaCurrentValueForInputs,\n    isFocused,\n    ariaAndDataProps,\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      <Styled2DigitsInput\n        onChange={validateOnChange}\n        onBlur={onBlur}\n        onFocus={onFocus}\n        onKeyDown={onKeyDown}\n        value={value}\n        ref={(DomElem: HTMLInputElement) => {\n          (contextRef as React.MutableRefObject<HTMLInputElement>).current = DomElem;\n          if (isFocused) DomElem?.focus?.();\n        }}\n        placeholder={placeholder}\n        aria-label={`day input field, ${ariaCurrentValueForInputs}`}\n        data-testid={ControlledDateTimePickerDatatestid.DATE_INPUTS.DAY}\n        disabled={disabled}\n        aria-disabled={disabled}\n        {...ariaAndDataProps}\n      />\n    );\n  },\n);\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADkDjB;AAlDN,mBAAmC;AACnC,gDAAmD;AACnD,qBAAmC;AAGnC,MAAM,gBAAgB;AACtB,MAAM,eAAe,CAAC,QAAgB;AACpC,MAAI,QAAQ;AAAI,WAAO;AACvB,QAAM,aAAa,cAAc,KAAK,GAAG;AACzC,SAAO,IAAI,SAAS,KAAK,QAAQ,QAAQ,CAAC,cAAc,OAAO,SAAS,KAAK,EAAE,IAAI;AACrF;AAeO,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,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,KAAK,CAAC,YAA8B;AAClC,UAAC,WAAwD,UAAU;AACnE,cAAI;AAAW,qBAAS,QAAQ;AAAA,QAClC;AAAA,QACA;AAAA,QACA,cAAY,oBAAoB;AAAA,QAChC,eAAa,6EAAmC,YAAY;AAAA,QAC5D;AAAA,QACA,iBAAe;AAAA,QACd,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;",
   "names": ["React"]
 }

package/dist/cjs/parts/DateInputs/DateInputs.js

@@ -29,15 +29,17 @@ __export(DateInputs_exports, {
 module.exports = __toCommonJS(DateInputs_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_react = require("react");
+var import_react = __toESM(require("react"));
 var import_ds_grid = require("@elliemae/ds-grid");
-var import_ControlledDateTimePickerCTX = require("../../ControlledDateTimePickerCTX");
-var import_MMInput = require("./MMInput");
-var import_DDInput = require("./DDInput");
-var import_YYYYInput = require("./YYYYInput");
-var import_Styleds = require("../Styleds");
-var import_useDateInputs = require("./useDateInputs");
-var import_config = require("../config");
+var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
+var import_ControlledDateTimePickerDatatestid = require("../../ControlledDateTimePickerDatatestid.js");
+var import_ControlledDateTimePickerCTX = require("../../ControlledDateTimePickerCTX.js");
+var import_MMInput = require("./MMInput.js");
+var import_DDInput = require("./DDInput.js");
+var import_YYYYInput = require("./YYYYInput.js");
+var import_Styleds = require("../Styleds.js");
+var import_useDateInputs = require("./useDateInputs.js");
+var import_config = require("../config.js");
 const DateInputs = () => {
   const {
     month,
@@ -65,8 +67,21 @@ const DateInputs = () => {
     yearInputRef,
     ariaCurrentValueForInputs,
     latestInteractionRegion,
-    currFocusDescriber
+    currFocusDescriber,
+    props
   } = (0, import_react.useContext)(import_ControlledDateTimePickerCTX.ControlledDateTimePickerContext);
+  const ariaAndDataPropsMonth = import_react.default.useMemo(
+    () => (0, import_ds_props_helpers.getPropsPerDatatestid)(props[import_ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.DATE_INPUTS.MONTH]),
+    [props]
+  );
+  const ariaAndDataPropsDay = import_react.default.useMemo(
+    () => (0, import_ds_props_helpers.getPropsPerDatatestid)(props[import_ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.DATE_INPUTS.DAY]),
+    [props]
+  );
+  const ariaAndDataPropsYear = import_react.default.useMemo(
+    () => (0, import_ds_props_helpers.getPropsPerDatatestid)(props[import_ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.DATE_INPUTS.YEAR]),
+    [props]
+  );
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     import_ds_grid.Grid,
     {
@@ -92,7 +107,8 @@ const DateInputs = () => {
             placeholder: "MM",
             ariaCurrentValueForInputs,
             disabled,
-            isFocused: latestInteractionRegion === "date-inputs" && currFocusDescriber === "month-input"
+            isFocused: latestInteractionRegion === "date-inputs" && currFocusDescriber === "month-input",
+            ariaAndDataProps: ariaAndDataPropsMonth
           }
         ) }),
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Styleds.StyledSeparator, { alignItems: "center", children: "/" }),
@@ -108,7 +124,8 @@ const DateInputs = () => {
             placeholder: "DD",
             ariaCurrentValueForInputs,
             disabled,
-            isFocused: latestInteractionRegion === "date-inputs" && currFocusDescriber === "day-input"
+            isFocused: latestInteractionRegion === "date-inputs" && currFocusDescriber === "day-input",
+            ariaAndDataProps: ariaAndDataPropsDay
           }
         ) }),
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Styleds.StyledSeparator, { alignItems: "center", children: "/" }),
@@ -124,7 +141,8 @@ const DateInputs = () => {
             placeholder: "YYYY",
             ariaCurrentValueForInputs,
             disabled,
-            isFocused: latestInteractionRegion === "date-inputs" && currFocusDescriber === "year-input"
+            isFocused: latestInteractionRegion === "date-inputs" && currFocusDescriber === "year-input",
+            ariaAndDataProps: ariaAndDataPropsYear
           }
         ) })
       ]

package/dist/cjs/parts/DateInputs/DateInputs.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/DateInputs/DateInputs.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useContext } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\n\nimport { ControlledDateTimePickerContext } from '../../ControlledDateTimePickerCTX';\nimport { MMInput } from './MMInput';\nimport { DDInput } from './DDInput';\nimport { YYYYInput } from './YYYYInput';\nimport { StyledFocusWithIn, StyledSeparator } from '../Styleds';\nimport { useDateInputs } from './useDateInputs';\nimport { fixedValues } from '../config';\n\nexport const DateInputs = (): JSX.Element => {\n  const {\n    month,\n    day,\n    year,\n    autoFocusMonthInput,\n    innerRefMonthInput,\n    onMonthChange,\n    onDayChange,\n    onYearChange,\n    onMonthBlur,\n    onDayBlur,\n    onYearBlur,\n    onMonthFocus,\n    onDayFocus,\n    onYearFocus,\n    onMonthKeyDown,\n    onDayKeyDown,\n    onYearKeyDown,\n    disabled,\n  } = useDateInputs();\n  // we do this here so MMInput,DDInput,YYYYInput can be pure component memoized via React.memo\n  const {\n    monthInputRef,\n    dayInputRef,\n    yearInputRef,\n    ariaCurrentValueForInputs,\n    latestInteractionRegion,\n    currFocusDescriber,\n  } = useContext(ControlledDateTimePickerContext);\n\n  return (\n    <Grid\n      cols={[\n        fixedValues.smallInputWidth,\n        fixedValues.separatorWidth,\n        fixedValues.smallInputWidth,\n        fixedValues.separatorWidth,\n        fixedValues.largeInputWidth,\n      ]}\n    >\n      <StyledFocusWithIn>\n        <MMInput\n          onChange={onMonthChange}\n          onBlur={onMonthBlur}\n          onFocus={onMonthFocus}\n          onKeyDown={onMonthKeyDown}\n          value={month}\n          contextRef={monthInputRef}\n          innerRef={innerRefMonthInput}\n          autoFocusMonthInput={autoFocusMonthInput}\n          placeholder=\"MM\"\n          ariaCurrentValueForInputs={ariaCurrentValueForInputs}\n          disabled={disabled}\n          isFocused={latestInteractionRegion === 'date-inputs' && currFocusDescriber === 'month-input'}\n        />\n      </StyledFocusWithIn>\n      <StyledSeparator alignItems=\"center\">/</StyledSeparator>\n      <StyledFocusWithIn>\n        <DDInput\n          onChange={onDayChange}\n          onBlur={onDayBlur}\n          onFocus={onDayFocus}\n          onKeyDown={onDayKeyDown}\n          value={day}\n          contextRef={dayInputRef}\n          placeholder=\"DD\"\n          ariaCurrentValueForInputs={ariaCurrentValueForInputs}\n          disabled={disabled}\n          isFocused={latestInteractionRegion === 'date-inputs' && currFocusDescriber === 'day-input'}\n        />\n      </StyledFocusWithIn>\n      <StyledSeparator alignItems=\"center\">/</StyledSeparator>\n      <StyledFocusWithIn>\n        <YYYYInput\n          onChange={onYearChange}\n          onBlur={onYearBlur}\n          onFocus={onYearFocus}\n          onKeyDown={onYearKeyDown}\n          value={year}\n          contextRef={yearInputRef}\n          placeholder=\"YYYY\"\n          ariaCurrentValueForInputs={ariaCurrentValueForInputs}\n          disabled={disabled}\n          isFocused={latestInteractionRegion === 'date-inputs' && currFocusDescriber === 'year-input'}\n        />\n      </StyledFocusWithIn>\n    </Grid>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD2CnB;AA3CJ,mBAAkC;AAClC,qBAAqB;AAErB,yCAAgD;AAChD,qBAAwB;AACxB,qBAAwB;AACxB,uBAA0B;AAC1B,qBAAmD;AACnD,2BAA8B;AAC9B,oBAA4B;AAErB,MAAM,aAAa,MAAmB;AAC3C,QAAM;AAAA,IACJ;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,IACA;AAAA,EACF,QAAI,oCAAc;AAElB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,kEAA+B;AAE9C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM;AAAA,QACJ,0BAAY;AAAA,QACZ,0BAAY;AAAA,QACZ,0BAAY;AAAA,QACZ,0BAAY;AAAA,QACZ,0BAAY;AAAA,MACd;AAAA,MAEA;AAAA,oDAAC,oCACC;AAAA,UAAC;AAAA;AAAA,YACC,UAAU;AAAA,YACV,QAAQ;AAAA,YACR,SAAS;AAAA,YACT,WAAW;AAAA,YACX,OAAO;AAAA,YACP,YAAY;AAAA,YACZ,UAAU;AAAA,YACV;AAAA,YACA,aAAY;AAAA,YACZ;AAAA,YACA;AAAA,YACA,WAAW,4BAA4B,iBAAiB,uBAAuB;AAAA;AAAA,QACjF,GACF;AAAA,QACA,4CAAC,kCAAgB,YAAW,UAAS,eAAC;AAAA,QACtC,4CAAC,oCACC;AAAA,UAAC;AAAA;AAAA,YACC,UAAU;AAAA,YACV,QAAQ;AAAA,YACR,SAAS;AAAA,YACT,WAAW;AAAA,YACX,OAAO;AAAA,YACP,YAAY;AAAA,YACZ,aAAY;AAAA,YACZ;AAAA,YACA;AAAA,YACA,WAAW,4BAA4B,iBAAiB,uBAAuB;AAAA;AAAA,QACjF,GACF;AAAA,QACA,4CAAC,kCAAgB,YAAW,UAAS,eAAC;AAAA,QACtC,4CAAC,oCACC;AAAA,UAAC;AAAA;AAAA,YACC,UAAU;AAAA,YACV,QAAQ;AAAA,YACR,SAAS;AAAA,YACT,WAAW;AAAA,YACX,OAAO;AAAA,YACP,YAAY;AAAA,YACZ,aAAY;AAAA,YACZ;AAAA,YACA;AAAA,YACA,WAAW,4BAA4B,iBAAiB,uBAAuB;AAAA;AAAA,QACjF,GACF;AAAA;AAAA;AAAA,EACF;AAEJ;",
-  "names": []
+  "sourcesContent": ["import React, { useContext } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { getPropsPerDatatestid } from '@elliemae/ds-props-helpers';\nimport { ControlledDateTimePickerDatatestid } from '../../ControlledDateTimePickerDatatestid.js';\nimport { ControlledDateTimePickerContext } from '../../ControlledDateTimePickerCTX.js';\nimport { MMInput } from './MMInput.js';\nimport { DDInput } from './DDInput.js';\nimport { YYYYInput } from './YYYYInput.js';\nimport { StyledFocusWithIn, StyledSeparator } from '../Styleds.js';\nimport { useDateInputs } from './useDateInputs.js';\nimport { fixedValues } from '../config.js';\n\nexport const DateInputs = (): JSX.Element => {\n  const {\n    month,\n    day,\n    year,\n    autoFocusMonthInput,\n    innerRefMonthInput,\n    onMonthChange,\n    onDayChange,\n    onYearChange,\n    onMonthBlur,\n    onDayBlur,\n    onYearBlur,\n    onMonthFocus,\n    onDayFocus,\n    onYearFocus,\n    onMonthKeyDown,\n    onDayKeyDown,\n    onYearKeyDown,\n    disabled,\n  } = useDateInputs();\n  // we do this here so MMInput,DDInput,YYYYInput can be pure component memoized via React.memo\n  const {\n    monthInputRef,\n    dayInputRef,\n    yearInputRef,\n    ariaCurrentValueForInputs,\n    latestInteractionRegion,\n    currFocusDescriber,\n    props,\n  } = useContext(ControlledDateTimePickerContext);\n  const ariaAndDataPropsMonth = React.useMemo(\n    () => getPropsPerDatatestid(props[ControlledDateTimePickerDatatestid.DATE_INPUTS.MONTH]),\n    [props],\n  );\n  const ariaAndDataPropsDay = React.useMemo(\n    () => getPropsPerDatatestid(props[ControlledDateTimePickerDatatestid.DATE_INPUTS.DAY]),\n    [props],\n  );\n  const ariaAndDataPropsYear = React.useMemo(\n    () => getPropsPerDatatestid(props[ControlledDateTimePickerDatatestid.DATE_INPUTS.YEAR]),\n    [props],\n  );\n\n  return (\n    <Grid\n      cols={[\n        fixedValues.smallInputWidth,\n        fixedValues.separatorWidth,\n        fixedValues.smallInputWidth,\n        fixedValues.separatorWidth,\n        fixedValues.largeInputWidth,\n      ]}\n    >\n      <StyledFocusWithIn>\n        <MMInput\n          onChange={onMonthChange}\n          onBlur={onMonthBlur}\n          onFocus={onMonthFocus}\n          onKeyDown={onMonthKeyDown}\n          value={month}\n          contextRef={monthInputRef}\n          innerRef={innerRefMonthInput}\n          autoFocusMonthInput={autoFocusMonthInput}\n          placeholder=\"MM\"\n          ariaCurrentValueForInputs={ariaCurrentValueForInputs}\n          disabled={disabled}\n          isFocused={latestInteractionRegion === 'date-inputs' && currFocusDescriber === 'month-input'}\n          ariaAndDataProps={ariaAndDataPropsMonth}\n        />\n      </StyledFocusWithIn>\n      <StyledSeparator alignItems=\"center\">/</StyledSeparator>\n      <StyledFocusWithIn>\n        <DDInput\n          onChange={onDayChange}\n          onBlur={onDayBlur}\n          onFocus={onDayFocus}\n          onKeyDown={onDayKeyDown}\n          value={day}\n          contextRef={dayInputRef}\n          placeholder=\"DD\"\n          ariaCurrentValueForInputs={ariaCurrentValueForInputs}\n          disabled={disabled}\n          isFocused={latestInteractionRegion === 'date-inputs' && currFocusDescriber === 'day-input'}\n          ariaAndDataProps={ariaAndDataPropsDay}\n        />\n      </StyledFocusWithIn>\n      <StyledSeparator alignItems=\"center\">/</StyledSeparator>\n      <StyledFocusWithIn>\n        <YYYYInput\n          onChange={onYearChange}\n          onBlur={onYearBlur}\n          onFocus={onYearFocus}\n          onKeyDown={onYearKeyDown}\n          value={year}\n          contextRef={yearInputRef}\n          placeholder=\"YYYY\"\n          ariaCurrentValueForInputs={ariaCurrentValueForInputs}\n          disabled={disabled}\n          isFocused={latestInteractionRegion === 'date-inputs' && currFocusDescriber === 'year-input'}\n          ariaAndDataProps={ariaAndDataPropsYear}\n        />\n      </StyledFocusWithIn>\n    </Grid>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADyDnB;AAzDJ,mBAAkC;AAClC,qBAAqB;AACrB,8BAAsC;AACtC,gDAAmD;AACnD,yCAAgD;AAChD,qBAAwB;AACxB,qBAAwB;AACxB,uBAA0B;AAC1B,qBAAmD;AACnD,2BAA8B;AAC9B,oBAA4B;AAErB,MAAM,aAAa,MAAmB;AAC3C,QAAM;AAAA,IACJ;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,IACA;AAAA,EACF,QAAI,oCAAc;AAElB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,kEAA+B;AAC9C,QAAM,wBAAwB,aAAAA,QAAM;AAAA,IAClC,UAAM,+CAAsB,MAAM,6EAAmC,YAAY,MAAM;AAAA,IACvF,CAAC,KAAK;AAAA,EACR;AACA,QAAM,sBAAsB,aAAAA,QAAM;AAAA,IAChC,UAAM,+CAAsB,MAAM,6EAAmC,YAAY,IAAI;AAAA,IACrF,CAAC,KAAK;AAAA,EACR;AACA,QAAM,uBAAuB,aAAAA,QAAM;AAAA,IACjC,UAAM,+CAAsB,MAAM,6EAAmC,YAAY,KAAK;AAAA,IACtF,CAAC,KAAK;AAAA,EACR;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM;AAAA,QACJ,0BAAY;AAAA,QACZ,0BAAY;AAAA,QACZ,0BAAY;AAAA,QACZ,0BAAY;AAAA,QACZ,0BAAY;AAAA,MACd;AAAA,MAEA;AAAA,oDAAC,oCACC;AAAA,UAAC;AAAA;AAAA,YACC,UAAU;AAAA,YACV,QAAQ;AAAA,YACR,SAAS;AAAA,YACT,WAAW;AAAA,YACX,OAAO;AAAA,YACP,YAAY;AAAA,YACZ,UAAU;AAAA,YACV;AAAA,YACA,aAAY;AAAA,YACZ;AAAA,YACA;AAAA,YACA,WAAW,4BAA4B,iBAAiB,uBAAuB;AAAA,YAC/E,kBAAkB;AAAA;AAAA,QACpB,GACF;AAAA,QACA,4CAAC,kCAAgB,YAAW,UAAS,eAAC;AAAA,QACtC,4CAAC,oCACC;AAAA,UAAC;AAAA;AAAA,YACC,UAAU;AAAA,YACV,QAAQ;AAAA,YACR,SAAS;AAAA,YACT,WAAW;AAAA,YACX,OAAO;AAAA,YACP,YAAY;AAAA,YACZ,aAAY;AAAA,YACZ;AAAA,YACA;AAAA,YACA,WAAW,4BAA4B,iBAAiB,uBAAuB;AAAA,YAC/E,kBAAkB;AAAA;AAAA,QACpB,GACF;AAAA,QACA,4CAAC,kCAAgB,YAAW,UAAS,eAAC;AAAA,QACtC,4CAAC,oCACC;AAAA,UAAC;AAAA;AAAA,YACC,UAAU;AAAA,YACV,QAAQ;AAAA,YACR,SAAS;AAAA,YACT,WAAW;AAAA,YACX,OAAO;AAAA,YACP,YAAY;AAAA,YACZ,aAAY;AAAA,YACZ;AAAA,YACA;AAAA,YACA,WAAW,4BAA4B,iBAAiB,uBAAuB;AAAA,YAC/E,kBAAkB;AAAA;AAAA,QACpB,GACF;AAAA;AAAA;AAAA,EACF;AAEJ;",
+  "names": ["React"]
 }

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

@@ -31,8 +31,8 @@ var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = __toESM(require("react"));
 var import_ds_utilities = require("@elliemae/ds-utilities");
-var import_Styleds = require("../Styleds");
-var import_ControlledDateTimePickerDatatestid = require("../../ControlledDateTimePickerDatatestid");
+var import_Styleds = require("../Styleds.js");
+var import_ControlledDateTimePickerDatatestid = require("../../ControlledDateTimePickerDatatestid.js");
 const regExpNumbers = /^[0-9]+$/;
 const isInvalidMonth = (month) => {
   if (month === "")
@@ -53,7 +53,8 @@ const MMInput = import_react.default.memo(
     innerRef,
     autoFocusMonthInput,
     ariaCurrentValueForInputs,
-    isFocused
+    isFocused,
+    ariaAndDataProps
   }) => {
     const validateOnChange = (0, import_react.useCallback)(
       (e) => {
@@ -93,7 +94,8 @@ const MMInput = import_react.default.memo(
         "aria-label": `month input field, ${ariaCurrentValueForInputs}`,
         "data-testid": import_ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.DATE_INPUTS.MONTH,
         disabled,
-        "aria-disabled": disabled
+        "aria-disabled": disabled,
+        ...ariaAndDataProps
       }
     );
   }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/DateInputs/MMInput.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useCallback, useMemo } from 'react';\nimport { setMultipleRefs } from '@elliemae/ds-utilities';\nimport { Styled2DigitsInput } from '../Styleds';\nimport { ControlledDateTimePickerDatatestid } from '../../ControlledDateTimePickerDatatestid';\nimport type { DSControlledDateTimePickerInternalsT } from '../../sharedTypes';\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  contextRef: React.MutableRefObject<HTMLInputElement | null>;\n  placeholder: string;\n  ariaCurrentValueForInputs: string;\n  isFocused: boolean;\n  innerRef: React.MutableRefObject<HTMLInputElement | HTMLButtonElement | null>;\n}\nexport const MMInput = React.memo(\n  ({\n    onChange,\n    onBlur,\n    onFocus,\n    onKeyDown,\n    value,\n    disabled,\n    placeholder,\n    contextRef,\n    innerRef,\n    autoFocusMonthInput,\n    ariaCurrentValueForInputs,\n    isFocused,\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      <Styled2DigitsInput\n        autoFocus={autoFocusMonthInput}\n        onChange={validateOnChange}\n        onBlur={onBlur}\n        onFocus={onFocus}\n        onKeyDown={onKeyDown}\n        value={value}\n        ref={currentRef}\n        placeholder={placeholder}\n        aria-label={`month input field, ${ariaCurrentValueForInputs}`}\n        data-testid={ControlledDateTimePickerDatatestid.DATE_INPUTS.MONTH}\n        disabled={disabled}\n        aria-disabled={disabled}\n      />\n    );\n  },\n);\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADoEjB;AApEN,mBAA4C;AAC5C,0BAAgC;AAChC,qBAAmC;AACnC,gDAAmD;AAGnD,MAAM,gBAAgB;AACtB,MAAM,iBAAiB,CAAC,UAAkB;AACxC,MAAI,UAAU;AAAI,WAAO;AACzB,QAAM,aAAa,cAAc,KAAK,KAAK;AAC3C,SAAO,MAAM,SAAS,KAAK,UAAU,QAAQ,CAAC,cAAc,OAAO,SAAS,OAAO,EAAE,IAAI;AAC3F;AAeO,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,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;AAAW,mBAAS,QAAQ;AAAA,MAClC;AAAA,MACA,CAAC,YAAY,SAAS;AAAA,IACxB;AAEA,UAAM,iBAAa,sBAAQ,MAAM;AAC/B,UAAI,UAAU;AACZ,mBAAO,qCAAgB,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,KAAK;AAAA,QACL;AAAA,QACA,cAAY,sBAAsB;AAAA,QAClC,eAAa,6EAAmC,YAAY;AAAA,QAC5D;AAAA,QACA,iBAAe;AAAA;AAAA,IACjB;AAAA,EAEJ;AACF;",
+  "sourcesContent": ["import React, { useCallback, useMemo } from 'react';\nimport { setMultipleRefs } from '@elliemae/ds-utilities';\nimport { Styled2DigitsInput } from '../Styleds.js';\nimport { ControlledDateTimePickerDatatestid } from '../../ControlledDateTimePickerDatatestid.js';\nimport type { DSControlledDateTimePickerInternalsT } from '../../sharedTypes.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  contextRef: React.MutableRefObject<HTMLInputElement | null>;\n  placeholder: string;\n  ariaCurrentValueForInputs: string;\n  isFocused: boolean;\n  innerRef?: React.MutableRefObject<HTMLInputElement | HTMLButtonElement | null>;\n  ariaAndDataProps?: AriaAndDataProps;\n}\nexport const MMInput = React.memo(\n  ({\n    onChange,\n    onBlur,\n    onFocus,\n    onKeyDown,\n    value,\n    disabled,\n    placeholder,\n    contextRef,\n    innerRef,\n    autoFocusMonthInput,\n    ariaCurrentValueForInputs,\n    isFocused,\n    ariaAndDataProps,\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      <Styled2DigitsInput\n        autoFocus={autoFocusMonthInput}\n        onChange={validateOnChange}\n        onBlur={onBlur}\n        onFocus={onFocus}\n        onKeyDown={onKeyDown}\n        value={value}\n        ref={currentRef}\n        placeholder={placeholder}\n        aria-label={`month input field, ${ariaCurrentValueForInputs}`}\n        data-testid={ControlledDateTimePickerDatatestid.DATE_INPUTS.MONTH}\n        disabled={disabled}\n        aria-disabled={disabled}\n        {...ariaAndDataProps}\n      />\n    );\n  },\n);\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADsEjB;AAtEN,mBAA4C;AAC5C,0BAAgC;AAChC,qBAAmC;AACnC,gDAAmD;AAGnD,MAAM,gBAAgB;AACtB,MAAM,iBAAiB,CAAC,UAAkB;AACxC,MAAI,UAAU;AAAI,WAAO;AACzB,QAAM,aAAa,cAAc,KAAK,KAAK;AAC3C,SAAO,MAAM,SAAS,KAAK,UAAU,QAAQ,CAAC,cAAc,OAAO,SAAS,OAAO,EAAE,IAAI;AAC3F;AAgBO,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,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;AAAW,mBAAS,QAAQ;AAAA,MAClC;AAAA,MACA,CAAC,YAAY,SAAS;AAAA,IACxB;AAEA,UAAM,iBAAa,sBAAQ,MAAM;AAC/B,UAAI,UAAU;AACZ,mBAAO,qCAAgB,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,KAAK;AAAA,QACL;AAAA,QACA,cAAY,sBAAsB;AAAA,QAClC,eAAa,6EAAmC,YAAY;AAAA,QAC5D;AAAA,QACA,iBAAe;AAAA,QACd,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;",
   "names": ["React"]
 }