Master

.circleci/config.yml

@@ -206,12 +206,7 @@ workflows:
   version: 2
   pipeline:
     jobs:
-      - checkout:
-          filters:
-            branches:
-              ignore:
-                - l10n
-                - /dependabot\//
+      - checkout
       - test_unit:
           requires:
             - checkout

.eslintrc.js

@@ -169,6 +169,8 @@ module.exports = {
         'jsx-a11y/no-static-element-interactions': 'off',
         'jsx-a11y/tabindex-no-positive': 'off',
 
+        // In tests this is generally intended.
+        'react/button-has-type': 'off',
         // They are accessed to test custom validator implementation with PropTypes.checkPropTypes
         'react/forbid-foreign-prop-types': 'off',
         // components that are defined in test are isolated enough

.github/CODEOWNERS

@@ -1,2 +0,0 @@
-/docs/src/pages/components/alert/ @dimitropoulos
-/packages/material-ui-lab/src/Alert/ @dimitropoulos

.github/workflows/maintenance.yml

@@ -2,10 +2,17 @@ name: 'Maintenance'
 on:
   # So that PRs touching the same files as the push are updated
   push:
+    branches:
+      - master
+      - next
   # So that the `dirtyLabel` is removed if conflicts are resolved
-  # On forks the secret isn't set. We need to manually remove it.
-  #pull_request:
-  #  types: [synchronize]
+  # Could put too much strain on rate limit
+  # If we hit the rate limit too often remove this event
+  pull_request_target:
+    branches:
+      - master
+      - next
+    types: [synchronize]
 
 jobs:
   main:

README.md

@@ -49,10 +49,11 @@ Please note that `@next` will only point to pre-releases; to get the latest stab
 ### Diamond 💎
 
 <p style="display: flex; justify-content: center;">
-  <a data-ga-event-category="sponsor" data-ga-event-action="logo" data-ga-event-label="sencha" href="https://www.sencha.com/products/extreact/extreact-for-material-ui/?utm_source=materialui&utm_medium=referral&utm_content=product-200429-extreactmaterialui" rel="noopener sponsored" target="_blank" style="margin-right: 16px;"><img height="128" width="128" src="https://material-ui.com/static/in-house/sencha-256x256.png" alt="sencha" title="UI Components for Productive Dev Teams" loading="lazy" /></a>
+  <a data-ga-event-category="sponsor" data-ga-event-action="logo" data-ga-event-label="octopus" href="https://octopus.com/?utm_source=materialui&utm_medium=referral" rel="noopener sponsored" target="_blank" style="margin-right: 16px;"><img height="128" width="128" src="https://avatars3.githubusercontent.com/u/1287123?s=256" alt="octopus" title="Repeatable, reliable deployments" loading="lazy" /></a>
+  <a data-ga-event-category="sponsor" data-ga-event-action="logo" data-ga-event-label="doit-intl" href="https://www.doit-intl.com/?utm_source=materialui&utm_medium=referral" rel="noopener sponsored" target="_blank" style="margin-right: 16px;"><img height="128" width="128" src="https://avatars3.githubusercontent.com/u/8424863?s=256" alt="doit-intl" title="Management Platform for Google Cloud and AWS" loading="lazy" /></a>
 </p>
 
-Diamond Sponsors are those who have pledged $1,500/month or more to Material-UI.
+Diamond Sponsors are those who have pledged \$1,500/month or more to Material-UI.
 
 ### Gold 🏆
 

azure-pipelines.yml

@@ -1,10 +1,8 @@
 trigger:
   branches:
     include:
-      - '*'
-    exclude:
-      - l10n
-      - dependabot/*
+      - 'master'
+      - 'next'
 
 # https://developercommunity.visualstudio.com/comments/949241/view.html
 pr:

crowdin.yml

@@ -1,3 +1,4 @@
+commit_message: "[skip ci]"
 files:
   - source: /docs/src/**/*.md
     ignore:

docs/next.config.js

@@ -30,9 +30,11 @@ module.exports = {
     const plugins = config.plugins.concat([
       new webpack.DefinePlugin({
         'process.env': {
+          COMMIT_REF: JSON.stringify(process.env.COMMIT_REF),
           ENABLE_AD: JSON.stringify(process.env.ENABLE_AD),
           GITHUB_AUTH: JSON.stringify(process.env.GITHUB_AUTH),
           LIB_VERSION: JSON.stringify(pkg.version),
+          PULL_REQUEST: JSON.stringify(process.env.PULL_REQUEST === 'true'),
           REACT_MODE: JSON.stringify(reactMode),
         },
       }),
@@ -69,8 +71,8 @@ module.exports = {
         (context, request, callback) => {
           const hasDependencyOnRepoPackages = [
             'notistack',
-            'material-table',
             '@material-ui/pickers',
+            '@material-ui/data-grid',
           ].includes(request);
 
           if (hasDependencyOnRepoPackages) {
@@ -98,7 +100,7 @@ module.exports = {
           // transpile 3rd party packages with dependencies in this repository
           {
             test: /\.(js|mjs|jsx)$/,
-            include: /node_modules(\/|\\)(material-table|notistack|@material-ui(\/|\\)pickers)/,
+            include: /node_modules(\/|\\)(notistack|@material-ui(\/|\\)(pickers|data-grid))/,
             use: {
               loader: 'babel-loader',
               options: {
@@ -111,6 +113,7 @@ module.exports = {
                     {
                       alias: {
                         '@material-ui/core': '../packages/material-ui/src',
+                        '@material-ui/utils': '../packages/material-ui-utils/src',
                       },
                       transformFunctions: ['require'],
                     },

docs/notifications.json

@@ -10,9 +10,15 @@
     "userLanguage": "zh"
   },
   {
-    "id": 49,
-    "date": "2020-03-30",
-    "title": "Sketch",
-    "text": "<a style=\"color: inherit;\" target=\"_blank\" rel=\"noopener\" href=\"https://twitter.com/MaterialUI/status/1244519729978437633\">Introducing Material-UI for Sketch</a>. Today, we’re excited to introduce the Sketch symbols 💎 for Material-UI."
+    "id": 50,
+    "date": "2020-10-22",
+    "title": "Figma",
+    "text": "<a style=\"color: inherit;\" target=\"_blank\" href=\"/store/items/figma-react/\">Material-UI for Figma</a>. Not new, but definitely improved – v4.12.0 now available in the store!"
+  },
+  {
+    "id": 51,
+    "date": "2020-11-13",
+    "title": "Pre-launch survey 📣",
+    "text": "Do you need a data grid, calendar, chart, etc.?<br/><a style=\"color: inherit;\" target=\"_blank\" href=\"https://docs.google.com/forms/d/e/1FAIpQLSe-1Hx07hZmWITo3z9FByyXT47sXvJgzmQudyctpdJdZ-NUGw/viewform\">Fill in our survey</a> so that we can build the right one for you, and get a 20% discount."
   }
-]
+]

docs/package.json

@@ -26,6 +26,7 @@
     "@emotion/core": "^10.0.27",
     "@emotion/styled": "^10.0.27",
     "@material-ui/core": "^4.1.2",
+    "@material-ui/data-grid": "^4.0.0-alpha.6",
     "@material-ui/docs": "^4.0.0-beta.0",
     "@material-ui/icons": "^4.2.1",
     "@material-ui/lab": "^4.0.0-alpha.18",
@@ -80,7 +81,6 @@
     "lz-string": "^1.4.4",
     "markdown-to-jsx": "^6.10.2",
     "marked": "^1.0.0",
-    "material-table": "^1.50.0",
     "material-ui-popup-state": "^1.4.1",
     "next": "^9.3.0",
     "notistack": "^0.9.3",

docs/pages/api-docs/avatar.md

@@ -36,7 +36,7 @@ The `MuiAvatar` name can be used for providing [default props](/customization/gl
 | <span class="prop-name">sizes</span> | <span class="prop-type">string</span> |  | The `sizes` attribute for the `img` element. |
 | <span class="prop-name">src</span> | <span class="prop-type">string</span> |  | The `src` attribute for the `img` element. |
 | <span class="prop-name">srcSet</span> | <span class="prop-type">string</span> |  | The `srcSet` attribute for the `img` element. Use this attribute for responsive image display. |
-| <span class="prop-name">variant</span> | <span class="prop-type">'circle'<br>&#124;&nbsp;'rounded'<br>&#124;&nbsp;'square'</span> | <span class="prop-default">'circle'</span> | The shape of the avatar. |
+| <span class="prop-name">variant</span> | <span class="prop-type">'circle'<br>&#124;&nbsp;'circular'<br>&#124;&nbsp;'rounded'<br>&#124;&nbsp;'square'</span> | <span class="prop-default">'circle'</span> | The shape of the avatar. |
 
 The `ref` is forwarded to the root element.
 
@@ -49,6 +49,7 @@ Any other props supplied will be provided to the root element (native element).
 | <span class="prop-name">root</span> | <span class="prop-name">.MuiAvatar-root</span> | Styles applied to the root element.
 | <span class="prop-name">colorDefault</span> | <span class="prop-name">.MuiAvatar-colorDefault</span> | Styles applied to the root element if not `src` or `srcSet`.
 | <span class="prop-name">circle</span> | <span class="prop-name">.MuiAvatar-circle</span> | Styles applied to the root element if `variant="circle"`.
+| <span class="prop-name">circular</span> | <span class="prop-name">.MuiAvatar-circular</span> | Styles applied to the root element if `variant="circular"`.
 | <span class="prop-name">rounded</span> | <span class="prop-name">.MuiAvatar-rounded</span> | Styles applied to the root element if `variant="rounded"`.
 | <span class="prop-name">square</span> | <span class="prop-name">.MuiAvatar-square</span> | Styles applied to the root element if `variant="square"`.
 | <span class="prop-name">img</span> | <span class="prop-name">.MuiAvatar-img</span> | Styles applied to the img element if either `src` or `srcSet` is defined.

docs/pages/api-docs/badge.md

@@ -36,7 +36,7 @@ The `MuiBadge` name can be used for providing [default props](/customization/glo
 | <span class="prop-name">component</span> | <span class="prop-type">elementType</span> | <span class="prop-default">'span'</span> | The component used for the root node. Either a string to use a HTML element or a component. |
 | <span class="prop-name">invisible</span> | <span class="prop-type">bool</span> |  | If `true`, the badge will be invisible. |
 | <span class="prop-name">max</span> | <span class="prop-type">number</span> | <span class="prop-default">99</span> | Max count to show. |
-| <span class="prop-name">overlap</span> | <span class="prop-type">'circle'<br>&#124;&nbsp;'rectangle'</span> | <span class="prop-default">'rectangle'</span> | Wrapped shape the badge should overlap. |
+| <span class="prop-name">overlap</span> | <span class="prop-type">'circle'<br>&#124;&nbsp;'rectangle'<br>&#124;&nbsp;'circular'<br>&#124;&nbsp;'rectangular'</span> | <span class="prop-default">'rectangle'</span> | Wrapped shape the badge should overlap. |
 | <span class="prop-name">showZero</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | Controls whether the badge is hidden when `badgeContent` is zero. |
 | <span class="prop-name">variant</span> | <span class="prop-type">'dot'<br>&#124;&nbsp;'standard'</span> | <span class="prop-default">'standard'</span> | The variant to use. |
 
@@ -55,13 +55,21 @@ Any other props supplied will be provided to the root element (native element).
 | <span class="prop-name">colorError</span> | <span class="prop-name">.MuiBadge-colorError</span> | Styles applied to the root element if `color="error"`.
 | <span class="prop-name">dot</span> | <span class="prop-name">.MuiBadge-dot</span> | Styles applied to the root element if `variant="dot"`.
 | <span class="prop-name">anchorOriginTopRightRectangle</span> | <span class="prop-name">.MuiBadge-anchorOriginTopRightRectangle</span> | Styles applied to the root element if `anchorOrigin={{ 'top', 'right' }} overlap="rectangle"`.
+| <span class="prop-name">anchorOriginTopRightRectangular</span> | <span class="prop-name">.MuiBadge-anchorOriginTopRightRectangular</span> | Styles applied to the root element if `anchorOrigin={{ 'top', 'right' }} overlap="rectangular"`.
 | <span class="prop-name">anchorOriginBottomRightRectangle</span> | <span class="prop-name">.MuiBadge-anchorOriginBottomRightRectangle</span> | Styles applied to the root element if `anchorOrigin={{ 'bottom', 'right' }} overlap="rectangle"`.
+| <span class="prop-name">anchorOriginBottomRightRectangular</span> | <span class="prop-name">.MuiBadge-anchorOriginBottomRightRectangular</span> | Styles applied to the root element if `anchorOrigin={{ 'bottom', 'right' }} overlap="rectangular"`.
 | <span class="prop-name">anchorOriginTopLeftRectangle</span> | <span class="prop-name">.MuiBadge-anchorOriginTopLeftRectangle</span> | Styles applied to the root element if `anchorOrigin={{ 'top', 'left' }} overlap="rectangle"`.
+| <span class="prop-name">anchorOriginTopLeftRectangular</span> | <span class="prop-name">.MuiBadge-anchorOriginTopLeftRectangular</span> | Styles applied to the root element if `anchorOrigin={{ 'top', 'left' }} overlap="rectangular"`.
 | <span class="prop-name">anchorOriginBottomLeftRectangle</span> | <span class="prop-name">.MuiBadge-anchorOriginBottomLeftRectangle</span> | Styles applied to the root element if `anchorOrigin={{ 'bottom', 'left' }} overlap="rectangle"`.
+| <span class="prop-name">anchorOriginBottomLeftRectangular</span> | <span class="prop-name">.MuiBadge-anchorOriginBottomLeftRectangular</span> | Styles applied to the root element if `anchorOrigin={{ 'bottom', 'left' }} overlap="rectangular"`.
 | <span class="prop-name">anchorOriginTopRightCircle</span> | <span class="prop-name">.MuiBadge-anchorOriginTopRightCircle</span> | Styles applied to the root element if `anchorOrigin={{ 'top', 'right' }} overlap="circle"`.
+| <span class="prop-name">anchorOriginTopRightCircular</span> | <span class="prop-name">.MuiBadge-anchorOriginTopRightCircular</span> | Styles applied to the root element if `anchorOrigin={{ 'top', 'right' }} overlap="circular"`.
 | <span class="prop-name">anchorOriginBottomRightCircle</span> | <span class="prop-name">.MuiBadge-anchorOriginBottomRightCircle</span> | Styles applied to the root element if `anchorOrigin={{ 'bottom', 'right' }} overlap="circle"`.
+| <span class="prop-name">anchorOriginBottomRightCircular</span> | <span class="prop-name">.MuiBadge-anchorOriginBottomRightCircular</span> | Styles applied to the root element if `anchorOrigin={{ 'bottom', 'right' }} overlap="circular"`.
 | <span class="prop-name">anchorOriginTopLeftCircle</span> | <span class="prop-name">.MuiBadge-anchorOriginTopLeftCircle</span> | Styles applied to the root element if `anchorOrigin={{ 'top', 'left' }} overlap="circle"`.
+| <span class="prop-name">anchorOriginTopLeftCircular</span> | <span class="prop-name">.MuiBadge-anchorOriginTopLeftCircular</span> | Styles applied to the root element if `anchorOrigin={{ 'top', 'left' }} overlap="circular"`.
 | <span class="prop-name">anchorOriginBottomLeftCircle</span> | <span class="prop-name">.MuiBadge-anchorOriginBottomLeftCircle</span> | Styles applied to the root element if `anchorOrigin={{ 'bottom', 'left' }} overlap="circle"`.
+| <span class="prop-name">anchorOriginBottomLeftCircular</span> | <span class="prop-name">.MuiBadge-anchorOriginBottomLeftCircular</span> | Styles applied to the root element if `anchorOrigin={{ 'bottom', 'left' }} overlap="circular"`.
 | <span class="prop-name">invisible</span> | <span class="prop-name">.MuiBadge-invisible</span> | Pseudo-class to the badge `span` element if `invisible={true}`.
 
 You can override the style of the component thanks to one of these customization points:

docs/pages/api-docs/circular-progress.md

@@ -37,7 +37,7 @@ The `MuiCircularProgress` name can be used for providing [default props](/custom
 | <span class="prop-name">disableShrink</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, the shrink animation is disabled. This only works if variant is `indeterminate`. |
 | <span class="prop-name">size</span> | <span class="prop-type">number<br>&#124;&nbsp;string</span> | <span class="prop-default">40</span> | The size of the circle. If using a number, the pixel unit is assumed. If using a string, you need to provide the CSS unit, e.g '3rem'. |
 | <span class="prop-name">thickness</span> | <span class="prop-type">number</span> | <span class="prop-default">3.6</span> | The thickness of the circle. |
-| <span class="prop-name">value</span> | <span class="prop-type">number</span> | <span class="prop-default">0</span> | The value of the progress indicator for the determinate and static variants. Value between 0 and 100. |
+| <span class="prop-name">value</span> | <span class="prop-type">number</span> | <span class="prop-default">0</span> | The value of the progress indicator for the determinate variant. Value between 0 and 100. |
 | <span class="prop-name">variant</span> | <span class="prop-type">'determinate'<br>&#124;&nbsp;'indeterminate'<br>&#124;&nbsp;'static'</span> | <span class="prop-default">'indeterminate'</span> | The variant to use. Use indeterminate when there is no progress value. |
 
 The `ref` is forwarded to the root element.
@@ -51,12 +51,14 @@ Any other props supplied will be provided to the root element (native element).
 | <span class="prop-name">root</span> | <span class="prop-name">.MuiCircularProgress-root</span> | Styles applied to the root element.
 | <span class="prop-name">static</span> | <span class="prop-name">.MuiCircularProgress-static</span> | Styles applied to the root element if `variant="static"`.
 | <span class="prop-name">indeterminate</span> | <span class="prop-name">.MuiCircularProgress-indeterminate</span> | Styles applied to the root element if `variant="indeterminate"`.
+| <span class="prop-name">determinate</span> | <span class="prop-name">.MuiCircularProgress-determinate</span> | Styles applied to the root element if `variant="determinate"`.
 | <span class="prop-name">colorPrimary</span> | <span class="prop-name">.MuiCircularProgress-colorPrimary</span> | Styles applied to the root element if `color="primary"`.
 | <span class="prop-name">colorSecondary</span> | <span class="prop-name">.MuiCircularProgress-colorSecondary</span> | Styles applied to the root element if `color="secondary"`.
 | <span class="prop-name">svg</span> | <span class="prop-name">.MuiCircularProgress-svg</span> | Styles applied to the `svg` element.
 | <span class="prop-name">circle</span> | <span class="prop-name">.MuiCircularProgress-circle</span> | Styles applied to the `circle` svg path.
 | <span class="prop-name">circleStatic</span> | <span class="prop-name">.MuiCircularProgress-circleStatic</span> | Styles applied to the `circle` svg path if `variant="static"`.
 | <span class="prop-name">circleIndeterminate</span> | <span class="prop-name">.MuiCircularProgress-circleIndeterminate</span> | Styles applied to the `circle` svg path if `variant="indeterminate"`.
+| <span class="prop-name">circleDeterminate</span> | <span class="prop-name">.MuiCircularProgress-circleDeterminate</span> | Styles applied to the `circle` svg path if `variant="determinate"`.
 | <span class="prop-name">circleDisableShrink</span> | <span class="prop-name">.MuiCircularProgress-circleDisableShrink</span> | Styles applied to the `circle` svg path if `disableShrink={true}`.
 
 You can override the style of the component thanks to one of these customization points: