@mui/x-date-pickers 6.13.0 → 6.15.0

package/legacy/index.js

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

package/legacy/internals/components/PickersPopper.js

@@ -8,7 +8,7 @@ import Grow from '@mui/material/Grow';
 import Fade from '@mui/material/Fade';
 import MuiPaper from '@mui/material/Paper';
 import MuiPopper from '@mui/material/Popper';
-import MuiTrapFocus from '@mui/material/Unstable_TrapFocus';
+import BaseFocusTrap from '@mui/material/Unstable_TrapFocus';
 import { unstable_useForkRef as useForkRef, unstable_useEventCallback as useEventCallback, unstable_ownerDocument as ownerDocument, unstable_composeClasses as composeClasses } from '@mui/utils';
 import { styled, useThemeProps } from '@mui/material/styles';
 import { getPickersPopperUtilityClass } from './pickersPopperClasses';
@@ -272,7 +272,7 @@ export function PickersPopper(inProps) {
     }
   };
   var Transition = ((_slots$desktopTransit = slots == null ? void 0 : slots.desktopTransition) != null ? _slots$desktopTransit : reduceAnimations) ? Fade : Grow;
-  var TrapFocus = (_slots$desktopTrapFoc = slots == null ? void 0 : slots.desktopTrapFocus) != null ? _slots$desktopTrapFoc : MuiTrapFocus;
+  var FocusTrap = (_slots$desktopTrapFoc = slots == null ? void 0 : slots.desktopTrapFocus) != null ? _slots$desktopTrapFoc : BaseFocusTrap;
   var Paper = (_slots$desktopPaper = slots == null ? void 0 : slots.desktopPaper) != null ? _slots$desktopPaper : PickersPopperPaper;
   var Popper = (_slots$popper = slots == null ? void 0 : slots.popper) != null ? _slots$popper : PickersPopperRoot;
   var popperProps = useSlotProps({
@@ -293,7 +293,7 @@ export function PickersPopper(inProps) {
     children: function children(_ref3) {
       var TransitionProps = _ref3.TransitionProps,
         popperPlacement = _ref3.placement;
-      return /*#__PURE__*/_jsx(TrapFocus, _extends({
+      return /*#__PURE__*/_jsx(FocusTrap, _extends({
         open: open,
         disableAutoFocus: true
         // pickers are managing focus position manually

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

@@ -396,21 +396,28 @@ export var splitFormatIntoSections = function splitFormatIntoSections(utils, tim
   var escapedParts = getEscapedPartsFromFormat(utils, expandedFormat);
 
   // This RegExp test if the beginning of a string correspond to a supported token
-  var isTokenStartRegExp = new RegExp("^(".concat(Object.keys(utils.formatTokenMap).join('|'), ")"));
+  var isTokenStartRegExp = new RegExp("^(".concat(Object.keys(utils.formatTokenMap).sort(function (a, b) {
+    return b.length - a.length;
+  }) // Sort to put longest word first
+  .join('|'), ")"), 'g') // used to get access to lastIndex state
+  ;
+
   var currentTokenValue = '';
-  var _loop = function _loop(i) {
+  var _loop = function _loop(_i) {
     var escapedPartOfCurrentChar = escapedParts.find(function (escapeIndex) {
-      return escapeIndex.start <= i && escapeIndex.end >= i;
+      return escapeIndex.start <= _i && escapeIndex.end >= _i;
     });
-    var char = expandedFormat[i];
+    var char = expandedFormat[_i];
     var isEscapedChar = escapedPartOfCurrentChar != null;
-    var potentialToken = "".concat(currentTokenValue).concat(expandedFormat.slice(i));
-    if (!isEscapedChar && char.match(/([A-Za-z]+)/) && isTokenStartRegExp.test(potentialToken)) {
-      currentTokenValue += char;
+    var potentialToken = "".concat(currentTokenValue).concat(expandedFormat.slice(_i));
+    var regExpMatch = isTokenStartRegExp.test(potentialToken);
+    if (!isEscapedChar && char.match(/([A-Za-z]+)/) && regExpMatch) {
+      currentTokenValue = potentialToken.slice(0, isTokenStartRegExp.lastIndex);
+      _i += isTokenStartRegExp.lastIndex - 1;
     } else {
       // If we are on the opening or closing character of an escaped part of the format,
       // Then we ignore this character.
-      var isEscapeBoundary = isEscapedChar && (escapedPartOfCurrentChar == null ? void 0 : escapedPartOfCurrentChar.start) === i || (escapedPartOfCurrentChar == null ? void 0 : escapedPartOfCurrentChar.end) === i;
+      var isEscapeBoundary = isEscapedChar && (escapedPartOfCurrentChar == null ? void 0 : escapedPartOfCurrentChar.start) === _i || (escapedPartOfCurrentChar == null ? void 0 : escapedPartOfCurrentChar.end) === _i;
       if (!isEscapeBoundary) {
         commitToken(currentTokenValue);
         currentTokenValue = '';
@@ -421,6 +428,7 @@ export var splitFormatIntoSections = function splitFormatIntoSections(utils, tim
         }
       }
     }
+    i = _i;
   };
   for (var i = 0; i < expandedFormat.length; i += 1) {
     _loop(i);

package/legacy/locales/fiFI.js

@@ -63,17 +63,31 @@ var fiFIPickers = {
   },
   // Table labels
   timeTableLabel: 'valitse aika',
-  dateTableLabel: 'valitse päivä'
-
+  dateTableLabel: 'valitse päivä',
   // Field section placeholders
-  // fieldYearPlaceholder: params => 'Y'.repeat(params.digitAmount),
-  // fieldMonthPlaceholder: params => params.contentType === 'letter' ? 'MMMM' : 'MM',
-  // fieldDayPlaceholder: () => 'DD',
-  // fieldWeekDayPlaceholder: params => params.contentType === 'letter' ? 'EEEE' : 'EE',
-  // fieldHoursPlaceholder: () => 'hh',
-  // fieldMinutesPlaceholder: () => 'mm',
-  // fieldSecondsPlaceholder: () => 'ss',
-  // fieldMeridiemPlaceholder: () => 'aa',
+  fieldYearPlaceholder: function fieldYearPlaceholder(params) {
+    return 'V'.repeat(params.digitAmount);
+  },
+  fieldMonthPlaceholder: function fieldMonthPlaceholder(params) {
+    return params.contentType === 'letter' ? 'KKKK' : 'KK';
+  },
+  fieldDayPlaceholder: function fieldDayPlaceholder() {
+    return 'PP';
+  },
+  fieldWeekDayPlaceholder: function fieldWeekDayPlaceholder(params) {
+    return params.contentType === 'letter' ? 'EEEE' : 'EE';
+  },
+  fieldHoursPlaceholder: function fieldHoursPlaceholder() {
+    return 'tt';
+  },
+  fieldMinutesPlaceholder: function fieldMinutesPlaceholder() {
+    return 'mm';
+  },
+  fieldSecondsPlaceholder: function fieldSecondsPlaceholder() {
+    return 'ss';
+  },
+  fieldMeridiemPlaceholder: function fieldMeridiemPlaceholder() {
+    return 'aa';
+  }
 };
-
 export var fiFI = getPickersLocalization(fiFIPickers);

package/locales/fiFI.js

@@ -43,17 +43,15 @@ const fiFIPickers = {
   openTimePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Valitse aika, valittu aika on ${utils.format(value, 'fullTime')}` : 'Valitse aika',
   // Table labels
   timeTableLabel: 'valitse aika',
-  dateTableLabel: 'valitse päivä'
-
+  dateTableLabel: 'valitse päivä',
   // Field section placeholders
-  // fieldYearPlaceholder: params => 'Y'.repeat(params.digitAmount),
-  // fieldMonthPlaceholder: params => params.contentType === 'letter' ? 'MMMM' : 'MM',
-  // fieldDayPlaceholder: () => 'DD',
-  // fieldWeekDayPlaceholder: params => params.contentType === 'letter' ? 'EEEE' : 'EE',
-  // fieldHoursPlaceholder: () => 'hh',
-  // fieldMinutesPlaceholder: () => 'mm',
-  // fieldSecondsPlaceholder: () => 'ss',
-  // fieldMeridiemPlaceholder: () => 'aa',
+  fieldYearPlaceholder: params => 'V'.repeat(params.digitAmount),
+  fieldMonthPlaceholder: params => params.contentType === 'letter' ? 'KKKK' : 'KK',
+  fieldDayPlaceholder: () => 'PP',
+  fieldWeekDayPlaceholder: params => params.contentType === 'letter' ? 'EEEE' : 'EE',
+  fieldHoursPlaceholder: () => 'tt',
+  fieldMinutesPlaceholder: () => 'mm',
+  fieldSecondsPlaceholder: () => 'ss',
+  fieldMeridiemPlaceholder: () => 'aa'
 };
-
 export const fiFI = getPickersLocalization(fiFIPickers);

package/modern/DateCalendar/DateCalendar.js

@@ -275,7 +275,8 @@ export const DateCalendar = /*#__PURE__*/React.forwardRef(function DateCalendar(
     disableHighlightToday,
     readOnly,
     disabled,
-    timezone
+    timezone,
+    gridLabelId
   };
   const prevOpenViewRef = React.useRef(view);
   React.useEffect(() => {
@@ -329,7 +330,6 @@ export const DateCalendar = /*#__PURE__*/React.forwardRef(function DateCalendar(
           shouldDisableYear: shouldDisableYear,
           hasFocus: hasFocus,
           onFocusedViewChange: isViewFocused => setFocusedView('day', isViewFocused),
-          gridLabelId: gridLabelId,
           showDaysOutsideCurrentMonth: showDaysOutsideCurrentMonth,
           fixedWeekNumber: fixedWeekNumber,
           dayOfWeekFormatter: dayOfWeekFormatter,

package/modern/DateField/DateField.js

@@ -8,6 +8,7 @@ import PropTypes from 'prop-types';
 import MuiTextField from '@mui/material/TextField';
 import { useThemeProps } from '@mui/material/styles';
 import { useSlotProps } from '@mui/base/utils';
+import { refType } from '@mui/utils';
 import { useDateField } from './useDateField';
 import { jsx as _jsx } from "react/jsx-runtime";
 const DateField = /*#__PURE__*/React.forwardRef(function DateField(inProps, ref) {
@@ -174,9 +175,7 @@ process.env.NODE_ENV !== "production" ? DateField.propTypes = {
   /**
    * Pass a ref to the `input` element.
    */
-  inputRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
-    current: PropTypes.any.isRequired
-  })]),
+  inputRef: refType,
   /**
    * The label content.
    */

package/modern/DatePicker/DatePicker.js

@@ -5,6 +5,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import { useThemeProps } from '@mui/material/styles';
+import { refType } from '@mui/utils';
 import { DesktopDatePicker } from '../DesktopDatePicker';
 import { MobileDatePicker } from '../MobileDatePicker';
 import { DEFAULT_DESKTOP_MODE_MEDIA_QUERY } from '../internals/utils/utils';
@@ -136,9 +137,7 @@ process.env.NODE_ENV !== "production" ? DatePicker.propTypes = {
   /**
    * Pass a ref to the `input` element.
    */
-  inputRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
-    current: PropTypes.object
-  })]),
+  inputRef: refType,
   /**
    * The label content.
    */

package/modern/DateTimeField/DateTimeField.js

@@ -8,6 +8,7 @@ import PropTypes from 'prop-types';
 import MuiTextField from '@mui/material/TextField';
 import { useThemeProps } from '@mui/material/styles';
 import { useSlotProps } from '@mui/base/utils';
+import { refType } from '@mui/utils';
 import { useDateTimeField } from './useDateTimeField';
 import { jsx as _jsx } from "react/jsx-runtime";
 const DateTimeField = /*#__PURE__*/React.forwardRef(function DateTimeField(inProps, ref) {
@@ -184,9 +185,7 @@ process.env.NODE_ENV !== "production" ? DateTimeField.propTypes = {
   /**
    * Pass a ref to the `input` element.
    */
-  inputRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
-    current: PropTypes.any.isRequired
-  })]),
+  inputRef: refType,
   /**
    * The label content.
    */

package/modern/DateTimePicker/DateTimePicker.js

@@ -5,6 +5,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import { useThemeProps } from '@mui/material/styles';
+import { refType } from '@mui/utils';
 import { DesktopDateTimePicker } from '../DesktopDateTimePicker';
 import { MobileDateTimePicker } from '../MobileDateTimePicker';
 import { DEFAULT_DESKTOP_MODE_MEDIA_QUERY } from '../internals/utils/utils';
@@ -151,9 +152,7 @@ process.env.NODE_ENV !== "production" ? DateTimePicker.propTypes = {
   /**
    * Pass a ref to the `input` element.
    */
-  inputRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
-    current: PropTypes.object
-  })]),
+  inputRef: refType,
   /**
    * The label content.
    */

package/modern/DesktopDatePicker/DesktopDatePicker.js

@@ -2,6 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { resolveComponentProps } from '@mui/base/utils';
+import { refType } from '@mui/utils';
 import { singleItemValueManager } from '../internals/utils/valueManagers';
 import { useDatePickerDefaultizedProps } from '../DatePicker/shared';
 import { useLocaleText, useUtils, validateDate } from '../internals';
@@ -150,9 +151,7 @@ DesktopDatePicker.propTypes = {
   /**
    * Pass a ref to the `input` element.
    */
-  inputRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
-    current: PropTypes.object
-  })]),
+  inputRef: refType,
   /**
    * The label content.
    */

package/modern/DesktopDateTimePicker/DesktopDateTimePicker.js

@@ -2,6 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { resolveComponentProps } from '@mui/base/utils';
+import { refType } from '@mui/utils';
 import { singleItemValueManager } from '../internals/utils/valueManagers';
 import { DateTimeField } from '../DateTimeField';
 import { useDateTimePickerDefaultizedProps } from '../DateTimePicker/shared';
@@ -201,9 +202,7 @@ DesktopDateTimePicker.propTypes = {
   /**
    * Pass a ref to the `input` element.
    */
-  inputRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
-    current: PropTypes.object
-  })]),
+  inputRef: refType,
   /**
    * The label content.
    */

package/modern/DesktopTimePicker/DesktopTimePicker.js

@@ -2,6 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { resolveComponentProps } from '@mui/base/utils';
+import { refType } from '@mui/utils';
 import { singleItemValueManager } from '../internals/utils/valueManagers';
 import { TimeField } from '../TimeField';
 import { useTimePickerDefaultizedProps } from '../TimePicker/shared';
@@ -162,9 +163,7 @@ DesktopTimePicker.propTypes = {
   /**
    * Pass a ref to the `input` element.
    */
-  inputRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
-    current: PropTypes.object
-  })]),
+  inputRef: refType,
   /**
    * The label content.
    */

package/modern/MobileDatePicker/MobileDatePicker.js

@@ -2,6 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { resolveComponentProps } from '@mui/base/utils';
+import { refType } from '@mui/utils';
 import { useMobilePicker } from '../internals/hooks/useMobilePicker';
 import { useDatePickerDefaultizedProps } from '../DatePicker/shared';
 import { useLocaleText, useUtils, validateDate } from '../internals';
@@ -147,9 +148,7 @@ MobileDatePicker.propTypes = {
   /**
    * Pass a ref to the `input` element.
    */
-  inputRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
-    current: PropTypes.object
-  })]),
+  inputRef: refType,
   /**
    * The label content.
    */

package/modern/MobileDateTimePicker/MobileDateTimePicker.js

@@ -2,6 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { resolveComponentProps } from '@mui/base/utils';
+import { refType } from '@mui/utils';
 import { singleItemValueManager } from '../internals/utils/valueManagers';
 import { DateTimeField } from '../DateTimeField';
 import { useDateTimePickerDefaultizedProps } from '../DateTimePicker/shared';
@@ -173,9 +174,7 @@ MobileDateTimePicker.propTypes = {
   /**
    * Pass a ref to the `input` element.
    */
-  inputRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
-    current: PropTypes.object
-  })]),
+  inputRef: refType,
   /**
    * The label content.
    */

package/modern/MobileTimePicker/MobileTimePicker.js

@@ -2,6 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { resolveComponentProps } from '@mui/base/utils';
+import { refType } from '@mui/utils';
 import { singleItemValueManager } from '../internals/utils/valueManagers';
 import { TimeField } from '../TimeField';
 import { useTimePickerDefaultizedProps } from '../TimePicker/shared';
@@ -140,9 +141,7 @@ MobileTimePicker.propTypes = {
   /**
    * Pass a ref to the `input` element.
    */
-  inputRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
-    current: PropTypes.object
-  })]),
+  inputRef: refType,
   /**
    * The label content.
    */

package/modern/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"];
+const _excluded = ["className", "value", "defaultValue", "referenceDate", "disabled", "disableFuture", "disablePast", "maxDate", "minDate", "onChange", "shouldDisableMonth", "readOnly", "disableHighlightToday", "autoFocus", "onMonthFocus", "hasFocus", "onFocusedViewChange", "monthsPerRow", "timezone", "gridLabelId"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -71,7 +71,8 @@ export const MonthCalendar = /*#__PURE__*/React.forwardRef(function MonthCalenda
       hasFocus,
       onFocusedViewChange,
       monthsPerRow = 3,
-      timezone: timezoneProp
+      timezone: timezoneProp,
+      gridLabelId
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const {
@@ -193,11 +194,14 @@ export const MonthCalendar = /*#__PURE__*/React.forwardRef(function MonthCalenda
   return /*#__PURE__*/_jsx(MonthCalendarRoot, _extends({
     ref: ref,
     className: clsx(classes.root, className),
-    ownerState: ownerState
+    ownerState: ownerState,
+    role: "radiogroup",
+    "aria-labelledby": gridLabelId
   }, other, {
     children: getMonthsInYear(utils, value ?? referenceDate).map(month => {
       const monthNumber = utils.getMonth(month);
       const monthText = utils.format(month, 'monthShort');
+      const monthLabel = utils.format(month, 'month');
       const isSelected = monthNumber === selectedMonth;
       const isDisabled = disabled || isMonthDisabled(month);
       return /*#__PURE__*/_jsx(PickersMonth, {
@@ -211,6 +215,7 @@ export const MonthCalendar = /*#__PURE__*/React.forwardRef(function MonthCalenda
         onFocus: handleMonthFocus,
         onBlur: handleMonthBlur,
         "aria-current": todayMonth === monthNumber ? 'date' : undefined,
+        "aria-label": monthLabel,
         monthsPerRow: monthsPerRow,
         children: monthText
       }, monthText);
@@ -255,6 +260,7 @@ process.env.NODE_ENV !== "production" ? MonthCalendar.propTypes = {
    * @default false
    */
   disablePast: PropTypes.bool,
+  gridLabelId: PropTypes.string,
   hasFocus: PropTypes.bool,
   /**
    * Maximal selectable date.

package/modern/MonthCalendar/PickersMonth.js

@@ -1,6 +1,6 @@
 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", "monthsPerRow"];
+const _excluded = ["autoFocus", "children", "disabled", "selected", "value", "tabIndex", "onClick", "onKeyDown", "onFocus", "onBlur", "aria-current", "aria-label", "monthsPerRow"];
 import * as React from 'react';
 import { styled, alpha, useThemeProps } from '@mui/material/styles';
 import { unstable_composeClasses as composeClasses, unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
@@ -85,13 +85,15 @@ export const PickersMonth = /*#__PURE__*/React.memo(function PickersMonth(inProp
       autoFocus,
       children,
       disabled,
+      selected,
       value,
       tabIndex,
       onClick,
       onKeyDown,
       onFocus,
       onBlur,
-      'aria-current': ariaCurrent
+      'aria-current': ariaCurrent,
+      'aria-label': ariaLabel
       // We don't want to forward this prop to the root element
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
@@ -110,8 +112,11 @@ export const PickersMonth = /*#__PURE__*/React.memo(function PickersMonth(inProp
       ref: ref,
       disabled: disabled,
       type: "button",
+      role: "radio",
       tabIndex: disabled ? -1 : tabIndex,
       "aria-current": ariaCurrent,
+      "aria-checked": selected,
+      "aria-label": ariaLabel,
       onClick: event => onClick(event, value),
       onKeyDown: event => onKeyDown(event, value),
       onFocus: event => onFocus(event, value),

package/modern/TimeClock/Clock.js

@@ -7,8 +7,9 @@ import { styled, useThemeProps } from '@mui/material/styles';
 import { unstable_useEnhancedEffect as useEnhancedEffect, unstable_composeClasses as composeClasses } from '@mui/utils';
 import { ClockPointer } from './ClockPointer';
 import { useLocaleText, useUtils } from '../internals/hooks/useUtils';
-import { getHours, getMinutes } from './shared';
+import { CLOCK_HOUR_WIDTH, getHours, getMinutes } from './shared';
 import { getClockUtilityClass } from './clockClasses';
+import { formatMeridiem } from '../internals/utils/date-utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
@@ -22,7 +23,8 @@ const useUtilityClasses = ownerState => {
     squareMask: ['squareMask'],
     pin: ['pin'],
     amButton: ['amButton'],
-    pmButton: ['pmButton']
+    pmButton: ['pmButton'],
+    meridiemText: ['meridiemText']
   };
   return composeClasses(slots, getClockUtilityClass, classes);
 };
@@ -111,7 +113,10 @@ const ClockAmButton = styled(IconButton, {
   zIndex: 1,
   position: 'absolute',
   bottom: 8,
-  left: 8
+  left: 8,
+  paddingLeft: 4,
+  paddingRight: 4,
+  width: CLOCK_HOUR_WIDTH
 }, ownerState.meridiemMode === 'am' && {
   backgroundColor: (theme.vars || theme).palette.primary.main,
   color: (theme.vars || theme).palette.primary.contrastText,
@@ -130,7 +135,10 @@ const ClockPmButton = styled(IconButton, {
   zIndex: 1,
   position: 'absolute',
   bottom: 8,
-  right: 8
+  right: 8,
+  paddingLeft: 4,
+  paddingRight: 4,
+  width: CLOCK_HOUR_WIDTH
 }, ownerState.meridiemMode === 'pm' && {
   backgroundColor: (theme.vars || theme).palette.primary.main,
   color: (theme.vars || theme).palette.primary.contrastText,
@@ -138,6 +146,15 @@ const ClockPmButton = styled(IconButton, {
     backgroundColor: (theme.vars || theme).palette.primary.light
   }
 }));
+const ClockMeridiemText = styled(Typography, {
+  name: 'MuiClock',
+  slot: 'meridiemText',
+  overridesResolver: (_, styles) => styles.meridiemText
+})({
+  overflow: 'hidden',
+  whiteSpace: 'nowrap',
+  textOverflow: 'ellipsis'
+});
 
 /**
  * @ignore - internal component.
@@ -298,18 +315,22 @@ export function Clock(inProps) {
         disabled: disabled || meridiemMode === null,
         ownerState: ownerState,
         className: classes.amButton,
-        children: /*#__PURE__*/_jsx(Typography, {
+        title: formatMeridiem(utils, 'am'),
+        children: /*#__PURE__*/_jsx(ClockMeridiemText, {
           variant: "caption",
-          children: "AM"
+          className: classes.meridiemText,
+          children: formatMeridiem(utils, 'am')
         })
       }), /*#__PURE__*/_jsx(ClockPmButton, {
         disabled: disabled || meridiemMode === null,
         onClick: readOnly ? undefined : () => handleMeridiemChange('pm'),
         ownerState: ownerState,
         className: classes.pmButton,
-        children: /*#__PURE__*/_jsx(Typography, {
+        title: formatMeridiem(utils, 'pm'),
+        children: /*#__PURE__*/_jsx(ClockMeridiemText, {
           variant: "caption",
-          children: "PM"
+          className: classes.meridiemText,
+          children: formatMeridiem(utils, 'pm')
         })
       })]
     })]

package/modern/TimeClock/clockClasses.js

@@ -2,4 +2,4 @@ import { unstable_generateUtilityClass as generateUtilityClass, unstable_generat
 export function getClockUtilityClass(slot) {
   return generateUtilityClass('MuiClock', slot);
 }
-export const clockClasses = generateUtilityClasses('MuiClock', ['root', 'clock', 'wrapper', 'squareMask', 'pin', 'amButton', 'pmButton']);
+export const clockClasses = generateUtilityClasses('MuiClock', ['root', 'clock', 'wrapper', 'squareMask', 'pin', 'amButton', 'pmButton', 'meridiemText']);

package/modern/TimeField/TimeField.js

@@ -8,6 +8,7 @@ import PropTypes from 'prop-types';
 import MuiTextField from '@mui/material/TextField';
 import { useThemeProps } from '@mui/material/styles';
 import { useSlotProps } from '@mui/base/utils';
+import { refType } from '@mui/utils';
 import { useTimeField } from './useTimeField';
 import { jsx as _jsx } from "react/jsx-runtime";
 const TimeField = /*#__PURE__*/React.forwardRef(function TimeField(inProps, ref) {
@@ -184,9 +185,7 @@ process.env.NODE_ENV !== "production" ? TimeField.propTypes = {
   /**
    * Pass a ref to the `input` element.
    */
-  inputRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
-    current: PropTypes.any.isRequired
-  })]),
+  inputRef: refType,
   /**
    * The label content.
    */

package/modern/TimePicker/TimePicker.js

@@ -5,6 +5,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import { useThemeProps } from '@mui/material/styles';
+import { refType } from '@mui/utils';
 import { DesktopTimePicker } from '../DesktopTimePicker';
 import { MobileTimePicker } from '../MobileTimePicker';
 import { DEFAULT_DESKTOP_MODE_MEDIA_QUERY } from '../internals/utils/utils';
@@ -125,9 +126,7 @@ process.env.NODE_ENV !== "production" ? TimePicker.propTypes = {
   /**
    * Pass a ref to the `input` element.
    */
-  inputRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
-    current: PropTypes.object
-  })]),
+  inputRef: refType,
   /**
    * The label content.
    */

package/modern/YearCalendar/PickersYear.js

@@ -87,6 +87,7 @@ export const PickersYear = /*#__PURE__*/React.memo(function PickersYear(inProps)
       className,
       children,
       disabled,
+      selected,
       value,
       tabIndex,
       onClick,
@@ -115,8 +116,10 @@ export const PickersYear = /*#__PURE__*/React.memo(function PickersYear(inProps)
       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),

package/modern/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"];
+const _excluded = ["autoFocus", "className", "value", "defaultValue", "referenceDate", "disabled", "disableFuture", "disablePast", "maxDate", "minDate", "onChange", "readOnly", "shouldDisableYear", "disableHighlightToday", "onYearFocus", "hasFocus", "onFocusedViewChange", "yearsPerRow", "timezone", "gridLabelId"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -77,7 +77,8 @@ export const YearCalendar = /*#__PURE__*/React.forwardRef(function YearCalendar(
       hasFocus,
       onFocusedViewChange,
       yearsPerRow = 3,
-      timezone: timezoneProp
+      timezone: timezoneProp,
+      gridLabelId
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const {
@@ -222,7 +223,9 @@ export const YearCalendar = /*#__PURE__*/React.forwardRef(function YearCalendar(
   return /*#__PURE__*/_jsx(YearCalendarRoot, _extends({
     ref: handleRef,
     className: clsx(classes.root, className),
-    ownerState: ownerState
+    ownerState: ownerState,
+    role: "radiogroup",
+    "aria-labelledby": gridLabelId
   }, other, {
     children: utils.getYearRange(minDate, maxDate).map(year => {
       const yearNumber = utils.getYear(year);
@@ -283,6 +286,7 @@ process.env.NODE_ENV !== "production" ? YearCalendar.propTypes = {
    * @default false
    */
   disablePast: PropTypes.bool,
+  gridLabelId: PropTypes.string,
   hasFocus: PropTypes.bool,
   /**
    * Maximal selectable date.