@mui/x-date-pickers-pro 8.0.0-alpha.1 → 8.0.0-alpha.2

package/CHANGELOG.md

@@ -5,6 +5,133 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## v8.0.0-alpha.2
+
+_Nov 29, 2024_
+
+We'd like to offer a big thanks to the 17 contributors who made this release possible. Here are some highlights ✨:
+
+- 👨🏽‍💻 Improve resize performance on the Data Gird.
+- `<ChartDataProvider />` and `<ChartsSurface />` components are now fully divided — [Learn more](https://next.mui.com/x/react-charts/composition/#overview).
+- Users can create their own HTML components using chart data — [Learn more](https://next.mui.com/x/react-charts/components/#html-components).
+- 🌍 Improve Spanish, Portuguese, Chinese locales on the Data Grid component.
+- 🌍 Improve Dutch locale on the Date and Time Pickers components.
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+Special thanks go out to the community contributors who have helped make this release possible:
+@dloeda, @headironc, @jedesroches, @k-rajat19, @lauri865, @mathzdev, @nphmuller, @zinoroman.
+Following are all team members who have contributed to this release:
+@arminmeh, @alexfauquette, @cherniavskii, @flaviendelangle, @JCQuintas, @KenanYusuf, @LukasTy, @MBilalShafi, @oliviertassinari.
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### Breaking changes
+
+- The `<GridOverlays />` component is not exported anymore.
+- The `indeterminateCheckboxAction` prop has been removed. Clicking on an indeterminate checkbox "selects" the unselected descendants.
+- The `apiRef.current.resize()` method was removed.
+- The default value of the `rowSelectionPropagation` prop has been changed to `{ parents: true, descendants: true }` which means that the selection will be propagated to the parents and descendants by default.
+  To revert to the previous behavior, pass `rowSelectionPropagation` as `{ parents: false, descendants: false }`.
+- If `estimatedRowCount` is used, the text provided to the [Table Pagination](/material-ui/api/table-pagination/) component from the Material UI library is updated and requires additional translations. Check the example at the end of [Index-based pagination section](/x/react-data-grid/pagination/#index-based-pagination).
+
+#### `@mui/x-data-grid@v8.0.0-alpha.2`
+
+- [DataGrid] Change test dom check from `/jsdom/` to `/jsdom|HappyDOM/`. (#15634) @jedesroches
+- [DataGrid] Clear timers on unmount (#15620) @cherniavskii
+- [DataGrid] Fix order of spread props on toolbar items (#15556) @KenanYusuf
+- [DataGrid] Improve resize performance (#15549) @lauri865
+- [DataGrid] Make estimation label more accurate (#15632) @arminmeh
+- [DataGrid] Remove `<GridOverlays />` export (#15573) @k-rajat19
+- [DataGrid] Remove `indeterminateCheckboxAction` prop (#15522) @MBilalShafi
+- [DataGrid] Remove try/catch from `<GridCell />` due to performance issues (#15616) @lauri865
+- [DataGrid] Remove unused `resize` method (#15599) @cherniavskii
+- [DataGrid] Support column virtualization with dynamic row height (#15541) @cherniavskii
+- [DataGrid] Update the default value for `rowSelectionPropagation` (#15523) @MBilalShafi
+- [l10n] Improve Chinese (zh-CN) locale (#15570) @headironc
+- [l10n] Improve Portuguese (pt-PT) locale (#15561) @mathzdev
+
+#### `@mui/x-data-grid-pro@v8.0.0-alpha.2` [![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@v8.0.0-alpha.2`, plus:
+
+- [DataGridPro] Fix header filtering with `boolean` column type (#15528) @k-rajat19
+- [DataGridPro] Fix pagination state not updating if the data source response has no rows (#15622) @zinoroman
+- [DataGridPro] Fix selection propagation issue on initialization (#15461) @MBilalShafi
+
+#### `@mui/x-data-grid-premium@v8.0.0-alpha.2` [![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@v8.0.0-alpha.2`.
+
+### Date and Time Pickers
+
+#### Breaking changes
+
+- The props received by the `layout` and the `toolbar` slots have been reworked — [Learn more](https://next.mui.com/x/migration/migration-pickers-v7/#do-not-pass-the-section-type-as-a-generic).
+
+- The `TSection` generic of the `FieldRef` type has been replaced with the `TValue` generic — [Learn more](https://next.mui.com/x/migration/migration-pickers-v7/#slots-breaking-changes).
+
+#### `@mui/x-date-pickers@v8.0.0-alpha.2`
+
+- [l10n] Improve Dutch (nl-NL) locale (#15564) @nphmuller
+- [pickers] Fix DST issue with `America/Asuncion` timezone and `AdapterMoment` (#15552) @flaviendelangle
+- [pickers] Improve validation internals (#15419) @flaviendelangle
+- [pickers] Remove `TSection` and strictly type `TValue` (#15434) @flaviendelangle
+- [pickers] Remove `orientation`, `isLandscape`, `isRtl`, `wrapperVariant` and `disabled` props from `PickersLayout` (#15494) @flaviendelangle
+- [pickers] Use the new `ownerState` in `<PickersCalendarHeader />`, `<PickersArrowSwitcher />` and `<DayCalendarSkeleton />` (#15499) @flaviendelangle
+- [pickers] Use the new `ownerState` object in all the field components (#15510) @flaviendelangle
+
+#### `@mui/x-date-pickers-pro@v8.0.0-alpha.2` [![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@v8.0.0-alpha.2`.
+
+### Charts
+
+#### Breaking changes
+
+- Charts Container don't have a `<div />` wrapping them anymore. All props are now passed to the root `<svg />` instead of the `<div />`.
+
+#### `@mui/x-charts@v8.0.0-alpha.2`
+
+- [charts] Allow the creation of custom HTML components using charts data (#15511) @JCQuintas
+- [charts] Flatten imports from `@mui/utils` and `@mui/system` (#15603) @alexfauquette
+- [charts] Introduce the plugin system (#15513) @alexfauquette
+- [charts] Prevent invalid `releasePointerCapture` (#15602) @alexfauquette
+- [charts] Fix custom Tooltip demos (#15631) @alexfauquette
+
+#### `@mui/x-charts-pro@v8.0.0-alpha.2` [![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@v8.0.0-alpha.2`.
+
+### Tree View
+
+#### `@mui/x-tree-view@v8.0.0-alpha.2`
+
+- [TreeView] Flatten import from `@mui/utils` and `@mui/system` (#15604) @alexfauquette
+
+#### `@mui/x-tree-view-pro@v8.0.0-alpha.2`
+
+Same changes as in `@mui/x-tree-view@v8.0.0-alpha.2`.
+
+### Docs
+
+- [docs] Fix 404 links (#15575) @oliviertassinari
+- [docs] Fix bash comments (#15571) @oliviertassinari
+- [docs] Fix Pickers theme augmentation example (#15672) @LukasTy
+- [docs] Replace use of "e.g." with "for example" (#15572) @oliviertassinari
+- [docs] Update stale `new` and `preview` tags in v8 docs (#15547) @JCQuintas
+- [docs] Fix layout shift image on Tree View docs (#15626) @oliviertassinari
+- [docs] Fix `anchorEl` API page for charts (#15625) @oliviertassinari
+- [docs] Add documentation for the list view feature (#15344) @KenanYusuf
+
+### Core
+
+- [core] Follow `()` function convention for docs @oliviertassinari
+- [core] Remove dead translation key (#15566) @oliviertassinari
+- [code-infra] Auto-merge `@types/node` bumps (#15591) @LukasTy
+
 ## v8.0.0-alpha.1
 
 _Nov 22, 2024_
@@ -17,8 +144,6 @@ We'd like to offer a big thanks to the 16 contributors who made this release pos
 - 🐞 Bugfixes
 - 📚 Documentation improvements
 
-### Breaking change
-
 Special thanks go out to the community contributors who have helped make this release possible:
 @CarlosLopezLg, @headironc, @hendrikpeilke, @k-rajat19, @lhilgert9, @viktormelin.
 Following are all team members who have contributed to this release:
@@ -56,7 +181,7 @@ Same changes as in `@mui/x-data-grid-pro@v8.0.0-alpha.1`, plus:
 #### Breaking change
 
 - The `FieldValueType` type has been renamed to `PickerValueType` — [Learn more](https://next.mui.com/x/migration/migration-pickers-v7/#renamed-variables).
-- The `toolbar` and `layout` slots no longer receive the  `disabled` and `readOnly` props — [Learn more](https://next.mui.com/x/migration/migration-pickers-v7/#slots-breaking-changes).
+- The `toolbar` and `layout` slots no longer receive the `disabled` and `readOnly` props — [Learn more](https://next.mui.com/x/migration/migration-pickers-v7/#slots-breaking-changes).
 
 #### `@mui/x-date-pickers@v8.0.0-alpha.1`
 
@@ -64,9 +189,9 @@ Same changes as in `@mui/x-data-grid-pro@v8.0.0-alpha.1`, plus:
 - [pickers] React 19 support (#15342) @arminmeh
 - [pickers] Add new properties to `PickerOwnerState` and `PickerContextValue` (#15415) @flaviendelangle
 - [pickers] Always use `props.value` when it changes (#15490) @flaviendelangle
-- [pickers] Ensure internal value timezone is updated  (#15435) @LukasTy
+- [pickers] Ensure internal value timezone is updated (#15435) @LukasTy
 - [pickers] Fix unused code in `<PickersToolbar />` component (#15515) @LukasTy
-- [pickers] Remove  `FieldValueType` in favor of `PickerValueType` (#15259) @arthurbalduini
+- [pickers] Remove `FieldValueType` in favor of `PickerValueType` (#15259) @arthurbalduini
 - [pickers] Remove the form props from the layout and the toolbar slots (#15492) @flaviendelangle
 - [pickers] Use `props.referenceDate` timezone when `props.value` and `props.defaultValue` are not defined (#15532) @flaviendelangle
 - [TimePicker] Prevent mouse events after `touchend` event (#15346) @arthurbalduini
@@ -82,12 +207,14 @@ Same changes as in `@mui/x-date-pickers@v8.0.0-alpha.1`, plus:
 #### Breaking change
 
 - The DX of the Tooltip customization has been refactored
+
   - The `tooltip` prop has been removed in favor of `slotProps.tooltip` for consistency.
-  - The `popper`, `axisContent`,  and `itemContent` slots have been removed in favor of the `tooltip` slot which overrides the entire tooltip.
+  - The `popper`, `axisContent`, and `itemContent` slots have been removed in favor of the `tooltip` slot which overrides the entire tooltip.
     - To override the tooltip content, use the `useItemTooltip` or `useAxisTooltip` hook to get the data, and wrap your component in `ChartsTooltipContainer` to follow the pointer position.
     - To override the tooltip placement, use the `ChartsItemTooltipContent` or `ChartsItemTooltipContent` to get default data and place them in your custom tooltip.
 
 - The library now uses the SVG `filter` attribute instead of `d3-color` for color manipulation.
+
   - This modification impacts the `LinePlot`, `AreaPlot`, and `BarPlot` components.
     If you've customized the `fill` of those elements, you might need to override it by using the CSS `filter`.
   - The `theme.styleOverride` is removed for `MuiLineElement`, `MuiAreaElement`, and `MuiBarElement` to improve performance.
@@ -338,6 +465,100 @@ Same changes as in `@mui/x-charts@8.0.0-alpha.0`.
 - [release] v8 preparation (#15054) @michelengelen
 - [test] Fix advanced list view regression test snapshot (#15260) @KenanYusuf
 
+## 7.23.0
+
+_Nov 29, 2024_
+
+We'd like to offer a big thanks to the 10 contributors who made this release possible. Here are some highlights ✨:
+
+- ✨ Support for a new display mode on the Data Grid with the [List View feature](https://mui.com/x/react-data-grid/list-view/), offering an extremely flexible way to render datasets and enabling developers to adapt how data is displayed across different screen sizes.
+
+  https://github.com/user-attachments/assets/61286adc-03fc-4323-9739-8ca726fcc16c
+
+- ⚛️ React 19 support
+- 📚 Documentation improvements
+- 🌍 Improve Spanish, Portuguese, Chinese locales on the Data Grid component.
+- 🌍 Improve Dutch locale on the Date and Time Picker components.
+- 🐞 Bugfixes
+
+Special thanks go out to the community contributors who have helped make this release possible:
+@dloeda, @headironc, @mathzdev, @nphmuller, @lhilgert9, @lauri865.
+Following are all team members who have contributed to this release:
+@oliviertassinari, @arminmeh, @KenanYusuf, @flaviendelangle, @MBilalShafi.
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### `@mui/x-data-grid@v7.23.0`
+
+- [DataGrid] React 19 support (#15557) @arminmeh
+- [DataGrid] Change test dom check from `/jsdom/` to `/jsdom|HappyDOM/`. (#15642) @jedesroches
+- [DataGrid] Fix last separator not being hidden when grid is scrollable (#15551) @KenanYusuf
+- [DataGrid] Fix order of spread props on toolbar items (#15556) @KenanYusuf
+- [DataGrid] Fix row-spanning in combination with column-pinning (#15460) @lhilgert9
+- [DataGrid] Improve resize performance (#15592) @lauri865
+- [DataGrid] Support column virtualization with dynamic row height (#15567) @cherniavskii
+- [DataGrid] Improve `GridCell` performance (#15621) @lauri865
+- [l10n] Improve Chinese (zh-CN) locale (#15570) @headironc
+- [l10n] Improve Portuguese (pt-PT) locale (#15561) @mathzdev
+
+#### `@mui/x-data-grid-pro@v7.23.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@v7.23.0`, plus:
+
+- [DataGridPro] Fix header filtering with `boolean` column type (#15640) @k-rajat19
+- [DataGridPro] Fix pagination state not updating if the data source response has no rows (#15643) @zinoroman
+- [DataGridPro] Fix selection propagation issue on initialization (#15593) @MBilalShafi
+
+#### `@mui/x-data-grid-premium@v7.23.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@v7.23.0`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@v7.23.0`
+
+- [pickers] React 19 support (#15557) @arminmeh
+- [pickers] Fix DST issue with `America/Asuncion` timezone and `AdapterMoment` (#15653) @flaviendelangle
+- [pickers] Use `props.referenceDate` timezone when `props.value` and `props.defaultValue` are not defined (#15544) @flaviendelangle
+- [l10n] Improve Dutch (nl-NL) locale (#15564) @nphmuller
+
+#### `@mui/x-date-pickers-pro@v7.23.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@v7.23.0`.
+
+### Charts
+
+#### `@mui/x-charts@v7.23.0`
+
+- [charts] React 19 support (#15557) @arminmeh
+- [charts] Prevent invalid `releasePointerCapture` (#15609) @alexfauquette
+
+#### `@mui/x-charts-pro@v7.23.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-charts@v7.23.0`.
+
+### Tree View
+
+#### `@mui/x-tree-view@v7.23.0`
+
+- [TreeView] React 19 support (#15557) @arminmeh
+
+#### `@mui/x-tree-view-pro@7.23.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-tree-view@7.23.0`.
+
+### Docs
+
+- [docs] Add data caching to lazy loaded detail panel demo (#15555) @cherniavskii
+- [docs] Remove selectors section from list view docs (#15639) @KenanYusuf
+- [docs] Add documentation for the list view feature (#15344) @KenanYusuf
+
+### Core
+
+- [core] Update @mui/monorepo (#15574) @oliviertassinari
+
 ## v7.22.3
 
 _Nov 21, 2024_
@@ -4803,7 +5024,7 @@ Same changes as in `@mui/x-data-grid-pro@7.0.0-alpha.5`.
 
   The `useClearableField` hook API has been simplified to now take a `props` parameter instead of a `fieldProps`, `InputProps`, `clearable`, `onClear`, `slots` and `slotProps` parameters.
 
-  You should now be able to directly pass the returned value from your field hook (e.g: `useDateField`) to `useClearableField`
+  You should now be able to directly pass the returned value from your field hook (for example `useDateField`) to `useClearableField`
 
   ```diff
    const fieldResponse = useDateField(props);

package/DateRangePicker/DateRangePicker.types.d.ts

@@ -1,7 +1,7 @@
 import { BaseSingleInputFieldProps, PickerRangeValue } from '@mui/x-date-pickers/internals';
 import { DesktopDateRangePickerProps, DesktopDateRangePickerSlots, DesktopDateRangePickerSlotProps } from '../DesktopDateRangePicker';
 import { MobileDateRangePickerProps, MobileDateRangePickerSlots, MobileDateRangePickerSlotProps } from '../MobileDateRangePicker';
-import { DateRangeValidationError, RangeFieldSection } from '../models';
+import { DateRangeValidationError } from '../models';
 import { ValidateDateRangeProps } from '../validation';
 export interface DateRangePickerSlots extends DesktopDateRangePickerSlots, MobileDateRangePickerSlots {
 }
@@ -28,4 +28,4 @@ export interface DateRangePickerProps<TEnableAccessibleFieldDOMStructure extends
 /**
  * Props the field can receive when used inside a date range picker (<DateRangePicker />, <DesktopDateRangePicker /> or <MobileDateRangePicker /> component).
  */
-export type DateRangePickerFieldProps<TEnableAccessibleFieldDOMStructure extends boolean = true> = ValidateDateRangeProps & BaseSingleInputFieldProps<PickerRangeValue, RangeFieldSection, TEnableAccessibleFieldDOMStructure, DateRangeValidationError>;
+export type DateRangePickerFieldProps<TEnableAccessibleFieldDOMStructure extends boolean = true> = ValidateDateRangeProps & BaseSingleInputFieldProps<PickerRangeValue, TEnableAccessibleFieldDOMStructure, DateRangeValidationError>;

package/DateRangePicker/shared.d.ts

@@ -1,11 +1,12 @@
 import * as React from 'react';
 import { DefaultizedProps } from '@mui/x-internals/types';
 import { LocalizedComponent } from '@mui/x-date-pickers/locales';
-import { BaseDateValidationProps, BasePickerInputProps, PickerViewRendererLookup, PickerRangeValue } from '@mui/x-date-pickers/internals';
+import { BasePickerInputProps, PickerViewRendererLookup, PickerRangeValue } from '@mui/x-date-pickers/internals';
 import { DateRangeValidationError } from '../models';
 import { DateRangeCalendarSlots, DateRangeCalendarSlotProps, ExportedDateRangeCalendarProps } from '../DateRangeCalendar';
 import { DateRangePickerToolbarProps, ExportedDateRangePickerToolbarProps } from './DateRangePickerToolbar';
 import { DateRangeViewRendererProps } from '../dateRangeViewRenderers';
+import { ValidateDateRangePropsToDefault } from '../validation/validateDateRange';
 export interface BaseDateRangePickerSlots extends DateRangeCalendarSlots {
     /**
      * Custom component for the toolbar rendered above the views.
@@ -34,6 +35,6 @@ export interface BaseDateRangePickerProps extends Omit<BasePickerInputProps<Pick
      */
     viewRenderers?: Partial<PickerViewRendererLookup<PickerRangeValue, 'day', DateRangeViewRendererProps<'day'>, {}>>;
 }
-type UseDateRangePickerDefaultizedProps<Props extends BaseDateRangePickerProps> = LocalizedComponent<DefaultizedProps<Props, keyof BaseDateValidationProps>>;
+type UseDateRangePickerDefaultizedProps<Props extends BaseDateRangePickerProps> = LocalizedComponent<DefaultizedProps<Props, ValidateDateRangePropsToDefault>>;
 export declare function useDateRangePickerDefaultizedProps<Props extends BaseDateRangePickerProps>(props: Props, name: string): UseDateRangePickerDefaultizedProps<Props>;
 export {};

package/DateTimeRangePicker/DateTimeRangePicker.types.d.ts

@@ -1,7 +1,7 @@
 import { BaseSingleInputFieldProps, PickerRangeValue } from '@mui/x-date-pickers/internals';
 import { DesktopDateTimeRangePickerProps, DesktopDateTimeRangePickerSlots, DesktopDateTimeRangePickerSlotProps } from '../DesktopDateTimeRangePicker';
 import { MobileDateTimeRangePickerProps, MobileDateTimeRangePickerSlots, MobileDateTimeRangePickerSlotProps } from '../MobileDateTimeRangePicker';
-import { DateTimeRangeValidationError, RangeFieldSection } from '../models';
+import { DateTimeRangeValidationError } from '../models';
 import type { ValidateDateTimeRangeProps } from '../validation';
 export interface DateTimeRangePickerSlots extends DesktopDateTimeRangePickerSlots, MobileDateTimeRangePickerSlots {
 }
@@ -28,4 +28,4 @@ export interface DateTimeRangePickerProps<TEnableAccessibleFieldDOMStructure ext
 /**
  * Props the field can receive when used inside a date time range picker (<DateTimeRangePicker />, <DesktopDateTimeRangePicker /> or <MobileDateTimeRangePicker /> component).
  */
-export type DateTimeRangePickerFieldProps<TEnableAccessibleFieldDOMStructure extends boolean = true> = ValidateDateTimeRangeProps & BaseSingleInputFieldProps<PickerRangeValue, RangeFieldSection, TEnableAccessibleFieldDOMStructure, DateTimeRangeValidationError>;
+export type DateTimeRangePickerFieldProps<TEnableAccessibleFieldDOMStructure extends boolean = true> = ValidateDateTimeRangeProps & BaseSingleInputFieldProps<PickerRangeValue, TEnableAccessibleFieldDOMStructure, DateTimeRangeValidationError>;

package/DateTimeRangePicker/DateTimeRangePickerTabs.js

@@ -7,7 +7,7 @@ import { styled, useThemeProps } from '@mui/material/styles';
 import composeClasses from '@mui/utils/composeClasses';
 import useEventCallback from '@mui/utils/useEventCallback';
 import { TimeIcon, DateRangeIcon, ArrowLeftIcon, ArrowRightIcon } from '@mui/x-date-pickers/icons';
-import { isDatePickerView } from '@mui/x-date-pickers/internals';
+import { isDatePickerView, usePickerPrivateContext } from '@mui/x-date-pickers/internals';
 import { usePickerTranslations } from '@mui/x-date-pickers/hooks';
 import IconButton from '@mui/material/IconButton';
 import Button from '@mui/material/Button';
@@ -25,10 +25,7 @@ const tabToView = tab => {
   }
   return 'hours';
 };
-const useUtilityClasses = ownerState => {
-  const {
-    classes
-  } = ownerState;
+const useUtilityClasses = classes => {
   const slots = {
     root: ['root'],
     tabButton: ['tabButton'],
@@ -79,10 +76,14 @@ const DateTimeRangePickerTabs = function DateTimeRangePickerTabs(inProps) {
     rangePosition,
     onRangePositionChange,
     className,
+    classes: classesProp,
     sx
   } = props;
   const translations = usePickerTranslations();
-  const classes = useUtilityClasses(props);
+  const {
+    ownerState
+  } = usePickerPrivateContext();
+  const classes = useUtilityClasses(classesProp);
   const value = React.useMemo(() => viewToTab(view, rangePosition), [view, rangePosition]);
   const isPreviousHidden = value === 'start-date';
   const isNextHidden = value === 'end-time';
@@ -121,7 +122,7 @@ const DateTimeRangePickerTabs = function DateTimeRangePickerTabs(inProps) {
     return null;
   }
   return /*#__PURE__*/_jsxs(DateTimeRangePickerTabsRoot, {
-    ownerState: props,
+    ownerState: ownerState,
     className: clsx(classes.root, className),
     sx: sx,
     children: [!isPreviousHidden ? /*#__PURE__*/_jsx(IconButton, {

package/DateTimeRangePicker/shared.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { DefaultizedProps } from '@mui/x-internals/types';
 import { LocalizedComponent } from '@mui/x-date-pickers/locales';
-import { BaseDateValidationProps, BasePickerInputProps, PickerViewRendererLookup, BaseClockProps, DesktopOnlyTimePickerProps, TimeViewWithMeridiem, UseViewsOptions, DateTimeValidationProps, DateOrTimeViewWithMeridiem, PickerRangeValue } from '@mui/x-date-pickers/internals';
+import { BasePickerInputProps, PickerViewRendererLookup, BaseClockProps, DesktopOnlyTimePickerProps, TimeViewWithMeridiem, UseViewsOptions, DateOrTimeViewWithMeridiem, PickerRangeValue } from '@mui/x-date-pickers/internals';
 import { TimeViewRendererProps } from '@mui/x-date-pickers/timeViewRenderers';
 import { DigitalClockSlots, DigitalClockSlotProps } from '@mui/x-date-pickers/DigitalClock';
 import { MultiSectionDigitalClockSlots, MultiSectionDigitalClockSlotProps } from '@mui/x-date-pickers/MultiSectionDigitalClock';
@@ -11,6 +11,7 @@ import { DateRangeCalendarSlots, DateRangeCalendarSlotProps, ExportedDateRangeCa
 import { DateTimeRangePickerToolbarProps, ExportedDateTimeRangePickerToolbarProps } from './DateTimeRangePickerToolbar';
 import { DateRangeViewRendererProps } from '../dateRangeViewRenderers';
 import { DateTimeRangePickerTabsProps, ExportedDateTimeRangePickerTabsProps } from './DateTimeRangePickerTabs';
+import { ExportedValidateDateTimeRangeProps, ValidateDateTimeRangePropsToDefault } from '../validation/validateDateTimeRange';
 export interface BaseDateTimeRangePickerSlots extends DateRangeCalendarSlots, DigitalClockSlots, MultiSectionDigitalClockSlots {
     /**
      * Tabs enabling toggling between date and time pickers.
@@ -36,7 +37,7 @@ export interface BaseDateTimeRangePickerSlotProps extends DateRangeCalendarSlotP
 export type DateTimeRangePickerRenderers<TView extends DateOrTimeViewWithMeridiem, TAdditionalProps extends {} = {}> = PickerViewRendererLookup<PickerRangeValue, TView, Omit<DateRangeViewRendererProps<'day'>, 'view' | 'slots' | 'slotProps'> & Omit<TimeViewRendererProps<TimeViewWithMeridiem, BaseClockProps<TimeViewWithMeridiem>>, 'view' | 'slots' | 'slotProps'> & {
     view: TView;
 }, TAdditionalProps>;
-export interface BaseDateTimeRangePickerProps extends Omit<BasePickerInputProps<PickerRangeValue, DateTimeRangePickerView, DateTimeRangeValidationError>, 'orientation' | 'views' | 'openTo'>, ExportedDateRangeCalendarProps, BaseDateValidationProps, DesktopOnlyTimePickerProps, Partial<Pick<UseViewsOptions<PickerRangeValue, DateTimeRangePickerViewExternal>, 'openTo' | 'views'>>, DateTimeValidationProps {
+export interface BaseDateTimeRangePickerProps extends Omit<BasePickerInputProps<PickerRangeValue, DateTimeRangePickerView, DateTimeRangeValidationError>, 'orientation' | 'views' | 'openTo'>, ExportedDateRangeCalendarProps, ExportedValidateDateTimeRangeProps, DesktopOnlyTimePickerProps, Partial<Pick<UseViewsOptions<PickerRangeValue, DateTimeRangePickerViewExternal>, 'openTo' | 'views'>> {
     /**
      * Overridable component slots.
      * @default {}
@@ -54,7 +55,7 @@ export interface BaseDateTimeRangePickerProps extends Omit<BasePickerInputProps<
      */
     viewRenderers?: Partial<DateTimeRangePickerRenderers<DateTimeRangePickerView>>;
 }
-type UseDateTimeRangePickerDefaultizedProps<Props extends BaseDateTimeRangePickerProps> = LocalizedComponent<Omit<DefaultizedProps<Props, 'openTo' | 'ampm' | keyof BaseDateValidationProps>, 'views'>> & {
+type UseDateTimeRangePickerDefaultizedProps<Props extends BaseDateTimeRangePickerProps> = LocalizedComponent<Omit<DefaultizedProps<Props, 'openTo' | 'ampm' | ValidateDateTimeRangePropsToDefault>, 'views'>> & {
     shouldRenderTimeInASingleColumn: boolean;
     views: readonly DateTimeRangePickerView[];
 };

package/MultiInputDateRangeField/MultiInputDateRangeField.js

@@ -2,7 +2,7 @@
 
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["slots", "slotProps", "unstableStartFieldRef", "unstableEndFieldRef", "className"];
+const _excluded = ["slots", "slotProps", "unstableStartFieldRef", "unstableEndFieldRef", "className", "classes"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -12,17 +12,14 @@ import Typography from '@mui/material/Typography';
 import { styled, useThemeProps } from '@mui/material/styles';
 import useSlotProps from '@mui/utils/useSlotProps';
 import { unstable_composeClasses as composeClasses, unstable_generateUtilityClass as generateUtilityClass, unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
-import { convertFieldResponseIntoMuiTextFieldProps } from '@mui/x-date-pickers/internals';
+import { convertFieldResponseIntoMuiTextFieldProps, useFieldOwnerState } from '@mui/x-date-pickers/internals';
 import { useSplitFieldProps } from '@mui/x-date-pickers/hooks';
 import { PickersTextField } from '@mui/x-date-pickers/PickersTextField';
 import { useMultiInputDateRangeField } from "../internals/hooks/useMultiInputRangeField/useMultiInputDateRangeField.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const multiInputDateRangeFieldClasses = generateUtilityClasses('MuiMultiInputDateRangeField', ['root', 'separator']);
 export const getMultiInputDateRangeFieldUtilityClass = slot => generateUtilityClass('MuiMultiInputDateRangeField', slot);
-const useUtilityClasses = ownerState => {
-  const {
-    classes
-  } = ownerState;
+const useUtilityClasses = classes => {
   const slots = {
     root: ['root'],
     separator: ['separator']
@@ -70,11 +67,12 @@ const MultiInputDateRangeField = /*#__PURE__*/React.forwardRef(function MultiInp
       slotProps,
       unstableStartFieldRef,
       unstableEndFieldRef,
-      className
+      className,
+      classes: classesProp
     } = forwardedProps,
     otherForwardedProps = _objectWithoutPropertiesLoose(forwardedProps, _excluded);
-  const ownerState = themeProps;
-  const classes = useUtilityClasses(ownerState);
+  const ownerState = useFieldOwnerState(internalProps);
+  const classes = useUtilityClasses(classesProp);
   const Root = slots?.root ?? MultiInputDateRangeFieldRoot;
   const rootProps = useSlotProps({
     elementType: Root,
@@ -258,10 +256,10 @@ process.env.NODE_ENV !== "production" ? MultiInputDateRangeField.propTypes = {
    */
   shouldDisableDate: PropTypes.func,
   /**
-   * If `true`, the format will respect the leading zeroes (e.g: on dayjs, the format `M/D/YYYY` will render `8/16/2018`)
-   * If `false`, the format will always add leading zeroes (e.g: on dayjs, the format `M/D/YYYY` will render `08/16/2018`)
+   * If `true`, the format will respect the leading zeroes (for example on dayjs, the format `M/D/YYYY` will render `8/16/2018`)
+   * If `false`, the format will always add leading zeroes (for example on dayjs, the format `M/D/YYYY` will render `08/16/2018`)
    *
-   * Warning n°1: Luxon is not able to respect the leading zeroes when using macro tokens (e.g: "DD"), so `shouldRespectLeadingZeros={true}` might lead to inconsistencies when using `AdapterLuxon`.
+   * Warning n°1: Luxon is not able to respect the leading zeroes when using macro tokens (for example "DD"), so `shouldRespectLeadingZeros={true}` might lead to inconsistencies when using `AdapterLuxon`.
    *
    * Warning n°2: When `shouldRespectLeadingZeros={true}`, the field will add an invisible character on the sections containing a single digit to make sure `onChange` is fired.
    * If you need to get the clean value from the input, you can remove this character using `input.value.replace(/\u200e/g, '')`.

package/MultiInputDateRangeField/MultiInputDateRangeField.types.d.ts

@@ -1,8 +1,10 @@
 import * as React from 'react';
-import { SlotComponentProps } from '@mui/utils';
-import Typography from '@mui/material/Typography';
-import Stack, { StackProps } from '@mui/material/Stack';
-import TextField from '@mui/material/TextField';
+import type { TypographyProps } from '@mui/material/Typography';
+import type { StackProps } from '@mui/material/Stack';
+import type { TextFieldProps } from '@mui/material/TextField';
+import { FieldOwnerState } from '@mui/x-date-pickers/models';
+import { SlotComponentPropsFromProps } from '@mui/x-internals/types';
+import { PickersTextFieldProps } from '@mui/x-date-pickers/PickersTextField';
 import { UseMultiInputRangeFieldParams } from '../internals/hooks/useMultiInputRangeField/useMultiInputRangeField.types';
 import { MultiInputFieldRefs, MultiInputRangeFieldClasses, RangePosition, UseDateRangeFieldProps } from '../models';
 export type UseMultiInputDateRangeFieldParams<TEnableAccessibleFieldDOMStructure extends boolean, TTextFieldSlotProps extends {}> = UseMultiInputRangeFieldParams<UseMultiInputDateRangeFieldProps<TEnableAccessibleFieldDOMStructure>, TTextFieldSlotProps>;
@@ -24,7 +26,7 @@ export interface MultiInputDateRangeFieldProps<TEnableAccessibleFieldDOMStructur
      * The props used for each component slot.
      * @default {}
      */
-    slotProps?: MultiInputDateRangeFieldSlotProps<TEnableAccessibleFieldDOMStructure>;
+    slotProps?: MultiInputDateRangeFieldSlotProps;
 }
 export interface MultiInputDateRangeFieldSlots {
     /**
@@ -35,7 +37,7 @@ export interface MultiInputDateRangeFieldSlots {
     /**
      * Form control with an input to render a date.
      * It is rendered twice: once for the start date and once for the end date.
-     * @default TextField from '@mui/material' or PickersTextField if `enableAccessibleFieldDOMStructure` is `true`.
+     * @default <PickersTextField />, or <TextField /> from '@mui/material' if `enableAccessibleFieldDOMStructure` is `false`.
      */
     textField?: React.ElementType;
     /**
@@ -44,10 +46,10 @@ export interface MultiInputDateRangeFieldSlots {
      */
     separator?: React.ElementType;
 }
-export interface MultiInputDateRangeFieldSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> {
-    root?: SlotComponentProps<typeof Stack, {}, MultiInputDateRangeFieldProps<TEnableAccessibleFieldDOMStructure>>;
-    textField?: SlotComponentProps<typeof TextField, {}, MultiInputDateRangeFieldProps<TEnableAccessibleFieldDOMStructure> & {
+export interface MultiInputDateRangeFieldSlotProps {
+    root?: SlotComponentPropsFromProps<StackProps, {}, FieldOwnerState>;
+    textField?: SlotComponentPropsFromProps<PickersTextFieldProps | TextFieldProps, {}, FieldOwnerState & {
         position: RangePosition;
     }>;
-    separator?: SlotComponentProps<typeof Typography, {}, MultiInputDateRangeFieldProps<TEnableAccessibleFieldDOMStructure>>;
+    separator?: SlotComponentPropsFromProps<TypographyProps, {}, FieldOwnerState>;
 }

package/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.js

@@ -2,7 +2,7 @@
 
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["slots", "slotProps", "unstableStartFieldRef", "unstableEndFieldRef", "className"];
+const _excluded = ["slots", "slotProps", "unstableStartFieldRef", "unstableEndFieldRef", "className", "classes"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -12,17 +12,14 @@ import Typography from '@mui/material/Typography';
 import { styled, useThemeProps } from '@mui/material/styles';
 import useSlotProps from '@mui/utils/useSlotProps';
 import { unstable_composeClasses as composeClasses, unstable_generateUtilityClass as generateUtilityClass, unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
-import { convertFieldResponseIntoMuiTextFieldProps } from '@mui/x-date-pickers/internals';
+import { convertFieldResponseIntoMuiTextFieldProps, useFieldOwnerState } from '@mui/x-date-pickers/internals';
 import { useSplitFieldProps } from '@mui/x-date-pickers/hooks';
 import { PickersTextField } from '@mui/x-date-pickers/PickersTextField';
 import { useMultiInputDateTimeRangeField } from "../internals/hooks/useMultiInputRangeField/useMultiInputDateTimeRangeField.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const multiInputDateTimeRangeFieldClasses = generateUtilityClasses('MuiMultiInputDateTimeRangeField', ['root', 'separator']);
 export const getMultiInputDateTimeRangeFieldUtilityClass = slot => generateUtilityClass('MuiMultiInputDateTimeRangeField', slot);
-const useUtilityClasses = ownerState => {
-  const {
-    classes
-  } = ownerState;
+const useUtilityClasses = classes => {
   const slots = {
     root: ['root'],
     separator: ['separator']
@@ -70,11 +67,12 @@ const MultiInputDateTimeRangeField = /*#__PURE__*/React.forwardRef(function Mult
       slotProps,
       unstableStartFieldRef,
       unstableEndFieldRef,
-      className
+      className,
+      classes: classesProp
     } = forwardedProps,
     otherForwardedProps = _objectWithoutPropertiesLoose(forwardedProps, _excluded);
-  const ownerState = themeProps;
-  const classes = useUtilityClasses(ownerState);
+  const ownerState = useFieldOwnerState(themeProps);
+  const classes = useUtilityClasses(classesProp);
   const Root = slots?.root ?? MultiInputDateTimeRangeFieldRoot;
   const rootProps = useSlotProps({
     elementType: Root,
@@ -298,10 +296,10 @@ process.env.NODE_ENV !== "production" ? MultiInputDateTimeRangeField.propTypes =
    */
   shouldDisableTime: PropTypes.func,
   /**
-   * If `true`, the format will respect the leading zeroes (e.g: on dayjs, the format `M/D/YYYY` will render `8/16/2018`)
-   * If `false`, the format will always add leading zeroes (e.g: on dayjs, the format `M/D/YYYY` will render `08/16/2018`)
+   * If `true`, the format will respect the leading zeroes (for example on dayjs, the format `M/D/YYYY` will render `8/16/2018`)
+   * If `false`, the format will always add leading zeroes (for example on dayjs, the format `M/D/YYYY` will render `08/16/2018`)
    *
-   * Warning n°1: Luxon is not able to respect the leading zeroes when using macro tokens (e.g: "DD"), so `shouldRespectLeadingZeros={true}` might lead to inconsistencies when using `AdapterLuxon`.
+   * Warning n°1: Luxon is not able to respect the leading zeroes when using macro tokens (for example "DD"), so `shouldRespectLeadingZeros={true}` might lead to inconsistencies when using `AdapterLuxon`.
    *
    * Warning n°2: When `shouldRespectLeadingZeros={true}`, the field will add an invisible character on the sections containing a single digit to make sure `onChange` is fired.
    * If you need to get the clean value from the input, you can remove this character using `input.value.replace(/\u200e/g, '')`.

package/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.types.d.ts

@@ -1,8 +1,10 @@
 import * as React from 'react';
-import { SlotComponentProps } from '@mui/utils';
-import Typography from '@mui/material/Typography';
-import Stack, { StackProps } from '@mui/material/Stack';
-import TextField from '@mui/material/TextField';
+import type { TypographyProps } from '@mui/material/Typography';
+import type { StackProps } from '@mui/material/Stack';
+import type { TextFieldProps } from '@mui/material/TextField';
+import { FieldOwnerState } from '@mui/x-date-pickers/models';
+import { SlotComponentPropsFromProps } from '@mui/x-internals/types';
+import { PickersTextFieldProps } from '@mui/x-date-pickers/PickersTextField';
 import { UseDateTimeRangeFieldProps } from '../internals/models/dateTimeRange';
 import { UseMultiInputRangeFieldParams } from '../internals/hooks/useMultiInputRangeField/useMultiInputRangeField.types';
 import { MultiInputFieldRefs, MultiInputRangeFieldClasses, RangePosition } from '../models';
@@ -25,7 +27,7 @@ export interface MultiInputDateTimeRangeFieldProps<TEnableAccessibleFieldDOMStru
      * The props used for each component slot.
      * @default {}
      */
-    slotProps?: MultiInputDateTimeRangeFieldSlotProps<TEnableAccessibleFieldDOMStructure>;
+    slotProps?: MultiInputDateTimeRangeFieldSlotProps;
 }
 export interface MultiInputDateTimeRangeFieldSlots {
     /**
@@ -45,10 +47,10 @@ export interface MultiInputDateTimeRangeFieldSlots {
      */
     separator?: React.ElementType;
 }
-export interface MultiInputDateTimeRangeFieldSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> {
-    root?: SlotComponentProps<typeof Stack, {}, MultiInputDateTimeRangeFieldProps<TEnableAccessibleFieldDOMStructure>>;
-    textField?: SlotComponentProps<typeof TextField, {}, MultiInputDateTimeRangeFieldProps<TEnableAccessibleFieldDOMStructure> & {
+export interface MultiInputDateTimeRangeFieldSlotProps {
+    root?: SlotComponentPropsFromProps<StackProps, {}, FieldOwnerState>;
+    textField?: SlotComponentPropsFromProps<PickersTextFieldProps | TextFieldProps, {}, FieldOwnerState & {
         position: RangePosition;
     }>;
-    separator?: SlotComponentProps<typeof Typography, {}, MultiInputDateTimeRangeFieldProps<TEnableAccessibleFieldDOMStructure>>;
+    separator?: SlotComponentPropsFromProps<TypographyProps, {}, FieldOwnerState>;
 }