[core] Fix some issues reported by eslint-plugin-react-compiler (#43117)

Signed-off-by: binsmyth <[email protected]> Co-authored-by: Aarón García Hervás <[email protected]>
mui · Sep 12, 2024 · 47cc78d · 47cc78d
1 parent 092e100
commit 47cc78d
Show file tree

Hide file tree

Showing 12 changed files with 25 additions and 11 deletions.
diff --git a/packages/mui-material/src/Backdrop/Backdrop.js b/packages/mui-material/src/Backdrop/Backdrop.js
@@ -9,6 +9,11 @@ import useSlot from '../utils/useSlot';
 import Fade from '../Fade';
 import { getBackdropUtilityClass } from './backdropClasses';
 
+const removeOwnerState = (props) => {
+  const { ownerState, ...rest } = props;
+  return rest;
+};
+
 const useUtilityClasses = (ownerState) => {
   const { classes, invisible } = ownerState;
 
@@ -96,11 +101,10 @@ const Backdrop = React.forwardRef(function Backdrop(inProps, ref) {
     externalForwardedProps,
     ownerState,
   });
-
-  delete transitionProps.ownerState;
+  const transitionPropsRemoved = removeOwnerState(transitionProps);
 
   return (
-    <TransitionSlot in={open} timeout={transitionDuration} {...other} {...transitionProps}>
+    <TransitionSlot in={open} timeout={transitionDuration} {...other} {...transitionPropsRemoved}>
       <RootSlot aria-hidden {...rootProps} classes={classes} ref={ref}>
         {children}
       </RootSlot>

diff --git a/packages/mui-material/src/FormControl/FormControl.js b/packages/mui-material/src/FormControl/FormControl.js
@@ -172,9 +172,8 @@ const FormControl = React.forwardRef(function FormControl(inProps, ref) {
   const focused = visuallyFocused !== undefined && !disabled ? visuallyFocused : focusedState;
 
   let registerEffect;
+  const registeredInput = React.useRef(false);
   if (process.env.NODE_ENV !== 'production') {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    const registeredInput = React.useRef(false);
     registerEffect = () => {
       if (registeredInput.current) {
         console.error(

diff --git a/packages/mui-material/src/Hidden/withWidth.js b/packages/mui-material/src/Hidden/withWidth.js
@@ -54,6 +54,7 @@ const withWidth =
        */
       const keys = theme.breakpoints.keys.slice().reverse();
       const widthComputed = keys.reduce((output, key) => {
+        // TODO: uncomment once we enable eslint-plugin-react-compiler // eslint-disable-next-line react-compiler/react-compiler
         // eslint-disable-next-line react-hooks/rules-of-hooks
         const matches = useMediaQuery(theme.breakpoints.up(key));
         return !output && matches ? key : output;

diff --git a/packages/mui-material/src/InputBase/InputBase.js b/packages/mui-material/src/InputBase/InputBase.js
@@ -339,6 +339,7 @@ const InputBase = React.forwardRef(function InputBase(inProps, ref) {
   const muiFormControl = useFormControl();
 
   if (process.env.NODE_ENV !== 'production') {
+    // TODO: uncomment once we enable eslint-plugin-react-compiler // eslint-disable-next-line react-compiler/react-compiler
     // eslint-disable-next-line react-hooks/rules-of-hooks
     React.useEffect(() => {
       if (muiFormControl) {
@@ -450,6 +451,7 @@ const InputBase = React.forwardRef(function InputBase(inProps, ref) {
   // or auto filled by the browser before the hydration (for SSR).
   React.useEffect(() => {
     checkDirty(inputRef.current);
+    // TODO: uncomment once we enable eslint-plugin-react-compiler // eslint-disable-next-line react-compiler/react-compiler
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 

diff --git a/packages/mui-material/src/InputBase/InputBase.test.js b/packages/mui-material/src/InputBase/InputBase.test.js
@@ -190,10 +190,10 @@ describe('<InputBase />', () => {
     it('should inject onBlur and onFocus', () => {
       let injectedProps;
       const MyInputBase = React.forwardRef(function MyInputBase(props, ref) {
+        // TODO: uncomment once we enable eslint-plugin-react-compiler // eslint-disable-next-line react-compiler/react-compiler
         injectedProps = props;
         return <input ref={ref} {...props} />;
       });
-
       render(<InputBase inputComponent={MyInputBase} />);
       expect(typeof injectedProps.onBlur).to.equal('function');
       expect(typeof injectedProps.onFocus).to.equal('function');

diff --git a/packages/mui-material/src/Popover/Popover.js b/packages/mui-material/src/Popover/Popover.js
@@ -300,7 +300,7 @@ const Popover = React.forwardRef(function Popover(inProps, ref) {
     const positioning = getPositioningStyle(element);
 
     if (positioning.top !== null) {
-      element.style.top = positioning.top;
+      element.style.setProperty('top', positioning.top);
     }
     if (positioning.left !== null) {
       element.style.left = positioning.left;

diff --git a/packages/mui-material/src/Select/SelectInput.js b/packages/mui-material/src/Select/SelectInput.js
@@ -180,6 +180,7 @@ const SelectInput = React.forwardRef(function SelectInput(props, ref) {
       setMenuMinWidthState(autoWidth ? null : anchorElement.clientWidth);
       displayRef.current.focus();
     }
+    // TODO: uncomment once we enable eslint-plugin-react-compiler // eslint-disable-next-line react-compiler/react-compiler
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [displayNode, autoWidth]);
   // `isOpenControlled` is ignored because the component should never switch between controlled and uncontrolled modes.
@@ -415,6 +416,7 @@ const SelectInput = React.forwardRef(function SelectInput(props, ref) {
   });
 
   if (process.env.NODE_ENV !== 'production') {
+    // TODO: uncomment once we enable eslint-plugin-react-compiler // eslint-disable-next-line react-compiler/react-compiler
     // eslint-disable-next-line react-hooks/rules-of-hooks
     React.useEffect(() => {
       if (!foundMatch && !multiple && value !== '') {

diff --git a/packages/mui-material/src/Snackbar/Snackbar.test.js b/packages/mui-material/src/Snackbar/Snackbar.test.js
@@ -82,6 +82,7 @@ describe('<Snackbar />', () => {
       let setSnackbarOpen;
       function Test() {
         const [open, setOpen] = React.useState(false);
+        // TODO: uncomment once we enable eslint-plugin-react-compiler // eslint-disable-next-line react-compiler/react-compiler
         setSnackbarOpen = setOpen;
 
         function handleClose() {

diff --git a/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.js b/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.js
@@ -238,6 +238,7 @@ const SwipeableDrawer = React.forwardRef(function SwipeableDrawer(inProps, ref)
     if (!touchDetected.current) {
       return;
     }
+    // TODO: uncomment once we enable eslint-plugin-react-compiler // eslint-disable-next-line react-compiler/react-compiler -- claimedSwipeInstance is a singleton
     claimedSwipeInstance = null;
     touchDetected.current = false;
     ReactDOM.flushSync(() => {

diff --git a/packages/mui-material/src/Tooltip/Tooltip.js b/packages/mui-material/src/Tooltip/Tooltip.js
@@ -372,10 +372,12 @@ const Tooltip = React.forwardRef(function Tooltip(inProps, ref) {
   let open = openState;
 
   if (process.env.NODE_ENV !== 'production') {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
+    // TODO: uncomment once we enable eslint-plugin-react-compiler // eslint-disable-next-line react-compiler/react-compiler
+    // eslint-disable-next-line react-hooks/rules-of-hooks -- process.env never changes
     const { current: isControlled } = React.useRef(openProp !== undefined);
 
-    // eslint-disable-next-line react-hooks/rules-of-hooks
+    // TODO: uncomment once we enable eslint-plugin-react-compiler // eslint-disable-next-line react-compiler/react-compiler
+    // eslint-disable-next-line react-hooks/rules-of-hooks -- process.env never changes
     React.useEffect(() => {
       if (
         childNode &&
@@ -599,7 +601,8 @@ const Tooltip = React.forwardRef(function Tooltip(inProps, ref) {
   if (process.env.NODE_ENV !== 'production') {
     childrenProps['data-mui-internal-clone-element'] = true;
 
-    // eslint-disable-next-line react-hooks/rules-of-hooks
+    // TODO: uncomment once we enable eslint-plugin-react-compiler // eslint-disable-next-line react-compiler/react-compiler
+    // eslint-disable-next-line react-hooks/rules-of-hooks -- process.env never changes
     React.useEffect(() => {
       if (childNode && !childNode.getAttribute('data-mui-internal-clone-element')) {
         console.error(

diff --git a/packages/mui-material/src/styles/useTheme.js b/packages/mui-material/src/styles/useTheme.js
@@ -8,6 +8,7 @@ export default function useTheme() {
   const theme = useThemeSystem(defaultTheme);
 
   if (process.env.NODE_ENV !== 'production') {
+    // TODO: uncomment once we enable eslint-plugin-react-compiler // eslint-disable-next-line react-compiler/react-compiler
     // eslint-disable-next-line react-hooks/rules-of-hooks
     React.useDebugValue(theme);
   }

diff --git a/packages/mui-material/src/useScrollTrigger/useScrollTrigger.js b/packages/mui-material/src/useScrollTrigger/useScrollTrigger.js
@@ -25,7 +25,6 @@ export default function useScrollTrigger(options = {}) {
   const { getTrigger = defaultTrigger, target = defaultTarget, ...other } = options;
   const store = React.useRef();
   const [trigger, setTrigger] = React.useState(() => getTrigger(store, other));
-
   React.useEffect(() => {
     const handleScroll = () => {
       setTrigger(getTrigger(store, { target, ...other }));
@@ -37,6 +36,7 @@ export default function useScrollTrigger(options = {}) {
       target.removeEventListener('scroll', handleScroll, { passive: true });
     };
     // See Option 3. https://github.com/facebook/react/issues/14476#issuecomment-471199055
+    // TODO: uncomment once we enable eslint-plugin-react-compiler // eslint-disable-next-line react-compiler/react-compiler
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [target, getTrigger, JSON.stringify(other)]);