@elliemae/ds-form-date-time-picker 3.50.1-next.8 → 3.51.0-beta.1

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

@@ -55,7 +55,8 @@ const MinutesInput = import_react.default.memo(
     contextRef,
     isFocused,
     getProps,
-    tabIndex
+    tabIndex,
+    readOnly
   }) => {
     const validateOnChange = (0, import_react.useCallback)(
       (e) => {
@@ -85,7 +86,8 @@ const MinutesInput = import_react.default.memo(
         "aria-label": `minutes input field ${ariaCurrentValueForInputs}`,
         disabled,
         "aria-disabled": disabled,
-        getOwnerProps: getProps
+        getOwnerProps: getProps,
+        readOnly
       }
     );
   }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/TimeInputs/MinutesInput.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useCallback } from 'react';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { StyledMinuteInput } 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 isInvalidMinute = (minutes: string) => {\n  if (minutes === '') return false;\n  const numberOnly = regExpNumbers.test(minutes);\n  return minutes.length > 2 || !numberOnly || Number.parseInt(minutes, 10) > 60;\n};\ninterface MinutesInputsPropsT {\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  tabIndex?: TypescriptHelpersT.WCAGTabIndex;\n}\nexport const MinutesInput = React.memo(\n  ({\n    onChange,\n    onBlur,\n    onFocus,\n    onKeyDown,\n    value,\n    disabled,\n    placeholder,\n    ariaCurrentValueForInputs,\n    contextRef,\n    isFocused,\n    getProps,\n    tabIndex,\n  }: MinutesInputsPropsT): JSX.Element => {\n    const validateOnChange = useCallback(\n      (e: React.ChangeEvent<HTMLInputElement>) => {\n        if (isInvalidMinute(e?.target?.value)) {\n          e.preventDefault();\n          return;\n        }\n        onChange(e);\n      },\n      [onChange],\n    );\n    return (\n      <StyledMinuteInput\n        onChange={validateOnChange}\n        onBlur={onBlur}\n        onFocus={onFocus}\n        onKeyDown={onKeyDown}\n        value={value}\n        innerRef={(DomElem: HTMLInputElement) => {\n          contextRef.current = DomElem;\n          if (isFocused) DomElem?.focus?.();\n        }}\n        tabIndex={tabIndex}\n        data-testid={ControlledDateTimePickerDatatestid.TIME_INPUTS.MINUTE}\n        placeholder={placeholder}\n        aria-label={`minutes input field ${ariaCurrentValueForInputs}`}\n        disabled={disabled}\n        aria-disabled={disabled}\n        getOwnerProps={getProps}\n      />\n    );\n  },\n);\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADoDjB;AApDN,mBAAmC;AAEnC,qBAAkC;AAGlC,gDAAmD;AACnD,MAAM,gBAAgB;AACtB,MAAM,kBAAkB,CAAC,YAAoB;AAC3C,MAAI,YAAY,GAAI,QAAO;AAC3B,QAAM,aAAa,cAAc,KAAK,OAAO;AAC7C,SAAO,QAAQ,SAAS,KAAK,CAAC,cAAc,OAAO,SAAS,SAAS,EAAE,IAAI;AAC7E;AAeO,MAAM,eAAe,aAAAA,QAAM;AAAA,EAChC,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,MAAwC;AACtC,UAAM,uBAAmB;AAAA,MACvB,CAAC,MAA2C;AAC1C,YAAI,gBAAgB,GAAG,QAAQ,KAAK,GAAG;AACrC,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,qBAAW,UAAU;AACrB,cAAI,UAAW,UAAS,QAAQ;AAAA,QAClC;AAAA,QACA;AAAA,QACA,eAAa,6EAAmC,YAAY;AAAA,QAC5D;AAAA,QACA,cAAY,uBAAuB,yBAAyB;AAAA,QAC5D;AAAA,QACA,iBAAe;AAAA,QACf,eAAe;AAAA;AAAA,IACjB;AAAA,EAEJ;AACF;",
+  "sourcesContent": ["import React, { useCallback } from 'react';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { StyledMinuteInput } 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 isInvalidMinute = (minutes: string) => {\n  if (minutes === '') return false;\n  const numberOnly = regExpNumbers.test(minutes);\n  return minutes.length > 2 || !numberOnly || Number.parseInt(minutes, 10) > 60;\n};\ninterface MinutesInputsPropsT {\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  tabIndex?: TypescriptHelpersT.WCAGTabIndex;\n  readOnly: boolean;\n}\nexport const MinutesInput = React.memo(\n  ({\n    onChange,\n    onBlur,\n    onFocus,\n    onKeyDown,\n    value,\n    disabled,\n    placeholder,\n    ariaCurrentValueForInputs,\n    contextRef,\n    isFocused,\n    getProps,\n    tabIndex,\n    readOnly,\n  }: MinutesInputsPropsT): JSX.Element => {\n    const validateOnChange = useCallback(\n      (e: React.ChangeEvent<HTMLInputElement>) => {\n        if (isInvalidMinute(e?.target?.value)) {\n          e.preventDefault();\n          return;\n        }\n        onChange(e);\n      },\n      [onChange],\n    );\n    return (\n      <StyledMinuteInput\n        onChange={validateOnChange}\n        onBlur={onBlur}\n        onFocus={onFocus}\n        onKeyDown={onKeyDown}\n        value={value}\n        innerRef={(DomElem: HTMLInputElement) => {\n          contextRef.current = DomElem;\n          if (isFocused) DomElem?.focus?.();\n        }}\n        tabIndex={tabIndex}\n        data-testid={ControlledDateTimePickerDatatestid.TIME_INPUTS.MINUTE}\n        placeholder={placeholder}\n        aria-label={`minutes input field ${ariaCurrentValueForInputs}`}\n        disabled={disabled}\n        aria-disabled={disabled}\n        getOwnerProps={getProps}\n        readOnly={readOnly}\n      />\n    );\n  },\n);\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADsDjB;AAtDN,mBAAmC;AAEnC,qBAAkC;AAGlC,gDAAmD;AACnD,MAAM,gBAAgB;AACtB,MAAM,kBAAkB,CAAC,YAAoB;AAC3C,MAAI,YAAY,GAAI,QAAO;AAC3B,QAAM,aAAa,cAAc,KAAK,OAAO;AAC7C,SAAO,QAAQ,SAAS,KAAK,CAAC,cAAc,OAAO,SAAS,SAAS,EAAE,IAAI;AAC7E;AAgBO,MAAM,eAAe,aAAAA,QAAM;AAAA,EAChC,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,MAAwC;AACtC,UAAM,uBAAmB;AAAA,MACvB,CAAC,MAA2C;AAC1C,YAAI,gBAAgB,GAAG,QAAQ,KAAK,GAAG;AACrC,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,qBAAW,UAAU;AACrB,cAAI,UAAW,UAAS,QAAQ;AAAA,QAClC;AAAA,QACA;AAAA,QACA,eAAa,6EAAmC,YAAY;AAAA,QAC5D;AAAA,QACA,cAAY,uBAAuB,yBAAyB;AAAA,QAC5D;AAAA,QACA,iBAAe;AAAA,QACf,eAAe;AAAA,QACf;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;",
   "names": ["React"]
 }

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

@@ -70,7 +70,7 @@ const TimeInputs = () => {
     latestInteractionRegion,
     currFocusDescriber,
     getProps,
-    props: { tabIndex }
+    props: { tabIndex, readOnly }
   } = (0, import_react.useContext)(import_ControlledDateTimePickerCTX.ControlledDateTimePickerContext);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     import_ds_grid.Grid,
@@ -98,7 +98,8 @@ const TimeInputs = () => {
             autoFocusHourInput,
             disabled,
             isFocused: latestInteractionRegion === "time-inputs" && currFocusDescriber === "hour-input",
-            getProps
+            getProps,
+            readOnly
           }
         ) }),
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Styleds.StyledColonSeparator, { alignItems: "center", children: ":" }),
@@ -116,7 +117,8 @@ const TimeInputs = () => {
             ariaCurrentValueForInputs,
             disabled,
             isFocused: latestInteractionRegion === "time-inputs" && currFocusDescriber === "minute-input",
-            getProps
+            getProps,
+            readOnly
           }
         ) }),
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Styleds.StyledSeparator, { children: " " }),
@@ -134,7 +136,8 @@ const TimeInputs = () => {
             ariaCurrentValueForInputs,
             disabled,
             isFocused: latestInteractionRegion === "time-inputs" && currFocusDescriber === "meridiem-input",
-            getProps
+            getProps,
+            readOnly
           }
         ) })
       ]

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    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;",
+  "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, readOnly },\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          readOnly={readOnly}\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          readOnly={readOnly}\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          readOnly={readOnly}\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,UAAU,SAAS;AAAA,EAC9B,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,YACA;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,YACA;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,YACA;AAAA;AAAA,QACF,GACF;AAAA;AAAA;AAAA,EACF;AAEJ;",
   "names": []
 }

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

@@ -37,7 +37,7 @@ var import_ControlledDateTimePickerCTX = require("../../ControlledDateTimePicker
 var import_stringHelpers = require("../../utils/stringHelpers.js");
 const useTimeInputs = () => {
   const {
-    props: { disabled },
+    props: { disabled, readOnly },
     hours,
     minutes,
     meridiem,
@@ -79,6 +79,7 @@ const useTimeInputs = () => {
   );
   const onHoursKeyDown = (0, import_react.useCallback)(
     (e) => {
+      if (readOnly) return;
       const { key, ctrlKey, metaKey } = e;
       const hoursStringConvertedToInteger = Number.parseInt(hours, 10);
       if (["Home", "End", "ArrowUp", "ArrowDown", ":"].includes(key)) e.preventDefault();
@@ -113,7 +114,8 @@ const useTimeInputs = () => {
       onEndKeyDown,
       trackFocusLastSegment,
       trackFocusMinuteInput,
-      handleChangeHours
+      handleChangeHours,
+      readOnly
     ]
   );
   const onHoursBlur = (0, import_react.useCallback)(
@@ -141,6 +143,7 @@ const useTimeInputs = () => {
   );
   const onMinutesKeyDown = (0, import_react.useCallback)(
     (e) => {
+      if (readOnly) return;
       const { key, ctrlKey, metaKey } = e;
       const minutesStringConvertedToInteger = Number.parseInt(minutes, 10);
       if (["Home", "End", "ArrowUp", "ArrowDown", " "].includes(key)) e.preventDefault();
@@ -175,7 +178,8 @@ const useTimeInputs = () => {
       minutesInterval,
       handleChangeMinutes,
       trackFocusMeridiemInput,
-      trackFocusHourInput
+      trackFocusHourInput,
+      readOnly
     ]
   );
   const onMinutesBlur = (0, import_react.useCallback)(
@@ -215,6 +219,7 @@ const useTimeInputs = () => {
   );
   const onMeridiemKeyDown = (0, import_react.useCallback)(
     (e) => {
+      if (readOnly) return;
       const { key, ctrlKey, metaKey } = e;
       if (["Home", "End", "ArrowUp", "ArrowDown"].includes(key)) e.preventDefault();
       if (["Home", "End", "ArrowUp", "ArrowDown"].includes(key)) e.stopPropagation();
@@ -230,7 +235,15 @@ const useTimeInputs = () => {
       }
       if ((ctrlKey || metaKey) && key === ";") trackFocusLastSegment();
     },
-    [onHomeKeyDown, onEndKeyDown, meridiem, handleChangeMeridiem, trackFocusLastSegment, trackFocusMinuteInput]
+    [
+      onHomeKeyDown,
+      onEndKeyDown,
+      meridiem,
+      handleChangeMeridiem,
+      trackFocusLastSegment,
+      trackFocusMinuteInput,
+      readOnly
+    ]
   );
   const onMeridiemBlur = (0, import_react.useCallback)(
     (e) => {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/TimeInputs/useTimeInputs.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable complexity */\n/* eslint-disable max-statements */\n/* eslint-disable max-lines */\nimport { useCallback, useMemo, useContext } from 'react';\nimport { ControlledDateTimePickerContext } from '../../ControlledDateTimePickerCTX.js';\nimport { prependStringWithPlaceHolders } from '../../utils/stringHelpers.js';\nimport type { DSControlledDateTimePickerInternalsT } from '../../sharedTypes.js';\ninterface UseTimeInputsR {\n  autoFocusHourInput: boolean;\n  disabled: boolean;\n  handleChangeHours: DSControlledDateTimePickerInternalsT.HandleOnChangeFunc;\n  onHoursChange: DSControlledDateTimePickerInternalsT.OnChangeFunc;\n  handleChangeMinutes: DSControlledDateTimePickerInternalsT.HandleOnChangeFunc;\n  onMinutesChange: DSControlledDateTimePickerInternalsT.OnChangeFunc;\n  handleChangeMeridiem: DSControlledDateTimePickerInternalsT.HandleOnChangeFunc;\n  onMeridiemChange: DSControlledDateTimePickerInternalsT.OnChangeFunc;\n  onHoursFocus: DSControlledDateTimePickerInternalsT.OnFocusFunc;\n  onMinutesFocus: DSControlledDateTimePickerInternalsT.OnFocusFunc;\n  onMeridiemFocus: DSControlledDateTimePickerInternalsT.OnFocusFunc;\n  onHoursBlur: DSControlledDateTimePickerInternalsT.OnBlurFunc;\n  onMinutesBlur: DSControlledDateTimePickerInternalsT.OnBlurFunc;\n  onMeridiemBlur: DSControlledDateTimePickerInternalsT.OnBlurFunc;\n  onHoursKeyDown: DSControlledDateTimePickerInternalsT.OnKeyDown;\n  onMinutesKeyDown: DSControlledDateTimePickerInternalsT.OnKeyDown;\n  onMeridiemKeyDown: DSControlledDateTimePickerInternalsT.OnKeyDown;\n}\nexport const useTimeInputs = (): UseTimeInputsR => {\n  const {\n    props: { disabled },\n    hours,\n    minutes,\n    meridiem,\n    withAnyRightController,\n    withAnyPicker,\n    withClearBtn,\n    isWithDateInputs,\n    autoFocusHourInput,\n    handleChangeHours,\n    handleChangeMinutes,\n    handleChangeMeridiem,\n    minutesInterval,\n    trackFocusFirstSegment,\n    trackFocusLastSegment,\n    trackFocusHourInput,\n    trackFocusMinuteInput,\n    trackFocusMeridiemInput,\n    trackFocusClearBtn,\n    trackFocusPicker,\n    trackFocusYearInput,\n  } = useContext(ControlledDateTimePickerContext);\n\n  const onHomeKeyDown = useCallback(() => {\n    trackFocusFirstSegment();\n  }, [trackFocusFirstSegment]);\n  const onEndKeyDown = useCallback(() => {\n    trackFocusLastSegment();\n  }, [trackFocusLastSegment]);\n\n  const onHoursFocus: DSControlledDateTimePickerInternalsT.OnFocusFunc = useCallback(() => {\n    trackFocusHourInput();\n  }, [trackFocusHourInput]);\n  const onHoursChange: DSControlledDateTimePickerInternalsT.OnChangeFunc = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      let newHours = e?.target?.value;\n      // converts hours 2~9 to 07~09\n      if (Number.parseInt(newHours, 10) > 1) newHours = prependStringWithPlaceHolders(newHours, 2);\n      handleChangeHours(newHours, e);\n      // auto-advance functionality:\n      if (newHours.length === 2) trackFocusMinuteInput();\n    },\n    [handleChangeHours, trackFocusMinuteInput],\n  );\n  const onHoursKeyDown: DSControlledDateTimePickerInternalsT.OnKeyDown = useCallback(\n    (e: React.KeyboardEvent<HTMLInputElement>) => {\n      const { key, ctrlKey, metaKey } = e;\n      const hoursStringConvertedToInteger = Number.parseInt(hours, 10);\n\n      if (['Home', 'End', 'ArrowUp', 'ArrowDown', ':'].includes(key)) e.preventDefault();\n      if (['Home', 'End', 'ArrowUp', 'ArrowDown', ':'].includes(key)) e.stopPropagation();\n      if (key === 'Home') onHomeKeyDown();\n      if (key === 'End') onEndKeyDown();\n      if (key === 'ArrowUp' || key === 'ArrowDown') {\n        const hoursInteger = Number.isNaN(hoursStringConvertedToInteger) ? 0 : hoursStringConvertedToInteger;\n        let newHours;\n        if (key === 'ArrowUp') newHours = hoursInteger + 1 <= 12 ? hoursInteger + 1 : hoursInteger;\n        else newHours = hoursInteger - 1 > 1 ? hoursInteger - 1 : 1;\n        newHours = prependStringWithPlaceHolders(`${newHours}`, 2);\n        handleChangeHours(newHours, e);\n      }\n      if (!Number.isNaN(hoursStringConvertedToInteger) && key === ':') {\n        let newHours = prependStringWithPlaceHolders(`${hoursStringConvertedToInteger}`, 2);\n        // 12-hours format: 00 is not allowed as a value for hours\n        if (newHours === '00') newHours = '01';\n        handleChangeHours(newHours, e);\n        // auto-advance functionality:\n        if (newHours.length === 2) trackFocusMinuteInput();\n      }\n\n      // regressive backspace functionality\n      if (\n        key === 'Backspace' &&\n        e.target === e.currentTarget &&\n        isWithDateInputs &&\n        (e.target as HTMLInputElement).selectionStart === 0 &&\n        (e.target as HTMLInputElement).selectionEnd === 0\n      ) {\n        e.preventDefault();\n\n        trackFocusYearInput();\n      }\n      // focus last fragment on fill with now\n      if ((ctrlKey || metaKey) && key === ';') trackFocusLastSegment();\n    },\n    [\n      hours,\n      isWithDateInputs,\n      trackFocusYearInput,\n      onHomeKeyDown,\n      onEndKeyDown,\n      trackFocusLastSegment,\n      trackFocusMinuteInput,\n      handleChangeHours,\n    ],\n  );\n  const onHoursBlur: DSControlledDateTimePickerInternalsT.OnBlurFunc = useCallback(\n    (e: React.FocusEvent<HTMLInputElement>) => {\n      const newHours = e?.target?.value;\n      if (newHours === '0') handleChangeHours('01', e, { isAutomaticFillTrigger: true });\n      else if (newHours.length > 0 && newHours.length < 2)\n        handleChangeHours(prependStringWithPlaceHolders(newHours, 2), e, {\n          isAutomaticFillTrigger: true,\n        });\n    },\n    [handleChangeHours],\n  );\n\n  const onMinutesFocus: DSControlledDateTimePickerInternalsT.OnFocusFunc = useCallback(() => {\n    trackFocusMinuteInput();\n  }, [trackFocusMinuteInput]);\n  const onMinutesChange: DSControlledDateTimePickerInternalsT.OnChangeFunc = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      let newMinutes = e?.target?.value;\n      // converts minutes 7~9 to 07~09\n      if (Number.parseInt(newMinutes, 10) > 6) newMinutes = prependStringWithPlaceHolders(newMinutes, 2);\n      handleChangeMinutes(newMinutes, e);\n\n      // auto-advance functionality:\n      if (newMinutes.length === 2) trackFocusMeridiemInput();\n    },\n    [handleChangeMinutes, trackFocusMeridiemInput],\n  );\n  const onMinutesKeyDown: DSControlledDateTimePickerInternalsT.OnKeyDown = useCallback(\n    (e: React.KeyboardEvent<HTMLInputElement>) => {\n      const { key, ctrlKey, metaKey } = e;\n      const minutesStringConvertedToInteger = Number.parseInt(minutes, 10);\n      if (['Home', 'End', 'ArrowUp', 'ArrowDown', ' '].includes(key)) e.preventDefault();\n      if (['Home', 'End', 'ArrowUp', 'ArrowDown', ' '].includes(key)) e.stopPropagation();\n\n      if (key === 'Home') onHomeKeyDown();\n      if (key === 'End') onEndKeyDown();\n      if (key === 'ArrowUp' || key === 'ArrowDown') {\n        const minutesInteger = Number.isNaN(minutesStringConvertedToInteger) ? 0 : minutesStringConvertedToInteger;\n        let newMinutes;\n        if (key === 'ArrowUp')\n          newMinutes = minutesInteger + minutesInterval <= 59 ? minutesInteger + minutesInterval : minutesInteger;\n        else newMinutes = minutesInteger - minutesInterval > 0 ? minutesInteger - minutesInterval : 0;\n        newMinutes = prependStringWithPlaceHolders(`${newMinutes}`, 2);\n        handleChangeMinutes(newMinutes, e);\n      }\n      if (!Number.isNaN(minutesStringConvertedToInteger) && key === ' ') {\n        const newMinutes = prependStringWithPlaceHolders(`${minutesStringConvertedToInteger}`, 2);\n        handleChangeMinutes(newMinutes, e);\n        // auto-advance functionality:\n        if (newMinutes.length === 2) trackFocusMeridiemInput();\n      }\n\n      // regressive backspace functionality\n      if (\n        key === 'Backspace' &&\n        e.target === e.currentTarget &&\n        (e.target as HTMLInputElement).selectionStart === 0 &&\n        (e.target as HTMLInputElement).selectionEnd === 0\n      ) {\n        e.preventDefault();\n\n        trackFocusHourInput();\n      }\n\n      // focus last fragment on fill with now\n      if ((ctrlKey || metaKey) && key === ';') trackFocusLastSegment();\n    },\n    [\n      minutes,\n      onHomeKeyDown,\n      onEndKeyDown,\n      trackFocusLastSegment,\n      minutesInterval,\n      handleChangeMinutes,\n      trackFocusMeridiemInput,\n      trackFocusHourInput,\n    ],\n  );\n  const onMinutesBlur: DSControlledDateTimePickerInternalsT.OnBlurFunc = useCallback(\n    (e: React.FocusEvent<HTMLInputElement>) => {\n      const newMinutes = e?.target?.value;\n      if (newMinutes.length > 0 && newMinutes.length < 2)\n        handleChangeMinutes(prependStringWithPlaceHolders(newMinutes, 2), e, {\n          isAutomaticFillTrigger: true,\n        });\n    },\n    [handleChangeMinutes],\n  );\n\n  const onMeridiemFocus: DSControlledDateTimePickerInternalsT.OnFocusFunc = useCallback(() => {\n    trackFocusMeridiemInput();\n  }, [trackFocusMeridiemInput]);\n  const onMeridiemChange: DSControlledDateTimePickerInternalsT.OnChangeFunc = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      let newMeridiem = e?.target?.value?.toUpperCase?.();\n      // if new value is length 1,\n      //   if previous value was empty, auto-complete\n      //   if previous value was not empty, set to empty (regressive backspace)\n      if (newMeridiem.length === 1)\n        if (meridiem === '') newMeridiem = `${newMeridiem}M`;\n        else newMeridiem = '';\n      handleChangeMeridiem(newMeridiem, e);\n      // auto-advance functionality:\n      if (newMeridiem.length === 2 && withAnyRightController) {\n        if (withClearBtn) trackFocusClearBtn();\n        else if (withAnyPicker) trackFocusPicker();\n      }\n    },\n    [\n      meridiem,\n      handleChangeMeridiem,\n      withAnyRightController,\n      withClearBtn,\n      trackFocusClearBtn,\n      withAnyPicker,\n      trackFocusPicker,\n    ],\n  );\n  const onMeridiemKeyDown: DSControlledDateTimePickerInternalsT.OnKeyDown = useCallback(\n    (e: React.KeyboardEvent<HTMLInputElement>) => {\n      const { key, ctrlKey, metaKey } = e;\n\n      if (['Home', 'End', 'ArrowUp', 'ArrowDown'].includes(key)) e.preventDefault();\n      if (['Home', 'End', 'ArrowUp', 'ArrowDown'].includes(key)) e.stopPropagation();\n\n      if (key === 'Home') onHomeKeyDown();\n      if (key === 'End') onEndKeyDown();\n      if (key === 'ArrowUp' && meridiem !== 'AM') handleChangeMeridiem('AM', e);\n      if (key === 'ArrowDown' && meridiem !== 'PM') handleChangeMeridiem('PM', e);\n      // regressive backspace functionality\n      if (key === 'Backspace') {\n        if (\n          e.target === e.currentTarget &&\n          (e.target as HTMLInputElement).selectionStart === 0 &&\n          (e.target as HTMLInputElement).selectionEnd === 0\n        ) {\n          e.preventDefault();\n          trackFocusMinuteInput();\n        } else if (meridiem?.length === 2) handleChangeMeridiem('', e);\n      }\n\n      // focus last fragment on fill with now\n      if ((ctrlKey || metaKey) && key === ';') trackFocusLastSegment();\n    },\n    [onHomeKeyDown, onEndKeyDown, meridiem, handleChangeMeridiem, trackFocusLastSegment, trackFocusMinuteInput],\n  );\n  const onMeridiemBlur: DSControlledDateTimePickerInternalsT.OnBlurFunc = useCallback(\n    (e: React.FocusEvent<HTMLInputElement>) => {\n      const newMeridiem = e?.target?.value?.toUpperCase?.();\n\n      if (newMeridiem.length === 1)\n        handleChangeMeridiem(`${newMeridiem}M`, e, {\n          isAutomaticFillTrigger: true,\n        });\n    },\n    [handleChangeMeridiem],\n  );\n\n  return useMemo(\n    () => ({\n      autoFocusHourInput,\n      disabled,\n      handleChangeHours,\n      onHoursFocus,\n      onHoursChange,\n      handleChangeMinutes,\n      onMinutesFocus,\n      onMinutesChange,\n      handleChangeMeridiem,\n      onMeridiemFocus,\n      onMeridiemChange,\n      onHoursBlur,\n      onMinutesBlur,\n      onMeridiemBlur,\n      onHoursKeyDown,\n      onMinutesKeyDown,\n      onMeridiemKeyDown,\n    }),\n    [\n      autoFocusHourInput,\n      disabled,\n      handleChangeHours,\n      onHoursFocus,\n      onHoursChange,\n      handleChangeMinutes,\n      onMinutesFocus,\n      onMinutesChange,\n      handleChangeMeridiem,\n      onMeridiemFocus,\n      onMeridiemChange,\n      onHoursBlur,\n      onMinutesBlur,\n      onMeridiemBlur,\n      onHoursKeyDown,\n      onMinutesKeyDown,\n      onMeridiemKeyDown,\n    ],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["/* eslint-disable complexity */\n/* eslint-disable max-statements */\n/* eslint-disable max-lines */\nimport { useCallback, useMemo, useContext } from 'react';\nimport { ControlledDateTimePickerContext } from '../../ControlledDateTimePickerCTX.js';\nimport { prependStringWithPlaceHolders } from '../../utils/stringHelpers.js';\nimport type { DSControlledDateTimePickerInternalsT } from '../../sharedTypes.js';\ninterface UseTimeInputsR {\n  autoFocusHourInput: boolean;\n  disabled: boolean;\n  handleChangeHours: DSControlledDateTimePickerInternalsT.HandleOnChangeFunc;\n  onHoursChange: DSControlledDateTimePickerInternalsT.OnChangeFunc;\n  handleChangeMinutes: DSControlledDateTimePickerInternalsT.HandleOnChangeFunc;\n  onMinutesChange: DSControlledDateTimePickerInternalsT.OnChangeFunc;\n  handleChangeMeridiem: DSControlledDateTimePickerInternalsT.HandleOnChangeFunc;\n  onMeridiemChange: DSControlledDateTimePickerInternalsT.OnChangeFunc;\n  onHoursFocus: DSControlledDateTimePickerInternalsT.OnFocusFunc;\n  onMinutesFocus: DSControlledDateTimePickerInternalsT.OnFocusFunc;\n  onMeridiemFocus: DSControlledDateTimePickerInternalsT.OnFocusFunc;\n  onHoursBlur: DSControlledDateTimePickerInternalsT.OnBlurFunc;\n  onMinutesBlur: DSControlledDateTimePickerInternalsT.OnBlurFunc;\n  onMeridiemBlur: DSControlledDateTimePickerInternalsT.OnBlurFunc;\n  onHoursKeyDown: DSControlledDateTimePickerInternalsT.OnKeyDown;\n  onMinutesKeyDown: DSControlledDateTimePickerInternalsT.OnKeyDown;\n  onMeridiemKeyDown: DSControlledDateTimePickerInternalsT.OnKeyDown;\n}\nexport const useTimeInputs = (): UseTimeInputsR => {\n  const {\n    props: { disabled, readOnly },\n    hours,\n    minutes,\n    meridiem,\n    withAnyRightController,\n    withAnyPicker,\n    withClearBtn,\n    isWithDateInputs,\n    autoFocusHourInput,\n    handleChangeHours,\n    handleChangeMinutes,\n    handleChangeMeridiem,\n    minutesInterval,\n    trackFocusFirstSegment,\n    trackFocusLastSegment,\n    trackFocusHourInput,\n    trackFocusMinuteInput,\n    trackFocusMeridiemInput,\n    trackFocusClearBtn,\n    trackFocusPicker,\n    trackFocusYearInput,\n  } = useContext(ControlledDateTimePickerContext);\n\n  const onHomeKeyDown = useCallback(() => {\n    trackFocusFirstSegment();\n  }, [trackFocusFirstSegment]);\n  const onEndKeyDown = useCallback(() => {\n    trackFocusLastSegment();\n  }, [trackFocusLastSegment]);\n\n  const onHoursFocus: DSControlledDateTimePickerInternalsT.OnFocusFunc = useCallback(() => {\n    trackFocusHourInput();\n  }, [trackFocusHourInput]);\n  const onHoursChange: DSControlledDateTimePickerInternalsT.OnChangeFunc = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      let newHours = e?.target?.value;\n      // converts hours 2~9 to 07~09\n      if (Number.parseInt(newHours, 10) > 1) newHours = prependStringWithPlaceHolders(newHours, 2);\n      handleChangeHours(newHours, e);\n      // auto-advance functionality:\n      if (newHours.length === 2) trackFocusMinuteInput();\n    },\n    [handleChangeHours, trackFocusMinuteInput],\n  );\n  const onHoursKeyDown: DSControlledDateTimePickerInternalsT.OnKeyDown = useCallback(\n    (e: React.KeyboardEvent<HTMLInputElement>) => {\n      if (readOnly) return;\n      const { key, ctrlKey, metaKey } = e;\n      const hoursStringConvertedToInteger = Number.parseInt(hours, 10);\n\n      if (['Home', 'End', 'ArrowUp', 'ArrowDown', ':'].includes(key)) e.preventDefault();\n      if (['Home', 'End', 'ArrowUp', 'ArrowDown', ':'].includes(key)) e.stopPropagation();\n      if (key === 'Home') onHomeKeyDown();\n      if (key === 'End') onEndKeyDown();\n      if (key === 'ArrowUp' || key === 'ArrowDown') {\n        const hoursInteger = Number.isNaN(hoursStringConvertedToInteger) ? 0 : hoursStringConvertedToInteger;\n        let newHours;\n        if (key === 'ArrowUp') newHours = hoursInteger + 1 <= 12 ? hoursInteger + 1 : hoursInteger;\n        else newHours = hoursInteger - 1 > 1 ? hoursInteger - 1 : 1;\n        newHours = prependStringWithPlaceHolders(`${newHours}`, 2);\n        handleChangeHours(newHours, e);\n      }\n      if (!Number.isNaN(hoursStringConvertedToInteger) && key === ':') {\n        let newHours = prependStringWithPlaceHolders(`${hoursStringConvertedToInteger}`, 2);\n        // 12-hours format: 00 is not allowed as a value for hours\n        if (newHours === '00') newHours = '01';\n        handleChangeHours(newHours, e);\n        // auto-advance functionality:\n        if (newHours.length === 2) trackFocusMinuteInput();\n      }\n\n      // regressive backspace functionality\n      if (\n        key === 'Backspace' &&\n        e.target === e.currentTarget &&\n        isWithDateInputs &&\n        (e.target as HTMLInputElement).selectionStart === 0 &&\n        (e.target as HTMLInputElement).selectionEnd === 0\n      ) {\n        e.preventDefault();\n\n        trackFocusYearInput();\n      }\n      // focus last fragment on fill with now\n      if ((ctrlKey || metaKey) && key === ';') trackFocusLastSegment();\n    },\n    [\n      hours,\n      isWithDateInputs,\n      trackFocusYearInput,\n      onHomeKeyDown,\n      onEndKeyDown,\n      trackFocusLastSegment,\n      trackFocusMinuteInput,\n      handleChangeHours,\n      readOnly,\n    ],\n  );\n  const onHoursBlur: DSControlledDateTimePickerInternalsT.OnBlurFunc = useCallback(\n    (e: React.FocusEvent<HTMLInputElement>) => {\n      const newHours = e?.target?.value;\n      if (newHours === '0') handleChangeHours('01', e, { isAutomaticFillTrigger: true });\n      else if (newHours.length > 0 && newHours.length < 2)\n        handleChangeHours(prependStringWithPlaceHolders(newHours, 2), e, {\n          isAutomaticFillTrigger: true,\n        });\n    },\n    [handleChangeHours],\n  );\n\n  const onMinutesFocus: DSControlledDateTimePickerInternalsT.OnFocusFunc = useCallback(() => {\n    trackFocusMinuteInput();\n  }, [trackFocusMinuteInput]);\n  const onMinutesChange: DSControlledDateTimePickerInternalsT.OnChangeFunc = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      let newMinutes = e?.target?.value;\n      // converts minutes 7~9 to 07~09\n      if (Number.parseInt(newMinutes, 10) > 6) newMinutes = prependStringWithPlaceHolders(newMinutes, 2);\n      handleChangeMinutes(newMinutes, e);\n\n      // auto-advance functionality:\n      if (newMinutes.length === 2) trackFocusMeridiemInput();\n    },\n    [handleChangeMinutes, trackFocusMeridiemInput],\n  );\n  const onMinutesKeyDown: DSControlledDateTimePickerInternalsT.OnKeyDown = useCallback(\n    (e: React.KeyboardEvent<HTMLInputElement>) => {\n      if (readOnly) return;\n      const { key, ctrlKey, metaKey } = e;\n      const minutesStringConvertedToInteger = Number.parseInt(minutes, 10);\n      if (['Home', 'End', 'ArrowUp', 'ArrowDown', ' '].includes(key)) e.preventDefault();\n      if (['Home', 'End', 'ArrowUp', 'ArrowDown', ' '].includes(key)) e.stopPropagation();\n\n      if (key === 'Home') onHomeKeyDown();\n      if (key === 'End') onEndKeyDown();\n      if (key === 'ArrowUp' || key === 'ArrowDown') {\n        const minutesInteger = Number.isNaN(minutesStringConvertedToInteger) ? 0 : minutesStringConvertedToInteger;\n        let newMinutes;\n        if (key === 'ArrowUp')\n          newMinutes = minutesInteger + minutesInterval <= 59 ? minutesInteger + minutesInterval : minutesInteger;\n        else newMinutes = minutesInteger - minutesInterval > 0 ? minutesInteger - minutesInterval : 0;\n        newMinutes = prependStringWithPlaceHolders(`${newMinutes}`, 2);\n        handleChangeMinutes(newMinutes, e);\n      }\n      if (!Number.isNaN(minutesStringConvertedToInteger) && key === ' ') {\n        const newMinutes = prependStringWithPlaceHolders(`${minutesStringConvertedToInteger}`, 2);\n        handleChangeMinutes(newMinutes, e);\n        // auto-advance functionality:\n        if (newMinutes.length === 2) trackFocusMeridiemInput();\n      }\n\n      // regressive backspace functionality\n      if (\n        key === 'Backspace' &&\n        e.target === e.currentTarget &&\n        (e.target as HTMLInputElement).selectionStart === 0 &&\n        (e.target as HTMLInputElement).selectionEnd === 0\n      ) {\n        e.preventDefault();\n\n        trackFocusHourInput();\n      }\n\n      // focus last fragment on fill with now\n      if ((ctrlKey || metaKey) && key === ';') trackFocusLastSegment();\n    },\n    [\n      minutes,\n      onHomeKeyDown,\n      onEndKeyDown,\n      trackFocusLastSegment,\n      minutesInterval,\n      handleChangeMinutes,\n      trackFocusMeridiemInput,\n      trackFocusHourInput,\n      readOnly,\n    ],\n  );\n  const onMinutesBlur: DSControlledDateTimePickerInternalsT.OnBlurFunc = useCallback(\n    (e: React.FocusEvent<HTMLInputElement>) => {\n      const newMinutes = e?.target?.value;\n      if (newMinutes.length > 0 && newMinutes.length < 2)\n        handleChangeMinutes(prependStringWithPlaceHolders(newMinutes, 2), e, {\n          isAutomaticFillTrigger: true,\n        });\n    },\n    [handleChangeMinutes],\n  );\n\n  const onMeridiemFocus: DSControlledDateTimePickerInternalsT.OnFocusFunc = useCallback(() => {\n    trackFocusMeridiemInput();\n  }, [trackFocusMeridiemInput]);\n  const onMeridiemChange: DSControlledDateTimePickerInternalsT.OnChangeFunc = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      let newMeridiem = e?.target?.value?.toUpperCase?.();\n      // if new value is length 1,\n      //   if previous value was empty, auto-complete\n      //   if previous value was not empty, set to empty (regressive backspace)\n      if (newMeridiem.length === 1)\n        if (meridiem === '') newMeridiem = `${newMeridiem}M`;\n        else newMeridiem = '';\n      handleChangeMeridiem(newMeridiem, e);\n      // auto-advance functionality:\n      if (newMeridiem.length === 2 && withAnyRightController) {\n        if (withClearBtn) trackFocusClearBtn();\n        else if (withAnyPicker) trackFocusPicker();\n      }\n    },\n    [\n      meridiem,\n      handleChangeMeridiem,\n      withAnyRightController,\n      withClearBtn,\n      trackFocusClearBtn,\n      withAnyPicker,\n      trackFocusPicker,\n    ],\n  );\n  const onMeridiemKeyDown: DSControlledDateTimePickerInternalsT.OnKeyDown = useCallback(\n    (e: React.KeyboardEvent<HTMLInputElement>) => {\n      if (readOnly) return;\n      const { key, ctrlKey, metaKey } = e;\n\n      if (['Home', 'End', 'ArrowUp', 'ArrowDown'].includes(key)) e.preventDefault();\n      if (['Home', 'End', 'ArrowUp', 'ArrowDown'].includes(key)) e.stopPropagation();\n\n      if (key === 'Home') onHomeKeyDown();\n      if (key === 'End') onEndKeyDown();\n      if (key === 'ArrowUp' && meridiem !== 'AM') handleChangeMeridiem('AM', e);\n      if (key === 'ArrowDown' && meridiem !== 'PM') handleChangeMeridiem('PM', e);\n      // regressive backspace functionality\n      if (key === 'Backspace') {\n        if (\n          e.target === e.currentTarget &&\n          (e.target as HTMLInputElement).selectionStart === 0 &&\n          (e.target as HTMLInputElement).selectionEnd === 0\n        ) {\n          e.preventDefault();\n          trackFocusMinuteInput();\n        } else if (meridiem?.length === 2) handleChangeMeridiem('', e);\n      }\n\n      // focus last fragment on fill with now\n      if ((ctrlKey || metaKey) && key === ';') trackFocusLastSegment();\n    },\n    [\n      onHomeKeyDown,\n      onEndKeyDown,\n      meridiem,\n      handleChangeMeridiem,\n      trackFocusLastSegment,\n      trackFocusMinuteInput,\n      readOnly,\n    ],\n  );\n  const onMeridiemBlur: DSControlledDateTimePickerInternalsT.OnBlurFunc = useCallback(\n    (e: React.FocusEvent<HTMLInputElement>) => {\n      const newMeridiem = e?.target?.value?.toUpperCase?.();\n\n      if (newMeridiem.length === 1)\n        handleChangeMeridiem(`${newMeridiem}M`, e, {\n          isAutomaticFillTrigger: true,\n        });\n    },\n    [handleChangeMeridiem],\n  );\n\n  return useMemo(\n    () => ({\n      autoFocusHourInput,\n      disabled,\n      handleChangeHours,\n      onHoursFocus,\n      onHoursChange,\n      handleChangeMinutes,\n      onMinutesFocus,\n      onMinutesChange,\n      handleChangeMeridiem,\n      onMeridiemFocus,\n      onMeridiemChange,\n      onHoursBlur,\n      onMinutesBlur,\n      onMeridiemBlur,\n      onHoursKeyDown,\n      onMinutesKeyDown,\n      onMeridiemKeyDown,\n    }),\n    [\n      autoFocusHourInput,\n      disabled,\n      handleChangeHours,\n      onHoursFocus,\n      onHoursChange,\n      handleChangeMinutes,\n      onMinutesFocus,\n      onMinutesChange,\n      handleChangeMeridiem,\n      onMeridiemFocus,\n      onMeridiemChange,\n      onHoursBlur,\n      onMinutesBlur,\n      onMeridiemBlur,\n      onHoursKeyDown,\n      onMinutesKeyDown,\n      onMeridiemKeyDown,\n    ],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,mBAAiD;AACjD,yCAAgD;AAChD,2BAA8C;AAqBvC,MAAM,gBAAgB,MAAsB;AACjD,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,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,kEAA+B;AAE9C,QAAM,oBAAgB,0BAAY,MAAM;AACtC,2BAAuB;AAAA,EACzB,GAAG,CAAC,sBAAsB,CAAC;AAC3B,QAAM,mBAAe,0BAAY,MAAM;AACrC,0BAAsB;AAAA,EACxB,GAAG,CAAC,qBAAqB,CAAC;AAE1B,QAAM,mBAAiE,0BAAY,MAAM;AACvF,wBAAoB;AAAA,EACtB,GAAG,CAAC,mBAAmB,CAAC;AACxB,QAAM,oBAAmE;AAAA,IACvE,CAAC,MAA2C;AAC1C,UAAI,WAAW,GAAG,QAAQ;AAE1B,UAAI,OAAO,SAAS,UAAU,EAAE,IAAI,EAAG,gBAAW,oDAA8B,UAAU,CAAC;AAC3F,wBAAkB,UAAU,CAAC;AAE7B,UAAI,SAAS,WAAW,EAAG,uBAAsB;AAAA,IACnD;AAAA,IACA,CAAC,mBAAmB,qBAAqB;AAAA,EAC3C;AACA,QAAM,qBAAiE;AAAA,IACrE,CAAC,MAA6C;AAC5C,UAAI,SAAU;AACd,YAAM,EAAE,KAAK,SAAS,QAAQ,IAAI;AAClC,YAAM,gCAAgC,OAAO,SAAS,OAAO,EAAE;AAE/D,UAAI,CAAC,QAAQ,OAAO,WAAW,aAAa,GAAG,EAAE,SAAS,GAAG,EAAG,GAAE,eAAe;AACjF,UAAI,CAAC,QAAQ,OAAO,WAAW,aAAa,GAAG,EAAE,SAAS,GAAG,EAAG,GAAE,gBAAgB;AAClF,UAAI,QAAQ,OAAQ,eAAc;AAClC,UAAI,QAAQ,MAAO,cAAa;AAChC,UAAI,QAAQ,aAAa,QAAQ,aAAa;AAC5C,cAAM,eAAe,OAAO,MAAM,6BAA6B,IAAI,IAAI;AACvE,YAAI;AACJ,YAAI,QAAQ,UAAW,YAAW,eAAe,KAAK,KAAK,eAAe,IAAI;AAAA,YACzE,YAAW,eAAe,IAAI,IAAI,eAAe,IAAI;AAC1D,uBAAW,oDAA8B,GAAG,QAAQ,IAAI,CAAC;AACzD,0BAAkB,UAAU,CAAC;AAAA,MAC/B;AACA,UAAI,CAAC,OAAO,MAAM,6BAA6B,KAAK,QAAQ,KAAK;AAC/D,YAAI,eAAW,oDAA8B,GAAG,6BAA6B,IAAI,CAAC;AAElF,YAAI,aAAa,KAAM,YAAW;AAClC,0BAAkB,UAAU,CAAC;AAE7B,YAAI,SAAS,WAAW,EAAG,uBAAsB;AAAA,MACnD;AAGA,UACE,QAAQ,eACR,EAAE,WAAW,EAAE,iBACf,oBACC,EAAE,OAA4B,mBAAmB,KACjD,EAAE,OAA4B,iBAAiB,GAChD;AACA,UAAE,eAAe;AAEjB,4BAAoB;AAAA,MACtB;AAEA,WAAK,WAAW,YAAY,QAAQ,IAAK,uBAAsB;AAAA,IACjE;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACA,QAAM,kBAA+D;AAAA,IACnE,CAAC,MAA0C;AACzC,YAAM,WAAW,GAAG,QAAQ;AAC5B,UAAI,aAAa,IAAK,mBAAkB,MAAM,GAAG,EAAE,wBAAwB,KAAK,CAAC;AAAA,eACxE,SAAS,SAAS,KAAK,SAAS,SAAS;AAChD,8BAAkB,oDAA8B,UAAU,CAAC,GAAG,GAAG;AAAA,UAC/D,wBAAwB;AAAA,QAC1B,CAAC;AAAA,IACL;AAAA,IACA,CAAC,iBAAiB;AAAA,EACpB;AAEA,QAAM,qBAAmE,0BAAY,MAAM;AACzF,0BAAsB;AAAA,EACxB,GAAG,CAAC,qBAAqB,CAAC;AAC1B,QAAM,sBAAqE;AAAA,IACzE,CAAC,MAA2C;AAC1C,UAAI,aAAa,GAAG,QAAQ;AAE5B,UAAI,OAAO,SAAS,YAAY,EAAE,IAAI,EAAG,kBAAa,oDAA8B,YAAY,CAAC;AACjG,0BAAoB,YAAY,CAAC;AAGjC,UAAI,WAAW,WAAW,EAAG,yBAAwB;AAAA,IACvD;AAAA,IACA,CAAC,qBAAqB,uBAAuB;AAAA,EAC/C;AACA,QAAM,uBAAmE;AAAA,IACvE,CAAC,MAA6C;AAC5C,UAAI,SAAU;AACd,YAAM,EAAE,KAAK,SAAS,QAAQ,IAAI;AAClC,YAAM,kCAAkC,OAAO,SAAS,SAAS,EAAE;AACnE,UAAI,CAAC,QAAQ,OAAO,WAAW,aAAa,GAAG,EAAE,SAAS,GAAG,EAAG,GAAE,eAAe;AACjF,UAAI,CAAC,QAAQ,OAAO,WAAW,aAAa,GAAG,EAAE,SAAS,GAAG,EAAG,GAAE,gBAAgB;AAElF,UAAI,QAAQ,OAAQ,eAAc;AAClC,UAAI,QAAQ,MAAO,cAAa;AAChC,UAAI,QAAQ,aAAa,QAAQ,aAAa;AAC5C,cAAM,iBAAiB,OAAO,MAAM,+BAA+B,IAAI,IAAI;AAC3E,YAAI;AACJ,YAAI,QAAQ;AACV,uBAAa,iBAAiB,mBAAmB,KAAK,iBAAiB,kBAAkB;AAAA,YACtF,cAAa,iBAAiB,kBAAkB,IAAI,iBAAiB,kBAAkB;AAC5F,yBAAa,oDAA8B,GAAG,UAAU,IAAI,CAAC;AAC7D,4BAAoB,YAAY,CAAC;AAAA,MACnC;AACA,UAAI,CAAC,OAAO,MAAM,+BAA+B,KAAK,QAAQ,KAAK;AACjE,cAAM,iBAAa,oDAA8B,GAAG,+BAA+B,IAAI,CAAC;AACxF,4BAAoB,YAAY,CAAC;AAEjC,YAAI,WAAW,WAAW,EAAG,yBAAwB;AAAA,MACvD;AAGA,UACE,QAAQ,eACR,EAAE,WAAW,EAAE,iBACd,EAAE,OAA4B,mBAAmB,KACjD,EAAE,OAA4B,iBAAiB,GAChD;AACA,UAAE,eAAe;AAEjB,4BAAoB;AAAA,MACtB;AAGA,WAAK,WAAW,YAAY,QAAQ,IAAK,uBAAsB;AAAA,IACjE;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACA,QAAM,oBAAiE;AAAA,IACrE,CAAC,MAA0C;AACzC,YAAM,aAAa,GAAG,QAAQ;AAC9B,UAAI,WAAW,SAAS,KAAK,WAAW,SAAS;AAC/C,gCAAoB,oDAA8B,YAAY,CAAC,GAAG,GAAG;AAAA,UACnE,wBAAwB;AAAA,QAC1B,CAAC;AAAA,IACL;AAAA,IACA,CAAC,mBAAmB;AAAA,EACtB;AAEA,QAAM,sBAAoE,0BAAY,MAAM;AAC1F,4BAAwB;AAAA,EAC1B,GAAG,CAAC,uBAAuB,CAAC;AAC5B,QAAM,uBAAsE;AAAA,IAC1E,CAAC,MAA2C;AAC1C,UAAI,cAAc,GAAG,QAAQ,OAAO,cAAc;AAIlD,UAAI,YAAY,WAAW;AACzB,YAAI,aAAa,GAAI,eAAc,GAAG,WAAW;AAAA,YAC5C,eAAc;AACrB,2BAAqB,aAAa,CAAC;AAEnC,UAAI,YAAY,WAAW,KAAK,wBAAwB;AACtD,YAAI,aAAc,oBAAmB;AAAA,iBAC5B,cAAe,kBAAiB;AAAA,MAC3C;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACA,QAAM,wBAAoE;AAAA,IACxE,CAAC,MAA6C;AAC5C,UAAI,SAAU;AACd,YAAM,EAAE,KAAK,SAAS,QAAQ,IAAI;AAElC,UAAI,CAAC,QAAQ,OAAO,WAAW,WAAW,EAAE,SAAS,GAAG,EAAG,GAAE,eAAe;AAC5E,UAAI,CAAC,QAAQ,OAAO,WAAW,WAAW,EAAE,SAAS,GAAG,EAAG,GAAE,gBAAgB;AAE7E,UAAI,QAAQ,OAAQ,eAAc;AAClC,UAAI,QAAQ,MAAO,cAAa;AAChC,UAAI,QAAQ,aAAa,aAAa,KAAM,sBAAqB,MAAM,CAAC;AACxE,UAAI,QAAQ,eAAe,aAAa,KAAM,sBAAqB,MAAM,CAAC;AAE1E,UAAI,QAAQ,aAAa;AACvB,YACE,EAAE,WAAW,EAAE,iBACd,EAAE,OAA4B,mBAAmB,KACjD,EAAE,OAA4B,iBAAiB,GAChD;AACA,YAAE,eAAe;AACjB,gCAAsB;AAAA,QACxB,WAAW,UAAU,WAAW,EAAG,sBAAqB,IAAI,CAAC;AAAA,MAC/D;AAGA,WAAK,WAAW,YAAY,QAAQ,IAAK,uBAAsB;AAAA,IACjE;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACA,QAAM,qBAAkE;AAAA,IACtE,CAAC,MAA0C;AACzC,YAAM,cAAc,GAAG,QAAQ,OAAO,cAAc;AAEpD,UAAI,YAAY,WAAW;AACzB,6BAAqB,GAAG,WAAW,KAAK,GAAG;AAAA,UACzC,wBAAwB;AAAA,QAC1B,CAAC;AAAA,IACL;AAAA,IACA,CAAC,oBAAoB;AAAA,EACvB;AAEA,aAAO;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;",
   "names": []
 }

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

@@ -60,6 +60,7 @@ const defaultProps = {
   minutesInterval: 1,
   isClearable: false,
   disabled: false,
+  readOnly: false,
   hasError: false,
   autoFocus: false,
   preventCloseOnSelection: false
@@ -83,6 +84,7 @@ const propTypes = {
     "time-picker-controller-only"
   ]).description("Type of time form control to use").defaultValue("full-date-time"),
   disabled: import_ds_props_helpers.PropTypes.bool.description("wheter or not the input is disabled").defaultValue(false),
+  readOnly: import_ds_props_helpers.PropTypes.bool.description("Makes the component non-editable while remaining accessible").defaultValue(false),
   isClearable: import_ds_props_helpers.PropTypes.bool.description("with or without clearable button").defaultValue(false),
   dateTime: import_ds_props_helpers.PropTypes.string.description("when using date-time types, this is the value of the controller"),
   date: import_ds_props_helpers.PropTypes.string.description("when using date types, this is the value of the controller"),

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 React from 'react';\nimport {\n  PropTypes,\n  globalAttributesPropTypes,\n  xstyledPropTypes,\n  getPropsPerDatatestIdPropTypes,\n  getPropsPerSlotPropTypes,\n  type GlobalAttributesT,\n  type XstyledProps,\n  type ValidationMap,\n} from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { ControlledDateTimePickerDatatestid } from './ControlledDateTimePickerDatatestid.js';\nimport {\n  DSControlledDateTimePickerName,\n  DSControlledDateTimePickerSlotsFlatten,\n} from './ControlledDateTimePickerDefinitions.js';\n// eslint-disable-next-line @typescript-eslint/no-empty-function\nconst noop = (): void => {};\nconst defaultReturnFalse = (): false => false;\n\nexport declare namespace DSControlledDateTimePickerT {\n  type PropsT<D, R, O, E> = Partial<D> &\n    R &\n    O &\n    Omit<GlobalAttributesT<E>, keyof D | keyof R | keyof O> &\n    Omit<XstyledProps, keyof D | keyof R | keyof O>;\n\n  type InternalPropsT<D, R, O, E> = D &\n    R &\n    O &\n    Omit<GlobalAttributesT<E>, keyof D | keyof R | keyof O> &\n    Omit<XstyledProps, keyof D | keyof R | keyof O>;\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 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: TypescriptHelpersT.VoidGenericFunc;\n    onPickerClose: TypescriptHelpersT.VoidGenericFunc;\n    getIsDisabledDay: TypescriptHelpersT.BooleanGetter<string>;\n    getIsOutOfRangeDay: TypescriptHelpersT.BooleanGetter<string>;\n    getIsStartRangeDay: TypescriptHelpersT.BooleanGetter<string>;\n    getIsDayInRange: TypescriptHelpersT.BooleanGetter<string>;\n    getIsEndRangeDay: TypescriptHelpersT.BooleanGetter<string>;\n    isClearable: boolean;\n    disabled: boolean;\n    hasError: boolean;\n    autoFocus: boolean;\n    preventCloseOnSelection: boolean;\n  }\n  export interface OptionalDatePickerProps\n    extends TypescriptHelpersT.PropsForGlobalOnSlots<\n      typeof DSControlledDateTimePickerName,\n      typeof DSControlledDateTimePickerSlotsFlatten\n    > {\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?: TypescriptHelpersT.WCAGTabIndex;\n    fromDate?: string;\n    toDate?: string;\n  }\n  export interface RequiredDatePickerProps {\n    type: 'full-date' | 'date-inputs' | 'date-picker' | 'date-picker-controller-only';\n    date: string;\n    onDateChange: OnDateChange;\n  }\n  export type DatePickerProps = PropsT<\n    Partial<DefaultDateProps>,\n    RequiredDatePickerProps,\n    OptionalDatePickerProps,\n    HTMLDivElement\n  >;\n\n  export type InternalDatePickerProps = InternalPropsT<\n    DefaultDateProps,\n    RequiredDatePickerProps,\n    OptionalDatePickerProps,\n    HTMLDivElement\n  >;\n\n  /* ------------------------ ------------------ ------------------------*/\n  /* ------------------------ TIME CONFIGURATION ------------------------*/\n  /* ------------------------ ------------------ ------------------------*/\n\n  export interface DefaultTimeProps {\n    onHourChange: AppOnInputChange;\n    onMinuteChange: AppOnInputChange;\n    onMeridiemChange: AppOnInputChange;\n    onPickerOpen: TypescriptHelpersT.VoidGenericFunc;\n    onPickerClose: TypescriptHelpersT.VoidGenericFunc;\n    getIsDisabledTime: TypescriptHelpersT.BooleanGetter<string>;\n    minutesInterval: number;\n    isClearable: boolean;\n    disabled: boolean;\n    hasError: boolean;\n    autoFocus: boolean;\n    preventCloseOnSelection: boolean;\n  }\n  export interface OptionalTimePickerProps\n    extends TypescriptHelpersT.PropsForGlobalOnSlots<\n      typeof DSControlledDateTimePickerName,\n      typeof DSControlledDateTimePickerSlotsFlatten\n    > {\n    pickerFooterMsg?: string;\n    onTimeWheelOpenStartingTime?: string;\n    innerRef?:\n      | React.MutableRefObject<HTMLInputElement | HTMLButtonElement | null>\n      | ((ref: HTMLInputElement | HTMLButtonElement | null) => void);\n    tabIndex?: TypescriptHelpersT.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 = PropsT<\n    Partial<DefaultTimeProps>,\n    RequiredTimePickerProps,\n    OptionalTimePickerProps,\n    HTMLDivElement\n  >;\n\n  export type InternalTimePickerProps = InternalPropsT<\n    DefaultTimeProps,\n    RequiredTimePickerProps,\n    OptionalTimePickerProps,\n    HTMLDivElement\n  >;\n\n  /* -------------------- ---------------------- ------------------------*/\n  /* -------------------- DATETIME CONFIGURATION ------------------------*/\n  /* -------------------- ---------------------- ------------------------*/\n\n  export type DefaultDateTimeProps = DefaultTimeProps &\n    DefaultDateProps & {\n      onDateChange: OnDateChange;\n      onTimeChange: OnTimeChange;\n    };\n  export type OptionalDateTimeProps = OptionalTimePickerProps &\n    OptionalDatePickerProps &\n    TypescriptHelpersT.PropsForGlobalOnSlots<\n      typeof DSControlledDateTimePickerName,\n      typeof DSControlledDateTimePickerSlotsFlatten\n    >;\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 = PropsT<\n    Partial<DefaultDateTimeProps>,\n    RequiredDateTimeProps,\n    OptionalDateTimeProps,\n    HTMLDivElement\n  >;\n  export type InternalDateTimePickerProps = InternalPropsT<\n    DefaultDateTimeProps,\n    RequiredDateTimeProps,\n    OptionalDateTimeProps,\n    HTMLDivElement\n  >;\n\n  /* ---------------------- ------------------- -------------------------*/\n  /* ---------------------- FINAL CONFIGURATION -------------------------*/\n  /* ---------------------- ------------------- -------------------------*/\n  export type DefaultProps = DefaultDateTimeProps & { type: 'full-date-time' };\n\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  ...getPropsPerSlotPropTypes(DSControlledDateTimePickerName, DSControlledDateTimePickerSlotsFlatten),\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  fromDate: PropTypes.string.description(\n    `Strictly formatted string representing user's selected \"from\" date, this prop comes from the DateRangePicker and it's used internally for the range selection announcement`,\n  ),\n  toDate: PropTypes.string.description(\n    `Strictly formatted string representing user's selected \"to\" date, this prop comes from the DateRangePicker and it's used internally for the range selection announcement`,\n  ),\n  hasError: PropTypes.bool.description('whether the input has error or not').defaultValue(false),\n} as unknown as ValidationMap<DSControlledDateTimePickerT.Props>;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["/* eslint-disable max-lines */\nimport type React from 'react';\nimport {\n  PropTypes,\n  globalAttributesPropTypes,\n  xstyledPropTypes,\n  getPropsPerDatatestIdPropTypes,\n  getPropsPerSlotPropTypes,\n  type GlobalAttributesT,\n  type XstyledProps,\n  type ValidationMap,\n} from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { ControlledDateTimePickerDatatestid } from './ControlledDateTimePickerDatatestid.js';\nimport {\n  DSControlledDateTimePickerName,\n  DSControlledDateTimePickerSlotsFlatten,\n} from './ControlledDateTimePickerDefinitions.js';\n// eslint-disable-next-line @typescript-eslint/no-empty-function\nconst noop = (): void => {};\nconst defaultReturnFalse = (): false => false;\n\nexport declare namespace DSControlledDateTimePickerT {\n  type PropsT<D, R, O, E> = Partial<D> &\n    R &\n    O &\n    Omit<GlobalAttributesT<E>, keyof D | keyof R | keyof O> &\n    Omit<XstyledProps, keyof D | keyof R | keyof O>;\n\n  type InternalPropsT<D, R, O, E> = D &\n    R &\n    O &\n    Omit<GlobalAttributesT<E>, keyof D | keyof R | keyof O> &\n    Omit<XstyledProps, keyof D | keyof R | keyof O>;\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 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: TypescriptHelpersT.VoidGenericFunc;\n    onPickerClose: TypescriptHelpersT.VoidGenericFunc;\n    getIsDisabledDay: TypescriptHelpersT.BooleanGetter<string>;\n    getIsOutOfRangeDay: TypescriptHelpersT.BooleanGetter<string>;\n    getIsStartRangeDay: TypescriptHelpersT.BooleanGetter<string>;\n    getIsDayInRange: TypescriptHelpersT.BooleanGetter<string>;\n    getIsEndRangeDay: TypescriptHelpersT.BooleanGetter<string>;\n    isClearable: boolean;\n    disabled: boolean;\n    readOnly: boolean;\n    hasError: boolean;\n    autoFocus: boolean;\n    preventCloseOnSelection: boolean;\n  }\n  export interface OptionalDatePickerProps\n    extends TypescriptHelpersT.PropsForGlobalOnSlots<\n      typeof DSControlledDateTimePickerName,\n      typeof DSControlledDateTimePickerSlotsFlatten\n    > {\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?: TypescriptHelpersT.WCAGTabIndex;\n    fromDate?: string;\n    toDate?: string;\n  }\n  export interface RequiredDatePickerProps {\n    type: 'full-date' | 'date-inputs' | 'date-picker' | 'date-picker-controller-only';\n    date: string;\n    onDateChange: OnDateChange;\n  }\n  export type DatePickerProps = PropsT<\n    Partial<DefaultDateProps>,\n    RequiredDatePickerProps,\n    OptionalDatePickerProps,\n    HTMLDivElement\n  >;\n\n  export type InternalDatePickerProps = InternalPropsT<\n    DefaultDateProps,\n    RequiredDatePickerProps,\n    OptionalDatePickerProps,\n    HTMLDivElement\n  >;\n\n  /* ------------------------ ------------------ ------------------------*/\n  /* ------------------------ TIME CONFIGURATION ------------------------*/\n  /* ------------------------ ------------------ ------------------------*/\n\n  export interface DefaultTimeProps {\n    onHourChange: AppOnInputChange;\n    onMinuteChange: AppOnInputChange;\n    onMeridiemChange: AppOnInputChange;\n    onPickerOpen: TypescriptHelpersT.VoidGenericFunc;\n    onPickerClose: TypescriptHelpersT.VoidGenericFunc;\n    getIsDisabledTime: TypescriptHelpersT.BooleanGetter<string>;\n    minutesInterval: number;\n    isClearable: boolean;\n    disabled: boolean;\n    readOnly: boolean;\n    hasError: boolean;\n    autoFocus: boolean;\n    preventCloseOnSelection: boolean;\n  }\n  export interface OptionalTimePickerProps\n    extends TypescriptHelpersT.PropsForGlobalOnSlots<\n      typeof DSControlledDateTimePickerName,\n      typeof DSControlledDateTimePickerSlotsFlatten\n    > {\n    pickerFooterMsg?: string;\n    onTimeWheelOpenStartingTime?: string;\n    innerRef?:\n      | React.MutableRefObject<HTMLInputElement | HTMLButtonElement | null>\n      | ((ref: HTMLInputElement | HTMLButtonElement | null) => void);\n    tabIndex?: TypescriptHelpersT.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 = PropsT<\n    Partial<DefaultTimeProps>,\n    RequiredTimePickerProps,\n    OptionalTimePickerProps,\n    HTMLDivElement\n  >;\n\n  export type InternalTimePickerProps = InternalPropsT<\n    DefaultTimeProps,\n    RequiredTimePickerProps,\n    OptionalTimePickerProps,\n    HTMLDivElement\n  >;\n\n  /* -------------------- ---------------------- ------------------------*/\n  /* -------------------- DATETIME CONFIGURATION ------------------------*/\n  /* -------------------- ---------------------- ------------------------*/\n\n  export type DefaultDateTimeProps = DefaultTimeProps &\n    DefaultDateProps & {\n      onDateChange: OnDateChange;\n      onTimeChange: OnTimeChange;\n    };\n  export type OptionalDateTimeProps = OptionalTimePickerProps &\n    OptionalDatePickerProps &\n    TypescriptHelpersT.PropsForGlobalOnSlots<\n      typeof DSControlledDateTimePickerName,\n      typeof DSControlledDateTimePickerSlotsFlatten\n    >;\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 = PropsT<\n    Partial<DefaultDateTimeProps>,\n    RequiredDateTimeProps,\n    OptionalDateTimeProps,\n    HTMLDivElement\n  >;\n  export type InternalDateTimePickerProps = InternalPropsT<\n    DefaultDateTimeProps,\n    RequiredDateTimeProps,\n    OptionalDateTimeProps,\n    HTMLDivElement\n  >;\n\n  /* ---------------------- ------------------- -------------------------*/\n  /* ---------------------- FINAL CONFIGURATION -------------------------*/\n  /* ---------------------- ------------------- -------------------------*/\n  export type DefaultProps = DefaultDateTimeProps & { type: 'full-date-time' };\n\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  readOnly: false,\n  hasError: false,\n  autoFocus: false,\n  preventCloseOnSelection: false,\n};\n\nexport const propTypes = {\n  ...getPropsPerSlotPropTypes(DSControlledDateTimePickerName, DSControlledDateTimePickerSlotsFlatten),\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  readOnly: PropTypes.bool\n    .description('Makes the component non-editable while remaining accessible')\n    .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  fromDate: PropTypes.string.description(\n    `Strictly formatted string representing user's selected \"from\" date, this prop comes from the DateRangePicker and it's used internally for the range selection announcement`,\n  ),\n  toDate: PropTypes.string.description(\n    `Strictly formatted string representing user's selected \"to\" date, this prop comes from the DateRangePicker and it's used internally for the range selection announcement`,\n  ),\n  hasError: PropTypes.bool.description('whether the input has error or not').defaultValue(false),\n} as unknown as ValidationMap<DSControlledDateTimePickerT.Props>;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/cjs/typescript-testing/typescript-date-time-picker-valid.js

@@ -45,6 +45,7 @@ const testPropsAsSyntax = {
 const testCompleteDefaults = {
   autoFocus: false,
   disabled: false,
+  readOnly: false,
   getIsDayInRange: (day) => true,
   getIsDisabledDay: (day) => false,
   getIsDisabledTime: (time) => false,

package/dist/cjs/typescript-testing/typescript-date-time-picker-valid.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/typescript-testing/typescript-date-time-picker-valid.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\n// eslint-disable-line no-console\nimport { DSControlledDateTimePicker } from '../index.js';\nimport type { DSControlledDateTimePickerT } from '../index.js';\n\n// test we expose the namespace and the namespace follows our deliverable conventions\ntype ComponentPropsForApp = DSControlledDateTimePickerT.DateTimePickerProps;\ntype ComponentPropsInternals = DSControlledDateTimePickerT.InternalDateTimePickerProps;\ntype ComponentPropsDefaultProps = DSControlledDateTimePickerT.DefaultDateTimeProps;\ntype ComponentPropsOptionalProps = DSControlledDateTimePickerT.OptionalDateTimeProps;\ntype ComponentPropsRequiredProps = DSControlledDateTimePickerT.RequiredDateTimeProps;\n\nconst testRequiredProps: ComponentPropsRequiredProps = {\n  dateTime: '10/07/2023',\n  onDateTimeChange: (dateTime: string) => {},\n  type: 'full-date-time',\n};\nconst testOptionalProps: ComponentPropsOptionalProps = {};\n\n// difference Props and InternalProps is that InternalProps has all the default props filled in\n//  Props allows for partial defaults\nconst testPartialDefaults: Partial<ComponentPropsDefaultProps> = {};\nconst testProps: ComponentPropsForApp = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testPartialDefaults,\n};\nconst testPropsAsSyntax = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testPartialDefaults,\n} as ComponentPropsForApp;\n// InternalProps requires all defaults to be filled in\nconst testCompleteDefaults: Required<ComponentPropsDefaultProps> = {\n  autoFocus: false,\n  disabled: false,\n  getIsDayInRange: (day: string) => true,\n  getIsDisabledDay: (day: string) => false,\n  getIsDisabledTime: (time: string) => false,\n  getIsEndRangeDay: (day: string) => false,\n  getIsStartRangeDay: (day: string) => false,\n  getIsOutOfRangeDay: (day: string) => false,\n  hasError: false,\n  isClearable: false,\n  minutesInterval: 1,\n  onDateChange: (date: string) => {},\n  onTimeChange: (time: string) => {},\n  onDayChange: (day: string) => {},\n  onMonthChange: (month: string) => {},\n  onYearChange: (year: string) => {},\n  onHourChange: (hour: string) => {},\n  onMinuteChange: (minute: string) => {},\n  onMeridiemChange: (meridiem: string) => {},\n  onPickerClose: () => {},\n  onPickerOpen: () => {},\n  preventCloseOnSelection: false,\n};\nconst testInternalProps: ComponentPropsInternals = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testCompleteDefaults,\n};\nconst testInternalPropsAsSyntax = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testCompleteDefaults,\n} as ComponentPropsInternals;\n\n// using the explicit type definition, if there is an error, it will be marked on the key that is wrong\nconst testExplicitDefinition: ComponentPropsForApp = {\n  dateTime: '10/07/2023',\n  onDateTimeChange: (dateTime: string) => {},\n  type: 'full-date-time',\n};\n\n// using the \"as\" syntax, if there is an error, it will be marking the whole object as wrong because it is not compatible with the type\nconst testInferedTypeCompatibility = {\n  dateTime: '10/07/2023',\n  onDateTimeChange: (dateTime: string) => {},\n  type: 'full-date-time',\n} as ComponentPropsForApp;\n\nconst testDefinitionAsConst = {\n  dateTime: '10/07/2023',\n  onDateTimeChange: (dateTime: string) => {},\n  type: 'full-date-time',\n} as const;\n\nconst ExampleUsageComponent = () => (\n  <>\n    {/* works with explicitly casted props, all syntaxes */}\n    <DSControlledDateTimePicker {...testExplicitDefinition} />\n    <DSControlledDateTimePicker {...testInferedTypeCompatibility} />\n    <DSControlledDateTimePicker {...testDefinitionAsConst} />\n    {/* works with inline values */}\n    <DSControlledDateTimePicker\n      dateTime=\"10/07/2023\"\n      onDateTimeChange={(dateTime: string) => {}}\n      type=\"full-date-time\"\n    />\n  </>\n);\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA,YAAuB;ACyFrB;AAvFF,eAA2C;AAU3C,MAAM,oBAAiD;AAAA,EACrD,UAAU;AAAA,EACV,kBAAkB,CAAC,aAAqB;AAAA,EAAC;AAAA,EACzC,MAAM;AACR;AACA,MAAM,oBAAiD,CAAC;AAIxD,MAAM,sBAA2D,CAAC;AAClE,MAAM,YAAkC;AAAA,EACtC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AACA,MAAM,oBAAoB;AAAA,EACxB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEA,MAAM,uBAA6D;AAAA,EACjE,WAAW;AAAA,EACX,UAAU;AAAA,EACV,iBAAiB,CAAC,QAAgB;AAAA,EAClC,kBAAkB,CAAC,QAAgB;AAAA,EACnC,mBAAmB,CAAC,SAAiB;AAAA,EACrC,kBAAkB,CAAC,QAAgB;AAAA,EACnC,oBAAoB,CAAC,QAAgB;AAAA,EACrC,oBAAoB,CAAC,QAAgB;AAAA,EACrC,UAAU;AAAA,EACV,aAAa;AAAA,EACb,iBAAiB;AAAA,EACjB,cAAc,CAAC,SAAiB;AAAA,EAAC;AAAA,EACjC,cAAc,CAAC,SAAiB;AAAA,EAAC;AAAA,EACjC,aAAa,CAAC,QAAgB;AAAA,EAAC;AAAA,EAC/B,eAAe,CAAC,UAAkB;AAAA,EAAC;AAAA,EACnC,cAAc,CAAC,SAAiB;AAAA,EAAC;AAAA,EACjC,cAAc,CAAC,SAAiB;AAAA,EAAC;AAAA,EACjC,gBAAgB,CAAC,WAAmB;AAAA,EAAC;AAAA,EACrC,kBAAkB,CAAC,aAAqB;AAAA,EAAC;AAAA,EACzC,eAAe,MAAM;AAAA,EAAC;AAAA,EACtB,cAAc,MAAM;AAAA,EAAC;AAAA,EACrB,yBAAyB;AAC3B;AACA,MAAM,oBAA6C;AAAA,EACjD,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AACA,MAAM,4BAA4B;AAAA,EAChC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAGA,MAAM,yBAA+C;AAAA,EACnD,UAAU;AAAA,EACV,kBAAkB,CAAC,aAAqB;AAAA,EAAC;AAAA,EACzC,MAAM;AACR;AAGA,MAAM,+BAA+B;AAAA,EACnC,UAAU;AAAA,EACV,kBAAkB,CAAC,aAAqB;AAAA,EAAC;AAAA,EACzC,MAAM;AACR;AAEA,MAAM,wBAAwB;AAAA,EAC5B,UAAU;AAAA,EACV,kBAAkB,CAAC,aAAqB;AAAA,EAAC;AAAA,EACzC,MAAM;AACR;AAEA,MAAM,wBAAwB,MAC5B,4EAEE;AAAA,8CAAC,uCAA4B,GAAG,wBAAwB;AAAA,EACxD,4CAAC,uCAA4B,GAAG,8BAA8B;AAAA,EAC9D,4CAAC,uCAA4B,GAAG,uBAAuB;AAAA,EAEvD;AAAA,IAAC;AAAA;AAAA,MACC,UAAS;AAAA,MACT,kBAAkB,CAAC,aAAqB;AAAA,MAAC;AAAA,MACzC,MAAK;AAAA;AAAA,EACP;AAAA,GACF;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\n// eslint-disable-line no-console\nimport { DSControlledDateTimePicker } from '../index.js';\nimport type { DSControlledDateTimePickerT } from '../index.js';\n\n// test we expose the namespace and the namespace follows our deliverable conventions\ntype ComponentPropsForApp = DSControlledDateTimePickerT.DateTimePickerProps;\ntype ComponentPropsInternals = DSControlledDateTimePickerT.InternalDateTimePickerProps;\ntype ComponentPropsDefaultProps = DSControlledDateTimePickerT.DefaultDateTimeProps;\ntype ComponentPropsOptionalProps = DSControlledDateTimePickerT.OptionalDateTimeProps;\ntype ComponentPropsRequiredProps = DSControlledDateTimePickerT.RequiredDateTimeProps;\n\nconst testRequiredProps: ComponentPropsRequiredProps = {\n  dateTime: '10/07/2023',\n  onDateTimeChange: (dateTime: string) => {},\n  type: 'full-date-time',\n};\nconst testOptionalProps: ComponentPropsOptionalProps = {};\n\n// difference Props and InternalProps is that InternalProps has all the default props filled in\n//  Props allows for partial defaults\nconst testPartialDefaults: Partial<ComponentPropsDefaultProps> = {};\nconst testProps: ComponentPropsForApp = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testPartialDefaults,\n};\nconst testPropsAsSyntax = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testPartialDefaults,\n} as ComponentPropsForApp;\n// InternalProps requires all defaults to be filled in\nconst testCompleteDefaults: Required<ComponentPropsDefaultProps> = {\n  autoFocus: false,\n  disabled: false,\n  readOnly: false,\n  getIsDayInRange: (day: string) => true,\n  getIsDisabledDay: (day: string) => false,\n  getIsDisabledTime: (time: string) => false,\n  getIsEndRangeDay: (day: string) => false,\n  getIsStartRangeDay: (day: string) => false,\n  getIsOutOfRangeDay: (day: string) => false,\n  hasError: false,\n  isClearable: false,\n  minutesInterval: 1,\n  onDateChange: (date: string) => {},\n  onTimeChange: (time: string) => {},\n  onDayChange: (day: string) => {},\n  onMonthChange: (month: string) => {},\n  onYearChange: (year: string) => {},\n  onHourChange: (hour: string) => {},\n  onMinuteChange: (minute: string) => {},\n  onMeridiemChange: (meridiem: string) => {},\n  onPickerClose: () => {},\n  onPickerOpen: () => {},\n  preventCloseOnSelection: false,\n};\nconst testInternalProps: ComponentPropsInternals = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testCompleteDefaults,\n};\nconst testInternalPropsAsSyntax = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testCompleteDefaults,\n} as ComponentPropsInternals;\n\n// using the explicit type definition, if there is an error, it will be marked on the key that is wrong\nconst testExplicitDefinition: ComponentPropsForApp = {\n  dateTime: '10/07/2023',\n  onDateTimeChange: (dateTime: string) => {},\n  type: 'full-date-time',\n};\n\n// using the \"as\" syntax, if there is an error, it will be marking the whole object as wrong because it is not compatible with the type\nconst testInferedTypeCompatibility = {\n  dateTime: '10/07/2023',\n  onDateTimeChange: (dateTime: string) => {},\n  type: 'full-date-time',\n} as ComponentPropsForApp;\n\nconst testDefinitionAsConst = {\n  dateTime: '10/07/2023',\n  onDateTimeChange: (dateTime: string) => {},\n  type: 'full-date-time',\n} as const;\n\nconst ExampleUsageComponent = () => (\n  <>\n    {/* works with explicitly casted props, all syntaxes */}\n    <DSControlledDateTimePicker {...testExplicitDefinition} />\n    <DSControlledDateTimePicker {...testInferedTypeCompatibility} />\n    <DSControlledDateTimePicker {...testDefinitionAsConst} />\n    {/* works with inline values */}\n    <DSControlledDateTimePicker\n      dateTime=\"10/07/2023\"\n      onDateTimeChange={(dateTime: string) => {}}\n      type=\"full-date-time\"\n    />\n  </>\n);\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA,YAAuB;AC0FrB;AAxFF,eAA2C;AAU3C,MAAM,oBAAiD;AAAA,EACrD,UAAU;AAAA,EACV,kBAAkB,CAAC,aAAqB;AAAA,EAAC;AAAA,EACzC,MAAM;AACR;AACA,MAAM,oBAAiD,CAAC;AAIxD,MAAM,sBAA2D,CAAC;AAClE,MAAM,YAAkC;AAAA,EACtC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AACA,MAAM,oBAAoB;AAAA,EACxB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEA,MAAM,uBAA6D;AAAA,EACjE,WAAW;AAAA,EACX,UAAU;AAAA,EACV,UAAU;AAAA,EACV,iBAAiB,CAAC,QAAgB;AAAA,EAClC,kBAAkB,CAAC,QAAgB;AAAA,EACnC,mBAAmB,CAAC,SAAiB;AAAA,EACrC,kBAAkB,CAAC,QAAgB;AAAA,EACnC,oBAAoB,CAAC,QAAgB;AAAA,EACrC,oBAAoB,CAAC,QAAgB;AAAA,EACrC,UAAU;AAAA,EACV,aAAa;AAAA,EACb,iBAAiB;AAAA,EACjB,cAAc,CAAC,SAAiB;AAAA,EAAC;AAAA,EACjC,cAAc,CAAC,SAAiB;AAAA,EAAC;AAAA,EACjC,aAAa,CAAC,QAAgB;AAAA,EAAC;AAAA,EAC/B,eAAe,CAAC,UAAkB;AAAA,EAAC;AAAA,EACnC,cAAc,CAAC,SAAiB;AAAA,EAAC;AAAA,EACjC,cAAc,CAAC,SAAiB;AAAA,EAAC;AAAA,EACjC,gBAAgB,CAAC,WAAmB;AAAA,EAAC;AAAA,EACrC,kBAAkB,CAAC,aAAqB;AAAA,EAAC;AAAA,EACzC,eAAe,MAAM;AAAA,EAAC;AAAA,EACtB,cAAc,MAAM;AAAA,EAAC;AAAA,EACrB,yBAAyB;AAC3B;AACA,MAAM,oBAA6C;AAAA,EACjD,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AACA,MAAM,4BAA4B;AAAA,EAChC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAGA,MAAM,yBAA+C;AAAA,EACnD,UAAU;AAAA,EACV,kBAAkB,CAAC,aAAqB;AAAA,EAAC;AAAA,EACzC,MAAM;AACR;AAGA,MAAM,+BAA+B;AAAA,EACnC,UAAU;AAAA,EACV,kBAAkB,CAAC,aAAqB;AAAA,EAAC;AAAA,EACzC,MAAM;AACR;AAEA,MAAM,wBAAwB;AAAA,EAC5B,UAAU;AAAA,EACV,kBAAkB,CAAC,aAAqB;AAAA,EAAC;AAAA,EACzC,MAAM;AACR;AAEA,MAAM,wBAAwB,MAC5B,4EAEE;AAAA,8CAAC,uCAA4B,GAAG,wBAAwB;AAAA,EACxD,4CAAC,uCAA4B,GAAG,8BAA8B;AAAA,EAC9D,4CAAC,uCAA4B,GAAG,uBAAuB;AAAA,EAEvD;AAAA,IAAC;AAAA;AAAA,MACC,UAAS;AAAA,MACT,kBAAkB,CAAC,aAAqB;AAAA,MAAC;AAAA,MACzC,MAAK;AAAA;AAAA,EACP;AAAA,GACF;",
   "names": []
 }

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

@@ -1,5 +1,5 @@
 import * as React from "react";
-const DSControlledDateTimePickerName = "DSControlledDateTimePicker";
+const DSControlledDateTimePickerName = "DSControlleddatetimepicker";
 const DSControlledDateTimePickerSlots = {
   CONTAINER: "root",
   INPUT: "field-input",

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/exported-related/theming.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const DSControlledDateTimePickerName = 'DSControlledDateTimePicker';\n\nexport const DSControlledDateTimePickerSlots = {\n  CONTAINER: 'root',\n  INPUT: 'field-input',\n  DATE_INPUTS: {\n    MONTH: 'ds-controlled-date-time-picker-month-input',\n    DAY: 'ds-controlled-date-time-picker-day-input',\n    YEAR: 'ds-controlled-date-time-picker-year-input',\n  },\n  TIME_INPUTS: {\n    HOUR: 'ds-controlled-date-time-picker-hour-input',\n    MINUTE: 'ds-controlled-date-time-picker-minute-input',\n    MERIDIEM: 'ds-controlled-date-time-picker-meridiem-input',\n  },\n  PICKER_ICONS: {\n    CALENDAR: 'calendar-trigger-icon',\n    TIMEWHEEL: 'timewheel-trigger-icon',\n    CALENDAR_TIMEWHEEL: 'calendar-timewheel-trigger-icon',\n  },\n  CALENDAR: {\n    DAY_BUTTON: 'calendar-day',\n    HEADER_LABEL: 'calendar-header-label',\n    HEADER_BUTTON: 'calendar-header-buttons',\n    HEADER_WEEKLY_DAY_LIST: 'calendar-header-weekly-day-list',\n  },\n  TIMEWHEEL: {\n    TIME_BUTTON: 'timewheel-time-button',\n    TIME_CHANGE_BUTTON: 'timewheel-time-change-button',\n    HEADER_LABEL: 'timewheel-header-label',\n  },\n  CONTEXTUAL_MENU: {\n    CALENDAR: 'calendar-context-content-wrapper',\n    TIMEWHEEL: 'timewheel-context-content-wrapper',\n    CALENDAR_TIMEWHEEL: 'calendar-timewheel-context-content-wrapper',\n  },\n  FOOTERS: {\n    CALENDAR: 'calendar-context-footer',\n    TIMEWHEEL: 'timewheel-context-footer',\n    CALENDAR_TIMEWHEEL: 'calendar-timewheel-context-footer',\n  },\n  CONTROLLER_COMPONENT: {\n    CALENDAR: 'calendar-controller-wrapper',\n    TIMEWHEEL: 'timewheel-controller-wrapper',\n    CALENDAR_TIMEWHEEL: 'calendar-timewheel-controller-wrapper',\n  },\n  CLEAR_BUTTON: 'clear-btn',\n};\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const DSControlledDateTimePickerName = 'DSControlleddatetimepicker';\n\nexport const DSControlledDateTimePickerSlots = {\n  CONTAINER: 'root',\n  INPUT: 'field-input',\n  DATE_INPUTS: {\n    MONTH: 'ds-controlled-date-time-picker-month-input',\n    DAY: 'ds-controlled-date-time-picker-day-input',\n    YEAR: 'ds-controlled-date-time-picker-year-input',\n  },\n  TIME_INPUTS: {\n    HOUR: 'ds-controlled-date-time-picker-hour-input',\n    MINUTE: 'ds-controlled-date-time-picker-minute-input',\n    MERIDIEM: 'ds-controlled-date-time-picker-meridiem-input',\n  },\n  PICKER_ICONS: {\n    CALENDAR: 'calendar-trigger-icon',\n    TIMEWHEEL: 'timewheel-trigger-icon',\n    CALENDAR_TIMEWHEEL: 'calendar-timewheel-trigger-icon',\n  },\n  CALENDAR: {\n    DAY_BUTTON: 'calendar-day',\n    HEADER_LABEL: 'calendar-header-label',\n    HEADER_BUTTON: 'calendar-header-buttons',\n    HEADER_WEEKLY_DAY_LIST: 'calendar-header-weekly-day-list',\n  },\n  TIMEWHEEL: {\n    TIME_BUTTON: 'timewheel-time-button',\n    TIME_CHANGE_BUTTON: 'timewheel-time-change-button',\n    HEADER_LABEL: 'timewheel-header-label',\n  },\n  CONTEXTUAL_MENU: {\n    CALENDAR: 'calendar-context-content-wrapper',\n    TIMEWHEEL: 'timewheel-context-content-wrapper',\n    CALENDAR_TIMEWHEEL: 'calendar-timewheel-context-content-wrapper',\n  },\n  FOOTERS: {\n    CALENDAR: 'calendar-context-footer',\n    TIMEWHEEL: 'timewheel-context-footer',\n    CALENDAR_TIMEWHEEL: 'calendar-timewheel-context-footer',\n  },\n  CONTROLLER_COMPONENT: {\n    CALENDAR: 'calendar-controller-wrapper',\n    TIMEWHEEL: 'timewheel-controller-wrapper',\n    CALENDAR_TIMEWHEEL: 'calendar-timewheel-controller-wrapper',\n  },\n  CLEAR_BUTTON: 'clear-btn',\n};\n"],
   "mappings": "AAAA,YAAY,WAAW;ACAhB,MAAM,iCAAiC;AAEvC,MAAM,kCAAkC;AAAA,EAC7C,WAAW;AAAA,EACX,OAAO;AAAA,EACP,aAAa;AAAA,IACX,OAAO;AAAA,IACP,KAAK;AAAA,IACL,MAAM;AAAA,EACR;AAAA,EACA,aAAa;AAAA,IACX,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,UAAU;AAAA,EACZ;AAAA,EACA,cAAc;AAAA,IACZ,UAAU;AAAA,IACV,WAAW;AAAA,IACX,oBAAoB;AAAA,EACtB;AAAA,EACA,UAAU;AAAA,IACR,YAAY;AAAA,IACZ,cAAc;AAAA,IACd,eAAe;AAAA,IACf,wBAAwB;AAAA,EAC1B;AAAA,EACA,WAAW;AAAA,IACT,aAAa;AAAA,IACb,oBAAoB;AAAA,IACpB,cAAc;AAAA,EAChB;AAAA,EACA,iBAAiB;AAAA,IACf,UAAU;AAAA,IACV,WAAW;AAAA,IACX,oBAAoB;AAAA,EACtB;AAAA,EACA,SAAS;AAAA,IACP,UAAU;AAAA,IACV,WAAW;AAAA,IACX,oBAAoB;AAAA,EACtB;AAAA,EACA,sBAAsB;AAAA,IACpB,UAAU;AAAA,IACV,WAAW;AAAA,IACX,oBAAoB;AAAA,EACtB;AAAA,EACA,cAAc;AAChB;",
   "names": []
 }

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

@@ -23,7 +23,8 @@ const DDInput = React2.memo(
     placeholder,
     ariaCurrentValueForInputs,
     isFocused,
-    getProps
+    getProps,
+    readOnly
   }) => {
     const validateOnChange = useCallback(
       (e) => {
@@ -54,7 +55,8 @@ const DDInput = React2.memo(
         disabled,
         "aria-disabled": disabled,
         "aria-invalid": hasError,
-        getOwnerProps: getProps
+        getOwnerProps: getProps,
+        readOnly
       }
     );
   }

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 { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\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  hasError: boolean;\n  placeholder: string;\n  ariaCurrentValueForInputs: string;\n  contextRef: React.MutableRefObject<HTMLInputElement | null>;\n  tabIndex?: TypescriptHelpersT.WCAGTabIndex;\n  isFocused: boolean;\n  getProps: ControlledDateTimePickerContextT['getProps'];\n}\nexport const DDInput = React.memo(\n  ({\n    onChange,\n    onBlur,\n    onFocus,\n    onKeyDown,\n    value,\n    disabled,\n    hasError,\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        aria-invalid={hasError}\n        getOwnerProps={getProps}\n      />\n    );\n  },\n);\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACwDjB;AAxDN,OAAOA,UAAS,mBAAmB;AAEnC,SAAS,0CAA0C;AACnD,SAAS,uBAAuB;AAIhC,MAAM,gBAAgB;AACtB,MAAM,eAAe,CAAC,QAAgB;AACpC,MAAI,QAAQ,GAAI,QAAO;AACvB,QAAM,aAAa,cAAc,KAAK,GAAG;AACzC,SAAO,IAAI,SAAS,KAAK,QAAQ,QAAQ,CAAC,cAAc,OAAO,SAAS,KAAK,EAAE,IAAI;AACrF;AAiBO,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,aAAa,GAAG,eAAe,KAAK,GAAG;AACzC,YAAE,eAAe;AACjB;AAAA,QACF;AACA,iBAAS,CAAC;AAAA,MACZ;AAAA,MACA,CAAC,QAAQ;AAAA,IACX;AACA,WACE;AAAA,MAAC;AAAA;AAAA,QACC,UAAU;AAAA,QACV;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,UAAU,CAAC,YAA8B;AACvC,UAAC,WAAwD,UAAU;AACnE,cAAI,UAAW,UAAS,QAAQ;AAAA,QAClC;AAAA,QACA;AAAA,QACA;AAAA,QACA,cAAY,oBAAoB,yBAAyB;AAAA,QACzD,eAAa,mCAAmC,YAAY;AAAA,QAC5D;AAAA,QACA,iBAAe;AAAA,QACf,gBAAc;AAAA,QACd,eAAe;AAAA;AAAA,IACjB;AAAA,EAEJ;AACF;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback } from 'react';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\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  hasError: boolean;\n  placeholder: string;\n  ariaCurrentValueForInputs: string;\n  contextRef: React.MutableRefObject<HTMLInputElement | null>;\n  tabIndex?: TypescriptHelpersT.WCAGTabIndex;\n  isFocused: boolean;\n  getProps: ControlledDateTimePickerContextT['getProps'];\n  readOnly: boolean;\n}\nexport const DDInput = React.memo(\n  ({\n    onChange,\n    onBlur,\n    onFocus,\n    onKeyDown,\n    value,\n    disabled,\n    hasError,\n    contextRef,\n    tabIndex,\n    placeholder,\n    ariaCurrentValueForInputs,\n    isFocused,\n    getProps,\n    readOnly,\n  }: DDInputsPropsT): JSX.Element => {\n    const validateOnChange = useCallback(\n      (e: React.ChangeEvent<HTMLInputElement>) => {\n        if (isInvalidDay(e?.currentTarget?.value)) {\n          e.preventDefault();\n          return;\n        }\n        onChange(e);\n      },\n      [onChange],\n    );\n    return (\n      <StyledDateInput\n        onChange={validateOnChange}\n        onBlur={onBlur}\n        onFocus={onFocus}\n        onKeyDown={onKeyDown}\n        value={value}\n        innerRef={(DomElem: HTMLInputElement) => {\n          (contextRef as React.MutableRefObject<HTMLInputElement>).current = DomElem;\n          if (isFocused) DomElem?.focus?.();\n        }}\n        tabIndex={tabIndex}\n        placeholder={placeholder}\n        aria-label={`day input field, ${ariaCurrentValueForInputs}`}\n        data-testid={ControlledDateTimePickerDatatestid.DATE_INPUTS.DAY}\n        disabled={disabled}\n        aria-disabled={disabled}\n        aria-invalid={hasError}\n        getOwnerProps={getProps}\n        readOnly={readOnly}\n      />\n    );\n  },\n);\n"],
+  "mappings": "AAAA,YAAY,WAAW;AC0DjB;AA1DN,OAAOA,UAAS,mBAAmB;AAEnC,SAAS,0CAA0C;AACnD,SAAS,uBAAuB;AAIhC,MAAM,gBAAgB;AACtB,MAAM,eAAe,CAAC,QAAgB;AACpC,MAAI,QAAQ,GAAI,QAAO;AACvB,QAAM,aAAa,cAAc,KAAK,GAAG;AACzC,SAAO,IAAI,SAAS,KAAK,QAAQ,QAAQ,CAAC,cAAc,OAAO,SAAS,KAAK,EAAE,IAAI;AACrF;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,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,UAAW,UAAS,QAAQ;AAAA,QAClC;AAAA,QACA;AAAA,QACA;AAAA,QACA,cAAY,oBAAoB,yBAAyB;AAAA,QACzD,eAAa,mCAAmC,YAAY;AAAA,QAC5D;AAAA,QACA,iBAAe;AAAA,QACf,gBAAc;AAAA,QACd,eAAe;AAAA,QACf;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;",
   "names": ["React"]
 }

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

@@ -38,7 +38,7 @@ const DateInputs = () => {
     latestInteractionRegion,
     currFocusDescriber,
     getProps,
-    props: { tabIndex, hasError }
+    props: { tabIndex, hasError, readOnly }
   } = useContext(ControlledDateTimePickerContext);
   return /* @__PURE__ */ jsxs(
     Grid,
@@ -68,7 +68,8 @@ const DateInputs = () => {
             disabled,
             hasError,
             isFocused: latestInteractionRegion === "date-inputs" && currFocusDescriber === "month-input",
-            getProps
+            getProps,
+            readOnly
           }
         ) }),
         /* @__PURE__ */ jsx(StyledSeparator, { alignItems: "center", children: "/" }),
@@ -87,7 +88,8 @@ const DateInputs = () => {
             disabled,
             hasError,
             isFocused: latestInteractionRegion === "date-inputs" && currFocusDescriber === "day-input",
-            getProps
+            getProps,
+            readOnly
           }
         ) }),
         /* @__PURE__ */ jsx(StyledSeparator, { alignItems: "center", children: "/" }),
@@ -106,7 +108,8 @@ const DateInputs = () => {
             disabled,
             hasError,
             isFocused: latestInteractionRegion === "date-inputs" && currFocusDescriber === "year-input",
-            getProps
+            getProps,
+            readOnly
           }
         ) })
       ]

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    props: { tabIndex, hasError },\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          hasError={hasError}\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          hasError={hasError}\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          hasError={hasError}\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,UAAU,SAAS;AAAA,EAC9B,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;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;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;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, hasError, readOnly },\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          hasError={hasError}\n          isFocused={latestInteractionRegion === 'date-inputs' && currFocusDescriber === 'month-input'}\n          getProps={getProps}\n          readOnly={readOnly}\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          hasError={hasError}\n          isFocused={latestInteractionRegion === 'date-inputs' && currFocusDescriber === 'day-input'}\n          getProps={getProps}\n          readOnly={readOnly}\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          hasError={hasError}\n          isFocused={latestInteractionRegion === 'date-inputs' && currFocusDescriber === 'year-input'}\n          getProps={getProps}\n          readOnly={readOnly}\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,UAAU,UAAU,SAAS;AAAA,EACxC,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;AAAA,YACA,WAAW,4BAA4B,iBAAiB,uBAAuB;AAAA,YAC/E;AAAA,YACA;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;AAAA,YACA,WAAW,4BAA4B,iBAAiB,uBAAuB;AAAA,YAC/E;AAAA,YACA;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;AAAA,YACA,WAAW,4BAA4B,iBAAiB,uBAAuB;AAAA,YAC/E;AAAA,YACA;AAAA;AAAA,QACF,GACF;AAAA;AAAA;AAAA,EACF;AAEJ;",
   "names": []
 }

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

@@ -26,7 +26,8 @@ const MMInput = React2.memo(
     autoFocusMonthInput,
     ariaCurrentValueForInputs,
     isFocused,
-    getProps
+    getProps,
+    readOnly
   }) => {
     const validateOnChange = useCallback(
       (e) => {
@@ -68,7 +69,8 @@ const MMInput = React2.memo(
         disabled,
         "aria-disabled": disabled,
         "aria-invalid": hasError,
-        getOwnerProps: getProps
+        getOwnerProps: getProps,
+        readOnly
       }
     );
   }