Add ownerState to <PickersLayoutContentWrapper />

mui · Nov 21, 2024 · e98f435 · e98f435
1 parent f825b20
commit e98f435
Show file tree

Hide file tree

Showing 9 changed files with 32 additions and 10 deletions.
diff --git a/docs/data/date-pickers/custom-layout/AddComponent.js b/docs/data/date-pickers/custom-layout/AddComponent.js
@@ -78,7 +78,10 @@ function CustomLayout(props) {
       <RestaurantHeader />
       {toolbar}
       {actionBar}
-      <PickersLayoutContentWrapper className={pickersLayoutClasses.contentWrapper}>
+      <PickersLayoutContentWrapper
+        className={pickersLayoutClasses.contentWrapper}
+        ownerState={ownerState}
+      >
         {tabs}
         {content}
       </PickersLayoutContentWrapper>

diff --git a/docs/data/date-pickers/custom-layout/AddComponent.tsx b/docs/data/date-pickers/custom-layout/AddComponent.tsx
@@ -79,7 +79,10 @@ function CustomLayout(props: PickersLayoutProps<Dayjs | null, DateView>) {
       <RestaurantHeader />
       {toolbar}
       {actionBar}
-      <PickersLayoutContentWrapper className={pickersLayoutClasses.contentWrapper}>
+      <PickersLayoutContentWrapper
+        className={pickersLayoutClasses.contentWrapper}
+        ownerState={ownerState}
+      >
         {tabs}
         {content}
       </PickersLayoutContentWrapper>

diff --git a/docs/data/date-pickers/custom-layout/custom-layout.md b/docs/data/date-pickers/custom-layout/custom-layout.md
@@ -93,7 +93,10 @@ function MyCustomLayout(props) {
     <PickersLayoutRoot className={pickersLayoutClasses.root} ownerState={ownerState}>
       {toolbar}
       {actionBar}
-      <PickersLayoutContentWrapper className={pickersLayoutClasses.contentWrapper}>
+      <PickersLayoutContentWrapper
+        className={pickersLayoutClasses.contentWrapper}
+        ownerState={ownerState}
+      >
         {tabs}
         {content}
       </PickersLayoutContentWrapper>

diff --git a/docs/data/migration/migration-pickers-v7/migration-pickers-v7.md b/docs/data/migration/migration-pickers-v7/migration-pickers-v7.md
@@ -258,15 +258,18 @@ const theme = createTheme({
 
 ### Slot: `layout`
 
-- The `PickersLayoutRoot` must now receive the `ownerState` returned by `usePickerLayout` instead of its props:
+- The `<PickersLayoutRoot />` and `<PickersLayoutContentWrapper />` components must now receive the `ownerState` returned by `usePickerLayout` instead of their props:
 
   ```diff
   -const { toolbar, tabs, content, actionBar } = usePickerLayout(props);
   +const { toolbar, tabs, content, actionBar, ownerState } = usePickerLayout(props);
+
    return (
   -  <PickersLayoutRoot ownerState={props}>
   +  <PickersLayoutRoot ownerState={ownerState}>
-       Layout content
+  -    <PickersLayoutContentWrapper>
+  +    <PickersLayoutContentWrapper ownerState={ownerState}>
+       </PickersLayoutContentWrapper>
      </PickersLayoutRoot>
    );
   ```

diff --git a/docs/src/modules/components/overview/mainDemo/Clock.tsx b/docs/src/modules/components/overview/mainDemo/Clock.tsx
@@ -36,7 +36,10 @@ function CustomLayout(props: PickersLayoutProps<Dayjs | null, TimeView>) {
   return (
     <StyledLayout ownerState={ownerState}>
       {toolbar}
-      <PickersLayoutContentWrapper className={pickersLayoutClasses.contentWrapper}>
+      <PickersLayoutContentWrapper
+        className={pickersLayoutClasses.contentWrapper}
+        ownerState={ownerState}
+      >
         {content}
         {actionBar}
       </PickersLayoutContentWrapper>

diff --git a/docs/src/modules/components/overview/mainDemo/DateRangeWithShortcuts.tsx b/docs/src/modules/components/overview/mainDemo/DateRangeWithShortcuts.tsx
@@ -83,7 +83,10 @@ function CustomLayout(props: CustomLayoutProps) {
       }}
     >
       {shortcuts}
-      <PickersLayoutContentWrapper className={pickersLayoutClasses.contentWrapper}>
+      <PickersLayoutContentWrapper
+        className={pickersLayoutClasses.contentWrapper}
+        ownerState={ownerState}
+      >
         {tabs}
         {content}
       </PickersLayoutContentWrapper>

diff --git a/docs/src/modules/components/overview/mainDemo/DigitalClock.tsx b/docs/src/modules/components/overview/mainDemo/DigitalClock.tsx
@@ -28,7 +28,10 @@ function CustomLayout(props: PickersLayoutProps<Dayjs | null, TimeView>) {
   const { actionBar, content, ownerState } = usePickerLayout(props);
   return (
     <StyledLayout ownerState={ownerState}>
-      <PickersLayoutContentWrapper className={pickersLayoutClasses.contentWrapper}>
+      <PickersLayoutContentWrapper
+        className={pickersLayoutClasses.contentWrapper}
+        ownerState={ownerState}
+      >
         {content}
         {actionBar}
       </PickersLayoutContentWrapper>

diff --git a/packages/x-date-pickers/src/DesktopDateTimePicker/DesktopDateTimePickerLayout.tsx b/packages/x-date-pickers/src/DesktopDateTimePicker/DesktopDateTimePickerLayout.tsx
@@ -45,6 +45,7 @@ const DesktopDateTimePickerLayout = React.forwardRef(function DesktopDateTimePic
       {orientation === 'landscape' ? toolbar : shortcuts}
       <PickersLayoutContentWrapper
         className={clsx(pickersLayoutClasses.contentWrapper, classes?.contentWrapper)}
+        ownerState={ownerState}
         sx={{ display: 'grid' }}
       >
         {content}

diff --git a/packages/x-date-pickers/src/PickersLayout/PickersLayout.tsx b/packages/x-date-pickers/src/PickersLayout/PickersLayout.tsx
@@ -80,7 +80,7 @@ export const PickersLayoutContentWrapper = styled('div', {
   name: 'MuiPickersLayout',
   slot: 'ContentWrapper',
   overridesResolver: (props, styles) => styles.contentWrapper,
-})({
+})<{ ownerState: PickerLayoutOwnerState }>({
   gridColumn: 2,
   gridRow: 2,
   display: 'flex',
@@ -121,7 +121,7 @@ const PickersLayout = React.forwardRef(function PickersLayout<
     >
       {orientation === 'landscape' ? shortcuts : toolbar}
       {orientation === 'landscape' ? toolbar : shortcuts}
-      <PickersLayoutContentWrapper className={classes.contentWrapper}>
+      <PickersLayoutContentWrapper className={classes.contentWrapper} ownerState={ownerState}>
         {variant === 'desktop' ? (
           <React.Fragment>
             {content}