@mui/x-date-pickers 7.6.2 → 7.7.1

package/node/DesktopDatePicker/DesktopDatePicker.js

@@ -191,7 +191,9 @@ DesktopDatePicker.propTypes = {
   /**
    * Callback fired when the value is accepted.
    * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.
+   * @template TError The validation error type. Will be either `string` or a `null`. Can be in `[start, end]` format in case of range value.
    * @param {TValue} value The value that was just accepted.
+   * @param {FieldChangeHandlerContext<TError>} context The context containing the validation result of the current value.
    */
   onAccept: _propTypes.default.func,
   /**

package/node/DesktopDateTimePicker/DesktopDateTimePicker.js

@@ -314,7 +314,9 @@ DesktopDateTimePicker.propTypes = {
   /**
    * Callback fired when the value is accepted.
    * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.
+   * @template TError The validation error type. Will be either `string` or a `null`. Can be in `[start, end]` format in case of range value.
    * @param {TValue} value The value that was just accepted.
+   * @param {FieldChangeHandlerContext<TError>} context The context containing the validation result of the current value.
    */
   onAccept: _propTypes.default.func,
   /**

package/node/DesktopTimePicker/DesktopTimePicker.js

@@ -202,7 +202,9 @@ DesktopTimePicker.propTypes = {
   /**
    * Callback fired when the value is accepted.
    * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.
+   * @template TError The validation error type. Will be either `string` or a `null`. Can be in `[start, end]` format in case of range value.
    * @param {TValue} value The value that was just accepted.
+   * @param {FieldChangeHandlerContext<TError>} context The context containing the validation result of the current value.
    */
   onAccept: _propTypes.default.func,
   /**

package/node/MobileDatePicker/MobileDatePicker.js

@@ -188,7 +188,9 @@ MobileDatePicker.propTypes = {
   /**
    * Callback fired when the value is accepted.
    * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.
+   * @template TError The validation error type. Will be either `string` or a `null`. Can be in `[start, end]` format in case of range value.
    * @param {TValue} value The value that was just accepted.
+   * @param {FieldChangeHandlerContext<TError>} context The context containing the validation result of the current value.
    */
   onAccept: _propTypes.default.func,
   /**

package/node/MobileDateTimePicker/MobileDateTimePicker.js

@@ -236,7 +236,9 @@ MobileDateTimePicker.propTypes = {
   /**
    * Callback fired when the value is accepted.
    * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.
+   * @template TError The validation error type. Will be either `string` or a `null`. Can be in `[start, end]` format in case of range value.
    * @param {TValue} value The value that was just accepted.
+   * @param {FieldChangeHandlerContext<TError>} context The context containing the validation result of the current value.
    */
   onAccept: _propTypes.default.func,
   /**

package/node/MobileTimePicker/MobileTimePicker.js

@@ -181,7 +181,9 @@ MobileTimePicker.propTypes = {
   /**
    * Callback fired when the value is accepted.
    * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.
+   * @template TError The validation error type. Will be either `string` or a `null`. Can be in `[start, end]` format in case of range value.
    * @param {TValue} value The value that was just accepted.
+   * @param {FieldChangeHandlerContext<TError>} context The context containing the validation result of the current value.
    */
   onAccept: _propTypes.default.func,
   /**

package/node/MonthCalendar/MonthCalendar.js

@@ -23,7 +23,7 @@ var _getDefaultReferenceDate = require("../internals/utils/getDefaultReferenceDa
 var _useValueWithTimezone = require("../internals/hooks/useValueWithTimezone");
 var _dimensions = require("../internals/constants/dimensions");
 var _jsxRuntime = require("react/jsx-runtime");
-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"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const useUtilityClasses = ownerState => {
@@ -93,7 +93,9 @@ const MonthCalendar = exports.MonthCalendar = /*#__PURE__*/React.forwardRef(func
       onFocusedViewChange,
       monthsPerRow = 3,
       timezone: timezoneProp,
-      gridLabelId
+      gridLabelId,
+      slots,
+      slotProps
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const {
@@ -228,12 +230,14 @@ const MonthCalendar = exports.MonthCalendar = /*#__PURE__*/React.forwardRef(func
         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);
     })
@@ -313,6 +317,16 @@ process.env.NODE_ENV !== "production" ? MonthCalendar.propTypes = {
    * @returns {boolean} If `true`, the month will be disabled.
    */
   shouldDisableMonth: _propTypes.default.func,
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps: _propTypes.default.object,
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots: _propTypes.default.object,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/node/MonthCalendar/PickersMonth.js

@@ -8,11 +8,14 @@ exports.PickersMonth = void 0;
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
 var _styles = require("@mui/material/styles");
-var _utils = require("@mui/utils");
+var _utils = require("@mui/base/utils");
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
 var _pickersMonthClasses = require("./pickersMonthClasses");
 var _jsxRuntime = require("react/jsx-runtime");
-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"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const useUtilityClasses = ownerState => {
@@ -25,7 +28,7 @@ const useUtilityClasses = ownerState => {
     root: ['root'],
     monthButton: ['monthButton', disabled && 'disabled', selected && 'selected']
   };
-  return (0, _utils.unstable_composeClasses)(slots, _pickersMonthClasses.getPickersMonthUtilityClass, classes);
+  return (0, _composeClasses.default)(slots, _pickersMonthClasses.getPickersMonthUtilityClass, classes);
 };
 const PickersMonthRoot = (0, _styles.styled)('div', {
   name: 'MuiPickersMonth',
@@ -45,7 +48,7 @@ const PickersMonthRoot = (0, _styles.styled)('div', {
     }
   }]
 });
-const PickersMonthButton = (0, _styles.styled)('button', {
+const MonthCalendarButton = (0, _styles.styled)('button', {
   name: 'MuiPickersMonth',
   slot: 'MonthButton',
   overridesResolver: (_, styles) => [styles.monthButton, {
@@ -98,6 +101,7 @@ const PickersMonth = exports.PickersMonth = /*#__PURE__*/React.memo(function Pic
   });
   const {
       autoFocus,
+      className,
       children,
       disabled,
       selected,
@@ -110,35 +114,48 @@ const PickersMonth = exports.PickersMonth = /*#__PURE__*/React.memo(function Pic
       'aria-current': ariaCurrent,
       'aria-label': ariaLabel
       // We don't want to forward this prop to the root element
+      ,
+
+      slots,
+      slotProps
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const ref = React.useRef(null);
   const classes = useUtilityClasses(props);
-  (0, _utils.unstable_useEnhancedEffect)(() => {
+
+  // We can't forward the `autoFocus` to the button because it is a native button, not a MUI Button
+  (0, _useEnhancedEffect.default)(() => {
     if (autoFocus) {
+      // `ref.current` being `null` would be a bug in MUI.
       ref.current?.focus();
     }
   }, [autoFocus]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(PickersMonthRoot, (0, _extends2.default)({
-    className: classes.root,
-    ownerState: props
-  }, other, {
-    children: /*#__PURE__*/(0, _jsxRuntime.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 = (0, _utils.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__*/(0, _jsxRuntime.jsx)(PickersMonthRoot, (0, _extends2.default)({
+    className: (0, _clsx.default)(classes.root, className),
+    ownerState: props
+  }, other, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(MonthButton, (0, _extends2.default)({}, monthButtonProps))
   }));
 });

package/node/MultiSectionDigitalClock/MultiSectionDigitalClock.js

@@ -10,6 +10,7 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var React = _interopRequireWildcard(require("react"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _RtlProvider = require("@mui/system/RtlProvider");
 var _styles = require("@mui/material/styles");
 var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
@@ -62,6 +63,7 @@ const MultiSectionDigitalClockRoot = (0, _styles.styled)(_PickerViewRoot.PickerV
  */
 const MultiSectionDigitalClock = exports.MultiSectionDigitalClock = /*#__PURE__*/React.forwardRef(function MultiSectionDigitalClock(inProps, ref) {
   const utils = (0, _useUtils.useUtils)();
+  const isRtl = (0, _RtlProvider.useRtl)();
   const props = (0, _styles.useThemeProps)({
     props: inProps,
     name: 'MuiMultiSectionDigitalClock'
@@ -304,6 +306,17 @@ const MultiSectionDigitalClock = exports.MultiSectionDigitalClock = /*#__PURE__*
         throw new Error(`Unknown view: ${viewToBuild} found.`);
     }
   }, [now, value, ampm, utils, timeSteps.hours, timeSteps.minutes, timeSteps.seconds, localeText.hoursClockNumberText, localeText.minutesClockNumberText, localeText.secondsClockNumberText, meridiemMode, setValueAndGoToNextView, valueOrReferenceDate, isTimeDisabled, handleMeridiemChange]);
+  const viewsToRender = React.useMemo(() => {
+    if (!isRtl) {
+      return views;
+    }
+    const digitViews = views.filter(v => v !== 'meridiem');
+    const result = digitViews.toReversed();
+    if (views.includes('meridiem')) {
+      result.push('meridiem');
+    }
+    return result;
+  }, [isRtl, views]);
   const viewTimeOptions = React.useMemo(() => {
     return views.reduce((result, currentView) => {
       return (0, _extends2.default)({}, result, {
@@ -319,9 +332,9 @@ const MultiSectionDigitalClock = exports.MultiSectionDigitalClock = /*#__PURE__*
     ownerState: ownerState,
     role: "group"
   }, other, {
-    children: Object.entries(viewTimeOptions).map(([timeView, viewOptions]) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_MultiSectionDigitalClockSection.MultiSectionDigitalClockSection, {
-      items: viewOptions.items,
-      onChange: viewOptions.onChange,
+    children: viewsToRender.map(timeView => /*#__PURE__*/(0, _jsxRuntime.jsx)(_MultiSectionDigitalClockSection.MultiSectionDigitalClockSection, {
+      items: viewTimeOptions[timeView].items,
+      onChange: viewTimeOptions[timeView].onChange,
       active: view === timeView,
       autoFocus: autoFocus ?? focusedView === timeView,
       disabled: disabled,

package/node/PickersCalendarHeader/PickersCalendarHeader.js

@@ -252,6 +252,10 @@ process.env.NODE_ENV !== "production" ? PickersCalendarHeader.propTypes = {
    * @default `${adapter.formats.month} ${adapter.formats.year}`
    */
   format: _propTypes.default.string,
+  /**
+   * Id of the calendar text element.
+   * It is used to establish an `aria-labelledby` relationship with the calendar `grid` element.
+   */
   labelId: _propTypes.default.string,
   maxDate: _propTypes.default.object.isRequired,
   minDate: _propTypes.default.object.isRequired,

package/node/PickersLayout/usePickerLayout.js

@@ -62,7 +62,6 @@ const usePickerLayout = props => {
   const classes = useUtilityClasses(props);
 
   // Action bar
-
   const ActionBar = slots?.actionBar ?? _PickersActionBar.PickersActionBar;
   const actionBarProps = (0, _utils.useSlotProps)({
     elementType: ActionBar,
@@ -82,7 +81,6 @@ const usePickerLayout = props => {
   const actionBar = /*#__PURE__*/(0, _jsxRuntime.jsx)(ActionBar, (0, _extends2.default)({}, actionBarProps));
 
   // Toolbar
-
   const Toolbar = slots?.toolbar;
   const toolbarProps = (0, _utils.useSlotProps)({
     elementType: Toolbar,
@@ -105,11 +103,9 @@ const usePickerLayout = props => {
   const toolbar = toolbarHasView(toolbarProps) && !!Toolbar ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Toolbar, (0, _extends2.default)({}, toolbarProps)) : null;
 
   // Content
-
   const content = children;
 
   // Tabs
-
   const Tabs = slots?.tabs;
   const tabs = view && Tabs ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Tabs, (0, _extends2.default)({
     view: view,
@@ -118,7 +114,6 @@ const usePickerLayout = props => {
   }, slotProps?.tabs)) : null;
 
   // Shortcuts
-
   const Shortcuts = slots?.shortcuts ?? _PickersShortcuts.PickersShortcuts;
   const shortcutsProps = (0, _utils.useSlotProps)({
     elementType: Shortcuts,

package/node/StaticDatePicker/StaticDatePicker.js

@@ -142,7 +142,9 @@ StaticDatePicker.propTypes = {
   /**
    * Callback fired when the value is accepted.
    * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.
+   * @template TError The validation error type. Will be either `string` or a `null`. Can be in `[start, end]` format in case of range value.
    * @param {TValue} value The value that was just accepted.
+   * @param {FieldChangeHandlerContext<TError>} context The context containing the validation result of the current value.
    */
   onAccept: _propTypes.default.func,
   /**

package/node/StaticDateTimePicker/StaticDateTimePicker.js

@@ -190,7 +190,9 @@ StaticDateTimePicker.propTypes = {
   /**
    * Callback fired when the value is accepted.
    * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.
+   * @template TError The validation error type. Will be either `string` or a `null`. Can be in `[start, end]` format in case of range value.
    * @param {TValue} value The value that was just accepted.
+   * @param {FieldChangeHandlerContext<TError>} context The context containing the validation result of the current value.
    */
   onAccept: _propTypes.default.func,
   /**

package/node/StaticTimePicker/StaticTimePicker.js

@@ -134,7 +134,9 @@ StaticTimePicker.propTypes = {
   /**
    * Callback fired when the value is accepted.
    * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.
+   * @template TError The validation error type. Will be either `string` or a `null`. Can be in `[start, end]` format in case of range value.
    * @param {TValue} value The value that was just accepted.
+   * @param {FieldChangeHandlerContext<TError>} context The context containing the validation result of the current value.
    */
   onAccept: _propTypes.default.func,
   /**

package/node/TimePicker/TimePicker.js

@@ -166,7 +166,9 @@ process.env.NODE_ENV !== "production" ? TimePicker.propTypes = {
   /**
    * Callback fired when the value is accepted.
    * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.
+   * @template TError The validation error type. Will be either `string` or a `null`. Can be in `[start, end]` format in case of range value.
    * @param {TValue} value The value that was just accepted.
+   * @param {FieldChangeHandlerContext<TError>} context The context containing the validation result of the current value.
    */
   onAccept: _propTypes.default.func,
   /**

package/node/YearCalendar/PickersYear.js

@@ -9,11 +9,13 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _clsx = _interopRequireDefault(require("clsx"));
-var _utils = require("@mui/utils");
 var _styles = require("@mui/material/styles");
+var _utils = require("@mui/base/utils");
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
 var _pickersYearClasses = require("./pickersYearClasses");
 var _jsxRuntime = require("react/jsx-runtime");
-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"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const useUtilityClasses = ownerState => {
@@ -26,7 +28,7 @@ const useUtilityClasses = ownerState => {
     root: ['root'],
     yearButton: ['yearButton', disabled && 'disabled', selected && 'selected']
   };
-  return (0, _utils.unstable_composeClasses)(slots, _pickersYearClasses.getPickersYearUtilityClass, classes);
+  return (0, _composeClasses.default)(slots, _pickersYearClasses.getPickersYearUtilityClass, classes);
 };
 const PickersYearRoot = (0, _styles.styled)('div', {
   name: 'MuiPickersYear',
@@ -46,7 +48,7 @@ const PickersYearRoot = (0, _styles.styled)('div', {
     }
   }]
 });
-const PickersYearButton = (0, _styles.styled)('button', {
+const YearCalendarButton = (0, _styles.styled)('button', {
   name: 'MuiPickersYear',
   slot: 'YearButton',
   overridesResolver: (_, styles) => [styles.yearButton, {
@@ -111,37 +113,47 @@ const PickersYear = exports.PickersYear = /*#__PURE__*/React.memo(function Picke
       onBlur,
       'aria-current': ariaCurrent
       // We don't want to forward this prop to the root element
+      ,
+
+      slots,
+      slotProps
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(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(() => {
+  (0, _useEnhancedEffect.default)(() => {
     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 = (0, _utils.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__*/(0, _jsxRuntime.jsx)(PickersYearRoot, (0, _extends2.default)({
     className: (0, _clsx.default)(classes.root, className),
     ownerState: props
   }, other, {
-    children: /*#__PURE__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsx)(YearButton, (0, _extends2.default)({}, yearButtonProps))
   }));
 });

package/node/YearCalendar/YearCalendar.js

@@ -22,7 +22,7 @@ var _getDefaultReferenceDate = require("../internals/utils/getDefaultReferenceDa
 var _useValueWithTimezone = require("../internals/hooks/useValueWithTimezone");
 var _dimensions = require("../internals/constants/dimensions");
 var _jsxRuntime = require("react/jsx-runtime");
-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"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const useUtilityClasses = ownerState => {
@@ -97,7 +97,9 @@ const YearCalendar = exports.YearCalendar = /*#__PURE__*/React.forwardRef(functi
       onFocusedViewChange,
       yearsPerRow,
       timezone: timezoneProp,
-      gridLabelId
+      gridLabelId,
+      slots,
+      slotProps
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const {
@@ -253,11 +255,13 @@ const YearCalendar = exports.YearCalendar = /*#__PURE__*/React.forwardRef(functi
         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'));
     })
@@ -332,6 +336,16 @@ process.env.NODE_ENV !== "production" ? YearCalendar.propTypes = {
    * @returns {boolean} If `true`, the year will be disabled.
    */
   shouldDisableYear: _propTypes.default.func,
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps: _propTypes.default.object,
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots: _propTypes.default.object,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/node/index.js

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

package/node/internals/components/PickersArrowSwitcher/PickersArrowSwitcher.js

@@ -18,7 +18,7 @@ var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
 var _icons = require("../../../icons");
 var _pickersArrowSwitcherClasses = require("./pickersArrowSwitcherClasses");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["children", "className", "slots", "slotProps", "isNextDisabled", "isNextHidden", "onGoToNext", "nextLabel", "isPreviousDisabled", "isPreviousHidden", "onGoToPrevious", "previousLabel"],
+const _excluded = ["children", "className", "slots", "slotProps", "isNextDisabled", "isNextHidden", "onGoToNext", "nextLabel", "isPreviousDisabled", "isPreviousHidden", "onGoToPrevious", "previousLabel", "labelId"],
   _excluded2 = ["ownerState"],
   _excluded3 = ["ownerState"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
@@ -82,7 +82,8 @@ const PickersArrowSwitcher = exports.PickersArrowSwitcher = /*#__PURE__*/React.f
       isPreviousDisabled,
       isPreviousHidden,
       onGoToPrevious,
-      previousLabel
+      previousLabel,
+      labelId
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const ownerState = props;
@@ -165,6 +166,7 @@ const PickersArrowSwitcher = exports.PickersArrowSwitcher = /*#__PURE__*/React.f
     })), children ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
       variant: "subtitle1",
       component: "span",
+      id: labelId,
       children: children
     }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(PickersArrowSwitcherSpacer, {
       className: classes.spacer,

package/node/internals/hooks/useField/useField.utils.js

@@ -115,7 +115,8 @@ const applyLocalizedDigits = (valueStr, localizedDigits) => {
 exports.applyLocalizedDigits = applyLocalizedDigits;
 const isStringNumber = (valueStr, localizedDigits) => {
   const nonLocalizedValueStr = removeLocalizedDigits(valueStr, localizedDigits);
-  return !Number.isNaN(Number(nonLocalizedValueStr));
+  // `Number(' ')` returns `0` even if ' ' is not a valid number.
+  return nonLocalizedValueStr !== ' ' && !Number.isNaN(Number(nonLocalizedValueStr));
 };
 
 /**