[core] Batch small changes (#21553)

docs/pages/api-docs/autocomplete.md

@@ -46,7 +46,7 @@ The `MuiAutocomplete` name can be used for providing [default props](/customizat
 | <span class="prop-name">disabled</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, the input will be disabled. |
 | <span class="prop-name">disabledItemsFocusable</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, will allow focus on disabled items. |
 | <span class="prop-name">disableListWrap</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, the list box in the popup will not wrap focus. |
-| <span class="prop-name">disablePortal</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | Disable the portal behavior. The children stay within it's parent DOM hierarchy. |
+| <span class="prop-name">disablePortal</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | The `Popper` content will be inside the DOM hierarchy of the parent component. |
 | <span class="prop-name">filterOptions</span> | <span class="prop-type">func</span> |  | A filter function that determines the options that are eligible.<br><br>**Signature:**<br>`function(options: T[], state: object) => undefined`<br>*options:* The options to render.<br>*state:* The state of the component. |
 | <span class="prop-name">filterSelectedOptions</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, hide the selected options from the list box. |
 | <span class="prop-name">forcePopupIcon</span> | <span class="prop-type">'auto'<br>&#124;&nbsp;bool</span> | <span class="prop-default">'auto'</span> | Force the visibility display of the popup icon. |

docs/pages/api-docs/form-control-label.md

@@ -31,7 +31,7 @@ The `MuiFormControlLabel` name can be used for providing [default props](/custom
 |:-----|:-----|:--------|:------------|
 | <span class="prop-name">checked</span> | <span class="prop-type">bool</span> |  | If `true`, the component appears selected. |
 | <span class="prop-name">classes</span> | <span class="prop-type">object</span> |  | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. |
-| <span class="prop-name required">control<abbr title="required">*</abbr></span> | <span class="prop-type">element</span> |  | A control element. For instance, it can be be a `Radio`, a `Switch` or a `Checkbox`. |
+| <span class="prop-name required">control<abbr title="required">*</abbr></span> | <span class="prop-type">element</span> |  | A control element. For instance, it can be a `Radio`, a `Switch` or a `Checkbox`. |
 | <span class="prop-name">disabled</span> | <span class="prop-type">bool</span> |  | If `true`, the control will be disabled. |
 | <span class="prop-name">inputRef</span> | <span class="prop-type">ref</span> |  | Pass a ref to the `input` element. |
 | <span class="prop-name">label</span> | <span class="prop-type">node</span> |  | The text to be used in an enclosing label element. |

docs/pages/api-docs/modal.md

@@ -45,7 +45,7 @@ This component shares many concepts with [react-overlays](https://react-bootstra
 | <span class="prop-name">disableBackdropClick</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, clicking the backdrop will not fire `onClose`. |
 | <span class="prop-name">disableEnforceFocus</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, the modal will not prevent focus from leaving the modal while open.<br>Generally this should never be set to `true` as it makes the modal less accessible to assistive technologies, like screen readers. |
 | <span class="prop-name">disableEscapeKeyDown</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, hitting escape will not fire `onClose`. |
-| <span class="prop-name">disablePortal</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | Disable the portal behavior. The children stay within it's parent DOM hierarchy. |
+| <span class="prop-name">disablePortal</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | The `children` will be inside the DOM hierarchy of the parent component. |
 | <span class="prop-name">disableRestoreFocus</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, the modal will not restore focus to previously focused element once modal is hidden. |
 | <span class="prop-name">disableScrollLock</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | Disable the scroll lock behavior. |
 | <span class="prop-name">hideBackdrop</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, the backdrop is not rendered. |

docs/pages/api-docs/popper.md

@@ -29,7 +29,7 @@ Poppers rely on the 3rd party library [Popper.js](https://popper.js.org/docs/v1/
 | <span class="prop-name">anchorEl</span> | <span class="prop-type">HTML element<br>&#124;&nbsp;object<br>&#124;&nbsp;func</span> |  | A HTML element, [referenceObject](https://popper.js.org/docs/v1/#referenceObject), or a function that returns either. It's used to set the position of the popper. The return value will passed as the reference object of the Popper instance. |
 | <span class="prop-name required">children<abbr title="required">*</abbr></span> | <span class="prop-type">node<br>&#124;&nbsp;func</span> |  | Popper render function or node. |
 | <span class="prop-name">container</span> | <span class="prop-type">HTML element<br>&#124;&nbsp;React.Component<br>&#124;&nbsp;func</span> |  | A HTML element, component instance, or function that returns either. The `container` will have the portal children appended to it.<br>By default, it uses the body of the top-level document object, so it's simply `document.body` most of the time. |
-| <span class="prop-name">disablePortal</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | Disable the portal behavior. The children stay within it's parent DOM hierarchy. |
+| <span class="prop-name">disablePortal</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | The `children` will be inside the DOM hierarchy of the parent component. |
 | <span class="prop-name">keepMounted</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | Always keep the children in the DOM. This prop can be useful in SEO situation or when you want to maximize the responsiveness of the Popper. |
 | <span class="prop-name">modifiers</span> | <span class="prop-type">object</span> |  | Popper.js is based on a "plugin-like" architecture, most of its features are fully encapsulated "modifiers".<br>A modifier is a function that is called each time Popper.js needs to compute the position of the popper. For this reason, modifiers should be very performant to avoid bottlenecks. To learn how to create a modifier, [read the modifiers documentation](https://popper.js.org/docs/v1/#modifiers). |
 | <span class="prop-name required">open<abbr title="required">*</abbr></span> | <span class="prop-type">bool</span> |  | If `true`, the popper is visible. |

docs/pages/api-docs/portal.md

@@ -29,7 +29,7 @@ that exists outside the DOM hierarchy of the parent component.
 |:-----|:-----|:--------|:------------|
 | <span class="prop-name">children</span> | <span class="prop-type">node</span> |  | The children to render into the `container`. |
 | <span class="prop-name">container</span> | <span class="prop-type">HTML element<br>&#124;&nbsp;React.Component<br>&#124;&nbsp;func</span> |  | A HTML element, component instance, or function that returns either. The `container` will have the portal children appended to it.<br>By default, it uses the body of the top-level document object, so it's simply `document.body` most of the time. |
-| <span class="prop-name">disablePortal</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | Disable the portal behavior. The children stay within it's parent DOM hierarchy. |
+| <span class="prop-name">disablePortal</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | The `children` will be inside the DOM hierarchy of the parent component. |
 | <span class="prop-name">onRendered</span> | <span class="prop-type">func</span> |  | Callback fired once the children has been mounted into the `container`.<br>This prop will be deprecated and removed in v5, the ref can be used instead. |
 
 The component cannot hold a ref.

docs/public/_redirects

@@ -30,7 +30,7 @@ https://material-ui.dev/* https://material-ui.com/:splat 301!
 /store/* https://material-ui-store.netlify.app/:splat 200
 /store-staging/* https://master--material-ui-store.netlify.app/:splat 200
 
-# To remove at some point (2021).
+# Added in chronological order, to be removed at some point.
 /css-in-js/* /styles/:splat 301
 /customization/css-in-js/ /styles/basics/ 301
 /customization/overrides/ /customization/components/ 301
@@ -60,8 +60,6 @@ https://material-ui.dev/* https://material-ui.com/:splat 301!
 /api/expansion-panel-actions/ /api/accordion-actions/ 301
 /api/expansion-panel-details/ /api/accordion-details/ 301
 /api/expansion-panel-summary/ /api/accordion-summary/ 301
-
-# To remove at some point (2022).
 /premium-themes* https://material-ui.com/store/ 301
 /customization/themes/ /customization/theming/ 301
 https://v1-5-0.material-ui.com/* https://v1.material-ui.com/:splat 301!

docs/src/pages/components/dialogs/dialogs.md

@@ -105,7 +105,7 @@ Touching “Cancel” in a confirmation dialog, or pressing Back, cancels the ac
 ## Draggable dialog
 
 You can create a draggable dialog by using [react-draggable](https://github.com/mzabriskie/react-draggable).
-To do so, you can pass the the imported `Draggable` component as the `PaperComponent` of the `Dialog` component.
+To do so, you can pass the imported `Draggable` component as the `PaperComponent` of the `Dialog` component.
 This will make the entire dialog draggable.
 
 {{"demo": "pages/components/dialogs/DraggableDialog.js"}}

docs/src/pages/components/no-ssr/no-ssr.md

@@ -21,7 +21,7 @@ This component can be useful in a variety of situations:
 
 ## Frame deferring
 
-In it's core, the NoSsr component purpose is to **defer rendering**.
+At its core, the NoSsr component's purpose is to **defer rendering**.
 As it's illustrated in the previous demo, you can use it to defer the rendering from the server to the client.
 
 But you can also use it to defer the rendering within the client itself.

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

@@ -24,7 +24,7 @@ of the `SpeedDialIcon` component.
 
 ## Persistent action tooltips
 
-The SpeedDialActions tooltips can be 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 in order 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 property.
 

docs/src/pages/components/tables/tables.md

@@ -23,7 +23,7 @@ A data table contains a header row at the top that lists column names, followed
 
 Checkboxes should accompany each row if the user needs to select or manipulate data.
 
-For accessibility, the first column is set to be a `<th>` element, with a `scope` of `"col"`. This enables screen readers to identify a cell's value by it's row and column name.
+For accessibility, the first column is set to be a `<th>` element, with a `scope` of `"col"`. This enables screen readers to identify a cell's value by its row and column name.
 
 ## Simple Table
 

docs/src/pages/components/transitions/transitions.md

@@ -65,7 +65,7 @@ The `direction` property controls which edge of the screen the transition starts
 
 The Transition component's `mountOnEnter` property prevents the child component from being mounted
 until `in` is `true`. This prevents the relatively positioned component from scrolling into view
-from it's off-screen position. Similarly the `unmountOnExit` property removes the component
+from its off-screen position. Similarly the `unmountOnExit` property removes the component
 from the DOM after it has been transition off screen.
 
 {{"demo": "pages/components/transitions/SimpleSlide.js", "bg": true}}

docs/src/pages/customization/breakpoints/breakpoints.md

@@ -232,7 +232,7 @@ const styles = (theme) => ({
 
 #### Returns
 
-`media query`: A media query string ready to be used with most styling solutions, which matches screen widths greater than the screen size given by the breakpoint key in the first argument and less than the the screen size given by the breakpoint key in the second argument.
+`media query`: A media query string ready to be used with most styling solutions, which matches screen widths greater than the screen size given by the breakpoint key in the first argument and less than the screen size given by the breakpoint key in the second argument.
 
 #### Examples
 

docs/src/pages/guides/composition/composition.md

@@ -190,7 +190,7 @@ Only the two most common use cases are covered. For more information see [this s
 ```
 
 To find out if the Material-UI component you're using has this requirement, check
-out the the props API documentation for that component. If you need to forward refs
+out the props API documentation for that component. If you need to forward refs
 the description will link to this section.
 
 ### Caveat with StrictMode

docs/src/pages/guides/migration-v4/migration-v4.md

@@ -66,16 +66,16 @@ yarn add @material-ui/core
 
 ### Rating
 
-- Rename `visuallyhidden` to `visuallyHidden`
-
-```diff
-<Rating
-  classes={{
--    visuallyhidden: 'custom-visually-hidden-classname',
-+    visuallyHidden: 'custom-visually-hidden-classname',
-  }}
-/>
-```
+- Rename `visuallyhidden` to `visuallyHidden` for consistency:
+
+  ```diff
+  <Rating
+    classes={{
+  -    visuallyhidden: 'custom-visually-hidden-classname',
+  +    visuallyHidden: 'custom-visually-hidden-classname',
+    }}
+  />
+  ```
 
 ### Slider
 
@@ -87,7 +87,7 @@ yarn add @material-ui/core
 
 ### TablePagination
 
-- The customization of the table pagination's actions labels must be done with the `getItemAriaLabel` prop.
+- The customization of the table pagination's actions labels must be done with the `getItemAriaLabel` prop. This increases consistency with the `Pagination` component.
 
   ```diff
   <TablePagination
@@ -106,7 +106,7 @@ yarn add @material-ui/core
 
 ### Typography
 
-- Replace `srOnly` prop support with a style util:
+- Replace the `srOnly` prop so as to not duplicate the capabilities of [System](https://material-ui.com/system/basics/):
 
   ```diff
   -import Typography from '@material-ui/core/Typography';

docs/src/pages/styles/advanced/advanced.md

@@ -6,7 +6,7 @@
 
 Add a `ThemeProvider` to the top level of your app to pass a theme down the React component tree. Then, you can access the theme object in style functions.
 
-> This example creates a theme object for custom-built components. If you intend to use some of the Material-UI's components you need to provide a richer theme structure using the `createMuiTheme()` method. Head to the the [theming section](/customization/theming/) to learn how to build your custom Material-UI theme.
+> This example creates a theme object for custom-built components. If you intend to use some of the Material-UI's components you need to provide a richer theme structure using the `createMuiTheme()` method. Head to the [theming section](/customization/theming/) to learn how to build your custom Material-UI theme.
 
 ```jsx
 import { ThemeProvider } from '@material-ui/core/styles';
@@ -502,7 +502,7 @@ generates the following class names that you can override:
 
 _This is a simplification of the `@material-ui/core/Button` component's style sheet._
 
-Customization of the TextField can be cumbersome with the [`classes` API](#overriding-styles-classes-prop), where you have to define the the classes prop.
+Customization of the TextField can be cumbersome with the [`classes` API](#overriding-styles-classes-prop), where you have to define the classes prop.
 It's easier to use the default values, as described above. For example:
 
 ```jsx

packages/material-ui-lab/src/Autocomplete/Autocomplete.d.ts

@@ -82,8 +82,7 @@ export interface AutocompleteProps<
    */
   disabled?: boolean;
   /**
-   * Disable the portal behavior.
-   * The children stay within it's parent DOM hierarchy.
+   * The `Popper` content will be inside the DOM hierarchy of the parent component.
    */
   disablePortal?: boolean;
   /**

packages/material-ui-lab/src/Autocomplete/Autocomplete.js

@@ -608,8 +608,7 @@ Autocomplete.propTypes = {
    */
   disableListWrap: PropTypes.bool,
   /**
-   * Disable the portal behavior.
-   * The children stay within it's parent DOM hierarchy.
+   * The `Popper` content will be inside the DOM hierarchy of the parent component.
    */
   disablePortal: PropTypes.bool,
   /**

packages/material-ui-lab/src/Autocomplete/Autocomplete.test.js

@@ -1770,7 +1770,7 @@ describe('<Autocomplete />', () => {
   });
 
   describe('prop: getOptionLabel', () => {
-    it('is considered for falsy values when filtering the the list of options', () => {
+    it('is considered for falsy values when filtering the list of options', () => {
       const { getAllByRole } = render(
         <Autocomplete
           {...defaultProps}

packages/material-ui/src/FormControlLabel/FormControlLabel.d.ts

@@ -12,7 +12,7 @@ export interface FormControlLabelProps
    */
   checked?: boolean;
   /**
-   * A control element. For instance, it can be be a `Radio`, a `Switch` or a `Checkbox`.
+   * A control element. For instance, it can be a `Radio`, a `Switch` or a `Checkbox`.
    */
   control: React.ReactElement<any, any>;
   /**

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

@@ -130,7 +130,7 @@ FormControlLabel.propTypes = {
    */
   className: PropTypes.string,
   /**
-   * A control element. For instance, it can be be a `Radio`, a `Switch` or a `Checkbox`.
+   * A control element. For instance, it can be a `Radio`, a `Switch` or a `Checkbox`.
    */
   control: PropTypes.element.isRequired,
   /**

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

@@ -311,8 +311,7 @@ Modal.propTypes = {
    */
   disableEscapeKeyDown: PropTypes.bool,
   /**
-   * Disable the portal behavior.
-   * The children stay within it's parent DOM hierarchy.
+   * The `children` will be inside the DOM hierarchy of the parent component.
    */
   disablePortal: PropTypes.bool,
   /**

packages/material-ui/src/Popper/Popper.d.ts

@@ -48,8 +48,7 @@ export interface PopperProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
    */
   container?: PortalProps['container'];
   /**
-   * Disable the portal behavior.
-   * The children stay within it's parent DOM hierarchy.
+   * The `children` will be inside the DOM hierarchy of the parent component.
    */
   disablePortal?: PortalProps['disablePortal'];
   /**

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

@@ -294,8 +294,7 @@ Popper.propTypes = {
     PropTypes.func,
   ]),
   /**
-   * Disable the portal behavior.
-   * The children stay within it's parent DOM hierarchy.
+   * The `children` will be inside the DOM hierarchy of the parent component.
    */
   disablePortal: PropTypes.bool,
   /**

packages/material-ui/src/Portal/Portal.d.ts

@@ -14,8 +14,7 @@ export interface PortalProps {
    */
   container?: React.ReactInstance | (() => React.ReactInstance | null) | null;
   /**
-   * Disable the portal behavior.
-   * The children stay within it's parent DOM hierarchy.
+   * The `children` will be inside the DOM hierarchy of the parent component.
    */
   disablePortal?: boolean;
   /**

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

@@ -79,8 +79,7 @@ Portal.propTypes = {
     PropTypes.func,
   ]),
   /**
-   * Disable the portal behavior.
-   * The children stay within it's parent DOM hierarchy.
+   * The `children` will be inside the DOM hierarchy of the parent component.
    */
   disablePortal: PropTypes.bool,
   /**