@elliemae/ds-form-date-time-picker 3.26.0 → 3.26.1-rc.1

package/dist/cjs/parts/TimeInputs/TimeInputs.js

@@ -69,7 +69,8 @@ const TimeInputs = () => {
     ariaCurrentValueForInputs,
     latestInteractionRegion,
     currFocusDescriber,
-    getProps
+    getProps,
+    props: { tabIndex }
   } = (0, import_react.useContext)(import_ControlledDateTimePickerCTX.ControlledDateTimePickerContext);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     import_ds_grid.Grid,
@@ -91,6 +92,7 @@ const TimeInputs = () => {
             onFocus: onHoursFocus,
             onKeyDown: onHoursKeyDown,
             contextRef: hourInputRef,
+            tabIndex,
             placeholder: "HH",
             ariaCurrentValueForInputs,
             autoFocusHourInput,
@@ -109,6 +111,7 @@ const TimeInputs = () => {
             onFocus: onMinutesFocus,
             onKeyDown: onMinutesKeyDown,
             contextRef: minutesInputRef,
+            tabIndex,
             placeholder: "MM",
             ariaCurrentValueForInputs,
             disabled,
@@ -126,6 +129,7 @@ const TimeInputs = () => {
             onFocus: onMeridiemFocus,
             onKeyDown: onMeridiemKeyDown,
             contextRef: meridiemInputRef,
+            tabIndex,
             placeholder: "AM",
             ariaCurrentValueForInputs,
             disabled,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/TimeInputs/TimeInputs.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useContext } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { ControlledDateTimePickerContext } from '../../ControlledDateTimePickerCTX.js';\nimport { HHInput } from './HHInput.js';\nimport { MinutesInput } from './MinutesInput.js';\nimport { MeridiemInput } from './MeridiemInput.js';\nimport { useTimeInputs } from './useTimeInputs.js';\nimport { fixedValues } from '../config.js';\nimport { StyledColonSeparator, StyledSeparator, StyledFocusWithIn } from '../Styleds.js';\n\nexport const TimeInputs = (): JSX.Element => {\n  const {\n    autoFocusHourInput,\n    disabled,\n    onHoursChange,\n    onMinutesChange,\n    onMeridiemChange,\n    onHoursBlur,\n    onMinutesBlur,\n    onMeridiemBlur,\n    onHoursFocus,\n    onMeridiemFocus,\n    onMinutesFocus,\n    onHoursKeyDown,\n    onMinutesKeyDown,\n    onMeridiemKeyDown,\n  } = useTimeInputs();\n\n  // we do this here so HHInput,MinutesInput, MeridiemInput can be pure components memoized via React.memo\n  const {\n    hours,\n    minutes,\n    meridiem,\n    hourInputRef,\n    minutesInputRef,\n    meridiemInputRef,\n    ariaCurrentValueForInputs,\n    latestInteractionRegion,\n    currFocusDescriber,\n    getProps,\n  } = useContext(ControlledDateTimePickerContext);\n\n  return (\n    <Grid\n      cols={[\n        fixedValues.smallInputWidth,\n        fixedValues.separatorWidth,\n        fixedValues.smallInputWidth,\n        fixedValues.separatorWidth,\n        fixedValues.smallInputWidth,\n      ]}\n    >\n      <StyledFocusWithIn>\n        <HHInput\n          value={hours}\n          onChange={onHoursChange}\n          onBlur={onHoursBlur}\n          onFocus={onHoursFocus}\n          onKeyDown={onHoursKeyDown}\n          contextRef={hourInputRef}\n          placeholder=\"HH\"\n          ariaCurrentValueForInputs={ariaCurrentValueForInputs}\n          autoFocusHourInput={autoFocusHourInput}\n          disabled={disabled}\n          isFocused={latestInteractionRegion === 'time-inputs' && currFocusDescriber === 'hour-input'}\n          getProps={getProps}\n        />\n      </StyledFocusWithIn>\n      <StyledColonSeparator alignItems=\"center\">:</StyledColonSeparator>\n      <StyledFocusWithIn>\n        <MinutesInput\n          value={minutes}\n          onChange={onMinutesChange}\n          onBlur={onMinutesBlur}\n          onFocus={onMinutesFocus}\n          onKeyDown={onMinutesKeyDown}\n          contextRef={minutesInputRef}\n          placeholder=\"MM\"\n          ariaCurrentValueForInputs={ariaCurrentValueForInputs}\n          disabled={disabled}\n          isFocused={latestInteractionRegion === 'time-inputs' && currFocusDescriber === 'minute-input'}\n          getProps={getProps}\n        />\n      </StyledFocusWithIn>\n      <StyledSeparator> </StyledSeparator>\n      <StyledFocusWithIn>\n        <MeridiemInput\n          value={meridiem}\n          onChange={onMeridiemChange}\n          onBlur={onMeridiemBlur}\n          onFocus={onMeridiemFocus}\n          onKeyDown={onMeridiemKeyDown}\n          contextRef={meridiemInputRef}\n          placeholder=\"AM\"\n          ariaCurrentValueForInputs={ariaCurrentValueForInputs}\n          disabled={disabled}\n          isFocused={latestInteractionRegion === 'time-inputs' && currFocusDescriber === 'meridiem-input'}\n          getProps={getProps}\n        />\n      </StyledFocusWithIn>\n    </Grid>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD2CnB;AA3CJ,mBAAkC;AAClC,qBAAqB;AACrB,yCAAgD;AAChD,qBAAwB;AACxB,0BAA6B;AAC7B,2BAA8B;AAC9B,2BAA8B;AAC9B,oBAA4B;AAC5B,qBAAyE;AAElE,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,EACF,QAAI,oCAAc;AAGlB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,kEAA+B;AAE9C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM;AAAA,QACJ,0BAAY;AAAA,QACZ,0BAAY;AAAA,QACZ,0BAAY;AAAA,QACZ,0BAAY;AAAA,QACZ,0BAAY;AAAA,MACd;AAAA,MAEA;AAAA,oDAAC,oCACC;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,YACP,UAAU;AAAA,YACV,QAAQ;AAAA,YACR,SAAS;AAAA,YACT,WAAW;AAAA,YACX,YAAY;AAAA,YACZ,aAAY;AAAA,YACZ;AAAA,YACA;AAAA,YACA;AAAA,YACA,WAAW,4BAA4B,iBAAiB,uBAAuB;AAAA,YAC/E;AAAA;AAAA,QACF,GACF;AAAA,QACA,4CAAC,uCAAqB,YAAW,UAAS,eAAC;AAAA,QAC3C,4CAAC,oCACC;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,YACP,UAAU;AAAA,YACV,QAAQ;AAAA,YACR,SAAS;AAAA,YACT,WAAW;AAAA,YACX,YAAY;AAAA,YACZ,aAAY;AAAA,YACZ;AAAA,YACA;AAAA,YACA,WAAW,4BAA4B,iBAAiB,uBAAuB;AAAA,YAC/E;AAAA;AAAA,QACF,GACF;AAAA,QACA,4CAAC,kCAAgB,eAAC;AAAA,QAClB,4CAAC,oCACC;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,YACP,UAAU;AAAA,YACV,QAAQ;AAAA,YACR,SAAS;AAAA,YACT,WAAW;AAAA,YACX,YAAY;AAAA,YACZ,aAAY;AAAA,YACZ;AAAA,YACA;AAAA,YACA,WAAW,4BAA4B,iBAAiB,uBAAuB;AAAA,YAC/E;AAAA;AAAA,QACF,GACF;AAAA;AAAA;AAAA,EACF;AAEJ;",
+  "sourcesContent": ["import React, { useContext } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { ControlledDateTimePickerContext } from '../../ControlledDateTimePickerCTX.js';\nimport { HHInput } from './HHInput.js';\nimport { MinutesInput } from './MinutesInput.js';\nimport { MeridiemInput } from './MeridiemInput.js';\nimport { useTimeInputs } from './useTimeInputs.js';\nimport { fixedValues } from '../config.js';\nimport { StyledColonSeparator, StyledSeparator, StyledFocusWithIn } from '../Styleds.js';\n\nexport const TimeInputs = (): JSX.Element => {\n  const {\n    autoFocusHourInput,\n    disabled,\n    onHoursChange,\n    onMinutesChange,\n    onMeridiemChange,\n    onHoursBlur,\n    onMinutesBlur,\n    onMeridiemBlur,\n    onHoursFocus,\n    onMeridiemFocus,\n    onMinutesFocus,\n    onHoursKeyDown,\n    onMinutesKeyDown,\n    onMeridiemKeyDown,\n  } = useTimeInputs();\n\n  // we do this here so HHInput,MinutesInput, MeridiemInput can be pure components memoized via React.memo\n  const {\n    hours,\n    minutes,\n    meridiem,\n    hourInputRef,\n    minutesInputRef,\n    meridiemInputRef,\n    ariaCurrentValueForInputs,\n    latestInteractionRegion,\n    currFocusDescriber,\n    getProps,\n    props: { tabIndex },\n  } = useContext(ControlledDateTimePickerContext);\n\n  return (\n    <Grid\n      cols={[\n        fixedValues.smallInputWidth,\n        fixedValues.separatorWidth,\n        fixedValues.smallInputWidth,\n        fixedValues.separatorWidth,\n        fixedValues.smallInputWidth,\n      ]}\n    >\n      <StyledFocusWithIn>\n        <HHInput\n          value={hours}\n          onChange={onHoursChange}\n          onBlur={onHoursBlur}\n          onFocus={onHoursFocus}\n          onKeyDown={onHoursKeyDown}\n          contextRef={hourInputRef}\n          tabIndex={tabIndex}\n          placeholder=\"HH\"\n          ariaCurrentValueForInputs={ariaCurrentValueForInputs}\n          autoFocusHourInput={autoFocusHourInput}\n          disabled={disabled}\n          isFocused={latestInteractionRegion === 'time-inputs' && currFocusDescriber === 'hour-input'}\n          getProps={getProps}\n        />\n      </StyledFocusWithIn>\n      <StyledColonSeparator alignItems=\"center\">:</StyledColonSeparator>\n      <StyledFocusWithIn>\n        <MinutesInput\n          value={minutes}\n          onChange={onMinutesChange}\n          onBlur={onMinutesBlur}\n          onFocus={onMinutesFocus}\n          onKeyDown={onMinutesKeyDown}\n          contextRef={minutesInputRef}\n          tabIndex={tabIndex}\n          placeholder=\"MM\"\n          ariaCurrentValueForInputs={ariaCurrentValueForInputs}\n          disabled={disabled}\n          isFocused={latestInteractionRegion === 'time-inputs' && currFocusDescriber === 'minute-input'}\n          getProps={getProps}\n        />\n      </StyledFocusWithIn>\n      <StyledSeparator> </StyledSeparator>\n      <StyledFocusWithIn>\n        <MeridiemInput\n          value={meridiem}\n          onChange={onMeridiemChange}\n          onBlur={onMeridiemBlur}\n          onFocus={onMeridiemFocus}\n          onKeyDown={onMeridiemKeyDown}\n          contextRef={meridiemInputRef}\n          tabIndex={tabIndex}\n          placeholder=\"AM\"\n          ariaCurrentValueForInputs={ariaCurrentValueForInputs}\n          disabled={disabled}\n          isFocused={latestInteractionRegion === 'time-inputs' && currFocusDescriber === 'meridiem-input'}\n          getProps={getProps}\n        />\n      </StyledFocusWithIn>\n    </Grid>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD4CnB;AA5CJ,mBAAkC;AAClC,qBAAqB;AACrB,yCAAgD;AAChD,qBAAwB;AACxB,0BAA6B;AAC7B,2BAA8B;AAC9B,2BAA8B;AAC9B,oBAA4B;AAC5B,qBAAyE;AAElE,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,EACF,QAAI,oCAAc;AAGlB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,EAAE,SAAS;AAAA,EACpB,QAAI,yBAAW,kEAA+B;AAE9C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM;AAAA,QACJ,0BAAY;AAAA,QACZ,0BAAY;AAAA,QACZ,0BAAY;AAAA,QACZ,0BAAY;AAAA,QACZ,0BAAY;AAAA,MACd;AAAA,MAEA;AAAA,oDAAC,oCACC;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,YACP,UAAU;AAAA,YACV,QAAQ;AAAA,YACR,SAAS;AAAA,YACT,WAAW;AAAA,YACX,YAAY;AAAA,YACZ;AAAA,YACA,aAAY;AAAA,YACZ;AAAA,YACA;AAAA,YACA;AAAA,YACA,WAAW,4BAA4B,iBAAiB,uBAAuB;AAAA,YAC/E;AAAA;AAAA,QACF,GACF;AAAA,QACA,4CAAC,uCAAqB,YAAW,UAAS,eAAC;AAAA,QAC3C,4CAAC,oCACC;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,YACP,UAAU;AAAA,YACV,QAAQ;AAAA,YACR,SAAS;AAAA,YACT,WAAW;AAAA,YACX,YAAY;AAAA,YACZ;AAAA,YACA,aAAY;AAAA,YACZ;AAAA,YACA;AAAA,YACA,WAAW,4BAA4B,iBAAiB,uBAAuB;AAAA,YAC/E;AAAA;AAAA,QACF,GACF;AAAA,QACA,4CAAC,kCAAgB,eAAC;AAAA,QAClB,4CAAC,oCACC;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,YACP,UAAU;AAAA,YACV,QAAQ;AAAA,YACR,SAAS;AAAA,YACT,WAAW;AAAA,YACX,YAAY;AAAA,YACZ;AAAA,YACA,aAAY;AAAA,YACZ;AAAA,YACA;AAAA,YACA,WAAW,4BAA4B,iBAAiB,uBAAuB;AAAA,YAC/E;AAAA;AAAA,QACF,GACF;AAAA;AAAA;AAAA,EACF;AAEJ;",
   "names": []
 }

package/dist/cjs/react-desc-prop-types.js

@@ -112,6 +112,7 @@ const propTypes = {
   ).defaultValue("01:00 AM"),
   minutesInterval: import_ds_props_helpers.PropTypes.number.description("increments/decrements of minutes in time related controllers interactions").defaultValue("1"),
   "data-testid": import_ds_props_helpers.PropTypes.string.description("Unique id for tests.").defaultValue(""),
-  ...(0, import_ds_props_helpers.getPropsPerDatatestIdPropTypes)(import_ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid)
+  ...(0, import_ds_props_helpers.getPropsPerDatatestIdPropTypes)(import_ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid),
+  innerRef: import_ds_props_helpers.PropTypes.oneOfType([import_ds_props_helpers.PropTypes.func, import_ds_props_helpers.PropTypes.object]).description("inner ref for the month input")
 };
 //# sourceMappingURL=react-desc-prop-types.js.map

package/dist/cjs/react-desc-prop-types.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/react-desc-prop-types.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-lines */\nimport type { WeakValidationMap } from 'react';\nimport type React from 'react';\nimport {\n  PropTypes,\n  globalAttributesPropTypes,\n  xstyledPropTypes,\n  getPropsPerDatatestIdPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport { ControlledDateTimePickerDatatestid } from './ControlledDateTimePickerDatatestid.js';\n\n// eslint-disable-next-line @typescript-eslint/no-empty-function\nconst noop = (): void => {};\nconst defaultReturnFalse = (): false => false;\nexport declare namespace DSControlledDateTimePickerT {\n  type DataTestIdType = typeof ControlledDateTimePickerDatatestid;\n  // typescript type that rapresents the union of all the values for ControlledDateTimePickerDatatestid\n  export type FlatDataTestIdValues = {\n    [K in keyof DataTestIdType]: DataTestIdType[K] extends Record<string, unknown>\n      ? DataTestIdType[K][keyof DataTestIdType[K]] // this is only 1 level deep, but it's enough for our needs right now\n      : // can be extended to more levels if needed as follows:\n        // ? DataTestIdType[K][keyof DataTestIdType[K]] extends Record<string, unknown>\n        //   ? DataTestIdType[K][keyof DataTestIdType[K]][keyof DataTestIdType[K][keyof DataTestIdType[K]]]\n        //   : DataTestIdType[K][keyof DataTestIdType[K]]\n        DataTestIdType[K];\n  }[keyof DataTestIdType];\n\n  export type AriaAndDataPropsPerDataTestId = {\n    [key in FlatDataTestIdValues]?: AriaAndDataPropsOrPropsGetter;\n  };\n\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  export type AppOnInputChange = (\n    val: string,\n    e: OnInternalValuesChangeEvent,\n    metaInfo: InternalInputsChangeMetaInfo,\n  ) => void;\n\n  /* ------------------------ ------------------ ------------------------*/\n  /* ------------------------ DATE CONFIGURATION ------------------------*/\n  /* ------------------------ ------------------ ------------------------*/\n  export interface DefaultDateProps {\n    onMonthChange: AppOnInputChange;\n    onDayChange: AppOnInputChange;\n    onYearChange: AppOnInputChange;\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 extends AriaAndDataPropsPerDataTestId {\n    emptyPickerStartingMonth?: string;\n    onCalendarOpenFocusedDay?: string;\n    pickerFooterMsg?: string;\n    innerRef?:\n      | React.MutableRefObject<HTMLInputElement | HTMLButtonElement | null>\n      | ((ref: HTMLInputElement | HTMLButtonElement | null) => void);\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: AppOnInputChange;\n    onMinuteChange: AppOnInputChange;\n    onMeridiemChange: AppOnInputChange;\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 extends AriaAndDataPropsPerDataTestId {\n    pickerFooterMsg?: string;\n    onTimeWheelOpenStartingTime?: string;\n    innerRef?:\n      | React.MutableRefObject<HTMLInputElement | HTMLButtonElement | null>\n      | ((ref: HTMLInputElement | HTMLButtonElement | null) => void);\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 = AriaAndDataPropsPerDataTestId & 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  ...getPropsPerDatatestIdPropTypes(ControlledDateTimePickerDatatestid),\n} as WeakValidationMap<unknown>;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,8BAKO;AACP,gDAAmD;AAGnD,MAAM,OAAO,MAAY;AAAC;AAC1B,MAAM,qBAAqB,MAAa;AAgKjC,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,GAAG;AAAA,EACH,GAAG;AAAA,EACH,MAAM,kCAAU,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,kCAAU,KAAK,YAAY,qCAAqC,EAAE,aAAa,KAAK;AAAA,EAC9F,aAAa,kCAAU,KAAK,YAAY,kCAAkC,EAAE,aAAa,KAAK;AAAA,EAC9F,UAAU,kCAAU,OAAO,YAAY,iEAAiE;AAAA,EACxG,MAAM,kCAAU,OAAO,YAAY,4DAA4D;AAAA,EAC/F,MAAM,kCAAU,OAAO,YAAY,4DAA4D;AAAA,EAC/F,cAAc,kCAAU,KAAK,YAAY,2CAA2C;AAAA,EACpF,cAAc,kCAAU,KAAK,YAAY,2CAA2C;AAAA,EACpF,kBAAkB,kCAAU,KAAK,YAAY,+CAA+C;AAAA,EAC5F,eAAe,kCAAU,KAAK,YAAY,mDAAmD;AAAA,EAC7F,aAAa,kCAAU,KAAK,YAAY,iDAAiD;AAAA,EACzF,cAAc,kCAAU,KAAK,YAAY,kDAAkD;AAAA,EAC3F,cAAc,kCAAU,KAAK,YAAY,kDAAkD;AAAA,EAC3F,gBAAgB,kCAAU,KAAK,YAAY,oDAAoD;AAAA,EAC/F,kBAAkB,kCAAU,KAAK,YAAY,sDAAsD;AAAA,EACnG,kBAAkB,kCAAU,KAAK;AAAA,IAC/B;AAAA,EACF;AAAA,EACA,oBAAoB,kCAAU,KAAK;AAAA,IACjC;AAAA,EACF;AAAA,EACA,mBAAmB,kCAAU,KAAK;AAAA,IAChC;AAAA,EACF;AAAA,EACA,0BAA0B,kCAAU,OAAO;AAAA,IACzC;AAAA,EACF;AAAA,EACA,0BAA0B,kCAAU,OACjC,YAAY,oGAAoG,EAChH,aAAa,qDAAqD;AAAA,EACrE,6BAA6B,kCAAU,OACpC;AAAA,IACC;AAAA,EACF,EACC,aAAa,UAAU;AAAA,EAC1B,iBAAiB,kCAAU,OACxB,YAAY,2EAA2E,EACvF,aAAa,GAAG;AAAA,EACnB,eAAe,kCAAU,OAAO,YAAY,sBAAsB,EAAE,aAAa,EAAE;AAAA,EACnF,OAAG,wDAA+B,4EAAkC;AACtE;",
+  "sourcesContent": ["/* eslint-disable max-lines */\nimport type { WeakValidationMap } from 'react';\nimport type React from 'react';\nimport {\n  PropTypes,\n  globalAttributesPropTypes,\n  xstyledPropTypes,\n  getPropsPerDatatestIdPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport { ControlledDateTimePickerDatatestid } from './ControlledDateTimePickerDatatestid.js';\n\n// eslint-disable-next-line @typescript-eslint/no-empty-function\nconst noop = (): void => {};\nconst defaultReturnFalse = (): false => false;\nexport declare namespace DSControlledDateTimePickerT {\n  type DataTestIdType = typeof ControlledDateTimePickerDatatestid;\n  // typescript type that rapresents the union of all the values for ControlledDateTimePickerDatatestid\n  export type FlatDataTestIdValues = {\n    [K in keyof DataTestIdType]: DataTestIdType[K] extends Record<string, unknown>\n      ? DataTestIdType[K][keyof DataTestIdType[K]] // this is only 1 level deep, but it's enough for our needs right now\n      : // can be extended to more levels if needed as follows:\n        // ? DataTestIdType[K][keyof DataTestIdType[K]] extends Record<string, unknown>\n        //   ? DataTestIdType[K][keyof DataTestIdType[K]][keyof DataTestIdType[K][keyof DataTestIdType[K]]]\n        //   : DataTestIdType[K][keyof DataTestIdType[K]]\n        DataTestIdType[K];\n  }[keyof DataTestIdType];\n\n  export type AriaAndDataPropsPerDataTestId = {\n    [key in FlatDataTestIdValues]?: AriaAndDataPropsOrPropsGetter;\n  };\n\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  export type AppOnInputChange = (\n    val: string,\n    e: OnInternalValuesChangeEvent,\n    metaInfo: InternalInputsChangeMetaInfo,\n  ) => void;\n\n  /* ------------------------ ------------------ ------------------------*/\n  /* ------------------------ DATE CONFIGURATION ------------------------*/\n  /* ------------------------ ------------------ ------------------------*/\n  export interface DefaultDateProps {\n    onMonthChange: AppOnInputChange;\n    onDayChange: AppOnInputChange;\n    onYearChange: AppOnInputChange;\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 extends AriaAndDataPropsPerDataTestId {\n    emptyPickerStartingMonth?: string;\n    onCalendarOpenFocusedDay?: string;\n    pickerFooterMsg?: string;\n    innerRef?:\n      | React.MutableRefObject<HTMLInputElement | HTMLButtonElement | null>\n      | ((ref: HTMLInputElement | HTMLButtonElement | null) => void);\n    tabIndex?: WCAGTabIndex;\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: AppOnInputChange;\n    onMinuteChange: AppOnInputChange;\n    onMeridiemChange: AppOnInputChange;\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 extends AriaAndDataPropsPerDataTestId {\n    pickerFooterMsg?: string;\n    onTimeWheelOpenStartingTime?: string;\n    innerRef?:\n      | React.MutableRefObject<HTMLInputElement | HTMLButtonElement | null>\n      | ((ref: HTMLInputElement | HTMLButtonElement | null) => void);\n    tabIndex?: WCAGTabIndex;\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 = AriaAndDataPropsPerDataTestId & 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  ...getPropsPerDatatestIdPropTypes(ControlledDateTimePickerDatatestid),\n  innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).description('inner ref for the month input'),\n} as WeakValidationMap<unknown>;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,8BAKO;AACP,gDAAmD;AAGnD,MAAM,OAAO,MAAY;AAAC;AAC1B,MAAM,qBAAqB,MAAa;AAkKjC,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,GAAG;AAAA,EACH,GAAG;AAAA,EACH,MAAM,kCAAU,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,kCAAU,KAAK,YAAY,qCAAqC,EAAE,aAAa,KAAK;AAAA,EAC9F,aAAa,kCAAU,KAAK,YAAY,kCAAkC,EAAE,aAAa,KAAK;AAAA,EAC9F,UAAU,kCAAU,OAAO,YAAY,iEAAiE;AAAA,EACxG,MAAM,kCAAU,OAAO,YAAY,4DAA4D;AAAA,EAC/F,MAAM,kCAAU,OAAO,YAAY,4DAA4D;AAAA,EAC/F,cAAc,kCAAU,KAAK,YAAY,2CAA2C;AAAA,EACpF,cAAc,kCAAU,KAAK,YAAY,2CAA2C;AAAA,EACpF,kBAAkB,kCAAU,KAAK,YAAY,+CAA+C;AAAA,EAC5F,eAAe,kCAAU,KAAK,YAAY,mDAAmD;AAAA,EAC7F,aAAa,kCAAU,KAAK,YAAY,iDAAiD;AAAA,EACzF,cAAc,kCAAU,KAAK,YAAY,kDAAkD;AAAA,EAC3F,cAAc,kCAAU,KAAK,YAAY,kDAAkD;AAAA,EAC3F,gBAAgB,kCAAU,KAAK,YAAY,oDAAoD;AAAA,EAC/F,kBAAkB,kCAAU,KAAK,YAAY,sDAAsD;AAAA,EACnG,kBAAkB,kCAAU,KAAK;AAAA,IAC/B;AAAA,EACF;AAAA,EACA,oBAAoB,kCAAU,KAAK;AAAA,IACjC;AAAA,EACF;AAAA,EACA,mBAAmB,kCAAU,KAAK;AAAA,IAChC;AAAA,EACF;AAAA,EACA,0BAA0B,kCAAU,OAAO;AAAA,IACzC;AAAA,EACF;AAAA,EACA,0BAA0B,kCAAU,OACjC,YAAY,oGAAoG,EAChH,aAAa,qDAAqD;AAAA,EACrE,6BAA6B,kCAAU,OACpC;AAAA,IACC;AAAA,EACF,EACC,aAAa,UAAU;AAAA,EAC1B,iBAAiB,kCAAU,OACxB,YAAY,2EAA2E,EACvF,aAAa,GAAG;AAAA,EACnB,eAAe,kCAAU,OAAO,YAAY,sBAAsB,EAAE,aAAa,EAAE;AAAA,EACnF,OAAG,wDAA+B,4EAAkC;AAAA,EACpE,UAAU,kCAAU,UAAU,CAAC,kCAAU,MAAM,kCAAU,MAAM,CAAC,EAAE,YAAY,+BAA+B;AAC/G;",
   "names": []
 }

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

@@ -12,7 +12,12 @@ const ClearButton = () => {
   const styledsAttrs = {
     shouldDisplay: withClearBtn
   };
-  const { latestInteractionRegion, currFocusDescriber, getProps } = useContext(ControlledDateTimePickerContext);
+  const {
+    latestInteractionRegion,
+    currFocusDescriber,
+    getProps,
+    props: { tabIndex }
+  } = useContext(ControlledDateTimePickerContext);
   return /* @__PURE__ */ jsx(
     StyledClearButton,
     {
@@ -25,6 +30,7 @@ const ClearButton = () => {
         if (latestInteractionRegion === "clear-btn" && currFocusDescriber === "clear-btn")
           DomElem?.focus?.();
       },
+      tabIndex,
       onClick: onClearClick,
       onKeyDown: onClearButtonKeyDown,
       type: "button",

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 { BUTTON_SIZES } from '@elliemae/ds-button-v2';\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, getProps } = 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      getOwnerProps={getProps}\n      {...styledsAttrs}\n    >\n      <CloseMedium color={['brand-primary', '600']} />\n    </StyledClearButton>\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACgCjB;AA/BN,SAAgB,kBAAkB;AAClC,SAAS,mBAAmB;AAC5B,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,oBAAoB,SAAS,IAAI,WAAW,+BAA+B;AAE5G,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,MACL,eAAe;AAAA,MACd,GAAG;AAAA,MAEJ,8BAAC,eAAY,OAAO,CAAC,iBAAiB,KAAK,GAAG;AAAA;AAAA,EAChD;AAEJ;",
+  "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 { BUTTON_SIZES } from '@elliemae/ds-button-v2';\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 {\n    latestInteractionRegion,\n    currFocusDescriber,\n    getProps,\n    props: { tabIndex },\n  } = 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      tabIndex={tabIndex}\n      onClick={onClearClick}\n      onKeyDown={onClearButtonKeyDown}\n      type=\"button\"\n      getOwnerProps={getProps}\n      {...styledsAttrs}\n    >\n      <CloseMedium color={['brand-primary', '600']} />\n    </StyledClearButton>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACsCjB;AArCN,SAAgB,kBAAkB;AAClC,SAAS,mBAAmB;AAC5B,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;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,EAAE,SAAS;AAAA,EACpB,IAAI,WAAW,+BAA+B;AAE9C,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;AAAA,MACA,SAAS;AAAA,MACT,WAAW;AAAA,MACX,MAAK;AAAA,MACL,eAAe;AAAA,MACd,GAAG;AAAA,MAEJ,8BAAC,eAAY,OAAO,CAAC,iBAAiB,KAAK,GAAG;AAAA;AAAA,EAChD;AAEJ;",
   "names": []
 }

package/dist/esm/parts/ControlledDateTimePickerContent.js

@@ -9,6 +9,7 @@ import { TimeInputs } from "./TimeInputs/TimeInputs.js";
 import { PickersIcons } from "./Pickers/PickersIcons.js";
 import { ClearButton } from "./ClearButton/ClearButton.js";
 import { ControlledDateTimePickerDatatestid } from "../ControlledDateTimePickerDatatestid.js";
+import { omit } from "lodash";
 const ControlledDateTimePickerContent = () => {
   const {
     props: { hasError, disabled },
@@ -54,7 +55,7 @@ const ControlledDateTimePickerContent = () => {
       "data-testid": ControlledDateTimePickerDatatestid.CONTAINER,
       getOwnerProps: getProps,
       ...styledsAttrs,
-      ...globalAttrs,
+      ...omit(globalAttrs, "tabIndex", "autoFocus"),
       ...xstyledAttrs,
       children: [
         hideDate ? null : /* @__PURE__ */ jsx(DateInputs, {}),

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.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: { hasError, disabled },\n    getProps,\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        getOwnerProps={getProps}\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;AC4CnB,mBAkBuB,KAGjB,YArBN;AA3CJ,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,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,MAChD,eAAe;AAAA,MACd,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;",
+  "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.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';\nimport { omit } from 'lodash';\n\nexport const ControlledDateTimePickerContent = (): JSX.Element => {\n  const {\n    props: { hasError, disabled },\n    getProps,\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        getOwnerProps={getProps}\n        {...styledsAttrs}\n        {...omit(globalAttrs, 'tabIndex', 'autoFocus')}\n        {...xstyledAttrs}\n      >\n        {hideDate ? null : <DateInputs />}\n        {hideTime ? null : <TimeInputs />}\n        {withAnyRightController ? (\n          <Grid cols={rightControlCols}>\n            {shouldPreserveClearableSpace ? <ClearButton /> : null}\n            {withAnyPicker ? <PickersIcons /> : null}\n          </Grid>\n        ) : null}\n      </StyledInputsWrapperGrid>\n    </>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;AC6CnB,mBAkBuB,KAGjB,YArBN;AA5CJ,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;AACnD,SAAS,YAAY;AAEd,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,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,MAChD,eAAe;AAAA,MACd,GAAG;AAAA,MACH,GAAG,KAAK,aAAa,YAAY,WAAW;AAAA,MAC5C,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": []
 }

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

@@ -19,6 +19,7 @@ const DDInput = React2.memo(
     value,
     disabled,
     contextRef,
+    tabIndex,
     placeholder,
     ariaCurrentValueForInputs,
     isFocused,
@@ -47,6 +48,7 @@ const DDInput = React2.memo(
           if (isFocused)
             DomElem?.focus?.();
         },
+        tabIndex,
         placeholder,
         "aria-label": `day input field, ${ariaCurrentValueForInputs}`,
         "data-testid": ControlledDateTimePickerDatatestid.DATE_INPUTS.DAY,

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.js';\nimport { StyledDateInput } from '../Styleds.js';\nimport type { DSControlledDateTimePickerInternalsT } from '../../sharedTypes.js';\nimport type { ControlledDateTimePickerContextT } from '../../config/useControlledDateTimePicker.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  getProps: ControlledDateTimePickerContextT['getProps'];\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    getProps,\n  }: DDInputsPropsT): JSX.Element => {\n    const validateOnChange = useCallback(\n      (e: React.ChangeEvent<HTMLInputElement>) => {\n        if (isInvalidDay(e?.currentTarget?.value)) {\n          e.preventDefault();\n          return;\n        }\n        onChange(e);\n      },\n      [onChange],\n    );\n    return (\n      <StyledDateInput\n        onChange={validateOnChange}\n        onBlur={onBlur}\n        onFocus={onFocus}\n        onKeyDown={onKeyDown}\n        value={value}\n        innerRef={(DomElem: HTMLInputElement) => {\n          (contextRef as React.MutableRefObject<HTMLInputElement>).current = DomElem;\n          if (isFocused) DomElem?.focus?.();\n        }}\n        placeholder={placeholder}\n        aria-label={`day input field, ${ariaCurrentValueForInputs}`}\n        data-testid={ControlledDateTimePickerDatatestid.DATE_INPUTS.DAY}\n        disabled={disabled}\n        aria-disabled={disabled}\n        getOwnerProps={getProps}\n      />\n    );\n  },\n);\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACmDjB;AAnDN,OAAOA,UAAS,mBAAmB;AACnC,SAAS,0CAA0C;AACnD,SAAS,uBAAuB;AAIhC,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,UAAU,CAAC,YAA8B;AACvC,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,QACf,eAAe;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 { StyledDateInput } from '../Styleds.js';\nimport type { DSControlledDateTimePickerInternalsT } from '../../sharedTypes.js';\nimport type { ControlledDateTimePickerContextT } from '../../config/useControlledDateTimePicker.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  tabIndex?: WCAGTabIndex;\n  isFocused: boolean;\n  getProps: ControlledDateTimePickerContextT['getProps'];\n}\nexport const DDInput = React.memo(\n  ({\n    onChange,\n    onBlur,\n    onFocus,\n    onKeyDown,\n    value,\n    disabled,\n    contextRef,\n    tabIndex,\n    placeholder,\n    ariaCurrentValueForInputs,\n    isFocused,\n    getProps,\n  }: DDInputsPropsT): JSX.Element => {\n    const validateOnChange = useCallback(\n      (e: React.ChangeEvent<HTMLInputElement>) => {\n        if (isInvalidDay(e?.currentTarget?.value)) {\n          e.preventDefault();\n          return;\n        }\n        onChange(e);\n      },\n      [onChange],\n    );\n    return (\n      <StyledDateInput\n        onChange={validateOnChange}\n        onBlur={onBlur}\n        onFocus={onFocus}\n        onKeyDown={onKeyDown}\n        value={value}\n        innerRef={(DomElem: HTMLInputElement) => {\n          (contextRef as React.MutableRefObject<HTMLInputElement>).current = DomElem;\n          if (isFocused) DomElem?.focus?.();\n        }}\n        tabIndex={tabIndex}\n        placeholder={placeholder}\n        aria-label={`day input field, ${ariaCurrentValueForInputs}`}\n        data-testid={ControlledDateTimePickerDatatestid.DATE_INPUTS.DAY}\n        disabled={disabled}\n        aria-disabled={disabled}\n        getOwnerProps={getProps}\n      />\n    );\n  },\n);\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACqDjB;AArDN,OAAOA,UAAS,mBAAmB;AACnC,SAAS,0CAA0C;AACnD,SAAS,uBAAuB;AAIhC,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;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,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,UAAU,CAAC,YAA8B;AACvC,UAAC,WAAwD,UAAU;AACnE,cAAI;AAAW,qBAAS,QAAQ;AAAA,QAClC;AAAA,QACA;AAAA,QACA;AAAA,QACA,cAAY,oBAAoB;AAAA,QAChC,eAAa,mCAAmC,YAAY;AAAA,QAC5D;AAAA,QACA,iBAAe;AAAA,QACf,eAAe;AAAA;AAAA,IACjB;AAAA,EAEJ;AACF;",
   "names": ["React"]
 }

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

@@ -37,7 +37,8 @@ const DateInputs = () => {
     ariaCurrentValueForInputs,
     latestInteractionRegion,
     currFocusDescriber,
-    getProps
+    getProps,
+    props: { tabIndex }
   } = useContext(ControlledDateTimePickerContext);
   return /* @__PURE__ */ jsxs(
     Grid,
@@ -60,6 +61,7 @@ const DateInputs = () => {
             value: month,
             contextRef: monthInputRef,
             innerRef: innerRefMonthInput,
+            tabIndex,
             autoFocusMonthInput,
             placeholder: "MM",
             ariaCurrentValueForInputs,
@@ -78,6 +80,7 @@ const DateInputs = () => {
             onKeyDown: onDayKeyDown,
             value: day,
             contextRef: dayInputRef,
+            tabIndex,
             placeholder: "DD",
             ariaCurrentValueForInputs,
             disabled,
@@ -95,6 +98,7 @@ const DateInputs = () => {
             onKeyDown: onYearKeyDown,
             value: year,
             contextRef: yearInputRef,
+            tabIndex,
             placeholder: "YYYY",
             ariaCurrentValueForInputs,
             disabled,

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';\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    getProps,\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          getProps={getProps}\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          getProps={getProps}\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          getProps={getProps}\n        />\n      </StyledFocusWithIn>\n    </Grid>\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;AC2CnB,SAUI,KAVJ;AA3CJ,SAAgB,kBAAkB;AAClC,SAAS,YAAY;AACrB,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;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,YAC/E;AAAA;AAAA,QACF,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;AAAA;AAAA,QACF,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;AAAA;AAAA,QACF,GACF;AAAA;AAAA;AAAA,EACF;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\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    getProps,\n    props: { tabIndex },\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          tabIndex={tabIndex}\n          autoFocusMonthInput={autoFocusMonthInput}\n          placeholder=\"MM\"\n          ariaCurrentValueForInputs={ariaCurrentValueForInputs}\n          disabled={disabled}\n          isFocused={latestInteractionRegion === 'date-inputs' && currFocusDescriber === 'month-input'}\n          getProps={getProps}\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          tabIndex={tabIndex}\n          placeholder=\"DD\"\n          ariaCurrentValueForInputs={ariaCurrentValueForInputs}\n          disabled={disabled}\n          isFocused={latestInteractionRegion === 'date-inputs' && currFocusDescriber === 'day-input'}\n          getProps={getProps}\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          tabIndex={tabIndex}\n          placeholder=\"YYYY\"\n          ariaCurrentValueForInputs={ariaCurrentValueForInputs}\n          disabled={disabled}\n          isFocused={latestInteractionRegion === 'date-inputs' && currFocusDescriber === 'year-input'}\n          getProps={getProps}\n        />\n      </StyledFocusWithIn>\n    </Grid>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;AC4CnB,SAUI,KAVJ;AA5CJ,SAAgB,kBAAkB;AAClC,SAAS,YAAY;AACrB,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,IACA,OAAO,EAAE,SAAS;AAAA,EACpB,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;AAAA,YACA,aAAY;AAAA,YACZ;AAAA,YACA;AAAA,YACA,WAAW,4BAA4B,iBAAiB,uBAAuB;AAAA,YAC/E;AAAA;AAAA,QACF,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;AAAA,YACA,aAAY;AAAA,YACZ;AAAA,YACA;AAAA,YACA,WAAW,4BAA4B,iBAAiB,uBAAuB;AAAA,YAC/E;AAAA;AAAA,QACF,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;AAAA,YACA,aAAY;AAAA,YACZ;AAAA,YACA;AAAA,YACA,WAAW,4BAA4B,iBAAiB,uBAAuB;AAAA,YAC/E;AAAA;AAAA,QACF,GACF;AAAA;AAAA;AAAA,EACF;AAEJ;",
   "names": []
 }

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

@@ -22,6 +22,7 @@ const MMInput = React2.memo(
     placeholder,
     contextRef,
     innerRef,
+    tabIndex,
     autoFocusMonthInput,
     ariaCurrentValueForInputs,
     isFocused,
@@ -61,6 +62,7 @@ const MMInput = React2.memo(
         onKeyDown,
         value,
         innerRef: currentRef,
+        tabIndex,
         placeholder,
         "aria-label": `month input field, ${ariaCurrentValueForInputs}`,
         "data-testid": ControlledDateTimePickerDatatestid.DATE_INPUTS.MONTH,

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 { ControlledDateTimePickerDatatestid } from '../../ControlledDateTimePickerDatatestid.js';\nimport { StyledMonthInput } from '../Styleds.js';\nimport type { DSControlledDateTimePickerInternalsT } from '../../sharedTypes.js';\nimport type { ControlledDateTimePickerContextT } from '../../config/useControlledDateTimePicker.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?:\n    | React.MutableRefObject<HTMLInputElement | HTMLButtonElement | null>\n    | ((ref: HTMLInputElement | HTMLButtonElement | null) => void);\n  getProps: ControlledDateTimePickerContextT['getProps'];\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    getProps,\n  }: MMInputsPropsT): JSX.Element => {\n    const validateOnChange = useCallback(\n      (e: React.ChangeEvent<HTMLInputElement>) => {\n        if (isInvalidMonth(e?.target?.value)) {\n          e.preventDefault();\n          return;\n        }\n        onChange(e);\n      },\n      [onChange],\n    );\n\n    const handleRef = useCallback(\n      (DomElem: HTMLInputElement) => {\n        (contextRef as React.MutableRefObject<HTMLInputElement>).current = DomElem;\n        if (isFocused) DomElem?.focus?.();\n      },\n      [contextRef, isFocused],\n    );\n\n    const currentRef = useMemo(() => {\n      if (innerRef) {\n        return setMultipleRefs([handleRef, innerRef]);\n      }\n      return handleRef;\n    }, [handleRef, innerRef]);\n\n    return (\n      <StyledMonthInput\n        autoFocus={autoFocusMonthInput}\n        onChange={validateOnChange}\n        onBlur={onBlur}\n        onFocus={onFocus}\n        onKeyDown={onKeyDown}\n        value={value}\n        innerRef={currentRef}\n        placeholder={placeholder}\n        aria-label={`month input field, ${ariaCurrentValueForInputs}`}\n        data-testid={ControlledDateTimePickerDatatestid.DATE_INPUTS.MONTH}\n        disabled={disabled}\n        aria-disabled={disabled}\n        getOwnerProps={getProps}\n      />\n    );\n  },\n);\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACyEjB;AAzEN,OAAOA,UAAS,aAAa,eAAe;AAC5C,SAAS,uBAAuB;AAChC,SAAS,0CAA0C;AACnD,SAAS,wBAAwB;AAIjC,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;AAkBO,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,UAAU;AAAA,QACV;AAAA,QACA,cAAY,sBAAsB;AAAA,QAClC,eAAa,mCAAmC,YAAY;AAAA,QAC5D;AAAA,QACA,iBAAe;AAAA,QACf,eAAe;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 { ControlledDateTimePickerDatatestid } from '../../ControlledDateTimePickerDatatestid.js';\nimport { StyledMonthInput } from '../Styleds.js';\nimport type { DSControlledDateTimePickerInternalsT } from '../../sharedTypes.js';\nimport type { ControlledDateTimePickerContextT } from '../../config/useControlledDateTimePicker.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?:\n    | React.MutableRefObject<HTMLInputElement | HTMLButtonElement | null>\n    | ((ref: HTMLInputElement | HTMLButtonElement | null) => void);\n  tabIndex?: WCAGTabIndex;\n  getProps: ControlledDateTimePickerContextT['getProps'];\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    tabIndex,\n    autoFocusMonthInput,\n    ariaCurrentValueForInputs,\n    isFocused,\n    getProps,\n  }: MMInputsPropsT): JSX.Element => {\n    const validateOnChange = useCallback(\n      (e: React.ChangeEvent<HTMLInputElement>) => {\n        if (isInvalidMonth(e?.target?.value)) {\n          e.preventDefault();\n          return;\n        }\n        onChange(e);\n      },\n      [onChange],\n    );\n\n    const handleRef = useCallback(\n      (DomElem: HTMLInputElement) => {\n        (contextRef as React.MutableRefObject<HTMLInputElement>).current = DomElem;\n        if (isFocused) DomElem?.focus?.();\n      },\n      [contextRef, isFocused],\n    );\n\n    const currentRef = useMemo(() => {\n      if (innerRef) {\n        return setMultipleRefs([handleRef, innerRef]);\n      }\n      return handleRef;\n    }, [handleRef, innerRef]);\n\n    return (\n      <StyledMonthInput\n        autoFocus={autoFocusMonthInput}\n        onChange={validateOnChange}\n        onBlur={onBlur}\n        onFocus={onFocus}\n        onKeyDown={onKeyDown}\n        value={value}\n        innerRef={currentRef}\n        tabIndex={tabIndex}\n        placeholder={placeholder}\n        aria-label={`month input field, ${ariaCurrentValueForInputs}`}\n        data-testid={ControlledDateTimePickerDatatestid.DATE_INPUTS.MONTH}\n        disabled={disabled}\n        aria-disabled={disabled}\n        getOwnerProps={getProps}\n      />\n    );\n  },\n);\n"],
+  "mappings": "AAAA,YAAY,WAAW;AC2EjB;AA3EN,OAAOA,UAAS,aAAa,eAAe;AAC5C,SAAS,uBAAuB;AAChC,SAAS,0CAA0C;AACnD,SAAS,wBAAwB;AAIjC,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;AAmBO,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,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,UAAU;AAAA,QACV;AAAA,QACA;AAAA,QACA,cAAY,sBAAsB;AAAA,QAClC,eAAa,mCAAmC,YAAY;AAAA,QAC5D;AAAA,QACA,iBAAe;AAAA,QACf,eAAe;AAAA;AAAA,IACjB;AAAA,EAEJ;AACF;",
   "names": ["React"]
 }

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

@@ -20,6 +20,7 @@ const YYYYInput = React2.memo(
     disabled,
     placeholder,
     contextRef,
+    tabIndex,
     ariaCurrentValueForInputs,
     isFocused,
     getProps
@@ -47,6 +48,7 @@ const YYYYInput = React2.memo(
           if (isFocused)
             DomElem?.focus?.();
         },
+        tabIndex,
         "data-testid": ControlledDateTimePickerDatatestid.DATE_INPUTS.YEAR,
         placeholder,
         "aria-label": `year input field, ${ariaCurrentValueForInputs}`,

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 { StyledYearInput } from '../Styleds.js';\nimport type { DSControlledDateTimePickerInternalsT } from '../../sharedTypes.js';\nimport type { ControlledDateTimePickerContextT } from '../../config/useControlledDateTimePicker.js';\nimport { ControlledDateTimePickerDatatestid } from '../../ControlledDateTimePickerDatatestid.js';\nconst regExpNumbers = /^[0-9]+$/;\nconst isInvalidYear = (year: string) => {\n  if (year === '') return false;\n  const numberOnly = regExpNumbers.test(year);\n  return year.length > 4 || !numberOnly || Number.parseInt(year, 10) > 9999;\n};\n\ninterface YYYYInputsPropsT {\n  onChange: DSControlledDateTimePickerInternalsT.OnChangeFunc;\n  onBlur: DSControlledDateTimePickerInternalsT.OnBlurFunc;\n  onFocus: DSControlledDateTimePickerInternalsT.OnFocusFunc;\n  onKeyDown: DSControlledDateTimePickerInternalsT.OnKeyDown;\n  value: string;\n  disabled: boolean;\n  contextRef: React.MutableRefObject<HTMLInputElement | null>;\n  placeholder: string;\n  ariaCurrentValueForInputs: string;\n  isFocused: boolean;\n  getProps: ControlledDateTimePickerContextT['getProps'];\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    getProps,\n  }: YYYYInputsPropsT): JSX.Element => {\n    const validateOnChange = useCallback(\n      (e: React.ChangeEvent<HTMLInputElement>) => {\n        if (isInvalidYear(e?.currentTarget?.value)) {\n          e.preventDefault();\n          return;\n        }\n        onChange(e);\n      },\n      [onChange],\n    );\n    return (\n      <StyledYearInput\n        onChange={validateOnChange}\n        onBlur={onBlur}\n        onFocus={onFocus}\n        onKeyDown={onKeyDown}\n        value={value}\n        innerRef={(DomElem: HTMLInputElement) => {\n          (contextRef as React.MutableRefObject<HTMLInputElement>).current = DomElem;\n          if (isFocused) DomElem?.focus?.();\n        }}\n        data-testid={ControlledDateTimePickerDatatestid.DATE_INPUTS.YEAR}\n        placeholder={placeholder}\n        aria-label={`year input field, ${ariaCurrentValueForInputs}`}\n        disabled={disabled}\n        aria-disabled={disabled}\n        getOwnerProps={getProps}\n      />\n    );\n  },\n);\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACkDjB;AAlDN,OAAOA,UAAS,mBAAmB;AACnC,SAAS,uBAAuB;AAGhC,SAAS,0CAA0C;AACnD,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,UAAU,CAAC,YAA8B;AACvC,UAAC,WAAwD,UAAU;AACnE,cAAI;AAAW,qBAAS,QAAQ;AAAA,QAClC;AAAA,QACA,eAAa,mCAAmC,YAAY;AAAA,QAC5D;AAAA,QACA,cAAY,qBAAqB;AAAA,QACjC;AAAA,QACA,iBAAe;AAAA,QACf,eAAe;AAAA;AAAA,IACjB;AAAA,EAEJ;AACF;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback } from 'react';\nimport { StyledYearInput } from '../Styleds.js';\nimport type { DSControlledDateTimePickerInternalsT } from '../../sharedTypes.js';\nimport type { ControlledDateTimePickerContextT } from '../../config/useControlledDateTimePicker.js';\nimport { ControlledDateTimePickerDatatestid } from '../../ControlledDateTimePickerDatatestid.js';\nconst regExpNumbers = /^[0-9]+$/;\nconst isInvalidYear = (year: string) => {\n  if (year === '') return false;\n  const numberOnly = regExpNumbers.test(year);\n  return year.length > 4 || !numberOnly || Number.parseInt(year, 10) > 9999;\n};\n\ninterface YYYYInputsPropsT {\n  onChange: DSControlledDateTimePickerInternalsT.OnChangeFunc;\n  onBlur: DSControlledDateTimePickerInternalsT.OnBlurFunc;\n  onFocus: DSControlledDateTimePickerInternalsT.OnFocusFunc;\n  onKeyDown: DSControlledDateTimePickerInternalsT.OnKeyDown;\n  value: string;\n  disabled: boolean;\n  contextRef: React.MutableRefObject<HTMLInputElement | null>;\n  tabIndex?: WCAGTabIndex;\n  placeholder: string;\n  ariaCurrentValueForInputs: string;\n  isFocused: boolean;\n  getProps: ControlledDateTimePickerContextT['getProps'];\n}\nexport const YYYYInput = React.memo(\n  ({\n    onChange,\n    onBlur,\n    onFocus,\n    onKeyDown,\n    value,\n    disabled,\n    placeholder,\n    contextRef,\n    tabIndex,\n    ariaCurrentValueForInputs,\n    isFocused,\n    getProps,\n  }: YYYYInputsPropsT): JSX.Element => {\n    const validateOnChange = useCallback(\n      (e: React.ChangeEvent<HTMLInputElement>) => {\n        if (isInvalidYear(e?.currentTarget?.value)) {\n          e.preventDefault();\n          return;\n        }\n        onChange(e);\n      },\n      [onChange],\n    );\n    return (\n      <StyledYearInput\n        onChange={validateOnChange}\n        onBlur={onBlur}\n        onFocus={onFocus}\n        onKeyDown={onKeyDown}\n        value={value}\n        innerRef={(DomElem: HTMLInputElement) => {\n          (contextRef as React.MutableRefObject<HTMLInputElement>).current = DomElem;\n          if (isFocused) DomElem?.focus?.();\n        }}\n        tabIndex={tabIndex}\n        data-testid={ControlledDateTimePickerDatatestid.DATE_INPUTS.YEAR}\n        placeholder={placeholder}\n        aria-label={`year input field, ${ariaCurrentValueForInputs}`}\n        disabled={disabled}\n        aria-disabled={disabled}\n        getOwnerProps={getProps}\n      />\n    );\n  },\n);\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACoDjB;AApDN,OAAOA,UAAS,mBAAmB;AACnC,SAAS,uBAAuB;AAGhC,SAAS,0CAA0C;AACnD,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;AAgBO,MAAM,YAAYA,OAAM;AAAA,EAC7B,CAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,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,UAAU,CAAC,YAA8B;AACvC,UAAC,WAAwD,UAAU;AACnE,cAAI;AAAW,qBAAS,QAAQ;AAAA,QAClC;AAAA,QACA;AAAA,QACA,eAAa,mCAAmC,YAAY;AAAA,QAC5D;AAAA,QACA,cAAY,qBAAqB;AAAA,QACjC;AAAA,QACA,iBAAe;AAAA,QACf,eAAe;AAAA;AAAA,IACjB;AAAA,EAEJ;AACF;",
   "names": ["React"]
 }

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

@@ -10,7 +10,7 @@ import { StyledIconTriggerButton } from "./Styleds.js";
 const CalendarIconTrigger = () => {
   const { handleToggleCalendar, handleSetTriggerRef, handlePickerIconKeyDown } = useContext(CalendarContext);
   const {
-    props: { disabled },
+    props: { disabled, tabIndex },
     getProps,
     ariaCurrentValueForInputs
   } = useContext(ControlledDateTimePickerContext);
@@ -22,6 +22,7 @@ const CalendarIconTrigger = () => {
         buttonType: "icon",
         size: BUTTON_SIZES.M,
         innerRef: handleSetTriggerRef,
+        tabIndex,
         onClick: handleToggleCalendar,
         onKeyDown: handlePickerIconKeyDown,
         "data-testid": ControlledDateTimePickerDatatestid.PICKER_ICONS.CALENDAR,
@@ -31,7 +32,15 @@ const CalendarIconTrigger = () => {
         children: /* @__PURE__ */ jsx(DatePicker, {})
       }
     ),
-    [ariaCurrentValueForInputs, handleSetTriggerRef, handleToggleCalendar, handlePickerIconKeyDown, disabled, getProps]
+    [
+      ariaCurrentValueForInputs,
+      handleSetTriggerRef,
+      tabIndex,
+      handleToggleCalendar,
+      handlePickerIconKeyDown,
+      disabled,
+      getProps
+    ]
   );
 };
 export {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/Pickers/Calendar/CalendarIconTrigger.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useMemo } from 'react';\nimport { BUTTON_SIZES } from '@elliemae/ds-button-v2';\nimport { DatePicker } from '@elliemae/ds-icons';\nimport { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid.js';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';\nimport { CalendarContext } from './CalendarContext.js';\nimport { StyledIconTriggerButton } from './Styleds.js';\n// we memoize the Icon  for maximum optimization\n// this is particularly usefull due to how usePopper needs to check the references\n// since references are saved in a immutable way, we make sure to shortcircuit useless-re-renders\nexport const CalendarIconTrigger = (): JSX.Element => {\n  const { handleToggleCalendar, handleSetTriggerRef, handlePickerIconKeyDown } = useContext(CalendarContext);\n  const {\n    props: { disabled },\n    getProps,\n    ariaCurrentValueForInputs,\n  } = useContext(ControlledDateTimePickerContext);\n  return useMemo(\n    () => (\n      <StyledIconTriggerButton\n        aria-label={`date picker context menu trigger, ${ariaCurrentValueForInputs}`}\n        buttonType=\"icon\"\n        size={BUTTON_SIZES.M}\n        innerRef={handleSetTriggerRef}\n        onClick={handleToggleCalendar}\n        onKeyDown={handlePickerIconKeyDown}\n        data-testid={ControlledDateTimePickerDatatestid.PICKER_ICONS.CALENDAR}\n        disabled={disabled}\n        type=\"button\"\n        getOwnerProps={getProps}\n      >\n        <DatePicker />\n      </StyledIconTriggerButton>\n    ),\n    [ariaCurrentValueForInputs, handleSetTriggerRef, handleToggleCalendar, handlePickerIconKeyDown, disabled, getProps],\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;AC+Bf;AA/BR,SAAgB,YAAY,eAAe;AAC3C,SAAS,oBAAoB;AAC7B,SAAS,kBAAkB;AAC3B,SAAS,0CAA0C;AACnD,SAAS,uCAAuC;AAChD,SAAS,uBAAuB;AAChC,SAAS,+BAA+B;AAIjC,MAAM,sBAAsB,MAAmB;AACpD,QAAM,EAAE,sBAAsB,qBAAqB,wBAAwB,IAAI,WAAW,eAAe;AACzG,QAAM;AAAA,IACJ,OAAO,EAAE,SAAS;AAAA,IAClB;AAAA,IACA;AAAA,EACF,IAAI,WAAW,+BAA+B;AAC9C,SAAO;AAAA,IACL,MACE;AAAA,MAAC;AAAA;AAAA,QACC,cAAY,qCAAqC;AAAA,QACjD,YAAW;AAAA,QACX,MAAM,aAAa;AAAA,QACnB,UAAU;AAAA,QACV,SAAS;AAAA,QACT,WAAW;AAAA,QACX,eAAa,mCAAmC,aAAa;AAAA,QAC7D;AAAA,QACA,MAAK;AAAA,QACL,eAAe;AAAA,QAEf,8BAAC,cAAW;AAAA;AAAA,IACd;AAAA,IAEF,CAAC,2BAA2B,qBAAqB,sBAAsB,yBAAyB,UAAU,QAAQ;AAAA,EACpH;AACF;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useMemo } from 'react';\nimport { BUTTON_SIZES } from '@elliemae/ds-button-v2';\nimport { DatePicker } from '@elliemae/ds-icons';\nimport { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid.js';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';\nimport { CalendarContext } from './CalendarContext.js';\nimport { StyledIconTriggerButton } from './Styleds.js';\n// we memoize the Icon  for maximum optimization\n// this is particularly usefull due to how usePopper needs to check the references\n// since references are saved in a immutable way, we make sure to shortcircuit useless-re-renders\nexport const CalendarIconTrigger = (): JSX.Element => {\n  const { handleToggleCalendar, handleSetTriggerRef, handlePickerIconKeyDown } = useContext(CalendarContext);\n  const {\n    props: { disabled, tabIndex },\n    getProps,\n    ariaCurrentValueForInputs,\n  } = useContext(ControlledDateTimePickerContext);\n  return useMemo(\n    () => (\n      <StyledIconTriggerButton\n        aria-label={`date picker context menu trigger, ${ariaCurrentValueForInputs}`}\n        buttonType=\"icon\"\n        size={BUTTON_SIZES.M}\n        innerRef={handleSetTriggerRef}\n        tabIndex={tabIndex}\n        onClick={handleToggleCalendar}\n        onKeyDown={handlePickerIconKeyDown}\n        data-testid={ControlledDateTimePickerDatatestid.PICKER_ICONS.CALENDAR}\n        disabled={disabled}\n        type=\"button\"\n        getOwnerProps={getProps}\n      >\n        <DatePicker />\n      </StyledIconTriggerButton>\n    ),\n    [\n      ariaCurrentValueForInputs,\n      handleSetTriggerRef,\n      tabIndex,\n      handleToggleCalendar,\n      handlePickerIconKeyDown,\n      disabled,\n      getProps,\n    ],\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACgCf;AAhCR,SAAgB,YAAY,eAAe;AAC3C,SAAS,oBAAoB;AAC7B,SAAS,kBAAkB;AAC3B,SAAS,0CAA0C;AACnD,SAAS,uCAAuC;AAChD,SAAS,uBAAuB;AAChC,SAAS,+BAA+B;AAIjC,MAAM,sBAAsB,MAAmB;AACpD,QAAM,EAAE,sBAAsB,qBAAqB,wBAAwB,IAAI,WAAW,eAAe;AACzG,QAAM;AAAA,IACJ,OAAO,EAAE,UAAU,SAAS;AAAA,IAC5B;AAAA,IACA;AAAA,EACF,IAAI,WAAW,+BAA+B;AAC9C,SAAO;AAAA,IACL,MACE;AAAA,MAAC;AAAA;AAAA,QACC,cAAY,qCAAqC;AAAA,QACjD,YAAW;AAAA,QACX,MAAM,aAAa;AAAA,QACnB,UAAU;AAAA,QACV;AAAA,QACA,SAAS;AAAA,QACT,WAAW;AAAA,QACX,eAAa,mCAAmC,aAAa;AAAA,QAC7D;AAAA,QACA,MAAK;AAAA,QACL,eAAe;AAAA,QAEf,8BAAC,cAAW;AAAA;AAAA,IACd;AAAA,IAEF;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;",
   "names": []
 }

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

@@ -15,7 +15,10 @@ const CalendarWithTimeWheelIconTrigger = () => {
     ariaCurrentValueForInputs,
     disabled
   } = useContext(CalendarWithTimeWheelContext);
-  const { getProps } = useContext(ControlledDateTimePickerContext);
+  const {
+    getProps,
+    props: { tabIndex }
+  } = useContext(ControlledDateTimePickerContext);
   return useMemo(
     () => /* @__PURE__ */ jsx(
       StyledIconTriggerButton,
@@ -25,6 +28,7 @@ const CalendarWithTimeWheelIconTrigger = () => {
         type: "button",
         size: BUTTON_SIZES.M,
         innerRef: handleSetTriggerRef,
+        tabIndex,
         onClick: handleToggleCalendarWithTimeWheel,
         onKeyDown: handlePickerIconKeyDown,
         "data-testid": ControlledDateTimePickerDatatestid.PICKER_ICONS.CALENDAR_TIMEWHEEL,
@@ -39,7 +43,8 @@ const CalendarWithTimeWheelIconTrigger = () => {
       getProps,
       handlePickerIconKeyDown,
       handleSetTriggerRef,
-      handleToggleCalendarWithTimeWheel
+      handleToggleCalendarWithTimeWheel,
+      tabIndex
     ]
   );
 };

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/Pickers/CalendarWithTimeWheel/CalendarWithTimeWheelIconTrigger.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useMemo } from 'react';\nimport { BUTTON_SIZES } from '@elliemae/ds-button-v2';\nimport { DatePicker } from '@elliemae/ds-icons';\nimport { CalendarWithTimeWheelContext } from './CalendarWithTimeWheelContext.js';\nimport { StyledIconTriggerButton } from './Styleds.js';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';\nimport { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid.js';\n\n// we memoize the Icon  for maximum optimization\n// this is particularly useful due to how usePopper needs to check the references\n// since references are saved in a immutable way, we make sure to shortcircuit useless-re-renders\nexport const CalendarWithTimeWheelIconTrigger = (): JSX.Element => {\n  const {\n    handleSetTriggerRef,\n    handleToggleCalendarWithTimeWheel,\n    handlePickerIconKeyDown,\n    ariaCurrentValueForInputs,\n    disabled,\n  } = useContext(CalendarWithTimeWheelContext);\n  const { getProps } = useContext(ControlledDateTimePickerContext);\n  return useMemo(\n    () => (\n      <StyledIconTriggerButton\n        aria-label={`date time picker context menu trigger, ${ariaCurrentValueForInputs}`}\n        buttonType=\"icon\"\n        type=\"button\"\n        size={BUTTON_SIZES.M}\n        innerRef={handleSetTriggerRef}\n        onClick={handleToggleCalendarWithTimeWheel}\n        onKeyDown={handlePickerIconKeyDown}\n        data-testid={ControlledDateTimePickerDatatestid.PICKER_ICONS.CALENDAR_TIMEWHEEL}\n        disabled={disabled}\n        getOwnerProps={getProps}\n      >\n        <DatePicker />\n      </StyledIconTriggerButton>\n    ),\n    [\n      ariaCurrentValueForInputs,\n      disabled,\n      getProps,\n      handlePickerIconKeyDown,\n      handleSetTriggerRef,\n      handleToggleCalendarWithTimeWheel,\n    ],\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACkCf;AAlCR,SAAgB,YAAY,eAAe;AAC3C,SAAS,oBAAoB;AAC7B,SAAS,kBAAkB;AAC3B,SAAS,oCAAoC;AAC7C,SAAS,+BAA+B;AACxC,SAAS,uCAAuC;AAChD,SAAS,0CAA0C;AAK5C,MAAM,mCAAmC,MAAmB;AACjE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,4BAA4B;AAC3C,QAAM,EAAE,SAAS,IAAI,WAAW,+BAA+B;AAC/D,SAAO;AAAA,IACL,MACE;AAAA,MAAC;AAAA;AAAA,QACC,cAAY,0CAA0C;AAAA,QACtD,YAAW;AAAA,QACX,MAAK;AAAA,QACL,MAAM,aAAa;AAAA,QACnB,UAAU;AAAA,QACV,SAAS;AAAA,QACT,WAAW;AAAA,QACX,eAAa,mCAAmC,aAAa;AAAA,QAC7D;AAAA,QACA,eAAe;AAAA,QAEf,8BAAC,cAAW;AAAA;AAAA,IACd;AAAA,IAEF;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useMemo } from 'react';\nimport { BUTTON_SIZES } from '@elliemae/ds-button-v2';\nimport { DatePicker } from '@elliemae/ds-icons';\nimport { CalendarWithTimeWheelContext } from './CalendarWithTimeWheelContext.js';\nimport { StyledIconTriggerButton } from './Styleds.js';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';\nimport { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid.js';\n\n// we memoize the Icon  for maximum optimization\n// this is particularly useful due to how usePopper needs to check the references\n// since references are saved in a immutable way, we make sure to shortcircuit useless-re-renders\nexport const CalendarWithTimeWheelIconTrigger = (): JSX.Element => {\n  const {\n    handleSetTriggerRef,\n    handleToggleCalendarWithTimeWheel,\n    handlePickerIconKeyDown,\n    ariaCurrentValueForInputs,\n    disabled,\n  } = useContext(CalendarWithTimeWheelContext);\n  const {\n    getProps,\n    props: { tabIndex },\n  } = useContext(ControlledDateTimePickerContext);\n  return useMemo(\n    () => (\n      <StyledIconTriggerButton\n        aria-label={`date time picker context menu trigger, ${ariaCurrentValueForInputs}`}\n        buttonType=\"icon\"\n        type=\"button\"\n        size={BUTTON_SIZES.M}\n        innerRef={handleSetTriggerRef}\n        tabIndex={tabIndex}\n        onClick={handleToggleCalendarWithTimeWheel}\n        onKeyDown={handlePickerIconKeyDown}\n        data-testid={ControlledDateTimePickerDatatestid.PICKER_ICONS.CALENDAR_TIMEWHEEL}\n        disabled={disabled}\n        getOwnerProps={getProps}\n      >\n        <DatePicker />\n      </StyledIconTriggerButton>\n    ),\n    [\n      ariaCurrentValueForInputs,\n      disabled,\n      getProps,\n      handlePickerIconKeyDown,\n      handleSetTriggerRef,\n      handleToggleCalendarWithTimeWheel,\n      tabIndex,\n    ],\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACsCf;AAtCR,SAAgB,YAAY,eAAe;AAC3C,SAAS,oBAAoB;AAC7B,SAAS,kBAAkB;AAC3B,SAAS,oCAAoC;AAC7C,SAAS,+BAA+B;AACxC,SAAS,uCAAuC;AAChD,SAAS,0CAA0C;AAK5C,MAAM,mCAAmC,MAAmB;AACjE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,4BAA4B;AAC3C,QAAM;AAAA,IACJ;AAAA,IACA,OAAO,EAAE,SAAS;AAAA,EACpB,IAAI,WAAW,+BAA+B;AAC9C,SAAO;AAAA,IACL,MACE;AAAA,MAAC;AAAA;AAAA,QACC,cAAY,0CAA0C;AAAA,QACtD,YAAW;AAAA,QACX,MAAK;AAAA,QACL,MAAM,aAAa;AAAA,QACnB,UAAU;AAAA,QACV;AAAA,QACA,SAAS;AAAA,QACT,WAAW;AAAA,QACX,eAAa,mCAAmC,aAAa;AAAA,QAC7D;AAAA,QACA,eAAe;AAAA,QAEf,8BAAC,cAAW;AAAA;AAAA,IACd;AAAA,IAEF;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;",
   "names": []
 }

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

@@ -10,7 +10,7 @@ import { StyledIconTriggerButton } from "./Styleds.js";
 const TimeWheelIconTrigger = () => {
   const { handleSetTriggerRef, handleToggleTimePicker, handlePickerIconKeyDown } = useContext(TimeWheelContext);
   const {
-    props: { disabled },
+    props: { disabled, tabIndex },
     getProps,
     ariaCurrentValueForInputs
   } = useContext(ControlledDateTimePickerContext);
@@ -22,6 +22,7 @@ const TimeWheelIconTrigger = () => {
         buttonType: "icon",
         size: BUTTON_SIZES.M,
         innerRef: handleSetTriggerRef,
+        tabIndex,
         onClick: handleToggleTimePicker,
         onKeyDown: handlePickerIconKeyDown,
         "data-testid": ControlledDateTimePickerDatatestid.PICKER_ICONS.TIMEWHEEL,
@@ -37,7 +38,8 @@ const TimeWheelIconTrigger = () => {
       getProps,
       handlePickerIconKeyDown,
       handleSetTriggerRef,
-      handleToggleTimePicker
+      handleToggleTimePicker,
+      tabIndex
     ]
   );
 };

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/Pickers/TimeWheel/TimeWheelIconTrigger.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useMemo } from 'react';\nimport { BUTTON_SIZES } from '@elliemae/ds-button-v2';\nimport { RecentDocuments } from '@elliemae/ds-icons';\nimport { TimeWheelContext } from './TimeWheelContext.js';\nimport { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid.js';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';\nimport { StyledIconTriggerButton } from './Styleds.js';\n\n// we memoize the Icon for maximum optimization\n// this is particularly useful due to how usePopper needs to check the references\n// since references are saved in a immutable way, we make sure to shortcircuit useless-re-renders\nexport const TimeWheelIconTrigger = (): JSX.Element => {\n  const { handleSetTriggerRef, handleToggleTimePicker, handlePickerIconKeyDown } = useContext(TimeWheelContext);\n  const {\n    props: { disabled },\n    getProps,\n    ariaCurrentValueForInputs,\n  } = useContext(ControlledDateTimePickerContext);\n  return useMemo(\n    () => (\n      <StyledIconTriggerButton\n        aria-label={`time picker context menu trigger, ${ariaCurrentValueForInputs}`}\n        buttonType=\"icon\"\n        size={BUTTON_SIZES.M}\n        innerRef={handleSetTriggerRef}\n        onClick={handleToggleTimePicker}\n        onKeyDown={handlePickerIconKeyDown}\n        data-testid={ControlledDateTimePickerDatatestid.PICKER_ICONS.TIMEWHEEL}\n        disabled={disabled}\n        type=\"button\"\n        getOwnerProps={getProps}\n      >\n        <RecentDocuments />\n      </StyledIconTriggerButton>\n    ),\n    [\n      ariaCurrentValueForInputs,\n      disabled,\n      getProps,\n      handlePickerIconKeyDown,\n      handleSetTriggerRef,\n      handleToggleTimePicker,\n    ],\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACgCf;AAhCR,SAAgB,YAAY,eAAe;AAC3C,SAAS,oBAAoB;AAC7B,SAAS,uBAAuB;AAChC,SAAS,wBAAwB;AACjC,SAAS,0CAA0C;AACnD,SAAS,uCAAuC;AAChD,SAAS,+BAA+B;AAKjC,MAAM,uBAAuB,MAAmB;AACrD,QAAM,EAAE,qBAAqB,wBAAwB,wBAAwB,IAAI,WAAW,gBAAgB;AAC5G,QAAM;AAAA,IACJ,OAAO,EAAE,SAAS;AAAA,IAClB;AAAA,IACA;AAAA,EACF,IAAI,WAAW,+BAA+B;AAC9C,SAAO;AAAA,IACL,MACE;AAAA,MAAC;AAAA;AAAA,QACC,cAAY,qCAAqC;AAAA,QACjD,YAAW;AAAA,QACX,MAAM,aAAa;AAAA,QACnB,UAAU;AAAA,QACV,SAAS;AAAA,QACT,WAAW;AAAA,QACX,eAAa,mCAAmC,aAAa;AAAA,QAC7D;AAAA,QACA,MAAK;AAAA,QACL,eAAe;AAAA,QAEf,8BAAC,mBAAgB;AAAA;AAAA,IACnB;AAAA,IAEF;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useMemo } from 'react';\nimport { BUTTON_SIZES } from '@elliemae/ds-button-v2';\nimport { RecentDocuments } from '@elliemae/ds-icons';\nimport { TimeWheelContext } from './TimeWheelContext.js';\nimport { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid.js';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';\nimport { StyledIconTriggerButton } from './Styleds.js';\n\n// we memoize the Icon for maximum optimization\n// this is particularly useful due to how usePopper needs to check the references\n// since references are saved in a immutable way, we make sure to shortcircuit useless-re-renders\nexport const TimeWheelIconTrigger = (): JSX.Element => {\n  const { handleSetTriggerRef, handleToggleTimePicker, handlePickerIconKeyDown } = useContext(TimeWheelContext);\n  const {\n    props: { disabled, tabIndex },\n    getProps,\n    ariaCurrentValueForInputs,\n  } = useContext(ControlledDateTimePickerContext);\n  return useMemo(\n    () => (\n      <StyledIconTriggerButton\n        aria-label={`time picker context menu trigger, ${ariaCurrentValueForInputs}`}\n        buttonType=\"icon\"\n        size={BUTTON_SIZES.M}\n        innerRef={handleSetTriggerRef}\n        tabIndex={tabIndex}\n        onClick={handleToggleTimePicker}\n        onKeyDown={handlePickerIconKeyDown}\n        data-testid={ControlledDateTimePickerDatatestid.PICKER_ICONS.TIMEWHEEL}\n        disabled={disabled}\n        type=\"button\"\n        getOwnerProps={getProps}\n      >\n        <RecentDocuments />\n      </StyledIconTriggerButton>\n    ),\n    [\n      ariaCurrentValueForInputs,\n      disabled,\n      getProps,\n      handlePickerIconKeyDown,\n      handleSetTriggerRef,\n      handleToggleTimePicker,\n      tabIndex,\n    ],\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACiCf;AAjCR,SAAgB,YAAY,eAAe;AAC3C,SAAS,oBAAoB;AAC7B,SAAS,uBAAuB;AAChC,SAAS,wBAAwB;AACjC,SAAS,0CAA0C;AACnD,SAAS,uCAAuC;AAChD,SAAS,+BAA+B;AAKjC,MAAM,uBAAuB,MAAmB;AACrD,QAAM,EAAE,qBAAqB,wBAAwB,wBAAwB,IAAI,WAAW,gBAAgB;AAC5G,QAAM;AAAA,IACJ,OAAO,EAAE,UAAU,SAAS;AAAA,IAC5B;AAAA,IACA;AAAA,EACF,IAAI,WAAW,+BAA+B;AAC9C,SAAO;AAAA,IACL,MACE;AAAA,MAAC;AAAA;AAAA,QACC,cAAY,qCAAqC;AAAA,QACjD,YAAW;AAAA,QACX,MAAM,aAAa;AAAA,QACnB,UAAU;AAAA,QACV;AAAA,QACA,SAAS;AAAA,QACT,WAAW;AAAA,QACX,eAAa,mCAAmC,aAAa;AAAA,QAC7D;AAAA,QACA,MAAK;AAAA,QACL,eAAe;AAAA,QAEf,8BAAC,mBAAgB;AAAA;AAAA,IACnB;AAAA,IAEF;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;",
   "names": []
 }