@elliemae/ds-form-date-time-picker 3.0.0-next.67 → 3.0.0-next.70

package/dist/cjs/propTypes.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/propTypes.tsx", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-lines */\nimport React from 'react';\nimport { PropTypes } from '@elliemae/ds-utilities';\n\n// eslint-disable-next-line @typescript-eslint/no-empty-function\nconst noop = (): void => {};\nconst defaultReturnFalse = (): false => false;\nexport declare namespace DSControlledDateTimePickerT {\n  export type OnInternalValuesChangeEvent =\n    | React.ChangeEvent<HTMLInputElement>\n    | React.KeyboardEvent<HTMLInputElement>\n    | React.KeyboardEvent<HTMLButtonElement>\n    | React.KeyboardEvent\n    | React.MouseEvent<HTMLInputElement>\n    | React.MouseEvent<HTMLButtonElement>;\n  export type ControlTypes =\n    | 'full-date-time'\n    | 'date-time-inputs'\n    | 'date-time-picker'\n    | 'date-time-picker-controller-only'\n    | 'full-date'\n    | 'date-inputs'\n    | 'date-picker'\n    | 'date-picker-controller-only'\n    | 'full-time'\n    | 'time-inputs'\n    | 'time-picker'\n    | 'time-picker-controller-only';\n  export interface InternalInputsChangeMetaInfo {\n    isAutomaticFillTrigger?: boolean;\n    isDayPresentInMonth?: boolean;\n    isOutOfRangeDay?: boolean;\n    isDisabledDay?: boolean;\n    isDisabledTime?: boolean;\n    suggestedErrorMsg?: string;\n    newDateTimeString?: string;\n    newDateString?: string;\n    newTimeString?: string;\n  }\n\n  export type OnDateChange = (val: string, metaInfo: InternalInputsChangeMetaInfo) => void;\n  export type OnTimeChange = (val: string, metaInfo: InternalInputsChangeMetaInfo) => void;\n  export type OnDateTimeChange = (val: string, metaInfo: InternalInputsChangeMetaInfo) => void;\n  export type OnInternalInputsChange = (\n    val: string,\n    e: OnInternalValuesChangeEvent,\n    metaInfo?: InternalInputsChangeMetaInfo,\n  ) => void;\n\n  /* ------------------------ ------------------ ------------------------*/\n  /* ------------------------ DATE CONFIGURATION ------------------------*/\n  /* ------------------------ ------------------ ------------------------*/\n  export interface DefaultDateProps {\n    onMonthChange: OnInternalInputsChange;\n    onDayChange: OnInternalInputsChange;\n    onYearChange: OnInternalInputsChange;\n    onPickerOpen: NoopishFunc;\n    onPickerClose: NoopishFunc;\n    getIsDisabledDay: BooleanGetter<string>;\n    getIsOutOfRangeDay: BooleanGetter<string>;\n    getIsStartRangeDay: BooleanGetter<string>;\n    getIsDayInRange: BooleanGetter<string>;\n    getIsEndRangeDay: BooleanGetter<string>;\n    isClearable: boolean;\n    disabled: boolean;\n    hasError: boolean;\n    autoFocus: boolean;\n    preventCloseOnSelection: boolean;\n  }\n  export interface OptionalDatePickerProps {\n    emptyPickerStartingMonth?: string;\n    onCalendarOpenFocusedDay?: string;\n    pickerFooterMsg?: string;\n  }\n  export interface RequiredDatePickerProps {\n    type: 'full-date' | 'date-inputs' | 'date-picker' | 'date-picker-controller-only';\n    date: string;\n    onDateChange: OnDateChange;\n  }\n  export type DatePickerProps = OptionalDatePickerProps & Partial<DefaultDateProps> & RequiredDatePickerProps;\n  export type InternalDatePickerProps = OptionalDatePickerProps & DefaultDateProps & RequiredDatePickerProps;\n\n  /* ------------------------ ------------------ ------------------------*/\n  /* ------------------------ TIME CONFIGURATION ------------------------*/\n  /* ------------------------ ------------------ ------------------------*/\n\n  export interface DefaultTimeProps {\n    onHourChange: OnInternalInputsChange;\n    onMinuteChange: OnInternalInputsChange;\n    onMeridiemChange: OnInternalInputsChange;\n    onPickerOpen: NoopishFunc;\n    onPickerClose: NoopishFunc;\n    getIsDisabledTime: BooleanGetter<string>;\n    minutesInterval: number;\n    isClearable: boolean;\n    disabled: boolean;\n    hasError: boolean;\n    autoFocus: boolean;\n    preventCloseOnSelection: boolean;\n  }\n  export interface OptionalTimePickerProps {\n    pickerFooterMsg?: string;\n    onTimeWheelOpenStartingTime?: string;\n  }\n  export interface RequiredTimePickerProps {\n    type: 'full-time' | 'time-inputs' | 'time-picker' | 'time-picker-controller-only';\n    time: string;\n    onTimeChange: OnTimeChange;\n  }\n  export type TimePickerProps = OptionalTimePickerProps & Partial<DefaultTimeProps> & RequiredTimePickerProps;\n  export type InternalTimePickerProps = OptionalTimePickerProps & DefaultTimeProps & RequiredTimePickerProps;\n\n  /* -------------------- ---------------------- ------------------------*/\n  /* -------------------- DATETIME CONFIGURATION ------------------------*/\n  /* -------------------- ---------------------- ------------------------*/\n\n  export type DefaultDateTimeProps = DefaultTimeProps &\n    DefaultDateProps & {\n      onDateChange: OnDateChange;\n      onTimeChange: OnTimeChange;\n    };\n  export type OptionalDateTimeProps = OptionalTimePickerProps & OptionalDatePickerProps;\n  export interface RequiredDateTimeProps {\n    type: 'full-date-time' | 'date-time-inputs' | 'date-time-picker' | 'date-time-picker-controller-only';\n    dateTime: string;\n    onDateTimeChange: OnDateTimeChange;\n  }\n\n  export type DateTimePickerProps = Partial<DefaultDateTimeProps> & OptionalDateTimeProps & RequiredDateTimeProps;\n  export type InternalDateTimePickerProps = DefaultDateTimeProps & OptionalDateTimeProps & RequiredDateTimeProps;\n\n  /* ---------------------- ------------------- -------------------------*/\n  /* ---------------------- FINAL CONFIGURATION -------------------------*/\n  /* ---------------------- ------------------- -------------------------*/\n  export type DefaultProps = DefaultDateTimeProps & { type: 'full-date-time' };\n  export type Props = DateTimePickerProps | DatePickerProps | TimePickerProps;\n  export type InternalProps = InternalDateTimePickerProps | InternalDatePickerProps | InternalTimePickerProps;\n}\n\nexport const defaultProps: DSControlledDateTimePickerT.DefaultProps = {\n  type: 'full-date-time',\n  onDateChange: noop,\n  onMonthChange: noop,\n  onDayChange: noop,\n  onYearChange: noop,\n  onTimeChange: noop,\n  onHourChange: noop,\n  onMinuteChange: noop,\n  onMeridiemChange: noop,\n  onPickerOpen: noop,\n  onPickerClose: noop,\n  getIsDisabledDay: defaultReturnFalse,\n  getIsOutOfRangeDay: defaultReturnFalse,\n  getIsStartRangeDay: defaultReturnFalse,\n  getIsDayInRange: defaultReturnFalse,\n  getIsEndRangeDay: defaultReturnFalse,\n  getIsDisabledTime: defaultReturnFalse,\n  minutesInterval: 1,\n  isClearable: false,\n  disabled: false,\n  hasError: false,\n  autoFocus: false,\n  preventCloseOnSelection: false,\n};\n\nexport const propTypes = {\n  type: PropTypes.oneOf([\n    'full-date-time',\n    'date-time-inputs',\n    'date-time-picker',\n    'date-time-picker-controller-only',\n    'full-date',\n    'date-inputs',\n    'date-picker',\n    'date-picker-controller-only',\n    'full-time',\n    'time-inputs',\n    'time-picker',\n    'time-picker-controller-only',\n  ])\n    .description('Type of time form control to use')\n    .defaultValue('full-date-time'),\n  disabled: PropTypes.bool.description('wheter or not the input is disabled').defaultValue(false),\n  isClearable: PropTypes.bool.description('with or without clearable button').defaultValue(false),\n  dateTime: PropTypes.string.description('when using date-time types, this is the value of the controller'),\n  date: PropTypes.string.description('when using date types, this is the value of the controller'),\n  time: PropTypes.string.description('when using time types, this is the value of the controller'),\n  onDateChange: PropTypes.func.description('(newDateString, metaInformations) => void'),\n  onTimeChange: PropTypes.func.description('(newTimeString, metaInformations) => void'),\n  onDateTimeChange: PropTypes.func.description('(newDateTimeString, metaInformations) => void'),\n  onMonthChange: PropTypes.func.description('(newMonthString, event, metaInformations) => void'),\n  onDayChange: PropTypes.func.description('(newDayString, event, metaInformations) => void'),\n  onYearChange: PropTypes.func.description('(newYearString, event, metaInformations) => void'),\n  onHourChange: PropTypes.func.description('(newHourString, event, metaInformations) => void'),\n  onMinuteChange: PropTypes.func.description('(newMinuteString, event, metaInformations) => void'),\n  onMeridiemChange: PropTypes.func.description('(newMeridiemString, event, metaInformations) => void'),\n  getIsDisabledDay: PropTypes.func.description(\n    '(dayAsString) => true for marking as disabled, false for marking as valid',\n  ),\n  getIsOutOfRangeDay: PropTypes.func.description(\n    '(dayAsString) => true for marking as disabled, false for marking as valid',\n  ),\n  getIsDisabledTime: PropTypes.func.description(\n    '(timeAsString) => true for marking as disabled, false for marking as valid',\n  ),\n  emptyPickerStartingMonth: PropTypes.string.description(\n    'which month to start the calendar on open, when value is empty, string following the \"MM/__/YYYY\" pattern',\n  ),\n  onCalendarOpenFocusedDay: PropTypes.string\n    .description('which day to focus on calendar open when value is empty, string following the \"MM/DD/YYYY\" pattern')\n    .defaultValue('if value is empty current month, else current month'),\n  onTimeWheelOpenStartingTime: PropTypes.string\n    .description(\n      'which day to start the timewheel on picker open when value is empty, string following the HH:MM AA\" pattern',\n    )\n    .defaultValue('01:00 AM'),\n  minutesInterval: PropTypes.number\n    .description('increments/decrements of minutes in time related controllers interactions')\n    .defaultValue('1'),\n  'data-testid': PropTypes.string.description('Unique id for tests.').defaultValue(''),\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,0BAA0B;AAG1B,MAAM,OAAO,MAAY;AAAC;AAC1B,MAAM,qBAAqB,MAAa;AAqIjC,MAAM,eAAyD;AAAA,EACpE,MAAM;AAAA,EACN,cAAc;AAAA,EACd,eAAe;AAAA,EACf,aAAa;AAAA,EACb,cAAc;AAAA,EACd,cAAc;AAAA,EACd,cAAc;AAAA,EACd,gBAAgB;AAAA,EAChB,kBAAkB;AAAA,EAClB,cAAc;AAAA,EACd,eAAe;AAAA,EACf,kBAAkB;AAAA,EAClB,oBAAoB;AAAA,EACpB,oBAAoB;AAAA,EACpB,iBAAiB;AAAA,EACjB,kBAAkB;AAAA,EAClB,mBAAmB;AAAA,EACnB,iBAAiB;AAAA,EACjB,aAAa;AAAA,EACb,UAAU;AAAA,EACV,UAAU;AAAA,EACV,WAAW;AAAA,EACX,yBAAyB;AAC3B;AAEO,MAAM,YAAY;AAAA,EACvB,MAAM,8BAAU,MAAM;AAAA,IACpB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC,EACE,YAAY,kCAAkC,EAC9C,aAAa,gBAAgB;AAAA,EAChC,UAAU,8BAAU,KAAK,YAAY,qCAAqC,EAAE,aAAa,KAAK;AAAA,EAC9F,aAAa,8BAAU,KAAK,YAAY,kCAAkC,EAAE,aAAa,KAAK;AAAA,EAC9F,UAAU,8BAAU,OAAO,YAAY,iEAAiE;AAAA,EACxG,MAAM,8BAAU,OAAO,YAAY,4DAA4D;AAAA,EAC/F,MAAM,8BAAU,OAAO,YAAY,4DAA4D;AAAA,EAC/F,cAAc,8BAAU,KAAK,YAAY,2CAA2C;AAAA,EACpF,cAAc,8BAAU,KAAK,YAAY,2CAA2C;AAAA,EACpF,kBAAkB,8BAAU,KAAK,YAAY,+CAA+C;AAAA,EAC5F,eAAe,8BAAU,KAAK,YAAY,mDAAmD;AAAA,EAC7F,aAAa,8BAAU,KAAK,YAAY,iDAAiD;AAAA,EACzF,cAAc,8BAAU,KAAK,YAAY,kDAAkD;AAAA,EAC3F,cAAc,8BAAU,KAAK,YAAY,kDAAkD;AAAA,EAC3F,gBAAgB,8BAAU,KAAK,YAAY,oDAAoD;AAAA,EAC/F,kBAAkB,8BAAU,KAAK,YAAY,sDAAsD;AAAA,EACnG,kBAAkB,8BAAU,KAAK,YAC/B,2EACF;AAAA,EACA,oBAAoB,8BAAU,KAAK,YACjC,2EACF;AAAA,EACA,mBAAmB,8BAAU,KAAK,YAChC,4EACF;AAAA,EACA,0BAA0B,8BAAU,OAAO,YACzC,2GACF;AAAA,EACA,0BAA0B,8BAAU,OACjC,YAAY,oGAAoG,EAChH,aAAa,qDAAqD;AAAA,EACrE,6BAA6B,8BAAU,OACpC,YACC,6GACF,EACC,aAAa,UAAU;AAAA,EAC1B,iBAAiB,8BAAU,OACxB,YAAY,2EAA2E,EACvF,aAAa,GAAG;AAAA,EACnB,eAAe,8BAAU,OAAO,YAAY,sBAAsB,EAAE,aAAa,EAAE;AACrF;",
+  "sourcesContent": ["/* eslint-disable max-lines */\nimport React from 'react';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-utilities';\n\n// eslint-disable-next-line @typescript-eslint/no-empty-function\nconst noop = (): void => {};\nconst defaultReturnFalse = (): false => false;\nexport declare namespace DSControlledDateTimePickerT {\n  export type OnInternalValuesChangeEvent =\n    | React.ChangeEvent<HTMLInputElement>\n    | React.KeyboardEvent<HTMLInputElement>\n    | React.KeyboardEvent<HTMLButtonElement>\n    | React.KeyboardEvent\n    | React.MouseEvent<HTMLInputElement>\n    | React.MouseEvent<HTMLButtonElement>;\n  export type ControlTypes =\n    | 'full-date-time'\n    | 'date-time-inputs'\n    | 'date-time-picker'\n    | 'date-time-picker-controller-only'\n    | 'full-date'\n    | 'date-inputs'\n    | 'date-picker'\n    | 'date-picker-controller-only'\n    | 'full-time'\n    | 'time-inputs'\n    | 'time-picker'\n    | 'time-picker-controller-only';\n  export interface InternalInputsChangeMetaInfo {\n    isAutomaticFillTrigger?: boolean;\n    isDayPresentInMonth?: boolean;\n    isOutOfRangeDay?: boolean;\n    isDisabledDay?: boolean;\n    isDisabledTime?: boolean;\n    suggestedErrorMsg?: string;\n    newDateTimeString?: string;\n    newDateString?: string;\n    newTimeString?: string;\n  }\n\n  export type OnDateChange = (val: string, metaInfo: InternalInputsChangeMetaInfo) => void;\n  export type OnTimeChange = (val: string, metaInfo: InternalInputsChangeMetaInfo) => void;\n  export type OnDateTimeChange = (val: string, metaInfo: InternalInputsChangeMetaInfo) => void;\n  export type OnInternalInputsChange = (\n    val: string,\n    e: OnInternalValuesChangeEvent,\n    metaInfo?: InternalInputsChangeMetaInfo,\n  ) => void;\n\n  /* ------------------------ ------------------ ------------------------*/\n  /* ------------------------ DATE CONFIGURATION ------------------------*/\n  /* ------------------------ ------------------ ------------------------*/\n  export interface DefaultDateProps {\n    onMonthChange: OnInternalInputsChange;\n    onDayChange: OnInternalInputsChange;\n    onYearChange: OnInternalInputsChange;\n    onPickerOpen: NoopishFunc;\n    onPickerClose: NoopishFunc;\n    getIsDisabledDay: BooleanGetter<string>;\n    getIsOutOfRangeDay: BooleanGetter<string>;\n    getIsStartRangeDay: BooleanGetter<string>;\n    getIsDayInRange: BooleanGetter<string>;\n    getIsEndRangeDay: BooleanGetter<string>;\n    isClearable: boolean;\n    disabled: boolean;\n    hasError: boolean;\n    autoFocus: boolean;\n    preventCloseOnSelection: boolean;\n  }\n  export interface OptionalDatePickerProps {\n    emptyPickerStartingMonth?: string;\n    onCalendarOpenFocusedDay?: string;\n    pickerFooterMsg?: string;\n  }\n  export interface RequiredDatePickerProps {\n    type: 'full-date' | 'date-inputs' | 'date-picker' | 'date-picker-controller-only';\n    date: string;\n    onDateChange: OnDateChange;\n  }\n  export type DatePickerProps = OptionalDatePickerProps & Partial<DefaultDateProps> & RequiredDatePickerProps;\n  export type InternalDatePickerProps = OptionalDatePickerProps & DefaultDateProps & RequiredDatePickerProps;\n\n  /* ------------------------ ------------------ ------------------------*/\n  /* ------------------------ TIME CONFIGURATION ------------------------*/\n  /* ------------------------ ------------------ ------------------------*/\n\n  export interface DefaultTimeProps {\n    onHourChange: OnInternalInputsChange;\n    onMinuteChange: OnInternalInputsChange;\n    onMeridiemChange: OnInternalInputsChange;\n    onPickerOpen: NoopishFunc;\n    onPickerClose: NoopishFunc;\n    getIsDisabledTime: BooleanGetter<string>;\n    minutesInterval: number;\n    isClearable: boolean;\n    disabled: boolean;\n    hasError: boolean;\n    autoFocus: boolean;\n    preventCloseOnSelection: boolean;\n  }\n  export interface OptionalTimePickerProps {\n    pickerFooterMsg?: string;\n    onTimeWheelOpenStartingTime?: string;\n  }\n  export interface RequiredTimePickerProps {\n    type: 'full-time' | 'time-inputs' | 'time-picker' | 'time-picker-controller-only';\n    time: string;\n    onTimeChange: OnTimeChange;\n  }\n  export type TimePickerProps = OptionalTimePickerProps & Partial<DefaultTimeProps> & RequiredTimePickerProps;\n  export type InternalTimePickerProps = OptionalTimePickerProps & DefaultTimeProps & RequiredTimePickerProps;\n\n  /* -------------------- ---------------------- ------------------------*/\n  /* -------------------- DATETIME CONFIGURATION ------------------------*/\n  /* -------------------- ---------------------- ------------------------*/\n\n  export type DefaultDateTimeProps = DefaultTimeProps &\n    DefaultDateProps & {\n      onDateChange: OnDateChange;\n      onTimeChange: OnTimeChange;\n    };\n  export type OptionalDateTimeProps = OptionalTimePickerProps & OptionalDatePickerProps;\n  export interface RequiredDateTimeProps {\n    type: 'full-date-time' | 'date-time-inputs' | 'date-time-picker' | 'date-time-picker-controller-only';\n    dateTime: string;\n    onDateTimeChange: OnDateTimeChange;\n  }\n\n  export type DateTimePickerProps = Partial<DefaultDateTimeProps> & OptionalDateTimeProps & RequiredDateTimeProps;\n  export type InternalDateTimePickerProps = DefaultDateTimeProps & OptionalDateTimeProps & RequiredDateTimeProps;\n\n  /* ---------------------- ------------------- -------------------------*/\n  /* ---------------------- FINAL CONFIGURATION -------------------------*/\n  /* ---------------------- ------------------- -------------------------*/\n  export type DefaultProps = DefaultDateTimeProps & { type: 'full-date-time' };\n  export type Props = DateTimePickerProps | DatePickerProps | TimePickerProps;\n  export type InternalProps = InternalDateTimePickerProps | InternalDatePickerProps | InternalTimePickerProps;\n}\n\nexport const defaultProps: DSControlledDateTimePickerT.DefaultProps = {\n  type: 'full-date-time',\n  onDateChange: noop,\n  onMonthChange: noop,\n  onDayChange: noop,\n  onYearChange: noop,\n  onTimeChange: noop,\n  onHourChange: noop,\n  onMinuteChange: noop,\n  onMeridiemChange: noop,\n  onPickerOpen: noop,\n  onPickerClose: noop,\n  getIsDisabledDay: defaultReturnFalse,\n  getIsOutOfRangeDay: defaultReturnFalse,\n  getIsStartRangeDay: defaultReturnFalse,\n  getIsDayInRange: defaultReturnFalse,\n  getIsEndRangeDay: defaultReturnFalse,\n  getIsDisabledTime: defaultReturnFalse,\n  minutesInterval: 1,\n  isClearable: false,\n  disabled: false,\n  hasError: false,\n  autoFocus: false,\n  preventCloseOnSelection: false,\n};\n\nexport const propTypes = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  type: PropTypes.oneOf([\n    'full-date-time',\n    'date-time-inputs',\n    'date-time-picker',\n    'date-time-picker-controller-only',\n    'full-date',\n    'date-inputs',\n    'date-picker',\n    'date-picker-controller-only',\n    'full-time',\n    'time-inputs',\n    'time-picker',\n    'time-picker-controller-only',\n  ])\n    .description('Type of time form control to use')\n    .defaultValue('full-date-time'),\n  disabled: PropTypes.bool.description('wheter or not the input is disabled').defaultValue(false),\n  isClearable: PropTypes.bool.description('with or without clearable button').defaultValue(false),\n  dateTime: PropTypes.string.description('when using date-time types, this is the value of the controller'),\n  date: PropTypes.string.description('when using date types, this is the value of the controller'),\n  time: PropTypes.string.description('when using time types, this is the value of the controller'),\n  onDateChange: PropTypes.func.description('(newDateString, metaInformations) => void'),\n  onTimeChange: PropTypes.func.description('(newTimeString, metaInformations) => void'),\n  onDateTimeChange: PropTypes.func.description('(newDateTimeString, metaInformations) => void'),\n  onMonthChange: PropTypes.func.description('(newMonthString, event, metaInformations) => void'),\n  onDayChange: PropTypes.func.description('(newDayString, event, metaInformations) => void'),\n  onYearChange: PropTypes.func.description('(newYearString, event, metaInformations) => void'),\n  onHourChange: PropTypes.func.description('(newHourString, event, metaInformations) => void'),\n  onMinuteChange: PropTypes.func.description('(newMinuteString, event, metaInformations) => void'),\n  onMeridiemChange: PropTypes.func.description('(newMeridiemString, event, metaInformations) => void'),\n  getIsDisabledDay: PropTypes.func.description(\n    '(dayAsString) => true for marking as disabled, false for marking as valid',\n  ),\n  getIsOutOfRangeDay: PropTypes.func.description(\n    '(dayAsString) => true for marking as disabled, false for marking as valid',\n  ),\n  getIsDisabledTime: PropTypes.func.description(\n    '(timeAsString) => true for marking as disabled, false for marking as valid',\n  ),\n  emptyPickerStartingMonth: PropTypes.string.description(\n    'which month to start the calendar on open, when value is empty, string following the \"MM/__/YYYY\" pattern',\n  ),\n  onCalendarOpenFocusedDay: PropTypes.string\n    .description('which day to focus on calendar open when value is empty, string following the \"MM/DD/YYYY\" pattern')\n    .defaultValue('if value is empty current month, else current month'),\n  onTimeWheelOpenStartingTime: PropTypes.string\n    .description(\n      'which day to start the timewheel on picker open when value is empty, string following the HH:MM AA\" pattern',\n    )\n    .defaultValue('01:00 AM'),\n  minutesInterval: PropTypes.number\n    .description('increments/decrements of minutes in time related controllers interactions')\n    .defaultValue('1'),\n  'data-testid': PropTypes.string.description('Unique id for tests.').defaultValue(''),\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,0BAAuE;AAGvE,MAAM,OAAO,MAAY;AAAC;AAC1B,MAAM,qBAAqB,MAAa;AAqIjC,MAAM,eAAyD;AAAA,EACpE,MAAM;AAAA,EACN,cAAc;AAAA,EACd,eAAe;AAAA,EACf,aAAa;AAAA,EACb,cAAc;AAAA,EACd,cAAc;AAAA,EACd,cAAc;AAAA,EACd,gBAAgB;AAAA,EAChB,kBAAkB;AAAA,EAClB,cAAc;AAAA,EACd,eAAe;AAAA,EACf,kBAAkB;AAAA,EAClB,oBAAoB;AAAA,EACpB,oBAAoB;AAAA,EACpB,iBAAiB;AAAA,EACjB,kBAAkB;AAAA,EAClB,mBAAmB;AAAA,EACnB,iBAAiB;AAAA,EACjB,aAAa;AAAA,EACb,UAAU;AAAA,EACV,UAAU;AAAA,EACV,WAAW;AAAA,EACX,yBAAyB;AAC3B;AAEO,MAAM,YAAY,gDACpB,gDACA,uCAFoB;AAAA,EAGvB,MAAM,8BAAU,MAAM;AAAA,IACpB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC,EACE,YAAY,kCAAkC,EAC9C,aAAa,gBAAgB;AAAA,EAChC,UAAU,8BAAU,KAAK,YAAY,qCAAqC,EAAE,aAAa,KAAK;AAAA,EAC9F,aAAa,8BAAU,KAAK,YAAY,kCAAkC,EAAE,aAAa,KAAK;AAAA,EAC9F,UAAU,8BAAU,OAAO,YAAY,iEAAiE;AAAA,EACxG,MAAM,8BAAU,OAAO,YAAY,4DAA4D;AAAA,EAC/F,MAAM,8BAAU,OAAO,YAAY,4DAA4D;AAAA,EAC/F,cAAc,8BAAU,KAAK,YAAY,2CAA2C;AAAA,EACpF,cAAc,8BAAU,KAAK,YAAY,2CAA2C;AAAA,EACpF,kBAAkB,8BAAU,KAAK,YAAY,+CAA+C;AAAA,EAC5F,eAAe,8BAAU,KAAK,YAAY,mDAAmD;AAAA,EAC7F,aAAa,8BAAU,KAAK,YAAY,iDAAiD;AAAA,EACzF,cAAc,8BAAU,KAAK,YAAY,kDAAkD;AAAA,EAC3F,cAAc,8BAAU,KAAK,YAAY,kDAAkD;AAAA,EAC3F,gBAAgB,8BAAU,KAAK,YAAY,oDAAoD;AAAA,EAC/F,kBAAkB,8BAAU,KAAK,YAAY,sDAAsD;AAAA,EACnG,kBAAkB,8BAAU,KAAK,YAC/B,2EACF;AAAA,EACA,oBAAoB,8BAAU,KAAK,YACjC,2EACF;AAAA,EACA,mBAAmB,8BAAU,KAAK,YAChC,4EACF;AAAA,EACA,0BAA0B,8BAAU,OAAO,YACzC,2GACF;AAAA,EACA,0BAA0B,8BAAU,OACjC,YAAY,oGAAoG,EAChH,aAAa,qDAAqD;AAAA,EACrE,6BAA6B,8BAAU,OACpC,YACC,6GACF,EACC,aAAa,UAAU;AAAA,EAC1B,iBAAiB,8BAAU,OACxB,YAAY,2EAA2E,EACvF,aAAa,GAAG;AAAA,EACnB,eAAe,8BAAU,OAAO,YAAY,sBAAsB,EAAE,aAAa,EAAE;AACrF;",
   "names": []
 }

package/dist/esm/ControlledDateTimePicker.js

@@ -11,7 +11,7 @@ const DSControlledDateTimePicker = (props) => {
     value: ctx
   }, /* @__PURE__ */ React2.createElement(ControlledDateTimePickerContent, null));
 };
-DSControlledDateTimePicker.propTypes = propTypes;
+DSControlledDateTimePicker.displayName = "DSControlledDateTimePicker";
 const DSControlledDateTimePickerWithSchema = describe(DSControlledDateTimePicker);
 DSControlledDateTimePickerWithSchema.propTypes = propTypes;
 export {

package/dist/esm/ControlledDateTimePicker.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/ControlledDateTimePicker.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport React from 'react';\nimport { describe } from 'react-desc';\nimport { propTypes } from './propTypes';\nimport { useControlledDateTimePicker } from './config/useControlledDateTimePicker';\nimport { ControlledDateTimePickerContent } from './parts/ControlledDateTimePickerContent';\nimport { ControlledDateTimePickerContext } from './ControlledDateTimePickerCTX';\nimport type { DSControlledDateTimePickerT } from './propTypes';\n\nconst DSControlledDateTimePicker = (props: DSControlledDateTimePickerT.Props): JSX.Element => {\n  const ctx = useControlledDateTimePicker(props);\n  return (\n    <ControlledDateTimePickerContext.Provider value={ctx}>\n      <ControlledDateTimePickerContent />\n    </ControlledDateTimePickerContext.Provider>\n  );\n};\n\nDSControlledDateTimePicker.propTypes = propTypes;\nconst DSControlledDateTimePickerWithSchema = describe(DSControlledDateTimePicker);\nDSControlledDateTimePickerWithSchema.propTypes = propTypes;\n\nexport { DSControlledDateTimePickerWithSchema, DSControlledDateTimePicker };\n"],
-  "mappings": "AAAA;ACCA;AACA;AACA;AACA;AACA;AACA;AAGA,MAAM,6BAA6B,CAAC,UAA0D;AAC5F,QAAM,MAAM,4BAA4B,KAAK;AAC7C,SACE,qCAAC,gCAAgC,UAAhC;AAAA,IAAyC,OAAO;AAAA,KAC/C,qCAAC,qCAAgC,CACnC;AAEJ;AAEA,2BAA2B,YAAY;AACvC,MAAM,uCAAuC,SAAS,0BAA0B;AAChF,qCAAqC,YAAY;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport React from 'react';\nimport { describe } from 'react-desc';\nimport { propTypes } from './propTypes';\nimport { useControlledDateTimePicker } from './config/useControlledDateTimePicker';\nimport { ControlledDateTimePickerContent } from './parts/ControlledDateTimePickerContent';\nimport { ControlledDateTimePickerContext } from './ControlledDateTimePickerCTX';\nimport type { DSControlledDateTimePickerT } from './propTypes';\n\nconst DSControlledDateTimePicker = (props: DSControlledDateTimePickerT.Props): JSX.Element => {\n  const ctx = useControlledDateTimePicker(props);\n  return (\n    <ControlledDateTimePickerContext.Provider value={ctx}>\n      <ControlledDateTimePickerContent />\n    </ControlledDateTimePickerContext.Provider>\n  );\n};\n\nDSControlledDateTimePicker.displayName = 'DSControlledDateTimePicker';\nconst DSControlledDateTimePickerWithSchema = describe(DSControlledDateTimePicker);\nDSControlledDateTimePickerWithSchema.propTypes = propTypes;\n\nexport { DSControlledDateTimePickerWithSchema, DSControlledDateTimePicker };\n"],
+  "mappings": "AAAA;ACCA;AACA;AACA;AACA;AACA;AACA;AAGA,MAAM,6BAA6B,CAAC,UAA0D;AAC5F,QAAM,MAAM,4BAA4B,KAAK;AAC7C,SACE,qCAAC,gCAAgC,UAAhC;AAAA,IAAyC,OAAO;AAAA,KAC/C,qCAAC,qCAAgC,CACnC;AAEJ;AAEA,2BAA2B,cAAc;AACzC,MAAM,uCAAuC,SAAS,0BAA0B;AAChF,qCAAqC,YAAY;",
   "names": []
 }

package/dist/esm/ControlledDateTimePickerDatatestid.js

@@ -1,5 +1,6 @@
 import * as React from "react";
 const ControlledDateTimePickerDatatestid = {
+  CONTAINER: "ds-controlled-date-time-picker-container",
   DATE_INPUTS: {
     MONTH: "ds-controlled-date-time-picker-month-input",
     DAY: "ds-controlled-date-time-picker-day-input",
@@ -16,6 +17,7 @@ const ControlledDateTimePickerDatatestid = {
     CALENDAR_TIMEWHEEL: "ds-controlled-date-time-picker-calendar-timewheel-trigger-icon"
   },
   CALENDAR: {
+    HEADER_LABEL: "ds-controlled-date-time-picker-calendar-header-label",
     PREV_YEAR: "ds-controlled-date-time-picker-calendar-prev-year",
     PREV_MONTH: "ds-controlled-date-time-picker-calendar-prev-month",
     DAY: "ds-controlled-date-time-picker-calendar-day",
@@ -29,6 +31,7 @@ const ControlledDateTimePickerDatatestid = {
     NEXT_YEAR: "ds-controlled-date-time-picker-calendar-next-year"
   },
   TIMEWHEEL: {
+    HEADER_LABEL: "ds-controlled-date-time-picker-timewheel-header-label",
     PREV_HOUR: "ds-controlled-date-time-picker-timewheel-prev-hour",
     HOUR: "ds-controlled-date-time-picker-timewheel-hour",
     CURRENT_HOUR: "ds-controlled-date-time-picker-timewheel-current-hour",
@@ -52,6 +55,11 @@ const ControlledDateTimePickerDatatestid = {
     TIMEWHEEL: "ds-controlled-date-time-picker-timewheel-controller-wrapper",
     CALENDAR_TIMEWHEEL: "ds-controlled-date-time-picker-calendar-timewheel-controller-wrapper"
   },
+  FOOTERS: {
+    CALENDAR: "ds-controlled-date-time-picker-calendar-context-footer",
+    TIMEWHEEL: "ds-controlled-date-time-picker-timewheel-context-footer",
+    CALENDAR_TIMEWHEEL: "ds-controlled-date-time-picker-calendar-timewheel-context-footer"
+  },
   CLEAR_BUTTON: "ds-controlled-date-time-picker-clear-btn"
 };
 export {

package/dist/esm/ControlledDateTimePickerDatatestid.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/ControlledDateTimePickerDatatestid.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const ControlledDateTimePickerDatatestid = {\n  DATE_INPUTS: {\n    MONTH: 'ds-controlled-date-time-picker-month-input',\n    DAY: 'ds-controlled-date-time-picker-day-input',\n    YEAR: 'ds-controlled-date-time-picker-year-input',\n  },\n  TIME_INPUTS: {\n    HOUR: 'ds-controlled-date-time-picker-hour-input',\n    MINUTE: 'ds-controlled-date-time-picker-minute-input',\n    MERIDIEM: 'ds-controlled-date-time-picker-meridiem-input',\n  },\n  PICKER_ICONS: {\n    CALENDAR: 'ds-controlled-date-time-picker-calendar-trigger-icon',\n    TIMEWHEEL: 'ds-controlled-date-time-picker-timewheel-trigger-icon',\n    CALENDAR_TIMEWHEEL: 'ds-controlled-date-time-picker-calendar-timewheel-trigger-icon',\n  },\n  CALENDAR: {\n    PREV_YEAR: 'ds-controlled-date-time-picker-calendar-prev-year',\n    PREV_MONTH: 'ds-controlled-date-time-picker-calendar-prev-month',\n    DAY: 'ds-controlled-date-time-picker-calendar-day',\n    FOCUSED_DAY: 'ds-controlled-date-time-picker-calendar-focused-day',\n    START_RANGE_DAY: 'ds-controlled-date-time-picker-calendar-start-range-day',\n    IN_RANGE_DAY: 'ds-controlled-date-time-picker-calendar-in-range-day',\n    END_RANGE_DAY: 'ds-controlled-date-time-picker-calendar-end-range-day',\n    SELECTED_DAY: 'ds-controlled-date-time-picker-calendar-selected-day',\n    SELECTED_FOCUSED_DAY: 'ds-controlled-date-time-picker-calendar-selected-focused-day',\n    NEXT_MONTH: 'ds-controlled-date-time-picker-calendar-next-month',\n    NEXT_YEAR: 'ds-controlled-date-time-picker-calendar-next-year',\n  },\n  TIMEWHEEL: {\n    PREV_HOUR: 'ds-controlled-date-time-picker-timewheel-prev-hour',\n    HOUR: 'ds-controlled-date-time-picker-timewheel-hour',\n    CURRENT_HOUR: 'ds-controlled-date-time-picker-timewheel-current-hour',\n    NEXT_HOUR: 'ds-controlled-date-time-picker-timewheel-next-hour',\n    PREV_MINUTE: 'ds-controlled-date-time-picker-timewheel-prev-minute',\n    MINUTE: 'ds-controlled-date-time-picker-timewheel-minute',\n    CURRENT_MINUTE: 'ds-controlled-date-time-picker-timewheel-current-minute',\n    NEXT_MINUTE: 'ds-controlled-date-time-picker-timewheel-next-minute',\n    PREV_MERIDIEM: 'ds-controlled-date-time-picker-timewheel-prev-meridiem',\n    MERIDIEM: 'ds-controlled-date-time-picker-timewheel-meridiem',\n    CURRENT_MERIDIEM: 'ds-controlled-date-time-picker-timewheel-current-meridiem',\n    NEXT_MERIDIEM: 'ds-controlled-date-time-picker-timewheel-next-meridiem',\n  },\n  CONTEXTUAL_MENU: {\n    CALENDAR: 'ds-controlled-date-time-picker-calendar-context-content-wrapper',\n    TIMEWHEEL: 'ds-controlled-date-time-picker-timewheel-context-content-wrapper',\n    CALENDAR_TIMEWHEEL: 'ds-controlled-date-time-picker-calendar-timewheel-context-content-wrapper',\n  },\n  CONTROLLER_COMPONENT: {\n    CALENDAR: 'ds-controlled-date-time-picker-calendar-controller-wrapper',\n    TIMEWHEEL: 'ds-controlled-date-time-picker-timewheel-controller-wrapper',\n    CALENDAR_TIMEWHEEL: 'ds-controlled-date-time-picker-calendar-timewheel-controller-wrapper',\n  },\n  CLEAR_BUTTON: 'ds-controlled-date-time-picker-clear-btn',\n} as const;\n"],
-  "mappings": "AAAA;ACAO,MAAM,qCAAqC;AAAA,EAChD,aAAa;AAAA,IACX,OAAO;AAAA,IACP,KAAK;AAAA,IACL,MAAM;AAAA,EACR;AAAA,EACA,aAAa;AAAA,IACX,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,UAAU;AAAA,EACZ;AAAA,EACA,cAAc;AAAA,IACZ,UAAU;AAAA,IACV,WAAW;AAAA,IACX,oBAAoB;AAAA,EACtB;AAAA,EACA,UAAU;AAAA,IACR,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,KAAK;AAAA,IACL,aAAa;AAAA,IACb,iBAAiB;AAAA,IACjB,cAAc;AAAA,IACd,eAAe;AAAA,IACf,cAAc;AAAA,IACd,sBAAsB;AAAA,IACtB,YAAY;AAAA,IACZ,WAAW;AAAA,EACb;AAAA,EACA,WAAW;AAAA,IACT,WAAW;AAAA,IACX,MAAM;AAAA,IACN,cAAc;AAAA,IACd,WAAW;AAAA,IACX,aAAa;AAAA,IACb,QAAQ;AAAA,IACR,gBAAgB;AAAA,IAChB,aAAa;AAAA,IACb,eAAe;AAAA,IACf,UAAU;AAAA,IACV,kBAAkB;AAAA,IAClB,eAAe;AAAA,EACjB;AAAA,EACA,iBAAiB;AAAA,IACf,UAAU;AAAA,IACV,WAAW;AAAA,IACX,oBAAoB;AAAA,EACtB;AAAA,EACA,sBAAsB;AAAA,IACpB,UAAU;AAAA,IACV,WAAW;AAAA,IACX,oBAAoB;AAAA,EACtB;AAAA,EACA,cAAc;AAChB;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const ControlledDateTimePickerDatatestid = {\n  CONTAINER: 'ds-controlled-date-time-picker-container',\n  DATE_INPUTS: {\n    MONTH: 'ds-controlled-date-time-picker-month-input',\n    DAY: 'ds-controlled-date-time-picker-day-input',\n    YEAR: 'ds-controlled-date-time-picker-year-input',\n  },\n  TIME_INPUTS: {\n    HOUR: 'ds-controlled-date-time-picker-hour-input',\n    MINUTE: 'ds-controlled-date-time-picker-minute-input',\n    MERIDIEM: 'ds-controlled-date-time-picker-meridiem-input',\n  },\n  PICKER_ICONS: {\n    CALENDAR: 'ds-controlled-date-time-picker-calendar-trigger-icon',\n    TIMEWHEEL: 'ds-controlled-date-time-picker-timewheel-trigger-icon',\n    CALENDAR_TIMEWHEEL: 'ds-controlled-date-time-picker-calendar-timewheel-trigger-icon',\n  },\n  CALENDAR: {\n    HEADER_LABEL: 'ds-controlled-date-time-picker-calendar-header-label',\n    PREV_YEAR: 'ds-controlled-date-time-picker-calendar-prev-year',\n    PREV_MONTH: 'ds-controlled-date-time-picker-calendar-prev-month',\n    DAY: 'ds-controlled-date-time-picker-calendar-day',\n    FOCUSED_DAY: 'ds-controlled-date-time-picker-calendar-focused-day',\n    START_RANGE_DAY: 'ds-controlled-date-time-picker-calendar-start-range-day',\n    IN_RANGE_DAY: 'ds-controlled-date-time-picker-calendar-in-range-day',\n    END_RANGE_DAY: 'ds-controlled-date-time-picker-calendar-end-range-day',\n    SELECTED_DAY: 'ds-controlled-date-time-picker-calendar-selected-day',\n    SELECTED_FOCUSED_DAY: 'ds-controlled-date-time-picker-calendar-selected-focused-day',\n    NEXT_MONTH: 'ds-controlled-date-time-picker-calendar-next-month',\n    NEXT_YEAR: 'ds-controlled-date-time-picker-calendar-next-year',\n  },\n  TIMEWHEEL: {\n    HEADER_LABEL: 'ds-controlled-date-time-picker-timewheel-header-label',\n    PREV_HOUR: 'ds-controlled-date-time-picker-timewheel-prev-hour',\n    HOUR: 'ds-controlled-date-time-picker-timewheel-hour',\n    CURRENT_HOUR: 'ds-controlled-date-time-picker-timewheel-current-hour',\n    NEXT_HOUR: 'ds-controlled-date-time-picker-timewheel-next-hour',\n    PREV_MINUTE: 'ds-controlled-date-time-picker-timewheel-prev-minute',\n    MINUTE: 'ds-controlled-date-time-picker-timewheel-minute',\n    CURRENT_MINUTE: 'ds-controlled-date-time-picker-timewheel-current-minute',\n    NEXT_MINUTE: 'ds-controlled-date-time-picker-timewheel-next-minute',\n    PREV_MERIDIEM: 'ds-controlled-date-time-picker-timewheel-prev-meridiem',\n    MERIDIEM: 'ds-controlled-date-time-picker-timewheel-meridiem',\n    CURRENT_MERIDIEM: 'ds-controlled-date-time-picker-timewheel-current-meridiem',\n    NEXT_MERIDIEM: 'ds-controlled-date-time-picker-timewheel-next-meridiem',\n  },\n  CONTEXTUAL_MENU: {\n    CALENDAR: 'ds-controlled-date-time-picker-calendar-context-content-wrapper',\n    TIMEWHEEL: 'ds-controlled-date-time-picker-timewheel-context-content-wrapper',\n    CALENDAR_TIMEWHEEL: 'ds-controlled-date-time-picker-calendar-timewheel-context-content-wrapper',\n  },\n  CONTROLLER_COMPONENT: {\n    CALENDAR: 'ds-controlled-date-time-picker-calendar-controller-wrapper',\n    TIMEWHEEL: 'ds-controlled-date-time-picker-timewheel-controller-wrapper',\n    CALENDAR_TIMEWHEEL: 'ds-controlled-date-time-picker-calendar-timewheel-controller-wrapper',\n  },\n  FOOTERS: {\n    CALENDAR: 'ds-controlled-date-time-picker-calendar-context-footer',\n    TIMEWHEEL: 'ds-controlled-date-time-picker-timewheel-context-footer',\n    CALENDAR_TIMEWHEEL: 'ds-controlled-date-time-picker-calendar-timewheel-context-footer',\n  },\n  CLEAR_BUTTON: 'ds-controlled-date-time-picker-clear-btn',\n} as const;\n"],
+  "mappings": "AAAA;ACAO,MAAM,qCAAqC;AAAA,EAChD,WAAW;AAAA,EACX,aAAa;AAAA,IACX,OAAO;AAAA,IACP,KAAK;AAAA,IACL,MAAM;AAAA,EACR;AAAA,EACA,aAAa;AAAA,IACX,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,UAAU;AAAA,EACZ;AAAA,EACA,cAAc;AAAA,IACZ,UAAU;AAAA,IACV,WAAW;AAAA,IACX,oBAAoB;AAAA,EACtB;AAAA,EACA,UAAU;AAAA,IACR,cAAc;AAAA,IACd,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,KAAK;AAAA,IACL,aAAa;AAAA,IACb,iBAAiB;AAAA,IACjB,cAAc;AAAA,IACd,eAAe;AAAA,IACf,cAAc;AAAA,IACd,sBAAsB;AAAA,IACtB,YAAY;AAAA,IACZ,WAAW;AAAA,EACb;AAAA,EACA,WAAW;AAAA,IACT,cAAc;AAAA,IACd,WAAW;AAAA,IACX,MAAM;AAAA,IACN,cAAc;AAAA,IACd,WAAW;AAAA,IACX,aAAa;AAAA,IACb,QAAQ;AAAA,IACR,gBAAgB;AAAA,IAChB,aAAa;AAAA,IACb,eAAe;AAAA,IACf,UAAU;AAAA,IACV,kBAAkB;AAAA,IAClB,eAAe;AAAA,EACjB;AAAA,EACA,iBAAiB;AAAA,IACf,UAAU;AAAA,IACV,WAAW;AAAA,IACX,oBAAoB;AAAA,EACtB;AAAA,EACA,sBAAsB;AAAA,IACpB,UAAU;AAAA,IACV,WAAW;AAAA,IACX,oBAAoB;AAAA,EACtB;AAAA,EACA,SAAS;AAAA,IACP,UAAU;AAAA,IACV,WAAW;AAAA,IACX,oBAAoB;AAAA,EACtB;AAAA,EACA,cAAc;AAChB;",
   "names": []
 }

package/dist/esm/config/useControlledDateTimePicker.js

@@ -16,7 +16,7 @@ var __spreadValues = (a, b) => {
 };
 import * as React from "react";
 import React2 from "react";
-import { getDataProps } from "@elliemae/ds-utilities";
+import { useGetGlobalAttributes, useGetXstyledProps } from "@elliemae/ds-utilities";
 import { useGetDatePickerWithDefaultsProps } from "./useGetPropsWithDefault";
 import { useFocusTracker } from "./useFocusTracker";
 import { useGetFlags } from "./useGetFlags";
@@ -44,18 +44,19 @@ const useControlledDateTimePicker = (props) => {
     focusTrackers
   });
   const globalKeyHandlers = useGlobalKeyHandlers({ changeHandlers, propsBasedOnType, DOMRefs, flags, focusTrackers });
-  const dataAttrs = getDataProps(propsWithDefaults);
+  const xstyledAttrs = useGetXstyledProps(propsWithDefaults);
+  const globalAttrs = useGetGlobalAttributes(propsWithDefaults);
   const { announcedDateValues, announcedTimeValues } = destructuredValues;
   const { isWithDateInputs, isDateTimeSelector, isWithTimeInputs } = flags;
   const ariaCurrentValueForInputs = `current values: ${isWithDateInputs ? `${announcedDateValues}` : ""}${isDateTimeSelector ? ", " : ""}${isWithTimeInputs ? `${announcedTimeValues}` : ""}`;
   const ctx = React2.useMemo(() => __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({
     props: propsWithDefaults,
     ariaCurrentValueForInputs,
-    dataAttrs
+    xstyledAttrs,
+    globalAttrs
   }, focusTrackers), flags), DOMRefs), relevantValues), propsBasedOnType), destructuredValues), changeHandlers), globalKeyHandlers), [
     propsWithDefaults,
     ariaCurrentValueForInputs,
-    dataAttrs,
     focusTrackers,
     flags,
     DOMRefs,
@@ -63,7 +64,9 @@ const useControlledDateTimePicker = (props) => {
     propsBasedOnType,
     destructuredValues,
     changeHandlers,
-    globalKeyHandlers
+    globalKeyHandlers,
+    xstyledAttrs,
+    globalAttrs
   ]);
   return ctx;
 };

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useControlledDateTimePicker.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { getDataProps } from '@elliemae/ds-utilities';\nimport { useGetDatePickerWithDefaultsProps } from './useGetPropsWithDefault';\nimport { useFocusTracker } from './useFocusTracker';\nimport { useGetFlags } from './useGetFlags';\nimport { useGetReferences } from './useGetReferences';\nimport { useRelevantValueFromProps } from './useRelevantValueFromProps';\nimport { useGetPropsBasedOnType } from './useGetPropsBasedOnType';\nimport { useGetDestructuredValues } from './useGetDestructuredValues';\nimport { useChangeHandlers } from './useChangeHandlers';\nimport { useGlobalKeyHandlers } from './useGlobalKeyHandlers';\nimport { useValidateProps } from './useValidateProps';\nimport type { DSControlledDateTimePickerT } from '../propTypes';\n\nexport type ControlledDateTimePickerContextT = ReturnType<typeof useGetFlags> &\n  ReturnType<typeof useFocusTracker> &\n  ReturnType<typeof useGetReferences> &\n  ReturnType<typeof useGetPropsBasedOnType> &\n  ReturnType<typeof useRelevantValueFromProps> &\n  ReturnType<typeof useGetDestructuredValues> &\n  ReturnType<typeof useChangeHandlers> &\n  ReturnType<typeof useGlobalKeyHandlers> & {\n    props: DSControlledDateTimePickerT.InternalProps;\n    ariaCurrentValueForInputs: string;\n    dataAttrs: Record<string, string>;\n  };\n\nexport const useControlledDateTimePicker = (\n  props: DSControlledDateTimePickerT.Props,\n): ControlledDateTimePickerContextT => {\n  // if we detect wrong props configuration we throw meaningful errors\n  useValidateProps(props);\n\n  const propsWithDefaults = useGetDatePickerWithDefaultsProps(props);\n\n  const flags = useGetFlags(propsWithDefaults);\n  const DOMRefs = useGetReferences(flags); // refs are used for \"auto-advance\" feature\n  const focusTrackers = useFocusTracker({ DOMRefs, flags });\n  const relevantValues = useRelevantValueFromProps(propsWithDefaults);\n  const propsBasedOnType = useGetPropsBasedOnType(propsWithDefaults);\n  const destructuredValues = useGetDestructuredValues({ ...propsBasedOnType, ...flags });\n  const changeHandlers = useChangeHandlers({\n    relevantValues,\n    destructuredValues,\n    propsBasedOnType,\n    DOMRefs,\n    focusTrackers,\n  });\n  const globalKeyHandlers = useGlobalKeyHandlers({ changeHandlers, propsBasedOnType, DOMRefs, flags, focusTrackers });\n\n  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-call\n  const dataAttrs = getDataProps<DSControlledDateTimePickerT.InternalProps>(propsWithDefaults);\n\n  const { announcedDateValues, announcedTimeValues } = destructuredValues;\n  const { isWithDateInputs, isDateTimeSelector, isWithTimeInputs } = flags;\n\n  const ariaCurrentValueForInputs = `current values: ${isWithDateInputs ? `${announcedDateValues}` : ''}${\n    isDateTimeSelector ? ', ' : ''\n  }${isWithTimeInputs ? `${announcedTimeValues}` : ''}`;\n\n  const ctx = React.useMemo(\n    () => ({\n      props: propsWithDefaults,\n      ariaCurrentValueForInputs,\n      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n      dataAttrs,\n      ...focusTrackers,\n      ...flags,\n      ...DOMRefs,\n      ...relevantValues,\n      ...propsBasedOnType,\n      ...destructuredValues,\n      ...changeHandlers,\n      ...globalKeyHandlers,\n    }),\n    [\n      propsWithDefaults,\n      ariaCurrentValueForInputs,\n      dataAttrs,\n      focusTrackers,\n      flags,\n      DOMRefs,\n      relevantValues,\n      propsBasedOnType,\n      destructuredValues,\n      changeHandlers,\n      globalKeyHandlers,\n    ],\n  );\n\n  return ctx;\n};\n"],
-  "mappings": ";;;;;;;;;;;;;;;;AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAgBO,MAAM,8BAA8B,CACzC,UACqC;AAErC,mBAAiB,KAAK;AAEtB,QAAM,oBAAoB,kCAAkC,KAAK;AAEjE,QAAM,QAAQ,YAAY,iBAAiB;AAC3C,QAAM,UAAU,iBAAiB,KAAK;AACtC,QAAM,gBAAgB,gBAAgB,EAAE,SAAS,MAAM,CAAC;AACxD,QAAM,iBAAiB,0BAA0B,iBAAiB;AAClE,QAAM,mBAAmB,uBAAuB,iBAAiB;AACjE,QAAM,qBAAqB,yBAAyB,kCAAK,mBAAqB,MAAO;AACrF,QAAM,iBAAiB,kBAAkB;AAAA,IACvC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACD,QAAM,oBAAoB,qBAAqB,EAAE,gBAAgB,kBAAkB,SAAS,OAAO,cAAc,CAAC;AAGlH,QAAM,YAAY,aAAwD,iBAAiB;AAE3F,QAAM,EAAE,qBAAqB,wBAAwB;AACrD,QAAM,EAAE,kBAAkB,oBAAoB,qBAAqB;AAEnE,QAAM,4BAA4B,mBAAmB,mBAAmB,GAAG,wBAAwB,KACjG,qBAAqB,OAAO,KAC3B,mBAAmB,GAAG,wBAAwB;AAEjD,QAAM,MAAM,OAAM,QAChB,MAAO;AAAA,IACL,OAAO;AAAA,IACP;AAAA,IAEA;AAAA,KACG,gBACA,QACA,UACA,iBACA,mBACA,qBACA,iBACA,oBAEL;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CACF;AAEA,SAAO;AACT;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { useGetGlobalAttributes, useGetXstyledProps } from '@elliemae/ds-utilities';\nimport { useGetDatePickerWithDefaultsProps } from './useGetPropsWithDefault';\nimport { useFocusTracker } from './useFocusTracker';\nimport { useGetFlags } from './useGetFlags';\nimport { useGetReferences } from './useGetReferences';\nimport { useRelevantValueFromProps } from './useRelevantValueFromProps';\nimport { useGetPropsBasedOnType } from './useGetPropsBasedOnType';\nimport { useGetDestructuredValues } from './useGetDestructuredValues';\nimport { useChangeHandlers } from './useChangeHandlers';\nimport { useGlobalKeyHandlers } from './useGlobalKeyHandlers';\nimport { useValidateProps } from './useValidateProps';\nimport type { DSControlledDateTimePickerT } from '../propTypes';\n\nexport type ControlledDateTimePickerContextT = ReturnType<typeof useGetFlags> &\n  ReturnType<typeof useFocusTracker> &\n  ReturnType<typeof useGetReferences> &\n  ReturnType<typeof useGetPropsBasedOnType> &\n  ReturnType<typeof useRelevantValueFromProps> &\n  ReturnType<typeof useGetDestructuredValues> &\n  ReturnType<typeof useChangeHandlers> &\n  ReturnType<typeof useGlobalKeyHandlers> & {\n    props: DSControlledDateTimePickerT.InternalProps;\n    ariaCurrentValueForInputs: string;\n    globalAttrs: Record<string, unknown>;\n    xstyledAttrs: Record<string, unknown>;\n  };\n\nexport const useControlledDateTimePicker = (\n  props: DSControlledDateTimePickerT.Props,\n): ControlledDateTimePickerContextT => {\n  // if we detect wrong props configuration we throw meaningful errors\n  useValidateProps(props);\n\n  const propsWithDefaults = useGetDatePickerWithDefaultsProps(props);\n\n  const flags = useGetFlags(propsWithDefaults);\n  const DOMRefs = useGetReferences(flags); // refs are used for \"auto-advance\" feature\n  const focusTrackers = useFocusTracker({ DOMRefs, flags });\n  const relevantValues = useRelevantValueFromProps(propsWithDefaults);\n  const propsBasedOnType = useGetPropsBasedOnType(propsWithDefaults);\n  const destructuredValues = useGetDestructuredValues({ ...propsBasedOnType, ...flags });\n  const changeHandlers = useChangeHandlers({\n    relevantValues,\n    destructuredValues,\n    propsBasedOnType,\n    DOMRefs,\n    focusTrackers,\n  });\n\n  const globalKeyHandlers = useGlobalKeyHandlers({ changeHandlers, propsBasedOnType, DOMRefs, flags, focusTrackers });\n\n  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-call\n  // const dataAttrs = getDataProps<DSControlledDateTimePickerT.InternalProps>(propsWithDefaults);\n\n  const xstyledAttrs = useGetXstyledProps(propsWithDefaults) as Record<string, unknown>;\n\n  const globalAttrs = useGetGlobalAttributes(propsWithDefaults) as Record<string, unknown>;\n\n  const { announcedDateValues, announcedTimeValues } = destructuredValues;\n  const { isWithDateInputs, isDateTimeSelector, isWithTimeInputs } = flags;\n\n  const ariaCurrentValueForInputs = `current values: ${isWithDateInputs ? `${announcedDateValues}` : ''}${\n    isDateTimeSelector ? ', ' : ''\n  }${isWithTimeInputs ? `${announcedTimeValues}` : ''}`;\n\n  const ctx = React.useMemo(\n    () => ({\n      props: propsWithDefaults,\n      ariaCurrentValueForInputs,\n      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n      xstyledAttrs,\n      globalAttrs,\n      ...focusTrackers,\n      ...flags,\n      ...DOMRefs,\n      ...relevantValues,\n      ...propsBasedOnType,\n      ...destructuredValues,\n      ...changeHandlers,\n      ...globalKeyHandlers,\n    }),\n    [\n      propsWithDefaults,\n      ariaCurrentValueForInputs,\n      focusTrackers,\n      flags,\n      DOMRefs,\n      relevantValues,\n      propsBasedOnType,\n      destructuredValues,\n      changeHandlers,\n      globalKeyHandlers,\n      xstyledAttrs,\n      globalAttrs,\n    ],\n  );\n\n  return ctx;\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAiBO,MAAM,8BAA8B,CACzC,UACqC;AAErC,mBAAiB,KAAK;AAEtB,QAAM,oBAAoB,kCAAkC,KAAK;AAEjE,QAAM,QAAQ,YAAY,iBAAiB;AAC3C,QAAM,UAAU,iBAAiB,KAAK;AACtC,QAAM,gBAAgB,gBAAgB,EAAE,SAAS,MAAM,CAAC;AACxD,QAAM,iBAAiB,0BAA0B,iBAAiB;AAClE,QAAM,mBAAmB,uBAAuB,iBAAiB;AACjE,QAAM,qBAAqB,yBAAyB,kCAAK,mBAAqB,MAAO;AACrF,QAAM,iBAAiB,kBAAkB;AAAA,IACvC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,oBAAoB,qBAAqB,EAAE,gBAAgB,kBAAkB,SAAS,OAAO,cAAc,CAAC;AAKlH,QAAM,eAAe,mBAAmB,iBAAiB;AAEzD,QAAM,cAAc,uBAAuB,iBAAiB;AAE5D,QAAM,EAAE,qBAAqB,wBAAwB;AACrD,QAAM,EAAE,kBAAkB,oBAAoB,qBAAqB;AAEnE,QAAM,4BAA4B,mBAAmB,mBAAmB,GAAG,wBAAwB,KACjG,qBAAqB,OAAO,KAC3B,mBAAmB,GAAG,wBAAwB;AAEjD,QAAM,MAAM,OAAM,QAChB,MAAO;AAAA,IACL,OAAO;AAAA,IACP;AAAA,IAEA;AAAA,IACA;AAAA,KACG,gBACA,QACA,UACA,iBACA,mBACA,qBACA,iBACA,oBAEL;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CACF;AAEA,SAAO;AACT;",
   "names": []
 }

package/dist/esm/exported-related/theming.js

@@ -0,0 +1,43 @@
+import * as React from "react";
+const COMPONENT_NAME = "DS-controlled-date-time-picker";
+const slots = {
+  CONTAINER: "root",
+  INPUT: "field-input",
+  PICKER_ICONS: {
+    CALENDAR: "calendar-trigger-icon",
+    TIMEWHEEL: "timewheel-trigger-icon",
+    CALENDAR_TIMEWHEEL: "calendar-timewheel-trigger-icon"
+  },
+  CALENDAR: {
+    DAY_BUTTON: "calendar-day",
+    HEADER_LABEL: "calendar-header-label",
+    HEADER_BUTTON: "calendar-header-buttons",
+    HEADER_WEEKLY_DAY_LIST: "calendar-header-weekly-day-list"
+  },
+  TIMEWHEEL: {
+    TIME_BUTTON: "timewheel-time-button",
+    TIME_CHANGE_BUTTON: "timewheel-time-change-button",
+    HEADER_LABEL: "timewheel-header-label"
+  },
+  CONTEXTUAL_MENU: {
+    CALENDAR: "calendar-context-content-wrapper",
+    TIMEWHEEL: "timewheel-context-content-wrapper",
+    CALENDAR_TIMEWHEEL: "calendar-timewheel-context-content-wrapper"
+  },
+  FOOTERS: {
+    CALENDAR: "calendar-context-footer",
+    TIMEWHEEL: "timewheel-context-footer",
+    CALENDAR_TIMEWHEEL: "calendar-timewheel-context-footer"
+  },
+  CONTROLLER_COMPONENT: {
+    CALENDAR: "calendar-controller-wrapper",
+    TIMEWHEEL: "timewheel-controller-wrapper",
+    CALENDAR_TIMEWHEEL: "calendar-timewheel-controller-wrapper"
+  },
+  CLEAR_BUTTON: "clear-btn"
+};
+export {
+  COMPONENT_NAME,
+  slots
+};
+//# sourceMappingURL=theming.js.map

package/dist/esm/exported-related/theming.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/exported-related/theming.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const COMPONENT_NAME = 'DS-controlled-date-time-picker';\n\nexport const slots = {\n  CONTAINER: 'root',\n  INPUT: 'field-input',\n  PICKER_ICONS: {\n    CALENDAR: 'calendar-trigger-icon',\n    TIMEWHEEL: 'timewheel-trigger-icon',\n    CALENDAR_TIMEWHEEL: 'calendar-timewheel-trigger-icon',\n  },\n  CALENDAR: {\n    DAY_BUTTON: 'calendar-day',\n    HEADER_LABEL: 'calendar-header-label',\n    HEADER_BUTTON: 'calendar-header-buttons',\n    HEADER_WEEKLY_DAY_LIST: 'calendar-header-weekly-day-list',\n  },\n  TIMEWHEEL: {\n    TIME_BUTTON: 'timewheel-time-button',\n    TIME_CHANGE_BUTTON: 'timewheel-time-change-button',\n    HEADER_LABEL: 'timewheel-header-label',\n  },\n  CONTEXTUAL_MENU: {\n    CALENDAR: 'calendar-context-content-wrapper',\n    TIMEWHEEL: 'timewheel-context-content-wrapper',\n    CALENDAR_TIMEWHEEL: 'calendar-timewheel-context-content-wrapper',\n  },\n  FOOTERS: {\n    CALENDAR: 'calendar-context-footer',\n    TIMEWHEEL: 'timewheel-context-footer',\n    CALENDAR_TIMEWHEEL: 'calendar-timewheel-context-footer',\n  },\n  CONTROLLER_COMPONENT: {\n    CALENDAR: 'calendar-controller-wrapper',\n    TIMEWHEEL: 'timewheel-controller-wrapper',\n    CALENDAR_TIMEWHEEL: 'calendar-timewheel-controller-wrapper',\n  },\n  CLEAR_BUTTON: 'clear-btn',\n};\n"],
+  "mappings": "AAAA;ACAO,MAAM,iBAAiB;AAEvB,MAAM,QAAQ;AAAA,EACnB,WAAW;AAAA,EACX,OAAO;AAAA,EACP,cAAc;AAAA,IACZ,UAAU;AAAA,IACV,WAAW;AAAA,IACX,oBAAoB;AAAA,EACtB;AAAA,EACA,UAAU;AAAA,IACR,YAAY;AAAA,IACZ,cAAc;AAAA,IACd,eAAe;AAAA,IACf,wBAAwB;AAAA,EAC1B;AAAA,EACA,WAAW;AAAA,IACT,aAAa;AAAA,IACb,oBAAoB;AAAA,IACpB,cAAc;AAAA,EAChB;AAAA,EACA,iBAAiB;AAAA,IACf,UAAU;AAAA,IACV,WAAW;AAAA,IACX,oBAAoB;AAAA,EACtB;AAAA,EACA,SAAS;AAAA,IACP,UAAU;AAAA,IACV,WAAW;AAAA,IACX,oBAAoB;AAAA,EACtB;AAAA,EACA,sBAAsB;AAAA,IACpB,UAAU;AAAA,IACV,WAAW;AAAA,IACX,oBAAoB;AAAA,EACtB;AAAA,EACA,cAAc;AAChB;",
+  "names": []
+}

package/dist/esm/index.js

@@ -11,7 +11,9 @@ import {
   getDateValuesFromDate
 } from "./utils/dateHelpers";
 import { getValidationTimeStringMetaInfo } from "./utils/timeHelpers";
+import { COMPONENT_NAME, slots } from "./exported-related/theming";
 export {
+  COMPONENT_NAME,
   CONTROLLED_DATE_TIME_PICKER_TYPES,
   ControlledDateTimePickerDatatestid,
   DSControlledDateTimePicker,
@@ -23,6 +25,7 @@ export {
   getValidationDateStringMetaInfo,
   getValidationDateTimeStringMetaInfo,
   getValidationTimeStringMetaInfo,
-  prependStringWithPlaceHolders
+  prependStringWithPlaceHolders,
+  slots
 };
 //# sourceMappingURL=index.js.map

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';\n"],
-  "mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAMA;",
+  "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 { COMPONENT_NAME, slots } from './exported-related/theming';\n"],
+  "mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAMA;AACA;",
   "names": []
 }

package/dist/esm/parts/ControlledDateTimePickerContent.js

@@ -15,7 +15,7 @@ var __spreadValues = (a, b) => {
   return a;
 };
 import * as React from "react";
-import React2 from "react";
+import React2, { useContext } from "react";
 import { Grid } from "@elliemae/ds-grid";
 import { ControlledDateTimePickerContext } from "../ControlledDateTimePickerCTX";
 import { StyledInputsWrapperGrid } from "./Styleds";
@@ -23,6 +23,7 @@ import { DateInputs } from "./DateInputs/DateInputs";
 import { TimeInputs } from "./TimeInputs/TimeInputs";
 import { PickersIcons } from "./Pickers/PickersIcons";
 import { ClearButton } from "./ClearButton/ClearButton";
+import { ControlledDateTimePickerDatatestid } from "../ControlledDateTimePickerDatatestid";
 const ControlledDateTimePickerContent = () => {
   const {
     props: { hasError, disabled },
@@ -35,10 +36,11 @@ const ControlledDateTimePickerContent = () => {
     withAnyRightController,
     shouldPreserveClearableSpace,
     isControllerOnly,
-    dataAttrs,
+    globalAttrs,
+    xstyledAttrs,
     onGlobalKeyDown,
     trackFocusResetter
-  } = React2.useContext(ControlledDateTimePickerContext);
+  } = useContext(ControlledDateTimePickerContext);
   const styledsAttrs = {
     justPicker: hideDate && hideTime,
     withAnyPicker,
@@ -57,14 +59,15 @@ const ControlledDateTimePickerContent = () => {
     rightControlCols.push("28px");
   if (withAnyPicker)
     rightControlCols.push("auto");
-  return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(StyledInputsWrapperGrid, __spreadValues(__spreadValues({
+  return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(StyledInputsWrapperGrid, __spreadValues(__spreadValues(__spreadValues({
     cols: mainCols,
     gutter: "xxs",
     pr: hideDatePicker && hideTimePicker && hideDateTimePicker ? "2px" : void 0,
     onKeyDown: onGlobalKeyDown,
     disabled,
-    onBlur: trackFocusResetter
-  }, styledsAttrs), dataAttrs), hideDate ? null : /* @__PURE__ */ React2.createElement(DateInputs, null), hideTime ? null : /* @__PURE__ */ React2.createElement(TimeInputs, null), withAnyRightController ? /* @__PURE__ */ React2.createElement(Grid, {
+    onBlur: trackFocusResetter,
+    "data-testid": ControlledDateTimePickerDatatestid.CONTAINER
+  }, styledsAttrs), globalAttrs), xstyledAttrs), hideDate ? null : /* @__PURE__ */ React2.createElement(DateInputs, null), hideTime ? null : /* @__PURE__ */ React2.createElement(TimeInputs, null), withAnyRightController ? /* @__PURE__ */ React2.createElement(Grid, {
     cols: rightControlCols
   }, shouldPreserveClearableSpace ? /* @__PURE__ */ React2.createElement(ClearButton, null) : null, withAnyPicker ? /* @__PURE__ */ React2.createElement(PickersIcons, null) : null) : null));
 };

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 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';\n\nexport const ControlledDateTimePickerContent = (): JSX.Element => {\n  const {\n    props: { hasError, disabled },\n    hideDate,\n    hideDatePicker,\n    hideTime,\n    hideTimePicker,\n    hideDateTimePicker,\n    withAnyPicker,\n    withAnyRightController,\n    shouldPreserveClearableSpace,\n    isControllerOnly,\n    dataAttrs,\n    onGlobalKeyDown,\n    trackFocusResetter,\n  } = React.useContext(ControlledDateTimePickerContext);\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={hideDatePicker && hideTimePicker && hideDateTimePicker ? '2px' : undefined}\n        onKeyDown={onGlobalKeyDown}\n        disabled={disabled}\n        onBlur={trackFocusResetter}\n        {...styledsAttrs}\n        {...dataAttrs}\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;ACCA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEO,MAAM,kCAAkC,MAAmB;AAChE,QAAM;AAAA,IACJ,OAAO,EAAE,UAAU;AAAA,IACnB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MACE,OAAM,WAAW,+BAA+B;AACpD,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,4DAKE,qCAAC;AAAA,IACC,MAAM;AAAA,IACN,QAAO;AAAA,IACP,IAAI,kBAAkB,kBAAkB,qBAAqB,QAAQ;AAAA,IACrE,WAAW;AAAA,IACX;AAAA,IACA,QAAQ;AAAA,KACJ,eACA,YAEH,WAAW,OAAO,qCAAC,gBAAW,GAC9B,WAAW,OAAO,qCAAC,gBAAW,GAC9B,yBACC,qCAAC;AAAA,IAAK,MAAM;AAAA,KACT,+BAA+B,qCAAC,iBAAY,IAAK,MACjD,gBAAgB,qCAAC,kBAAa,IAAK,IACtC,IACE,IACN,CACF;AAEJ;",
+  "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    hideDatePicker,\n    hideTime,\n    hideTimePicker,\n    hideDateTimePicker,\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={hideDatePicker && hideTimePicker && hideDateTimePicker ? '2px' : undefined}\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;ACCA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEO,MAAM,kCAAkC,MAAmB;AAChE,QAAM;AAAA,IACJ,OAAO,EAAE,UAAU;AAAA,IACnB;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,MACE,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,4DAKE,qCAAC;AAAA,IACC,MAAM;AAAA,IACN,QAAO;AAAA,IACP,IAAI,kBAAkB,kBAAkB,qBAAqB,QAAQ;AAAA,IACrE,WAAW;AAAA,IACX;AAAA,IACA,QAAQ;AAAA,IACR,eAAa,mCAAmC;AAAA,KAC5C,eACA,cACA,eAEH,WAAW,OAAO,qCAAC,gBAAW,GAC9B,WAAW,OAAO,qCAAC,gBAAW,GAC9B,yBACC,qCAAC;AAAA,IAAK,MAAM;AAAA,KACT,+BAA+B,qCAAC,iBAAY,IAAK,MACjD,gBAAgB,qCAAC,kBAAa,IAAK,IACtC,IACE,IACN,CACF;AAEJ;",
   "names": []
 }

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

@@ -1,5 +1,6 @@
 import * as React from "react";
 import React2, { useContext } from "react";
+import { ControlledDateTimePickerDatatestid } from "../../../ControlledDateTimePickerDatatestid";
 import { ControlledDateTimePickerContext } from "../../../ControlledDateTimePickerCTX";
 import { CalendarFooterMessage } from "./Styleds";
 const CalendarFooter = () => {
@@ -9,7 +10,8 @@ const CalendarFooter = () => {
   } = useContext(ControlledDateTimePickerContext);
   if (pickerFooterMsg !== void 0 && !isWithTimeWheelToo && hasError)
     return /* @__PURE__ */ React2.createElement(CalendarFooterMessage, {
-      role: "alert"
+      role: "alert",
+      "data-testid": ControlledDateTimePickerDatatestid.FOOTERS.CALENDAR
     }, pickerFooterMsg);
   return null;
 };

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/Pickers/Calendar/CalendarFooter.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX';\nimport { CalendarFooterMessage } from './Styleds';\n\nexport const CalendarFooter: React.ComponentType = () => {\n  const {\n    props: { pickerFooterMsg, hasError },\n    isWithTimeWheelToo,\n  } = useContext(ControlledDateTimePickerContext);\n  if (pickerFooterMsg !== undefined && !isWithTimeWheelToo && hasError)\n    return <CalendarFooterMessage role=\"alert\">{pickerFooterMsg}</CalendarFooterMessage>;\n  return null;\n};\n"],
-  "mappings": "AAAA;ACAA;AACA;AACA;AAEO,MAAM,iBAAsC,MAAM;AACvD,QAAM;AAAA,IACJ,OAAO,EAAE,iBAAiB;AAAA,IAC1B;AAAA,MACE,WAAW,+BAA+B;AAC9C,MAAI,oBAAoB,UAAa,CAAC,sBAAsB;AAC1D,WAAO,qCAAC;AAAA,MAAsB,MAAK;AAAA,OAAS,eAAgB;AAC9D,SAAO;AACT;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX';\nimport { CalendarFooterMessage } from './Styleds';\n\nexport const CalendarFooter: React.ComponentType = () => {\n  const {\n    props: { pickerFooterMsg, hasError },\n    isWithTimeWheelToo,\n  } = useContext(ControlledDateTimePickerContext);\n  if (pickerFooterMsg !== undefined && !isWithTimeWheelToo && hasError)\n    return (\n      <CalendarFooterMessage role=\"alert\" data-testid={ControlledDateTimePickerDatatestid.FOOTERS.CALENDAR}>\n        {pickerFooterMsg}\n      </CalendarFooterMessage>\n    );\n  return null;\n};\n"],
+  "mappings": "AAAA;ACAA;AACA;AACA;AACA;AAEO,MAAM,iBAAsC,MAAM;AACvD,QAAM;AAAA,IACJ,OAAO,EAAE,iBAAiB;AAAA,IAC1B;AAAA,MACE,WAAW,+BAA+B;AAC9C,MAAI,oBAAoB,UAAa,CAAC,sBAAsB;AAC1D,WACE,qCAAC;AAAA,MAAsB,MAAK;AAAA,MAAQ,eAAa,mCAAmC,QAAQ;AAAA,OACzF,eACH;AAEJ,SAAO;AACT;",
   "names": []
 }

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

@@ -5,7 +5,7 @@ import { ChevronDoubleLeft, ChevronLeft, ChevronDoubleRight, ChevronRight } from
 import { ControlledDateTimePickerDatatestid } from "../../../ControlledDateTimePickerDatatestid";
 import { getMonthNameByMonthNumber } from "../../../utils/dateHelpers";
 import { ControlledDateTimePickerContext } from "../../../ControlledDateTimePickerCTX";
-import { StyledHeader, StyledHeaderButton } from "./Styleds";
+import { StyledHeader, StyledHeaderButton, StyledHeaderLabel } from "./Styleds";
 import { CalendarContext } from "./CalendarContext";
 const useGetFormattedCurrentDate = () => {
   const { currentMonth, currentYear } = useContext(CalendarContext);
@@ -88,7 +88,9 @@ const CalendarHead = () => {
     height: 14,
     width: 14,
     fill: "#25292f"
-  })), /* @__PURE__ */ React2.createElement("h3", null, currentFormatedDate), /* @__PURE__ */ React2.createElement(StyledHeaderButton, {
+  })), /* @__PURE__ */ React2.createElement(StyledHeaderLabel, {
+    "data-testid": ControlledDateTimePickerDatatestid.CALENDAR.HEADER_LABEL
+  }, currentFormatedDate), /* @__PURE__ */ React2.createElement(StyledHeaderButton, {
     "aria-label": "next month",
     buttonType: "raw",
     size: BUTTON_SIZES.M,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/Pickers/Calendar/CalendarHead.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity, @typescript-eslint/no-unsafe-member-access,  @typescript-eslint/no-unsafe-assignment */\nimport React, { useCallback, useContext, useMemo } from 'react';\n\nimport { BUTTON_SIZES } from '@elliemae/ds-button';\nimport { ChevronDoubleLeft, ChevronLeft, ChevronDoubleRight, ChevronRight } from '@elliemae/ds-icons';\nimport { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid';\nimport { getMonthNameByMonthNumber } from '../../../utils/dateHelpers';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX';\nimport { StyledHeader, StyledHeaderButton } from './Styleds';\nimport { CalendarContext } from './CalendarContext';\n\nconst useGetFormattedCurrentDate = () => {\n  const { currentMonth, currentYear } = useContext(CalendarContext);\n\n  const monthString = currentMonth >= 0 && currentMonth <= 11 ? `${getMonthNameByMonthNumber(currentMonth)} ` : '';\n\n  return useMemo(() => `${monthString}${currentYear}`, [monthString, currentYear]);\n};\nexport const CalendarHead = (): JSX.Element => {\n  const currentFormatedDate = useGetFormattedCurrentDate();\n  const {\n    handlePrevYear,\n    handlePrevMonth,\n    handleNextMonth,\n    handleNextYear,\n    handlePrevYearKeyDown,\n    handlePrevMonthKeyDown,\n    handleNextMonthKeyDown,\n    handleNextYearKeyDown,\n    onPrevYearFocus,\n    onPrevMonthFocus,\n    onNextMonthFocus,\n    onNextYearFocus,\n  } = useContext(CalendarContext);\n\n  const {\n    isControllerOnly,\n    autoFocusPrevMonthArrow,\n    prevYearBtnRef,\n    prevMonthBtnRef,\n    nextMonthBtnRef,\n    nextYearBtnRef,\n    latestInteractionRegion,\n    currFocusDescriber,\n  } = useContext(ControlledDateTimePickerContext);\n\n  const handlePrevYearRef = useCallback(\n    (ButtonDomNode: HTMLButtonElement) => {\n      prevYearBtnRef.current = ButtonDomNode;\n      if (latestInteractionRegion === 'calendar-head' && currFocusDescriber === 'calendar-prev-year')\n        ButtonDomNode?.focus?.();\n    },\n    [currFocusDescriber, latestInteractionRegion, prevYearBtnRef],\n  );\n  const handlePrevMonthRef = useCallback(\n    (ButtonDomNode: HTMLButtonElement) => {\n      prevMonthBtnRef.current = ButtonDomNode;\n      if (latestInteractionRegion === 'calendar-head' && currFocusDescriber === 'calendar-prev-month')\n        ButtonDomNode?.focus?.();\n    },\n    [currFocusDescriber, latestInteractionRegion, prevMonthBtnRef],\n  );\n  const handleNextMonthRef = useCallback(\n    (ButtonDomNode: HTMLButtonElement) => {\n      nextMonthBtnRef.current = ButtonDomNode;\n      if (latestInteractionRegion === 'calendar-head' && currFocusDescriber === 'calendar-next-month')\n        ButtonDomNode?.focus?.();\n    },\n    [currFocusDescriber, latestInteractionRegion, nextMonthBtnRef],\n  );\n  const handleNextYearRef = useCallback(\n    (ButtonDomNode: HTMLButtonElement) => {\n      nextYearBtnRef.current = ButtonDomNode;\n      if (latestInteractionRegion === 'calendar-head' && currFocusDescriber === 'calendar-next-year')\n        ButtonDomNode?.focus?.();\n    },\n    [currFocusDescriber, latestInteractionRegion, nextYearBtnRef],\n  );\n\n  return (\n    <StyledHeader>\n      <StyledHeaderButton\n        aria-label=\"previous year\"\n        buttonType=\"raw\"\n        size={BUTTON_SIZES.M}\n        onClick={handlePrevYear}\n        innerRef={handlePrevYearRef}\n        onKeyDown={handlePrevYearKeyDown}\n        onFocus={onPrevYearFocus}\n        tabIndex={isControllerOnly ? -1 : 1}\n        data-testid={ControlledDateTimePickerDatatestid.CALENDAR.PREV_YEAR}\n        type=\"button\"\n      >\n        <ChevronDoubleLeft height={14} width={14} fill=\"#25292f\" />\n      </StyledHeaderButton>\n      <StyledHeaderButton\n        autoFocus={autoFocusPrevMonthArrow}\n        aria-label=\"previous month\"\n        buttonType=\"raw\"\n        size={BUTTON_SIZES.M}\n        onClick={handlePrevMonth}\n        innerRef={handlePrevMonthRef}\n        onKeyDown={handlePrevMonthKeyDown}\n        onFocus={onPrevMonthFocus}\n        data-testid={ControlledDateTimePickerDatatestid.CALENDAR.PREV_MONTH}\n        type=\"button\"\n        // this is a tabstop for when the calendar is open\n      >\n        <ChevronLeft height={14} width={14} fill=\"#25292f\" />\n      </StyledHeaderButton>\n      <h3>{currentFormatedDate}</h3>\n      <StyledHeaderButton\n        aria-label=\"next month\"\n        buttonType=\"raw\"\n        size={BUTTON_SIZES.M}\n        onClick={handleNextMonth}\n        innerRef={handleNextMonthRef}\n        onKeyDown={handleNextMonthKeyDown}\n        onFocus={onNextMonthFocus}\n        data-testid={ControlledDateTimePickerDatatestid.CALENDAR.NEXT_MONTH}\n        type=\"button\"\n      >\n        <ChevronRight height={14} width={14} fill=\"#25292f\" />\n      </StyledHeaderButton>\n      <StyledHeaderButton\n        aria-label=\"next year\"\n        buttonType=\"raw\"\n        size={BUTTON_SIZES.M}\n        onClick={handleNextYear}\n        innerRef={handleNextYearRef}\n        onKeyDown={handleNextYearKeyDown}\n        onFocus={onNextYearFocus}\n        data-testid={ControlledDateTimePickerDatatestid.CALENDAR.NEXT_YEAR}\n        type=\"button\"\n      >\n        <ChevronDoubleRight height={14} width={14} fill=\"#25292f\" />\n      </StyledHeaderButton>\n    </StyledHeader>\n  );\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity, @typescript-eslint/no-unsafe-member-access,  @typescript-eslint/no-unsafe-assignment */\nimport React, { useCallback, useContext, useMemo } from 'react';\nimport { BUTTON_SIZES } from '@elliemae/ds-button';\nimport { ChevronDoubleLeft, ChevronLeft, ChevronDoubleRight, ChevronRight } from '@elliemae/ds-icons';\nimport { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid';\nimport { getMonthNameByMonthNumber } from '../../../utils/dateHelpers';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX';\nimport { StyledHeader, StyledHeaderButton, StyledHeaderLabel } from './Styleds';\nimport { CalendarContext } from './CalendarContext';\n\nconst useGetFormattedCurrentDate = () => {\n  const { currentMonth, currentYear } = useContext(CalendarContext);\n\n  const monthString = currentMonth >= 0 && currentMonth <= 11 ? `${getMonthNameByMonthNumber(currentMonth)} ` : '';\n\n  return useMemo(() => `${monthString}${currentYear}`, [monthString, currentYear]);\n};\nexport const CalendarHead = (): JSX.Element => {\n  const currentFormatedDate = useGetFormattedCurrentDate();\n  const {\n    handlePrevYear,\n    handlePrevMonth,\n    handleNextMonth,\n    handleNextYear,\n    handlePrevYearKeyDown,\n    handlePrevMonthKeyDown,\n    handleNextMonthKeyDown,\n    handleNextYearKeyDown,\n    onPrevYearFocus,\n    onPrevMonthFocus,\n    onNextMonthFocus,\n    onNextYearFocus,\n  } = useContext(CalendarContext);\n\n  const {\n    isControllerOnly,\n    autoFocusPrevMonthArrow,\n    prevYearBtnRef,\n    prevMonthBtnRef,\n    nextMonthBtnRef,\n    nextYearBtnRef,\n    latestInteractionRegion,\n    currFocusDescriber,\n  } = useContext(ControlledDateTimePickerContext);\n\n  const handlePrevYearRef = useCallback(\n    (ButtonDomNode: HTMLButtonElement) => {\n      prevYearBtnRef.current = ButtonDomNode;\n      if (latestInteractionRegion === 'calendar-head' && currFocusDescriber === 'calendar-prev-year')\n        ButtonDomNode?.focus?.();\n    },\n    [currFocusDescriber, latestInteractionRegion, prevYearBtnRef],\n  );\n  const handlePrevMonthRef = useCallback(\n    (ButtonDomNode: HTMLButtonElement) => {\n      prevMonthBtnRef.current = ButtonDomNode;\n      if (latestInteractionRegion === 'calendar-head' && currFocusDescriber === 'calendar-prev-month')\n        ButtonDomNode?.focus?.();\n    },\n    [currFocusDescriber, latestInteractionRegion, prevMonthBtnRef],\n  );\n  const handleNextMonthRef = useCallback(\n    (ButtonDomNode: HTMLButtonElement) => {\n      nextMonthBtnRef.current = ButtonDomNode;\n      if (latestInteractionRegion === 'calendar-head' && currFocusDescriber === 'calendar-next-month')\n        ButtonDomNode?.focus?.();\n    },\n    [currFocusDescriber, latestInteractionRegion, nextMonthBtnRef],\n  );\n  const handleNextYearRef = useCallback(\n    (ButtonDomNode: HTMLButtonElement) => {\n      nextYearBtnRef.current = ButtonDomNode;\n      if (latestInteractionRegion === 'calendar-head' && currFocusDescriber === 'calendar-next-year')\n        ButtonDomNode?.focus?.();\n    },\n    [currFocusDescriber, latestInteractionRegion, nextYearBtnRef],\n  );\n\n  return (\n    <StyledHeader>\n      <StyledHeaderButton\n        aria-label=\"previous year\"\n        buttonType=\"raw\"\n        size={BUTTON_SIZES.M}\n        onClick={handlePrevYear}\n        innerRef={handlePrevYearRef}\n        onKeyDown={handlePrevYearKeyDown}\n        onFocus={onPrevYearFocus}\n        tabIndex={isControllerOnly ? -1 : 1}\n        data-testid={ControlledDateTimePickerDatatestid.CALENDAR.PREV_YEAR}\n        type=\"button\"\n      >\n        <ChevronDoubleLeft height={14} width={14} fill=\"#25292f\" />\n      </StyledHeaderButton>\n      <StyledHeaderButton\n        autoFocus={autoFocusPrevMonthArrow}\n        aria-label=\"previous month\"\n        buttonType=\"raw\"\n        size={BUTTON_SIZES.M}\n        onClick={handlePrevMonth}\n        innerRef={handlePrevMonthRef}\n        onKeyDown={handlePrevMonthKeyDown}\n        onFocus={onPrevMonthFocus}\n        data-testid={ControlledDateTimePickerDatatestid.CALENDAR.PREV_MONTH}\n        type=\"button\"\n        // this is a tabstop for when the calendar is open\n      >\n        <ChevronLeft height={14} width={14} fill=\"#25292f\" />\n      </StyledHeaderButton>\n      <StyledHeaderLabel data-testid={ControlledDateTimePickerDatatestid.CALENDAR.HEADER_LABEL}>\n        {currentFormatedDate}\n      </StyledHeaderLabel>\n      <StyledHeaderButton\n        aria-label=\"next month\"\n        buttonType=\"raw\"\n        size={BUTTON_SIZES.M}\n        onClick={handleNextMonth}\n        innerRef={handleNextMonthRef}\n        onKeyDown={handleNextMonthKeyDown}\n        onFocus={onNextMonthFocus}\n        data-testid={ControlledDateTimePickerDatatestid.CALENDAR.NEXT_MONTH}\n        type=\"button\"\n      >\n        <ChevronRight height={14} width={14} fill=\"#25292f\" />\n      </StyledHeaderButton>\n      <StyledHeaderButton\n        aria-label=\"next year\"\n        buttonType=\"raw\"\n        size={BUTTON_SIZES.M}\n        onClick={handleNextYear}\n        innerRef={handleNextYearRef}\n        onKeyDown={handleNextYearKeyDown}\n        onFocus={onNextYearFocus}\n        data-testid={ControlledDateTimePickerDatatestid.CALENDAR.NEXT_YEAR}\n        type=\"button\"\n      >\n        <ChevronDoubleRight height={14} width={14} fill=\"#25292f\" />\n      </StyledHeaderButton>\n    </StyledHeader>\n  );\n};\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -1,8 +1,8 @@
 import * as React from "react";
-import styled from "styled-components";
-import { css } from "@elliemae/ds-system";
+import { css, styled } from "@elliemae/ds-system";
 import { Grid } from "@elliemae/ds-grid";
 import { DSButtonV2 } from "@elliemae/ds-button";
+import { COMPONENT_NAME, slots } from "../../../exported-related/theming";
 const diagonalLine = css`
   &:before {
     position: absolute;
@@ -41,7 +41,7 @@ const backgroundDateRange = {
     border-radius: 0 50% 50% 0;
   `
 };
-const StyledIconTriggerButton = styled(DSButtonV2)`
+const StyledIconTriggerButton = styled(DSButtonV2, { name: COMPONENT_NAME, slot: slots.PICKER_ICONS.CALENDAR })`
   color: ${({ theme }) => theme.colors.brand["600"]};
   width: 26px;
   height: 26px;
@@ -69,11 +69,11 @@ const StyledHeader = styled.section`
   justify-content: center;
   text-align: center;
   background: ${({ theme }) => theme.colors.neutral["050"]};
-  h3 {
-    font-size: 1rem;
-  }
 `;
-const StyledHeaderButton = styled(DSButtonV2)`
+const StyledHeaderLabel = styled("h3", { name: COMPONENT_NAME, slot: slots.CALENDAR.HEADER_LABEL })`
+  font-size: 1rem;
+`;
+const StyledHeaderButton = styled(DSButtonV2, { name: COMPONENT_NAME, slot: slots.CALENDAR.HEADER_BUTTON })`
   position: relative;
   width: 28px;
   height: 28px;
@@ -97,7 +97,7 @@ const StyledHeaderButton = styled(DSButtonV2)`
 const StyledBody = styled.section`
   padding: ${({ theme }) => theme.space.xxxs};
 `;
-const StyledDayBtn = styled(DSButtonV2)`
+const StyledDayBtn = styled(DSButtonV2, { name: COMPONENT_NAME, slot: slots.CALENDAR.DAY_BUTTON })`
   height: 32px;
   width: 32px;
   border-radius: 50%;
@@ -116,7 +116,10 @@ const StyledDayBtn = styled(DSButtonV2)`
     ${focusBorder}
   }
 `;
-const StyledWeekDaysListWrapper = styled(Grid)`
+const StyledWeekDaysListWrapper = styled(Grid, {
+  name: COMPONENT_NAME,
+  slot: slots.CALENDAR.HEADER_WEEKLY_DAY_LIST
+})`
   font-size: ${({ theme }) => theme.fontSizes.label[400]};
   text-align: center;
   ${({ isHeader, theme }) => isHeader ? `background: ${theme.colors.neutral["050"]}` : ""};
@@ -302,7 +305,7 @@ const StyledWeekDaysHeaderItem = styled.div`
   width: ${({ theme }) => theme.space.s};
   min-width: ${({ theme }) => theme.space.s};
 `;
-const CalendarFooterMessage = styled.footer`
+const CalendarFooterMessage = styled("footer", { name: COMPONENT_NAME, slot: slots.FOOTERS.CALENDAR_TIMEWHEEL })`
   border-top: solid 1px ${({ theme }) => theme.colors.neutral[300]};
   margin: 0 ${({ theme }) => theme.space.xxs2};
   padding: ${({ theme }) => theme.space.xxs2} 0;
@@ -320,6 +323,7 @@ export {
   StyledDayBtn,
   StyledHeader,
   StyledHeaderButton,
+  StyledHeaderLabel,
   StyledIconTriggerButton,
   StyledShadowWrapper,
   StyledWeekDaysHeaderItem,