Merge branch 'next' into feat/RootRef/remove

.eslintrc.js

@@ -38,8 +38,10 @@ module.exports = {
  'consistent-this': ['error', 'self'],
  // just as bad as "max components per file"
  'max-classes-per-file': 'off',
- 'no-alert': 'error', // Too much interruptive
- 'no-console': ['error', { allow: ['warn', 'error'] }], // Allow warn and error for production events
+ // Too interruptive
+ 'no-alert': 'error',
+ // Allow warn and error for dev environments
+ 'no-console': ['error', { allow: ['warn', 'error'] }],
  'no-param-reassign': 'off', // It's fine.
  'no-restricted-imports': [
  'error',
@@ -48,31 +50,60 @@ module.exports = {
  },
  ],
  'no-constant-condition': 'error',
- 'no-prototype-builtins': 'off', // Use the proptype inheritance chain
+ // Use the proptype inheritance chain
+ 'no-prototype-builtins': 'off',
  'no-underscore-dangle': 'error',
  'nonblock-statement-body-position': 'error',
  'prefer-arrow-callback': ['error', { allowNamedFunctions: true }],
- 'prefer-destructuring': 'off', // Destructuring harm grep potential.
- '@typescript-eslint/dot-notation': 'off', // TODO performance consideration
- '@typescript-eslint/no-implied-eval': 'off', // TODO performance consideration
- '@typescript-eslint/no-throw-literal': 'off', // TODO performance consideration
- 'import/named': 'off', // Not sure why it doesn't work
- '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
+ // Destructuring harm grep potential.
+ 'prefer-destructuring': 'off',
+
+ // TODO performance consideration
+ '@typescript-eslint/dot-notation': 'off',
+ // TODO performance consideration
+ '@typescript-eslint/no-implied-eval': 'off',
+ // TODO performance consideration
+ '@typescript-eslint/no-throw-literal': 'off',
+
+ // Not sure why it doesn't work
+ 'import/named': 'off',
+ // Missing yarn workspace support
+ 'import/no-extraneous-dependencies': 'off',
+
+ // doesn't work?
+ 'jsx-a11y/label-has-associated-control': [
+ 'error',
+ {
+ // airbnb uses 'both' which requires nesting i.e. <label><input /></label>
+ // 'either' allows `htmlFor`
+ assert: 'either',
+ },
+ ],
+ // We are a library, we need to support it too
+ 'jsx-a11y/no-autofocus': 'off',
+
  'material-ui/docgen-ignore-before-comment': 'error',
+ 'material-ui/rules-of-use-theme-variants': 'error',
+
  'react-hooks/exhaustive-deps': ['error', { additionalHooks: 'useEnhancedEffect' }],
  'react-hooks/rules-of-hooks': 'error',
- 'react/destructuring-assignment': 'off', // It's fine.
+ // 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',
  '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 <React.Fragment> 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.
+ // airbnb is using .jsx
+ 'react/jsx-filename-extension': ['error', { extensions: ['.js', '.tsx'] }],
+ // Prefer <React.Fragment> over <>.
+ 'react/jsx-fragments': ['error', 'element'],
+ // We are a UI library.
+ 'react/jsx-props-no-spreading': 'off',
+ // This rule is great for raising people awareness of what a key is and how it works.
+ 'react/no-array-index-key': 'off',
  'react/no-danger': 'error',
  'react/no-direct-mutation-state': 'error',
- 'react/require-default-props': 'off', // Not always relevant
+ // Not always relevant
+ 'react/require-default-props': 'off',
  'react/sort-prop-types': 'error',
  // This depends entirely on what you're doing. There's no universal pattern
  'react/state-in-constructor': 'off',
@@ -165,9 +196,10 @@ module.exports = {
  'no-restricted-imports': [
  'error',
  {
+ // Allow deeper imports for TypeScript types. TODO?
  patterns: ['@material-ui/*/*/*/*', '!@material-ui/utils/macros/*.macro'],
  },
- ], // Allow deeper imports for TypeScript types. TODO?
+ ],
  'react/prop-types': 'off',
  },
  },
@@ -179,14 +211,19 @@ module.exports = {
  'no-empty-pattern': 'off',
  'no-lone-blocks': 'off',
  'no-shadow': 'off',
+
  '@typescript-eslint/no-unused-expressions': 'off',
  '@typescript-eslint/no-unused-vars': 'off',
  '@typescript-eslint/no-use-before-define': 'off',
- 'import/export': 'off', // Not sure why it doesn't work
+
+ // Not sure why it doesn't work
+ 'import/export': 'off',
  'import/prefer-default-export': 'off',
+
  'jsx-a11y/anchor-has-content': 'off',
  'jsx-a11y/anchor-is-valid': 'off',
  'jsx-a11y/tabindex-no-positive': 'off',
+
  'react/default-props-match-prop-types': 'off',
  'react/no-access-state-in-setstate': 'off',
  'react/no-unused-prop-types': 'off',

CONTRIBUTING.md

@@ -201,10 +201,12 @@ Tests can be run with `yarn test`.
 
 ### Updating the component API documentation
 
-To update the component API documentation (auto-generated from component PropTypes comments), run:
+The component API in the component `propTypes` and under `docs/pages/api-docs` is auto-generated from the JSDOC in the TypeScript declarations.
+Be sure to update the documentation in the corresponding `.d.ts` files (e.g. `packages/material-ui/src/Button/Button.d.ts` for `<Button>`) and the run:
 
 ```sh
-yarn docs:api
+$ yarn proptypes
+$ yarn docs:api
 ```
 
 ### Coding style

docs/next.config.js

@@ -50,9 +50,6 @@ module.exports = {
  );
  }
 
- config.resolve.alias['react-dom$'] = 'react-dom/profiling';
- config.resolve.alias['scheduler/tracing'] = 'scheduler/tracing-profiling';
-
  // next includes node_modules in webpack externals. Some of those have dependencies
  // on the aliases defined above. If a module is an external those aliases won't be used.
  // We need tell webpack to not consider those packages as externals.
@@ -171,13 +168,13 @@ module.exports = {
  return map;
  },
  experimental: {
- async rewrites() {
- return [
- { source: `/:lang(${LANGUAGES.join('|')})?/:rest`, destination: '/:rest' },
- { source: '/api/:rest*', destination: '/api-docs/:rest*' },
- ];
- },
  reactMode: reactMode.startsWith('legacy') ? 'legacy' : reactMode,
  },
  reactStrictMode: reactMode === 'legacy-strict',
+ async rewrites() {
+ return [
+ { source: `/:lang(${LANGUAGES.join('|')})?/:rest*`, destination: '/:rest*' },
+ { source: '/api/:rest*', destination: '/api-docs/:rest*' },
+ ];
+ },
 };

docs/package.json

@@ -5,7 +5,7 @@
  "author": "Material-UI Team",
  "license": "MIT",
  "scripts": {
- "build": "cross-env NODE_ENV=production next build",
+ "build": "cross-env NODE_ENV=production next build --profile",
  "build:clean": "rimraf .next && yarn build",
  "build-sw": "node ./scripts/buildServiceWorker.js",
  "dev": "rimraf ./node_modules/.cache/babel-loader && next dev",
@@ -81,7 +81,7 @@
  "marked": "^1.0.0",
  "material-table": "^1.50.0",
  "material-ui-popup-state": "^1.4.1",
- "next": "^9.4.4",
+ "next": "^9.5.0",
  "notistack": "^0.9.3",
  "nprogress": "^0.2.0",
  "postcss": "^7.0.18",
@@ -118,6 +118,7 @@
  "@babel/preset-typescript": "^7.7.4",
  "babel-plugin-unwrap-createstyles": "^4.1.0",
  "cpy-cli": "^3.0.0",
+ "cross-fetch": "^3.0.5",
  "gm": "^1.23.0"
  }
 }

docs/src/pages/components/autocomplete/UseAutocomplete.js

@@ -51,6 +51,7 @@ export default function UseAutocomplete() {
  return (
  <div>
  <div {...getRootProps()}>
+ {/* eslint-disable-next-line jsx-a11y/label-has-associated-control -- props getter set htmlFor */}
  <label className={classes.label} {...getInputLabelProps()}>
  useAutocomplete
  </label>

docs/src/pages/components/autocomplete/UseAutocomplete.tsx

@@ -53,6 +53,7 @@ export default function UseAutocomplete() {
  return (
  <div>
  <div {...getRootProps()}>
+ {/* eslint-disable-next-line jsx-a11y/label-has-associated-control -- props getter set htmlFor */}
  <label className={classes.label} {...getInputLabelProps()}>
  useAutocomplete
  </label>

docs/src/pages/components/tree-view/ControlledTreeView.js

@@ -55,6 +55,7 @@ export default function ControlledTreeView() {
  </Button>
  </div>
  <TreeView
+ aria-label="controlled"
  defaultCollapseIcon={<ExpandMoreIcon />}
  defaultExpandIcon={<ChevronRightIcon />}
  expanded={expanded}

docs/src/pages/components/tree-view/ControlledTreeView.tsx

@@ -57,6 +57,7 @@ export default function ControlledTreeView() {
  </Button>
  </div>
  <TreeView
+ aria-label="controlled"
  defaultCollapseIcon={<ExpandMoreIcon />}
  defaultExpandIcon={<ChevronRightIcon />}
  expanded={expanded}

docs/src/pages/components/tree-view/CustomizedTreeView.js

@@ -93,6 +93,7 @@ export default function CustomizedTreeView() {
 
  return (
  <TreeView
+ aria-label="customized"
  className={classes.root}
  defaultExpanded={['1']}
  defaultCollapseIcon={<MinusSquare />}

docs/src/pages/components/tree-view/CustomizedTreeView.tsx

@@ -96,6 +96,7 @@ export default function CustomizedTreeView() {
 
  return (
  <TreeView
+ aria-label="customized"
  className={classes.root}
  defaultExpanded={['1']}
  defaultCollapseIcon={<MinusSquare />}

docs/src/pages/components/tree-view/FileSystemNavigator.js

@@ -18,6 +18,7 @@ export default function FileSystemNavigator() {
 
  return (
  <TreeView
+ aria-label="file system navigator"
  className={classes.root}
  defaultCollapseIcon={<ExpandMoreIcon />}
  defaultExpandIcon={<ChevronRightIcon />}

docs/src/pages/components/tree-view/FileSystemNavigator.tsx

@@ -18,6 +18,7 @@ export default function FileSystemNavigator() {
 
  return (
  <TreeView
+ aria-label="file system navigator"
  className={classes.root}
  defaultCollapseIcon={<ExpandMoreIcon />}
  defaultExpandIcon={<ChevronRightIcon />}

docs/src/pages/components/tree-view/GmailTreeView.js

@@ -125,6 +125,7 @@ export default function GmailTreeView() {
 
  return (
  <TreeView
+ aria-label="gmail"
  className={classes.root}
  defaultExpanded={['3']}
  defaultCollapseIcon={<ArrowDropDownIcon />}

docs/src/pages/components/tree-view/GmailTreeView.tsx

@@ -136,6 +136,7 @@ export default function GmailTreeView() {
 
  return (
  <TreeView
+ aria-label="gmail"
  className={classes.root}
  defaultExpanded={['3']}
  defaultCollapseIcon={<ArrowDropDownIcon />}

docs/src/pages/components/tree-view/MultiSelectTreeView.js

@@ -18,6 +18,7 @@ export default function MultiSelectTreeView() {
 
  return (
  <TreeView
+ aria-label="multi-select"
  className={classes.root}
  defaultCollapseIcon={<ExpandMoreIcon />}
  defaultExpandIcon={<ChevronRightIcon />}

docs/src/pages/components/tree-view/MultiSelectTreeView.tsx

@@ -18,6 +18,7 @@ export default function MultiSelectTreeView() {
 
  return (
  <TreeView
+ aria-label="multi-select"
  className={classes.root}
  defaultCollapseIcon={<ExpandMoreIcon />}
  defaultExpandIcon={<ChevronRightIcon />}

docs/src/pages/components/tree-view/RecursiveTreeView.js → docs/src/pages/components/tree-view/RichObjectTreeView.js

@@ -34,7 +34,7 @@ const useStyles = makeStyles({
  },
 });
 
-export default function RecursiveTreeView() {
+export default function RichObjectTreeView() {
  const classes = useStyles();
 
  const renderTree = (nodes) => (
@@ -47,6 +47,7 @@ export default function RecursiveTreeView() {
 
  return (
  <TreeView
+ aria-label="rich object"
  className={classes.root}
  defaultCollapseIcon={<ExpandMoreIcon />}
  defaultExpanded={['root']}

docs/src/pages/components/tree-view/RecursiveTreeView.tsx → docs/src/pages/components/tree-view/RichObjectTreeView.tsx

@@ -40,7 +40,7 @@ const useStyles = makeStyles({
  },
 });
 
-export default function RecursiveTreeView() {
+export default function RichObjectTreeView() {
  const classes = useStyles();
 
  const renderTree = (nodes: RenderTree) => (
@@ -53,6 +53,7 @@ export default function RecursiveTreeView() {
 
  return (
  <TreeView
+ aria-label="rich object"
  className={classes.root}
  defaultCollapseIcon={<ExpandMoreIcon />}
  defaultExpanded={['root']}

docs/src/pages/components/tree-view/tree-view.md

@@ -45,7 +45,7 @@ const data = {
 };
 ```
 
-{{"demo": "pages/components/tree-view/RecursiveTreeView.js", "defaultCodeOpen": false}}
+{{"demo": "pages/components/tree-view/RichObjectTreeView.js", "defaultCodeOpen": false}}
 
 ## Customized tree view
 
@@ -62,3 +62,5 @@ const data = {
 (WAI-ARIA: https://www.w3.org/TR/wai-aria-practices/#TreeView)
 
 The component follows the WAI-ARIA authoring practices.
+
+To have an accessible tree view you must use `aria-labelledby` or `aria-label` to reference or provide a label on the TreeView, otherwise screen readers will announce it as "tree", making it hard to understand the context of a specific tree item.

docs/tsconfig.json

@@ -11,5 +11,6 @@
  "skipLibCheck": false,
  "esModuleInterop": true,
  "types": ["react"]
- }
+ },
+ "exclude": ["node_modules"]
 }

package.json

@@ -166,6 +166,7 @@
  "**/@babel/preset-typescript": "^7.10.4",
  "**/@babel/runtime": "^7.10.2",
  "**/@babel/types": "^7.10.2",
+ "**/cross-fetch": "^3.0.5",
  "**/hoist-non-react-statics": "^3.3.2",
  "**/terser": "^4.1.2"
  },

packages/eslint-plugin-material-ui/README.md

@@ -40,3 +40,8 @@ Removed in favor of [`no-restricted-imports`](https://eslint.org/docs/rules/no-r
  }
 }
 ```
+
+### rules-of-use-theme-variants
+
+Ensures correct usage of `useThemeVariants` so that all props are passed as well
+as their resolved default values.

packages/eslint-plugin-material-ui/src/index.js

@@ -3,4 +3,5 @@ module.exports.rules = {
  'disallow-active-element-as-key-event-target': require('./rules/disallow-active-element-as-key-event-target'),
  'docgen-ignore-before-comment': require('./rules/docgen-ignore-before-comment'),
  'no-hardcoded-labels': require('./rules/no-hardcoded-labels'),
+ 'rules-of-use-theme-variants': require('./rules/rules-of-use-theme-variants'),
 };