@mui/x-date-pickers 7.6.2 → 7.7.1

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

@@ -4,6 +4,7 @@ const _excluded = ["ampm", "timeSteps", "autoFocus", "slots", "slotProps", "valu
 import * as React from 'react';
 import clsx from 'clsx';
 import PropTypes from 'prop-types';
+import { useRtl } from '@mui/system/RtlProvider';
 import { styled, useThemeProps } from '@mui/material/styles';
 import useEventCallback from '@mui/utils/useEventCallback';
 import composeClasses from '@mui/utils/composeClasses';
@@ -53,6 +54,7 @@ const MultiSectionDigitalClockRoot = styled(PickerViewRoot, {
  */
 export const MultiSectionDigitalClock = /*#__PURE__*/React.forwardRef(function MultiSectionDigitalClock(inProps, ref) {
   const utils = useUtils();
+  const isRtl = useRtl();
   const props = useThemeProps({
     props: inProps,
     name: 'MuiMultiSectionDigitalClock'
@@ -295,6 +297,17 @@ export const MultiSectionDigitalClock = /*#__PURE__*/React.forwardRef(function M
         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 _extends({}, result, {
@@ -310,9 +323,9 @@ export const MultiSectionDigitalClock = /*#__PURE__*/React.forwardRef(function M
     ownerState: ownerState,
     role: "group"
   }, other, {
-    children: Object.entries(viewTimeOptions).map(([timeView, viewOptions]) => /*#__PURE__*/_jsx(MultiSectionDigitalClockSection, {
-      items: viewOptions.items,
-      onChange: viewOptions.onChange,
+    children: viewsToRender.map(timeView => /*#__PURE__*/_jsx(MultiSectionDigitalClockSection, {
+      items: viewTimeOptions[timeView].items,
+      onChange: viewTimeOptions[timeView].onChange,
       active: view === timeView,
       autoFocus: autoFocus ?? focusedView === timeView,
       disabled: disabled,

package/PickersCalendarHeader/PickersCalendarHeader.js

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

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;
@@ -45,6 +45,10 @@ export interface PickersCalendarHeaderProps<TDate extends PickerValidDate> exten
     view: DateView;
     reduceAnimations: boolean;
     onViewChange?: (view: DateView) => void;
+    /**
+     * Id of the calendar text element.
+     * It is used to establish an `aria-labelledby` relationship with the calendar `grid` element.
+     */
     labelId?: string;
     /**
      * Override or extend the styles applied to the component.

package/PickersLayout/usePickerLayout.js

@@ -53,7 +53,6 @@ const usePickerLayout = props => {
   const classes = useUtilityClasses(props);
 
   // Action bar
-
   const ActionBar = slots?.actionBar ?? PickersActionBar;
   const actionBarProps = useSlotProps({
     elementType: ActionBar,
@@ -73,7 +72,6 @@ const usePickerLayout = props => {
   const actionBar = /*#__PURE__*/_jsx(ActionBar, _extends({}, actionBarProps));
 
   // Toolbar
-
   const Toolbar = slots?.toolbar;
   const toolbarProps = useSlotProps({
     elementType: Toolbar,
@@ -96,11 +94,9 @@ const usePickerLayout = props => {
   const toolbar = toolbarHasView(toolbarProps) && !!Toolbar ? /*#__PURE__*/_jsx(Toolbar, _extends({}, toolbarProps)) : null;
 
   // Content
-
   const content = children;
 
   // Tabs
-
   const Tabs = slots?.tabs;
   const tabs = view && Tabs ? /*#__PURE__*/_jsx(Tabs, _extends({
     view: view,
@@ -109,7 +105,6 @@ const usePickerLayout = props => {
   }, slotProps?.tabs)) : null;
 
   // Shortcuts
-
   const Shortcuts = slots?.shortcuts ?? PickersShortcuts;
   const shortcutsProps = useSlotProps({
     elementType: Shortcuts,

package/StaticDatePicker/StaticDatePicker.js

@@ -133,7 +133,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.func,
   /**

package/StaticDateTimePicker/StaticDateTimePicker.js

@@ -181,7 +181,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.func,
   /**

package/StaticTimePicker/StaticTimePicker.js

@@ -125,7 +125,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.func,
   /**

package/TimePicker/TimePicker.js

@@ -157,7 +157,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.func,
   /**

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.1
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/internals/components/PickersArrowSwitcher/PickersArrowSwitcher.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-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"];
 import * as React from 'react';
@@ -73,7 +73,8 @@ export const PickersArrowSwitcher = /*#__PURE__*/React.forwardRef(function Picke
       isPreviousDisabled,
       isPreviousHidden,
       onGoToPrevious,
-      previousLabel
+      previousLabel,
+      labelId
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const ownerState = props;
@@ -156,6 +157,7 @@ export const PickersArrowSwitcher = /*#__PURE__*/React.forwardRef(function Picke
     })), children ? /*#__PURE__*/_jsx(Typography, {
       variant: "subtitle1",
       component: "span",
+      id: labelId,
       children: children
     }) : /*#__PURE__*/_jsx(PickersArrowSwitcherSpacer, {
       className: classes.spacer,

package/internals/components/PickersArrowSwitcher/PickersArrowSwitcher.types.d.ts

@@ -34,6 +34,7 @@ export interface PickersArrowSwitcherProps extends ExportedPickersArrowSwitcherP
     isNextHidden?: boolean;
     onGoToNext: () => void;
     nextLabel: string;
+    labelId?: string;
 }
 export type PickersArrowSwitcherOwnerState = PickersArrowSwitcherProps;
 export interface PickersArrowSwitcherSlotPropsOverrides {

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

@@ -103,7 +103,8 @@ export const applyLocalizedDigits = (valueStr, localizedDigits) => {
 };
 export 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));
 };
 
 /**