[core] Batch small changes

dangerfile.js

@@ -37,7 +37,6 @@ async function cleanup() {
 /**
  * creates a callback for Object.entries(comparison).filter that excludes every
  * entry that does not exceed the given threshold values for parsed and gzip size
- *
  * @param {number} parsedThreshold
  * @param {number} gzipThreshold
  */

docs/pages/_app.js

@@ -61,7 +61,6 @@ function LanguageNegotiation() {
 
 /**
  * Priority: on first render: navigated value, persisted value; otherwise initial value, 'JS'
- *
  * @returns {string} - The persisted variant if the initial value is undefined
  */
 function usePersistCodeVariant() {

docs/pages/api-docs/chip.md

@@ -38,7 +38,7 @@ The `MuiChip` name can be used for providing [default props](/customization/glob
 | <span class="prop-name">disabled</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, the chip should be displayed in a disabled state. |
 | <span class="prop-name">icon</span> | <span class="prop-type">element</span> |  | Icon element. |
 | <span class="prop-name">label</span> | <span class="prop-type">node</span> |  | The content of the label. |
-| <span class="prop-name">onDelete</span> | <span class="prop-type">func</span> |  | Callback function fired when the delete icon is clicked. If set, the delete icon will be shown. |
+| <span class="prop-name">onDelete</span> | <span class="prop-type">func</span> |  | Callback fired when the delete icon is clicked. If set, the delete icon will be shown. |
 | <span class="prop-name">size</span> | <span class="prop-type">'medium'<br>&#124;&nbsp;'small'</span> | <span class="prop-default">'medium'</span> | The size of the chip. |
 | <span class="prop-name">variant</span> | <span class="prop-type">'default'<br>&#124;&nbsp;'outlined'</span> | <span class="prop-default">'default'</span> | The variant to use. |
 

docs/pages/api-docs/native-select.md

@@ -33,7 +33,7 @@ The `MuiNativeSelect` name can be used for providing [default props](/customizat
 | <span class="prop-name">IconComponent</span> | <span class="prop-type">elementType</span> | <span class="prop-default">ArrowDropDownIcon</span> | The icon that displays the arrow. |
 | <span class="prop-name">input</span> | <span class="prop-type">element</span> | <span class="prop-default">&lt;Input /></span> | An `Input` element; does not have to be a material-ui specific `Input`. |
 | <span class="prop-name">inputProps</span> | <span class="prop-type">object</span> |  | Attributes applied to the `select` element. |
-| <span class="prop-name">onChange</span> | <span class="prop-type">func</span> |  | Callback function fired when a menu item is selected.<br><br>**Signature:**<br>`function(event: object) => void`<br>*event:* The event source of the callback. You can pull out the new value by accessing `event.target.value` (string). |
+| <span class="prop-name">onChange</span> | <span class="prop-type">func</span> |  | Callback fired when a menu item is selected.<br><br>**Signature:**<br>`function(event: object) => void`<br>*event:* The event source of the callback. You can pull out the new value by accessing `event.target.value` (string). |
 | <span class="prop-name">value</span> | <span class="prop-type">any</span> |  | The input value. The DOM API casts this to a string. |
 | <span class="prop-name">variant</span> | <span class="prop-type">'filled'<br>&#124;&nbsp;'outlined'<br>&#124;&nbsp;'standard'</span> |  | The variant to use. |
 

docs/pages/api-docs/select.md

@@ -43,7 +43,7 @@ The `MuiSelect` name can be used for providing [default props](/customization/gl
 | <span class="prop-name">MenuProps</span> | <span class="prop-type">object</span> |  | Props applied to the [`Menu`](/api/menu/) element. |
 | <span class="prop-name">multiple</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, `value` must be an array and the menu will support multiple selections. |
 | <span class="prop-name">native</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, the component will be using a native `select` element. |
-| <span class="prop-name">onChange</span> | <span class="prop-type">func</span> |  | Callback function fired when a menu item is selected.<br><br>**Signature:**<br>`function(event: object, child?: object) => void`<br>*event:* The event source of the callback. You can pull out the new value by accessing `event.target.value` (any).<br>*child:* The react element that was selected when `native` is `false` (default). |
+| <span class="prop-name">onChange</span> | <span class="prop-type">func</span> |  | Callback fired when a menu item is selected.<br><br>**Signature:**<br>`function(event: object, child?: object) => void`<br>*event:* The event source of the callback. You can pull out the new value by accessing `event.target.value` (any).<br>*child:* The react element that was selected when `native` is `false` (default). |
 | <span class="prop-name">onClose</span> | <span class="prop-type">func</span> |  | Callback fired when the component requests to be closed. Use in controlled mode (see open).<br><br>**Signature:**<br>`function(event: object) => void`<br>*event:* The event source of the callback. |
 | <span class="prop-name">onOpen</span> | <span class="prop-type">func</span> |  | Callback fired when the component requests to be opened. Use in controlled mode (see open).<br><br>**Signature:**<br>`function(event: object) => void`<br>*event:* The event source of the callback. |
 | <span class="prop-name">open</span> | <span class="prop-type">bool</span> |  | Control `select` open state. You can only use it when the `native` prop is `false` (default). |

docs/pages/api-docs/swipeable-drawer.md

@@ -36,7 +36,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi
 | <span class="prop-name required">onOpen<abbr title="required">*</abbr></span> | <span class="prop-type">func</span> |  | Callback fired when the component requests to be opened.<br><br>**Signature:**<br>`function(event: object) => void`<br>*event:* The event source of the callback. |
 | <span class="prop-name required">open<abbr title="required">*</abbr></span> | <span class="prop-type">bool</span> |  | If `true`, the drawer is open. |
 | <span class="prop-name">SwipeAreaProps</span> | <span class="prop-type">object</span> |  | The element is used to intercept the touch events on the edge. |
-| <span class="prop-name">swipeAreaWidth</span> | <span class="prop-type">number</span> | <span class="prop-default">20</span> | The width of the left most (or right most) area in pixels where the drawer can be swiped open from. |
+| <span class="prop-name">swipeAreaWidth</span> | <span class="prop-type">number</span> | <span class="prop-default">20</span> | The width of the left most (or right most) area in px that the drawer can be swiped open from. |
 | <span class="prop-name">transitionDuration</span> | <span class="prop-type">number<br>&#124;&nbsp;{ appear?: number, enter?: number, exit?: number }</span> | <span class="prop-default">{ enter: duration.enteringScreen, exit: duration.leavingScreen }</span> | The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object. |
 
 The `ref` is forwarded to the root element.

docs/scripts/buildApi.ts

@@ -28,7 +28,6 @@ const inheritedComponentRegexp = /\/\/ @inheritedComponent (.*)/;
 /**
  * Receives a component's test information and source code and return's an object
  * containing the inherited component's name and pathname
- *
  * @param testInfo Information retrieved from the component's describeConformance() in its test.js file
  * @param src The component's source code
  */

docs/src/modules/components/Demo.js

@@ -112,7 +112,6 @@ const useDemoToolbarStyles = makeStyles(
 const alwaysTrue = () => true;
 
 /**
- *
  * @param {React.Ref<HTMLElement>[]} controlRefs
  * @param {object} [options]
  * @param {(index: number) => boolean} [options.isFocusableControl] In case certain controls become unfocusable

docs/src/modules/components/DiamondSponsors.js

@@ -76,7 +76,7 @@ export default function DiamondSponsors(props) {
           width="125"
           height="35"
           src={`/static/in-house/doit-intl.png`}
-          alt="octopus"
+          alt="doit-intl"
           title="Management Platform for Google Cloud and AWS"
           loading="lazy"
         />

docs/src/modules/utils/generateMarkdown.ts

@@ -304,7 +304,6 @@ The \`${reactAPI.styles.name}\` name can be used for providing [default props](/
 /**
  * Returns `null` if the prop should be ignored.
  * Throws if it is invalid.
- *
  * @param prop
  * @param propName
  */

docs/src/modules/utils/helpers.js

@@ -53,7 +53,6 @@ const packagesWithBundledTypes = ['date-fns'];
  * in packagesWithBundledTypes
  *
  * @see packagesWithBundledTypes in this module namespace
- *
  * @param {Record<string, string>} deps - list of dependency as `name => version`
  */
 function addTypeDeps(deps) {

docs/src/modules/utils/parseMarkdown.js

@@ -81,7 +81,6 @@ export function getDescription(markdown) {
 
 /**
  * Render markdown used in the Material-UI docs
- *
  * @param {string} markdown
  * @param {object} [options]
  * @param {function} [options.highlight] - https://marked.js.org/#/USING_ADVANCED.md#highlight
@@ -118,7 +117,6 @@ const externs = [
 ];
 
 /**
- *
  * @param {object} config
  * @param {() => string} config.requireRaw - returnvalue of require.context
  * @param {string} config.pageFilename - filename relative to nextjs pages directory

docs/src/modules/utils/parseTest.js

@@ -48,7 +48,6 @@ function findConformanceDescriptor(file) {
 }
 
 /**
- *
  * @param {import('@babel/core').Node} valueNode
  * @returns {string | undefined}
  */
@@ -78,7 +77,6 @@ function getRefInstance(valueNode) {
 }
 
 /**
- *
  * @param {import('@babel/core').Node} valueNode - An Identifier
  * @returns {string | undefined}
  */
@@ -87,7 +85,6 @@ function getInheritComponentName(valueNode) {
 }
 
 /**
- *
  * @param {string} componentFilename
  * @returns {ParseResult}
  *

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

@@ -150,7 +150,7 @@ declare module '@material-ui/core/styles/createBreakpoints' {
 
 #### Arguments
 
-1. `key` (_String_ | _Number_): A breakpoint key (`xs`, `sm`, etc.) or a screen width number in pixels.
+1. `key` (_String_ | _Number_): A breakpoint key (`xs`, `sm`, etc.) or a screen width number in px.
 
 #### Returns
 
@@ -175,7 +175,7 @@ const styles = (theme) => ({
 
 #### Arguments
 
-1. `key` (_String_ | _Number_): A breakpoint key (`xs`, `sm`, etc.) or a screen width number in pixels.
+1. `key` (_String_ | _Number_): A breakpoint key (`xs`, `sm`, etc.) or a screen width number in px.
 
 #### Returns
 
@@ -227,8 +227,8 @@ const styles = (theme) => ({
 
 #### Arguments
 
-1. `start` (_String_): A breakpoint key (`xs`, `sm`, etc.) or a screen width number in pixels.
-2. `end` (_String_): A breakpoint key (`xs`, `sm`, etc.) or a screen width number in pixels.
+1. `start` (_String_): A breakpoint key (`xs`, `sm`, etc.) or a screen width number in px.
+2. `end` (_String_): A breakpoint key (`xs`, `sm`, etc.) or a screen width number in px.
 
 #### Returns
 

docs/src/pages/customization/default-theme/DefaultTheme.js

@@ -36,7 +36,6 @@ function getType(value) {
 }
 
 /**
- *
  * @param {unknown} value
  * @param {ReturnType<typeof getType>} type
  */

docs/src/pages/customization/theming/theming.md

@@ -40,7 +40,7 @@ For instance:
 
 ## Theme builder
 
-<video autoPlay muted width="320">
+<video autoPlay muted loop width="320">
   <source src="/static/studies.mp4" type="video/mp4" >
 </video>
 

docs/src/pages/customization/typography/typography.md

@@ -152,7 +152,7 @@ To be done: [#15251](https://github.com/mui-org/material-ui/issues/15251).
 
 You might want to change the `<html>` element default font size. For instance, when using the [10px simplification](https://www.sitepoint.com/understanding-and-using-rem-units-in-css/).
 
-> ⚠️ Changing the font size can harm accessibility ♿️. Most browsers agreed on the default size of 16 pixels, but the user can change it. For instance, someone with an impaired vision could have set their browser’s default font size to something larger.
+> ⚠️ Changing the font size can harm accessibility ♿️. Most browsers agreed on the default size of 16px, but the user can change it. For instance, someone with an impaired vision could have set their browser’s default font size to something larger.
 
 The `theme.typography.htmlFontSize` property is provided for this use case,
 which tells Material-UI what the font-size on the `<html>` element is.

docs/src/pages/discover-more/roadmap/roadmap.md

@@ -99,4 +99,4 @@ Here are the components we will work on being supported in the Material-UI ecosy
 | Gantt Chart                | ⏳⭐️  |
 | Color Picker               | ⏳⭐️  |
 
-> ⚠️ **Forward looking statement.** We operate in a dynamic environment, and things are subject to change. The information provided here is intended to outline the general framework direction. It's intended for informational purposes only. We may decide to add/remove new items at any time depending on our capability to deliver while meeting our quality standards. The development, releases and timing of any features or functionality of Material-UI remains at the sole discretion of Material-UI. The roadmap does not represent a commitment, obligation or promise to deliver at any time. You should not depend on the roadmap when making technology decisions.
+> ⚠️ **Disclaimer**: We operate in a dynamic environment, and things are subject to change. The information provided is intended to outline the general framework direction, for informational purposes only. We may decide to add or remove new items at any time, depending on our capability to deliver while meeting our quality standards. The development, releases, and timing of any features or functionality remains at the sole discretion of Material-UI. The roadmap does not represent a commitment, obligation, or promise to deliver at any time.

docs/src/pages/getting-started/support/support.md

@@ -14,7 +14,7 @@ For crowdsourced technical questions from expert Material-UI devs in our communi
 
 ### GitHub <img src="/static/images/logos/github.svg" width="24" height="24" alt="GitHub logo" loading="lazy" />
 
-We use GitHub issues exclusively as a bugs and feature requests tracker.
+We use GitHub issues exclusively as a bug and feature request tracker.
 If you think you have found a bug, or have a new feature idea, please start by making sure it hasn't already been [reported or fixed](https://github.com/mui-org/material-ui/issues?utf8=%E2%9C%93&q=is%3Aopen+is%3Aclosed). You can search through existing issues and pull requests to see if someone has reported one similar to yours.
 
 [Open an issue](https://github.com/mui-org/material-ui/issues/new/choose)
@@ -55,8 +55,9 @@ The open-source community is always welcome to submit new features and bug fixes
 
 The current status of each Material-UI version is as follows:
 
-- Material-UI v4 (hooks): ✅ In active development.
-- Material-UI v3 (change supported browsers): ⚠️ Only handle security fixes.
+- Material-UI v5 (emotion): ✅ In active development.
+- Material-UI v4 (hooks): ⚠️ Only handle security fixes.
+- Material-UI v3 (change supported browsers): ❌ Inactive.
 - ~Material-UI v2 (never existed)~.
 - Material-UI v1 (rewrite): ❌ Inactive.
 - Material-UI v0.x: ❌ Inactive.

docs/src/pages/versions/versions.md

@@ -52,7 +52,7 @@ In general, you can expect the following release cycle:
 
 You can follow the [milestones](https://github.com/mui-org/material-ui/milestones) for a more detailed overview.
 
-> ⚠️ **Disclaimer**: We operate in a dynamic environment, and things are subject to change. The information provided is intended to outline the general framework direction. It's intended for informational purposes only. We may decide to add/remove new items at any time depending on our capability to deliver while meeting our quality standards. The development, releases and timing of any features or functionality of Material-UI remains at the sole discretion of Material-UI. The roadmap does not represent a commitment, obligation or promise to deliver at any time.
+> ⚠️ **Disclaimer**: We operate in a dynamic environment, and things are subject to change. The information provided is intended to outline the general framework direction, for informational purposes only. We may decide to add or remove new items at any time, depending on our capability to deliver while meeting our quality standards. The development, releases, and timing of any features or functionality remains at the sole discretion of Material-UI. The roadmap does not represent a commitment, obligation, or promise to deliver at any time.
 
 ## Support policy
 

framer/Material-UI.framerfx/code/utils/index.ts

@@ -3,7 +3,6 @@ import camelCase from 'lodash/camelCase';
 /**
  * Checks if the color string is a Framer Shared Color token and extracts
  * the underlying color or returns the original string.
- *
  * @param {string} color - A Framer Shared Color Token/regular CSS color
  * @returns {string} A valid HTML color string
  *

packages/babel-plugin-unwrap-createstyles/src/unwrapCreateStyles.js

@@ -1,21 +1,18 @@
 /**
- *
  * @param {babel.types.ImportDeclaration} param0
  */
 function isImportFromStyles({ source }) {
   return source.value === '@material-ui/core/styles' || source.value === '@material-ui/styles';
 }
 
 /**
- *
  * @param {babel.types.CallExpression} param0
  */
 function isCreateStylesCall({ callee }) {
   return callee.name === 'createStyles';
 }
 
 /**
- *
  * @param {babel.types.ImportSpecifier} param0
  */
 function isCreateStylesImportSpecifier({ imported }) {

packages/material-ui-icons/builder.js

@@ -86,7 +86,6 @@ const svgo = new SVGO({
 
 /**
  * Return Pascal-Cased component name.
- *
  * @param {string} destPath
  * @returns {string} class name
  */

packages/material-ui-icons/renameFilters/default.js

@@ -2,16 +2,13 @@ import path from 'path';
 
 /*
  * Return path to write file to inside outputDir.
- *
  * @param {object} svgPathObj
  * path objects from path.parse
- *
  * @param {string} innerPath
  * Path (relative to options.svgDir) to svg file
  *   e.g. if svgFile was /home/user/icons/path/to/svg/file.svg
  *   options.svgDir is /home/user/icons/
  *   innerPath is path/to/svg
- *
  * @param {object} options
  * @returns {string} output file dest relative to outputDir
  */

packages/material-ui-styles/src/createStyles/createStyles.d.ts

@@ -4,7 +4,6 @@ import { StyleRules } from '@material-ui/styles/withStyles';
  * This function doesn't really "do anything" at runtime, it's just the identity
  * function. Its only purpose is to defeat TypeScript's type widening when providing
  * style rules to `withStyles` which are a function of the `Theme`.
- *
  * @param styles a set of style mappings
  * @returns the same styles that were passed in
  */

packages/material-ui-styles/src/propsToClassKey/propsToClassKey.js

@@ -16,7 +16,6 @@ function isEmpty(string) {
 /**
  * Generates string classKey based on the properties provided. It starts with the
  * variant if defined, and then it appends all other properties in alphabetical order.
- *
  * @param {object} props - the properties for which the classKey should be created
  */
 export default function propsToClassKey(props) {

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

@@ -29,8 +29,8 @@ export type BordersProps = PropsFor<typeof borders>;
 
 // breakpoints.js
 type DefaultBreakPoints = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+
 /**
- *
  * @returns An enhanced stylefunction that considers breakpoints
  */
 export function breakpoints<Props, Breakpoints extends string = DefaultBreakPoints>(

packages/material-ui-types/index.d.ts

@@ -79,7 +79,6 @@ type IfEquals<T, U, Y = unknown, N = never> = (<G>() => G extends T ? 1 : 2) ext
  * @example `expectType<number | string, typeof value>(value)`
  * TypeScript issues a type error since `value is not assignable to never`.
  * This means `typeof value` is not identical to `number | string`
- *
  * @param actual
  */
 export function expectType<Expected, Actual>(actual: IfEquals<Actual, Expected, Actual>): void;

packages/material-ui-utils/macros/MuiError.macro.js

@@ -11,7 +11,6 @@ function invertObject(object) {
 }
 
 /**
- *
  * @param {import('babel-plugin-macros').MacroParams} param0
  */
 function muiError({ references, babel, config }) {

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

@@ -117,7 +117,7 @@ export interface ChipTypeMap<P = {}, D extends React.ElementType = 'div'> {
      */
     label?: React.ReactNode;
     /**
-     * Callback function fired when the delete icon is clicked.
+     * Callback fired when the delete icon is clicked.
      * If set, the delete icon will be shown.
      */
     onDelete?: React.EventHandler<any>;

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

@@ -509,7 +509,7 @@ Chip.propTypes = {
    */
   onClick: PropTypes.func,
   /**
-   * Callback function fired when the delete icon is clicked.
+   * Callback fired when the delete icon is clicked.
    * If set, the delete icon will be shown.
    */
   onDelete: PropTypes.func,

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

@@ -52,7 +52,7 @@ export interface NativeSelectProps
    */
   inputProps?: NativeSelectInputProps;
   /**
-   * Callback function fired when a menu item is selected.
+   * Callback fired when a menu item is selected.
    *
    * @param {object} event The event source of the callback.
    * You can pull out the new value by accessing `event.target.value` (string).