From f4b67dae015ae3d606e2a82bd7e4ad326935f452 Mon Sep 17 00:00:00 2001
From: Jan Potoms <2109932+Janpot@users.noreply.github.com>
Date: Sat, 3 Sep 2022 12:10:02 +0200
Subject: [PATCH] [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
---
.eslintrc.js | 5 +-
packages/mui-base/src/Portal/Portal.js | 6 +-
.../mui-material/src/Hidden/HiddenJs.d.ts | 2 +-
packages/mui-material/src/Hidden/HiddenJs.js | 34 +++------
.../src/NativeSelect/NativeSelect.js | 38 +++++-----
packages/mui-material/src/Select/Select.js | 74 ++++++++++---------
6 files changed, 79 insertions(+), 80 deletions(-)
diff --git a/.eslintrc.js b/.eslintrc.js
index bac3d566cbbd88..dabf91f5e35921 100644
--- 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
index 8a3f401bbc7d5f..90fec0cbd449a9 100644
--- 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 (
+
+ {mountNode ? ReactDOM.createPortal(children, mountNode) : mountNode}
+
+ );
});
Portal.propTypes /* remove-proptypes */ = {
diff --git a/packages/mui-material/src/Hidden/HiddenJs.d.ts b/packages/mui-material/src/Hidden/HiddenJs.d.ts
index a46ba20f3ba6a7..fa845496632f6e 100644
--- 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
index 9d54d63c8c068c..29522f295ecace 100644
--- 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,7 +49,7 @@ function HiddenJs(props) {
return null;
}
- return children;
+ return {children};
}
HiddenJs.propTypes = {
@@ -56,42 +57,25 @@ 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
index 052c9afd86fab8..e24b489b96f30f 100644
--- 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.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),
+ })}
+
+ );
});
NativeSelect.propTypes /* remove-proptypes */ = {
diff --git a/packages/mui-material/src/Select/Select.js b/packages/mui-material/src/Select/Select.js
index 7e3b785a0fb8a9..102772d9684247 100644
--- 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.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,
+ })}
+
+ );
});
Select.propTypes /* remove-proptypes */ = {