[pickers] Use new ownerState object in <DateTimePickerTabs /> and <DateTimeRangePickerTabs /> (mui#15498)

Author: flaviendelangle

packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePickerTabs.tsx

@@ -11,7 +11,9 @@ import {
   BaseTabsProps,
   ExportedBaseTabsProps,
   isDatePickerView,
+  usePickerPrivateContext,
 } from '@mui/x-date-pickers/internals';
+import { PickerOwnerState } from '@mui/x-date-pickers/models';
 import { usePickerTranslations } from '@mui/x-date-pickers/hooks';
 import IconButton from '@mui/material/IconButton';
 import Button from '@mui/material/Button';
@@ -67,8 +69,7 @@ export interface DateTimeRangePickerTabsProps
     BaseTabsProps<DateOrTimeViewWithMeridiem>,
     Pick<UseRangePositionResponse, 'rangePosition' | 'onRangePositionChange'> {}
 
-const useUtilityClasses = (ownerState: DateTimeRangePickerTabsProps) => {
-  const { classes } = ownerState;
+const useUtilityClasses = (classes: Partial<DateTimeRangePickerTabsClasses> | undefined) => {
   const slots = {
     root: ['root'],
     tabButton: ['tabButton'],
@@ -83,7 +84,7 @@ const DateTimeRangePickerTabsRoot = styled('div', {
   name: 'MuiDateTimeRangePickerTabs',
   slot: 'Root',
   overridesResolver: (_, styles) => styles.root,
-})<{ ownerState: DateTimeRangePickerTabsProps }>(({ theme }) => ({
+})<{ ownerState: PickerOwnerState }>(({ theme }) => ({
   display: 'flex',
   justifyContent: 'space-between',
   alignItems: 'center',
@@ -120,11 +121,13 @@ const DateTimeRangePickerTabs = function DateTimeRangePickerTabs(
     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';
@@ -175,7 +178,7 @@ const DateTimeRangePickerTabs = function DateTimeRangePickerTabs(
 
   return (
     <DateTimeRangePickerTabsRoot
-      ownerState={props}
+      ownerState={ownerState}
       className={clsx(classes.root, className)}
       sx={sx}
     >

packages/x-date-pickers/src/DateTimePicker/DateTimePickerTabs.tsx

@@ -15,6 +15,8 @@ import {
 } from './dateTimePickerTabsClasses';
 import { BaseTabsProps, ExportedBaseTabsProps } from '../internals/models/props/tabs';
 import { isDatePickerView } from '../internals/utils/date-utils';
+import { usePickerPrivateContext } from '../internals/hooks/usePickerPrivateContext';
+import { PickerOwnerState } from '../models/pickers';
 
 type TabValue = 'date' | 'time';
 
@@ -60,8 +62,7 @@ export interface DateTimePickerTabsProps
   extends ExportedDateTimePickerTabsProps,
     BaseTabsProps<DateOrTimeViewWithMeridiem> {}
 
-const useUtilityClasses = (ownerState: DateTimePickerTabsProps) => {
-  const { classes } = ownerState;
+const useUtilityClasses = (classes: Partial<DateTimePickerTabsClasses> | undefined) => {
   const slots = {
     root: ['root'],
   };
@@ -73,7 +74,7 @@ const DateTimePickerTabsRoot = styled(Tabs, {
   name: 'MuiDateTimePickerTabs',
   slot: 'Root',
   overridesResolver: (_, styles) => styles.root,
-})<{ ownerState: DateTimePickerTabsProps }>(({ theme }) => ({
+})<{ ownerState: PickerOwnerState }>(({ theme }) => ({
   boxShadow: `0 -1px 0 0 inset ${(theme.vars || theme).palette.divider}`,
   '&:last-child': {
     boxShadow: `0 1px 0 0 inset ${(theme.vars || theme).palette.divider}`,
@@ -103,11 +104,13 @@ const DateTimePickerTabs = function DateTimePickerTabs(inProps: DateTimePickerTa
     view,
     hidden = typeof window === 'undefined' || window.innerHeight < 667,
     className,
+    classes: classesProp,
     sx,
   } = props;
 
   const translations = usePickerTranslations();
-  const classes = useUtilityClasses(props);
+  const { ownerState } = usePickerPrivateContext();
+  const classes = useUtilityClasses(classesProp);
 
   const handleChange = (event: React.SyntheticEvent, value: TabValue) => {
     onViewChange(tabToView(value));
@@ -119,7 +122,7 @@ const DateTimePickerTabs = function DateTimePickerTabs(inProps: DateTimePickerTa
 
   return (
     <DateTimePickerTabsRoot
-      ownerState={props}
+      ownerState={ownerState}
       variant="fullWidth"
       value={viewToTab(view)}
       onChange={handleChange}