Merge branch 'master' into unstyled-menu

.circleci/config.yml

@@ -234,12 +234,6 @@ jobs:
       - run:
           name: '`yarn docs:i18n` changes committed?'
           command: git diff --exit-code
-      - run:
-          name: '`yarn framer:build` changes committed?'
-          command: yarn workspace framer build
-      - run:
-          name: '`yarn workspace framer build` changes committed?'
-          command: git diff --exit-code
       - run:
           name: '`yarn extract-error-codes` changes committed?'
           command: |

.eslintignore

@@ -7,8 +7,6 @@
 /examples/gatsby/public/
 /examples/preact/config
 /examples/preact/scripts
-# auto-generated by Framer
-/framer/Material-UI.framerfx/design/document.json
 /packages/mui-codemod/lib
 /packages/mui-codemod/src/*/*.test/*
 /packages/mui-icons-material/fixtures

.eslintrc.js

@@ -343,13 +343,6 @@ module.exports = {
         'react/static-property-placement': 'off',
       },
     },
-    {
-      files: ['framer/Material-UI.framerfx/code/**/*.tsx'],
-      rules: {
-        // framer requires named exports
-        'import/prefer-default-export': 'off',
-      },
-    },
     {
       files: ['packages/typescript-to-proptypes/src/**/*.ts'],
       rules: {

CHANGELOG.md

@@ -1,5 +1,70 @@
 # [Versions](https://mui.com/versions/)
 
+## 5.4.2
+
+_Feb 15, 2022_
+
+A big thanks to the 16 contributors who made this release possible. Here are some highlights ✨:
+
+- 🛠 @sydneyjodon-wk improved propTypes of the ToggleButton components (#30883)
+- Several 🐛 bug fixes and 📚 documentation improvements
+
+### `@mui/material@5.4.2`
+
+- [Select] Allow customizing Select based on its variant (#30788) @michaldudak
+- [Portal] Re-export 'Portal' in material (#31003) @liradb2000
+- [ToggleButton] Add prop types for `onClick` and `onChange` (#30883) @sydneyjodon-wk
+- [Typescript] Added TypeText declaration to the exports file (#30890) @agauravdev
+
+### `@mui/system@5.4.2`
+
+- [system] Fix broken behavior when breakpoints input are not ordered (#30996) @mnajdova
+
+### `@mui/lab@5.0.0-alpha.69`
+
+- [DatePicker] Fix passing clearable prop (#30786) @alisasanib
+
+### `@mui/joy@5.0.0-alpha.15`
+
+- [Joy] Improve variant customization experience (#30878) @siriwatknp
+- [Joy] Make `sx` prop work in Joy (#30955) @siriwatknp
+
+### Framer
+
+- [design] Remove framer components (#30983) @mbrookes
+- [design] Remove framer leftovers (#31070) @michaldudak
+
+### Docs
+
+- [docs] Update installation guide of the icons package (#31026) @huyenltnguyen
+- [docs] Improve the indication for the legacy APIs (#30995) @mnajdova
+- [docs] Specify which props are added in the default `shouldForwardProp` option (#30978) @mnajdova
+- [docs] Fix layout shift on loading (#31017) @oliviertassinari
+- [docs] Increase scroll affordance in wide tables (#30713) @danilo-leal
+- [docs] Fix look & feel of the Masonry demos (#30971) @oliviertassinari
+- [docs] Improve Base component demos (#30884) @danilo-leal
+- [docs] Use full product names (Material UI, MUI System) (#30960) @oliviertassinari
+- [docs] Prefer useEnhancedEffect to avoid server side warnings (#30977) @mnajdova
+- [docs] Fix force redirection to a different locale (#30967) @oliviertassinari
+- [docs] Add live Tailwind CSS demo (#30966) @oliviertassinari
+- [website] Add banner for promoting priority open roles (#31076) @danilo-leal
+- [website] Open Full-stack Engineer role for studio (#31038) @newguy-123
+- [website] Minor security improvements (#31062) @oliviertassinari
+- [website] Improve title of open roles (#30963) @DanailH
+- [website] Add BIMI avatar (#30444) @oliviertassinari
+- [website] Add Sycamore to About page (#31000) @samuelsycamore
+
+### Core
+
+- [benchmark] Add missing dependency (#30994) @michaldudak
+- [core] Bump date-io version (#31016) @michaldudak
+- [core] Fix typo in useSlider (#31061) @ryohey
+- [core] Remove unused draft-js types package (#30993) @michaldudak
+- [test] Test if certain Base members are exported from Material UI (#31067) @michaldudak
+- [core] Remove dead code (#31064) @oliviertassinari
+
+All contributors of this release in alphabetical order: @agauravdev, @alisasanib, @DanailH, @danilo-leal, @huyenltnguyen, @l10nbot, @liradb2000, @mbrookes, @michaldudak, @mnajdova, @newguy-123, @oliviertassinari, @ryohey, @samuelsycamore, @siriwatknp, @sydneyjodon-wk
+
 ## 5.4.1
 
 <!-- generated comparing v5.4.0..master -->

benchmark/package.json

@@ -15,9 +15,9 @@
     "@emotion/react": "^11.7.1",
     "@emotion/styled": "^11.6.0",
     "@mdx-js/react": "^2.0.0",
-    "@mui/material": "^5.4.1",
-    "@mui/styles": "^5.4.1",
-    "@mui/system": "^5.4.1",
+    "@mui/material": "^5.4.2",
+    "@mui/styles": "^5.4.2",
+    "@mui/system": "^5.4.2",
     "@styled-system/css": "^5.1.5",
     "benchmark": "^2.1.4",
     "playwright": "^1.17.1",

docs/data/material/components/accordion/accordion-zh.md

@@ -2,7 +2,7 @@
 product: material
 title: React Accordion （扩展面板）组件
 components: Accordion, AccordionActions, AccordionDetails, AccordionSummary
-githubLabel: 'component: Accordion'
+githubLabel: 'component: accordion'
 materialDesign: https://material.io/archive/guidelines/components/expansion-panels.html
 waiAria: 'https://www.w3.org/TR/wai-aria-practices/#accordion'
 ---
@@ -41,7 +41,7 @@ waiAria: 'https://www.w3.org/TR/wai-aria-practices/#accordion'
 <Accordion TransitionProps={{ unmountOnExit: true }} />
 ```
 
-不过对所有情况下的性能优化，这并不是灵丹妙药。 Be sure to identify bottlenecks first and then try out these optimization strategies.
+不过对所有情况下的性能优化，这并不是灵丹妙药。 一定要先确定哪些地方存在瓶颈，然后再尝试这些优化策略。
 
 ## 无障碍设计
 

docs/data/material/components/alert/alert-zh.md

@@ -2,7 +2,7 @@
 product: material
 title: React Alert （警告提示）组件
 components: Alert, AlertTitle
-githubLabel: 'component: Alert'
+githubLabel: 'component: alert'
 waiAria: 'https://www.w3.org/TR/wai-aria-practices/#alert'
 ---
 

docs/data/material/components/app-bar/app-bar-zh.md

@@ -136,7 +136,7 @@ function HideOnScroll(props) {
   const trigger = useScrollTrigger();
   return (
     <Slide in={!trigger}>
-      <div>你好</div>
+      <div>Hello</div>
     </Slide>
   );
 }

docs/data/material/components/autocomplete/autocomplete-zh.md

@@ -281,12 +281,7 @@ const filterOptions = (options, { inputValue }) => matchSorter(options, inputVal
 <Autocomplete
   onKeyDown={(event) => {
     if (event.key === 'Enter') {
-      // 阻止默认的 'Enter' 行为.
-      event.defaultMuiPrevented = true;
-      // 你的处理程序代码
-    }
-  }}
-/>
+      // Prevent's default 'Enter' behavior.
       event.defaultMuiPrevented = true;
       // your handler code
     }

docs/data/material/components/avatars/avatars-zh.md

@@ -23,7 +23,7 @@ githubLabel: 'component: avatar'
 
 {{"demo": "LetterAvatars.js"}}
 
-You can use different background colors for the avatar. The following demo generates the color based on the name of the person.
+你可以为头像添加不同的背景颜色。 下面的例子基于人物的姓名生成背景色。
 
 {{"demo": "BackgroundLetterAvatars.js"}}
 
@@ -57,13 +57,13 @@ You can use different background colors for the avatar. The following demo gener
 
 ## 分组
 
-`AvatarGroup` renders its children as a stack. `AvatarGroup` renders its children as a stack. Use the `max` prop to limit the number of avatars.
+`AvatarGroup` 将其子元素渲染为堆栈。 用 `max` 属性限制渲染的头像数量。
 
 {{"demo": "GroupAvatars.js"}}
 
-### Total avatars
+### 头像总数
 
-If you need to control the total number of avatars not shown, you can use the `total` prop.
+您可以使用 `total` 属性来控制未显示的头像总数。
 
 {{"demo": "TotalAvatars.js"}}
 

docs/data/material/components/backdrop/backdrop-zh.md

@@ -1,8 +1,8 @@
 ---
 product: material
-title: React Backdrop（背景暗化）组件
+title: React Backdrop（蒙版）组件
 components: Backdrop, BackdropUnstyled
-githubLabel: '组件：背景暗化'
+githubLabel: 'component: backdrop'
 ---
 
 # 蒙版
@@ -19,7 +19,7 @@ githubLabel: '组件：背景暗化'
 
 ## 素颜模式
 
-The backdrop also comes with the Base package. The backdrop also comes with the unstyled package. It's ideal for doing heavy customizations and minimizing bundle size. It's ideal for doing heavy customizations and minimizing bundle size.
+蒙版组件同样来自基础包。 当你有大量的自定义样式需求时，使用它可以更好的帮助你控制住包的大小。
 
 ```js
 import BackdropUnstyled from '@mui/base/BackdropUnstyled';

docs/data/material/components/badges/badges-zh.md

@@ -65,7 +65,7 @@ Use `color` prop to apply theme palette to component.
 
 ## Unstyled
 
-Badge 组件还有一个无样式的版本。 It's ideal for doing heavy customizations and minimizing bundle size.
+Badge 组件还有一个无样式的版本。 当你有大量的自定义样式需求时，使用它可以更好的帮助你控制住包的大小。
 
 ```js
 import BadgeUnstyled from '@mui/base/BadgeUnstyled';
@@ -75,6 +75,6 @@ import BadgeUnstyled from '@mui/base/BadgeUnstyled';
 
 ## Accessibility
 
-You can't rely on the content of the badge to be announced correctly. You can't rely on the content of the badge to be announced correctly. You should provide a full description, for instance, with `aria-label`: 那您应该提供一个完整的描述，例如， 使用 `aria-label`：
+您不能指望徽章的内容被正确的读出。 您应该提供一个完整的描述，例如， 使用 `aria-label`：
 
 {{"demo": "AccessibleBadges.js"}}

docs/data/material/components/bottom-navigation/bottom-navigation-zh.md

@@ -32,6 +32,6 @@ materialDesign: https://material.io/components/bottom-navigation
 
 {{"demo": "FixedBottomNavigation.js", "bg": true, "iframe": true, "maxWidth": 600}}
 
-## Third-party routing library（第三方路由库）
+## 第三方路由库
 
-One frequent use case is to perform navigation on the client only, without an HTTP round-trip to the server. The `BottomNavigationAction` component provides the `component` prop to handle this use case. Here is a [more detailed guide](/guides/routing/).
+一种常见的用例是仅在客户端上执行导航，而无需通过 HTTP 往返服务器。 针对这种用法，`Link` 组件了提供 `component` 属性来适配它。 这里是 [更详细的指南](/guides/routing/)。

docs/data/material/components/box/box-zh.md

@@ -18,19 +18,19 @@ githubLabel: 'component: Box'
 
 ## `sx` 属性
 
-All system properties are available via the [`sx` prop](/system/basics/#the-sx-prop). In addition, the `sx` prop allows you to specify any other CSS rules you may need. 下面是一个如何使用的示例： 此外，`sx` 属性允许您指定您可能需要的任何其他 CSS 样式。 In addition, the `sx` prop allows you to specify any other CSS rules you may need. 下面是一个如何使用的示例：
+所有的样式功能都可以通过 [`sx` 属性 ](/system/basics/#the-sx-prop)设置。 同时，您也可通过`sx` 属性指定任何您想添加的 CSS 规则。 下面是一个如何使用的示例：
 
 {{"demo": "BoxSx.js", "defaultCodeOpen": true }}
 
 ## 覆盖 Material-UI 组件
 
-Box 组件能够封装您的组件。 It creates a new DOM element, a `<div>` that by default can be changed with the `component` prop. 假设反之你想使用一个 `<span>`： 假设反之你想使用一个 `<span>`：
+Box 组件能够封装您的组件。 它创建了一个新的 DOM 元素，默认情况下为 `<div>`，并可以通过 ` component ` 属性进行更改。 假设您想使用 `<span>`：
 
 {{"demo": "BoxComponent.js", "defaultCodeOpen": true }}
 
 当所需的更改与新的 DOM 元素分开时比较有效。 例如，您可以使用这个方法来更改边距。
 
-但是，有时您必须针对到底层的 DOM 元素。 As an example, you may want to change the border of the Button. The Button component defines its own styles. 所以使用 CSS 继承是于事无补的。 想要解决这个问题，可以将[`sx`](/system/basics/#the-sx-prop)作为 MUI 组件的 props 使用
+但是，有时您的目标是下层的 DOM 元素。 例如，你可能想要更改 Button 组件的边框。 Button 组件已经定义好了它自己的样式。 所以使用 CSS 继承是于事无补的。 为了回避这个CSS继承无效的问题， 如该组件的子组件是一个 Material-UI 组件，您可直接在该组件上定义 [`sx`](/system/basics/#the-sx-prop) 属性。
 
 ```diff
 -<Box sx={{ border: '1px dashed grey' }}>
@@ -39,7 +39,7 @@ Box 组件能够封装您的组件。 It creates a new DOM element, a `<div>` th
 +<Button sx={{ border: '1px dashed grey' }}>保存</Button>
 ```
 
-For non-Material-UI components, use the `component` prop.
+对于非 MUI 组件，使用 `component` 属性。
 
 ```diff
 -<Box sx={{ border: '1px dashed grey' }}>

docs/data/material/components/chips/chips.md

@@ -55,7 +55,7 @@ You can use the following actions.
 
 You can add ornaments to the beginning of the component.
 
-Use the `avatar` prop to added a avatar or use the `icon` prop to added a icon.
+Use the `avatar` prop to add an avatar or use the `icon` prop to add an icon.
 
 ### Avatar chip
 

docs/data/material/components/icons/icons.md

@@ -36,15 +36,7 @@ yarn add @mui/icons-material
 
 These components use the MUI `SvgIcon` component to render the SVG path for each icon, and so have a peer-dependency on `@mui/material`.
 
-If you aren't already using MUI in your project, you can add it with:
-
-```sh
-// with npm
-npm install @mui/material
-
-// with yarn
-yarn add @mui/material
-```
+If you aren't already using Material UI in your project, you can add it following the [installation guide](/getting-started/installation/).
 
 ### Usage
 

docs/data/material/components/stack/stack-pt.md

@@ -7,7 +7,7 @@ githubLabel: 'component: Stack'
 
 # Stack
 
-<p class="description">The Stack component manages layout of immediate children along the vertical or horizontal axis with optional spacing and/or dividers between each child.</p>
+<p class="description">O componente Stack gerencia o leiaute de filhos imediatos ao longo do eixo vertical ou horizontal com espaçamento e/ou divisão opcional entre cada filho.</p>
 
 {{"component": "modules/components/ComponentLinkHeader.js"}}
 

docs/data/material/getting-started/example-projects/example-projects-pt.md

@@ -8,14 +8,14 @@ Você pode encontrar alguns exemplos de projetos no repositório [GitHub](https:
 
 <!-- #default-branch-switch -->
 
-- [Next.js](https://github.com/mui/material-ui/tree/next/examples/nextjs) ([Versão TypeScript](https://github.com/mui/material-ui/tree/next/examples/nextjs-with-typescript))
-- [Create React App](https://github.com/mui/material-ui/tree/next/examples/create-react-app) ([versão TypeScript](https://github.com/mui/material-ui/tree/next/examples/create-react-app-with-typescript))
+- [Next.js](https://github.com/mui/material-ui/tree/master/examples/nextjs) ([TypeScript version](https://github.com/mui/material-ui/tree/master/examples/nextjs-with-typescript))
+- [Create React App](https://github.com/mui/material-ui/tree/master/examples/create-react-app) ([TypeScript version](https://github.com/mui/material-ui/tree/master/examples/create-react-app-with-typescript))
 - [Remix](https://github.com/mui/material-ui/tree/master/examples/remix-with-typescript)
 - [Gatsby](https://github.com/mui/material-ui/tree/master/examples/gatsby)
 - [Preact](https://github.com/mui/material-ui/tree/master/examples/preact)
 - [CDN](https://github.com/mui/material-ui/tree/master/examples/cdn)
 - [Plain server-side](https://github.com/mui/material-ui/tree/master/examples/ssr)
-- [Tailwind CSS](https://github.com/mui/material-ui/tree/master/examples/tailwind)
+- [Tailwind CSS](https://github.com/mui/material-ui/tree/master/examples/tailwind-css)
 - [Vite.js](https://github.com/mui/material-ui/tree/master/examples/vitejs)
 - [Use styled-components as style engine](https://github.com/mui/material-ui/tree/master/examples/create-react-app-with-styled-components) ([TypeScript version](https://github.com/mui/material-ui/tree/master/examples/create-react-app-with-styled-components-typescript))
 

docs/data/material/getting-started/example-projects/example-projects-zh.md

@@ -15,7 +15,7 @@
 - [Preact](https://github.com/mui/material-ui/tree/master/examples/preact)
 - [CDN](https://github.com/mui/material-ui/tree/master/examples/cdn)
 - [Plain server-side](https://github.com/mui/material-ui/tree/master/examples/ssr)
-- [Tailwind CSS](https://github.com/mui/material-ui/tree/master/examples/tailwind)
+- [Tailwind CSS](https://github.com/mui/material-ui/tree/master/examples/tailwind-css)
 - [Vite.js](https://github.com/mui/material-ui/tree/master/examples/vitejs)
 - [Use styled-components as style engine](https://github.com/mui/material-ui/tree/master/examples/create-react-app-with-styled-components) ([TypeScript version](https://github.com/mui/material-ui/tree/master/examples/create-react-app-with-styled-components-typescript))