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

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

@@ -0,0 +1,327 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var React = require('react');
+var ControlledDateTimePickerCTX = require('../../ControlledDateTimePickerCTX.js');
+var stringHelpers = require('../../utils/stringHelpers.js');
+var dateHelpers = require('../../utils/dateHelpers.js');
+var constants = require('../../utils/constants.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+
+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__default["default"](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; }
+const useDateInputs = () => {
+  const {
+    props: {
+      onMonthChange: appOnMonthChange,
+      onDayChange: appOnDayChange,
+      onYearChange: appOnYearChange,
+      getIsDisabledDay,
+      getIsOutOfRangeDay,
+      disabled
+    },
+    month,
+    day,
+    year,
+    hideTime,
+    monthInputRef,
+    dayInputRef,
+    yearInputRef,
+    hourInputRef,
+    meridiemInputRef,
+    clearButtonRef,
+    pickerButtonRef,
+    handleChangeComposedDateString,
+    setLatestInteractionRegion,
+    withClearBtn,
+    withAnyPicker,
+    withAnyRightController,
+    autoFocusMonthInput,
+    lastSegmentRef
+  } = React.useContext(ControlledDateTimePickerCTX.ControlledDateTimePickerContext);
+  const onHomeKeyDown = React.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]);
+  const onEndKeyDown = React.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);
+  }, [withAnyPicker, pickerButtonRef, withClearBtn, clearButtonRef, hideTime, meridiemInputRef, yearInputRef]);
+  const setLatestInteractionRegionDateInputs = React.useCallback(() => {
+    setLatestInteractionRegion('date-inputs');
+  }, [setLatestInteractionRegion]);
+  const handleChangeMonth = React.useCallback(function (newMonth, e) {
+    let metaInfo = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : constants.defaultMetaInfo;
+    const newDateString = stringHelpers.getFormattedDateString({
+      month: newMonth,
+      day,
+      year
+    });
+
+    const finalMetaInfo = _objectSpread(_objectSpread(_objectSpread({}, metaInfo), dateHelpers.getValidationDateStringMetaInfo(newDateString, getIsOutOfRangeDay, getIsDisabledDay)), {}, {
+      newDateString
+    });
+
+    appOnMonthChange(newMonth, e, finalMetaInfo);
+    handleChangeComposedDateString(newDateString, finalMetaInfo);
+  }, [day, year, getIsOutOfRangeDay, getIsDisabledDay, appOnMonthChange, handleChangeComposedDateString]);
+  const onMonthFocus = React.useCallback(() => {
+    setLatestInteractionRegionDateInputs();
+  }, [setLatestInteractionRegionDateInputs]);
+  const onMonthChange = React.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 = stringHelpers.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);
+  }, [dayInputRef, handleChangeMonth]);
+  const onMonthKeyDown = React.useCallback(e => {
+    var _lastSegmentRef$curre, _lastSegmentRef$curre2;
+
+    const {
+      key,
+      ctrlKey,
+      metaKey
+    } = e;
+    const monthStringConvertedToInteger = Number.parseInt(month, 10);
+    if (constants.homeEndArrowUpDownDashSlashesKeys.includes(key)) e.preventDefault();
+    if (constants.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 = stringHelpers.prependStringWithPlaceHolders("".concat(newMonth), 2);
+      handleChangeMonth(newMonth, e);
+    }
+
+    if (!Number.isNaN(monthStringConvertedToInteger) && (key === '-' || key === '/' || key === '\\')) {
+      var _dayInputRef$current2, _dayInputRef$current3;
+
+      const newMonth = stringHelpers.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);
+  }, [month, onHomeKeyDown, onEndKeyDown, lastSegmentRef, handleChangeMonth, dayInputRef]);
+  const onMonthBlur = React.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(stringHelpers.prependStringWithPlaceHolders(newMonth, 2), e, {
+      isAutomaticFillTrigger: true
+    });
+  }, [handleChangeMonth]);
+  const handleChangeDay = React.useCallback(function (newDay, e) {
+    let metaInfo = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : constants.defaultMetaInfo;
+    const newDateString = stringHelpers.getFormattedDateString({
+      month,
+      day: newDay,
+      year
+    });
+
+    const finalMetaInfo = _objectSpread(_objectSpread(_objectSpread({}, metaInfo), dateHelpers.getValidationDateStringMetaInfo(newDateString, getIsOutOfRangeDay, getIsDisabledDay)), {}, {
+      newDateString
+    });
+
+    appOnDayChange(newDay, e, finalMetaInfo);
+    handleChangeComposedDateString(newDateString, finalMetaInfo);
+  }, [month, year, getIsOutOfRangeDay, getIsDisabledDay, appOnDayChange, handleChangeComposedDateString]);
+  const onDayFocus = React.useCallback(() => {
+    setLatestInteractionRegionDateInputs();
+  }, [setLatestInteractionRegionDateInputs]);
+  const onDayChange = React.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 = stringHelpers.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);
+  }, [handleChangeDay, yearInputRef]);
+  const onDayKeyDown = React.useCallback(e => {
+    var _lastSegmentRef$curre3, _lastSegmentRef$curre4;
+
+    const {
+      key,
+      ctrlKey,
+      metaKey
+    } = e;
+    const dayStringConvertedToInteger = Number.parseInt(day, 10);
+    if (constants.homeEndArrowUpDownDashSlashesKeys.includes(key)) e.preventDefault();
+    if (constants.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 = stringHelpers.prependStringWithPlaceHolders("".concat(newDay), 2);
+      handleChangeDay(newDay, e);
+    }
+
+    if (!Number.isNaN(dayStringConvertedToInteger) && (key === '-' || key === '/' || key === '\\')) {
+      var _yearInputRef$current5, _yearInputRef$current6;
+
+      const newDay = stringHelpers.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);
+  }, [day, onHomeKeyDown, onEndKeyDown, lastSegmentRef, handleChangeDay, yearInputRef, monthInputRef]);
+  const onDayBlur = React.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(stringHelpers.prependStringWithPlaceHolders(newDay, 2), e, {
+      isAutomaticFillTrigger: true
+    });
+  }, [handleChangeDay]);
+  const handleChangeYear = React.useCallback(function (newYear, e) {
+    let metaInfo = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : constants.defaultMetaInfo;
+    const newDateString = stringHelpers.getFormattedDateString({
+      month,
+      day,
+      year: newYear
+    });
+
+    const finalMetaInfo = _objectSpread(_objectSpread(_objectSpread({}, metaInfo), dateHelpers.getValidationDateStringMetaInfo(newDateString, getIsOutOfRangeDay, getIsDisabledDay)), {}, {
+      newDateString
+    });
+
+    appOnYearChange(newYear, e, finalMetaInfo);
+    handleChangeComposedDateString(newDateString, finalMetaInfo);
+  }, [month, day, getIsOutOfRangeDay, getIsDisabledDay, appOnYearChange, handleChangeComposedDateString]);
+  const onYearFocus = React.useCallback(() => {
+    setLatestInteractionRegionDateInputs();
+  }, [setLatestInteractionRegionDateInputs]);
+  const onYearChange = React.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:
+
+    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...
+      }
+    }
+  }, [handleChangeYear, hideTime, hourInputRef, withAnyRightController, withAnyPicker, pickerButtonRef, withClearBtn, clearButtonRef]);
+  const onYearKeyDown = React.useCallback(e => {
+    var _lastSegmentRef$curre5, _lastSegmentRef$curre6;
+
+    const {
+      key,
+      ctrlKey,
+      metaKey
+    } = e;
+    const yearStringConvertedToInteger = Number.parseInt(year, 10);
+    if (constants.homeEndArrowUpDownSpaceKeys.includes(key)) e.preventDefault();
+    if (constants.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 = stringHelpers.prependStringWithPlaceHolders("".concat(newYear), 4);
+      handleChangeYear(newYear, e);
+    }
+
+    if (!Number.isNaN(yearStringConvertedToInteger) && key === ' ') {
+      const newYear = stringHelpers.prependStringWithPlaceHolders("".concat(yearStringConvertedToInteger), 4);
+      handleChangeYear(newYear, e); // auto-advance functionality:
+
+      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...
+        }
+      }
+    } // 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 = React.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(stringHelpers.fillStringWithPlaceHolders(newYear, 4, '0'), e, {
+      isAutomaticFillTrigger: true
+    });
+  }, [handleChangeYear]);
+  return React.useMemo(() => ({
+    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]);
+};
+
+exports.useDateInputs = useDateInputs;

package/cjs/controlled-date-time-picker/parts/Pickers/Calendar/Calendar.js

@@ -0,0 +1,52 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+var React = require('react');
+var CalendarIconTrigger = require('./CalendarIconTrigger.js');
+var CalendarWrapper = require('./CalendarWrapper.js');
+var CalendarContext = require('./CalendarContext.js');
+var useConfigCalendarCTX = require('./useConfigCalendarCTX.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+
+var _CalendarIconTrigger, _CalendarWrapper;
+
+const WrappedCalendarContext = _ref => {
+  let {
+    children
+  } = _ref;
+  const ctx = useConfigCalendarCTX.useConfigCalendarCTX();
+  return /*#__PURE__*/_jsx__default["default"](CalendarContext.CalendarContext.Provider, {
+    value: ctx
+  }, void 0, children);
+};
+
+const WrapWithCalendarContext = Component => {
+  var _WrappedCalendarConte;
+
+  return () => _WrappedCalendarConte || (_WrappedCalendarConte = /*#__PURE__*/_jsx__default["default"](WrappedCalendarContext, {}, void 0, /*#__PURE__*/_jsx__default["default"](Component, {})));
+}; // we use the HoC to be able to use the useContext
+// the HoC is Reused in CalendarWithTimeWheel
+
+const Calendar = WrapWithCalendarContext(() => {
+  const {
+    showCalendar,
+    isControllerOnly,
+    handleMenuWrapperKeyDown
+  } = React.useContext(CalendarContext.CalendarContext);
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [isControllerOnly ? null : _CalendarIconTrigger || (_CalendarIconTrigger = /*#__PURE__*/_jsx__default["default"](CalendarIconTrigger.CalendarIconTrigger, {})), isControllerOnly || showCalendar ? /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
+      children: /*#__PURE__*/_jsx__default["default"]("div", {
+        onKeyDown: handleMenuWrapperKeyDown
+      }, void 0, _CalendarWrapper || (_CalendarWrapper = /*#__PURE__*/_jsx__default["default"](CalendarWrapper.CalendarWrapper, {})))
+    }) : null]
+  });
+});
+
+exports.Calendar = Calendar;
+exports.WrapWithCalendarContext = WrapWithCalendarContext;

package/cjs/controlled-date-time-picker/parts/Pickers/Calendar/CalendarBody.js

@@ -0,0 +1,28 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+var React = require('react');
+var CalendarMonthDays = require('./CalendarMonthDays.js');
+var CalendarWeekDays = require('./CalendarWeekDays.js');
+var Styleds = require('./Styleds.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var _CalendarWeekDays, _StyledBody;
+const CalendarBody = /*#__PURE__*/React__default["default"].memo(_ref => {
+  let {
+    weekRowsNum
+  } = _ref;
+  return /*#__PURE__*/_jsx__default["default"]("span", {
+    role: "grid",
+    "aria-colcount": 7,
+    "aria-rowcount": weekRowsNum
+  }, void 0, _CalendarWeekDays || (_CalendarWeekDays = /*#__PURE__*/_jsx__default["default"](CalendarWeekDays.CalendarWeekDays, {})), _StyledBody || (_StyledBody = /*#__PURE__*/_jsx__default["default"](Styleds.StyledBody, {}, void 0, /*#__PURE__*/_jsx__default["default"](CalendarMonthDays.CalendarMonthDays, {}))));
+});
+
+exports.CalendarBody = CalendarBody;

package/cjs/controlled-date-time-picker/parts/Pickers/Calendar/CalendarContent.js

@@ -0,0 +1,40 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+var React = require('react');
+var ControlledDateTimePickerDatatestid = require('../../../ControlledDateTimePickerDatatestid.js');
+var CalendarBody = require('./CalendarBody.js');
+var CalendarHead = require('./CalendarHead.js');
+var CalendarFooter = require('./CalendarFooter.js');
+var CalendarContext = require('./CalendarContext.js');
+var Styleds = require('./Styleds.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+
+var _CalendarHead, _CalendarFooter;
+// <StyledShadowWrapper className={className}>
+// is required for styled-components, without this we can't styled(CalendarContent)...
+// https://stackoverflow.com/questions/52542817/styled-components-not-applying-style-to-custom-functional-react-component
+
+const CalendarContent = _ref => {
+  let {
+    className = ''
+  } = _ref;
+  const {
+    isControllerOnly,
+    daysMatrixByWeekday
+  } = React.useContext(CalendarContext.CalendarContext);
+  return /*#__PURE__*/_jsx__default["default"](Styleds.StyledShadowWrapper, {
+    className: className,
+    isControllerOnly: isControllerOnly,
+    "data-testid": ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.CONTROLLER_COMPONENT.CALENDAR
+  }, void 0, /*#__PURE__*/_jsx__default["default"](Styleds.StyledCalendarWrapper, {}, void 0, _CalendarHead || (_CalendarHead = /*#__PURE__*/_jsx__default["default"](CalendarHead.CalendarHead, {})), /*#__PURE__*/_jsx__default["default"](CalendarBody.CalendarBody, {
+    weekRowsNum: daysMatrixByWeekday.length
+  }), _CalendarFooter || (_CalendarFooter = /*#__PURE__*/_jsx__default["default"](CalendarFooter.CalendarFooter, {}))));
+};
+
+exports.CalendarContent = CalendarContent;

package/cjs/controlled-date-time-picker/parts/Pickers/Calendar/CalendarContext.js

@@ -0,0 +1,62 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+const noop = () => {};
+
+const defaultCalendarContext = {
+  ariaCurrentValueForInputs: '',
+  showCalendar: false,
+  disabled: false,
+  setShowCalendar: noop,
+  closeCalendar: noop,
+  setPopperElement: noop,
+  setArrowElement: noop,
+  usePopperHelpers: undefined,
+  handleToggleCalendar: noop,
+  handleSetTriggerRef: noop,
+  handleMenuWrapperKeyDown: noop,
+  prevYearBtnRef: /*#__PURE__*/React.createRef(),
+  prevMonthBtnRef: /*#__PURE__*/React.createRef(),
+  nextMonthBtnRef: /*#__PURE__*/React.createRef(),
+  nextYearBtnRef: /*#__PURE__*/React.createRef(),
+  calendarDaysWrapperRef: /*#__PURE__*/React.createRef(),
+  currentMonth: undefined,
+  currentYear: undefined,
+  daysArray: [],
+  invisibleFirstDay: undefined,
+  daysMatrixByWeekday: [],
+  invisibleLastDay: undefined,
+  focusedDay: undefined,
+  tryToFocusCurrentlyDataIsFocusedDay: noop,
+  resetFocusedDayToStartDate: noop,
+  handleFocusMetaDay: noop,
+  handleFocusMetaDayByDay: noop,
+  handlePrevMonth: noop,
+  handlePrevYear: noop,
+  handleNextMonth: noop,
+  handleNextYear: noop,
+  handleDayOnKeyDown: noop,
+  handlePrevYearKeyDown: noop,
+  handlePrevMonthKeyDown: noop,
+  handleNextMonthKeyDown: noop,
+  handleNextYearKeyDown: noop,
+  handlePickerIconKeyDown: noop,
+  isControllerOnly: false,
+  isWithTimeWheelToo: true,
+  autoFocusPrevMonthArrow: false,
+  onPrevYearFocus: noop,
+  onPrevMonthFocus: noop,
+  onNextMonthFocus: noop,
+  onNextYearFocus: noop
+};
+/** Context for cross component communication */
+
+const CalendarContext = /*#__PURE__*/React.createContext(defaultCalendarContext);
+
+exports.CalendarContext = CalendarContext;
+exports["default"] = CalendarContext;
+exports.defaultCalendarContext = defaultCalendarContext;

package/cjs/controlled-date-time-picker/parts/Pickers/Calendar/CalendarDaysList.js

@@ -0,0 +1,50 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('core-js/modules/esnext.async-iterator.map.js');
+require('core-js/modules/esnext.iterator.map.js');
+var React = require('react');
+var Day = require('./Day.js');
+var Styleds = require('./Styleds.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const CalendarDaysList = /*#__PURE__*/React__default["default"].memo(_ref => {
+  let {
+    invisibleFirstDay,
+    daysMatrixByWeekday,
+    invisibleLastDay,
+    innerRef
+  } = _ref;
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    ref: innerRef,
+    role: "rowgroup",
+    children: [/*#__PURE__*/_jsx__default["default"](Day.Day, {
+      metaDay: invisibleFirstDay,
+      isInvisible: true
+    }, "ds-calendar-".concat(invisibleFirstDay.day.toString())), daysMatrixByWeekday.map((week, i) => /*#__PURE__*/_jsx__default["default"](Styleds.StyledWeekDaysListWrapper, {
+      role: "row",
+      "aria-rowindex": i + 1,
+      cols: ['32px', '32px', '32px', '32px', '32px', '32px', '32px'],
+      rows: ['28px'],
+      py: "xxxs",
+      px: "2px",
+      justifyContent: "space-between",
+      alignItems: "center"
+    }, "ds-calendar-week-".concat(week[0].day.toString(), "-").concat(week[6].day.toString()), week.map((metaDay, z) => /*#__PURE__*/_jsx__default["default"](Day.Day, {
+      metaDay: metaDay,
+      colIndex: z + 1
+    }, "ds-calendar-".concat(metaDay.day.toString()))))), /*#__PURE__*/_jsx__default["default"](Day.Day, {
+      metaDay: invisibleLastDay,
+      isInvisible: true
+    }, "ds-calendar-".concat(invisibleLastDay.day.toString()))]
+  });
+});
+
+exports.CalendarDaysList = CalendarDaysList;

package/cjs/controlled-date-time-picker/parts/Pickers/Calendar/CalendarFooter.js

@@ -0,0 +1,28 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+var React = require('react');
+var ControlledDateTimePickerCTX = require('../../../ControlledDateTimePickerCTX.js');
+var Styleds = require('./Styleds.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+
+const CalendarFooter = () => {
+  const {
+    props: {
+      pickerFooterMsg,
+      hasError
+    },
+    isWithTimeWheelToo
+  } = React.useContext(ControlledDateTimePickerCTX.ControlledDateTimePickerContext);
+  if (pickerFooterMsg !== undefined && !isWithTimeWheelToo && hasError) return /*#__PURE__*/_jsx__default["default"](Styleds.CalendarFooterMessage, {
+    role: "alert"
+  }, void 0, pickerFooterMsg);
+  return null;
+};
+
+exports.CalendarFooter = CalendarFooter;