@mui/x-date-pickers-pro 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/DateRangeCalendar/DateRangeCalendar.js

@@ -2,7 +2,7 @@
 
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["value", "defaultValue", "referenceDate", "onChange", "className", "classes", "disableFuture", "disablePast", "minDate", "maxDate", "shouldDisableDate", "reduceAnimations", "onMonthChange", "rangePosition", "defaultRangePosition", "onRangePositionChange", "calendars", "currentMonthCalendarPosition", "slots", "slotProps", "loading", "renderLoading", "disableHighlightToday", "readOnly", "disabled", "showDaysOutsideCurrentMonth", "dayOfWeekFormatter", "disableAutoMonthSwitching", "autoFocus", "fixedWeekNumber", "disableDragEditing", "displayWeekNumber", "timezone", "availableRangePositions", "views", "view", "openTo", "onViewChange"],
+const _excluded = ["value", "defaultValue", "referenceDate", "onChange", "className", "classes", "disableFuture", "disablePast", "minDate", "maxDate", "shouldDisableDate", "reduceAnimations", "onMonthChange", "rangePosition", "defaultRangePosition", "onRangePositionChange", "calendars", "currentMonthCalendarPosition", "slots", "slotProps", "loading", "renderLoading", "disableHighlightToday", "focusedView", "onFocusedViewChange", "readOnly", "disabled", "showDaysOutsideCurrentMonth", "dayOfWeekFormatter", "disableAutoMonthSwitching", "autoFocus", "fixedWeekNumber", "disableDragEditing", "displayWeekNumber", "timezone", "availableRangePositions", "views", "view", "openTo", "onViewChange"],
   _excluded2 = ["isDragging", "rangeDragDay", "draggingDatePosition"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
@@ -15,7 +15,7 @@ import { styled, useThemeProps } from '@mui/material/styles';
 import composeClasses from '@mui/utils/composeClasses';
 import useId from '@mui/utils/useId';
 import { Watermark } from '@mui/x-license';
-import { applyDefaultDate, DayCalendar, useReduceAnimations, useCalendarState, useDefaultDates, useUtils, useNow, DEFAULT_DESKTOP_MODE_MEDIA_QUERY, useControlledValueWithTimezone, useViews, usePickerPrivateContext } from '@mui/x-date-pickers/internals';
+import { applyDefaultDate, DayCalendar, useReduceAnimations, useCalendarState, useDefaultDates, useUtils, DEFAULT_DESKTOP_MODE_MEDIA_QUERY, useControlledValueWithTimezone, useViews, usePickerPrivateContext } from '@mui/x-date-pickers/internals';
 import { warnOnce } from '@mui/x-internals/warning';
 import { getReleaseInfo } from "../internals/utils/releaseInfo.js";
 import { dateRangeCalendarClasses, getDateRangeCalendarUtilityClass } from "./dateRangeCalendarClasses.js";
@@ -145,6 +145,8 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
       loading,
       renderLoading,
       disableHighlightToday,
+      focusedView: focusedViewProp,
+      onFocusedViewChange,
       readOnly,
       disabled,
       showDaysOutsideCurrentMonth,
@@ -177,18 +179,21 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
     valueManager: rangeValueManager
   });
   const {
-    setValueAndGoToNextView,
-    view
+    view,
+    setFocusedView,
+    focusedView,
+    setValueAndGoToNextView
   } = useViews({
     view: inView,
     views,
     openTo,
     onChange: handleValueChange,
     onViewChange,
-    autoFocus
+    autoFocus,
+    focusedView: focusedViewProp,
+    onFocusedViewChange
   });
   const utils = useUtils();
-  const now = useNow(timezone);
   const id = useId();
   const {
     rangePosition,
@@ -273,22 +278,39 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
   }, [shouldDisableDate, rangePosition, draggingDatePosition]);
   const {
     calendarState,
-    changeFocusedDay,
-    changeMonth,
-    handleChangeMonth,
+    setVisibleDate,
     onMonthSwitchingAnimationEnd
   } = useCalendarState({
     value: value[0] || value[1],
     referenceDate,
     disableFuture,
     disablePast,
-    disableSwitchToMonthOnDayFocus: true,
     maxDate,
     minDate,
     onMonthChange,
     reduceAnimations,
     shouldDisableDate: wrappedShouldDisableDate,
-    timezone
+    timezone,
+    getCurrentMonthFromVisibleDate: (visibleDate, prevMonth) => {
+      const firstVisibleMonth = utils.addMonths(prevMonth, 1 - currentMonthCalendarPosition);
+      const lastVisibleMonth = utils.endOfMonth(utils.addMonths(firstVisibleMonth, calendars - 1));
+
+      // The new focused day is inside the visible calendars,
+      // Do not change the current month
+      if (utils.isWithinRange(visibleDate, [firstVisibleMonth, lastVisibleMonth])) {
+        return prevMonth;
+      }
+
+      // The new focused day is after the last visible month,
+      // Move the current month so that the new focused day is inside the first visible month
+      if (utils.isAfter(visibleDate, lastVisibleMonth)) {
+        return utils.startOfMonth(utils.addMonths(visibleDate, currentMonthCalendarPosition - 1));
+      }
+
+      // The new focused day is before the first visible month,
+      // Move the current month so that the new focused day is inside the last visible month
+      return utils.startOfMonth(utils.addMonths(visibleDate, currentMonthCalendarPosition - calendars));
+    }
   });
   const CalendarHeader = slots?.calendarHeader ?? PickersRangeCalendarHeader;
   const calendarHeaderProps = useSlotProps({
@@ -299,9 +321,9 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
       views: ['day'],
       view: 'day',
       currentMonth: calendarState.currentMonth,
-      onMonthChange: (newMonth, direction) => handleChangeMonth({
-        newMonth,
-        direction
+      onMonthChange: month => setVisibleDate({
+        target: month,
+        reason: 'header-navigation'
       }),
       minDate,
       maxDate,
@@ -315,6 +337,8 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
     },
     ownerState
   });
+
+  // TODO: Move this logic inside the render instead of using an effect
   const prevValue = React.useRef(null);
   React.useEffect(() => {
     const date = rangePosition === 'start' ? value[0] : value[1];
@@ -336,7 +360,10 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
       const newMonth = rangePosition === 'start' ? date :
       // If need to focus end, scroll to the state when "end" is displaying in the last calendar
       utils.addMonths(date, -displayingMonthRange);
-      changeMonth(newMonth);
+      setVisibleDate({
+        target: newMonth,
+        reason: 'controlled-value-change'
+      });
     }
   }, [rangePosition, value]); // eslint-disable-line
 
@@ -419,25 +446,19 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
       length: calendars
     }).map((_, index) => utils.addMonths(firstMonth, index));
   }, [utils, calendarState.currentMonth, calendars, currentMonthCalendarPosition]);
-  const focusedMonth = React.useMemo(() => {
-    if (!autoFocus) {
-      return null;
-    }
-
-    // The focus priority of the "day" view is as follows:
-    // 1. Month of the `start` date
-    // 2. Month of the `end` date
-    // 3. Month of the current date
-    // 4. First visible month
-
-    if (value[0] != null) {
-      return visibleMonths.find(month => utils.isSameMonth(month, value[0]));
+  const hasFocus = focusedView !== null;
+  const prevOpenViewRef = React.useRef(view);
+  React.useEffect(() => {
+    // If the view change and the focus was on the previous view
+    // Then we update the focus.
+    if (prevOpenViewRef.current === view) {
+      return;
     }
-    if (value[1] != null) {
-      return visibleMonths.find(month => utils.isSameMonth(month, value[1]));
+    if (focusedView === prevOpenViewRef.current) {
+      setFocusedView(view, true);
     }
-    return visibleMonths.find(month => utils.isSameMonth(month, now)) ?? visibleMonths[0];
-  }, [utils, value, visibleMonths, autoFocus, now]);
+    prevOpenViewRef.current = view;
+  }, [focusedView, setFocusedView, view]);
   return /*#__PURE__*/_jsxs(DateRangeCalendarRoot, _extends({
     ref: ref,
     className: clsx(classes.root, className),
@@ -459,20 +480,24 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
           className: classes.dayCalendar
         }, calendarState, baseDateValidationProps, commonViewProps, {
           onMonthSwitchingAnimationEnd: onMonthSwitchingAnimationEnd,
-          onFocusedDayChange: changeFocusedDay,
+          onFocusedDayChange: focusedDate => setVisibleDate({
+            target: focusedDate,
+            reason: 'cell-interaction'
+          }),
           reduceAnimations: reduceAnimations,
           selectedDays: value,
           onSelectedDaysChange: handleSelectedDayChange,
           currentMonth: month,
           TransitionProps: CalendarTransitionProps,
           shouldDisableDate: wrappedShouldDisableDate,
+          hasFocus: hasFocus,
+          onFocusedViewChange: isViewFocused => setFocusedView('day', isViewFocused),
           showDaysOutsideCurrentMonth: calendars === 1 && showDaysOutsideCurrentMonth,
           dayOfWeekFormatter: dayOfWeekFormatter,
           loading: loading,
           renderLoading: renderLoading,
           slots: slotsForDayCalendar,
           slotProps: slotPropsForDayCalendar,
-          autoFocus: month === focusedMonth,
           fixedWeekNumber: fixedWeekNumber,
           displayWeekNumber: displayWeekNumber,
           timezone: timezone,

package/MobileDateRangePicker/MobileDateRangePicker.js

@@ -36,6 +36,8 @@ const MobileDateRangePicker = /*#__PURE__*/React.forwardRef(function MobileDateR
     format: utils.formats.keyboardDate,
     // Force one calendar on mobile to avoid layout issues
     calendars: 1,
+    // force current calendar position, since we only have one calendar
+    currentMonthCalendarPosition: 1,
     views: ['day'],
     openTo: 'day',
     slots: _extends({

package/MobileDateTimeRangePicker/MobileDateTimeRangePicker.js

@@ -110,6 +110,8 @@ const MobileDateTimeRangePicker = /*#__PURE__*/React.forwardRef(function MobileD
     calendars: 1,
     // force true to correctly handle `renderTimeViewClock` as a renderer
     ampmInClock: true,
+    // force current calendar position, since we only have one calendar
+    currentMonthCalendarPosition: 1,
     slots: _extends({
       field: MultiInputDateTimeRangeField
     }, defaultizedProps.slots),

package/PickersRangeCalendarHeader/PickersRangeCalendarHeader.js

@@ -57,8 +57,8 @@ const PickersRangeCalendarHeader = /*#__PURE__*/React.forwardRef(function Picker
       ref: ref
     }));
   }
-  const selectNextMonth = () => onMonthChange(utils.addMonths(currentMonth, 1), 'left');
-  const selectPreviousMonth = () => onMonthChange(utils.addMonths(currentMonth, -1), 'right');
+  const selectNextMonth = () => onMonthChange(utils.addMonths(currentMonth, 1));
+  const selectPreviousMonth = () => onMonthChange(utils.addMonths(currentMonth, -1));
   return /*#__PURE__*/_jsx(PickersRangeCalendarHeaderContentMultipleCalendars, _extends({}, otherRangeProps, {
     ref: ref,
     onGoToPrevious: selectPreviousMonth,

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-date-pickers-pro v8.0.0-alpha.10
+ * @mui/x-date-pickers-pro v8.0.0-alpha.11
  *
  * @license MUI X Commercial
  * This source code is licensed under the commercial license found in the

package/internals/utils/createMultiInputRangeField/createMultiInputRangeField.js

@@ -33,7 +33,7 @@ export function createMultiInputRangeField({
     ref: ref,
     spacing: 2,
     direction: "row",
-    alignItems: "center"
+    alignItems: "baseline"
   }, props))), {
     name,
     slot: 'Root',

package/internals/utils/releaseInfo.js

@@ -1,6 +1,6 @@
 import { ponyfillGlobal } from '@mui/utils';
 export const getReleaseInfo = () => {
-  const releaseInfo = "MTczODI5OTYwMDAwMA==";
+  const releaseInfo = "MTczODg4MjgwMDAwMA==";
   if (process.env.NODE_ENV !== 'production') {
     // A simple hack to set the value in the test environment (has no build step).
     // eslint-disable-next-line no-useless-concat

package/modern/DateRangeCalendar/DateRangeCalendar.js

@@ -2,7 +2,7 @@
 
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["value", "defaultValue", "referenceDate", "onChange", "className", "classes", "disableFuture", "disablePast", "minDate", "maxDate", "shouldDisableDate", "reduceAnimations", "onMonthChange", "rangePosition", "defaultRangePosition", "onRangePositionChange", "calendars", "currentMonthCalendarPosition", "slots", "slotProps", "loading", "renderLoading", "disableHighlightToday", "readOnly", "disabled", "showDaysOutsideCurrentMonth", "dayOfWeekFormatter", "disableAutoMonthSwitching", "autoFocus", "fixedWeekNumber", "disableDragEditing", "displayWeekNumber", "timezone", "availableRangePositions", "views", "view", "openTo", "onViewChange"],
+const _excluded = ["value", "defaultValue", "referenceDate", "onChange", "className", "classes", "disableFuture", "disablePast", "minDate", "maxDate", "shouldDisableDate", "reduceAnimations", "onMonthChange", "rangePosition", "defaultRangePosition", "onRangePositionChange", "calendars", "currentMonthCalendarPosition", "slots", "slotProps", "loading", "renderLoading", "disableHighlightToday", "focusedView", "onFocusedViewChange", "readOnly", "disabled", "showDaysOutsideCurrentMonth", "dayOfWeekFormatter", "disableAutoMonthSwitching", "autoFocus", "fixedWeekNumber", "disableDragEditing", "displayWeekNumber", "timezone", "availableRangePositions", "views", "view", "openTo", "onViewChange"],
   _excluded2 = ["isDragging", "rangeDragDay", "draggingDatePosition"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
@@ -15,7 +15,7 @@ import { styled, useThemeProps } from '@mui/material/styles';
 import composeClasses from '@mui/utils/composeClasses';
 import useId from '@mui/utils/useId';
 import { Watermark } from '@mui/x-license';
-import { applyDefaultDate, DayCalendar, useReduceAnimations, useCalendarState, useDefaultDates, useUtils, useNow, DEFAULT_DESKTOP_MODE_MEDIA_QUERY, useControlledValueWithTimezone, useViews, usePickerPrivateContext } from '@mui/x-date-pickers/internals';
+import { applyDefaultDate, DayCalendar, useReduceAnimations, useCalendarState, useDefaultDates, useUtils, DEFAULT_DESKTOP_MODE_MEDIA_QUERY, useControlledValueWithTimezone, useViews, usePickerPrivateContext } from '@mui/x-date-pickers/internals';
 import { warnOnce } from '@mui/x-internals/warning';
 import { getReleaseInfo } from "../internals/utils/releaseInfo.js";
 import { dateRangeCalendarClasses, getDateRangeCalendarUtilityClass } from "./dateRangeCalendarClasses.js";
@@ -145,6 +145,8 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
       loading,
       renderLoading,
       disableHighlightToday,
+      focusedView: focusedViewProp,
+      onFocusedViewChange,
       readOnly,
       disabled,
       showDaysOutsideCurrentMonth,
@@ -177,18 +179,21 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
     valueManager: rangeValueManager
   });
   const {
-    setValueAndGoToNextView,
-    view
+    view,
+    setFocusedView,
+    focusedView,
+    setValueAndGoToNextView
   } = useViews({
     view: inView,
     views,
     openTo,
     onChange: handleValueChange,
     onViewChange,
-    autoFocus
+    autoFocus,
+    focusedView: focusedViewProp,
+    onFocusedViewChange
   });
   const utils = useUtils();
-  const now = useNow(timezone);
   const id = useId();
   const {
     rangePosition,
@@ -273,22 +278,39 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
   }, [shouldDisableDate, rangePosition, draggingDatePosition]);
   const {
     calendarState,
-    changeFocusedDay,
-    changeMonth,
-    handleChangeMonth,
+    setVisibleDate,
     onMonthSwitchingAnimationEnd
   } = useCalendarState({
     value: value[0] || value[1],
     referenceDate,
     disableFuture,
     disablePast,
-    disableSwitchToMonthOnDayFocus: true,
     maxDate,
     minDate,
     onMonthChange,
     reduceAnimations,
     shouldDisableDate: wrappedShouldDisableDate,
-    timezone
+    timezone,
+    getCurrentMonthFromVisibleDate: (visibleDate, prevMonth) => {
+      const firstVisibleMonth = utils.addMonths(prevMonth, 1 - currentMonthCalendarPosition);
+      const lastVisibleMonth = utils.endOfMonth(utils.addMonths(firstVisibleMonth, calendars - 1));
+
+      // The new focused day is inside the visible calendars,
+      // Do not change the current month
+      if (utils.isWithinRange(visibleDate, [firstVisibleMonth, lastVisibleMonth])) {
+        return prevMonth;
+      }
+
+      // The new focused day is after the last visible month,
+      // Move the current month so that the new focused day is inside the first visible month
+      if (utils.isAfter(visibleDate, lastVisibleMonth)) {
+        return utils.startOfMonth(utils.addMonths(visibleDate, currentMonthCalendarPosition - 1));
+      }
+
+      // The new focused day is before the first visible month,
+      // Move the current month so that the new focused day is inside the last visible month
+      return utils.startOfMonth(utils.addMonths(visibleDate, currentMonthCalendarPosition - calendars));
+    }
   });
   const CalendarHeader = slots?.calendarHeader ?? PickersRangeCalendarHeader;
   const calendarHeaderProps = useSlotProps({
@@ -299,9 +321,9 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
       views: ['day'],
       view: 'day',
       currentMonth: calendarState.currentMonth,
-      onMonthChange: (newMonth, direction) => handleChangeMonth({
-        newMonth,
-        direction
+      onMonthChange: month => setVisibleDate({
+        target: month,
+        reason: 'header-navigation'
       }),
       minDate,
       maxDate,
@@ -315,6 +337,8 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
     },
     ownerState
   });
+
+  // TODO: Move this logic inside the render instead of using an effect
   const prevValue = React.useRef(null);
   React.useEffect(() => {
     const date = rangePosition === 'start' ? value[0] : value[1];
@@ -336,7 +360,10 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
       const newMonth = rangePosition === 'start' ? date :
       // If need to focus end, scroll to the state when "end" is displaying in the last calendar
       utils.addMonths(date, -displayingMonthRange);
-      changeMonth(newMonth);
+      setVisibleDate({
+        target: newMonth,
+        reason: 'controlled-value-change'
+      });
     }
   }, [rangePosition, value]); // eslint-disable-line
 
@@ -419,25 +446,19 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
       length: calendars
     }).map((_, index) => utils.addMonths(firstMonth, index));
   }, [utils, calendarState.currentMonth, calendars, currentMonthCalendarPosition]);
-  const focusedMonth = React.useMemo(() => {
-    if (!autoFocus) {
-      return null;
-    }
-
-    // The focus priority of the "day" view is as follows:
-    // 1. Month of the `start` date
-    // 2. Month of the `end` date
-    // 3. Month of the current date
-    // 4. First visible month
-
-    if (value[0] != null) {
-      return visibleMonths.find(month => utils.isSameMonth(month, value[0]));
+  const hasFocus = focusedView !== null;
+  const prevOpenViewRef = React.useRef(view);
+  React.useEffect(() => {
+    // If the view change and the focus was on the previous view
+    // Then we update the focus.
+    if (prevOpenViewRef.current === view) {
+      return;
     }
-    if (value[1] != null) {
-      return visibleMonths.find(month => utils.isSameMonth(month, value[1]));
+    if (focusedView === prevOpenViewRef.current) {
+      setFocusedView(view, true);
     }
-    return visibleMonths.find(month => utils.isSameMonth(month, now)) ?? visibleMonths[0];
-  }, [utils, value, visibleMonths, autoFocus, now]);
+    prevOpenViewRef.current = view;
+  }, [focusedView, setFocusedView, view]);
   return /*#__PURE__*/_jsxs(DateRangeCalendarRoot, _extends({
     ref: ref,
     className: clsx(classes.root, className),
@@ -459,20 +480,24 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
           className: classes.dayCalendar
         }, calendarState, baseDateValidationProps, commonViewProps, {
           onMonthSwitchingAnimationEnd: onMonthSwitchingAnimationEnd,
-          onFocusedDayChange: changeFocusedDay,
+          onFocusedDayChange: focusedDate => setVisibleDate({
+            target: focusedDate,
+            reason: 'cell-interaction'
+          }),
           reduceAnimations: reduceAnimations,
           selectedDays: value,
           onSelectedDaysChange: handleSelectedDayChange,
           currentMonth: month,
           TransitionProps: CalendarTransitionProps,
           shouldDisableDate: wrappedShouldDisableDate,
+          hasFocus: hasFocus,
+          onFocusedViewChange: isViewFocused => setFocusedView('day', isViewFocused),
           showDaysOutsideCurrentMonth: calendars === 1 && showDaysOutsideCurrentMonth,
           dayOfWeekFormatter: dayOfWeekFormatter,
           loading: loading,
           renderLoading: renderLoading,
           slots: slotsForDayCalendar,
           slotProps: slotPropsForDayCalendar,
-          autoFocus: month === focusedMonth,
           fixedWeekNumber: fixedWeekNumber,
           displayWeekNumber: displayWeekNumber,
           timezone: timezone,

package/modern/MobileDateRangePicker/MobileDateRangePicker.js

@@ -36,6 +36,8 @@ const MobileDateRangePicker = /*#__PURE__*/React.forwardRef(function MobileDateR
     format: utils.formats.keyboardDate,
     // Force one calendar on mobile to avoid layout issues
     calendars: 1,
+    // force current calendar position, since we only have one calendar
+    currentMonthCalendarPosition: 1,
     views: ['day'],
     openTo: 'day',
     slots: _extends({

package/modern/MobileDateTimeRangePicker/MobileDateTimeRangePicker.js

@@ -110,6 +110,8 @@ const MobileDateTimeRangePicker = /*#__PURE__*/React.forwardRef(function MobileD
     calendars: 1,
     // force true to correctly handle `renderTimeViewClock` as a renderer
     ampmInClock: true,
+    // force current calendar position, since we only have one calendar
+    currentMonthCalendarPosition: 1,
     slots: _extends({
       field: MultiInputDateTimeRangeField
     }, defaultizedProps.slots),

package/modern/PickersRangeCalendarHeader/PickersRangeCalendarHeader.js

@@ -57,8 +57,8 @@ const PickersRangeCalendarHeader = /*#__PURE__*/React.forwardRef(function Picker
       ref: ref
     }));
   }
-  const selectNextMonth = () => onMonthChange(utils.addMonths(currentMonth, 1), 'left');
-  const selectPreviousMonth = () => onMonthChange(utils.addMonths(currentMonth, -1), 'right');
+  const selectNextMonth = () => onMonthChange(utils.addMonths(currentMonth, 1));
+  const selectPreviousMonth = () => onMonthChange(utils.addMonths(currentMonth, -1));
   return /*#__PURE__*/_jsx(PickersRangeCalendarHeaderContentMultipleCalendars, _extends({}, otherRangeProps, {
     ref: ref,
     onGoToPrevious: selectPreviousMonth,

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-date-pickers-pro v8.0.0-alpha.10
+ * @mui/x-date-pickers-pro v8.0.0-alpha.11
  *
  * @license MUI X Commercial
  * This source code is licensed under the commercial license found in the

package/modern/internals/utils/createMultiInputRangeField/createMultiInputRangeField.js

@@ -33,7 +33,7 @@ export function createMultiInputRangeField({
     ref: ref,
     spacing: 2,
     direction: "row",
-    alignItems: "center"
+    alignItems: "baseline"
   }, props))), {
     name,
     slot: 'Root',

package/modern/internals/utils/releaseInfo.js

@@ -1,6 +1,6 @@
 import { ponyfillGlobal } from '@mui/utils';
 export const getReleaseInfo = () => {
-  const releaseInfo = "MTczODI5OTYwMDAwMA==";
+  const releaseInfo = "MTczODg4MjgwMDAwMA==";
   if (process.env.NODE_ENV !== 'production') {
     // A simple hack to set the value in the test environment (has no build step).
     // eslint-disable-next-line no-useless-concat

package/node/DateRangeCalendar/DateRangeCalendar.js

@@ -34,7 +34,7 @@ var _dimensions = require("../internals/constants/dimensions");
 var _PickersRangeCalendarHeader = require("../PickersRangeCalendarHeader");
 var _useNullablePickerRangePositionContext = require("../internals/hooks/useNullablePickerRangePositionContext");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["value", "defaultValue", "referenceDate", "onChange", "className", "classes", "disableFuture", "disablePast", "minDate", "maxDate", "shouldDisableDate", "reduceAnimations", "onMonthChange", "rangePosition", "defaultRangePosition", "onRangePositionChange", "calendars", "currentMonthCalendarPosition", "slots", "slotProps", "loading", "renderLoading", "disableHighlightToday", "readOnly", "disabled", "showDaysOutsideCurrentMonth", "dayOfWeekFormatter", "disableAutoMonthSwitching", "autoFocus", "fixedWeekNumber", "disableDragEditing", "displayWeekNumber", "timezone", "availableRangePositions", "views", "view", "openTo", "onViewChange"],
+const _excluded = ["value", "defaultValue", "referenceDate", "onChange", "className", "classes", "disableFuture", "disablePast", "minDate", "maxDate", "shouldDisableDate", "reduceAnimations", "onMonthChange", "rangePosition", "defaultRangePosition", "onRangePositionChange", "calendars", "currentMonthCalendarPosition", "slots", "slotProps", "loading", "renderLoading", "disableHighlightToday", "focusedView", "onFocusedViewChange", "readOnly", "disabled", "showDaysOutsideCurrentMonth", "dayOfWeekFormatter", "disableAutoMonthSwitching", "autoFocus", "fixedWeekNumber", "disableDragEditing", "displayWeekNumber", "timezone", "availableRangePositions", "views", "view", "openTo", "onViewChange"],
   _excluded2 = ["isDragging", "rangeDragDay", "draggingDatePosition"];
 const releaseInfo = (0, _releaseInfo.getReleaseInfo)();
 const DateRangeCalendarRoot = (0, _styles.styled)('div', {
@@ -152,6 +152,8 @@ const DateRangeCalendar = exports.DateRangeCalendar = /*#__PURE__*/React.forward
       loading,
       renderLoading,
       disableHighlightToday,
+      focusedView: focusedViewProp,
+      onFocusedViewChange,
       readOnly,
       disabled,
       showDaysOutsideCurrentMonth,
@@ -184,18 +186,21 @@ const DateRangeCalendar = exports.DateRangeCalendar = /*#__PURE__*/React.forward
     valueManager: _valueManagers.rangeValueManager
   });
   const {
-    setValueAndGoToNextView,
-    view
+    view,
+    setFocusedView,
+    focusedView,
+    setValueAndGoToNextView
   } = (0, _internals.useViews)({
     view: inView,
     views,
     openTo,
     onChange: handleValueChange,
     onViewChange,
-    autoFocus
+    autoFocus,
+    focusedView: focusedViewProp,
+    onFocusedViewChange
   });
   const utils = (0, _internals.useUtils)();
-  const now = (0, _internals.useNow)(timezone);
   const id = (0, _useId.default)();
   const {
     rangePosition,
@@ -280,22 +285,39 @@ const DateRangeCalendar = exports.DateRangeCalendar = /*#__PURE__*/React.forward
   }, [shouldDisableDate, rangePosition, draggingDatePosition]);
   const {
     calendarState,
-    changeFocusedDay,
-    changeMonth,
-    handleChangeMonth,
+    setVisibleDate,
     onMonthSwitchingAnimationEnd
   } = (0, _internals.useCalendarState)({
     value: value[0] || value[1],
     referenceDate,
     disableFuture,
     disablePast,
-    disableSwitchToMonthOnDayFocus: true,
     maxDate,
     minDate,
     onMonthChange,
     reduceAnimations,
     shouldDisableDate: wrappedShouldDisableDate,
-    timezone
+    timezone,
+    getCurrentMonthFromVisibleDate: (visibleDate, prevMonth) => {
+      const firstVisibleMonth = utils.addMonths(prevMonth, 1 - currentMonthCalendarPosition);
+      const lastVisibleMonth = utils.endOfMonth(utils.addMonths(firstVisibleMonth, calendars - 1));
+
+      // The new focused day is inside the visible calendars,
+      // Do not change the current month
+      if (utils.isWithinRange(visibleDate, [firstVisibleMonth, lastVisibleMonth])) {
+        return prevMonth;
+      }
+
+      // The new focused day is after the last visible month,
+      // Move the current month so that the new focused day is inside the first visible month
+      if (utils.isAfter(visibleDate, lastVisibleMonth)) {
+        return utils.startOfMonth(utils.addMonths(visibleDate, currentMonthCalendarPosition - 1));
+      }
+
+      // The new focused day is before the first visible month,
+      // Move the current month so that the new focused day is inside the last visible month
+      return utils.startOfMonth(utils.addMonths(visibleDate, currentMonthCalendarPosition - calendars));
+    }
   });
   const CalendarHeader = slots?.calendarHeader ?? _PickersRangeCalendarHeader.PickersRangeCalendarHeader;
   const calendarHeaderProps = (0, _useSlotProps.default)({
@@ -306,9 +328,9 @@ const DateRangeCalendar = exports.DateRangeCalendar = /*#__PURE__*/React.forward
       views: ['day'],
       view: 'day',
       currentMonth: calendarState.currentMonth,
-      onMonthChange: (newMonth, direction) => handleChangeMonth({
-        newMonth,
-        direction
+      onMonthChange: month => setVisibleDate({
+        target: month,
+        reason: 'header-navigation'
       }),
       minDate,
       maxDate,
@@ -322,6 +344,8 @@ const DateRangeCalendar = exports.DateRangeCalendar = /*#__PURE__*/React.forward
     },
     ownerState
   });
+
+  // TODO: Move this logic inside the render instead of using an effect
   const prevValue = React.useRef(null);
   React.useEffect(() => {
     const date = rangePosition === 'start' ? value[0] : value[1];
@@ -343,7 +367,10 @@ const DateRangeCalendar = exports.DateRangeCalendar = /*#__PURE__*/React.forward
       const newMonth = rangePosition === 'start' ? date :
       // If need to focus end, scroll to the state when "end" is displaying in the last calendar
       utils.addMonths(date, -displayingMonthRange);
-      changeMonth(newMonth);
+      setVisibleDate({
+        target: newMonth,
+        reason: 'controlled-value-change'
+      });
     }
   }, [rangePosition, value]); // eslint-disable-line
 
@@ -426,25 +453,19 @@ const DateRangeCalendar = exports.DateRangeCalendar = /*#__PURE__*/React.forward
       length: calendars
     }).map((_, index) => utils.addMonths(firstMonth, index));
   }, [utils, calendarState.currentMonth, calendars, currentMonthCalendarPosition]);
-  const focusedMonth = React.useMemo(() => {
-    if (!autoFocus) {
-      return null;
-    }
-
-    // The focus priority of the "day" view is as follows:
-    // 1. Month of the `start` date
-    // 2. Month of the `end` date
-    // 3. Month of the current date
-    // 4. First visible month
-
-    if (value[0] != null) {
-      return visibleMonths.find(month => utils.isSameMonth(month, value[0]));
+  const hasFocus = focusedView !== null;
+  const prevOpenViewRef = React.useRef(view);
+  React.useEffect(() => {
+    // If the view change and the focus was on the previous view
+    // Then we update the focus.
+    if (prevOpenViewRef.current === view) {
+      return;
     }
-    if (value[1] != null) {
-      return visibleMonths.find(month => utils.isSameMonth(month, value[1]));
+    if (focusedView === prevOpenViewRef.current) {
+      setFocusedView(view, true);
     }
-    return visibleMonths.find(month => utils.isSameMonth(month, now)) ?? visibleMonths[0];
-  }, [utils, value, visibleMonths, autoFocus, now]);
+    prevOpenViewRef.current = view;
+  }, [focusedView, setFocusedView, view]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(DateRangeCalendarRoot, (0, _extends2.default)({
     ref: ref,
     className: (0, _clsx.default)(classes.root, className),
@@ -466,20 +487,24 @@ const DateRangeCalendar = exports.DateRangeCalendar = /*#__PURE__*/React.forward
           className: classes.dayCalendar
         }, calendarState, baseDateValidationProps, commonViewProps, {
           onMonthSwitchingAnimationEnd: onMonthSwitchingAnimationEnd,
-          onFocusedDayChange: changeFocusedDay,
+          onFocusedDayChange: focusedDate => setVisibleDate({
+            target: focusedDate,
+            reason: 'cell-interaction'
+          }),
           reduceAnimations: reduceAnimations,
           selectedDays: value,
           onSelectedDaysChange: handleSelectedDayChange,
           currentMonth: month,
           TransitionProps: CalendarTransitionProps,
           shouldDisableDate: wrappedShouldDisableDate,
+          hasFocus: hasFocus,
+          onFocusedViewChange: isViewFocused => setFocusedView('day', isViewFocused),
           showDaysOutsideCurrentMonth: calendars === 1 && showDaysOutsideCurrentMonth,
           dayOfWeekFormatter: dayOfWeekFormatter,
           loading: loading,
           renderLoading: renderLoading,
           slots: slotsForDayCalendar,
           slotProps: slotPropsForDayCalendar,
-          autoFocus: month === focusedMonth,
           fixedWeekNumber: fixedWeekNumber,
           displayWeekNumber: displayWeekNumber,
           timezone: timezone,

package/node/MobileDateRangePicker/MobileDateRangePicker.js

@@ -43,6 +43,8 @@ const MobileDateRangePicker = exports.MobileDateRangePicker = /*#__PURE__*/React
     format: utils.formats.keyboardDate,
     // Force one calendar on mobile to avoid layout issues
     calendars: 1,
+    // force current calendar position, since we only have one calendar
+    currentMonthCalendarPosition: 1,
     views: ['day'],
     openTo: 'day',
     slots: (0, _extends2.default)({

package/node/MobileDateTimeRangePicker/MobileDateTimeRangePicker.js

@@ -117,6 +117,8 @@ const MobileDateTimeRangePicker = exports.MobileDateTimeRangePicker = /*#__PURE_
     calendars: 1,
     // force true to correctly handle `renderTimeViewClock` as a renderer
     ampmInClock: true,
+    // force current calendar position, since we only have one calendar
+    currentMonthCalendarPosition: 1,
     slots: (0, _extends2.default)({
       field: _MultiInputDateTimeRangeField.MultiInputDateTimeRangeField
     }, defaultizedProps.slots),

package/node/PickersRangeCalendarHeader/PickersRangeCalendarHeader.js

@@ -64,8 +64,8 @@ const PickersRangeCalendarHeader = exports.PickersRangeCalendarHeader = /*#__PUR
       ref: ref
     }));
   }
-  const selectNextMonth = () => onMonthChange(utils.addMonths(currentMonth, 1), 'left');
-  const selectPreviousMonth = () => onMonthChange(utils.addMonths(currentMonth, -1), 'right');
+  const selectNextMonth = () => onMonthChange(utils.addMonths(currentMonth, 1));
+  const selectPreviousMonth = () => onMonthChange(utils.addMonths(currentMonth, -1));
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(PickersRangeCalendarHeaderContentMultipleCalendars, (0, _extends2.default)({}, otherRangeProps, {
     ref: ref,
     onGoToPrevious: selectPreviousMonth,

package/node/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-date-pickers-pro v8.0.0-alpha.10
+ * @mui/x-date-pickers-pro v8.0.0-alpha.11
  *
  * @license MUI X Commercial
  * This source code is licensed under the commercial license found in the

package/node/internals/utils/createMultiInputRangeField/createMultiInputRangeField.js

@@ -40,7 +40,7 @@ function createMultiInputRangeField({
     ref: ref,
     spacing: 2,
     direction: "row",
-    alignItems: "center"
+    alignItems: "baseline"
   }, props))), {
     name,
     slot: 'Root',

package/node/internals/utils/releaseInfo.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.getReleaseInfo = void 0;
 var _utils = require("@mui/utils");
 const getReleaseInfo = () => {
-  const releaseInfo = "MTczODI5OTYwMDAwMA==";
+  const releaseInfo = "MTczODg4MjgwMDAwMA==";
   if (process.env.NODE_ENV !== 'production') {
     // A simple hack to set the value in the test environment (has no build step).
     // eslint-disable-next-line no-useless-concat

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-date-pickers-pro",
-  "version": "8.0.0-alpha.10",
+  "version": "8.0.0-alpha.11",
   "description": "The Pro plan edition of the Date and Time Picker components (MUI X).",
   "author": "MUI Team",
   "main": "./node/index.js",
@@ -37,9 +37,9 @@
     "clsx": "^2.1.1",
     "prop-types": "^15.8.1",
     "react-transition-group": "^4.4.5",
-    "@mui/x-internals": "8.0.0-alpha.10",
-    "@mui/x-license": "8.0.0-alpha.10",
-    "@mui/x-date-pickers": "8.0.0-alpha.10"
+    "@mui/x-date-pickers": "8.0.0-alpha.11",
+    "@mui/x-internals": "8.0.0-alpha.11",
+    "@mui/x-license": "8.0.0-alpha.11"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",