@elliemae/ds-controlled-form 3.0.0-next.0 → 3.0.0-next.4

package/dist/cjs/date-time-picker/parts/ClearButton/useClearButton.js

@@ -0,0 +1,93 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toESM = (module2, isNodeMode) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var useClearButton_exports = {};
+__export(useClearButton_exports, {
+  useClearButton: () => useClearButton
+});
+var React = __toESM(require("react"));
+var import_react = require("react");
+var import_ControlledDateTimePickerCTX = require("../../ControlledDateTimePickerCTX");
+const useClearButton = () => {
+  const {
+    handleClearAll,
+    clearButtonRef,
+    withAnyPicker,
+    withClearBtn,
+    withAnyInputs,
+    isWithTimeInputs,
+    isWithDateInputs,
+    isTimeSelector,
+    hourInputRef,
+    monthInputRef,
+    pickerButtonRef,
+    meridiemInputRef,
+    yearInputRef,
+    setLatestInteractionRegion
+  } = (0, import_react.useContext)(import_ControlledDateTimePickerCTX.ControlledDateTimePickerContext);
+  const focusFirstRegion = (0, import_react.useCallback)(() => {
+    if (withAnyInputs)
+      if (isTimeSelector)
+        hourInputRef?.current?.focus?.();
+      else
+        monthInputRef?.current?.focus?.();
+  }, [withAnyInputs, isTimeSelector, hourInputRef, monthInputRef]);
+  const onClearClick = (0, import_react.useCallback)((e) => {
+    handleClearAll(e);
+    setLatestInteractionRegion("clear-btn");
+    focusFirstRegion();
+  }, [focusFirstRegion, handleClearAll, setLatestInteractionRegion]);
+  const onHomeKeyDown = (0, import_react.useCallback)(() => {
+    focusFirstRegion();
+  }, [focusFirstRegion]);
+  const onEndKeyDown = (0, import_react.useCallback)(() => {
+    if (withAnyPicker)
+      pickerButtonRef?.current?.focus?.();
+  }, [withAnyPicker, pickerButtonRef]);
+  const onClearButtonKeyDown = (0, import_react.useCallback)((e) => {
+    const { key } = e;
+    const preventDefaultKeys = ["Home", "End"];
+    const stopPropagationKeys = ["Home", "End"];
+    if (preventDefaultKeys.includes(key))
+      e.preventDefault();
+    if (stopPropagationKeys.includes(key))
+      e.stopPropagation();
+    if (key === "Home")
+      onHomeKeyDown();
+    if (key === "End")
+      onEndKeyDown();
+    if (key === "Backspace" && withAnyInputs) {
+      if (isWithTimeInputs)
+        meridiemInputRef?.current?.focus?.();
+      else if (isWithDateInputs)
+        yearInputRef?.current?.focus?.();
+    }
+  }, [isWithDateInputs, isWithTimeInputs, meridiemInputRef, onEndKeyDown, onHomeKeyDown, withAnyInputs, yearInputRef]);
+  return (0, import_react.useMemo)(() => ({ onClearClick, onClearButtonKeyDown, clearButtonRef, withAnyPicker, withClearBtn }), [onClearClick, onClearButtonKeyDown, clearButtonRef, withAnyPicker, withClearBtn]);
+};
+module.exports = __toCommonJS(useClearButton_exports);
+//# sourceMappingURL=useClearButton.js.map

package/dist/cjs/date-time-picker/parts/ClearButton/useClearButton.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/date-time-picker/parts/ClearButton/useClearButton.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["/* eslint-disable max-statements */\n/* eslint-disable max-lines */\nimport { useCallback, useMemo, useContext } from 'react';\nimport { ControlledDateTimePickerContext } from '../../ControlledDateTimePickerCTX';\nimport type { onClearClickT, onKeyDownT } from '../../index.d';\n\ninterface useOnClearClickRT {\n  onClearClick: onClearClickT;\n  onClearButtonKeyDown: onKeyDownT<HTMLButtonElement>;\n  clearButtonRef: React.MutableRefObject<HTMLButtonElement>;\n  withAnyPicker: boolean;\n  withClearBtn: boolean;\n}\nexport const useClearButton = (): useOnClearClickRT => {\n  const {\n    handleClearAll,\n    clearButtonRef,\n    withAnyPicker,\n    withClearBtn,\n    withAnyInputs,\n    isWithTimeInputs,\n    isWithDateInputs,\n    isTimeSelector,\n    hourInputRef,\n    monthInputRef,\n    pickerButtonRef,\n    meridiemInputRef,\n    yearInputRef,\n    setLatestInteractionRegion,\n  } = useContext(ControlledDateTimePickerContext);\n\n  const focusFirstRegion = useCallback(() => {\n    if (withAnyInputs)\n      if (isTimeSelector) hourInputRef?.current?.focus?.();\n      else monthInputRef?.current?.focus?.();\n  }, [withAnyInputs, isTimeSelector, hourInputRef, monthInputRef]);\n\n  const onClearClick = useCallback(\n    (e) => {\n      handleClearAll(e);\n      setLatestInteractionRegion('clear-btn');\n      focusFirstRegion();\n    },\n    [focusFirstRegion, handleClearAll, setLatestInteractionRegion],\n  );\n  const onHomeKeyDown = useCallback(() => {\n    focusFirstRegion();\n  }, [focusFirstRegion]);\n  const onEndKeyDown = useCallback(() => {\n    if (withAnyPicker) pickerButtonRef?.current?.focus?.();\n  }, [withAnyPicker, pickerButtonRef]);\n\n  const onClearButtonKeyDown = useCallback(\n    (e) => {\n      const { key } = e;\n      const preventDefaultKeys = ['Home', 'End'];\n      const stopPropagationKeys = ['Home', 'End'];\n      if (preventDefaultKeys.includes(key)) e.preventDefault();\n      if (stopPropagationKeys.includes(key)) e.stopPropagation();\n      if (key === 'Home') onHomeKeyDown();\n      if (key === 'End') onEndKeyDown();\n      if (key === 'Backspace' && withAnyInputs) {\n        if (isWithTimeInputs) meridiemInputRef?.current?.focus?.();\n        else if (isWithDateInputs) yearInputRef?.current?.focus?.();\n      }\n    },\n    [isWithDateInputs, isWithTimeInputs, meridiemInputRef, onEndKeyDown, onHomeKeyDown, withAnyInputs, yearInputRef],\n  );\n\n  return useMemo(\n    () => ({ onClearClick, onClearButtonKeyDown, clearButtonRef, withAnyPicker, withClearBtn }),\n    [onClearClick, onClearButtonKeyDown, clearButtonRef, withAnyPicker, withClearBtn],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,mBAAiD;AACjD,yCAAgD;AAUzC,MAAM,iBAAiB,MAAyB;AACrD,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,MACE,6BAAW;AAEf,QAAM,mBAAmB,8BAAY,MAAM;AACzC,QAAI;AACF,UAAI;AAAgB,sBAAc,SAAS;AAAA;AACtC,uBAAe,SAAS;AAAA,KAC9B,CAAC,eAAe,gBAAgB,cAAc;AAEjD,QAAM,eAAe,8BACnB,CAAC,MAAM;AACL,mBAAe;AACf,+BAA2B;AAC3B;AAAA,KAEF,CAAC,kBAAkB,gBAAgB;AAErC,QAAM,gBAAgB,8BAAY,MAAM;AACtC;AAAA,KACC,CAAC;AACJ,QAAM,eAAe,8BAAY,MAAM;AACrC,QAAI;AAAe,uBAAiB,SAAS;AAAA,KAC5C,CAAC,eAAe;AAEnB,QAAM,uBAAuB,8BAC3B,CAAC,MAAM;AACL,UAAM,EAAE,QAAQ;AAChB,UAAM,qBAAqB,CAAC,QAAQ;AACpC,UAAM,sBAAsB,CAAC,QAAQ;AACrC,QAAI,mBAAmB,SAAS;AAAM,QAAE;AACxC,QAAI,oBAAoB,SAAS;AAAM,QAAE;AACzC,QAAI,QAAQ;AAAQ;AACpB,QAAI,QAAQ;AAAO;AACnB,QAAI,QAAQ,eAAe,eAAe;AACxC,UAAI;AAAkB,0BAAkB,SAAS;AAAA,eACxC;AAAkB,sBAAc,SAAS;AAAA;AAAA,KAGtD,CAAC,kBAAkB,kBAAkB,kBAAkB,cAAc,eAAe,eAAe;AAGrG,SAAO,0BACL,MAAO,GAAE,cAAc,sBAAsB,gBAAgB,eAAe,iBAC5E,CAAC,cAAc,sBAAsB,gBAAgB,eAAe;AAAA;",
+  "names": []
+}

package/dist/cjs/date-time-picker/parts/ControlledDateTimePickerContent.js

@@ -0,0 +1,101 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toESM = (module2, isNodeMode) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var ControlledDateTimePickerContent_exports = {};
+__export(ControlledDateTimePickerContent_exports, {
+  ControlledDateTimePickerContent: () => ControlledDateTimePickerContent
+});
+var React = __toESM(require("react"));
+var import_react = __toESM(require("react"));
+var import_ds_grid = require("@elliemae/ds-grid");
+var import_ControlledDateTimePickerCTX = require("../ControlledDateTimePickerCTX");
+var import_Styleds = require("./Styleds");
+var import_DateInputs = require("./DateInputs/DateInputs");
+var import_TimeInputs = require("./TimeInputs/TimeInputs");
+var import_PickersIcons = require("./Pickers/PickersIcons");
+var import_ClearButton = require("./ClearButton/ClearButton");
+const ControlledDateTimePickerContent = () => {
+  const {
+    hideDate,
+    hideDatePicker,
+    hideTime,
+    hideTimePicker,
+    hideDateTimePicker,
+    setLatestInteractionRegion,
+    withAnyPicker,
+    withAnyRightController,
+    shouldPreserveClearableSpace,
+    isControllerOnly,
+    props: { hasError, dataAttrs, disabled },
+    onGlobalKeyDown
+  } = import_react.default.useContext(import_ControlledDateTimePickerCTX.ControlledDateTimePickerContext);
+  const resetLatestInteraction = import_react.default.useCallback(() => {
+    setLatestInteractionRegion("");
+  }, [setLatestInteractionRegion]);
+  const mainCols = [];
+  if (!hideDate)
+    mainCols.push("auto");
+  if (!hideTime)
+    mainCols.push("auto");
+  if (withAnyRightController)
+    mainCols.push("auto");
+  const rightControlCols = [];
+  if (shouldPreserveClearableSpace)
+    rightControlCols.push("28px");
+  if (withAnyPicker)
+    rightControlCols.push("auto");
+  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(import_Styleds.StyledInputsWrapperGrid, __spreadValues({
+    cols: mainCols,
+    gutter: "xxs",
+    pr: hideDatePicker && hideTimePicker && hideDateTimePicker ? "2px" : null,
+    justPicker: hideDate && hideTime,
+    withAnyPicker,
+    onBlur: resetLatestInteraction,
+    onKeyDown: onGlobalKeyDown,
+    hasError,
+    isControllerOnly,
+    disabled
+  }, dataAttrs), hideDate ? null : /* @__PURE__ */ import_react.default.createElement(import_DateInputs.DateInputs, null), hideTime ? null : /* @__PURE__ */ import_react.default.createElement(import_TimeInputs.TimeInputs, null), withAnyRightController ? /* @__PURE__ */ import_react.default.createElement(import_ds_grid.Grid, {
+    cols: rightControlCols
+  }, shouldPreserveClearableSpace ? /* @__PURE__ */ import_react.default.createElement(import_ClearButton.ClearButton, null) : null, withAnyPicker ? /* @__PURE__ */ import_react.default.createElement(import_PickersIcons.PickersIcons, null) : null) : null));
+};
+module.exports = __toCommonJS(ControlledDateTimePickerContent_exports);
+//# sourceMappingURL=ControlledDateTimePickerContent.js.map

package/dist/cjs/date-time-picker/parts/ControlledDateTimePickerContent.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/date-time-picker/parts/ControlledDateTimePickerContent.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["/* eslint-disable complexity */\nimport React from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { ControlledDateTimePickerContext } from '../ControlledDateTimePickerCTX';\nimport { StyledInputsWrapperGrid } from './Styleds';\nimport { DateInputs } from './DateInputs/DateInputs';\nimport { TimeInputs } from './TimeInputs/TimeInputs';\nimport { PickersIcons } from './Pickers/PickersIcons';\nimport { ClearButton } from './ClearButton/ClearButton';\n\nexport const ControlledDateTimePickerContent = (): JSX.Element => {\n  const {\n    hideDate,\n    hideDatePicker,\n    hideTime,\n    hideTimePicker,\n    hideDateTimePicker,\n    setLatestInteractionRegion,\n    withAnyPicker,\n    withAnyRightController,\n    shouldPreserveClearableSpace,\n    isControllerOnly,\n    props: { hasError, dataAttrs, disabled },\n    onGlobalKeyDown,\n  } = React.useContext(ControlledDateTimePickerContext);\n\n  const resetLatestInteraction = React.useCallback(() => {\n    setLatestInteractionRegion('');\n  }, [setLatestInteractionRegion]);\n\n  const mainCols = [];\n  if (!hideDate) mainCols.push('auto');\n  if (!hideTime) mainCols.push('auto');\n  if (withAnyRightController) mainCols.push('auto');\n\n  const rightControlCols = [];\n  if (shouldPreserveClearableSpace) rightControlCols.push('28px');\n  if (withAnyPicker) rightControlCols.push('auto');\n\n  return (\n    <>\n      {/* The <div> element is catching the component-wise global hotkeys, there is no valid aria role for this */}\n      {/* eslint-disable-next-line max-len */}\n      {/* https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-static-element-interactions.md#case-the-event-handler-is-only-being-used-to-capture-bubbled-events */}\n      {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}\n      <StyledInputsWrapperGrid\n        cols={mainCols}\n        gutter=\"xxs\"\n        pr={hideDatePicker && hideTimePicker && hideDateTimePicker ? '2px' : null}\n        justPicker={hideDate && hideTime}\n        withAnyPicker={withAnyPicker}\n        onBlur={resetLatestInteraction}\n        onKeyDown={onGlobalKeyDown}\n        hasError={hasError}\n        isControllerOnly={isControllerOnly}\n        disabled={disabled}\n        {...dataAttrs}\n      >\n        {hideDate ? null : <DateInputs />}\n        {hideTime ? null : <TimeInputs />}\n        {withAnyRightController ? (\n          <Grid cols={rightControlCols}>\n            {shouldPreserveClearableSpace ? <ClearButton /> : null}\n            {withAnyPicker ? <PickersIcons /> : null}\n          </Grid>\n        ) : null}\n      </StyledInputsWrapperGrid>\n    </>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAkB;AAClB,qBAAqB;AACrB,yCAAgD;AAChD,qBAAwC;AACxC,wBAA2B;AAC3B,wBAA2B;AAC3B,0BAA6B;AAC7B,yBAA4B;AAErB,MAAM,kCAAkC,MAAmB;AAChE,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,WAAW;AAAA,IAC9B;AAAA,MACE,qBAAM,WAAW;AAErB,QAAM,yBAAyB,qBAAM,YAAY,MAAM;AACrD,+BAA2B;AAAA,KAC1B,CAAC;AAEJ,QAAM,WAAW;AACjB,MAAI,CAAC;AAAU,aAAS,KAAK;AAC7B,MAAI,CAAC;AAAU,aAAS,KAAK;AAC7B,MAAI;AAAwB,aAAS,KAAK;AAE1C,QAAM,mBAAmB;AACzB,MAAI;AAA8B,qBAAiB,KAAK;AACxD,MAAI;AAAe,qBAAiB,KAAK;AAEzC,SACE,wFAKE,mDAAC,wCAAD;AAAA,IACE,MAAM;AAAA,IACN,QAAO;AAAA,IACP,IAAI,kBAAkB,kBAAkB,qBAAqB,QAAQ;AAAA,IACrE,YAAY,YAAY;AAAA,IACxB;AAAA,IACA,QAAQ;AAAA,IACR,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,KACI,YAEH,WAAW,OAAO,mDAAC,8BAAD,OAClB,WAAW,OAAO,mDAAC,8BAAD,OAClB,yBACC,mDAAC,qBAAD;AAAA,IAAM,MAAM;AAAA,KACT,+BAA+B,mDAAC,gCAAD,QAAkB,MACjD,gBAAgB,mDAAC,kCAAD,QAAmB,QAEpC;AAAA;",
+  "names": []
+}

package/dist/cjs/date-time-picker/parts/DateInputs/DDInput.js

@@ -0,0 +1,76 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toESM = (module2, isNodeMode) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var DDInput_exports = {};
+__export(DDInput_exports, {
+  DDInput: () => DDInput
+});
+var React = __toESM(require("react"));
+var import_react = __toESM(require("react"));
+var import_ControlledDateTimePickerDatatestid = require("../../ControlledDateTimePickerDatatestid");
+var import_Styleds = require("../Styleds");
+const regExpNumbers = /^[0-9]+$/;
+const isInvalidDay = (day) => {
+  if (day === "")
+    return false;
+  const numberOnly = regExpNumbers.test(day);
+  return day.length > 2 || day === "00" || !numberOnly || Number.parseInt(day, 10) > 31;
+};
+const DDInput = import_react.default.memo(({
+  onChange,
+  onBlur,
+  onFocus,
+  onKeyDown,
+  value,
+  disabled,
+  contextRef,
+  placeholder,
+  ariaCurrentValueForInputs
+}) => {
+  const validateOnChange = (0, import_react.useCallback)((e) => {
+    if (isInvalidDay(e?.target?.value)) {
+      e.preventDefault();
+      return;
+    }
+    onChange(e);
+  }, [onChange]);
+  return /* @__PURE__ */ import_react.default.createElement(import_Styleds.Styled2DigitsInput, {
+    onChange: validateOnChange,
+    onBlur,
+    onFocus,
+    onKeyDown,
+    value,
+    ref: contextRef,
+    placeholder,
+    "aria-label": `day input field, ${ariaCurrentValueForInputs}`,
+    "data-testid": import_ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.DATE_INPUTS.DAY,
+    disabled,
+    "aria-disabled": disabled
+  });
+});
+module.exports = __toCommonJS(DDInput_exports);
+//# sourceMappingURL=DDInput.js.map

package/dist/cjs/date-time-picker/parts/DateInputs/DDInput.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/date-time-picker/parts/DateInputs/DDInput.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import React, { useCallback } from 'react';\nimport { ControlledDateTimePickerDatatestid } from '../../ControlledDateTimePickerDatatestid';\nimport { Styled2DigitsInput } from '../Styleds';\nimport type { onChangeFuncT, onBlurFuncT, onFocusFuncT, onKeyDownT } from '../../index.d';\n\nconst regExpNumbers = /^[0-9]+$/;\nconst isInvalidDay = (day) => {\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: onChangeFuncT;\n  onBlur: onBlurFuncT;\n  onFocus: onFocusFuncT;\n  onKeyDown: onKeyDownT;\n  value: string;\n  disabled: boolean;\n  placeholder: string;\n  ariaCurrentValueForInputs: string;\n  contextRef: React.RefObject<HTMLInputElement>;\n}\nexport const DDInput = React.memo(\n  ({\n    onChange,\n    onBlur,\n    onFocus,\n    onKeyDown,\n    value,\n    disabled,\n    contextRef,\n    placeholder,\n    ariaCurrentValueForInputs,\n  }: DDInputsPropsT): JSX.Element => {\n    const validateOnChange = useCallback(\n      (e) => {\n        if (isInvalidDay(e?.target?.value)) {\n          e.preventDefault();\n          return;\n        }\n        onChange(e);\n      },\n      [onChange],\n    );\n    return (\n      <Styled2DigitsInput\n        onChange={validateOnChange}\n        onBlur={onBlur}\n        onFocus={onFocus}\n        onKeyDown={onKeyDown}\n        value={value}\n        ref={contextRef}\n        placeholder={placeholder}\n        aria-label={`day input field, ${ariaCurrentValueForInputs}`}\n        data-testid={ControlledDateTimePickerDatatestid.DATE_INPUTS.DAY}\n        disabled={disabled}\n        aria-disabled={disabled}\n      />\n    );\n  },\n);\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAmC;AACnC,gDAAmD;AACnD,qBAAmC;AAGnC,MAAM,gBAAgB;AACtB,MAAM,eAAe,CAAC,QAAQ;AAC5B,MAAI,QAAQ;AAAI,WAAO;AACvB,QAAM,aAAa,cAAc,KAAK;AACtC,SAAO,IAAI,SAAS,KAAK,QAAQ,QAAQ,CAAC,cAAc,OAAO,SAAS,KAAK,MAAM;AAAA;AAc9E,MAAM,UAAU,qBAAM,KAC3B,CAAC;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,MACiC;AACjC,QAAM,mBAAmB,8BACvB,CAAC,MAAM;AACL,QAAI,aAAa,GAAG,QAAQ,QAAQ;AAClC,QAAE;AACF;AAAA;AAEF,aAAS;AAAA,KAEX,CAAC;AAEH,SACE,mDAAC,mCAAD;AAAA,IACE,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,KAAK;AAAA,IACL;AAAA,IACA,cAAY,oBAAoB;AAAA,IAChC,eAAa,6EAAmC,YAAY;AAAA,IAC5D;AAAA,IACA,iBAAe;AAAA;AAAA;",
+  "names": []
+}

package/dist/cjs/date-time-picker/parts/DateInputs/DateInputs.js

@@ -0,0 +1,109 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toESM = (module2, isNodeMode) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var DateInputs_exports = {};
+__export(DateInputs_exports, {
+  DateInputs: () => DateInputs
+});
+var React = __toESM(require("react"));
+var import_react = __toESM(require("react"));
+var import_ds_grid = require("@elliemae/ds-grid");
+var import_ControlledDateTimePickerCTX = require("../../ControlledDateTimePickerCTX");
+var import_MMInput = require("./MMInput");
+var import_DDInput = require("./DDInput");
+var import_YYYYInput = require("./YYYYInput");
+var import_Styleds = require("../Styleds");
+var import_useDateInputs = require("./useDateInputs");
+var import_config = require("../config");
+const DateInputs = () => {
+  const {
+    month,
+    day,
+    year,
+    autoFocusMonthInput,
+    onMonthChange,
+    onDayChange,
+    onYearChange,
+    onMonthBlur,
+    onDayBlur,
+    onYearBlur,
+    onMonthFocus,
+    onDayFocus,
+    onYearFocus,
+    onMonthKeyDown,
+    onDayKeyDown,
+    onYearKeyDown,
+    disabled
+  } = (0, import_useDateInputs.useDateInputs)();
+  const { monthInputRef, dayInputRef, yearInputRef, ariaCurrentValueForInputs } = (0, import_react.useContext)(import_ControlledDateTimePickerCTX.ControlledDateTimePickerContext);
+  return /* @__PURE__ */ import_react.default.createElement(import_ds_grid.Grid, {
+    cols: [
+      import_config.fixedValues.smallInputWidth,
+      import_config.fixedValues.separatorWidth,
+      import_config.fixedValues.smallInputWidth,
+      import_config.fixedValues.separatorWidth,
+      import_config.fixedValues.largeInputWidth
+    ]
+  }, /* @__PURE__ */ import_react.default.createElement(import_Styleds.StyledFocusWithIn, null, /* @__PURE__ */ import_react.default.createElement(import_MMInput.MMInput, {
+    onChange: onMonthChange,
+    onBlur: onMonthBlur,
+    onFocus: onMonthFocus,
+    onKeyDown: onMonthKeyDown,
+    value: month,
+    contextRef: monthInputRef,
+    autoFocusMonthInput,
+    placeholder: "MM",
+    ariaCurrentValueForInputs,
+    disabled
+  })), /* @__PURE__ */ import_react.default.createElement(import_Styleds.StyledSeparator, {
+    alignItems: "center"
+  }, "/"), /* @__PURE__ */ import_react.default.createElement(import_Styleds.StyledFocusWithIn, null, /* @__PURE__ */ import_react.default.createElement(import_DDInput.DDInput, {
+    onChange: onDayChange,
+    onBlur: onDayBlur,
+    onFocus: onDayFocus,
+    onKeyDown: onDayKeyDown,
+    value: day,
+    contextRef: dayInputRef,
+    placeholder: "DD",
+    ariaCurrentValueForInputs,
+    disabled
+  })), /* @__PURE__ */ import_react.default.createElement(import_Styleds.StyledSeparator, {
+    alignItems: "center"
+  }, "/"), /* @__PURE__ */ import_react.default.createElement(import_Styleds.StyledFocusWithIn, null, /* @__PURE__ */ import_react.default.createElement(import_YYYYInput.YYYYInput, {
+    onChange: onYearChange,
+    onBlur: onYearBlur,
+    onFocus: onYearFocus,
+    onKeyDown: onYearKeyDown,
+    value: year,
+    contextRef: yearInputRef,
+    placeholder: "YYYY",
+    ariaCurrentValueForInputs,
+    disabled
+  })));
+};
+module.exports = __toCommonJS(DateInputs_exports);
+//# sourceMappingURL=DateInputs.js.map

package/dist/cjs/date-time-picker/parts/DateInputs/DateInputs.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/date-time-picker/parts/DateInputs/DateInputs.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import React, { useContext } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { ControlledDateTimePickerContext } from '../../ControlledDateTimePickerCTX';\nimport { MMInput } from './MMInput';\nimport { DDInput } from './DDInput';\nimport { YYYYInput } from './YYYYInput';\nimport { StyledFocusWithIn, StyledSeparator } from '../Styleds';\nimport { useDateInputs } from './useDateInputs';\nimport { fixedValues } from '../config';\n\nexport const DateInputs = (): JSX.Element => {\n  const {\n    month,\n    day,\n    year,\n    autoFocusMonthInput,\n    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 { monthInputRef, dayInputRef, yearInputRef, ariaCurrentValueForInputs } = useContext(\n    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          autoFocusMonthInput={autoFocusMonthInput}\n          placeholder=\"MM\"\n          ariaCurrentValueForInputs={ariaCurrentValueForInputs}\n          disabled={disabled}\n        />\n      </StyledFocusWithIn>\n      <StyledSeparator alignItems=\"center\">/</StyledSeparator>\n      <StyledFocusWithIn>\n        <DDInput\n          onChange={onDayChange}\n          onBlur={onDayBlur}\n          onFocus={onDayFocus}\n          onKeyDown={onDayKeyDown}\n          value={day}\n          contextRef={dayInputRef}\n          placeholder=\"DD\"\n          ariaCurrentValueForInputs={ariaCurrentValueForInputs}\n          disabled={disabled}\n        />\n      </StyledFocusWithIn>\n      <StyledSeparator alignItems=\"center\">/</StyledSeparator>\n      <StyledFocusWithIn>\n        <YYYYInput\n          onChange={onYearChange}\n          onBlur={onYearBlur}\n          onFocus={onYearFocus}\n          onKeyDown={onYearKeyDown}\n          value={year}\n          contextRef={yearInputRef}\n          placeholder=\"YYYY\"\n          ariaCurrentValueForInputs={ariaCurrentValueForInputs}\n          disabled={disabled}\n        />\n      </StyledFocusWithIn>\n    </Grid>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkC;AAClC,qBAAqB;AACrB,yCAAgD;AAChD,qBAAwB;AACxB,qBAAwB;AACxB,uBAA0B;AAC1B,qBAAmD;AACnD,2BAA8B;AAC9B,oBAA4B;AAErB,MAAM,aAAa,MAAmB;AAC3C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MACE;AAEJ,QAAM,EAAE,eAAe,aAAa,cAAc,8BAA8B,6BAC9E;AAEF,SACE,mDAAC,qBAAD;AAAA,IACE,MAAM;AAAA,MACJ,0BAAY;AAAA,MACZ,0BAAY;AAAA,MACZ,0BAAY;AAAA,MACZ,0BAAY;AAAA,MACZ,0BAAY;AAAA;AAAA,KAGd,mDAAC,kCAAD,MACE,mDAAC,wBAAD;AAAA,IACE,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,WAAW;AAAA,IACX,OAAO;AAAA,IACP,YAAY;AAAA,IACZ;AAAA,IACA,aAAY;AAAA,IACZ;AAAA,IACA;AAAA,OAGJ,mDAAC,gCAAD;AAAA,IAAiB,YAAW;AAAA,KAAS,MACrC,mDAAC,kCAAD,MACE,mDAAC,wBAAD;AAAA,IACE,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,WAAW;AAAA,IACX,OAAO;AAAA,IACP,YAAY;AAAA,IACZ,aAAY;AAAA,IACZ;AAAA,IACA;AAAA,OAGJ,mDAAC,gCAAD;AAAA,IAAiB,YAAW;AAAA,KAAS,MACrC,mDAAC,kCAAD,MACE,mDAAC,4BAAD;AAAA,IACE,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,WAAW;AAAA,IACX,OAAO;AAAA,IACP,YAAY;AAAA,IACZ,aAAY;AAAA,IACZ;AAAA,IACA;AAAA;AAAA;",
+  "names": []
+}

package/dist/cjs/date-time-picker/parts/DateInputs/MMInput.js

@@ -0,0 +1,78 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toESM = (module2, isNodeMode) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var MMInput_exports = {};
+__export(MMInput_exports, {
+  MMInput: () => MMInput
+});
+var React = __toESM(require("react"));
+var import_react = __toESM(require("react"));
+var import_Styleds = require("../Styleds");
+var import_ControlledDateTimePickerDatatestid = require("../../ControlledDateTimePickerDatatestid");
+const regExpNumbers = /^[0-9]+$/;
+const isInvalidMonth = (month) => {
+  if (month === "")
+    return false;
+  const numberOnly = regExpNumbers.test(month);
+  return month.length > 2 || month === "00" || !numberOnly || Number.parseInt(month, 10) > 12;
+};
+const MMInput = import_react.default.memo(({
+  onChange,
+  onBlur,
+  onFocus,
+  onKeyDown,
+  value,
+  disabled,
+  placeholder,
+  contextRef,
+  autoFocusMonthInput,
+  ariaCurrentValueForInputs
+}) => {
+  const validateOnChange = (0, import_react.useCallback)((e) => {
+    if (isInvalidMonth(e?.target?.value)) {
+      e.preventDefault();
+      return;
+    }
+    onChange(e);
+  }, [onChange]);
+  return /* @__PURE__ */ import_react.default.createElement(import_Styleds.Styled2DigitsInput, {
+    autoFocus: autoFocusMonthInput,
+    onChange: validateOnChange,
+    onBlur,
+    onFocus,
+    onKeyDown,
+    value,
+    ref: contextRef,
+    placeholder,
+    "aria-label": `month input field, ${ariaCurrentValueForInputs}`,
+    "data-testid": import_ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.DATE_INPUTS.MONTH,
+    disabled,
+    "aria-disabled": disabled
+  });
+});
+module.exports = __toCommonJS(MMInput_exports);
+//# sourceMappingURL=MMInput.js.map

package/dist/cjs/date-time-picker/parts/DateInputs/MMInput.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/date-time-picker/parts/DateInputs/MMInput.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import React, { useCallback } from 'react';\nimport { Styled2DigitsInput } from '../Styleds';\nimport { ControlledDateTimePickerDatatestid } from '../../ControlledDateTimePickerDatatestid';\nimport type { onChangeFuncT, onBlurFuncT, onFocusFuncT, onKeyDownT } from '../../index.d';\n\nconst regExpNumbers = /^[0-9]+$/;\nconst isInvalidMonth = (month) => {\n  if (month === '') return false;\n  const numberOnly = regExpNumbers.test(month);\n  return month.length > 2 || month === '00' || !numberOnly || Number.parseInt(month, 10) > 12;\n};\ninterface MMInputsPropsT {\n  onChange: onChangeFuncT;\n  onBlur: onBlurFuncT;\n  onFocus: onFocusFuncT;\n  onKeyDown: onKeyDownT;\n  autoFocusMonthInput: boolean;\n  value: string;\n  disabled: boolean;\n  contextRef: React.RefObject<HTMLInputElement>;\n  placeholder: string;\n  ariaCurrentValueForInputs: string;\n}\nexport const MMInput = React.memo(\n  ({\n    onChange,\n    onBlur,\n    onFocus,\n    onKeyDown,\n    value,\n    disabled,\n    placeholder,\n    contextRef,\n    autoFocusMonthInput,\n    ariaCurrentValueForInputs,\n  }: MMInputsPropsT): JSX.Element => {\n    const validateOnChange = useCallback(\n      (e) => {\n        if (isInvalidMonth(e?.target?.value)) {\n          e.preventDefault();\n          return;\n        }\n        onChange(e);\n      },\n      [onChange],\n    );\n    return (\n      <Styled2DigitsInput\n        autoFocus={autoFocusMonthInput}\n        onChange={validateOnChange}\n        onBlur={onBlur}\n        onFocus={onFocus}\n        onKeyDown={onKeyDown}\n        value={value}\n        ref={contextRef}\n        placeholder={placeholder}\n        aria-label={`month input field, ${ariaCurrentValueForInputs}`}\n        data-testid={ControlledDateTimePickerDatatestid.DATE_INPUTS.MONTH}\n        disabled={disabled}\n        aria-disabled={disabled}\n      />\n    );\n  },\n);\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAmC;AACnC,qBAAmC;AACnC,gDAAmD;AAGnD,MAAM,gBAAgB;AACtB,MAAM,iBAAiB,CAAC,UAAU;AAChC,MAAI,UAAU;AAAI,WAAO;AACzB,QAAM,aAAa,cAAc,KAAK;AACtC,SAAO,MAAM,SAAS,KAAK,UAAU,QAAQ,CAAC,cAAc,OAAO,SAAS,OAAO,MAAM;AAAA;AAcpF,MAAM,UAAU,qBAAM,KAC3B,CAAC;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,MACiC;AACjC,QAAM,mBAAmB,8BACvB,CAAC,MAAM;AACL,QAAI,eAAe,GAAG,QAAQ,QAAQ;AACpC,QAAE;AACF;AAAA;AAEF,aAAS;AAAA,KAEX,CAAC;AAEH,SACE,mDAAC,mCAAD;AAAA,IACE,WAAW;AAAA,IACX,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,KAAK;AAAA,IACL;AAAA,IACA,cAAY,sBAAsB;AAAA,IAClC,eAAa,6EAAmC,YAAY;AAAA,IAC5D;AAAA,IACA,iBAAe;AAAA;AAAA;",
+  "names": []
+}

package/dist/cjs/date-time-picker/parts/DateInputs/YYYYInput.js

@@ -0,0 +1,76 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toESM = (module2, isNodeMode) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var YYYYInput_exports = {};
+__export(YYYYInput_exports, {
+  YYYYInput: () => YYYYInput
+});
+var React = __toESM(require("react"));
+var import_react = __toESM(require("react"));
+var import_ControlledDateTimePickerDatatestid = require("../../ControlledDateTimePickerDatatestid");
+var import_Styleds = require("../Styleds");
+const regExpNumbers = /^[0-9]+$/;
+const isInvalidYear = (year) => {
+  if (year === "")
+    return false;
+  const numberOnly = regExpNumbers.test(year);
+  return year.length > 4 || !numberOnly || Number.parseInt(year, 10) > 9999;
+};
+const YYYYInput = import_react.default.memo(({
+  onChange,
+  onBlur,
+  onFocus,
+  onKeyDown,
+  value,
+  disabled,
+  placeholder,
+  contextRef,
+  ariaCurrentValueForInputs
+}) => {
+  const validateOnChange = (0, import_react.useCallback)((e) => {
+    if (isInvalidYear(e?.target?.value)) {
+      e.preventDefault();
+      return;
+    }
+    onChange(e);
+  }, [onChange]);
+  return /* @__PURE__ */ import_react.default.createElement(import_Styleds.StyledMin4DigitsInput, {
+    onChange: validateOnChange,
+    onBlur,
+    onFocus,
+    onKeyDown,
+    value,
+    ref: contextRef,
+    placeholder,
+    "aria-label": `year input field, ${ariaCurrentValueForInputs}`,
+    "data-testid": import_ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.DATE_INPUTS.YEAR,
+    disabled,
+    "aria-disabled": disabled
+  });
+});
+module.exports = __toCommonJS(YYYYInput_exports);
+//# sourceMappingURL=YYYYInput.js.map

package/dist/cjs/date-time-picker/parts/DateInputs/YYYYInput.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/date-time-picker/parts/DateInputs/YYYYInput.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import React, { useCallback } from 'react';\nimport { ControlledDateTimePickerDatatestid } from '../../ControlledDateTimePickerDatatestid';\nimport { StyledMin4DigitsInput } from '../Styleds';\nimport type { onChangeFuncT, onBlurFuncT, onFocusFuncT, onKeyDownT } from '../../index.d';\n\nconst regExpNumbers = /^[0-9]+$/;\nconst isInvalidYear = (year) => {\n  if (year === '') return false;\n  const numberOnly = regExpNumbers.test(year);\n  return year.length > 4 || !numberOnly || Number.parseInt(year, 10) > 9999;\n};\n\ninterface YYYYInputsPropsT {\n  onChange: onChangeFuncT;\n  onBlur: onBlurFuncT;\n  onFocus: onFocusFuncT;\n  onKeyDown: onKeyDownT;\n  value: string;\n  disabled: boolean;\n  contextRef: React.RefObject<HTMLInputElement>;\n  placeholder: string;\n  ariaCurrentValueForInputs: string;\n}\nexport const YYYYInput = React.memo(\n  ({\n    onChange,\n    onBlur,\n    onFocus,\n    onKeyDown,\n    value,\n    disabled,\n    placeholder,\n    contextRef,\n    ariaCurrentValueForInputs,\n  }: YYYYInputsPropsT): JSX.Element => {\n    const validateOnChange = useCallback(\n      (e) => {\n        if (isInvalidYear(e?.target?.value)) {\n          e.preventDefault();\n          return;\n        }\n        onChange(e);\n      },\n      [onChange],\n    );\n    return (\n      <StyledMin4DigitsInput\n        onChange={validateOnChange}\n        onBlur={onBlur}\n        onFocus={onFocus}\n        onKeyDown={onKeyDown}\n        value={value}\n        ref={contextRef}\n        placeholder={placeholder}\n        aria-label={`year input field, ${ariaCurrentValueForInputs}`}\n        data-testid={ControlledDateTimePickerDatatestid.DATE_INPUTS.YEAR}\n        disabled={disabled}\n        aria-disabled={disabled}\n      />\n    );\n  },\n);\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAmC;AACnC,gDAAmD;AACnD,qBAAsC;AAGtC,MAAM,gBAAgB;AACtB,MAAM,gBAAgB,CAAC,SAAS;AAC9B,MAAI,SAAS;AAAI,WAAO;AACxB,QAAM,aAAa,cAAc,KAAK;AACtC,SAAO,KAAK,SAAS,KAAK,CAAC,cAAc,OAAO,SAAS,MAAM,MAAM;AAAA;AAchE,MAAM,YAAY,qBAAM,KAC7B,CAAC;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,MACmC;AACnC,QAAM,mBAAmB,8BACvB,CAAC,MAAM;AACL,QAAI,cAAc,GAAG,QAAQ,QAAQ;AACnC,QAAE;AACF;AAAA;AAEF,aAAS;AAAA,KAEX,CAAC;AAEH,SACE,mDAAC,sCAAD;AAAA,IACE,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,KAAK;AAAA,IACL;AAAA,IACA,cAAY,qBAAqB;AAAA,IACjC,eAAa,6EAAmC,YAAY;AAAA,IAC5D;AAAA,IACA,iBAAe;AAAA;AAAA;",
+  "names": []
+}