diff --git a/.eslintrc.js b/.eslintrc.js index 872d16f664c2b2..2f343854ba16af 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -1,4 +1,4 @@ -const confusingBrowserGlobals = require('confusing-browser-globals'); + const path = require('path'); module.exports = { @@ -42,6 +42,7 @@ module.exports = { 'import/no-cycle': 'off', // Too slow 'import/no-extraneous-dependencies': 'off', // Missing yarn workspace support 'jsx-a11y/label-has-associated-control': 'off', // doesn't work? + 'jsx-a11y/no-autofocus': 'off', // We are a library, we need to support it too 'max-classes-per-file': 'off', // just as bad as "max components per file" 'no-alert': 'error', // Too much interruptive 'no-console': ['error', { allow: ['warn', 'error'] }], // Allow warn and error for production events @@ -56,64 +57,29 @@ module.exports = { ], }, ], + 'material-ui/docgen-ignore-before-comment': 'error', + 'no-constant-condition': 'error', + 'no-prototype-builtins': 'off', // Use the proptype inheritance chain + 'no-underscore-dangle': 'error', + 'nonblock-statement-body-position': 'error', + 'prefer-arrow-callback': ['error', { allowNamedFunctions: true }], 'prefer-destructuring': 'off', // Destructuring harm grep potential. + 'react-hooks/exhaustive-deps': ['error', { additionalHooks: 'useEnhancedEffect' }], + 'react-hooks/rules-of-hooks': 'error', 'react/destructuring-assignment': 'off', // It's fine. + 'react/forbid-prop-types': 'off', // Too strict, no time for that 'react/jsx-curly-brace-presence': 'off', // broken 'react/jsx-filename-extension': ['error', { extensions: ['.js', '.tsx'] }], // airbnb is using .jsx 'react/jsx-fragments': ['error', 'element'], // Prefer over <>. 'react/jsx-props-no-spreading': 'off', // We are a UI library. 'react/no-array-index-key': 'off', // This rule is great for raising people awareness of what a key is and how it works. + 'react/no-danger': 'error', + 'react/no-direct-mutation-state': 'error', + 'react/no-find-dom-node': 'off', // Required for backward compatibility. TODO v5, drop 'react/require-default-props': 'off', // Not always relevant + 'react/sort-prop-types': 'error', + 'react/state-in-constructor': 'off', // Too strict, no time for that 'react/static-property-placement': 'off', // No needed - 'react/forbid-prop-types': 'off', // Too strict, no time for that - 'react/no-find-dom-node': 'off', // Required for backward compatibility. TODO v5, drop - - // 'linebreak-style': 'off', // Doesn't play nicely with Windows - // 'no-constant-condition': 'error', - // // Airbnb use error - // 'no-prototype-builtins': 'off', - // 'nonblock-statement-body-position': 'error', - // // Airbnb restricts isNaN and isFinite which are necessary for IE 11 - // // we have to be disciplined about the usage and ensure the Number type for its - // // arguments - // 'no-restricted-globals': ['error'].concat(confusingBrowserGlobals), - // 'no-underscore-dangle': 'error', - // 'prefer-arrow-callback': ['error', { allowNamedFunctions: true }], - // 'prefer-destructuring': 'off', // Destructuring harm grep potential. - - // 'jsx-a11y/label-has-for': 'off', // deprecated - // 'jsx-a11y/no-autofocus': 'off', // We are a library, people do what they want. - - // 'material-ui/docgen-ignore-before-comment': 'error', - - // // It's buggy - // 'react/jsx-handler-names': [ - // 'error', - // { - // // airbnb is disabling this rule - // eventHandlerPrefix: 'handle', - // eventHandlerPropPrefix: 'on', - // }, - // ], - // // not a good rule for components close to the DOM - // 'react/no-danger': 'error', - // // Strict, airbnb is using off - // 'react/no-direct-mutation-state': 'error', - // 'react/no-multi-comp': 'off', - // 'react/sort-prop-types': 'error', - // // This depends entirely on what you're doing. There's no universal pattern - // // stylistic opinion. For conditional assignment we want it outside, otherwise as static - // 'import/namespace': ['error', { allowComputed: true }], - // 'import/order': [ - // 'error', - // { - // groups: [['index', 'sibling', 'parent', 'internal', 'external', 'builtin']], - // 'newlines-between': 'never', - // }, - // ], - - // 'react-hooks/rules-of-hooks': 'error', - 'react-hooks/exhaustive-deps': ['error', { additionalHooks: 'useEnhancedEffect' }], }, overrides: [ { @@ -226,5 +192,12 @@ module.exports = { 'react/static-property-placement': 'off', }, }, + { + files: ['packages/material-ui-icons/custom/**/*.js'], + rules: { + 'import/no-unresolved': 'off', + 'import/extensions': 'off', + }, + }, ], }; diff --git a/docs/src/modules/components/AdInHouse.js b/docs/src/modules/components/AdInHouse.js index 2a51d421a1093e..fbc6225b8ad29d 100644 --- a/docs/src/modules/components/AdInHouse.js +++ b/docs/src/modules/components/AdInHouse.js @@ -41,7 +41,7 @@ export default function AdInHouse(props) { dangerouslySetInnerHTML={{ __html: ad.description }} /> - ad by Material-UI + {'ad by Material-UI'} ); /* eslint-enable material-ui/no-hardcoded-labels, react/no-danger */ diff --git a/docs/src/modules/components/DemoErrorBoundary.js b/docs/src/modules/components/DemoErrorBoundary.js index b37da64680bc4e..e4400d4249ce9f 100644 --- a/docs/src/modules/components/DemoErrorBoundary.js +++ b/docs/src/modules/components/DemoErrorBoundary.js @@ -22,7 +22,7 @@ export default class DemoErrorBoundary extends React.Component { return (
- This demo had a runtime error! + {'This demo had a runtime error!'} We would appreciate it if you report this error directly to our{' '} diff --git a/docs/src/modules/components/MarkdownDocs.js b/docs/src/modules/components/MarkdownDocs.js index 921e35d67c5217..249d905993fd68 100644 --- a/docs/src/modules/components/MarkdownDocs.js +++ b/docs/src/modules/components/MarkdownDocs.js @@ -156,7 +156,7 @@ function MarkdownDocs(props) { return (
{/* eslint-disable-next-line material-ui/no-hardcoded-labels */} - {warnIcon} Missing demo `{name}` {warnIcon} + {warnIcon}{' Missing demo '}{name}{' '}{warnIcon}
); } diff --git a/docs/src/modules/components/TopLayoutBlog.js b/docs/src/modules/components/TopLayoutBlog.js index 4f696c37860dee..76c02e6a8f80a4 100644 --- a/docs/src/modules/components/TopLayoutBlog.js +++ b/docs/src/modules/components/TopLayoutBlog.js @@ -1,3 +1,4 @@ +/* eslint-disable material-ui/no-hardcoded-labels */ import React from 'react'; import PropTypes from 'prop-types'; import { withStyles } from '@material-ui/core/styles'; diff --git a/docs/src/pages/components/tables/EnhancedTable.js b/docs/src/pages/components/tables/EnhancedTable.js index 85e3c8901246e5..250b60213bc258 100644 --- a/docs/src/pages/components/tables/EnhancedTable.js +++ b/docs/src/pages/components/tables/EnhancedTable.js @@ -107,6 +107,21 @@ const headCells = [ }, ]; +const useStyles = makeStyles((theme) => ({ + root: { + width: '100%', + }, + paper: { + width: '100%', + marginBottom: theme.spacing(2), + }, + table: { + minWidth: 750, + }, + // TODO fix #20379. + sortSpan: visuallyHidden, +})); + function EnhancedTableHead(props) { const { classes, @@ -241,21 +256,6 @@ EnhancedTableToolbar.propTypes = { numSelected: PropTypes.number.isRequired, }; -const useStyles = makeStyles((theme) => ({ - root: { - width: '100%', - }, - paper: { - width: '100%', - marginBottom: theme.spacing(2), - }, - table: { - minWidth: 750, - }, - // TODO fix #20379. - sortSpan: visuallyHidden, -})); - export default function EnhancedTable() { const classes = useStyles(); const [order, setOrder] = React.useState('asc'); diff --git a/docs/src/pages/components/tables/EnhancedTable.tsx b/docs/src/pages/components/tables/EnhancedTable.tsx index a116b80a64cc2d..796f2572324f5b 100644 --- a/docs/src/pages/components/tables/EnhancedTable.tsx +++ b/docs/src/pages/components/tables/EnhancedTable.tsx @@ -141,6 +141,23 @@ const headCells: HeadCell[] = [ }, ]; +const useStyles = makeStyles((theme: Theme) => + createStyles({ + root: { + width: '100%', + }, + paper: { + width: '100%', + marginBottom: theme.spacing(2), + }, + table: { + minWidth: 750, + }, + // TODO fix #20379. + sortSpan: visuallyHidden as CSSProperties, + }), +); + interface EnhancedTableProps { classes: ReturnType; numSelected: number; @@ -281,23 +298,6 @@ const EnhancedTableToolbar = (props: EnhancedTableToolbarProps) => { ); }; -const useStyles = makeStyles((theme: Theme) => - createStyles({ - root: { - width: '100%', - }, - paper: { - width: '100%', - marginBottom: theme.spacing(2), - }, - table: { - minWidth: 750, - }, - // TODO fix #20379. - sortSpan: visuallyHidden as CSSProperties, - }), -); - export default function EnhancedTable() { const classes = useStyles(); const [order, setOrder] = React.useState('asc'); diff --git a/docs/src/pages/components/use-media-query/UseWidth.js b/docs/src/pages/components/use-media-query/UseWidth.js index d5a06d02db07b2..393c83a27f882c 100644 --- a/docs/src/pages/components/use-media-query/UseWidth.js +++ b/docs/src/pages/components/use-media-query/UseWidth.js @@ -16,6 +16,7 @@ function useWidth() { const keys = [...theme.breakpoints.keys].reverse(); return ( keys.reduce((output, key) => { + // eslint-disable-next-line react-hooks/rules-of-hooks const matches = useMediaQuery(theme.breakpoints.up(key)); return !output && matches ? key : output; }, null) || 'xs' diff --git a/docs/src/pages/components/use-media-query/UseWidth.tsx b/docs/src/pages/components/use-media-query/UseWidth.tsx index 740046f01224f1..f1669086d2e48c 100644 --- a/docs/src/pages/components/use-media-query/UseWidth.tsx +++ b/docs/src/pages/components/use-media-query/UseWidth.tsx @@ -6,8 +6,8 @@ import { createMuiTheme, } from '@material-ui/core/styles'; import useMediaQuery from '@material-ui/core/useMediaQuery'; -import { Breakpoint } from '@material-ui/core/styles/createBreakpoints'; +type Breakpoint = number | 'xs' | 'sm' | 'md' | 'lg' | 'xl'; type BreakpointOrNull = Breakpoint | null; /** @@ -20,6 +20,7 @@ function useWidth() { const keys: Breakpoint[] = [...theme.breakpoints.keys].reverse(); return ( keys.reduce((output: BreakpointOrNull, key: Breakpoint) => { + // eslint-disable-next-line react-hooks/rules-of-hooks const matches = useMediaQuery(theme.breakpoints.up(key)); return !output && matches ? key : output; }, null) || 'xs' diff --git a/docs/src/pages/customization/breakpoints/WithWidth.tsx b/docs/src/pages/customization/breakpoints/WithWidth.tsx index 2ced8e29f40704..0e3906ba0bf3b0 100644 --- a/docs/src/pages/customization/breakpoints/WithWidth.tsx +++ b/docs/src/pages/customization/breakpoints/WithWidth.tsx @@ -1,8 +1,8 @@ import React from 'react'; import withWidth from '@material-ui/core/withWidth'; import Typography from '@material-ui/core/Typography'; -import { Breakpoint } from '@material-ui/core/styles/createBreakpoints'; +type Breakpoint = number | 'xs' | 'sm' | 'md' | 'lg' | 'xl'; type TagName = 'em' | 'u' | 'del'; const components: Partial> = { diff --git a/docs/src/pages/premium-themes/onepirate/ForgotPassword.js b/docs/src/pages/premium-themes/onepirate/ForgotPassword.js index fad04f2fcf7de2..33ff4052a91a5e 100644 --- a/docs/src/pages/premium-themes/onepirate/ForgotPassword.js +++ b/docs/src/pages/premium-themes/onepirate/ForgotPassword.js @@ -1,3 +1,4 @@ +/* eslint-disable import/order */ import withRoot from './modules/withRoot'; // --- Post bootstrap ----- import React from 'react'; diff --git a/docs/src/pages/premium-themes/onepirate/Home.js b/docs/src/pages/premium-themes/onepirate/Home.js index 613f0416e87f8f..2ac798c88371d4 100644 --- a/docs/src/pages/premium-themes/onepirate/Home.js +++ b/docs/src/pages/premium-themes/onepirate/Home.js @@ -1,3 +1,4 @@ +/* eslint-disable import/order */ import withRoot from './modules/withRoot'; // --- Post bootstrap ----- import React from 'react'; diff --git a/docs/src/pages/premium-themes/onepirate/Privacy.js b/docs/src/pages/premium-themes/onepirate/Privacy.js index 9636759dea6864..06432365e0adfc 100644 --- a/docs/src/pages/premium-themes/onepirate/Privacy.js +++ b/docs/src/pages/premium-themes/onepirate/Privacy.js @@ -1,3 +1,4 @@ +/* eslint-disable import/order */ import withRoot from './modules/withRoot'; // --- Post bootstrap ----- import React from 'react'; diff --git a/docs/src/pages/premium-themes/onepirate/SignIn.js b/docs/src/pages/premium-themes/onepirate/SignIn.js index 89c4c41e988e6a..477fabffc7725a 100644 --- a/docs/src/pages/premium-themes/onepirate/SignIn.js +++ b/docs/src/pages/premium-themes/onepirate/SignIn.js @@ -1,3 +1,4 @@ +/* eslint-disable import/order */ import withRoot from './modules/withRoot'; // --- Post bootstrap ----- import React from 'react'; diff --git a/docs/src/pages/premium-themes/onepirate/SignUp.js b/docs/src/pages/premium-themes/onepirate/SignUp.js index 11f4ce8b88e202..5f9b2db3204814 100644 --- a/docs/src/pages/premium-themes/onepirate/SignUp.js +++ b/docs/src/pages/premium-themes/onepirate/SignUp.js @@ -1,3 +1,4 @@ +/* eslint-disable import/order */ import withRoot from './modules/withRoot'; // --- Post bootstrap ----- import React from 'react'; diff --git a/docs/src/pages/premium-themes/onepirate/Terms.js b/docs/src/pages/premium-themes/onepirate/Terms.js index 4792365078220c..a7c29f4d19a9f8 100644 --- a/docs/src/pages/premium-themes/onepirate/Terms.js +++ b/docs/src/pages/premium-themes/onepirate/Terms.js @@ -1,3 +1,4 @@ +/* eslint-disable import/order */ import withRoot from './modules/withRoot'; // --- Post bootstrap ----- import React from 'react'; diff --git a/packages/eslint-plugin-material-ui/src/rules/no-hardcoded-labels.js b/packages/eslint-plugin-material-ui/src/rules/no-hardcoded-labels.js index 7d2cf50be87141..55938f1d9b89da 100644 --- a/packages/eslint-plugin-material-ui/src/rules/no-hardcoded-labels.js +++ b/packages/eslint-plugin-material-ui/src/rules/no-hardcoded-labels.js @@ -15,13 +15,14 @@ module.exports = { Literal(node) { const canLabelComponent = node.parent.type === 'JSXElement' || + node.parent.type === 'JSXExpressionContainer' || (node.parent.type === 'JSXAttribute' && ['aria-label'].includes(node.parent.name.name)); const sanitizedValue = typeof node.value === 'string' ? node.value.trim() : node.value; const hasTranslateableContent = sanitizedValue !== '' && !emojiRegex.test(sanitizedValue); - if (canLabelComponent && hasTranslateableContent && !allow.includes(sanitizedValue)) { - context.report({ messageId: 'literal-label', node }); + if (canLabelComponent && hasTranslateableContent && !allow.includes(sanitizedValue) && typeof sanitizedValue === 'string') { + context.report({ messageId: 'literal-label', node: node.parent }); } }, }; diff --git a/packages/material-ui-codemod/src/util/getJSExports.js b/packages/material-ui-codemod/src/util/getJSExports.js index 2f050f05174334..5ede8f49231f02 100644 --- a/packages/material-ui-codemod/src/util/getJSExports.js +++ b/packages/material-ui-codemod/src/util/getJSExports.js @@ -1,7 +1,7 @@ -import memoize from './memoize'; import { readFileSync } from 'fs'; import { parseSync } from '@babel/core'; import traverse from '@babel/traverse'; +import memoize from './memoize'; const getJSExports = memoize((file) => { const result = new Set(); diff --git a/packages/material-ui-codemod/src/v4.0.0/optimal-imports.js b/packages/material-ui-codemod/src/v4.0.0/optimal-imports.js index 5cdc1bf1a65ad3..59a92776b6e56b 100644 --- a/packages/material-ui-codemod/src/v4.0.0/optimal-imports.js +++ b/packages/material-ui-codemod/src/v4.0.0/optimal-imports.js @@ -1,6 +1,6 @@ import { dirname } from 'path'; -import getJSExports from '../util/getJSExports'; import addImports from 'jscodeshift-add-imports'; +import getJSExports from '../util/getJSExports'; // istanbul ignore next if (process.env.NODE_ENV === 'test') { diff --git a/packages/material-ui-icons/.eslintrc.js b/packages/material-ui-icons/.eslintrc.js deleted file mode 100644 index de819a4b0f5f80..00000000000000 --- a/packages/material-ui-icons/.eslintrc.js +++ /dev/null @@ -1,7 +0,0 @@ -module.exports = { - rules: { - // needed for mustache and temp - 'import/no-unresolved': 'off', - 'import/extensions': 'off', - }, -}; diff --git a/packages/material-ui-lab/src/Alert/Alert.js b/packages/material-ui-lab/src/Alert/Alert.js index e7eaf1c048fe17..8681b08634b003 100644 --- a/packages/material-ui-lab/src/Alert/Alert.js +++ b/packages/material-ui-lab/src/Alert/Alert.js @@ -3,13 +3,13 @@ import PropTypes from 'prop-types'; import clsx from 'clsx'; import { withStyles, lighten, darken } from '@material-ui/core/styles'; import Paper from '@material-ui/core/Paper'; +import IconButton from '@material-ui/core/IconButton'; +import { capitalize } from '@material-ui/core/utils'; import SuccessOutlinedIcon from '../internal/svg-icons/SuccessOutlined'; import ReportProblemOutlinedIcon from '../internal/svg-icons/ReportProblemOutlined'; import ErrorOutlineIcon from '../internal/svg-icons/ErrorOutline'; import InfoOutlinedIcon from '../internal/svg-icons/InfoOutlined'; import CloseIcon from '../internal/svg-icons/Close'; -import IconButton from '@material-ui/core/IconButton'; -import { capitalize } from '@material-ui/core/utils'; export const styles = (theme) => { const getColor = theme.palette.type === 'light' ? darken : lighten; diff --git a/packages/material-ui-lab/src/Alert/Alert.test.js b/packages/material-ui-lab/src/Alert/Alert.test.js index c4de7927fd63bc..20f50ebc618414 100644 --- a/packages/material-ui-lab/src/Alert/Alert.test.js +++ b/packages/material-ui-lab/src/Alert/Alert.test.js @@ -2,8 +2,8 @@ import * as React from 'react'; import { getClasses } from '@material-ui/core/test-utils'; import createMount from 'test/utils/createMount'; import describeConformance from '@material-ui/core/test-utils/describeConformance'; -import Alert from './Alert'; import Paper from '@material-ui/core/Paper'; +import Alert from './Alert'; describe('', () => { const mount = createMount(); diff --git a/packages/material-ui-lab/src/Autocomplete/Autocomplete.js b/packages/material-ui-lab/src/Autocomplete/Autocomplete.js index 75787b43080430..7071a73d49aaf7 100644 --- a/packages/material-ui-lab/src/Autocomplete/Autocomplete.js +++ b/packages/material-ui-lab/src/Autocomplete/Autocomplete.js @@ -241,7 +241,7 @@ function DisablePortal(props) { } const Autocomplete = React.forwardRef(function Autocomplete(props, ref) { - /* eslint-disable no-unused-vars */ + /* eslint-disable @typescript-eslint/no-unused-vars */ const { autoComplete = false, autoHighlight = false, @@ -305,7 +305,7 @@ const Autocomplete = React.forwardRef(function Autocomplete(props, ref) { value: valueProp, ...other } = props; - /* eslint-enable no-unused-vars */ + /* eslint-enable @typescript-eslint/no-unused-vars */ const PopperComponent = disablePortal ? DisablePortal : PopperComponentProp; diff --git a/packages/material-ui-lab/src/Autocomplete/Autocomplete.test.js b/packages/material-ui-lab/src/Autocomplete/Autocomplete.test.js index af7e296af8cda1..cbd866c527c48e 100644 --- a/packages/material-ui-lab/src/Autocomplete/Autocomplete.test.js +++ b/packages/material-ui-lab/src/Autocomplete/Autocomplete.test.js @@ -5,10 +5,10 @@ import createMount from 'test/utils/createMount'; import describeConformance from '@material-ui/core/test-utils/describeConformance'; import { spy } from 'sinon'; import { act, createClientRender, fireEvent, screen } from 'test/utils/createClientRender'; -import { createFilterOptions } from '../useAutocomplete/useAutocomplete'; -import Autocomplete from './Autocomplete'; import TextField from '@material-ui/core/TextField'; import Chip from '@material-ui/core/Chip'; +import { createFilterOptions } from '../useAutocomplete/useAutocomplete'; +import Autocomplete from './Autocomplete'; describe('', () => { const mount = createMount(); diff --git a/packages/material-ui-lab/src/AvatarGroup/AvatarGroup.test.js b/packages/material-ui-lab/src/AvatarGroup/AvatarGroup.test.js index 94ce0c4dc63796..9c33fc4f38e1c5 100644 --- a/packages/material-ui-lab/src/AvatarGroup/AvatarGroup.test.js +++ b/packages/material-ui-lab/src/AvatarGroup/AvatarGroup.test.js @@ -4,8 +4,8 @@ import { getClasses } from '@material-ui/core/test-utils'; import createMount from 'test/utils/createMount'; import describeConformance from '@material-ui/core/test-utils/describeConformance'; import { createClientRender } from 'test/utils/createClientRender'; +import Avatar from '@material-ui/core/Avatar'; import AvatarGroup from './AvatarGroup'; -import { Avatar } from '@material-ui/core'; describe('', () => { const mount = createMount(); diff --git a/packages/material-ui-lab/src/LoadingButton/LoadingButton.test.js b/packages/material-ui-lab/src/LoadingButton/LoadingButton.test.js index 9833dc0c7e6acb..6a03c8b88d9e02 100644 --- a/packages/material-ui-lab/src/LoadingButton/LoadingButton.test.js +++ b/packages/material-ui-lab/src/LoadingButton/LoadingButton.test.js @@ -2,8 +2,8 @@ import * as React from 'react'; import { getClasses } from '@material-ui/core/test-utils'; import createMount from 'test/utils/createMount'; import describeConformance from '@material-ui/core/test-utils/describeConformance'; -import LoadingButton from './LoadingButton'; import Button from '@material-ui/core/Button'; +import LoadingButton from './LoadingButton'; describe('', () => { const mount = createMount(); diff --git a/packages/material-ui-lab/src/Pagination/Pagination.test.js b/packages/material-ui-lab/src/Pagination/Pagination.test.js index 4d182897a87763..76a1f61a98d98a 100644 --- a/packages/material-ui-lab/src/Pagination/Pagination.test.js +++ b/packages/material-ui-lab/src/Pagination/Pagination.test.js @@ -5,8 +5,8 @@ import { getClasses } from '@material-ui/core/test-utils'; import createMount from 'test/utils/createMount'; import describeConformance from '@material-ui/core/test-utils/describeConformance'; import { createClientRender } from 'test/utils/createClientRender'; -import Pagination from './Pagination'; import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles'; +import Pagination from './Pagination'; describe('', () => { let classes; diff --git a/packages/material-ui-lab/src/PaginationItem/PaginationItem.js b/packages/material-ui-lab/src/PaginationItem/PaginationItem.js index a47c2a5cbae4d1..710f51135d2696 100644 --- a/packages/material-ui-lab/src/PaginationItem/PaginationItem.js +++ b/packages/material-ui-lab/src/PaginationItem/PaginationItem.js @@ -3,11 +3,11 @@ import PropTypes from 'prop-types'; import clsx from 'clsx'; import { fade, useTheme, withStyles } from '@material-ui/core/styles'; import ButtonBase from '@material-ui/core/ButtonBase'; +import { capitalize } from '@material-ui/core/utils'; import FirstPageIcon from '../internal/svg-icons/FirstPage'; import LastPageIcon from '../internal/svg-icons/LastPage'; import NavigateBeforeIcon from '../internal/svg-icons/NavigateBefore'; import NavigateNextIcon from '../internal/svg-icons/NavigateNext'; -import { capitalize } from '@material-ui/core/utils'; export const styles = (theme) => ({ /* Styles applied to the root element. */ diff --git a/packages/material-ui-lab/src/SpeedDialAction/SpeedDialAction.test.js b/packages/material-ui-lab/src/SpeedDialAction/SpeedDialAction.test.js index b42d1bee015f3e..c4159f897f9775 100644 --- a/packages/material-ui-lab/src/SpeedDialAction/SpeedDialAction.test.js +++ b/packages/material-ui-lab/src/SpeedDialAction/SpeedDialAction.test.js @@ -7,8 +7,8 @@ import { createClientRender, fireEvent } from 'test/utils/createClientRender'; import Icon from '@material-ui/core/Icon'; import Tooltip from '@material-ui/core/Tooltip'; import Fab from '@material-ui/core/Fab'; -import SpeedDialAction from './SpeedDialAction'; import describeConformance from '@material-ui/core/test-utils/describeConformance'; +import SpeedDialAction from './SpeedDialAction'; describe('', () => { let clock; diff --git a/packages/material-ui-lab/src/SpeedDialIcon/SpeedDialIcon.test.js b/packages/material-ui-lab/src/SpeedDialIcon/SpeedDialIcon.test.js index 1284eaa284f0ca..94ef870eea6ea3 100644 --- a/packages/material-ui-lab/src/SpeedDialIcon/SpeedDialIcon.test.js +++ b/packages/material-ui-lab/src/SpeedDialIcon/SpeedDialIcon.test.js @@ -3,8 +3,8 @@ import { expect } from 'chai'; import { getClasses, findOutermostIntrinsic } from '@material-ui/core/test-utils'; import createMount from 'test/utils/createMount'; import Icon from '@material-ui/core/Icon'; -import SpeedDialIcon from './SpeedDialIcon'; import describeConformance from '@material-ui/core/test-utils/describeConformance'; +import SpeedDialIcon from './SpeedDialIcon'; describe('', () => { const mount = createMount(); diff --git a/packages/material-ui-lab/src/index.js b/packages/material-ui-lab/src/index.js index 3038c1de672a3e..87f12c79232a32 100644 --- a/packages/material-ui-lab/src/index.js +++ b/packages/material-ui-lab/src/index.js @@ -1,4 +1,3 @@ -/* eslint-disable import/export */ export { default as Alert } from './Alert'; export * from './Alert'; diff --git a/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.spec.ts b/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.spec.ts index 3608b57dea60c2..b731bc3dfcb518 100644 --- a/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.spec.ts +++ b/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.spec.ts @@ -1,3 +1,4 @@ +/* eslint-disable react-hooks/rules-of-hooks */ import { useAutocomplete, FilterOptionsState } from '@material-ui/lab'; import { expectType } from '@material-ui/types'; diff --git a/packages/material-ui-styles/src/defaultTheme/defaultTheme.spec.ts b/packages/material-ui-styles/src/defaultTheme/defaultTheme.spec.ts index adcb41a92d255c..7e0f50e026103e 100644 --- a/packages/material-ui-styles/src/defaultTheme/defaultTheme.spec.ts +++ b/packages/material-ui-styles/src/defaultTheme/defaultTheme.spec.ts @@ -9,6 +9,7 @@ declare module '@material-ui/styles' { } { + // eslint-disable-next-line react-hooks/rules-of-hooks const value = useTheme().myProperty; expectType(value); } diff --git a/packages/material-ui-styles/src/index.js b/packages/material-ui-styles/src/index.js index 55490730c6e870..c748a18b657d28 100644 --- a/packages/material-ui-styles/src/index.js +++ b/packages/material-ui-styles/src/index.js @@ -1,4 +1,3 @@ -/* eslint-disable import/export */ import { ponyfillGlobal } from '@material-ui/utils'; /* Warning if there are several instances of @material-ui/styles */ diff --git a/packages/material-ui-styles/src/makeStyles/makeStyles.spec.tsx b/packages/material-ui-styles/src/makeStyles/makeStyles.spec.tsx index 3e254c40713795..f31fd1a6ad0746 100644 --- a/packages/material-ui-styles/src/makeStyles/makeStyles.spec.tsx +++ b/packages/material-ui-styles/src/makeStyles/makeStyles.spec.tsx @@ -129,6 +129,7 @@ import { createStyles, makeStyles } from '@material-ui/styles'; }, })); + // eslint-disable-next-line react-hooks/rules-of-hooks const classes = useStyles(); // This doesn't fail, because inferrence is broken diff --git a/packages/material-ui-styles/src/makeStyles/makeStyles.test.js b/packages/material-ui-styles/src/makeStyles/makeStyles.test.js index cce608f6bd4c1f..0cad92100f8219 100644 --- a/packages/material-ui-styles/src/makeStyles/makeStyles.test.js +++ b/packages/material-ui-styles/src/makeStyles/makeStyles.test.js @@ -389,13 +389,13 @@ describe('makeStyles', () => { const StyledComponent = () => { // Simulate react-hot-loader behavior - /* eslint-disable react-hooks/rules-of-hooks */ if (hmr) { + // eslint-disable-next-line react-hooks/rules-of-hooks useStyles2(); } else { + // eslint-disable-next-line react-hooks/rules-of-hooks useStyles1(); } - /* eslint-enable react-hooks/rules-of-hooks */ return
; }; diff --git a/packages/material-ui-styles/src/useTheme/useTheme.js b/packages/material-ui-styles/src/useTheme/useTheme.js index 0f966fc439ad75..6f7c8fa0bfde32 100644 --- a/packages/material-ui-styles/src/useTheme/useTheme.js +++ b/packages/material-ui-styles/src/useTheme/useTheme.js @@ -5,6 +5,7 @@ export default function useTheme() { const theme = React.useContext(ThemeContext); if (process.env.NODE_ENV !== 'production') { + // eslint-disable-next-line react-hooks/rules-of-hooks React.useDebugValue(theme); } diff --git a/packages/material-ui-styles/test/styles.spec.tsx b/packages/material-ui-styles/test/styles.spec.tsx index f6b411c143a52e..3b1bf2b5d7446a 100644 --- a/packages/material-ui-styles/test/styles.spec.tsx +++ b/packages/material-ui-styles/test/styles.spec.tsx @@ -402,7 +402,7 @@ withStyles((theme) => } } -function forwardRefTest() { +function ForwardRefTest() { const styles = createStyles({ root: { color: 'red' }, }); @@ -452,6 +452,7 @@ function forwardRefTest() { }), })); + // eslint-disable-next-line react-hooks/rules-of-hooks const styles = useStyles({ foo: true }); expectType, typeof styles>(styles); } diff --git a/packages/material-ui/src/ButtonBase/ButtonBase.js b/packages/material-ui/src/ButtonBase/ButtonBase.js index a9f723fa91d793..52f43ad2ab9c77 100644 --- a/packages/material-ui/src/ButtonBase/ButtonBase.js +++ b/packages/material-ui/src/ButtonBase/ButtonBase.js @@ -289,6 +289,7 @@ const ButtonBase = React.forwardRef(function ButtonBase(props, ref) { const enableTouchRipple = mountedState && !disableRipple && !disabled; if (process.env.NODE_ENV !== 'production') { + // eslint-disable-next-line react-hooks/rules-of-hooks React.useEffect(() => { if (enableTouchRipple && !rippleRef.current) { console.error( diff --git a/packages/material-ui/src/FormControl/FormControl.js b/packages/material-ui/src/FormControl/FormControl.js index c327fe1b771ecf..638473c130ca92 100644 --- a/packages/material-ui/src/FormControl/FormControl.js +++ b/packages/material-ui/src/FormControl/FormControl.js @@ -119,8 +119,8 @@ const FormControl = React.forwardRef(function FormControl(props, ref) { return initialFilled; }); - const [_focused, setFocused] = React.useState(false); - const focused = visuallyFocused !== undefined ? visuallyFocused : _focused; + const [focusedState, setFocused] = React.useState(false); + const focused = visuallyFocused !== undefined ? visuallyFocused : focusedState; if (disabled && focused) { setFocused(false); diff --git a/packages/material-ui/src/OutlinedInput/OutlinedInput.test.js b/packages/material-ui/src/OutlinedInput/OutlinedInput.test.js index dae353bff0cdc8..f85fb34d38916f 100644 --- a/packages/material-ui/src/OutlinedInput/OutlinedInput.test.js +++ b/packages/material-ui/src/OutlinedInput/OutlinedInput.test.js @@ -2,8 +2,8 @@ import * as React from 'react'; import { expect } from 'chai'; import { getClasses } from '@material-ui/core/test-utils'; import createMount from 'test/utils/createMount'; -import describeConformance from '../test-utils/describeConformance'; import { createClientRender } from 'test/utils/createClientRender'; +import describeConformance from '../test-utils/describeConformance'; import OutlinedInput from './OutlinedInput'; import InputBase from '../InputBase'; diff --git a/packages/material-ui/src/Popover/Popover.js b/packages/material-ui/src/Popover/Popover.js index d123bd4f501506..115e67444d27f2 100644 --- a/packages/material-ui/src/Popover/Popover.js +++ b/packages/material-ui/src/Popover/Popover.js @@ -7,8 +7,8 @@ import { refType, HTMLElementType, } from '@material-ui/utils'; -import debounce from '../utils/debounce'; import clsx from 'clsx'; +import debounce from '../utils/debounce'; import ownerDocument from '../utils/ownerDocument'; import ownerWindow from '../utils/ownerWindow'; import createChainedFunction from '../utils/createChainedFunction'; diff --git a/packages/material-ui/src/RadioGroup/RadioGroup.test.js b/packages/material-ui/src/RadioGroup/RadioGroup.test.js index 915663e43a3144..28271305fdca99 100644 --- a/packages/material-ui/src/RadioGroup/RadioGroup.test.js +++ b/packages/material-ui/src/RadioGroup/RadioGroup.test.js @@ -4,8 +4,8 @@ import { spy } from 'sinon'; import * as PropTypes from 'prop-types'; import { findOutermostIntrinsic } from '@material-ui/core/test-utils'; import createMount from 'test/utils/createMount'; -import describeConformance from '../test-utils/describeConformance'; import { createClientRender } from 'test/utils/createClientRender'; +import describeConformance from '../test-utils/describeConformance'; import FormGroup from '../FormGroup'; import Radio from '../Radio'; import RadioGroup from './RadioGroup'; diff --git a/packages/material-ui/src/Select/Select.test.js b/packages/material-ui/src/Select/Select.test.js index 669dd7da941b7b..12b558c4352cb8 100644 --- a/packages/material-ui/src/Select/Select.test.js +++ b/packages/material-ui/src/Select/Select.test.js @@ -1,5 +1,6 @@ import * as React from 'react'; import { expect } from 'chai'; +import { spy, stub, useFakeTimers } from 'sinon'; import { getClasses } from '@material-ui/core/test-utils'; import createMount from 'test/utils/createMount'; import describeConformance from '@material-ui/core/test-utils/describeConformance'; @@ -9,7 +10,6 @@ import MenuItem from '../MenuItem'; import Input from '../Input'; import InputLabel from '../InputLabel'; import Select from './Select'; -import { spy, stub, useFakeTimers } from 'sinon'; describe('