[Popover] Add ownerState on the paper slot (mui#34445)

jesrodri · Dec 6, 2022 · 728429f · 728429f
1 parent c39b1d3
commit 728429f
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 0 deletions.
diff --git a/packages/mui-material/src/Popover/Popover.js b/packages/mui-material/src/Popover/Popover.js
@@ -374,6 +374,7 @@ const Popover = React.forwardRef(function Popover(inProps, ref) {
           {...PaperProps}
           ref={handlePaperRef}
           className={clsx(classes.paper, PaperProps.className)}
+          ownerState={ownerState}
         >
           {children}
         </PopoverPaper>

diff --git a/packages/mui-material/src/Popover/Popover.test.js b/packages/mui-material/src/Popover/Popover.test.js
@@ -7,6 +7,7 @@ import Grow from '@mui/material/Grow';
 import Modal from '@mui/material/Modal';
 import Paper from '@mui/material/Paper';
 import Popover, { popoverClasses as classes } from '@mui/material/Popover';
+import { ThemeProvider, createTheme } from '@mui/material/styles';
 import { getOffsetLeft, getOffsetTop } from './Popover';
 import useForkRef from '../utils/useForkRef';
 
@@ -877,4 +878,28 @@ describe('<Popover />', () => {
       expect(screen.getByTestId('transition')).not.to.have.attribute('data-timeout');
     });
   });
+
+  it("should not throw if ownerState is used in slot's styleOverrides", () => {
+    expect(() =>
+      render(
+        <ThemeProvider
+          theme={createTheme({
+            components: {
+              MuiPopover: {
+                styleOverrides: {
+                  paper: ({ ownerState }) => ({
+                    marginTop: ownerState.transformOrigin?.vertical === 'top' ? '4px' : 0,
+                  }),
+                },
+              },
+            },
+          })}
+        >
+          <Popover anchorEl={document.createElement('div')} open>
+            <div />
+          </Popover>
+        </ThemeProvider>,
+      ),
+    ).not.to.throw();
+  });
 });