@elliemae/ds-controlled-form 2.2.0-next.3 → 2.3.0-alpha.1

package/esm/controlled-date-time-picker/parts/DateInputs/YYYYInput.js

@@ -1,51 +1,47 @@
-import React, { useCallback } from 'react';
-import { ControlledDateTimePickerDatatestid } from '../../ControlledDateTimePickerDatatestid.js';
-import { StyledMin4DigitsInput } from '../Styleds.js';
-import { jsx } from 'react/jsx-runtime';
-
+import * as React from "react";
+import React2, { useCallback } from "react";
+import { ControlledDateTimePickerDatatestid } from "../../ControlledDateTimePickerDatatestid";
+import { StyledMin4DigitsInput } from "../Styleds";
 const regExpNumbers = /^[0-9]+$/;
-
-const isInvalidYear = year => {
-  if (year === '') return false;
+const isInvalidYear = (year) => {
+  if (year === "")
+    return false;
   const numberOnly = regExpNumbers.test(year);
   return year.length > 4 || !numberOnly || Number.parseInt(year, 10) > 9999;
 };
-
-const YYYYInput = /*#__PURE__*/React.memo(_ref => {
-  let {
-    onChange,
-    onBlur,
-    onFocus,
-    onKeyDown,
-    value,
-    disabled,
-    placeholder,
-    contextRef,
-    ariaCurrentValueForInputs
-  } = _ref;
-  const validateOnChange = useCallback(e => {
-    var _e$target;
-
-    if (isInvalidYear(e === null || e === void 0 ? void 0 : (_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.value)) {
+const YYYYInput = React2.memo(({
+  onChange,
+  onBlur,
+  onFocus,
+  onKeyDown,
+  value,
+  disabled,
+  placeholder,
+  contextRef,
+  ariaCurrentValueForInputs
+}) => {
+  const validateOnChange = useCallback((e) => {
+    if (isInvalidYear(e?.target?.value)) {
       e.preventDefault();
       return;
     }
-
     onChange(e);
   }, [onChange]);
-  return /*#__PURE__*/jsx(StyledMin4DigitsInput, {
+  return /* @__PURE__ */ React2.createElement(StyledMin4DigitsInput, {
     onChange: validateOnChange,
-    onBlur: onBlur,
-    onFocus: onFocus,
-    onKeyDown: onKeyDown,
-    value: value,
+    onBlur,
+    onFocus,
+    onKeyDown,
+    value,
     ref: contextRef,
-    placeholder: placeholder,
-    "aria-label": "year input field, ".concat(ariaCurrentValueForInputs),
+    placeholder,
+    "aria-label": `year input field, ${ariaCurrentValueForInputs}`,
     "data-testid": ControlledDateTimePickerDatatestid.DATE_INPUTS.YEAR,
-    disabled: disabled,
+    disabled,
     "aria-disabled": disabled
   });
 });
-
-export { YYYYInput };
+export {
+  YYYYInput
+};
+//# sourceMappingURL=YYYYInput.js.map

package/esm/controlled-date-time-picker/parts/DateInputs/YYYYInput.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/controlled-date-time-picker/parts/DateInputs/YYYYInput.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback } from 'react';\nimport { ControlledDateTimePickerDatatestid } from '../../ControlledDateTimePickerDatatestid';\nimport { StyledMin4DigitsInput } from '../Styleds';\nimport type { 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"],
+  "mappings": "AAAA;ACAA;AACA;AACA;AAGA,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,OAAM,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,YACvB,CAAC,MAAM;AACL,QAAI,cAAc,GAAG,QAAQ,QAAQ;AACnC,QAAE;AACF;AAAA;AAEF,aAAS;AAAA,KAEX,CAAC;AAEH,SACE,qCAAC,uBAAD;AAAA,IACE,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,KAAK;AAAA,IACL;AAAA,IACA,cAAY,qBAAqB;AAAA,IACjC,eAAa,mCAAmC,YAAY;AAAA,IAC5D;AAAA,IACA,iBAAe;AAAA;AAAA;",
+  "names": []
+}

package/esm/controlled-date-time-picker/parts/DateInputs/useDateInputs.js

@@ -1,18 +1,13 @@
-import 'core-js/modules/esnext.async-iterator.filter.js';
-import 'core-js/modules/esnext.iterator.constructor.js';
-import 'core-js/modules/esnext.iterator.filter.js';
-import 'core-js/modules/esnext.async-iterator.for-each.js';
-import 'core-js/modules/esnext.iterator.for-each.js';
-import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
-import { useContext, useCallback, useMemo } from 'react';
-import { ControlledDateTimePickerContext } from '../../ControlledDateTimePickerCTX.js';
-import { getFormattedDateString, prependStringWithPlaceHolders, fillStringWithPlaceHolders } from '../../utils/stringHelpers.js';
-import { getValidationDateStringMetaInfo } from '../../utils/dateHelpers.js';
-import { homeEndArrowUpDownDashSlashesKeys, homeEndArrowUpDownSpaceKeys, defaultMetaInfo } from '../../utils/constants.js';
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+import * as React from "react";
+import { useCallback, useMemo, useContext } from "react";
+import { ControlledDateTimePickerContext } from "../../ControlledDateTimePickerCTX";
+import {
+  getFormattedDateString,
+  prependStringWithPlaceHolders,
+  fillStringWithPlaceHolders
+} from "../../utils/stringHelpers";
+import { getValidationDateStringMetaInfo } from "../../utils/dateHelpers";
+import { defaultMetaInfo, homeEndArrowUpDownDashSlashesKeys, homeEndArrowUpDownSpaceKeys } from "../../utils/constants";
 const useDateInputs = () => {
   const {
     props: {
@@ -43,257 +38,253 @@ const useDateInputs = () => {
     lastSegmentRef
   } = useContext(ControlledDateTimePickerContext);
   const onHomeKeyDown = useCallback(() => {
-    var _monthInputRef$curren, _monthInputRef$curren2;
-
-    monthInputRef === null || monthInputRef === void 0 ? void 0 : (_monthInputRef$curren = monthInputRef.current) === null || _monthInputRef$curren === void 0 ? void 0 : (_monthInputRef$curren2 = _monthInputRef$curren.focus) === null || _monthInputRef$curren2 === void 0 ? void 0 : _monthInputRef$curren2.call(_monthInputRef$curren);
+    monthInputRef?.current?.focus?.();
   }, [monthInputRef]);
   const onEndKeyDown = useCallback(() => {
-    var _pickerButtonRef$curr, _pickerButtonRef$curr2, _clearButtonRef$curre, _clearButtonRef$curre2, _meridiemInputRef$cur, _meridiemInputRef$cur2, _yearInputRef$current, _yearInputRef$current2;
-
-    if (withAnyPicker) pickerButtonRef === null || pickerButtonRef === void 0 ? void 0 : (_pickerButtonRef$curr = pickerButtonRef.current) === null || _pickerButtonRef$curr === void 0 ? void 0 : (_pickerButtonRef$curr2 = _pickerButtonRef$curr.focus) === null || _pickerButtonRef$curr2 === void 0 ? void 0 : _pickerButtonRef$curr2.call(_pickerButtonRef$curr);else if (withClearBtn) clearButtonRef === null || clearButtonRef === void 0 ? void 0 : (_clearButtonRef$curre = clearButtonRef.current) === null || _clearButtonRef$curre === void 0 ? void 0 : (_clearButtonRef$curre2 = _clearButtonRef$curre.focus) === null || _clearButtonRef$curre2 === void 0 ? void 0 : _clearButtonRef$curre2.call(_clearButtonRef$curre);else if (!hideTime) meridiemInputRef === null || meridiemInputRef === void 0 ? void 0 : (_meridiemInputRef$cur = meridiemInputRef.current) === null || _meridiemInputRef$cur === void 0 ? void 0 : (_meridiemInputRef$cur2 = _meridiemInputRef$cur.focus) === null || _meridiemInputRef$cur2 === void 0 ? void 0 : _meridiemInputRef$cur2.call(_meridiemInputRef$cur);else yearInputRef === null || yearInputRef === void 0 ? void 0 : (_yearInputRef$current = yearInputRef.current) === null || _yearInputRef$current === void 0 ? void 0 : (_yearInputRef$current2 = _yearInputRef$current.focus) === null || _yearInputRef$current2 === void 0 ? void 0 : _yearInputRef$current2.call(_yearInputRef$current);
+    if (withAnyPicker)
+      pickerButtonRef?.current?.focus?.();
+    else if (withClearBtn)
+      clearButtonRef?.current?.focus?.();
+    else if (!hideTime)
+      meridiemInputRef?.current?.focus?.();
+    else
+      yearInputRef?.current?.focus?.();
   }, [withAnyPicker, pickerButtonRef, withClearBtn, clearButtonRef, hideTime, meridiemInputRef, yearInputRef]);
   const setLatestInteractionRegionDateInputs = useCallback(() => {
-    setLatestInteractionRegion('date-inputs');
+    setLatestInteractionRegion("date-inputs");
   }, [setLatestInteractionRegion]);
-  const handleChangeMonth = useCallback(function (newMonth, e) {
-    let metaInfo = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : defaultMetaInfo;
+  const handleChangeMonth = useCallback((newMonth, e, metaInfo = defaultMetaInfo) => {
     const newDateString = getFormattedDateString({
       month: newMonth,
       day,
       year
     });
-
-    const finalMetaInfo = _objectSpread(_objectSpread(_objectSpread({}, metaInfo), getValidationDateStringMetaInfo(newDateString, getIsOutOfRangeDay, getIsDisabledDay)), {}, {
+    const finalMetaInfo = {
+      ...metaInfo,
+      ...getValidationDateStringMetaInfo(newDateString, getIsOutOfRangeDay, getIsDisabledDay),
       newDateString
-    });
-
+    };
     appOnMonthChange(newMonth, e, finalMetaInfo);
     handleChangeComposedDateString(newDateString, finalMetaInfo);
   }, [day, year, getIsOutOfRangeDay, getIsDisabledDay, appOnMonthChange, handleChangeComposedDateString]);
   const onMonthFocus = useCallback(() => {
     setLatestInteractionRegionDateInputs();
   }, [setLatestInteractionRegionDateInputs]);
-  const onMonthChange = useCallback(e => {
-    var _e$target, _dayInputRef$current, _dayInputRef$current$;
-
-    let newMonth = e === null || e === void 0 ? void 0 : (_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.value; // converts months 2~9 to 02~09
-
-    if (Number.parseInt(newMonth, 10) > 1) newMonth = prependStringWithPlaceHolders(newMonth, 2);
-    handleChangeMonth(newMonth, e); // auto-advance functionality:
-
-    if (newMonth.length === 2) dayInputRef === null || dayInputRef === void 0 ? void 0 : (_dayInputRef$current = dayInputRef.current) === null || _dayInputRef$current === void 0 ? void 0 : (_dayInputRef$current$ = _dayInputRef$current.focus) === null || _dayInputRef$current$ === void 0 ? void 0 : _dayInputRef$current$.call(_dayInputRef$current);
+  const onMonthChange = useCallback((e) => {
+    let newMonth = e?.target?.value;
+    if (Number.parseInt(newMonth, 10) > 1)
+      newMonth = prependStringWithPlaceHolders(newMonth, 2);
+    handleChangeMonth(newMonth, e);
+    if (newMonth.length === 2)
+      dayInputRef?.current?.focus?.();
   }, [dayInputRef, handleChangeMonth]);
-  const onMonthKeyDown = useCallback(e => {
-    var _lastSegmentRef$curre, _lastSegmentRef$curre2;
-
-    const {
-      key,
-      ctrlKey,
-      metaKey
-    } = e;
+  const onMonthKeyDown = useCallback((e) => {
+    const { key, ctrlKey, metaKey } = e;
     const monthStringConvertedToInteger = Number.parseInt(month, 10);
-    if (homeEndArrowUpDownDashSlashesKeys.includes(key)) e.preventDefault();
-    if (homeEndArrowUpDownDashSlashesKeys.includes(key)) e.stopPropagation();
-    if (key === 'Home') onHomeKeyDown();
-    if (key === 'End') onEndKeyDown();
-
-    if (key === 'ArrowUp' || key === 'ArrowDown') {
+    if (homeEndArrowUpDownDashSlashesKeys.includes(key))
+      e.preventDefault();
+    if (homeEndArrowUpDownDashSlashesKeys.includes(key))
+      e.stopPropagation();
+    if (key === "Home")
+      onHomeKeyDown();
+    if (key === "End")
+      onEndKeyDown();
+    if (key === "ArrowUp" || key === "ArrowDown") {
       const monthInteger = Number.isNaN(monthStringConvertedToInteger) ? 0 : monthStringConvertedToInteger;
       let newMonth;
-      if (key === 'ArrowUp') newMonth = monthInteger + 1 <= 12 ? monthInteger + 1 : monthInteger;else newMonth = monthInteger - 1 > 0 ? monthInteger - 1 : 1;
-      newMonth = prependStringWithPlaceHolders("".concat(newMonth), 2);
+      if (key === "ArrowUp")
+        newMonth = monthInteger + 1 <= 12 ? monthInteger + 1 : monthInteger;
+      else
+        newMonth = monthInteger - 1 > 0 ? monthInteger - 1 : 1;
+      newMonth = prependStringWithPlaceHolders(`${newMonth}`, 2);
+      handleChangeMonth(newMonth, e);
+    }
+    if (!Number.isNaN(monthStringConvertedToInteger) && (key === "-" || key === "/" || key === "\\")) {
+      const newMonth = prependStringWithPlaceHolders(`${monthStringConvertedToInteger}`, 2);
       handleChangeMonth(newMonth, e);
+      if (newMonth.length === 2)
+        dayInputRef?.current?.focus?.();
     }
-
-    if (!Number.isNaN(monthStringConvertedToInteger) && (key === '-' || key === '/' || key === '\\')) {
-      var _dayInputRef$current2, _dayInputRef$current3;
-
-      const newMonth = prependStringWithPlaceHolders("".concat(monthStringConvertedToInteger), 2);
-      handleChangeMonth(newMonth, e); // auto-advance functionality:
-
-      if (newMonth.length === 2) dayInputRef === null || dayInputRef === void 0 ? void 0 : (_dayInputRef$current2 = dayInputRef.current) === null || _dayInputRef$current2 === void 0 ? void 0 : (_dayInputRef$current3 = _dayInputRef$current2.focus) === null || _dayInputRef$current3 === void 0 ? void 0 : _dayInputRef$current3.call(_dayInputRef$current2);
-    } // focus last fragment on fill with now
-
-
-    if ((ctrlKey || metaKey) && key === ';') lastSegmentRef === null || lastSegmentRef === void 0 ? void 0 : (_lastSegmentRef$curre = lastSegmentRef.current) === null || _lastSegmentRef$curre === void 0 ? void 0 : (_lastSegmentRef$curre2 = _lastSegmentRef$curre.focus) === null || _lastSegmentRef$curre2 === void 0 ? void 0 : _lastSegmentRef$curre2.call(_lastSegmentRef$curre);
+    if ((ctrlKey || metaKey) && key === ";")
+      lastSegmentRef?.current?.focus?.();
   }, [month, onHomeKeyDown, onEndKeyDown, lastSegmentRef, handleChangeMonth, dayInputRef]);
-  const onMonthBlur = useCallback(e => {
-    var _e$target2;
-
-    const newMonth = e === null || e === void 0 ? void 0 : (_e$target2 = e.target) === null || _e$target2 === void 0 ? void 0 : _e$target2.value;
-    if (newMonth === '0') handleChangeMonth('01', e, {
-      isAutomaticFillTrigger: true
-    });else if (newMonth.length > 0 && newMonth.length < 2) handleChangeMonth(prependStringWithPlaceHolders(newMonth, 2), e, {
-      isAutomaticFillTrigger: true
-    });
+  const onMonthBlur = useCallback((e) => {
+    const newMonth = e?.target?.value;
+    if (newMonth === "0")
+      handleChangeMonth("01", e, { isAutomaticFillTrigger: true });
+    else if (newMonth.length > 0 && newMonth.length < 2)
+      handleChangeMonth(prependStringWithPlaceHolders(newMonth, 2), e, {
+        isAutomaticFillTrigger: true
+      });
   }, [handleChangeMonth]);
-  const handleChangeDay = useCallback(function (newDay, e) {
-    let metaInfo = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : defaultMetaInfo;
+  const handleChangeDay = useCallback((newDay, e, metaInfo = defaultMetaInfo) => {
     const newDateString = getFormattedDateString({
       month,
       day: newDay,
       year
     });
-
-    const finalMetaInfo = _objectSpread(_objectSpread(_objectSpread({}, metaInfo), getValidationDateStringMetaInfo(newDateString, getIsOutOfRangeDay, getIsDisabledDay)), {}, {
+    const finalMetaInfo = {
+      ...metaInfo,
+      ...getValidationDateStringMetaInfo(newDateString, getIsOutOfRangeDay, getIsDisabledDay),
       newDateString
-    });
-
+    };
     appOnDayChange(newDay, e, finalMetaInfo);
     handleChangeComposedDateString(newDateString, finalMetaInfo);
   }, [month, year, getIsOutOfRangeDay, getIsDisabledDay, appOnDayChange, handleChangeComposedDateString]);
   const onDayFocus = useCallback(() => {
     setLatestInteractionRegionDateInputs();
   }, [setLatestInteractionRegionDateInputs]);
-  const onDayChange = useCallback(e => {
-    var _e$target3, _yearInputRef$current3, _yearInputRef$current4;
-
-    let newDay = e === null || e === void 0 ? void 0 : (_e$target3 = e.target) === null || _e$target3 === void 0 ? void 0 : _e$target3.value; // converts days 4~9 to 04~09
-
-    if (Number.parseInt(newDay, 10) > 3) newDay = prependStringWithPlaceHolders(newDay, 2);
-    handleChangeDay(newDay, e); // auto-advance functionality:
-
-    if (newDay.length === 2) yearInputRef === null || yearInputRef === void 0 ? void 0 : (_yearInputRef$current3 = yearInputRef.current) === null || _yearInputRef$current3 === void 0 ? void 0 : (_yearInputRef$current4 = _yearInputRef$current3.focus) === null || _yearInputRef$current4 === void 0 ? void 0 : _yearInputRef$current4.call(_yearInputRef$current3);
+  const onDayChange = useCallback((e) => {
+    let newDay = e?.target?.value;
+    if (Number.parseInt(newDay, 10) > 3)
+      newDay = prependStringWithPlaceHolders(newDay, 2);
+    handleChangeDay(newDay, e);
+    if (newDay.length === 2)
+      yearInputRef?.current?.focus?.();
   }, [handleChangeDay, yearInputRef]);
-  const onDayKeyDown = useCallback(e => {
-    var _lastSegmentRef$curre3, _lastSegmentRef$curre4;
-
-    const {
-      key,
-      ctrlKey,
-      metaKey
-    } = e;
+  const onDayKeyDown = useCallback((e) => {
+    const { key, ctrlKey, metaKey } = e;
     const dayStringConvertedToInteger = Number.parseInt(day, 10);
-    if (homeEndArrowUpDownDashSlashesKeys.includes(key)) e.preventDefault();
-    if (homeEndArrowUpDownDashSlashesKeys.includes(key)) e.stopPropagation();
-    if (key === 'Home') onHomeKeyDown();
-    if (key === 'End') onEndKeyDown();
-
-    if (key === 'ArrowUp' || key === 'ArrowDown') {
+    if (homeEndArrowUpDownDashSlashesKeys.includes(key))
+      e.preventDefault();
+    if (homeEndArrowUpDownDashSlashesKeys.includes(key))
+      e.stopPropagation();
+    if (key === "Home")
+      onHomeKeyDown();
+    if (key === "End")
+      onEndKeyDown();
+    if (key === "ArrowUp" || key === "ArrowDown") {
       const dayInteger = Number.isNaN(dayStringConvertedToInteger) ? 0 : dayStringConvertedToInteger;
       let newDay;
-      if (key === 'ArrowUp') newDay = dayInteger + 1 <= 31 ? dayInteger + 1 : dayInteger;else newDay = dayInteger - 1 > 0 ? dayInteger - 1 : 1;
-      newDay = prependStringWithPlaceHolders("".concat(newDay), 2);
+      if (key === "ArrowUp")
+        newDay = dayInteger + 1 <= 31 ? dayInteger + 1 : dayInteger;
+      else
+        newDay = dayInteger - 1 > 0 ? dayInteger - 1 : 1;
+      newDay = prependStringWithPlaceHolders(`${newDay}`, 2);
+      handleChangeDay(newDay, e);
+    }
+    if (!Number.isNaN(dayStringConvertedToInteger) && (key === "-" || key === "/" || key === "\\")) {
+      const newDay = prependStringWithPlaceHolders(`${dayStringConvertedToInteger}`, 2);
       handleChangeDay(newDay, e);
+      if (newDay.length === 2)
+        yearInputRef?.current?.focus?.();
+    }
+    if (key === "Backspace" && day?.length === 0) {
+      monthInputRef?.current?.focus?.();
     }
-
-    if (!Number.isNaN(dayStringConvertedToInteger) && (key === '-' || key === '/' || key === '\\')) {
-      var _yearInputRef$current5, _yearInputRef$current6;
-
-      const newDay = prependStringWithPlaceHolders("".concat(dayStringConvertedToInteger), 2);
-      handleChangeDay(newDay, e); // auto-advance functionality:
-
-      if (newDay.length === 2) yearInputRef === null || yearInputRef === void 0 ? void 0 : (_yearInputRef$current5 = yearInputRef.current) === null || _yearInputRef$current5 === void 0 ? void 0 : (_yearInputRef$current6 = _yearInputRef$current5.focus) === null || _yearInputRef$current6 === void 0 ? void 0 : _yearInputRef$current6.call(_yearInputRef$current5);
-    } // regressive backspace functionality
-
-
-    if (key === 'Backspace' && (day === null || day === void 0 ? void 0 : day.length) === 0) {
-      var _monthInputRef$curren3, _monthInputRef$curren4;
-
-      monthInputRef === null || monthInputRef === void 0 ? void 0 : (_monthInputRef$curren3 = monthInputRef.current) === null || _monthInputRef$curren3 === void 0 ? void 0 : (_monthInputRef$curren4 = _monthInputRef$curren3.focus) === null || _monthInputRef$curren4 === void 0 ? void 0 : _monthInputRef$curren4.call(_monthInputRef$curren3);
-    } // focus last fragment on fill with now
-
-
-    if ((ctrlKey || metaKey) && key === ';') lastSegmentRef === null || lastSegmentRef === void 0 ? void 0 : (_lastSegmentRef$curre3 = lastSegmentRef.current) === null || _lastSegmentRef$curre3 === void 0 ? void 0 : (_lastSegmentRef$curre4 = _lastSegmentRef$curre3.focus) === null || _lastSegmentRef$curre4 === void 0 ? void 0 : _lastSegmentRef$curre4.call(_lastSegmentRef$curre3);
+    if ((ctrlKey || metaKey) && key === ";")
+      lastSegmentRef?.current?.focus?.();
   }, [day, onHomeKeyDown, onEndKeyDown, lastSegmentRef, handleChangeDay, yearInputRef, monthInputRef]);
-  const onDayBlur = useCallback(e => {
-    var _e$target4;
-
-    const newDay = e === null || e === void 0 ? void 0 : (_e$target4 = e.target) === null || _e$target4 === void 0 ? void 0 : _e$target4.value;
-    if (newDay === '0') handleChangeDay('01', e, {
-      isAutomaticFillTrigger: true
-    });else if (newDay.length > 0 && newDay.length < 2) handleChangeDay(prependStringWithPlaceHolders(newDay, 2), e, {
-      isAutomaticFillTrigger: true
-    });
+  const onDayBlur = useCallback((e) => {
+    const newDay = e?.target?.value;
+    if (newDay === "0")
+      handleChangeDay("01", e, { isAutomaticFillTrigger: true });
+    else if (newDay.length > 0 && newDay.length < 2)
+      handleChangeDay(prependStringWithPlaceHolders(newDay, 2), e, {
+        isAutomaticFillTrigger: true
+      });
   }, [handleChangeDay]);
-  const handleChangeYear = useCallback(function (newYear, e) {
-    let metaInfo = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : defaultMetaInfo;
+  const handleChangeYear = useCallback((newYear, e, metaInfo = defaultMetaInfo) => {
     const newDateString = getFormattedDateString({
       month,
       day,
       year: newYear
     });
-
-    const finalMetaInfo = _objectSpread(_objectSpread(_objectSpread({}, metaInfo), getValidationDateStringMetaInfo(newDateString, getIsOutOfRangeDay, getIsDisabledDay)), {}, {
+    const finalMetaInfo = {
+      ...metaInfo,
+      ...getValidationDateStringMetaInfo(newDateString, getIsOutOfRangeDay, getIsDisabledDay),
       newDateString
-    });
-
+    };
     appOnYearChange(newYear, e, finalMetaInfo);
     handleChangeComposedDateString(newDateString, finalMetaInfo);
   }, [month, day, getIsOutOfRangeDay, getIsDisabledDay, appOnYearChange, handleChangeComposedDateString]);
   const onYearFocus = useCallback(() => {
     setLatestInteractionRegionDateInputs();
   }, [setLatestInteractionRegionDateInputs]);
-  const onYearChange = useCallback(e => {
-    var _e$target5;
-
-    const newYear = e === null || e === void 0 ? void 0 : (_e$target5 = e.target) === null || _e$target5 === void 0 ? void 0 : _e$target5.value;
-    handleChangeYear(newYear, e); // auto-advance functionality:
-
+  const onYearChange = useCallback((e) => {
+    const newYear = e?.target?.value;
+    handleChangeYear(newYear, e);
     if (newYear.length === 4) {
-      var _hourInputRef$current, _hourInputRef$current2;
-
-      if (!hideTime) hourInputRef === null || hourInputRef === void 0 ? void 0 : (_hourInputRef$current = hourInputRef.current) === null || _hourInputRef$current === void 0 ? void 0 : (_hourInputRef$current2 = _hourInputRef$current.focus) === null || _hourInputRef$current2 === void 0 ? void 0 : _hourInputRef$current2.call(_hourInputRef$current);else if (withAnyRightController) {
-        var _clearButtonRef$curre3, _clearButtonRef$curre4, _pickerButtonRef$curr3, _pickerButtonRef$curr4;
-
-        if (withClearBtn) (_clearButtonRef$curre3 = clearButtonRef.current) === null || _clearButtonRef$curre3 === void 0 ? void 0 : (_clearButtonRef$curre4 = _clearButtonRef$curre3.focus) === null || _clearButtonRef$curre4 === void 0 ? void 0 : _clearButtonRef$curre4.call(_clearButtonRef$curre3);else if (withAnyPicker) pickerButtonRef === null || pickerButtonRef === void 0 ? void 0 : (_pickerButtonRef$curr3 = pickerButtonRef.current) === null || _pickerButtonRef$curr3 === void 0 ? void 0 : (_pickerButtonRef$curr4 = _pickerButtonRef$curr3.focus) === null || _pickerButtonRef$curr4 === void 0 ? void 0 : _pickerButtonRef$curr4.call(_pickerButtonRef$curr3); // pending approval from Seda, check which one should be focused first...
+      if (!hideTime)
+        hourInputRef?.current?.focus?.();
+      else if (withAnyRightController) {
+        if (withClearBtn)
+          clearButtonRef.current?.focus?.();
+        else if (withAnyPicker)
+          pickerButtonRef?.current?.focus?.();
       }
     }
-  }, [handleChangeYear, hideTime, hourInputRef, withAnyRightController, withAnyPicker, pickerButtonRef, withClearBtn, clearButtonRef]);
-  const onYearKeyDown = useCallback(e => {
-    var _lastSegmentRef$curre5, _lastSegmentRef$curre6;
-
-    const {
-      key,
-      ctrlKey,
-      metaKey
-    } = e;
+  }, [
+    handleChangeYear,
+    hideTime,
+    hourInputRef,
+    withAnyRightController,
+    withAnyPicker,
+    pickerButtonRef,
+    withClearBtn,
+    clearButtonRef
+  ]);
+  const onYearKeyDown = useCallback((e) => {
+    const { key, ctrlKey, metaKey } = e;
     const yearStringConvertedToInteger = Number.parseInt(year, 10);
-    if (homeEndArrowUpDownSpaceKeys.includes(key)) e.preventDefault();
-    if (homeEndArrowUpDownSpaceKeys.includes(key)) e.stopPropagation();
-    if (key === 'Home') onHomeKeyDown();
-    if (key === 'End') onEndKeyDown();
-
-    if (key === 'ArrowUp' || key === 'ArrowDown') {
+    if (homeEndArrowUpDownSpaceKeys.includes(key))
+      e.preventDefault();
+    if (homeEndArrowUpDownSpaceKeys.includes(key))
+      e.stopPropagation();
+    if (key === "Home")
+      onHomeKeyDown();
+    if (key === "End")
+      onEndKeyDown();
+    if (key === "ArrowUp" || key === "ArrowDown") {
       const yearInteger = Number.isNaN(yearStringConvertedToInteger) ? 0 : yearStringConvertedToInteger;
       let newYear;
-      if (key === 'ArrowUp') newYear = yearInteger + 1 <= 9999 ? yearInteger + 1 : yearInteger;else newYear = yearInteger - 1 > 0 ? yearInteger - 1 : 1;
-      newYear = prependStringWithPlaceHolders("".concat(newYear), 4);
+      if (key === "ArrowUp")
+        newYear = yearInteger + 1 <= 9999 ? yearInteger + 1 : yearInteger;
+      else
+        newYear = yearInteger - 1 > 0 ? yearInteger - 1 : 1;
+      newYear = prependStringWithPlaceHolders(`${newYear}`, 4);
       handleChangeYear(newYear, e);
     }
-
-    if (!Number.isNaN(yearStringConvertedToInteger) && key === ' ') {
-      const newYear = prependStringWithPlaceHolders("".concat(yearStringConvertedToInteger), 4);
-      handleChangeYear(newYear, e); // auto-advance functionality:
-
+    if (!Number.isNaN(yearStringConvertedToInteger) && key === " ") {
+      const newYear = prependStringWithPlaceHolders(`${yearStringConvertedToInteger}`, 4);
+      handleChangeYear(newYear, e);
       if (newYear.length === 4) {
-        var _hourInputRef$current3, _hourInputRef$current4;
-
-        if (!hideTime) hourInputRef === null || hourInputRef === void 0 ? void 0 : (_hourInputRef$current3 = hourInputRef.current) === null || _hourInputRef$current3 === void 0 ? void 0 : (_hourInputRef$current4 = _hourInputRef$current3.focus) === null || _hourInputRef$current4 === void 0 ? void 0 : _hourInputRef$current4.call(_hourInputRef$current3);else if (withAnyRightController) {
-          var _clearButtonRef$curre5, _clearButtonRef$curre6, _pickerButtonRef$curr5, _pickerButtonRef$curr6;
-
-          if (withClearBtn) (_clearButtonRef$curre5 = clearButtonRef.current) === null || _clearButtonRef$curre5 === void 0 ? void 0 : (_clearButtonRef$curre6 = _clearButtonRef$curre5.focus) === null || _clearButtonRef$curre6 === void 0 ? void 0 : _clearButtonRef$curre6.call(_clearButtonRef$curre5);else if (withAnyPicker) pickerButtonRef === null || pickerButtonRef === void 0 ? void 0 : (_pickerButtonRef$curr5 = pickerButtonRef.current) === null || _pickerButtonRef$curr5 === void 0 ? void 0 : (_pickerButtonRef$curr6 = _pickerButtonRef$curr5.focus) === null || _pickerButtonRef$curr6 === void 0 ? void 0 : _pickerButtonRef$curr6.call(_pickerButtonRef$curr5); // pending approval from Seda, check which one should be focused first...
+        if (!hideTime)
+          hourInputRef?.current?.focus?.();
+        else if (withAnyRightController) {
+          if (withClearBtn)
+            clearButtonRef.current?.focus?.();
+          else if (withAnyPicker)
+            pickerButtonRef?.current?.focus?.();
         }
       }
-    } // regressive backspace functionality
-
-
-    if (key === 'Backspace' && (year === null || year === void 0 ? void 0 : year.length) === 0) {
-      var _dayInputRef$current4, _dayInputRef$current5;
-
-      dayInputRef === null || dayInputRef === void 0 ? void 0 : (_dayInputRef$current4 = dayInputRef.current) === null || _dayInputRef$current4 === void 0 ? void 0 : (_dayInputRef$current5 = _dayInputRef$current4.focus) === null || _dayInputRef$current5 === void 0 ? void 0 : _dayInputRef$current5.call(_dayInputRef$current4);
-    } // focus last fragment on fill with now
-
-
-    if ((ctrlKey || metaKey) && key === ';') lastSegmentRef === null || lastSegmentRef === void 0 ? void 0 : (_lastSegmentRef$curre5 = lastSegmentRef.current) === null || _lastSegmentRef$curre5 === void 0 ? void 0 : (_lastSegmentRef$curre6 = _lastSegmentRef$curre5.focus) === null || _lastSegmentRef$curre6 === void 0 ? void 0 : _lastSegmentRef$curre6.call(_lastSegmentRef$curre5);
-  }, [year, onHomeKeyDown, onEndKeyDown, lastSegmentRef, handleChangeYear, hideTime, hourInputRef, withAnyRightController, withClearBtn, clearButtonRef, withAnyPicker, pickerButtonRef, dayInputRef]);
-  const onYearBlur = useCallback(e => {
-    var _e$target6;
-
-    const newYear = e === null || e === void 0 ? void 0 : (_e$target6 = e.target) === null || _e$target6 === void 0 ? void 0 : _e$target6.value;
-    if (newYear.length > 0 && newYear.length < 4) handleChangeYear(fillStringWithPlaceHolders(newYear, 4, '0'), e, {
-      isAutomaticFillTrigger: true
-    });
+    }
+    if (key === "Backspace" && year?.length === 0) {
+      dayInputRef?.current?.focus?.();
+    }
+    if ((ctrlKey || metaKey) && key === ";")
+      lastSegmentRef?.current?.focus?.();
+  }, [
+    year,
+    onHomeKeyDown,
+    onEndKeyDown,
+    lastSegmentRef,
+    handleChangeYear,
+    hideTime,
+    hourInputRef,
+    withAnyRightController,
+    withClearBtn,
+    clearButtonRef,
+    withAnyPicker,
+    pickerButtonRef,
+    dayInputRef
+  ]);
+  const onYearBlur = useCallback((e) => {
+    const newYear = e?.target?.value;
+    if (newYear.length > 0 && newYear.length < 4)
+      handleChangeYear(fillStringWithPlaceHolders(newYear, 4, "0"), e, {
+        isAutomaticFillTrigger: true
+      });
   }, [handleChangeYear]);
   return useMemo(() => ({
     month,
@@ -313,7 +304,27 @@ const useDateInputs = () => {
     onMonthKeyDown,
     onDayKeyDown,
     onYearKeyDown
-  }), [month, day, year, autoFocusMonthInput, disabled, onMonthFocus, onMonthChange, onDayFocus, onDayChange, onYearFocus, onYearChange, onMonthBlur, onDayBlur, onYearBlur, onMonthKeyDown, onDayKeyDown, onYearKeyDown]);
+  }), [
+    month,
+    day,
+    year,
+    autoFocusMonthInput,
+    disabled,
+    onMonthFocus,
+    onMonthChange,
+    onDayFocus,
+    onDayChange,
+    onYearFocus,
+    onYearChange,
+    onMonthBlur,
+    onDayBlur,
+    onYearBlur,
+    onMonthKeyDown,
+    onDayKeyDown,
+    onYearKeyDown
+  ]);
+};
+export {
+  useDateInputs
 };
-
-export { useDateInputs };
+//# sourceMappingURL=useDateInputs.js.map