@elliemae/ds-controlled-form 2.4.1-rc.4 → 2.4.1-rc.8

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

@@ -1,33 +1,44 @@
+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 _jsx from '@babel/runtime/helpers/esm/jsx';
 import 'react';
 import { CloseMedium } from '@elliemae/ds-icons';
 import { DSIconColors } from '@elliemae/ds-icon';
-import { BUTTON_SIZES, BUTTON_VARIANT } from '@elliemae/ds-button';
+import { BUTTON_SIZES } from '@elliemae/ds-button';
 import { StyledClearButton } from '../Styleds.js';
 import { ControlledDateTimePickerDatatestid } from '../../ControlledDateTimePickerDatatestid.js';
 import { useClearButton } from './useClearButton.js';
+import { jsx } from 'react/jsx-runtime';
 
+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; }
 const ClearButton = () => {
   const {
     onClearClick,
     onClearButtonKeyDown,
     clearButtonRef,
-    withAnyPicker,
     withClearBtn
   } = useClearButton();
-  return /*#__PURE__*/_jsx(StyledClearButton, {
-    shouldDisplay: withClearBtn,
+  const styledsAttrs = {
+    shouldDisplay: withClearBtn
+  };
+  return /*#__PURE__*/jsx(StyledClearButton, _objectSpread(_objectSpread({
     "aria-label": "clear selected date",
     buttonType: "icon",
     size: BUTTON_SIZES.M,
-    variant: BUTTON_VARIANT.DEFAULT,
     "data-testid": ControlledDateTimePickerDatatestid.CLEAR_BUTTON,
     innerRef: clearButtonRef,
     onClick: onClearClick,
-    onKeyDown: onClearButtonKeyDown,
-    withAnyPicker: withAnyPicker
-  }, void 0, /*#__PURE__*/_jsx(CloseMedium, {
-    color: DSIconColors.PRIMARY
+    onKeyDown: onClearButtonKeyDown
+  }, styledsAttrs), {}, {
+    children: /*#__PURE__*/_jsx(CloseMedium, {
+      color: DSIconColors.PRIMARY
+    })
   }));
 };
 

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

@@ -22,6 +22,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(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,
@@ -32,13 +36,15 @@ const ControlledDateTimePickerContent = () => {
     withAnyRightController,
     shouldPreserveClearableSpace,
     isControllerOnly,
-    props: {
-      hasError,
-      dataAttrs,
-      disabled
-    },
+    dataAttrs,
     onGlobalKeyDown
   } = React.useContext(ControlledDateTimePickerContext);
+  const styledsAttrs = {
+    justPicker: hideDate && hideTime,
+    withAnyPicker,
+    hasError,
+    isControllerOnly
+  };
   const resetLatestInteraction = React.useCallback(() => {
     setLatestInteractionRegion('');
   }, [setLatestInteractionRegion]);
@@ -50,18 +56,14 @@ const ControlledDateTimePickerContent = () => {
   if (shouldPreserveClearableSpace) rightControlCols.push('28px');
   if (withAnyPicker) rightControlCols.push('auto');
   return /*#__PURE__*/jsx(Fragment, {
-    children: /*#__PURE__*/jsxs(StyledInputsWrapperGrid, _objectSpread(_objectSpread({
+    children: /*#__PURE__*/jsxs(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(DateInputs, {})), hideTime ? null : _TimeInputs || (_TimeInputs = /*#__PURE__*/_jsx(TimeInputs, {})), withAnyRightController ? /*#__PURE__*/_jsx(Grid, {
         cols: rightControlCols
       }, void 0, shouldPreserveClearableSpace ? _ClearButton || (_ClearButton = /*#__PURE__*/_jsx(ClearButton, {})) : null, withAnyPicker ? _PickersIcons || (_PickersIcons = /*#__PURE__*/_jsx(PickersIcons, {})) : null) : null]

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

@@ -16,13 +16,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/esm/date-time-picker/parts/Pickers/Calendar/Calendar.js

@@ -1,13 +1,13 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import { useContext } from 'react';
+import { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';
 import { CalendarIconTrigger } from './CalendarIconTrigger.js';
 import { CalendarWrapper } from './CalendarWrapper.js';
 import { CalendarContext } from './CalendarContext.js';
 import { useConfigCalendarCTX } from './useConfigCalendarCTX.js';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 
-var _CalendarIconTrigger, _CalendarWrapper;
-
+var _CalendarIconTrigger, _CalendarWrapper, _WrappedCalendarConte;
 const WrappedCalendarContext = _ref => {
   let {
     children
@@ -18,19 +18,14 @@ const WrappedCalendarContext = _ref => {
   }, void 0, children);
 };
 
-const WrapWithCalendarContext = Component => {
-  var _WrappedCalendarConte;
-
-  return () => _WrappedCalendarConte || (_WrappedCalendarConte = /*#__PURE__*/_jsx(WrappedCalendarContext, {}, void 0, /*#__PURE__*/_jsx(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
   } = useContext(CalendarContext);
+  const {
+    isControllerOnly
+  } = useContext(ControlledDateTimePickerContext);
   return /*#__PURE__*/jsxs(Fragment, {
     children: [isControllerOnly ? null : _CalendarIconTrigger || (_CalendarIconTrigger = /*#__PURE__*/_jsx(CalendarIconTrigger, {})), isControllerOnly || showCalendar ? /*#__PURE__*/jsx(Fragment, {
       children: /*#__PURE__*/_jsx("div", {
@@ -38,6 +33,9 @@ const Calendar = WrapWithCalendarContext(() => {
       }, void 0, _CalendarWrapper || (_CalendarWrapper = /*#__PURE__*/_jsx(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(WrappedCalendarContext, {}, void 0, /*#__PURE__*/_jsx(CalendarContent, {})));
 
-export { Calendar, WrapWithCalendarContext };
+export { Calendar, WrappedCalendarContext };

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

@@ -1,6 +1,7 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import { useContext } from 'react';
 import { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid.js';
+import { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';
 import { CalendarBody } from './CalendarBody.js';
 import { CalendarHead } from './CalendarHead.js';
 import { CalendarFooter } from './CalendarFooter.js';
@@ -17,9 +18,11 @@ const CalendarContent = _ref => {
     className = ''
   } = _ref;
   const {
-    isControllerOnly,
     daysMatrixByWeekday
   } = useContext(CalendarContext);
+  const {
+    isControllerOnly
+  } = useContext(ControlledDateTimePickerContext);
   return /*#__PURE__*/_jsx(StyledShadowWrapper, {
     className: className,
     isControllerOnly: isControllerOnly,

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

@@ -1,54 +1,6 @@
-import { createRef, createContext } from 'react';
+import { createContext } from '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__*/createRef(),
-  prevMonthBtnRef: /*#__PURE__*/createRef(),
-  nextMonthBtnRef: /*#__PURE__*/createRef(),
-  nextYearBtnRef: /*#__PURE__*/createRef(),
-  calendarDaysWrapperRef: /*#__PURE__*/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__*/createContext(defaultCalendarContext);

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

@@ -16,10 +16,10 @@ const CalendarDaysList = /*#__PURE__*/React.memo(_ref => {
   return /*#__PURE__*/jsxs("div", {
     ref: innerRef,
     role: "rowgroup",
-    children: [/*#__PURE__*/_jsx(Day, {
+    children: [invisibleFirstDay ? /*#__PURE__*/_jsx(Day, {
       metaDay: invisibleFirstDay,
       isInvisible: true
-    }, "ds-calendar-".concat(invisibleFirstDay.day.toString())), daysMatrixByWeekday.map((week, i) => /*#__PURE__*/_jsx(StyledWeekDaysListWrapper, {
+    }, "ds-calendar-".concat(invisibleFirstDay.day.toString())) : null, daysMatrixByWeekday.map((week, i) => /*#__PURE__*/_jsx(StyledWeekDaysListWrapper, {
       role: "row",
       "aria-rowindex": i + 1,
       cols: ['32px', '32px', '32px', '32px', '32px', '32px', '32px'],
@@ -31,10 +31,10 @@ const CalendarDaysList = /*#__PURE__*/React.memo(_ref => {
     }, "ds-calendar-week-".concat(week[0].day.toString(), "-").concat(week[6].day.toString()), week.map((metaDay, z) => /*#__PURE__*/_jsx(Day, {
       metaDay: metaDay,
       colIndex: z + 1
-    }, "ds-calendar-".concat(metaDay.day.toString()))))), /*#__PURE__*/_jsx(Day, {
+    }, "ds-calendar-".concat(metaDay.day.toString()))))), invisibleLastDay ? /*#__PURE__*/_jsx(Day, {
       metaDay: invisibleLastDay,
       isInvisible: true
-    }, "ds-calendar-".concat(invisibleLastDay.day.toString()))]
+    }, "ds-calendar-".concat(invisibleLastDay.day.toString())) : null]
   });
 });
 

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

@@ -4,6 +4,7 @@ import { BUTTON_SIZES } from '@elliemae/ds-button';
 import { ChevronDoubleLeft, ChevronLeft, ChevronRight, ChevronDoubleRight } from '@elliemae/ds-icons';
 import { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid.js';
 import { getMonthNameByMonthNumber } from '../../../utils/dateHelpers.js';
+import { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';
 import { StyledHeader, StyledHeaderButton } from './Styleds.js';
 import { CalendarContext } from './CalendarContext.js';
 
@@ -21,10 +22,6 @@ const useGetFormattedCurrentDate = () => {
 const CalendarHead = () => {
   const currentFormatedDate = useGetFormattedCurrentDate();
   const {
-    prevYearBtnRef,
-    prevMonthBtnRef,
-    nextMonthBtnRef,
-    nextYearBtnRef,
     handlePrevYear,
     handlePrevMonth,
     handleNextMonth,
@@ -36,10 +33,16 @@ const CalendarHead = () => {
     onPrevYearFocus,
     onPrevMonthFocus,
     onNextMonthFocus,
-    onNextYearFocus,
-    isControllerOnly,
-    autoFocusPrevMonthArrow
+    onNextYearFocus
   } = useContext(CalendarContext);
+  const {
+    isControllerOnly,
+    autoFocusPrevMonthArrow,
+    prevYearBtnRef,
+    prevMonthBtnRef,
+    nextMonthBtnRef,
+    nextYearBtnRef
+  } = useContext(ControlledDateTimePickerContext);
   return /*#__PURE__*/_jsx(StyledHeader, {}, void 0, /*#__PURE__*/_jsx(StyledHeaderButton, {
     "aria-label": "previous year",
     buttonType: "raw",

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

@@ -1,8 +1,9 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import { useContext, useMemo } from 'react';
-import { BUTTON_SIZES, BUTTON_VARIANT } from '@elliemae/ds-button';
+import { BUTTON_SIZES } from '@elliemae/ds-button';
 import { DatePicker } from '@elliemae/ds-icons';
 import { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid.js';
+import { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';
 import { CalendarContext } from './CalendarContext.js';
 import { StyledIconTriggerButton } from './Styleds.js';
 
@@ -14,15 +15,18 @@ const CalendarIconTrigger = () => {
   const {
     handleToggleCalendar,
     handleSetTriggerRef,
-    handlePickerIconKeyDown,
-    ariaCurrentValueForInputs,
-    disabled
+    handlePickerIconKeyDown
   } = useContext(CalendarContext);
+  const {
+    props: {
+      disabled
+    },
+    ariaCurrentValueForInputs
+  } = useContext(ControlledDateTimePickerContext);
   return useMemo(() => /*#__PURE__*/_jsx(StyledIconTriggerButton, {
     "aria-label": "date picker context menu trigger, ".concat(ariaCurrentValueForInputs),
     buttonType: "icon",
     size: BUTTON_SIZES.M,
-    variant: BUTTON_VARIANT.DEFAULT,
     innerRef: handleSetTriggerRef,
     onClick: handleToggleCalendar,
     onKeyDown: handlePickerIconKeyDown,

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

@@ -1,5 +1,6 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import { useContext } from 'react';
+import { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';
 import { CalendarDaysList } from './CalendarDaysList.js';
 import { CalendarContext } from './CalendarContext.js';
 
@@ -7,9 +8,11 @@ const CalendarMonthDays = () => {
   const {
     invisibleFirstDay,
     daysMatrixByWeekday,
-    invisibleLastDay,
-    calendarDaysWrapperRef
+    invisibleLastDay
   } = useContext(CalendarContext);
+  const {
+    calendarDaysWrapperRef
+  } = useContext(ControlledDateTimePickerContext);
   return /*#__PURE__*/_jsx(CalendarDaysList, {
     invisibleFirstDay: invisibleFirstDay,
     daysMatrixByWeekday: daysMatrixByWeekday,

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

@@ -7,6 +7,7 @@ import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import { useContext } from 'react';
 import { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid.js';
+import { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';
 import { CalendarContent } from './CalendarContent.js';
 import { CalendarContext } from './CalendarContext.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
@@ -17,14 +18,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(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
+  } = useContext(ControlledDateTimePickerContext);
   const {
     setPopperElement,
     usePopperHelpers: {
       styles,
       attributes
     },
-    setArrowElement,
-    isControllerOnly
+    setArrowElement
   } = useContext(CalendarContext);
   if (isControllerOnly) return _CalendarContent || (_CalendarContent = /*#__PURE__*/_jsx(CalendarContent, {}));
   return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({

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

@@ -38,31 +38,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
   } = useContext(ControlledDateTimePickerContext);
   const {
-    handleDayOnKeyDown,
     focusedDay,
+    handleDayOnKeyDown,
     handleFocusMetaDayByDay,
-    isWithTimeWheelToo,
     closeCalendar,
     tryToFocusCurrentlyDataIsFocusedDay
   } = useContext(CalendarContext);
-  const isFocusedMetaDay = 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 ? compareTwoDatesDayEquality(metaDay === null || metaDay === void 0 ? void 0 : metaDay.day, focusedDay === null || focusedDay === void 0 ? void 0 : focusedDay.day) : false;
   const isSelected = useMemo(() => {
     const selectedDate = getDayFromDateString(dateStringFromProps);
-    return isSameDateMoment(day, selectedDate);
+    return selectedDate ? isSameDateMoment(day, selectedDate) : false;
   }, [dateStringFromProps, day]);
   const isFocused = latestInteractionRegion === 'calendar-days' && isFocusedMetaDay;
   const isDisabled = getIsDisabledDay(metaDay.dayAsString);
@@ -86,14 +86,14 @@ const Day = _ref => {
         day: dayNumber,
         year
       } = 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 = useCallback(() => {
     setLatestInteractionRegion('calendar-days');
   }, [setLatestInteractionRegion]);

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

@@ -1,62 +1,25 @@
+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 'core-js/modules/web.dom-collections.iterator.js';
-import { useContext, useState, useMemo, useCallback } from 'react';
+import { useContext, useState, useCallback, useMemo } from 'react';
 import { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';
-import { useKeyboardHandlers } from './useKeyboardHandlers.js';
+import { useCurrentDisplayedMonthYearLogic } from './useCurrentDisplayedMonthYearLogic.js';
 import { useFocusLogic } from './useFocusLogic.js';
 import { usePopperTriggerLogic } from './usePopperTriggerLogic.js';
-import { useCurrentDisplayedMonthYearLogic } from './useCurrentDisplayedMonthYearLogic.js';
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-function sliceIntoChunks(arr, chunkSize) {
-  const res = [];
-
-  for (let i = 0; i < arr.length; i += chunkSize) {
-    const chunk = arr.slice(i, i + chunkSize);
-    res.push(chunk);
-  }
+import { useKeyboardHandlers } from './useKeyboardHandlers.js';
 
-  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(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
   } = useContext(ControlledDateTimePickerContext);
   const [showCalendar, setShowCalendar] = useState(false);
-  const {
-    currentMonth,
-    currentYear,
-    daysArray,
-    handlePrevYear,
-    handlePrevMonth,
-    handleNextMonth,
-    handleNextYear
-  } = useCurrentDisplayedMonthYearLogic();
-  const {
-    invisibleFirstDay,
-    daysMatrixByWeekday,
-    invisibleLastDay
-  } = useMemo(() => {
-    const [invisible1stDay, ...otherDays] = [...daysArray];
-    const invisibleDayLast = otherDays.pop();
-    return {
-      invisibleFirstDay: invisible1stDay,
-      daysMatrixByWeekday: sliceIntoChunks(otherDays, 7),
-      invisibleLastDay: invisibleDayLast
-    };
-  }, [daysArray]);
   const setLatestInteractionRegionCalendarHead = useCallback(() => {
     setLatestInteractionRegion('calendar-head');
   }, [setLatestInteractionRegion]);
@@ -72,93 +35,28 @@ const useConfigCalendarCTX = () => {
   const onNextYearFocus = useCallback(() => {
     setLatestInteractionRegionCalendarHead();
   }, [setLatestInteractionRegionCalendarHead]);
-  const {
-    focusedDay,
-    tryToFocusCurrentlyDataIsFocusedDay,
-    handleFocusMetaDay,
-    handleFocusMetaDayByDay,
-    resetFocusedDayToStartDate
-  } = useFocusLogic({
-    daysArray,
+  const currentDisplayedMonthLogic = useCurrentDisplayedMonthYearLogic();
+  const focusLogic = useFocusLogic({
+    currentDisplayedMonthLogic,
     showCalendar
   });
-  const {
-    closeCalendar,
-    handleSetTriggerRef,
-    setPopperElement,
-    setArrowElement,
-    usePopperHelpers,
-    handleToggleCalendar,
-    handleMenuWrapperKeyDown
-  } = usePopperTriggerLogic({
-    tryToFocusCurrentlyDataIsFocusedDay,
-    resetFocusedDayToStartDate,
-    focusedDay,
+  const popperTriggerLogic = usePopperTriggerLogic({
+    focusLogic,
     showCalendar,
     setShowCalendar
   });
-  const {
-    handleDayOnKeyDown,
-    handlePrevYearKeyDown,
-    handlePrevMonthKeyDown,
-    handleNextMonthKeyDown,
-    handleNextYearKeyDown,
-    handlePickerIconKeyDown
-  } = useKeyboardHandlers({
-    focusedDay,
-    daysArray,
-    handlePrevMonth,
-    handleNextMonth,
-    handleFocusMetaDay,
-    handleFocusMetaDayByDay,
-    tryToFocusCurrentlyDataIsFocusedDay
+  const keyboardHandlers = useKeyboardHandlers({
+    currentDisplayedMonthLogic,
+    focusLogic
   });
-  return useMemo(() => ({
+  return 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]);
 };
 
 export { useConfigCalendarCTX };