[pickers] Migrate PickersPopper to emotion (#26391)

mui · May 21, 2021 · 0efe477 · 0efe477
1 parent 12a017d
commit 0efe477
Showing 1 changed file with 24 additions and 28 deletions.
diff --git a/packages/material-ui-lab/src/internal/pickers/PickersPopper.tsx b/packages/material-ui-lab/src/internal/pickers/PickersPopper.tsx
@@ -1,13 +1,12 @@
 import * as React from 'react';
-import clsx from 'clsx';
 import Grow from '@material-ui/core/Grow';
 import Paper, { PaperProps as MuiPaperProps } from '@material-ui/core/Paper';
 import Popper, { PopperProps as MuiPopperProps } from '@material-ui/core/Popper';
 import TrapFocus, {
   TrapFocusProps as MuiTrapFocusProps,
 } from '@material-ui/core/Unstable_TrapFocus';
 import { useForkRef, useEventCallback, ownerDocument } from '@material-ui/core/utils';
-import { MuiStyles, StyleRules, WithStyles, withStyles } from '@material-ui/core/styles';
+import { experimentalStyled as styled } from '@material-ui/core/styles';
 import { TransitionProps as MuiTransitionProps } from '@material-ui/core/transitions';
 
 export interface ExportedPickerPopperProps {
@@ -30,22 +29,19 @@ export interface PickerPopperProps extends ExportedPickerPopperProps, MuiPaperPr
   onClose: () => void;
 }
 
-export type PickersPopperClassKey = 'root' | 'paper' | 'topTransition';
-
-export const styles: MuiStyles<PickersPopperClassKey> = (
-  theme,
-): StyleRules<PickersPopperClassKey> => ({
-  root: {
-    zIndex: theme.zIndex.modal,
-  },
-  paper: {
-    transformOrigin: 'top center',
-    outline: 0,
-  },
-  topTransition: {
+const PickersPopperRoot = styled(Popper, { skipSx: true })(({ theme }) => ({
+  zIndex: theme.zIndex.modal,
+}));
+
+const PickersPopperPaper = styled(Paper, { skipSx: true })<{
+  styleProps: Pick<MuiPopperProps, 'placement'>;
+}>(({ styleProps }) => ({
+  transformOrigin: 'top center',
+  outline: 0,
+  ...(styleProps.placement === 'top' && {
     transformOrigin: 'bottom center',
-  },
-});
+  }),
+}));
 
 function clickedRootScrollbar(event: MouseEvent, doc: Document) {
   return (
@@ -188,11 +184,10 @@ function useClickAwayListener(
   return [nodeRef, handleSynthetic, handleSynthetic];
 }
 
-const PickersPopper: React.FC<PickerPopperProps & WithStyles<typeof styles>> = (props) => {
+const PickersPopper = (props: PickerPopperProps) => {
   const {
     anchorEl,
     children,
-    classes,
     containerRef = null,
     onClose,
     open,
@@ -238,13 +233,16 @@ const PickersPopper: React.FC<PickerPopperProps & WithStyles<typeof styles>> = (
   const handleRef = useForkRef(paperRef, containerRef);
   const handlePaperRef = useForkRef(handleRef, clickAwayRef as React.Ref<HTMLDivElement>);
 
+  // TODO: convert to simple assignment after the type error in defaultPropsHandler.js:60:6 is fixed
+  const styleProps = { ...props };
+
   return (
-    <Popper
+    <PickersPopperRoot
       transition
       role={role}
       open={open}
       anchorEl={anchorEl}
-      className={clsx(classes.root, PopperProps?.className)}
+      styleProps={styleProps}
       {...PopperProps}
     >
       {({ TransitionProps, placement }) => (
@@ -257,23 +255,21 @@ const PickersPopper: React.FC<PickerPopperProps & WithStyles<typeof styles>> = (
           {...TrapFocusProps}
         >
           <TransitionComponent {...TransitionProps}>
-            <Paper
+            <PickersPopperPaper
               tabIndex={-1}
               elevation={8}
               ref={handlePaperRef}
-              className={clsx(classes.paper, {
-                [classes.topTransition]: placement === 'top',
-              })}
               onClick={onPaperClick}
               onTouchStart={onPaperTouchStart}
+              styleProps={{ ...styleProps, placement }}
             >
               {children}
-            </Paper>
+            </PickersPopperPaper>
           </TransitionComponent>
         </TrapFocus>
       )}
-    </Popper>
+    </PickersPopperRoot>
   );
 };
 
-export default withStyles(styles, { name: 'PrivatePickersPopper' })(PickersPopper);
+export default PickersPopper;