Merge branch 'master' into feat/autocomplete-filterMax-prop

.dependabot/config.yml

@@ -30,9 +30,6 @@ update_configs:
       - match:
           # These should be grouped once a PR for `jss` is opened
           dependency_name: 'jss-*'
-      - match:
-          # 1.18 started adding trailing commas only compatible with typescript ^3.4
-          dependency_name: 'prettier'
       - match:
           # 2.0 started using ES modules instead of CommonJS modules
           dependency_name: 'raw-loader'

.eslintrc.js

@@ -17,7 +17,7 @@ module.exports = {
     ecmaVersion: 7,
     sourceType: 'module',
   },
-  plugins: ['babel', 'mocha', 'material-ui', 'react-hooks'],
+  plugins: ['babel', 'material-ui', 'react-hooks'],
   settings: {
     'import/resolver': {
       webpack: {
@@ -111,23 +111,25 @@ module.exports = {
       env: {
         mocha: true,
       },
+      extends: ['plugin:mocha/recommended'],
       rules: {
         // does not work with wildcard imports. Mistakes will throw at runtime anyway
-        'import/named': false,
+        'import/named': 'off',
         // for expect style assertions
         'no-unused-expressions': 'off',
 
-        'mocha/handle-done-callback': 'error',
-        'mocha/no-exclusive-tests': 'error',
-        'mocha/no-global-tests': 'error',
-        'mocha/no-identical-title': 'error',
-        'mocha/no-nested-tests': 'error',
-        'mocha/no-pending-tests': 'error',
-        'mocha/no-return-and-callback': 'error',
-        'mocha/no-sibling-hooks': 'error',
-        'mocha/no-skipped-tests': 'error',
-        'mocha/no-top-level-hooks': 'error',
-        'mocha/valid-suite-description': 'error',
+        // no rationale provided in /recommended
+        'mocha/no-mocha-arrows': 'off',
+        // definitely a useful rule but too many false positives
+        // due to `describeConformance`
+        // "If you're using dynamically generated tests, you should disable this rule.""
+        'mocha/no-setup-in-describe': 'off',
+        // `beforeEach` for a single case is optimized for change
+        // when we add a test we don't have to refactor the existing
+        // test to `beforeEach`.
+        // `beforeEach`+`afterEach` also means that the `beforeEach`
+        // is cleaned up in `afterEach` if the test causes a crash
+        'mocha/no-hooks-for-single-case': 'off'
       },
     },
     {

dangerfile.js

@@ -43,7 +43,7 @@ async function cleanup() {
  * @param {number} gzipThreshold
  */
 function createComparisonFilter(parsedThreshold, gzipThreshold) {
-  return comparisonEntry => {
+  return (comparisonEntry) => {
     const [, snapshot] = comparisonEntry;
     return (
       Math.abs(snapshot.parsed.absoluteDiff) >= parsedThreshold ||
@@ -97,8 +97,8 @@ function formatDiff(absoluteChange, relativeChange) {
  * @returns {string}
  */
 function generateMDTable(headers, body) {
-  const headerRow = headers.map(header => header.label);
-  const alignmentRow = headers.map(header => {
+  const headerRow = headers.map((header) => header.label);
+  const alignmentRow = headers.map((header) => {
     if (header.align === 'right') {
       return ' ---:';
     }
@@ -108,7 +108,7 @@ function generateMDTable(headers, body) {
     return ' --- ';
   });
 
-  return [headerRow, alignmentRow, ...body].map(row => row.join(' | ')).join('\n');
+  return [headerRow, alignmentRow, ...body].map((row) => row.join(' | ')).join('\n');
 }
 
 function generateEmphasizedChange([bundle, { parsed, gzip }]) {
@@ -174,7 +174,7 @@ function sieveResults(results) {
   const main = [];
   const pages = [];
 
-  results.forEach(entry => {
+  results.forEach((entry) => {
     const [bundleId] = entry;
 
     if (bundleId.startsWith('docs:')) {
@@ -221,7 +221,7 @@ async function run() {
     }
 
     const mainDetailsTable = createComparisonTable(mainResults, {
-      computeBundleLabel: bundleId => {
+      computeBundleLabel: (bundleId) => {
         if (bundleId === 'packages/material-ui/build/umd/material-ui.production.min.js') {
           return '@material-ui/core[umd]';
         }
@@ -238,7 +238,7 @@ async function run() {
       },
     });
     const pageDetailsTable = createComparisonTable(pageResults, {
-      computeBundleLabel: bundleId => {
+      computeBundleLabel: (bundleId) => {
         // a page
         if (bundleId.startsWith('docs:/')) {
           const host = `https://deploy-preview-${danger.github.pr.number}--material-ui.netlify.com`;

docs/next.config.js

@@ -142,7 +142,7 @@ module.exports = {
     function traverse(pages2, userLanguage) {
       const prefix = userLanguage === 'en' ? '' : `/${userLanguage}`;
 
-      pages2.forEach(page => {
+      pages2.forEach((page) => {
         if (!page.children) {
           map[`${prefix}${page.pathname.replace(/^\/api-docs\/(.*)/, '/api/$1')}`] = {
             page: page.pathname,
@@ -165,7 +165,7 @@ module.exports = {
     } else {
       // eslint-disable-next-line no-console
       console.log('Considering various locales for SSR');
-      LANGUAGES_SSR.forEach(userLanguage => {
+      LANGUAGES_SSR.forEach((userLanguage) => {
         traverse(pages, userLanguage);
       });
     }

docs/package.json

@@ -72,7 +72,7 @@
     "fg-loadcss": "^2.0.1",
     "final-form": "^4.18.5",
     "flexsearch": "^0.6.30",
-    "fs-extra": "^8.1.0",
+    "fs-extra": "^9.0.0",
     "json2mq": "^0.2.0",
     "jss": "^10.0.3",
     "jss-plugin-template": "^10.0.3",

docs/pages/_app.js

@@ -49,7 +49,7 @@ function loadCrowdin() {
 function LanguageNegotiation() {
   const dispatch = useDispatch();
   const router = useRouter();
-  const userLanguage = useSelector(state => state.options.userLanguage);
+  const userLanguage = useSelector((state) => state.options.userLanguage);
 
   React.useEffect(() => {
     if (userLanguage === 'aa') {
@@ -127,9 +127,9 @@ function usePersistCodeVariant(initialCodeVariant = CODE_VARIANTS.JS, codeVarian
 
 function PersistState() {
   const dispatch = useDispatch();
-  const options = useSelector(state => state.options);
+  const options = useSelector((state) => state.options);
 
-  const codeVariant = usePersistCodeVariant(options.codeVariant, nextCodeVariant =>
+  const codeVariant = usePersistCodeVariant(options.codeVariant, (nextCodeVariant) =>
     dispatch({ type: ACTION_TYPES.OPTIONS_CHANGE, payload: { codeVariant: nextCodeVariant } }),
   );
 
@@ -164,7 +164,7 @@ function forcePageReload(registration) {
   }
 
   function listenInstalledStateChange() {
-    registration.installing.addEventListener('statechange', event => {
+    registration.installing.addEventListener('statechange', (event) => {
       // console.log('statechange', event.target.state);
       if (event.target.state === 'installed' && registration.waiting) {
         // A new service worker is available, inform the user
@@ -244,7 +244,7 @@ Tip: you can access the documentation \`theme\` object directly in the console.
 }
 
 function findActivePage(currentPages, pathname) {
-  const activePage = find(currentPages, page => {
+  const activePage = find(currentPages, (page) => {
     if (page.children) {
       if (pathname.indexOf(`${page.pathname}/`) === 0) {
         // Check if one of the children matches (for /components)
@@ -305,7 +305,7 @@ function AppWrapper(props) {
   return (
     <ReactMode>
       <NextHead>
-        {fonts.map(font => (
+        {fonts.map((font) => (
           <link rel="stylesheet" href={font} key={font} />
         ))}
       </NextHead>

docs/pages/_document.js

@@ -57,7 +57,7 @@ export default class MyDocument extends Document {
             href={`https://material-ui.com${rewriteUrlForNextExport(canonical)}`}
             hrefLang="x-default"
           />
-          {LANGUAGES_SSR.map(userLanguage2 => (
+          {LANGUAGES_SSR.map((userLanguage2) => (
             <link
               key={userLanguage2}
               rel="alternate"
@@ -97,7 +97,7 @@ export default class MyDocument extends Document {
   }
 }
 
-MyDocument.getInitialProps = async ctx => {
+MyDocument.getInitialProps = async (ctx) => {
   // Resolution order
   //
   // On the server:
@@ -121,7 +121,7 @@ MyDocument.getInitialProps = async ctx => {
 
   ctx.renderPage = () =>
     originalRenderPage({
-      enhanceApp: App => props => sheets.collect(<App {...props} />),
+      enhanceApp: (App) => (props) => sheets.collect(<App {...props} />),
     });
 
   const initialProps = await Document.getInitialProps(ctx);

docs/pages/api-docs/autocomplete.md

@@ -47,7 +47,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi
 | <span class="prop-name">forcePopupIcon</span> | <span class="prop-type">'auto'<br>&#124;&nbsp;bool</span> | <span class="prop-default">'auto'</span> | Force the visibility display of the popup icon. |
 | <span class="prop-name">freeSolo</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, the Autocomplete is free solo, meaning that the user input is not bound to provided options. |
 | <span class="prop-name">getOptionDisabled</span> | <span class="prop-type">func</span> |  | Used to determine the disabled state for a given option. |
-| <span class="prop-name">getOptionLabel</span> | <span class="prop-type">func</span> | <span class="prop-default">x => x</span> | Used to determine the string value for a given option. It's used to fill the input (and the list box options if `renderOption` is not provided). |
+| <span class="prop-name">getOptionLabel</span> | <span class="prop-type">func</span> | <span class="prop-default">(x) => x</span> | Used to determine the string value for a given option. It's used to fill the input (and the list box options if `renderOption` is not provided). |
 | <span class="prop-name">getOptionSelected</span> | <span class="prop-type">func</span> |  | Used to determine if an option is selected. Uses strict equality by default. |
 | <span class="prop-name">groupBy</span> | <span class="prop-type">func</span> |  | If provided, the options will be grouped under the returned string. The groupBy value is also used as the text for group headings when `renderGroup` is not provided.<br><br>**Signature:**<br>`function(options: T) => string`<br>*options:* The option to group. |
 | <span class="prop-name">id</span> | <span class="prop-type">string</span> |  | This prop is used to help implement the accessibility logic. If you don't provide this prop. It falls back to a randomly generated id. |

docs/pages/api-docs/pagination.md

@@ -35,7 +35,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi
 | <span class="prop-name">hidePrevButton</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, hide the previous-page button. |
 | <span class="prop-name">onChange</span> | <span class="prop-type">func</span> |  | Callback fired when the page is changed.<br><br>**Signature:**<br>`function(event: object, page: number) => void`<br>*event:* The event source of the callback.<br>*page:* The page selected. |
 | <span class="prop-name">page</span> | <span class="prop-type">number</span> |  | The current page. |
-| <span class="prop-name">renderItem</span> | <span class="prop-type">func</span> | <span class="prop-default">item => &lt;PaginationItem {...item} /></span> | Render the item.<br><br>**Signature:**<br>`function(params: object) => ReactNode`<br>*params:* The props to spread on a PaginationItem. |
+| <span class="prop-name">renderItem</span> | <span class="prop-type">func</span> | <span class="prop-default">(item) => &lt;PaginationItem {...item} /></span> | Render the item.<br><br>**Signature:**<br>`function(params: object) => ReactNode`<br>*params:* The props to spread on a PaginationItem. |
 | <span class="prop-name">shape</span> | <span class="prop-type">'round'<br>&#124;&nbsp;'rounded'</span> | <span class="prop-default">'round'</span> | The shape of the pagination items. |
 | <span class="prop-name">showFirstButton</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, show the first-page button. |
 | <span class="prop-name">showLastButton</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, show the last-page button. |

docs/pages/api-docs/slider.md

@@ -41,14 +41,14 @@ You can learn more about the difference by [reading this guide](/guides/minimizi
 | <span class="prop-name">onChange</span> | <span class="prop-type">func</span> |  | Callback function that is fired when the slider's value changed.<br><br>**Signature:**<br>`function(event: object, value: number \| number[]) => void`<br>*event:* The event source of the callback.<br>*value:* The new value. |
 | <span class="prop-name">onChangeCommitted</span> | <span class="prop-type">func</span> |  | Callback function that is fired when the `mouseup` is triggered.<br><br>**Signature:**<br>`function(event: object, value: number \| number[]) => void`<br>*event:* The event source of the callback.<br>*value:* The new value. |
 | <span class="prop-name">orientation</span> | <span class="prop-type">'horizontal'<br>&#124;&nbsp;'vertical'</span> | <span class="prop-default">'horizontal'</span> | The slider orientation. |
-| <span class="prop-name">scale</span> | <span class="prop-type">func</span> | <span class="prop-default">x => x</span> | A transformation function, to change the scale of the slider. |
+| <span class="prop-name">scale</span> | <span class="prop-type">func</span> | <span class="prop-default">(x) => x</span> | A transformation function, to change the scale of the slider. |
 | <span class="prop-name">step</span> | <span class="prop-type">number</span> | <span class="prop-default">1</span> | The granularity with which the slider can step through values. (A "discrete" slider.) The `min` prop serves as the origin for the valid values. We recommend (max - min) to be evenly divisible by the step.<br>When step is `null`, the thumb can only be slid onto marks provided with the `marks` prop. |
 | <span class="prop-name">ThumbComponent</span> | <span class="prop-type">elementType</span> | <span class="prop-default">'span'</span> | The component used to display the value label. |
 | <span class="prop-name">track</span> | <span class="prop-type">'normal'<br>&#124;&nbsp;false<br>&#124;&nbsp;'inverted'</span> | <span class="prop-default">'normal'</span> | The track presentation:<br>- `normal` the track will render a bar representing the slider value. - `inverted` the track will render a bar representing the remaining slider value. - `false` the track will render without a bar. |
 | <span class="prop-name">value</span> | <span class="prop-type">number<br>&#124;&nbsp;Array&lt;number&gt;</span> |  | The value of the slider. For ranged sliders, provide an array with two values. |
 | <span class="prop-name">ValueLabelComponent</span> | <span class="prop-type">elementType</span> | <span class="prop-default">ValueLabel</span> | The value label component. |
 | <span class="prop-name">valueLabelDisplay</span> | <span class="prop-type">'on'<br>&#124;&nbsp;'auto'<br>&#124;&nbsp;'off'</span> | <span class="prop-default">'off'</span> | Controls when the value label is displayed:<br>- `auto` the value label will display when the thumb is hovered or focused. - `on` will display persistently. - `off` will never display. |
-| <span class="prop-name">valueLabelFormat</span> | <span class="prop-type">string<br>&#124;&nbsp;func</span> | <span class="prop-default">x => x</span> | The format function the value label's value.<br>When a function is provided, it should have the following signature:<br>- {number} value The value label's value to format - {number} index The value label's index to format |
+| <span class="prop-name">valueLabelFormat</span> | <span class="prop-type">string<br>&#124;&nbsp;func</span> | <span class="prop-default">(x) => x</span> | The format function the value label's value.<br>When a function is provided, it should have the following signature:<br>- {number} value The value label's value to format - {number} index The value label's index to format |
 
 The `ref` is forwarded to the root element.
 

docs/pages/components/material-icons.js

@@ -1,20 +1,14 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import Markdown from 'docs/src/pages/components/material-icons/material-icons.md';
-import SearchIcons from 'docs/src/pages/components/material-icons/SearchIcons';
 
-const req = name => {
-  const map = {
-    'material-icons.md': Markdown,
-    'SearchIcons.js': {
-      default: SearchIcons,
-    },
-  };
-  return map[name];
-};
-req.keys = () => ['material-icons.md', 'SearchIcons.js'];
+const req = require.context('docs/src/pages/components/material-icons', false, /\.(md|js|tsx)$/);
+const reqSource = require.context(
+  '!raw-loader!../../src/pages/components/material-icons',
+  false,
+  /\.(js|tsx)$/,
+);
 const reqPrefix = 'pages/components/material-icons';
 
 export default function Page() {
-  return <MarkdownDocs disableToc req={req} reqSource={() => {}} reqPrefix={reqPrefix} />;
+  return <MarkdownDocs req={req} reqSource={reqSource} reqPrefix={reqPrefix} />;
 }

docs/pages/index.js

@@ -31,7 +31,7 @@ function loadDependencies() {
 }
 
 const useStyles = makeStyles(
-  theme => ({
+  (theme) => ({
     root: {
       flex: '1 0 100%',
     },
@@ -109,7 +109,7 @@ export default function LandingPage() {
 
     loadDependencies();
   }, []);
-  const t = useSelector(state => state.options.t);
+  const t = useSelector((state) => state.options.t);
   const classes = useStyles();
 
   return (

docs/pages/performance/table-component.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import NoSsr from '@material-ui/core/NoSsr';
 
-const createComponent = defaultComponent => {
+const createComponent = (defaultComponent) => {
   const MyComponent = React.forwardRef(function MyComponent(props, ref) {
     const { component: Component = defaultComponent, ...other } = props;
 

docs/pages/performance/table-emotion.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
 import NoSsr from '@material-ui/core/NoSsr';
 
-const createComponent = defaultComponent => {
+const createComponent = (defaultComponent) => {
   const MyComponent = React.forwardRef(function MyComponent(props, ref) {
     const { component: Component = defaultComponent, ...other } = props;
 

docs/pages/performance/table-hook.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { makeStyles } from '@material-ui/styles';
 import NoSsr from '@material-ui/core/NoSsr';
 
-const createComponent = defaultComponent => {
+const createComponent = (defaultComponent) => {
   const useStyles = makeStyles({
     root: {
       background: 'pink',

docs/pages/performance/table-styled-components.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import NoSsr from '@material-ui/core/NoSsr';
 
-const createComponent = defaultComponent => {
+const createComponent = (defaultComponent) => {
   const MyComponent = React.forwardRef(function MyComponent(props, ref) {
     const { component: Component = defaultComponent, ...other } = props;
 

docs/pages/versions.js

@@ -28,9 +28,9 @@ Page.getInitialProps = async () => {
   const FILTERED_BRANCHES = ['latest', 'staging', 'l10n', 'next'];
 
   const branches = await getBranches();
-  let versions = branches.map(n => n.name);
-  versions = versions.filter(value => FILTERED_BRANCHES.indexOf(value) === -1);
-  versions = versions.map(version => ({
+  let versions = branches.map((n) => n.name);
+  versions = versions.filter((value) => FILTERED_BRANCHES.indexOf(value) === -1);
+  versions = versions.map((version) => ({
     version,
     // Replace dot with dashes for Netlify branch subdomains
     url: `https://${version.replace(/\./g, '-')}.material-ui.com`,