[core] Batch small changes (#23678)

.eslintrc.js

@@ -112,7 +112,7 @@ module.exports = {
         // Otherwise the rule thinks inner props = outer props
         // But in TypeScript we want to know that a certain prop is defined during render
         // while it can be ommitted from the callsite.
-        // Then defaultProps (or default values) will make sure the the prop is defined during render
+        // Then defaultProps (or default values) will make sure that the prop is defined during render
         allowRequiredDefaults: true,
       },
     ],

docs/public/_redirects

@@ -21,6 +21,7 @@ https://material-ui.dev/* https://material-ui.com/:splat 301!
 /r/ts-issue-template https://www.typescriptlang.org/play/#code/JYWwDg9gTgLgBAKjgQwM5wEoFNkGN4BmUEIcA5FDvmQNwBQokscA3nXHAPSdwwAWWOLhKQAdllEx0ATwgBXOHNRYAJnQC+cIiXIABEMhhYowZABsAtHOCdhlMnToE5o-MAii4AESwgIACgBKVnYuHgBNeSghCBUsDSA 302
 /r/custom-component-variants /customization/components/#adding-new-component-variants
 /r/x-license https://material-ui.com/store/items/material-ui-x/
+/r/migration-v4 /guides/migration-v4/
 
 # Legacy redirection
 # Added in chronological order

docs/src/modules/components/DemoToolbar.js

@@ -308,27 +308,6 @@ export default function DemoToolbar(props) {
     }
   };
 
-  const handleStackBlitzClick = () => {
-    const demoConfig = getDemoConfig(demoData);
-    const form = document.createElement('form');
-    form.method = 'POST';
-    form.target = '_blank';
-    form.action = 'https://stackblitz.com/run';
-    addHiddenInput(form, 'project[template]', 'javascript');
-    addHiddenInput(form, 'project[title]', demoConfig.title);
-    addHiddenInput(form, 'project[description]', demoConfig.description);
-    addHiddenInput(form, 'project[dependencies]', JSON.stringify(demoConfig.dependencies));
-    addHiddenInput(form, 'project[devDependencies]', JSON.stringify(demoConfig.devDependencies));
-    Object.keys(demoConfig.files).forEach((key) => {
-      const value = demoConfig.files[key];
-      addHiddenInput(form, `project[files][${key}]`, value);
-    });
-    document.body.appendChild(form);
-    form.submit();
-    document.body.removeChild(form);
-    handleMoreClose();
-  };
-
   const createHandleCodeSourceLink = (anchor) => async () => {
     try {
       await copy(`${window.location.href.split('#')[0]}#${anchor}`);
@@ -492,6 +471,7 @@ export default function DemoToolbar(props) {
           </Tooltip>
           <IconButton
             onClick={handleMoreClick}
+            aria-label={t('seeMore')}
             aria-owns={anchorEl ? 'demo-menu-more' : undefined}
             aria-haspopup="true"
             {...getControlProps(7)}
@@ -525,16 +505,6 @@ export default function DemoToolbar(props) {
             >
               {t('viewGitHub')}
             </MenuItem>
-            {demoOptions.hideEditButton ? null : (
-              <MenuItem
-                data-ga-event-category="demo"
-                data-ga-event-label={demoOptions.demo}
-                data-ga-event-action="stackblitz"
-                onClick={handleStackBlitzClick}
-              >
-                {t('stackblitz')}
-              </MenuItem>
-            )}
             <MenuItem
               data-ga-event-category="demo"
               data-ga-event-label={demoOptions.demo}

docs/src/pages/components/speed-dial/speed-dial.md

@@ -35,7 +35,7 @@ of the `SpeedDialIcon` component.
 
 ## Persistent action tooltips
 
-The SpeedDialActions tooltips can be displayed persistently so that users don't have to long-press in order to see the tooltip on touch devices.
+The SpeedDialActions tooltips can be displayed persistently so that users don't have to long-press to see the tooltip on touch devices.
 
 It is enabled here across all devices for demo purposes, but in production it could use the `isTouch` logic to conditionally set the prop.
 
@@ -53,12 +53,12 @@ It is enabled here across all devices for demo purposes, but in production it co
 #### Provided
 
 - The Fab has `aria-haspopup`, `aria-expanded` and `aria-controls` attributes.
-- The speed dial actions container has `role="menu"` and `aria-orientation` set acccording to the direction.
+- The speed dial actions container has `role="menu"` and `aria-orientation` set according to the direction.
 - The speed dial actions have `role="menuitem"`, and an `aria-describedby` attribute that references the associated tooltip.
 
 ### Keyboard
 
 - The speed dial opens on focus.
 - The Space and Enter keys trigger the selected speed dial action, and toggle the speed dial open state.
-- The cursor keys move focus to the next or previous speed dial action. (Note that any cursor direction can be used initially to open the speed dial. This enables the expected behavior for the actual or percieved orientation of the speed dial, for example for a screen reader user who percieves the speed dial as a drop-down menu.)
+- The cursor keys move focus to the next or previous speed dial action. (Note that any cursor direction can be used initially to open the speed dial. This enables the expected behavior for the actual or perceived orientation of the speed dial, for example for a screen reader user who perceives the speed dial as a drop-down menu.)
 - The Escape key closes the speed dial and, if a speed dial action was focused, returns focus to the Fab.

docs/src/pages/guides/api/api.md

@@ -25,7 +25,7 @@ Aside from the above composition trade-off, we enforce the following rules:
 
 ### Spread
 
-Props supplied to a component which are not explictly documented, are spread to the root element;
+Props supplied to a component which are not explicitly documented are spread to the root element;
 for instance, the `className` prop is applied to the root.
 
 Now, let's say you want to disable the ripples on the `MenuItem`.

docs/src/pages/system/basics/basics.md

@@ -173,18 +173,18 @@ Pros:
 
 Cons:
 
-- The runtime performance take a hit.
+- The runtime performance takes a hit.
 
-  | Benchmark case                    | Code snippet         | Time normalized |
-  | :-------------------------------- | :------------------- | --------------- |
-  | a. Render 1,000 primitives        | `<div className="">` | 100ms           |
-  | b. Render 1,000 components        | `<Div>`              | 110ms           |
-  | c. Render 1,000 styled components | `<StyledDiv>`        | 160ms           |
-  | d. Render 1,000 Box               | `<Box sx={}>`        | 270ms           |
+  | Benchmark case                    | Code snippet          | Time normalized |
+  | :-------------------------------- | :-------------------- | --------------- |
+  | a. Render 1,000 primitives        | `<div className="…">` | 100ms           |
+  | b. Render 1,000 components        | `<Div>`               | 110ms           |
+  | c. Render 1,000 styled components | `<StyledDiv>`         | 160ms           |
+  | d. Render 1,000 Box               | `<Box sx={…}>`        | 270ms           |
 
   _Head to the [benchmark folder](https://github.com/mui-org/material-ui/tree/next/benchmark/browser) for a reproduction of these metrics._
 
-  We believe that for most applications, it's **fast enough**. There are simple workarounds when performance becomes critical. For instance, when rendering a list with many items, you can use a CSS child selector to have a single "style injection" point (using d. for the wrapper and a. for each item).
+  We believe that for most uses it's **fast enough**, but there are simple workarounds when performance becomes critical. For instance, when rendering a list with many items, you can use a CSS child selector to have a single "style injection" point (using d. for the wrapper and a. for each item).
 
 ## Usage
 

docs/translations/translations.json

@@ -86,7 +86,6 @@
   "skipToContent": "Skip to content",
   "sourceCode": "Source code",
   "spacingUnit": "Spacing unit",
-  "stackblitz": "Edit in StackBlitz (JS only)",
   "stars": "GitHub stars",
   "stickyFooterDescr": "Attach a footer to the bottom of the viewport when page content is short.",
   "stickyFooterTitle": "Sticky footer",

packages/material-ui-docs/package.json

@@ -23,7 +23,7 @@
   },
   "homepage": "https://github.com/mui-org/material-ui/tree/next/packages/material-ui-lab",
   "scripts": {
-    "build": "yarn build:legacy && yarn build:modern &&yarn build:node && yarn build:stable && yarn build:copy-files",
+    "build": "yarn build:legacy && yarn build:modern && yarn build:node && yarn build:stable && yarn build:copy-files",
     "build:legacy": "node ../../scripts/build legacy",
     "build:modern": "echo 'Skip modern build'",
     "build:node": "node ../../scripts/build node",

packages/material-ui-icons/package.json

@@ -23,7 +23,7 @@
   },
   "homepage": "https://material-ui.com/components/icons",
   "scripts": {
-    "build": "yarn build:legacy && yarn build:modern &&yarn build:node && yarn build:stable && yarn build:typings && yarn build:copy-files",
+    "build": "yarn build:legacy && yarn build:modern && yarn build:node && yarn build:stable && yarn build:typings && yarn build:copy-files",
     "build:legacy": "echo 'Skip legacy build'",
     "build:modern": "echo 'Skip modern build'",
     "build:node": "node ../../scripts/build node",

packages/material-ui-styled-engine-sc/package.json

@@ -26,7 +26,7 @@
     "url": "https://opencollective.com/material-ui"
   },
   "scripts": {
-    "build": "yarn build:legacy && yarn build:modern &&yarn build:node && yarn build:stable && yarn build:copy-files",
+    "build": "yarn build:legacy && yarn build:modern && yarn build:node && yarn build:stable && yarn build:copy-files",
     "build:legacy": "node ../../scripts/build legacy",
     "build:modern": "node ../../scripts/build modern",
     "build:node": "node ../../scripts/build node",

packages/material-ui-styled-engine/package.json

@@ -26,7 +26,7 @@
     "url": "https://opencollective.com/material-ui"
   },
   "scripts": {
-    "build": "yarn build:legacy && yarn build:modern &&yarn build:node && yarn build:stable && yarn build:copy-files",
+    "build": "yarn build:legacy && yarn build:modern && yarn build:node && yarn build:stable && yarn build:copy-files",
     "build:legacy": "node ../../scripts/build legacy",
     "build:modern": "node ../../scripts/build modern",
     "build:node": "node ../../scripts/build node",

packages/material-ui-styles/package.json

@@ -26,7 +26,7 @@
     "url": "https://opencollective.com/material-ui"
   },
   "scripts": {
-    "build": "yarn build:legacy && yarn build:modern &&yarn build:node && yarn build:stable && yarn build:copy-files",
+    "build": "yarn build:legacy && yarn build:modern && yarn build:node && yarn build:stable && yarn build:copy-files",
     "build:legacy": "node ../../scripts/build legacy",
     "build:modern": "node ../../scripts/build modern",
     "build:node": "node ../../scripts/build node",

packages/material-ui-system/package.json

@@ -26,7 +26,7 @@
     "url": "https://opencollective.com/material-ui"
   },
   "scripts": {
-    "build": "yarn build:legacy && yarn build:modern &&yarn build:node && yarn build:stable && yarn build:copy-files",
+    "build": "yarn build:legacy && yarn build:modern && yarn build:node && yarn build:stable && yarn build:copy-files",
     "build:legacy": "node ../../scripts/build legacy",
     "build:modern": "node ../../scripts/build modern",
     "build:node": "node ../../scripts/build node",

packages/material-ui-system/src/index.d.ts

@@ -270,8 +270,6 @@ export type StandardCSSProperties = CSS.PropertiesFallback<number | string>;
  * The `css` function accepts arrays as values for mobile-first responsive styles.
  * Note that this extends to non-theme values also. For example `display=['none', 'block']`
  * will also works.
- *
- * For more information see: https://styled-system.com/responsive-styles.
  */
 export type ResponsiveStyleValue<T> = T | Array<T | null> | { [key: string]: T | null };
 
@@ -394,7 +392,6 @@ export interface AliasesCSSProperties {
    * | :----: | :-----: | :----: | :----: | :---: |
    * | **1**  |  **1**  | **1**  | **12** | **3** |
    *
-   * @see https://styled-system.com/#margin-props
    * @see https://developer.mozilla.org/docs/Web/CSS/margin-left
    * @see https://developer.mozilla.org/docs/Web/CSS/margin-right
    */
@@ -409,7 +406,6 @@ export interface AliasesCSSProperties {
    * | :----: | :-----: | :----: | :----: | :---: |
    * | **1**  |  **1**  | **1**  | **12** | **3** |
    *
-   * @see https://styled-system.com/#margin-props
    * @see https://developer.mozilla.org/docs/Web/CSS/margin-left
    * @see https://developer.mozilla.org/docs/Web/CSS/margin-right
    */
@@ -424,7 +420,6 @@ export interface AliasesCSSProperties {
    * | :----: | :-----: | :----: | :----: | :---: |
    * | **1**  |  **1**  | **1**  | **12** | **3** |
    *
-   * @see https://styled-system.com/#margin-props
    * @see https://developer.mozilla.org/docs/Web/CSS/margin-top
    * @see https://developer.mozilla.org/docs/Web/CSS/margin-bottom
    */
@@ -439,7 +434,6 @@ export interface AliasesCSSProperties {
    * | :----: | :-----: | :----: | :----: | :---: |
    * | **1**  |  **1**  | **1**  | **12** | **3** |
    *
-   * @see https://styled-system.com/#margin-props
    * @see https://developer.mozilla.org/docs/Web/CSS/margin-top
    * @see https://developer.mozilla.org/docs/Web/CSS/margin-bottom
    */
@@ -511,7 +505,6 @@ export interface AliasesCSSProperties {
    * | :----: | :-----: | :----: | :----: | :---: |
    * | **1**  |  **1**  | **1**  | **12** | **4** |
    *
-   * @see https://styled-system.com/#padding-props
    * @see https://developer.mozilla.org/docs/Web/CSS/padding-left
    * @see https://developer.mozilla.org/docs/Web/CSS/padding-right
    */
@@ -525,7 +518,6 @@ export interface AliasesCSSProperties {
    * | :----: | :-----: | :----: | :----: | :---: |
    * | **1**  |  **1**  | **1**  | **12** | **4** |
    *
-   * @see https://styled-system.com/#padding-props
    * @see https://developer.mozilla.org/docs/Web/CSS/padding-left
    * @see https://developer.mozilla.org/docs/Web/CSS/padding-right
    */
@@ -539,7 +531,6 @@ export interface AliasesCSSProperties {
    * | :----: | :-----: | :----: | :----: | :---: |
    * | **1**  |  **1**  | **1**  | **12** | **4** |
    *
-   * @see https://styled-system.com/#padding-props
    * @see https://developer.mozilla.org/docs/Web/CSS/padding-top
    * @see https://developer.mozilla.org/docs/Web/CSS/padding-bottom
    */
@@ -553,7 +544,6 @@ export interface AliasesCSSProperties {
    * | :----: | :-----: | :----: | :----: | :---: |
    * | **1**  |  **1**  | **1**  | **12** | **4** |
    *
-   * @see https://styled-system.com/#padding-props
    * @see https://developer.mozilla.org/docs/Web/CSS/padding-top
    * @see https://developer.mozilla.org/docs/Web/CSS/padding-bottom
    */

packages/material-ui-unstyled/package.json

@@ -22,7 +22,7 @@
   },
   "homepage": "https://material-ui.com",
   "scripts": {
-    "build": "yarn build:legacy && yarn build:modern &&yarn build:node && yarn build:stable && yarn build:copy-files",
+    "build": "yarn build:legacy && yarn build:modern && yarn build:node && yarn build:stable && yarn build:copy-files",
     "build:legacy": "node ../../scripts/build legacy",
     "build:modern": "node ../../scripts/build modern",
     "build:node": "node ../../scripts/build node",

packages/material-ui-utils/package.json

@@ -22,7 +22,7 @@
   },
   "homepage": "https://github.com/mui-org/material-ui/tree/next/packages/material-ui-utils",
   "scripts": {
-    "build": "yarn build:legacy && yarn build:modern &&yarn build:node && yarn build:stable && yarn build:copy-files && yarn build:types",
+    "build": "yarn build:legacy && yarn build:modern && yarn build:node && yarn build:stable && yarn build:copy-files && yarn build:types",
     "build:legacy": "node ../../scripts/build legacy",
     "build:modern": "node ../../scripts/build modern",
     "build:node": "node ../../scripts/build node",

packages/material-ui/package.json

@@ -26,7 +26,7 @@
     "url": "https://opencollective.com/material-ui"
   },
   "scripts": {
-    "build": "yarn build:legacy && yarn build:modern &&yarn build:node && yarn build:stable && yarn build:umd && yarn build:types && yarn build:copy-files",
+    "build": "yarn build:legacy && yarn build:modern && yarn build:node && yarn build:stable && yarn build:umd && yarn build:types && yarn build:copy-files",
     "build:legacy": "node ../../scripts/build legacy",
     "build:modern": "node ../../scripts/build modern",
     "build:node": "node ../../scripts/build node",

packages/material-ui/src/Breadcrumbs/Breadcrumbs.js

@@ -69,7 +69,7 @@ const Breadcrumbs = React.forwardRef(function Breadcrumbs(props, ref) {
 
       // The clicked element received the focus but gets removed from the DOM.
       // Let's keep the focus in the component after expanding.
-      // Moving it the the <ol> or <nav> does not cause any announcement in NVDA.
+      // Moving it to the <ol> or <nav> does not cause any announcement in NVDA.
       // By moving it to some link/button at least we have some announcement.
       const focusable = listRef.current.querySelector('a[href],button,[tabindex]');
       if (focusable) {