@mui/x-date-pickers 7.6.1 → 7.7.0

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/PickersLayout/PickersLayout.d.ts

@@ -3,9 +3,7 @@ import { PickersLayoutProps } from './PickersLayout.types';
 import { DateOrTimeViewWithMeridiem } from '../internals/models';
 import { PickerValidDate } from '../models';
 export declare const PickersLayoutRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
-    ownerState: {
-        isLandscape: boolean;
-    };
+    ownerState: PickersLayoutProps<any, any, any>;
 }, Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.ClassAttributes<HTMLDivElement> | keyof React.HTMLAttributes<HTMLDivElement>>, {}>;
 export declare const PickersLayoutContentWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.ClassAttributes<HTMLDivElement> | keyof React.HTMLAttributes<HTMLDivElement>>, {}>;
 /**

package/PickersLayout/PickersLayout.js

@@ -21,9 +21,7 @@ export const PickersLayoutRoot = styled('div', {
   name: 'MuiPickersLayout',
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root
-})(({
-  theme
-}) => ({
+})({
   display: 'grid',
   gridAutoColumns: 'max-content auto max-content',
   gridAutoRows: 'max-content auto max-content',
@@ -37,7 +35,7 @@ export const PickersLayoutRoot = styled('div', {
     },
     style: {
       [`& .${pickersLayoutClasses.toolbar}`]: {
-        gridColumn: theme.direction === 'rtl' ? 3 : 1,
+        gridColumn: 1,
         gridRow: '2 / 3'
       },
       [`.${pickersLayoutClasses.shortcuts}`]: {
@@ -45,6 +43,16 @@ export const PickersLayoutRoot = styled('div', {
         gridRow: 1
       }
     }
+  }, {
+    props: {
+      isLandscape: true,
+      isRtl: true
+    },
+    style: {
+      [`& .${pickersLayoutClasses.toolbar}`]: {
+        gridColumn: 3
+      }
+    }
   }, {
     props: {
       isLandscape: false
@@ -55,12 +63,22 @@ export const PickersLayoutRoot = styled('div', {
         gridRow: 1
       },
       [`& .${pickersLayoutClasses.shortcuts}`]: {
-        gridColumn: theme.direction === 'rtl' ? 3 : 1,
+        gridColumn: 1,
         gridRow: '2 / 3'
       }
     }
+  }, {
+    props: {
+      isLandscape: false,
+      isRtl: true
+    },
+    style: {
+      [`& .${pickersLayoutClasses.shortcuts}`]: {
+        gridColumn: 3
+      }
+    }
   }]
-}));
+});
 export const PickersLayoutContentWrapper = styled('div', {
   name: 'MuiPickersLayout',
   slot: 'ContentWrapper',
@@ -100,13 +118,12 @@ const PickersLayout = function PickersLayout(inProps) {
     ref,
     wrapperVariant
   } = props;
-  const ownerState = props;
-  const classes = useUtilityClasses(ownerState);
+  const classes = useUtilityClasses(props);
   return /*#__PURE__*/_jsxs(PickersLayoutRoot, {
     ref: ref,
     sx: sx,
     className: clsx(className, classes.root),
-    ownerState: ownerState,
+    ownerState: props,
     children: [isLandscape ? shortcuts : toolbar, isLandscape ? toolbar : shortcuts, /*#__PURE__*/_jsx(PickersLayoutContentWrapper, {
       className: classes.contentWrapper,
       children: wrapperVariant === 'desktop' ? /*#__PURE__*/_jsxs(React.Fragment, {
@@ -130,6 +147,10 @@ process.env.NODE_ENV !== "production" ? PickersLayout.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/PickersLayout/PickersLayout.types.d.ts

@@ -1,14 +1,14 @@
 import * as React from 'react';
 import { SxProps, Theme } from '@mui/material/styles';
 import { SlotComponentProps } from '@mui/base/utils';
-import { PickersActionBarProps } from '../PickersActionBar';
+import { PickersActionBar, PickersActionBarProps } from '../PickersActionBar';
 import { BaseToolbarProps, ExportedBaseToolbarProps } from '../internals/models/props/toolbar';
 import { BaseTabsProps, ExportedBaseTabsProps } from '../internals/models/props/tabs';
 import { UsePickerLayoutPropsResponseLayoutProps } from '../internals/hooks/usePicker/usePickerLayoutProps';
 import { PickersLayoutClasses } from './pickersLayoutClasses';
 import { DateOrTimeViewWithMeridiem, WrapperVariant } from '../internals/models/common';
 import { PickersShortcutsProps } from '../PickersShortcuts';
-import { ExportedPickersShortcutProps } from '../PickersShortcuts/PickersShortcuts';
+import { ExportedPickersShortcutProps, PickersShortcuts } from '../PickersShortcuts/PickersShortcuts';
 import { PickerValidDate } from '../models';
 export interface ExportedPickersLayoutSlots<TValue, TDate extends PickerValidDate, TView extends DateOrTimeViewWithMeridiem> {
     /**
@@ -37,11 +37,11 @@ export interface ExportedPickersLayoutSlotProps<TValue, TDate extends PickerVali
     /**
      * Props passed down to the action bar component.
      */
-    actionBar?: SlotComponentProps<React.ComponentType<Omit<PickersActionBarProps, 'onAccept' | 'onClear' | 'onCancel' | 'onSetToday'>>, {}, PickersLayoutActionBarOwnerState<TValue, TDate, TView>>;
+    actionBar?: SlotComponentProps<typeof PickersActionBar, {}, PickersLayoutActionBarOwnerState<TValue, TDate, TView>>;
     /**
      * Props passed down to the shortcuts component.
      */
-    shortcuts?: SlotComponentProps<React.ComponentType<PickersShortcutsProps<TValue>>, {}, PickersShortcutsOwnerState<TValue>>;
+    shortcuts?: SlotComponentProps<typeof PickersShortcuts, {}, PickersShortcutsOwnerState<TValue>>;
     /**
      * Props passed down to the layoutRoot component.
      */
@@ -94,6 +94,10 @@ export interface PickersLayoutProps<TValue, TDate extends PickerValidDate, TView
      * @default {}
      */
     slotProps?: PickersLayoutSlotProps<TValue, TDate, TView>;
+    /**
+     * `true` if the application is in right-to-left direction.
+     */
+    isRtl: boolean;
 }
 export interface SubComponents<TValue> {
     toolbar: React.ReactElement<ExportedBaseToolbarProps> | null;

package/PickersTextField/PickersInputBase/PickersInputBase.d.ts

@@ -8,6 +8,7 @@ export declare const PickersInputBaseSectionsContainer: import("@emotion/styled"
     ownerState: OwnerStateType;
 }, {}, {}>;
 interface OwnerStateType extends FormControlState, Omit<PickersInputBaseProps, keyof FormControlState> {
+    isRtl: boolean;
 }
 /**
  * @ignore - internal component.

package/PickersTextField/PickersInputBase/PickersInputBase.js

@@ -11,6 +11,7 @@ import composeClasses from '@mui/utils/composeClasses';
 import capitalize from '@mui/utils/capitalize';
 import { useSlotProps } from '@mui/base/utils';
 import visuallyHidden from '@mui/utils/visuallyHidden';
+import { useRtl } from '@mui/system/RtlProvider';
 import { pickersInputBaseClasses, getPickersInputBaseUtilityClass } from './pickersInputBaseClasses';
 import { Unstable_PickersSectionList as PickersSectionList, Unstable_PickersSectionListRoot as PickersSectionListRoot, Unstable_PickersSectionListSection as PickersSectionListSection, Unstable_PickersSectionListSectionSeparator as PickersSectionListSectionSeparator, Unstable_PickersSectionListSectionContent as PickersSectionListSectionContent } from '../../PickersSectionList';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -47,7 +48,7 @@ export const PickersInputBaseSectionsContainer = styled(PickersSectionListRoot,
   overridesResolver: (props, styles) => styles.sectionsContainer
 })(({
   theme
-}) => _extends({
+}) => ({
   padding: '4px 0 5px',
   fontFamily: theme.typography.fontFamily,
   fontSize: 'inherit',
@@ -60,11 +61,15 @@ export const PickersInputBaseSectionsContainer = styled(PickersSectionListRoot,
   overflow: 'hidden',
   letterSpacing: 'inherit',
   // Baseline behavior
-  width: '182px'
-}, theme.direction === 'rtl' && {
-  textAlign: 'right /*! @noflip */'
-}, {
+  width: '182px',
   variants: [{
+    props: {
+      isRtl: true
+    },
+    style: {
+      textAlign: 'right /*! @noflip */'
+    }
+  }, {
     props: {
       size: 'small'
     },
@@ -195,6 +200,7 @@ const PickersInputBase = /*#__PURE__*/React.forwardRef(function PickersInputBase
   const rootRef = React.useRef(null);
   const handleRootRef = useForkRef(ref, rootRef);
   const handleInputRef = useForkRef(inputProps?.ref, inputRef);
+  const isRtl = useRtl();
   const muiFormControl = useFormControl();
   if (!muiFormControl) {
     throw new Error('MUI X: PickersInputBase should always be used inside a PickersTextField component');
@@ -223,7 +229,9 @@ const PickersInputBase = /*#__PURE__*/React.forwardRef(function PickersInputBase
       muiFormControl.onFilled();
     }
   }, [muiFormControl, areAllSectionsEmpty]);
-  const ownerState = _extends({}, props, muiFormControl);
+  const ownerState = _extends({}, props, muiFormControl, {
+    isRtl
+  });
   const classes = useUtilityClasses(ownerState);
   const InputRoot = slots?.root || PickersInputBaseRoot;
   const inputRootProps = useSlotProps({

package/TimePicker/TimePickerToolbar.js

@@ -1,10 +1,11 @@
-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", "isLandscape", "onChange", "view", "onViewChange", "views", "disabled", "readOnly", "className"];
 import * as React from 'react';
 import clsx from 'clsx';
 import PropTypes from 'prop-types';
-import { useTheme, styled, useThemeProps } from '@mui/material/styles';
+import { useRtl } from '@mui/system/RtlProvider';
+import { styled, useThemeProps } from '@mui/material/styles';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
 import { PickersToolbarText } from '../internals/components/PickersToolbarText';
 import { PickersToolbarButton } from '../internals/components/PickersToolbarButton';
@@ -17,14 +18,14 @@ import { formatMeridiem } from '../internals/utils/date-utils';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
-    theme,
     isLandscape,
-    classes
+    classes,
+    isRtl
   } = ownerState;
   const slots = {
     root: ['root'],
     separator: ['separator'],
-    hourMinuteLabel: ['hourMinuteLabel', isLandscape && 'hourMinuteLabelLandscape', theme.direction === 'rtl' && 'hourMinuteLabelReverse'],
+    hourMinuteLabel: ['hourMinuteLabel', isLandscape && 'hourMinuteLabelLandscape', isRtl && 'hourMinuteLabelReverse'],
     ampmSelection: ['ampmSelection', isLandscape && 'ampmLandscape'],
     ampmLabel: ['ampmLabel']
   };
@@ -51,16 +52,18 @@ const TimePickerToolbarHourMinuteLabel = styled('div', {
     [`&.${timePickerToolbarClasses.hourMinuteLabelLandscape}`]: styles.hourMinuteLabelLandscape,
     [`&.${timePickerToolbarClasses.hourMinuteLabelReverse}`]: styles.hourMinuteLabelReverse
   }, styles.hourMinuteLabel]
-})(({
-  theme
-}) => _extends({
+})({
   display: 'flex',
   justifyContent: 'flex-end',
-  alignItems: 'flex-end'
-}, theme.direction === 'rtl' && {
-  flexDirection: 'row-reverse'
-}, {
+  alignItems: 'flex-end',
   variants: [{
+    props: {
+      isRtl: true
+    },
+    style: {
+      flexDirection: 'row-reverse'
+    }
+  }, {
     props: {
       isLandscape: true
     },
@@ -68,7 +71,7 @@ const TimePickerToolbarHourMinuteLabel = styled('div', {
       marginTop: 'auto'
     }
   }]
-}));
+});
 const TimePickerToolbarAmPmSelection = styled('div', {
   name: 'MuiTimePickerToolbar',
   slot: 'AmPmSelection',
@@ -129,17 +132,17 @@ function TimePickerToolbar(inProps) {
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const utils = useUtils();
   const localeText = useLocaleText();
-  const theme = useTheme();
+  const isRtl = useRtl();
   const showAmPmControl = Boolean(ampm && !ampmInClock && views.includes('hours'));
   const {
     meridiemMode,
     handleMeridiemChange
   } = useMeridiemMode(value, ampm, onChange);
   const formatHours = time => ampm ? utils.format(time, 'hours12h') : utils.format(time, 'hours24h');
-  const ownerState = props;
-  const classes = useUtilityClasses(_extends({}, ownerState, {
-    theme
-  }));
+  const ownerState = _extends({}, props, {
+    isRtl
+  });
+  const classes = useUtilityClasses(ownerState);
   const separator = /*#__PURE__*/_jsx(TimePickerToolbarSeparator, {
     tabIndex: -1,
     value: ":",

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,10 +1,10 @@
 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';
-import { useTheme } from '@mui/system';
+import { useRtl } from '@mui/system/RtlProvider';
 import { styled, useThemeProps } from '@mui/material/styles';
 import { unstable_useForkRef as useForkRef, unstable_composeClasses as composeClasses, unstable_useControlled as useControlled, unstable_useEventCallback as useEventCallback } from '@mui/utils';
 import { PickersYear } from './PickersYear';
@@ -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 {
@@ -104,7 +106,7 @@ export const YearCalendar = /*#__PURE__*/React.forwardRef(function YearCalendar(
     valueManager: singleItemValueManager
   });
   const now = useNow(timezone);
-  const theme = useTheme();
+  const isRtl = useRtl();
   const utils = useUtils();
   const referenceDate = React.useMemo(() => singleItemValueManager.getInitialReferenceValue({
     value,
@@ -184,11 +186,11 @@ export const YearCalendar = /*#__PURE__*/React.forwardRef(function YearCalendar(
         event.preventDefault();
         break;
       case 'ArrowLeft':
-        focusYear(year + (theme.direction === 'ltr' ? -1 : 1));
+        focusYear(year + (isRtl ? 1 : -1));
         event.preventDefault();
         break;
       case 'ArrowRight':
-        focusYear(year + (theme.direction === 'ltr' ? 1 : -1));
+        focusYear(year + (isRtl ? -1 : 1));
         event.preventDefault();
         break;
       default:
@@ -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.1
+ * @mui/x-date-pickers v7.7.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the