@mui/x-date-pickers 7.6.1 → 7.7.0

package/AdapterDayjs/AdapterDayjs.js

@@ -256,7 +256,11 @@ export class AdapterDayjs {
         if ((fixedValue.$offset ?? 0) === (value.$offset ?? 0)) {
           return value;
         }
-        return fixedValue;
+        // Change only what is needed to avoid creating a new object with unwanted data
+        // Especially important when used in an environment where utc or timezone dates are used only in some places
+        // Reference: https://github.com/mui/mui-x/issues/13290
+        // @ts-ignore
+        value.$offset = fixedValue.$offset;
       }
       return value;
     };

package/CHANGELOG.md

@@ -3,6 +3,153 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 7.7.0
+
+_Jun 13, 2024_
+
+We'd like to offer a big thanks to the 12 contributors who made this release possible. Here are some highlights ✨:
+
+- 🎁 Allow customization of the Pickers month and the year buttons
+- 🌍 Improve Persian (fa-IR), Portuguese (pt-PT), and Russian (ru-RU) locales on the Data Grid
+- 🌍 Improve Korean (ko-KR) and Persian (fa-IR) locales on the Date and Time Pickers
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### `@mui/x-data-grid@7.7.0`
+
+- [DataGrid] Add `getFilterState` method (#13418) @cherniavskii
+- [DataGrid] Do not show resize separators for column groups (#13455) @cherniavskii
+- [l10n] Improve Persian (fa-IR) locale (#13402) @fakhamatia
+- [l10n] Improve Portuguese (pt-PT) locale (#13384) @olavocarvalho
+- [l10n] Improve Russian (ru-RU) locale (#11210) @dastan-akhmetov-scity
+
+#### `@mui/x-data-grid-pro@7.7.0` [![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@7.7.0`, plus:
+
+- [DataGridPro] Do not render detail panel if the focused cell is not visible (#13456) @cherniavskii
+
+#### `@mui/x-data-grid-premium@7.7.0` [![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@7.7.0`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@7.7.0`
+
+- [l10n] Improve Korean (ko-KR) locale (#13452) @ryxxn
+- [l10n] Improve Persian (fa-IR) locale (#13402) @fakhamatia
+- [pickers] Allow to customize the month and the year buttons (#13321) @flaviendelangle
+
+#### `@mui/x-date-pickers-pro@7.7.0` [![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@7.7.0`.
+
+### Charts
+
+#### `@mui/x-charts@7.7.0`
+
+- [charts] Add watermark on the pro `ResponsiveChartContainer` (#13398) @alexfauquette
+- [charts] Allow to specify y-axis configuration (#13438) @alexfauquette
+- [charts] Fix eslint for react compiler (#13444) @alexfauquette
+- [charts] Improve themeAugmentation typing (#13433) @noraleonte
+- [charts] Move the `ZAxisContextProvider` by default in the `ChartContainer` (#13465) @alexfauquette
+- [charts] Use plugins to define series extremum and colors (#13397) @alexfauquette
+
+### Tree View
+
+#### `@mui/x-tree-view@7.7.0`
+
+- [TreeView] Improve TypeScript for plugins (#13380) @flaviendelangle
+- [TreeView] Improve the typing of the cancelable events (#13152) @flaviendelangle
+- [TreeView] Prepare support for PigmentCSS (#13412) @flaviendelangle
+- [TreeView] Refactor the tree view internals to prepare for headless API (#13311) @flaviendelangle
+
+### Docs
+
+- [docs] Add `renderHeader` recipe to the Master Details docs (#13370) @michelengelen
+- [docs] Add lazy loading detail panel demo (#13453) @cherniavskii
+- [docs] Add small edits to the Data Grid overview page (#13060) @danilo-leal
+- [docs] Update a11y pages description (#13417) @danilo-leal
+- [docs] improve the writing on the "Quick filter outside of the grid" example (#13155) @michelengelen
+
+### Core
+
+- [core] Add `eslint-plugin-react-compiler` experimental version and rules (#13415) @JCQuintas
+- [core] Minor setup cleanup (#13467) @LukasTy
+- [infra] Adjust CI setup (#13448) @LukasTy
+- [test] Add tests for the custom slots of `TreeItem2` (#13314) @flaviendelangle
+
+## 7.6.2
+
+_Jun 6, 2024_
+
+We'd like to offer a big thanks to the 9 contributors who made this release possible. Here are some highlights ✨:
+
+- 📚 Adds Date and Time Pickers accessibility page
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### `@mui/x-data-grid@7.6.2`
+
+- [DataGrid] Add the `areElementSizesEqual` utility to improve code readability (#13254) @layerok
+- [DataGrid] Clean up IE remnants from the codebase (#13390) @MBilalShafi
+
+#### `@mui/x-data-grid-pro@7.6.2` [![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@7.6.2`.
+
+#### `@mui/x-data-grid-premium@7.6.2` [![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@7.6.2`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@7.6.2`
+
+- [fields] Fix `PageUp` and `PageDown` editing on letter sections (#13310) @arthurbalduini
+- [pickers] Fix `AdapterDayjs` timezone behavior (#13362) @LukasTy
+- [pickers] Use `useRtl` instead of `useTheme` to access direction (#13363) @flaviendelangle
+
+#### `@mui/x-date-pickers-pro@7.6.2` [![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@7.6.2`.
+
+### Charts
+
+#### `@mui/x-charts@7.6.2`
+
+- [charts] Add `Initializable` type and behaviour to allow checking if a complex context has been initialized. (#13365) @JCQuintas
+- [charts] Fix some props not working in `xAxis` and `yAxis` (#13372) @Valyok26
+- [charts] Harmonize charts types (#13366) @alexfauquette
+- [charts] Introduce plugins system (#13367) @alexfauquette
+- [charts] Simplify plugin types (#13396) @JCQuintas
+
+### Docs
+
+- [docs] Add badges like in Material UI @oliviertassinari
+- [docs] Update twitter.com to x.com @oliviertassinari
+- [docs] Fix the description of `tickInterval` (#13355) @alexfauquette
+- [docs] Adjust the code example for `quickFilterValues` (#12919) @michelengelen
+- [docs] Create Pickers accessibility page (#13274) @arthurbalduini
+
+### Core
+
+- [core] Comment on `CSS.escape` for the future @oliviertassinari
+- [core] Fix `l10n` action setup (#13382) @LukasTy
+- [core] Fixes in preparation for React 18.3 (#13378) @LukasTy
+- [core] Remove explicit `marked` dependency (#13383) @LukasTy
+- [core] Remove unused `@types/prettier` dependency (#13389) @LukasTy
+- [core] Add `docs/.env.local` to `.gitignore` (#13377) @KenanYusuf
+
 ## 7.6.1
 
 _May 31, 2024_

package/DateCalendar/DateCalendar.js

@@ -272,7 +272,9 @@ export const DateCalendar = /*#__PURE__*/React.forwardRef(function DateCalendar(
     readOnly,
     disabled,
     timezone,
-    gridLabelId
+    gridLabelId,
+    slots,
+    slotProps
   };
   const prevOpenViewRef = React.useRef(view);
   React.useEffect(() => {
@@ -333,8 +335,6 @@ export const DateCalendar = /*#__PURE__*/React.forwardRef(function DateCalendar(
           fixedWeekNumber: fixedWeekNumber,
           dayOfWeekFormatter: dayOfWeekFormatter,
           displayWeekNumber: displayWeekNumber,
-          slots: slots,
-          slotProps: slotProps,
           loading: loading,
           renderLoading: renderLoading
         }))]

package/DateCalendar/DateCalendar.types.d.ts

@@ -9,9 +9,9 @@ import { BaseDateValidationProps, YearValidationProps, MonthValidationProps, Day
 import { ExportedUseViewsOptions } from '../internals/hooks/useViews';
 import { DateView, PickerValidDate, TimezoneProps } from '../models';
 import { DefaultizedProps } from '../internals/models/helpers';
-import { ExportedYearCalendarProps } from '../YearCalendar/YearCalendar.types';
-import { ExportedMonthCalendarProps } from '../MonthCalendar/MonthCalendar.types';
-export interface DateCalendarSlots<TDate extends PickerValidDate> extends PickersCalendarHeaderSlots, DayCalendarSlots<TDate> {
+import { ExportedYearCalendarProps, YearCalendarSlots, YearCalendarSlotProps } from '../YearCalendar/YearCalendar.types';
+import { ExportedMonthCalendarProps, MonthCalendarSlots, MonthCalendarSlotProps } from '../MonthCalendar/MonthCalendar.types';
+export interface DateCalendarSlots<TDate extends PickerValidDate> extends PickersCalendarHeaderSlots, DayCalendarSlots<TDate>, MonthCalendarSlots, YearCalendarSlots {
     /**
      * Custom component for calendar header.
      * Check the [PickersCalendarHeader](https://mui.com/x/api/date-pickers/pickers-calendar-header/) component.
@@ -19,7 +19,7 @@ export interface DateCalendarSlots<TDate extends PickerValidDate> extends Picker
      */
     calendarHeader?: React.ElementType<PickersCalendarHeaderProps<TDate>>;
 }
-export interface DateCalendarSlotProps<TDate extends PickerValidDate> extends PickersCalendarHeaderSlotProps<TDate>, DayCalendarSlotProps<TDate> {
+export interface DateCalendarSlotProps<TDate extends PickerValidDate> extends PickersCalendarHeaderSlotProps<TDate>, DayCalendarSlotProps<TDate>, MonthCalendarSlotProps, YearCalendarSlotProps {
     calendarHeader?: SlotComponentProps<typeof PickersCalendarHeader, {}, DateCalendarProps<TDate>>;
 }
 export interface ExportedDateCalendarProps<TDate extends PickerValidDate> extends ExportedDayCalendarProps<TDate>, ExportedMonthCalendarProps, ExportedYearCalendarProps, BaseDateValidationProps<TDate>, DayValidationProps<TDate>, YearValidationProps<TDate>, MonthValidationProps<TDate>, TimezoneProps {

package/DateCalendar/DayCalendar.d.ts

@@ -1,12 +1,11 @@
 import * as React from 'react';
-import { SlotComponentProps } from '@mui/base/utils';
-import { PickersDay, PickersDayProps, ExportedPickersDayProps } from '../PickersDay/PickersDay';
+import { PickersDayProps, ExportedPickersDayProps } from '../PickersDay/PickersDay';
 import { PickerOnChangeFn } from '../internals/hooks/useViews';
 import { SlideDirection, SlideTransitionProps } from './PickersSlideTransition';
 import { BaseDateValidationProps, DayValidationProps, MonthValidationProps, YearValidationProps } from '../internals/models/validation';
 import { DayCalendarClasses } from './dayCalendarClasses';
 import { PickerValidDate, TimezoneProps } from '../models';
-import { DefaultizedProps } from '../internals/models/helpers';
+import { DefaultizedProps, SlotComponentPropsFromProps } from '../internals/models/helpers';
 export interface DayCalendarSlots<TDate extends PickerValidDate> {
     /**
      * Custom component for day.
@@ -16,7 +15,7 @@ export interface DayCalendarSlots<TDate extends PickerValidDate> {
     day?: React.ElementType<PickersDayProps<TDate>>;
 }
 export interface DayCalendarSlotProps<TDate extends PickerValidDate> {
-    day?: SlotComponentProps<typeof PickersDay, {}, DayCalendarProps<TDate> & {
+    day?: SlotComponentPropsFromProps<PickersDayProps<TDate>, {}, DayCalendarProps<TDate> & {
         day: TDate;
         selected: boolean;
     }>;

package/DateCalendar/DayCalendar.js

@@ -6,7 +6,8 @@ import * as React from 'react';
 import useEventCallback from '@mui/utils/useEventCallback';
 import Typography from '@mui/material/Typography';
 import { useSlotProps } from '@mui/base/utils';
-import { styled, useTheme, useThemeProps } from '@mui/material/styles';
+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 clsx from 'clsx';
 import { PickersDay } from '../PickersDay/PickersDay';
@@ -249,8 +250,7 @@ export function DayCalendar(inProps) {
   } = props;
   const now = useNow(timezone);
   const classes = useUtilityClasses(props);
-  const theme = useTheme();
-  const isRTL = theme.direction === 'rtl';
+  const isRtl = useRtl();
   const isDateDisabled = useIsDateDisabled({
     shouldDisableDate,
     shouldDisableMonth,
@@ -295,13 +295,13 @@ export function DayCalendar(inProps) {
         break;
       case 'ArrowLeft':
         {
-          const newFocusedDayDefault = utils.addDays(day, isRTL ? 1 : -1);
-          const nextAvailableMonth = utils.addMonths(day, isRTL ? 1 : -1);
+          const newFocusedDayDefault = utils.addDays(day, isRtl ? 1 : -1);
+          const nextAvailableMonth = utils.addMonths(day, isRtl ? 1 : -1);
           const closestDayToFocus = findClosestEnabledDate({
             utils,
             date: newFocusedDayDefault,
-            minDate: isRTL ? newFocusedDayDefault : utils.startOfMonth(nextAvailableMonth),
-            maxDate: isRTL ? utils.endOfMonth(nextAvailableMonth) : newFocusedDayDefault,
+            minDate: isRtl ? newFocusedDayDefault : utils.startOfMonth(nextAvailableMonth),
+            maxDate: isRtl ? utils.endOfMonth(nextAvailableMonth) : newFocusedDayDefault,
             isDateDisabled,
             timezone
           });
@@ -311,13 +311,13 @@ export function DayCalendar(inProps) {
         }
       case 'ArrowRight':
         {
-          const newFocusedDayDefault = utils.addDays(day, isRTL ? -1 : 1);
-          const nextAvailableMonth = utils.addMonths(day, isRTL ? -1 : 1);
+          const newFocusedDayDefault = utils.addDays(day, isRtl ? -1 : 1);
+          const nextAvailableMonth = utils.addMonths(day, isRtl ? -1 : 1);
           const closestDayToFocus = findClosestEnabledDate({
             utils,
             date: newFocusedDayDefault,
-            minDate: isRTL ? utils.startOfMonth(nextAvailableMonth) : newFocusedDayDefault,
-            maxDate: isRTL ? newFocusedDayDefault : utils.endOfMonth(nextAvailableMonth),
+            minDate: isRtl ? utils.startOfMonth(nextAvailableMonth) : newFocusedDayDefault,
+            maxDate: isRtl ? newFocusedDayDefault : utils.endOfMonth(nextAvailableMonth),
             isDateDisabled,
             timezone
           });

package/DateTimePicker/DateTimePickerToolbar.js

@@ -1,9 +1,10 @@
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["ampm", "ampmInClock", "value", "onChange", "view", "isLandscape", "onViewChange", "toolbarFormat", "toolbarPlaceholder", "views", "disabled", "readOnly", "toolbarVariant", "toolbarTitle", "className"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { styled, useThemeProps, useTheme } from '@mui/material/styles';
+import { useRtl } from '@mui/system/RtlProvider';
+import { styled, useThemeProps } from '@mui/material/styles';
 import composeClasses from '@mui/utils/composeClasses';
 import clsx from 'clsx';
 import { PickersToolbarText } from '../internals/components/PickersToolbarText';
@@ -20,14 +21,14 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
     classes,
-    theme,
-    isLandscape
+    isLandscape,
+    isRtl
   } = ownerState;
   const slots = {
     root: ['root'],
     dateContainer: ['dateContainer'],
-    timeContainer: ['timeContainer', theme.direction === 'rtl' && 'timeLabelReverse'],
-    timeDigitsContainer: ['timeDigitsContainer', theme.direction === 'rtl' && 'timeLabelReverse'],
+    timeContainer: ['timeContainer', isRtl && 'timeLabelReverse'],
+    timeDigitsContainer: ['timeDigitsContainer', isRtl && 'timeLabelReverse'],
     separator: ['separator'],
     ampmSelection: ['ampmSelection', isLandscape && 'ampmLandscape'],
     ampmLabel: ['ampmLabel']
@@ -88,50 +89,59 @@ const DateTimePickerToolbarTimeContainer = styled('div', {
   name: 'MuiDateTimePickerToolbar',
   slot: 'TimeContainer',
   overridesResolver: (props, styles) => styles.timeContainer
-})(({
-  theme
-}) => {
-  return _extends({
-    display: 'flex',
-    flexDirection: 'row'
-  }, theme.direction === 'rtl' && {
-    flexDirection: 'row-reverse'
+})({
+  display: 'flex',
+  flexDirection: 'row',
+  variants: [{
+    props: {
+      isRtl: true
+    },
+    style: {
+      flexDirection: 'row-reverse'
+    }
   }, {
-    variants: [{
-      props: ({
-        isLandscape,
-        toolbarVariant
-      }) => isLandscape && toolbarVariant !== 'desktop',
-      style: _extends({
-        flexDirection: 'column'
-      }, theme.direction === 'rtl' && {
-        flexDirection: 'column-reverse'
-      })
-    }, {
-      props: {
-        toolbarVariant: 'desktop',
-        isLandscape: false
-      },
-      style: {
-        gap: 9,
-        marginRight: 4,
-        alignSelf: 'flex-end'
-      }
-    }]
-  });
+    props: {
+      toolbarVariant: 'desktop',
+      isLandscape: false
+    },
+    style: {
+      gap: 9,
+      marginRight: 4,
+      alignSelf: 'flex-end'
+    }
+  }, {
+    props: ({
+      isLandscape,
+      toolbarVariant
+    }) => isLandscape && toolbarVariant !== 'desktop',
+    style: {
+      flexDirection: 'column'
+    }
+  }, {
+    props: ({
+      isLandscape,
+      toolbarVariant,
+      isRtl
+    }) => isLandscape && toolbarVariant !== 'desktop' && isRtl,
+    style: {
+      flexDirection: 'column-reverse'
+    }
+  }]
 });
 const DateTimePickerToolbarTimeDigitsContainer = styled('div', {
   name: 'MuiDateTimePickerToolbar',
   slot: 'TimeDigitsContainer',
   overridesResolver: (props, styles) => styles.timeDigitsContainer
-})(({
-  theme
-}) => _extends({
-  display: 'flex'
-}, theme.direction === 'rtl' && {
-  flexDirection: 'row-reverse'
-}, {
+})({
+  display: 'flex',
   variants: [{
+    props: {
+      isRtl: true
+    },
+    style: {
+      flexDirection: 'row-reverse'
+    }
+  }, {
     props: {
       toolbarVariant: 'desktop'
     },
@@ -139,7 +149,7 @@ const DateTimePickerToolbarTimeDigitsContainer = styled('div', {
       gap: 1.5
     }
   }]
-}));
+});
 const DateTimePickerToolbarSeparator = styled(PickersToolbarText, {
   name: 'MuiDateTimePickerToolbar',
   slot: 'Separator',
@@ -220,7 +230,10 @@ function DateTimePickerToolbar(inProps) {
       className
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  const ownerState = props;
+  const isRtl = useRtl();
+  const ownerState = _extends({}, props, {
+    isRtl
+  });
   const utils = useUtils();
   const {
     meridiemMode,
@@ -229,10 +242,7 @@ function DateTimePickerToolbar(inProps) {
   const showAmPmControl = Boolean(ampm && !ampmInClock);
   const isDesktop = toolbarVariant === 'desktop';
   const localeText = useLocaleText();
-  const theme = useTheme();
-  const classes = useUtilityClasses(_extends({}, ownerState, {
-    theme
-  }));
+  const classes = useUtilityClasses(ownerState);
   const toolbarTitle = inToolbarTitle ?? localeText.dateTimePickerToolbarTitle;
   const formatHours = time => ampm ? utils.format(time, 'hours12h') : utils.format(time, 'hours24h');
   const dateText = React.useMemo(() => {

package/DesktopDateTimePicker/DesktopDateTimePickerLayout.js

@@ -1,6 +1,8 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
+import { useRtl } from '@mui/system/RtlProvider';
 import Divider from '@mui/material/Divider';
 import { PickersLayoutContentWrapper, PickersLayoutRoot, pickersLayoutClasses, usePickerLayout } from '../PickersLayout';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -8,6 +10,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * @ignore - internal component.
  */
 function DesktopDateTimePickerLayout(props) {
+  const isRtl = useRtl();
   const {
     toolbar,
     tabs,
@@ -23,6 +26,9 @@ function DesktopDateTimePickerLayout(props) {
     classes
   } = props;
   const isActionBarVisible = actionBar && (actionBar.props.actions?.length ?? 0) > 0;
+  const ownerState = _extends({}, props, {
+    isRtl
+  });
   return /*#__PURE__*/_jsxs(PickersLayoutRoot, {
     ref: ref,
     className: clsx(className, pickersLayoutClasses.root, classes?.root),
@@ -35,7 +41,7 @@ function DesktopDateTimePickerLayout(props) {
         gridRow: 5
       }
     }, ...(Array.isArray(sx) ? sx : [sx])],
-    ownerState: props,
+    ownerState: ownerState,
     children: [isLandscape ? shortcuts : toolbar, isLandscape ? toolbar : shortcuts, /*#__PURE__*/_jsxs(PickersLayoutContentWrapper, {
       className: clsx(pickersLayoutClasses.contentWrapper, classes?.contentWrapper),
       sx: {
@@ -63,6 +69,10 @@ process.env.NODE_ENV !== "production" ? DesktopDateTimePickerLayout.propTypes =
   className: PropTypes.string,
   disabled: PropTypes.bool,
   isLandscape: PropTypes.bool.isRequired,
+  /**
+   * `true` if the application is in right-to-left direction.
+   */
+  isRtl: PropTypes.bool.isRequired,
   isValid: PropTypes.func.isRequired,
   onAccept: PropTypes.func.isRequired,
   onCancel: PropTypes.func.isRequired,

package/MonthCalendar/MonthCalendar.js

@@ -1,10 +1,10 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["className", "value", "defaultValue", "referenceDate", "disabled", "disableFuture", "disablePast", "maxDate", "minDate", "onChange", "shouldDisableMonth", "readOnly", "disableHighlightToday", "autoFocus", "onMonthFocus", "hasFocus", "onFocusedViewChange", "monthsPerRow", "timezone", "gridLabelId"];
+const _excluded = ["className", "value", "defaultValue", "referenceDate", "disabled", "disableFuture", "disablePast", "maxDate", "minDate", "onChange", "shouldDisableMonth", "readOnly", "disableHighlightToday", "autoFocus", "onMonthFocus", "hasFocus", "onFocusedViewChange", "monthsPerRow", "timezone", "gridLabelId", "slots", "slotProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { useTheme } from '@mui/system';
+import { useRtl } from '@mui/system/RtlProvider';
 import { styled, useThemeProps } from '@mui/material/styles';
 import { unstable_useControlled as useControlled, unstable_composeClasses as composeClasses, unstable_useEventCallback as useEventCallback } from '@mui/utils';
 import { PickersMonth } from './PickersMonth';
@@ -83,7 +83,9 @@ export const MonthCalendar = /*#__PURE__*/React.forwardRef(function MonthCalenda
       onFocusedViewChange,
       monthsPerRow = 3,
       timezone: timezoneProp,
-      gridLabelId
+      gridLabelId,
+      slots,
+      slotProps
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const {
@@ -99,7 +101,7 @@ export const MonthCalendar = /*#__PURE__*/React.forwardRef(function MonthCalenda
     valueManager: singleItemValueManager
   });
   const now = useNow(timezone);
-  const theme = useTheme();
+  const isRtl = useRtl();
   const utils = useUtils();
   const referenceDate = React.useMemo(() => singleItemValueManager.getInitialReferenceValue({
     value,
@@ -179,11 +181,11 @@ export const MonthCalendar = /*#__PURE__*/React.forwardRef(function MonthCalenda
         event.preventDefault();
         break;
       case 'ArrowLeft':
-        focusMonth((monthsInYear + month + (theme.direction === 'ltr' ? -1 : 1)) % monthsInYear);
+        focusMonth((monthsInYear + month + (isRtl ? 1 : -1)) % monthsInYear);
         event.preventDefault();
         break;
       case 'ArrowRight':
-        focusMonth((monthsInYear + month + (theme.direction === 'ltr' ? 1 : -1)) % monthsInYear);
+        focusMonth((monthsInYear + month + (isRtl ? -1 : 1)) % monthsInYear);
         event.preventDefault();
         break;
       default:
@@ -218,12 +220,14 @@ export const MonthCalendar = /*#__PURE__*/React.forwardRef(function MonthCalenda
         onKeyDown: handleKeyDown,
         autoFocus: internalHasFocus && monthNumber === focusedMonth,
         disabled: isDisabled,
-        tabIndex: monthNumber === focusedMonth ? 0 : -1,
+        tabIndex: monthNumber === focusedMonth && !isDisabled ? 0 : -1,
         onFocus: handleMonthFocus,
         onBlur: handleMonthBlur,
         "aria-current": todayMonth === monthNumber ? 'date' : undefined,
         "aria-label": monthLabel,
         monthsPerRow: monthsPerRow,
+        slots: slots,
+        slotProps: slotProps,
         children: monthText
       }, monthText);
     })
@@ -303,6 +307,16 @@ process.env.NODE_ENV !== "production" ? MonthCalendar.propTypes = {
    * @returns {boolean} If `true`, the month will be disabled.
    */
   shouldDisableMonth: PropTypes.func,
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps: PropTypes.object,
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots: PropTypes.object,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/MonthCalendar/MonthCalendar.types.d.ts

@@ -1,8 +1,23 @@
+import * as React from 'react';
 import { SxProps } from '@mui/system';
 import { Theme } from '@mui/material/styles';
 import { MonthCalendarClasses } from './monthCalendarClasses';
 import { BaseDateValidationProps, MonthValidationProps } from '../internals/models/validation';
 import { PickerValidDate, TimezoneProps } from '../models';
+import type { PickersMonthProps } from './PickersMonth';
+import { SlotComponentPropsFromProps } from '../internals/models/helpers';
+export interface MonthCalendarSlots {
+    /**
+     * Button displayed to render a single month in the "month" view.
+     * @default MonthCalendarButton
+     */
+    monthButton?: React.ElementType;
+}
+export interface MonthCalendarSlotProps {
+    monthButton?: SlotComponentPropsFromProps<React.HTMLAttributes<HTMLButtonElement> & {
+        sx: SxProps;
+    }, {}, PickersMonthProps>;
+}
 export interface ExportedMonthCalendarProps {
     /**
      * Months rendered per row.
@@ -17,6 +32,16 @@ export interface MonthCalendarProps<TDate extends PickerValidDate> extends Expor
      * Override or extend the styles applied to the component.
      */
     classes?: Partial<MonthCalendarClasses>;
+    /**
+     * Overridable component slots.
+     * @default {}
+     */
+    slots?: MonthCalendarSlots;
+    /**
+     * The props used for each component slot.
+     * @default {}
+     */
+    slotProps?: MonthCalendarSlotProps;
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */

package/MonthCalendar/PickersMonth.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { PickersMonthClasses } from './pickersMonthClasses';
+import { MonthCalendarSlotProps, MonthCalendarSlots } from './MonthCalendar.types';
 export interface ExportedPickersMonthProps {
     classes?: Partial<PickersMonthClasses>;
 }
@@ -8,6 +9,7 @@ export interface PickersMonthProps extends ExportedPickersMonthProps {
     'aria-label'?: React.AriaAttributes['aria-label'];
     autoFocus: boolean;
     children: React.ReactNode;
+    className?: string;
     disabled?: boolean;
     onClick: (event: React.MouseEvent, month: number) => void;
     onKeyDown: (event: React.KeyboardEvent, month: number) => void;
@@ -17,6 +19,8 @@ export interface PickersMonthProps extends ExportedPickersMonthProps {
     value: number;
     tabIndex: number;
     monthsPerRow: 3 | 4;
+    slots?: MonthCalendarSlots;
+    slotProps?: MonthCalendarSlotProps;
 }
 /**
  * @ignore - do not document.