[pickers] Prepare compatibility with @mui/zero-runtime (stop using ownerState in styled)

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;
 

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 --------------------------------

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',

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) * 1000) / 10}%`,
+    },
+  })),
+});
 
 const PickersMonthButton = styled('button', {
   name: 'MuiPickersMonth',

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',
+          },
+        },
+      },
+    ],
   }),
 );
 

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',

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',

packages/x-date-pickers/src/PickersLayout/PickersLayout.tsx

@@ -23,23 +23,28 @@ const PickersLayoutRoot = styled('div', {
   name: 'MuiPickersLayout',
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root,
-})<{ ownerState: { isLandscape: boolean } }>(({ theme, ownerState }) => ({
+})<{ ownerState: { isLandscape: boolean } }>(({ theme }) => ({
   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: [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',
+          },
+    },
+  })),
 }));
 
 PickersLayoutRoot.propTypes = {