@mui/material 5.14.7 → 5.14.9

package/README.md

@@ -1,195 +1,38 @@
 <!-- markdownlint-disable-next-line -->
 <p align="center">
-  <a href="https://mui.com/" rel="noopener" target="_blank"><img width="150" src="/docs/public/static/logo.svg" alt="MUI logo"></a>
+  <a href="https://mui.com/material-ui/" rel="noopener" target="_blank"><img width="150" height="133" src="https://mui.com/static/logo.svg" alt="Material UI logo"></a>
 </p>
 
-<h1 align="center">MUI Core</h1>
+<h1 align="center">Material UI</h1>
 
-**MUI Core** contains foundational React UI component libraries for shipping new features faster.
-
-- [_Material UI_](https://mui.com/material-ui/getting-started/) is a comprehensive library of components that features our implementation of Google's [Material Design](https://m2.material.io/design/introduction/) system.
-
-- [_Joy UI_](https://mui.com/joy-ui/getting-started/) is a beautifully designed library of React UI components.
-
-- [_Base UI_](https://mui.com/base-ui/getting-started/) is our library of "unstyled" components and low-level hooks. With Base, you gain complete control over your app's CSS and accessibility features.
-
-- [_MUI System_](https://mui.com/system/getting-started/) is a collection of CSS utilities to help you rapidly lay out custom designs.
-
-<div align="center">
-
-**[Stable channel v5](https://mui.com/)**
-
-[![license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/mui/material-ui/blob/HEAD/LICENSE)
-[![npm latest package](https://img.shields.io/npm/v/@mui/material/latest.svg)](https://www.npmjs.com/package/@mui/material)
-[![npm next package](https://img.shields.io/npm/v/@mui/material/next.svg)](https://www.npmjs.com/package/@mui/material)
-[![npm downloads](https://img.shields.io/npm/dm/@mui/material.svg)](https://www.npmjs.com/package/@mui/material)
-[![CircleCI](https://circleci.com/gh/mui/material-ui/tree/master.svg?style=shield)](https://app.circleci.com/pipelines/github/mui/material-ui?branch=master)
-[![Coverage Status](https://img.shields.io/codecov/c/github/mui/material-ui/master.svg)](https://codecov.io/gh/mui/material-ui/branch/master)
-[![Follow on Twitter](https://img.shields.io/twitter/follow/MUI_hq.svg?label=follow+MUI)](https://twitter.com/MUI_hq)
-[![Renovate status](https://img.shields.io/badge/renovate-enabled-brightgreen.svg)](https://github.com/mui/material-ui/issues/27062)
-[![Average time to resolve an issue](https://isitmaintained.com/badge/resolution/mui/material-ui.svg)](https://isitmaintained.com/project/mui/material-ui 'Average time to resolve an issue')
-[![Open Collective backers and sponsors](https://img.shields.io/opencollective/all/mui)](https://opencollective.com/mui)
-[![CII Best Practices](https://bestpractices.coreinfrastructure.org/projects/1320/badge)](https://bestpractices.coreinfrastructure.org/projects/1320)
-
-</div>
+Material UI is a comprehensive library of components that features our implementation of Google's [Material Design](https://m2.material.io/design/introduction/) system.
 
 ## Installation
 
-### Material UI
-
-Material UI is available as an [npm package](https://www.npmjs.com/package/@mui/material).
-
-**npm:**
+Install the package in your project directory with:
 
 ```bash
 npm install @mui/material @emotion/react @emotion/styled
 ```
 
-**yarn:**
-
-```bash
-yarn add @mui/material @emotion/react @emotion/styled
-```
-
-<details>
-  <summary>Older versions</summary>
-
-- **[v4.x](https://v4.mui.com/)** ([Migration from v4 to v5](https://mui.com/material-ui/migration/migration-v4/))
-- **[v3.x](https://v3.mui.com/)** ([Migration from v3 to v4](https://mui.com/material-ui/migration/migration-v3/))
-- **[v0.x](https://v0.mui.com/)** ([Migration to v1](https://mui.com/material-ui/migration/migration-v0x/))
-
-</details>
-
-**Note:** `@next` only points to pre-releases.
-Use `@latest` for the latest stable release.
-
-### Base UI
-
-Base UI is available as an [npm package](https://www.npmjs.com/package/@mui/base).
-
-**npm:**
-
-```bash
-npm install @mui/base
-```
-
-**yarn:**
-
-```bash
-yarn add @mui/base
-```
-
-**Note**: Base UI is still in beta.
-We are adding new components regularly and you're welcome to contribute!
-
-### MUI System
-
-MUI System is available as an [npm package](https://www.npmjs.com/package/@mui/system).
-
-**npm:**
-
-```bash
-npm install @mui/system @emotion/react @emotion/styled
-```
-
-**yarn:**
-
-```bash
-yarn add @mui/system @emotion/react @emotion/styled
-```
-
-Or if you want to use `styled-components` as a styling engine:
-
-**npm:**
-
-```bash
-npm install @mui/material @mui/styled-engine-sc styled-components
-```
-
-**yarn:**
-
-```bash
-yarn add @mui/material @mui/styled-engine-sc styled-components
-```
-
-Visit our [`styled-engine` guide](https://mui.com/material-ui/guides/styled-engine/) for more information about how to configure `styled-components` as the style engine.
-
-## Sponsors
-
-### Diamond 💎
-
-<p>
-  <a href="https://octopus.com/?utm_source=MUI&utm_medium=referral&utm_content=readme" rel="noopener sponsored" target="_blank"><img height="128" width="128" src="https://i.ibb.co/w0HF0Nz/Logo-Blue-140px-rgb.png" alt="octopus" title="Repeatable, reliable deployments" loading="lazy" /></a>
-  <a href="https://www.doit.com/flexsave/?utm_source=MUI&utm_medium=referral&utm_content=readme" rel="noopener sponsored" target="_blank"><img height="128" width="128" src="https://avatars.githubusercontent.com/u/8424863?s=256" alt="doit" title="Management Platform for Google Cloud and AWS" loading="lazy" /></a>
-</p>
-
-Diamond Sponsors are those who have pledged \$1,500/month or more to MUI.
-
-### Gold 🏆
-
-via [Open Collective](https://opencollective.com/mui) or via [Patreon](https://www.patreon.com/oliviertassinari)
-
-<p>
-  <a href="https://tidelift.com/subscription/pkg/npm-material-ui?utm_source=npm-material-ui&utm_medium=referral&utm_campaign=homepage" rel="noopener sponsored" target="_blank"><img height="96" width="96" src="https://avatars.githubusercontent.com/u/30204434?s=192" alt="tidelift.com" title="Enterprise-ready open-source software" loading="lazy" /></a>
-  <a href="https://www.text-em-all.com/?utm_source=MUI&utm_medium=referral&utm_content=readme" rel="noopener sponsored" target="_blank"><img src="https://avatars.githubusercontent.com/u/1262264?s=192" alt="text-em-all.com" title="Mass Text Messaging & Automated Calling" height="96" width="96" loading="lazy"></a>
-  <a href="https://open.spotify.com/?utm_source=MUI&utm_medium=referral&utm_content=readme" rel="noopener sponsored" target="_blank"><img height="96" width="96" src="https://images.opencollective.com/spotify/f37ea28/logo/192.png" alt="Spotify" title="Music service to access to millions of songs" loading="lazy" /></a>
-  <a href="https://megafamous.com/?utm_source=MUI&utm_medium=referral&utm_content=readme" rel="noopener sponsored" target="_blank"><img height="96" width="96" src="https://mui.com/static/sponsors/megafamous.png" alt="megafamous.com" title="The best place to buy Instagram followers & likes." loading="lazy" /></a>
-  <a href="https://www.dialmycalls.com/?utm_source=MUI&utm_medium=referral&utm_content=readme" rel="noopener sponsored" target="_blank"><img height="96" width="96" src="https://images.opencollective.com/dialmycalls/f5ae9ab/avatar/192.png" alt="dialmycalls.com" title="Send text messages, calls & emails to thousands with ease." loading="lazy" /></a>
-  <a href="https://goread.io/?utm_source=MUI&utm_medium=referral&utm_content=readme" rel="noopener sponsored" target="_blank"><img height="96" width="96" src="https://images.opencollective.com/goread_io/eb6337d/logo/192.png" alt="goread.io" title="Instagram followers, likes, power likes, views, comments, saves in minutes." loading="lazy" /></a>
-  <a href="https://icons8.com?utm_source=MUI&utm_medium=referral&utm_content=readme" rel="noopener sponsored" target="_blank"><img height="96" width="96" src="https://images.opencollective.com/icons8/7fa1641/logo/192.png" alt="Icons8" title="We provide the neat icons, photos, illustrations, and music. Developers, use our API to insert all the content we have into your apps." loading="lazy"></a>
-  <a href="https://ipinfo.ai?utm_source=MUI&utm_medium=referral&utm_content=readme" rel="noopener sponsored" target="_blank"><img height="96" width="96" src="https://images.opencollective.com/ipinfoai/04f41d5/logo/192.png" alt="ipinfo.ai" title="We offer various IP data API services, including IP Geolocation Data, ASN Data, Company Data, IP Ranges Data, Abuse Contacts Data, Anonymous Browsing Detection, etc." loading="lazy"></a>
-</p>
-
-Gold Sponsors are those who have pledged \$500/month or more to MUI.
-
-### More backers
-
-See the full list of [our backers](https://mui.com/material-ui/discover-more/backers/).
-
-## Getting started with Material UI
-
-Here is an example of a basic app using Material UI's `Button` component:
-
-```jsx
-import * as React from 'react';
-import Button from '@mui/material/Button';
-
-function App() {
-  return <Button variant="contained">Hello World</Button>;
-}
-```
-
-In the interactive demo below, try changing the code and see how it affects the output.
-(Hint: change `variant` to `"outlined"` and `color` to `"secondary"`.
-For more options, see the [`Button` component page](https://mui.com/material-ui/react-button/) in our docs.)
+## Documentation
 
-[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/material-ui-u9sy1h)
+Visit [https://mui.com/material-ui/](https://mui.com/material-ui/) to view the full documentation.
 
 ## Questions
 
-For how-to questions that don't involve making changes to the code base, please use [Stack Overflow](https://stackoverflow.com/questions/tagged/material-ui) instead of GitHub issues.
-Use the "mui" tag on Stack Overflow to make it easier for the community to find your question.
+For how-to questions that don't involve making changes to the code base, please use [Stack Overflow](https://stackoverflow.com/questions/tagged/material-ui) instead of GitHub issues.
+Use the "material-ui" tag on Stack Overflow to make it easier for the community to find your question.
 
 ## Examples
 
 Our documentation features [a collection of example projects using Material UI](https://mui.com/material-ui/getting-started/example-projects/).
 
-## Documentation
-
-- [Material UI](https://mui.com/material-ui/getting-started/)
-- [Joy UI](https://mui.com/joy-ui/getting-started/)
-- [Base UI](https://mui.com/base-ui/getting-started/)
-- [MUI System](https://mui.com/system/getting-started/)
-
-## Premium themes
-
-You can find complete templates and themes in the [MUI Store](https://mui.com/store/?utm_source=docs&utm_medium=referral&utm_campaign=readme-store).
-
 ## Contributing
 
 Read the [contributing guide](/CONTRIBUTING.md) to learn about our development process, how to propose bug fixes and improvements, and how to build and test your changes.
 
-Contributing to MUI Core is about more than just issues and pull requests!
+Contributing to Material UI is about more than just issues and pull requests!
 There are many other ways to [support MUI](https://mui.com/material-ui/getting-started/faq/#mui-is-awesome-how-can-i-support-the-project) beyond contributing to the code base.
 
 ## Changelog
@@ -208,35 +51,3 @@ This project is licensed under the terms of the
 ## Security
 
 For details of supported versions and contact details for reporting security issues, please refer to the [security policy](https://github.com/mui/material-ui/security/policy).
-
-## Sponsoring services
-
-These great services sponsor MUI's core infrastructure:
-
-<picture>
-  <source media="(prefers-color-scheme: dark)" srcset="/docs/public/static/readme/github-darkmode.svg">
-  <source media="(prefers-color-scheme: light)" srcset="/docs/public/static/readme/github-lightmode.svg">
-  <img alt="GitHub logo" src="/docs/public/static/readme/github-lightmode.svg" width="80" height="43">
-</picture>
-
-[GitHub](https://github.com/) lets us host the Git repository and coordinate contributions.
-
-<picture>
-  <source media="(prefers-color-scheme: dark)" srcset="/docs/public/static/readme/netlify-darkmode.svg">
-  <source media="(prefers-color-scheme: light)" srcset="/docs/public/static/readme/netlify-lightmode.svg">
-  <img alt="Netlify logo" src="/docs/public/static/readme/netlify-lightmode.svg" width="100" height="27" style="margin-top: 1rem;">
-</picture>
-
-[Netlify](https://www.netlify.com/) lets us distribute the documentation.
-
-<picture>
-  <source media="(prefers-color-scheme: dark)" srcset="/docs/public/static/readme/browserstack-darkmode.svg">
-  <source media="(prefers-color-scheme: light)" srcset="/docs/public/static/readme/browserstack-lightmode.svg">
-  <img alt="BrowserStack logo" src="/docs/public/static/readme/browserstack-lightmode.svg" width="140" height="25" style="margin-top: 1rem;">
-</picture>
-
-[BrowserStack](https://www.browserstack.com/) lets us test in real browsers.
-
-<img loading="lazy" alt="CodeCov logo" src="https://avatars.githubusercontent.com/u/8226205?s=70" width="35" height="35" style="margin-top: 1rem;">
-
-[CodeCov](https://about.codecov.io/) lets us monitor test coverage.

package/Radio/Radio.js

@@ -21,10 +21,11 @@ import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
     classes,
-    color
+    color,
+    size
   } = ownerState;
   const slots = {
-    root: ['root', `color${capitalize(color)}`]
+    root: ['root', `color${capitalize(color)}`, size !== 'medium' && `size${capitalize(size)}`]
   };
   return _extends({}, classes, composeClasses(slots, getRadioUtilityClass, classes));
 };

package/Radio/radioClasses.d.ts

@@ -9,6 +9,8 @@ export interface RadioClasses {
     colorPrimary: string;
     /** Styles applied to the root element if `color="secondary"`. */
     colorSecondary: string;
+    /** Styles applied to the root element if `size="small"`. */
+    sizeSmall: string;
 }
 export type RadioClassKey = keyof RadioClasses;
 export declare function getRadioUtilityClass(slot: string): string;

package/Radio/radioClasses.js

@@ -3,5 +3,5 @@ import generateUtilityClass from '../generateUtilityClass';
 export function getRadioUtilityClass(slot) {
   return generateUtilityClass('MuiRadio', slot);
 }
-const radioClasses = generateUtilityClasses('MuiRadio', ['root', 'checked', 'disabled', 'colorPrimary', 'colorSecondary']);
+const radioClasses = generateUtilityClasses('MuiRadio', ['root', 'checked', 'disabled', 'colorPrimary', 'colorSecondary', 'sizeSmall']);
 export default radioClasses;

package/ScopedCssBaseline/ScopedCssBaseline.d.ts

@@ -1,34 +1,36 @@
-import { SxProps } from '@mui/system';
 import * as React from 'react';
+import { SxProps } from '@mui/system';
 import { Theme } from '../styles';
 import { OverridableComponent, OverrideProps } from '../OverridableComponent';
 import { ScopedCssBaselineClasses } from './scopedCssBaselineClasses';
 
+export interface ScopedCssBaselineOwnProps {
+  /**
+   * The content of the component.
+   */
+  children?: React.ReactNode;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<ScopedCssBaselineClasses>;
+  /**
+   * Enable `color-scheme` CSS property to use `theme.palette.mode`.
+   * For more details, check out https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme
+   * For browser support, check out https://caniuse.com/?search=color-scheme
+   */
+  enableColorScheme?: boolean;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+}
+
 export interface ScopedCssBaselineTypeMap<
   AdditionalProps = {},
-  DefaultComponent extends React.ElementType = 'div',
+  RootComponent extends React.ElementType = 'div',
 > {
-  props: AdditionalProps & {
-    /**
-     * The content of the component.
-     */
-    children?: React.ReactNode;
-    /**
-     * Override or extend the styles applied to the component.
-     */
-    classes?: Partial<ScopedCssBaselineClasses>;
-    /**
-     * Enable `color-scheme` CSS property to use `theme.palette.mode`.
-     * For more details, check out https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme
-     * For browser support, check out https://caniuse.com/?search=color-scheme
-     */
-    enableColorScheme?: boolean;
-    /**
-     * The system prop that allows defining system overrides as well as additional CSS styles.
-     */
-    sx?: SxProps<Theme>;
-  };
-  defaultComponent: DefaultComponent;
+  props: AdditionalProps & ScopedCssBaselineOwnProps;
+  defaultComponent: RootComponent;
 }
 /**
  *

package/Select/SelectInput.js

@@ -109,6 +109,7 @@ const useUtilityClasses = ownerState => {
  * @ignore - internal component.
  */
 const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, ref) {
+  var _MenuProps$slotProps;
   const {
       'aria-describedby': ariaDescribedby,
       'aria-label': ariaLabel,
@@ -432,6 +433,7 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
     error
   });
   const classes = useUtilityClasses(ownerState);
+  const paperProps = _extends({}, MenuProps.PaperProps, (_MenuProps$slotProps = MenuProps.slotProps) == null ? void 0 : _MenuProps$slotProps.paper);
   return /*#__PURE__*/_jsxs(React.Fragment, {
     children: [/*#__PURE__*/_jsx(SelectSelect, _extends({
       ref: handleDisplayRef,
@@ -493,11 +495,13 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
         role: 'listbox',
         disableListWrap: true
       }, MenuProps.MenuListProps),
-      PaperProps: _extends({}, MenuProps.PaperProps, {
-        style: _extends({
-          minWidth: menuMinWidth
-        }, MenuProps.PaperProps != null ? MenuProps.PaperProps.style : null)
-      }),
+      slotProps: {
+        paper: _extends({}, paperProps, {
+          style: _extends({
+            minWidth: menuMinWidth
+          }, paperProps != null ? paperProps.style : null)
+        })
+      },
       children: items
     }))]
   });

package/Skeleton/Skeleton.d.ts

@@ -7,49 +7,51 @@ import { SkeletonClasses } from './skeletonClasses';
 
 export interface SkeletonPropsVariantOverrides {}
 
+export interface SkeletonOwnProps {
+  /**
+   * The animation.
+   * If `false` the animation effect is disabled.
+   * @default 'pulse'
+   */
+  animation?: 'pulse' | 'wave' | false;
+  /**
+   * Optional children to infer width and height from.
+   */
+  children?: React.ReactNode;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<SkeletonClasses>;
+  /**
+   * Height of the skeleton.
+   * Useful when you don't want to adapt the skeleton to a text element but for instance a card.
+   */
+  height?: number | string;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+  /**
+   * The type of content that will be rendered.
+   * @default 'text'
+   */
+  variant?: OverridableStringUnion<
+    'text' | 'rectangular' | 'rounded' | 'circular',
+    SkeletonPropsVariantOverrides
+  >;
+  /**
+   * Width of the skeleton.
+   * Useful when the skeleton is inside an inline element with no width of its own.
+   */
+  width?: number | string;
+}
+
 export interface SkeletonTypeMap<
   AdditionalProps = {},
-  DefaultComponent extends React.ElementType = 'span',
+  RootComponent extends React.ElementType = 'span',
 > {
-  props: AdditionalProps & {
-    /**
-     * The animation.
-     * If `false` the animation effect is disabled.
-     * @default 'pulse'
-     */
-    animation?: 'pulse' | 'wave' | false;
-    /**
-     * Optional children to infer width and height from.
-     */
-    children?: React.ReactNode;
-    /**
-     * Override or extend the styles applied to the component.
-     */
-    classes?: Partial<SkeletonClasses>;
-    /**
-     * Height of the skeleton.
-     * Useful when you don't want to adapt the skeleton to a text element but for instance a card.
-     */
-    height?: number | string;
-    /**
-     * The system prop that allows defining system overrides as well as additional CSS styles.
-     */
-    sx?: SxProps<Theme>;
-    /**
-     * The type of content that will be rendered.
-     * @default 'text'
-     */
-    variant?: OverridableStringUnion<
-      'text' | 'rectangular' | 'rounded' | 'circular',
-      SkeletonPropsVariantOverrides
-    >;
-    /**
-     * Width of the skeleton.
-     * Useful when the skeleton is inside an inline element with no width of its own.
-     */
-    width?: number | string;
-  };
-  defaultComponent: DefaultComponent;
+  props: AdditionalProps & SkeletonOwnProps;
+  defaultComponent: RootComponent;
 }
 
 /**