@elliemae/ds-controlled-form 2.4.1-rc.5 → 2.4.1-rc.9

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

@@ -2,6 +2,12 @@
 
 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 _jsx = require('@babel/runtime/helpers/jsx');
 require('react');
 var dsIcons = require('@elliemae/ds-icons');
@@ -10,32 +16,38 @@ var DSButton = require('@elliemae/ds-button');
 var Styleds = require('../Styleds.js');
 var ControlledDateTimePickerDatatestid = require('../../ControlledDateTimePickerDatatestid.js');
 var useClearButton = require('./useClearButton.js');
+var jsxRuntime = require('react/jsx-runtime');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 
+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 ClearButton = () => {
   const {
     onClearClick,
     onClearButtonKeyDown,
     clearButtonRef,
-    withAnyPicker,
     withClearBtn
   } = useClearButton.useClearButton();
-  return /*#__PURE__*/_jsx__default["default"](Styleds.StyledClearButton, {
-    shouldDisplay: withClearBtn,
+  const styledsAttrs = {
+    shouldDisplay: withClearBtn
+  };
+  return /*#__PURE__*/jsxRuntime.jsx(Styleds.StyledClearButton, _objectSpread(_objectSpread({
     "aria-label": "clear selected date",
     buttonType: "icon",
     size: DSButton.BUTTON_SIZES.M,
-    variant: DSButton.BUTTON_VARIANT.DEFAULT,
     "data-testid": ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.CLEAR_BUTTON,
     innerRef: clearButtonRef,
     onClick: onClearClick,
-    onKeyDown: onClearButtonKeyDown,
-    withAnyPicker: withAnyPicker
-  }, void 0, /*#__PURE__*/_jsx__default["default"](dsIcons.CloseMedium, {
-    color: dsIcon.DSIconColors.PRIMARY
+    onKeyDown: onClearButtonKeyDown
+  }, styledsAttrs), {}, {
+    children: /*#__PURE__*/_jsx__default["default"](dsIcons.CloseMedium, {
+      color: dsIcon.DSIconColors.PRIMARY
+    })
   }));
 };
 

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

@@ -32,6 +32,10 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 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 ControlledDateTimePickerContent = () => {
   const {
+    props: {
+      hasError,
+      disabled
+    },
     hideDate,
     hideDatePicker,
     hideTime,
@@ -42,13 +46,15 @@ const ControlledDateTimePickerContent = () => {
     withAnyRightController,
     shouldPreserveClearableSpace,
     isControllerOnly,
-    props: {
-      hasError,
-      dataAttrs,
-      disabled
-    },
+    dataAttrs,
     onGlobalKeyDown
   } = React__default["default"].useContext(ControlledDateTimePickerCTX.ControlledDateTimePickerContext);
+  const styledsAttrs = {
+    justPicker: hideDate && hideTime,
+    withAnyPicker,
+    hasError,
+    isControllerOnly
+  };
   const resetLatestInteraction = React__default["default"].useCallback(() => {
     setLatestInteractionRegion('');
   }, [setLatestInteractionRegion]);
@@ -60,18 +66,14 @@ const ControlledDateTimePickerContent = () => {
   if (shouldPreserveClearableSpace) rightControlCols.push('28px');
   if (withAnyPicker) rightControlCols.push('auto');
   return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
-    children: /*#__PURE__*/jsxRuntime.jsxs(Styleds.StyledInputsWrapperGrid, _objectSpread(_objectSpread({
+    children: /*#__PURE__*/jsxRuntime.jsxs(Styleds.StyledInputsWrapperGrid, _objectSpread(_objectSpread(_objectSpread({
       cols: mainCols,
       gutter: "xxs",
-      pr: hideDatePicker && hideTimePicker && hideDateTimePicker ? '2px' : null,
-      justPicker: hideDate && hideTime,
-      withAnyPicker: withAnyPicker,
+      pr: hideDatePicker && hideTimePicker && hideDateTimePicker ? '2px' : undefined,
       onBlur: resetLatestInteraction,
       onKeyDown: onGlobalKeyDown,
-      hasError: hasError,
-      isControllerOnly: isControllerOnly,
       disabled: disabled
-    }, dataAttrs), {}, {
+    }, styledsAttrs), dataAttrs), {}, {
       children: [hideDate ? null : _DateInputs || (_DateInputs = /*#__PURE__*/_jsx__default["default"](DateInputs.DateInputs, {})), hideTime ? null : _TimeInputs || (_TimeInputs = /*#__PURE__*/_jsx__default["default"](TimeInputs.TimeInputs, {})), withAnyRightController ? /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
         cols: rightControlCols
       }, void 0, shouldPreserveClearableSpace ? _ClearButton || (_ClearButton = /*#__PURE__*/_jsx__default["default"](ClearButton.ClearButton, {})) : null, withAnyPicker ? _PickersIcons || (_PickersIcons = /*#__PURE__*/_jsx__default["default"](PickersIcons.PickersIcons, {})) : null) : null]

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

@@ -24,13 +24,13 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 const useDateInputs = () => {
   const {
     props: {
-      onMonthChange: appOnMonthChange,
-      onDayChange: appOnDayChange,
-      onYearChange: appOnYearChange,
-      getIsDisabledDay,
-      getIsOutOfRangeDay,
       disabled
     },
+    appOnMonthChange,
+    appOnDayChange,
+    appOnYearChange,
+    getIsDisabledDay,
+    getIsOutOfRangeDay,
     month,
     day,
     year,

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

@@ -4,6 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _jsx = require('@babel/runtime/helpers/jsx');
 var React = require('react');
+var ControlledDateTimePickerCTX = require('../../../ControlledDateTimePickerCTX.js');
 var CalendarIconTrigger = require('./CalendarIconTrigger.js');
 var CalendarWrapper = require('./CalendarWrapper.js');
 var CalendarContext = require('./CalendarContext.js');
@@ -14,8 +15,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 
-var _CalendarIconTrigger, _CalendarWrapper;
-
+var _CalendarIconTrigger, _CalendarWrapper, _WrappedCalendarConte;
 const WrappedCalendarContext = _ref => {
   let {
     children
@@ -26,19 +26,14 @@ const WrappedCalendarContext = _ref => {
   }, 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 CalendarContent = () => {
   const {
     showCalendar,
-    isControllerOnly,
     handleMenuWrapperKeyDown
   } = React.useContext(CalendarContext.CalendarContext);
+  const {
+    isControllerOnly
+  } = React.useContext(ControlledDateTimePickerCTX.ControlledDateTimePickerContext);
   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", {
@@ -46,7 +41,10 @@ const Calendar = WrapWithCalendarContext(() => {
       }, void 0, _CalendarWrapper || (_CalendarWrapper = /*#__PURE__*/_jsx__default["default"](CalendarWrapper.CalendarWrapper, {})))
     }) : null]
   });
-});
+}; // we wrap in context in a separate statement so we can use the useContext and be sure it's correctly initialized
+
+
+const Calendar = () => _WrappedCalendarConte || (_WrappedCalendarConte = /*#__PURE__*/_jsx__default["default"](WrappedCalendarContext, {}, void 0, /*#__PURE__*/_jsx__default["default"](CalendarContent, {})));
 
 exports.Calendar = Calendar;
-exports.WrapWithCalendarContext = WrapWithCalendarContext;
+exports.WrappedCalendarContext = WrappedCalendarContext;

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

@@ -5,6 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var _jsx = require('@babel/runtime/helpers/jsx');
 var React = require('react');
 var ControlledDateTimePickerDatatestid = require('../../../ControlledDateTimePickerDatatestid.js');
+var ControlledDateTimePickerCTX = require('../../../ControlledDateTimePickerCTX.js');
 var CalendarBody = require('./CalendarBody.js');
 var CalendarHead = require('./CalendarHead.js');
 var CalendarFooter = require('./CalendarFooter.js');
@@ -25,9 +26,11 @@ const CalendarContent = _ref => {
     className = ''
   } = _ref;
   const {
-    isControllerOnly,
     daysMatrixByWeekday
   } = React.useContext(CalendarContext.CalendarContext);
+  const {
+    isControllerOnly
+  } = React.useContext(ControlledDateTimePickerCTX.ControlledDateTimePickerContext);
   return /*#__PURE__*/_jsx__default["default"](Styleds.StyledShadowWrapper, {
     className: className,
     isControllerOnly: isControllerOnly,

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

@@ -4,55 +4,7 @@ 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
-};
+const defaultCalendarContext = {};
 /** Context for cross component communication */
 
 const CalendarContext = /*#__PURE__*/React.createContext(defaultCalendarContext);

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

@@ -25,10 +25,10 @@ const CalendarDaysList = /*#__PURE__*/React__default["default"].memo(_ref => {
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     ref: innerRef,
     role: "rowgroup",
-    children: [/*#__PURE__*/_jsx__default["default"](Day.Day, {
+    children: [invisibleFirstDay ? /*#__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, {
+    }, "ds-calendar-".concat(invisibleFirstDay.day.toString())) : null, daysMatrixByWeekday.map((week, i) => /*#__PURE__*/_jsx__default["default"](Styleds.StyledWeekDaysListWrapper, {
       role: "row",
       "aria-rowindex": i + 1,
       cols: ['32px', '32px', '32px', '32px', '32px', '32px', '32px'],
@@ -40,10 +40,10 @@ const CalendarDaysList = /*#__PURE__*/React__default["default"].memo(_ref => {
     }, "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, {
+    }, "ds-calendar-".concat(metaDay.day.toString()))))), invisibleLastDay ? /*#__PURE__*/_jsx__default["default"](Day.Day, {
       metaDay: invisibleLastDay,
       isInvisible: true
-    }, "ds-calendar-".concat(invisibleLastDay.day.toString()))]
+    }, "ds-calendar-".concat(invisibleLastDay.day.toString())) : null]
   });
 });
 

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

@@ -8,6 +8,7 @@ var DSButton = require('@elliemae/ds-button');
 var dsIcons = require('@elliemae/ds-icons');
 var ControlledDateTimePickerDatatestid = require('../../../ControlledDateTimePickerDatatestid.js');
 var dateHelpers = require('../../../utils/dateHelpers.js');
+var ControlledDateTimePickerCTX = require('../../../ControlledDateTimePickerCTX.js');
 var Styleds = require('./Styleds.js');
 var CalendarContext = require('./CalendarContext.js');
 
@@ -29,10 +30,6 @@ const useGetFormattedCurrentDate = () => {
 const CalendarHead = () => {
   const currentFormatedDate = useGetFormattedCurrentDate();
   const {
-    prevYearBtnRef,
-    prevMonthBtnRef,
-    nextMonthBtnRef,
-    nextYearBtnRef,
     handlePrevYear,
     handlePrevMonth,
     handleNextMonth,
@@ -44,10 +41,16 @@ const CalendarHead = () => {
     onPrevYearFocus,
     onPrevMonthFocus,
     onNextMonthFocus,
-    onNextYearFocus,
-    isControllerOnly,
-    autoFocusPrevMonthArrow
+    onNextYearFocus
   } = React.useContext(CalendarContext.CalendarContext);
+  const {
+    isControllerOnly,
+    autoFocusPrevMonthArrow,
+    prevYearBtnRef,
+    prevMonthBtnRef,
+    nextMonthBtnRef,
+    nextYearBtnRef
+  } = React.useContext(ControlledDateTimePickerCTX.ControlledDateTimePickerContext);
   return /*#__PURE__*/_jsx__default["default"](Styleds.StyledHeader, {}, void 0, /*#__PURE__*/_jsx__default["default"](Styleds.StyledHeaderButton, {
     "aria-label": "previous year",
     buttonType: "raw",

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

@@ -7,6 +7,7 @@ var React = require('react');
 var DSButton = require('@elliemae/ds-button');
 var dsIcons = require('@elliemae/ds-icons');
 var ControlledDateTimePickerDatatestid = require('../../../ControlledDateTimePickerDatatestid.js');
+var ControlledDateTimePickerCTX = require('../../../ControlledDateTimePickerCTX.js');
 var CalendarContext = require('./CalendarContext.js');
 var Styleds = require('./Styleds.js');
 
@@ -22,15 +23,18 @@ const CalendarIconTrigger = () => {
   const {
     handleToggleCalendar,
     handleSetTriggerRef,
-    handlePickerIconKeyDown,
-    ariaCurrentValueForInputs,
-    disabled
+    handlePickerIconKeyDown
   } = React.useContext(CalendarContext.CalendarContext);
+  const {
+    props: {
+      disabled
+    },
+    ariaCurrentValueForInputs
+  } = React.useContext(ControlledDateTimePickerCTX.ControlledDateTimePickerContext);
   return React.useMemo(() => /*#__PURE__*/_jsx__default["default"](Styleds.StyledIconTriggerButton, {
     "aria-label": "date picker context menu trigger, ".concat(ariaCurrentValueForInputs),
     buttonType: "icon",
     size: DSButton.BUTTON_SIZES.M,
-    variant: DSButton.BUTTON_VARIANT.DEFAULT,
     innerRef: handleSetTriggerRef,
     onClick: handleToggleCalendar,
     onKeyDown: handlePickerIconKeyDown,

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

@@ -4,6 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _jsx = require('@babel/runtime/helpers/jsx');
 var React = require('react');
+var ControlledDateTimePickerCTX = require('../../../ControlledDateTimePickerCTX.js');
 var CalendarDaysList = require('./CalendarDaysList.js');
 var CalendarContext = require('./CalendarContext.js');
 
@@ -15,9 +16,11 @@ const CalendarMonthDays = () => {
   const {
     invisibleFirstDay,
     daysMatrixByWeekday,
-    invisibleLastDay,
-    calendarDaysWrapperRef
+    invisibleLastDay
   } = React.useContext(CalendarContext.CalendarContext);
+  const {
+    calendarDaysWrapperRef
+  } = React.useContext(ControlledDateTimePickerCTX.ControlledDateTimePickerContext);
   return /*#__PURE__*/_jsx__default["default"](CalendarDaysList.CalendarDaysList, {
     invisibleFirstDay: invisibleFirstDay,
     daysMatrixByWeekday: daysMatrixByWeekday,

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

@@ -11,6 +11,7 @@ var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _jsx = require('@babel/runtime/helpers/jsx');
 var React = require('react');
 var ControlledDateTimePickerDatatestid = require('../../../ControlledDateTimePickerDatatestid.js');
+var ControlledDateTimePickerCTX = require('../../../ControlledDateTimePickerCTX.js');
 var CalendarContent = require('./CalendarContent.js');
 var CalendarContext = require('./CalendarContext.js');
 var jsxRuntime = require('react/jsx-runtime');
@@ -26,14 +27,16 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 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 CalendarWrapper = () => {
+  const {
+    isControllerOnly
+  } = React.useContext(ControlledDateTimePickerCTX.ControlledDateTimePickerContext);
   const {
     setPopperElement,
     usePopperHelpers: {
       styles,
       attributes
     },
-    setArrowElement,
-    isControllerOnly
+    setArrowElement
   } = React.useContext(CalendarContext.CalendarContext);
   if (isControllerOnly) return _CalendarContent || (_CalendarContent = /*#__PURE__*/_jsx__default["default"](CalendarContent.CalendarContent, {}));
   return /*#__PURE__*/jsxRuntime.jsxs("div", _objectSpread(_objectSpread({

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

@@ -47,31 +47,31 @@ const Day = _ref => {
     handleChangeComposedDateString,
     dateStringFromProps,
     props: {
-      getIsDisabledDay,
-      getIsOutOfRangeDay,
-      getIsStartRangeDay,
-      getIsDayInRange,
-      getIsEndRangeDay,
-      preventCloseOnSelection,
-      onMonthChange,
-      onDayChange,
-      onYearChange
+      preventCloseOnSelection
     },
+    getIsDisabledDay,
+    getIsOutOfRangeDay,
+    getIsStartRangeDay,
+    getIsDayInRange,
+    getIsEndRangeDay,
+    appOnMonthChange,
+    appOnDayChange,
+    appOnYearChange,
     latestInteractionRegion,
-    setLatestInteractionRegion
+    setLatestInteractionRegion,
+    isWithTimeWheelToo
   } = React.useContext(ControlledDateTimePickerCTX.ControlledDateTimePickerContext);
   const {
-    handleDayOnKeyDown,
     focusedDay,
+    handleDayOnKeyDown,
     handleFocusMetaDayByDay,
-    isWithTimeWheelToo,
     closeCalendar,
     tryToFocusCurrentlyDataIsFocusedDay
   } = React.useContext(CalendarContext.CalendarContext);
-  const isFocusedMetaDay = dateHelpers.compareTwoDatesDayEquality(metaDay === null || metaDay === void 0 ? void 0 : metaDay.day, focusedDay === null || focusedDay === void 0 ? void 0 : focusedDay.day);
+  const isFocusedMetaDay = focusedDay !== null && focusedDay !== void 0 && focusedDay.day ? dateHelpers.compareTwoDatesDayEquality(metaDay === null || metaDay === void 0 ? void 0 : metaDay.day, focusedDay === null || focusedDay === void 0 ? void 0 : focusedDay.day) : false;
   const isSelected = React.useMemo(() => {
     const selectedDate = dateHelpers.getDayFromDateString(dateStringFromProps);
-    return dateHelpers.isSameDateMoment(day, selectedDate);
+    return selectedDate ? dateHelpers.isSameDateMoment(day, selectedDate) : false;
   }, [dateStringFromProps, day]);
   const isFocused = latestInteractionRegion === 'calendar-days' && isFocusedMetaDay;
   const isDisabled = getIsDisabledDay(metaDay.dayAsString);
@@ -95,14 +95,14 @@ const Day = _ref => {
         day: dayNumber,
         year
       } = dateHelpers.getDateValuesFromDate(day);
-      onMonthChange("".concat(month + 1), e, metaInfo);
-      onDayChange("".concat(dayNumber), e, metaInfo);
-      onYearChange("".concat(year), e, metaInfo);
+      appOnMonthChange("".concat(month + 1), e, metaInfo);
+      if (dayNumber) appOnDayChange("".concat(dayNumber), e, metaInfo);
+      appOnYearChange("".concat(year), e, metaInfo);
       handleChangeComposedDateString(newDateString, metaInfo);
       setLatestInteractionRegion('calendar-days');
       if (!isWithTimeWheelToo && !preventCloseOnSelection) closeCalendar();
     }
-  }, [isDisabled, isOutOfRange, day, onMonthChange, onDayChange, onYearChange, handleChangeComposedDateString, handleFocusMetaDayByDay, tryToFocusCurrentlyDataIsFocusedDay, setLatestInteractionRegion, isWithTimeWheelToo, preventCloseOnSelection, closeCalendar]);
+  }, [isDisabled, isOutOfRange, day, appOnMonthChange, appOnDayChange, appOnYearChange, handleChangeComposedDateString, handleFocusMetaDayByDay, tryToFocusCurrentlyDataIsFocusedDay, setLatestInteractionRegion, isWithTimeWheelToo, preventCloseOnSelection, closeCalendar]);
   const handleOnDayFocus = React.useCallback(() => {
     setLatestInteractionRegion('calendar-days');
   }, [setLatestInteractionRegion]);

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

@@ -2,65 +2,32 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 require('core-js/modules/web.dom-collections.iterator.js');
+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 React = require('react');
 var ControlledDateTimePickerCTX = require('../../../ControlledDateTimePickerCTX.js');
-var useKeyboardHandlers = require('./useKeyboardHandlers.js');
+var useCurrentDisplayedMonthYearLogic = require('./useCurrentDisplayedMonthYearLogic.js');
 var useFocusLogic = require('./useFocusLogic.js');
 var usePopperTriggerLogic = require('./usePopperTriggerLogic.js');
-var useCurrentDisplayedMonthYearLogic = require('./useCurrentDisplayedMonthYearLogic.js');
+var useKeyboardHandlers = require('./useKeyboardHandlers.js');
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-function sliceIntoChunks(arr, chunkSize) {
-  const res = [];
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-  for (let i = 0; i < arr.length; i += chunkSize) {
-    const chunk = arr.slice(i, i + chunkSize);
-    res.push(chunk);
-  }
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
 
-  return res;
-}
+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 useConfigCalendarCTX = () => {
   const {
-    props: {
-      disabled
-    },
-    prevYearBtnRef,
-    prevMonthBtnRef,
-    nextMonthBtnRef,
-    nextYearBtnRef,
-    calendarDaysWrapperRef,
-    isControllerOnly,
-    isWithTimeWheelToo,
-    setLatestInteractionRegion,
-    autoFocusPrevMonthArrow,
-    ariaCurrentValueForInputs
+    setLatestInteractionRegion
   } = React.useContext(ControlledDateTimePickerCTX.ControlledDateTimePickerContext);
   const [showCalendar, setShowCalendar] = React.useState(false);
-  const {
-    currentMonth,
-    currentYear,
-    daysArray,
-    handlePrevYear,
-    handlePrevMonth,
-    handleNextMonth,
-    handleNextYear
-  } = useCurrentDisplayedMonthYearLogic.useCurrentDisplayedMonthYearLogic();
-  const {
-    invisibleFirstDay,
-    daysMatrixByWeekday,
-    invisibleLastDay
-  } = React.useMemo(() => {
-    const [invisible1stDay, ...otherDays] = [...daysArray];
-    const invisibleDayLast = otherDays.pop();
-    return {
-      invisibleFirstDay: invisible1stDay,
-      daysMatrixByWeekday: sliceIntoChunks(otherDays, 7),
-      invisibleLastDay: invisibleDayLast
-    };
-  }, [daysArray]);
   const setLatestInteractionRegionCalendarHead = React.useCallback(() => {
     setLatestInteractionRegion('calendar-head');
   }, [setLatestInteractionRegion]);
@@ -76,93 +43,28 @@ const useConfigCalendarCTX = () => {
   const onNextYearFocus = React.useCallback(() => {
     setLatestInteractionRegionCalendarHead();
   }, [setLatestInteractionRegionCalendarHead]);
-  const {
-    focusedDay,
-    tryToFocusCurrentlyDataIsFocusedDay,
-    handleFocusMetaDay,
-    handleFocusMetaDayByDay,
-    resetFocusedDayToStartDate
-  } = useFocusLogic.useFocusLogic({
-    daysArray,
+  const currentDisplayedMonthLogic = useCurrentDisplayedMonthYearLogic.useCurrentDisplayedMonthYearLogic();
+  const focusLogic = useFocusLogic.useFocusLogic({
+    currentDisplayedMonthLogic,
     showCalendar
   });
-  const {
-    closeCalendar,
-    handleSetTriggerRef,
-    setPopperElement,
-    setArrowElement,
-    usePopperHelpers,
-    handleToggleCalendar,
-    handleMenuWrapperKeyDown
-  } = usePopperTriggerLogic.usePopperTriggerLogic({
-    tryToFocusCurrentlyDataIsFocusedDay,
-    resetFocusedDayToStartDate,
-    focusedDay,
+  const popperTriggerLogic = usePopperTriggerLogic.usePopperTriggerLogic({
+    focusLogic,
     showCalendar,
     setShowCalendar
   });
-  const {
-    handleDayOnKeyDown,
-    handlePrevYearKeyDown,
-    handlePrevMonthKeyDown,
-    handleNextMonthKeyDown,
-    handleNextYearKeyDown,
-    handlePickerIconKeyDown
-  } = useKeyboardHandlers.useKeyboardHandlers({
-    focusedDay,
-    daysArray,
-    handlePrevMonth,
-    handleNextMonth,
-    handleFocusMetaDay,
-    handleFocusMetaDayByDay,
-    tryToFocusCurrentlyDataIsFocusedDay
+  const keyboardHandlers = useKeyboardHandlers.useKeyboardHandlers({
+    currentDisplayedMonthLogic,
+    focusLogic
   });
-  return React.useMemo(() => ({
+  return React.useMemo(() => _objectSpread(_objectSpread(_objectSpread(_objectSpread({
     showCalendar,
     setShowCalendar,
-    closeCalendar,
-    setPopperElement,
-    setArrowElement,
-    usePopperHelpers,
-    handleToggleCalendar,
-    handleSetTriggerRef,
-    handleMenuWrapperKeyDown,
-    isControllerOnly,
-    calendarDaysWrapperRef,
-    prevYearBtnRef,
-    prevMonthBtnRef,
-    nextMonthBtnRef,
-    nextYearBtnRef,
-    currentMonth,
-    currentYear,
-    daysArray,
-    invisibleFirstDay,
-    daysMatrixByWeekday,
-    invisibleLastDay,
-    focusedDay,
-    tryToFocusCurrentlyDataIsFocusedDay,
-    handleFocusMetaDay,
-    handleFocusMetaDayByDay,
-    resetFocusedDayToStartDate,
-    handlePrevMonth,
-    handlePrevYear,
-    handleNextMonth,
-    handleNextYear,
-    handleDayOnKeyDown,
-    handlePrevYearKeyDown,
-    handlePrevMonthKeyDown,
-    handleNextMonthKeyDown,
-    handleNextYearKeyDown,
-    handlePickerIconKeyDown,
     onPrevYearFocus,
     onPrevMonthFocus,
     onNextMonthFocus,
-    onNextYearFocus,
-    isWithTimeWheelToo,
-    autoFocusPrevMonthArrow,
-    ariaCurrentValueForInputs,
-    disabled
-  }), [showCalendar, closeCalendar, setPopperElement, setArrowElement, usePopperHelpers, handleToggleCalendar, handleSetTriggerRef, handleMenuWrapperKeyDown, isControllerOnly, calendarDaysWrapperRef, prevYearBtnRef, prevMonthBtnRef, nextMonthBtnRef, nextYearBtnRef, currentMonth, currentYear, daysArray, invisibleFirstDay, daysMatrixByWeekday, invisibleLastDay, focusedDay, tryToFocusCurrentlyDataIsFocusedDay, handleFocusMetaDay, handleFocusMetaDayByDay, resetFocusedDayToStartDate, handlePrevMonth, handlePrevYear, handleNextMonth, handleNextYear, handleDayOnKeyDown, handlePrevYearKeyDown, handlePrevMonthKeyDown, handleNextMonthKeyDown, handleNextYearKeyDown, handlePickerIconKeyDown, onPrevYearFocus, onPrevMonthFocus, onNextMonthFocus, onNextYearFocus, isWithTimeWheelToo, autoFocusPrevMonthArrow, ariaCurrentValueForInputs, disabled]);
+    onNextYearFocus
+  }, currentDisplayedMonthLogic), focusLogic), popperTriggerLogic), keyboardHandlers), [showCalendar, onPrevYearFocus, onPrevMonthFocus, onNextMonthFocus, onNextYearFocus, currentDisplayedMonthLogic, focusLogic, popperTriggerLogic, keyboardHandlers]);
 };
 
 exports.useConfigCalendarCTX = useConfigCalendarCTX;