Merge branch 'next' into fix/pickers/clickaway-react17

.circleci/config.yml

@@ -104,8 +104,8 @@ commands:
                 name: Save playwright cache
                 key: v5-playwright-{{ arch }}-{{ checksum "/tmp/playwright_info.json" }}
                 paths:
-            # Keep path in sync with "Install js dependencies"
-            # Can't use environment variables for `save_cache` paths (tested in https://app.circleci.com/pipelines/github/mui-org/material-ui/37813/workflows/5b1e207f-ac8b-44e7-9ba4-d0f9a01f5c55/jobs/223370)
+                  # Keep path in sync with "Install js dependencies"
+                  # Can't use environment variables for `save_cache` paths (tested in https://app.circleci.com/pipelines/github/mui-org/material-ui/37813/workflows/5b1e207f-ac8b-44e7-9ba4-d0f9a01f5c55/jobs/223370)
                   - /tmp/pw-browsers
 
 jobs:
@@ -168,7 +168,7 @@ jobs:
             fi
       - run:
           name: Coverage
-          command: bash <(curl -s https://codecov.io/bash) -Z -C $CIRCLE_SHA1
+          command: bash <(curl -s https://codecov.io/bash) -Z
   test_lint:
     <<: *defaults
     steps:

docs/pages/api-docs/backdrop-unstyled.js

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import ApiPage from 'docs/src/modules/components/ApiPage';
+import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
+import jsonPageContent from './backdrop-unstyled.json';
+
+export default function Page(props) {
+  const { descriptions, pageContent } = props;
+  return <ApiPage descriptions={descriptions} pageContent={pageContent} />;
+}
+
+Page.getInitialProps = () => {
+  const req = require.context(
+    'docs/translations/api-docs/backdrop-unstyled',
+    false,
+    /backdrop-unstyled.*.json$/,
+  );
+  const descriptions = mapApiPageTranslations(req);
+
+  return {
+    descriptions,
+    pageContent: jsonPageContent,
+  };
+};

docs/pages/api-docs/backdrop-unstyled.json

@@ -0,0 +1,26 @@
+{
+  "props": {
+    "children": { "type": { "name": "node" } },
+    "classes": { "type": { "name": "object" }, "default": "{}" },
+    "component": { "type": { "name": "elementType" } },
+    "components": {
+      "type": { "name": "shape", "description": "{ Root?: elementType }" },
+      "default": "{}"
+    },
+    "componentsProps": { "type": { "name": "object" }, "default": "{}" },
+    "invisible": { "type": { "name": "bool" } }
+  },
+  "name": "BackdropUnstyled",
+  "styles": {
+    "classes": ["root", "invisible"],
+    "globalClasses": { "root": "MuiBackdrop-root", "invisible": "MuiBackdrop-invisible" },
+    "name": null
+  },
+  "spread": true,
+  "forwardsRefTo": "HTMLDivElement",
+  "filename": "/packages/material-ui-unstyled/src/BackdropUnstyled/BackdropUnstyled.js",
+  "inheritance": null,
+  "demos": "<ul><li><a href=\"/components/backdrop/\">Backdrop</a></li></ul>",
+  "styledComponent": true,
+  "cssComponent": false
+}

docs/pages/api-docs/backdrop.json

@@ -2,7 +2,13 @@
   "props": {
     "open": { "type": { "name": "bool" }, "required": true },
     "children": { "type": { "name": "node" } },
-    "classes": { "type": { "name": "object" } },
+    "classes": { "type": { "name": "object" }, "default": "{}" },
+    "component": { "type": { "name": "elementType" } },
+    "components": {
+      "type": { "name": "shape", "description": "{ Root?: elementType }" },
+      "default": "{}"
+    },
+    "componentsProps": { "type": { "name": "object" }, "default": "{}" },
     "invisible": { "type": { "name": "bool" } },
     "sx": { "type": { "name": "object" } },
     "transitionDuration": {

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

@@ -9,6 +9,11 @@
     "children": { "type": { "name": "custom", "description": "node" } },
     "classes": { "type": { "name": "object" } },
     "component": { "type": { "name": "elementType" } },
+    "components": {
+      "type": { "name": "shape", "description": "{ Root?: elementType }" },
+      "default": "{}"
+    },
+    "componentsProps": { "type": { "name": "object" }, "default": "{}" },
     "ContainerComponent": {
       "type": { "name": "custom", "description": "element type" },
       "default": "'li'"

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

@@ -5,7 +5,8 @@
     "component": { "type": { "name": "elementType" } },
     "dense": { "type": { "name": "bool" } },
     "disableGutters": { "type": { "name": "bool" } },
-    "ListItemClasses": { "type": { "name": "object" } }
+    "ListItemClasses": { "type": { "name": "object" } },
+    "sx": { "type": { "name": "object" } }
   },
   "name": "MenuItem",
   "styles": {
@@ -18,6 +19,6 @@
   "filename": "/packages/material-ui/src/MenuItem/MenuItem.js",
   "inheritance": { "component": "ListItem", "pathname": "/api/list-item/" },
   "demos": "<ul><li><a href=\"/components/menus/\">Menus</a></li></ul>",
-  "styledComponent": false,
+  "styledComponent": true,
   "cssComponent": false
 }

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

@@ -27,6 +27,7 @@
     "required": { "type": { "name": "bool" } },
     "rows": { "type": { "name": "union", "description": "number<br>&#124;&nbsp;string" } },
     "startAdornment": { "type": { "name": "node" } },
+    "sx": { "type": { "name": "object" } },
     "type": { "type": { "name": "string" }, "default": "'text'" },
     "value": { "type": { "name": "any" } }
   },
@@ -57,6 +58,6 @@
   "filename": "/packages/material-ui/src/OutlinedInput/OutlinedInput.js",
   "inheritance": { "component": "InputBase", "pathname": "/api/input-base/" },
   "demos": "<ul><li><a href=\"/components/text-fields/\">Text Fields</a></li></ul>",
-  "styledComponent": false,
+  "styledComponent": true,
   "cssComponent": false
 }

docs/pages/api-docs/switch.json

@@ -30,6 +30,7 @@
       "type": { "name": "enum", "description": "'medium'<br>&#124;&nbsp;'small'" },
       "default": "'medium'"
     },
+    "sx": { "type": { "name": "object" } },
     "value": { "type": { "name": "any" } }
   },
   "name": "Switch",
@@ -42,6 +43,7 @@
       "colorPrimary",
       "colorSecondary",
       "sizeSmall",
+      "sizeMedium",
       "checked",
       "disabled",
       "input",
@@ -56,6 +58,6 @@
   "filename": "/packages/material-ui/src/Switch/Switch.js",
   "inheritance": { "component": "IconButton", "pathname": "/api/icon-button/" },
   "demos": "<ul><li><a href=\"/components/switches/\">Switches</a></li>\n<li><a href=\"/components/transfer-list/\">Transfer List</a></li></ul>",
-  "styledComponent": false,
+  "styledComponent": true,
   "cssComponent": false
 }

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

@@ -15,6 +15,7 @@
       },
       "default": "'medium'"
     },
+    "sx": { "type": { "name": "object" } },
     "value": { "type": { "name": "any" } }
   },
   "name": "ToggleButtonGroup",
@@ -28,6 +29,6 @@
   "filename": "/packages/material-ui/src/ToggleButtonGroup/ToggleButtonGroup.js",
   "inheritance": null,
   "demos": "<ul><li><a href=\"/components/toggle-button/\">Toggle Button</a></li></ul>",
-  "styledComponent": false,
+  "styledComponent": true,
   "cssComponent": false
 }

docs/pages/company/jobs.js → docs/pages/company/careers.js

@@ -2,10 +2,10 @@ import * as React from 'react';
 import TopLayoutCompany from 'docs/src/modules/components/TopLayoutCompany';
 import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
-const pageFilename = 'company/jobs';
-const requireDemo = require.context('docs/src/pages/company/jobs', false, /\.(js|tsx)$/);
+const pageFilename = 'company/careers';
+const requireDemo = require.context('docs/src/pages/company/careers', false, /\.(js|tsx)$/);
 const requireRaw = require.context(
-  '!raw-loader!../../src/pages/company/jobs',
+  '!raw-loader!../../src/pages/company/careers',
   false,
   /\.(js|md|tsx)$/,
 );

docs/pages/company/lead-designer.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import TopLayoutCompany from 'docs/src/modules/components/TopLayoutCompany';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
+
+const pageFilename = 'company/lead-designer';
+const requireDemo = require.context('docs/src/pages/company/lead-designer', false, /\.(js|tsx)$/);
+const requireRaw = require.context(
+  '!raw-loader!../../src/pages/company/lead-designer',
+  false,
+  /\.(js|md|tsx)$/,
+);
+
+export default function Page({ demos, docs }) {
+  return <TopLayoutCompany demos={demos} docs={docs} requireDemo={requireDemo} />;
+}
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};

docs/pages/versions.js

@@ -27,8 +27,13 @@ async function getBranches() {
       Authorization: `Basic ${Buffer.from(githubAuthorizationToken).toString('base64')}`,
     },
   });
-  const branches = await result.json();
-  return branches;
+  const text = await result.text();
+
+  if (result.status !== 200) {
+    throw new Error(text);
+  }
+
+  return JSON.parse(text);
 }
 
 Page.getInitialProps = async () => {

docs/src/modules/components/AppFooter.js

@@ -2,7 +2,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import Interpolate from '@trendmicro/react-interpolate';
-import { withStyles } from '@material-ui/core/styles';
+import { styled, withStyles } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
 import Grid from '@material-ui/core/Grid';
 import Container from '@material-ui/core/Container';
@@ -48,8 +48,26 @@ const styles = (theme) => ({
   version: {
     marginTop: theme.spacing(3),
   },
+  careers: {
+    display: 'flex',
+  },
 });
 
+const Badge = styled('span')(({ theme }) => ({
+  alignSelf: 'center',
+  padding: '1px 3px',
+  backgroundColor: theme.palette.mode === 'light' ? 'rgb(235, 87, 87)' : '#c55e5e',
+  color: '#fff',
+  borderRadius: 3,
+  marginLeft: 6,
+  fontSize: '10px',
+  lineHeight: '1.3',
+  textTransform: 'uppercase',
+  fontWeight: '600',
+  letterSpacing: '0.5px',
+  display: 'inline-block',
+}));
+
 function AppFooter(props) {
   const { classes } = props;
   const userLanguage = useUserLanguage();
@@ -142,9 +160,12 @@ function AppFooter(props) {
                     Contact Us
                   </Link>
                 </li>
-                <li>
-                  <Link color="inherit" variant="body2" href="/company/jobs/">
-                    Jobs
+                <li className={classes.careers}>
+                  <Link color="inherit" variant="body2" href="/company/careers/">
+                    Careers
+                  </Link>
+                  <Link color="inherit" variant="body2" href="/company/careers/">
+                    <Badge>hiring</Badge>
                   </Link>
                 </li>
               </ul>

docs/src/pages/company/careers/careers.md

@@ -0,0 +1,52 @@
+# We build the next generation of tools for UI development
+
+<p class="description">Material-UI is focused on making React UI development faster, simpler, and accessible to more people.</p>
+
+The open-source project started back in 2014 to unify React and Material Design. Today, Material-UI has grown to become one of the world's most popular React UI libraries, backed by a vibrant community of more than 2M developers in over 180 countries.
+
+The company is bootstrapped (so far). It was incorporated in mid 2019 and yet growing fast (x2-3 YoY). We doubled the team in 2020 and are on track to do the same in 2021.
+
+## Our values
+
+- **Customer obsessed**. We put our customers front & center. We focus on delivering web experiences that feel amazing. We ask questions. We experiment with new ideas.
+- **Transparency**. Most of our work is public. We share what we work on regularly in the open. We collect feedback as soon and as frequently as possible. We learn from each other and
+grow from it.
+- **Freedom**. We work from anywhere in the world. We keep meetings to a minimum, preferring asynchronous and written communication.
+- **Autonomy**. We want to create a safe, high-trust team. We want you to be able to feel invested in your work and proud of it.
+- **Excellence**. We're aiming high, and we know it. Even the smallest details are important to us. We only want the best for each other and our customers.
+
+## Perks & benefits
+
+- **Remote**: Our entire company is distributed.
+- **Gatherings**: We meet up once or twice a year for a short week of meetings, events, and fun!
+- **Equipment**: Material-UI will let you choose new hardware of your choice (up to $2,500 USD).
+- **Flexible hours**: We work from different timezones. When the work is done doesn't really matter.
+- **Time off**: We provide five weeks of paid time off.
+
+## Open roles
+
+We're currently looking for help in the following areas:
+
+### [Lead Designer](/company/lead-designer/)
+
+We are looking for a lead designer to own most of our design work.
+
+### [Senior Software Engineer](/company/software-engineer/)
+
+<span style="font-size: 14px;">Two positions (one design system team, one advanced components team).</span>
+
+We are looking for senior software engineers to help support our open-source components, assist the Material-UI community, and grow our enterprise edition.
+
+## FAQs
+
+### Are there application deadlines?
+
+No. If a job is visible on our careers page, then you can still apply.
+
+### Does Material-UI do whiteboarding during interviews?
+
+No. We ask applicants to complete challenges that are close to their future day-to-day contributions.
+
+### Does Material-UI offer contractor job opportunities?
+
+Yes. People outside of France will be hired as full-time contractors. (Benefits may vary.)