@mui/x-date-pickers 6.13.0 → 6.14.0

package/CHANGELOG.md

@@ -3,6 +3,83 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 6.14.0
+
+_Sep 14, 2023_
+
+We'd like to offer a big thanks to the 9 contributors who made this release possible. Here are some highlights ✨:
+
+- 🎁 Fix `YearCalendar` and `MonthCalendar` accessibility (#10312) @LukasTy
+
+  The `YearCalendar` and `MonthCalendar` items role has been changed from `button` to `radio` in order to improve the component's a11y support.
+  If you were relying on the mentioned components having a `button` role for items, you will need to update your usage to expect a `radio` role instead.
+
+- 🌍 Improve Japanese (ja-JP), Persian (fa-IR), and Vietnamese (vi-VN) locales on the data grid
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+### Data Grid
+
+#### `@mui/x-data-grid@6.14.0`
+
+- [l10n] Improve Japanese (ja-JP) locale (#10299) @makoto14
+- [l10n] Improve Persian (fa-IR) locale (#10277) @aminsaedi
+- [l10n] Improve Vietnamese (vi-VN) locale (#10280) @khangnguyen2100
+
+#### `@mui/x-data-grid-pro@6.14.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@6.14.0`.
+
+#### `@mui/x-data-grid-premium@6.14.0` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@6.14.0`, plus:
+
+- [DataGridPremium] Fix clipboard import cutting off at 100 rows (#9930) @gitstart
+
+### Date Pickers
+
+#### `@mui/x-date-pickers@6.14.0`
+
+- [pickers] Fix `YearCalendar` and `MonthCalendar` a11y (#10312) @LukasTy
+- [pickers] Localize `TimeClock` meridiem text (#10324) @LukasTy
+
+#### `@mui/x-date-pickers-pro@6.14.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@6.14.0`.
+
+### Charts / `@mui/x-charts@6.0.0-alpha.11`
+
+- [charts] Add default `barGapRatio` and increase `categoryGapRatio` (#10317) @LukasTy
+- [charts] Enable `eslint` on the package (#10330) @LukasTy
+
+### Tree View / `@mui/x-tree-view@6.0.0-alpha.3`
+
+- [TreeView] Fix box-sizing dependency (#10255) @oliviertassinari
+
+### Docs
+
+- [docs] Add conditional range picker props example (#10227) @LukasTy
+- [docs] Add toolbar to the multi-filters demo (#10223) @MBilalShafi
+- [docs] Avoid the use of "We" @oliviertassinari
+- [docs] Clarify MUI vs. MUI Core difference @oliviertassinari
+- [docs] Enable `ariaV7` flag for demos using `useDemoData` hook (#10204) @cherniavskii
+- [docs] Fix Tree View link to API references (#10282) @oliviertassinari
+- [docs] Fix image layout shift (#10313) @oliviertassinari
+- [docs] Fix link to MUI X from readme logo @oliviertassinari
+- [docs] Fix redirection to Base UI URLs @oliviertassinari
+- [docs] Improve Tree View demos (#10268) @oliviertassinari
+- [docs] Improve docs for ref type props (#10273) @michelengelen
+- [docs] Improve npm package README (#10269) @oliviertassinari
+- [docs] Improve the clarity of the npm links @oliviertassinari
+- [docs] Keep installation readme simple @oliviertassinari
+- [docs] Make each component feel more standalone @oliviertassinari
+
+### Core
+
+- [core] Add types extension for clarity @oliviertassinari
+- [core] Set logo height to fix layout shift in GitHub @oliviertassinari
+- [core] TrapFocus was renamed to FocusTrap @oliviertassinari
+
 ## 6.13.0
 
 _Sep 8, 2023_
@@ -12,6 +89,7 @@ We'd like to offer a big thanks to the 10 contributors who made this release pos
 - 🎁 Fix `anchorRef` behavior on range pickers (#10077) @LukasTy
 
   The range picker popup will now be anchored to the first input element and left aligned like other pickers.
+
 - 🌍 Improve Slovak (sk-SK) locale on the data grid
 - 🐞 Bugfixes
 - 📚 Documentation improvements
@@ -1838,7 +1916,7 @@ We'd like to offer a big thanks to the 8 contributors who made this release poss
 #### Changes
 
 - [DataGrid] Add interface for `singleSelect` column (#7685) @m4theushw
-- [DataGrid] Allow to pass props to the `TrapFocus` inside the panel wrapper (#7733) @ivek-Prajapatii
+- [DataGrid] Allow to pass props to the `FocusTrap` inside the panel wrapper (#7733) @ivek-Prajapatii
 - [DataGrid] Avoid unnecessary rerenders after `updateRows` (#7857) @cherniavskii
 - [DataGridPro] Change cursor when dragging a column (#7725) @sai6855
 - [DataGridPremium] Fix `leafField` to have correct focus value (#7950) @MBilalShafi

package/DateCalendar/DateCalendar.js

@@ -277,7 +277,8 @@ export const DateCalendar = /*#__PURE__*/React.forwardRef(function DateCalendar(
     disableHighlightToday,
     readOnly,
     disabled,
-    timezone
+    timezone,
+    gridLabelId
   };
   const prevOpenViewRef = React.useRef(view);
   React.useEffect(() => {
@@ -331,7 +332,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/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) {
@@ -175,9 +176,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/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/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) {
@@ -185,9 +186,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/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/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';
@@ -154,9 +155,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/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';
@@ -205,9 +206,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/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';
@@ -166,9 +167,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/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';
@@ -151,9 +152,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/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';
@@ -177,9 +178,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/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';
@@ -144,9 +145,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/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 != null ? 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/MonthCalendar/MonthCalendar.types.d.ts

@@ -57,4 +57,5 @@ export interface MonthCalendarProps<TDate> extends ExportedMonthCalendarProps, M
     onMonthFocus?: (month: number) => void;
     hasFocus?: boolean;
     onFocusedViewChange?: (hasFocus: boolean) => void;
+    gridLabelId?: string;
 }

package/MonthCalendar/PickersMonth.d.ts

@@ -5,6 +5,7 @@ export interface ExportedPickersMonthProps {
 }
 export interface PickersMonthProps extends ExportedPickersMonthProps {
     'aria-current'?: React.AriaAttributes['aria-current'];
+    'aria-label'?: React.AriaAttributes['aria-label'];
     autoFocus: boolean;
     children: React.ReactNode;
     disabled?: boolean;

package/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);
@@ -111,8 +113,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/README.md

@@ -1,7 +1,7 @@
-# @mui/x-date-pickers
+# MUI X Date Pickers
 
 This package is the community edition of the date and time picker components.
-It's part of MUI X, an open-core extension of MUI, with advanced components.
+It's part of [MUI X](https://mui.com/x/), an open-core extension of MUI Core, with advanced components.
 
 ## Installation
 
@@ -12,7 +12,7 @@ npm install @mui/x-date-pickers
 ```
 
 Then install the date library of your choice (if not already installed).
-We currently support 4 different date libraries:
+The pickers currently support the following date libraries:
 
 - [date-fns](https://date-fns.org/)
 - [Day.js](https://day.js.org/)
@@ -62,4 +62,4 @@ function App({ children }) {
 
 ## Documentation
 
-[The documentation](https://mui.com/x/react-date-pickers/getting-started/)
+Visit [https://mui.com/x/react-date-pickers/](https://mui.com/x/react-date-pickers/) to view the full documentation.

package/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/TimeClock/clockClasses.d.ts

@@ -13,6 +13,8 @@ export interface ClockClasses {
     amButton: string;
     /** Styles applied to the pm button element. */
     pmButton: string;
+    /** Styles applied to the meridiem typography element. */
+    meridiemText: string;
 }
 export type ClockClassKey = keyof ClockClasses;
 export declare function getClockUtilityClass(slot: string): string;

package/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/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) {
@@ -185,9 +186,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/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/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/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.

package/YearCalendar/YearCalendar.types.d.ts

@@ -57,4 +57,5 @@ export interface YearCalendarProps<TDate> extends ExportedYearCalendarProps, Yea
     onYearFocus?: (year: number) => void;
     hasFocus?: boolean;
     onFocusedViewChange?: (hasFocus: boolean) => void;
+    gridLabelId?: string;
 }