Merge branch 'next' into feat/move-to-emotion

docs/next.config.js

@@ -32,7 +32,7 @@ module.exports = {
     ignoreDevErrors: true,
     ignoreBuildErrors: true,
   },
-  webpack5: false,
+  webpack5: true,
   webpack: (config, options) => {
     const plugins = config.plugins.slice();
 
@@ -62,15 +62,16 @@ module.exports = {
       }
 
       config.externals = [
-        (context, request, callback) => {
+        (ctx, callback) => {
+          const { request } = ctx;
           const hasDependencyOnRepoPackages = ['notistack', '@material-ui/data-grid'].includes(
             request,
           );
 
           if (hasDependencyOnRepoPackages) {
             return callback(null);
           }
-          return nextExternals(context, request, callback);
+          return nextExternals(ctx, callback);
         },
       ];
     }
@@ -89,10 +90,18 @@ module.exports = {
       module: {
         ...config.module,
         rules: config.module.rules.concat([
-          // used in some /getting-started/templates
           {
             test: /\.md$/,
-            loader: 'raw-loader',
+            oneOf: [
+              {
+                resourceQuery: /@material-ui\/markdown/,
+                use: require.resolve('@material-ui/markdown/loader'),
+              },
+              {
+                // used in some /getting-started/templates
+                type: 'asset/source',
+              },
+            ],
           },
           // transpile 3rd party packages with dependencies in this repository
           {

docs/package.json

@@ -50,7 +50,6 @@
     "@types/react-router-dom": "^5.1.0",
     "@types/react-swipeable-views": "^0.13.0",
     "@types/react-swipeable-views-utils": "^0.13.0",
-    "@types/react-text-mask": "^5.4.6",
     "@types/react-virtualized": "^9.21.4",
     "@types/react-window": "^1.7.0",
     "@types/styled-components": "5.1.11",
@@ -97,14 +96,14 @@
     "react-dom": "^17.0.1",
     "react-draggable": "^4.0.3",
     "react-final-form": "^6.3.0",
+    "react-imask": "^6.0.7",
     "react-is": "^17.0.1",
     "react-number-format": "^4.0.8",
     "react-redux": "^7.1.1",
     "react-router": "^5.0.0",
     "react-router-dom": "^5.0.1",
     "react-spring": "^8.0.27",
     "react-swipeable-views": "^0.14.0-alpha.0",
-    "react-text-mask": "^5.0.2",
     "react-transition-group": "^4.4.1",
     "react-virtualized": "^9.21.1",
     "react-window": "^1.8.5",

docs/pages/api-docs/autocomplete.json

@@ -19,6 +19,7 @@
     "clearOnEscape": { "type": { "name": "bool" } },
     "clearText": { "type": { "name": "string" }, "default": "'Clear'" },
     "closeText": { "type": { "name": "string" }, "default": "'Close'" },
+    "componentsProps": { "type": { "name": "object" }, "default": "{}" },
     "defaultValue": { "type": { "name": "any" }, "default": "props.multiple ? [] : null" },
     "disableClearable": { "type": { "name": "bool" } },
     "disableCloseOnSelect": { "type": { "name": "bool" } },
@@ -71,7 +72,7 @@
     "size": {
       "type": {
         "name": "union",
-        "description": "'medium'<br>&#124;&nbsp;'small'<br>&#124;&nbsp;string"
+        "description": "'small'<br>&#124;&nbsp;'medium'<br>&#124;&nbsp;string"
       },
       "default": "'medium'"
     },

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

@@ -22,7 +22,7 @@
     "size": {
       "type": {
         "name": "enum",
-        "description": "'large'<br>&#124;&nbsp;'medium'<br>&#124;&nbsp;'small'"
+        "description": "'small'<br>&#124;&nbsp;'medium'<br>&#124;&nbsp;'large'"
       },
       "default": "'medium'"
     },

docs/pages/api-docs/fab.json

@@ -17,7 +17,7 @@
     "size": {
       "type": {
         "name": "union",
-        "description": "'large'<br>&#124;&nbsp;'medium'<br>&#124;&nbsp;'small'<br>&#124;&nbsp;string"
+        "description": "'small'<br>&#124;&nbsp;'medium'<br>&#124;&nbsp;'large'<br>&#124;&nbsp;string"
       },
       "default": "'large'"
     },

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

@@ -19,7 +19,7 @@
     "size": {
       "type": {
         "name": "union",
-        "description": "'large'<br>&#124;&nbsp;'medium'<br>&#124;&nbsp;'small'<br>&#124;&nbsp;string"
+        "description": "'small'<br>&#124;&nbsp;'medium'<br>&#124;&nbsp;'large'<br>&#124;&nbsp;string"
       },
       "default": "'medium'"
     },

docs/pages/api-docs/pagination.json

@@ -31,7 +31,7 @@
     "size": {
       "type": {
         "name": "union",
-        "description": "'large'<br>&#124;&nbsp;'medium'<br>&#124;&nbsp;'small'<br>&#124;&nbsp;string"
+        "description": "'small'<br>&#124;&nbsp;'medium'<br>&#124;&nbsp;'large'<br>&#124;&nbsp;string"
       },
       "default": "'medium'"
     },

docs/pages/api-docs/rating.json

@@ -24,7 +24,7 @@
     "size": {
       "type": {
         "name": "union",
-        "description": "'large'<br>&#124;&nbsp;'medium'<br>&#124;&nbsp;'small'<br>&#124;&nbsp;string"
+        "description": "'small'<br>&#124;&nbsp;'medium'<br>&#124;&nbsp;'large'<br>&#124;&nbsp;string"
       },
       "default": "'medium'"
     },

docs/pages/api-docs/slider.json

@@ -46,7 +46,7 @@
     },
     "scale": { "type": { "name": "func" }, "default": "(x) => x" },
     "size": {
-      "type": { "name": "enum", "description": "'medium'<br>&#124;&nbsp;'small'" },
+      "type": { "name": "enum", "description": "'small'<br>&#124;&nbsp;'medium'" },
       "default": "'medium'"
     },
     "step": { "type": { "name": "number" }, "default": "1" },

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

@@ -17,7 +17,7 @@
       }
     },
     "scope": { "type": { "name": "string" } },
-    "size": { "type": { "name": "enum", "description": "'medium'<br>&#124;&nbsp;'small'" } },
+    "size": { "type": { "name": "enum", "description": "'small'<br>&#124;&nbsp;'medium'" } },
     "sortDirection": {
       "type": { "name": "enum", "description": "'asc'<br>&#124;&nbsp;'desc'<br>&#124;&nbsp;false" }
     },

docs/pages/api-docs/toggle-button-group.json

@@ -19,7 +19,7 @@
     "size": {
       "type": {
         "name": "union",
-        "description": "'large'<br>&#124;&nbsp;'medium'<br>&#124;&nbsp;'small'<br>&#124;&nbsp;string"
+        "description": "'small'<br>&#124;&nbsp;'medium'<br>&#124;&nbsp;'large'<br>&#124;&nbsp;string"
       },
       "default": "'medium'"
     },

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

@@ -18,7 +18,7 @@
     "size": {
       "type": {
         "name": "union",
-        "description": "'large'<br>&#124;&nbsp;'medium'<br>&#124;&nbsp;'small'<br>&#124;&nbsp;string"
+        "description": "'small'<br>&#124;&nbsp;'medium'<br>&#124;&nbsp;'large'<br>&#124;&nbsp;string"
       },
       "default": "'medium'"
     },

docs/pages/blog/2019-developer-survey-results.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
-import { docs } from '!@material-ui/markdown/loader!./2019-developer-survey-results.md';
+import { docs } from './2019-developer-survey-results.md?@material-ui/markdown';
 
 export default function Page() {
   return <TopLayoutBlog docs={docs} />;

docs/pages/blog/2019.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
-import { docs } from '!@material-ui/markdown/loader!./2019.md';
+import { docs } from './2019.md?@material-ui/markdown';
 
 export default function Page() {
   return <TopLayoutBlog docs={docs} />;

docs/pages/blog/2020-developer-survey-results.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
-import { docs } from '!@material-ui/markdown/loader!./2020-developer-survey-results.md';
+import { docs } from './2020-developer-survey-results.md?@material-ui/markdown';
 
 export default function Page() {
   return <TopLayoutBlog docs={docs} />;

docs/pages/blog/2020-introducing-sketch.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
-import { docs } from '!@material-ui/markdown/loader!./2020-introducing-sketch.md';
+import { docs } from './2020-introducing-sketch.md?@material-ui/markdown';
 
 export default function Page() {
   return <TopLayoutBlog docs={docs} />;

docs/pages/blog/2020-q1-update.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
-import { docs } from '!@material-ui/markdown/loader!./2020-q1-update.md';
+import { docs } from './2020-q1-update.md?@material-ui/markdown';
 
 export default function Page() {
   return <TopLayoutBlog docs={docs} />;

docs/pages/blog/2020-q2-update.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
-import { docs } from '!@material-ui/markdown/loader!./2020-q2-update.md';
+import { docs } from './2020-q2-update.md?@material-ui/markdown';
 
 export default function Page() {
   return <TopLayoutBlog docs={docs} />;

docs/pages/blog/2020-q3-update.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
-import { docs } from '!@material-ui/markdown/loader!./2020-q3-update.md';
+import { docs } from './2020-q3-update.md?@material-ui/markdown';
 
 export default function Page() {
   return <TopLayoutBlog docs={docs} />;

docs/pages/blog/2020.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
-import { docs } from '!@material-ui/markdown/loader!./2020.md';
+import { docs } from './2020.md?@material-ui/markdown';
 
 export default function Page() {
   return <TopLayoutBlog docs={docs} />;

docs/pages/blog/2021-q1-update.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
-import { docs } from '!@material-ui/markdown/loader!./2021-q1-update.md';
+import { docs } from './2021-q1-update.md?@material-ui/markdown';
 
 export default function Page() {
   return <TopLayoutBlog docs={docs} />;

docs/pages/blog/april-2019-update.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
-import { docs } from '!@material-ui/markdown/loader!./april-2019-update.md';
+import { docs } from './april-2019-update.md?@material-ui/markdown';
 
 export default function Page() {
   return <TopLayoutBlog docs={docs} />;

docs/pages/blog/august-2019-update.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
-import { docs } from '!@material-ui/markdown/loader!./august-2019-update.md';
+import { docs } from './august-2019-update.md?@material-ui/markdown';
 
 export default function Page() {
   return <TopLayoutBlog docs={docs} />;

docs/pages/blog/danail-hadjiatanasov-joining.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
-import { docs } from '!@material-ui/markdown/loader!./danail-hadjiatanasov-joining.md';
+import { docs } from './danail-hadjiatanasov-joining.md?@material-ui/markdown';
 
 export default function Page() {
   return <TopLayoutBlog docs={docs} />;

docs/pages/blog/december-2019-update.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
-import { docs } from '!@material-ui/markdown/loader!./december-2019-update.md';
+import { docs } from './december-2019-update.md?@material-ui/markdown';
 
 export default function Page() {
   return <TopLayoutBlog docs={docs} />;

docs/pages/blog/july-2019-update.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
-import { docs } from '!@material-ui/markdown/loader!./july-2019-update.md';
+import { docs } from './july-2019-update.md?@material-ui/markdown';
 
 export default function Page() {
   return <TopLayoutBlog docs={docs} />;

docs/pages/blog/june-2019-update.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
-import { docs } from '!@material-ui/markdown/loader!./june-2019-update.md';
+import { docs } from './june-2019-update.md?@material-ui/markdown';
 
 export default function Page() {
   return <TopLayoutBlog docs={docs} />;

docs/pages/blog/march-2019-update.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
-import { docs } from '!@material-ui/markdown/loader!./march-2019-update.md';
+import { docs } from './march-2019-update.md?@material-ui/markdown';
 
 export default function Page() {
   return <TopLayoutBlog docs={docs} />;

docs/pages/blog/marija-najdova-joining.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
-import { docs } from '!@material-ui/markdown/loader!./marija-najdova-joining.md';
+import { docs } from './marija-najdova-joining.md?@material-ui/markdown';
 
 export default function Page() {
   return <TopLayoutBlog docs={docs} />;

docs/pages/blog/material-ui-v1-is-out.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
-import { docs } from '!@material-ui/markdown/loader!./material-ui-v1-is-out.md';
+import { docs } from './material-ui-v1-is-out.md?@material-ui/markdown';
 
 export default function Page() {
   return <TopLayoutBlog docs={docs} />;

docs/pages/blog/material-ui-v4-is-out.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
-import { docs } from '!@material-ui/markdown/loader!./material-ui-v4-is-out.md';
+import { docs } from './material-ui-v4-is-out.md?@material-ui/markdown';
 
 export default function Page() {
   return <TopLayoutBlog docs={docs} />;

docs/pages/blog/matheus-wichman-joining.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
-import { docs } from '!@material-ui/markdown/loader!./matheus-wichman-joining.md';
+import { docs } from './matheus-wichman-joining.md?@material-ui/markdown';
 
 export default function Page() {
   return <TopLayoutBlog docs={docs} />;

docs/pages/blog/may-2019-update.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
-import { docs } from '!@material-ui/markdown/loader!./may-2019-update.md';
+import { docs } from './may-2019-update.md?@material-ui/markdown';
 
 export default function Page() {
   return <TopLayoutBlog docs={docs} />;

docs/pages/blog/michal-dudak-joining.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
-import { docs } from '!@material-ui/markdown/loader!./michal-dudak-joining.md';
+import { docs } from './michal-dudak-joining.md?@material-ui/markdown';
 
 export default function Page() {
   return <TopLayoutBlog docs={docs} />;

docs/pages/blog/november-2019-update.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
-import { docs } from '!@material-ui/markdown/loader!./november-2019-update.md';
+import { docs } from './november-2019-update.md?@material-ui/markdown';
 
 export default function Page() {
   return <TopLayoutBlog docs={docs} />;

docs/pages/blog/october-2019-update.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
-import { docs } from '!@material-ui/markdown/loader!./october-2019-update.md';
+import { docs } from './october-2019-update.md?@material-ui/markdown';
 
 export default function Page() {
   return <TopLayoutBlog docs={docs} />;

docs/pages/blog/september-2019-update.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
-import { docs } from '!@material-ui/markdown/loader!./september-2019-update.md';
+import { docs } from './september-2019-update.md?@material-ui/markdown';
 
 export default function Page() {
   return <TopLayoutBlog docs={docs} />;

docs/pages/blog/siriwat-kunaporn-joining.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
-import { docs } from '!@material-ui/markdown/loader!./siriwat-kunaporn-joining.md';
+import { docs } from './siriwat-kunaporn-joining.md?@material-ui/markdown';
 
 export default function Page() {
   return <TopLayoutBlog docs={docs} />;

docs/pages/blog/spotlight-damien-tassone.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
-import { docs } from '!@material-ui/markdown/loader!./spotlight-damien-tassone.md';
+import { docs } from './spotlight-damien-tassone.md?@material-ui/markdown';
 
 export default function Page() {
   return <TopLayoutBlog docs={docs} />;

docs/pages/company/about.js

@@ -4,7 +4,7 @@ import {
   demos,
   docs,
   requireDemo,
-} from '!@material-ui/markdown/loader!docs/src/pages/company/about/about.md';
+} from 'docs/src/pages/company/about/about.md?@material-ui/markdown';
 
 export default function Page() {
   return <TopLayoutCompany demos={demos} docs={docs} requireDemo={requireDemo} />;