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

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" } },

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."
     },

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,44 @@ 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: ({
+        ownerState: { isHiddenDayFiller, isStartOfHighlighting, isFirstVisibleCell },
+      }: {
+        ownerState: OwnerState;
+      }) => !isHiddenDayFiller && (isStartOfHighlighting || isFirstVisibleCell),
+      style: {
+        ...startBorderStyle,
+        paddingLeft: 0,
+      },
+    },
+    {
+      props: ({
+        ownerState: { isHiddenDayFiller, isEndOfHighlighting, isLastVisibleCell },
+      }: {
+        ownerState: OwnerState;
+      }) => !isHiddenDayFiller && (isEndOfHighlighting || isLastVisibleCell),
+      style: {
+        ...endBorderStyle,
+        paddingRight: 0,
+      },
+    },
+  ],
+}));
 
 DateRangePickerDayRoot.propTypes = {
   // ----------------------------- Warning --------------------------------
@@ -209,24 +234,42 @@ 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: ({
+        ownerState: { isPreviewing, isHiddenDayFiller, isStartOfPreviewing, isFirstVisibleCell },
+      }: {
+        ownerState: OwnerState;
+      }) => isPreviewing && !isHiddenDayFiller && (isStartOfPreviewing || isFirstVisibleCell),
+      style: {
         borderLeftColor: (theme.vars || theme).palette.divider,
         ...startBorderStyle,
-      }),
-      ...((ownerState.isEndOfPreviewing || ownerState.isLastVisibleCell) && {
+      },
+    },
+    {
+      props: ({
+        ownerState: { isPreviewing, isHiddenDayFiller, isEndOfPreviewing, isLastVisibleCell },
+      }: {
+        ownerState: OwnerState;
+      }) => isPreviewing && !isHiddenDayFiller && (isEndOfPreviewing || isLastVisibleCell),
+      style: {
         borderRightColor: (theme.vars || theme).palette.divider,
         ...endBorderStyle,
-      }),
-    }),
+      },
+    },
+  ],
 }));
 
 DateRangePickerDayRangeIntervalPreview.propTypes = {
@@ -248,19 +291,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;
 
@@ -405,6 +451,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

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

@@ -76,24 +76,43 @@ const DateTimeRangePickerToolbarStart = styled(DateTimePickerToolbar, {
   name: 'MuiDateTimeRangePickerToolbar',
   slot: 'StartToolbar',
   overridesResolver: (_, styles) => styles.startToolbar,
-})<DateTimeRangePickerStartOrEndToolbarProps<any>>(({ ownerState }) => ({
+})<DateTimeRangePickerStartOrEndToolbarProps<any>>({
   borderBottom: 'none',
-  ...(ownerState?.toolbarVariant !== 'desktop'
-    ? {
+  variants: [
+    {
+      props: ({ toolbarVariant }: 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,

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