@mui/x-date-pickers 7.19.0 → 7.20.0

package/CHANGELOG.md

@@ -3,6 +3,96 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 7.20.0
+
+_Oct 11, 2024_
+
+We'd like to offer a big thanks to the 14 contributors who made this release possible. Here are some highlights ✨:
+
+- 📚 Updated ["What's new"](https://mui.com/x/whats-new/) page giving more detailed overview of the latest new features and other highlights
+- 📚 New [collapsible column groups demo](https://mui.com/x/react-data-grid/column-groups/#collapsible-column-groups) for the Data Grid component
+- 📚 New [Tree Item Customization](https://mui.com/x/react-tree-view/tree-item-customization/) documentation to learn how to use the new APIs to create custom Tree Items. The old APIs (`props.ContentComponent` and `props.ContentProps`) have been deprecated and will be removed in the new major version of the Tree View component.
+- 🌍 Improve Japanese (ja-JP) locale on the Data Grid component
+- 🐞 Bugfixes
+- 📚 Other documentation improvements
+
+Special thanks go out to the community contributors who have helped make this release possible:
+@k-rajat19, @kalyan90, @uma-neko, @vfbiby.
+Following are all team members who have contributed to this release: @alelthomas, @arminmeh, @arthurbalduini,
+@cherniavskii, @flaviendelangle, @JCQuintas, @MBilalShafi, @noraleonte, @oliviertassinari, @samuelsycamore, @siriwatknp.
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### `@mui/x-data-grid@7.20.0`
+
+- [DataGrid] Add `onColumnHeaderContextMenu` event (#14734) @vfbiby
+- [DataGrid] Avoid row spanning computation of outdated rows (#14902) @MBilalShafi
+- [DataGrid] Fix scrollbar position not being updated after `scrollToIndexes` (#14888) @arminmeh
+- [DataGrid] Pass `rowId` param to `processRowUpdate` (#14821) @k-rajat19
+- [l10n] Improve Japanese (ja-JP) locale (#14870) @uma-neko
+
+#### `@mui/x-data-grid-pro@7.20.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@7.20.0`, plus:
+
+- [DataGridPro] Fix wording on the `rowSelectionPropagation` JSDoc and doc section (#14907) @flaviendelangle
+
+#### `@mui/x-data-grid-premium@7.20.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@7.20.0`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@7.20.0`
+
+- [pickers] Add `PageUp` and `PageDown` support for time components (#14812) @arthurbalduini
+- [pickers] Fix regression on `PickerValidDate` (#14896) @flaviendelangle
+- [pickers] Move the `DateFieldInPickerProps` interface to the `DatePicker` folder and rename it `DatePickerFieldProps` (same for time and date time) (#14828) @flaviendelangle
+
+#### `@mui/x-date-pickers-pro@7.20.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@7.20.0`.
+
+### Charts
+
+#### `@mui/x-charts@7.20.0`
+
+No changes since `@mui/x-charts@v7.19.0`.
+
+#### `@mui/x-charts-pro@7.0.0-beta.4` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-charts@7.20.0`.
+
+### Tree View
+
+#### `@mui/x-tree-view@7.20.0`
+
+- [TreeItem] Deprecate the `ContentComponent` and `ContentProps` props (#14908) @flaviendelangle
+- [TreeView] Rework how items are being rendered in Rich Tree View components (#14749) @flaviendelangle
+
+### Docs
+
+- [docs] Update "What's new" page (#14858) @cherniavskii
+- [docs] Add collapsible column groups demo (#14818) @cherniavskii
+- [docs] Add custom columns panel demo (#14825) @cherniavskii
+- [docs] Capitalize all instances of "Data Grid" (#14884) @samuelsycamore
+- [docs] Divide charts `tooltip` and `highlighting` pages (#14824) @JCQuintas
+- [docs] Document the `TreeItem2` component and the `useTreeItem2` hook (#14551) @noraleonte
+- [docs] Fix column pinning for "Disable detail panel content scroll" section (#14854 and #14885) @kalyan90
+- [docs] Fix detail panel demo not working well with pinned columns (#14883) @cherniavskii
+- [docs] New recipe of a read-only field (#14606) @flaviendelangle
+- [docs] Change demo name example (#14822) @alelthomas
+
+### Core
+
+- [core] Support `@mui/utils` v6 (#14867) @siriwatknp
+- [code-infra] Remove deprecated `data-mui-test` in favour of `data-testid` (#14882) @JCQuintas
+- [code-infra] Update renovate config and add a `vitest` group (#14856) @JCQuintas
+- [test] Replace `waitFor()` with `act()` (#14851) @oliviertassinari
+- [test] Restore "pnpm tc" CLI (#14852) @oliviertassinari
+
 ## 7.19.0
 
 _Oct 4, 2024_
@@ -90,13 +180,13 @@ Same changes as in `@mui/x-charts@7.19.0`.
 
 - [TreeView] Apply experimental features in `getDefaultizedParams` instead of in the plugin render (#14661) @flaviendelangle
 - [TreeView] Export `publicAPI` form `useTreeItem2Utils` (#14729) @noraleonte
-- [TreeView] Fix cursor navigation interfering with browser shortcut keys  (#14798) @sai6855
+- [TreeView] Fix cursor navigation interfering with browser shortcut keys (#14798) @sai6855
 - [TreeView] Fix invalid test for items reordering (#14665) @flaviendelangle
 - [TreeView] Remove `instance.getTreeItemIdAttribute` (#14667) @flaviendelangle
 
 ### Docs
 
-- [docs] Added warning callout for Firefox reordering bug  (#14516) @michelengelen
+- [docs] Added warning callout for Firefox reordering bug (#14516) @michelengelen
 - [docs] Copyedit `pages.ts` navigation (#14782) @samuelsycamore
 - [docs] Fix typo in row spanning doc (#14770) @flaviendelangle
 - [docs] Fix typo in the Tree View migration guide to v7 (#14727) @Sanderand
@@ -121,7 +211,7 @@ We'd like to offer a big thanks to the 14 contributors who made this release pos
 
 - 💫 Support [Row spanning](https://mui.com/x/react-data-grid/row-spanning/) on the Data Grid that automatically merges the consecutive cells in a column based on the cell value
 
-  <img width="600" src="https://github.com/user-attachments/assets/d32ec936-d238-4c92-9e1a-af6788d74cdf" alt="data grid row spanning" />
+  <img width="600" src="https://github.com/user-attachments/assets/d32ec936-d238-4c92-9e1a-af6788d74cdf" alt="Data Grid row spanning" />
 
 - ⏰ Support `date-fns` v4 (#14673) @LukasTy
 - 🎉 Add option for Pickers to change the order of displayed years (#11780) @thomasmoon
@@ -560,7 +650,7 @@ We'd like to offer a big thanks to the 12 contributors who made this release pos
 #### `@mui/x-data-grid@7.13.0`
 
 - [DataGrid] Fix CSV export for `null` and `undefined` values (#14166) @k-rajat19
-- [DataGrid] Fix error logged during skeleton loading with nested data grid (#14186) @KenanYusuf
+- [DataGrid] Fix error logged during skeleton loading with nested Data Grid (#14186) @KenanYusuf
 - [DataGrid] Remove needless check in `useGridStateInitialization` (#14181) @k-rajat19
 - [DataGrid] Add recipe for persisting filters in local storage (#14208) @cherniavskii
 - [l10n] Improve Vietnamese (vi-VN) locale (#14216) @hungnd-casso
@@ -678,6 +768,8 @@ Same changes as in `@mui/x-charts@7.12.1`, plus:
 
 #### `@mui/x-tree-view@7.12.1`
 
+No changes since `@mui/x-tree-view@7.12.0`.
+
 ### Docs
 
 - [docs] Add a warning to promote the usage of `updateRows` (#14027) @MBilalShafi
@@ -1528,7 +1620,7 @@ Same changes as in `@mui/x-date-pickers@7.6.0`.
 - [docs] Fix a small typo in property comment (#13245) @Janpot
 - [docs] Improve the Data Grid FAQ page (#13258) @MBilalShafi
 - [docs] Removes unused lines in TreeItem2 styling (#13264) @arthurbalduini
-- [docs] Small improvements on accessibility data grid doc (#13233) @arthurbalduini
+- [docs] Small improvements on accessibility Data Grid doc (#13233) @arthurbalduini
 - [docs] Update Pickers demo configurations (#13303) @LukasTy
 
 ### Core
@@ -1542,7 +1634,7 @@ Same changes as in `@mui/x-date-pickers@7.6.0`.
 - [test] Use test-utils from npm (#12880) @michaldudak
 - [typescript] Remove duplicate `DateRangePosition` type in favor of `RangePosition` (#13288) @LukasTy
 
-## v7.5.1
+## 7.5.1
 
 _May 23, 2024_
 
@@ -1602,7 +1694,7 @@ Same changes as in `@mui/x-date-pickers@7.5.1`.
 - [code-infra] Run corepack enable on all CI jobs (#13205) @Janpot
 - [code-infra] Use `nx` for lerna tasks (#13166) @LukasTy
 
-## v7.5.0
+## 7.5.0
 
 _May 17, 2024_
 
@@ -2127,7 +2219,7 @@ Same changes as in `@mui/x-date-pickers@7.1.1`, plus:
 - [docs] Fix typo in `getItemId` prop description (#12637) @flaviendelangle
 - [docs] Make the Charts `margin` usage more visible (#12591) @alexfauquette
 - [docs] Match IE 11 spacing with Material UI @oliviertassinari
-- [docs] Move data grid interfaces to standard API page layout (#12016) @alexfauquette
+- [docs] Move Data Grid interfaces to standard API page layout (#12016) @alexfauquette
 - [docs] Remove ` around @default values (#12158) @alexfauquette
 - [docs] Remove `day` from the default `dayOfWeekFormatter` function params (#12644) @LukasTy
 - [docs] Use `TreeItem2` for icon expansion example on `RichTreeView` (#12563) @flaviendelangle
@@ -3568,7 +3660,7 @@ Same changes as in `@mui/x-date-pickers@7.0.0-alpha.9`.
 - [docs] Fix generated tree view API docs (#11737) @LukasTy
 - [docs] Generate docs for Tree View slots (#11730) @flaviendelangle
 - [docs] Improve codemod for v7 (#11650) @oliviertassinari
-- [docs] Improve data grid `pageSizeOptions` prop documentation (#11682) @oliviertassinari
+- [docs] Improve Data Grid `pageSizeOptions` prop documentation (#11682) @oliviertassinari
 - [docs] Parse markdown on API docs demo titles (#11728) @LukasTy
 - [docs] Remove the description from the `className` prop (#11693) @oliviertassinari
 - [docs] Uplift `SimpleTreeView` customization examples (#11424) @noraleonte
@@ -3656,8 +3748,8 @@ Same changes as in `@mui/x-date-pickers@7.0.0-alpha.8`.
 - [docs] Fix parsing of `x-date-pickers-pro` demo adapter imports (#11628) @LukasTy
 - [docs] Improve `git diff` format @oliviertassinari
 - [docs] Push up the MUI X brand (#11533) @oliviertassinari
-- [docs] Remove old data grid translation files (#11646) @cherniavskii
-- [docs] Improve Server-side data grid docs (#11589) @oliviertassinari
+- [docs] Remove old Data Grid translation files (#11646) @cherniavskii
+- [docs] Improve Server-side Data Grid docs (#11589) @oliviertassinari
 - [docs] Improve charts landing page (#11570) @oliviertassinari
 
 ### Core
@@ -4167,7 +4259,7 @@ We'd like to offer a big thanks to the 15 contributors who made this release pos
 
 - The clipboard related exports `ignoreValueFormatterDuringExport` and `splitClipboardPastedText` are no longer prefixed with `unstable_`.
 
-- The deprecated constants `SUBMIT_FILTER_STROKE_TIME` and `SUBMIT_FILTER_DATE_STROKE_TIME` have been removed from the `DataGrid` exports. Use the [`filterDebounceMs`](https://next.mui.com/x/api/data-grid/data-grid/#data-grid-prop-filterDebounceMs) prop to customize filter debounce time.
+- The deprecated constants `SUBMIT_FILTER_STROKE_TIME` and `SUBMIT_FILTER_DATE_STROKE_TIME` have been removed from the Data Grid exports. Use the [`filterDebounceMs`](https://next.mui.com/x/api/data-grid/data-grid/#data-grid-prop-filterDebounceMs) prop to customize filter debounce time.
 
 - The `slots.preferencesPanel` slot and the `slotProps.preferencesPanel` prop were removed. Use `slots.panel` and `slotProps.panel` instead.
 
@@ -4879,7 +4971,7 @@ A special shoutout to thank the 12 contributors who made this release possible.
 - 🚀 First v7 alpha release
 - ✨ Fix aggregation label not showing when `renderHeader` is used (#10961) @cherniavskii
 - 📘 Server side data source [early documentation](https://mui.com/x/react-data-grid/server-side-data/)
-- 💫 New recipes added for the data grid
+- 💫 New recipes added for the Data Grid
 - 📈 `<ChartsReferenceLine />` component is now available
 - 🌍 Add Basque (eu) locale, improve Czech (cs-CZ) and Spanish (es-ES) locales
 - 🐞 Bugfixes

package/DateCalendar/DateCalendar.js

@@ -487,7 +487,7 @@ process.env.NODE_ENV !== "production" ? DateCalendar.propTypes = {
   /**
    * Component displaying when passed `loading` true.
    * @returns {React.ReactNode} The node to render when loading.
-   * @default () => <span data-mui-test="loading-progress">...</span>
+   * @default () => <span>...</span>
    */
   renderLoading: PropTypes.func,
   /**

package/DateCalendar/DateCalendar.types.d.ts

@@ -41,7 +41,7 @@ export interface ExportedDateCalendarProps<TDate extends PickerValidDate> extend
     /**
      * Component displaying when passed `loading` true.
      * @returns {React.ReactNode} The node to render when loading.
-     * @default () => <span data-mui-test="loading-progress">...</span>
+     * @default () => <span>...</span>
      */
     renderLoading?: () => React.ReactNode;
     /**

package/DateField/DateField.types.d.ts

@@ -2,17 +2,12 @@ import * as React from 'react';
 import { SlotComponentProps } from '@mui/utils';
 import TextField from '@mui/material/TextField';
 import { ExportedUseClearableFieldProps, UseClearableFieldSlots, UseClearableFieldSlotProps } from '../hooks/useClearableField';
-import { DateValidationError, FieldSection, PickerValidDate, BuiltInFieldTextFieldProps, BaseSingleInputFieldProps } from '../models';
+import { DateValidationError, FieldSection, PickerValidDate, BuiltInFieldTextFieldProps } from '../models';
 import { UseFieldInternalProps } from '../internals/hooks/useField';
-import { MakeOptional, DefaultizedProps } from '../internals/models/helpers';
+import { MakeOptional } from '../internals/models/helpers';
 import { BaseDateValidationProps, DayValidationProps, MonthValidationProps, YearValidationProps } from '../internals/models/validation';
 export interface UseDateFieldProps<TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean> extends MakeOptional<UseFieldInternalProps<TDate | null, TDate, FieldSection, TEnableAccessibleFieldDOMStructure, DateValidationError>, 'format'>, DayValidationProps<TDate>, MonthValidationProps<TDate>, YearValidationProps<TDate>, BaseDateValidationProps<TDate>, ExportedUseClearableFieldProps {
 }
-/**
- * Props the field can receive when used inside a date picker.
- * (`DatePicker`, `DesktopDatePicker` or `MobileDatePicker` component).
- */
-export type DateFieldInPickerProps<TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean> = DefaultizedProps<UseDateFieldProps<TDate, TEnableAccessibleFieldDOMStructure>, 'format' | 'timezone' | keyof BaseDateValidationProps<TDate>> & BaseSingleInputFieldProps<TDate | null, TDate, FieldSection, false, DateValidationError>;
 export type UseDateFieldComponentProps<TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean, TChildProps extends {}> = Omit<TChildProps, keyof UseDateFieldProps<TDate, TEnableAccessibleFieldDOMStructure>> & UseDateFieldProps<TDate, TEnableAccessibleFieldDOMStructure>;
 export type DateFieldProps<TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean = false> = UseDateFieldComponentProps<TDate, TEnableAccessibleFieldDOMStructure, BuiltInFieldTextFieldProps<TEnableAccessibleFieldDOMStructure>> & {
     /**

package/DateField/index.d.ts

@@ -1,3 +1,3 @@
 export { DateField } from './DateField';
 export { useDateField as unstable_useDateField } from './useDateField';
-export type { UseDateFieldProps, UseDateFieldComponentProps, DateFieldProps, DateFieldInPickerProps, } from './DateField.types';
+export type { UseDateFieldProps, UseDateFieldComponentProps, DateFieldProps, } from './DateField.types';

package/DatePicker/DatePicker.js

@@ -256,7 +256,7 @@ process.env.NODE_ENV !== "production" ? DatePicker.propTypes = {
   /**
    * Component displaying when passed `loading` true.
    * @returns {React.ReactNode} The node to render when loading.
-   * @default () => <span data-mui-test="loading-progress">...</span>
+   * @default () => <span>...</span>
    */
   renderLoading: PropTypes.func,
   /**

package/DatePicker/DatePicker.types.d.ts

@@ -1,6 +1,9 @@
+import { UseDateFieldProps } from '../DateField';
 import { DesktopDatePickerProps, DesktopDatePickerSlots, DesktopDatePickerSlotProps } from '../DesktopDatePicker';
+import { DefaultizedProps } from '../internals/models/helpers';
+import { BaseDateValidationProps } from '../internals/models/validation';
 import { MobileDatePickerProps, MobileDatePickerSlots, MobileDatePickerSlotProps } from '../MobileDatePicker';
-import { PickerValidDate } from '../models';
+import { BaseSingleInputFieldProps, DateValidationError, FieldSection, PickerValidDate } from '../models';
 export interface DatePickerSlots<TDate extends PickerValidDate> extends DesktopDatePickerSlots<TDate>, MobileDatePickerSlots<TDate> {
 }
 export interface DatePickerSlotProps<TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean> extends DesktopDatePickerSlotProps<TDate, TEnableAccessibleFieldDOMStructure>, MobileDatePickerSlotProps<TDate, TEnableAccessibleFieldDOMStructure> {
@@ -28,3 +31,7 @@ export interface DatePickerProps<TDate extends PickerValidDate, TEnableAccessibl
      */
     yearsPerRow?: 3 | 4;
 }
+/**
+ * Props the field can receive when used inside a `DatePicker`, `DesktopDatePicker` or `MobileDatePicker` component.
+ */
+export type DatePickerFieldProps<TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean = false> = DefaultizedProps<UseDateFieldProps<TDate, TEnableAccessibleFieldDOMStructure>, 'format' | 'timezone' | keyof BaseDateValidationProps<TDate>> & BaseSingleInputFieldProps<TDate | null, TDate, FieldSection, false, DateValidationError>;

package/DatePicker/index.d.ts

@@ -1,5 +1,5 @@
 export { DatePicker } from './DatePicker';
-export type { DatePickerProps, DatePickerSlots, DatePickerSlotProps } from './DatePicker.types';
+export type { DatePickerProps, DatePickerSlots, DatePickerSlotProps, DatePickerFieldProps, } from './DatePicker.types';
 export { DatePickerToolbar } from './DatePickerToolbar';
 export type { DatePickerToolbarProps } from './DatePickerToolbar';
 export { datePickerToolbarClasses } from './datePickerToolbarClasses';

package/DateTimeField/DateTimeField.types.d.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import { SlotComponentProps } from '@mui/utils';
 import TextField from '@mui/material/TextField';
-import { DateTimeValidationError, FieldSection, PickerValidDate, BuiltInFieldTextFieldProps, BaseSingleInputFieldProps } from '../models';
+import { DateTimeValidationError, FieldSection, PickerValidDate, BuiltInFieldTextFieldProps } from '../models';
 import { UseFieldInternalProps } from '../internals/hooks/useField';
-import { DefaultizedProps, MakeOptional } from '../internals/models/helpers';
+import { MakeOptional } from '../internals/models/helpers';
 import { BaseDateValidationProps, BaseTimeValidationProps, DateTimeValidationProps, DayValidationProps, MonthValidationProps, TimeValidationProps, YearValidationProps } from '../internals/models/validation';
 import { ExportedUseClearableFieldProps, UseClearableFieldSlots, UseClearableFieldSlotProps } from '../hooks/useClearableField';
 export interface UseDateTimeFieldProps<TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean> extends MakeOptional<UseFieldInternalProps<TDate | null, TDate, FieldSection, TEnableAccessibleFieldDOMStructure, DateTimeValidationError>, 'format'>, DayValidationProps<TDate>, MonthValidationProps<TDate>, YearValidationProps<TDate>, BaseDateValidationProps<TDate>, TimeValidationProps<TDate>, BaseTimeValidationProps, DateTimeValidationProps<TDate>, ExportedUseClearableFieldProps {
@@ -13,11 +13,6 @@ export interface UseDateTimeFieldProps<TDate extends PickerValidDate, TEnableAcc
      */
     ampm?: boolean;
 }
-/**
- * Props the field can receive when used inside a date time picker.
- * (`DateTimePicker`, `DesktopDateTimePicker` or `MobileDateTimePicker` component).
- */
-export type DateTimeFieldInPickerProps<TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean> = DefaultizedProps<UseDateTimeFieldProps<TDate, TEnableAccessibleFieldDOMStructure>, 'format' | 'timezone' | 'ampm' | keyof BaseDateValidationProps<TDate> | keyof BaseTimeValidationProps> & BaseSingleInputFieldProps<TDate | null, TDate, FieldSection, false, DateTimeValidationError>;
 export type UseDateTimeFieldComponentProps<TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean, TChildProps extends {}> = Omit<TChildProps, keyof UseDateTimeFieldProps<TDate, TEnableAccessibleFieldDOMStructure>> & UseDateTimeFieldProps<TDate, TEnableAccessibleFieldDOMStructure>;
 export type DateTimeFieldProps<TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean = false> = UseDateTimeFieldComponentProps<TDate, TEnableAccessibleFieldDOMStructure, BuiltInFieldTextFieldProps<TEnableAccessibleFieldDOMStructure>> & {
     /**

package/DateTimeField/index.d.ts

@@ -1,3 +1,3 @@
 export { DateTimeField } from './DateTimeField';
 export { useDateTimeField as unstable_useDateTimeField } from './useDateTimeField';
-export type { UseDateTimeFieldProps, UseDateTimeFieldComponentProps, DateTimeFieldProps, DateTimeFieldInPickerProps, } from './DateTimeField.types';
+export type { UseDateTimeFieldProps, UseDateTimeFieldComponentProps, DateTimeFieldProps, } from './DateTimeField.types';

package/DateTimePicker/DateTimePicker.js

@@ -294,7 +294,7 @@ process.env.NODE_ENV !== "production" ? DateTimePicker.propTypes = {
   /**
    * Component displaying when passed `loading` true.
    * @returns {React.ReactNode} The node to render when loading.
-   * @default () => <span data-mui-test="loading-progress">...</span>
+   * @default () => <span>...</span>
    */
   renderLoading: PropTypes.func,
   /**

package/DateTimePicker/DateTimePicker.types.d.ts

@@ -1,7 +1,10 @@
+import { UseDateTimeFieldProps } from '../DateTimeField';
 import { DesktopDateTimePickerProps, DesktopDateTimePickerSlots, DesktopDateTimePickerSlotProps } from '../DesktopDateTimePicker';
 import { DateOrTimeViewWithMeridiem } from '../internals/models';
+import { DefaultizedProps } from '../internals/models/helpers';
+import { BaseDateValidationProps, BaseTimeValidationProps } from '../internals/models/validation';
 import { MobileDateTimePickerProps, MobileDateTimePickerSlots, MobileDateTimePickerSlotProps } from '../MobileDateTimePicker';
-import { PickerValidDate } from '../models';
+import { BaseSingleInputFieldProps, DateTimeValidationError, FieldSection, PickerValidDate } from '../models';
 import { ExportedYearCalendarProps } from '../YearCalendar/YearCalendar.types';
 export interface DateTimePickerSlots<TDate extends PickerValidDate> extends DesktopDateTimePickerSlots<TDate>, MobileDateTimePickerSlots<TDate, DateOrTimeViewWithMeridiem> {
 }
@@ -30,3 +33,8 @@ export interface DateTimePickerProps<TDate extends PickerValidDate, TEnableAcces
      */
     yearsPerRow?: 3 | 4;
 }
+/**
+ * Props the field can receive when used inside a date time picker.
+ * (`DateTimePicker`, `DesktopDateTimePicker` or `MobileDateTimePicker` component).
+ */
+export type DateTimePickerFieldProps<TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean = false> = DefaultizedProps<UseDateTimeFieldProps<TDate, TEnableAccessibleFieldDOMStructure>, 'format' | 'timezone' | 'ampm' | keyof BaseDateValidationProps<TDate> | keyof BaseTimeValidationProps> & BaseSingleInputFieldProps<TDate | null, TDate, FieldSection, false, DateTimeValidationError>;

package/DateTimePicker/DateTimePickerTabs.js

@@ -87,7 +87,7 @@ const DateTimePickerTabs = function DateTimePickerTabs(inProps) {
     variant: "fullWidth",
     value: viewToTab(view),
     onChange: handleChange,
-    className: clsx(classes.root, className),
+    className: clsx(className, classes.root),
     sx: sx,
     children: [/*#__PURE__*/_jsx(Tab, {
       value: "date",

package/DateTimePicker/index.d.ts

@@ -1,5 +1,5 @@
 export { DateTimePicker } from './DateTimePicker';
-export type { DateTimePickerProps, DateTimePickerSlots, DateTimePickerSlotProps, } from './DateTimePicker.types';
+export type { DateTimePickerProps, DateTimePickerSlots, DateTimePickerSlotProps, DateTimePickerFieldProps, } from './DateTimePicker.types';
 export { DateTimePickerTabs } from './DateTimePickerTabs';
 export type { DateTimePickerTabsProps } from './DateTimePickerTabs';
 export { dateTimePickerTabsClasses } from './dateTimePickerTabsClasses';

package/DesktopDatePicker/DesktopDatePicker.js

@@ -277,7 +277,7 @@ DesktopDatePicker.propTypes = {
   /**
    * Component displaying when passed `loading` true.
    * @returns {React.ReactNode} The node to render when loading.
-   * @default () => <span data-mui-test="loading-progress">...</span>
+   * @default () => <span>...</span>
    */
   renderLoading: PropTypes.func,
   /**

package/DesktopDateTimePicker/DesktopDateTimePicker.js

@@ -402,7 +402,7 @@ DesktopDateTimePicker.propTypes = {
   /**
    * Component displaying when passed `loading` true.
    * @returns {React.ReactNode} The node to render when loading.
-   * @default () => <span data-mui-test="loading-progress">...</span>
+   * @default () => <span>...</span>
    */
   renderLoading: PropTypes.func,
   /**

package/DigitalClock/DigitalClock.js

@@ -23,6 +23,7 @@ import { DIGITAL_CLOCK_VIEW_HEIGHT } from "../internals/constants/dimensions.js"
 import { useControlledValueWithTimezone } from "../internals/hooks/useValueWithTimezone.js";
 import { singleItemValueManager } from "../internals/utils/valueManagers.js";
 import { useClockReferenceDate } from "../internals/hooks/useClockReferenceDate.js";
+import { getFocusedListItemIndex } from "../internals/utils/utils.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -104,6 +105,7 @@ export const DigitalClock = /*#__PURE__*/React.forwardRef(function DigitalClock(
   const utils = useUtils();
   const containerRef = React.useRef(null);
   const handleRef = useForkRef(ref, containerRef);
+  const listRef = React.useRef(null);
   const props = useThemeProps({
     props: inProps,
     name: 'MuiDigitalClock'
@@ -236,15 +238,52 @@ export const DigitalClock = /*#__PURE__*/React.forwardRef(function DigitalClock(
     }, (_, index) => utils.addMinutes(startOfDay, timeStep * (index + 1)))];
   }, [valueOrReferenceDate, timeStep, utils]);
   const focusedOptionIndex = timeOptions.findIndex(option => utils.isEqual(option, valueOrReferenceDate));
+  const handleKeyDown = event => {
+    switch (event.key) {
+      case 'PageUp':
+        {
+          if (!listRef.current) {
+            return;
+          }
+          const newIndex = getFocusedListItemIndex(listRef.current) - 5;
+          const children = listRef.current?.children;
+          const newFocusedIndex = Math.max(0, newIndex);
+          const childToFocus = children[newFocusedIndex];
+          if (childToFocus) {
+            childToFocus.focus();
+          }
+          event.preventDefault();
+          break;
+        }
+      case 'PageDown':
+        {
+          if (!listRef.current) {
+            return;
+          }
+          const newIndex = getFocusedListItemIndex(listRef.current) + 5;
+          const children = listRef.current?.children;
+          const newFocusedIndex = Math.min(children.length - 1, newIndex);
+          const childToFocus = children[newFocusedIndex];
+          if (childToFocus) {
+            childToFocus.focus();
+          }
+          event.preventDefault();
+          break;
+        }
+      default:
+    }
+  };
   return /*#__PURE__*/_jsx(DigitalClockRoot, _extends({
     ref: handleRef,
     className: clsx(classes.root, className),
     ownerState: ownerState
   }, other, {
     children: /*#__PURE__*/_jsx(DigitalClockList, {
+      ref: listRef,
       role: "listbox",
       "aria-label": translations.timePickerToolbarTitle,
       className: classes.list,
+      onKeyDown: handleKeyDown,
       children: timeOptions.map((option, index) => {
         if (skipDisabled && isTimeDisabled(option)) {
           return null;

package/MobileDatePicker/MobileDatePicker.js

@@ -274,7 +274,7 @@ MobileDatePicker.propTypes = {
   /**
    * Component displaying when passed `loading` true.
    * @returns {React.ReactNode} The node to render when loading.
-   * @default () => <span data-mui-test="loading-progress">...</span>
+   * @default () => <span>...</span>
    */
   renderLoading: PropTypes.func,
   /**

package/MobileDateTimePicker/MobileDateTimePicker.js

@@ -322,7 +322,7 @@ MobileDateTimePicker.propTypes = {
   /**
    * Component displaying when passed `loading` true.
    * @returns {React.ReactNode} The node to render when loading.
-   * @default () => <span data-mui-test="loading-progress">...</span>
+   * @default () => <span>...</span>
    */
   renderLoading: PropTypes.func,
   /**

package/MultiSectionDigitalClock/MultiSectionDigitalClockSection.js

@@ -10,6 +10,7 @@ import MenuItem from '@mui/material/MenuItem';
 import useForkRef from '@mui/utils/useForkRef';
 import { getMultiSectionDigitalClockSectionUtilityClass } from "./multiSectionDigitalClockSectionClasses.js";
 import { DIGITAL_CLOCK_VIEW_HEIGHT, MULTI_SECTION_CLOCK_SECTION_WIDTH } from "../internals/constants/dimensions.js";
+import { getFocusedListItemIndex } from "../internals/utils/utils.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -138,12 +139,48 @@ export const MultiSectionDigitalClockSection = /*#__PURE__*/React.forwardRef(fun
     containerRef.current.scrollTop = offsetTop - 4;
   });
   const focusedOptionIndex = items.findIndex(item => item.isFocused(item.value));
+  const handleKeyDown = event => {
+    switch (event.key) {
+      case 'PageUp':
+        {
+          if (!containerRef.current) {
+            return;
+          }
+          const newIndex = getFocusedListItemIndex(containerRef.current) - 5;
+          const children = containerRef.current?.children;
+          const newFocusedIndex = Math.max(0, newIndex);
+          const childToFocus = children[newFocusedIndex];
+          if (childToFocus) {
+            childToFocus.focus();
+          }
+          event.preventDefault();
+          break;
+        }
+      case 'PageDown':
+        {
+          if (!containerRef.current) {
+            return;
+          }
+          const newIndex = getFocusedListItemIndex(containerRef.current) + 5;
+          const children = containerRef.current?.children;
+          const newFocusedIndex = Math.min(children.length - 1, newIndex);
+          const childToFocus = children[newFocusedIndex];
+          if (childToFocus) {
+            childToFocus.focus();
+          }
+          event.preventDefault();
+          break;
+        }
+      default:
+    }
+  };
   return /*#__PURE__*/_jsx(MultiSectionDigitalClockSectionRoot, _extends({
     ref: handleRef,
     className: clsx(classes.root, className),
     ownerState: ownerState,
     autoFocusItem: autoFocus && active,
-    role: "listbox"
+    role: "listbox",
+    onKeyDown: handleKeyDown
   }, other, {
     children: items.map((option, index) => {
       const isItemDisabled = option.isDisabled?.(option.value);

package/StaticDatePicker/StaticDatePicker.js

@@ -208,7 +208,7 @@ StaticDatePicker.propTypes = {
   /**
    * Component displaying when passed `loading` true.
    * @returns {React.ReactNode} The node to render when loading.
-   * @default () => <span data-mui-test="loading-progress">...</span>
+   * @default () => <span>...</span>
    */
   renderLoading: PropTypes.func,
   /**

package/StaticDateTimePicker/StaticDateTimePicker.js

@@ -256,7 +256,7 @@ StaticDateTimePicker.propTypes = {
   /**
    * Component displaying when passed `loading` true.
    * @returns {React.ReactNode} The node to render when loading.
-   * @default () => <span data-mui-test="loading-progress">...</span>
+   * @default () => <span>...</span>
    */
   renderLoading: PropTypes.func,
   /**

package/TimeClock/Clock.js

@@ -274,6 +274,14 @@ export function Clock(inProps) {
         handleValueChange(viewValue - keyboardControlStep, 'partial');
         event.preventDefault();
         break;
+      case 'PageUp':
+        handleValueChange(viewValue + 5, 'partial');
+        event.preventDefault();
+        break;
+      case 'PageDown':
+        handleValueChange(viewValue - 5, 'partial');
+        event.preventDefault();
+        break;
       case 'Enter':
       case ' ':
         handleValueChange(viewValue, 'finish');

package/TimeField/TimeField.types.d.ts

@@ -2,9 +2,9 @@ import * as React from 'react';
 import { SlotComponentProps } from '@mui/utils';
 import TextField from '@mui/material/TextField';
 import { UseFieldInternalProps } from '../internals/hooks/useField';
-import { DefaultizedProps, MakeOptional } from '../internals/models/helpers';
+import { MakeOptional } from '../internals/models/helpers';
 import { BaseTimeValidationProps, TimeValidationProps } from '../internals/models/validation';
-import { FieldSection, PickerValidDate, TimeValidationError, BuiltInFieldTextFieldProps, BaseSingleInputFieldProps } from '../models';
+import { FieldSection, PickerValidDate, TimeValidationError, BuiltInFieldTextFieldProps } from '../models';
 import { ExportedUseClearableFieldProps, UseClearableFieldSlots, UseClearableFieldSlotProps } from '../hooks/useClearableField';
 export interface UseTimeFieldProps<TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean> extends MakeOptional<UseFieldInternalProps<TDate | null, TDate, FieldSection, TEnableAccessibleFieldDOMStructure, TimeValidationError>, 'format'>, TimeValidationProps<TDate>, BaseTimeValidationProps, ExportedUseClearableFieldProps {
     /**
@@ -13,11 +13,6 @@ export interface UseTimeFieldProps<TDate extends PickerValidDate, TEnableAccessi
      */
     ampm?: boolean;
 }
-/**
- * Props the field can receive when used inside a time picker.
- * (`TimePicker`, `DesktopTimePicker` or `MobileTimePicker` component).
- */
-export type TimeFieldInPickerProps<TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean> = DefaultizedProps<UseTimeFieldProps<TDate, TEnableAccessibleFieldDOMStructure>, 'format' | 'timezone' | 'ampm' | keyof BaseTimeValidationProps> & BaseSingleInputFieldProps<TDate | null, TDate, FieldSection, false, TimeValidationError>;
 export type UseTimeFieldComponentProps<TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean, TChildProps extends {}> = Omit<TChildProps, keyof UseTimeFieldProps<TDate, TEnableAccessibleFieldDOMStructure>> & UseTimeFieldProps<TDate, TEnableAccessibleFieldDOMStructure>;
 export type TimeFieldProps<TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean = false> = UseTimeFieldComponentProps<TDate, TEnableAccessibleFieldDOMStructure, BuiltInFieldTextFieldProps<TEnableAccessibleFieldDOMStructure>> & {
     /**

package/TimeField/index.d.ts

@@ -1,3 +1,3 @@
 export { TimeField } from './TimeField';
 export { useTimeField as unstable_useTimeField } from './useTimeField';
-export type { UseTimeFieldProps, UseTimeFieldComponentProps, TimeFieldProps, TimeFieldInPickerProps, } from './TimeField.types';
+export type { UseTimeFieldProps, UseTimeFieldComponentProps, TimeFieldProps, } from './TimeField.types';