@mui/x-date-pickers 7.6.2 → 7.7.0

package/CHANGELOG.md

@@ -3,6 +3,87 @@
 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_

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/MonthCalendar/MonthCalendar.js

@@ -1,6 +1,6 @@
 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';
@@ -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 {
@@ -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.

package/MonthCalendar/PickersMonth.js

@@ -1,9 +1,12 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["autoFocus", "children", "disabled", "selected", "value", "tabIndex", "onClick", "onKeyDown", "onFocus", "onBlur", "aria-current", "aria-label", "monthsPerRow"];
+const _excluded = ["autoFocus", "className", "children", "disabled", "selected", "value", "tabIndex", "onClick", "onKeyDown", "onFocus", "onBlur", "aria-current", "aria-label", "monthsPerRow", "slots", "slotProps"];
 import * as React from 'react';
+import clsx from 'clsx';
 import { styled, alpha, useThemeProps } from '@mui/material/styles';
-import { unstable_composeClasses as composeClasses, unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
+import { useSlotProps } from '@mui/base/utils';
+import composeClasses from '@mui/utils/composeClasses';
+import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import { getPickersMonthUtilityClass, pickersMonthClasses } from './pickersMonthClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
@@ -36,7 +39,7 @@ const PickersMonthRoot = styled('div', {
     }
   }]
 });
-const PickersMonthButton = styled('button', {
+const MonthCalendarButton = styled('button', {
   name: 'MuiPickersMonth',
   slot: 'MonthButton',
   overridesResolver: (_, styles) => [styles.monthButton, {
@@ -89,6 +92,7 @@ export const PickersMonth = /*#__PURE__*/React.memo(function PickersMonth(inProp
   });
   const {
       autoFocus,
+      className,
       children,
       disabled,
       selected,
@@ -101,35 +105,48 @@ export const PickersMonth = /*#__PURE__*/React.memo(function PickersMonth(inProp
       'aria-current': ariaCurrent,
       'aria-label': ariaLabel
       // We don't want to forward this prop to the root element
+      ,
+
+      slots,
+      slotProps
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const ref = React.useRef(null);
   const classes = useUtilityClasses(props);
+
+  // We can't forward the `autoFocus` to the button because it is a native button, not a MUI Button
   useEnhancedEffect(() => {
     if (autoFocus) {
+      // `ref.current` being `null` would be a bug in MUI.
       ref.current?.focus();
     }
   }, [autoFocus]);
-  return /*#__PURE__*/_jsx(PickersMonthRoot, _extends({
-    className: classes.root,
-    ownerState: props
-  }, other, {
-    children: /*#__PURE__*/_jsx(PickersMonthButton, {
-      ref: ref,
-      disabled: disabled,
-      type: "button",
-      role: "radio",
-      tabIndex: disabled ? -1 : tabIndex,
-      "aria-current": ariaCurrent,
-      "aria-checked": selected,
-      "aria-label": ariaLabel,
+  const MonthButton = slots?.monthButton ?? MonthCalendarButton;
+  const monthButtonProps = useSlotProps({
+    elementType: MonthButton,
+    externalSlotProps: slotProps?.monthButton,
+    additionalProps: {
+      children,
+      disabled,
+      tabIndex,
+      ref,
+      type: 'button',
+      role: 'radio',
+      'aria-current': ariaCurrent,
+      'aria-checked': selected,
+      'aria-label': ariaLabel,
       onClick: event => onClick(event, value),
       onKeyDown: event => onKeyDown(event, value),
       onFocus: event => onFocus(event, value),
-      onBlur: event => onBlur(event, value),
-      className: classes.monthButton,
-      ownerState: props,
-      children: children
-    })
+      onBlur: event => onBlur(event, value)
+    },
+    ownerState: props,
+    className: classes.monthButton
+  });
+  return /*#__PURE__*/_jsx(PickersMonthRoot, _extends({
+    className: clsx(classes.root, className),
+    ownerState: props
+  }, other, {
+    children: /*#__PURE__*/_jsx(MonthButton, _extends({}, monthButtonProps))
   }));
 });

package/MonthCalendar/index.d.ts

@@ -1,5 +1,5 @@
 export { MonthCalendar } from './MonthCalendar';
-export type { MonthCalendarProps } from './MonthCalendar.types';
+export type { MonthCalendarProps, MonthCalendarSlots, MonthCalendarSlotProps, } from './MonthCalendar.types';
 export { monthCalendarClasses, getMonthCalendarUtilityClass } from './monthCalendarClasses';
 export type { MonthCalendarClasses, MonthCalendarClassKey } from './monthCalendarClasses';
 export { pickersMonthClasses } from './pickersMonthClasses';

package/PickersCalendarHeader/PickersCalendarHeader.types.d.ts

@@ -15,7 +15,7 @@ export interface PickersCalendarHeaderSlots extends PickersArrowSwitcherSlots {
      */
     switchViewButton?: React.ElementType;
     /**
-     * Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is 'year'.
+     * Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is "year".
      * @default ArrowDropDown
      */
     switchViewIcon?: React.ElementType;

package/YearCalendar/PickersYear.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { PickersYearClasses } from './pickersYearClasses';
+import { YearCalendarSlotProps, YearCalendarSlots } from './YearCalendar.types';
 export interface ExportedPickersYearProps {
     classes?: Partial<PickersYearClasses>;
 }
@@ -17,6 +18,8 @@ export interface PickersYearProps extends ExportedPickersYearProps {
     value: number;
     tabIndex: number;
     yearsPerRow: 3 | 4;
+    slots?: YearCalendarSlots;
+    slotProps?: YearCalendarSlotProps;
 }
 /**
  * @ignore - internal component.

package/YearCalendar/PickersYear.js

@@ -1,10 +1,12 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["autoFocus", "className", "children", "disabled", "selected", "value", "tabIndex", "onClick", "onKeyDown", "onFocus", "onBlur", "aria-current", "yearsPerRow"];
+const _excluded = ["autoFocus", "className", "children", "disabled", "selected", "value", "tabIndex", "onClick", "onKeyDown", "onFocus", "onBlur", "aria-current", "yearsPerRow", "slots", "slotProps"];
 import * as React from 'react';
 import clsx from 'clsx';
-import { unstable_composeClasses as composeClasses } from '@mui/utils';
-import { alpha, styled, useThemeProps } from '@mui/material/styles';
+import { styled, alpha, useThemeProps } from '@mui/material/styles';
+import { useSlotProps } from '@mui/base/utils';
+import composeClasses from '@mui/utils/composeClasses';
+import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import { getPickersYearUtilityClass, pickersYearClasses } from './pickersYearClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
@@ -37,7 +39,7 @@ const PickersYearRoot = styled('div', {
     }
   }]
 });
-const PickersYearButton = styled('button', {
+const YearCalendarButton = styled('button', {
   name: 'MuiPickersYear',
   slot: 'YearButton',
   overridesResolver: (_, styles) => [styles.yearButton, {
@@ -102,37 +104,47 @@ export const PickersYear = /*#__PURE__*/React.memo(function PickersYear(inProps)
       onBlur,
       'aria-current': ariaCurrent
       // We don't want to forward this prop to the root element
+      ,
+
+      slots,
+      slotProps
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const ref = React.useRef(null);
   const classes = useUtilityClasses(props);
 
   // We can't forward the `autoFocus` to the button because it is a native button, not a MUI Button
-  React.useEffect(() => {
+  useEnhancedEffect(() => {
     if (autoFocus) {
       // `ref.current` being `null` would be a bug in MUI.
-      ref.current.focus();
+      ref.current?.focus();
     }
   }, [autoFocus]);
+  const YearButton = slots?.yearButton ?? YearCalendarButton;
+  const yearButtonProps = useSlotProps({
+    elementType: YearButton,
+    externalSlotProps: slotProps?.yearButton,
+    additionalProps: {
+      children,
+      disabled,
+      tabIndex,
+      ref,
+      type: 'button',
+      role: 'radio',
+      'aria-current': ariaCurrent,
+      'aria-checked': selected,
+      onClick: event => onClick(event, value),
+      onKeyDown: event => onKeyDown(event, value),
+      onFocus: event => onFocus(event, value),
+      onBlur: event => onBlur(event, value)
+    },
+    ownerState: props,
+    className: classes.yearButton
+  });
   return /*#__PURE__*/_jsx(PickersYearRoot, _extends({
     className: clsx(classes.root, className),
     ownerState: props
   }, other, {
-    children: /*#__PURE__*/_jsx(PickersYearButton, {
-      ref: ref,
-      disabled: disabled,
-      type: "button",
-      role: "radio",
-      tabIndex: disabled ? -1 : tabIndex,
-      "aria-current": ariaCurrent,
-      "aria-checked": selected,
-      onClick: event => onClick(event, value),
-      onKeyDown: event => onKeyDown(event, value),
-      onFocus: event => onFocus(event, value),
-      onBlur: event => onBlur(event, value),
-      className: classes.yearButton,
-      ownerState: props,
-      children: children
-    })
+    children: /*#__PURE__*/_jsx(YearButton, _extends({}, yearButtonProps))
   }));
 });

package/YearCalendar/YearCalendar.js

@@ -1,6 +1,6 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["autoFocus", "className", "value", "defaultValue", "referenceDate", "disabled", "disableFuture", "disablePast", "maxDate", "minDate", "onChange", "readOnly", "shouldDisableYear", "disableHighlightToday", "onYearFocus", "hasFocus", "onFocusedViewChange", "yearsPerRow", "timezone", "gridLabelId"];
+const _excluded = ["autoFocus", "className", "value", "defaultValue", "referenceDate", "disabled", "disableFuture", "disablePast", "maxDate", "minDate", "onChange", "readOnly", "shouldDisableYear", "disableHighlightToday", "onYearFocus", "hasFocus", "onFocusedViewChange", "yearsPerRow", "timezone", "gridLabelId", "slots", "slotProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -88,7 +88,9 @@ export const YearCalendar = /*#__PURE__*/React.forwardRef(function YearCalendar(
       onFocusedViewChange,
       yearsPerRow,
       timezone: timezoneProp,
-      gridLabelId
+      gridLabelId,
+      slots,
+      slotProps
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const {
@@ -244,11 +246,13 @@ export const YearCalendar = /*#__PURE__*/React.forwardRef(function YearCalendar(
         onKeyDown: handleKeyDown,
         autoFocus: internalHasFocus && yearNumber === focusedYear,
         disabled: isDisabled,
-        tabIndex: yearNumber === focusedYear ? 0 : -1,
+        tabIndex: yearNumber === focusedYear && !isDisabled ? 0 : -1,
         onFocus: handleYearFocus,
         onBlur: handleYearBlur,
         "aria-current": todayYear === yearNumber ? 'date' : undefined,
         yearsPerRow: yearsPerRow,
+        slots: slots,
+        slotProps: slotProps,
         children: utils.format(year, 'year')
       }, utils.format(year, 'year'));
     })
@@ -323,6 +327,16 @@ process.env.NODE_ENV !== "production" ? YearCalendar.propTypes = {
    * @returns {boolean} If `true`, the year will be disabled.
    */
   shouldDisableYear: 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/YearCalendar/YearCalendar.types.d.ts

@@ -1,8 +1,23 @@
+import * as React from 'react';
 import { SxProps } from '@mui/system';
 import { Theme } from '@mui/material/styles';
 import { YearCalendarClasses } from './yearCalendarClasses';
 import { BaseDateValidationProps, YearValidationProps } from '../internals/models/validation';
 import { PickerValidDate, TimezoneProps } from '../models';
+import type { PickersYearProps } from './PickersYear';
+import { SlotComponentPropsFromProps } from '../internals/models/helpers';
+export interface YearCalendarSlots {
+    /**
+     * Button displayed to render a single year in the "year" view.
+     * @default YearCalendarButton
+     */
+    yearButton?: React.ElementType;
+}
+export interface YearCalendarSlotProps {
+    yearButton?: SlotComponentPropsFromProps<React.HTMLAttributes<HTMLButtonElement> & {
+        sx: SxProps;
+    }, {}, PickersYearProps>;
+}
 export interface ExportedYearCalendarProps {
     /**
      * Years rendered per row.
@@ -17,6 +32,16 @@ export interface YearCalendarProps<TDate extends PickerValidDate> extends Export
      * Override or extend the styles applied to the component.
      */
     classes?: Partial<YearCalendarClasses>;
+    /**
+     * Overridable component slots.
+     * @default {}
+     */
+    slots?: YearCalendarSlots;
+    /**
+     * The props used for each component slot.
+     * @default {}
+     */
+    slotProps?: YearCalendarSlotProps;
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */

package/YearCalendar/index.d.ts

@@ -1,5 +1,5 @@
 export { YearCalendar } from './YearCalendar';
-export type { YearCalendarProps } from './YearCalendar.types';
+export type { YearCalendarProps, YearCalendarSlots, YearCalendarSlotProps, } from './YearCalendar.types';
 export { yearCalendarClasses, getYearCalendarUtilityClass } from './yearCalendarClasses';
 export type { YearCalendarClasses, YearCalendarClassKey } from './yearCalendarClasses';
 export { pickersYearClasses } from './pickersYearClasses';

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-date-pickers v7.6.2
+ * @mui/x-date-pickers v7.7.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the