From 47cc78d34921ec75bbcda86d4fbf0b0e8eacd88a Mon Sep 17 00:00:00 2001 From: binsmyth Date: Fri, 13 Sep 2024 00:07:40 +1000 Subject: [PATCH] [core] Fix some issues reported by eslint-plugin-react-compiler (#43117) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: binsmyth Co-authored-by: Aarón García Hervás --- packages/mui-material/src/Backdrop/Backdrop.js | 10 +++++++--- packages/mui-material/src/FormControl/FormControl.js | 3 +-- packages/mui-material/src/Hidden/withWidth.js | 1 + packages/mui-material/src/InputBase/InputBase.js | 2 ++ packages/mui-material/src/InputBase/InputBase.test.js | 2 +- packages/mui-material/src/Popover/Popover.js | 2 +- packages/mui-material/src/Select/SelectInput.js | 2 ++ packages/mui-material/src/Snackbar/Snackbar.test.js | 1 + .../src/SwipeableDrawer/SwipeableDrawer.js | 1 + packages/mui-material/src/Tooltip/Tooltip.js | 9 ++++++--- packages/mui-material/src/styles/useTheme.js | 1 + .../src/useScrollTrigger/useScrollTrigger.js | 2 +- 12 files changed, 25 insertions(+), 11 deletions(-) diff --git a/packages/mui-material/src/Backdrop/Backdrop.js b/packages/mui-material/src/Backdrop/Backdrop.js index 3d5b74a543dba3..1c906c65260986 100644 --- 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 ( - + {children} diff --git a/packages/mui-material/src/FormControl/FormControl.js b/packages/mui-material/src/FormControl/FormControl.js index e9d5d01b773a4d..19698ecb6c3802 100644 --- 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 index 986fa0a8fd8e30..d0a534c476c905 100644 --- 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 index a216b4a2897afb..7333c1c4f32cf5 100644 --- 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 index 0b44695890bd41..d7289dfe0ba2c6 100644 --- a/packages/mui-material/src/InputBase/InputBase.test.js +++ b/packages/mui-material/src/InputBase/InputBase.test.js @@ -190,10 +190,10 @@ describe('', () => { 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 ; }); - render(); 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 index b0204676140312..7b574d4ca5f35a 100644 --- 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 index b79a033c6eb4b2..27bf3ede4f1818 100644 --- 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 index 9ea8e9817f24fa..9f0e1e25b97da2 100644 --- a/packages/mui-material/src/Snackbar/Snackbar.test.js +++ b/packages/mui-material/src/Snackbar/Snackbar.test.js @@ -82,6 +82,7 @@ describe('', () => { 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 index 08c688a6f8bc2e..23d775bf29f6a9 100644 --- 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 index 8ab22adfe30338..aed1a9b045b325 100644 --- 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 index f4f4255275b445..99c8cd225ff1a1 100644 --- 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 index f992cf82dedc23..3a7ec692031a0e 100644 --- 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)]);