@elliemae/ds-form-date-time-picker 3.16.0-next.2 → 3.16.0-next.21

package/dist/esm/config/useRelevantValueFromProps.js

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { useMemo, useState } from "react";
-import { getIsDateTime, getIsDate, getIsTime } from "../utils/typeGuards";
-import { dateTimeToTime, dateTimeToDate } from "../utils/stringHelpers";
+import { getIsDateTime, getIsDate, getIsTime } from "../utils/typeGuards.js";
+import { dateTimeToTime, dateTimeToDate } from "../utils/stringHelpers.js";
 const useRelevantValueFromProps = (props) => {
   const dateStringFromProps = useMemo(() => {
     if (getIsDateTime(props))

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useRelevantValueFromProps.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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"],
   "mappings": "AAAA,YAAY,WAAW;ACEvB,SAAS,SAAS,gBAAgB;AAClC,SAAS,eAAe,WAAW,iBAAiB;AACpD,SAAS,gBAAgB,sBAAsB;AAGxC,MAAM,4BAA4B,CAAC,UAAqD;AAC7F,QAAM,sBAAsB,QAAQ,MAAM;AACxC,QAAI,cAAc,KAAK;AAAG,aAAO,MAAM,aAAa,KAAK,eAAe,MAAM,QAAQ,IAAI;AAC1F,QAAI,UAAU,KAAK;AAAG,aAAO,MAAM,SAAS,KAAK,MAAM,OAAO;AAC9D,WAAO;AAAA,EACT,GAAG,CAAC,KAAK,CAAC;AACV,QAAM,sBAAsB,QAAQ,MAAM;AACxC,QAAI,cAAc,KAAK;AAAG,aAAO,MAAM,aAAa,KAAK,eAAe,MAAM,QAAQ,IAAI;AAC1F,QAAI,UAAU,KAAK;AAAG,aAAO,MAAM,SAAS,KAAK,MAAM,OAAO;AAC9D,WAAO;AAAA,EACT,GAAG,CAAC,KAAK,CAAC;AAKV,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAS,mBAAmB;AAIxE,QAAM,CAAC,gBAAgB,aAAa,IAAI,SAAS,mBAAmB;AAEpE,SAAO;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/esm/config/useValidateProps.js

@@ -5,9 +5,9 @@ import {
   dateTimeToTime,
   isValidTimeString,
   deconstructValuesFromDateString
-} from "../utils/stringHelpers";
-import { convertToPositiveNumberIfPossible } from "../utils/numberHelpers";
-import { getIsDateTime, getIsDate, getIsTime } from "../utils/typeGuards";
+} from "../utils/stringHelpers.js";
+import { convertToPositiveNumberIfPossible } from "../utils/numberHelpers.js";
+import { getIsDateTime, getIsDate, getIsTime } from "../utils/typeGuards.js";
 const PREPEND = `ControlledDateTimePicker:
   Invalid configuration detected::
   

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useValidateProps.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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"],
   "mappings": "AAAA,YAAY,WAAW;ACGvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,yCAAyC;AAClD,SAAS,eAAe,WAAW,iBAAiB;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,MAAI,cAAc,KAAK,KAAK,UAAU,KAAK,GAAG;AAC5C,UAAM,EAAE,0BAA0B,yBAAyB,IAAI;AAG/D,QAAI,0BAA0B;AAC5B,YAAM,EAAE,OAAO,gBAAgB,MAAM,cAAc,IAAI,gCAAgC,wBAAwB;AAC/G,YAAM,WAAW,kCAAkC,cAAc;AACjE,YAAM,UAAU,kCAAkC,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,IAAI,gCAAgC,wBAAwB;AAC5D,YAAM,WAAW,kCAAkC,cAAc;AACjE,YAAM,SAAS,kCAAkC,YAAY;AAC7D,YAAM,UAAU,kCAAkC,aAAa;AAC/D,UAAI,YAAY,KAAK,YAAY,MAAM,UAAU,KAAK,SAAS,MAAM,WAAW,KAAK,UAAU;AAC7F,kDAA0C,wBAAwB;AAAA,IACtE;AAAA,EACF;AAEA,MAAI,cAAc,KAAK,GAAG;AACxB,UAAM,EAAE,UAAU,iBAAiB,IAAI;AACvC,QAAI,OAAO,aAAa,YAAY,OAAO,qBAAqB;AAC9D,qCAA+B,UAAU,gBAAgB;AAAA,aAClD,CAAC,kBAAkB,eAAe,QAAQ,CAAC,KAAK,CAAC,kBAAkB,eAAe,QAAQ,CAAC;AAClG,gCAA0B,eAAe,QAAQ,CAAC;AAAA,EACtD;AAGA,MAAI,UAAU,KAAK,GAAG;AACpB,UAAM,EAAE,MAAM,aAAa,IAAI;AAC/B,QAAI,OAAO,SAAS,YAAY,OAAO,iBAAiB;AAAY,iCAA2B,MAAM,YAAY;AAAA,aACxG,CAAC,kBAAkB,IAAI;AAAG,2BAAqB,IAAI;AAAA,EAC9D;AAIA,MAAI,UAAU,KAAK,GAAG;AACpB,UAAM,EAAE,MAAM,aAAa,IAAI;AAC/B,QAAI,OAAO,SAAS,YAAY,OAAO,iBAAiB;AAAY,iCAA2B,MAAM,YAAY;AAAA,aACxG,CAAC,kBAAkB,IAAI;AAAG,2BAAqB,IAAI;AAAA,EAC9D;AACF;",
   "names": []
 }

package/dist/esm/index.js

@@ -1,18 +1,18 @@
 import * as React from "react";
-import { DSControlledDateTimePickerWithSchema, DSControlledDateTimePicker } from "./ControlledDateTimePicker";
-import { ControlledDateTimePickerDatatestid } from "./ControlledDateTimePickerDatatestid";
-import { CONTROLLED_DATE_TIME_PICKER_TYPES } from "./ControlledDateTimePickerTypes";
-import { deconstructValuesFromDateString, prependStringWithPlaceHolders } from "./utils/stringHelpers";
-import { getValidationDateTimeStringMetaInfo } from "./utils/dateTimeHelpers";
+import { DSControlledDateTimePickerWithSchema, DSControlledDateTimePicker } from "./ControlledDateTimePicker.js";
+import { ControlledDateTimePickerDatatestid } from "./ControlledDateTimePickerDatatestid.js";
+import { CONTROLLED_DATE_TIME_PICKER_TYPES } from "./ControlledDateTimePickerTypes.js";
+import { deconstructValuesFromDateString, prependStringWithPlaceHolders } from "./utils/stringHelpers.js";
+import { getValidationDateTimeStringMetaInfo } from "./utils/dateTimeHelpers.js";
 import {
   getValidationDateStringMetaInfo,
   getDateStringFromDay,
   getDayFromDateString,
   getDateValuesFromDate
-} from "./utils/dateHelpers";
-import { getValidationTimeStringMetaInfo } from "./utils/timeHelpers";
-import { DSControlledDateTimePickerName, DSControlledDateTimePickerSlots } from "./exported-related/theming";
-import {} from "./propTypes";
+} from "./utils/dateHelpers.js";
+import { getValidationTimeStringMetaInfo } from "./utils/timeHelpers.js";
+import { DSControlledDateTimePickerName, DSControlledDateTimePickerSlots } from "./exported-related/theming.js";
+import {} from "./propTypes.js";
 export {
   CONTROLLED_DATE_TIME_PICKER_TYPES,
   ControlledDateTimePickerDatatestid,

package/dist/esm/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/index.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
   "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,sCAAsC,kCAAkC;AACjF,SAAS,0CAA0C;AACnD,SAAS,yCAAyC;AAClD,SAAS,iCAAiC,qCAAqC;AAC/E,SAAS,2CAA2C;AACpD;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,uCAAuC;AAChD,SAAS,gCAAgC,uCAAuC;AAChF,eAAiD;",
   "names": []
 }

package/dist/esm/package.json

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

package/dist/esm/parts/ClearButton/ClearButton.js

@@ -1,19 +1,24 @@
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
-import { useContext } from "react";
+import React2, { useContext } from "react";
 import { CloseMedium } from "@elliemae/ds-icons";
 import { DSIconColors } from "@elliemae/ds-icon";
 import { BUTTON_SIZES } from "@elliemae/ds-button";
-import { StyledClearButton } from "../Styleds";
-import { ControlledDateTimePickerDatatestid } from "../../ControlledDateTimePickerDatatestid";
-import { ControlledDateTimePickerContext } from "../../ControlledDateTimePickerCTX";
-import { useClearButton } from "./useClearButton";
+import { getPropsPerDatatestid } from "@elliemae/ds-props-helpers";
+import { StyledClearButton } from "../Styleds.js";
+import { ControlledDateTimePickerDatatestid } from "../../ControlledDateTimePickerDatatestid.js";
+import { ControlledDateTimePickerContext } from "../../ControlledDateTimePickerCTX.js";
+import { useClearButton } from "./useClearButton.js";
 const ClearButton = () => {
   const { onClearClick, onClearButtonKeyDown, clearButtonRef, withClearBtn } = useClearButton();
   const styledsAttrs = {
     shouldDisplay: withClearBtn
   };
-  const { latestInteractionRegion, currFocusDescriber } = useContext(ControlledDateTimePickerContext);
+  const { latestInteractionRegion, currFocusDescriber, props } = useContext(ControlledDateTimePickerContext);
+  const ariaAndDataProps = React2.useMemo(
+    () => getPropsPerDatatestid(props[ControlledDateTimePickerDatatestid.CLEAR_BUTTON]),
+    [props]
+  );
   return /* @__PURE__ */ jsx(
     StyledClearButton,
     {
@@ -30,6 +35,7 @@ const ClearButton = () => {
       onKeyDown: onClearButtonKeyDown,
       type: "button",
       ...styledsAttrs,
+      ...ariaAndDataProps,
       children: /* @__PURE__ */ jsx(CloseMedium, { color: DSIconColors.PRIMARY })
     }
   );

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/ClearButton/ClearButton.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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"],
-  "mappings": "AAAA,YAAY,WAAW;ACgCjB;AA/BN,SAAgB,kBAAkB;AAClC,SAAS,mBAAmB;AAC5B,SAAS,oBAAoB;AAC7B,SAAS,oBAAoB;AAC7B,SAAS,yBAAyB;AAClC,SAAS,0CAA0C;AACnD,SAAS,uCAAuC;AAChD,SAAS,sBAAsB;AAExB,MAAM,cAAc,MAAmB;AAC5C,QAAM,EAAE,cAAc,sBAAsB,gBAAgB,aAAa,IAAI,eAAe;AAC5F,QAAM,eAAe;AAAA,IACnB,eAAe;AAAA,EACjB;AACA,QAAM,EAAE,yBAAyB,mBAAmB,IAAI,WAAW,+BAA+B;AAElG,SACE;AAAA,IAAC;AAAA;AAAA,MACC,cAAW;AAAA,MACX,YAAW;AAAA,MACX,MAAM,aAAa;AAAA,MACnB,eAAa,mCAAmC;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,8BAAC,eAAY,OAAO,aAAa,SAAS;AAAA;AAAA,EAC5C;AAEJ;",
-  "names": []
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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"],
+  "mappings": "AAAA,YAAY,WAAW;ACsCjB;AArCN,OAAOA,UAAS,kBAAkB;AAClC,SAAS,mBAAmB;AAC5B,SAAS,oBAAoB;AAC7B,SAAS,oBAAoB;AAC7B,SAAS,6BAA6B;AACtC,SAAS,yBAAyB;AAClC,SAAS,0CAA0C;AACnD,SAAS,uCAAuC;AAChD,SAAS,sBAAsB;AAExB,MAAM,cAAc,MAAmB;AAC5C,QAAM,EAAE,cAAc,sBAAsB,gBAAgB,aAAa,IAAI,eAAe;AAC5F,QAAM,eAAe;AAAA,IACnB,eAAe;AAAA,EACjB;AACA,QAAM,EAAE,yBAAyB,oBAAoB,MAAM,IAAI,WAAW,+BAA+B;AACzG,QAAM,mBAAmBA,OAAM;AAAA,IAC7B,MAAM,sBAAsB,MAAM,mCAAmC,YAAY,CAAC;AAAA,IAClF,CAAC,KAAK;AAAA,EACR;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,cAAW;AAAA,MACX,YAAW;AAAA,MACX,MAAM,aAAa;AAAA,MACnB,eAAa,mCAAmC;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,8BAAC,eAAY,OAAO,aAAa,SAAS;AAAA;AAAA,EAC5C;AAEJ;",
+  "names": ["React"]
 }

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

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { useCallback, useMemo, useContext } from "react";
-import { ControlledDateTimePickerContext } from "../../ControlledDateTimePickerCTX";
+import { ControlledDateTimePickerContext } from "../../ControlledDateTimePickerCTX.js";
 const useClearButton = () => {
   const {
     handleClearAll,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/ClearButton/useClearButton.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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"],
   "mappings": "AAAA,YAAY,WAAW;ACEvB,SAAS,aAAa,SAAS,kBAAkB;AACjD,SAAS,uCAAuC;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,IAAI,WAAW,+BAA+B;AAE9C,QAAM,eAAkE;AAAA,IACtE,CAAC,MAAM;AACL,qBAAe,CAAC;AAChB,6BAAuB;AAAA,IACzB;AAAA,IACA,CAAC,gBAAgB,sBAAsB;AAAA,EACzC;AACA,QAAM,gBAAgB,YAAY,MAAM;AACtC,2BAAuB;AAAA,EACzB,GAAG,CAAC,sBAAsB,CAAC;AAC3B,QAAM,eAAe,YAAY,MAAM;AACrC,QAAI;AAAe,uBAAiB;AAAA,EACtC,GAAG,CAAC,eAAe,gBAAgB,CAAC;AAEpC,QAAM,uBAA0F;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,SAAO;AAAA,IACL,OAAO,EAAE,cAAc,sBAAsB,gBAAgB,eAAe,aAAa;AAAA,IACzF,CAAC,cAAc,sBAAsB,gBAAgB,eAAe,YAAY;AAAA,EAClF;AACF;",
   "names": []
 }

package/dist/esm/parts/ControlledDateTimePickerContent.js

@@ -1,16 +1,18 @@
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useContext } from "react";
+import React2, { useContext } from "react";
 import { Grid } from "@elliemae/ds-grid";
-import { ControlledDateTimePickerContext } from "../ControlledDateTimePickerCTX";
-import { StyledInputsWrapperGrid } from "./Styleds";
-import { DateInputs } from "./DateInputs/DateInputs";
-import { TimeInputs } from "./TimeInputs/TimeInputs";
-import { PickersIcons } from "./Pickers/PickersIcons";
-import { ClearButton } from "./ClearButton/ClearButton";
-import { ControlledDateTimePickerDatatestid } from "../ControlledDateTimePickerDatatestid";
+import { getPropsPerDatatestid } from "@elliemae/ds-props-helpers";
+import { ControlledDateTimePickerContext } from "../ControlledDateTimePickerCTX.js";
+import { StyledInputsWrapperGrid } from "./Styleds.js";
+import { DateInputs } from "./DateInputs/DateInputs.js";
+import { TimeInputs } from "./TimeInputs/TimeInputs.js";
+import { PickersIcons } from "./Pickers/PickersIcons.js";
+import { ClearButton } from "./ClearButton/ClearButton.js";
+import { ControlledDateTimePickerDatatestid } from "../ControlledDateTimePickerDatatestid.js";
 const ControlledDateTimePickerContent = () => {
   const {
+    props,
     props: { hasError, disabled },
     hideDate,
     hideTime,
@@ -23,6 +25,10 @@ const ControlledDateTimePickerContent = () => {
     onGlobalKeyDown,
     trackFocusResetter
   } = useContext(ControlledDateTimePickerContext);
+  const ariaAndDataProps = React2.useMemo(
+    () => getPropsPerDatatestid(props[ControlledDateTimePickerDatatestid.CONTAINER]),
+    [props]
+  );
   const styledsAttrs = {
     justPicker: hideDate && hideTime,
     withAnyPicker,
@@ -52,6 +58,7 @@ const ControlledDateTimePickerContent = () => {
       onBlur: trackFocusResetter,
       "data-testid": ControlledDateTimePickerDatatestid.CONTAINER,
       ...styledsAttrs,
+      ...ariaAndDataProps,
       ...globalAttrs,
       ...xstyledAttrs,
       children: [

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/ControlledDateTimePickerContent.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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"],
-  "mappings": "AAAA,YAAY,WAAW;AC2CnB,mBAiBuB,KAGjB,YApBN;AA1CJ,SAAgB,kBAAkB;AAClC,SAAS,YAAY;AACrB,SAAS,uCAAuC;AAChD,SAAS,+BAA+B;AACxC,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAC3B,SAAS,oBAAoB;AAC7B,SAAS,mBAAmB;AAC5B,SAAS,0CAA0C;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,IAAI,WAAW,+BAA+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,gCAKE;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,mCAAmC;AAAA,MAC/C,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MAEH;AAAA,mBAAW,OAAO,oBAAC,cAAW;AAAA,QAC9B,WAAW,OAAO,oBAAC,cAAW;AAAA,QAC9B,yBACC,qBAAC,QAAK,MAAM,kBACT;AAAA,yCAA+B,oBAAC,eAAY,IAAK;AAAA,UACjD,gBAAgB,oBAAC,gBAAa,IAAK;AAAA,WACtC,IACE;AAAA;AAAA;AAAA,EACN,GACF;AAEJ;",
-  "names": []
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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"],
+  "mappings": "AAAA,YAAY,WAAW;ACiDnB,mBAkBuB,KAGjB,YArBN;AAhDJ,OAAOA,UAAS,kBAAkB;AAClC,SAAS,YAAY;AACrB,SAAS,6BAA6B;AACtC,SAAS,uCAAuC;AAChD,SAAS,+BAA+B;AACxC,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAC3B,SAAS,oBAAoB;AAC7B,SAAS,mBAAmB;AAC5B,SAAS,0CAA0C;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,IAAI,WAAW,+BAA+B;AAC9C,QAAM,mBAAmBA,OAAM;AAAA,IAC7B,MAAM,sBAAsB,MAAM,mCAAmC,SAAS,CAAC;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,gCAKE;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,mCAAmC;AAAA,MAC/C,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MAEH;AAAA,mBAAW,OAAO,oBAAC,cAAW;AAAA,QAC9B,WAAW,OAAO,oBAAC,cAAW;AAAA,QAC9B,yBACC,qBAAC,QAAK,MAAM,kBACT;AAAA,yCAA+B,oBAAC,eAAY,IAAK;AAAA,UACjD,gBAAgB,oBAAC,gBAAa,IAAK;AAAA,WACtC,IACE;AAAA;AAAA;AAAA,EACN,GACF;AAEJ;",
+  "names": ["React"]
 }

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

@@ -1,8 +1,8 @@
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 import React2, { useCallback } from "react";
-import { ControlledDateTimePickerDatatestid } from "../../ControlledDateTimePickerDatatestid";
-import { Styled2DigitsInput } from "../Styleds";
+import { ControlledDateTimePickerDatatestid } from "../../ControlledDateTimePickerDatatestid.js";
+import { Styled2DigitsInput } from "../Styleds.js";
 const regExpNumbers = /^[0-9]+$/;
 const isInvalidDay = (day) => {
   if (day === "")
@@ -21,7 +21,8 @@ const DDInput = React2.memo(
     contextRef,
     placeholder,
     ariaCurrentValueForInputs,
-    isFocused
+    isFocused,
+    ariaAndDataProps
   }) => {
     const validateOnChange = useCallback(
       (e) => {
@@ -50,7 +51,8 @@ const DDInput = React2.memo(
         "aria-label": `day input field, ${ariaCurrentValueForInputs}`,
         "data-testid": ControlledDateTimePickerDatatestid.DATE_INPUTS.DAY,
         disabled,
-        "aria-disabled": disabled
+        "aria-disabled": disabled,
+        ...ariaAndDataProps
       }
     );
   }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/DateInputs/DDInput.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
-  "mappings": "AAAA,YAAY,WAAW;ACgDjB;AAhDN,OAAOA,UAAS,mBAAmB;AACnC,SAAS,0CAA0C;AACnD,SAAS,0BAA0B;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,UAAUA,OAAM;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,mBAAmB;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,mCAAmC,YAAY;AAAA,QAC5D;AAAA,QACA,iBAAe;AAAA;AAAA,IACjB;AAAA,EAEJ;AACF;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
+  "mappings": "AAAA,YAAY,WAAW;ACkDjB;AAlDN,OAAOA,UAAS,mBAAmB;AACnC,SAAS,0CAA0C;AACnD,SAAS,0BAA0B;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,UAAUA,OAAM;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,mBAAmB;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,mCAAmC,YAAY;AAAA,QAC5D;AAAA,QACA,iBAAe;AAAA,QACd,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;",
   "names": ["React"]
 }

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

@@ -1,14 +1,16 @@
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useContext } from "react";
+import React2, { useContext } from "react";
 import { Grid } from "@elliemae/ds-grid";
-import { ControlledDateTimePickerContext } from "../../ControlledDateTimePickerCTX";
-import { MMInput } from "./MMInput";
-import { DDInput } from "./DDInput";
-import { YYYYInput } from "./YYYYInput";
-import { StyledFocusWithIn, StyledSeparator } from "../Styleds";
-import { useDateInputs } from "./useDateInputs";
-import { fixedValues } from "../config";
+import { getPropsPerDatatestid } from "@elliemae/ds-props-helpers";
+import { ControlledDateTimePickerDatatestid } from "../../ControlledDateTimePickerDatatestid.js";
+import { ControlledDateTimePickerContext } from "../../ControlledDateTimePickerCTX.js";
+import { MMInput } from "./MMInput.js";
+import { DDInput } from "./DDInput.js";
+import { YYYYInput } from "./YYYYInput.js";
+import { StyledFocusWithIn, StyledSeparator } from "../Styleds.js";
+import { useDateInputs } from "./useDateInputs.js";
+import { fixedValues } from "../config.js";
 const DateInputs = () => {
   const {
     month,
@@ -36,8 +38,21 @@ const DateInputs = () => {
     yearInputRef,
     ariaCurrentValueForInputs,
     latestInteractionRegion,
-    currFocusDescriber
+    currFocusDescriber,
+    props
   } = useContext(ControlledDateTimePickerContext);
+  const ariaAndDataPropsMonth = React2.useMemo(
+    () => getPropsPerDatatestid(props[ControlledDateTimePickerDatatestid.DATE_INPUTS.MONTH]),
+    [props]
+  );
+  const ariaAndDataPropsDay = React2.useMemo(
+    () => getPropsPerDatatestid(props[ControlledDateTimePickerDatatestid.DATE_INPUTS.DAY]),
+    [props]
+  );
+  const ariaAndDataPropsYear = React2.useMemo(
+    () => getPropsPerDatatestid(props[ControlledDateTimePickerDatatestid.DATE_INPUTS.YEAR]),
+    [props]
+  );
   return /* @__PURE__ */ jsxs(
     Grid,
     {
@@ -63,7 +78,8 @@ const DateInputs = () => {
             placeholder: "MM",
             ariaCurrentValueForInputs,
             disabled,
-            isFocused: latestInteractionRegion === "date-inputs" && currFocusDescriber === "month-input"
+            isFocused: latestInteractionRegion === "date-inputs" && currFocusDescriber === "month-input",
+            ariaAndDataProps: ariaAndDataPropsMonth
           }
         ) }),
         /* @__PURE__ */ jsx(StyledSeparator, { alignItems: "center", children: "/" }),
@@ -79,7 +95,8 @@ const DateInputs = () => {
             placeholder: "DD",
             ariaCurrentValueForInputs,
             disabled,
-            isFocused: latestInteractionRegion === "date-inputs" && currFocusDescriber === "day-input"
+            isFocused: latestInteractionRegion === "date-inputs" && currFocusDescriber === "day-input",
+            ariaAndDataProps: ariaAndDataPropsDay
           }
         ) }),
         /* @__PURE__ */ jsx(StyledSeparator, { alignItems: "center", children: "/" }),
@@ -95,7 +112,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/esm/parts/DateInputs/DateInputs.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/DateInputs/DateInputs.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
-  "mappings": "AAAA,YAAY,WAAW;AC2CnB,SAUI,KAVJ;AA3CJ,SAAgB,kBAAkB;AAClC,SAAS,YAAY;AAErB,SAAS,uCAAuC;AAChD,SAAS,eAAe;AACxB,SAAS,eAAe;AACxB,SAAS,iBAAiB;AAC1B,SAAS,mBAAmB,uBAAuB;AACnD,SAAS,qBAAqB;AAC9B,SAAS,mBAAmB;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,IAAI,cAAc;AAElB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,+BAA+B;AAE9C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM;AAAA,QACJ,YAAY;AAAA,QACZ,YAAY;AAAA,QACZ,YAAY;AAAA,QACZ,YAAY;AAAA,QACZ,YAAY;AAAA,MACd;AAAA,MAEA;AAAA,4BAAC,qBACC;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,oBAAC,mBAAgB,YAAW,UAAS,eAAC;AAAA,QACtC,oBAAC,qBACC;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,oBAAC,mBAAgB,YAAW,UAAS,eAAC;AAAA,QACtC,oBAAC,qBACC;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 * as React from 'react';\nexport { React };\n", "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"],
+  "mappings": "AAAA,YAAY,WAAW;ACyDnB,SAUI,KAVJ;AAzDJ,OAAOA,UAAS,kBAAkB;AAClC,SAAS,YAAY;AACrB,SAAS,6BAA6B;AACtC,SAAS,0CAA0C;AACnD,SAAS,uCAAuC;AAChD,SAAS,eAAe;AACxB,SAAS,eAAe;AACxB,SAAS,iBAAiB;AAC1B,SAAS,mBAAmB,uBAAuB;AACnD,SAAS,qBAAqB;AAC9B,SAAS,mBAAmB;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,IAAI,cAAc;AAElB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,+BAA+B;AAC9C,QAAM,wBAAwBA,OAAM;AAAA,IAClC,MAAM,sBAAsB,MAAM,mCAAmC,YAAY,KAAK,CAAC;AAAA,IACvF,CAAC,KAAK;AAAA,EACR;AACA,QAAM,sBAAsBA,OAAM;AAAA,IAChC,MAAM,sBAAsB,MAAM,mCAAmC,YAAY,GAAG,CAAC;AAAA,IACrF,CAAC,KAAK;AAAA,EACR;AACA,QAAM,uBAAuBA,OAAM;AAAA,IACjC,MAAM,sBAAsB,MAAM,mCAAmC,YAAY,IAAI,CAAC;AAAA,IACtF,CAAC,KAAK;AAAA,EACR;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM;AAAA,QACJ,YAAY;AAAA,QACZ,YAAY;AAAA,QACZ,YAAY;AAAA,QACZ,YAAY;AAAA,QACZ,YAAY;AAAA,MACd;AAAA,MAEA;AAAA,4BAAC,qBACC;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,oBAAC,mBAAgB,YAAW,UAAS,eAAC;AAAA,QACtC,oBAAC,qBACC;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,oBAAC,mBAAgB,YAAW,UAAS,eAAC;AAAA,QACtC,oBAAC,qBACC;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/esm/parts/DateInputs/MMInput.js

@@ -2,8 +2,8 @@ import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 import React2, { useCallback, useMemo } from "react";
 import { setMultipleRefs } from "@elliemae/ds-utilities";
-import { Styled2DigitsInput } from "../Styleds";
-import { ControlledDateTimePickerDatatestid } from "../../ControlledDateTimePickerDatatestid";
+import { Styled2DigitsInput } from "../Styleds.js";
+import { ControlledDateTimePickerDatatestid } from "../../ControlledDateTimePickerDatatestid.js";
 const regExpNumbers = /^[0-9]+$/;
 const isInvalidMonth = (month) => {
   if (month === "")
@@ -24,7 +24,8 @@ const MMInput = React2.memo(
     innerRef,
     autoFocusMonthInput,
     ariaCurrentValueForInputs,
-    isFocused
+    isFocused,
+    ariaAndDataProps
   }) => {
     const validateOnChange = useCallback(
       (e) => {
@@ -64,7 +65,8 @@ const MMInput = React2.memo(
         "aria-label": `month input field, ${ariaCurrentValueForInputs}`,
         "data-testid": ControlledDateTimePickerDatatestid.DATE_INPUTS.MONTH,
         disabled,
-        "aria-disabled": disabled
+        "aria-disabled": disabled,
+        ...ariaAndDataProps
       }
     );
   }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/DateInputs/MMInput.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
-  "mappings": "AAAA,YAAY,WAAW;ACoEjB;AApEN,OAAOA,UAAS,aAAa,eAAe;AAC5C,SAAS,uBAAuB;AAChC,SAAS,0BAA0B;AACnC,SAAS,0CAA0C;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,UAAUA,OAAM;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,mBAAmB;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,YAAY;AAAA,MAChB,CAAC,YAA8B;AAC7B,QAAC,WAAwD,UAAU;AACnE,YAAI;AAAW,mBAAS,QAAQ;AAAA,MAClC;AAAA,MACA,CAAC,YAAY,SAAS;AAAA,IACxB;AAEA,UAAM,aAAa,QAAQ,MAAM;AAC/B,UAAI,UAAU;AACZ,eAAO,gBAAgB,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,mCAAmC,YAAY;AAAA,QAC5D;AAAA,QACA,iBAAe;AAAA;AAAA,IACjB;AAAA,EAEJ;AACF;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
+  "mappings": "AAAA,YAAY,WAAW;ACsEjB;AAtEN,OAAOA,UAAS,aAAa,eAAe;AAC5C,SAAS,uBAAuB;AAChC,SAAS,0BAA0B;AACnC,SAAS,0CAA0C;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,UAAUA,OAAM;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,mBAAmB;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,YAAY;AAAA,MAChB,CAAC,YAA8B;AAC7B,QAAC,WAAwD,UAAU;AACnE,YAAI;AAAW,mBAAS,QAAQ;AAAA,MAClC;AAAA,MACA,CAAC,YAAY,SAAS;AAAA,IACxB;AAEA,UAAM,aAAa,QAAQ,MAAM;AAC/B,UAAI,UAAU;AACZ,eAAO,gBAAgB,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,mCAAmC,YAAY;AAAA,QAC5D;AAAA,QACA,iBAAe;AAAA,QACd,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;",
   "names": ["React"]
 }

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

@@ -1,8 +1,8 @@
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 import React2, { useCallback } from "react";
-import { ControlledDateTimePickerDatatestid } from "../../ControlledDateTimePickerDatatestid";
-import { StyledMin4DigitsInput } from "../Styleds";
+import { ControlledDateTimePickerDatatestid } from "../../ControlledDateTimePickerDatatestid.js";
+import { StyledMin4DigitsInput } from "../Styleds.js";
 const regExpNumbers = /^[0-9]+$/;
 const isInvalidYear = (year) => {
   if (year === "")
@@ -21,7 +21,8 @@ const YYYYInput = React2.memo(
     placeholder,
     contextRef,
     ariaCurrentValueForInputs,
-    isFocused
+    isFocused,
+    ariaAndDataProps
   }) => {
     const validateOnChange = useCallback(
       (e) => {
@@ -50,7 +51,8 @@ const YYYYInput = React2.memo(
         "aria-label": `year input field, ${ariaCurrentValueForInputs}`,
         "data-testid": ControlledDateTimePickerDatatestid.DATE_INPUTS.YEAR,
         disabled,
-        "aria-disabled": disabled
+        "aria-disabled": disabled,
+        ...ariaAndDataProps
       }
     );
   }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/DateInputs/YYYYInput.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback } from 'react';\nimport { ControlledDateTimePickerDatatestid } from '../../ControlledDateTimePickerDatatestid';\nimport { StyledMin4DigitsInput } from '../Styleds';\nimport type { DSControlledDateTimePickerInternalsT } from '../../sharedTypes';\n\nconst regExpNumbers = /^[0-9]+$/;\nconst isInvalidYear = (year: string) => {\n  if (year === '') return false;\n  const numberOnly = regExpNumbers.test(year);\n  return year.length > 4 || !numberOnly || Number.parseInt(year, 10) > 9999;\n};\n\ninterface YYYYInputsPropsT {\n  onChange: DSControlledDateTimePickerInternalsT.OnChangeFunc;\n  onBlur: DSControlledDateTimePickerInternalsT.OnBlurFunc;\n  onFocus: DSControlledDateTimePickerInternalsT.OnFocusFunc;\n  onKeyDown: DSControlledDateTimePickerInternalsT.OnKeyDown;\n  value: string;\n  disabled: boolean;\n  contextRef: React.MutableRefObject<HTMLInputElement | null>;\n  placeholder: string;\n  ariaCurrentValueForInputs: string;\n  isFocused: boolean;\n}\nexport const YYYYInput = React.memo(\n  ({\n    onChange,\n    onBlur,\n    onFocus,\n    onKeyDown,\n    value,\n    disabled,\n    placeholder,\n    contextRef,\n    ariaCurrentValueForInputs,\n    isFocused,\n  }: YYYYInputsPropsT): JSX.Element => {\n    const validateOnChange = useCallback(\n      (e: React.ChangeEvent<HTMLInputElement>) => {\n        if (isInvalidYear(e?.currentTarget?.value)) {\n          e.preventDefault();\n          return;\n        }\n        onChange(e);\n      },\n      [onChange],\n    );\n    return (\n      <StyledMin4DigitsInput\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={`year input field, ${ariaCurrentValueForInputs}`}\n        data-testid={ControlledDateTimePickerDatatestid.DATE_INPUTS.YEAR}\n        disabled={disabled}\n        aria-disabled={disabled}\n      />\n    );\n  },\n);\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACgDjB;AAhDN,OAAOA,UAAS,mBAAmB;AACnC,SAAS,0CAA0C;AACnD,SAAS,6BAA6B;AAGtC,MAAM,gBAAgB;AACtB,MAAM,gBAAgB,CAAC,SAAiB;AACtC,MAAI,SAAS;AAAI,WAAO;AACxB,QAAM,aAAa,cAAc,KAAK,IAAI;AAC1C,SAAO,KAAK,SAAS,KAAK,CAAC,cAAc,OAAO,SAAS,MAAM,EAAE,IAAI;AACvE;AAcO,MAAM,YAAYA,OAAM;AAAA,EAC7B,CAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,MAAqC;AACnC,UAAM,mBAAmB;AAAA,MACvB,CAAC,MAA2C;AAC1C,YAAI,cAAc,GAAG,eAAe,KAAK,GAAG;AAC1C,YAAE,eAAe;AACjB;AAAA,QACF;AACA,iBAAS,CAAC;AAAA,MACZ;AAAA,MACA,CAAC,QAAQ;AAAA,IACX;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,qBAAqB;AAAA,QACjC,eAAa,mCAAmC,YAAY;AAAA,QAC5D;AAAA,QACA,iBAAe;AAAA;AAAA,IACjB;AAAA,EAEJ;AACF;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback } from 'react';\nimport { ControlledDateTimePickerDatatestid } from '../../ControlledDateTimePickerDatatestid.js';\nimport { StyledMin4DigitsInput } from '../Styleds.js';\nimport type { DSControlledDateTimePickerInternalsT } from '../../sharedTypes.js';\n\nconst regExpNumbers = /^[0-9]+$/;\nconst isInvalidYear = (year: string) => {\n  if (year === '') return false;\n  const numberOnly = regExpNumbers.test(year);\n  return year.length > 4 || !numberOnly || Number.parseInt(year, 10) > 9999;\n};\n\ninterface YYYYInputsPropsT {\n  onChange: DSControlledDateTimePickerInternalsT.OnChangeFunc;\n  onBlur: DSControlledDateTimePickerInternalsT.OnBlurFunc;\n  onFocus: DSControlledDateTimePickerInternalsT.OnFocusFunc;\n  onKeyDown: DSControlledDateTimePickerInternalsT.OnKeyDown;\n  value: string;\n  disabled: boolean;\n  contextRef: React.MutableRefObject<HTMLInputElement | null>;\n  placeholder: string;\n  ariaCurrentValueForInputs: string;\n  isFocused: boolean;\n  ariaAndDataProps?: AriaAndDataProps;\n}\nexport const YYYYInput = React.memo(\n  ({\n    onChange,\n    onBlur,\n    onFocus,\n    onKeyDown,\n    value,\n    disabled,\n    placeholder,\n    contextRef,\n    ariaCurrentValueForInputs,\n    isFocused,\n    ariaAndDataProps,\n  }: YYYYInputsPropsT): JSX.Element => {\n    const validateOnChange = useCallback(\n      (e: React.ChangeEvent<HTMLInputElement>) => {\n        if (isInvalidYear(e?.currentTarget?.value)) {\n          e.preventDefault();\n          return;\n        }\n        onChange(e);\n      },\n      [onChange],\n    );\n    return (\n      <StyledMin4DigitsInput\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={`year input field, ${ariaCurrentValueForInputs}`}\n        data-testid={ControlledDateTimePickerDatatestid.DATE_INPUTS.YEAR}\n        disabled={disabled}\n        aria-disabled={disabled}\n        {...ariaAndDataProps}\n      />\n    );\n  },\n);\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACkDjB;AAlDN,OAAOA,UAAS,mBAAmB;AACnC,SAAS,0CAA0C;AACnD,SAAS,6BAA6B;AAGtC,MAAM,gBAAgB;AACtB,MAAM,gBAAgB,CAAC,SAAiB;AACtC,MAAI,SAAS;AAAI,WAAO;AACxB,QAAM,aAAa,cAAc,KAAK,IAAI;AAC1C,SAAO,KAAK,SAAS,KAAK,CAAC,cAAc,OAAO,SAAS,MAAM,EAAE,IAAI;AACvE;AAeO,MAAM,YAAYA,OAAM;AAAA,EAC7B,CAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,MAAqC;AACnC,UAAM,mBAAmB;AAAA,MACvB,CAAC,MAA2C;AAC1C,YAAI,cAAc,GAAG,eAAe,KAAK,GAAG;AAC1C,YAAE,eAAe;AACjB;AAAA,QACF;AACA,iBAAS,CAAC;AAAA,MACZ;AAAA,MACA,CAAC,QAAQ;AAAA,IACX;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,qBAAqB;AAAA,QACjC,eAAa,mCAAmC,YAAY;AAAA,QAC5D;AAAA,QACA,iBAAe;AAAA,QACd,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;",
   "names": ["React"]
 }