Merge remote-tracking branch 'upstream/next' into renovate/configure

README.md

@@ -84,6 +84,7 @@ via [OpenCollective](https://opencollective.com/material-ui)
   <a data-ga-event-category="sponsor" data-ga-event-action="logo" data-ga-event-label="textemall" href="https://www.text-em-all.com" rel="noopener sponsored" target="_blank" style="margin-right: 16px;"><img src="https://images.opencollective.com/callemall/a6946da/logo/96.png" srcset="https://images.opencollective.com/callemall/a6946da/logo/192.png 2x" alt="call-em-all" title="Mass Text Messaging & Automated Calling" height="96" width="96" loading="lazy"></a>
   <a data-ga-event-category="sponsor" data-ga-event-action="logo" data-ga-event-label="canadacasino" href="https://www.canadacasino.ca/" rel="noopener sponsored" target="_blank" style="margin-right: 16px;"><img height="96" width="96" src="https://images.opencollective.com/canadacasino/5b19004/logo/96.png" srcset="https://images.opencollective.com/canadacasino/5b19004/logo/192.png 2x" alt="canadacasino" loading="lazy" /></a>
   <a data-ga-event-category="sponsor" data-ga-event-action="logo" data-ga-event-label="hoodiebees" href="https://hoodiebees.com/" rel="noopener sponsored" target="_blank" style="margin-right: 16px;"><img height="96" width="96" src="https://images.opencollective.com/hoodiebees1/617b451/logo/96.png" srcset="https://images.opencollective.com/hoodiebees1/617b451/logo/192.png 2x" alt="hoodiebees" loading="lazy" /></a>
+  <a data-ga-event-category="sponsor" data-ga-event-action="logo" data-ga-event-label="movavi" href="https://www.movavi.com/" rel="noopener sponsored" target="_blank" style="margin-right: 16px;"><img height="96" width="96" src="https://images.opencollective.com/movavi-software/a1d0167/logo/96.png" srcset="https://images.opencollective.com/movavi-software/a1d0167/logo/192.png 2x" alt="hoodiebees" loading="lazy" /></a>
 </p>
 
 Direct

docs/next.config.js

@@ -188,8 +188,7 @@ module.exports = {
 
     // We want to speed-up the build of pull requests.
     // For crowdin PRs we want to build all locales for testing.
-    // FIXME: Revert before merging
-    if (process.env.PULL_REQUEST === 'false' && !l10nPRInNetlify && !vercelDeploy) {
+    if (process.env.PULL_REQUEST === 'true' && !l10nPRInNetlify && !vercelDeploy) {
       // eslint-disable-next-line no-console
       console.log('Considering only English for SSR');
       traverse(pages, 'en');

docs/packages/markdown/loader.js

@@ -10,15 +10,17 @@ function upperCaseFirst(string) {
 }
 
 /**
- * @param {string} key
- * @example keyToJSIdentifier('index.md') === 'IndexMd'
- * @example keyToJSIdentifier('index-ja.md') === 'IndexJaMd'
+ * @param {string} moduleID
+ * @example moduleIDToJSIdentifier('./Box.js') === '$$IndexJs'
+ * @example moduleIDToJSIdentifier('./Box-new.js') === '$$BoxNewJs'
+ * @example moduleIDToJSIdentifier('../Box-new.js') === '$$$BoxNewJs'
  */
-function keyToJSIdentifier(key) {
-  const delimiter = /(\.|-)/;
-  return key
+function moduleIDToJSIdentifier(moduleID) {
+  const delimiter = /(\.|-|\/)/;
+  return moduleID
     .split(delimiter)
     .filter((part) => !delimiter.test(part))
+    .map((part) => (part.length === 0 ? '$' : part))
     .map(upperCaseFirst)
     .join('');
 }
@@ -50,77 +52,81 @@ module.exports = async function demoLoader() {
   const rawKeys = await findTranslatedVersions(this.resourcePath);
 
   // TODO: Remove requireRaw mock (needs work in prepareMarkdown)
-  const requireRaw = (key) => {
-    const filepath = path.join(path.dirname(this.resourcePath), key);
+  const requireRaw = (moduleID) => {
+    const filepath = path.join(path.dirname(this.resourcePath), moduleID.replace(/\//g, path.sep));
     this.addDependency(filepath);
     return readFileSync(filepath, { encoding: 'utf-8' });
   };
   requireRaw.keys = () => rawKeys;
-  const pageFilename = this.context.replace(this.rootContext, '').replace(/^\/src\/pages\//, '');
+  const pageFilename = this.context
+    .replace(this.rootContext, '')
+    // win32 to posix
+    .replace(/\\/g, '/')
+    .replace(/^\/src\/pages\//, '');
   const { docs } = prepareMarkdown({ pageFilename, requireRaw });
 
   const demos = {};
-  const demoKeys = [];
+  const demoModuleIDs = [];
   new Set(
     docs.en.rendered
       .filter((markdownOrComponentConfig) => {
         return typeof markdownOrComponentConfig !== 'string' && markdownOrComponentConfig.demo;
       })
       .map((demoConfig) => {
-        return path.basename(demoConfig.demo);
+        return demoConfig.demo;
       }),
-  ).forEach((filename) => {
-    const demoName = `pages/${pageFilename}/${filename
-      .replace(/\.\//g, '')
-      .replace(/\.tsx/g, '.js')}`;
-
+  ).forEach((demoName) => {
+    // TODO: const moduleID = demoName;
+    // The import paths currently use a completely different format.
+    // They should just use relative imports.
+    const moduleID = `./${demoName.replace(`pages/${pageFilename}/`, '')}`;
     demos[demoName] = {
-      module: filename,
-      raw: requireRaw(filename),
+      module: moduleID,
+      raw: requireRaw(moduleID),
     };
-    demoKeys.push(filename);
+    demoModuleIDs.push(moduleID);
 
     try {
-      const moduleTS = filename.replace(/\.js$/, '.tsx');
+      const moduleTS = moduleID.replace(/\.js$/, '.tsx');
       const rawTS = requireRaw(moduleTS);
 
       demos[demoName].moduleTS = moduleTS;
       demos[demoName].rawTS = rawTS;
-      demoKeys.push(moduleTS);
+      demoModuleIDs.push(moduleTS);
     } catch (error) {
       // TS version of the demo doesn't exist. This is fine.
     }
   });
 
   /**
-   * @param {string} key
+   * @param {string} moduleID
    */
-  function getRequireDemoIdentifier(key) {
-    return keyToJSIdentifier(key);
+  function getRequireDemoIdentifier(moduleID) {
+    return moduleIDToJSIdentifier(moduleID);
   }
 
   const transformed = `
-    ${demoKeys
-      .map((key) => {
-        return `import ${getRequireDemoIdentifier(key)} from './${key}';`;
+    ${demoModuleIDs
+      .map((moduleID) => {
+        return `import ${getRequireDemoIdentifier(moduleID)} from '${moduleID}';`;
       })
       .join('\n')}
 
     export const docs = ${JSON.stringify(docs, null, 2)};
     export const demos = ${JSON.stringify(demos, null, 2)};
     export function requireDemo(module) {
       return {
-        ${demoKeys
-          .map((key) => {
+        ${demoModuleIDs
+          .map((moduleID) => {
             // TODO: Remove ES module interop once all demos are loaded via loader
             // i.e. replace `{ default: ... }`  with `...`
-            return `'${key}': { default: ${getRequireDemoIdentifier(key)} }`;
+            return `'${moduleID}': { default: ${getRequireDemoIdentifier(moduleID)} }`;
           })
           .join(',\n')}
       }[module];
     }
     requireDemo.keys = () => {
-      return ${JSON.stringify(demoKeys, null, 2)}
+      return ${JSON.stringify(demoModuleIDs, null, 2)}
     }`;
 
   return transformed;

docs/packages/markdown/parseMarkdown.js

@@ -241,7 +241,7 @@ function createRender(context) {
 /**
  * @param {object} config
  * @param {() => string} config.requireRaw - returnvalue of require.context
- * @param {string} config.pageFilename - filename relative to nextjs pages directory
+ * @param {string} config.pageFilename - posix filename relative to nextjs pages directory
  */
 function prepareMarkdown(config) {
   const { pageFilename, requireRaw } = config;

docs/src/pages/components/badges/UnstyledBadge.js

@@ -1,8 +1,6 @@
 import * as React from 'react';
-import { styled } from '@material-ui/core/styles';
+import { styled, Box } from '@material-ui/system';
 import BadgeUnstyled from '@material-ui/unstyled/BadgeUnstyled';
-import Box from '@material-ui/core/Box';
-import Stack from '@material-ui/core/Stack';
 
 const StyledBadge = styled(BadgeUnstyled)`
   box-sizing: border-box;
@@ -74,13 +72,13 @@ function BadgeContent() {
 
 export default function UnstyledBadge() {
   return (
-    <Stack spacing={4} direction="row">
+    <Box sx={{ '& > :not(style) + :not(style)': { ml: 4 } }}>
       <StyledBadge badgeContent={5} overlap="circular">
         <BadgeContent />
       </StyledBadge>
       <StyledBadge badgeContent={5} variant="dot" overlap="circular">
         <BadgeContent />
       </StyledBadge>
-    </Stack>
+    </Box>
   );
 }

docs/src/pages/components/badges/UnstyledBadge.tsx

@@ -1,8 +1,6 @@
 import * as React from 'react';
-import { styled } from '@material-ui/core/styles';
+import { styled, Box } from '@material-ui/system';
 import BadgeUnstyled from '@material-ui/unstyled/BadgeUnstyled';
-import Box from '@material-ui/core/Box';
-import Stack from '@material-ui/core/Stack';
 
 const StyledBadge = styled(BadgeUnstyled)`
   box-sizing: border-box;
@@ -74,13 +72,13 @@ function BadgeContent() {
 
 export default function UnstyledBadge() {
   return (
-    <Stack spacing={4} direction="row">
+    <Box sx={{ '& > :not(style) + :not(style)': { ml: 4 } }}>
       <StyledBadge badgeContent={5} overlap="circular">
         <BadgeContent />
       </StyledBadge>
       <StyledBadge badgeContent={5} variant="dot" overlap="circular">
         <BadgeContent />
       </StyledBadge>
-    </Stack>
+    </Box>
   );
 }

docs/src/pages/components/modal/ModalUnstyled.js

@@ -1,6 +1,5 @@
 import * as React from 'react';
-import { styled } from '@material-ui/core/styles';
-import Box from '@material-ui/core/Box';
+import { styled, Box } from '@material-ui/system';
 import ModalUnstyled from '@material-ui/unstyled/ModalUnstyled';
 
 const StyledModal = styled(ModalUnstyled)`

docs/src/pages/components/modal/ModalUnstyled.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
-import { styled } from '@material-ui/core/styles';
-import Box from '@material-ui/core/Box';
+import { styled, Box } from '@material-ui/system';
 import ModalUnstyled from '@material-ui/unstyled/ModalUnstyled';
 
 const StyledModal = styled(ModalUnstyled)`

docs/src/pages/components/slider/UnstyledSlider.js

@@ -1,11 +1,10 @@
 import * as React from 'react';
-import { styled, alpha } from '@material-ui/core/styles';
+import { styled, alpha, Box } from '@material-ui/system';
 import SliderUnstyled from '@material-ui/unstyled/SliderUnstyled';
-import Box from '@material-ui/core/Box';
 
 const StyledSlider = styled(SliderUnstyled)(
   ({ theme }) => `
-  color: ${theme.palette.primary.main};
+  color: ${theme.palette.mode === 'light' ? '#1976d2' : '#90caf9'};
   height: 4px;
   width: 100%;
   padding: 13px 0;
@@ -47,15 +46,21 @@ const StyledSlider = styled(SliderUnstyled)(
     border-radius: 50%;
     outline: 0;
     border: 2px solid currentColor;
-    background-color: ${theme.palette.getContrastText(theme.palette.primary.main)};
+    background-color: #fff;
 
     :hover,
     &.Mui-focusVisible {
-      box-shadow: 0 0 0 0.25rem ${alpha(theme.palette.primary.main, 0.15)};
+      box-shadow: 0 0 0 0.25rem ${alpha(
+        theme.palette.mode === 'light' ? '#1976d2' : '#90caf9',
+        0.15,
+      )};
     }
 
     &.Mui-active {
-      box-shadow: 0 0 0 0.25rem ${alpha(theme.palette.primary.main, 0.3)};
+      box-shadow: 0 0 0 0.25rem ${alpha(
+        theme.palette.mode === 'light' ? '#1976d2' : '#90caf9',
+        0.3,
+      )};
     }
   }
 `,

docs/src/pages/components/slider/UnstyledSlider.tsx

@@ -1,11 +1,10 @@
 import * as React from 'react';
-import { styled, alpha } from '@material-ui/core/styles';
+import { styled, alpha, Box } from '@material-ui/system';
 import SliderUnstyled from '@material-ui/unstyled/SliderUnstyled';
-import Box from '@material-ui/core/Box';
 
 const StyledSlider = styled(SliderUnstyled)(
   ({ theme }) => `
-  color: ${theme.palette.primary.main};
+  color: ${theme.palette.mode === 'light' ? '#1976d2' : '#90caf9'};
   height: 4px;
   width: 100%;
   padding: 13px 0;
@@ -47,15 +46,21 @@ const StyledSlider = styled(SliderUnstyled)(
     border-radius: 50%;
     outline: 0;
     border: 2px solid currentColor;
-    background-color: ${theme.palette.getContrastText(theme.palette.primary.main)};
+    background-color: #fff;
 
     :hover,
     &.Mui-focusVisible {
-      box-shadow: 0 0 0 0.25rem ${alpha(theme.palette.primary.main, 0.15)};
+      box-shadow: 0 0 0 0.25rem ${alpha(
+        theme.palette.mode === 'light' ? '#1976d2' : '#90caf9',
+        0.15,
+      )};
     }
 
     &.Mui-active {
-      box-shadow: 0 0 0 0.25rem ${alpha(theme.palette.primary.main, 0.3)};
+      box-shadow: 0 0 0 0.25rem ${alpha(
+        theme.palette.mode === 'light' ? '#1976d2' : '#90caf9',
+        0.3,
+      )};
     }
   }
 `,

docs/src/pages/components/tables/EnhancedTable.js

@@ -64,6 +64,8 @@ function getComparator(order, orderBy) {
     : (a, b) => -descendingComparator(a, b, orderBy);
 }
 
+// This method is created for cross-browser compatibility, if you don't
+// need to support IE11, you can use Array.prototype.sort() directly
 function stableSort(array, comparator) {
   const stabilizedThis = array.map((el, index) => [el, index]);
   stabilizedThis.sort((a, b) => {
@@ -299,6 +301,8 @@ export default function EnhancedTable() {
               rowCount={rows.length}
             />
             <TableBody>
+              {/* if you don't need to support IE11, you can replace the `stableSort` call with:
+                 rows.slice().sort(getComparator(order, orderBy)) */}
               {stableSort(rows, getComparator(order, orderBy))
                 .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
                 .map((row, index) => {

docs/src/pages/components/tables/EnhancedTable.tsx

@@ -85,6 +85,8 @@ function getComparator<Key extends keyof any>(
     : (a, b) => -descendingComparator(a, b, orderBy);
 }
 
+// This method is created for cross-browser compatibility, if you don't
+// need to support IE11, you can use Array.prototype.sort() directly
 function stableSort<T>(array: readonly T[], comparator: (a: T, b: T) => number) {
   const stabilizedThis = array.map((el, index) => [el, index] as [T, number]);
   stabilizedThis.sort((a, b) => {
@@ -330,6 +332,8 @@ export default function EnhancedTable() {
               rowCount={rows.length}
             />
             <TableBody>
+              {/* if you don't need to support IE11, you can replace the `stableSort` call with:
+              rows.slice().sort(getComparator(order, orderBy)) */}
               {stableSort(rows, getComparator(order, orderBy))
                 .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
                 .map((row, index) => {

docs/src/pages/customization/how-to-customize/how-to-customize.md

@@ -108,12 +108,13 @@ You can rely on the following [global class names](/styles/advanced/#with-materi
 | :------------ | :------------------ |
 | active        | `.Mui-active`       |
 | checked       | `.Mui-checked`      |
+| completed     | `.Mui-completed`    |
 | disabled      | `.Mui-disabled`     |
 | error         | `.Mui-error`        |
-| focused       | `.Mui-focused`      |
+| expanded      | `.Mui-expanded`     |
 | focus visible | `.Mui-focusVisible` |
+| focused       | `.Mui-focused`      |
 | required      | `.Mui-required`     |
-| expanded      | `.Mui-expanded`     |
 | selected      | `.Mui-selected`     |
 
 > ⚠️ Never style these pseudo-class class names directly:

docs/src/pages/discover-more/backers/backers.md

@@ -33,6 +33,7 @@ via [OpenCollective](https://opencollective.com/material-ui)
   <a data-ga-event-category="sponsor" data-ga-event-action="logo" data-ga-event-label="textemall" href="https://www.text-em-all.com" rel="noopener sponsored" target="_blank" style="margin-right: 16px;"><img src="https://images.opencollective.com/callemall/a6946da/logo/96.png" srcset="https://images.opencollective.com/callemall/a6946da/logo/192.png 2x" alt="call-em-all" title="Mass Text Messaging & Automated Calling" height="96" width="96" loading="lazy"></a>
   <a data-ga-event-category="sponsor" data-ga-event-action="logo" data-ga-event-label="canadacasino" href="https://www.canadacasino.ca/" rel="noopener sponsored" target="_blank" style="margin-right: 16px;"><img height="96" width="96" src="https://images.opencollective.com/canadacasino/5b19004/logo/96.png" srcset="https://images.opencollective.com/canadacasino/5b19004/logo/192.png 2x" alt="canadacasino" loading="lazy" /></a>
   <a data-ga-event-category="sponsor" data-ga-event-action="logo" data-ga-event-label="hoodiebees" href="https://hoodiebees.com/" rel="noopener sponsored" target="_blank" style="margin-right: 16px;"><img height="96" width="96" src="https://images.opencollective.com/hoodiebees1/617b451/logo/96.png" srcset="https://images.opencollective.com/hoodiebees1/617b451/logo/192.png 2x" alt="hoodiebees" loading="lazy" /></a>
+  <a data-ga-event-category="sponsor" data-ga-event-action="logo" data-ga-event-label="movavi" href="https://www.movavi.com/" rel="noopener sponsored" target="_blank" style="margin-right: 16px;"><img height="96" width="96" src="https://images.opencollective.com/movavi-software/a1d0167/logo/96.png" srcset="https://images.opencollective.com/movavi-software/a1d0167/logo/192.png 2x" alt="hoodiebees" loading="lazy" /></a>
 </p>
 
 Direct

docs/src/pages/landing/QuickWord.js

@@ -31,6 +31,11 @@ const backers = [
     alt: 'doit-intl',
     title: 'DoiT - Management Platform for Google Cloud and AWS',
   },
+  {
+    href: 'https://www.movavi.com/',
+    alt: 'movavi',
+    title: 'Movavi: Safe Multimedia Software',
+  },
 ];
 
 const useStyles = makeStyles(

docs/src/pages/landing/backers.md

@@ -24,6 +24,7 @@ _1/3 slots available_
   <a data-ga-event-category="sponsor" data-ga-event-action="logo" data-ga-event-label="textemall" href="https://www.text-em-all.com" rel="noopener sponsored" target="_blank" style="margin-right: 16px;"><img src="https://images.opencollective.com/callemall/a6946da/logo/96.png" srcset="https://images.opencollective.com/callemall/a6946da/logo/192.png 2x" alt="call-em-all" title="Mass Text Messaging & Automated Calling" height="96" width="96" loading="lazy"></a>
   <a data-ga-event-category="sponsor" data-ga-event-action="logo" data-ga-event-label="canadacasino" href="https://www.canadacasino.ca/" rel="noopener sponsored" target="_blank" style="margin-right: 16px;"><img height="96" width="96" src="https://images.opencollective.com/canadacasino/5b19004/logo/96.png" srcset="https://images.opencollective.com/canadacasino/5b19004/logo/192.png 2x" alt="canadacasino" loading="lazy" /></a>
   <a data-ga-event-category="sponsor" data-ga-event-action="logo" data-ga-event-label="hoodiebees" href="https://hoodiebees.com/" rel="noopener sponsored" target="_blank" style="margin-right: 16px;"><img height="96" width="96" src="https://images.opencollective.com/hoodiebees1/617b451/logo/96.png" srcset="https://images.opencollective.com/hoodiebees1/617b451/logo/192.png 2x" alt="hoodiebees" loading="lazy" /></a>
+  <a data-ga-event-category="sponsor" data-ga-event-action="logo" data-ga-event-label="movavi" href="https://www.movavi.com/" rel="noopener sponsored" target="_blank" style="margin-right: 16px;"><img height="96" width="96" src="https://images.opencollective.com/movavi-software/a1d0167/logo/96.png" srcset="https://images.opencollective.com/movavi-software/a1d0167/logo/192.png 2x" alt="hoodiebees" loading="lazy" /></a>
 </p>
 
 ### There are more!

package.json

@@ -161,7 +161,6 @@
     "rollup-plugin-commonjs": "^10.1.0",
     "rollup-plugin-node-globals": "^1.4.0",
     "rollup-plugin-node-resolve": "^5.2.0",
-    "rollup-plugin-size-snapshot": "^0.12.0",
     "rollup-plugin-terser": "^7.0.0",
     "serve": "^12.0.0",
     "sinon": "^11.1.1",