Merge branch 'next' into switchBase-onChange

docs/pages/_app.js

@@ -21,9 +21,7 @@ import { ThemeProvider } from 'docs/src/modules/components/ThemeContext';
 import { pathnameToLanguage, getCookie } from 'docs/src/modules/utils/helpers';
 import { ACTION_TYPES, CODE_VARIANTS, LANGUAGES } from 'docs/src/modules/constants';
 import { useUserLanguage } from 'docs/src/modules/utils/i18n';
-import DocsStyledEngineProvider, { cacheLtr } from 'docs/src/modules/utils/StyledEngineProvider';
-
-export { cacheLtr };
+import DocsStyledEngineProvider from 'docs/src/modules/utils/StyledEngineProvider';
 
 // Configure JSS
 const jss = create({

docs/pages/_document.js

@@ -2,13 +2,19 @@ import * as React from 'react';
 import { ServerStyleSheets } from '@material-ui/styles';
 import { ServerStyleSheet } from 'styled-components';
 import createEmotionServer from '@emotion/server/create-instance';
+import { CacheProvider } from '@emotion/react';
 import Document, { Html, Head, Main, NextScript } from 'next/document';
 import { LANGUAGES_SSR } from 'docs/src/modules/constants';
 import { pathnameToLanguage } from 'docs/src/modules/utils/helpers';
 import { themeColor } from 'docs/src/modules/components/ThemeContext';
-import { cacheLtr } from 'docs/pages/_app';
+import createCache from '@emotion/cache';
 
-const { extractCritical } = createEmotionServer(cacheLtr);
+const getCache = () => {
+  const cache = createCache({ key: 'css', prepend: true });
+  cache.compat = true;
+
+  return cache;
+};
 
 // You can find a benchmark of the available CSS minifiers under
 // https://github.com/GoalSmashers/css-minification-benchmark
@@ -122,11 +128,20 @@ MyDocument.getInitialProps = async (ctx) => {
   const styledComponentsSheet = new ServerStyleSheet();
   const originalRenderPage = ctx.renderPage;
 
+  const cache = getCache();
+  const { extractCritical } = createEmotionServer(cache);
+
   try {
     ctx.renderPage = () =>
       originalRenderPage({
         enhanceApp: (App) => (props) =>
           styledComponentsSheet.collectStyles(materialSheets.collect(<App {...props} />)),
+        // Take precedence over the CacheProvider in our custom _app.js
+        enhanceComponent: (Component) => (props) => (
+          <CacheProvider value={cache}>
+            <Component {...props} />
+          </CacheProvider>
+        ),
       });
 
     const initialProps = await Document.getInitialProps(ctx);

docs/pages/api-docs/icon-button.json

@@ -4,8 +4,8 @@
     "classes": { "type": { "name": "object" } },
     "color": {
       "type": {
-        "name": "enum",
-        "description": "'default'<br>&#124;&nbsp;'inherit'<br>&#124;&nbsp;'primary'<br>&#124;&nbsp;'secondary'"
+        "name": "union",
+        "description": "'inherit'<br>&#124;&nbsp;'primary'<br>&#124;&nbsp;'secondary'<br>&#124;&nbsp;string"
       },
       "default": "'default'"
     },
@@ -20,7 +20,10 @@
       "default": "false"
     },
     "size": {
-      "type": { "name": "enum", "description": "'medium'<br>&#124;&nbsp;'small'" },
+      "type": {
+        "name": "union",
+        "description": "'medium'<br>&#124;&nbsp;'small'<br>&#124;&nbsp;string"
+      },
       "default": "'medium'"
     },
     "sx": { "type": { "name": "object" } }

docs/pages/api-docs/input-adornment.json

@@ -1,11 +1,14 @@
 {
   "props": {
+    "position": {
+      "type": { "name": "enum", "description": "'end'<br>&#124;&nbsp;'start'" },
+      "required": true
+    },
     "children": { "type": { "name": "node" } },
     "classes": { "type": { "name": "object" } },
     "component": { "type": { "name": "elementType" } },
     "disablePointerEvents": { "type": { "name": "bool" } },
     "disableTypography": { "type": { "name": "bool" } },
-    "position": { "type": { "name": "enum", "description": "'end'<br>&#124;&nbsp;'start'" } },
     "sx": { "type": { "name": "object" } },
     "variant": {
       "type": {

docs/pages/api-docs/loading-button.json

@@ -3,12 +3,12 @@
     "children": { "type": { "name": "node" } },
     "classes": { "type": { "name": "object" } },
     "disabled": { "type": { "name": "bool" } },
-    "pending": { "type": { "name": "bool" } },
-    "pendingIndicator": {
+    "loading": { "type": { "name": "bool" } },
+    "loadingIndicator": {
       "type": { "name": "node" },
       "default": "<CircularProgress color=\"inherit\" size={16} />"
     },
-    "pendingPosition": {
+    "loadingPosition": {
       "type": {
         "name": "custom",
         "description": "'start'<br>&#124;&nbsp;'end'<br>&#124;&nbsp;'center'"
@@ -20,14 +20,14 @@
   "styles": {
     "classes": [
       "root",
-      "pending",
-      "pendingIndicator",
-      "pendingIndicatorCenter",
-      "pendingIndicatorStart",
-      "pendingIndicatorEnd",
-      "endIconPendingEnd",
-      "startIconPendingStart",
-      "labelPendingCenter"
+      "loading",
+      "loadingIndicator",
+      "loadingIndicatorCenter",
+      "loadingIndicatorStart",
+      "loadingIndicatorEnd",
+      "endIconLoadingEnd",
+      "startIconLoadingStart",
+      "labelLoadingCenter"
     ],
     "globalClasses": {},
     "name": "MuiLoadingButton"

docs/pages/api-docs/rating.json

@@ -23,8 +23,8 @@
     "readOnly": { "type": { "name": "bool" } },
     "size": {
       "type": {
-        "name": "enum",
-        "description": "'large'<br>&#124;&nbsp;'medium'<br>&#124;&nbsp;'small'"
+        "name": "union",
+        "description": "'large'<br>&#124;&nbsp;'medium'<br>&#124;&nbsp;'small'<br>&#124;&nbsp;string"
       },
       "default": "'medium'"
     },

docs/pages/api-docs/table-pagination.json

@@ -28,7 +28,8 @@
     },
     "SelectProps": { "type": { "name": "object" }, "default": "{}" },
     "showFirstButton": { "type": { "name": "bool" } },
-    "showLastButton": { "type": { "name": "bool" } }
+    "showLastButton": { "type": { "name": "bool" } },
+    "sx": { "type": { "name": "object" } }
   },
   "name": "TablePagination",
   "styles": {
@@ -53,6 +54,6 @@
   "filename": "/packages/material-ui/src/TablePagination/TablePagination.js",
   "inheritance": { "component": "TableCell", "pathname": "/api/table-cell/" },
   "demos": "<ul><li><a href=\"/components/tables/\">Tables</a></li></ul>",
-  "styledComponent": false,
+  "styledComponent": true,
   "cssComponent": false
 }

docs/pages/api-docs/tabs.json

@@ -23,8 +23,9 @@
       "default": "'auto'"
     },
     "selectionFollowsFocus": { "type": { "name": "bool" } },
+    "sx": { "type": { "name": "object" } },
     "TabIndicatorProps": { "type": { "name": "object" }, "default": "{}" },
-    "TabScrollButtonProps": { "type": { "name": "object" } },
+    "TabScrollButtonProps": { "type": { "name": "object" }, "default": "{}" },
     "textColor": {
       "type": {
         "name": "enum",
@@ -67,6 +68,6 @@
   "filename": "/packages/material-ui/src/Tabs/Tabs.js",
   "inheritance": null,
   "demos": "<ul><li><a href=\"/components/tabs/\">Tabs</a></li></ul>",
-  "styledComponent": false,
+  "styledComponent": true,
   "cssComponent": false
 }

docs/pages/api-docs/timeline.json

@@ -8,7 +8,9 @@
       "default": "'left'"
     },
     "children": { "type": { "name": "node" } },
-    "classes": { "type": { "name": "object" } }
+    "classes": { "type": { "name": "object" } },
+    "className": { "type": { "name": "string" } },
+    "sx": { "type": { "name": "object" } }
   },
   "name": "Timeline",
   "styles": {
@@ -21,6 +23,6 @@
   "filename": "/packages/material-ui-lab/src/Timeline/Timeline.tsx",
   "inheritance": null,
   "demos": "<ul><li><a href=\"/components/timeline/\">Timeline</a></li></ul>",
-  "styledComponent": false,
+  "styledComponent": true,
   "cssComponent": false
 }

docs/scripts/buildApi.ts

@@ -5,7 +5,6 @@ import * as babel from '@babel/core';
 import traverse from '@babel/traverse';
 import * as _ from 'lodash';
 import kebabCase from 'lodash/kebabCase';
-import uniqBy from 'lodash/uniqBy';
 import * as prettier from 'prettier';
 import * as recast from 'recast';
 import remark from 'remark';
@@ -14,15 +13,13 @@ import * as yargs from 'yargs';
 import * as doctrine from 'doctrine';
 import {
   defaultHandlers,
-  resolver,
   parse as docgenParse,
   PropDescriptor,
   PropTypeDescriptor,
   ReactDocgenApi,
 } from 'react-docgen';
 import muiDefaultPropsHandler from 'docs/src/modules/utils/defaultPropsHandler';
-import muiFindAnnotatedComponentsResolver from 'docs/src/modules/utils/findAnnotatedComponentsResolver';
-import { LANGUAGES, LANGUAGES_IN_PROGRESS } from 'docs/src/modules/constants';
+import { LANGUAGES } from 'docs/src/modules/constants';
 import parseTest from 'docs/src/modules/utils/parseTest';
 import generatePropTypeDescription, {
   escapeCell,
@@ -40,8 +37,6 @@ import getStylesCreator from '@material-ui/styles/getStylesCreator';
 import { createMuiTheme } from '@material-ui/core/styles';
 import { getLineFeed, getUnstyledFilename } from './helpers';
 
-const DEMO_IGNORE = LANGUAGES_IN_PROGRESS.map((language) => `-${language}.md`);
-
 const apiDocsTranslationsDirectory = path.resolve('docs', 'translations', 'api-docs');
 function resolveApiDocsTranslationsComponentDirectory(component: ReactApi): string {
   return path.resolve(apiDocsTranslationsDirectory, kebabCase(component.name));
@@ -59,16 +54,16 @@ function resolveApiDocsTranslationsComponentLanguagePath(
 }
 
 interface ReactApi extends ReactDocgenApi {
+  /**
+   * list of page pathnames
+   * @example ['/components/Accordion']
+   */
+  demos: readonly string[];
   EOL: string;
   filename: string;
   forwardsRefTo: string | undefined;
   inheritance: { component: string; pathname: string } | null;
   name: string;
-  pagesMarkdown: ReadonlyArray<{
-    components: readonly string[];
-    filename: string;
-    pathname: string;
-  }>;
   spread: boolean | undefined;
   src: string;
   styles: {
@@ -490,19 +485,6 @@ async function annotateComponentDefinition(context: {
     );
   }
 
-  const demos = uniqBy<ReactApi['pagesMarkdown'][0]>(
-    api.pagesMarkdown.filter((page) => {
-      // Testing for Unstyled avoids the need to mention the unstyled components in the
-      // `components` key of the markdown header YAML.
-      return (
-        page.components.includes(api.name) ||
-        (api.name.endsWith('Unstyled') &&
-          page.components.includes(api.name.replace('Unstyled', '')))
-      );
-    }, []),
-    (page) => page.pathname,
-  );
-
   let inheritanceAPILink = null;
   if (api.inheritance !== null) {
     const url = api.inheritance.pathname.startsWith('/')
@@ -517,14 +499,14 @@ async function annotateComponentDefinition(context: {
   if (markdownLines[markdownLines.length - 1] !== '') {
     markdownLines.push('');
   }
-  if (demos.length > 0) {
-    markdownLines.push(
-      'Demos:',
-      '',
-      ...demos.map((page) => `- [${pageToTitle(page)}](${HOST}${page.pathname}/)`),
-      '',
-    );
-  }
+  markdownLines.push(
+    'Demos:',
+    '',
+    ...api.demos.map((demoPathname) => {
+      return `- [${pageToTitle({ pathname: demoPathname })}](${HOST}${demoPathname}/)`;
+    }),
+    '',
+  );
 
   markdownLines.push('API:', '', `- [${api.name} API](${HOST}/api/${kebabCase(api.name)}/)`);
   if (api.inheritance !== null) {
@@ -804,18 +786,11 @@ function extractClassConditions(descriptions: any) {
  * Generate list of component demos
  */
 function generateDemoList(reactAPI: ReactApi): string {
-  const pagesMarkdown = reactAPI.pagesMarkdown.filter((page) => {
-    return (
-      !DEMO_IGNORE.includes(page.filename.slice(-6)) && page.components.includes(reactAPI.name)
-    );
-  });
-
-  if (pagesMarkdown.length === 0) {
-    return '';
-  }
-
-  return `<ul>${pagesMarkdown
-    .map((page) => `<li><a href="${page.pathname}/">${pageToTitle(page)}</a></li>`)
+  return `<ul>${reactAPI.demos
+    .map(
+      (demoPathname) =>
+        `<li><a href="${demoPathname}/">${pageToTitle({ pathname: demoPathname })}</a></li>`,
+    )
     .join('\n')}</ul>`;
 }
 
@@ -833,19 +808,7 @@ async function parseComponentSource(
 ): Promise<ReactApi> {
   const reactAPI: ReactApi = docgenParse(
     src,
-    // Use `findExportedComponentDefinition` and fallback to `muiFindAnnotatedComponentsResolver`
-    // `findExportedComponentDefinition` was the default resolver: https://github.com/reactjs/react-docgen/blob/aba7250ff5fde608ee6af7c286b15476d1b5bb99/src/main.js#L19
-    (ast, parser, importer) => {
-      const defaultResolvedDefinition = resolver.findExportedComponentDefinition(
-        ast,
-        parser,
-        importer,
-      );
-      if (defaultResolvedDefinition !== undefined) {
-        return defaultResolvedDefinition;
-      }
-      return muiFindAnnotatedComponentsResolver(ast, parser, importer);
-    },
+    null,
     defaultHandlers.concat(muiDefaultPropsHandler),
     {
       filename: componentObject.filename,
@@ -862,6 +825,21 @@ async function parseComponentSource(
   return reactAPI;
 }
 
+function findComponentDemos(
+  api: ReactApi,
+  pagesMarkdown: ReadonlyArray<{ pathname: string; components: readonly string[] }>,
+): ReactApi['demos'] {
+  const demos = pagesMarkdown
+    .filter((page) => {
+      return page.components.includes(api.name);
+    })
+    .map((page) => {
+      return page.pathname;
+    });
+
+  return Array.from(new Set(demos));
+}
+
 async function buildDocs(options: {
   component: { filename: string };
   pagesMarkdown: ReadonlyArray<{
@@ -1016,9 +994,17 @@ async function buildDocs(options: {
 
   reactApi.name = name;
   reactApi.styles = styles;
-  reactApi.pagesMarkdown = pagesMarkdown;
   reactApi.EOL = getLineFeed(src);
 
+  reactApi.demos = findComponentDemos(reactApi, pagesMarkdown);
+  if (reactApi.demos.length === 0) {
+    throw new Error(
+      'Unable to find demos. \n' +
+        `Be sure to include \`components: ${reactApi.name}\` in the markdown pages where the \`${reactApi.name}\` component is relevant. ` +
+        'Every public component should have a demo. ',
+    );
+  }
+
   // styled components does not have the options static
   const styledComponent = !component?.default?.options;
   if (styledComponent) {
@@ -1372,7 +1358,7 @@ async function run(argv: {
         workspaceRoot,
       });
     } catch (error) {
-      error.message = `${component.filename}: ${error.message}`;
+      error.message = `${path.relative(process.cwd(), component.filename)}: ${error.message}`;
       throw error;
     }
   });