[core] Reinstate react/no-unused-prop-types eslint rule (#34125)

* Reinstate react/no-unused-prop-types rule * disable in js * leave this * Try out fragments * this needs to go in as well
mui · Sep 3, 2022 · f4b67da · f4b67da
1 parent 0a66a26
commit f4b67da
Show file tree

Hide file tree

Showing 6 changed files with 79 additions and 80 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -135,9 +135,6 @@ module.exports = {
         allowRequiredDefaults: true,
       },
     ],
-    // No need to check this as prop types are autogenerated.
-    // Plus, there are a few false positives.
-    'react/no-unused-prop-types': 'off',
     // Can add verbosity to small functions making them harder to grok.
     // Though we have to manually enforce it for function components with default values.
     'react/destructuring-assignment': 'off',
@@ -222,6 +219,7 @@ module.exports = {
         // components that are defined in test are isolated enough
         // that they don't need type-checking
         'react/prop-types': 'off',
+        'react/no-unused-prop-types': 'off',
       },
     },
     {
@@ -278,7 +276,6 @@ module.exports = {
             ],
           },
         ],
-        'react/prop-types': 'off',
       },
     },
     // Files used for generating TypeScript declaration files (#ts-source-files)

diff --git a/packages/mui-base/src/Portal/Portal.js b/packages/mui-base/src/Portal/Portal.js
@@ -48,7 +48,11 @@ const Portal = React.forwardRef(function Portal(props, ref) {
     return children;
   }
 
-  return mountNode ? ReactDOM.createPortal(children, mountNode) : mountNode;
+  return (
+    <React.Fragment>
+      {mountNode ? ReactDOM.createPortal(children, mountNode) : mountNode}
+    </React.Fragment>
+  );
 });
 
 Portal.propTypes /* remove-proptypes */ = {

diff --git a/packages/mui-material/src/Hidden/HiddenJs.d.ts b/packages/mui-material/src/Hidden/HiddenJs.d.ts
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Breakpoint } from '@mui/system';
 
 export interface HiddenJsProps {
-  initialWidth?: Breakpoint;
+  width?: Breakpoint;
   lgDown?: boolean;
   lgUp?: boolean;
   mdDown?: boolean;

diff --git a/packages/mui-material/src/Hidden/HiddenJs.js b/packages/mui-material/src/Hidden/HiddenJs.js
@@ -1,3 +1,4 @@
+import * as React from 'react';
 import PropTypes from 'prop-types';
 import { exactProp } from '@mui/utils';
 import withWidth, { isWidthDown, isWidthUp } from './withWidth';
@@ -48,50 +49,33 @@ function HiddenJs(props) {
     return null;
   }
 
-  return children;
+  return <React.Fragment>{children}</React.Fragment>;
 }
 
 HiddenJs.propTypes = {
   /**
    * The content of the component.
    */
   children: PropTypes.node,
-  /**
-   * @ignore
-   */
-  className: PropTypes.string,
-  /**
-   * Specify which implementation to use.  'js' is the default, 'css' works better for
-   * server-side rendering.
-   */
-  implementation: PropTypes.oneOf(['js', 'css']),
-  /**
-   * You can use this prop when choosing the `js` implementation with server-side rendering.
-   *
-   * As `window.innerWidth` is unavailable on the server,
-   * we default to rendering an empty component during the first mount.
-   * You might want to use a heuristic to approximate
-   * the screen width of the client browser screen width.
-   *
-   * For instance, you could be using the user-agent or the client-hints.
-   * https://caniuse.com/#search=client%20hint
-   */
-  initialWidth: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),
   /**
    * If `true`, screens this size and down are hidden.
    */
+  // eslint-disable-next-line react/no-unused-prop-types
   lgDown: PropTypes.bool,
   /**
    * If `true`, screens this size and up are hidden.
    */
+  // eslint-disable-next-line react/no-unused-prop-types
   lgUp: PropTypes.bool,
   /**
    * If `true`, screens this size and down are hidden.
    */
+  // eslint-disable-next-line react/no-unused-prop-types
   mdDown: PropTypes.bool,
   /**
    * If `true`, screens this size and up are hidden.
    */
+  // eslint-disable-next-line react/no-unused-prop-types
   mdUp: PropTypes.bool,
   /**
    * Hide the given breakpoint(s).
@@ -103,10 +87,12 @@ HiddenJs.propTypes = {
   /**
    * If `true`, screens this size and down are hidden.
    */
+  // eslint-disable-next-line react/no-unused-prop-types
   smDown: PropTypes.bool,
   /**
    * If `true`, screens this size and up are hidden.
    */
+  // eslint-disable-next-line react/no-unused-prop-types
   smUp: PropTypes.bool,
   /**
    * @ignore
@@ -116,18 +102,22 @@ HiddenJs.propTypes = {
   /**
    * If `true`, screens this size and down are hidden.
    */
+  // eslint-disable-next-line react/no-unused-prop-types
   xlDown: PropTypes.bool,
   /**
    * If `true`, screens this size and up are hidden.
    */
+  // eslint-disable-next-line react/no-unused-prop-types
   xlUp: PropTypes.bool,
   /**
    * If `true`, screens this size and down are hidden.
    */
+  // eslint-disable-next-line react/no-unused-prop-types
   xsDown: PropTypes.bool,
   /**
    * If `true`, screens this size and up are hidden.
    */
+  // eslint-disable-next-line react/no-unused-prop-types
   xsUp: PropTypes.bool,
 };
 

diff --git a/packages/mui-material/src/NativeSelect/NativeSelect.js b/packages/mui-material/src/NativeSelect/NativeSelect.js
@@ -48,23 +48,27 @@ const NativeSelect = React.forwardRef(function NativeSelect(inProps, ref) {
   const classes = useUtilityClasses(ownerState);
   const { root, ...otherClasses } = classesProp;
 
-  return React.cloneElement(input, {
-    // Most of the logic is implemented in `NativeSelectInput`.
-    // The `Select` component is a simple API wrapper to expose something better to play with.
-    inputComponent: NativeSelectInput,
-    inputProps: {
-      children,
-      classes: otherClasses,
-      IconComponent,
-      variant: fcs.variant,
-      type: undefined, // We render a select. We can ignore the type provided by the `Input`.
-      ...inputProps,
-      ...(input ? input.props.inputProps : {}),
-    },
-    ref,
-    ...other,
-    className: clsx(classes.root, input.props.className, className),
-  });
+  return (
+    <React.Fragment>
+      {React.cloneElement(input, {
+        // Most of the logic is implemented in `NativeSelectInput`.
+        // The `Select` component is a simple API wrapper to expose something better to play with.
+        inputComponent: NativeSelectInput,
+        inputProps: {
+          children,
+          classes: otherClasses,
+          IconComponent,
+          variant: fcs.variant,
+          type: undefined, // We render a select. We can ignore the type provided by the `Input`.
+          ...inputProps,
+          ...(input ? input.props.inputProps : {}),
+        },
+        ref,
+        ...other,
+        className: clsx(classes.root, input.props.className, className),
+      })}
+    </React.Fragment>
+  );
 });
 
 NativeSelect.propTypes /* remove-proptypes */ = {

diff --git a/packages/mui-material/src/Select/Select.js b/packages/mui-material/src/Select/Select.js
@@ -83,41 +83,45 @@ const Select = React.forwardRef(function Select(inProps, ref) {
 
   const inputComponentRef = useForkRef(ref, InputComponent.ref);
 
-  return React.cloneElement(InputComponent, {
-    // Most of the logic is implemented in `SelectInput`.
-    // The `Select` component is a simple API wrapper to expose something better to play with.
-    inputComponent,
-    inputProps: {
-      children,
-      IconComponent,
-      variant,
-      type: undefined, // We render a select. We can ignore the type provided by the `Input`.
-      multiple,
-      ...(native
-        ? { id }
-        : {
-            autoWidth,
-            defaultOpen,
-            displayEmpty,
-            labelId,
-            MenuProps,
-            onClose,
-            onOpen,
-            open,
-            renderValue,
-            SelectDisplayProps: { id, ...SelectDisplayProps },
-          }),
-      ...inputProps,
-      classes: inputProps ? deepmerge(classes, inputProps.classes) : classes,
-      ...(input ? input.props.inputProps : {}),
-    },
-    ...(multiple && native && variant === 'outlined' ? { notched: true } : {}),
-    ref: inputComponentRef,
-    className: clsx(InputComponent.props.className, className),
-    // If a custom input is provided via 'input' prop, do not allow 'variant' to be propagated to it's root element. See https://github.com/mui/material-ui/issues/33894.
-    ...(!input && { variant }),
-    ...other,
-  });
+  return (
+    <React.Fragment>
+      {React.cloneElement(InputComponent, {
+        // Most of the logic is implemented in `SelectInput`.
+        // The `Select` component is a simple API wrapper to expose something better to play with.
+        inputComponent,
+        inputProps: {
+          children,
+          IconComponent,
+          variant,
+          type: undefined, // We render a select. We can ignore the type provided by the `Input`.
+          multiple,
+          ...(native
+            ? { id }
+            : {
+                autoWidth,
+                defaultOpen,
+                displayEmpty,
+                labelId,
+                MenuProps,
+                onClose,
+                onOpen,
+                open,
+                renderValue,
+                SelectDisplayProps: { id, ...SelectDisplayProps },
+              }),
+          ...inputProps,
+          classes: inputProps ? deepmerge(classes, inputProps.classes) : classes,
+          ...(input ? input.props.inputProps : {}),
+        },
+        ...(multiple && native && variant === 'outlined' ? { notched: true } : {}),
+        ref: inputComponentRef,
+        className: clsx(InputComponent.props.className, className),
+        // If a custom input is provided via 'input' prop, do not allow 'variant' to be propagated to it's root element. See https://github.com/mui/material-ui/issues/33894.
+        ...(!input && { variant }),
+        ...other,
+      })}
+    </React.Fragment>
+  );
 });
 
 Select.propTypes /* remove-proptypes */ = {