@mui/x-date-pickers 8.0.0-alpha.10 → 8.0.0-alpha.11

package/CHANGELOG.md

@@ -5,6 +5,110 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## **8.0.0-alpha.11**
+
+_Feb 7, 2025_
+
+We'd like to offer a big thanks to the 11 contributors who made this release possible. Here are some highlights ✨:
+
+- ⚡ Mount and resize performance improvements for the Data Grid
+
+Special thanks go out to the community contributors who have helped make this release possible:
+@lauri865.
+Following are all team members who have contributed to this release:
+@alexfauquette, @arminmeh, @bernardobelchior, @flaviendelangle, @Janpot, @KenanYusuf, @LukasTy, @MBilalShafi, @noraleonte, @romgrk.
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### Breaking changes
+
+- `createUseGridApiEventHandler()` is not exported anymore.
+- The `filteredRowsLookup` object of the filter state does not contain `true` values anymore. If the row is filtered out, the value is `false`. Otherwise, the row id is not present in the object.
+  This change only impacts you if you relied on `filteredRowsLookup` to get ids of filtered rows. In this case,use `gridDataRowIdsSelector` selector to get row ids and check `filteredRowsLookup` for `false` values:
+
+  ```diff
+   const filteredRowsLookup = gridFilteredRowsLookupSelector(apiRef);
+  -const filteredRowIds = Object.keys(filteredRowsLookup).filter((rowId) => filteredRowsLookup[rowId] === true);
+  +const rowIds = gridDataRowIdsSelector(apiRef);
+  +const filteredRowIds = rowIds.filter((rowId) => filteredRowsLookup[rowId] !== false);
+  ```
+
+- The `visibleRowsLookup` state does not contain `true` values anymore. If the row is not visible, the value is `false`. Otherwise, the row id is not present in the object:
+
+  ```diff
+   const visibleRowsLookup = gridVisibleRowsLookupSelector(apiRef);
+  -const isRowVisible = visibleRowsLookup[rowId] === true;
+  +const isRowVisible = visibleRowsLookup[rowId] !== false;
+  ```
+
+#### `@mui/x-data-grid@8.0.0-alpha.11`
+
+- [DataGrid] Avoid `<GridRoot />` double-render pass on mount in SPA mode (#15648) @lauri865
+- [DataGrid] Fix loading overlay not in sync with scroll (#16437) @MBilalShafi
+- [DataGrid] Refactor: remove material `MenuList` import (#16444) @romgrk
+- [DataGrid] Refactor: simplify `useGridApiEventHandler()` (#16479) @romgrk
+
+#### `@mui/x-data-grid-pro@8.0.0-alpha.11` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@8.0.0-alpha.11`, plus:
+
+- [DataGridPro] Fix the return type of `useGridApiContext()` for Pro and Premium packages on React < 19 (#16441) @arminmeh
+
+#### `@mui/x-data-grid-premium@8.0.0-alpha.11` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@8.0.0-alpha.11`, plus:
+
+- [DataGridPremium] Fix "no rows" overlay not showing with active aggregation (#16466) @KenanYusuf
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.0.0-alpha.11`
+
+Internal changes.
+
+#### `@mui/x-date-pickers-pro@8.0.0-alpha.11` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@8.0.0-alpha.11`, plus:
+
+- [DateRangeCalendar] Support arrow navigation with multiple months rendered (#16363) @flaviendelangle
+- [DateRangePicker] Fix `currentMonthCalendarPosition` prop behavior on mobile (#16455) @LukasTy
+- [DateRangePicker] Fix vertical alignment for multi input fields (#16489) @noraleonte
+
+### Charts
+
+#### `@mui/x-charts@8.0.0-alpha.11`
+
+- [charts] Add `color` prop to `Sparkline` and deprecate `colors` (#16477) @bernardobelchior
+- [charts] Make typescript more flexible about plugins and their params (#16478) @alexfauquette
+- [charts] Remove component for axis event listener (#16314) @alexfauquette
+
+#### `@mui/x-charts-pro@8.0.0-alpha.11` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-charts@8.0.0-alpha.11`.
+
+### Tree View
+
+#### `@mui/x-tree-view@8.0.0-alpha.11`
+
+Internal changes.
+
+#### `@mui/x-tree-view-pro@8.0.0-alpha.11` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-tree-view@8.0.0-alpha.11`.
+
+### Docs
+
+- [docs] Update charts colors default value (#16484) @bernardobelchior
+
+### Core
+
+- [core] Fix corepack and pnpm installation in CircleCI (#16434) @flaviendelangle
+- [code-infra] Update monorepo (#16112) @Janpot
+- [test] Avoid test warning when running on React 18 (#16486) @LukasTy
+- [test] Disable `react-transition-group` transitions in unit testing (#16288) @lauri865
+
 ## 8.0.0-alpha.10
 
 _Jan 30, 2025_
@@ -50,6 +154,7 @@ Following are all team members who have contributed to this release:
   +  },
    });
   ```
+
 - The `detailPanels`, `pinnedColumns`, and `pinnedRowsRenderZone` classes have been removed.
 - Return type of the `useGridApiRef()` hook and the type of `apiRef` prop are updated to explicitly include the possibilty of `null`. In addition to this, `useGridApiRef()` returns a reference that is initialized with `null` instead of `{}`.
 
@@ -91,7 +196,7 @@ Same changes as in `@mui/x-data-grid-pro@8.0.0-alpha.10`.
 
 #### Breaking changes
 
-- The component passed to the `field` slot no longer receives the `ref`,  `disabled`, `className`, `sx`, `label`, `name`, `formatDensity`, `enableAccessibleFieldDOMStructure`, `selectedSections`, `onSelectedSectionsChange` and `inputRef` props — [Learn more](https://next.mui.com/x/migration/migration-pickers-v7/#slot-field)
+- The component passed to the `field` slot no longer receives the `ref`, `disabled`, `className`, `sx`, `label`, `name`, `formatDensity`, `enableAccessibleFieldDOMStructure`, `selectedSections`, `onSelectedSectionsChange` and `inputRef` props — [Learn more](https://next.mui.com/x/migration/migration-pickers-v7/#slot-field)
 - The `MuiPickersPopper` theme entry have been renamed `MuiPickerPopper` and some of its props have been removed — [Learn more](https://next.mui.com/x/migration/migration-pickers-v7/#muipickerspopper)
 
 #### `@mui/x-date-pickers@8.0.0-alpha.10`
@@ -111,7 +216,7 @@ Same changes as in `@mui/x-date-pickers@8.0.0-alpha.10`.
 
 - Replace `legend.position.horizontal` from `"left" | "middle" | "right"` to `"start" | "center" | "end"`.
   This is to align with the CSS values and reflect the RTL ability of the legend component.
-- The default colors have changed. To keep using the old palette. It is possible to import `blueberryTwilightPalette` from  `@mui/x-charts/colorPalettes` and set it on the `colors` property of charts.
+- The default colors have changed. To keep using the old palette. It is possible to import `blueberryTwilightPalette` from `@mui/x-charts/colorPalettes` and set it on the `colors` property of charts.
 - The `id` property is now optional on the `Pie` and `Scatter` data types.
 
 #### `@mui/x-charts@8.0.0-alpha.10`

package/DateCalendar/DateCalendar.js

@@ -96,7 +96,6 @@ export const DateCalendar = /*#__PURE__*/React.forwardRef(function DateCalendar(
       disableFuture,
       disablePast,
       onChange,
-      onYearChange,
       onMonthChange,
       reduceAnimations,
       shouldDisableDate,
@@ -112,7 +111,7 @@ export const DateCalendar = /*#__PURE__*/React.forwardRef(function DateCalendar(
       minDate,
       maxDate,
       disableHighlightToday,
-      focusedView: inFocusedView,
+      focusedView: focusedViewProp,
       onFocusedViewChange,
       showDaysOutsideCurrentMonth,
       fixedWeekNumber,
@@ -155,15 +154,13 @@ export const DateCalendar = /*#__PURE__*/React.forwardRef(function DateCalendar(
     onChange: handleValueChange,
     onViewChange,
     autoFocus,
-    focusedView: inFocusedView,
+    focusedView: focusedViewProp,
     onFocusedViewChange
   });
   const {
     referenceDate,
     calendarState,
-    changeFocusedDay,
-    changeMonth,
-    handleChangeMonth,
+    setVisibleDate,
     isDateDisabled,
     onMonthSwitchingAnimationEnd
   } = useCalendarState({
@@ -176,7 +173,13 @@ export const DateCalendar = /*#__PURE__*/React.forwardRef(function DateCalendar(
     shouldDisableDate,
     disablePast,
     disableFuture,
-    timezone
+    timezone,
+    getCurrentMonthFromVisibleDate: (visibleDate, prevMonth) => {
+      if (utils.isSameMonth(visibleDate, prevMonth)) {
+        return prevMonth;
+      }
+      return utils.startOfMonth(visibleDate);
+    }
   });
 
   // When disabled, limit the view to the selected date
@@ -193,9 +196,9 @@ export const DateCalendar = /*#__PURE__*/React.forwardRef(function DateCalendar(
       view,
       currentMonth: calendarState.currentMonth,
       onViewChange: setView,
-      onMonthChange: (newMonth, direction) => handleChangeMonth({
-        newMonth,
-        direction
+      onMonthChange: month => setVisibleDate({
+        target: month,
+        reason: 'header-navigation'
       }),
       minDate: minDateWithDisabled,
       maxDate: maxDateWithDisabled,
@@ -223,12 +226,17 @@ export const DateCalendar = /*#__PURE__*/React.forwardRef(function DateCalendar(
     }) : newDate;
     if (closestEnabledDate) {
       setValueAndGoToNextView(closestEnabledDate, 'finish');
-      onMonthChange?.(startOfMonth);
+      setVisibleDate({
+        target: closestEnabledDate,
+        reason: 'cell-interaction'
+      });
     } else {
       goToNextView();
-      changeMonth(startOfMonth);
+      setVisibleDate({
+        target: startOfMonth,
+        reason: 'cell-interaction'
+      });
     }
-    changeFocusedDay(closestEnabledDate, true);
   });
   const handleDateYearChange = useEventCallback(newDate => {
     const startOfYear = utils.startOfYear(newDate);
@@ -245,12 +253,17 @@ export const DateCalendar = /*#__PURE__*/React.forwardRef(function DateCalendar(
     }) : newDate;
     if (closestEnabledDate) {
       setValueAndGoToNextView(closestEnabledDate, 'finish');
-      onYearChange?.(closestEnabledDate);
+      setVisibleDate({
+        target: closestEnabledDate,
+        reason: 'cell-interaction'
+      });
     } else {
       goToNextView();
-      changeMonth(startOfYear);
+      setVisibleDate({
+        target: startOfYear,
+        reason: 'cell-interaction'
+      });
     }
-    changeFocusedDay(closestEnabledDate, true);
   });
   const handleSelectedDayChange = useEventCallback(day => {
     if (day) {
@@ -261,7 +274,10 @@ export const DateCalendar = /*#__PURE__*/React.forwardRef(function DateCalendar(
   });
   React.useEffect(() => {
     if (utils.isValid(value)) {
-      changeMonth(value);
+      setVisibleDate({
+        target: value,
+        reason: 'controlled-value-change'
+      });
     }
   }, [value]); // eslint-disable-line
 
@@ -328,7 +344,10 @@ export const DateCalendar = /*#__PURE__*/React.forwardRef(function DateCalendar(
           referenceDate: referenceDate
         })), view === 'day' && /*#__PURE__*/_jsx(DayCalendar, _extends({}, calendarState, baseDateValidationProps, commonViewProps, {
           onMonthSwitchingAnimationEnd: onMonthSwitchingAnimationEnd,
-          onFocusedDayChange: changeFocusedDay,
+          onFocusedDayChange: focusedDate => setVisibleDate({
+            target: focusedDate,
+            reason: 'cell-interaction'
+          }),
           reduceAnimations: reduceAnimations,
           selectedDays: selectedDays,
           onSelectedDaysChange: handleSelectedDayChange,

package/DateCalendar/DayCalendar.d.ts

@@ -54,7 +54,6 @@ export interface ExportedDayCalendarProps extends ExportedPickersDayProps {
     fixedWeekNumber?: number;
 }
 export interface DayCalendarProps extends ExportedDayCalendarProps, DayValidationProps, MonthValidationProps, YearValidationProps, Required<BaseDateValidationProps>, DefaultizedProps<TimezoneProps, 'timezone'>, FormProps {
-    autoFocus?: boolean;
     className?: string;
     currentMonth: PickerValidDate;
     selectedDays: (PickerValidDate | null)[];
@@ -66,7 +65,7 @@ export interface DayCalendarProps extends ExportedDayCalendarProps, DayValidatio
     reduceAnimations: boolean;
     slideDirection: SlideDirection;
     TransitionProps?: Partial<SlideTransitionProps>;
-    hasFocus?: boolean;
+    hasFocus: boolean;
     onFocusedViewChange?: (newHasFocus: boolean) => void;
     gridLabelId?: string;
     /**

package/DateCalendar/DayCalendar.js

@@ -2,7 +2,7 @@
 
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["parentProps", "day", "focusableDay", "selectedDays", "isDateDisabled", "currentMonthNumber", "isViewFocused"],
+const _excluded = ["parentProps", "day", "focusedDay", "selectedDays", "isDateDisabled", "currentMonthNumber", "isViewFocused"],
   _excluded2 = ["ownerState"];
 import * as React from 'react';
 import useEventCallback from '@mui/utils/useEventCallback';
@@ -10,7 +10,7 @@ import Typography from '@mui/material/Typography';
 import useSlotProps from '@mui/utils/useSlotProps';
 import { useRtl } from '@mui/system/RtlProvider';
 import { styled, useThemeProps } from '@mui/material/styles';
-import { unstable_composeClasses as composeClasses, unstable_useControlled as useControlled } from '@mui/utils';
+import composeClasses from '@mui/utils/composeClasses';
 import clsx from 'clsx';
 import { PickersDay } from "../PickersDay/PickersDay.js";
 import { usePickerTranslations } from "../hooks/usePickerTranslations.js";
@@ -137,7 +137,7 @@ function WrappedDay(_ref) {
   let {
       parentProps,
       day,
-      focusableDay,
+      focusedDay,
       selectedDays,
       isDateDisabled,
       currentMonthNumber,
@@ -158,7 +158,8 @@ function WrappedDay(_ref) {
   const {
     ownerState
   } = usePickerPrivateContext();
-  const isFocusableDay = focusableDay !== null && utils.isSameDay(day, focusableDay);
+  const isFocusableDay = focusedDay != null && utils.isSameDay(day, focusedDay);
+  const isFocusedDay = isViewFocused && isFocusableDay;
   const isSelected = selectedDays.some(selectedDay => utils.isSameDay(selectedDay, day));
   const isToday = utils.isSameDay(day, now);
   const isDisabled = React.useMemo(() => disabled || isDateDisabled(day), [disabled, isDateDisabled, day]);
@@ -200,7 +201,7 @@ function WrappedDay(_ref) {
   return /*#__PURE__*/_jsx(Day, _extends({}, dayProps, {
     day: day,
     disabled: isDisabled,
-    autoFocus: isViewFocused && isFocusableDay,
+    autoFocus: !outsideCurrentMonth && isFocusedDay,
     today: isToday,
     outsideCurrentMonth: outsideCurrentMonth,
     isFirstVisibleCell: isFirstVisibleCell,
@@ -251,7 +252,6 @@ export function DayCalendar(inProps) {
     gridLabelId,
     displayWeekNumber,
     fixedWeekNumber,
-    autoFocus,
     timezone
   } = props;
   const now = useNow(timezone);
@@ -268,13 +268,6 @@ export function DayCalendar(inProps) {
     timezone
   });
   const translations = usePickerTranslations();
-  const [internalHasFocus, setInternalHasFocus] = useControlled({
-    name: 'DayCalendar',
-    state: 'hasFocus',
-    controlled: hasFocus,
-    default: autoFocus ?? false
-  });
-  const [internalFocusedDay, setInternalFocusedDay] = React.useState(() => focusedDay || now);
   const handleDaySelect = useEventCallback(day => {
     if (readOnly) {
       return;
@@ -284,9 +277,7 @@ export function DayCalendar(inProps) {
   const focusDay = day => {
     if (!isDateDisabled(day)) {
       onFocusedDayChange(day);
-      setInternalFocusedDay(day);
       onFocusedViewChange?.(true);
-      setInternalHasFocus(true);
     }
   };
   const handleKeyDown = useEventCallback((event, day) => {
@@ -353,7 +344,7 @@ export function DayCalendar(inProps) {
   });
   const handleFocus = useEventCallback((event, day) => focusDay(day));
   const handleBlur = useEventCallback((event, day) => {
-    if (internalHasFocus && utils.isSameDay(internalFocusedDay, day)) {
+    if (focusedDay != null && utils.isSameDay(focusedDay, day)) {
       onFocusedViewChange?.(false);
     }
   });
@@ -365,23 +356,6 @@ export function DayCalendar(inProps) {
   const transitionKey = `${currentYearNumber}-${currentMonthNumber}`;
   // eslint-disable-next-line react-hooks/exhaustive-deps
   const slideNodeRef = React.useMemo(() => /*#__PURE__*/React.createRef(), [transitionKey]);
-  const focusableDay = React.useMemo(() => {
-    const startOfMonth = utils.startOfMonth(currentMonth);
-    const endOfMonth = utils.endOfMonth(currentMonth);
-    if (isDateDisabled(internalFocusedDay) || utils.isAfterDay(internalFocusedDay, endOfMonth) || utils.isBeforeDay(internalFocusedDay, startOfMonth)) {
-      return findClosestEnabledDate({
-        utils,
-        date: internalFocusedDay,
-        minDate: startOfMonth,
-        maxDate: endOfMonth,
-        disablePast,
-        disableFuture,
-        isDateDisabled,
-        timezone
-      });
-    }
-    return internalFocusedDay;
-  }, [currentMonth, disableFuture, disablePast, internalFocusedDay, isDateDisabled, utils, timezone]);
   const weeksToDisplay = React.useMemo(() => {
     const toDisplay = utils.getWeekArray(currentMonth);
     let nextMonth = utils.addMonths(currentMonth, 1);
@@ -448,14 +422,14 @@ export function DayCalendar(inProps) {
             parentProps: props,
             day: day,
             selectedDays: validSelectedDays,
-            focusableDay: focusableDay,
+            isViewFocused: hasFocus,
+            focusedDay: focusedDay,
             onKeyDown: handleKeyDown,
             onFocus: handleFocus,
             onBlur: handleBlur,
             onDaySelect: handleDaySelect,
             isDateDisabled: isDateDisabled,
-            currentMonthNumber: currentMonthNumber,
-            isViewFocused: internalHasFocus
+            currentMonthNumber: currentMonthNumber
             // fix issue of announcing column 1 as column 2 when `displayWeekNumber` is enabled
             ,
             "aria-colindex": dayIndex + 1

package/DateCalendar/useCalendarState.d.ts

@@ -1,5 +1,5 @@
 import { SlideDirection } from './PickersSlideTransition';
-import { MuiPickersAdapter, PickersTimezone, PickerValidDate } from '../models';
+import { PickersTimezone, PickerValidDate } from '../models';
 import { DateCalendarDefaultizedProps } from './DateCalendar.types';
 interface CalendarState {
     currentMonth: PickerValidDate;
@@ -7,37 +7,21 @@ interface CalendarState {
     isMonthSwitchingAnimating: boolean;
     slideDirection: SlideDirection;
 }
-type ReducerAction<TType, TAdditional = {}> = {
-    type: TType;
-} & TAdditional;
-interface ChangeMonthPayload {
-    direction: SlideDirection;
-    newMonth: PickerValidDate;
-}
-interface ChangeFocusedDayPayload {
-    focusedDay: PickerValidDate | null;
-    /**
-     * The update does not trigger month switching animation.
-     * For example: when selecting month from the month view.
-     */
-    withoutMonthSwitchingAnimation?: boolean;
-}
-export declare const createCalendarStateReducer: (reduceAnimations: boolean, disableSwitchToMonthOnDayFocus: boolean, utils: MuiPickersAdapter) => (state: CalendarState, action: ReducerAction<"finishMonthSwitchingAnimation"> | ReducerAction<"changeMonth", ChangeMonthPayload> | ReducerAction<"changeMonthTimezone", {
-    newTimezone: string;
-}> | ReducerAction<"changeFocusedDay", ChangeFocusedDayPayload>) => CalendarState;
-interface UseCalendarStateParameters extends Pick<DateCalendarDefaultizedProps, 'referenceDate' | 'disableFuture' | 'disablePast' | 'minDate' | 'maxDate' | 'onMonthChange' | 'reduceAnimations' | 'shouldDisableDate'> {
+interface UseCalendarStateParameters extends Pick<DateCalendarDefaultizedProps, 'referenceDate' | 'disableFuture' | 'disablePast' | 'minDate' | 'maxDate' | 'onMonthChange' | 'onYearChange' | 'reduceAnimations' | 'shouldDisableDate'> {
     value: PickerValidDate | null;
-    disableSwitchToMonthOnDayFocus?: boolean;
     timezone: PickersTimezone;
+    getCurrentMonthFromVisibleDate: (focusedDay: PickerValidDate, prevMonth: PickerValidDate) => PickerValidDate;
 }
 interface UseCalendarStateReturnValue {
     referenceDate: PickerValidDate;
     calendarState: CalendarState;
-    changeMonth: (newDate: PickerValidDate) => void;
-    changeFocusedDay: (newFocusedDate: PickerValidDate | null, withoutMonthSwitchingAnimation?: boolean) => void;
+    setVisibleDate: (parameters: SetVisibleDateParameters) => void;
     isDateDisabled: (day: PickerValidDate | null) => boolean;
     onMonthSwitchingAnimationEnd: () => void;
-    handleChangeMonth: (payload: ChangeMonthPayload) => void;
 }
 export declare const useCalendarState: (params: UseCalendarStateParameters) => UseCalendarStateReturnValue;
+interface SetVisibleDateParameters {
+    target: PickerValidDate;
+    reason: 'header-navigation' | 'cell-interaction' | 'controlled-value-change';
+}
 export {};

package/DateCalendar/useCalendarState.js

@@ -7,13 +7,15 @@ import { useIsDateDisabled } from "./useIsDateDisabled.js";
 import { useUtils } from "../internals/hooks/useUtils.js";
 import { singleItemValueManager } from "../internals/utils/valueManagers.js";
 import { SECTION_TYPE_GRANULARITY } from "../internals/utils/getDefaultReferenceDate.js";
-export const createCalendarStateReducer = (reduceAnimations, disableSwitchToMonthOnDayFocus, utils) => (state, action) => {
+import { findClosestEnabledDate } from "../internals/utils/date-utils.js";
+const createCalendarStateReducer = (reduceAnimations, utils) => (state, action) => {
   switch (action.type) {
-    case 'changeMonth':
+    case 'setVisibleDate':
       return _extends({}, state, {
         slideDirection: action.direction,
-        currentMonth: action.newMonth,
-        isMonthSwitchingAnimating: !reduceAnimations
+        currentMonth: action.month,
+        isMonthSwitchingAnimating: !utils.isSameMonth(action.month, state.currentMonth) && !reduceAnimations && !action.skipAnimation,
+        focusedDay: action.focusedDay
       });
     case 'changeMonthTimezone':
       {
@@ -33,19 +35,6 @@ export const createCalendarStateReducer = (reduceAnimations, disableSwitchToMont
       return _extends({}, state, {
         isMonthSwitchingAnimating: false
       });
-    case 'changeFocusedDay':
-      {
-        if (state.focusedDay != null && action.focusedDay != null && utils.isSameDay(action.focusedDay, state.focusedDay)) {
-          return state;
-        }
-        const needMonthSwitch = action.focusedDay != null && !disableSwitchToMonthOnDayFocus && !utils.isSameMonth(state.currentMonth, action.focusedDay);
-        return _extends({}, state, {
-          focusedDay: action.focusedDay,
-          isMonthSwitchingAnimating: needMonthSwitch && !reduceAnimations && !action.withoutMonthSwitchingAnimation,
-          currentMonth: needMonthSwitch ? utils.startOfMonth(action.focusedDay) : state.currentMonth,
-          slideDirection: action.focusedDay != null && utils.isAfterDay(action.focusedDay, state.currentMonth) ? 'left' : 'right'
-        });
-      }
     default:
       throw new Error('missing support');
   }
@@ -56,16 +45,17 @@ export const useCalendarState = params => {
     referenceDate: referenceDateProp,
     disableFuture,
     disablePast,
-    disableSwitchToMonthOnDayFocus = false,
     maxDate,
     minDate,
     onMonthChange,
+    onYearChange,
     reduceAnimations,
     shouldDisableDate,
-    timezone
+    timezone,
+    getCurrentMonthFromVisibleDate
   } = params;
   const utils = useUtils();
-  const reducerFn = React.useRef(createCalendarStateReducer(Boolean(reduceAnimations), disableSwitchToMonthOnDayFocus, utils)).current;
+  const reducerFn = React.useRef(createCalendarStateReducer(Boolean(reduceAnimations), utils)).current;
   const referenceDate = React.useMemo(() => {
     return singleItemValueManager.getInitialReferenceValue({
       value,
@@ -85,6 +75,14 @@ export const useCalendarState = params => {
     currentMonth: utils.startOfMonth(referenceDate),
     slideDirection: 'left'
   });
+  const isDateDisabled = useIsDateDisabled({
+    shouldDisableDate,
+    minDate,
+    maxDate,
+    disableFuture,
+    disablePast,
+    timezone
+  });
 
   // Ensure that `calendarState.currentMonth` timezone is updated when `referenceDate` (or timezone changes)
   // https://github.com/mui/mui-x/issues/10804
@@ -94,53 +92,65 @@ export const useCalendarState = params => {
       newTimezone: utils.getTimezone(referenceDate)
     });
   }, [referenceDate, utils]);
-  const handleChangeMonth = React.useCallback(payload => {
-    dispatch(_extends({
-      type: 'changeMonth'
-    }, payload));
-    if (onMonthChange) {
-      onMonthChange(payload.newMonth);
-    }
-  }, [onMonthChange]);
-  const changeMonth = React.useCallback(newDate => {
-    const newDateRequested = newDate;
-    if (utils.isSameMonth(newDateRequested, calendarState.currentMonth)) {
+  const setVisibleDate = useEventCallback(({
+    target,
+    reason
+  }) => {
+    if (reason === 'cell-interaction' && calendarState.focusedDay != null && utils.isSameDay(target, calendarState.focusedDay)) {
       return;
     }
-    handleChangeMonth({
-      newMonth: utils.startOfMonth(newDateRequested),
-      direction: utils.isAfterDay(newDateRequested, calendarState.currentMonth) ? 'left' : 'right'
+    const skipAnimation = reason === 'cell-interaction';
+    let month;
+    let focusedDay;
+    if (reason === 'cell-interaction') {
+      month = getCurrentMonthFromVisibleDate(target, calendarState.currentMonth);
+      focusedDay = target;
+    } else {
+      month = utils.isSameMonth(target, calendarState.currentMonth) ? calendarState.currentMonth : utils.startOfMonth(target);
+      focusedDay = target;
+
+      // If the date is disabled, we try to find a non-disabled date inside the same month.
+      if (isDateDisabled(focusedDay)) {
+        const startOfMonth = utils.startOfMonth(target);
+        const endOfMonth = utils.endOfMonth(target);
+        focusedDay = findClosestEnabledDate({
+          utils,
+          date: focusedDay,
+          minDate: utils.isBefore(minDate, startOfMonth) ? startOfMonth : minDate,
+          maxDate: utils.isAfter(maxDate, endOfMonth) ? endOfMonth : maxDate,
+          disablePast,
+          disableFuture,
+          isDateDisabled,
+          timezone
+        });
+      }
+    }
+    const hasChangedMonth = !utils.isSameMonth(calendarState.currentMonth, month);
+    const hasChangedYear = !utils.isSameYear(calendarState.currentMonth, month);
+    if (hasChangedMonth) {
+      onMonthChange?.(month);
+    }
+    if (hasChangedYear) {
+      onYearChange?.(utils.startOfYear(month));
+    }
+    dispatch({
+      type: 'setVisibleDate',
+      month,
+      direction: utils.isAfterDay(month, calendarState.currentMonth) ? 'left' : 'right',
+      focusedDay: calendarState.focusedDay != null && focusedDay != null && utils.isSameDay(focusedDay, calendarState.focusedDay) ? calendarState.focusedDay : focusedDay,
+      skipAnimation
     });
-  }, [calendarState.currentMonth, handleChangeMonth, utils]);
-  const isDateDisabled = useIsDateDisabled({
-    shouldDisableDate,
-    minDate,
-    maxDate,
-    disableFuture,
-    disablePast,
-    timezone
   });
   const onMonthSwitchingAnimationEnd = React.useCallback(() => {
     dispatch({
       type: 'finishMonthSwitchingAnimation'
     });
   }, []);
-  const changeFocusedDay = useEventCallback((newFocusedDate, withoutMonthSwitchingAnimation) => {
-    if (!isDateDisabled(newFocusedDate)) {
-      dispatch({
-        type: 'changeFocusedDay',
-        focusedDay: newFocusedDate,
-        withoutMonthSwitchingAnimation
-      });
-    }
-  });
   return {
     referenceDate,
     calendarState,
-    changeMonth,
-    changeFocusedDay,
+    setVisibleDate,
     isDateDisabled,
-    onMonthSwitchingAnimationEnd,
-    handleChangeMonth
+    onMonthSwitchingAnimationEnd
   };
 };

package/PickersCalendarHeader/PickersCalendarHeader.js

@@ -159,8 +159,8 @@ const PickersCalendarHeader = /*#__PURE__*/React.forwardRef(function PickersCale
       className: classes.switchViewIcon
     }),
     switchViewIconProps = _objectWithoutPropertiesLoose(_useSlotProps, _excluded2);
-  const selectNextMonth = () => onMonthChange(utils.addMonths(month, 1), 'left');
-  const selectPreviousMonth = () => onMonthChange(utils.addMonths(month, -1), 'right');
+  const selectNextMonth = () => onMonthChange(utils.addMonths(month, 1));
+  const selectPreviousMonth = () => onMonthChange(utils.addMonths(month, -1));
   const isNextMonthDisabled = useNextMonthDisabled(month, {
     disableFuture,
     maxDate,

package/PickersCalendarHeader/PickersCalendarHeader.types.d.ts

@@ -6,7 +6,6 @@ import { SxProps, Theme } from '@mui/material/styles';
 import { ExportedPickersArrowSwitcherProps, PickersArrowSwitcherSlots, PickersArrowSwitcherSlotProps } from '../internals/components/PickersArrowSwitcher';
 import { MonthValidationOptions } from '../internals/hooks/date-helpers-hooks';
 import { PickerValidDate, DateView, PickerOwnerState } from '../models';
-import { SlideDirection } from '../DateCalendar/PickersSlideTransition';
 import { PickersCalendarHeaderClasses } from './pickersCalendarHeaderClasses';
 export interface PickersCalendarHeaderSlots extends PickersArrowSwitcherSlots {
     /**
@@ -40,7 +39,7 @@ export interface PickersCalendarHeaderProps extends ExportedPickersArrowSwitcher
     currentMonth: PickerValidDate;
     disabled?: boolean;
     views: readonly DateView[];
-    onMonthChange: (date: PickerValidDate, slideDirection: SlideDirection) => void;
+    onMonthChange: (date: PickerValidDate) => void;
     view: DateView;
     reduceAnimations: boolean;
     onViewChange?: (view: DateView) => void;