From e5aa92b431eaf0566e244d806c5130288fb545ae Mon Sep 17 00:00:00 2001
From: delangle <flaviendelangle@gmail.com>
Date: Thu, 8 Feb 2024 19:16:35 +0100
Subject: [PATCH 01/25] [pickers] Explore usage of the new variants styling API

---
 .../src/PickersLayout/PickersLayout.tsx       | 78 +++++++++++++++----
 .../src/YearCalendar/PickersYear.tsx          | 19 ++++-
 2 files changed, 78 insertions(+), 19 deletions(-)

diff --git a/packages/x-date-pickers/src/PickersLayout/PickersLayout.tsx b/packages/x-date-pickers/src/PickersLayout/PickersLayout.tsx
index c76b350f092fb..8e4f284ea3747 100644
--- a/packages/x-date-pickers/src/PickersLayout/PickersLayout.tsx
+++ b/packages/x-date-pickers/src/PickersLayout/PickersLayout.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { styled, useThemeProps } from '@mui/material/styles';
+import { styled, useTheme, useThemeProps } from '@mui/material/styles';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
 import { PickersLayoutProps } from './PickersLayout.types';
 import { pickersLayoutClasses, getPickersLayoutUtilityClass } from './pickersLayoutClasses';
@@ -23,24 +23,68 @@ const PickersLayoutRoot = styled('div', {
   name: 'MuiPickersLayout',
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root,
-})<{ ownerState: { isLandscape: boolean } }>(({ theme, ownerState }) => ({
+})<{ ownerState: { isLandscape: boolean; isRTL: boolean } }>({
   display: 'grid',
   gridAutoColumns: 'max-content auto max-content',
   gridAutoRows: 'max-content auto max-content',
-  [`& .${pickersLayoutClasses.toolbar}`]: ownerState.isLandscape
-    ? {
-        gridColumn: theme.direction === 'rtl' ? 3 : 1,
-        gridRow: '2 / 3',
-      }
-    : { gridColumn: '2 / 4', gridRow: 1 },
-  [`.${pickersLayoutClasses.shortcuts}`]: ownerState.isLandscape
-    ? { gridColumn: '2 / 4', gridRow: 1 }
-    : {
-        gridColumn: theme.direction === 'rtl' ? 3 : 1,
-        gridRow: '2 / 3',
-      },
   [`& .${pickersLayoutClasses.actionBar}`]: { gridColumn: '1 / 4', gridRow: 3 },
-}));
+  variants: [
+    {
+      props: { isLandscape: true },
+      style: {
+        [`.${pickersLayoutClasses.shortcuts}`]: {
+          gridColumn: '2 / 4',
+          gridRow: 1,
+        },
+      },
+    },
+    {
+      props: { isLandscape: false },
+      style: {
+        [`& .${pickersLayoutClasses.toolbar}`]: {
+          gridColumn: '2 / 4',
+          gridRow: 1,
+        },
+      },
+    },
+    {
+      props: { isLandscape: true, isRTL: false },
+      style: {
+        [`& .${pickersLayoutClasses.toolbar}`]: {
+          gridColumn: 1,
+          gridRow: '2 / 3',
+        },
+      },
+    },
+    {
+      props: { isLandscape: true, isRTL: true },
+      style: {
+        [`& .${pickersLayoutClasses.toolbar}`]: {
+          gridColumn: 3,
+          gridRow: '2 / 3',
+        },
+      },
+    },
+    {
+      props: { isLandscape: false, isRTL: false },
+      style: {
+        [`.${pickersLayoutClasses.shortcuts}`]: {
+          gridColumn: 1,
+          gridRow: '2 / 3',
+        },
+      },
+    },
+    {
+      props: { isLandscape: false, isRTL: true },
+      style: {
+        [`.${pickersLayoutClasses.shortcuts}`]: {
+          gridColumn: 3,
+          gridRow: '2 / 3',
+        },
+      },
+    },
+  ],
+});
 
 PickersLayoutRoot.propTypes = {
   // ----------------------------- Warning --------------------------------
@@ -90,7 +134,9 @@ const PickersLayout = function PickersLayout<
   const { toolbar, content, tabs, actionBar, shortcuts } = usePickerLayout(props);
   const { sx, className, isLandscape, ref, wrapperVariant } = props;
 
-  const ownerState = props;
+  const theme = useTheme();
+  const isRTL = theme.direction === 'rtl';
+  const ownerState = { ...props, isRTL };
   const classes = useUtilityClasses(ownerState);
 
   return (
diff --git a/packages/x-date-pickers/src/YearCalendar/PickersYear.tsx b/packages/x-date-pickers/src/YearCalendar/PickersYear.tsx
index 8dce10be09ffb..391e81d27a2a7 100644
--- a/packages/x-date-pickers/src/YearCalendar/PickersYear.tsx
+++ b/packages/x-date-pickers/src/YearCalendar/PickersYear.tsx
@@ -43,12 +43,25 @@ const PickersYearRoot = styled('div', {
   name: 'MuiPickersYear',
   slot: 'Root',
   overridesResolver: (_, styles) => [styles.root],
-})<{ ownerState: PickersYearProps }>(({ ownerState }) => ({
-  flexBasis: ownerState.yearsPerRow === 3 ? '33.3%' : '25%',
+})<{ ownerState: PickersYearProps }>({
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
-}));
+  variants: [
+    {
+      props: { yearsPerRow: 3 },
+      style: {
+        flexBasis: '33.3%',
+      },
+    },
+    {
+      props: { yearsPerRow: 4 },
+      style: {
+        flexBasis: '25%',
+      },
+    },
+  ],
+});
 
 const PickersYearButton = styled('button', {
   name: 'MuiPickersYear',

From 3e0c277fd44ea02531eaae590d8974f3829000f5 Mon Sep 17 00:00:00 2001
From: delangle <flaviendelangle@gmail.com>
Date: Thu, 8 Feb 2024 19:21:59 +0100
Subject: [PATCH 02/25] Fi

---
 .../DesktopDateTimeRangePickerLayout.tsx                   | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/x-date-pickers-pro/src/DesktopDateTimeRangePicker/DesktopDateTimeRangePickerLayout.tsx b/packages/x-date-pickers-pro/src/DesktopDateTimeRangePicker/DesktopDateTimeRangePickerLayout.tsx
index 37d9dc97df208..d52644633a843 100644
--- a/packages/x-date-pickers-pro/src/DesktopDateTimeRangePicker/DesktopDateTimeRangePickerLayout.tsx
+++ b/packages/x-date-pickers-pro/src/DesktopDateTimeRangePicker/DesktopDateTimeRangePickerLayout.tsx
@@ -11,6 +11,7 @@ import {
 import { PickerValidDate } from '@mui/x-date-pickers/models';
 import { DateRange } from '../models';
 import { DateTimeRangePickerView } from '../internals/models/dateTimeRange';
+import { useTheme } from '@mui/material/styles';
 
 /**
  * @ignore - internal component.
@@ -22,6 +23,10 @@ export function DesktopDateTimeRangePickerLayout<TDate extends PickerValidDate>(
   const { sx, className, isLandscape, ref } = props;
   const isActionBarVisible = actionBar && (actionBar.props.actions?.length ?? 0) > 0;
 
+  const theme = useTheme();
+  const isRTL = theme.direction === 'rtl';
+  const ownerState = { ...props, isRTL };
+
   return (
     <PickersLayoutRoot
       ref={ref}
@@ -33,7 +38,7 @@ export function DesktopDateTimeRangePickerLayout<TDate extends PickerValidDate>(
         },
         ...(Array.isArray(sx) ? sx : [sx]),
       ]}
-      ownerState={props}
+      ownerState={ownerState}
     >
       {isLandscape ? shortcuts : toolbar}
       {isLandscape ? toolbar : shortcuts}

From 12e3395c02a7480e3a72cead63734113b5da48b1 Mon Sep 17 00:00:00 2001
From: delangle <flaviendelangle@gmail.com>
Date: Thu, 8 Feb 2024 19:53:40 +0100
Subject: [PATCH 03/25] Review: Brijesh

---
 .../DesktopDateTimeRangePickerLayout.tsx      |  7 +-
 .../src/PickersLayout/PickersLayout.tsx       | 81 +++++--------------
 2 files changed, 21 insertions(+), 67 deletions(-)

diff --git a/packages/x-date-pickers-pro/src/DesktopDateTimeRangePicker/DesktopDateTimeRangePickerLayout.tsx b/packages/x-date-pickers-pro/src/DesktopDateTimeRangePicker/DesktopDateTimeRangePickerLayout.tsx
index d52644633a843..37d9dc97df208 100644
--- a/packages/x-date-pickers-pro/src/DesktopDateTimeRangePicker/DesktopDateTimeRangePickerLayout.tsx
+++ b/packages/x-date-pickers-pro/src/DesktopDateTimeRangePicker/DesktopDateTimeRangePickerLayout.tsx
@@ -11,7 +11,6 @@ import {
 import { PickerValidDate } from '@mui/x-date-pickers/models';
 import { DateRange } from '../models';
 import { DateTimeRangePickerView } from '../internals/models/dateTimeRange';
-import { useTheme } from '@mui/material/styles';
 
 /**
  * @ignore - internal component.
@@ -23,10 +22,6 @@ export function DesktopDateTimeRangePickerLayout<TDate extends PickerValidDate>(
   const { sx, className, isLandscape, ref } = props;
   const isActionBarVisible = actionBar && (actionBar.props.actions?.length ?? 0) > 0;
 
-  const theme = useTheme();
-  const isRTL = theme.direction === 'rtl';
-  const ownerState = { ...props, isRTL };
-
   return (
     <PickersLayoutRoot
       ref={ref}
@@ -38,7 +33,7 @@ export function DesktopDateTimeRangePickerLayout<TDate extends PickerValidDate>(
         },
         ...(Array.isArray(sx) ? sx : [sx]),
       ]}
-      ownerState={ownerState}
+      ownerState={props}
     >
       {isLandscape ? shortcuts : toolbar}
       {isLandscape ? toolbar : shortcuts}
diff --git a/packages/x-date-pickers/src/PickersLayout/PickersLayout.tsx b/packages/x-date-pickers/src/PickersLayout/PickersLayout.tsx
index 8e4f284ea3747..0b2fc5bb742dc 100644
--- a/packages/x-date-pickers/src/PickersLayout/PickersLayout.tsx
+++ b/packages/x-date-pickers/src/PickersLayout/PickersLayout.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { styled, useTheme, useThemeProps } from '@mui/material/styles';
+import { styled, useThemeProps } from '@mui/material/styles';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
 import { PickersLayoutProps } from './PickersLayout.types';
 import { pickersLayoutClasses, getPickersLayoutUtilityClass } from './pickersLayoutClasses';
@@ -23,68 +23,29 @@ const PickersLayoutRoot = styled('div', {
   name: 'MuiPickersLayout',
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root,
-})<{ ownerState: { isLandscape: boolean; isRTL: boolean } }>({
+})<{ ownerState: { isLandscape: boolean } }>(({ theme }) => ({
   display: 'grid',
   gridAutoColumns: 'max-content auto max-content',
   gridAutoRows: 'max-content auto max-content',
   [`& .${pickersLayoutClasses.actionBar}`]: { gridColumn: '1 / 4', gridRow: 3 },
-  variants: [
-    {
-      props: { isLandscape: true },
-      style: {
-        [`.${pickersLayoutClasses.shortcuts}`]: {
-          gridColumn: '2 / 4',
-          gridRow: 1,
-        },
-      },
+  variants: [true, false].map((isLandscape) => ({
+    props: { isLandscape },
+    style: {
+      [`& .${pickersLayoutClasses.toolbar}`]: isLandscape
+        ? {
+            gridColumn: theme.direction === 'rtl' ? 3 : 1,
+            gridRow: '2 / 3',
+          }
+        : { gridColumn: '2 / 4', gridRow: 1 },
+      [`.${pickersLayoutClasses.shortcuts}`]: isLandscape
+        ? { gridColumn: '2 / 4', gridRow: 1 }
+        : {
+            gridColumn: theme.direction === 'rtl' ? 3 : 1,
+            gridRow: '2 / 3',
+          },
     },
-    {
-      props: { isLandscape: false },
-      style: {
-        [`& .${pickersLayoutClasses.toolbar}`]: {
-          gridColumn: '2 / 4',
-          gridRow: 1,
-        },
-      },
-    },
-    {
-      props: { isLandscape: true, isRTL: false },
-      style: {
-        [`& .${pickersLayoutClasses.toolbar}`]: {
-          gridColumn: 1,
-          gridRow: '2 / 3',
-        },
-      },
-    },
-    {
-      props: { isLandscape: true, isRTL: true },
-      style: {
-        [`& .${pickersLayoutClasses.toolbar}`]: {
-          gridColumn: 3,
-          gridRow: '2 / 3',
-        },
-      },
-    },
-    {
-      props: { isLandscape: false, isRTL: false },
-      style: {
-        [`.${pickersLayoutClasses.shortcuts}`]: {
-          gridColumn: 1,
-          gridRow: '2 / 3',
-        },
-      },
-    },
-    {
-      props: { isLandscape: false, isRTL: true },
-      style: {
-        [`.${pickersLayoutClasses.shortcuts}`]: {
-          gridColumn: 3,
-          gridRow: '2 / 3',
-        },
-      },
-    },
-  ],
-});
+  })),
+}));
 
 PickersLayoutRoot.propTypes = {
   // ----------------------------- Warning --------------------------------
@@ -134,9 +95,7 @@ const PickersLayout = function PickersLayout<
   const { toolbar, content, tabs, actionBar, shortcuts } = usePickerLayout(props);
   const { sx, className, isLandscape, ref, wrapperVariant } = props;
 
-  const theme = useTheme();
-  const isRTL = theme.direction === 'rtl';
-  const ownerState = { ...props, isRTL };
+  const ownerState = props;
   const classes = useUtilityClasses(ownerState);
 
   return (

From b026e736a57d9540cd07e3443bf9ed27e4ff7bfb Mon Sep 17 00:00:00 2001
From: delangle <flaviendelangle@gmail.com>
Date: Fri, 9 Feb 2024 09:29:22 +0100
Subject: [PATCH 04/25] Migrate more components

---
 .../DayCalendarSkeleton.tsx                   | 13 +++--
 .../src/DigitalClock/DigitalClock.tsx         | 16 +++++-
 .../src/MonthCalendar/PickersMonth.tsx        | 11 +++-
 .../MultiSectionDigitalClockSection.tsx       | 14 ++++-
 .../PickersCalendarHeader.tsx                 | 17 ++++--
 .../x-date-pickers/src/TimeClock/Clock.tsx    | 55 ++++++++++++-------
 .../src/TimeClock/ClockNumber.tsx             | 15 +++--
 .../src/TimeClock/ClockPointer.tsx            | 26 ++++++---
 .../src/YearCalendar/PickersYear.tsx          | 18 ++----
 .../PickersArrowSwitcher.tsx                  | 13 +++--
 .../internals/components/PickersPopper.tsx    | 15 +++--
 11 files changed, 137 insertions(+), 76 deletions(-)

diff --git a/packages/x-date-pickers/src/DayCalendarSkeleton/DayCalendarSkeleton.tsx b/packages/x-date-pickers/src/DayCalendarSkeleton/DayCalendarSkeleton.tsx
index cca99858f8aea..1af619f65904d 100644
--- a/packages/x-date-pickers/src/DayCalendarSkeleton/DayCalendarSkeleton.tsx
+++ b/packages/x-date-pickers/src/DayCalendarSkeleton/DayCalendarSkeleton.tsx
@@ -58,12 +58,15 @@ const DayCalendarSkeletonDay = styled(Skeleton, {
   name: 'MuiDayCalendarSkeleton',
   slot: 'DaySkeleton',
   overridesResolver: (props, styles) => styles.daySkeleton,
-})<{ ownerState: { day: number } }>(({ ownerState }) => ({
+})<{ ownerState: { day: number } }>({
   margin: `0 ${DAY_MARGIN}px`,
-  ...(ownerState.day === 0 && {
-    visibility: 'hidden',
-  }),
-}));
+  variants: [
+    {
+      props: { day: 0 },
+      style: { visibility: 'hidden' },
+    },
+  ],
+});
 
 DayCalendarSkeletonDay.propTypes = {
   // ----------------------------- Warning --------------------------------
diff --git a/packages/x-date-pickers/src/DigitalClock/DigitalClock.tsx b/packages/x-date-pickers/src/DigitalClock/DigitalClock.tsx
index e3824be369071..19b45e4c99a2e 100644
--- a/packages/x-date-pickers/src/DigitalClock/DigitalClock.tsx
+++ b/packages/x-date-pickers/src/DigitalClock/DigitalClock.tsx
@@ -35,14 +35,24 @@ const DigitalClockRoot = styled(PickerViewRoot, {
   name: 'MuiDigitalClock',
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root,
-})<{ ownerState: DigitalClockProps<any> & { alreadyRendered: boolean } }>(({ ownerState }) => ({
+})<{ ownerState: DigitalClockProps<any> & { alreadyRendered: boolean } }>({
   overflowY: 'auto',
   width: '100%',
   '@media (prefers-reduced-motion: no-preference)': {
-    scrollBehavior: ownerState.alreadyRendered ? 'smooth' : 'auto',
+    scrollBehavior: 'auto',
   },
   maxHeight: DIGITAL_CLOCK_VIEW_HEIGHT,
-}));
+  variants: [
+    {
+      props: { alreadyRendered: true },
+      style: {
+        '@media (prefers-reduced-motion: no-preference)': {
+          scrollBehavior: 'smooth',
+        },
+      },
+    },
+  ],
+});
 
 const DigitalClockList = styled(MenuList, {
   name: 'MuiDigitalClock',
diff --git a/packages/x-date-pickers/src/MonthCalendar/PickersMonth.tsx b/packages/x-date-pickers/src/MonthCalendar/PickersMonth.tsx
index bbb4bcb1db97b..01ddfcfe6539b 100644
--- a/packages/x-date-pickers/src/MonthCalendar/PickersMonth.tsx
+++ b/packages/x-date-pickers/src/MonthCalendar/PickersMonth.tsx
@@ -47,12 +47,17 @@ const PickersMonthRoot = styled('div', {
   overridesResolver: (_, styles) => [styles.root],
 })<{
   ownerState: PickersMonthProps;
-}>(({ ownerState }) => ({
-  flexBasis: ownerState.monthsPerRow === 3 ? '33.3%' : '25%',
+}>({
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
-}));
+  variants: [3, 4].map((monthsPerRow) => ({
+    props: { monthsPerRow },
+    style: {
+      flexBasis: `${Math.round((1 / monthsPerRow) * 10000) / 100}%`,
+    },
+  })),
+});
 
 const PickersMonthButton = styled('button', {
   name: 'MuiPickersMonth',
diff --git a/packages/x-date-pickers/src/MultiSectionDigitalClock/MultiSectionDigitalClockSection.tsx b/packages/x-date-pickers/src/MultiSectionDigitalClock/MultiSectionDigitalClockSection.tsx
index ced796ed21fad..66d6ea12a2193 100644
--- a/packages/x-date-pickers/src/MultiSectionDigitalClock/MultiSectionDigitalClockSection.tsx
+++ b/packages/x-date-pickers/src/MultiSectionDigitalClock/MultiSectionDigitalClockSection.tsx
@@ -53,13 +53,13 @@ const MultiSectionDigitalClockSectionRoot = styled(MenuList, {
   slot: 'Root',
   overridesResolver: (_, styles) => styles.root,
 })<{ ownerState: MultiSectionDigitalClockSectionProps<any> & { alreadyRendered: boolean } }>(
-  ({ theme, ownerState }) => ({
+  ({ theme }) => ({
     maxHeight: DIGITAL_CLOCK_VIEW_HEIGHT,
     width: 56,
     padding: 0,
     overflow: 'hidden',
     '@media (prefers-reduced-motion: no-preference)': {
-      scrollBehavior: ownerState.alreadyRendered ? 'smooth' : 'auto',
+      scrollBehavior: 'auto',
     },
     '@media (pointer: fine)': {
       '&:hover': {
@@ -78,6 +78,16 @@ const MultiSectionDigitalClockSectionRoot = styled(MenuList, {
       // subtracting the height of one item, extra margin and borders to make sure the max height is correct
       height: 'calc(100% - 40px - 6px)',
     },
+    variants: [
+      {
+        props: { alreadyRendered: true },
+        style: {
+          '@media (prefers-reduced-motion: no-preference)': {
+            scrollBehavior: 'smooth',
+          },
+        },
+      },
+    ],
   }),
 );
 
diff --git a/packages/x-date-pickers/src/PickersCalendarHeader/PickersCalendarHeader.tsx b/packages/x-date-pickers/src/PickersCalendarHeader/PickersCalendarHeader.tsx
index 4edc2507e7390..f87e21df2f821 100644
--- a/packages/x-date-pickers/src/PickersCalendarHeader/PickersCalendarHeader.tsx
+++ b/packages/x-date-pickers/src/PickersCalendarHeader/PickersCalendarHeader.tsx
@@ -87,14 +87,19 @@ const PickersCalendarHeaderSwitchViewButton = styled(IconButton, {
   overridesResolver: (_, styles) => styles.switchViewButton,
 })<{
   ownerState: PickersCalendarHeaderOwnerState<any>;
-}>(({ ownerState }) => ({
+}>({
   marginRight: 'auto',
-  ...(ownerState.view === 'year' && {
-    [`.${pickersCalendarHeaderClasses.switchViewIcon}`]: {
-      transform: 'rotate(180deg)',
+  variants: [
+    {
+      props: { view: 'year' },
+      style: {
+        [`.${pickersCalendarHeaderClasses.switchViewIcon}`]: {
+          transform: 'rotate(180deg)',
+        },
+      },
     },
-  }),
-}));
+  ],
+});
 
 const PickersCalendarHeaderSwitchViewIcon = styled(ArrowDropDownIcon, {
   name: 'MuiPickersCalendarHeader',
diff --git a/packages/x-date-pickers/src/TimeClock/Clock.tsx b/packages/x-date-pickers/src/TimeClock/Clock.tsx
index 8b15624405619..23a583f9dd71a 100644
--- a/packages/x-date-pickers/src/TimeClock/Clock.tsx
+++ b/packages/x-date-pickers/src/TimeClock/Clock.tsx
@@ -104,7 +104,7 @@ const ClockSquareMask = styled('div', {
   name: 'MuiClock',
   slot: 'SquareMask',
   overridesResolver: (_, styles) => styles.squareMask,
-})<{ ownerState: ClockSquareMaskOwnerState }>(({ ownerState }) => ({
+})<{ ownerState: ClockSquareMaskOwnerState }>({
   width: '100%',
   height: '100%',
   position: 'absolute',
@@ -113,9 +113,10 @@ const ClockSquareMask = styled('div', {
   // Disable scroll capabilities.
   touchAction: 'none',
   userSelect: 'none',
-  ...(ownerState.disabled
-    ? {}
-    : {
+  variants: [
+    {
+      props: { disabled: false },
+      style: {
         '@media (pointer: fine)': {
           cursor: 'pointer',
           borderRadius: '50%',
@@ -123,8 +124,10 @@ const ClockSquareMask = styled('div', {
         '&:active': {
           cursor: 'move',
         },
-      }),
-}));
+      },
+    },
+  ],
+});
 
 const ClockPin = styled('div', {
   name: 'MuiClock',
@@ -145,7 +148,7 @@ const ClockAmButton = styled(IconButton, {
   name: 'MuiClock',
   slot: 'AmButton',
   overridesResolver: (_, styles) => styles.amButton,
-})<{ ownerState: ClockProps<any> }>(({ theme, ownerState }) => ({
+})<{ ownerState: ClockProps<any> }>(({ theme }) => ({
   zIndex: 1,
   position: 'absolute',
   bottom: 8,
@@ -153,20 +156,25 @@ const ClockAmButton = styled(IconButton, {
   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,
-    '&:hover': {
-      backgroundColor: (theme.vars || theme).palette.primary.light,
+  variants: [
+    {
+      props: { meridiemMode: 'am' },
+      style: {
+        backgroundColor: (theme.vars || theme).palette.primary.main,
+        color: (theme.vars || theme).palette.primary.contrastText,
+        '&:hover': {
+          backgroundColor: (theme.vars || theme).palette.primary.light,
+        },
+      },
     },
-  }),
+  ],
 }));
 
 const ClockPmButton = styled(IconButton, {
   name: 'MuiClock',
   slot: 'PmButton',
   overridesResolver: (_, styles) => styles.pmButton,
-})<{ ownerState: ClockProps<any> }>(({ theme, ownerState }) => ({
+})<{ ownerState: ClockProps<any> }>(({ theme }) => ({
   zIndex: 1,
   position: 'absolute',
   bottom: 8,
@@ -174,13 +182,18 @@ const ClockPmButton = styled(IconButton, {
   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,
-    '&:hover': {
-      backgroundColor: (theme.vars || theme).palette.primary.light,
+  variants: [
+    {
+      props: { meridiemMode: 'pm' },
+      style: {
+        backgroundColor: (theme.vars || theme).palette.primary.main,
+        color: (theme.vars || theme).palette.primary.contrastText,
+        '&:hover': {
+          backgroundColor: (theme.vars || theme).palette.primary.light,
+        },
+      },
     },
-  }),
+  ],
 }));
 
 const ClockMeridiemText = styled(Typography, {
@@ -212,7 +225,7 @@ export function Clock<TDate extends PickerValidDate>(inProps: ClockProps<TDate>)
     selectedId,
     type,
     viewValue,
-    disabled,
+    disabled = false,
     readOnly,
     className,
   } = props;
diff --git a/packages/x-date-pickers/src/TimeClock/ClockNumber.tsx b/packages/x-date-pickers/src/TimeClock/ClockNumber.tsx
index 90b48c09b5ba1..bab778903644d 100644
--- a/packages/x-date-pickers/src/TimeClock/ClockNumber.tsx
+++ b/packages/x-date-pickers/src/TimeClock/ClockNumber.tsx
@@ -40,7 +40,7 @@ const ClockNumberRoot = styled('span', {
     { [`&.${clockNumberClasses.disabled}`]: styles.disabled },
     { [`&.${clockNumberClasses.selected}`]: styles.selected },
   ],
-})<{ ownerState: ClockNumberProps }>(({ theme, ownerState }) => ({
+})<{ ownerState: ClockNumberProps }>(({ theme }) => ({
   height: CLOCK_HOUR_WIDTH,
   width: CLOCK_HOUR_WIDTH,
   position: 'absolute',
@@ -61,10 +61,15 @@ const ClockNumberRoot = styled('span', {
     pointerEvents: 'none',
     color: (theme.vars || theme).palette.text.disabled,
   },
-  ...(ownerState.inner && {
-    ...theme.typography.body2,
-    color: (theme.vars || theme).palette.text.secondary,
-  }),
+  variants: [
+    {
+      props: { inner: true },
+      style: {
+        ...theme.typography.body2,
+        color: (theme.vars || theme).palette.text.secondary,
+      },
+    },
+  ],
 }));
 
 /**
diff --git a/packages/x-date-pickers/src/TimeClock/ClockPointer.tsx b/packages/x-date-pickers/src/TimeClock/ClockPointer.tsx
index a77c40b32736c..735b228846ec7 100644
--- a/packages/x-date-pickers/src/TimeClock/ClockPointer.tsx
+++ b/packages/x-date-pickers/src/TimeClock/ClockPointer.tsx
@@ -34,16 +34,21 @@ const ClockPointerRoot = styled('div', {
   overridesResolver: (_, styles) => styles.root,
 })<{
   ownerState: ClockPointerProps & ClockPointerState;
-}>(({ theme, ownerState }) => ({
+}>(({ theme }) => ({
   width: 2,
   backgroundColor: (theme.vars || theme).palette.primary.main,
   position: 'absolute',
   left: 'calc(50% - 1px)',
   bottom: '50%',
   transformOrigin: 'center bottom 0px',
-  ...(ownerState.shouldAnimate && {
-    transition: theme.transitions.create(['transform', 'height']),
-  }),
+  variants: [
+    {
+      props: { shouldAnimate: true },
+      style: {
+        transition: theme.transitions.create(['transform', 'height']),
+      },
+    },
+  ],
 }));
 
 const ClockPointerThumb = styled('div', {
@@ -52,7 +57,7 @@ const ClockPointerThumb = styled('div', {
   overridesResolver: (_, styles) => styles.thumb,
 })<{
   ownerState: ClockPointerProps & ClockPointerState;
-}>(({ theme, ownerState }) => ({
+}>(({ theme }) => ({
   width: 4,
   height: 4,
   backgroundColor: (theme.vars || theme).palette.primary.contrastText,
@@ -62,9 +67,14 @@ const ClockPointerThumb = styled('div', {
   left: `calc(50% - ${CLOCK_HOUR_WIDTH / 2}px)`,
   border: `${(CLOCK_HOUR_WIDTH - 4) / 2}px solid ${(theme.vars || theme).palette.primary.main}`,
   boxSizing: 'content-box',
-  ...(ownerState.hasSelected && {
-    backgroundColor: (theme.vars || theme).palette.primary.main,
-  }),
+  variants: [
+    {
+      props: { hasSelected: true },
+      style: {
+        backgroundColor: (theme.vars || theme).palette.primary.main,
+      },
+    },
+  ],
 }));
 
 /**
diff --git a/packages/x-date-pickers/src/YearCalendar/PickersYear.tsx b/packages/x-date-pickers/src/YearCalendar/PickersYear.tsx
index 391e81d27a2a7..1365e8bc41996 100644
--- a/packages/x-date-pickers/src/YearCalendar/PickersYear.tsx
+++ b/packages/x-date-pickers/src/YearCalendar/PickersYear.tsx
@@ -47,20 +47,12 @@ const PickersYearRoot = styled('div', {
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
-  variants: [
-    {
-      props: { yearsPerRow: 3 },
-      style: {
-        flexBasis: '33.3%',
-      },
+  variants: [3, 4].map((yearsPerRow) => ({
+    props: { yearsPerRow },
+    style: {
+      flexBasis: `${Math.round((1 / yearsPerRow) * 10000) / 100}%`,
     },
-    {
-      props: { yearsPerRow: 4 },
-      style: {
-        flexBasis: '25%',
-      },
-    },
-  ],
+  })),
 });
 
 const PickersYearButton = styled('button', {
diff --git a/packages/x-date-pickers/src/internals/components/PickersArrowSwitcher/PickersArrowSwitcher.tsx b/packages/x-date-pickers/src/internals/components/PickersArrowSwitcher/PickersArrowSwitcher.tsx
index 926e68a1c0331..6ade141f2f380 100644
--- a/packages/x-date-pickers/src/internals/components/PickersArrowSwitcher/PickersArrowSwitcher.tsx
+++ b/packages/x-date-pickers/src/internals/components/PickersArrowSwitcher/PickersArrowSwitcher.tsx
@@ -38,11 +38,14 @@ const PickersArrowSwitcherButton = styled(IconButton, {
   overridesResolver: (props, styles) => styles.button,
 })<{
   ownerState: PickersArrowSwitcherProps;
-}>(({ ownerState }) => ({
-  ...(ownerState.hidden && {
-    visibility: 'hidden',
-  }),
-}));
+}>({
+  variants: [
+    {
+      props: { hidden: true },
+      style: { visibility: 'hidden' },
+    },
+  ],
+});
 
 const useUtilityClasses = (ownerState: PickersArrowSwitcherOwnerState) => {
   const { classes } = ownerState;
diff --git a/packages/x-date-pickers/src/internals/components/PickersPopper.tsx b/packages/x-date-pickers/src/internals/components/PickersPopper.tsx
index a1884b16c1aa9..9a8185ee8a9b8 100644
--- a/packages/x-date-pickers/src/internals/components/PickersPopper.tsx
+++ b/packages/x-date-pickers/src/internals/components/PickersPopper.tsx
@@ -109,13 +109,18 @@ const PickersPopperPaper = styled(MuiPaper, {
   overridesResolver: (_, styles) => styles.paper,
 })<{
   ownerState: PickersPopperOwnerState;
-}>(({ ownerState }) => ({
+}>({
   outline: 0,
   transformOrigin: 'top center',
-  ...(ownerState.placement.includes('top') && {
-    transformOrigin: 'bottom center',
-  }),
-}));
+  variants: [
+    {
+      props: ({ placement }) => placement.includes('top'),
+      style: {
+        transformOrigin: 'bottom center',
+      },
+    },
+  ],
+});
 
 function clickedRootScrollbar(event: MouseEvent, doc: Document) {
   return (

From 56bf1ab647197d68f38aefe4eb3c3d32fcc2be27 Mon Sep 17 00:00:00 2001
From: delangle <flaviendelangle@gmail.com>
Date: Fri, 9 Feb 2024 09:37:52 +0100
Subject: [PATCH 05/25] Fix

---
 .../x-date-pickers/src/internals/components/PickersPopper.tsx   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/x-date-pickers/src/internals/components/PickersPopper.tsx b/packages/x-date-pickers/src/internals/components/PickersPopper.tsx
index 9a8185ee8a9b8..bd91b255ee38f 100644
--- a/packages/x-date-pickers/src/internals/components/PickersPopper.tsx
+++ b/packages/x-date-pickers/src/internals/components/PickersPopper.tsx
@@ -114,7 +114,7 @@ const PickersPopperPaper = styled(MuiPaper, {
   transformOrigin: 'top center',
   variants: [
     {
-      props: ({ placement }) => placement.includes('top'),
+      props: ({ placement }: PickersPopperOwnerState) => placement.includes('top'),
       style: {
         transformOrigin: 'bottom center',
       },

From 399c3855260c356b9794f0c46c3f77a4cd483b39 Mon Sep 17 00:00:00 2001
From: delangle <flaviendelangle@gmail.com>
Date: Fri, 9 Feb 2024 09:48:24 +0100
Subject: [PATCH 06/25] Fix

---
 packages/x-date-pickers/src/MonthCalendar/PickersMonth.tsx | 2 +-
 packages/x-date-pickers/src/YearCalendar/PickersYear.tsx   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/x-date-pickers/src/MonthCalendar/PickersMonth.tsx b/packages/x-date-pickers/src/MonthCalendar/PickersMonth.tsx
index 01ddfcfe6539b..1bdd65f3affba 100644
--- a/packages/x-date-pickers/src/MonthCalendar/PickersMonth.tsx
+++ b/packages/x-date-pickers/src/MonthCalendar/PickersMonth.tsx
@@ -54,7 +54,7 @@ const PickersMonthRoot = styled('div', {
   variants: [3, 4].map((monthsPerRow) => ({
     props: { monthsPerRow },
     style: {
-      flexBasis: `${Math.round((1 / monthsPerRow) * 10000) / 100}%`,
+      flexBasis: `${Math.round((1 / monthsPerRow) * 1000) / 10}%`,
     },
   })),
 });
diff --git a/packages/x-date-pickers/src/YearCalendar/PickersYear.tsx b/packages/x-date-pickers/src/YearCalendar/PickersYear.tsx
index 1365e8bc41996..81ddff81aa357 100644
--- a/packages/x-date-pickers/src/YearCalendar/PickersYear.tsx
+++ b/packages/x-date-pickers/src/YearCalendar/PickersYear.tsx
@@ -50,7 +50,7 @@ const PickersYearRoot = styled('div', {
   variants: [3, 4].map((yearsPerRow) => ({
     props: { yearsPerRow },
     style: {
-      flexBasis: `${Math.round((1 / yearsPerRow) * 10000) / 100}%`,
+      flexBasis: `${Math.round((1 / yearsPerRow) * 1000) / 10}%`,
     },
   })),
 });

From a486d69e8f4f21367bd6781ba96685c37724aa48 Mon Sep 17 00:00:00 2001
From: delangle <flaviendelangle@gmail.com>
Date: Fri, 9 Feb 2024 10:04:06 +0100
Subject: [PATCH 07/25] Migrate more components

---
 .../DateRangePickerDay/DateRangePickerDay.tsx | 82 ++++++++++++-------
 .../src/PickersDay/PickersDay.tsx             | 39 +++++----
 2 files changed, 76 insertions(+), 45 deletions(-)

diff --git a/packages/x-date-pickers-pro/src/DateRangePickerDay/DateRangePickerDay.tsx b/packages/x-date-pickers-pro/src/DateRangePickerDay/DateRangePickerDay.tsx
index 29c0be8863b86..7614c40407d62 100644
--- a/packages/x-date-pickers-pro/src/DateRangePickerDay/DateRangePickerDay.tsx
+++ b/packages/x-date-pickers-pro/src/DateRangePickerDay/DateRangePickerDay.tsx
@@ -50,6 +50,11 @@ export interface DateRangePickerDayProps<TDate extends PickerValidDate>
    * Indicates if the day should be visually selected.
    */
   isVisuallySelected?: boolean;
+  /**
+   * If `true`, the day can be dragged to change the current date range.
+   * @default false
+   */
+  draggable?: boolean;
 }
 
 type OwnerState = DateRangePickerDayProps<any> & {
@@ -154,10 +159,11 @@ const DateRangePickerDayRoot = styled('div', {
     },
     styles.root,
   ],
-})<{ ownerState: OwnerState }>(({ theme, ownerState }) =>
-  ownerState.isHiddenDayFiller
-    ? {}
-    : {
+})<{ ownerState: OwnerState }>(({ theme }) => ({
+  variants: [
+    {
+      props: { isHiddenDayFiller: false },
+      style: {
         [`&:first-of-type .${dateRangePickerDayClasses.rangeIntervalDayPreview}`]: {
           ...startBorderStyle,
           borderLeftColor: (theme.vars || theme).palette.divider,
@@ -166,25 +172,38 @@ const DateRangePickerDayRoot = styled('div', {
           ...endBorderStyle,
           borderRightColor: (theme.vars || theme).palette.divider,
         },
-        ...(ownerState.isHighlighting && {
-          borderRadius: 0,
-          color: (theme.vars || theme).palette.primary.contrastText,
-          backgroundColor: theme.vars
-            ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.focusOpacity})`
-            : alpha(theme.palette.primary.main, theme.palette.action.focusOpacity),
-          '&:first-of-type': startBorderStyle,
-          '&:last-of-type': endBorderStyle,
-        }),
-        ...((ownerState.isStartOfHighlighting || ownerState.isFirstVisibleCell) && {
-          ...startBorderStyle,
-          paddingLeft: 0,
-        }),
-        ...((ownerState.isEndOfHighlighting || ownerState.isLastVisibleCell) && {
-          ...endBorderStyle,
-          paddingRight: 0,
-        }),
       },
-);
+    },
+    {
+      props: { isHiddenDayFiller: false, isHighlighting: true },
+      style: {
+        borderRadius: 0,
+        color: (theme.vars || theme).palette.primary.contrastText,
+        backgroundColor: theme.vars
+          ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.focusOpacity})`
+          : alpha(theme.palette.primary.main, theme.palette.action.focusOpacity),
+        '&:first-of-type': startBorderStyle,
+        '&:last-of-type': endBorderStyle,
+      },
+    },
+    {
+      props: ({ isHiddenDayFiller, isStartOfHighlighting, isFirstVisibleCell }: OwnerState) =>
+        !isHiddenDayFiller && (isStartOfHighlighting || isFirstVisibleCell),
+      style: {
+        ...startBorderStyle,
+        paddingLeft: 0,
+      },
+    },
+    {
+      props: ({ isHiddenDayFiller, isEndOfHighlighting, isLastVisibleCell }: OwnerState) =>
+        !isHiddenDayFiller && (isEndOfHighlighting || isLastVisibleCell),
+      style: {
+        ...endBorderStyle,
+        paddingRight: 0,
+      },
+    },
+  ],
+}));
 
 DateRangePickerDayRoot.propTypes = {
   // ----------------------------- Warning --------------------------------
@@ -248,19 +267,22 @@ const DateRangePickerDayDay = styled(PickersDay, {
   ],
 })<{
   ownerState: OwnerState;
-}>(({ ownerState }) => ({
+}>({
   // Required to overlap preview border
   transform: 'scale(1.1)',
   '& > *': {
     transform: 'scale(0.9)',
   },
-  ...(ownerState.draggable && {
-    cursor: 'grab',
-  }),
-  ...(ownerState.draggable && {
-    touchAction: 'none',
-  }),
-})) as unknown as <TDate extends PickerValidDate>(
+  variants: [
+    {
+      props: { draggable: true },
+      style: {
+        cursor: 'grab',
+        touchAction: 'none',
+      },
+    },
+  ],
+}) as unknown as <TDate extends PickerValidDate>(
   props: PickersDayProps<TDate> & { ownerState: OwnerState },
 ) => React.JSX.Element;
 
diff --git a/packages/x-date-pickers/src/PickersDay/PickersDay.tsx b/packages/x-date-pickers/src/PickersDay/PickersDay.tsx
index b0ed7b3ac0eb7..a614588756fd6 100644
--- a/packages/x-date-pickers/src/PickersDay/PickersDay.tsx
+++ b/packages/x-date-pickers/src/PickersDay/PickersDay.tsx
@@ -127,7 +127,7 @@ const useUtilityClasses = (ownerState: PickersDayProps<any>) => {
   return composeClasses(slots, getPickersDayUtilityClass, classes);
 };
 
-const styleArg = ({ theme, ownerState }: { theme: Theme; ownerState: OwnerState }) => ({
+const styleArg = ({ theme }: { theme: Theme }) => ({
   ...theme.typography.caption,
   width: DAY_SIZE,
   height: DAY_SIZE,
@@ -170,19 +170,28 @@ const styleArg = ({ theme, ownerState }: { theme: Theme; ownerState: OwnerState
   [`&.${pickersDayClasses.disabled}&.${pickersDayClasses.selected}`]: {
     opacity: 0.6,
   },
-  ...(!ownerState.disableMargin && {
-    margin: `0 ${DAY_MARGIN}px`,
-  }),
-  ...(ownerState.outsideCurrentMonth &&
-    ownerState.showDaysOutsideCurrentMonth && {
-      color: (theme.vars || theme).palette.text.secondary,
-    }),
-  ...(!ownerState.disableHighlightToday &&
-    ownerState.today && {
-      [`&:not(.${pickersDayClasses.selected})`]: {
-        border: `1px solid ${(theme.vars || theme).palette.text.secondary}`,
+  variants: [
+    {
+      props: { disableMargin: false },
+      style: {
+        margin: `0 ${DAY_MARGIN}px`,
       },
-    }),
+    },
+    {
+      props: { outsideCurrentMonth: true, showDaysOutsideCurrentMonth: true },
+      style: {
+        color: (theme.vars || theme).palette.text.secondary,
+      },
+    },
+    {
+      props: { disableHighlightToday: false, today: true },
+      style: {
+        [`&:not(.${pickersDayClasses.selected})`]: {
+          border: `1px solid ${(theme.vars || theme).palette.text.secondary}`,
+        },
+      },
+    },
+  ],
 });
 
 const overridesResolver = (
@@ -213,8 +222,8 @@ const PickersDayFiller = styled('div', {
   name: 'MuiPickersDay',
   slot: 'Root',
   overridesResolver,
-})<{ ownerState: OwnerState }>(({ theme, ownerState }) => ({
-  ...styleArg({ theme, ownerState }),
+})<{ ownerState: OwnerState }>(({ theme }) => ({
+  ...styleArg({ theme }),
   // visibility: 'hidden' does not work here as it hides the element from screen readers as well
   opacity: 0,
   pointerEvents: 'none',

From 9ef8017f8eb98552733ab4585e55bc5ea8e440ce Mon Sep 17 00:00:00 2001
From: delangle <flaviendelangle@gmail.com>
Date: Fri, 9 Feb 2024 10:14:30 +0100
Subject: [PATCH 08/25] Fix

---
 docs/pages/x/api/date-pickers/date-range-picker-day.json     | 1 +
 .../date-range-picker-day/date-range-picker-day.json         | 3 +++
 .../src/DateRangePickerDay/DateRangePickerDay.tsx            | 5 +++++
 3 files changed, 9 insertions(+)

diff --git a/docs/pages/x/api/date-pickers/date-range-picker-day.json b/docs/pages/x/api/date-pickers/date-range-picker-day.json
index fc19b9e50ec6d..fa57a2557f2b8 100644
--- a/docs/pages/x/api/date-pickers/date-range-picker-day.json
+++ b/docs/pages/x/api/date-pickers/date-range-picker-day.json
@@ -23,6 +23,7 @@
     "disableMargin": { "type": { "name": "bool" }, "default": "false" },
     "disableRipple": { "type": { "name": "bool" }, "default": "false" },
     "disableTouchRipple": { "type": { "name": "bool" }, "default": "false" },
+    "draggable": { "type": { "name": "bool" }, "default": "false" },
     "focusRipple": { "type": { "name": "bool" }, "default": "false" },
     "focusVisibleClassName": { "type": { "name": "string" } },
     "isVisuallySelected": { "type": { "name": "bool" } },
diff --git a/docs/translations/api-docs/date-pickers/date-range-picker-day/date-range-picker-day.json b/docs/translations/api-docs/date-pickers/date-range-picker-day/date-range-picker-day.json
index d24a2914f43b5..56e31a43dd71b 100644
--- a/docs/translations/api-docs/date-pickers/date-range-picker-day/date-range-picker-day.json
+++ b/docs/translations/api-docs/date-pickers/date-range-picker-day/date-range-picker-day.json
@@ -22,6 +22,9 @@
     "disableTouchRipple": {
       "description": "If <code>true</code>, the touch ripple effect is disabled."
     },
+    "draggable": {
+      "description": "If <code>true</code>, the day can be dragged to change the current date range."
+    },
     "focusRipple": {
       "description": "If <code>true</code>, the base button will have a keyboard focus ripple."
     },
diff --git a/packages/x-date-pickers-pro/src/DateRangePickerDay/DateRangePickerDay.tsx b/packages/x-date-pickers-pro/src/DateRangePickerDay/DateRangePickerDay.tsx
index 7614c40407d62..5b0b002c3cf1f 100644
--- a/packages/x-date-pickers-pro/src/DateRangePickerDay/DateRangePickerDay.tsx
+++ b/packages/x-date-pickers-pro/src/DateRangePickerDay/DateRangePickerDay.tsx
@@ -427,6 +427,11 @@ DateRangePickerDayRaw.propTypes = {
    * @default false
    */
   disableTouchRipple: PropTypes.bool,
+  /**
+   * If `true`, the day can be dragged to change the current date range.
+   * @default false
+   */
+  draggable: PropTypes.bool,
   /**
    * If `true`, the base button will have a keyboard focus ripple.
    * @default false

From 5630924a9520239755bf3ce1efea0ed229f38b69 Mon Sep 17 00:00:00 2001
From: delangle <flaviendelangle@gmail.com>
Date: Tue, 20 Feb 2024 08:31:12 +0100
Subject: [PATCH 09/25] Code review: Jun

---
 .../src/MonthCalendar/PickersMonth.tsx        | 10 ++---
 .../src/PickersLayout/PickersLayout.tsx       | 37 +++++++++++--------
 2 files changed, 25 insertions(+), 22 deletions(-)

diff --git a/packages/x-date-pickers/src/MonthCalendar/PickersMonth.tsx b/packages/x-date-pickers/src/MonthCalendar/PickersMonth.tsx
index 1bdd65f3affba..373ffaa3489a7 100644
--- a/packages/x-date-pickers/src/MonthCalendar/PickersMonth.tsx
+++ b/packages/x-date-pickers/src/MonthCalendar/PickersMonth.tsx
@@ -51,12 +51,10 @@ const PickersMonthRoot = styled('div', {
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
-  variants: [3, 4].map((monthsPerRow) => ({
-    props: { monthsPerRow },
-    style: {
-      flexBasis: `${Math.round((1 / monthsPerRow) * 1000) / 10}%`,
-    },
-  })),
+  variants: [
+    { props: { monthsPerRow: 3 }, style: { flexBasis: '33.33%' } },
+    { props: { monthsPerRow: 4 }, style: { flexBasis: '25%' } },
+  ],
 });
 
 const PickersMonthButton = styled('button', {
diff --git a/packages/x-date-pickers/src/PickersLayout/PickersLayout.tsx b/packages/x-date-pickers/src/PickersLayout/PickersLayout.tsx
index 9d917f09c66be..6edab65b4ab84 100644
--- a/packages/x-date-pickers/src/PickersLayout/PickersLayout.tsx
+++ b/packages/x-date-pickers/src/PickersLayout/PickersLayout.tsx
@@ -28,23 +28,28 @@ const PickersLayoutRoot = styled('div', {
   gridAutoColumns: 'max-content auto max-content',
   gridAutoRows: 'max-content auto max-content',
   [`& .${pickersLayoutClasses.actionBar}`]: { gridColumn: '1 / 4', gridRow: 3 },
-  variants: [true, false].map((isLandscape) => ({
-    props: { isLandscape },
-    style: {
-      [`& .${pickersLayoutClasses.toolbar}`]: isLandscape
-        ? {
-            gridColumn: theme.direction === 'rtl' ? 3 : 1,
-            gridRow: '2 / 3',
-          }
-        : { gridColumn: '2 / 4', gridRow: 1 },
-      [`.${pickersLayoutClasses.shortcuts}`]: isLandscape
-        ? { gridColumn: '2 / 4', gridRow: 1 }
-        : {
-            gridColumn: theme.direction === 'rtl' ? 3 : 1,
-            gridRow: '2 / 3',
-          },
+  variants: [
+    {
+      props: { isLandscape: true },
+      style: {
+        [`& .${pickersLayoutClasses.toolbar}`]: {
+          gridColumn: theme.direction === 'rtl' ? 3 : 1,
+          gridRow: '2 / 3',
+        },
+        [`.${pickersLayoutClasses.shortcuts}`]: { gridColumn: '2 / 4', gridRow: 1 },
+      },
     },
-  })),
+    {
+      props: { isLandscape: false },
+      style: {
+        [`& .${pickersLayoutClasses.toolbar}`]: { gridColumn: '2 / 4', gridRow: 1 },
+        [`.${pickersLayoutClasses.shortcuts}`]: {
+          gridColumn: theme.direction === 'rtl' ? 3 : 1,
+          gridRow: '2 / 3',
+        },
+      },
+    },
+  ],
 }));
 
 PickersLayoutRoot.propTypes = {

From 481abb521a12051b22e35884b0441804a05cdd1e Mon Sep 17 00:00:00 2001
From: delangle <flaviendelangle@gmail.com>
Date: Tue, 20 Feb 2024 08:54:36 +0100
Subject: [PATCH 10/25] Work

---
 .../DateRangePickerDay/DateRangePickerDay.tsx | 46 +++++++---
 .../DateTimePicker/DateTimePickerToolbar.tsx  | 87 ++++++++++++-------
 .../internals/components/PickersToolbar.tsx   | 21 +++--
 3 files changed, 104 insertions(+), 50 deletions(-)

diff --git a/packages/x-date-pickers-pro/src/DateRangePickerDay/DateRangePickerDay.tsx b/packages/x-date-pickers-pro/src/DateRangePickerDay/DateRangePickerDay.tsx
index 5b0b002c3cf1f..3a49227e2555c 100644
--- a/packages/x-date-pickers-pro/src/DateRangePickerDay/DateRangePickerDay.tsx
+++ b/packages/x-date-pickers-pro/src/DateRangePickerDay/DateRangePickerDay.tsx
@@ -228,24 +228,46 @@ const DateRangePickerDayRangeIntervalPreview = styled('div', {
     },
     styles.rangeIntervalPreview,
   ],
-})<{ ownerState: OwnerState }>(({ theme, ownerState }) => ({
+})<{ ownerState: OwnerState }>(({ theme }) => ({
   // replace default day component margin with transparent border to avoid jumping on preview
   border: '2px solid transparent',
-  ...(ownerState.isPreviewing &&
-    !ownerState.isHiddenDayFiller && {
-      borderRadius: 0,
-      border: `2px dashed ${(theme.vars || theme).palette.divider}`,
-      borderLeftColor: 'transparent',
-      borderRightColor: 'transparent',
-      ...((ownerState.isStartOfPreviewing || ownerState.isFirstVisibleCell) && {
+  variants: [
+    {
+      props: { isPreviewing: true, isHiddenDayFiller: false },
+      style: {
+        borderRadius: 0,
+        border: `2px dashed ${(theme.vars || theme).palette.divider}`,
+        borderLeftColor: 'transparent',
+        borderRightColor: 'transparent',
+      },
+    },
+    {
+      props: ({
+        isPreviewing,
+        isHiddenDayFiller,
+        isStartOfPreviewing,
+        isFirstVisibleCell,
+      }: OwnerState) =>
+        isPreviewing && isHiddenDayFiller && (isStartOfPreviewing || isFirstVisibleCell),
+      style: {
         borderLeftColor: (theme.vars || theme).palette.divider,
         ...startBorderStyle,
-      }),
-      ...((ownerState.isEndOfPreviewing || ownerState.isLastVisibleCell) && {
+      },
+    },
+    {
+      props: ({
+        isPreviewing,
+        isHiddenDayFiller,
+        isEndOfPreviewing,
+        isLastVisibleCell,
+      }: OwnerState) =>
+        isPreviewing && isHiddenDayFiller && (isEndOfPreviewing || isLastVisibleCell),
+      style: {
         borderRightColor: (theme.vars || theme).palette.divider,
         ...endBorderStyle,
-      }),
-    }),
+      },
+    },
+  ],
 }));
 
 DateRangePickerDayRangeIntervalPreview.propTypes = {
diff --git a/packages/x-date-pickers/src/DateTimePicker/DateTimePickerToolbar.tsx b/packages/x-date-pickers/src/DateTimePicker/DateTimePickerToolbar.tsx
index 8f48f52b6b5e0..6899a02dd6a8d 100644
--- a/packages/x-date-pickers/src/DateTimePicker/DateTimePickerToolbar.tsx
+++ b/packages/x-date-pickers/src/DateTimePicker/DateTimePickerToolbar.tsx
@@ -60,25 +60,36 @@ const DateTimePickerToolbarRoot = styled(PickersToolbar, {
   name: 'MuiDateTimePickerToolbar',
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root,
-})<{ ownerState: DateTimePickerToolbarProps<any> }>(({ theme, ownerState }) => ({
-  paddingLeft: ownerState.toolbarVariant === 'desktop' && !ownerState.isLandscape ? 24 : 16,
-  paddingRight: ownerState.toolbarVariant === 'desktop' && !ownerState.isLandscape ? 0 : 16,
-  borderBottom:
-    ownerState.toolbarVariant === 'desktop'
-      ? `1px solid ${(theme.vars || theme).palette.divider}`
-      : undefined,
-  borderRight:
-    ownerState.toolbarVariant === 'desktop' && ownerState.isLandscape
-      ? `1px solid ${(theme.vars || theme).palette.divider}`
-      : undefined,
+})<{ ownerState: DateTimePickerToolbarProps<any> }>(({ theme }) => ({
+  paddingLeft: 16,
+  paddingRight: 16,
   justifyContent: 'space-around',
   position: 'relative',
-  ...(ownerState.toolbarVariant === 'desktop' && {
-    [`& .${pickersToolbarClasses.content} .${pickersToolbarTextClasses.selected}`]: {
-      color: (theme.vars || theme).palette.primary.main,
-      fontWeight: theme.typography.fontWeightBold,
+  variants: [
+    {
+      props: { toolbarVariant: 'desktop' },
+      style: {
+        borderBottom: `1px solid ${(theme.vars || theme).palette.divider}`,
+        [`& .${pickersToolbarClasses.content} .${pickersToolbarTextClasses.selected}`]: {
+          color: (theme.vars || theme).palette.primary.main,
+          fontWeight: theme.typography.fontWeightBold,
+        },
+      },
     },
-  }),
+    {
+      props: { toolbarVariant: 'desktop', isLandscape: true },
+      style: {
+        borderRight: `1px solid ${(theme.vars || theme).palette.divider}`,
+      },
+    },
+    {
+      props: { toolbarVariant: 'desktop', isLandscape: false },
+      style: {
+        paddingLeft: 24,
+        paddingRight: 0,
+      },
+    },
+  ],
 }));
 
 DateTimePickerToolbarRoot.propTypes = {
@@ -117,22 +128,33 @@ const DateTimePickerToolbarTimeContainer = styled('div', {
   name: 'MuiDateTimePickerToolbar',
   slot: 'TimeContainer',
   overridesResolver: (props, styles) => styles.timeContainer,
-})<{ ownerState: DateTimePickerToolbarProps<any> }>(({ theme, ownerState }) => {
-  const direction =
-    ownerState.isLandscape && ownerState.toolbarVariant !== 'desktop' ? 'column' : 'row';
+})<{ ownerState: DateTimePickerToolbarProps<any> }>(({ theme }) => {
   return {
     display: 'flex',
-    flexDirection: direction,
-    ...(ownerState.toolbarVariant === 'desktop' && {
-      ...(!ownerState.isLandscape && {
-        gap: 9,
-        marginRight: 4,
-        alignSelf: 'flex-end',
-      }),
-    }),
+    flexDirection: 'row',
     ...(theme.direction === 'rtl' && {
-      flexDirection: `${direction}-reverse`,
+      flexDirection: 'row-reverse',
     }),
+    variants: [
+      {
+        props: ({ toolbarVariant, isLandscape }: DateTimePickerToolbarProps<any>) =>
+          isLandscape && toolbarVariant !== 'desktop',
+        style: {
+          flexDirection: 'column',
+          ...(theme.direction === 'rtl' && {
+            flexDirection: 'column-reverse',
+          }),
+        },
+      },
+      {
+        props: { toolbarVariant: 'desktop', isLandscape: true },
+        style: {
+          gap: 9,
+          marginRight: 4,
+          alignSelf: 'flex-end',
+        },
+      },
+    ],
   };
 });
 
@@ -140,12 +162,17 @@ const DateTimePickerToolbarTimeDigitsContainer = styled('div', {
   name: 'MuiDateTimePickerToolbar',
   slot: 'TimeDigitsContainer',
   overridesResolver: (props, styles) => styles.timeDigitsContainer,
-})<{ ownerState: DateTimePickerToolbarProps<any> }>(({ theme, ownerState }) => ({
+})<{ ownerState: DateTimePickerToolbarProps<any> }>(({ theme }) => ({
   display: 'flex',
-  ...(ownerState.toolbarVariant === 'desktop' && { gap: 1.5 }),
   ...(theme.direction === 'rtl' && {
     flexDirection: 'row-reverse',
   }),
+  variants: [
+    {
+      props: { toolbarVariant: 'desktop' },
+      style: { gap: 1.5 },
+    },
+  ],
 }));
 
 DateTimePickerToolbarTimeContainer.propTypes = {
diff --git a/packages/x-date-pickers/src/internals/components/PickersToolbar.tsx b/packages/x-date-pickers/src/internals/components/PickersToolbar.tsx
index 7f2e2173c479f..2c89470b06e51 100644
--- a/packages/x-date-pickers/src/internals/components/PickersToolbar.tsx
+++ b/packages/x-date-pickers/src/internals/components/PickersToolbar.tsx
@@ -32,19 +32,24 @@ const PickersToolbarRoot = styled('div', {
   overridesResolver: (props, styles) => styles.root,
 })<{
   ownerState: PickersToolbarProps<any, any>;
-}>(({ theme, ownerState }) => ({
+}>(({ theme }) => ({
   display: 'flex',
   flexDirection: 'column',
   alignItems: 'flex-start',
   justifyContent: 'space-between',
   padding: theme.spacing(2, 3),
-  ...(ownerState.isLandscape && {
-    height: 'auto',
-    maxWidth: 160,
-    padding: 16,
-    justifyContent: 'flex-start',
-    flexWrap: 'wrap',
-  }),
+  variants: [
+    {
+      props: { isLandscape: true },
+      style: {
+        height: 'auto',
+        maxWidth: 160,
+        padding: 16,
+        justifyContent: 'flex-start',
+        flexWrap: 'wrap',
+      },
+    },
+  ],
 }));
 
 const PickersToolbarContent = styled('div', {

From c625f017008735e266869bca6294e15ac69485f3 Mon Sep 17 00:00:00 2001
From: delangle <flaviendelangle@gmail.com>
Date: Tue, 20 Feb 2024 12:44:15 +0100
Subject: [PATCH 11/25] Fix

---
 .../x-date-pickers/src/internals/components/PickersPopper.tsx  | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/x-date-pickers/src/internals/components/PickersPopper.tsx b/packages/x-date-pickers/src/internals/components/PickersPopper.tsx
index f0a6d6fe12662..f4c9089c4b00f 100644
--- a/packages/x-date-pickers/src/internals/components/PickersPopper.tsx
+++ b/packages/x-date-pickers/src/internals/components/PickersPopper.tsx
@@ -117,7 +117,8 @@ const PickersPopperPaper = styled(MuiPaper, {
   transformOrigin: 'top center',
   variants: [
     {
-      props: ({ placement }: PickersPopperOwnerState) => placement.includes('top'),
+      props: ({ ownerState }: { ownerState: PickersPopperOwnerState }) =>
+        ownerState.placement.includes('top'),
       style: {
         transformOrigin: 'bottom center',
       },

From 3b9665b8ab5e3d58adc4e673f0bcdcf98caf4236 Mon Sep 17 00:00:00 2001
From: delangle <flaviendelangle@gmail.com>
Date: Tue, 20 Feb 2024 12:57:58 +0100
Subject: [PATCH 12/25] Fix

---
 .../x-date-pickers/src/MonthCalendar/PickersMonth.tsx     | 6 ++----
 packages/x-date-pickers/src/YearCalendar/PickersYear.tsx  | 8 ++------
 2 files changed, 4 insertions(+), 10 deletions(-)

diff --git a/packages/x-date-pickers/src/MonthCalendar/PickersMonth.tsx b/packages/x-date-pickers/src/MonthCalendar/PickersMonth.tsx
index 373ffaa3489a7..daae053f66c4d 100644
--- a/packages/x-date-pickers/src/MonthCalendar/PickersMonth.tsx
+++ b/packages/x-date-pickers/src/MonthCalendar/PickersMonth.tsx
@@ -51,10 +51,8 @@ const PickersMonthRoot = styled('div', {
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
-  variants: [
-    { props: { monthsPerRow: 3 }, style: { flexBasis: '33.33%' } },
-    { props: { monthsPerRow: 4 }, style: { flexBasis: '25%' } },
-  ],
+  flexBasis: '33.3%',
+  variants: [{ props: { monthsPerRow: 4 }, style: { flexBasis: '25%' } }],
 });
 
 const PickersMonthButton = styled('button', {
diff --git a/packages/x-date-pickers/src/YearCalendar/PickersYear.tsx b/packages/x-date-pickers/src/YearCalendar/PickersYear.tsx
index 81ddff81aa357..cc8248d37797f 100644
--- a/packages/x-date-pickers/src/YearCalendar/PickersYear.tsx
+++ b/packages/x-date-pickers/src/YearCalendar/PickersYear.tsx
@@ -47,12 +47,8 @@ const PickersYearRoot = styled('div', {
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
-  variants: [3, 4].map((yearsPerRow) => ({
-    props: { yearsPerRow },
-    style: {
-      flexBasis: `${Math.round((1 / yearsPerRow) * 1000) / 10}%`,
-    },
-  })),
+  flexBasis: '33.3%',
+  variants: [{ props: { yearsPerRow: 4 }, style: { flexBasis: '25%' } }],
 });
 
 const PickersYearButton = styled('button', {

From 6bb160a33ed5b916c0cf216352b4b7b117992a33 Mon Sep 17 00:00:00 2001
From: delangle <flaviendelangle@gmail.com>
Date: Wed, 21 Feb 2024 08:58:04 +0100
Subject: [PATCH 13/25] Fix

---
 .../DateRangePickerDay/DateRangePickerDay.tsx | 34 ++++++++++---------
 .../DateTimePicker/DateTimePickerToolbar.tsx  |  7 ++--
 2 files changed, 23 insertions(+), 18 deletions(-)

diff --git a/packages/x-date-pickers-pro/src/DateRangePickerDay/DateRangePickerDay.tsx b/packages/x-date-pickers-pro/src/DateRangePickerDay/DateRangePickerDay.tsx
index 3a49227e2555c..ac95a4374df9d 100644
--- a/packages/x-date-pickers-pro/src/DateRangePickerDay/DateRangePickerDay.tsx
+++ b/packages/x-date-pickers-pro/src/DateRangePickerDay/DateRangePickerDay.tsx
@@ -187,16 +187,22 @@ const DateRangePickerDayRoot = styled('div', {
       },
     },
     {
-      props: ({ isHiddenDayFiller, isStartOfHighlighting, isFirstVisibleCell }: OwnerState) =>
-        !isHiddenDayFiller && (isStartOfHighlighting || isFirstVisibleCell),
+      props: ({
+        ownerState: { isHiddenDayFiller, isStartOfHighlighting, isFirstVisibleCell },
+      }: {
+        ownerState: OwnerState;
+      }) => !isHiddenDayFiller && (isStartOfHighlighting || isFirstVisibleCell),
       style: {
         ...startBorderStyle,
         paddingLeft: 0,
       },
     },
     {
-      props: ({ isHiddenDayFiller, isEndOfHighlighting, isLastVisibleCell }: OwnerState) =>
-        !isHiddenDayFiller && (isEndOfHighlighting || isLastVisibleCell),
+      props: ({
+        ownerState: { isHiddenDayFiller, isEndOfHighlighting, isLastVisibleCell },
+      }: {
+        ownerState: OwnerState;
+      }) => !isHiddenDayFiller && (isEndOfHighlighting || isLastVisibleCell),
       style: {
         ...endBorderStyle,
         paddingRight: 0,
@@ -243,12 +249,10 @@ const DateRangePickerDayRangeIntervalPreview = styled('div', {
     },
     {
       props: ({
-        isPreviewing,
-        isHiddenDayFiller,
-        isStartOfPreviewing,
-        isFirstVisibleCell,
-      }: OwnerState) =>
-        isPreviewing && isHiddenDayFiller && (isStartOfPreviewing || isFirstVisibleCell),
+        ownerState: { isPreviewing, isHiddenDayFiller, isStartOfPreviewing, isFirstVisibleCell },
+      }: {
+        ownerState: OwnerState;
+      }) => isPreviewing && isHiddenDayFiller && (isStartOfPreviewing || isFirstVisibleCell),
       style: {
         borderLeftColor: (theme.vars || theme).palette.divider,
         ...startBorderStyle,
@@ -256,12 +260,10 @@ const DateRangePickerDayRangeIntervalPreview = styled('div', {
     },
     {
       props: ({
-        isPreviewing,
-        isHiddenDayFiller,
-        isEndOfPreviewing,
-        isLastVisibleCell,
-      }: OwnerState) =>
-        isPreviewing && isHiddenDayFiller && (isEndOfPreviewing || isLastVisibleCell),
+        ownerState: { isPreviewing, isHiddenDayFiller, isEndOfPreviewing, isLastVisibleCell },
+      }: {
+        ownerState: OwnerState;
+      }) => isPreviewing && isHiddenDayFiller && (isEndOfPreviewing || isLastVisibleCell),
       style: {
         borderRightColor: (theme.vars || theme).palette.divider,
         ...endBorderStyle,
diff --git a/packages/x-date-pickers/src/DateTimePicker/DateTimePickerToolbar.tsx b/packages/x-date-pickers/src/DateTimePicker/DateTimePickerToolbar.tsx
index 6899a02dd6a8d..0e48207c641f0 100644
--- a/packages/x-date-pickers/src/DateTimePicker/DateTimePickerToolbar.tsx
+++ b/packages/x-date-pickers/src/DateTimePicker/DateTimePickerToolbar.tsx
@@ -137,8 +137,11 @@ const DateTimePickerToolbarTimeContainer = styled('div', {
     }),
     variants: [
       {
-        props: ({ toolbarVariant, isLandscape }: DateTimePickerToolbarProps<any>) =>
-          isLandscape && toolbarVariant !== 'desktop',
+        props: ({
+          ownerState: { isLandscape, toolbarVariant },
+        }: {
+          ownerState: DateTimePickerToolbarProps<any>;
+        }) => isLandscape && toolbarVariant !== 'desktop',
         style: {
           flexDirection: 'column',
           ...(theme.direction === 'rtl' && {

From d9f6f3e331a6a848de89e1be17def49e0bbeba87 Mon Sep 17 00:00:00 2001
From: delangle <flaviendelangle@gmail.com>
Date: Wed, 21 Feb 2024 10:44:12 +0100
Subject: [PATCH 14/25] Work

---
 .../DateTimeRangePickerToolbar.tsx            | 42 ++++++++++++++-----
 .../src/DatePicker/DatePickerToolbar.tsx      | 15 ++++---
 .../DateTimePicker/DateTimePickerToolbar.tsx  | 35 +++++++++++-----
 .../src/TimePicker/TimePickerToolbar.tsx      | 34 +++++++++------
 .../internals/components/PickersToolbar.tsx   | 26 +++++++++---
 5 files changed, 109 insertions(+), 43 deletions(-)

diff --git a/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePickerToolbar.tsx b/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePickerToolbar.tsx
index ab3a4a32fd666..ab520af9d6eb2 100644
--- a/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePickerToolbar.tsx
+++ b/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePickerToolbar.tsx
@@ -76,24 +76,46 @@ const DateTimeRangePickerToolbarStart = styled(DateTimePickerToolbar, {
   name: 'MuiDateTimeRangePickerToolbar',
   slot: 'StartToolbar',
   overridesResolver: (_, styles) => styles.startToolbar,
-})<DateTimeRangePickerStartOrEndToolbarProps<any>>(({ ownerState }) => ({
+})<DateTimeRangePickerStartOrEndToolbarProps<any>>({
   borderBottom: 'none',
-  ...(ownerState?.toolbarVariant !== 'desktop'
-    ? {
+  variants: [
+    {
+      props: ({
+        ownerState: { toolbarVariant },
+      }: {
+        ownerState: DateTimeRangePickerStartOrEndToolbarProps<any>;
+      }) => toolbarVariant !== 'desktop',
+      style: {
         padding: '12px 8px 0 12px',
-      }
-    : {
+      },
+    },
+    {
+      props: { toolbarVariant: 'desktop' },
+      style: {
         paddingBottom: 0,
-      }),
-})) as DateTimeRangePickerStartOrEndToolbarComponent;
+      },
+    },
+  ],
+}) as DateTimeRangePickerStartOrEndToolbarComponent;
 
 const DateTimeRangePickerToolbarEnd = styled(DateTimePickerToolbar, {
   name: 'MuiDateTimeRangePickerToolbar',
   slot: 'EndToolbar',
   overridesResolver: (_, styles) => styles.endToolbar,
-})<DateTimeRangePickerStartOrEndToolbarProps<any>>(({ ownerState }) => ({
-  padding: ownerState?.toolbarVariant !== 'desktop' ? '12px 8px 12px 12px' : undefined,
-})) as DateTimeRangePickerStartOrEndToolbarComponent;
+})<DateTimeRangePickerStartOrEndToolbarProps<any>>({
+  variants: [
+    {
+      props: ({
+        ownerState: { toolbarVariant },
+      }: {
+        ownerState: DateTimeRangePickerStartOrEndToolbarProps<any>;
+      }) => toolbarVariant !== 'desktop',
+      style: {
+        padding: '12px 8px 12px 12px',
+      },
+    },
+  ],
+}) as DateTimeRangePickerStartOrEndToolbarComponent;
 
 const DateTimeRangePickerToolbar = React.forwardRef(function DateTimeRangePickerToolbar<
   TDate extends PickerValidDate,
diff --git a/packages/x-date-pickers/src/DatePicker/DatePickerToolbar.tsx b/packages/x-date-pickers/src/DatePicker/DatePickerToolbar.tsx
index 5478108b0d720..6a7483e6b3253 100644
--- a/packages/x-date-pickers/src/DatePicker/DatePickerToolbar.tsx
+++ b/packages/x-date-pickers/src/DatePicker/DatePickerToolbar.tsx
@@ -45,11 +45,16 @@ const DatePickerToolbarTitle = styled(Typography, {
   name: 'MuiDatePickerToolbar',
   slot: 'Title',
   overridesResolver: (_, styles) => styles.title,
-})<{ ownerState: DatePickerToolbarProps<any> }>(({ ownerState }) => ({
-  ...(ownerState.isLandscape && {
-    margin: 'auto 16px auto auto',
-  }),
-}));
+})<{ ownerState: DatePickerToolbarProps<any> }>({
+  variants: [
+    {
+      props: { isLandscape: true },
+      style: {
+        margin: 'auto 16px auto auto',
+      },
+    },
+  ],
+});
 
 type DatePickerToolbarComponent = (<TDate extends PickerValidDate>(
   props: DatePickerToolbarProps<TDate> & React.RefAttributes<HTMLDivElement>,
diff --git a/packages/x-date-pickers/src/DateTimePicker/DateTimePickerToolbar.tsx b/packages/x-date-pickers/src/DateTimePicker/DateTimePickerToolbar.tsx
index 0e48207c641f0..145e2c4387da5 100644
--- a/packages/x-date-pickers/src/DateTimePicker/DateTimePickerToolbar.tsx
+++ b/packages/x-date-pickers/src/DateTimePicker/DateTimePickerToolbar.tsx
@@ -198,10 +198,18 @@ const DateTimePickerToolbarSeparator = styled(PickersToolbarText, {
   overridesResolver: (props, styles) => styles.separator,
 })<{
   ownerState: DateTimePickerToolbarProps<any>;
-}>(({ ownerState }) => ({
-  margin: ownerState.toolbarVariant === 'desktop' ? 0 : '0 4px 0 2px',
+}>({
+  margin: '0 4px 0 2px',
   cursor: 'default',
-}));
+  variants: [
+    {
+      props: { toolbarVariant: 'desktop' },
+      style: {
+        margin: 0,
+      },
+    },
+  ],
+});
 
 // Taken from TimePickerToolbar
 const DateTimePickerToolbarAmPmSelection = styled('div', {
@@ -214,21 +222,26 @@ const DateTimePickerToolbarAmPmSelection = styled('div', {
   ],
 })<{
   ownerState: DateTimePickerToolbarProps<any>;
-}>(({ ownerState }) => ({
+}>({
   display: 'flex',
   flexDirection: 'column',
   marginRight: 'auto',
   marginLeft: 12,
-  ...(ownerState.isLandscape && {
-    margin: '4px 0 auto',
-    flexDirection: 'row',
-    justifyContent: 'space-around',
-    width: '100%',
-  }),
   [`& .${dateTimePickerToolbarClasses.ampmLabel}`]: {
     fontSize: 17,
   },
-}));
+  variants: [
+    {
+      props: { isLandscape: true },
+      style: {
+        margin: '4px 0 auto',
+        flexDirection: 'row',
+        justifyContent: 'space-around',
+        width: '100%',
+      },
+    },
+  ],
+});
 
 /**
  * Demos:
diff --git a/packages/x-date-pickers/src/TimePicker/TimePickerToolbar.tsx b/packages/x-date-pickers/src/TimePicker/TimePickerToolbar.tsx
index 65d0e53ba7706..a73afa02d972d 100644
--- a/packages/x-date-pickers/src/TimePicker/TimePickerToolbar.tsx
+++ b/packages/x-date-pickers/src/TimePicker/TimePickerToolbar.tsx
@@ -81,16 +81,21 @@ const TimePickerToolbarHourMinuteLabel = styled('div', {
   ],
 })<{
   ownerState: TimePickerToolbarProps<any>;
-}>(({ theme, ownerState }) => ({
+}>(({ theme }) => ({
   display: 'flex',
   justifyContent: 'flex-end',
   alignItems: 'flex-end',
-  ...(ownerState.isLandscape && {
-    marginTop: 'auto',
-  }),
   ...(theme.direction === 'rtl' && {
     flexDirection: 'row-reverse',
   }),
+  variants: [
+    {
+      props: { isLandscape: true },
+      style: {
+        marginTop: 'auto',
+      },
+    },
+  ],
 }));
 
 TimePickerToolbarHourMinuteLabel.propTypes = {
@@ -117,21 +122,26 @@ const TimePickerToolbarAmPmSelection = styled('div', {
   ],
 })<{
   ownerState: TimePickerToolbarProps<any>;
-}>(({ ownerState }) => ({
+}>({
   display: 'flex',
   flexDirection: 'column',
   marginRight: 'auto',
   marginLeft: 12,
-  ...(ownerState.isLandscape && {
-    margin: '4px 0 auto',
-    flexDirection: 'row',
-    justifyContent: 'space-around',
-    flexBasis: '100%',
-  }),
   [`& .${timePickerToolbarClasses.ampmLabel}`]: {
     fontSize: 17,
   },
-}));
+  variants: [
+    {
+      props: { isLandscape: true },
+      style: {
+        margin: '4px 0 auto',
+        flexDirection: 'row',
+        justifyContent: 'space-around',
+        flexBasis: '100%',
+      },
+    },
+  ],
+});
 
 TimePickerToolbarAmPmSelection.propTypes = {
   // ----------------------------- Warning --------------------------------
diff --git a/packages/x-date-pickers/src/internals/components/PickersToolbar.tsx b/packages/x-date-pickers/src/internals/components/PickersToolbar.tsx
index 2c89470b06e51..110966f40e14c 100644
--- a/packages/x-date-pickers/src/internals/components/PickersToolbar.tsx
+++ b/packages/x-date-pickers/src/internals/components/PickersToolbar.tsx
@@ -58,15 +58,31 @@ const PickersToolbarContent = styled('div', {
   overridesResolver: (props, styles) => styles.content,
 })<{
   ownerState: PickersToolbarProps<any, any>;
-}>(({ ownerState }) => ({
+}>({
   display: 'flex',
   flexWrap: 'wrap',
   width: '100%',
-  justifyContent: ownerState.isLandscape ? 'flex-start' : 'space-between',
-  flexDirection: ownerState.isLandscape ? ownerState.landscapeDirection ?? 'column' : 'row',
   flex: 1,
-  alignItems: ownerState.isLandscape ? 'flex-start' : 'center',
-}));
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  flexDirection: 'row',
+  variants: [
+    {
+      props: { isLandscape: true },
+      style: {
+        justifyContent: 'flex-start',
+        alignItems: 'flex-start',
+        flexDirection: 'column',
+      },
+    },
+    {
+      props: { isLandscape: true, landscapeDirection: 'row' },
+      style: {
+        flexDirection: 'row',
+      },
+    },
+  ],
+});
 
 type PickersToolbarComponent = (<TValue, TView extends DateOrTimeViewWithMeridiem>(
   props: React.PropsWithChildren<PickersToolbarProps<TValue, TView>> &

From 9bdb32bf9752a1c8afc202ada8ddcecdada5b9de Mon Sep 17 00:00:00 2001
From: delangle <flaviendelangle@gmail.com>
Date: Wed, 21 Feb 2024 10:45:24 +0100
Subject: [PATCH 15/25] Fix PickersLayout

---
 packages/x-date-pickers/src/PickersLayout/PickersLayout.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/x-date-pickers/src/PickersLayout/PickersLayout.tsx b/packages/x-date-pickers/src/PickersLayout/PickersLayout.tsx
index 6edab65b4ab84..0937bce1cb7f7 100644
--- a/packages/x-date-pickers/src/PickersLayout/PickersLayout.tsx
+++ b/packages/x-date-pickers/src/PickersLayout/PickersLayout.tsx
@@ -43,7 +43,7 @@ const PickersLayoutRoot = styled('div', {
       props: { isLandscape: false },
       style: {
         [`& .${pickersLayoutClasses.toolbar}`]: { gridColumn: '2 / 4', gridRow: 1 },
-        [`.${pickersLayoutClasses.shortcuts}`]: {
+        [`& .${pickersLayoutClasses.shortcuts}`]: {
           gridColumn: theme.direction === 'rtl' ? 3 : 1,
           gridRow: '2 / 3',
         },

From 07560fc0fb96ee61c6963ae89dea38d7df23e36f Mon Sep 17 00:00:00 2001
From: delangle <flaviendelangle@gmail.com>
Date: Fri, 23 Feb 2024 14:35:34 +0100
Subject: [PATCH 16/25] Migrate inputs

---
 .../PickersFilledInput/PickersFilledInput.tsx | 197 +++++++++++-------
 .../PickersInput/PickersInput.tsx             | 124 ++++++-----
 .../PickersInputBase/PickersInputBase.tsx     |  48 +++--
 .../PickersOutlinedInput/Outline.tsx          |  83 ++++----
 .../PickersOutlinedInput.tsx                  |  30 ++-
 5 files changed, 294 insertions(+), 188 deletions(-)

diff --git a/packages/x-date-pickers/src/PickersTextField/PickersFilledInput/PickersFilledInput.tsx b/packages/x-date-pickers/src/PickersTextField/PickersFilledInput/PickersFilledInput.tsx
index 95d9343c5893f..fc52e495af69d 100644
--- a/packages/x-date-pickers/src/PickersTextField/PickersFilledInput/PickersFilledInput.tsx
+++ b/packages/x-date-pickers/src/PickersTextField/PickersFilledInput/PickersFilledInput.tsx
@@ -23,7 +23,7 @@ const PickersFilledInputRoot = styled(PickersInputBaseRoot, {
   name: 'MuiPickersFilledInput',
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root,
-})<{ ownerState: OwnerStateType }>(({ theme, ownerState }) => {
+})<{ ownerState: OwnerStateType }>(({ theme }) => {
   const light = theme.palette.mode === 'light';
   const bottomLineColor = light ? 'rgba(0, 0, 0, 0.42)' : 'rgba(255, 255, 255, 0.7)';
   const backgroundColor = light ? 'rgba(0, 0, 0, 0.06)' : 'rgba(255, 255, 255, 0.09)';
@@ -51,65 +51,84 @@ const PickersFilledInputRoot = styled(PickersInputBaseRoot, {
     [`&.${pickersFilledInputClasses.disabled}`]: {
       backgroundColor: theme.vars ? theme.vars.palette.FilledInput.disabledBg : disabledBackground,
     },
-    ...(!ownerState.disableUnderline && {
-      '&::after': {
-        borderBottom: `2px solid ${
-          (theme.vars || theme).palette[ownerState.color || 'primary']?.main
-        }`,
-        left: 0,
-        bottom: 0,
-        // Doing the other way around crash on IE11 "''" https://github.com/cssinjs/jss/issues/242
-        content: '""',
-        position: 'absolute',
-        right: 0,
-        transform: 'scaleX(0)',
-        transition: theme.transitions.create('transform', {
-          duration: theme.transitions.duration.shorter,
-          easing: theme.transitions.easing.easeOut,
-        }),
-        pointerEvents: 'none', // Transparent to the hover style.
-      },
-      [`&.${pickersFilledInputClasses.focused}:after`]: {
-        // translateX(0) is a workaround for Safari transform scale bug
-        // See https://github.com/mui/material-ui/issues/31766
-        transform: 'scaleX(1) translateX(0)',
-      },
-      [`&.${pickersFilledInputClasses.error}`]: {
-        '&:before, &:after': {
-          borderBottomColor: (theme.vars || theme).palette.error.main,
+    variants: [
+      ...Object.keys((theme.vars ?? theme).palette)
+        .filter((key) => (theme.vars ?? theme).palette[key].main)
+        .map((color) => ({
+          props: { color },
+          style: {
+            '&::after': {
+              borderBottom: `2px solid ${(theme.vars || theme).palette[color]?.main}`,
+            },
+          },
+        })),
+      {
+        props: { disableUnderline: false },
+        style: {
+          '&::after': {
+            left: 0,
+            bottom: 0,
+            // Doing the other way around crash on IE11 "''" https://github.com/cssinjs/jss/issues/242
+            content: '""',
+            position: 'absolute',
+            right: 0,
+            transform: 'scaleX(0)',
+            transition: theme.transitions.create('transform', {
+              duration: theme.transitions.duration.shorter,
+              easing: theme.transitions.easing.easeOut,
+            }),
+            pointerEvents: 'none', // Transparent to the hover style.
+          },
+          [`&.${pickersFilledInputClasses.focused}:after`]: {
+            // translateX(0) is a workaround for Safari transform scale bug
+            // See https://github.com/mui/material-ui/issues/31766
+            transform: 'scaleX(1) translateX(0)',
+          },
+          [`&.${pickersFilledInputClasses.error}`]: {
+            '&:before, &:after': {
+              borderBottomColor: (theme.vars || theme).palette.error.main,
+            },
+          },
+          '&::before': {
+            borderBottom: `1px solid ${
+              theme.vars
+                ? `rgba(${theme.vars.palette.common.onBackgroundChannel} / ${theme.vars.opacity.inputUnderline})`
+                : bottomLineColor
+            }`,
+            left: 0,
+            bottom: 0,
+            // Doing the other way around crash on IE11 "''" https://github.com/cssinjs/jss/issues/242
+            content: '"\\00a0"',
+            position: 'absolute',
+            right: 0,
+            transition: theme.transitions.create('border-bottom-color', {
+              duration: theme.transitions.duration.shorter,
+            }),
+            pointerEvents: 'none', // Transparent to the hover style.
+          },
+          [`&:hover:not(.${pickersFilledInputClasses.disabled}, .${pickersFilledInputClasses.error}):before`]:
+            {
+              borderBottom: `1px solid ${(theme.vars || theme).palette.text.primary}`,
+            },
+          [`&.${pickersFilledInputClasses.disabled}:before`]: {
+            borderBottomStyle: 'dotted',
+          },
         },
       },
-      '&::before': {
-        borderBottom: `1px solid ${
-          theme.vars
-            ? `rgba(${theme.vars.palette.common.onBackgroundChannel} / ${theme.vars.opacity.inputUnderline})`
-            : bottomLineColor
-        }`,
-        left: 0,
-        bottom: 0,
-        // Doing the other way around crash on IE11 "''" https://github.com/cssinjs/jss/issues/242
-        content: '"\\00a0"',
-        position: 'absolute',
-        right: 0,
-        transition: theme.transitions.create('border-bottom-color', {
-          duration: theme.transitions.duration.shorter,
-        }),
-        pointerEvents: 'none', // Transparent to the hover style.
+      {
+        props: ({ ownerState: { startAdornment } }: { ownerState: OwnerStateType }) =>
+          !!startAdornment,
+        style: {
+          paddingLeft: 12,
+        },
       },
-      [`&:hover:not(.${pickersFilledInputClasses.disabled}, .${pickersFilledInputClasses.error}):before`]:
-        {
-          borderBottom: `1px solid ${(theme.vars || theme).palette.text.primary}`,
+      {
+        props: ({ ownerState: { endAdornment } }: { ownerState: OwnerStateType }) => !!endAdornment,
+        style: {
+          paddingRight: 12,
         },
-      [`&.${pickersFilledInputClasses.disabled}:before`]: {
-        borderBottomStyle: 'dotted',
       },
-    }),
-    ...(ownerState.startAdornment && {
-      paddingLeft: 12,
-    }),
-    ...(ownerState.endAdornment && {
-      paddingRight: 12,
-    }),
+    ],
   };
 });
 
@@ -117,31 +136,48 @@ const PickersFilledSectionsContainer = styled(PickersInputBaseSectionsContainer,
   name: 'MuiPickersFilledInput',
   slot: 'sectionsContainer',
   overridesResolver: (props, styles) => styles.sectionsContainer,
-})<{ ownerState: OwnerStateType }>(({ ownerState }) => ({
+})<{ ownerState: OwnerStateType }>({
   paddingTop: 25,
   paddingRight: 12,
   paddingBottom: 8,
   paddingLeft: 12,
-  ...(ownerState.size === 'small' && {
-    paddingTop: 21,
-    paddingBottom: 4,
-  }),
-  ...(ownerState.startAdornment && {
-    paddingLeft: 0,
-  }),
-  ...(ownerState.endAdornment && {
-    paddingRight: 0,
-  }),
-  ...(ownerState.hiddenLabel && {
-    paddingTop: 16,
-    paddingBottom: 17,
-  }),
-  ...(ownerState.hiddenLabel &&
-    ownerState.size === 'small' && {
-      paddingTop: 8,
-      paddingBottom: 9,
-    }),
-}));
+  variants: [
+    {
+      props: { size: 'small' },
+      style: {
+        paddingTop: 21,
+        paddingBottom: 4,
+      },
+    },
+    {
+      props: ({ ownerState: { startAdornment } }: { ownerState: OwnerStateType }) =>
+        !!startAdornment,
+      style: {
+        paddingLeft: 0,
+      },
+    },
+    {
+      props: ({ ownerState: { endAdornment } }: { ownerState: OwnerStateType }) => !!endAdornment,
+      style: {
+        paddingRight: 0,
+      },
+    },
+    {
+      props: { hiddenLabel: true },
+      style: {
+        paddingTop: 16,
+        paddingBottom: 17,
+      },
+    },
+    {
+      props: { hiddenLabel: true, size: 'small' },
+      style: {
+        paddingTop: 8,
+        paddingBottom: 9,
+      },
+    },
+  ],
+});
 
 const useUtilityClasses = (ownerState: OwnerStateType) => {
   const { classes, disableUnderline } = ownerState;
@@ -175,7 +211,13 @@ const PickersFilledInput = React.forwardRef(function PickersFilledInput(
     name: 'MuiPickersFilledInput',
   });
 
-  const { label, autoFocus, ownerState: ownerStateProp, ...other } = props;
+  const {
+    label,
+    autoFocus,
+    disableUnderline = false,
+    ownerState: ownerStateProp,
+    ...other
+  } = props;
 
   const muiFormControl = useFormControl();
 
@@ -183,6 +225,7 @@ const PickersFilledInput = React.forwardRef(function PickersFilledInput(
     ...props,
     ...ownerStateProp,
     ...muiFormControl,
+    disableUnderline,
     color: muiFormControl?.color || 'primary',
   };
   const classes = useUtilityClasses(ownerState);
diff --git a/packages/x-date-pickers/src/PickersTextField/PickersInput/PickersInput.tsx b/packages/x-date-pickers/src/PickersTextField/PickersInput/PickersInput.tsx
index 3670ea5cbab9d..df459e99b1534 100644
--- a/packages/x-date-pickers/src/PickersTextField/PickersInput/PickersInput.tsx
+++ b/packages/x-date-pickers/src/PickersTextField/PickersInput/PickersInput.tsx
@@ -16,7 +16,7 @@ const PickersInputRoot = styled(PickersInputBaseRoot, {
   name: 'MuiPickersInput',
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root,
-})<{ ownerState: OwnerStateType }>(({ theme, ownerState }) => {
+})<{ ownerState: OwnerStateType }>(({ theme }) => {
   const light = theme.palette.mode === 'light';
   let bottomLineColor = light ? 'rgba(0, 0, 0, 0.42)' : 'rgba(255, 255, 255, 0.7)';
   if (theme.vars) {
@@ -26,58 +26,71 @@ const PickersInputRoot = styled(PickersInputBaseRoot, {
     'label + &': {
       marginTop: 16,
     },
-    ...(!ownerState.disableUnderline && {
-      '&::after': {
-        background: 'red',
-        // @ts-ignore
-        borderBottom: `2px solid ${(theme.vars || theme).palette[ownerState.color].main}`,
-        left: 0,
-        bottom: 0,
-        // Doing the other way around crash on IE11 "''" https://github.com/cssinjs/jss/issues/242
-        content: '""',
-        position: 'absolute',
-        right: 0,
-        transform: 'scaleX(0)',
-        transition: theme.transitions.create('transform', {
-          duration: theme.transitions.duration.shorter,
-          easing: theme.transitions.easing.easeOut,
-        }),
-        pointerEvents: 'none', // Transparent to the hover style.
-      },
-      [`&.${pickersInputClasses.focused}:after`]: {
-        // translateX(0) is a workaround for Safari transform scale bug
-        // See https://github.com/mui/material-ui/issues/31766
-        transform: 'scaleX(1) translateX(0)',
-      },
-      [`&.${pickersInputClasses.error}`]: {
-        '&:before, &:after': {
-          borderBottomColor: (theme.vars || theme).palette.error.main,
+    variants: [
+      ...Object.keys((theme.vars ?? theme).palette)
+        .filter((key) => (theme.vars ?? theme).palette[key].main)
+        .map((color) => ({
+          props: { color },
+          style: {
+            '&::after': {
+              borderBottom: `2px solid ${(theme.vars || theme).palette[color].main}`,
+            },
+          },
+        })),
+      {
+        props: { disableUnderline: false },
+        style: {
+          '&::after': {
+            background: 'red',
+            left: 0,
+            bottom: 0,
+            // Doing the other way around crash on IE11 "''" https://github.com/cssinjs/jss/issues/242
+            content: '""',
+            position: 'absolute',
+            right: 0,
+            transform: 'scaleX(0)',
+            transition: theme.transitions.create('transform', {
+              duration: theme.transitions.duration.shorter,
+              easing: theme.transitions.easing.easeOut,
+            }),
+            pointerEvents: 'none', // Transparent to the hover style.
+          },
+          [`&.${pickersInputClasses.focused}:after`]: {
+            // translateX(0) is a workaround for Safari transform scale bug
+            // See https://github.com/mui/material-ui/issues/31766
+            transform: 'scaleX(1) translateX(0)',
+          },
+          [`&.${pickersInputClasses.error}`]: {
+            '&:before, &:after': {
+              borderBottomColor: (theme.vars || theme).palette.error.main,
+            },
+          },
+          '&::before': {
+            borderBottom: `1px solid ${bottomLineColor}`,
+            left: 0,
+            bottom: 0,
+            // Doing the other way around crash on IE11 "''" https://github.com/cssinjs/jss/issues/242
+            content: '"\\00a0"',
+            position: 'absolute',
+            right: 0,
+            transition: theme.transitions.create('border-bottom-color', {
+              duration: theme.transitions.duration.shorter,
+            }),
+            pointerEvents: 'none', // Transparent to the hover style.
+          },
+          [`&:hover:not(.${pickersInputClasses.disabled}, .${pickersInputClasses.error}):before`]: {
+            borderBottom: `2px solid ${(theme.vars || theme).palette.text.primary}`,
+            // Reset on touch devices, it doesn't add specificity
+            '@media (hover: none)': {
+              borderBottom: `1px solid ${bottomLineColor}`,
+            },
+          },
+          [`&.${pickersInputClasses.disabled}:before`]: {
+            borderBottomStyle: 'dotted',
+          },
         },
       },
-      '&::before': {
-        borderBottom: `1px solid ${bottomLineColor}`,
-        left: 0,
-        bottom: 0,
-        // Doing the other way around crash on IE11 "''" https://github.com/cssinjs/jss/issues/242
-        content: '"\\00a0"',
-        position: 'absolute',
-        right: 0,
-        transition: theme.transitions.create('border-bottom-color', {
-          duration: theme.transitions.duration.shorter,
-        }),
-        pointerEvents: 'none', // Transparent to the hover style.
-      },
-      [`&:hover:not(.${pickersInputClasses.disabled}, .${pickersInputClasses.error}):before`]: {
-        borderBottom: `2px solid ${(theme.vars || theme).palette.text.primary}`,
-        // Reset on touch devices, it doesn't add specificity
-        '@media (hover: none)': {
-          borderBottom: `1px solid ${bottomLineColor}`,
-        },
-      },
-      [`&.${pickersInputClasses.disabled}:before`]: {
-        borderBottomStyle: 'dotted',
-      },
-    }),
+    ],
   };
 });
 
@@ -113,7 +126,13 @@ const PickersInput = React.forwardRef(function PickersInput(
     name: 'MuiPickersInput',
   });
 
-  const { label, autoFocus, ownerState: ownerStateProp, ...other } = props;
+  const {
+    label,
+    autoFocus,
+    disableUnderline = false,
+    ownerState: ownerStateProp,
+    ...other
+  } = props;
 
   const muiFormControl = useFormControl();
 
@@ -121,6 +140,7 @@ const PickersInput = React.forwardRef(function PickersInput(
     ...props,
     ...ownerStateProp,
     ...muiFormControl,
+    disableUnderline,
     color: muiFormControl?.color || 'primary',
   };
   const classes = useUtilityClasses(ownerState);
diff --git a/packages/x-date-pickers/src/PickersTextField/PickersInputBase/PickersInputBase.tsx b/packages/x-date-pickers/src/PickersTextField/PickersInputBase/PickersInputBase.tsx
index 6d37ff7186417..ff8f111f960ad 100644
--- a/packages/x-date-pickers/src/PickersTextField/PickersInputBase/PickersInputBase.tsx
+++ b/packages/x-date-pickers/src/PickersTextField/PickersInputBase/PickersInputBase.tsx
@@ -26,7 +26,7 @@ export const PickersInputBaseRoot = styled('div', {
   name: 'MuiPickersInputBase',
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root,
-})<{ ownerState: OwnerStateType }>(({ theme, ownerState }) => ({
+})<{ ownerState: OwnerStateType }>(({ theme }) => ({
   ...theme.typography.body1,
   color: (theme.vars || theme).palette.text.primary,
   cursor: 'text',
@@ -37,16 +37,19 @@ export const PickersInputBaseRoot = styled('div', {
   position: 'relative',
   boxSizing: 'border-box', // Prevent padding issue with fullWidth.
   letterSpacing: `${round(0.15 / 16)}em`,
-  ...(ownerState.fullWidth && {
-    width: '100%',
-  }),
+  variants: [
+    {
+      props: { fullWidth: true },
+      style: { width: '100%' },
+    },
+  ],
 }));
 
 export const PickersInputBaseSectionsContainer = styled(PickersSectionListRoot, {
   name: 'MuiPickersInputBase',
   slot: 'SectionsContainer',
   overridesResolver: (props, styles) => styles.sectionsContainer,
-})<{ ownerState: OwnerStateType }>(({ theme, ownerState }) => ({
+})<{ ownerState: OwnerStateType }>(({ theme }) => ({
   padding: '4px 0 5px',
   fontFamily: theme.typography.fontFamily,
   fontSize: 'inherit',
@@ -59,22 +62,37 @@ export const PickersInputBaseSectionsContainer = styled(PickersSectionListRoot,
   letterSpacing: 'inherit',
   // Baseline behavior
   width: '182px',
-  ...(ownerState.size === 'small' && {
-    paddingTop: 1,
-  }),
   ...(theme.direction === 'rtl' && { textAlign: 'right /*! @noflip */' as any }),
-  ...(!(ownerState.adornedStart || ownerState.focused || ownerState.filled) && {
-    color: 'currentColor',
-    ...(ownerState.label == null &&
-      (theme.vars
+  variants: [
+    {
+      props: { size: 'small' },
+      style: {
+        paddingTop: 1,
+      },
+    },
+    {
+      props: { adornedStart: false, focused: false, filled: false },
+      style: {
+        color: 'currentColor',
+        opacity: 0,
+      },
+    },
+    {
+      // Can't use the object notation because label can be null or undefined
+      props: ({
+        ownerState: { adornedStart, focused, filled, label },
+      }: {
+        ownerState: OwnerStateType;
+      }) => !adornedStart && !focused && !filled && label == null,
+      style: theme.vars
         ? {
             opacity: theme.vars.opacity.inputPlaceholder,
           }
         : {
             opacity: theme.palette.mode === 'light' ? 0.42 : 0.5,
-          })),
-    ...(ownerState.label != null && { opacity: 0 }),
-  }),
+          },
+    },
+  ],
 }));
 
 const PickersInputBaseSection = styled(PickersSectionListSection, {
diff --git a/packages/x-date-pickers/src/PickersTextField/PickersOutlinedInput/Outline.tsx b/packages/x-date-pickers/src/PickersTextField/PickersOutlinedInput/Outline.tsx
index 603de6d5c19a1..9195cb4bc84a8 100644
--- a/packages/x-date-pickers/src/PickersTextField/PickersOutlinedInput/Outline.tsx
+++ b/packages/x-date-pickers/src/PickersTextField/PickersOutlinedInput/Outline.tsx
@@ -44,46 +44,57 @@ const OutlineLabel = styled('span')(({ theme }) => ({
   fontSize: 'inherit',
 }));
 
-const OutlineLegend = styled('legend')<{ ownerState: any }>(({ ownerState, theme }) => ({
+const OutlineLegend = styled('legend')<{ ownerState: any }>(({ theme }) => ({
   float: 'unset', // Fix conflict with bootstrap
   width: 'auto', // Fix conflict with bootstrap
   overflow: 'hidden', // Fix Horizontal scroll when label too long
-  ...(!ownerState.withLabel && {
-    padding: 0,
-    lineHeight: '11px', // sync with `height` in `legend` styles
-    transition: theme.transitions.create('width', {
-      duration: 150,
-      easing: theme.transitions.easing.easeOut,
-    }),
-  }),
-  ...(ownerState.withLabel && {
-    display: 'block', // Fix conflict with normalize.css and sanitize.css
-    padding: 0,
-    height: 11, // sync with `lineHeight` in `legend` styles
-    fontSize: '0.75em',
-    visibility: 'hidden',
-    maxWidth: 0.01,
-    transition: theme.transitions.create('max-width', {
-      duration: 50,
-      easing: theme.transitions.easing.easeOut,
-    }),
-    whiteSpace: 'nowrap',
-    '& > span': {
-      paddingLeft: 5,
-      paddingRight: 5,
-      display: 'inline-block',
-      opacity: 0,
-      visibility: 'visible',
+  variants: [
+    {
+      props: { withLabel: false },
+      style: {
+        padding: 0,
+        lineHeight: '11px', // sync with `height` in `legend` styles
+        transition: theme.transitions.create('width', {
+          duration: 150,
+          easing: theme.transitions.easing.easeOut,
+        }),
+      },
     },
-    ...(ownerState.notched && {
-      maxWidth: '100%',
-      transition: theme.transitions.create('max-width', {
-        duration: 100,
-        easing: theme.transitions.easing.easeOut,
-        delay: 50,
-      }),
-    }),
-  }),
+    {
+      props: { withLabel: true },
+      style: {
+        display: 'block', // Fix conflict with normalize.css and sanitize.css
+        padding: 0,
+        height: 11, // sync with `lineHeight` in `legend` styles
+        fontSize: '0.75em',
+        visibility: 'hidden',
+        maxWidth: 0.01,
+        transition: theme.transitions.create('max-width', {
+          duration: 50,
+          easing: theme.transitions.easing.easeOut,
+        }),
+        whiteSpace: 'nowrap',
+        '& > span': {
+          paddingLeft: 5,
+          paddingRight: 5,
+          display: 'inline-block',
+          opacity: 0,
+          visibility: 'visible',
+        },
+      },
+    },
+    {
+      props: { withLabel: true, notched: true },
+      style: {
+        maxWidth: '100%',
+        transition: theme.transitions.create('max-width', {
+          duration: 100,
+          easing: theme.transitions.easing.easeOut,
+          delay: 50,
+        }),
+      },
+    },
+  ],
 }));
 
 /**
diff --git a/packages/x-date-pickers/src/PickersTextField/PickersOutlinedInput/PickersOutlinedInput.tsx b/packages/x-date-pickers/src/PickersTextField/PickersOutlinedInput/PickersOutlinedInput.tsx
index 2cca79b9691a6..54b72ea7914c0 100644
--- a/packages/x-date-pickers/src/PickersTextField/PickersOutlinedInput/PickersOutlinedInput.tsx
+++ b/packages/x-date-pickers/src/PickersTextField/PickersOutlinedInput/PickersOutlinedInput.tsx
@@ -23,7 +23,7 @@ const PickersOutlinedInputRoot = styled(PickersInputBaseRoot, {
   name: 'MuiPickersOutlinedInput',
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root,
-})<{ ownerState: OwnerStateType }>(({ theme, ownerState }) => {
+})<{ ownerState: OwnerStateType }>(({ theme }) => {
   const borderColor =
     theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)';
   return {
@@ -42,8 +42,6 @@ const PickersOutlinedInputRoot = styled(PickersInputBaseRoot, {
     },
     [`&.${pickersOutlinedInputClasses.focused} .${pickersOutlinedInputClasses.notchedOutline}`]: {
       borderStyle: 'solid',
-      // @ts-ignore
-      borderColor: (theme.vars || theme).palette[ownerState.color].main,
       borderWidth: 2,
     },
     [`&.${pickersOutlinedInputClasses.disabled}`]: {
@@ -57,6 +55,17 @@ const PickersOutlinedInputRoot = styled(PickersInputBaseRoot, {
     [`&.${pickersOutlinedInputClasses.error} .${pickersOutlinedInputClasses.notchedOutline}`]: {
       borderColor: (theme.vars || theme).palette.error.main,
     },
+    variants: Object.keys((theme.vars ?? theme).palette)
+      .filter((key) => (theme.vars ?? theme).palette[key].main)
+      .map((color) => ({
+        props: { color },
+        style: {
+          [`&.${pickersOutlinedInputClasses.focused} .${pickersOutlinedInputClasses.notchedOutline}`]:
+            {
+              borderColor: (theme.vars || theme).palette[color].main,
+            },
+        },
+      })),
   };
 });
 
@@ -64,12 +73,17 @@ const PickersOutlinedInputSectionsContainer = styled(PickersInputBaseSectionsCon
   name: 'MuiPickersOutlinedInput',
   slot: 'SectionsContainer',
   overridesResolver: (props, styles) => styles.sectionsContainer,
-})<{ ownerState: OwnerStateType }>(({ ownerState }) => ({
+})<{ ownerState: OwnerStateType }>({
   padding: '16.5px 0',
-  ...(ownerState.size === 'small' && {
-    padding: '8.5px 0',
-  }),
-}));
+  variants: [
+    {
+      props: { size: 'small' },
+      style: {
+        padding: '8.5px 0',
+      },
+    },
+  ],
+});
 
 const useUtilityClasses = (ownerState: OwnerStateType) => {
   const { classes } = ownerState;

From aeee6c48f664f18e25199a2aef871701f049de09 Mon Sep 17 00:00:00 2001
From: delangle <flaviendelangle@gmail.com>
Date: Fri, 23 Feb 2024 14:48:49 +0100
Subject: [PATCH 17/25] Fix ts

---
 .../PickersTextField/PickersFilledInput/PickersFilledInput.tsx  | 2 ++
 .../src/PickersTextField/PickersInput/PickersInput.tsx          | 2 ++
 .../PickersOutlinedInput/PickersOutlinedInput.tsx               | 2 ++
 3 files changed, 6 insertions(+)

diff --git a/packages/x-date-pickers/src/PickersTextField/PickersFilledInput/PickersFilledInput.tsx b/packages/x-date-pickers/src/PickersTextField/PickersFilledInput/PickersFilledInput.tsx
index fc52e495af69d..b81830f0dfeac 100644
--- a/packages/x-date-pickers/src/PickersTextField/PickersFilledInput/PickersFilledInput.tsx
+++ b/packages/x-date-pickers/src/PickersTextField/PickersFilledInput/PickersFilledInput.tsx
@@ -53,11 +53,13 @@ const PickersFilledInputRoot = styled(PickersInputBaseRoot, {
     },
     variants: [
       ...Object.keys((theme.vars ?? theme).palette)
+        // @ts-ignore
         .filter((key) => (theme.vars ?? theme).palette[key].main)
         .map((color) => ({
           props: { color },
           style: {
             '&::after': {
+              // @ts-ignore
               borderBottom: `2px solid ${(theme.vars || theme).palette[color]?.main}`,
             },
           },
diff --git a/packages/x-date-pickers/src/PickersTextField/PickersInput/PickersInput.tsx b/packages/x-date-pickers/src/PickersTextField/PickersInput/PickersInput.tsx
index df459e99b1534..80c243e1dd4b6 100644
--- a/packages/x-date-pickers/src/PickersTextField/PickersInput/PickersInput.tsx
+++ b/packages/x-date-pickers/src/PickersTextField/PickersInput/PickersInput.tsx
@@ -28,11 +28,13 @@ const PickersInputRoot = styled(PickersInputBaseRoot, {
     },
     variants: [
       ...Object.keys((theme.vars ?? theme).palette)
+        // @ts-ignore
         .filter((key) => (theme.vars ?? theme).palette[key].main)
         .map((color) => ({
           props: { color },
           style: {
             '&::after': {
+              // @ts-ignore
               borderBottom: `2px solid ${(theme.vars || theme).palette[color].main}`,
             },
           },
diff --git a/packages/x-date-pickers/src/PickersTextField/PickersOutlinedInput/PickersOutlinedInput.tsx b/packages/x-date-pickers/src/PickersTextField/PickersOutlinedInput/PickersOutlinedInput.tsx
index 54b72ea7914c0..295ec0939c7aa 100644
--- a/packages/x-date-pickers/src/PickersTextField/PickersOutlinedInput/PickersOutlinedInput.tsx
+++ b/packages/x-date-pickers/src/PickersTextField/PickersOutlinedInput/PickersOutlinedInput.tsx
@@ -56,12 +56,14 @@ const PickersOutlinedInputRoot = styled(PickersInputBaseRoot, {
       borderColor: (theme.vars || theme).palette.error.main,
     },
     variants: Object.keys((theme.vars ?? theme).palette)
+      // @ts-ignore
       .filter((key) => (theme.vars ?? theme).palette[key].main)
       .map((color) => ({
         props: { color },
         style: {
           [`&.${pickersOutlinedInputClasses.focused} .${pickersOutlinedInputClasses.notchedOutline}`]:
             {
+              // @ts-ignore
               borderColor: (theme.vars || theme).palette[color].main,
             },
         },

From 201a84f187d64412586e48afc33649d0ec0d5fad Mon Sep 17 00:00:00 2001
From: delangle <flaviendelangle@gmail.com>
Date: Wed, 13 Mar 2024 14:42:43 +0100
Subject: [PATCH 18/25] Code review: Lukas

---
 .../DateRangePickerDay/DateRangePickerDay.tsx |  4 ++--
 .../DateTimePicker/DateTimePickerToolbar.tsx  |  2 +-
 .../PickersFilledInput/PickersFilledInput.tsx |  6 +++--
 .../PickersInputBase/PickersInputBase.tsx     | 22 +++++++++++++------
 .../PickersInputBase.types.ts                 |  7 ++++++
 5 files changed, 29 insertions(+), 12 deletions(-)

diff --git a/packages/x-date-pickers-pro/src/DateRangePickerDay/DateRangePickerDay.tsx b/packages/x-date-pickers-pro/src/DateRangePickerDay/DateRangePickerDay.tsx
index ac95a4374df9d..95ca252d165ca 100644
--- a/packages/x-date-pickers-pro/src/DateRangePickerDay/DateRangePickerDay.tsx
+++ b/packages/x-date-pickers-pro/src/DateRangePickerDay/DateRangePickerDay.tsx
@@ -252,7 +252,7 @@ const DateRangePickerDayRangeIntervalPreview = styled('div', {
         ownerState: { isPreviewing, isHiddenDayFiller, isStartOfPreviewing, isFirstVisibleCell },
       }: {
         ownerState: OwnerState;
-      }) => isPreviewing && isHiddenDayFiller && (isStartOfPreviewing || isFirstVisibleCell),
+      }) => isPreviewing && !isHiddenDayFiller && (isStartOfPreviewing || isFirstVisibleCell),
       style: {
         borderLeftColor: (theme.vars || theme).palette.divider,
         ...startBorderStyle,
@@ -263,7 +263,7 @@ const DateRangePickerDayRangeIntervalPreview = styled('div', {
         ownerState: { isPreviewing, isHiddenDayFiller, isEndOfPreviewing, isLastVisibleCell },
       }: {
         ownerState: OwnerState;
-      }) => isPreviewing && isHiddenDayFiller && (isEndOfPreviewing || isLastVisibleCell),
+      }) => isPreviewing && !isHiddenDayFiller && (isEndOfPreviewing || isLastVisibleCell),
       style: {
         borderRightColor: (theme.vars || theme).palette.divider,
         ...endBorderStyle,
diff --git a/packages/x-date-pickers/src/DateTimePicker/DateTimePickerToolbar.tsx b/packages/x-date-pickers/src/DateTimePicker/DateTimePickerToolbar.tsx
index 31ddb8abc90a8..c28d3d1462484 100644
--- a/packages/x-date-pickers/src/DateTimePicker/DateTimePickerToolbar.tsx
+++ b/packages/x-date-pickers/src/DateTimePicker/DateTimePickerToolbar.tsx
@@ -150,7 +150,7 @@ const DateTimePickerToolbarTimeContainer = styled('div', {
         },
       },
       {
-        props: { toolbarVariant: 'desktop', isLandscape: true },
+        props: { toolbarVariant: 'desktop', isLandscape: false },
         style: {
           gap: 9,
           marginRight: 4,
diff --git a/packages/x-date-pickers/src/PickersTextField/PickersFilledInput/PickersFilledInput.tsx b/packages/x-date-pickers/src/PickersTextField/PickersFilledInput/PickersFilledInput.tsx
index b81830f0dfeac..70f37f96d1343 100644
--- a/packages/x-date-pickers/src/PickersTextField/PickersFilledInput/PickersFilledInput.tsx
+++ b/packages/x-date-pickers/src/PickersTextField/PickersFilledInput/PickersFilledInput.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { FormControlState, useFormControl } from '@mui/material/FormControl';
 import { styled, useThemeProps } from '@mui/material/styles';
+import { shouldForwardProp } from '@mui/system';
 import { refType } from '@mui/utils';
 import composeClasses from '@mui/utils/composeClasses';
 import {
@@ -23,6 +24,7 @@ const PickersFilledInputRoot = styled(PickersInputBaseRoot, {
   name: 'MuiPickersFilledInput',
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root,
+  shouldForwardProp: (prop) => shouldForwardProp(prop) && prop !== 'disableUnderline',
 })<{ ownerState: OwnerStateType }>(({ theme }) => {
   const light = theme.palette.mode === 'light';
   const bottomLineColor = light ? 'rgba(0, 0, 0, 0.42)' : 'rgba(255, 255, 255, 0.7)';
@@ -56,7 +58,7 @@ const PickersFilledInputRoot = styled(PickersInputBaseRoot, {
         // @ts-ignore
         .filter((key) => (theme.vars ?? theme).palette[key].main)
         .map((color) => ({
-          props: { color },
+          props: { color, disableUnderline: false },
           style: {
             '&::after': {
               // @ts-ignore
@@ -227,7 +229,6 @@ const PickersFilledInput = React.forwardRef(function PickersFilledInput(
     ...props,
     ...ownerStateProp,
     ...muiFormControl,
-    disableUnderline,
     color: muiFormControl?.color || 'primary',
   };
   const classes = useUtilityClasses(ownerState);
@@ -235,6 +236,7 @@ const PickersFilledInput = React.forwardRef(function PickersFilledInput(
   return (
     <PickersInputBase
       slots={{ root: PickersFilledInputRoot, input: PickersFilledSectionsContainer }}
+      slotProps={{ root: { disableUnderline } }}
       {...other}
       label={label}
       classes={classes}
diff --git a/packages/x-date-pickers/src/PickersTextField/PickersInputBase/PickersInputBase.tsx b/packages/x-date-pickers/src/PickersTextField/PickersInputBase/PickersInputBase.tsx
index ff8f111f960ad..0270804fd77a7 100644
--- a/packages/x-date-pickers/src/PickersTextField/PickersInputBase/PickersInputBase.tsx
+++ b/packages/x-date-pickers/src/PickersTextField/PickersInputBase/PickersInputBase.tsx
@@ -19,6 +19,7 @@ import {
   Unstable_PickersSectionListSectionSeparator as PickersSectionListSectionSeparator,
   Unstable_PickersSectionListSectionContent as PickersSectionListSectionContent,
 } from '../../PickersSectionList';
+import { useSlotProps } from '@mui/base/utils';
 
 const round = (value: number) => Math.round(value * 1e5) / 1e5;
 
@@ -203,6 +204,7 @@ const PickersInputBase = React.forwardRef(function PickersInputBase(
     startAdornment,
     renderSuffix,
     slots,
+    slotProps,
     contentEditable,
     tabIndex,
     onInput,
@@ -265,16 +267,22 @@ const PickersInputBase = React.forwardRef(function PickersInputBase(
   const classes = useUtilityClasses(ownerState);
 
   const InputRoot = slots?.root || PickersInputBaseRoot;
+  const inputRootProps = useSlotProps({
+    elementType: InputRoot,
+    externalSlotProps: slotProps?.root,
+    externalForwardedProps: other,
+    additionalProps: {
+      'aria-invalid': muiFormControl.error,
+      ref: handleRootRef,
+    },
+    className: classes.root,
+    ownerState,
+  });
+
   const InputSectionsContainer = slots?.input || PickersInputBaseSectionsContainer;
 
   return (
-    <InputRoot
-      {...other}
-      className={classes.root}
-      ownerState={ownerState}
-      aria-invalid={muiFormControl.error}
-      ref={handleRootRef}
-    >
+    <InputRoot {...inputRootProps}>
       {startAdornment}
       <PickersSectionList
         sectionListRef={sectionListRef}
diff --git a/packages/x-date-pickers/src/PickersTextField/PickersInputBase/PickersInputBase.types.ts b/packages/x-date-pickers/src/PickersTextField/PickersInputBase/PickersInputBase.types.ts
index 0efc1e7127d5b..ba7c90dd39a7c 100644
--- a/packages/x-date-pickers/src/PickersTextField/PickersInputBase/PickersInputBase.types.ts
+++ b/packages/x-date-pickers/src/PickersTextField/PickersInputBase/PickersInputBase.types.ts
@@ -59,4 +59,11 @@ export interface PickersInputBaseProps
     root?: React.ElementType;
     input?: React.ElementType;
   };
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: {
+    root?: any;
+  };
 }

From 4160f43936e2a8dd9e1fc656442dd62125b6de96 Mon Sep 17 00:00:00 2001
From: delangle <flaviendelangle@gmail.com>
Date: Mon, 18 Mar 2024 16:08:32 +0100
Subject: [PATCH 19/25] Fix

---
 .../src/PickersTextField/PickersInputBase/PickersInputBase.tsx  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/x-date-pickers/src/PickersTextField/PickersInputBase/PickersInputBase.tsx b/packages/x-date-pickers/src/PickersTextField/PickersInputBase/PickersInputBase.tsx
index 0270804fd77a7..77956b91ad389 100644
--- a/packages/x-date-pickers/src/PickersTextField/PickersInputBase/PickersInputBase.tsx
+++ b/packages/x-date-pickers/src/PickersTextField/PickersInputBase/PickersInputBase.tsx
@@ -6,6 +6,7 @@ import useForkRef from '@mui/utils/useForkRef';
 import { refType } from '@mui/utils';
 import composeClasses from '@mui/utils/composeClasses';
 import capitalize from '@mui/utils/capitalize';
+import { useSlotProps } from '@mui/base/utils';
 import visuallyHidden from '@mui/utils/visuallyHidden';
 import {
   pickersInputBaseClasses,
@@ -19,7 +20,6 @@ import {
   Unstable_PickersSectionListSectionSeparator as PickersSectionListSectionSeparator,
   Unstable_PickersSectionListSectionContent as PickersSectionListSectionContent,
 } from '../../PickersSectionList';
-import { useSlotProps } from '@mui/base/utils';
 
 const round = (value: number) => Math.round(value * 1e5) / 1e5;
 

From 5b61ce3c136e230622ac8902b45bb31d95db9bc9 Mon Sep 17 00:00:00 2001
From: delangle <flaviendelangle@gmail.com>
Date: Mon, 18 Mar 2024 16:09:56 +0100
Subject: [PATCH 20/25] Fix

---
 .../PickersFilledInput/PickersFilledInput.tsx                | 5 +++++
 .../src/PickersTextField/PickersInput/PickersInput.tsx       | 5 +++++
 .../PickersTextField/PickersInputBase/PickersInputBase.tsx   | 5 +++++
 .../PickersOutlinedInput/PickersOutlinedInput.tsx            | 5 +++++
 4 files changed, 20 insertions(+)

diff --git a/packages/x-date-pickers/src/PickersTextField/PickersFilledInput/PickersFilledInput.tsx b/packages/x-date-pickers/src/PickersTextField/PickersFilledInput/PickersFilledInput.tsx
index 70f37f96d1343..a16e7bc849f0e 100644
--- a/packages/x-date-pickers/src/PickersTextField/PickersFilledInput/PickersFilledInput.tsx
+++ b/packages/x-date-pickers/src/PickersTextField/PickersFilledInput/PickersFilledInput.tsx
@@ -308,6 +308,11 @@ PickersFilledInput.propTypes = {
       }),
     }),
   ]),
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps: PropTypes.object,
   /**
    * The components used for each slot inside.
    *
diff --git a/packages/x-date-pickers/src/PickersTextField/PickersInput/PickersInput.tsx b/packages/x-date-pickers/src/PickersTextField/PickersInput/PickersInput.tsx
index 80c243e1dd4b6..a26c819e02861 100644
--- a/packages/x-date-pickers/src/PickersTextField/PickersInput/PickersInput.tsx
+++ b/packages/x-date-pickers/src/PickersTextField/PickersInput/PickersInput.tsx
@@ -220,6 +220,11 @@ PickersInput.propTypes = {
       }),
     }),
   ]),
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps: PropTypes.object,
   /**
    * The components used for each slot inside.
    *
diff --git a/packages/x-date-pickers/src/PickersTextField/PickersInputBase/PickersInputBase.tsx b/packages/x-date-pickers/src/PickersTextField/PickersInputBase/PickersInputBase.tsx
index 77956b91ad389..57d9b28b8de9d 100644
--- a/packages/x-date-pickers/src/PickersTextField/PickersInputBase/PickersInputBase.tsx
+++ b/packages/x-date-pickers/src/PickersTextField/PickersInputBase/PickersInputBase.tsx
@@ -399,6 +399,11 @@ PickersInputBase.propTypes = {
       }),
     }),
   ]),
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps: PropTypes.object,
   /**
    * The components used for each slot inside.
    *
diff --git a/packages/x-date-pickers/src/PickersTextField/PickersOutlinedInput/PickersOutlinedInput.tsx b/packages/x-date-pickers/src/PickersTextField/PickersOutlinedInput/PickersOutlinedInput.tsx
index 295ec0939c7aa..f76f8ce9824d6 100644
--- a/packages/x-date-pickers/src/PickersTextField/PickersOutlinedInput/PickersOutlinedInput.tsx
+++ b/packages/x-date-pickers/src/PickersTextField/PickersOutlinedInput/PickersOutlinedInput.tsx
@@ -223,6 +223,11 @@ PickersOutlinedInput.propTypes = {
       }),
     }),
   ]),
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps: PropTypes.object,
   /**
    * The components used for each slot inside.
    *

From 02a177cbd66e19d66f1cebb3a2cffba1c3ad346e Mon Sep 17 00:00:00 2001
From: delangle <flaviendelangle@gmail.com>
Date: Thu, 21 Mar 2024 15:33:07 +0100
Subject: [PATCH 21/25] Use new DX

---
 .../PickersFilledInput/PickersFilledInput.tsx          | 10 ++++------
 .../src/internals/components/PickersPopper.tsx         |  3 +--
 2 files changed, 5 insertions(+), 8 deletions(-)

diff --git a/packages/x-date-pickers/src/PickersTextField/PickersFilledInput/PickersFilledInput.tsx b/packages/x-date-pickers/src/PickersTextField/PickersFilledInput/PickersFilledInput.tsx
index a16e7bc849f0e..e86c0556e22d6 100644
--- a/packages/x-date-pickers/src/PickersTextField/PickersFilledInput/PickersFilledInput.tsx
+++ b/packages/x-date-pickers/src/PickersTextField/PickersFilledInput/PickersFilledInput.tsx
@@ -120,14 +120,13 @@ const PickersFilledInputRoot = styled(PickersInputBaseRoot, {
         },
       },
       {
-        props: ({ ownerState: { startAdornment } }: { ownerState: OwnerStateType }) =>
-          !!startAdornment,
+        props: ({ startAdornment }: OwnerStateType) => !!startAdornment,
         style: {
           paddingLeft: 12,
         },
       },
       {
-        props: ({ ownerState: { endAdornment } }: { ownerState: OwnerStateType }) => !!endAdornment,
+        props: ({ endAdornment }: OwnerStateType) => !!endAdornment,
         style: {
           paddingRight: 12,
         },
@@ -154,14 +153,13 @@ const PickersFilledSectionsContainer = styled(PickersInputBaseSectionsContainer,
       },
     },
     {
-      props: ({ ownerState: { startAdornment } }: { ownerState: OwnerStateType }) =>
-        !!startAdornment,
+      props: ({ startAdornment }: OwnerStateType) => !!startAdornment,
       style: {
         paddingLeft: 0,
       },
     },
     {
-      props: ({ ownerState: { endAdornment } }: { ownerState: OwnerStateType }) => !!endAdornment,
+      props: ({ endAdornment }: OwnerStateType) => !!endAdornment,
       style: {
         paddingRight: 0,
       },
diff --git a/packages/x-date-pickers/src/internals/components/PickersPopper.tsx b/packages/x-date-pickers/src/internals/components/PickersPopper.tsx
index 4e06cda99ac8b..8959c147bfb28 100644
--- a/packages/x-date-pickers/src/internals/components/PickersPopper.tsx
+++ b/packages/x-date-pickers/src/internals/components/PickersPopper.tsx
@@ -117,8 +117,7 @@ const PickersPopperPaper = styled(MuiPaper, {
   transformOrigin: 'top center',
   variants: [
     {
-      props: ({ ownerState }: { ownerState: PickersPopperOwnerState }) =>
-        ownerState.placement.includes('top'),
+      props: (ownerState: PickersPopperOwnerState) => ownerState.placement.includes('top'),
       style: {
         transformOrigin: 'bottom center',
       },

From e5cdbddb60a8f649c7f9642a304797bd47097c71 Mon Sep 17 00:00:00 2001
From: delangle <flaviendelangle@gmail.com>
Date: Thu, 21 Mar 2024 15:36:04 +0100
Subject: [PATCH 22/25] Improve

---
 .../x-date-pickers/src/internals/components/PickersPopper.tsx   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/x-date-pickers/src/internals/components/PickersPopper.tsx b/packages/x-date-pickers/src/internals/components/PickersPopper.tsx
index 8959c147bfb28..54a17a0a97ce3 100644
--- a/packages/x-date-pickers/src/internals/components/PickersPopper.tsx
+++ b/packages/x-date-pickers/src/internals/components/PickersPopper.tsx
@@ -117,7 +117,7 @@ const PickersPopperPaper = styled(MuiPaper, {
   transformOrigin: 'top center',
   variants: [
     {
-      props: (ownerState: PickersPopperOwnerState) => ownerState.placement.includes('top'),
+      props: ({ placement }: PickersPopperOwnerState) => placement.includes('top'),
       style: {
         transformOrigin: 'bottom center',
       },

From 43346fa7a8244a08ec3e9b140e6422070c538345 Mon Sep 17 00:00:00 2001
From: delangle <flaviendelangle@gmail.com>
Date: Thu, 21 Mar 2024 15:38:44 +0100
Subject: [PATCH 23/25] Try to fix specificity issue

---
 .../PickersOutlinedInput/PickersOutlinedInput.tsx               | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/x-date-pickers/src/PickersTextField/PickersOutlinedInput/PickersOutlinedInput.tsx b/packages/x-date-pickers/src/PickersTextField/PickersOutlinedInput/PickersOutlinedInput.tsx
index f76f8ce9824d6..2dbcec6510a9a 100644
--- a/packages/x-date-pickers/src/PickersTextField/PickersOutlinedInput/PickersOutlinedInput.tsx
+++ b/packages/x-date-pickers/src/PickersTextField/PickersOutlinedInput/PickersOutlinedInput.tsx
@@ -61,7 +61,7 @@ const PickersOutlinedInputRoot = styled(PickersInputBaseRoot, {
       .map((color) => ({
         props: { color },
         style: {
-          [`&.${pickersOutlinedInputClasses.focused} .${pickersOutlinedInputClasses.notchedOutline}`]:
+          [`&.${pickersOutlinedInputClasses.focused}:not(.${pickersOutlinedInputClasses.error}) .${pickersOutlinedInputClasses.notchedOutline}`]:
             {
               // @ts-ignore
               borderColor: (theme.vars || theme).palette[color].main,

From 48b8026be0c8db03f3ba3fe48ea4fa5bc7069c9e Mon Sep 17 00:00:00 2001
From: delangle <flaviendelangle@gmail.com>
Date: Thu, 21 Mar 2024 16:03:36 +0100
Subject: [PATCH 24/25] Code review: Lukas

---
 .../x-date-pickers/src/internals/components/PickersPopper.tsx  | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/x-date-pickers/src/internals/components/PickersPopper.tsx b/packages/x-date-pickers/src/internals/components/PickersPopper.tsx
index 54a17a0a97ce3..6ad3bdedcdfbe 100644
--- a/packages/x-date-pickers/src/internals/components/PickersPopper.tsx
+++ b/packages/x-date-pickers/src/internals/components/PickersPopper.tsx
@@ -117,7 +117,8 @@ const PickersPopperPaper = styled(MuiPaper, {
   transformOrigin: 'top center',
   variants: [
     {
-      props: ({ placement }: PickersPopperOwnerState) => placement.includes('top'),
+      props: ({ placement }: PickersPopperOwnerState) =>
+        ['top', 'top-start', 'top-end'].includes(placement),
       style: {
         transformOrigin: 'bottom center',
       },

From 79bac3d7232173a46a469c9600946da70c1468d9 Mon Sep 17 00:00:00 2001
From: flavien <flaviendelangle@gmail.com>
Date: Mon, 25 Mar 2024 08:17:58 +0100
Subject: [PATCH 25/25] Review: Jun

---
 .../src/DateTimeRangePicker/DateTimeRangePickerToolbar.tsx | 7 ++-----
 .../src/DateTimePicker/DateTimePickerToolbar.tsx           | 7 ++-----
 .../PickersTextField/PickersInputBase/PickersInputBase.tsx | 7 ++-----
 3 files changed, 6 insertions(+), 15 deletions(-)

diff --git a/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePickerToolbar.tsx b/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePickerToolbar.tsx
index 146847c50900e..4d4c6155c38ee 100644
--- a/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePickerToolbar.tsx
+++ b/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePickerToolbar.tsx
@@ -80,11 +80,8 @@ const DateTimeRangePickerToolbarStart = styled(DateTimePickerToolbar, {
   borderBottom: 'none',
   variants: [
     {
-      props: ({
-        ownerState: { toolbarVariant },
-      }: {
-        ownerState: DateTimeRangePickerStartOrEndToolbarProps<any>;
-      }) => toolbarVariant !== 'desktop',
+      props: ({ toolbarVariant }: DateTimeRangePickerStartOrEndToolbarProps<any>) =>
+        toolbarVariant !== 'desktop',
       style: {
         padding: '12px 8px 0 12px',
       },
diff --git a/packages/x-date-pickers/src/DateTimePicker/DateTimePickerToolbar.tsx b/packages/x-date-pickers/src/DateTimePicker/DateTimePickerToolbar.tsx
index c28d3d1462484..21593a3f60819 100644
--- a/packages/x-date-pickers/src/DateTimePicker/DateTimePickerToolbar.tsx
+++ b/packages/x-date-pickers/src/DateTimePicker/DateTimePickerToolbar.tsx
@@ -137,11 +137,8 @@ const DateTimePickerToolbarTimeContainer = styled('div', {
     }),
     variants: [
       {
-        props: ({
-          ownerState: { isLandscape, toolbarVariant },
-        }: {
-          ownerState: DateTimePickerToolbarProps<any>;
-        }) => isLandscape && toolbarVariant !== 'desktop',
+        props: ({ isLandscape, toolbarVariant }: DateTimePickerToolbarProps<any>) =>
+          isLandscape && toolbarVariant !== 'desktop',
         style: {
           flexDirection: 'column',
           ...(theme.direction === 'rtl' && {
diff --git a/packages/x-date-pickers/src/PickersTextField/PickersInputBase/PickersInputBase.tsx b/packages/x-date-pickers/src/PickersTextField/PickersInputBase/PickersInputBase.tsx
index 57d9b28b8de9d..1ec0341917be3 100644
--- a/packages/x-date-pickers/src/PickersTextField/PickersInputBase/PickersInputBase.tsx
+++ b/packages/x-date-pickers/src/PickersTextField/PickersInputBase/PickersInputBase.tsx
@@ -80,11 +80,8 @@ export const PickersInputBaseSectionsContainer = styled(PickersSectionListRoot,
     },
     {
       // Can't use the object notation because label can be null or undefined
-      props: ({
-        ownerState: { adornedStart, focused, filled, label },
-      }: {
-        ownerState: OwnerStateType;
-      }) => !adornedStart && !focused && !filled && label == null,
+      props: ({ adornedStart, focused, filled, label }: OwnerStateType) =>
+        !adornedStart && !focused && !filled && label == null,
       style: theme.vars
         ? {
             opacity: theme.vars.opacity.inputPlaceholder,