`.
+Components like [Stack](/joy-ui/react-stack/) and [Sheet](/joy-ui/react-sheet/), by contrast, feature usage-specific props that make them ideal for certain use cases: Stack for one-dimensional layouts, and Sheet for surfaces that need access to Joy UI's global variants.
+
+## Basics
+
+```jsx
+import Box from '@mui/joy/Box';
+```
+
+The Box component renders as a `
` by default, but you can swap in any other valid HTML tag or React component using the `component` prop.
+The demo below replaces the `
` with a `` element:
+
+{{"demo": "BoxBasic.js", "defaultCodeOpen": true }}
+
+## Customization
+
+### With MUI System props
+
+As a CSS utility component, the Box supports all [MUI System properties](/system/properties/).
+You can use them as props directly on the component.
+
+{{"demo": "BoxSystemProps.js", "defaultCodeOpen": true }}
+
+### With the sx prop
+
+Use the [`sx` prop](/system/getting-started/the-sx-prop/) to quickly customize any Box instance using a superset of CSS that has access to all the style functions and theme-aware properties exposed in the MUI System package.
+The demo below shows how to apply colors from the theme using this prop:
+
+{{"demo": "BoxSx.js", "defaultCodeOpen": true }}
+
+## Anatomy
+
+The Box component is composed of a single root `
` element:
-The Box component is a part of the standalone [MUI System](/system/getting-started/) utility library.
-It is re-exported from `@mui/joy` for your convenience.
-:::
+```html
+
+
+
+```
diff --git a/docs/data/joy/components/breadcrumbs/breadcrumbs.md b/docs/data/joy/components/breadcrumbs/breadcrumbs.md
index fc0d593cac82d4..f1ed8756bd9cd8 100644
--- a/docs/data/joy/components/breadcrumbs/breadcrumbs.md
+++ b/docs/data/joy/components/breadcrumbs/breadcrumbs.md
@@ -93,11 +93,9 @@ As an alternative to the behavior of the condensed demo above, consider adding a
## Accessibility
-(WAI-ARIA: https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/)
-
Be sure to add an informative `aria-label` description to the Breadcrumbs component.
-The following features are included to optimize the component's baseline accessibility:
+The following features, which follows [WAI-ARIA Authoring Practices](https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/), are included to optimize the component's baseline accessibility:
- The set of links is structured using an ordered list (`- `).
- Visual separators between links are hidden with `aria-hidden` to prevent screen readers from announcing them.
diff --git a/docs/data/joy/components/card/CardUsage.js b/docs/data/joy/components/card/CardUsage.js
index e2876a32355570..15df5a0fc7c603 100644
--- a/docs/data/joy/components/card/CardUsage.js
+++ b/docs/data/joy/components/card/CardUsage.js
@@ -66,10 +66,12 @@ export default function CardUsage() {
{"Yosemite National Park is in California's Sierra Nevada mountains."}
- Answer questions on{' '} - Stack Overflow + Stack Overflow . diff --git a/docs/src/components/about/Team.tsx b/docs/src/components/about/Team.tsx index 05464dd093739e..805d10b79cf065 100644 --- a/docs/src/components/about/Team.tsx +++ b/docs/src/components/about/Team.tsx @@ -206,7 +206,7 @@ const contributors = [ { name: 'Ryan Cogswell', github: 'ryancogswell', - title: 'Stack Overflow top contributor', + title: 'Stack Overflow top contributor', location: 'Minnesota, United States', locationCountry: 'us', src: 'https://avatars.githubusercontent.com/u/287804', diff --git a/docs/src/components/header/ThemeModeToggle.tsx b/docs/src/components/header/ThemeModeToggle.tsx index 6a7667f796d8df..ff22e076ae3797 100644 --- a/docs/src/components/header/ThemeModeToggle.tsx +++ b/docs/src/components/header/ThemeModeToggle.tsx @@ -6,7 +6,6 @@ import DarkModeOutlined from '@mui/icons-material/DarkModeOutlined'; import LightModeOutlined from '@mui/icons-material/LightModeOutlined'; import useMediaQuery from '@mui/material/useMediaQuery'; import { useChangeTheme } from 'docs/src/modules/components/ThemeContext'; -import useLocalStorageState from '@mui/utils/useLocalStorageState'; function CssVarsModeToggle(props: { onChange: (checked: boolean) => void }) { const [mounted, setMounted] = React.useState(false); @@ -40,19 +39,30 @@ function CssVarsModeToggle(props: { onChange: (checked: boolean) => void }) { export default function ThemeModeToggle() { const theme = useTheme(); const changeTheme = useChangeTheme(); - const [mode, setMode] = useLocalStorageState('mui-mode', 'system'); + const [mode, setMode] = React.useState
- With a global class name. \n
- With a rule name as part of the component's
styleOverridesproperty in a custom theme. \n - With a global class name. \n
- With a rule name as part of the component's
styleOverridesproperty in a custom theme. \n
Learn which approach is recommended, depending on the situation, to customize Joy UI components.
-- For customizing only a specific instance of a given component, [_use the `sx` prop_](#sx-prop). +- For customizing only a specific instance of a given component, [_use the `sx` prop_](#the-sx-prop). - To ensure every instance of a given component looks the same across you app, [_use theming_](#theming). - To create something that Joy UI doesn't support out of the box but still has design consistency, create a [_reusable component_](#reusable-component) that uses Joy UI's theme design tokens. -## `sx` prop +## The sx prop The `sx` prop provides a superset of CSS (contains all CSS properties/selectors, in addition to custom ones) that maps values directly from the theme, depending on the CSS property used. diff --git a/docs/data/joy/customization/theme-colors/theme-colors.md b/docs/data/joy/customization/theme-colors/theme-colors.md index 9d04307832c2dc..6c46b2fec74994 100644 --- a/docs/data/joy/customization/theme-colors/theme-colors.md +++ b/docs/data/joy/customization/theme-colors/theme-colors.md @@ -132,7 +132,7 @@ declare module '@mui/joy/styles' { Adding custom tokens increases your stylesheet's bundle size, and adds an extra set of maintenance costs to your app. These tradeoffs mean that adding new tokens is usually only worthwhile when you know that they'll be used by many components. -As an alternative, consider using [the `sx` prop](/joy-ui/customization/approaches/#sx-prop) for one-off customizations. +As an alternative, consider using [the `sx` prop](/joy-ui/customization/approaches/#the-sx-prop) for one-off customizations. ::: ### Adding new palettes @@ -254,26 +254,4 @@ This removes them from the `theme` object and prevents the corresponding CSS var For example, all default global variant color tokens comes with styles for the `:active` pseudo class. Here's how you'd remove it from the solid variant. -```jsx -// ⚠️ If the value is `undefined`, it should be `undefined` for all color schemes. -const theme = extendTheme({ - colorSchemes: { - light: { - palette: { - primary: { - solidActiveBg: undefined, - }, - }, - }, - dark: { - palette: { - primary: { - solidActiveBg: undefined, - }, - }, - }, - }, -}); -``` - -{{"demo": "RemoveActiveTokens.js"}} +{{"demo": "RemoveActiveTokens.js", "defaultCodeOpen": true}} diff --git a/docs/data/joy/getting-started/support/support.md b/docs/data/joy/getting-started/support/support.md index b8bb49deb475b5..09c5049750f2bc 100644 --- a/docs/data/joy/getting-started/support/support.md +++ b/docs/data/joy/getting-started/support/support.md @@ -27,21 +27,26 @@ We require bug reports to be accompanied by a **minimal reproduction**. It significantly increases the odds of fixing the problem. You have a few possible options to provide it: -- You can browse the documentation, find an example close to your use case, and then open it in a live editor: - - -
-
-
- 
-
-
+#### Use the live editors
-- You can use a starter React template to build a reproduction case with [JavaScript](https://stackblitz.com/github/stackblitz/starters/tree/main/react) or [TypeScript](https://stackblitz.com/github/stackblitz/starters/tree/main/react-ts).
+You can browse the documentation, find an example close to your use case, and then open it in a live editor:
-## Stack Overflow
+
+
+
+
+
+
+
+
-We use Stack Overflow for how-to questions. Answers are crowdsourced from expert developers in the Joy UI community as well as Joy UI maintainers.
+#### Use starter templates
+
+You can use a starter React template to build a reproduction case with [JavaScript](https://stackblitz.com/github/stackblitz/starters/tree/main/react) or [TypeScript](https://stackblitz.com/github/stackblitz/starters/tree/main/react-ts).
+
+## Stack Overflow
+
+We use Stack Overflow for how-to questions. Answers are crowdsourced from expert developers in the Joy UI community as well as Joy UI maintainers.
You can search through existing questions and answers to see if someone has asked a similar question using the [joy-ui tags](https://stackoverflow.com/questions/tagged/joy-ui):
@@ -84,7 +89,7 @@ Our tools are used by thousands of developers and teams all around the world, ma
You can join Discord to engage in lively discussions, share your projects, and interact with developers just like you from all around the world. We'd love for you to join us!
:::warning
-How-to questions are not accepted on Discord, they should be asked on [Stack Overflow](#stack-overflow).
+How-to questions are not accepted on Discord, they should be asked on [Stack Overflow](#stack-overflow).
:::
## Custom work
diff --git a/docs/data/joy/integrations/material-ui/material-ui.md b/docs/data/joy/integrations/material-ui/material-ui.md
index 432a599743f157..955424df5ea55a 100644
--- a/docs/data/joy/integrations/material-ui/material-ui.md
+++ b/docs/data/joy/integrations/material-ui/material-ui.md
@@ -18,7 +18,7 @@ Additionally, keep these in mind when using them together:
- Both of them use [MUI System](/system/getting-started/) as their style engine, which uses React context for theming.
- Theme scoping must be done on one of the libraries.
-## Prerequisite
+### Prerequisites
- Have `@mui/material` and `@mui/joy` installed in your project.
- The version of both libraries must be [v5.12.0](https://github.com/mui/material-ui/releases/tag/v5.12.0) or higher.
diff --git a/docs/data/joy/pages.ts b/docs/data/joy/pages.ts
index d7b83a16585e6c..d18ded364dd1a6 100644
--- a/docs/data/joy/pages.ts
+++ b/docs/data/joy/pages.ts
@@ -47,7 +47,6 @@ const pages: readonly MuiPage[] = [
{
pathname: '/joy-ui/react-toggle-button-group',
title: 'Toggle Button Group',
- newFeature: true,
},
],
},
@@ -74,15 +73,15 @@ const pages: readonly MuiPage[] = [
{ pathname: '/joy-ui/react-circular-progress', title: 'Circular Progress' },
{ pathname: '/joy-ui/react-linear-progress', title: 'Linear Progress' },
{ pathname: '/joy-ui/react-modal' },
- { pathname: '/joy-ui/react-skeleton', newFeature: true },
- { pathname: '/joy-ui/react-snackbar', newFeature: true },
+ { pathname: '/joy-ui/react-skeleton' },
+ { pathname: '/joy-ui/react-snackbar' },
],
},
{
pathname: '/joy-ui/components/surfaces',
subheader: 'surfaces',
children: [
- { pathname: '/joy-ui/react-accordion', newFeature: true },
+ { pathname: '/joy-ui/react-accordion' },
{ pathname: '/joy-ui/react-card' },
{ pathname: '/joy-ui/react-sheet' },
],
@@ -92,10 +91,10 @@ const pages: readonly MuiPage[] = [
subheader: 'navigation',
children: [
{ pathname: '/joy-ui/react-breadcrumbs' },
- { pathname: '/joy-ui/react-drawer', newFeature: true },
+ { pathname: '/joy-ui/react-drawer' },
{ pathname: '/joy-ui/react-link' },
{ pathname: '/joy-ui/react-menu' },
- { pathname: '/joy-ui/react-stepper', newFeature: true },
+ { pathname: '/joy-ui/react-stepper' },
{ pathname: '/joy-ui/react-tabs' },
],
},
diff --git a/docs/data/material/components/box/BoxBasic.js b/docs/data/material/components/box/BoxBasic.js
new file mode 100644
index 00000000000000..6f93223d92cd53
--- /dev/null
+++ b/docs/data/material/components/box/BoxBasic.js
@@ -0,0 +1,10 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+
+export default function BoxBasic() {
+ return (
+ The Box component is a generic, theme-aware container with access to CSS utilities from MUI System.
-:::warning -Please refer to the [Box](/system/react-box/) component page in the MUI System docs for demos and details on usage. +{{"component": "modules/components/ComponentLinkHeader.js", "design": false}} + +## Introduction + +The Box component is a generic container for grouping other components. +It's a fundamental building block when working with Material UI—you can think of it as a `` with extra built-in features, like access to your app's theme and the [`sx` prop](/system/getting-started/the-sx-prop/).
+
+### Usage
+
+The Box component differs from other containers available in Material UI in that its usage is intended to be multipurpose and open-ended, just like a `
`.
+Components like [Container](/material-ui/react-container/), [Stack](/material-ui/react-stack/) and [Paper](/material-ui/react-paper/), by contrast, feature usage-specific props that make them ideal for certain use cases: Container for main layout orientation, Stack for one-dimensional layouts, and Paper for elevated surfaces.
+
+## Basics
+
+```jsx
+import Box from '@mui/material/Box';
+```
+
+The Box component renders as a `
` by default, but you can swap in any other valid HTML tag or React component using the `component` prop.
+The demo below replaces the `
` with a `` element:
+
+{{"demo": "BoxBasic.js", "defaultCodeOpen": true }}
+
+## Customization
+
+### With MUI System props
+
+As a CSS utility component, the Box supports all [MUI System properties](/system/properties/).
+You can use them as props directly on the component.
+
+{{"demo": "BoxSystemProps.js", "defaultCodeOpen": true }}
+
+### With the sx prop
+
+Use the [`sx` prop](/system/getting-started/the-sx-prop/) to quickly customize any Box instance using a superset of CSS that has access to all the style functions and theme-aware properties exposed in the MUI System package.
+The demo below shows how to apply colors from the theme using this prop:
+
+{{"demo": "BoxSx.js", "defaultCodeOpen": true }}
+
+## Anatomy
+
+The Box component is composed of a single root `
` element:
-The Box component is a part of the standalone [MUI System](/system/getting-started/) utility library.
-It is re-exported from `@mui/material` for your convenience.
-:::
+```html
+();
+ const timer = React.useRef>();
const buttonSx = {
...(success && {
@@ -31,7 +31,7 @@ export default function CircularIntegration() {
if (!loading) {
setSuccess(false);
setLoading(true);
- timer.current = window.setTimeout(() => {
+ timer.current = setTimeout(() => {
setSuccess(true);
setLoading(false);
}, 2000);
diff --git a/docs/data/material/components/progress/DelayingAppearance.js b/docs/data/material/components/progress/DelayingAppearance.js
index feff1c6659b7e4..df2b050772e529 100644
--- a/docs/data/material/components/progress/DelayingAppearance.js
+++ b/docs/data/material/components/progress/DelayingAppearance.js
@@ -32,7 +32,7 @@ export default function DelayingAppearance() {
}
setQuery('progress');
- timerRef.current = window.setTimeout(() => {
+ timerRef.current = setTimeout(() => {
setQuery('success');
}, 2000);
};
diff --git a/docs/data/material/components/progress/DelayingAppearance.tsx b/docs/data/material/components/progress/DelayingAppearance.tsx
index c7ef8f7f90feaa..a6784fd2d359d8 100644
--- a/docs/data/material/components/progress/DelayingAppearance.tsx
+++ b/docs/data/material/components/progress/DelayingAppearance.tsx
@@ -8,7 +8,7 @@ import Typography from '@mui/material/Typography';
export default function DelayingAppearance() {
const [loading, setLoading] = React.useState(false);
const [query, setQuery] = React.useState('idle');
- const timerRef = React.useRef();
+ const timerRef = React.useRef>();
React.useEffect(
() => () => {
@@ -32,7 +32,7 @@ export default function DelayingAppearance() {
}
setQuery('progress');
- timerRef.current = window.setTimeout(() => {
+ timerRef.current = setTimeout(() => {
setQuery('success');
}, 2000);
};
diff --git a/docs/data/material/getting-started/faq/faq.md b/docs/data/material/getting-started/faq/faq.md
index 9a2ef51aa355f0..b756cafbf70a9b 100644
--- a/docs/data/material/getting-started/faq/faq.md
+++ b/docs/data/material/getting-started/faq/faq.md
@@ -12,7 +12,7 @@ There are many ways to support us:
Follow us on [X](https://twitter.com/MUI_hq), like and retweet the important news. Or just talk about us with your friends.
- **Give us feedback**. Tell us what is going well or where there is improvement opportunities. Please upvote (👍) the issues that you are the most interested in seeing solved.
- **Help new users**. You can answer questions on
- [Stack Overflow](https://stackoverflow.com/questions/tagged/material-ui).
+ [Stack Overflow](https://stackoverflow.com/questions/tagged/material-ui).
- **Make changes happen**.
- Edit the documentation. At the bottom of every page, you can find an "Edit this page" button.
- Report bugs or missing features by [creating an issue](https://github.com/mui/material-ui/issues/new).
diff --git a/docs/data/material/getting-started/overview/overview.md b/docs/data/material/getting-started/overview/overview.md
index 7d9b74cde97f91..810cb82a8e5484 100644
--- a/docs/data/material/getting-started/overview/overview.md
+++ b/docs/data/material/getting-started/overview/overview.md
@@ -29,7 +29,7 @@ You can follow [this GitHub issue](https://github.com/mui/material-ui/issues/293
The [design kits](https://mui.com/design-kits/) streamline your workflow and boost consistency between designers and developers.
- **Trusted by thousands of organizations:** Material UI has the largest UI community in the React ecosystem.
It's almost as old as React itself—its history stretches back to 2014—and we're in this for the long haul.
- You can count on the community's support for years to come (e.g. [Stack Overflow](https://insights.stackoverflow.com/trends?tags=material-ui)).
+ You can count on the community's support for years to come (e.g. [Stack Overflow](https://insights.stackoverflow.com/trends?tags=material-ui)).
### Material UI vs. Base UI
diff --git a/docs/data/material/getting-started/support/support.md b/docs/data/material/getting-started/support/support.md
index 3f51f864f0dc35..6a9c7c672270d9 100644
--- a/docs/data/material/getting-started/support/support.md
+++ b/docs/data/material/getting-started/support/support.md
@@ -39,9 +39,9 @@ You have a few possible options to provide it:
- You can use a starter React template to build a reproduction case with [JavaScript](https://stackblitz.com/github/stackblitz/starters/tree/main/react) or [TypeScript](https://stackblitz.com/github/stackblitz/starters/tree/main/react-ts).
-## Stack Overflow
+## Stack Overflow
-We use Stack Overflow for how-to questions. Answers are crowdsourced from expert developers in the Material UI community as well as Material UI maintainers.
+We use Stack Overflow for how-to questions. Answers are crowdsourced from expert developers in the Material UI community as well as Material UI maintainers.
You can search through existing questions and answers to see if someone has asked a similar question using the [material-ui tags](https://stackoverflow.com/questions/tagged/material-ui):
@@ -89,7 +89,7 @@ Our tools are used by thousands of developers and teams all around the world, ma
You can join Discord to engage in lively discussions, share your projects, and interact with developers just like you from all around the world. We'd love for you to join us!
:::warning
-How-to questions are not accepted on Discord, they should be asked on [Stack Overflow](#stack-overflow).
+How-to questions are not accepted on Discord, they should be asked on [Stack Overflow](#stack-overflow).
:::
## Custom work
diff --git a/docs/data/material/getting-started/templates/dashboard/README.md b/docs/data/material/getting-started/templates/dashboard/README.md
index 4c192830b381e6..3415051ae20be5 100644
--- a/docs/data/material/getting-started/templates/dashboard/README.md
+++ b/docs/data/material/getting-started/templates/dashboard/README.md
@@ -5,7 +5,7 @@
1. Copy the files into your project, or one of the [example projects](https://github.com/mui/material-ui/tree/master/examples).
-2. Make sure your project has the required dependencies: @mui/material, @mui/icons-material, @emotion/styled, @emotion/react, recharts.
+2. Make sure your project has the required dependencies: @mui/material, @mui/icons-material, @emotion/styled, @emotion/react, @mui/x-charts.
3. Import and use the `Dashboard` component.
## Demo
diff --git a/docs/data/material/getting-started/templates/landing-page/LandingPage.js b/docs/data/material/getting-started/templates/landing-page/LandingPage.js
index 74c6cff3c40ba8..0ef02a93a9125d 100644
--- a/docs/data/material/getting-started/templates/landing-page/LandingPage.js
+++ b/docs/data/material/getting-started/templates/landing-page/LandingPage.js
@@ -19,8 +19,6 @@ import FAQ from './components/FAQ';
import Footer from './components/Footer';
import getLPTheme from './getLPTheme';
-const defaultTheme = createTheme({});
-
function ToggleCustomTheme({ showCustomTheme, toggleCustomTheme }) {
return (
{
setMode((prev) => (prev === 'dark' ? 'light' : 'dark'));
diff --git a/docs/data/material/getting-started/templates/landing-page/LandingPage.tsx b/docs/data/material/getting-started/templates/landing-page/LandingPage.tsx
index 399372c0c0587e..aedbebb9a0992d 100644
--- a/docs/data/material/getting-started/templates/landing-page/LandingPage.tsx
+++ b/docs/data/material/getting-started/templates/landing-page/LandingPage.tsx
@@ -18,8 +18,6 @@ import FAQ from './components/FAQ';
import Footer from './components/Footer';
import getLPTheme from './getLPTheme';
-const defaultTheme = createTheme({});
-
interface ToggleCustomThemeProps {
showCustomTheme: Boolean;
toggleCustomTheme: () => void;
@@ -67,6 +65,7 @@ export default function LandingPage() {
const [mode, setMode] = React.useState('dark');
const [showCustomTheme, setShowCustomTheme] = React.useState(true);
const LPtheme = createTheme(getLPTheme(mode));
+ const defaultTheme = createTheme({ palette: { mode } });
const toggleColorMode = () => {
setMode((prev) => (prev === 'dark' ? 'light' : 'dark'));
diff --git a/docs/data/material/getting-started/templates/landing-page/components/Features.js b/docs/data/material/getting-started/templates/landing-page/components/Features.js
index 99e0606e883d4a..f409b6b31d1a55 100644
--- a/docs/data/material/getting-started/templates/landing-page/components/Features.js
+++ b/docs/data/material/getting-started/templates/landing-page/components/Features.js
@@ -150,6 +150,7 @@ export default function Features() {
{items.map(({ icon, title, description }, index) => (
handleItemClick(index)}
sx={{
@@ -195,7 +196,7 @@ export default function Features() {
>
{icon}
- handleItemClick(index)}
sx={{
@@ -195,7 +196,7 @@ export default function Features() {
>
{icon}
-
))}
diff --git a/docs/data/material/getting-started/templates/landing-page/components/Hero.js b/docs/data/material/getting-started/templates/landing-page/components/Hero.js
index 00ceb2861270f3..c7da7e0072168d 100644
--- a/docs/data/material/getting-started/templates/landing-page/components/Hero.js
+++ b/docs/data/material/getting-started/templates/landing-page/components/Hero.js
@@ -17,7 +17,7 @@ export default function Hero() {
backgroundImage:
theme.palette.mode === 'light'
? 'linear-gradient(180deg, #CEE5FD, #FFF)'
- : 'linear-gradient(#02294F, #090E10)',
+ : `linear-gradient(#02294F, ${alpha('#090E10', 0.0)})`,
backgroundSize: '100% 20%',
backgroundRepeat: 'no-repeat',
})}
diff --git a/docs/data/material/getting-started/templates/landing-page/components/Hero.tsx b/docs/data/material/getting-started/templates/landing-page/components/Hero.tsx
index 00ceb2861270f3..c7da7e0072168d 100644
--- a/docs/data/material/getting-started/templates/landing-page/components/Hero.tsx
+++ b/docs/data/material/getting-started/templates/landing-page/components/Hero.tsx
@@ -17,7 +17,7 @@ export default function Hero() {
backgroundImage:
theme.palette.mode === 'light'
? 'linear-gradient(180deg, #CEE5FD, #FFF)'
- : 'linear-gradient(#02294F, #090E10)',
+ : `linear-gradient(#02294F, ${alpha('#090E10', 0.0)})`,
backgroundSize: '100% 20%',
backgroundRepeat: 'no-repeat',
})}
diff --git a/docs/data/material/getting-started/templates/landing-page/components/Pricing.js b/docs/data/material/getting-started/templates/landing-page/components/Pricing.js
index 17edcbeb3491ae..8892d3aa411850 100644
--- a/docs/data/material/getting-started/templates/landing-page/components/Pricing.js
+++ b/docs/data/material/getting-started/templates/landing-page/components/Pricing.js
@@ -115,8 +115,7 @@ export default function Pricing() {
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
- color:
- tier.title === 'Professional' ? 'primary.contrastText' : '',
+ color: tier.title === 'Professional' ? 'grey.100' : '',
}}
>
@@ -145,10 +144,7 @@ export default function Pricing() {
sx={{
display: 'flex',
alignItems: 'baseline',
- color:
- tier.title === 'Professional'
- ? 'primary.contrastText'
- : undefined,
+ color: tier.title === 'Professional' ? 'grey.50' : undefined,
}}
>
@@ -189,9 +185,7 @@ export default function Pricing() {
variant="subtitle2"
sx={{
color:
- tier.title === 'Professional'
- ? 'primary.contrastText'
- : undefined,
+ tier.title === 'Professional' ? 'grey.200' : undefined,
}}
>
{line}
diff --git a/docs/data/material/getting-started/templates/landing-page/components/Pricing.tsx b/docs/data/material/getting-started/templates/landing-page/components/Pricing.tsx
index c56ce6b5837658..bcb8ca47d33478 100644
--- a/docs/data/material/getting-started/templates/landing-page/components/Pricing.tsx
+++ b/docs/data/material/getting-started/templates/landing-page/components/Pricing.tsx
@@ -115,8 +115,7 @@ export default function Pricing() {
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
- color:
- tier.title === 'Professional' ? 'primary.contrastText' : '',
+ color: tier.title === 'Professional' ? 'grey.100' : '',
}}
>
@@ -145,10 +144,7 @@ export default function Pricing() {
sx={{
display: 'flex',
alignItems: 'baseline',
- color:
- tier.title === 'Professional'
- ? 'primary.contrastText'
- : undefined,
+ color: tier.title === 'Professional' ? 'grey.50' : undefined,
}}
>
@@ -189,9 +185,7 @@ export default function Pricing() {
variant="subtitle2"
sx={{
color:
- tier.title === 'Professional'
- ? 'primary.contrastText'
- : undefined,
+ tier.title === 'Professional' ? 'grey.200' : undefined,
}}
>
{line}
diff --git a/docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md b/docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md
index 8a74845a47060f..a6c761d92ddf4b 100644
--- a/docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md
+++ b/docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md
@@ -92,10 +92,11 @@ Bear in mind that the `.MuiAccordionSummary-gutters` class is applied to the com
## Alert
-Use the [codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#alert-props) below to migrate the code as described in the following sections:
+Use the [alert-props](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#alert-props) and [alert-classes](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#alert-classes) codemods below to migrate the code as described in the following sections:
```bash
npx @mui/codemod@latest deprecations/alert-props
+npx @mui/codemod@latest deprecations/alert-classes
```
### components
@@ -120,6 +121,98 @@ The Alert's `componentsProps` was deprecated in favor of `slotProps`:
/>
```
+### Composed CSS classes
+
+The CSS classes that composed the `severity` (or `variant`) and `color` prop values were removed.
+
+Here's how to migrate:
+
+```diff
+-.MuiAlert-standardSuccess
++.MuiAlert-standard.MuiAlert-colorSuccess
+-.MuiAlert-standardInfo
++.MuiAlert-standard.MuiAlert-colorInfo
+-.MuiAlert-standardWarning
++.MuiAlert-standard.MuiAlert-colorWarning
+-.MuiAlert-standardError
++.MuiAlert-standard.MuiAlert-colorError
+-.MuiAlert-outlinedSuccess
++.MuiAlert-outlined.MuiAlert-colorSuccess
+-.MuiAlert-outlinedInfo
++.MuiAlert-outlined.MuiAlert-colorInfo
+-.MuiAlert-outlinedWarning
++.MuiAlert-outlined.MuiAlert-colorWarning
+-.MuiAlert-outlinedError
++.MuiAlert-outlined.MuiAlert-colorError
+-.MuiAlert-filledSuccess
++.MuiAlert-filled.MuiAlert-colorSuccess
+-.MuiAlert-filledInfo
++.MuiAlert-filled.MuiAlert-colorInfo
+-.MuiAlert-filledWarning
++.MuiAlert-filled.MuiAlert-colorWarning
+-.MuiAlert-filledError
++.MuiAlert-filled.MuiAlert-colorError
+```
+
+```diff
+ import { alertClasses } from '@mui/material/PaginationItem';
+
+ MuiPaginationItem: {
+ styleOverrides: {
+ root: {
+- [`&.${alertClasses.standardSuccess}`]: {
++ [`&.${alertClasses.standard}.${alertClasses.colorSuccess}`]: {
+ color: 'red',
+ },
+- [`&.${alertClasses.standardInfo}`]: {
++ [`&.${alertClasses.standard}.${alertClasses.colorInfo}`]: {
+ color: 'red',
+ },
+- [`&.${alertClasses.standardWarning}`]: {
++ [`&.${alertClasses.standard}.${alertClasses.colorWarning}`]: {
+ color: 'red',
+ },
+- [`&.${alertClasses.standardError}`]: {
++ [`&.${alertClasses.standard}.${alertClasses.colorError}`]: {
+ color: 'red',
+ },
+- [`&.${alertClasses.outlinedSuccess}`]: {
++ [`&.${alertClasses.outlined}.${alertClasses.colorSuccess}`]: {
+ color: 'red',
+ },
+- [`&.${alertClasses.outlinedInfo}`]: {
++ [`&.${alertClasses.outlined}.${alertClasses.colorInfo}`]: {
+ color: 'red',
+ },
+- [`&.${alertClasses.outlinedWarning}`]: {
++ [`&.${alertClasses.outlined}.${alertClasses.colorWarning}`]: {
+ color: 'red',
+ },
+- [`&.${alertClasses.outlinedError}`]: {
++ [`&.${alertClasses.outlined}.${alertClasses.colorError}`]: {
+ color: 'red',
+ },
+- [`&.${alertClasses.filledSuccess}`]: {
++ [`&.${alertClasses.filled}.${alertClasses.colorSuccess}`]: {
+ color: 'red',
+ },
+- [`&.${alertClasses.filledInfo}`]: {
++ [`&.${alertClasses.filled}.${alertClasses.colorInfo}`]: {
+ color: 'red',
+ },
+- [`&.${alertClasses.filledWarning}`]: {
++ [`&.${alertClasses.filled}.${alertClasses.colorWarning}`]: {
+ color: 'red',
+ },
+- [`&.${alertClasses.filledError}`]: {
++ [`&.${alertClasses.filled}.${alertClasses.colorError}`]: {
+ color: 'red',
+ },
+ },
+ },
+ },
+```
+
## Avatar
Use the [codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#avatar-props) below to migrate the code as described in the following sections:
@@ -146,6 +239,424 @@ The Avatar's `imgProps` was deprecated in favor of `slotProps.img`:
/>;
```
+## Button
+
+Use the [codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#button-classes) below to migrate the code as described in the following sections:
+
+```bash
+npx @mui/codemod@latest deprecations/button-classes
+```
+
+### Composed CSS classes
+
+The CSS classes composing the `variant` and `color` prop values, as well as those composing the `variant` and `size` prop values, along with the `icon` size CSS classes, have been removed.
+
+Here's how to migrate:
+
+```diff
+-.MuiButton-textInherit
++.MuiButton-text.MuiButton-colorInherit
+-.MuiButton-textPrimary
++.MuiButton-text.MuiButton-colorPrimary
+-.MuiButton-textSecondary
++.MuiButton-text.MuiButton-colorSecondary
+-.MuiButton-textSuccess
++.MuiButton-text.MuiButton-colorSuccess
+-.MuiButton-textError
++.MuiButton-text.MuiButton-colorError
+-.MuiButton-textInfo
++.MuiButton-text.MuiButton-colorInfo
+-.MuiButton-textWarning
++.MuiButton-text.MuiButton-colorWarning
+-.MuiButton-outlinedInherit
++.MuiButton-outlined.MuiButton-colorInherit
+-.MuiButton-outlinedPrimary
++.MuiButton-outlined.MuiButton-colorPrimary
+-.MuiButton-outlinedSecondary
++.MuiButton-outlined.MuiButton-colorSecondary
+-.MuiButton-outlinedSuccess
++.MuiButton-outlined.MuiButton-colorSuccess
+-.MuiButton-outlinedError
++.MuiButton-outlined.MuiButton-colorError
+-.MuiButton-outlinedInfo
++.MuiButton-outlined.MuiButton-colorInfo
+-.MuiButton-outlinedWarning
++.MuiButton-outlined.MuiButton-colorWarning
+-.MuiButton-containedInherit
++.MuiButton-contained.MuiButton-colorInherit
+-.MuiButton-containedPrimary
++.MuiButton-contained.MuiButton-colorPrimary
+-.MuiButton-containedSecondary
++.MuiButton-contained.MuiButton-colorSecondary
+-.MuiButton-containedSuccess
++.MuiButton-contained.MuiButton-colorSuccess
+-.MuiButton-containedError
++.MuiButton-contained.MuiButton-colorError
+-.MuiButton-containedInfo
++.MuiButton-contained.MuiButton-colorInfo
+-.MuiButton-containedWarning
++.MuiButton-contained.MuiButton-colorWarning
+-.MuiButton-textSizeSmall
++.MuiButton-text.MuiButton-sizeSmall
+-.MuiButton-textSizeMedium
++.MuiButton-text.MuiButton-sizeMedium
+-.MuiButton-textSizeLarge
++.MuiButton-text.MuiButton-sizeLarge
+-.MuiButton-outlinedSizeSmall
++.MuiButton-outlined.MuiButton-sizeSmall
+-.MuiButton-outlinedSizeMedium
++.MuiButton-outlined.MuiButton-sizeMedium
+-.MuiButton-outlinedSizeLarge
++.MuiButton-outlined.MuiButton-sizeLarge
+-.MuiButton-containedSizeSmall
++.MuiButton-contained.MuiButton-sizeSmall
+-.MuiButton-containedSizeMedium
++.MuiButton-contained.MuiButton-sizeMedium
+-.MuiButton-containedSizeLarge
++.MuiButton-contained.MuiButton-sizeLarge
+-.MuiButton-root .MuiButton-iconSizeSmall
++.MuiButton-root.MuiButton-sizeSmall > .MuiButton-icon
+-.MuiButton-root .MuiButton-iconSizeMedium
++.MuiButton-root.MuiButton-sizeMedium > .MuiButton-icon
+-.MuiButton-root .MuiButton-iconSizeLarge
++.MuiButton-root.MuiButton-sizeLarge > .MuiButton-icon
+```
+
+```diff
+ import { buttonClasses } from '@mui/material/Button';
+
+ MuiButton: {
+ styleOverrides: {
+ root: {
+- [`&.${buttonClasses.textInherit}`]: {
++ [`&.${buttonClasses.text}.${buttonClasses.colorInherit}`]: {
+ color: 'red',
+ },
+- [`&.${buttonClasses.textPrimary}`]: {
++ [`&.${buttonClasses.text}.${buttonClasses.colorPrimary}`]: {
+ color: 'red',
+ },
+- [`&.${buttonClasses.textSecondary}`]: {
++ [`&.${buttonClasses.text}.${buttonClasses.colorSecondary}`]: {
+ color: 'red',
+ },
+- [`&.${buttonClasses.textSuccess}`]: {
++ [`&.${buttonClasses.text}.${buttonClasses.colorSuccess}`]: {
+ color: 'red',
+ },
+- [`&.${buttonClasses.textError}`]: {
++ [`&.${buttonClasses.text}.${buttonClasses.colorError}`]: {
+ color: 'red',
+ },
+- [`&.${buttonClasses.textInfo}`]: {
++ [`&.${buttonClasses.text}.${buttonClasses.colorInfo}`]: {
+ color: 'red',
+ },
+- [`&.${buttonClasses.textWarning}`]: {
++ [`&.${buttonClasses.text}.${buttonClasses.colorWarning}`]: {
+ color: 'red',
+ },
+- [`&.${buttonClasses.outlinedInherit}`]: {
++ [`&.${buttonClasses.outlined}.${buttonClasses.colorInherit}`]: {
+ color: 'red',
+ },
+- [`&.${buttonClasses.outlinedPrimary}`]: {
++ [`&.${buttonClasses.outlined}.${buttonClasses.colorPrimary}`]: {
+ color: 'red',
+ },
+- [`&.${buttonClasses.outlinedSecondary}`]: {
++ [`&.${buttonClasses.outlined}.${buttonClasses.colorSecondary}`]: {
+ color: 'red',
+ },
+- [`&.${buttonClasses.outlinedSuccess}`]: {
++ [`&.${buttonClasses.outlined}.${buttonClasses.colorSuccess}`]: {
+ color: 'red',
+ },
+- [`&.${buttonClasses.outlinedError}`]: {
++ [`&.${buttonClasses.outlined}.${buttonClasses.colorError}`]: {
+ color: 'red',
+ },
+- [`&.${buttonClasses.outlinedInfo}`]: {
++ [`&.${buttonClasses.outlined}.${buttonClasses.colorInfo}`]: {
+ color: 'red',
+ },
+- [`&.${buttonClasses.outlinedWarning}`]: {
++ [`&.${buttonClasses.outlined}.${buttonClasses.colorWarning}`]: {
+ color: 'red',
+ },
+- [`&.${buttonClasses.containedInherit}`]: {
++ [`&.${buttonClasses.contained}.${buttonClasses.colorInherit}`]: {
+ color: 'red',
+ },
+- [`&.${buttonClasses.containedPrimary}`]: {
++ [`&.${buttonClasses.contained}.${buttonClasses.colorPrimary}`]: {
+ color: 'red',
+ },
+- [`&.${buttonClasses.containedSecondary}`]: {
++ [`&.${buttonClasses.contained}.${buttonClasses.colorSecondary}`]: {
+ color: 'red',
+ },
+- [`&.${buttonClasses.containedSuccess}`]: {
++ [`&.${buttonClasses.contained}.${buttonClasses.colorSuccess}`]: {
+ color: 'red',
+ },
+- [`&.${buttonClasses.containedError}`]: {
++ [`&.${buttonClasses.contained}.${buttonClasses.colorError}`]: {
+ color: 'red',
+ },
+- [`&.${buttonClasses.containedInfo}`]: {
++ [`&.${buttonClasses.contained}.${buttonClasses.colorInfo}`]: {
+ color: 'red',
+ },
+- [`&.${buttonClasses.containedWarning}`]: {
++ [`&.${buttonClasses.contained}.${buttonClasses.colorWarning}`]: {
+ color: 'red',
+ },
+- [`&.${buttonClasses.containedSizeSmall}`]: {
++ [`&.${buttonClasses.contained}.${buttonClasses.sizeSmall}`]: {
+ color: 'red',
+ },
+- [`&.${buttonClasses.containedSizeMedium}`]: {
++ [`&.${buttonClasses.contained}.${buttonClasses.sizeMedium}`]: {
+ color: 'red',
+ },
+- [`&.${buttonClasses.containedSizeLarge}`]: {
++ [`&.${buttonClasses.contained}.${buttonClasses.sizeLarge}`]: {
+ color: 'red',
+ },
+- [`&.${buttonClasses.textSizeSmall}`]: {
++ [`&.${buttonClasses.text}.${buttonClasses.sizeSmall}`]: {
+ color: 'red',
+ },
+- [`&.${buttonClasses.textSizeMedium}`]: {
++ [`&.${buttonClasses.text}.${buttonClasses.sizeMedium}`]: {
+ color: 'red',
+ },
+- [`&.${buttonClasses.textSizeLarge}`]: {
++ [`&.${buttonClasses.text}.${buttonClasses.sizeLarge}`]: {
+ color: 'red',
+ },
+- [`&.${buttonClasses.outlinedSizeSmall}`]: {
++ [`&.${buttonClasses.outlined}.${buttonClasses.sizeSmall}`]: {
+ color: 'red',
+ },
+- [`&.${buttonClasses.outlinedSizeMedium}`]: {
++ [`&.${buttonClasses.outlined}.${buttonClasses.sizeMedium}`]: {
+ color: 'red',
+ },
+- [`&.${buttonClasses.outlinedSizeLarge}`]: {
++ [`&.${buttonClasses.outlined}.${buttonClasses.sizeLarge}`]: {
+ color: 'red',
+ },
+- [`& .${buttonClasses.iconSizeSmall}`]: {
++ [`&.${buttonClasses.sizeSmall} > .${buttonClasses.icon}`]: {
+ color: 'red',
+ },
+- [`& .${buttonClasses.iconSizeMedium}`]: {
++ [`&.${buttonClasses.sizeMedium} > .${buttonClasses.icon}`]: {
+ color: 'red',
+ },
+- [`& .${buttonClasses.iconSizeLarge}`]: {
++ [`&.${buttonClasses.sizeLarge} > .${buttonClasses.icon}`]: {
+ color: 'red',
+ },
+ },
+ },
+ },
+```
+
+## Chip
+
+Use the [codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#chip-classes) below to migrate the code as described in the following sections:
+
+```bash
+npx @mui/codemod@latest deprecations/chip-classes
+```
+
+### Composed CSS classes
+
+The CSS classes that composed the following props were deprecated:
+
+- `variant` | `clickable` | `deletable` and `color`
+- `avatar` and `color` | `size`
+- `icon` and `color` | `size`
+- `deleteIcon` and `color` | `size`
+- `label` and `size`
+
+Here's how to migrate:
+
+```diff
+-.MuiChip-clickableColorPrimary
++.MuiChip-clickable.MuiChip-colorPrimary
+-.MuiChip-clickableColorSecondary
++.MuiChip-clickable.MuiChip-colorSecondary
+-.MuiChip-deletableColorPrimary
++.MuiChip-deletable.MuiChip-colorPrimary
+-.MuiChip-deletableColorSecondary
++.MuiChip-deletable.MuiChip-colorSecondary
+-.MuiChip-outlinedPrimary
++.MuiChip-outlined.MuiChip-colorPrimary
+-.MuiChip-outlinedSecondary
++.MuiChip-outlined.MuiChip-colorSecondary
+-.MuiChip-filledPrimary
++.MuiChip-filled.MuiChip-colorPrimary
+-.MuiChip-filledSecondary
++.MuiChip-filled.MuiChip-colorSecondary
+-.MuiChip-root .MuiChip-avatarSmall
++.MuiChip-root.MuiChip-sizeSmall > .MuiChip-avatar
+-.MuiChip-root .MuiChip-avatarMedium
++.MuiChip-root.MuiChip-sizeMedium > .MuiChip-avatar
+-.MuiChip-root .MuiChip-avatarColorPrimary
++.MuiChip-root.MuiChip-colorPrimary > .MuiChip-avatar
+-.MuiChip-root .MuiChip-avatarColorSecondary
++.MuiChip-root.MuiChip-colorSecondary > .MuiChip-avatar
+-.MuiChip-root .MuiChip-iconSmall
++.MuiChip-root.MuiChip-sizeSmall > .MuiChip-icon
+-.MuiChip-root .MuiChip-iconMedium
++.MuiChip-root.MuiChip-sizeMedium > .MuiChip-icon
+-.MuiChip-root .MuiChip-iconColorPrimary
++.MuiChip-root.MuiChip-colorPrimary > .MuiChip-icon
+-.MuiChip-root .MuiChip-iconColorSecondary
++.MuiChip-root.MuiChip-colorSecondary > .MuiChip-icon
+-.MuiChip-root .MuiChip-labelSmall
++.MuiChip-root.MuiChip-sizeSmall > .MuiChip-label
+-.MuiChip-root .MuiChip-labelMedium
++.MuiChip-root.MuiChip-sizeMedium > .MuiChip-label
+-.MuiChip-root .MuiChip-deleteIconSmall
++.MuiChip-root.MuiChip-sizeSmall > .MuiChip-deleteIcon
+-.MuiChip-root .MuiChip-deleteIconMedium
++.MuiChip-root.MuiChip-sizeMedium > .MuiChip-deleteIcon
+-.MuiChip-root .MuiChip-deleteIconColorPrimary
++.MuiChip-root.MuiChip-colorPrimary > .MuiChip-deleteIcon
+-.MuiChip-root .MuiChip-deleteIconColorSecondary
++.MuiChip-root.MuiChip-colorSecondary > .MuiChip-deleteIcon
+-.MuiChip-root .MuiChip-deleteIconOutlinedColorPrimary
++.MuiChip-root.MuiChip-outlined.MuiChip-colorPrimary > .MuiChip-deleteIcon
+-.MuiChip-root .MuiChip-deleteIconOutlinedColorSecondary
++.MuiChip-root.MuiChip-outlined.MuiChip-colorSecondary > .MuiChip-deleteIcon
+-.MuiChip-root .MuiChip-deleteIconFilledColorPrimary
++.MuiChip-root.MuiChip-filled.MuiChip-colorPrimary > .MuiChip-deleteIcon
+-.MuiChip-root .MuiChip-deleteIconFilledColorSecondary
++.MuiChip-root.MuiChip-filled.MuiChip-colorSecondary > .MuiChip-deleteIcon
+```
+
+```diff
+
+ import { chipClasses } from '@mui/material/Chip';
+
+ MuiChip: {
+ styleOverrides: {
+ root: {
+- [`&.${chipClasses.clickableColorPrimary}`]: {
++ [`&.${chipClasses.clickable}.${chipClasses.colorPrimary}`]: {
+ color: 'red',
+ },
+- [`&.${chipClasses.clickableColorSecondary}`]: {
++ [`&.${chipClasses.clickable}.${chipClasses.colorSecondary}`]: {
+ color: 'red',
+ },
+- [`&.${chipClasses.deletableColorPrimary}`]: {
++ [`&.${chipClasses.deletable}.${chipClasses.colorPrimary}`]: {
+ color: 'red',
+ },
+- [`&.${chipClasses.deletableColorSecondary}`]: {
++ [`&.${chipClasses.deletable}.${chipClasses.colorSecondary}`]: {
+ color: 'red',
+ },
+- [`&.${chipClasses.outlinedPrimary}`]: {
++ [`&.${chipClasses.outlined}.${chipClasses.colorPrimary}`]: {
+ color: 'red',
+ },
+- [`&.${chipClasses.outlinedSecondary}`]: {
++ [`&.${chipClasses.outlined}.${chipClasses.colorSecondary}`]: {
+ color: 'red',
+ },
+- [`&.${chipClasses.filledPrimary}`]: {
++ [`&.${chipClasses.filled}.${chipClasses.colorPrimary}`]: {
+ color: 'red',
+ },
+- [`&.${chipClasses.filledSecondary}`]: {
++ [`&.${chipClasses.filled}.${chipClasses.colorSecondary}`]: {
+ color: 'red',
+ },
+- [`& .${chipClasses.avatarSmall}`]: {
++ [`&.${chipClasses.sizeSmall} > .${chipClasses.avatar}`]: {
+ color: 'red',
+ },
+- [`& .${chipClasses.avatarMedium}`]: {
++ [`&.${chipClasses.sizeMedium} > .${chipClasses.avatar}`]: {
+ color: 'red',
+ },
+- [`& .${chipClasses.avatarColorPrimary}`]: {
++ [`&.${chipClasses.colorPrimary} > .${chipClasses.avatar}`]: {
+ color: 'red',
+ },
+- [`& .${chipClasses.avatarColorSecondary}`]: {
++ [`&.${chipClasses.colorSecondary} > .${chipClasses.avatar}`]: {
+ color: 'red',
+ },
+- [`& .${chipClasses.iconSmall}`]: {
++ [`&.${chipClasses.sizeSmall} > .${chipClasses.icon}`]: {
+ color: 'red',
+ },
+- [`& .${chipClasses.iconMedium}`]: {
++ [`&.${chipClasses.sizeMedium} > .${chipClasses.icon}`]: {
+ color: 'red',
+ },
+- [`& .${chipClasses.iconColorPrimary}`]: {
++ [`&.${chipClasses.colorPrimary} > .${chipClasses.icon}`]: {
+ color: 'red',
+ },
+- [`& .${chipClasses.iconColorSecondary}`]: {
++ [`&.${chipClasses.colorSecondary} > .${chipClasses.icon}`]: {
+ color: 'red',
+ },
+- [`& .${chipClasses.labelSmall}`]: {
++ [`&.${chipClasses.sizeSmall} > .${chipClasses.label}`]: {
+ color: 'red',
+ },
+- [`& .${chipClasses.labelMedium}`]: {
++ [`&.${chipClasses.sizeMedium} > .${chipClasses.label}`]: {
+ color: 'red',
+ },
+- [`& .${chipClasses.deleteIconSmall}`]: {
++ [`&.${chipClasses.sizeSmall} > .${chipClasses.deleteIcon}`]: {
+ color: 'red',
+ },
+- [`& .${chipClasses.deleteIconMedium}`]: {
++ [`&.${chipClasses.sizeMedium} > .${chipClasses.deleteIcon}`]: {
+ color: 'red',
+ },
+- [`& .${chipClasses.deleteIconColorPrimary}`]: {
++ [`&.${chipClasses.colorPrimary} > .${chipClasses.deleteIcon}`]: {
+ color: 'red',
+ },
+- [`& .${chipClasses.deleteIconColorSecondary}`]: {
++ [`&.${chipClasses.colorSecondary} > .${chipClasses.deleteIcon}`]: {
+ color: 'red',
+ },
+- [`& .${chipClasses.deleteIconOutlinedColorPrimary}`]: {
++ [`&.${chipClasses.outlined}.${chipClasses.colorPrimary} > .${chipClasses.deleteIcon}`]: {
+ color: 'red',
+ },
+- [`& .${chipClasses.deleteIconOutlinedColorSecondary}`]: {
++ [`&.${chipClasses.outlined}.${chipClasses.colorSecondary} > .${chipClasses.deleteIcon}`]: {
+ color: 'red',
+ },
+- [`& .${chipClasses.deleteIconFilledColorPrimary}`]: {
++ [`&.${chipClasses.filled}.${chipClasses.colorPrimary} > .${chipClasses.deleteIcon}`]: {
+ color: 'red',
+ },
+- [`& .${chipClasses.deleteIconFilledColorSecondary}`]: {
++ [`&.${chipClasses.filled}.${chipClasses.colorSecondary} > .${chipClasses.deleteIcon}`]: {
+ color: 'red',
+ },
+ },
+ },
+ },
+
+```
+
## Divider
Use the [codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#divider-props) below to migrate the code as described in the following sections:
@@ -216,3 +727,33 @@ Here's how to migrate:
},
},
```
+
+## Slider
+
+Use the [codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#slider-props) below to migrate the code as described in the following sections:
+
+```bash
+npx @mui/codemod@latest deprecations/slider-props
+```
+
+### components
+
+The Slider's `components` was deprecated in favor of `slots`:
+
+```diff
+
- This is a section container
+ This Box renders as an HTML section element.
);
}
diff --git a/docs/data/system/components/box/BoxBasic.tsx b/docs/data/system/components/box/BoxBasic.tsx
index e05af05a8dce35..1ba8f5832c523b 100644
--- a/docs/data/system/components/box/BoxBasic.tsx
+++ b/docs/data/system/components/box/BoxBasic.tsx
@@ -4,7 +4,7 @@ import Box from '@mui/system/Box';
export default function BoxBasic() {
return (
- This is a section container
+ This Box renders as an HTML section element.
);
}
diff --git a/docs/data/system/components/box/BoxBasic.tsx.preview b/docs/data/system/components/box/BoxBasic.tsx.preview
index 3f47facef29add..d22b5b82187b80 100644
--- a/docs/data/system/components/box/BoxBasic.tsx.preview
+++ b/docs/data/system/components/box/BoxBasic.tsx.preview
@@ -1,2 +1,2 @@
- This is a section container
+ This Box renders as an HTML section element.
diff --git a/docs/data/system/components/box/BoxComponent.js b/docs/data/system/components/box/BoxComponent.js
deleted file mode 100644
index 28a050a35091af..00000000000000
--- a/docs/data/system/components/box/BoxComponent.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import * as React from 'react';
-import { Box } from '@mui/system';
-import Button from '@mui/material/Button';
-
-export default function BoxComponent() {
- return (
-
-
-
- );
-}
diff --git a/docs/data/system/components/box/BoxComponent.tsx b/docs/data/system/components/box/BoxComponent.tsx
deleted file mode 100644
index 28a050a35091af..00000000000000
--- a/docs/data/system/components/box/BoxComponent.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import * as React from 'react';
-import { Box } from '@mui/system';
-import Button from '@mui/material/Button';
-
-export default function BoxComponent() {
- return (
-
-
-
- );
-}
diff --git a/docs/data/system/components/box/BoxComponent.tsx.preview b/docs/data/system/components/box/BoxComponent.tsx.preview
deleted file mode 100644
index 43eef49d466ae8..00000000000000
--- a/docs/data/system/components/box/BoxComponent.tsx.preview
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/docs/data/system/components/box/BoxSystemProps.js b/docs/data/system/components/box/BoxSystemProps.js
new file mode 100644
index 00000000000000..966f9739d26db8
--- /dev/null
+++ b/docs/data/system/components/box/BoxSystemProps.js
@@ -0,0 +1,19 @@
+import * as React from 'react';
+import Box from '@mui/system/Box';
+
+export default function BoxSystemProps() {
+ return (
+
+ This Box uses MUI System props for quick customization.
+
+ );
+}
diff --git a/docs/data/system/components/box/BoxSystemProps.tsx b/docs/data/system/components/box/BoxSystemProps.tsx
new file mode 100644
index 00000000000000..966f9739d26db8
--- /dev/null
+++ b/docs/data/system/components/box/BoxSystemProps.tsx
@@ -0,0 +1,19 @@
+import * as React from 'react';
+import Box from '@mui/system/Box';
+
+export default function BoxSystemProps() {
+ return (
+
+ This Box uses MUI System props for quick customization.
+
+ );
+}
diff --git a/docs/data/system/components/box/BoxSystemProps.tsx.preview b/docs/data/system/components/box/BoxSystemProps.tsx.preview
new file mode 100644
index 00000000000000..b0decb0904b5a3
--- /dev/null
+++ b/docs/data/system/components/box/BoxSystemProps.tsx.preview
@@ -0,0 +1,2 @@
+
+ This Box uses MUI System props for quick customization.
diff --git a/docs/data/system/components/box/box.md b/docs/data/system/components/box/box.md
index 80524e44cb81c9..f68753b0f644dc 100644
--- a/docs/data/system/components/box/box.md
+++ b/docs/data/system/components/box/box.md
@@ -5,6 +5,8 @@ components: Box
githubLabel: 'component: Box'
---
+
+
# Box
+
+
+```
diff --git a/docs/data/material/components/progress/CircularIntegration.js b/docs/data/material/components/progress/CircularIntegration.js
index c077a18947a126..1c885b355996da 100644
--- a/docs/data/material/components/progress/CircularIntegration.js
+++ b/docs/data/material/components/progress/CircularIntegration.js
@@ -31,7 +31,7 @@ export default function CircularIntegration() {
if (!loading) {
setSuccess(false);
setLoading(true);
- timer.current = window.setTimeout(() => {
+ timer.current = setTimeout(() => {
setSuccess(true);
setLoading(false);
}, 2000);
diff --git a/docs/data/material/components/progress/CircularIntegration.tsx b/docs/data/material/components/progress/CircularIntegration.tsx
index 0400d3a8066a20..c32a5957a42fb8 100644
--- a/docs/data/material/components/progress/CircularIntegration.tsx
+++ b/docs/data/material/components/progress/CircularIntegration.tsx
@@ -10,7 +10,7 @@ import SaveIcon from '@mui/icons-material/Save';
export default function CircularIntegration() {
const [loading, setLoading] = React.useState(false);
const [success, setSuccess] = React.useState(false);
- const timer = React.useRef
+
+
))}
diff --git a/docs/data/material/getting-started/templates/landing-page/components/Features.tsx b/docs/data/material/getting-started/templates/landing-page/components/Features.tsx
index d493be0d22e792..dd1ecf351e6096 100644
--- a/docs/data/material/getting-started/templates/landing-page/components/Features.tsx
+++ b/docs/data/material/getting-started/templates/landing-page/components/Features.tsx
@@ -150,6 +150,7 @@ export default function Features() {
{items.map(({ icon, title, description }, index) => (
+
+
The Box component is a generic, theme-aware container with access to CSS utilities from MUI System.
@@ -14,7 +16,12 @@ githubLabel: 'component: Box' ## Introduction The Box component is a generic container for grouping other components. -It's a fundamental building block—you can think of it as a `` with special features (like access to your app's theme and the [`sx` prop](/system/getting-started/the-sx-prop/)).
+It's a fundamental building block when working with MUI System—you can think of it as a `
` with extra built-in features, like access to your app's theme and the [`sx` prop](/system/getting-started/the-sx-prop/).
+
+### Usage
+
+The Box component differs from other containers available in MUI System in that its usage is intended to be multipurpose and open-ended, just like a `
`.
+Components like [Container](/system/react-container/) and [Stack](/system/react-stack/), by contrast, feature usage-specific props that make them ideal for certain use cases: Container for main layout orientation, and Stack for one-dimensional layouts.
## Basics
@@ -27,28 +34,23 @@ The demo below replaces the `
` with a `` element:
{{"demo": "BoxBasic.js", "defaultCodeOpen": true }}
-:::info
-The Box component differs from other containers available in Material UI and Joy UI because it's intended to be multipurpose—components like [Stack](/material-ui/react-stack/) and [Paper](/material-ui/react-paper/), by contrast, feature usage-specific props that make them ideal for certain use cases.
-:::
+## Customization
-## Component
+### With MUI System props
-### Using the sx prop
+As a CSS utility component, the Box supports all [MUI System properties](/system/properties/).
+You can use them as props directly on the component.
-Use the [`sx` prop](/system/getting-started/the-sx-prop/) to quickly customize any Box instance using a superset of CSS with access to all the style functions and theme-aware properties exposed in the MUI System package.
+{{"demo": "BoxSystemProps.js", "defaultCodeOpen": true }}
-{{"demo": "BoxSx.js", "defaultCodeOpen": true }}
-
-### System props
+### With the sx prop
-As a CSS utility component, the Box supports all [MUI System properties](/system/properties/).
-You can use them as prop directly on the component.
+Use the [`sx` prop](/system/getting-started/the-sx-prop/) to quickly customize any Box instance using a superset of CSS that has access to all the style functions and theme-aware properties exposed in the MUI System package.
+The demo below shows how to apply colors from the theme using this prop:
-```jsx
-
-```
+{{"demo": "BoxSx.js", "defaultCodeOpen": true }}
-## Create your own Box component
+### Create your own Box
Use the `createBox()` utility to create your version of the Box component.
This is useful if you need to expose your container to a theme that's different from the default theme of the library you're working with:
@@ -64,3 +66,13 @@ const Box = createBox({ defaultTheme });
export default Box;
```
+
+## Anatomy
+
+The Box component is composed of a single root `
` element:
+
+```html
+
+
@@ -340,6 +345,9 @@ MyApp.propTypes = {
MyApp.getInitialProps = async ({ ctx, Component }) => {
let pageProps = {};
+ const req = require.context('docs/translations', false, /translations.*\.json$/);
+ const translations = mapTranslations(req);
+
if (Component.getInitialProps) {
pageProps = await Component.getInitialProps(ctx);
}
@@ -347,6 +355,7 @@ MyApp.getInitialProps = async ({ ctx, Component }) => {
return {
pageProps: {
userLanguage: ctx.query.userLanguage || 'en',
+ translations,
...pageProps,
},
};
diff --git a/docs/pages/base-ui/all-components/index.js b/docs/pages/base-ui/all-components/index.js
index eb5cdf8793bdeb..3501384eead7ca 100644
--- a/docs/pages/base-ui/all-components/index.js
+++ b/docs/pages/base-ui/all-components/index.js
@@ -1,7 +1,7 @@
import * as React from 'react';
import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
import AppFrame from 'docs/src/modules/components/AppFrame';
-import * as pageProps from 'docs/data/base/all-components/all-components.md?@mui/markdown';
+import * as pageProps from 'docs/data/base/all-components/all-components.md?muiMarkdown';
export default function Page() {
return 
+
It seems that React keeps taking market share in the frontend ecosystem; it's growing faster than Vue or Angular. - Most indicators point to it: [Stack Overflow questions](https://insights.stackoverflow.com/trends?tags=vue.js%2Creactjs%2Cangular), [stars](https://bestofjs.org/projects?sort=monthly), [downloads](https://npm-stat.com/charts.html?package=react-dom,@angular/core,vue), [Traffic on the documentation](https://www.similarweb.com/website/reactjs.org/?competitors=vuejs.org). + Most indicators point to it: [Stack Overflow questions](https://insights.stackoverflow.com/trends?tags=vue.js%2Creactjs%2Cangular), [stars](https://bestofjs.org/projects?sort=monthly), [downloads](https://npm-stat.com/charts.html?package=react-dom,@angular/core,vue), [Traffic on the documentation](https://www.similarweb.com/website/reactjs.org/?competitors=vuejs.org). Our strategy to focus on React only seems to be paying off. - ⭐️ From 63.8k to 67.2k stars, leave us yours [🌟](https://github.com/mui/material-ui). diff --git a/docs/pages/blog/2021-q2-update.js b/docs/pages/blog/2021-q2-update.js index 5afab0a64d20c5..7c5e2751324c90 100644 --- a/docs/pages/blog/2021-q2-update.js +++ b/docs/pages/blog/2021-q2-update.js @@ -1,6 +1,6 @@ import * as React from 'react'; import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog'; -import { docs } from './2021-q2-update.md?@mui/markdown'; +import { docs } from './2021-q2-update.md?muiMarkdown'; export default function Page() { return
This year, one of our highest priorities has been to create a central hub for the MUI community.
-Up until now, our community has been scattered across discussions and interactions on [X](https://twitter.com/MUI_hq), [LinkedIn](https://linkedin.com/company/mui), [GitHub](https://github.com/mui), and [Stack Overflow](https://stackoverflow.com/questions/tagged/material-ui).
+Up until now, our community has been scattered across discussions and interactions on [X](https://twitter.com/MUI_hq), [LinkedIn](https://linkedin.com/company/mui), [GitHub](https://github.com/mui), and [Stack Overflow](https://stackoverflow.com/questions/tagged/material-ui).
That's why we've officially launched our [Discord Server](https://mui.com/r/discord/)—and we'd love for you to be a part of our community!
diff --git a/docs/pages/blog/docs-restructure-2022.js b/docs/pages/blog/docs-restructure-2022.js
index 75b4dad5bb69db..33c0378c424688 100644
--- a/docs/pages/blog/docs-restructure-2022.js
+++ b/docs/pages/blog/docs-restructure-2022.js
@@ -1,6 +1,6 @@
import * as React from 'react';
import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
-import { docs } from './docs-restructure-2022.md?@mui/markdown';
+import { docs } from './docs-restructure-2022.md?muiMarkdown';
export default function Page() {
return
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
| object, mark?: func
| object, markLabel?: func
| object, rail?: func
| object, root?: func
| object, thumb?: func
| object, track?: func
| object, valueLabel?: func
| { children?: element, className?: string, open?: bool, style?: object, value?: number, valueLabelDisplay?: 'auto'
| 'off'
| 'on' } }" }, - "default": "{}" + "default": "{}", + "deprecated": true, + "deprecationInfo": "use the
| number" } diff --git a/docs/pages/material-ui/customization/breakpoints.js b/docs/pages/material-ui/customization/breakpoints.js index 3775eba2144f64..32016c39448d4a 100644 --- a/docs/pages/material-ui/customization/breakpoints.js +++ b/docs/pages/material-ui/customization/breakpoints.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/material/customization/breakpoints/breakpoints.md?@mui/markdown'; +import * as pageProps from 'docs/data/material/customization/breakpoints/breakpoints.md?muiMarkdown'; export default function Page() { return(null);
const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
- const preferredMode = prefersDarkMode ? 'dark' : 'light';
+
+ React.useEffect(() => {
+ let initialMode = 'system';
+ try {
+ initialMode = localStorage.getItem('mui-mode') || initialMode;
+ } catch (error) {
+ // do nothing
+ }
+ setMode(initialMode);
+ }, []);
const handleChangeThemeMode = (checked: boolean) => {
const paletteMode = checked ? 'dark' : 'light';
setMode(paletteMode);
- };
- React.useEffect(() => {
- const paletteMode = mode === 'system' ? preferredMode : mode;
+ try {
+ localStorage.setItem('mui-mode', paletteMode); // syncing with homepage, can be removed once all pages are migrated to CSS variables
+ } catch (error) {
+ // do nothing
+ }
changeTheme({ paletteMode });
- }, [changeTheme, mode, preferredMode]);
+ };
if (mode === null) {
return = {
'charts/sparkline': yes,
'charts/gauge': pending,
'charts/treemap': pending,
- 'charts/heatmap': pending,
+ 'charts/heatmap': no,
'charts/radar': pending,
'charts/funnel': no,
'charts/sankey': no,
@@ -1534,10 +1534,10 @@ export default function PricingTable({
{divider}
{renderNestedRow('charts/treemap')}
{divider}
- {renderNestedRow('charts/heatmap')}
- {divider}
{renderNestedRow('charts/radar')}
{divider}
+ {renderNestedRow('charts/heatmap')}
+ {divider}
{renderNestedRow('charts/funnel')}
{divider}
{renderNestedRow('charts/sankey')}
diff --git a/docs/src/featureToggle.js b/docs/src/featureToggle.js
index c5458fa9f371e9..53f6d955cabc18 100644
--- a/docs/src/featureToggle.js
+++ b/docs/src/featureToggle.js
@@ -1,4 +1,4 @@
-// need to use commonjs export so that @mui/markdown can use
+// need to use commonjs export so that @mui/internal-markdown can use
module.exports = {
enable_website_banner: true,
enable_toc_banner: true,
diff --git a/docs/src/layouts/AppFooter.tsx b/docs/src/layouts/AppFooter.tsx
index 7f7393871a6ab3..6ca7ef50d6a7bd 100644
--- a/docs/src/layouts/AppFooter.tsx
+++ b/docs/src/layouts/AppFooter.tsx
@@ -5,12 +5,12 @@ import Divider from '@mui/material/Divider';
import Typography from '@mui/material/Typography';
import IconButton from '@mui/material/IconButton';
import Stack from '@mui/material/Stack';
+import Chip from '@mui/material/Chip';
import XIcon from '@mui/icons-material/X';
import GitHubIcon from '@mui/icons-material/GitHub';
import LinkedInIcon from '@mui/icons-material/LinkedIn';
import YouTubeIcon from '@mui/icons-material/YouTube';
import RssFeedIcon from '@mui/icons-material/RssFeed';
-import { alpha } from '@mui/material/styles';
import SvgMuiLogotype from 'docs/src/icons/SvgMuiLogotype';
import EmailSubscribe from 'docs/src/components/footer/EmailSubscribe';
import ROUTES from 'docs/src/route';
@@ -142,36 +142,26 @@ export default function AppFooter(props: AppFooterProps) {
Vision
-
+
Careers{' '}
- ({
- px: 0.5,
- py: 0.1,
- ml: 1,
- mb: '1px',
- position: 'relative',
- top: theme.spacing(-0.5),
- fontSize: theme.typography.pxToRem(10),
- fontWeight: 'Bold',
- textTransform: 'uppercase',
- letterSpacing: '.04rem',
- borderRadius: 8,
- border: 1,
- borderColor: 'success.300',
- bgcolor: alpha(theme.palette.success[100], 0.4),
- color: 'success.700',
- ...theme.applyDarkStyles({
- borderColor: alpha(theme.palette.success[800], 0.5),
- bgcolor: alpha(theme.palette.success[800], 0.2),
- color: 'success.200',
- }),
+ height: 18,
+ '& .MuiChip-label': {
+ px: '4px',
+ fontSize: theme.typography.pxToRem(10),
+ fontWeight: 'bold',
+ textTransform: 'uppercase',
+ letterSpacing: '.04rem',
+ },
})}
- >
- Hiring
-
+ />
Support
@@ -262,8 +252,8 @@ export default function AppFooter(props: AppFooterProps) {
target="_blank"
rel="noopener"
href={stackOverflowUrl}
- aria-label="Stack Overflow"
- title="Stack Overflow"
+ aria-label="Stack Overflow"
+ title="Stack Overflow"
size="small"
>
{children}
diff --git a/docs/src/modules/components/ApiPage/list/ExpandableApiItem.tsx b/docs/src/modules/components/ApiPage/list/ExpandableApiItem.tsx
index 8fdeadaf42148b..ff98536fdb0917 100644
--- a/docs/src/modules/components/ApiPage/list/ExpandableApiItem.tsx
+++ b/docs/src/modules/components/ApiPage/list/ExpandableApiItem.tsx
@@ -155,7 +155,7 @@ type ExpandableApiItemProps = {
isExtendable?: boolean;
note?: string;
sx?: SxProps;
- title: string;
+ title: string | React.ReactNode;
type?: DescriptionType;
};
diff --git a/docs/src/modules/components/ApiPage/list/PropertiesList.tsx b/docs/src/modules/components/ApiPage/list/PropertiesList.tsx
index af3d018b340418..801349f37cc536 100644
--- a/docs/src/modules/components/ApiPage/list/PropertiesList.tsx
+++ b/docs/src/modules/components/ApiPage/list/PropertiesList.tsx
@@ -139,6 +139,8 @@ export interface Properties {
isDeprecated?: boolean;
isOptional?: boolean;
isRequired?: boolean;
+ isProPlan?: boolean;
+ isPremiumPlan?: boolean;
propDefault?: string;
propName: string;
requiresRef?: string;
@@ -169,6 +171,8 @@ export default function PropertiesList(props: PropertiesListProps) {
isOptional,
isRequired,
isDeprecated,
+ isProPlan,
+ isPremiumPlan,
hooksParameters,
hooksReturnValue,
deprecationInfo,
@@ -191,7 +195,21 @@ export default function PropertiesList(props: PropertiesListProps) {
+ {propName}
+ {isProPlan && (
+
+
+
+ )}
+ {isPremiumPlan && (
+
+
+
+ )}
+
+ }
note={note}
type="props"
displayOption={displayOption}
diff --git a/docs/src/modules/components/ApiPage/sections/PropertiesSection.js b/docs/src/modules/components/ApiPage/sections/PropertiesSection.js
index 295d4c1187c516..fd52e51baa758c 100644
--- a/docs/src/modules/components/ApiPage/sections/PropertiesSection.js
+++ b/docs/src/modules/components/ApiPage/sections/PropertiesSection.js
@@ -103,6 +103,8 @@ export default function PropertiesSection(props) {
requiresRef: propDescription?.requiresRef,
isOptional,
isRequired,
+ isProPlan: propData.isProPlan,
+ isPremiumPlan: propData.isPremiumPlan,
isDeprecated,
hooksParameters,
hooksReturnValue,
diff --git a/docs/src/modules/components/ApiPage/table/PropertiesTable.tsx b/docs/src/modules/components/ApiPage/table/PropertiesTable.tsx
index 40622f2b29499a..88e86df5826cbb 100644
--- a/docs/src/modules/components/ApiPage/table/PropertiesTable.tsx
+++ b/docs/src/modules/components/ApiPage/table/PropertiesTable.tsx
@@ -122,6 +122,9 @@ interface PropertiesTableProps {
export default function PropertiesTable(props: PropertiesTableProps) {
const { properties } = props;
+
+ const hasDefaultColumn = properties.some((item) => item.propDefault !== undefined);
+
const t = useTranslate();
return (
@@ -130,7 +133,7 @@ export default function PropertiesTable(props: PropertiesTableProps) {
Name
Type
- Default
+ {hasDefaultColumn && Default }
Description
@@ -144,6 +147,8 @@ export default function PropertiesTable(props: PropertiesTableProps) {
requiresRef,
isOptional,
isRequired,
+ isProPlan,
+ isPremiumPlan,
isDeprecated,
hooksParameters,
hooksReturnValue,
@@ -165,6 +170,16 @@ export default function PropertiesTable(props: PropertiesTableProps) {
{propName}
{isRequired ? '*' : ''}
{isOptional ? '?' : ''}
+ {isProPlan && (
+
+
+
+ )}
+ {isPremiumPlan && (
+
+
+
+ )}
{
@@ -176,13 +191,15 @@ export default function PropertiesTable(props: PropertiesTableProps) {
/>
}
-
- {propDefault ? (
- {propDefault}
- ) : (
- '-'
- )}
-
+ {hasDefaultColumn && (
+
+ {propDefault ? (
+ {propDefault}
+ ) : (
+ '-'
+ )}
+
+ )}
{description &&
}
sx={(theme) => ({
- py: 0.1,
minWidth: 0,
+ p: '1px 8px',
fontSize: theme.typography.pxToRem(13),
fontWeight: theme.typography.fontWeightMedium,
color: (theme.vars || theme).palette.primary[600],
'& svg': {
- ml: -0.6,
width: 18,
height: 18,
},
- '& > span': {
- ml: '4px',
- },
...theme.applyDarkStyles({
color: (theme.vars || theme).palette.primary[300],
}),
@@ -97,6 +103,7 @@ function ProductDrawerButton(props) {
width: { xs: 340, sm: 'auto' },
},
}}
+ onClick={handleEventDelegation}
>
({
- ml: 1.5,
+ ml: 1,
color: (theme.vars || theme).palette.grey[600],
fontSize: theme.typography.pxToRem(11),
fontWeight: 700,
@@ -402,7 +409,7 @@ export default function AppNavDrawer(props) {
aria-label={t('goToHome')}
sx={{
pr: '12px',
- mr: '4px',
+ mr: '8px',
borderRight: '1px solid',
borderColor: 'divider',
}}
diff --git a/docs/src/modules/components/AppNavDrawerItem.js b/docs/src/modules/components/AppNavDrawerItem.js
index 82b436a56e5b14..2c47e632a635a4 100644
--- a/docs/src/modules/components/AppNavDrawerItem.js
+++ b/docs/src/modules/components/AppNavDrawerItem.js
@@ -62,7 +62,7 @@ const Item = styled(
...(subheader && {
marginTop: theme.spacing(1),
textTransform: 'uppercase',
- letterSpacing: '.08rem',
+ letterSpacing: '.1rem',
fontWeight: theme.typography.fontWeightBold,
fontSize: theme.typography.pxToRem(11),
'&::before': {
@@ -101,26 +101,14 @@ const Item = styled(
color: (theme.vars || theme).palette.primary[600],
backgroundColor: (theme.vars || theme).palette.primary[50],
'&:hover': {
- backgroundColor: theme.vars
- ? `rgba(${theme.vars.palette.primary.mainChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.hoverOpacity}))`
- : alpha(
- theme.palette.primary.main,
- theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity,
- ),
+ backgroundColor: alpha(theme.palette.primary[100], 0.8),
+ color: (theme.vars || theme).palette.primary[700],
'@media (hover: none)': {
backgroundColor: theme.vars
? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.selectedOpacity})`
: alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity),
},
},
- '&.Mui-focusVisible': {
- backgroundColor: theme.vars
- ? `rgba(${theme.vars.palette.primary.mainChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.focusOpacity}))`
- : alpha(
- theme.palette.primary.main,
- theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity,
- ),
- },
'&::before': {
background: (theme.vars || theme).palette.primary[400],
},
@@ -138,19 +126,16 @@ const Item = styled(
},
},
}),
- '&.Mui-focusVisible': {
- backgroundColor: (theme.vars || theme).palette.divider,
- },
[theme.breakpoints.up('md')]: {
paddingTop: 4,
paddingBottom: 4,
},
'& .ItemButtonIcon': {
- marginRight: '5px',
+ marginRight: '6px',
color: (theme.vars || theme).palette.primary.main,
},
'&:hover .ItemButtonIcon': {
- color: (theme.vars || theme).palette.text.primary,
+ color: (theme.vars || theme).palette.primary.light,
'@media (hover: none)': {
color: (theme.vars || theme).palette.primary.main,
},
@@ -164,6 +149,10 @@ const Item = styled(
'&.app-drawer-active': {
color: (theme.vars || theme).palette.primary[300],
backgroundColor: (theme.vars || theme).palette.primaryDark[700],
+ '&:hover': {
+ backgroundColor: (theme.vars || theme).palette.primaryDark[600],
+ color: (theme.vars || theme).palette.primary[200],
+ },
'&::before': {
background: (theme.vars || theme).palette.primary[400],
},
@@ -211,7 +200,7 @@ const StyledLi = styled('li', { shouldForwardProp: (prop) => prop !== 'depth' })
export const sxChip = (color) => [
(theme) => ({
- ml: 1.5,
+ ml: 1,
fontSize: theme.typography.pxToRem(10),
fontWeight: 'semiBold',
textTransform: 'uppercase',
@@ -220,18 +209,18 @@ export const sxChip = (color) => [
border: 1,
borderColor: (theme.vars || theme).palette[color][300],
bgcolor: alpha(theme.palette[color][100], 0.5),
- color: (theme.vars || theme).palette[color][700],
+ color: (theme.vars || theme).palette[color][900],
'&:hover': {
bgcolor: alpha(theme.palette[color][100], 0.5),
},
'& .MuiChip-label': {
- px: 0.6,
+ px: '4px',
},
}),
(theme) =>
theme.applyDarkStyles({
borderColor: alpha(theme.palette[color][800], 0.5),
- bgcolor: alpha(theme.palette[color][800], 0.5),
+ bgcolor: alpha(theme.palette[color][900], 0.5),
color: (theme.vars || theme).palette[color][300],
'&:hover': {
bgcolor: alpha(theme.palette[color][900], 0.5),
diff --git a/docs/src/modules/components/AppSettingsDrawer.js b/docs/src/modules/components/AppSettingsDrawer.js
index 58d2a830cd787e..3ddad7cb06a71b 100644
--- a/docs/src/modules/components/AppSettingsDrawer.js
+++ b/docs/src/modules/components/AppSettingsDrawer.js
@@ -18,7 +18,6 @@ import FormatTextdirectionLToRIcon from '@mui/icons-material/FormatTextdirection
import FormatTextdirectionRToLIcon from '@mui/icons-material/FormatTextdirectionRToL';
import { useChangeTheme } from 'docs/src/modules/components/ThemeContext';
import { useTranslate } from '@mui/docs/i18n';
-import useLocalStorageState from '@mui/utils/useLocalStorageState';
const Heading = styled(Typography)(({ theme }) => ({
margin: '20px 0 10px',
@@ -43,22 +42,44 @@ function AppSettingsDrawer(props) {
const t = useTranslate();
const upperTheme = useTheme();
const changeTheme = useChangeTheme();
- const [mode, setMode] = useLocalStorageState('mui-mode', 'system');
+ const [mode, setMode] = React.useState(null);
const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
const preferredMode = prefersDarkMode ? 'dark' : 'light';
+ React.useEffect(() => {
+ // syncing with homepage, can be removed once all pages are migrated to CSS variables
+ let initialMode = 'system';
+ try {
+ initialMode = localStorage.getItem('mui-mode') || initialMode;
+ } catch (error) {
+ // do nothing
+ }
+ setMode(initialMode);
+ }, [preferredMode]);
+
const handleChangeThemeMode = (event, paletteMode) => {
if (paletteMode === null) {
return;
}
setMode(paletteMode);
- };
- React.useEffect(() => {
- const paletteMode = mode === 'system' ? preferredMode : mode;
- changeTheme({ paletteMode });
- }, [changeTheme, mode, preferredMode]);
+ if (paletteMode === 'system') {
+ try {
+ localStorage.setItem('mui-mode', 'system'); // syncing with homepage, can be removed once all pages are migrated to CSS variables
+ } catch (error) {
+ // thrown when cookies are disabled.
+ }
+ changeTheme({ paletteMode: preferredMode });
+ } else {
+ try {
+ localStorage.setItem('mui-mode', paletteMode); // syncing with homepage, can be removed once all pages are migrated to CSS variables
+ } catch (error) {
+ // thrown when cookies are disabled.
+ }
+ changeTheme({ paletteMode });
+ }
+ };
const handleChangeDirection = (event, direction) => {
if (direction === null) {
diff --git a/docs/src/modules/components/AppTableOfContents.js b/docs/src/modules/components/AppTableOfContents.js
index cf685a681782e6..2d67d429f5d21c 100644
--- a/docs/src/modules/components/AppTableOfContents.js
+++ b/docs/src/modules/components/AppTableOfContents.js
@@ -15,7 +15,7 @@ import DiamondSponsors from 'docs/src/modules/components/DiamondSponsors';
const Nav = styled('nav')(({ theme }) => ({
top: 'var(--MuiDocs-header-height)',
marginTop: 'var(--MuiDocs-header-height)',
- paddingLeft: 2, // Fix truncated focus outline style
+ paddingLeft: 6, // Fix truncated focus outline style
position: 'sticky',
height: 'calc(100vh - var(--MuiDocs-header-height))',
overflowY: 'auto',
diff --git a/docs/src/modules/components/DemoEditor.tsx b/docs/src/modules/components/DemoEditor.tsx
index 0172043e473a87..8877685b09e47d 100644
--- a/docs/src/modules/components/DemoEditor.tsx
+++ b/docs/src/modules/components/DemoEditor.tsx
@@ -3,7 +3,7 @@ import SimpleCodeEditor from 'react-simple-code-editor';
import Box from '@mui/material/Box';
import { NoSsr } from '@mui/base/NoSsr';
import { styled, useTheme } from '@mui/material/styles';
-import prism from '@mui/markdown/prism';
+import prism from '@mui/internal-markdown/prism';
import MarkdownElement from 'docs/src/modules/components/MarkdownElement';
import CodeCopyButton from 'docs/src/modules/components/CodeCopyButton';
import { useTranslate } from '@mui/docs/i18n';
diff --git a/docs/src/modules/components/DiamondSponsors.js b/docs/src/modules/components/DiamondSponsors.js
index 7488776b44d2a6..8e4b9d7d0f47ab 100644
--- a/docs/src/modules/components/DiamondSponsors.js
+++ b/docs/src/modules/components/DiamondSponsors.js
@@ -2,11 +2,9 @@ import * as React from 'react';
import { styled, alpha } from '@mui/material/styles';
import Box from '@mui/material/Box';
import Stack from '@mui/material/Stack';
-import Button from '@mui/material/Button';
import Typography from '@mui/material/Typography';
-import DiamondOutlinedIcon from '@mui/icons-material/DiamondOutlined';
-import { useTranslate } from '@mui/docs/i18n';
import { Link } from '@mui/docs/Link';
+import { useTranslate } from 'docs/src/modules/utils/i18n';
const NativeLink = styled('a')(({ theme }) => ({
boxSizing: 'border-box', // TODO have CssBaseline in the Next.js layout
@@ -26,6 +24,10 @@ const NativeLink = styled('a')(({ theme }) => ({
'&:hover': {
backgroundColor: (theme.vars || theme).palette.grey[50],
},
+ '&:focus-visible': {
+ outline: `3px solid ${alpha((theme.vars || theme).palette.primary[500], 0.5)}`,
+ outlineOffset: '2px',
+ },
'& img': {
display: 'inline-block',
},
@@ -44,147 +46,116 @@ export default function DiamondSponsors() {
const t = useTranslate();
return (
-
-
-
-
-
- theme.applyDarkStyles({
- content: `url(/static/sponsors/octopus-dark.svg)`,
- })
- }
- />
-
-
-
- theme.applyDarkStyles({
- content: `url(/static/sponsors/doit-dark.svg)`,
- })
- }
- />
-
-
-
- theme.applyDarkStyles({
- content: `url(/static/sponsors/marblism-dark.svg)`,
- })
- }
- />
-
- ({
- width: '100%',
- p: 1,
- display: 'flex',
- flexDirection: 'column',
- alignItems: 'center',
- justifyContent: 'center',
- borderRadius: 1,
- border: '1px dashed',
- transition: theme.transitions.create(['color', 'border-color', 'background-color']),
- backgroundColor: alpha(theme.palette.primary[50], 0.5),
- borderColor: (theme.vars || theme).palette.primary[200],
+
+ theme.applyDarkStyles({
+ content: `url(/static/sponsors/doit-dark.svg)`,
+ })
+ }
+ />
+
+
+
+ theme.applyDarkStyles({
+ content: `url(/static/sponsors/marblism-dark.svg)`,
+ })
+ }
+ />
+
+ ({
+ p: 1.5,
+ width: '100%',
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center',
+ borderRadius: 1,
+ border: '1px dashed',
+ transition: theme.transitions.create(['color', 'border-color', 'background-color']),
+ backgroundColor: alpha(theme.palette.primary[50], 0.5),
+ borderColor: (theme.vars || theme).palette.grey[200],
+ boxShadow: `inset 0 1px 1px ${
+ (theme.vars || theme).palette.grey[50]
+ }, 0 1px 2px ${alpha(theme.palette.grey[100], 0.5)}`,
+ '&:hover': {
+ backgroundColor: alpha(theme.palette.primary[100], 0.5),
+ borderColor: (theme.vars || theme).palette.primary[300],
+ },
+ ...theme.applyDarkStyles({
+ backgroundColor: alpha(theme.palette.primary[700], 0.1),
+ borderColor: alpha(theme.palette.primary[400], 0.2),
boxShadow: `inset 0 1px 1px ${
- (theme.vars || theme).palette.grey[50]
- }, 0 1px 2px ${alpha(theme.palette.primary[100], 0.8)}`,
+ (theme.vars || theme).palette.primaryDark[800]
+ }, 0 1px 0.5px ${(theme.vars || theme).palette.common.black}`,
'&:hover': {
- backgroundColor: alpha(theme.palette.primary[100], 0.5),
- borderColor: (theme.vars || theme).palette.primary[300],
+ backgroundColor: alpha(theme.palette.primary[700], 0.2),
+ borderColor: (theme.vars || theme).palette.primary[400],
},
- ...theme.applyDarkStyles({
- backgroundColor: alpha(theme.palette.primary[400], 0.05),
- borderColor: alpha(theme.palette.primary[300], 0.3),
- boxShadow: `inset 0 1px 1px ${
- (theme.vars || theme).palette.primaryDark[800]
- }, 0 1px 0.5px ${(theme.vars || theme).palette.common.black}`,
- '&:hover': {
- backgroundColor: alpha(theme.palette.primary[400], 0.1),
- borderColor: (theme.vars || theme).palette.primary[400],
- },
- }),
- })}
- >
-
- {t('becomeADiamondSponsor')}
-
- {/*
- {t('diamondSponsorVacancies')}
- */}
-
-
+ }),
+ })}
+ >
+
+ {t('becomeADiamondSponsor')}
+
+ {/*
+ {t('diamondSponsorVacancies')}
+ */}
+
);
}
diff --git a/docs/src/modules/components/HighlightedCode.js b/docs/src/modules/components/HighlightedCode.js
index e613533f1a7283..ca7a8458fa1034 100644
--- a/docs/src/modules/components/HighlightedCode.js
+++ b/docs/src/modules/components/HighlightedCode.js
@@ -1,6 +1,6 @@
import * as React from 'react';
import PropTypes from 'prop-types';
-import prism from '@mui/markdown/prism';
+import prism from '@mui/internal-markdown/prism';
import { NoSsr } from '@mui/base/NoSsr';
import MarkdownElement from 'docs/src/modules/components/MarkdownElement';
import CodeCopyButton from 'docs/src/modules/components/CodeCopyButton';
diff --git a/docs/src/modules/components/HighlightedCodeWithTabs.tsx b/docs/src/modules/components/HighlightedCodeWithTabs.tsx
index bedd57ba5882f6..f31a70348e42df 100644
--- a/docs/src/modules/components/HighlightedCodeWithTabs.tsx
+++ b/docs/src/modules/components/HighlightedCodeWithTabs.tsx
@@ -4,7 +4,6 @@ import { Tabs, TabsOwnProps } from '@mui/base/Tabs';
import { TabsList as TabsListBase } from '@mui/base/TabsList';
import { TabPanel as TabPanelBase } from '@mui/base/TabPanel';
import { Tab as TabBase } from '@mui/base/Tab';
-import useLocalStorageState from '@mui/utils/useLocalStorageState';
import HighlightedCode from './HighlightedCode';
const TabList = styled(TabsListBase)(({ theme }) => ({
@@ -86,16 +85,36 @@ export default function HighlightedCodeWithTabs({
storageKey?: string;
} & Record) {
const availableTabs = React.useMemo(() => tabs.map(({ tab }) => tab), [tabs]);
- const [activeTab, setActiveTab] = useLocalStorageState(storageKey ?? null, availableTabs[0]);
+ const [activeTab, setActiveTab] = React.useState(availableTabs[0]);
const [mounted, setMounted] = React.useState(false);
React.useEffect(() => {
+ try {
+ setActiveTab((prev) => {
+ if (storageKey === undefined) {
+ return prev;
+ }
+ const storedValues = localStorage.getItem(storageKey);
+
+ return storedValues && availableTabs.includes(storedValues) ? storedValues : prev;
+ });
+ } catch (error) {
+ // ignore error
+ }
setMounted(true);
- }, []);
+ }, [availableTabs, storageKey]);
const handleChange: TabsOwnProps['onChange'] = (event, newValue) => {
setActiveTab(newValue as string);
+ if (storageKey === undefined) {
+ return;
+ }
+ try {
+ localStorage.setItem(storageKey, newValue as string);
+ } catch (error) {
+ // ignore error
+ }
};
const ownerState = { mounted };
diff --git a/docs/src/modules/components/MarkdownElement.js b/docs/src/modules/components/MarkdownElement.js
index 84c7ab7b309ac7..4292b846973e44 100644
--- a/docs/src/modules/components/MarkdownElement.js
+++ b/docs/src/modules/components/MarkdownElement.js
@@ -12,6 +12,10 @@ const Root = styled('div')(
...lightTheme.typography.body1,
lineHeight: 1.6, // Increased compared to the 1.5 default to make the docs easier to read.
color: `var(--muidocs-palette-text-primary, ${lightTheme.palette.text.primary})`,
+ '& :focus-visible': {
+ outline: `3px solid ${alpha(lightTheme.palette.primary[500], 0.5)}`,
+ outlineOffset: 2,
+ },
'& strong': {
color: `var(--muidocs-palette-text-primary, ${lightTheme.palette.text.primary})`,
},
@@ -152,7 +156,7 @@ const Root = styled('div')(
marginLeft: 4,
height: 26,
width: 26,
- backgroundColor: `var(--muidocs-palette-primary-50, ${lightTheme.palette.primary[50]})`,
+ backgroundColor: `var(--muidocs-palette-primary-50, ${lightTheme.palette.grey[50]})`,
color: `var(--muidocs-palette-grey-600, ${lightTheme.palette.grey[600]})`,
border: '1px solid',
borderColor: `var(--muidocs-palette-divider, ${lightTheme.palette.divider})`,
@@ -403,10 +407,14 @@ const Root = styled('div')(
opacity: 1,
transform: 'translate(1px, 0)',
},
- '& a.remove-link-arrow[target="_blank"]::after': {
+ '& a.remove-link-arrow::after': {
// Allows to remove link arrows for images
display: 'none',
},
+ '& .Ad-root a::after': {
+ // Remove link arrow for ads
+ display: 'none',
+ },
'& a, & a code': {
// Style taken from the Link component
color: `var(--muidocs-palette-primary-600, ${lightTheme.palette.primary[600]})`,
@@ -456,14 +464,45 @@ const Root = styled('div')(
boxShadow: `inset 0 -2px 0 var(--muidocs-palette-grey-200, ${lightTheme.palette.grey[200]})`,
},
'& details': {
+ width: '100%',
+ padding: theme.spacing(1),
marginBottom: theme.spacing(1.5),
- padding: theme.spacing(0.5, 0, 0.5, 1),
+ border: '1px solid',
+ borderColor: `var(--muidocs-palette-divider, ${lightTheme.palette.divider})`,
+ borderRadius: `var(--muidocs-shape-borderRadius, ${
+ theme.shape?.borderRadius ?? lightTheme.shape.borderRadius
+ }px)`,
'& pre': {
marginTop: theme.spacing(1),
},
},
'& summary': {
cursor: 'pointer',
+ padding: theme.spacing(1),
+ borderRadius: 6,
+ listStyleType: 'none',
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'space-between',
+ transition: theme.transitions.create(['background'], {
+ duration: theme.transitions.duration.shortest,
+ }),
+ ':after': {
+ content: '""',
+ maskImage: `url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 6L8 10L12 6' stroke='black' stroke-width='1.66667' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A")`,
+ display: 'inline-flex',
+ width: '1em',
+ height: '1em',
+ color: 'inherit',
+ backgroundColor: 'currentColor',
+ },
+ '&:hover': {
+ backgroundColor: `var(--muidocs-palette-grey-100, ${lightTheme.palette.grey[50]})`,
+ },
+ },
+ '& details[open] > summary::after': {
+ content: '""',
+ maskImage: `url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 10L8 6L4 10' stroke='black' stroke-width='1.66667' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A")`,
},
'& .MuiCode-root': {
direction: 'ltr /*! @noflip */',
@@ -542,11 +581,6 @@ const Root = styled('div')(
display: 'block',
},
},
- '&:focus-visible': {
- outline: '2px solid',
- outlineOffset: 2,
- outlineColor: lightTheme.palette.primaryDark[500],
- },
},
'& .MuiCode-copyKeypress': {
pointerEvents: 'none',
@@ -583,24 +617,9 @@ const Root = styled('div')(
'& hr': {
backgroundColor: `var(--muidocs-palette-divider, ${darkTheme.palette.divider})`,
},
- '& img': {
- borderColor: `var(--muidocs-palette-divider, ${darkTheme.palette.divider})`,
- },
- '& h1': {
+ '& h1, & h2, & h3, & h4, & h5': {
color: `var(--muidocs-palette-grey-50, ${darkTheme.palette.grey[50]})`,
},
- '& h2': {
- color: `var(--muidocs-palette-grey-100, ${darkTheme.palette.grey[100]})`,
- },
- '& h3': {
- color: `var(--muidocs-palette-grey-200, ${darkTheme.palette.grey[200]})`,
- },
- '& h4': {
- color: `var(--muidocs-palette-grey-300, ${darkTheme.palette.grey[300]})`,
- },
- '& h5': {
- color: `var(--muidocs-palette-grey-300, ${darkTheme.palette.grey[300]})`,
- },
'& p, & ul, & ol': {
color: `var(--muidocs-palette-grey-400, ${darkTheme.palette.grey[400]})`,
},
@@ -608,7 +627,7 @@ const Root = styled('div')(
'&:hover .anchor-link, & .comment-link': {
color: `var(--muidocs-palette-primary-300, ${darkTheme.palette.primaryDark[300]})`,
borderColor: `var(--muidocs-palette-divider, ${darkTheme.palette.divider})`,
- backgroundColor: alpha(darkTheme.palette.primary[900], 0.3),
+ backgroundColor: alpha(darkTheme.palette.primaryDark[700], 0.5),
'&:hover': {
borderColor: `var(--muidocs-palette-primary-900, ${darkTheme.palette.primary[900]})`,
backgroundColor: alpha(darkTheme.palette.primary[900], 0.6),
@@ -651,13 +670,13 @@ const Root = styled('div')(
borderColor: `var(--muidocs-palette-primaryDark-700, ${darkTheme.palette.primaryDark[700]})`,
'& > code': {
height: 'fit-content',
- backgroundColor: `var(--muidocs-palette-primaryDark-600, ${lightTheme.palette.primaryDark[600]})`,
- borderColor: `var(--muidocs-palette-primaryDark-500, ${lightTheme.palette.primaryDark[500]})`,
+ backgroundColor: `var(--muidocs-palette-primaryDark-600, ${darkTheme.palette.primaryDark[600]})`,
+ borderColor: `var(--muidocs-palette-primaryDark-500, ${darkTheme.palette.primaryDark[500]})`,
},
'&.MuiCallout-error': {
color: `var(--muidocs-palette-error-50, ${darkTheme.palette.error[50]})`,
backgroundColor: alpha(darkTheme.palette.error[700], 0.2),
- borderColor: alpha(lightTheme.palette.error[600], 0.3),
+ borderColor: alpha(darkTheme.palette.error[600], 0.3),
'& strong': {
color: `var(--muidocs-palette-error-300, ${darkTheme.palette.error[300]})`,
},
@@ -720,6 +739,14 @@ const Root = styled('div')(
border: `1px solid var(--muidocs-palette-primaryDark-600, ${darkTheme.palette.primaryDark[600]})`,
boxShadow: `inset 0 -2px 0 var(--muidocs-palette-primaryDark-700, ${darkTheme.palette.primaryDark[700]})`,
},
+ '& details': {
+ borderColor: `var(--muidocs-palette-divider, ${darkTheme.palette.divider})`,
+ },
+ '& summary': {
+ '&:hover': {
+ backgroundColor: `var(--muidocs-palette-primaryDark-800, ${darkTheme.palette.primaryDark[800]})`,
+ },
+ },
},
}),
);
diff --git a/docs/src/modules/utils/mapApiPageTranslations.js b/docs/src/modules/utils/mapApiPageTranslations.js
index d2ab8b302650b3..321b74a3d5f456 100644
--- a/docs/src/modules/utils/mapApiPageTranslations.js
+++ b/docs/src/modules/utils/mapApiPageTranslations.js
@@ -1,4 +1,4 @@
-import { createRender } from '@mui/markdown';
+import { createRender } from '@mui/internal-markdown';
import { LANGUAGES_IGNORE_PAGES } from '../../../config';
const notEnglishJsonRegExp = /-([a-z]{2})\.json$/;
diff --git a/docs/src/modules/utils/useClipboardCopy.ts b/docs/src/modules/utils/useClipboardCopy.ts
index 590da7febb671b..dd0b3b618b8e3e 100644
--- a/docs/src/modules/utils/useClipboardCopy.ts
+++ b/docs/src/modules/utils/useClipboardCopy.ts
@@ -3,7 +3,7 @@ import clipboardCopy from 'clipboard-copy';
export default function useClipboardCopy() {
const [isCopied, setIsCopied] = React.useState(false);
- const timeout = React.useRef | undefined>();
+ const timeout = React.useRef>();
const mounted = React.useRef(false);
React.useEffect(() => {
diff --git a/docs/src/pages/production-error/ErrorDecoder.js b/docs/src/pages/production-error/ErrorDecoder.js
index 8231ebe61074dc..59c85abb9a6cc7 100644
--- a/docs/src/pages/production-error/ErrorDecoder.js
+++ b/docs/src/pages/production-error/ErrorDecoder.js
@@ -3,7 +3,7 @@ import { useRouter } from 'next/router';
import Link from '@mui/material/Link';
import Typography from '@mui/material/Typography';
import { styled } from '@mui/material/styles';
-import { renderMarkdown } from '@mui/markdown';
+import { renderMarkdown } from '@mui/internal-markdown';
import MarkdownElement from 'docs/src/modules/components/MarkdownElement';
const ErrorMessageSection = styled('div')({
diff --git a/docs/translations/api-docs/alert/alert.json b/docs/translations/api-docs/alert/alert.json
index a1e17498e79a4b..981d938a884279 100644
--- a/docs/translations/api-docs/alert/alert.json
+++ b/docs/translations/api-docs/alert/alert.json
@@ -43,6 +43,26 @@
"nodeName": "the action wrapper element",
"conditions": "
This prop is an alias for the
This prop is an alias for the
To learn more, visit the component customization page.", - "css": "CSS", - "cssComponent": "As a CSS utility, the {{name}} component also supports all | null = null;
if (!requestedEnter) {
timeoutId = setTimeout(() => {
act(() => onExited());
diff --git a/packages/mui-base/src/unstable_useNumberInput/useNumberInput.ts b/packages/mui-base/src/unstable_useNumberInput/useNumberInput.ts
index 2b74b67fdf7a7d..1129b7013fd1e7 100644
--- a/packages/mui-base/src/unstable_useNumberInput/useNumberInput.ts
+++ b/packages/mui-base/src/unstable_useNumberInput/useNumberInput.ts
@@ -1,6 +1,6 @@
'use client';
import * as React from 'react';
-import MuiError from '@mui-internal/babel-macros/MuiError.macro';
+import MuiError from '@mui/internal-babel-macros/MuiError.macro';
import { unstable_useForkRef as useForkRef, unstable_useId as useId } from '@mui/utils';
import { extractEventHandlers } from '../utils/extractEventHandlers';
import { MuiCancellableEvent } from '../utils/MuiCancellableEvent';
diff --git a/packages/mui-base/src/useInput/useInput.ts b/packages/mui-base/src/useInput/useInput.ts
index f380b57fdcb2bd..146d7f0882232d 100644
--- a/packages/mui-base/src/useInput/useInput.ts
+++ b/packages/mui-base/src/useInput/useInput.ts
@@ -1,6 +1,6 @@
'use client';
import * as React from 'react';
-import MuiError from '@mui-internal/babel-macros/MuiError.macro';
+import MuiError from '@mui/internal-babel-macros/MuiError.macro';
import { unstable_useForkRef as useForkRef } from '@mui/utils';
import { FormControlState, useFormControlContext } from '../FormControl';
import { extractEventHandlers } from '../utils/extractEventHandlers';
diff --git a/packages/mui-codemod/README.md b/packages/mui-codemod/README.md
index 83ac6f13e1dcc2..f527a92d273c2c 100644
--- a/packages/mui-codemod/README.md
+++ b/packages/mui-codemod/README.md
@@ -136,6 +136,102 @@ CSS transforms:
npx @mui/codemod@latest deprecations/accordion-summary-classes
```
+#### `alert-classes`
+
+JS transforms:
+
+```diff
+ import { alertClasses } from '@mui/material/PaginationItem';
+
+ MuiPaginationItem: {
+ styleOverrides: {
+ root: {
+- [`&.${alertClasses.standardSuccess}`]: {
++ [`&.${alertClasses.standard}.${alertClasses.colorSuccess}`]: {
+ color: 'red',
+ },
+- [`&.${alertClasses.standardInfo}`]: {
++ [`&.${alertClasses.standard}.${alertClasses.colorInfo}`]: {
+ color: 'red',
+ },
+- [`&.${alertClasses.standardWarning}`]: {
++ [`&.${alertClasses.standard}.${alertClasses.colorWarning}`]: {
+ color: 'red',
+ },
+- [`&.${alertClasses.standardError}`]: {
++ [`&.${alertClasses.standard}.${alertClasses.colorError}`]: {
+ color: 'red',
+ },
+- [`&.${alertClasses.outlinedSuccess}`]: {
++ [`&.${alertClasses.outlined}.${alertClasses.colorSuccess}`]: {
+ color: 'red',
+ },
+- [`&.${alertClasses.outlinedInfo}`]: {
++ [`&.${alertClasses.outlined}.${alertClasses.colorInfo}`]: {
+ color: 'red',
+ },
+- [`&.${alertClasses.outlinedWarning}`]: {
++ [`&.${alertClasses.outlined}.${alertClasses.colorWarning}`]: {
+ color: 'red',
+ },
+- [`&.${alertClasses.outlinedError}`]: {
++ [`&.${alertClasses.outlined}.${alertClasses.colorError}`]: {
+ color: 'red',
+ },
+- [`&.${alertClasses.filledSuccess}`]: {
++ [`&.${alertClasses.filled}.${alertClasses.colorSuccess}`]: {
+ color: 'red',
+ },
+- [`&.${alertClasses.filledInfo}`]: {
++ [`&.${alertClasses.filled}.${alertClasses.colorInfo}`]: {
+ color: 'red',
+ },
+- [`&.${alertClasses.filledWarning}`]: {
++ [`&.${alertClasses.filled}.${alertClasses.colorWarning}`]: {
+ color: 'red',
+ },
+- [`&.${alertClasses.filledError}`]: {
++ [`&.${alertClasses.filled}.${alertClasses.colorError}`]: {
+ color: 'red',
+ },
+ },
+ },
+ },
+```
+
+CSS transforms:
+
+```diff
+-.MuiAlert-standardSuccess
++.MuiAlert-standard.MuiAlert-colorSuccess
+-.MuiAlert-standardInfo
++.MuiAlert-standard.MuiAlert-colorInfo
+-.MuiAlert-standardWarning
++.MuiAlert-standard.MuiAlert-colorWarning
+-.MuiAlert-standardError
++.MuiAlert-standard.MuiAlert-colorError
+-.MuiAlert-outlinedSuccess
++.MuiAlert-outlined.MuiAlert-colorSuccess
+-.MuiAlert-outlinedInfo
++.MuiAlert-outlined.MuiAlert-colorInfo
+-.MuiAlert-outlinedWarning
++.MuiAlert-outlined.MuiAlert-colorWarning
+-.MuiAlert-outlinedError
++.MuiAlert-outlined.MuiAlert-colorError
+-.MuiAlert-filledSuccess
++.MuiAlert-filled.MuiAlert-colorSuccess
+-.MuiAlert-filledInfo
++.MuiAlert-filled.MuiAlert-colorInfo
+-.MuiAlert-filledWarning
++.MuiAlert-filled.MuiAlert-colorWarning
+-.MuiAlert-filledError
++.MuiAlert-filled.MuiAlert-colorError
+```
+
+```bash
+npx @mui/codemod@latest deprecations/alert-classes
+```
+
#### `alert-props`
```diff
@@ -178,6 +274,411 @@ npx @mui/codemod@latest deprecations/alert-props
/>;
```
+#### `button-classes`
+
+JS transforms:
+
+```diff
+ import { buttonClasses } from '@mui/material/Button';
+
+ MuiButton: {
+ styleOverrides: {
+ root: {
+- [`&.${buttonClasses.textInherit}`]: {
++ [`&.${buttonClasses.text}.${buttonClasses.colorInherit}`]: {
+ color: 'red',
+ },
+- [`&.${buttonClasses.textPrimary}`]: {
++ [`&.${buttonClasses.text}.${buttonClasses.colorPrimary}`]: {
+ color: 'red',
+ },
+- [`&.${buttonClasses.textSecondary}`]: {
++ [`&.${buttonClasses.text}.${buttonClasses.colorSecondary}`]: {
+ color: 'red',
+ },
+- [`&.${buttonClasses.textSuccess}`]: {
++ [`&.${buttonClasses.text}.${buttonClasses.colorSuccess}`]: {
+ color: 'red',
+ },
+- [`&.${buttonClasses.textError}`]: {
++ [`&.${buttonClasses.text}.${buttonClasses.colorError}`]: {
+ color: 'red',
+ },
+- [`&.${buttonClasses.textInfo}`]: {
++ [`&.${buttonClasses.text}.${buttonClasses.colorInfo}`]: {
+ color: 'red',
+ },
+- [`&.${buttonClasses.textWarning}`]: {
++ [`&.${buttonClasses.text}.${buttonClasses.colorWarning}`]: {
+ color: 'red',
+ },
+- [`&.${buttonClasses.outlinedInherit}`]: {
++ [`&.${buttonClasses.outlined}.${buttonClasses.colorInherit}`]: {
+ color: 'red',
+ },
+- [`&.${buttonClasses.outlinedPrimary}`]: {
++ [`&.${buttonClasses.outlined}.${buttonClasses.colorPrimary}`]: {
+ color: 'red',
+ },
+- [`&.${buttonClasses.outlinedSecondary}`]: {
++ [`&.${buttonClasses.outlined}.${buttonClasses.colorSecondary}`]: {
+ color: 'red',
+ },
+- [`&.${buttonClasses.outlinedSuccess}`]: {
++ [`&.${buttonClasses.outlined}.${buttonClasses.colorSuccess}`]: {
+ color: 'red',
+ },
+- [`&.${buttonClasses.outlinedError}`]: {
++ [`&.${buttonClasses.outlined}.${buttonClasses.colorError}`]: {
+ color: 'red',
+ },
+- [`&.${buttonClasses.outlinedInfo}`]: {
++ [`&.${buttonClasses.outlined}.${buttonClasses.colorInfo}`]: {
+ color: 'red',
+ },
+- [`&.${buttonClasses.outlinedWarning}`]: {
++ [`&.${buttonClasses.outlined}.${buttonClasses.colorWarning}`]: {
+ color: 'red',
+ },
+- [`&.${buttonClasses.containedInherit}`]: {
++ [`&.${buttonClasses.contained}.${buttonClasses.colorInherit}`]: {
+ color: 'red',
+ },
+- [`&.${buttonClasses.containedPrimary}`]: {
++ [`&.${buttonClasses.contained}.${buttonClasses.colorPrimary}`]: {
+ color: 'red',
+ },
+- [`&.${buttonClasses.containedSecondary}`]: {
++ [`&.${buttonClasses.contained}.${buttonClasses.colorSecondary}`]: {
+ color: 'red',
+ },
+- [`&.${buttonClasses.containedSuccess}`]: {
++ [`&.${buttonClasses.contained}.${buttonClasses.colorSuccess}`]: {
+ color: 'red',
+ },
+- [`&.${buttonClasses.containedError}`]: {
++ [`&.${buttonClasses.contained}.${buttonClasses.colorError}`]: {
+ color: 'red',
+ },
+- [`&.${buttonClasses.containedInfo}`]: {
++ [`&.${buttonClasses.contained}.${buttonClasses.colorInfo}`]: {
+ color: 'red',
+ },
+- [`&.${buttonClasses.containedWarning}`]: {
++ [`&.${buttonClasses.contained}.${buttonClasses.colorWarning}`]: {
+ color: 'red',
+ },
+- [`&.${buttonClasses.containedSizeSmall}`]: {
++ [`&.${buttonClasses.contained}.${buttonClasses.sizeSmall}`]: {
+ color: 'red',
+ },
+- [`&.${buttonClasses.containedSizeMedium}`]: {
++ [`&.${buttonClasses.contained}.${buttonClasses.sizeMedium}`]: {
+ color: 'red',
+ },
+- [`&.${buttonClasses.containedSizeLarge}`]: {
++ [`&.${buttonClasses.contained}.${buttonClasses.sizeLarge}`]: {
+ color: 'red',
+ },
+- [`&.${buttonClasses.textSizeSmall}`]: {
++ [`&.${buttonClasses.text}.${buttonClasses.sizeSmall}`]: {
+ color: 'red',
+ },
+- [`&.${buttonClasses.textSizeMedium}`]: {
++ [`&.${buttonClasses.text}.${buttonClasses.sizeMedium}`]: {
+ color: 'red',
+ },
+- [`&.${buttonClasses.textSizeLarge}`]: {
++ [`&.${buttonClasses.text}.${buttonClasses.sizeLarge}`]: {
+ color: 'red',
+ },
+- [`&.${buttonClasses.outlinedSizeSmall}`]: {
++ [`&.${buttonClasses.outlined}.${buttonClasses.sizeSmall}`]: {
+ color: 'red',
+ },
+- [`&.${buttonClasses.outlinedSizeMedium}`]: {
++ [`&.${buttonClasses.outlined}.${buttonClasses.sizeMedium}`]: {
+ color: 'red',
+ },
+- [`&.${buttonClasses.outlinedSizeLarge}`]: {
++ [`&.${buttonClasses.outlined}.${buttonClasses.sizeLarge}`]: {
+ color: 'red',
+ },
+- [`& .${buttonClasses.iconSizeSmall}`]: {
++ [`&.${buttonClasses.sizeSmall} > .${buttonClasses.icon}`]: {
+ color: 'red',
+ },
+- [`& .${buttonClasses.iconSizeMedium}`]: {
++ [`&.${buttonClasses.sizeMedium} > .${buttonClasses.icon}`]: {
+ color: 'red',
+ },
+- [`& .${buttonClasses.iconSizeLarge}`]: {
++ [`&.${buttonClasses.sizeLarge} > .${buttonClasses.icon}`]: {
+ color: 'red',
+ },
+ },
+ },
+ },
+```
+
+CSS transforms:
+
+```diff
+-.MuiButton-textInherit
++.MuiButton-text.MuiButton-colorInherit
+-.MuiButton-textPrimary
++.MuiButton-text.MuiButton-colorPrimary
+-.MuiButton-textSecondary
++.MuiButton-text.MuiButton-colorSecondary
+-.MuiButton-textSuccess
++.MuiButton-text.MuiButton-colorSuccess
+-.MuiButton-textError
++.MuiButton-text.MuiButton-colorError
+-.MuiButton-textInfo
++.MuiButton-text.MuiButton-colorInfo
+-.MuiButton-textWarning
++.MuiButton-text.MuiButton-colorWarning
+-.MuiButton-outlinedInherit
++.MuiButton-outlined.MuiButton-colorInherit
+-.MuiButton-outlinedPrimary
++.MuiButton-outlined.MuiButton-colorPrimary
+-.MuiButton-outlinedSecondary
++.MuiButton-outlined.MuiButton-colorSecondary
+-.MuiButton-outlinedSuccess
++.MuiButton-outlined.MuiButton-colorSuccess
+-.MuiButton-outlinedError
++.MuiButton-outlined.MuiButton-colorError
+-.MuiButton-outlinedInfo
++.MuiButton-outlined.MuiButton-colorInfo
+-.MuiButton-outlinedWarning
++.MuiButton-outlined.MuiButton-colorWarning
+-.MuiButton-containedInherit
++.MuiButton-contained.MuiButton-colorInherit
+-.MuiButton-containedPrimary
++.MuiButton-contained.MuiButton-colorPrimary
+-.MuiButton-containedSecondary
++.MuiButton-contained.MuiButton-colorSecondary
+-.MuiButton-containedSuccess
++.MuiButton-contained.MuiButton-colorSuccess
+-.MuiButton-containedError
++.MuiButton-contained.MuiButton-colorError
+-.MuiButton-containedInfo
++.MuiButton-contained.MuiButton-colorInfo
+-.MuiButton-containedWarning
++.MuiButton-contained.MuiButton-colorWarning
+-.MuiButton-textSizeSmall
++.MuiButton-text.MuiButton-sizeSmall
+-.MuiButton-textSizeMedium
++.MuiButton-text.MuiButton-sizeMedium
+-.MuiButton-textSizeLarge
++.MuiButton-text.MuiButton-sizeLarge
+-.MuiButton-outlinedSizeSmall
++.MuiButton-outlined.MuiButton-sizeSmall
+-.MuiButton-outlinedSizeMedium
++.MuiButton-outlined.MuiButton-sizeMedium
+-.MuiButton-outlinedSizeLarge
++.MuiButton-outlined.MuiButton-sizeLarge
+-.MuiButton-containedSizeSmall
++.MuiButton-contained.MuiButton-sizeSmall
+-.MuiButton-containedSizeMedium
++.MuiButton-contained.MuiButton-sizeMedium
+-.MuiButton-containedSizeLarge
++.MuiButton-contained.MuiButton-sizeLarge
+-.MuiButton-root .MuiButton-iconSizeSmall
++.MuiButton-root.MuiButton-sizeSmall > .MuiButton-icon
+-.MuiButton-root .MuiButton-iconSizeMedium
++.MuiButton-root.MuiButton-sizeMedium > .MuiButton-icon
+-.MuiButton-root .MuiButton-iconSizeLarge
++.MuiButton-root.MuiButton-sizeLarge > .MuiButton-icon
+ />
+```
+
+```bash
+npx @mui/codemod@latest deprecations/button-classes
+```
+
+#### `chip-classes`
+
+JS transforms:
+
+```diff
+
+ import { chipClasses } from '@mui/material/Chip';
+
+ MuiChip: {
+ styleOverrides: {
+ root: {
+- [`&.${chipClasses.clickableColorPrimary}`]: {
++ [`&.${chipClasses.clickable}.${chipClasses.colorPrimary}`]: {
+ color: 'red',
+ },
+- [`&.${chipClasses.clickableColorSecondary}`]: {
++ [`&.${chipClasses.clickable}.${chipClasses.colorSecondary}`]: {
+ color: 'red',
+ },
+- [`&.${chipClasses.deletableColorPrimary}`]: {
++ [`&.${chipClasses.deletable}.${chipClasses.colorPrimary}`]: {
+ color: 'red',
+ },
+- [`&.${chipClasses.deletableColorSecondary}`]: {
++ [`&.${chipClasses.deletable}.${chipClasses.colorSecondary}`]: {
+ color: 'red',
+ },
+- [`&.${chipClasses.outlinedPrimary}`]: {
++ [`&.${chipClasses.outlined}.${chipClasses.colorPrimary}`]: {
+ color: 'red',
+ },
+- [`&.${chipClasses.outlinedSecondary}`]: {
++ [`&.${chipClasses.outlined}.${chipClasses.colorSecondary}`]: {
+ color: 'red',
+ },
+- [`&.${chipClasses.filledPrimary}`]: {
++ [`&.${chipClasses.filled}.${chipClasses.colorPrimary}`]: {
+ color: 'red',
+ },
+- [`&.${chipClasses.filledSecondary}`]: {
++ [`&.${chipClasses.filled}.${chipClasses.colorSecondary}`]: {
+ color: 'red',
+ },
+- [`& .${chipClasses.avatarSmall}`]: {
++ [`&.${chipClasses.sizeSmall} > .${chipClasses.avatar}`]: {
+ color: 'red',
+ },
+- [`& .${chipClasses.avatarMedium}`]: {
++ [`&.${chipClasses.sizeMedium} > .${chipClasses.avatar}`]: {
+ color: 'red',
+ },
+- [`& .${chipClasses.avatarColorPrimary}`]: {
++ [`&.${chipClasses.colorPrimary} > .${chipClasses.avatar}`]: {
+ color: 'red',
+ },
+- [`& .${chipClasses.avatarColorSecondary}`]: {
++ [`&.${chipClasses.colorSecondary} > .${chipClasses.avatar}`]: {
+ color: 'red',
+ },
+- [`& .${chipClasses.iconSmall}`]: {
++ [`&.${chipClasses.sizeSmall} > .${chipClasses.icon}`]: {
+ color: 'red',
+ },
+- [`& .${chipClasses.iconMedium}`]: {
++ [`&.${chipClasses.sizeMedium} > .${chipClasses.icon}`]: {
+ color: 'red',
+ },
+- [`& .${chipClasses.iconColorPrimary}`]: {
++ [`&.${chipClasses.colorPrimary} > .${chipClasses.icon}`]: {
+ color: 'red',
+ },
+- [`& .${chipClasses.iconColorSecondary}`]: {
++ [`&.${chipClasses.colorSecondary} > .${chipClasses.icon}`]: {
+ color: 'red',
+ },
+- [`& .${chipClasses.labelSmall}`]: {
++ [`&.${chipClasses.sizeSmall} > .${chipClasses.label}`]: {
+ color: 'red',
+ },
+- [`& .${chipClasses.labelMedium}`]: {
++ [`&.${chipClasses.sizeMedium} > .${chipClasses.label}`]: {
+ color: 'red',
+ },
+- [`& .${chipClasses.deleteIconSmall}`]: {
++ [`&.${chipClasses.sizeSmall} > .${chipClasses.deleteIcon}`]: {
+ color: 'red',
+ },
+- [`& .${chipClasses.deleteIconMedium}`]: {
++ [`&.${chipClasses.sizeMedium} > .${chipClasses.deleteIcon}`]: {
+ color: 'red',
+ },
+- [`& .${chipClasses.deleteIconColorPrimary}`]: {
++ [`&.${chipClasses.colorPrimary} > .${chipClasses.deleteIcon}`]: {
+ color: 'red',
+ },
+- [`& .${chipClasses.deleteIconColorSecondary}`]: {
++ [`&.${chipClasses.colorSecondary} > .${chipClasses.deleteIcon}`]: {
+ color: 'red',
+ },
+- [`& .${chipClasses.deleteIconOutlinedColorPrimary}`]: {
++ [`&.${chipClasses.outlined}.${chipClasses.colorPrimary} > .${chipClasses.deleteIcon}`]: {
+ color: 'red',
+ },
+- [`& .${chipClasses.deleteIconOutlinedColorSecondary}`]: {
++ [`&.${chipClasses.outlined}.${chipClasses.colorSecondary} > .${chipClasses.deleteIcon}`]: {
+ color: 'red',
+ },
+- [`& .${chipClasses.deleteIconFilledColorPrimary}`]: {
++ [`&.${chipClasses.filled}.${chipClasses.colorPrimary} > .${chipClasses.deleteIcon}`]: {
+ color: 'red',
+ },
+- [`& .${chipClasses.deleteIconFilledColorSecondary}`]: {
++ [`&.${chipClasses.filled}.${chipClasses.colorSecondary} > .${chipClasses.deleteIcon}`]: {
+ color: 'red',
+ },
+ },
+ },
+ },
+
+```
+
+CSS transforms:
+
+```diff
+-.MuiChip-clickableColorPrimary
++.MuiChip-clickable.MuiChip-colorPrimary
+-.MuiChip-clickableColorSecondary
++.MuiChip-clickable.MuiChip-colorSecondary
+-.MuiChip-deletableColorPrimary
++.MuiChip-deletable.MuiChip-colorPrimary
+-.MuiChip-deletableColorSecondary
++.MuiChip-deletable.MuiChip-colorSecondary
+-.MuiChip-outlinedPrimary
++.MuiChip-outlined.MuiChip-colorPrimary
+-.MuiChip-outlinedSecondary
++.MuiChip-outlined.MuiChip-colorSecondary
+-.MuiChip-filledPrimary
++.MuiChip-filled.MuiChip-colorPrimary
+-.MuiChip-filledSecondary
++.MuiChip-filled.MuiChip-colorSecondary
+-.MuiChip-root .MuiChip-avatarSmall
++.MuiChip-root.MuiChip-sizeSmall > .MuiChip-avatar
+-.MuiChip-root .MuiChip-avatarMedium
++.MuiChip-root.MuiChip-sizeMedium > .MuiChip-avatar
+-.MuiChip-root .MuiChip-avatarColorPrimary
++.MuiChip-root.MuiChip-colorPrimary > .MuiChip-avatar
+-.MuiChip-root .MuiChip-avatarColorSecondary
++.MuiChip-root.MuiChip-colorSecondary > .MuiChip-avatar
+-.MuiChip-root .MuiChip-iconSmall
++.MuiChip-root.MuiChip-sizeSmall > .MuiChip-icon
+-.MuiChip-root .MuiChip-iconMedium
++.MuiChip-root.MuiChip-sizeMedium > .MuiChip-icon
+-.MuiChip-root .MuiChip-iconColorPrimary
++.MuiChip-root.MuiChip-colorPrimary > .MuiChip-icon
+-.MuiChip-root .MuiChip-iconColorSecondary
++.MuiChip-root.MuiChip-colorSecondary > .MuiChip-icon
+-.MuiChip-root .MuiChip-labelSmall
++.MuiChip-root.MuiChip-sizeSmall > .MuiChip-label
+-.MuiChip-root .MuiChip-labelMedium
++.MuiChip-root.MuiChip-sizeMedium > .MuiChip-label
+-.MuiChip-root .MuiChip-deleteIconSmall
++.MuiChip-root.MuiChip-sizeSmall > .MuiChip-deleteIcon
+-.MuiChip-root .MuiChip-deleteIconMedium
++.MuiChip-root.MuiChip-sizeMedium > .MuiChip-deleteIcon
+-.MuiChip-root .MuiChip-deleteIconColorPrimary
++.MuiChip-root.MuiChip-colorPrimary > .MuiChip-deleteIcon
+-.MuiChip-root .MuiChip-deleteIconColorSecondary
++.MuiChip-root.MuiChip-colorSecondary > .MuiChip-deleteIcon
+-.MuiChip-root .MuiChip-deleteIconOutlinedColorPrimary
++.MuiChip-root.MuiChip-outlined.MuiChip-colorPrimary > .MuiChip-deleteIcon
+-.MuiChip-root .MuiChip-deleteIconOutlinedColorSecondary
++.MuiChip-root.MuiChip-outlined.MuiChip-colorSecondary > .MuiChip-deleteIcon
+-.MuiChip-root .MuiChip-deleteIconFilledColorPrimary
++.MuiChip-root.MuiChip-filled.MuiChip-colorPrimary > .MuiChip-deleteIcon
+-.MuiChip-root .MuiChip-deleteIconFilledColorSecondary
++.MuiChip-root.MuiChip-filled.MuiChip-colorSecondary > .MuiChip-deleteIcon
+```
+
+```bash
+npx @mui/codemod@latest deprecations/chip-classes
+```
+
#### `divider-props`
```diff
@@ -256,6 +757,32 @@ CSS transforms:
npx @mui/codemod@latest deprecations/pagination-item-classes
```
+#### `slider-props`
+
+```diff
+
+```
+
### v5.0.0
#### `base-use-named-exports`
diff --git a/packages/mui-codemod/package.json b/packages/mui-codemod/package.json
index ec537f782bad05..91dc87cbe0035e 100644
--- a/packages/mui-codemod/package.json
+++ b/packages/mui-codemod/package.json
@@ -1,6 +1,6 @@
{
"name": "@mui/codemod",
- "version": "5.15.10",
+ "version": "5.15.11",
"bin": "./codemod.js",
"private": false,
"author": "MUI Team",
diff --git a/packages/mui-codemod/src/deprecations/alert-classes/alert-classes.js b/packages/mui-codemod/src/deprecations/alert-classes/alert-classes.js
new file mode 100644
index 00000000000000..13c32a4bae1238
--- /dev/null
+++ b/packages/mui-codemod/src/deprecations/alert-classes/alert-classes.js
@@ -0,0 +1,80 @@
+import { classes } from './postcss-plugin';
+
+/**
+ * @param {import('jscodeshift').FileInfo} file
+ * @param {import('jscodeshift').API} api
+ */
+export default function transformer(file, api, options) {
+ const j = api.jscodeshift;
+ const root = j(file.source);
+ const printOptions = options.printOptions;
+ classes.forEach(({ deprecatedClass, replacementSelector }) => {
+ root
+ .find(j.ImportDeclaration)
+ .filter((path) => path.node.source.value.match(/^@mui\/material\/Alert$/))
+ .forEach((path) => {
+ path.node.specifiers.forEach((specifier) => {
+ if (specifier.type === 'ImportSpecifier' && specifier.imported.name === 'alertClasses') {
+ const deprecatedAtomicClass = deprecatedClass.replace('.MuiAlert-', '');
+ root
+ .find(j.MemberExpression, {
+ object: { name: specifier.local.name },
+ property: { name: deprecatedAtomicClass },
+ })
+ .forEach((memberExpression) => {
+ const parent = memberExpression.parentPath.parentPath.value;
+ if (parent.type === j.TemplateLiteral.name) {
+ const memberExpressionIndex = parent.expressions.findIndex(
+ (expression) => expression === memberExpression.value,
+ );
+ const precedingTemplateElement = parent.quasis[memberExpressionIndex];
+ const atomicClasses = replacementSelector
+ .replaceAll('MuiAlert-', '')
+ .split('.')
+ .filter(Boolean);
+
+ if (precedingTemplateElement.value.raw.endsWith('&.')) {
+ parent.expressions.splice(
+ memberExpressionIndex,
+ 1,
+ j.memberExpression(
+ memberExpression.value.object,
+ j.identifier(atomicClasses[0]),
+ ),
+ j.memberExpression(
+ memberExpression.value.object,
+ j.identifier(atomicClasses[1]),
+ ),
+ );
+ parent.quasis.splice(
+ memberExpressionIndex,
+ 1,
+ j.templateElement(
+ {
+ raw: precedingTemplateElement.value.raw,
+ cooked: precedingTemplateElement.value.cooked,
+ },
+ false,
+ ),
+ j.templateElement({ raw: '.', cooked: '.' }, false),
+ );
+ }
+ }
+ });
+ }
+ });
+ });
+
+ const selectorRegex = new RegExp(`^&${deprecatedClass}`);
+
+ root
+ .find(
+ j.Literal,
+ (literal) => typeof literal.value === 'string' && literal.value.match(selectorRegex),
+ )
+ .forEach((path) => {
+ path.replace(j.literal(path.value.value.replace(selectorRegex, `&${replacementSelector}`)));
+ });
+ });
+ return root.toSource(printOptions);
+}
diff --git a/packages/mui-codemod/src/deprecations/alert-classes/alert-classes.test.js b/packages/mui-codemod/src/deprecations/alert-classes/alert-classes.test.js
new file mode 100644
index 00000000000000..6fcd2044c19d66
--- /dev/null
+++ b/packages/mui-codemod/src/deprecations/alert-classes/alert-classes.test.js
@@ -0,0 +1,78 @@
+import path from 'path';
+import { expect } from 'chai';
+import postcss from 'postcss';
+import { jscodeshift } from '../../../testUtils';
+import jsTransform from './alert-classes';
+import { plugin as postcssPlugin } from './postcss-plugin';
+import readFile from '../../util/readFile';
+
+function read(fileName) {
+ return readFile(path.join(__dirname, fileName));
+}
+
+const postcssProcessor = postcss([postcssPlugin]);
+
+describe('@mui/codemod', () => {
+ describe('deprecations', () => {
+ describe('alert-classes', () => {
+ describe('js-transform', () => {
+ it('transforms props as needed', () => {
+ const actual = jsTransform(
+ { source: read('./test-cases/actual.js') },
+ { jscodeshift },
+ { printOptions: { quote: 'single', trailingComma: true } },
+ );
+
+ const expected = read('./test-cases/expected.js');
+ expect(actual).to.equal(expected, 'The transformed version should be correct');
+ });
+
+ it('should be idempotent', () => {
+ const actual = jsTransform(
+ { source: read('./test-cases/expected.js') },
+ { jscodeshift },
+ {},
+ );
+
+ const expected = read('./test-cases/expected.js');
+ expect(actual).to.equal(expected, 'The transformed version should be correct');
+ });
+ });
+
+ describe('css-transform', () => {
+ it('transforms classes as needed', async () => {
+ const actual = await postcssProcessor.process(read('./test-cases/actual.css'), {
+ from: undefined,
+ });
+
+ const expected = read('./test-cases/expected.css');
+ expect(actual.css).to.equal(expected, 'The transformed version should be correct');
+ });
+
+ it('should be idempotent', async () => {
+ const actual = await postcssProcessor.process(read('./test-cases/expected.css'), {
+ from: undefined,
+ });
+
+ const expected = read('./test-cases/expected.css');
+ expect(actual.css).to.equal(expected, 'The transformed version should be correct');
+ });
+ });
+
+ describe('test-cases', () => {
+ it('should not be the same', () => {
+ const actualJS = read('./test-cases/actual.js');
+ const expectedJS = read('./test-cases/expected.js');
+ expect(actualJS).not.to.equal(expectedJS, 'The actual and expected should be different');
+
+ const actualCSS = read('./test-cases/actual.css');
+ const expectedCSS = read('./test-cases/expected.css');
+ expect(actualCSS).not.to.equal(
+ expectedCSS,
+ 'The actual and expected should be different',
+ );
+ });
+ });
+ });
+ });
+});
diff --git a/packages/mui-codemod/src/deprecations/alert-classes/index.js b/packages/mui-codemod/src/deprecations/alert-classes/index.js
new file mode 100644
index 00000000000000..7193b0b3d350a5
--- /dev/null
+++ b/packages/mui-codemod/src/deprecations/alert-classes/index.js
@@ -0,0 +1 @@
+export { default } from './alert-classes';
diff --git a/packages/mui-codemod/src/deprecations/alert-classes/postcss-plugin.js b/packages/mui-codemod/src/deprecations/alert-classes/postcss-plugin.js
new file mode 100644
index 00000000000000..29995a5ff4a05e
--- /dev/null
+++ b/packages/mui-codemod/src/deprecations/alert-classes/postcss-plugin.js
@@ -0,0 +1,39 @@
+const variants = ['standard', 'outlined', 'filled'];
+const colors = ['Success', 'Info', 'Warning', 'Error'];
+
+const classes = variants.reduce((acc, variant) => {
+ return acc.concat(
+ colors.map((color) => {
+ const deprecatedClass = `.MuiAlert-${variant}${color}`;
+ const replacementSelector = `.MuiAlert-${variant}.MuiAlert-color${color}`;
+
+ return {
+ deprecatedClass,
+ replacementSelector,
+ };
+ }),
+ );
+}, []);
+
+const plugin = () => {
+ return {
+ postcssPlugin: `Replace deperecated Alert classes with new classes`,
+ Rule(rule) {
+ const { selector } = rule;
+
+ classes.forEach(({ deprecatedClass, replacementSelector }) => {
+ const selectorRegex = new RegExp(`${deprecatedClass}`);
+
+ if (selector.match(selectorRegex)) {
+ rule.selector = selector.replace(selectorRegex, replacementSelector);
+ }
+ });
+ },
+ };
+};
+plugin.postcss = true;
+
+module.exports = {
+ plugin,
+ classes,
+};
diff --git a/packages/mui-codemod/src/deprecations/alert-classes/postcss.config.js b/packages/mui-codemod/src/deprecations/alert-classes/postcss.config.js
new file mode 100644
index 00000000000000..23bebc1125be6e
--- /dev/null
+++ b/packages/mui-codemod/src/deprecations/alert-classes/postcss.config.js
@@ -0,0 +1,5 @@
+const { plugin } = require('./postcss-plugin');
+
+module.exports = {
+ plugins: [plugin],
+};
diff --git a/packages/mui-codemod/src/deprecations/alert-classes/test-cases/actual.css b/packages/mui-codemod/src/deprecations/alert-classes/test-cases/actual.css
new file mode 100644
index 00000000000000..946ca8c6a2cce2
--- /dev/null
+++ b/packages/mui-codemod/src/deprecations/alert-classes/test-cases/actual.css
@@ -0,0 +1,47 @@
+.MuiAlert-standardSuccess {
+ color: red;
+}
+
+.MuiAlert-standardInfo {
+ color: red;
+}
+
+.MuiAlert-standardWarning {
+ color: red;
+}
+
+.MuiAlert-standardError {
+ color: red;
+}
+
+.MuiAlert-outlinedSuccess {
+ color: red;
+}
+
+.MuiAlert-outlinedInfo {
+ color: red;
+}
+
+.MuiAlert-outlinedWarning {
+ color: red;
+}
+
+.MuiAlert-outlinedError {
+ color: red;
+}
+
+.MuiAlert-filledSuccess {
+ color: red;
+}
+
+.MuiAlert-filledInfo {
+ color: red;
+}
+
+.MuiAlert-filledWarning {
+ color: red;
+}
+
+.MuiAlert-filledError {
+ color: red;
+}
diff --git a/packages/mui-codemod/src/deprecations/alert-classes/test-cases/actual.js b/packages/mui-codemod/src/deprecations/alert-classes/test-cases/actual.js
new file mode 100644
index 00000000000000..93270b52ffa850
--- /dev/null
+++ b/packages/mui-codemod/src/deprecations/alert-classes/test-cases/actual.js
@@ -0,0 +1,26 @@
+import { alertClasses } from '@mui/material/Alert';
+
+('&.MuiAlert-standardSuccess');
+('&.MuiAlert-standardInfo');
+('&.MuiAlert-standardWarning');
+('&.MuiAlert-standardError');
+('&.MuiAlert-outlinedSuccess');
+('&.MuiAlert-outlinedInfo');
+('&.MuiAlert-outlinedWarning');
+('&.MuiAlert-outlinedError');
+('&.MuiAlert-filledSuccess');
+('&.MuiAlert-filledInfo');
+('&.MuiAlert-filledWarning');
+('&.MuiAlert-filledError');
+`&.${alertClasses.standardSuccess}`;
+`&.${alertClasses.standardInfo}`;
+`&.${alertClasses.standardWarning}`;
+`&.${alertClasses.standardError}`;
+`&.${alertClasses.outlinedSuccess}`;
+`&.${alertClasses.outlinedInfo}`;
+`&.${alertClasses.outlinedWarning}`;
+`&.${alertClasses.outlinedError}`;
+`&.${alertClasses.filledSuccess}`;
+`&.${alertClasses.filledInfo}`;
+`&.${alertClasses.filledWarning}`;
+`&.${alertClasses.filledError}`;
diff --git a/packages/mui-codemod/src/deprecations/alert-classes/test-cases/expected.css b/packages/mui-codemod/src/deprecations/alert-classes/test-cases/expected.css
new file mode 100644
index 00000000000000..620ef39ea7789c
--- /dev/null
+++ b/packages/mui-codemod/src/deprecations/alert-classes/test-cases/expected.css
@@ -0,0 +1,47 @@
+.MuiAlert-standard.MuiAlert-colorSuccess {
+ color: red;
+}
+
+.MuiAlert-standard.MuiAlert-colorInfo {
+ color: red;
+}
+
+.MuiAlert-standard.MuiAlert-colorWarning {
+ color: red;
+}
+
+.MuiAlert-standard.MuiAlert-colorError {
+ color: red;
+}
+
+.MuiAlert-outlined.MuiAlert-colorSuccess {
+ color: red;
+}
+
+.MuiAlert-outlined.MuiAlert-colorInfo {
+ color: red;
+}
+
+.MuiAlert-outlined.MuiAlert-colorWarning {
+ color: red;
+}
+
+.MuiAlert-outlined.MuiAlert-colorError {
+ color: red;
+}
+
+.MuiAlert-filled.MuiAlert-colorSuccess {
+ color: red;
+}
+
+.MuiAlert-filled.MuiAlert-colorInfo {
+ color: red;
+}
+
+.MuiAlert-filled.MuiAlert-colorWarning {
+ color: red;
+}
+
+.MuiAlert-filled.MuiAlert-colorError {
+ color: red;
+}
diff --git a/packages/mui-codemod/src/deprecations/alert-classes/test-cases/expected.js b/packages/mui-codemod/src/deprecations/alert-classes/test-cases/expected.js
new file mode 100644
index 00000000000000..e55fca0e80f511
--- /dev/null
+++ b/packages/mui-codemod/src/deprecations/alert-classes/test-cases/expected.js
@@ -0,0 +1,26 @@
+import { alertClasses } from '@mui/material/Alert';
+
+('&.MuiAlert-standard.MuiAlert-colorSuccess');
+('&.MuiAlert-standard.MuiAlert-colorInfo');
+('&.MuiAlert-standard.MuiAlert-colorWarning');
+('&.MuiAlert-standard.MuiAlert-colorError');
+('&.MuiAlert-outlined.MuiAlert-colorSuccess');
+('&.MuiAlert-outlined.MuiAlert-colorInfo');
+('&.MuiAlert-outlined.MuiAlert-colorWarning');
+('&.MuiAlert-outlined.MuiAlert-colorError');
+('&.MuiAlert-filled.MuiAlert-colorSuccess');
+('&.MuiAlert-filled.MuiAlert-colorInfo');
+('&.MuiAlert-filled.MuiAlert-colorWarning');
+('&.MuiAlert-filled.MuiAlert-colorError');
+`&.${alertClasses.standard}.${alertClasses.colorSuccess}`;
+`&.${alertClasses.standard}.${alertClasses.colorInfo}`;
+`&.${alertClasses.standard}.${alertClasses.colorWarning}`;
+`&.${alertClasses.standard}.${alertClasses.colorError}`;
+`&.${alertClasses.outlined}.${alertClasses.colorSuccess}`;
+`&.${alertClasses.outlined}.${alertClasses.colorInfo}`;
+`&.${alertClasses.outlined}.${alertClasses.colorWarning}`;
+`&.${alertClasses.outlined}.${alertClasses.colorError}`;
+`&.${alertClasses.filled}.${alertClasses.colorSuccess}`;
+`&.${alertClasses.filled}.${alertClasses.colorInfo}`;
+`&.${alertClasses.filled}.${alertClasses.colorWarning}`;
+`&.${alertClasses.filled}.${alertClasses.colorError}`;
diff --git a/packages/mui-codemod/src/deprecations/all/deprecations-all.js b/packages/mui-codemod/src/deprecations/all/deprecations-all.js
index c004445f169f0d..a360b241125539 100644
--- a/packages/mui-codemod/src/deprecations/all/deprecations-all.js
+++ b/packages/mui-codemod/src/deprecations/all/deprecations-all.js
@@ -2,7 +2,10 @@ import transformAccordionProps from '../accordion-props';
import transformAvatarProps from '../avatar-props';
import transformDividerProps from '../divider-props';
import transformAccordionClasses from '../accordion-summary-classes';
+import transformButtonClasses from '../button-classes';
+import transformChipClasses from '../chip-classes';
import transformPaginationItemClasses from '../pagination-item-classes';
+import transformAlertClasses from '../alert-classes';
/**
* @param {import('jscodeshift').FileInfo} file
@@ -13,7 +16,10 @@ export default function deprecationsAll(file, api, options) {
file.source = transformAvatarProps(file, api, options);
file.source = transformDividerProps(file, api, options);
file.source = transformAccordionClasses(file, api, options);
+ file.source = transformButtonClasses(file, api, options);
+ file.source = transformChipClasses(file, api, options);
file.source = transformPaginationItemClasses(file, api, options);
+ file.source = transformAlertClasses(file, api, options);
return file.source;
}
diff --git a/packages/mui-codemod/src/deprecations/all/postcss.config.js b/packages/mui-codemod/src/deprecations/all/postcss.config.js
index bcf170eacbfb8d..9673a34e2131fd 100644
--- a/packages/mui-codemod/src/deprecations/all/postcss.config.js
+++ b/packages/mui-codemod/src/deprecations/all/postcss.config.js
@@ -1,10 +1,19 @@
const {
plugin: accordionSummaryClassesPlugin,
} = require('../accordion-summary-classes/postcss-plugin');
+const { plugin: alertClassesPlugin } = require('../alert-classes/postcss-plugin');
+const { plugin: buttonClassesPlugin } = require('../button-classes/postcss-plugin');
+const { plugin: chipClassesPlugin } = require('../chip-classes/postcss-plugin');
const {
plugin: paginationItemClassesPlugin,
} = require('../pagination-item-classes/postcss-plugin');
module.exports = {
- plugins: [accordionSummaryClassesPlugin, paginationItemClassesPlugin],
+ plugins: [
+ accordionSummaryClassesPlugin,
+ alertClassesPlugin,
+ buttonClassesPlugin,
+ chipClassesPlugin,
+ paginationItemClassesPlugin,
+ ],
};
diff --git a/packages/mui-codemod/src/deprecations/button-classes/button-classes.js b/packages/mui-codemod/src/deprecations/button-classes/button-classes.js
new file mode 100644
index 00000000000000..33bfc4a13c0ad6
--- /dev/null
+++ b/packages/mui-codemod/src/deprecations/button-classes/button-classes.js
@@ -0,0 +1,116 @@
+import { classes } from './postcss-plugin';
+
+/**
+ * @param {import('jscodeshift').FileInfo} file
+ * @param {import('jscodeshift').API} api
+ */
+export default function transformer(file, api, options) {
+ const j = api.jscodeshift;
+ const root = j(file.source);
+ const printOptions = options.printOptions;
+ classes.forEach(({ deprecatedClass, replacementSelector }) => {
+ const replacementSelectorPrefix = '&';
+ root
+ .find(j.ImportDeclaration)
+ .filter((path) => path.node.source.value.match(/^@mui\/material\/Button$/))
+ .forEach((path) => {
+ path.node.specifiers.forEach((specifier) => {
+ if (specifier.type === 'ImportSpecifier' && specifier.imported.name === 'buttonClasses') {
+ const deprecatedAtomicClass = deprecatedClass.replace(
+ `${deprecatedClass.split('-')[0]}-`,
+ '',
+ );
+ root
+ .find(j.MemberExpression, {
+ object: { name: specifier.local.name },
+ property: { name: deprecatedAtomicClass },
+ })
+ .forEach((memberExpression) => {
+ const parent = memberExpression.parentPath.parentPath.value;
+ if (parent.type === j.TemplateLiteral.name) {
+ const memberExpressionIndex = parent.expressions.findIndex(
+ (expression) => expression === memberExpression.value,
+ );
+ const precedingTemplateElement = parent.quasis[memberExpressionIndex];
+ const atomicClasses = replacementSelector
+ .replaceAll('MuiButton-', '')
+ .replaceAll(replacementSelectorPrefix, '')
+ .replaceAll(' > ', '')
+ .split('.')
+ .filter(Boolean);
+
+ if (
+ precedingTemplateElement.value.raw.endsWith(
+ deprecatedClass.startsWith(' ')
+ ? `${replacementSelectorPrefix} .`
+ : `${replacementSelectorPrefix}.`,
+ )
+ ) {
+ parent.expressions.splice(
+ memberExpressionIndex,
+ 1,
+ j.memberExpression(
+ memberExpression.value.object,
+ j.identifier(atomicClasses[0]),
+ ),
+
+ j.memberExpression(
+ memberExpression.value.object,
+ j.identifier(atomicClasses[1]),
+ ),
+ );
+
+ if (replacementSelector.includes(' > ')) {
+ parent.quasis.splice(
+ memberExpressionIndex,
+ 1,
+ j.templateElement(
+ {
+ raw: precedingTemplateElement.value.raw.replace(' ', ''),
+ cooked: precedingTemplateElement.value.cooked.replace(' ', ''),
+ },
+ false,
+ ),
+ j.templateElement({ raw: ' > .', cooked: ' > .' }, false),
+ );
+ } else {
+ parent.quasis.splice(
+ memberExpressionIndex,
+ 1,
+ j.templateElement(
+ {
+ raw: precedingTemplateElement.value.raw,
+ cooked: precedingTemplateElement.value.cooked,
+ },
+ false,
+ ),
+
+ j.templateElement({ raw: '.', cooked: '.' }, false),
+ );
+ }
+ }
+ }
+ });
+ }
+ });
+ });
+
+ const selectorRegex = new RegExp(`^${replacementSelectorPrefix}${deprecatedClass}`);
+ root
+ .find(
+ j.Literal,
+ (literal) => typeof literal.value === 'string' && literal.value.match(selectorRegex),
+ )
+ .forEach((path) => {
+ path.replace(
+ j.literal(
+ path.value.value.replace(
+ selectorRegex,
+ `${replacementSelectorPrefix}${replacementSelector}`,
+ ),
+ ),
+ );
+ });
+ });
+ return root.toSource(printOptions);
+}
diff --git a/packages/mui-codemod/src/deprecations/button-classes/button-classes.test.js b/packages/mui-codemod/src/deprecations/button-classes/button-classes.test.js
new file mode 100644
index 00000000000000..3ad6b897697d56
--- /dev/null
+++ b/packages/mui-codemod/src/deprecations/button-classes/button-classes.test.js
@@ -0,0 +1,78 @@
+import path from 'path';
+import { expect } from 'chai';
+import postcss from 'postcss';
+import { jscodeshift } from '../../../testUtils';
+import jsTransform from './button-classes';
+import { plugin as postcssPlugin } from './postcss-plugin';
+import readFile from '../../util/readFile';
+
+function read(fileName) {
+ return readFile(path.join(__dirname, fileName));
+}
+
+const postcssProcessor = postcss([postcssPlugin]);
+
+describe('@mui/codemod', () => {
+ describe('deprecations', () => {
+ describe('button-classes', () => {
+ describe('js-transform', () => {
+ it('transforms props as needed', () => {
+ const actual = jsTransform(
+ { source: read('./test-cases/actual.js') },
+ { jscodeshift },
+ { printOptions: { quote: 'double', trailingComma: true } },
+ );
+
+ const expected = read('./test-cases/expected.js');
+ expect(actual).to.equal(expected, 'The transformed version should be correct');
+ });
+
+ it('should be idempotent', () => {
+ const actual = jsTransform(
+ { source: read('./test-cases/expected.js') },
+ { jscodeshift },
+ {},
+ );
+
+ const expected = read('./test-cases/expected.js');
+ expect(actual).to.equal(expected, 'The transformed version should be correct');
+ });
+ });
+
+ describe('css-transform', () => {
+ it('transforms classes as needed', async () => {
+ const actual = await postcssProcessor.process(read('./test-cases/actual.css'), {
+ from: undefined,
+ });
+
+ const expected = read('./test-cases/expected.css');
+ expect(actual.css).to.equal(expected, 'The transformed version should be correct');
+ });
+
+ it('should be idempotent', async () => {
+ const actual = await postcssProcessor.process(read('./test-cases/expected.css'), {
+ from: undefined,
+ });
+
+ const expected = read('./test-cases/expected.css');
+ expect(actual.css).to.equal(expected, 'The transformed version should be correct');
+ });
+ });
+
+ describe('test-cases', () => {
+ it('should not be the same', () => {
+ const actualJS = read('./test-cases/actual.js');
+ const expectedJS = read('./test-cases/expected.js');
+ expect(actualJS).not.to.equal(expectedJS, 'The actual and expected should be different');
+
+ const actualCSS = read('./test-cases/actual.css');
+ const expectedCSS = read('./test-cases/expected.css');
+ expect(actualCSS).not.to.equal(
+ expectedCSS,
+ 'The actual and expected should be different',
+ );
+ });
+ });
+ });
+ });
+});
diff --git a/packages/mui-codemod/src/deprecations/button-classes/index.js b/packages/mui-codemod/src/deprecations/button-classes/index.js
new file mode 100644
index 00000000000000..a4879ceaf231a7
--- /dev/null
+++ b/packages/mui-codemod/src/deprecations/button-classes/index.js
@@ -0,0 +1 @@
+export { default } from './button-classes';
diff --git a/packages/mui-codemod/src/deprecations/button-classes/postcss-plugin.js b/packages/mui-codemod/src/deprecations/button-classes/postcss-plugin.js
new file mode 100644
index 00000000000000..796ba52db6a657
--- /dev/null
+++ b/packages/mui-codemod/src/deprecations/button-classes/postcss-plugin.js
@@ -0,0 +1,157 @@
+const classes = [
+ {
+ deprecatedClass: '.MuiButton-textInherit',
+ replacementSelector: '.MuiButton-text.MuiButton-colorInherit',
+ },
+ {
+ deprecatedClass: '.MuiButton-textPrimary',
+ replacementSelector: '.MuiButton-text.MuiButton-colorPrimary',
+ },
+ {
+ deprecatedClass: '.MuiButton-textSecondary',
+ replacementSelector: '.MuiButton-text.MuiButton-colorSecondary',
+ },
+ {
+ deprecatedClass: '.MuiButton-textSuccess',
+ replacementSelector: '.MuiButton-text.MuiButton-colorSuccess',
+ },
+ {
+ deprecatedClass: '.MuiButton-textError',
+ replacementSelector: '.MuiButton-text.MuiButton-colorError',
+ },
+ {
+ deprecatedClass: '.MuiButton-textInfo',
+ replacementSelector: '.MuiButton-text.MuiButton-colorInfo',
+ },
+ {
+ deprecatedClass: '.MuiButton-textWarning',
+ replacementSelector: '.MuiButton-text.MuiButton-colorWarning',
+ },
+ {
+ deprecatedClass: '.MuiButton-outlinedInherit',
+ replacementSelector: '.MuiButton-outlined.MuiButton-colorInherit',
+ },
+ {
+ deprecatedClass: '.MuiButton-outlinedPrimary',
+ replacementSelector: '.MuiButton-outlined.MuiButton-colorPrimary',
+ },
+ {
+ deprecatedClass: '.MuiButton-outlinedSecondary',
+ replacementSelector: '.MuiButton-outlined.MuiButton-colorSecondary',
+ },
+ {
+ deprecatedClass: '.MuiButton-outlinedSuccess',
+ replacementSelector: '.MuiButton-outlined.MuiButton-colorSuccess',
+ },
+ {
+ deprecatedClass: '.MuiButton-outlinedError',
+ replacementSelector: '.MuiButton-outlined.MuiButton-colorError',
+ },
+ {
+ deprecatedClass: '.MuiButton-outlinedInfo',
+ replacementSelector: '.MuiButton-outlined.MuiButton-colorInfo',
+ },
+ {
+ deprecatedClass: '.MuiButton-outlinedWarning',
+ replacementSelector: '.MuiButton-outlined.MuiButton-colorWarning',
+ },
+ {
+ deprecatedClass: '.MuiButton-containedInherit',
+ replacementSelector: '.MuiButton-contained.MuiButton-colorInherit',
+ },
+ {
+ deprecatedClass: '.MuiButton-containedPrimary',
+ replacementSelector: '.MuiButton-contained.MuiButton-colorPrimary',
+ },
+ {
+ deprecatedClass: '.MuiButton-containedSecondary',
+ replacementSelector: '.MuiButton-contained.MuiButton-colorSecondary',
+ },
+ {
+ deprecatedClass: '.MuiButton-containedSuccess',
+ replacementSelector: '.MuiButton-contained.MuiButton-colorSuccess',
+ },
+ {
+ deprecatedClass: '.MuiButton-containedError',
+ replacementSelector: '.MuiButton-contained.MuiButton-colorError',
+ },
+ {
+ deprecatedClass: '.MuiButton-containedInfo',
+ replacementSelector: '.MuiButton-contained.MuiButton-colorInfo',
+ },
+ {
+ deprecatedClass: '.MuiButton-containedWarning',
+ replacementSelector: '.MuiButton-contained.MuiButton-colorWarning',
+ },
+ {
+ deprecatedClass: '.MuiButton-textSizeSmall',
+ replacementSelector: '.MuiButton-text.MuiButton-sizeSmall',
+ },
+ {
+ deprecatedClass: '.MuiButton-textSizeLarge',
+ replacementSelector: '.MuiButton-text.MuiButton-sizeLarge',
+ },
+ {
+ deprecatedClass: '.MuiButton-outlinedSizeSmall',
+ replacementSelector: '.MuiButton-outlined.MuiButton-sizeSmall',
+ },
+ {
+ deprecatedClass: '.MuiButton-outlinedSizeLarge',
+ replacementSelector: '.MuiButton-outlined.MuiButton-sizeLarge',
+ },
+ {
+ deprecatedClass: '.MuiButton-containedSizeSmall',
+ replacementSelector: '.MuiButton-contained.MuiButton-sizeSmall',
+ },
+ {
+ deprecatedClass: '.MuiButton-containedSizeLarge',
+ replacementSelector: '.MuiButton-contained.MuiButton-sizeLarge',
+ },
+ {
+ deprecatedClass: '.MuiButton-textSizeMedium',
+ replacementSelector: '.MuiButton-text.MuiButton-sizeMedium',
+ },
+ {
+ deprecatedClass: '.MuiButton-outlinedSizeMedium',
+ replacementSelector: '.MuiButton-outlined.MuiButton-sizeMedium',
+ },
+ {
+ deprecatedClass: '.MuiButton-containedSizeMedium',
+ replacementSelector: '.MuiButton-contained.MuiButton-sizeMedium',
+ },
+ {
+ deprecatedClass: ' .MuiButton-iconSizeSmall',
+ replacementSelector: '.MuiButton-sizeSmall > .MuiButton-icon',
+ },
+ {
+ deprecatedClass: ' .MuiButton-iconSizeMedium',
+ replacementSelector: '.MuiButton-sizeMedium > .MuiButton-icon',
+ },
+ {
+ deprecatedClass: ' .MuiButton-iconSizeLarge',
+ replacementSelector: '.MuiButton-sizeLarge > .MuiButton-icon',
+ },
+];
+
+const plugin = () => {
+ return {
+ postcssPlugin: `Replace deperecated Button classes with new classes`,
+ Rule(rule) {
+ const { selector } = rule;
+
+ classes.forEach(({ deprecatedClass, replacementSelector }) => {
+ const selectorRegex = new RegExp(`${deprecatedClass}`);
+
+ if (selector.match(selectorRegex)) {
+ rule.selector = selector.replace(selectorRegex, replacementSelector);
+ }
+ });
+ },
+ };
+};
+plugin.postcss = true;
+
+module.exports = {
+ plugin,
+ classes,
+};
diff --git a/packages/mui-codemod/src/deprecations/button-classes/postcss.config.js b/packages/mui-codemod/src/deprecations/button-classes/postcss.config.js
new file mode 100644
index 00000000000000..23bebc1125be6e
--- /dev/null
+++ b/packages/mui-codemod/src/deprecations/button-classes/postcss.config.js
@@ -0,0 +1,5 @@
+const { plugin } = require('./postcss-plugin');
+
+module.exports = {
+ plugins: [plugin],
+};
diff --git a/packages/mui-codemod/src/deprecations/button-classes/test-cases/actual.css b/packages/mui-codemod/src/deprecations/button-classes/test-cases/actual.css
new file mode 100644
index 00000000000000..a0860cfe391ca8
--- /dev/null
+++ b/packages/mui-codemod/src/deprecations/button-classes/test-cases/actual.css
@@ -0,0 +1,133 @@
+.MuiButton-textInherit {
+ color: red;
+}
+
+.MuiButton-textPrimary {
+ color: red;
+}
+
+.MuiButton-textSecondary {
+ color: red;
+}
+
+.MuiButton-textSuccess {
+ color: red;
+}
+
+.MuiButton-textError {
+ color: red;
+}
+
+.MuiButton-textInfo {
+ color: red;
+}
+
+.MuiButton-textWarning {
+ color: red;
+}
+
+.MuiButton-outlinedInherit {
+ color: red;
+}
+
+.MuiButton-outlinedPrimary {
+ color: red;
+}
+
+.MuiButton-outlinedSecondary {
+ color: red;
+}
+
+.MuiButton-outlinedSuccess {
+ color: red;
+}
+
+.MuiButton-outlinedError {
+ color: red;
+}
+
+.MuiButton-outlinedInfo {
+ color: red;
+}
+
+.MuiButton-outlinedWarning {
+ color: red;
+}
+
+.MuiButton-containedInherit {
+ color: red;
+}
+
+.MuiButton-containedPrimary {
+ color: red;
+}
+
+.MuiButton-containedSecondary {
+ color: red;
+}
+
+.MuiButton-containedSuccess {
+ color: red;
+}
+
+.MuiButton-containedError {
+ color: red;
+}
+
+.MuiButton-containedInfo {
+ color: red;
+}
+
+.MuiButton-containedWarning {
+ color: red;
+}
+
+.MuiButton-textSizeSmall {
+ color: red;
+}
+
+.MuiButton-textSizeMedium {
+ color: red;
+}
+
+.MuiButton-textSizeLarge {
+ color: red;
+}
+
+.MuiButton-outlinedSizeSmall {
+ color: red;
+}
+
+.MuiButton-outlinedSizeMedium {
+ color: red;
+}
+
+.MuiButton-outlinedSizeLarge {
+ color: red;
+}
+
+.MuiButton-containedSizeSmall {
+ color: red;
+}
+
+.MuiButton-containedSizeMedium {
+ color: red;
+}
+
+.MuiButton-containedSizeLarge {
+ color: red;
+}
+
+.MuiButton-root .MuiButton-iconSizeSmall {
+ color: red;
+}
+
+.MuiButton-root .MuiButton-iconSizeMedium {
+ color: red;
+}
+
+.MuiButton-root .MuiButton-iconSizeLarge {
+ color: red;
+}
+
+
diff --git a/packages/mui-codemod/src/deprecations/button-classes/test-cases/actual.js b/packages/mui-codemod/src/deprecations/button-classes/test-cases/actual.js
new file mode 100644
index 00000000000000..6c312172b25e71
--- /dev/null
+++ b/packages/mui-codemod/src/deprecations/button-classes/test-cases/actual.js
@@ -0,0 +1,68 @@
+import { buttonClasses } from '@mui/material/Button';
+
+('&.MuiButton-textInherit');
+('&.MuiButton-textPrimary');
+('&.MuiButton-textSecondary');
+('&.MuiButton-textSuccess');
+('&.MuiButton-textError');
+('&.MuiButton-textInfo');
+('&.MuiButton-textWarning');
+('&.MuiButton-outlinedInherit');
+('&.MuiButton-outlinedPrimary');
+('&.MuiButton-outlinedSecondary');
+('&.MuiButton-outlinedSuccess');
+('&.MuiButton-outlinedError');
+('&.MuiButton-outlinedInfo');
+('&.MuiButton-outlinedWarning');
+('&.MuiButton-containedInherit');
+('&.MuiButton-containedPrimary');
+('&.MuiButton-containedSecondary');
+('&.MuiButton-containedSuccess');
+('&.MuiButton-containedError');
+('&.MuiButton-containedInfo');
+('&.MuiButton-containedWarning');
+('&.MuiButton-textSizeSmall');
+('&.MuiButton-textSizeMedium');
+('&.MuiButton-textSizeLarge');
+('&.MuiButton-outlinedSizeSmall');
+('&.MuiButton-outlinedSizeMedium');
+('&.MuiButton-outlinedSizeLarge');
+('&.MuiButton-containedSizeSmall');
+('&.MuiButton-containedSizeMedium');
+('&.MuiButton-containedSizeLarge');
+('& .MuiButton-iconSizeSmall');
+('& .MuiButton-iconSizeMedium');
+('& .MuiButton-iconSizeLarge');
+`&.${buttonClasses.textInherit}`;
+`&.${buttonClasses.textPrimary}`;
+`&.${buttonClasses.textSecondary}`;
+`&.${buttonClasses.textSuccess}`;
+`&.${buttonClasses.textError}`;
+`&.${buttonClasses.textInfo}`;
+`&.${buttonClasses.textWarning}`;
+`&.${buttonClasses.outlinedInherit}`;
+`&.${buttonClasses.outlinedPrimary}`;
+`&.${buttonClasses.outlinedSecondary}`;
+`&.${buttonClasses.outlinedSuccess}`;
+`&.${buttonClasses.outlinedError}`;
+`&.${buttonClasses.outlinedInfo}`;
+`&.${buttonClasses.outlinedWarning}`;
+`&.${buttonClasses.containedInherit}`;
+`&.${buttonClasses.containedPrimary}`;
+`&.${buttonClasses.containedSecondary}`;
+`&.${buttonClasses.containedSuccess}`;
+`&.${buttonClasses.containedError}`;
+`&.${buttonClasses.containedInfo}`;
+`&.${buttonClasses.containedWarning}`;
+`&.${buttonClasses.textSizeSmall}`;
+`&.${buttonClasses.textSizeMedium}`;
+`&.${buttonClasses.textSizeLarge}`;
+`&.${buttonClasses.outlinedSizeSmall}`;
+`&.${buttonClasses.outlinedSizeMedium}`;
+`&.${buttonClasses.outlinedSizeLarge}`;
+`&.${buttonClasses.containedSizeSmall}`;
+`&.${buttonClasses.containedSizeMedium}`;
+`&.${buttonClasses.containedSizeLarge}`;
+`& .${buttonClasses.iconSizeSmall}`;
+`& .${buttonClasses.iconSizeMedium}`;
+`& .${buttonClasses.iconSizeLarge}`;
diff --git a/packages/mui-codemod/src/deprecations/button-classes/test-cases/expected.css b/packages/mui-codemod/src/deprecations/button-classes/test-cases/expected.css
new file mode 100644
index 00000000000000..1739d14cb703a3
--- /dev/null
+++ b/packages/mui-codemod/src/deprecations/button-classes/test-cases/expected.css
@@ -0,0 +1,133 @@
+.MuiButton-text.MuiButton-colorInherit {
+ color: red;
+}
+
+.MuiButton-text.MuiButton-colorPrimary {
+ color: red;
+}
+
+.MuiButton-text.MuiButton-colorSecondary {
+ color: red;
+}
+
+.MuiButton-text.MuiButton-colorSuccess {
+ color: red;
+}
+
+.MuiButton-text.MuiButton-colorError {
+ color: red;
+}
+
+.MuiButton-text.MuiButton-colorInfo {
+ color: red;
+}
+
+.MuiButton-text.MuiButton-colorWarning {
+ color: red;
+}
+
+.MuiButton-outlined.MuiButton-colorInherit {
+ color: red;
+}
+
+.MuiButton-outlined.MuiButton-colorPrimary {
+ color: red;
+}
+
+.MuiButton-outlined.MuiButton-colorSecondary {
+ color: red;
+}
+
+.MuiButton-outlined.MuiButton-colorSuccess {
+ color: red;
+}
+
+.MuiButton-outlined.MuiButton-colorError {
+ color: red;
+}
+
+.MuiButton-outlined.MuiButton-colorInfo {
+ color: red;
+}
+
+.MuiButton-outlined.MuiButton-colorWarning {
+ color: red;
+}
+
+.MuiButton-contained.MuiButton-colorInherit {
+ color: red;
+}
+
+.MuiButton-contained.MuiButton-colorPrimary {
+ color: red;
+}
+
+.MuiButton-contained.MuiButton-colorSecondary {
+ color: red;
+}
+
+.MuiButton-contained.MuiButton-colorSuccess {
+ color: red;
+}
+
+.MuiButton-contained.MuiButton-colorError {
+ color: red;
+}
+
+.MuiButton-contained.MuiButton-colorInfo {
+ color: red;
+}
+
+.MuiButton-contained.MuiButton-colorWarning {
+ color: red;
+}
+
+.MuiButton-text.MuiButton-sizeSmall {
+ color: red;
+}
+
+.MuiButton-text.MuiButton-sizeMedium {
+ color: red;
+}
+
+.MuiButton-text.MuiButton-sizeLarge {
+ color: red;
+}
+
+.MuiButton-outlined.MuiButton-sizeSmall {
+ color: red;
+}
+
+.MuiButton-outlined.MuiButton-sizeMedium {
+ color: red;
+}
+
+.MuiButton-outlined.MuiButton-sizeLarge {
+ color: red;
+}
+
+.MuiButton-contained.MuiButton-sizeSmall {
+ color: red;
+}
+
+.MuiButton-contained.MuiButton-sizeMedium {
+ color: red;
+}
+
+.MuiButton-contained.MuiButton-sizeLarge {
+ color: red;
+}
+
+.MuiButton-root.MuiButton-sizeSmall > .MuiButton-icon {
+ color: red;
+}
+
+.MuiButton-root.MuiButton-sizeMedium > .MuiButton-icon {
+ color: red;
+}
+
+.MuiButton-root.MuiButton-sizeLarge > .MuiButton-icon {
+ color: red;
+}
+
+
diff --git a/packages/mui-codemod/src/deprecations/button-classes/test-cases/expected.js b/packages/mui-codemod/src/deprecations/button-classes/test-cases/expected.js
new file mode 100644
index 00000000000000..397e23dc31d8ef
--- /dev/null
+++ b/packages/mui-codemod/src/deprecations/button-classes/test-cases/expected.js
@@ -0,0 +1,68 @@
+import { buttonClasses } from '@mui/material/Button';
+
+("&.MuiButton-text.MuiButton-colorInherit");
+("&.MuiButton-text.MuiButton-colorPrimary");
+("&.MuiButton-text.MuiButton-colorSecondary");
+("&.MuiButton-text.MuiButton-colorSuccess");
+("&.MuiButton-text.MuiButton-colorError");
+("&.MuiButton-text.MuiButton-colorInfo");
+("&.MuiButton-text.MuiButton-colorWarning");
+("&.MuiButton-outlined.MuiButton-colorInherit");
+("&.MuiButton-outlined.MuiButton-colorPrimary");
+("&.MuiButton-outlined.MuiButton-colorSecondary");
+("&.MuiButton-outlined.MuiButton-colorSuccess");
+("&.MuiButton-outlined.MuiButton-colorError");
+("&.MuiButton-outlined.MuiButton-colorInfo");
+("&.MuiButton-outlined.MuiButton-colorWarning");
+("&.MuiButton-contained.MuiButton-colorInherit");
+("&.MuiButton-contained.MuiButton-colorPrimary");
+("&.MuiButton-contained.MuiButton-colorSecondary");
+("&.MuiButton-contained.MuiButton-colorSuccess");
+("&.MuiButton-contained.MuiButton-colorError");
+("&.MuiButton-contained.MuiButton-colorInfo");
+("&.MuiButton-contained.MuiButton-colorWarning");
+("&.MuiButton-text.MuiButton-sizeSmall");
+("&.MuiButton-text.MuiButton-sizeMedium");
+("&.MuiButton-text.MuiButton-sizeLarge");
+("&.MuiButton-outlined.MuiButton-sizeSmall");
+("&.MuiButton-outlined.MuiButton-sizeMedium");
+("&.MuiButton-outlined.MuiButton-sizeLarge");
+("&.MuiButton-contained.MuiButton-sizeSmall");
+("&.MuiButton-contained.MuiButton-sizeMedium");
+("&.MuiButton-contained.MuiButton-sizeLarge");
+("&.MuiButton-sizeSmall > .MuiButton-icon");
+("&.MuiButton-sizeMedium > .MuiButton-icon");
+("&.MuiButton-sizeLarge > .MuiButton-icon");
+`&.${buttonClasses.text}.${buttonClasses.colorInherit}`;
+`&.${buttonClasses.text}.${buttonClasses.colorPrimary}`;
+`&.${buttonClasses.text}.${buttonClasses.colorSecondary}`;
+`&.${buttonClasses.text}.${buttonClasses.colorSuccess}`;
+`&.${buttonClasses.text}.${buttonClasses.colorError}`;
+`&.${buttonClasses.text}.${buttonClasses.colorInfo}`;
+`&.${buttonClasses.text}.${buttonClasses.colorWarning}`;
+`&.${buttonClasses.outlined}.${buttonClasses.colorInherit}`;
+`&.${buttonClasses.outlined}.${buttonClasses.colorPrimary}`;
+`&.${buttonClasses.outlined}.${buttonClasses.colorSecondary}`;
+`&.${buttonClasses.outlined}.${buttonClasses.colorSuccess}`;
+`&.${buttonClasses.outlined}.${buttonClasses.colorError}`;
+`&.${buttonClasses.outlined}.${buttonClasses.colorInfo}`;
+`&.${buttonClasses.outlined}.${buttonClasses.colorWarning}`;
+`&.${buttonClasses.contained}.${buttonClasses.colorInherit}`;
+`&.${buttonClasses.contained}.${buttonClasses.colorPrimary}`;
+`&.${buttonClasses.contained}.${buttonClasses.colorSecondary}`;
+`&.${buttonClasses.contained}.${buttonClasses.colorSuccess}`;
+`&.${buttonClasses.contained}.${buttonClasses.colorError}`;
+`&.${buttonClasses.contained}.${buttonClasses.colorInfo}`;
+`&.${buttonClasses.contained}.${buttonClasses.colorWarning}`;
+`&.${buttonClasses.text}.${buttonClasses.sizeSmall}`;
+`&.${buttonClasses.text}.${buttonClasses.sizeMedium}`;
+`&.${buttonClasses.text}.${buttonClasses.sizeLarge}`;
+`&.${buttonClasses.outlined}.${buttonClasses.sizeSmall}`;
+`&.${buttonClasses.outlined}.${buttonClasses.sizeMedium}`;
+`&.${buttonClasses.outlined}.${buttonClasses.sizeLarge}`;
+`&.${buttonClasses.contained}.${buttonClasses.sizeSmall}`;
+`&.${buttonClasses.contained}.${buttonClasses.sizeMedium}`;
+`&.${buttonClasses.contained}.${buttonClasses.sizeLarge}`;
+`&.${buttonClasses.sizeSmall} > .${buttonClasses.icon}`;
+`&.${buttonClasses.sizeMedium} > .${buttonClasses.icon}`;
+`&.${buttonClasses.sizeLarge} > .${buttonClasses.icon}`;
diff --git a/packages/mui-codemod/src/deprecations/chip-classes/chip-classes.js b/packages/mui-codemod/src/deprecations/chip-classes/chip-classes.js
new file mode 100644
index 00000000000000..82fec4f91a4e07
--- /dev/null
+++ b/packages/mui-codemod/src/deprecations/chip-classes/chip-classes.js
@@ -0,0 +1,124 @@
+import { classes } from './postcss-plugin';
+
+/**
+ * @param {import('jscodeshift').FileInfo} file
+ * @param {import('jscodeshift').API} api
+ */
+export default function transformer(file, api, options) {
+ const j = api.jscodeshift;
+ const root = j(file.source);
+ const printOptions = options.printOptions;
+ classes.forEach(({ deprecatedClass, replacementSelector }) => {
+ const replacementSelectorPrefix = '&';
+ root
+ .find(j.ImportDeclaration)
+ .filter((path) => path.node.source.value.match(/^@mui\/material\/Chip$/))
+ .forEach((path) => {
+ path.node.specifiers.forEach((specifier) => {
+ if (specifier.type === 'ImportSpecifier' && specifier.imported.name === 'chipClasses') {
+ const deprecatedAtomicClass = deprecatedClass.replace(
+ `${deprecatedClass.split('-')[0]}-`,
+ '',
+ );
+ root
+ .find(j.MemberExpression, {
+ object: { name: specifier.local.name },
+ property: { name: deprecatedAtomicClass },
+ })
+ .forEach((memberExpression) => {
+ const parent = memberExpression.parentPath.parentPath.value;
+ if (parent.type === j.TemplateLiteral.name) {
+ const memberExpressionIndex = parent.expressions.findIndex(
+ (expression) => expression === memberExpression.value,
+ );
+ const precedingTemplateElement = parent.quasis[memberExpressionIndex];
+ const atomicClasses = replacementSelector
+ .replaceAll('MuiChip-', '')
+ .replaceAll(replacementSelectorPrefix, '')
+ .replaceAll(' > ', '')
+ .split('.')
+ .filter(Boolean);
+
+ if (
+ precedingTemplateElement.value.raw.endsWith(
+ deprecatedClass.startsWith(' ')
+ ? `${replacementSelectorPrefix} .`
+ : `${replacementSelectorPrefix}.`,
+ )
+ ) {
+ const atomicClassesArgs = [
+ memberExpressionIndex,
+ 1,
+ ...atomicClasses.map((atomicClass) =>
+ j.memberExpression(
+ memberExpression.value.object,
+ j.identifier(atomicClass),
+ ),
+ ),
+ ];
+ parent.expressions.splice(...atomicClassesArgs);
+
+ if (replacementSelector.includes(' > ')) {
+ const quasisArgs = [
+ memberExpressionIndex,
+ 1,
+ j.templateElement(
+ {
+ raw: precedingTemplateElement.value.raw.replace(' ', ''),
+ cooked: precedingTemplateElement.value.cooked.replace(' ', ''),
+ },
+ false,
+ ),
+ j.templateElement({ raw: ' > .', cooked: ' > .' }, false),
+ ];
+
+ if (atomicClasses.length === 3) {
+ quasisArgs.splice(
+ 3,
+ 0,
+ j.templateElement({ raw: '.', cooked: '.' }, false),
+ );
+ }
+
+ parent.quasis.splice(...quasisArgs);
+ } else {
+ parent.quasis.splice(
+ memberExpressionIndex,
+ 1,
+ j.templateElement(
+ {
+ raw: precedingTemplateElement.value.raw,
+ cooked: precedingTemplateElement.value.cooked,
+ },
+ false,
+ ),
+
+ j.templateElement({ raw: '.', cooked: '.' }, false),
+ );
+ }
+ }
+ }
+ });
+ }
+ });
+ });
+
+ const selectorRegex = new RegExp(`^${replacementSelectorPrefix}${deprecatedClass}`);
+ root
+ .find(
+ j.Literal,
+ (literal) => typeof literal.value === 'string' && literal.value.match(selectorRegex),
+ )
+ .forEach((path) => {
+ path.replace(
+ j.literal(
+ path.value.value.replace(
+ selectorRegex,
+ `${replacementSelectorPrefix}${replacementSelector}`,
+ ),
+ ),
+ );
+ });
+ });
+ return root.toSource(printOptions);
+}
diff --git a/packages/mui-codemod/src/deprecations/chip-classes/chip-classes.test.js b/packages/mui-codemod/src/deprecations/chip-classes/chip-classes.test.js
new file mode 100644
index 00000000000000..aee266dc004726
--- /dev/null
+++ b/packages/mui-codemod/src/deprecations/chip-classes/chip-classes.test.js
@@ -0,0 +1,78 @@
+import path from 'path';
+import { expect } from 'chai';
+import postcss from 'postcss';
+import { jscodeshift } from '../../../testUtils';
+import jsTransform from './chip-classes';
+import { plugin as postcssPlugin } from './postcss-plugin';
+import readFile from '../../util/readFile';
+
+function read(fileName) {
+ return readFile(path.join(__dirname, fileName));
+}
+
+const postcssProcessor = postcss([postcssPlugin]);
+
+describe('@mui/codemod', () => {
+ describe('deprecations', () => {
+ describe('chip-classes', () => {
+ describe('js-transform', () => {
+ it('transforms props as needed', () => {
+ const actual = jsTransform(
+ { source: read('./test-cases/actual.js') },
+ { jscodeshift },
+ { printOptions: { quote: 'double', trailingComma: true } },
+ );
+
+ const expected = read('./test-cases/expected.js');
+ expect(actual).to.equal(expected, 'The transformed version should be correct');
+ });
+
+ it('should be idempotent', () => {
+ const actual = jsTransform(
+ { source: read('./test-cases/expected.js') },
+ { jscodeshift },
+ {},
+ );
+
+ const expected = read('./test-cases/expected.js');
+ expect(actual).to.equal(expected, 'The transformed version should be correct');
+ });
+ });
+
+ describe('css-transform', () => {
+ it('transforms classes as needed', async () => {
+ const actual = await postcssProcessor.process(read('./test-cases/actual.css'), {
+ from: undefined,
+ });
+
+ const expected = read('./test-cases/expected.css');
+ expect(actual.css).to.equal(expected, 'The transformed version should be correct');
+ });
+
+ it('should be idempotent', async () => {
+ const actual = await postcssProcessor.process(read('./test-cases/expected.css'), {
+ from: undefined,
+ });
+
+ const expected = read('./test-cases/expected.css');
+ expect(actual.css).to.equal(expected, 'The transformed version should be correct');
+ });
+ });
+
+ describe('test-cases', () => {
+ it('should not be the same', () => {
+ const actualJS = read('./test-cases/actual.js');
+ const expectedJS = read('./test-cases/expected.js');
+ expect(actualJS).not.to.equal(expectedJS, 'The actual and expected should be different');
+
+ const actualCSS = read('./test-cases/actual.css');
+ const expectedCSS = read('./test-cases/expected.css');
+ expect(actualCSS).not.to.equal(
+ expectedCSS,
+ 'The actual and expected should be different',
+ );
+ });
+ });
+ });
+ });
+});
diff --git a/packages/mui-codemod/src/deprecations/chip-classes/index.js b/packages/mui-codemod/src/deprecations/chip-classes/index.js
new file mode 100644
index 00000000000000..a34fddd15caa1e
--- /dev/null
+++ b/packages/mui-codemod/src/deprecations/chip-classes/index.js
@@ -0,0 +1 @@
+export { default } from './chip-classes';
diff --git a/packages/mui-codemod/src/deprecations/chip-classes/postcss-plugin.js b/packages/mui-codemod/src/deprecations/chip-classes/postcss-plugin.js
new file mode 100644
index 00000000000000..f2264798f6d96a
--- /dev/null
+++ b/packages/mui-codemod/src/deprecations/chip-classes/postcss-plugin.js
@@ -0,0 +1,129 @@
+const classes = [
+ {
+ deprecatedClass: '.MuiChip-clickableColorPrimary',
+ replacementSelector: '.MuiChip-clickable.MuiChip-colorPrimary',
+ },
+ {
+ deprecatedClass: '.MuiChip-clickableColorSecondary',
+ replacementSelector: '.MuiChip-clickable.MuiChip-colorSecondary',
+ },
+ {
+ deprecatedClass: '.MuiChip-deletableColorPrimary',
+ replacementSelector: '.MuiChip-deletable.MuiChip-colorPrimary',
+ },
+ {
+ deprecatedClass: '.MuiChip-deletableColorSecondary',
+ replacementSelector: '.MuiChip-deletable.MuiChip-colorSecondary',
+ },
+ {
+ deprecatedClass: '.MuiChip-outlinedPrimary',
+ replacementSelector: '.MuiChip-outlined.MuiChip-colorPrimary',
+ },
+ {
+ deprecatedClass: '.MuiChip-outlinedSecondary',
+ replacementSelector: '.MuiChip-outlined.MuiChip-colorSecondary',
+ },
+ {
+ deprecatedClass: '.MuiChip-filledPrimary',
+ replacementSelector: '.MuiChip-filled.MuiChip-colorPrimary',
+ },
+ {
+ deprecatedClass: '.MuiChip-filledSecondary',
+ replacementSelector: '.MuiChip-filled.MuiChip-colorSecondary',
+ },
+ {
+ deprecatedClass: ' .MuiChip-avatarSmall',
+ replacementSelector: '.MuiChip-sizeSmall > .MuiChip-avatar',
+ },
+ {
+ deprecatedClass: ' .MuiChip-avatarMedium',
+ replacementSelector: '.MuiChip-sizeMedium > .MuiChip-avatar',
+ },
+ {
+ deprecatedClass: ' .MuiChip-avatarColorPrimary',
+ replacementSelector: '.MuiChip-colorPrimary > .MuiChip-avatar',
+ },
+ {
+ deprecatedClass: ' .MuiChip-avatarColorSecondary',
+ replacementSelector: '.MuiChip-colorSecondary > .MuiChip-avatar',
+ },
+ {
+ deprecatedClass: ' .MuiChip-iconSmall',
+ replacementSelector: '.MuiChip-sizeSmall > .MuiChip-icon',
+ },
+ {
+ deprecatedClass: ' .MuiChip-iconMedium',
+ replacementSelector: '.MuiChip-sizeMedium > .MuiChip-icon',
+ },
+ {
+ deprecatedClass: ' .MuiChip-iconColorPrimary',
+ replacementSelector: '.MuiChip-colorPrimary > .MuiChip-icon',
+ },
+ {
+ deprecatedClass: ' .MuiChip-iconColorSecondary',
+ replacementSelector: '.MuiChip-colorSecondary > .MuiChip-icon',
+ },
+ {
+ deprecatedClass: ' .MuiChip-labelSmall',
+ replacementSelector: '.MuiChip-sizeSmall > .MuiChip-label',
+ },
+ {
+ deprecatedClass: ' .MuiChip-labelMedium',
+ replacementSelector: '.MuiChip-sizeMedium > .MuiChip-label',
+ },
+ {
+ deprecatedClass: ' .MuiChip-deleteIconSmall',
+ replacementSelector: '.MuiChip-sizeSmall > .MuiChip-deleteIcon',
+ },
+ {
+ deprecatedClass: ' .MuiChip-deleteIconMedium',
+ replacementSelector: '.MuiChip-sizeMedium > .MuiChip-deleteIcon',
+ },
+ {
+ deprecatedClass: ' .MuiChip-deleteIconColorPrimary',
+ replacementSelector: '.MuiChip-colorPrimary > .MuiChip-deleteIcon',
+ },
+ {
+ deprecatedClass: ' .MuiChip-deleteIconColorSecondary',
+ replacementSelector: '.MuiChip-colorSecondary > .MuiChip-deleteIcon',
+ },
+ {
+ deprecatedClass: ' .MuiChip-deleteIconOutlinedColorPrimary',
+ replacementSelector: '.MuiChip-outlined.MuiChip-colorPrimary > .MuiChip-deleteIcon',
+ },
+ {
+ deprecatedClass: ' .MuiChip-deleteIconOutlinedColorSecondary',
+ replacementSelector: '.MuiChip-outlined.MuiChip-colorSecondary > .MuiChip-deleteIcon',
+ },
+ {
+ deprecatedClass: ' .MuiChip-deleteIconFilledColorPrimary',
+ replacementSelector: '.MuiChip-filled.MuiChip-colorPrimary > .MuiChip-deleteIcon',
+ },
+ {
+ deprecatedClass: ' .MuiChip-deleteIconFilledColorSecondary',
+ replacementSelector: '.MuiChip-filled.MuiChip-colorSecondary > .MuiChip-deleteIcon',
+ },
+];
+
+const plugin = () => {
+ return {
+ postcssPlugin: `Replace deperecated Chip classes with new classes`,
+ Rule(rule) {
+ const { selector } = rule;
+
+ classes.forEach(({ deprecatedClass, replacementSelector }) => {
+ const selectorRegex = new RegExp(`${deprecatedClass}`);
+
+ if (selector.match(selectorRegex)) {
+ rule.selector = selector.replace(selectorRegex, replacementSelector);
+ }
+ });
+ },
+ };
+};
+plugin.postcss = true;
+
+module.exports = {
+ plugin,
+ classes,
+};
diff --git a/packages/mui-codemod/src/deprecations/chip-classes/postcss.config.js b/packages/mui-codemod/src/deprecations/chip-classes/postcss.config.js
new file mode 100644
index 00000000000000..23bebc1125be6e
--- /dev/null
+++ b/packages/mui-codemod/src/deprecations/chip-classes/postcss.config.js
@@ -0,0 +1,5 @@
+const { plugin } = require('./postcss-plugin');
+
+module.exports = {
+ plugins: [plugin],
+};
diff --git a/packages/mui-codemod/src/deprecations/chip-classes/test-cases/actual.css b/packages/mui-codemod/src/deprecations/chip-classes/test-cases/actual.css
new file mode 100644
index 00000000000000..2b253d22c96a99
--- /dev/null
+++ b/packages/mui-codemod/src/deprecations/chip-classes/test-cases/actual.css
@@ -0,0 +1,103 @@
+.MuiChip-clickableColorPrimary {
+ color: red;
+}
+
+.MuiChip-clickableColorSecondary {
+ color: red;
+}
+
+.MuiChip-deletableColorPrimary {
+ color: red;
+}
+
+.MuiChip-deletableColorSecondary {
+ color: red;
+}
+
+.MuiChip-outlinedPrimary {
+ color: red;
+}
+
+.MuiChip-outlinedSecondary {
+ color: red;
+}
+
+.MuiChip-filledPrimary {
+ color: red;
+}
+
+.MuiChip-filledSecondary {
+ color: red;
+}
+
+.MuiChip-root .MuiChip-avatarSmall {
+ color: red;
+}
+
+.MuiChip-root .MuiChip-avatarMedium {
+ color: red;
+}
+
+.MuiChip-root .MuiChip-avatarColorPrimary {
+ color: red;
+}
+
+.MuiChip-root .MuiChip-avatarColorSecondary {
+ color: red;
+}
+
+.MuiChip-root .MuiChip-iconSmall {
+ color: red;
+}
+
+.MuiChip-root .MuiChip-iconMedium {
+ color: red;
+}
+
+.MuiChip-root .MuiChip-iconColorPrimary {
+ color: red;
+}
+
+.MuiChip-root .MuiChip-iconColorSecondary {
+ color: red;
+}
+
+.MuiChip-root .MuiChip-labelSmall {
+ color: red;
+}
+
+.MuiChip-root .MuiChip-labelMedium {
+ color: red;
+}
+
+.MuiChip-root .MuiChip-deleteIconSmall {
+ color: red;
+}
+
+.MuiChip-root .MuiChip-deleteIconMedium {
+ color: red;
+}
+
+.MuiChip-root .MuiChip-deleteIconColorPrimary {
+ color: red;
+}
+
+.MuiChip-root .MuiChip-deleteIconColorSecondary {
+ color: red;
+}
+
+.MuiChip-root .MuiChip-deleteIconFilledColorPrimary {
+ color: red;
+}
+
+.MuiChip-root .MuiChip-deleteIconFilledColorSecondary {
+ color: red;
+}
+
+.MuiChip-root .MuiChip-deleteIconOutlinedColorPrimary {
+ color: red;
+}
+
+.MuiChip-root .MuiChip-deleteIconOutlinedColorSecondary {
+ color: red;
+}
diff --git a/packages/mui-codemod/src/deprecations/chip-classes/test-cases/actual.js b/packages/mui-codemod/src/deprecations/chip-classes/test-cases/actual.js
new file mode 100644
index 00000000000000..26a37c20e71dcb
--- /dev/null
+++ b/packages/mui-codemod/src/deprecations/chip-classes/test-cases/actual.js
@@ -0,0 +1,54 @@
+import { chipClasses } from '@mui/material/Chip';
+
+('&.MuiChip-clickableColorPrimary');
+('&.MuiChip-clickableColorSecondary');
+('&.MuiChip-deletableColorPrimary');
+('&.MuiChip-deletableColorSecondary');
+('&.MuiChip-outlinedPrimary');
+('&.MuiChip-outlinedSecondary');
+('&.MuiChip-filledPrimary');
+('&.MuiChip-filledSecondary');
+('& .MuiChip-avatarSmall');
+('& .MuiChip-avatarMedium');
+('& .MuiChip-avatarColorPrimary');
+('& .MuiChip-avatarColorSecondary');
+('& .MuiChip-iconSmall');
+('& .MuiChip-iconMedium');
+('& .MuiChip-iconColorPrimary');
+('& .MuiChip-iconColorSecondary');
+('& .MuiChip-labelSmall');
+('& .MuiChip-labelMedium');
+('& .MuiChip-deleteIconSmall');
+('& .MuiChip-deleteIconMedium');
+('& .MuiChip-deleteIconColorPrimary');
+('& .MuiChip-deleteIconColorSecondary');
+('& .MuiChip-deleteIconFilledColorPrimary');
+('& .MuiChip-deleteIconFilledColorSecondary');
+('& .MuiChip-deleteIconOutlinedColorPrimary');
+('& .MuiChip-deleteIconOutlinedColorSecondary');
+`&.${chipClasses.clickableColorPrimary}`;
+`&.${chipClasses.clickableColorSecondary}`;
+`&.${chipClasses.deletableColorPrimary}`;
+`&.${chipClasses.deletableColorSecondary}`;
+`&.${chipClasses.outlinedPrimary}`;
+`&.${chipClasses.outlinedSecondary}`;
+`&.${chipClasses.filledPrimary}`;
+`&.${chipClasses.filledSecondary}`;
+`& .${chipClasses.avatarSmall}`;
+`& .${chipClasses.avatarMedium}`;
+`& .${chipClasses.avatarColorPrimary}`;
+`& .${chipClasses.avatarColorSecondary}`;
+`& .${chipClasses.iconSmall}`;
+`& .${chipClasses.iconMedium}`;
+`& .${chipClasses.iconColorPrimary}`;
+`& .${chipClasses.iconColorSecondary}`;
+`& .${chipClasses.labelSmall}`;
+`& .${chipClasses.labelMedium}`;
+`& .${chipClasses.deleteIconSmall}`;
+`& .${chipClasses.deleteIconMedium}`;
+`& .${chipClasses.deleteIconColorPrimary}`;
+`& .${chipClasses.deleteIconColorSecondary}`;
+`& .${chipClasses.deleteIconFilledColorPrimary}`;
+`& .${chipClasses.deleteIconFilledColorSecondary}`;
+`& .${chipClasses.deleteIconOutlinedColorPrimary}`;
+`& .${chipClasses.deleteIconOutlinedColorSecondary}`;
diff --git a/packages/mui-codemod/src/deprecations/chip-classes/test-cases/expected.css b/packages/mui-codemod/src/deprecations/chip-classes/test-cases/expected.css
new file mode 100644
index 00000000000000..6ca46e53bd5b2c
--- /dev/null
+++ b/packages/mui-codemod/src/deprecations/chip-classes/test-cases/expected.css
@@ -0,0 +1,103 @@
+.MuiChip-clickable.MuiChip-colorPrimary {
+ color: red;
+}
+
+.MuiChip-clickable.MuiChip-colorSecondary {
+ color: red;
+}
+
+.MuiChip-deletable.MuiChip-colorPrimary {
+ color: red;
+}
+
+.MuiChip-deletable.MuiChip-colorSecondary {
+ color: red;
+}
+
+.MuiChip-outlined.MuiChip-colorPrimary {
+ color: red;
+}
+
+.MuiChip-outlined.MuiChip-colorSecondary {
+ color: red;
+}
+
+.MuiChip-filled.MuiChip-colorPrimary {
+ color: red;
+}
+
+.MuiChip-filled.MuiChip-colorSecondary {
+ color: red;
+}
+
+.MuiChip-root.MuiChip-sizeSmall > .MuiChip-avatar {
+ color: red;
+}
+
+.MuiChip-root.MuiChip-sizeMedium > .MuiChip-avatar {
+ color: red;
+}
+
+.MuiChip-root.MuiChip-colorPrimary > .MuiChip-avatar {
+ color: red;
+}
+
+.MuiChip-root.MuiChip-colorSecondary > .MuiChip-avatar {
+ color: red;
+}
+
+.MuiChip-root.MuiChip-sizeSmall > .MuiChip-icon {
+ color: red;
+}
+
+.MuiChip-root.MuiChip-sizeMedium > .MuiChip-icon {
+ color: red;
+}
+
+.MuiChip-root.MuiChip-colorPrimary > .MuiChip-icon {
+ color: red;
+}
+
+.MuiChip-root.MuiChip-colorSecondary > .MuiChip-icon {
+ color: red;
+}
+
+.MuiChip-root.MuiChip-sizeSmall > .MuiChip-label {
+ color: red;
+}
+
+.MuiChip-root.MuiChip-sizeMedium > .MuiChip-label {
+ color: red;
+}
+
+.MuiChip-root.MuiChip-sizeSmall > .MuiChip-deleteIcon {
+ color: red;
+}
+
+.MuiChip-root.MuiChip-sizeMedium > .MuiChip-deleteIcon {
+ color: red;
+}
+
+.MuiChip-root.MuiChip-colorPrimary > .MuiChip-deleteIcon {
+ color: red;
+}
+
+.MuiChip-root.MuiChip-colorSecondary > .MuiChip-deleteIcon {
+ color: red;
+}
+
+.MuiChip-root.MuiChip-filled.MuiChip-colorPrimary > .MuiChip-deleteIcon {
+ color: red;
+}
+
+.MuiChip-root.MuiChip-filled.MuiChip-colorSecondary > .MuiChip-deleteIcon {
+ color: red;
+}
+
+.MuiChip-root.MuiChip-outlined.MuiChip-colorPrimary > .MuiChip-deleteIcon {
+ color: red;
+}
+
+.MuiChip-root.MuiChip-outlined.MuiChip-colorSecondary > .MuiChip-deleteIcon {
+ color: red;
+}
diff --git a/packages/mui-codemod/src/deprecations/chip-classes/test-cases/expected.js b/packages/mui-codemod/src/deprecations/chip-classes/test-cases/expected.js
new file mode 100644
index 00000000000000..e3468e5166c6b5
--- /dev/null
+++ b/packages/mui-codemod/src/deprecations/chip-classes/test-cases/expected.js
@@ -0,0 +1,54 @@
+import { chipClasses } from '@mui/material/Chip';
+
+("&.MuiChip-clickable.MuiChip-colorPrimary");
+("&.MuiChip-clickable.MuiChip-colorSecondary");
+("&.MuiChip-deletable.MuiChip-colorPrimary");
+("&.MuiChip-deletable.MuiChip-colorSecondary");
+("&.MuiChip-outlined.MuiChip-colorPrimary");
+("&.MuiChip-outlined.MuiChip-colorSecondary");
+("&.MuiChip-filled.MuiChip-colorPrimary");
+("&.MuiChip-filled.MuiChip-colorSecondary");
+("&.MuiChip-sizeSmall > .MuiChip-avatar");
+("&.MuiChip-sizeMedium > .MuiChip-avatar");
+("&.MuiChip-colorPrimary > .MuiChip-avatar");
+("&.MuiChip-colorSecondary > .MuiChip-avatar");
+("&.MuiChip-sizeSmall > .MuiChip-icon");
+("&.MuiChip-sizeMedium > .MuiChip-icon");
+("&.MuiChip-colorPrimary > .MuiChip-icon");
+("&.MuiChip-colorSecondary > .MuiChip-icon");
+("&.MuiChip-sizeSmall > .MuiChip-label");
+("&.MuiChip-sizeMedium > .MuiChip-label");
+("&.MuiChip-sizeSmall > .MuiChip-deleteIcon");
+("&.MuiChip-sizeMedium > .MuiChip-deleteIcon");
+("&.MuiChip-colorPrimary > .MuiChip-deleteIcon");
+("&.MuiChip-colorSecondary > .MuiChip-deleteIcon");
+("&.MuiChip-filled.MuiChip-colorPrimary > .MuiChip-deleteIcon");
+("&.MuiChip-filled.MuiChip-colorSecondary > .MuiChip-deleteIcon");
+("&.MuiChip-outlined.MuiChip-colorPrimary > .MuiChip-deleteIcon");
+("&.MuiChip-outlined.MuiChip-colorSecondary > .MuiChip-deleteIcon");
+`&.${chipClasses.clickable}.${chipClasses.colorPrimary}`;
+`&.${chipClasses.clickable}.${chipClasses.colorSecondary}`;
+`&.${chipClasses.deletable}.${chipClasses.colorPrimary}`;
+`&.${chipClasses.deletable}.${chipClasses.colorSecondary}`;
+`&.${chipClasses.outlined}.${chipClasses.colorPrimary}`;
+`&.${chipClasses.outlined}.${chipClasses.colorSecondary}`;
+`&.${chipClasses.filled}.${chipClasses.colorPrimary}`;
+`&.${chipClasses.filled}.${chipClasses.colorSecondary}`;
+`&.${chipClasses.sizeSmall} > .${chipClasses.avatar}`;
+`&.${chipClasses.sizeMedium} > .${chipClasses.avatar}`;
+`&.${chipClasses.colorPrimary} > .${chipClasses.avatar}`;
+`&.${chipClasses.colorSecondary} > .${chipClasses.avatar}`;
+`&.${chipClasses.sizeSmall} > .${chipClasses.icon}`;
+`&.${chipClasses.sizeMedium} > .${chipClasses.icon}`;
+`&.${chipClasses.colorPrimary} > .${chipClasses.icon}`;
+`&.${chipClasses.colorSecondary} > .${chipClasses.icon}`;
+`&.${chipClasses.sizeSmall} > .${chipClasses.label}`;
+`&.${chipClasses.sizeMedium} > .${chipClasses.label}`;
+`&.${chipClasses.sizeSmall} > .${chipClasses.deleteIcon}`;
+`&.${chipClasses.sizeMedium} > .${chipClasses.deleteIcon}`;
+`&.${chipClasses.colorPrimary} > .${chipClasses.deleteIcon}`;
+`&.${chipClasses.colorSecondary} > .${chipClasses.deleteIcon}`;
+`&.${chipClasses.filled}.${chipClasses.colorPrimary} > .${chipClasses.deleteIcon}`;
+`&.${chipClasses.filled}.${chipClasses.colorSecondary} > .${chipClasses.deleteIcon}`;
+`&.${chipClasses.outlined}.${chipClasses.colorPrimary} > .${chipClasses.deleteIcon}`;
+`&.${chipClasses.outlined}.${chipClasses.colorSecondary} > .${chipClasses.deleteIcon}`;
diff --git a/packages/mui-codemod/src/deprecations/slider-props/index.js b/packages/mui-codemod/src/deprecations/slider-props/index.js
new file mode 100644
index 00000000000000..e49c11aa151c65
--- /dev/null
+++ b/packages/mui-codemod/src/deprecations/slider-props/index.js
@@ -0,0 +1 @@
+export { default } from './slider-props';
diff --git a/packages/mui-codemod/src/deprecations/slider-props/slider-props.js b/packages/mui-codemod/src/deprecations/slider-props/slider-props.js
new file mode 100644
index 00000000000000..056962a8b4c82a
--- /dev/null
+++ b/packages/mui-codemod/src/deprecations/slider-props/slider-props.js
@@ -0,0 +1,15 @@
+import replaceComponentsWithSlots from '../utils/replaceComponentsWithSlots';
+
+/**
+ * @param {import('jscodeshift').FileInfo} file
+ * @param {import('jscodeshift').API} api
+ */
+export default function transformer(file, api, options) {
+ const j = api.jscodeshift;
+ const root = j(file.source);
+ const printOptions = options.printOptions;
+
+ replaceComponentsWithSlots(j, { root, componentName: 'Slider' });
+
+ return root.toSource(printOptions);
+}
diff --git a/packages/mui-codemod/src/deprecations/slider-props/slider-props.test.js b/packages/mui-codemod/src/deprecations/slider-props/slider-props.test.js
new file mode 100644
index 00000000000000..b6d5682eb2a76a
--- /dev/null
+++ b/packages/mui-codemod/src/deprecations/slider-props/slider-props.test.js
@@ -0,0 +1,53 @@
+import path from 'path';
+import { expect } from 'chai';
+import { jscodeshift } from '../../../testUtils';
+import transform from './slider-props';
+import readFile from '../../util/readFile';
+
+function read(fileName) {
+ return readFile(path.join(__dirname, fileName));
+}
+
+describe('@mui/codemod', () => {
+ describe('deprecations', () => {
+ describe('slider-props', () => {
+ it('transforms props as needed', () => {
+ const actual = transform({ source: read('./test-cases/actual.js') }, { jscodeshift }, {});
+
+ const expected = read('./test-cases/expected.js');
+ expect(actual).to.equal(expected, 'The transformed version should be correct');
+ });
+
+ it('should be idempotent', () => {
+ const actual = transform({ source: read('./test-cases/expected.js') }, { jscodeshift }, {});
+
+ const expected = read('./test-cases/expected.js');
+ expect(actual).to.equal(expected, 'The transformed version should be correct');
+ });
+ });
+
+ describe('[theme] slider-props', () => {
+ it('transforms props as needed', () => {
+ const actual = transform(
+ { source: read('./test-cases/theme.actual.js') },
+ { jscodeshift },
+ { printOptions: { trailingComma: true } },
+ );
+
+ const expected = read('./test-cases/theme.expected.js');
+ expect(actual).to.equal(expected, 'The transformed version should be correct');
+ });
+
+ it('should be idempotent', () => {
+ const actual = transform(
+ { source: read('./test-cases/theme.expected.js') },
+ { jscodeshift },
+ {},
+ );
+
+ const expected = read('./test-cases/theme.expected.js');
+ expect(actual).to.equal(expected, 'The transformed version should be correct');
+ });
+ });
+ });
+});
diff --git a/packages/mui-codemod/src/deprecations/slider-props/test-cases/actual.js b/packages/mui-codemod/src/deprecations/slider-props/test-cases/actual.js
new file mode 100644
index 00000000000000..c73ad39187900b
--- /dev/null
+++ b/packages/mui-codemod/src/deprecations/slider-props/test-cases/actual.js
@@ -0,0 +1,18 @@
+import Slider from '@mui/material/Slider';
+
+
-
+
{children}
diff --git a/packages/mui-docs/src/i18n/i18n.tsx b/packages/mui-docs/src/i18n/i18n.tsx
index 037680d8e3ed01..48e628600e78df 100644
--- a/packages/mui-docs/src/i18n/i18n.tsx
+++ b/packages/mui-docs/src/i18n/i18n.tsx
@@ -1,34 +1,28 @@
import * as React from 'react';
import PropTypes from 'prop-types';
+import { deepmerge } from '@mui/utils';
+import defaultTranslations from '../translations';
-declare global {
- interface NodeRequire {
- context: (path: string, useSubdirectories: boolean, regex: RegExp) => RequireContext;
- }
-}
+const TranslationsContext = React.createContext(defaultTranslations);
-interface RequireContext {
- (req: string): string;
- keys: () => string[];
+interface TranslationsProviderProps {
+ translations?: Record;
+ children: React.ReactNode;
}
-function mapTranslations(req: RequireContext) {
- const translations: Record = {};
- req.keys().forEach((filename) => {
- const match = filename.match(/-([a-z]{2}).json$/);
-
- if (match) {
- translations[match[1]] = req(filename);
- } else {
- translations.en = req(filename);
- }
- });
- return translations;
+function TranslationsProvider({ translations = {}, children }: TranslationsProviderProps) {
+ const currentTranslations = React.useContext(TranslationsContext);
+ const mergedTranslations = React.useMemo(
+ () => deepmerge(currentTranslations, translations),
+ [currentTranslations, translations],
+ );
+ return (
+
+ {children}
+
+ );
}
-const req: RequireContext = require.context('docs/translations', false, /translations.*\.json$/);
-const translations = mapTranslations(req);
-
function getPath(obj: any, path: string): any {
if (!path || typeof path !== 'string') {
return null;
@@ -52,11 +46,12 @@ if (process.env.NODE_ENV !== 'production') {
export interface UserLanguageProviderProps {
children: React.ReactNode;
+ translations?: Translations;
defaultUserLanguage: string;
}
export function UserLanguageProvider(props: UserLanguageProviderProps) {
- const { children, defaultUserLanguage } = props;
+ const { children, translations, defaultUserLanguage } = props;
const [userLanguage, setUserLanguage] = React.useState(defaultUserLanguage);
@@ -65,7 +60,9 @@ export function UserLanguageProvider(props: UserLanguageProviderProps) {
}, [userLanguage]);
return (
- {children}
+
+ {children}
+
);
}
@@ -91,6 +88,8 @@ export interface TranslateOptions {
export function useTranslate() {
const userLanguage = useUserLanguage();
+ const translations = React.useContext(TranslationsContext);
+
return React.useMemo(
() =>
function translate(key: string, options: TranslateOptions = {}) {
@@ -116,6 +115,27 @@ export function useTranslate() {
return translation;
},
- [userLanguage],
+ [userLanguage, translations],
);
}
+
+export type Translations = { [key in string]?: string | Translations };
+
+export interface RequireContext {
+ (req: string): string;
+ keys: () => string[];
+}
+
+export function mapTranslations(req: RequireContext): Translations {
+ const result: Translations = {};
+ req.keys().forEach((filename) => {
+ const match = filename.match(/-([a-z]{2}).json$/);
+
+ if (match) {
+ result[match[1]] = req(filename);
+ } else {
+ result.en = req(filename);
+ }
+ });
+ return result;
+}
diff --git a/packages/mui-docs/src/translations/index.ts b/packages/mui-docs/src/translations/index.ts
new file mode 100644
index 00000000000000..35e867915ca8f9
--- /dev/null
+++ b/packages/mui-docs/src/translations/index.ts
@@ -0,0 +1,6 @@
+import type { Translations } from '../i18n';
+import en from './translations.json';
+
+export default {
+ en,
+} as Record;
diff --git a/packages/mui-docs/src/translations/translations.json b/packages/mui-docs/src/translations/translations.json
new file mode 100644
index 00000000000000..9b2462e0101c0f
--- /dev/null
+++ b/packages/mui-docs/src/translations/translations.json
@@ -0,0 +1,214 @@
+{
+ "adblock": "If you don't mind tech-related ads (no tracking or remarketing), and want to keep us running, please whitelist us in your blocker.",
+ "api-docs": {
+ "componentName": "Component name",
+ "componentsApi": "Components API",
+ "themeDefaultProps": "Theme default props",
+ "themeDefaultPropsDescription": "You can use
To learn more, visit the component customization page.", + "css": "CSS", + "cssComponent": "As a CSS utility, the {{name}} component also supports all
+
+
+
+
+
+
+
+ ,
+ );
+
+ expect(getByTestId('color-inherit')).to.have.class(classes.colorInherit);
+ expect(getByTestId('color-primary')).to.have.class(classes.colorPrimary);
+ expect(getByTestId('color-secondary')).to.have.class(classes.colorSecondary);
+ expect(getByTestId('color-success')).to.have.class(classes.colorSuccess);
+ expect(getByTestId('color-error')).to.have.class(classes.colorError);
+ expect(getByTestId('color-info')).to.have.class(classes.colorInfo);
+ expect(getByTestId('color-warning')).to.have.class(classes.colorWarning);
+ });
+
it('can render a text primary button', () => {
const { getByRole } = render();
const button = getByRole('button');
diff --git a/packages/mui-material/src/Button/buttonClasses.ts b/packages/mui-material/src/Button/buttonClasses.ts
index 5348573ee78d0d..d6f50aae215752 100644
--- a/packages/mui-material/src/Button/buttonClasses.ts
+++ b/packages/mui-material/src/Button/buttonClasses.ts
@@ -6,51 +6,93 @@ export interface ButtonClasses {
root: string;
/** Styles applied to the root element if `variant="text"`. */
text: string;
- /** Styles applied to the root element if `variant="text"` and `color="inherit"`. */
+ /** Styles applied to the root element if `variant="text"` and `color="inherit"`.
+ * @deprecated Combine the [.MuiButton-text](/material-ui/api/button/#button-classes-text) and [.MuiButton-colorInherit](/material-ui/api/button/#button-classes-colorInherit) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+ */
textInherit: string;
- /** Styles applied to the root element if `variant="text"` and `color="primary"`. */
+ /** Styles applied to the root element if `variant="text"` and `color="primary"`.
+ * @deprecated Combine the [.MuiButton-text](/material-ui/api/button/#button-classes-text) and [.MuiButton-colorPrimary](/material-ui/api/button/#button-classes-colorPrimary) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+ */
textPrimary: string;
- /** Styles applied to the root element if `variant="text"` and `color="secondary"`. */
+ /** Styles applied to the root element if `variant="text"` and `color="secondary"`.
+ * @deprecated Combine the [.MuiButton-text](/material-ui/api/button/#button-classes-text) and [.MuiButton-colorSecondary](/material-ui/api/button/#button-classes-colorSecondary) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+ */
textSecondary: string;
- /** Styles applied to the root element if `variant="text"` and `color="success"`. */
+ /** Styles applied to the root element if `variant="text"` and `color="success"`.
+ * @deprecated Combine the [.MuiButton-text](/material-ui/api/button/#button-classes-text) and [.MuiButton-colorSuccess](/material-ui/api/button/#button-classes-colorSuccess) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+ */
textSuccess: string;
- /** Styles applied to the root element if `variant="text"` and `color="error"`. */
+ /** Styles applied to the root element if `variant="text"` and `color="error"`.
+ * @deprecated Combine the [.MuiButton-text](/material-ui/api/button/#button-classes-text) and [.MuiButton-colorError](/material-ui/api/button/#button-classes-colorError) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+ */
textError: string;
- /** Styles applied to the root element if `variant="text"` and `color="info"`. */
+ /** Styles applied to the root element if `variant="text"` and `color="info"`.
+ * @deprecated Combine the [.MuiButton-text](/material-ui/api/button/#button-classes-text) and [.MuiButton-colorInfo](/material-ui/api/button/#button-classes-colorInfo) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+ */
textInfo: string;
- /** Styles applied to the root element if `variant="text"` and `color="warning"`. */
+ /** Styles applied to the root element if `variant="text"` and `color="warning"`.
+ * @deprecated Combine the [.MuiButton-text](/material-ui/api/button/#button-classes-text) and [.MuiButton-colorWarning](/material-ui/api/button/#button-classes-colorWarning) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+ */
textWarning: string;
/** Styles applied to the root element if `variant="outlined"`. */
outlined: string;
- /** Styles applied to the root element if `variant="outlined"` and `color="inherit"`. */
+ /** Styles applied to the root element if `variant="outlined"` and `color="inherit"`.
+ * @deprecated Combine the [.MuiButton-outlined](/material-ui/api/button/#button-classes-outlined) and [.MuiButton-colorInherit](/material-ui/api/button/#button-classes-colorInherit) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+ */
outlinedInherit: string;
- /** Styles applied to the root element if `variant="outlined"` and `color="primary"`. */
+ /** Styles applied to the root element if `variant="outlined"` and `color="primary"`.
+ * @deprecated Combine the [.MuiButton-outlined](/material-ui/api/button/#button-classes-outlined) and [.MuiButton-colorPrimary](/material-ui/api/button/#button-classes-colorPrimary) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+ */
outlinedPrimary: string;
- /** Styles applied to the root element if `variant="outlined"` and `color="secondary"`. */
+ /** Styles applied to the root element if `variant="outlined"` and `color="secondary"`.
+ * @deprecated Combine the [.MuiButton-outlined](/material-ui/api/button/#button-classes-outlined) and [.MuiButton-colorSecondary](/material-ui/api/button/#button-classes-colorSecondary) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+ */
outlinedSecondary: string;
- /** Styles applied to the root element if `variant="outlined"` and `color="success"`. */
+ /** Styles applied to the root element if `variant="outlined"` and `color="success"`.
+ * @deprecated Combine the [.MuiButton-outlined](/material-ui/api/button/#button-classes-outlined) and [.MuiButton-colorSuccess](/material-ui/api/button/#button-classes-colorSuccess) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+ */
outlinedSuccess: string;
- /** Styles applied to the root element if `variant="outlined"` and `color="error"`. */
+ /** Styles applied to the root element if `variant="outlined"` and `color="error"`.
+ * @deprecated Combine the [.MuiButton-outlined](/material-ui/api/button/#button-classes-outlined) and [.MuiButton-colorError](/material-ui/api/button/#button-classes-colorError) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+ */
outlinedError: string;
- /** Styles applied to the root element if `variant="outlined"` and `color="info"`. */
+ /** Styles applied to the root element if `variant="outlined"` and `color="info"`.
+ * @deprecated Combine the [.MuiButton-outlined](/material-ui/api/button/#button-classes-outlined) and [.MuiButton-colorInfo](/material-ui/api/button/#button-classes-colorInfo) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+ */
outlinedInfo: string;
- /** Styles applied to the root element if `variant="outlined"` and `color="warning"`. */
+ /** Styles applied to the root element if `variant="outlined"` and `color="warning"`.
+ * @deprecated Combine the [.MuiButton-outlined](/material-ui/api/button/#button-classes-outlined) and [.MuiButton-colorWarning](/material-ui/api/button/#button-classes-colorWarning) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+ */
outlinedWarning: string;
/** Styles applied to the root element if `variant="contained"`. */
contained: string;
- /** Styles applied to the root element if `variant="contained"` and `color="inherit"`. */
+ /** Styles applied to the root element if `variant="contained"` and `color="inherit"`.
+ * @deprecated Combine the [.MuiButton-contained](/material-ui/api/button/#button-classes-contained) and [.MuiButton-colorInherit](/material-ui/api/button/#button-classes-colorInherit) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+ */
containedInherit: string;
- /** Styles applied to the root element if `variant="contained"` and `color="primary"`. */
+ /** Styles applied to the root element if `variant="contained"` and `color="primary"`.
+ * @deprecated Combine the [.MuiButton-contained](/material-ui/api/button/#button-classes-contained) and [.MuiButton-colorPrimary](/material-ui/api/button/#button-classes-colorPrimary) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+ */
containedPrimary: string;
- /** Styles applied to the root element if `variant="contained"` and `color="secondary"`. */
+ /** Styles applied to the root element if `variant="contained"` and `color="secondary"`.
+ * @deprecated Combine the [.MuiButton-contained](/material-ui/api/button/#button-classes-contained) and [.MuiButton-colorSecondary](/material-ui/api/button/#button-classes-colorSecondary) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+ */
containedSecondary: string;
- /** Styles applied to the root element if `variant="contained"` and `color="success"`. */
+ /** Styles applied to the root element if `variant="contained"` and `color="success"`.
+ * @deprecated Combine the [.MuiButton-contained](/material-ui/api/button/#button-classes-contained) and [.MuiButton-colorSuccess](/material-ui/api/button/#button-classes-colorSuccess) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+ */
containedSuccess: string;
- /** Styles applied to the root element if `variant="contained"` and `color="info"`. */
+ /** Styles applied to the root element if `variant="contained"` and `color="info"`.
+ * @deprecated Combine the [.MuiButton-contained](/material-ui/api/button/#button-classes-contained) and [.MuiButton-colorInfo](/material-ui/api/button/#button-classes-colorInfo) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+ */
containedInfo: string;
- /** Styles applied to the root element if `variant="contained"` and `color="error"`. */
+ /** Styles applied to the root element if `variant="contained"` and `color="error"`.
+ * @deprecated Combine the [.MuiButton-contained](/material-ui/api/button/#button-classes-contained) and [.MuiButton-colorError](/material-ui/api/button/#button-classes-colorError) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+ */
containedError: string;
- /** Styles applied to the root element if `variant="contained"` and `color="warning"`. */
+ /** Styles applied to the root element if `variant="contained"` and `color="warning"`.
+ * @deprecated Combine the [.MuiButton-contained](/material-ui/api/button/#button-classes-contained) and [.MuiButton-colorWarning](/material-ui/api/button/#button-classes-colorWarning) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+ */
containedWarning: string;
/** Styles applied to the root element if `disableElevation={true}`. */
disableElevation: string;
@@ -60,23 +102,41 @@ export interface ButtonClasses {
disabled: string;
/** Styles applied to the root element if `color="inherit"`. */
colorInherit: string;
- /** Styles applied to the root element if `size="small"` and `variant="text"`. */
+ /** Styles applied to the root element if `size="small"` and `variant="text"`.
+ * @deprecated Combine the [.MuiButton-sizeSmall](/material-ui/api/button/#button-classes-sizeSmall) and [.MuiButton-text](/material-ui/api/button/#button-classes-text) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+ */
textSizeSmall: string;
- /** Styles applied to the root element if `size="medium"` and `variant="text"`. */
+ /** Styles applied to the root element if `size="medium"` and `variant="text"`.
+ * @deprecated Combine the [.MuiButton-sizeMedium](/material-ui/api/button/#button-classes-sizeMedium) and [.MuiButton-text](/material-ui/api/button/#button-classes-text) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+ */
textSizeMedium: string;
- /** Styles applied to the root element if `size="large"` and `variant="text"`. */
+ /** Styles applied to the root element if `size="large"` and `variant="text"`.
+ * @deprecated Combine the [.MuiButton-sizeLarge](/material-ui/api/button/#button-classes-sizeLarge) and [.MuiButton-text](/material-ui/api/button/#button-classes-text) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+ */
textSizeLarge: string;
- /** Styles applied to the root element if `size="small"` and `variant="outlined"`. */
+ /** Styles applied to the root element if `size="small"` and `variant="outlined"`.
+ * @deprecated Combine the [.MuiButton-sizeSmall](/material-ui/api/button/#button-classes-sizeSmall) and [.MuiButton-outlined](/material-ui/api/button/#button-classes-outlined) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+ */
outlinedSizeSmall: string;
- /** Styles applied to the root element if `size="medium"` and `variant="outlined"`. */
+ /** Styles applied to the root element if `size="medium"` and `variant="outlined"`.
+ * @deprecated Combine the [.MuiButton-sizeMedium](/material-ui/api/button/#button-classes-sizeMedium) and [.MuiButton-outlined](/material-ui/api/button/#button-classes-outlined) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+ */
outlinedSizeMedium: string;
- /** Styles applied to the root element if `size="large"` and `variant="outlined"`. */
+ /** Styles applied to the root element if `size="large"` and `variant="outlined"`.
+ * @deprecated Combine the [.MuiButton-sizeLarge](/material-ui/api/button/#button-classes-sizeLarge) and [.MuiButton-outlined](/material-ui/api/button/#button-classes-outlined) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+ */
outlinedSizeLarge: string;
- /** Styles applied to the root element if `size="small"` and `variant="contained"`. */
+ /** Styles applied to the root element if `size="small"` and `variant="contained"`.
+ * @deprecated Combine the [.MuiButton-sizeSmall](/material-ui/api/button/#button-classes-sizeSmall) and [.MuiButton-contained](/material-ui/api/button/#button-classes-contained) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+ */
containedSizeSmall: string;
- /** Styles applied to the root element if `size="medium"` and `variant="contained"`. */
+ /** Styles applied to the root element if `size="medium"` and `variant="contained"`.
+ * @deprecated Combine the [.MuiButton-sizeMedium](/material-ui/api/button/#button-classes-sizeMedium) and [.MuiButton-contained](/material-ui/api/button/#button-classes-contained) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+ */
containedSizeMedium: string;
- /** Styles applied to the root element if `size="large"` and `variant="contained"`. */
+ /** Styles applied to the root element if `size="large"` and `variant="contained"`.
+ * @deprecated Combine the [.MuiButton-sizeLarge](/material-ui/api/button/#button-classes-sizeLarge) and [.MuiButton-contained](/material-ui/api/button/#button-classes-contained) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+ */
containedSizeLarge: string;
/** Styles applied to the root element if `size="small"`. */
sizeSmall: string;
@@ -86,16 +146,36 @@ export interface ButtonClasses {
sizeLarge: string;
/** Styles applied to the root element if `fullWidth={true}`. */
fullWidth: string;
+ /** Styles applied to the icon element if supplied */
+ icon: string;
/** Styles applied to the startIcon element if supplied. */
startIcon: string;
/** Styles applied to the endIcon element if supplied. */
endIcon: string;
- /** Styles applied to the icon element if supplied and `size="small"`. */
+ /** Styles applied to the icon element if supplied and `size="small"`.
+ * @deprecated Combine the [.MuiButton-icon](/material-ui/api/button/#button-classes-icon) and [.MuiButtonSizeSmall](/material-ui/api/button/#button-classes-sizeSmall) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+ */
iconSizeSmall: string;
- /** Styles applied to the icon element if supplied and `size="medium"`. */
+ /** Styles applied to the icon element if supplied and `size="medium"`.
+ * @deprecated Combine the [.MuiButton-icon](/material-ui/api/button/#button-classes-icon) and [.MuiButtonSizeMedium](/material-ui/api/button/#button-classes-sizeMedium) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+ */
iconSizeMedium: string;
- /** Styles applied to the icon element if supplied and `size="large"`. */
+ /** Styles applied to the icon element if supplied and `size="large"`.
+ * @deprecated Combine the [.MuiButton-icon](/material-ui/api/button/#button-classes-icon) and [.MuiButtonSizeLarge](/material-ui/api/button/#button-classes-sizeLarge) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+ */
iconSizeLarge: string;
+ /** Styles applied to the root element if `color="primary"`. */
+ colorPrimary: string;
+ /** Styles applied to the root element if `color="secondary"`. */
+ colorSecondary: string;
+ /** Styles applied to the root element if `color="success"`. */
+ colorSuccess: string;
+ /** Styles applied to the root element if `color="error"`. */
+ colorError: string;
+ /** Styles applied to the root element if `color="info"`. */
+ colorInfo: string;
+ /** Styles applied to the root element if `color="warning"`. */
+ colorWarning: string;
}
export type ButtonClassKey = keyof ButtonClasses;
@@ -134,6 +214,12 @@ const buttonClasses: ButtonClasses = generateUtilityClasses('MuiButton', [
'focusVisible',
'disabled',
'colorInherit',
+ 'colorPrimary',
+ 'colorSecondary',
+ 'colorSuccess',
+ 'colorError',
+ 'colorInfo',
+ 'colorWarning',
'textSizeSmall',
'textSizeMedium',
'textSizeLarge',
@@ -149,6 +235,7 @@ const buttonClasses: ButtonClasses = generateUtilityClasses('MuiButton', [
'fullWidth',
'startIcon',
'endIcon',
+ 'icon',
'iconSizeSmall',
'iconSizeMedium',
'iconSizeLarge',
diff --git a/packages/mui-material/src/Chip/chipClasses.ts b/packages/mui-material/src/Chip/chipClasses.ts
index bb4f7b105f0d77..48efe3fbe3cea6 100644
--- a/packages/mui-material/src/Chip/chipClasses.ts
+++ b/packages/mui-material/src/Chip/chipClasses.ts
@@ -24,71 +24,123 @@ export interface ChipClasses {
disabled: string;
/** Styles applied to the root element if `onClick` is defined or `clickable={true}`. */
clickable: string;
- /** Styles applied to the root element if `onClick` and `color="primary"` is defined or `clickable={true}`. */
+ /** Styles applied to the root element if `onClick` and `color="primary"` is defined or `clickable={true}`.
+ * @deprecated Combine the [.MuiChip-clickable](/material-ui/api/chip/#chip-classes-clickable) and [.MuiChip-colorPrimary](/material-ui/api/chip/#chip-classes-colorPrimary) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+ */
clickableColorPrimary: string;
- /** Styles applied to the root element if `onClick` and `color="secondary"` is defined or `clickable={true}`. */
+ /** Styles applied to the root element if `onClick` and `color="secondary"` is defined or `clickable={true}`.
+ * @deprecated Combine the [.MuiChip-clickable](/material-ui/api/chip/#chip-classes-clickable) and [.MuiChip-colorSecondary](/material-ui/api/chip/#chip-classes-colorSecondary) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+ */
clickableColorSecondary: string;
/** Styles applied to the root element if `onDelete` is defined. */
deletable: string;
- /** Styles applied to the root element if `onDelete` and `color="primary"` is defined. */
+ /** Styles applied to the root element if `onDelete` and `color="primary"` is defined.
+ * @deprecated Combine the [.MuiChip-deletable](/material-ui/api/chip/#chip-classes-deletable) and [.MuiChip-colorPrimary](/material-ui/api/chip/#chip-classes-colorPrimary) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+ */
deletableColorPrimary: string;
- /** Styles applied to the root element if `onDelete` and `color="secondary"` is defined. */
+ /** Styles applied to the root element if `onDelete` and `color="secondary"` is defined.
+ * @deprecated Combine the [.MuiChip-deletable](/material-ui/api/chip/#chip-classes-deletable) and [.MuiChip-colorSecondary](/material-ui/api/chip/#chip-classes-colorSecondary) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+ */
deletableColorSecondary: string;
/** Styles applied to the root element if `variant="outlined"`. */
outlined: string;
/** Styles applied to the root element if `variant="filled"`. */
filled: string;
- /** Styles applied to the root element if `variant="outlined"` and `color="primary"`. */
+ /** Styles applied to the root element if `variant="outlined"` and `color="primary"`.
+ * @deprecated Combine the [.MuiChip-outlined](/material-ui/api/chip/#chip-classes-outlined) and [.MuiChip-colorPrimary](/material-ui/api/chip/#chip-classes-colorPrimary) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+ */
outlinedPrimary: string;
- /** Styles applied to the root element if `variant="outlined"` and `color="secondary"`. */
+ /** Styles applied to the root element if `variant="outlined"` and `color="secondary"`.
+ * @deprecated Combine the [.MuiChip-outlined](/material-ui/api/chip/#chip-classes-outlined) and [.MuiChip-colorSecondary](/material-ui/api/chip/#chip-classes-colorSecondary) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+ */
outlinedSecondary: string;
- /** Styles applied to the root element if `variant="filled"` and `color="primary"`. */
+ /** Styles applied to the root element if `variant="filled"` and `color="primary"`.
+ * @deprecated Combine the [.MuiChip-filled](/material-ui/api/chip/#chip-classes-filled) and [.MuiChip-colorPrimary](/material-ui/api/chip/#chip-classes-colorPrimary) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+ */
filledPrimary: string;
- /** Styles applied to the root element if `variant="filled"` and `color="secondary"`. */
+ /** Styles applied to the root element if `variant="filled"` and `color="secondary"`.
+ * @deprecated Combine the [.MuiChip-filled](/material-ui/api/chip/#chip-classes-filled) and [.MuiChip-colorSecondary](/material-ui/api/chip/#chip-classes-colorSecondary) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+ */
filledSecondary: string;
/** Styles applied to the avatar element. */
avatar: string;
- /** Styles applied to the avatar element if `size="small"`. */
+ /** Styles applied to the avatar element if `size="small"`.
+ * @deprecated Combine the [.MuiChip-avatar](/material-ui/api/chip/#chip-classes-avatar) and [.MuiChip-sizeSmall](/material-ui/api/chip/#chip-classes-sizeSmall) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+ */
avatarSmall: string;
- /** Styles applied to the avatar element if `size="medium"`. */
+ /** Styles applied to the avatar element if `size="medium"`.
+ * @deprecated Combine the [.MuiChip-avatar](/material-ui/api/chip/#chip-classes-avatar) and [.MuiChip-sizeMedium](/material-ui/api/chip/#chip-classes-sizeMedium) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+ */
avatarMedium: string;
- /** Styles applied to the avatar element if `color="primary"`. */
+ /** Styles applied to the avatar element if `color="primary"`.
+ * @deprecated Combine the [.MuiChip-avatar](/material-ui/api/chip/#chip-classes-avatar) and [.MuiChip-colorPrimary](/material-ui/api/chip/#chip-classes-colorPrimary) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+ */
avatarColorPrimary: string;
- /** Styles applied to the avatar element if `color="secondary"`. */
+ /** Styles applied to the avatar element if `color="secondary"`.
+ * @deprecated Combine the [.MuiChip-avatar](/material-ui/api/chip/#chip-classes-avatar) and [.MuiChip-colorSecondary](/material-ui/api/chip/#chip-classes-colorSecondary) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+ */
avatarColorSecondary: string;
/** Styles applied to the icon element. */
icon: string;
- /** Styles applied to the icon element if `size="small"`. */
+ /** Styles applied to the icon element if `size="small"`.
+ * @deprecated Combine the [.MuiChip-icon](/material-ui/api/chip/#chip-classes-icon) and [.MuiChip-sizeSmall](/material-ui/api/chip/#chip-classes-sizeSmall) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+ */
iconSmall: string;
- /** Styles applied to the icon element if `size="medium"`. */
+ /** Styles applied to the icon element if `size="medium"`.
+ * @deprecated Combine the [.MuiChip-icon](/material-ui/api/chip/#chip-classes-icon) and [.MuiChip-sizeMedium](/material-ui/api/chip/#chip-classes-sizeMedium) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+ */
iconMedium: string;
- /** Styles applied to the icon element if `color="primary"`. */
+ /** Styles applied to the icon element if `color="primary"`.
+ * @deprecated Combine the [.MuiChip-icon](/material-ui/api/chip/#chip-classes-icon) and [.MuiChip-colorPrimary](/material-ui/api/chip/#chip-classes-colorPrimary) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+ */
iconColorPrimary: string;
- /** Styles applied to the icon element if `color="secondary"`. */
+ /** Styles applied to the icon element if `color="secondary"`.
+ * @deprecated Combine the [.MuiChip-icon](/material-ui/api/chip/#chip-classes-icon) and [.MuiChip-colorSecondary](/material-ui/api/chip/#chip-classes-colorSecondary) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+ */
iconColorSecondary: string;
/** Styles applied to the label `span` element. */
label: string;
- /** Styles applied to the label `span` element if `size="small"`. */
+ /** Styles applied to the label `span` element if `size="small"`.
+ * @deprecated Combine the [.MuiChip-label](/material-ui/api/chip/#chip-classes-label) and [.MuiChip-sizeSmall](/material-ui/api/chip/#chip-classes-sizeSmall) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+ */
labelSmall: string;
- /** Styles applied to the label `span` element if `size="medium"`. */
+ /** Styles applied to the label `span` element if `size="medium"`.
+ * @deprecated Combine the [.MuiChip-label](/material-ui/api/chip/#chip-classes-label) and [.MuiChip-sizeMedium](/material-ui/api/chip/#chip-classes-sizeMedium) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+ */
labelMedium: string;
/** Styles applied to the deleteIcon element. */
deleteIcon: string;
- /** Styles applied to the deleteIcon element if `size="small"`. */
+ /** Styles applied to the deleteIcon element if `size="small"`.
+ * @deprecated Combine the [.MuiChip-deleteIcon](/material-ui/api/chip/#chip-classes-deleteIcon) and [.MuiChip-sizeSmall](/material-ui/api/chip/#chip-classes-sizeSmall) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+ */
deleteIconSmall: string;
- /** Styles applied to the deleteIcon element if `size="medium"`. */
+ /** Styles applied to the deleteIcon element if `size="medium"`.
+ * @deprecated Combine the [.MuiChip-deleteIcon](/material-ui/api/chip/#chip-classes-deleteIcon) and [.MuiChip-sizeMedium](/material-ui/api/chip/#chip-classes-sizeMedium) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+ */
deleteIconMedium: string;
- /** Styles applied to the deleteIcon element if `color="primary"` and `variant="filled"`. */
+ /** Styles applied to the deleteIcon element if `color="primary"`.
+ * @deprecated Combine the [.MuiChip-deleteIcon](/material-ui/api/chip/#chip-classes-deleteIcon) and [.MuiChip-colorPrimary](/material-ui/api/chip/#chip-classes-colorPrimary) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+ */
deleteIconColorPrimary: string;
- /** Styles applied to the deleteIcon element if `color="secondary"` and `variant="filled"`. */
+ /** Styles applied to the deleteIcon element if `color="secondary"`.
+ * @deprecated Combine the [.MuiChip-deleteIcon](/material-ui/api/chip/#chip-classes-deleteIcon) and [.MuiChip-colorSecondary](/material-ui/api/chip/#chip-classes-colorSecondary) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+ */
deleteIconColorSecondary: string;
- /** Styles applied to the deleteIcon element if `color="primary"` and `variant="outlined"`. */
+ /** Styles applied to the deleteIcon element if `color="primary"` and `variant="outlined"`.
+ * @deprecated Combine the [.MuiChip-deleteIcon](/material-ui/api/chip/#chip-classes-deleteIcon) , [.MuiChip-outlined](/material-ui/api/chip/#chip-classes-outlined) and [.MuiChip-colorPrimary](/material-ui/api/chip/#chip-classes-colorPrimary) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+ */
deleteIconOutlinedColorPrimary: string;
- /** Styles applied to the deleteIcon element if `color="secondary"` and `variant="outlined"`. */
+ /** Styles applied to the deleteIcon element if `color="secondary"` and `variant="outlined"`.
+ * @deprecated Combine the [.MuiChip-deleteIcon](/material-ui/api/chip/#chip-classes-deleteIcon) , [.MuiChip-outlined](/material-ui/api/chip/#chip-classes-outlined) and [.MuiChip-colorSecondary](/material-ui/api/chip/#chip-classes-colorSecondary) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+ */
deleteIconOutlinedColorSecondary: string;
- /** Styles applied to the deleteIcon element if `color="primary"` and `variant="filled"`. */
+ /** Styles applied to the deleteIcon element if `color="primary"` and `variant="filled"`.
+ * @deprecated Combine the [.MuiChip-deleteIcon](/material-ui/api/chip/#chip-classes-deleteIcon) , [.MuiChip-filled](/material-ui/api/chip/#chip-classes-filled) and [.MuiChip-colorPrimary](/material-ui/api/chip/#chip-classes-colorPrimary) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+ */
deleteIconFilledColorPrimary: string;
- /** Styles applied to the deleteIcon element if `color="secondary"` and `variant="filled"`. */
+ /** Styles applied to the deleteIcon element if `color="secondary"` and `variant="filled"`.
+ * @deprecated Combine the [.MuiChip-deleteIcon](/material-ui/api/chip/#chip-classes-deleteIcon) , [.MuiChip-filled](/material-ui/api/chip/#chip-classes-filled) and [.MuiChip-colorSecondary](/material-ui/api/chip/#chip-classes-colorSecondary) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+ */
deleteIconFilledColorSecondary: string;
/** State class applied to the root element if keyboard focused. */
focusVisible: string;
diff --git a/packages/mui-material/src/InputBase/InputBase.js b/packages/mui-material/src/InputBase/InputBase.js
index cbb51b1ed0f844..970dd62ab36b2c 100644
--- a/packages/mui-material/src/InputBase/InputBase.js
+++ b/packages/mui-material/src/InputBase/InputBase.js
@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
import clsx from 'clsx';
import elementTypeAcceptingRef from '@mui/utils/elementTypeAcceptingRef';
import refType from '@mui/utils/refType';
-import MuiError from '@mui-internal/babel-macros/MuiError.macro';
+import MuiError from '@mui/internal-babel-macros/MuiError.macro';
import { TextareaAutosize } from '@mui/base';
import { isHostComponent } from '@mui/base/utils';
import composeClasses from '@mui/utils/composeClasses';
diff --git a/packages/mui-material/src/Select/SelectInput.js b/packages/mui-material/src/Select/SelectInput.js
index cc8646d07b9012..54741070da1a85 100644
--- a/packages/mui-material/src/Select/SelectInput.js
+++ b/packages/mui-material/src/Select/SelectInput.js
@@ -3,7 +3,7 @@ import * as React from 'react';
import { isFragment } from 'react-is';
import PropTypes from 'prop-types';
import clsx from 'clsx';
-import MuiError from '@mui-internal/babel-macros/MuiError.macro';
+import MuiError from '@mui/internal-babel-macros/MuiError.macro';
import composeClasses from '@mui/utils/composeClasses';
import useId from '@mui/utils/useId';
import refType from '@mui/utils/refType';
diff --git a/packages/mui-material/src/Slider/Slider.d.ts b/packages/mui-material/src/Slider/Slider.d.ts
index bbc205f652527e..e6ac5223f9302b 100644
--- a/packages/mui-material/src/Slider/Slider.d.ts
+++ b/packages/mui-material/src/Slider/Slider.d.ts
@@ -46,8 +46,7 @@ export interface SliderOwnProps {
/**
* The components used for each slot inside.
*
- * This prop is an alias for the `slots` prop.
- * It's recommended to use the `slots` prop instead.
+ * @deprecated use the `slots` prop instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
*
* @default {}
*/
@@ -65,8 +64,7 @@ export interface SliderOwnProps {
* The extra props for the slot components.
* You can override the existing props or add new ones.
*
- * This prop is an alias for the `slotProps` prop.
- * It's recommended to use the `slotProps` prop instead, as `componentsProps` will be deprecated in the future.
+ * @deprecated use the `slotProps` prop instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
*
* @default {}
*/
diff --git a/packages/mui-material/src/Slider/Slider.js b/packages/mui-material/src/Slider/Slider.js
index 5b4e386af1f6d8..42b1c83a4757cf 100644
--- a/packages/mui-material/src/Slider/Slider.js
+++ b/packages/mui-material/src/Slider/Slider.js
@@ -762,8 +762,7 @@ Slider.propTypes /* remove-proptypes */ = {
/**
* The components used for each slot inside.
*
- * This prop is an alias for the `slots` prop.
- * It's recommended to use the `slots` prop instead.
+ * @deprecated use the `slots` prop instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
*
* @default {}
*/
@@ -781,8 +780,7 @@ Slider.propTypes /* remove-proptypes */ = {
* The extra props for the slot components.
* You can override the existing props or add new ones.
*
- * This prop is an alias for the `slotProps` prop.
- * It's recommended to use the `slotProps` prop instead, as `componentsProps` will be deprecated in the future.
+ * @deprecated use the `slotProps` prop instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
*
* @default {}
*/
diff --git a/packages/mui-material/src/styles/createPalette.js b/packages/mui-material/src/styles/createPalette.js
index 4d6bf554415986..949c41e7a8d6e2 100644
--- a/packages/mui-material/src/styles/createPalette.js
+++ b/packages/mui-material/src/styles/createPalette.js
@@ -1,5 +1,5 @@
import deepmerge from '@mui/utils/deepmerge';
-import MuiError from '@mui-internal/babel-macros/MuiError.macro';
+import MuiError from '@mui/internal-babel-macros/MuiError.macro';
import { darken, getContrastRatio, lighten } from '@mui/system/colorManipulator';
import common from '../colors/common';
import grey from '../colors/grey';
diff --git a/packages/mui-material/src/styles/createTheme.js b/packages/mui-material/src/styles/createTheme.js
index da3850cf994703..b078c0bc355762 100644
--- a/packages/mui-material/src/styles/createTheme.js
+++ b/packages/mui-material/src/styles/createTheme.js
@@ -3,7 +3,7 @@ import styleFunctionSx, {
unstable_defaultSxConfig as defaultSxConfig,
} from '@mui/system/styleFunctionSx';
import systemCreateTheme from '@mui/system/createTheme';
-import MuiError from '@mui-internal/babel-macros/MuiError.macro';
+import MuiError from '@mui/internal-babel-macros/MuiError.macro';
import generateUtilityClass from '@mui/utils/generateUtilityClass';
import createMixins from './createMixins';
import createPalette from './createPalette';
diff --git a/packages/mui-material/src/styles/index.js b/packages/mui-material/src/styles/index.js
index 34ea0230b89a82..42e3a789b6c13c 100644
--- a/packages/mui-material/src/styles/index.js
+++ b/packages/mui-material/src/styles/index.js
@@ -1,5 +1,5 @@
'use client';
-import MuiError from '@mui-internal/babel-macros/MuiError.macro';
+import MuiError from '@mui/internal-babel-macros/MuiError.macro';
export { default as THEME_ID } from './identifier';
export { default as adaptV4Theme } from './adaptV4Theme';
diff --git a/packages/mui-material/src/styles/makeStyles.js b/packages/mui-material/src/styles/makeStyles.js
index a678001a3309e2..380bbc39f5a8c8 100644
--- a/packages/mui-material/src/styles/makeStyles.js
+++ b/packages/mui-material/src/styles/makeStyles.js
@@ -1,4 +1,4 @@
-import MuiError from '@mui-internal/babel-macros/MuiError.macro';
+import MuiError from '@mui/internal-babel-macros/MuiError.macro';
export default function makeStyles() {
throw new MuiError(
diff --git a/packages/mui-material/src/styles/responsiveFontSizes.js b/packages/mui-material/src/styles/responsiveFontSizes.js
index acdb59992c69a4..fe0a5a6eda7d4f 100644
--- a/packages/mui-material/src/styles/responsiveFontSizes.js
+++ b/packages/mui-material/src/styles/responsiveFontSizes.js
@@ -1,4 +1,4 @@
-import MuiError from '@mui-internal/babel-macros/MuiError.macro';
+import MuiError from '@mui/internal-babel-macros/MuiError.macro';
import { isUnitless, convertLength, responsiveProperty, alignProperty, fontGrid } from './cssUtils';
export default function responsiveFontSizes(themeInput, options = {}) {
diff --git a/packages/mui-material/src/styles/withStyles.js b/packages/mui-material/src/styles/withStyles.js
index e4170cd1ae94c5..b5064fae0a4d51 100644
--- a/packages/mui-material/src/styles/withStyles.js
+++ b/packages/mui-material/src/styles/withStyles.js
@@ -1,4 +1,4 @@
-import MuiError from '@mui-internal/babel-macros/MuiError.macro';
+import MuiError from '@mui/internal-babel-macros/MuiError.macro';
export default function withStyles() {
throw new MuiError(
diff --git a/packages/mui-material/src/styles/withTheme.js b/packages/mui-material/src/styles/withTheme.js
index 83ee107b6adf55..1b24aa0c8feeb8 100644
--- a/packages/mui-material/src/styles/withTheme.js
+++ b/packages/mui-material/src/styles/withTheme.js
@@ -1,4 +1,4 @@
-import MuiError from '@mui-internal/babel-macros/MuiError.macro';
+import MuiError from '@mui/internal-babel-macros/MuiError.macro';
export default function withTheme() {
throw new MuiError(
diff --git a/packages/mui-material/test/typescript/color-palette-prop.spec.tsx b/packages/mui-material/test/typescript/color-palette-prop.spec.tsx
index 0b3cb37b90600a..0e8abd6b6001a9 100644
--- a/packages/mui-material/test/typescript/color-palette-prop.spec.tsx
+++ b/packages/mui-material/test/typescript/color-palette-prop.spec.tsx
@@ -1,5 +1,4 @@
import * as React from 'react';
-import TimelineDot from '@mui/lab/TimelineDot';
import {
Badge,
Button,
@@ -39,7 +38,6 @@ function TestBaseColorPaletteProp() {
void>>();
-
-function onCurrentTabStorageChange(key: string, handler: () => void) {
- let listeners = currentTabChangeListeners.get(key);
-
- if (!listeners) {
- listeners = new Set();
- currentTabChangeListeners.set(key, listeners);
- }
-
- listeners.add(handler);
-}
-
-function offCurrentTabStorageChange(key: string, handler: () => void) {
- const listeners = currentTabChangeListeners.get(key);
- if (!listeners) {
- return;
- }
-
- listeners.delete(handler);
-
- if (listeners.size === 0) {
- currentTabChangeListeners.delete(key);
- }
-}
-
-function emitCurrentTabStorageChange(key: string) {
- const listeners = currentTabChangeListeners.get(key);
- if (listeners) {
- listeners.forEach((listener) => listener());
- }
-}
-
-function subscribe(area: Storage, key: string, cb: () => void): () => void {
- const storageHandler = (event: StorageEvent) => {
- if (event.storageArea === area && event.key === key) {
- cb();
- }
- };
- window.addEventListener('storage', storageHandler);
- onCurrentTabStorageChange(key, cb);
- return () => {
- window.removeEventListener('storage', storageHandler);
- offCurrentTabStorageChange(key, cb);
- };
-}
-
-function getSnapshot(area: Storage, key: string): string | null {
- return area.getItem(key);
-}
-
-function setValue(area: Storage, key: string, value: string | null) {
- if (typeof window !== 'undefined') {
- if (value === null) {
- area.removeItem(key);
- } else {
- area.setItem(key, String(value));
- }
- emitCurrentTabStorageChange(key);
- }
-}
-
-type Initializer = () => T;
-
-type UseStorageStateHookResult = [T, React.Dispatch>];
-
-function useLocalStorageStateServer(
- key: string | null,
- initializer: string | Initializer,
-): UseStorageStateHookResult;
-function useLocalStorageStateServer(
- key: string | null,
- initializer?: string | null | Initializer,
-): UseStorageStateHookResult;
-function useLocalStorageStateServer(
- key: string | null,
- initializer: string | null | Initializer = null,
-): UseStorageStateHookResult | UseStorageStateHookResult {
- const [initialValue] = React.useState(initializer);
- return [initialValue, () => {}];
-}
-
-/**
- * Sync state to local storage so that it persists through a page refresh. Usage is
- * similar to useState except we pass in a storage key so that we can default
- * to that value on page load instead of the specified initial value.
- *
- * Since the storage API isn't available in server-rendering environments, we
- * return initialValue during SSR and hydration.
- *
- * Things this hook does different from existing solutions:
- * - SSR-capable: it shows initial value during SSR and hydration, but immediately
- * initializes when clientside mounted.
- * - Sync state across tabs: When another tab changes the value in the storage area, the
- * current tab follows suit.
- */
-function useLocalStorageStateBrowser(
- key: string | null,
- initializer: string | Initializer,
-): UseStorageStateHookResult;
-function useLocalStorageStateBrowser(
- key: string | null,
- initializer?: string | null | Initializer,
-): UseStorageStateHookResult;
-function useLocalStorageStateBrowser(
- key: string | null,
- initializer: string | null | Initializer = null,
-): UseStorageStateHookResult | UseStorageStateHookResult {
- const [initialValue] = React.useState(initializer);
- const area = window.localStorage;
- const subscribeKey = React.useCallback(
- (cb: () => void) => (key ? subscribe(area, key, cb) : NOOP),
- [area, key],
- );
- const getKeySnapshot = React.useCallback(
- () => (key && getSnapshot(area, key)) ?? initialValue,
- [area, initialValue, key],
- );
- const getKeyServerSnapshot = React.useCallback(() => initialValue, [initialValue]);
-
- const storedValue = React.useSyncExternalStore(
- subscribeKey,
- getKeySnapshot,
- getKeyServerSnapshot,
- );
-
- const setStoredValue = React.useCallback(
- (value: React.SetStateAction) => {
- if (key) {
- const valueToStore = value instanceof Function ? value(storedValue) : value;
- setValue(area, key, valueToStore);
- }
- },
- [area, key, storedValue],
- );
-
- const [nonStoredValue, setNonStoredValue] = React.useState(initialValue);
-
- if (!key) {
- return [nonStoredValue, setNonStoredValue];
- }
-
- return [storedValue, setStoredValue];
-}
-
-export default typeof window === 'undefined'
- ? useLocalStorageStateServer
- : useLocalStorageStateBrowser;
diff --git a/packages/mui-utils/src/useTimeout/useTimeout.ts b/packages/mui-utils/src/useTimeout/useTimeout.ts
index 72a1bdedcf4a54..3f7b1be63810da 100644
--- a/packages/mui-utils/src/useTimeout/useTimeout.ts
+++ b/packages/mui-utils/src/useTimeout/useTimeout.ts
@@ -7,7 +7,7 @@ export class Timeout {
return new Timeout();
}
- currentId: number = 0;
+ currentId: ReturnType | null = null;
/**
* Executes `fn` after `delay`, clearing any previously scheduled call.
@@ -15,15 +15,15 @@ export class Timeout {
start(delay: number, fn: Function) {
this.clear();
this.currentId = setTimeout(() => {
- this.currentId = 0;
+ this.currentId = null;
fn();
- }, delay) as unknown as number;
+ }, delay);
}
clear = () => {
- if (this.currentId !== 0) {
+ if (this.currentId !== null) {
clearTimeout(this.currentId);
- this.currentId = 0;
+ this.currentId = null;
}
};
diff --git a/packages/zero-next-plugin/.gitignore b/packages/zero-next-plugin/.gitignore
new file mode 100644
index 00000000000000..6b1d0bfabc3c1c
--- /dev/null
+++ b/packages/zero-next-plugin/.gitignore
@@ -0,0 +1 @@
+LICENSE
diff --git a/packages/zero-next-plugin/package.json b/packages/zero-next-plugin/package.json
index 219c729b3fde34..e1fd2188767bd7 100644
--- a/packages/zero-next-plugin/package.json
+++ b/packages/zero-next-plugin/package.json
@@ -4,10 +4,26 @@
"main": "build/index.js",
"module": "build/index.mjs",
"types": "build/index.d.ts",
- "private": true,
+ "author": "MUI Team",
+ "description": "Next.js integration for @mui/zero-runtime CSS-in-JS library.",
+ "repository": {
+ "type": "git",
+ "url": "https://github.com/mui/material-ui.git",
+ "directory": "packages/zero-next-plugin"
+ },
+ "license": "MIT",
+ "bugs": {
+ "url": "https://github.com/mui/material-ui/issues"
+ },
+ "homepage": "https://github.com/mui/material-ui/tree/master/packages/zero-runtime",
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/mui-org"
+ },
"scripts": {
"clean": "rimraf build types",
"watch": "tsup --watch --tsconfig tsconfig.build.json",
+ "copy-license": "node ../../scripts/zero-runtime-license.mjs",
"build": "tsup --tsconfig tsconfig.build.json",
"typecheck": "tsc --noEmit -p ."
},
@@ -30,6 +46,7 @@
"next-font.js",
"next-image.js",
"zero-virtual.css",
- "package.json"
+ "package.json",
+ "LICENSE"
]
}
diff --git a/packages/zero-next-plugin/src/index.ts b/packages/zero-next-plugin/src/index.ts
index 3e4f9c3ac462bd..661e0d0b2fe045 100644
--- a/packages/zero-next-plugin/src/index.ts
+++ b/packages/zero-next-plugin/src/index.ts
@@ -3,6 +3,7 @@ import type { NextConfig } from 'next';
import { findPagesDir } from 'next/dist/lib/find-pages-dir';
import {
webpack as zeroWebpackPlugin,
+ extendTheme,
type PluginOptions as BaseZeroPluginConfig,
} from '@mui/zero-unplugin';
@@ -81,3 +82,5 @@ export function withZeroPlugin(nextConfig: NextConfig, zeroConfig: ZeroPluginCon
webpack,
};
}
+
+export { extendTheme };
diff --git a/packages/zero-runtime/.gitignore b/packages/zero-runtime/.gitignore
index f43d90c8429d5e..ce2260016524df 100644
--- a/packages/zero-runtime/.gitignore
+++ b/packages/zero-runtime/.gitignore
@@ -1,2 +1,3 @@
/processors/
/utils/
+LICENSE
diff --git a/packages/zero-runtime/README.md b/packages/zero-runtime/README.md
index f32aab05d20d91..1024a9d8078e94 100644
--- a/packages/zero-runtime/README.md
+++ b/packages/zero-runtime/README.md
@@ -47,7 +47,7 @@ npm install @mui/zero-runtime
npm install --save-dev @mui/zero-vite-plugin
```
-Then, in your vite config file file, import the plugin and wrap the exported config object:
+Then, in your Vite config file, import the plugin and pass it to the `plugins` array as shown:
```js
import { zeroVitePlugin } from '@mui/zero-vite-plugin';
@@ -269,7 +269,7 @@ Theming is an **optional** feature that lets you reuse the same values, such as
> **💡 Good to know**:
>
-> The **theme** object are used at build time without relying on React context like common CSS-in-JS libraries. This means that components created by zero-runtime `styled` will be React Server Component by default and still get benefits from theming.
+> The **theme** object is used at build time and does not exist in the final JS bundle. This means that components created using zero-runtime's `styled` can be used with React Server Components by default while still getting the benefits of theming.
For example, in Next.js, you can define a theme in the `next.config.js` file like this:
@@ -319,7 +319,7 @@ const { withZeroPlugin, extendTheme } = require('@mui/zero-next-plugin');
module.exports = withZeroPlugin(
{
- // ...other nextConfig
+ // ...nextConfig
},
{
theme: extendTheme({
@@ -395,7 +395,7 @@ However, if you want to control the color scheme based on application logic, for
});
```
-Note that you need to add a logic to a button by yourself. Here is an example of how to do it:
+Note that you need to add the logic to a button by yourself. Here is an example of how to do it:
```jsx
function App() {
diff --git a/packages/zero-runtime/package.json b/packages/zero-runtime/package.json
index a0d78db0cb4466..d427fcdde858b6 100644
--- a/packages/zero-runtime/package.json
+++ b/packages/zero-runtime/package.json
@@ -4,19 +4,32 @@
"main": "build/index.js",
"module": "build/index.mjs",
"types": "build/index.d.ts",
- "private": true,
+ "author": "MUI Team",
+ "description": "A zero-runtime CSS-in-JS library.",
+ "repository": {
+ "type": "git",
+ "url": "https://github.com/mui/material-ui.git",
+ "directory": "packages/zero-runtime"
+ },
+ "license": "MIT",
+ "bugs": {
+ "url": "https://github.com/mui/material-ui/issues"
+ },
+ "homepage": "https://github.com/mui/material-ui/tree/master/packages/zero-runtime",
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/mui-org"
+ },
"scripts": {
"clean": "rimraf build types processors utils",
"watch": "tsup --watch --clean false",
+ "copy-license": "node ../../scripts/zero-runtime-license.mjs",
"build": "tsup",
"test": "cd ../../ && cross-env NODE_ENV=test mocha 'packages/zero-runtime/**/*.test.{js,ts,tsx}'",
"test:ci": "cd ../../ && cross-env NODE_ENV=test BABEL_ENV=coverage nyc --reporter=lcov --report-dir=./coverage/zero mocha 'packages/zero-runtime/**/*.test.{js,ts,tsx}'",
"typecheck": "tsc --noEmit -p ."
},
"dependencies": {
- "csstype": "^3.1.3",
- "cssesc": "^3.0.0",
- "clsx": "^2.1.0",
"@babel/core": "^7.23.9",
"@babel/helper-module-imports": "^7.22.15",
"@babel/helper-plugin-utils": "^7.22.5",
@@ -24,10 +37,15 @@
"@babel/types": "^7.23.9",
"@emotion/css": "^11.11.2",
"@emotion/serialize": "^1.1.3",
+ "@emotion/styled": "^11.11.0",
+ "@emotion/react": "^11.11.3",
+ "@mui/system": "workspace:^",
"@wyw-in-js/processor-utils": "^0.4.1",
"@wyw-in-js/shared": "^0.4.1",
"@wyw-in-js/transform": "^0.4.1",
- "@mui/system": "workspace:^",
+ "clsx": "^2.1.0",
+ "cssesc": "^3.0.0",
+ "csstype": "^3.1.3",
"lodash": "^4.17.21",
"stylis": "^4.3.1"
},
@@ -65,10 +83,11 @@
"build",
"exports",
"processors",
+ "theme",
"utils",
"package.json",
"styles.css",
- "theme"
+ "LICENSE"
],
"exports": {
".": {
@@ -111,6 +130,15 @@
}
},
"nx": {
+ "targetDefaults": {
+ "build": {
+ "outputs": [
+ "{projectRoot}/build",
+ "{projectRoot}/processors",
+ "{projectRoot}/utils"
+ ]
+ }
+ },
"targets": {
"test": {
"cache": false,
diff --git a/packages/zero-runtime/src/base.d.ts b/packages/zero-runtime/src/base.d.ts
index c417cdfdc61f3c..0aae8b1e5adf86 100644
--- a/packages/zero-runtime/src/base.d.ts
+++ b/packages/zero-runtime/src/base.d.ts
@@ -1,6 +1,6 @@
import type * as CSS from 'csstype';
-export type CSSProperties = CSS.PropertiesFallback;
+export type CSSProperties = CSS.PropertiesFallback;
export type CSSPropertiesMultiValue = {
[K in keyof CSSProperties]: CSSProperties[K] | Array>;
diff --git a/packages/zero-runtime/src/css.d.ts b/packages/zero-runtime/src/css.d.ts
index 511f19ab1e154f..f98e9f8b3756c7 100644
--- a/packages/zero-runtime/src/css.d.ts
+++ b/packages/zero-runtime/src/css.d.ts
@@ -10,11 +10,11 @@ interface Css {
/**
* @returns {string} The generated css class name to be referenced.
*/
- (...arg: CssArg[]): string;
+ (arg: TemplateStringsArray, ...templateArgs: (Primitve | CssFn)[]): string;
/**
* @returns {string} The generated css class name to be referenced.
*/
- (arg: TemplateStringsArray, ...templateArgs: (Primitve | CssFn)[]): string;
+ (...arg: CssArg[]): string;
}
declare const css: Css;
diff --git a/packages/zero-runtime/src/index.ts b/packages/zero-runtime/src/index.ts
index fb1923bf0e3803..52c2a5e4bc993f 100644
--- a/packages/zero-runtime/src/index.ts
+++ b/packages/zero-runtime/src/index.ts
@@ -4,5 +4,3 @@ export { default as keyframes } from './keyframes';
export { generateAtomics, atomics } from './generateAtomics';
export { default as css } from './css';
export { default as createUseThemeProps } from './createUseThemeProps';
-export { default as extendTheme } from './extendTheme';
-export type { Theme, ExtendTheme } from './extendTheme';
diff --git a/packages/zero-runtime/src/keyframes.d.ts b/packages/zero-runtime/src/keyframes.d.ts
index 8afe096ef85a55..29355d64674fb8 100644
--- a/packages/zero-runtime/src/keyframes.d.ts
+++ b/packages/zero-runtime/src/keyframes.d.ts
@@ -15,11 +15,11 @@ interface Keyframes {
/**
* @returns {string} The generated keyframe name to be referenced.
*/
- (arg: KeyframesArg): string;
+ (arg: TemplateStringsArray, ...templateArgs: Primitve[]): string;
/**
* @returns {string} The generated keyframe name to be referenced.
*/
- (arg: TemplateStringsArray, ...templateArgs: Primitve[]): string;
+ (arg: KeyframesArg): string;
}
declare const keyframes: Keyframes;
diff --git a/packages/zero-runtime/src/theme.ts b/packages/zero-runtime/src/theme.ts
index 63c02360aee232..38cd0856a93723 100644
--- a/packages/zero-runtime/src/theme.ts
+++ b/packages/zero-runtime/src/theme.ts
@@ -1 +1,2 @@
export interface ThemeArgs {}
+export { ExtendTheme } from './utils/extendTheme';
diff --git a/packages/zero-runtime/src/utils/cssFnValueToVariable.ts b/packages/zero-runtime/src/utils/cssFnValueToVariable.ts
index d6642215e2511a..5cb2038f2758d0 100644
--- a/packages/zero-runtime/src/utils/cssFnValueToVariable.ts
+++ b/packages/zero-runtime/src/utils/cssFnValueToVariable.ts
@@ -5,7 +5,7 @@ import * as t from '@babel/types';
import type { Expression } from '@babel/types';
import { isUnitLess } from './isUnitLess';
import { cssFunctionTransformerPlugin } from './cssFunctionTransformerPlugin';
-import type { Theme } from '../extendTheme';
+import type { Theme } from './extendTheme';
interface StyleObj {
[key: string]: string | number | (() => void) | StyleObj;
diff --git a/packages/zero-runtime/src/extendTheme.ts b/packages/zero-runtime/src/utils/extendTheme.ts
similarity index 98%
rename from packages/zero-runtime/src/extendTheme.ts
rename to packages/zero-runtime/src/utils/extendTheme.ts
index abfee8b62139ab..8f77682c9427a0 100644
--- a/packages/zero-runtime/src/extendTheme.ts
+++ b/packages/zero-runtime/src/utils/extendTheme.ts
@@ -1,7 +1,7 @@
import deepMerge from 'lodash/merge';
import { prepareCssVars } from '@mui/system/cssVars';
import type { SxConfig } from '@mui/system/styleFunctionSx';
-import type { CSSObject } from './base';
+import type { CSSObject } from '../base';
export interface ThemeInput {
/**
@@ -86,7 +86,7 @@ export type Theme = ExtendTheme;
/**
* A utility to tell zero-runtime to generate CSS variables for the theme.
*/
-export default function extendTheme<
+export function extendTheme<
Options extends {
colorScheme: string;
tokens: Record;
diff --git a/packages/zero-runtime/src/utils/generateCss.ts b/packages/zero-runtime/src/utils/generateCss.ts
index 08803856953dee..afe1f670d931e9 100644
--- a/packages/zero-runtime/src/utils/generateCss.ts
+++ b/packages/zero-runtime/src/utils/generateCss.ts
@@ -1,5 +1,5 @@
import { serializeStyles } from '@emotion/serialize';
-import { Theme } from '../extendTheme';
+import { Theme } from './extendTheme';
export function generateTokenCss(theme: Theme) {
// create stylesheet as object
diff --git a/packages/zero-runtime/src/utils/index.ts b/packages/zero-runtime/src/utils/index.ts
index 40aba37db4c814..08259f964e184f 100644
--- a/packages/zero-runtime/src/utils/index.ts
+++ b/packages/zero-runtime/src/utils/index.ts
@@ -1,3 +1,4 @@
export type { PluginCustomOptions } from './cssFnValueToVariable';
export * from './preprocessor';
export * from './generateCss';
+export * from './extendTheme';
diff --git a/packages/zero-unplugin/.gitignore b/packages/zero-unplugin/.gitignore
new file mode 100644
index 00000000000000..6b1d0bfabc3c1c
--- /dev/null
+++ b/packages/zero-unplugin/.gitignore
@@ -0,0 +1 @@
+LICENSE
diff --git a/packages/zero-unplugin/package.json b/packages/zero-unplugin/package.json
index ce5b9d7ce18f04..852dd3eff11908 100644
--- a/packages/zero-unplugin/package.json
+++ b/packages/zero-unplugin/package.json
@@ -4,22 +4,38 @@
"main": "build/index.js",
"module": "build/index.mjs",
"types": "build/index.d.ts",
- "private": true,
+ "author": "MUI Team",
+ "description": "Webpack integration for @mui/zero-runtime CSS-in-JS library.",
+ "repository": {
+ "type": "git",
+ "url": "https://github.com/mui/material-ui.git",
+ "directory": "packages/zero-unplugin"
+ },
+ "license": "MIT",
+ "bugs": {
+ "url": "https://github.com/mui/material-ui/issues"
+ },
+ "homepage": "https://github.com/mui/material-ui/tree/master/packages/zero-runtime",
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/mui-org"
+ },
"scripts": {
"clean": "rimraf build types",
"watch": "tsup --watch --tsconfig tsconfig.build.json",
+ "copy-license": "node ../../scripts/zero-runtime-license.mjs",
"build": "tsup --tsconfig tsconfig.build.json",
"typecheck": "tsc --noEmit -p ."
},
"dependencies": {
"@babel/core": "^7.23.9",
+ "@mui/zero-runtime": "workspace:^",
"@wyw-in-js/shared": "^0.4.1",
"@wyw-in-js/transform": "^0.4.1",
"babel-plugin-transform-react-remove-prop-types": "^0.4.24",
"unplugin": "^1.7.1"
},
"devDependencies": {
- "@mui/zero-runtime": "workspace:^",
"@types/babel__core": "^7.20.5"
},
"peerDependencies": {
@@ -31,6 +47,7 @@
},
"files": [
"build",
- "package.json"
+ "package.json",
+ "LICENSE"
]
}
diff --git a/packages/zero-unplugin/src/index.ts b/packages/zero-unplugin/src/index.ts
index ab21cb71d0f4d2..4bcabc01f3cd75 100644
--- a/packages/zero-unplugin/src/index.ts
+++ b/packages/zero-unplugin/src/index.ts
@@ -18,8 +18,9 @@ import {
preprocessor as basePreprocessor,
generateTokenCss,
generateThemeTokens,
+ extendTheme,
+ type Theme as BaseTheme,
} from '@mui/zero-runtime/utils';
-import type { Theme as BaseTheme } from '@mui/zero-runtime';
type NextMeta = {
type: 'next';
@@ -341,3 +342,5 @@ export const webpack = plugin.webpack as unknown as UnpluginFactoryOutput<
PluginOptions,
WebpackPluginInstance
>;
+
+export { extendTheme };
diff --git a/packages/zero-vite-plugin/.gitignore b/packages/zero-vite-plugin/.gitignore
new file mode 100644
index 00000000000000..9dc7e3d4a9c91b
--- /dev/null
+++ b/packages/zero-vite-plugin/.gitignore
@@ -0,0 +1 @@
+/LICENSE
diff --git a/packages/zero-vite-plugin/package.json b/packages/zero-vite-plugin/package.json
index 5ffd41b0396442..15e561fcca0f1b 100644
--- a/packages/zero-vite-plugin/package.json
+++ b/packages/zero-vite-plugin/package.json
@@ -4,10 +4,26 @@
"main": "build/index.js",
"module": "build/index.mjs",
"types": "build/index.d.ts",
- "private": true,
+ "author": "MUI Team",
+ "description": "Vite integration for @mui/zero-runtime CSS-in-JS library.",
+ "repository": {
+ "type": "git",
+ "url": "https://github.com/mui/material-ui.git",
+ "directory": "packages/zero-vite-plugin"
+ },
+ "license": "MIT",
+ "bugs": {
+ "url": "https://github.com/mui/material-ui/issues"
+ },
+ "homepage": "https://github.com/mui/material-ui/tree/master/packages/zero-runtime",
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/mui-org"
+ },
"scripts": {
"clean": "rimraf build",
"watch": "tsup --watch",
+ "copy-license": "node ../../scripts/zero-runtime-license.mjs",
"build": "tsup",
"typecheck": "tsc --noEmit -p ."
},
@@ -32,6 +48,7 @@
},
"files": [
"build",
- "package.json"
+ "package.json",
+ "LICENSE"
]
}
diff --git a/packages/zero-vite-plugin/src/index.ts b/packages/zero-vite-plugin/src/index.ts
index f494274b65a4d4..98296aba22a0d0 100644
--- a/packages/zero-vite-plugin/src/index.ts
+++ b/packages/zero-vite-plugin/src/index.ts
@@ -3,8 +3,9 @@ import {
preprocessor as basePreprocessor,
generateTokenCss,
generateThemeTokens,
+ type Theme,
+ extendTheme,
} from '@mui/zero-runtime/utils';
-import type { Theme } from '@mui/zero-runtime';
import { transformAsync } from '@babel/core';
import baseZeroVitePlugin, { type VitePluginOptions } from './zero-vite-plugin';
@@ -46,6 +47,7 @@ export function zeroVitePlugin(options: ZeroVitePluginOptions) {
babelOptions = {},
preprocessor = basePreprocessor,
transformLibraries = [],
+ transformSx = true,
...rest
} = options ?? {};
@@ -114,5 +116,7 @@ export function zeroVitePlugin(options: ZeroVitePluginOptions) {
...rest,
});
- return [injectMUITokensPlugin(), intermediateBabelPlugin(), zeroPlugin];
+ return [injectMUITokensPlugin(), transformSx ? intermediateBabelPlugin() : null, zeroPlugin];
}
+
+export { extendTheme };
diff --git a/packages/zero-vite-plugin/src/zero-vite-plugin.ts b/packages/zero-vite-plugin/src/zero-vite-plugin.ts
index 0db85c53f7d4f0..7f38bbd4630f1a 100644
--- a/packages/zero-vite-plugin/src/zero-vite-plugin.ts
+++ b/packages/zero-vite-plugin/src/zero-vite-plugin.ts
@@ -29,6 +29,7 @@ export type VitePluginOptions = {
preprocessor?: Preprocessor;
sourceMap?: boolean;
transformLibraries?: string[];
+ transformSx?: boolean;
} & Partial &
PluginCustomOptions;
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b76603a4cc65e6..c76d26c11e90e1 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -348,122 +348,6 @@ importers:
specifier: ^17.7.2
version: 17.7.2
- apps/local-ui-lib:
- dependencies:
- '@mui/zero-runtime':
- specifier: workspace:^
- version: link:../../packages/zero-runtime
-
- apps/zero-runtime-next-app:
- dependencies:
- '@mui/base':
- specifier: workspace:^
- version: link:../../packages/mui-base/build
- '@mui/material':
- specifier: workspace:^
- version: link:../../packages/mui-material/build
- '@mui/system':
- specifier: workspace:^
- version: link:../../packages/mui-system/build
- '@mui/utils':
- specifier: workspace:^
- version: link:../../packages/mui-utils/build
- '@mui/zero-runtime':
- specifier: workspace:^
- version: link:../../packages/zero-runtime
- local-ui-lib:
- specifier: workspace:^
- version: link:../local-ui-lib
- next:
- specifier: 13.5.1
- version: 13.5.1(@babel/core@7.23.9)(babel-plugin-macros@3.1.0)(react-dom@18.2.0)(react@18.2.0)
- react:
- specifier: ^18.2.0
- version: 18.2.0
- react-dom:
- specifier: ^18.2.0
- version: 18.2.0(react@18.2.0)
- devDependencies:
- '@mui/zero-next-plugin':
- specifier: workspace:^
- version: link:../../packages/zero-next-plugin
- '@types/node':
- specifier: ^18.19.15
- version: 18.19.15
- '@types/react':
- specifier: ^18.2.55
- version: 18.2.55
- '@types/react-dom':
- specifier: 18.2.19
- version: 18.2.19
- eslint:
- specifier: ^8.56.0
- version: 8.56.0
- typescript:
- specifier: ^5.3.3
- version: 5.3.3
-
- apps/zero-runtime-vite-app:
- dependencies:
- '@mui/base':
- specifier: workspace:^
- version: link:../../packages/mui-base/build
- '@mui/system':
- specifier: workspace:^
- version: link:../../packages/mui-system/build
- '@mui/zero-runtime':
- specifier: workspace:^
- version: link:../../packages/zero-runtime
- clsx:
- specifier: ^2.1.0
- version: 2.1.0
- local-ui-lib:
- specifier: workspace:^
- version: link:../local-ui-lib
- react:
- specifier: ^18.2.0
- version: 18.2.0
- react-dom:
- specifier: ^18.2.0
- version: 18.2.0(react@18.2.0)
- devDependencies:
- '@babel/preset-env':
- specifier: ^7.23.9
- version: 7.23.9(@babel/core@7.23.9)
- '@babel/preset-react':
- specifier: ^7.23.3
- version: 7.23.3(@babel/core@7.23.9)
- '@babel/preset-typescript':
- specifier: ^7.23.3
- version: 7.23.3(@babel/core@7.23.9)
- '@mui/material':
- specifier: workspace:^
- version: link:../../packages/mui-material/build
- '@mui/utils':
- specifier: workspace:^
- version: link:../../packages/mui-utils/build
- '@mui/zero-vite-plugin':
- specifier: workspace:^
- version: link:../../packages/zero-vite-plugin
- '@types/react':
- specifier: ^18.2.55
- version: 18.2.55
- '@types/react-dom':
- specifier: 18.2.19
- version: 18.2.19
- '@vitejs/plugin-react':
- specifier: ^4.2.1
- version: 4.2.1(vite@5.0.12)
- postcss:
- specifier: ^8.4.35
- version: 8.4.35
- postcss-combine-media-query:
- specifier: ^1.0.1
- version: 1.0.1
- vite:
- specifier: 5.0.12
- version: 5.0.12(@types/node@18.19.15)
-
benchmark:
dependencies:
'@chakra-ui/system':
@@ -592,15 +476,15 @@ importers:
'@mui/icons-material':
specifier: workspace:^
version: link:../packages/mui-icons-material/build
+ '@mui/internal-markdown':
+ specifier: workspace:^
+ version: link:../packages/markdown
'@mui/joy':
specifier: workspace:*
version: link:../packages/mui-joy/build
'@mui/lab':
specifier: workspace:*
version: link:../packages/mui-lab/build
- '@mui/markdown':
- specifier: workspace:^
- version: link:../packages/markdown
'@mui/material':
specifier: workspace:^
version: link:../packages/mui-material/build
@@ -783,7 +667,7 @@ importers:
version: 5.3.1(react-dom@18.2.0)(react@18.2.0)
react-router-dom:
specifier: ^6.21.3
- version: 6.21.3(react-dom@18.2.0)(react@18.2.0)
+ version: 6.22.1(react-dom@18.2.0)(react@18.2.0)
react-runner:
specifier: ^1.0.3
version: 1.0.3(react-dom@18.2.0)(react@18.2.0)
@@ -924,7 +808,7 @@ importers:
specifier: ^7.23.9
version: 7.23.9
'@mui-internal/docs-utils':
- specifier: workspace:*
+ specifier: workspace:^
version: link:../../packages/docs-utils
doctrine:
specifier: ^3.0.0
@@ -993,7 +877,7 @@ importers:
'@mui-internal/docs-utils':
specifier: workspace:^
version: link:../docs-utils
- '@mui/markdown':
+ '@mui/internal-markdown':
specifier: workspace:^
version: link:../markdown
ast-types:
@@ -1069,7 +953,7 @@ importers:
'@mui-internal/api-docs-builder':
specifier: workspace:^
version: link:../api-docs-builder
- '@mui/markdown':
+ '@mui/internal-markdown':
specifier: workspace:^
version: link:../markdown
docs:
@@ -1174,13 +1058,13 @@ importers:
specifier: ^7.23.9
version: 7.23.9
'@mui/utils':
- specifier: workspace:^
+ specifier: ^5.0.0
version: link:../mui-utils/build
babel-plugin-macros:
specifier: ^3.1.0
version: 3.1.0
devDependencies:
- '@mui-internal/babel-macros':
+ '@mui/internal-babel-macros':
specifier: workspace:*
version: 'link:'
'@types/babel-plugin-macros':
@@ -1226,12 +1110,12 @@ importers:
specifier: ^15.8.1
version: 15.8.1
devDependencies:
- '@mui-internal/babel-macros':
- specifier: workspace:^
- version: link:../mui-babel-macros
'@mui-internal/test-utils':
specifier: workspace:^
version: link:../test-utils
+ '@mui/internal-babel-macros':
+ specifier: workspace:^
+ version: link:../mui-babel-macros
'@testing-library/react':
specifier: ^14.2.1
version: 14.2.1(react-dom@18.2.0)(react@18.2.0)
@@ -1645,15 +1529,12 @@ importers:
specifier: ^4.4.5
version: 4.4.5(react-dom@18.2.0)(react@18.2.0)
devDependencies:
- '@mui-internal/babel-macros':
- specifier: workspace:^
- version: link:../mui-babel-macros
'@mui-internal/test-utils':
specifier: workspace:^
version: link:../test-utils
- '@mui/lab':
- specifier: workspace:*
- version: link:../mui-lab/build
+ '@mui/internal-babel-macros':
+ specifier: workspace:^
+ version: link:../mui-babel-macros
'@popperjs/core':
specifier: ^2.11.8
version: 2.11.8
@@ -1710,7 +1591,7 @@ importers:
version: 18.2.0(react@18.2.0)
react-router-dom:
specifier: ^6.21.3
- version: 6.21.3(react-dom@18.2.0)(react@18.2.0)
+ version: 6.22.1(react-dom@18.2.0)(react@18.2.0)
rollup:
specifier: ^3.29.4
version: 3.29.4
@@ -1776,12 +1657,12 @@ importers:
'@emotion/react':
specifier: ^11.11.3
version: 11.11.3(@types/react@18.2.55)(react@18.2.0)
- '@mui-internal/babel-macros':
- specifier: workspace:^
- version: link:../mui-babel-macros
'@mui-internal/test-utils':
specifier: workspace:^
version: link:../test-utils
+ '@mui/internal-babel-macros':
+ specifier: workspace:^
+ version: link:../mui-babel-macros
'@testing-library/user-event':
specifier: ^14.5.2
version: 14.5.2(@testing-library/dom@9.3.4)
@@ -1817,7 +1698,7 @@ importers:
version: 18.2.0(react@18.2.0)
react-router-dom:
specifier: ^6.21.3
- version: 6.21.3(react-dom@18.2.0)(react@18.2.0)
+ version: 6.22.1(react-dom@18.2.0)(react@18.2.0)
sinon:
specifier: ^15.2.0
version: 15.2.0
@@ -2085,12 +1966,12 @@ importers:
'@emotion/styled':
specifier: ^11.11.0
version: 11.11.0(@emotion/react@11.11.3)(@types/react@18.2.55)(react@18.2.0)
- '@mui-internal/babel-macros':
- specifier: workspace:^
- version: link:../mui-babel-macros
'@mui-internal/test-utils':
specifier: workspace:^
version: link:../test-utils
+ '@mui/internal-babel-macros':
+ specifier: workspace:^
+ version: link:../mui-babel-macros
'@mui/system':
specifier: workspace:*
version: link:build
@@ -2151,12 +2032,12 @@ importers:
specifier: ^18.2.0
version: 18.2.0
devDependencies:
- '@mui-internal/babel-macros':
- specifier: workspace:^
- version: link:../mui-babel-macros
'@mui-internal/test-utils':
specifier: workspace:^
version: link:../test-utils
+ '@mui/internal-babel-macros':
+ specifier: workspace:^
+ version: link:../mui-babel-macros
'@mui/types':
specifier: workspace:^
version: link:../mui-types/build
@@ -2361,9 +2242,15 @@ importers:
'@emotion/css':
specifier: ^11.11.2
version: 11.11.2
+ '@emotion/react':
+ specifier: ^11.11.3
+ version: 11.11.3(@types/react@18.2.55)(react@18.2.0)
'@emotion/serialize':
specifier: ^1.1.3
version: 1.1.3
+ '@emotion/styled':
+ specifier: ^11.11.0
+ version: 11.11.0(@emotion/react@11.11.3)(@types/react@18.2.55)(react@18.2.0)
'@mui/system':
specifier: workspace:^
version: link:../mui-system/build
@@ -2428,6 +2315,9 @@ importers:
'@babel/core':
specifier: ^7.23.9
version: 7.23.9
+ '@mui/zero-runtime':
+ specifier: workspace:^
+ version: link:../zero-runtime
'@wyw-in-js/shared':
specifier: ^0.4.1
version: 0.4.1
@@ -2441,9 +2331,6 @@ importers:
specifier: ^1.7.1
version: 1.7.1
devDependencies:
- '@mui/zero-runtime':
- specifier: workspace:^
- version: link:../zero-runtime
'@types/babel__core':
specifier: ^7.20.5
version: 7.20.5
@@ -2567,7 +2454,7 @@ importers:
version: 18.2.0
react-router-dom:
specifier: ^6.21.3
- version: 6.21.3(react-dom@18.2.0)(react@18.2.0)
+ version: 6.22.1(react-dom@18.2.0)(react@18.2.0)
sinon:
specifier: ^15.2.0
version: 15.2.0
@@ -3860,6 +3747,7 @@ packages:
dependencies:
'@babel/core': 7.23.9
'@babel/helper-plugin-utils': 7.22.5
+ dev: false
/@babel/plugin-transform-react-jsx-source@7.23.3(@babel/core@7.23.9):
resolution: {integrity: sha512-91RS0MDnAWDNvGC6Wio5XYkyWI39FMFO+JK9+4AlgaTH+yWwVTsw7/sn6LK0lH7c5F+TFkpv/3LfCJ1Ydwof/g==}
@@ -3869,6 +3757,7 @@ packages:
dependencies:
'@babel/core': 7.23.9
'@babel/helper-plugin-utils': 7.22.5
+ dev: false
/@babel/plugin-transform-react-jsx@7.23.4(@babel/core@7.23.9):
resolution: {integrity: sha512-5xOpoPguCZCRbo/JeHlloSkTA8Bld1J/E1/kLfD1nsuiW1m8tduTA1ERCgIZokDflX/IBzKcqR3l7VlRgiIfHA==}
@@ -6878,8 +6767,8 @@ packages:
zustand: 3.7.2(react@18.2.0)
dev: false
- /@remix-run/router@1.14.2:
- resolution: {integrity: sha512-ACXpdMM9hmKZww21yEqWwiLws/UPLhNKvimN8RrYSqPSvB3ov7sLvAcfvaxePeLvccTQKGdkDIhLYApZVDFuKg==}
+ /@remix-run/router@1.15.1:
+ resolution: {integrity: sha512-zcU0gM3z+3iqj8UX45AmWY810l3oUmXM7uH4dt5xtzvMhRtYVhKGOmgOd1877dOPPepfCjUv57w+syamWIYe7w==}
engines: {node: '>=14.0.0'}
/@rollup/plugin-replace@5.0.5(rollup@3.29.4):
@@ -8084,22 +7973,6 @@ packages:
resolution: {integrity: sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==}
dev: true
- /@vitejs/plugin-react@4.2.1(vite@5.0.12):
- resolution: {integrity: sha512-oojO9IDc4nCUUi8qIR11KoQm0XFFLIwsRBwHRR4d/88IWghn1y6ckz/bJ8GHDCsYEJee8mDzqtJxh15/cisJNQ==}
- engines: {node: ^14.18.0 || >=16.0.0}
- peerDependencies:
- vite: ^4.2.0 || ^5.0.0
- dependencies:
- '@babel/core': 7.23.9
- '@babel/plugin-transform-react-jsx-self': 7.23.3(@babel/core@7.23.9)
- '@babel/plugin-transform-react-jsx-source': 7.23.3(@babel/core@7.23.9)
- '@types/babel__core': 7.20.5
- react-refresh: 0.14.0
- vite: 5.0.12(@types/node@18.19.15)
- transitivePeerDependencies:
- - supports-color
- dev: true
-
/@webassemblyjs/ast@1.11.6:
resolution: {integrity: sha512-IN1xI7PwOvLPgjcf180gC1bqn3q/QaOCwYUahIOhbYUu8KA/3tw2RT/T0Gidi1l7Hhj5D/INhJxiICObqpMu4Q==}
dependencies:
@@ -8653,7 +8526,7 @@ packages:
/aria-query@5.1.3:
resolution: {integrity: sha512-R5iJ5lkuHybztUfuOAznmboyjWq8O6sqNqtK7CLOqdydi54VNbORp49mb14KbWgG1QD3JFO9hJdZ+y4KutfdOQ==}
dependencies:
- deep-equal: 2.2.2
+ deep-equal: 2.2.3
/aria-query@5.3.0:
resolution: {integrity: sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==}
@@ -8679,7 +8552,7 @@ packages:
/array-buffer-byte-length@1.0.0:
resolution: {integrity: sha512-LPuwb2P+NrQw3XhxGc36+XSvuBPopovXYTR9Ew++Du9Yb/bx5AzBfrIsBoj0EZUifjQU+sHL21sseZ3jerWO/A==}
dependencies:
- call-bind: 1.0.2
+ call-bind: 1.0.7
is-array-buffer: 3.0.2
/array-differ@3.0.0:
@@ -8698,10 +8571,10 @@ packages:
resolution: {integrity: sha512-dlcsNBIiWhPkHdOEEKnehA+RNUWDc4UqFtnIXU4uuYDPtA4LDkr7qip2p0VvFAEXNDr0yWZ9PJyIRiGjRLQzwQ==}
engines: {node: '>= 0.4'}
dependencies:
- call-bind: 1.0.2
+ call-bind: 1.0.7
define-properties: 1.2.1
es-abstract: 1.22.1
- get-intrinsic: 1.2.1
+ get-intrinsic: 1.2.4
is-string: 1.0.7
dev: true
@@ -8726,7 +8599,7 @@ packages:
resolution: {integrity: sha512-Dk3Ty7N42Odk7PjU/Ci3zT4pLj20YvuVnneG/58ICM6bt4Ij5kZaJTVQ9TSaWaIECX2sFyz4KItkVZqHNnciqw==}
engines: {node: '>= 0.4'}
dependencies:
- call-bind: 1.0.2
+ call-bind: 1.0.7
define-properties: 1.2.1
es-abstract: 1.22.1
es-array-method-boxes-properly: 1.0.0
@@ -8735,7 +8608,7 @@ packages:
/array.prototype.find@2.2.2:
resolution: {integrity: sha512-DRumkfW97iZGOfn+lIXbkVrXL04sfYKX+EfOodo8XboR5sxPDVvOjZTF/rysusa9lmhmSOeD6Vp6RKQP+eP4Tg==}
dependencies:
- call-bind: 1.0.2
+ call-bind: 1.0.7
define-properties: 1.2.1
es-abstract: 1.22.1
es-shim-unscopables: 1.0.0
@@ -8744,18 +8617,18 @@ packages:
resolution: {integrity: sha512-LzLoiOMAxvy+Gd3BAq3B7VeIgPdo+Q8hthvKtXybMvRV0jrXfJM/t8mw7nNlpEcVlVUnCnM2KSX4XU5HmpodOA==}
engines: {node: '>= 0.4'}
dependencies:
- call-bind: 1.0.2
+ call-bind: 1.0.7
define-properties: 1.2.1
es-abstract: 1.22.1
es-shim-unscopables: 1.0.0
- get-intrinsic: 1.2.1
+ get-intrinsic: 1.2.4
dev: true
/array.prototype.flat@1.3.2:
resolution: {integrity: sha512-djYB+Zx2vLewY8RWlNCUdHjDXs2XOgm602S9E7P/UpHgfeHL00cRiIF+IN/G/aUJ7kGPb6yO/ErDI5V2s8iycA==}
engines: {node: '>= 0.4'}
dependencies:
- call-bind: 1.0.2
+ call-bind: 1.0.7
define-properties: 1.2.1
es-abstract: 1.22.1
es-shim-unscopables: 1.0.0
@@ -8764,7 +8637,7 @@ packages:
resolution: {integrity: sha512-Ewyx0c9PmpcsByhSW4r+9zDU7sGjFc86qf/kKtuSCRdhfbk0SNLLkaT5qvcHnRGgc5NP/ly/y+qkXkqONX54CQ==}
engines: {node: '>= 0.4'}
dependencies:
- call-bind: 1.0.2
+ call-bind: 1.0.7
define-properties: 1.2.1
es-abstract: 1.22.1
es-shim-unscopables: 1.0.0
@@ -8774,7 +8647,7 @@ packages:
resolution: {integrity: sha512-gfaKntvwqYIuC7mLLyv2wzZIJqrRhn5PZ9EfFejSx6a78sV7iDsGpG9P+3oUPtm1Rerqm6nrKS4FYuTIvWfo3g==}
engines: {node: '>= 0.4'}
dependencies:
- call-bind: 1.0.2
+ call-bind: 1.0.7
define-properties: 1.2.1
es-abstract: 1.22.1
es-array-method-boxes-properly: 1.0.0
@@ -8785,7 +8658,7 @@ packages:
resolution: {integrity: sha512-WnM+AjG/DvLRLo4DDl+r+SvCzYtD2Jd9oeBYMcEaI7t3fFrHY9M53/wdLcTvmZNQ70IU6Htj0emFkZ5TS+lrdw==}
engines: {node: '>= 0.4'}
dependencies:
- call-bind: 1.0.2
+ call-bind: 1.0.7
define-properties: 1.2.1
es-abstract: 1.22.1
es-array-method-boxes-properly: 1.0.0
@@ -8795,11 +8668,11 @@ packages:
/array.prototype.tosorted@1.1.1:
resolution: {integrity: sha512-pZYPXPRl2PqWcsUs6LOMn+1f1532nEoPTYowBtqLwAW+W8vSVhkIGnmOX1t/UQjD6YGI0vcD2B1U7ZFGQH9jnQ==}
dependencies:
- call-bind: 1.0.2
+ call-bind: 1.0.7
define-properties: 1.2.1
es-abstract: 1.22.1
es-shim-unscopables: 1.0.0
- get-intrinsic: 1.2.1
+ get-intrinsic: 1.2.4
dev: true
/arraybuffer.prototype.slice@1.0.1:
@@ -8807,9 +8680,9 @@ packages:
engines: {node: '>= 0.4'}
dependencies:
array-buffer-byte-length: 1.0.0
- call-bind: 1.0.2
+ call-bind: 1.0.7
define-properties: 1.2.1
- get-intrinsic: 1.2.1
+ get-intrinsic: 1.2.4
is-array-buffer: 3.0.2
is-shared-array-buffer: 1.0.2
@@ -8944,9 +8817,11 @@ packages:
remove-accents: 0.4.2
dev: false
- /available-typed-arrays@1.0.5:
- resolution: {integrity: sha512-DMD0KiN46eipeziST1LPP/STfDU0sufISXmjSgvVsoU2tqxctQeASejWcfNtxYKqETM1UxQ8sp2OrSBWpHY6sw==}
+ /available-typed-arrays@1.0.7:
+ resolution: {integrity: sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==}
engines: {node: '>= 0.4'}
+ dependencies:
+ possible-typed-array-names: 1.0.0
/aws-sdk@2.1552.0:
resolution: {integrity: sha512-sRuzlCeSHXUsdLqsV/E+nPrgBn1EI3BoA38D5qfNMRcPTd9j4G8M4AyMymKyNxLoWOKLqz7xFBa801MHflGwEg==}
@@ -9512,11 +9387,15 @@ packages:
write-file-atomic: 3.0.3
dev: true
- /call-bind@1.0.2:
- resolution: {integrity: sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==}
+ /call-bind@1.0.7:
+ resolution: {integrity: sha512-GHTSNSYICQ7scH7sZ+M2rFopRoLh8t2bLSW6BbgrtLsahOIB5iyAVJf9GjWK3cYTDaMj4XdBpM1cA6pIS0Kv2w==}
+ engines: {node: '>= 0.4'}
dependencies:
+ es-define-property: 1.0.0
+ es-errors: 1.3.0
function-bind: 1.1.2
- get-intrinsic: 1.2.1
+ get-intrinsic: 1.2.4
+ set-function-length: 1.2.1
/caller-callsite@2.0.0:
resolution: {integrity: sha512-JuG3qI4QOftFsZyOn1qq87fq5grLIyk1JYd5lJmdA+fG7aQ9pA/i3JIJGcO3q0MrRcHlOt1U+ZeHW8Dq9axALQ==}
@@ -10797,13 +10676,14 @@ packages:
dependencies:
type-detect: 4.0.8
- /deep-equal@2.2.2:
- resolution: {integrity: sha512-xjVyBf0w5vH0I42jdAZzOKVldmPgSulmiyPRywoyq7HXC9qdgo17kxJE+rdnif5Tz6+pIrpJI8dCpMNLIGkUiA==}
+ /deep-equal@2.2.3:
+ resolution: {integrity: sha512-ZIwpnevOurS8bpT4192sqAowWM76JDKSHYzMLty3BZGSswgq6pBaH3DhCSW5xVAZICZyKdOBPjwww5wfgT/6PA==}
+ engines: {node: '>= 0.4'}
dependencies:
array-buffer-byte-length: 1.0.0
- call-bind: 1.0.2
+ call-bind: 1.0.7
es-get-iterator: 1.1.3
- get-intrinsic: 1.2.1
+ get-intrinsic: 1.2.4
is-arguments: 1.1.1
is-array-buffer: 3.0.2
is-date-object: 1.0.5
@@ -10813,11 +10693,11 @@ packages:
object-is: 1.1.5
object-keys: 1.1.1
object.assign: 4.1.4
- regexp.prototype.flags: 1.5.0
+ regexp.prototype.flags: 1.5.2
side-channel: 1.0.4
which-boxed-primitive: 1.0.2
which-collection: 1.0.1
- which-typed-array: 1.1.11
+ which-typed-array: 1.1.14
/deep-extend@0.6.0:
resolution: {integrity: sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==}
@@ -10855,13 +10735,13 @@ packages:
engines: {node: '>=10'}
dev: true
- /define-data-property@1.1.0:
- resolution: {integrity: sha512-UzGwzcjyv3OtAvolTj1GoyNYzfFR+iqbGjcnBEENZVCpM4/Ng1yhGNvS3lR/xDS74Tb2wGG9WzNSNIOS9UVb2g==}
+ /define-data-property@1.1.4:
+ resolution: {integrity: sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==}
engines: {node: '>= 0.4'}
dependencies:
- get-intrinsic: 1.2.1
+ es-define-property: 1.0.0
+ es-errors: 1.3.0
gopd: 1.0.1
- has-property-descriptors: 1.0.0
/define-lazy-prop@2.0.0:
resolution: {integrity: sha512-Ds09qNh8yw3khSjiJjiUInaGX9xlqZDY7JVryGxdxV7NPeuqQfplOpQ66yJFZut3jLa5zOwkXw1g9EI2uKh4Og==}
@@ -10872,8 +10752,8 @@ packages:
resolution: {integrity: sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==}
engines: {node: '>= 0.4'}
dependencies:
- define-data-property: 1.1.0
- has-property-descriptors: 1.0.0
+ define-data-property: 1.1.4
+ has-property-descriptors: 1.0.2
object-keys: 1.1.1
/define-property@0.2.5:
@@ -11329,17 +11209,17 @@ packages:
dependencies:
array-buffer-byte-length: 1.0.0
arraybuffer.prototype.slice: 1.0.1
- available-typed-arrays: 1.0.5
- call-bind: 1.0.2
+ available-typed-arrays: 1.0.7
+ call-bind: 1.0.7
es-set-tostringtag: 2.0.1
es-to-primitive: 1.2.1
function.prototype.name: 1.1.5
- get-intrinsic: 1.2.1
+ get-intrinsic: 1.2.4
get-symbol-description: 1.0.0
globalthis: 1.0.3
gopd: 1.0.1
has: 1.0.3
- has-property-descriptors: 1.0.0
+ has-property-descriptors: 1.0.2
has-proto: 1.0.1
has-symbols: 1.0.3
internal-slot: 1.0.5
@@ -11354,7 +11234,7 @@ packages:
object-inspect: 1.12.3
object-keys: 1.1.1
object.assign: 4.1.4
- regexp.prototype.flags: 1.5.0
+ regexp.prototype.flags: 1.5.2
safe-array-concat: 1.0.1
safe-regex-test: 1.0.0
string.prototype.trim: 1.2.7
@@ -11365,16 +11245,26 @@ packages:
typed-array-byte-offset: 1.0.0
typed-array-length: 1.0.4
unbox-primitive: 1.0.2
- which-typed-array: 1.1.11
+ which-typed-array: 1.1.14
/es-array-method-boxes-properly@1.0.0:
resolution: {integrity: sha512-wd6JXUmyHmt8T5a2xreUwKcGPq6f1f+WwIJkijUqiGcJz1qqnZgP6XIK+QyIWU5lT7imeNxUll48bziG+TSYcA==}
+ /es-define-property@1.0.0:
+ resolution: {integrity: sha512-jxayLKShrEqqzJ0eumQbVhTYQM27CfT1T35+gCgDFoL82JLsXqTJ76zv6A0YLOgEnLUMvLzsDsGIrl8NFpT2gQ==}
+ engines: {node: '>= 0.4'}
+ dependencies:
+ get-intrinsic: 1.2.4
+
+ /es-errors@1.3.0:
+ resolution: {integrity: sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==}
+ engines: {node: '>= 0.4'}
+
/es-get-iterator@1.1.3:
resolution: {integrity: sha512-sPZmqHBe6JIiTfN5q2pEi//TwxmAFHwj/XEuYjTuse78i8KxaqMTTzxPoFKuzRpDpTJ+0NAbpfenkmH2rePtuw==}
dependencies:
- call-bind: 1.0.2
- get-intrinsic: 1.2.1
+ call-bind: 1.0.7
+ get-intrinsic: 1.2.4
has-symbols: 1.0.3
is-arguments: 1.1.1
is-map: 2.0.2
@@ -11387,14 +11277,14 @@ packages:
resolution: {integrity: sha512-GhoY8uYqd6iwUl2kgjTm4CZAf6oo5mHK7BPqx3rKgx893YSsy0LGHV6gfqqQvZt/8xM8xeOnfXBCfqclMKkJ5g==}
dependencies:
asynciterator.prototype: 1.0.0
- call-bind: 1.0.2
+ call-bind: 1.0.7
define-properties: 1.2.1
es-abstract: 1.22.1
es-set-tostringtag: 2.0.1
function-bind: 1.1.2
- get-intrinsic: 1.2.1
+ get-intrinsic: 1.2.4
globalthis: 1.0.3
- has-property-descriptors: 1.0.0
+ has-property-descriptors: 1.0.2
has-proto: 1.0.1
has-symbols: 1.0.3
internal-slot: 1.0.5
@@ -11409,9 +11299,9 @@ packages:
resolution: {integrity: sha512-g3OMbtlwY3QewlqAiMLI47KywjWZoEytKr8pf6iTC8uJq5bIAH52Z9pnQ8pVL6whrCto53JZDuUIsifGeLorTg==}
engines: {node: '>= 0.4'}
dependencies:
- get-intrinsic: 1.2.1
+ get-intrinsic: 1.2.4
has: 1.0.3
- has-tostringtag: 1.0.0
+ has-tostringtag: 1.0.2
/es-shim-unscopables@1.0.0:
resolution: {integrity: sha512-Jm6GPcCdC30eMLbZ2x8z2WuRwAws3zTBBKuusffYVUrNj/GVSUAZ+xKMaUpfNDR5IbyNA5LJbaecoUVbmUcB1w==}
@@ -12549,7 +12439,7 @@ packages:
resolution: {integrity: sha512-uN7m/BzVKQnCUF/iW8jYea67v++2u7m5UgENbHRtdDVclOUP+FMPlCNdmk0h/ysGyo2tavMJEDqJAkJdRa1vMA==}
engines: {node: '>= 0.4'}
dependencies:
- call-bind: 1.0.2
+ call-bind: 1.0.7
define-properties: 1.2.1
es-abstract: 1.22.1
functions-have-names: 1.2.3
@@ -12606,13 +12496,15 @@ packages:
/get-func-name@2.0.2:
resolution: {integrity: sha512-8vXOvuE167CtIc3OyItco7N/dpRtBbYOsPsXCz7X/PMnlGjYjSGuZJgM1Y7mmew7BKf9BqvLX2tnOVy1BBUsxQ==}
- /get-intrinsic@1.2.1:
- resolution: {integrity: sha512-2DcsyfABl+gVHEfCOaTrWgyt+tb6MSEGmKq+kI5HwLbIYgjgmMcV8KQ41uaKz1xxUcn9tJtgFbQUEVcEbd0FYw==}
+ /get-intrinsic@1.2.4:
+ resolution: {integrity: sha512-5uYhsJH8VJBTv7oslg4BznJYhDoRI6waYCxMmCdnTrcCrHA/fCFKoTFz2JKKE0HdDFUF7/oQuhzumXJK7paBRQ==}
+ engines: {node: '>= 0.4'}
dependencies:
+ es-errors: 1.3.0
function-bind: 1.1.2
- has: 1.0.3
has-proto: 1.0.1
has-symbols: 1.0.3
+ hasown: 2.0.0
/get-package-type@0.1.0:
resolution: {integrity: sha512-pjzuKtY64GYfWizNAJ0fr9VqttZkNiK2iS430LtIHzjBEr6bX8Am2zm4sW4Ro5wjWW5cAlRL1qAMTcXbjNAO2Q==}
@@ -12670,8 +12562,8 @@ packages:
resolution: {integrity: sha512-2EmdH1YvIQiZpltCNgkuiUnyukzxM/R6NDJX31Ke3BG1Nq5b0S2PhX59UKi9vZpPDQVdqn+1IcaAwnzTT5vCjw==}
engines: {node: '>= 0.4'}
dependencies:
- call-bind: 1.0.2
- get-intrinsic: 1.2.1
+ call-bind: 1.0.7
+ get-intrinsic: 1.2.4
/get-tsconfig@4.7.2:
resolution: {integrity: sha512-wuMsz4leaj5hbGgg4IvDU0bqJagpftG5l5cXIAvo8uZrqn0NJqwtfupTN00VnkQJPcIRrxYrm1Ue24btpCha2A==}
@@ -12955,7 +12847,7 @@ packages:
/gopd@1.0.1:
resolution: {integrity: sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==}
dependencies:
- get-intrinsic: 1.2.1
+ get-intrinsic: 1.2.4
/got@11.8.5:
resolution: {integrity: sha512-o0Je4NvQObAuZPHLFoRSkdG2lTgtcynqymzg2Vupdx6PorhaT5MCbIyXG6d4D94kk8ZG57QeosgdiqfJWhEhlQ==}
@@ -13055,10 +12947,10 @@ packages:
resolution: {integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==}
engines: {node: '>=8'}
- /has-property-descriptors@1.0.0:
- resolution: {integrity: sha512-62DVLZGoiEBDHQyqG4w9xCuZ7eJEwNmJRWw2VY84Oedb7WFcA27fiEVe8oUQx9hAUJ4ekurquucTGwsyO1XGdQ==}
+ /has-property-descriptors@1.0.2:
+ resolution: {integrity: sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==}
dependencies:
- get-intrinsic: 1.2.1
+ es-define-property: 1.0.0
/has-proto@1.0.1:
resolution: {integrity: sha512-7qE+iP+O+bgF9clE5+UoBFzE65mlBiVj3tKCrlNQ0Ogwm0BjpT/gK4SlLYDMybDh5I3TCTKnPPa0oMG7JDYrhg==}
@@ -13068,8 +12960,8 @@ packages:
resolution: {integrity: sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==}
engines: {node: '>= 0.4'}
- /has-tostringtag@1.0.0:
- resolution: {integrity: sha512-kFjcSNhnlGV1kyoGk7OXKSawH5JOb/LzUc5w9B02hOTO0dfFRjbHQKvg1d6cf3HbeUmtU9VbbV3qzZ2Teh97WQ==}
+ /has-tostringtag@1.0.2:
+ resolution: {integrity: sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==}
engines: {node: '>= 0.4'}
dependencies:
has-symbols: 1.0.3
@@ -13208,7 +13100,7 @@ packages:
resolution: {integrity: sha512-6XMlxrAFX4UEEGxctfFnmrFaaZFNf9i5fNuV5wZ3WWQ4FVaNP1aX1LkX9j2mfEx1NpjeE/rL3nmgEn23GdFmrg==}
dependencies:
array.prototype.filter: 1.0.1
- call-bind: 1.0.2
+ call-bind: 1.0.7
/html-encoding-sniffer@4.0.0:
resolution: {integrity: sha512-Y22oTqIU4uuPgEemfz7NDJz6OeKf12Lsu+QC+s3BVpda64lTiMYCyGwg5ki4vFxkMwQdeZDl2adZoqUgdFuTgQ==}
@@ -13542,7 +13434,7 @@ packages:
resolution: {integrity: sha512-Y+R5hJrzs52QCG2laLn4udYVnxsfny9CpOhNhUvk/SSSVyF6T27FzRbF0sroPidSu3X8oEAkOn2K804mjpt6UQ==}
engines: {node: '>= 0.4'}
dependencies:
- get-intrinsic: 1.2.1
+ get-intrinsic: 1.2.4
has: 1.0.3
side-channel: 1.0.4
@@ -13608,14 +13500,14 @@ packages:
resolution: {integrity: sha512-8Q7EARjzEnKpt/PCD7e1cgUS0a6X8u5tdSiMqXhojOdoV9TsMsiO+9VLC5vAmO8N7/GmXn7yjR8qnA6bVAEzfA==}
engines: {node: '>= 0.4'}
dependencies:
- call-bind: 1.0.2
- has-tostringtag: 1.0.0
+ call-bind: 1.0.7
+ has-tostringtag: 1.0.2
/is-array-buffer@3.0.2:
resolution: {integrity: sha512-y+FyyR/w8vfIRq4eQcM1EYgSTnmHXPqaF+IgzgraytCFq5Xh8lllDVmAZolPJiZttZLeFSINPYMaEJ7/vWUa1w==}
dependencies:
- call-bind: 1.0.2
- get-intrinsic: 1.2.1
+ call-bind: 1.0.7
+ get-intrinsic: 1.2.4
is-typed-array: 1.1.12
/is-arrayish@0.2.1:
@@ -13629,7 +13521,7 @@ packages:
resolution: {integrity: sha512-Y1JXKrfykRJGdlDwdKlLpLyMIiWqWvuSd17TvZk68PLAOGOoF4Xyav1z0Xhoi+gCYjZVeC5SI+hYFOfvXmGRCA==}
engines: {node: '>= 0.4'}
dependencies:
- has-tostringtag: 1.0.0
+ has-tostringtag: 1.0.2
dev: true
/is-bigint@1.0.4:
@@ -13648,8 +13540,8 @@ packages:
resolution: {integrity: sha512-gDYaKHJmnj4aWxyj6YHyXVpdQawtVLHU5cb+eztPGczf6cjuTdwve5ZIEfgXqH4e57An1D1AKf8CZ3kYrQRqYA==}
engines: {node: '>= 0.4'}
dependencies:
- call-bind: 1.0.2
- has-tostringtag: 1.0.0
+ call-bind: 1.0.7
+ has-tostringtag: 1.0.2
/is-buffer@1.1.6:
resolution: {integrity: sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==}
@@ -13696,7 +13588,7 @@ packages:
resolution: {integrity: sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==}
engines: {node: '>= 0.4'}
dependencies:
- has-tostringtag: 1.0.0
+ has-tostringtag: 1.0.2
/is-decimal@1.0.4:
resolution: {integrity: sha512-RGdriMmQQvZ2aqaQq3awNA6dCGtKpiDFcOzrTWrDAT2MiWrKQVPmxLGHl7Y2nNu6led0kEyoX0enY0qXYsv9zw==}
@@ -13757,7 +13649,7 @@ packages:
/is-finalizationregistry@1.0.2:
resolution: {integrity: sha512-0by5vtUJs8iFQb5TYUHHPudOR+qXYIMKtiUzvLIZITZUjknFmziyBJuLhVRc+Ds0dREFlskDNJKYIdIzu/9pfw==}
dependencies:
- call-bind: 1.0.2
+ call-bind: 1.0.7
dev: true
/is-fullwidth-code-point@2.0.0:
@@ -13773,7 +13665,7 @@ packages:
resolution: {integrity: sha512-jsEjy9l3yiXEQ+PsXdmBwEPcOxaXWLspKdplFUVI9vq1iZgIekeC0L167qeu86czQaxed3q/Uzuw0swL0irL8A==}
engines: {node: '>= 0.4'}
dependencies:
- has-tostringtag: 1.0.0
+ has-tostringtag: 1.0.2
/is-glob@4.0.3:
resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==}
@@ -13813,7 +13705,7 @@ packages:
resolution: {integrity: sha512-E+zBKpQ2t6MEo1VsonYmluk9NxGrbzpeeLC2xIViuO2EjU2xsXsBPwTr3Ykv9l08UYEVEdWeRZNouaZqF6RN0w==}
engines: {node: '>= 0.4'}
dependencies:
- call-bind: 1.0.2
+ call-bind: 1.0.7
define-properties: 1.2.1
dev: false
@@ -13825,7 +13717,7 @@ packages:
resolution: {integrity: sha512-k1U0IRzLMo7ZlYIfzRu23Oh6MiIFasgpb9X76eqfFZAqwH44UI4KTBvBYIZ1dSL9ZzChTB9ShHfLkR4pdW5krQ==}
engines: {node: '>= 0.4'}
dependencies:
- has-tostringtag: 1.0.0
+ has-tostringtag: 1.0.2
/is-number@3.0.0:
resolution: {integrity: sha512-4cboCqIpliH+mAvFNegjZQ4kgKc3ZUhQVr3HvWbSh5q3WH2v82ct+T2Y1hdU5Gdtorx/cLifQjqCbL7bpznLTg==}
@@ -13886,8 +13778,8 @@ packages:
resolution: {integrity: sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==}
engines: {node: '>= 0.4'}
dependencies:
- call-bind: 1.0.2
- has-tostringtag: 1.0.0
+ call-bind: 1.0.7
+ has-tostringtag: 1.0.2
/is-running@2.1.0:
resolution: {integrity: sha512-mjJd3PujZMl7j+D395WTIO5tU5RIDBfVSRtRR4VOJou3H66E38UjbjvDGh3slJzPuolsb+yQFqwHNNdyp5jg3w==}
@@ -13899,7 +13791,7 @@ packages:
/is-shared-array-buffer@1.0.2:
resolution: {integrity: sha512-sqN2UDu1/0y6uvXyStCOzyhAjCSlHceFoMKJW8W9EU9cvic/QdsZ0kEU93HEy3IUEFZIiH/3w+AH/UQbPHNdhA==}
dependencies:
- call-bind: 1.0.2
+ call-bind: 1.0.7
/is-ssh@1.4.0:
resolution: {integrity: sha512-x7+VxdxOdlV3CYpjvRLBv5Lo9OJerlYanjwFrPR9fuGPjCiNiCzFgAWpiLAohSbsnH4ZAys3SBh+hq5rJosxUQ==}
@@ -13930,7 +13822,7 @@ packages:
resolution: {integrity: sha512-tE2UXzivje6ofPW7l23cjDOMa09gb7xlAqG6jG5ej6uPV32TlWP3NKPigtaGeHNu9fohccRYvIiZMfOOnOYUtg==}
engines: {node: '>= 0.4'}
dependencies:
- has-tostringtag: 1.0.0
+ has-tostringtag: 1.0.2
/is-subset@0.1.1:
resolution: {integrity: sha512-6Ybun0IkarhmEqxXCNw/C0bna6Zb/TkfUX9UbwJtK6ObwAVCxmAP308WWTHviM/zAqXk05cdhYsUsZeGQh99iw==}
@@ -13952,7 +13844,7 @@ packages:
resolution: {integrity: sha512-Z14TF2JNG8Lss5/HMqt0//T9JeHXttXy5pH/DBU4vi98ozO2btxzq9MwYDZYnKwU8nRsz/+GVFVRDq3DkVuSPg==}
engines: {node: '>= 0.4'}
dependencies:
- which-typed-array: 1.1.11
+ which-typed-array: 1.1.14
/is-typedarray@1.0.0:
resolution: {integrity: sha512-cyA56iCMHAh5CdzjJIa4aohJyeO1YbwLi3Jc35MmRU6poroFjIGZzUzupGiRPOjgHg9TLu43xbpwXk523fMxKA==}
@@ -13968,13 +13860,13 @@ packages:
/is-weakref@1.0.2:
resolution: {integrity: sha512-qctsuLZmIQ0+vSSMfoVvyFe2+GSEvnmZ2ezTup1SBse9+twCCeial6EEi3Nc2KFcf6+qz2FBPnjXsk8xhKSaPQ==}
dependencies:
- call-bind: 1.0.2
+ call-bind: 1.0.7
/is-weakset@2.0.2:
resolution: {integrity: sha512-t2yVvttHkQktwnNNmBQ98AhENLdPUTDTE21uPqAQ0ARwQfGeQKRVS0NNurH7bTf7RrvcVn1OOge45CnBeHCSmg==}
dependencies:
- call-bind: 1.0.2
- get-intrinsic: 1.2.1
+ call-bind: 1.0.7
+ get-intrinsic: 1.2.4
/is-windows@1.0.2:
resolution: {integrity: sha512-eXK1UInq2bPmjyX6e3VHIzMLobc4J94i4AWn+Hpq3OU5KkrRC96OAcR3PRJ/pGu6m8TRnBHP9dkXQVsT/COVIA==}
@@ -14131,7 +14023,7 @@ packages:
resolution: {integrity: sha512-DR33HMMr8EzwuRL8Y9D3u2BMj8+RqSE850jfGu59kS7tbmPLzGkZmVSfyCFSDxuZiEY6Rzt3T2NA/qU+NwVj1w==}
dependencies:
define-properties: 1.2.1
- get-intrinsic: 1.2.1
+ get-intrinsic: 1.2.4
has-symbols: 1.0.3
reflect.getprototypeof: 1.0.4
set-function-name: 2.0.1
@@ -16796,7 +16688,7 @@ packages:
resolution: {integrity: sha512-3cyDsyHgtmi7I7DfSSI2LDp6SK2lwvtbg0p0R1e0RvTqF5ceGx+K2dfSjm1bKDMVCFEDAQvy+o8c6a7VujOddw==}
engines: {node: '>= 0.4'}
dependencies:
- call-bind: 1.0.2
+ call-bind: 1.0.7
define-properties: 1.2.1
/object-keys@0.4.0:
@@ -16817,7 +16709,7 @@ packages:
resolution: {integrity: sha512-1mxKf0e58bvyjSCtKYY4sRe9itRk3PJpquJOjeIkz885CczcI4IvJJDLPS72oowuSh+pBxUFROpX+TU++hxhZQ==}
engines: {node: '>= 0.4'}
dependencies:
- call-bind: 1.0.2
+ call-bind: 1.0.7
define-properties: 1.2.1
has-symbols: 1.0.3
object-keys: 1.1.1
@@ -16826,7 +16718,7 @@ packages:
resolution: {integrity: sha512-leTPzo4Zvg3pmbQ3rDK69Rl8GQvIqMWubrkxONG9/ojtFE2rD9fjMKfSI5BxW3osRH1m6VdzmqK8oAY9aT4x5w==}
engines: {node: '>= 0.4'}
dependencies:
- call-bind: 1.0.2
+ call-bind: 1.0.7
define-properties: 1.2.1
es-abstract: 1.22.1
@@ -16834,7 +16726,7 @@ packages:
resolution: {integrity: sha512-UPbPHML6sL8PI/mOqPwsH4G6iyXcCGzLin8KvEPenOZN5lpCNBZZQ+V62vdjB1mQHrmqGQt5/OJzemUA+KJmEA==}
engines: {node: '>= 0.4'}
dependencies:
- call-bind: 1.0.2
+ call-bind: 1.0.7
define-properties: 1.2.1
es-abstract: 1.22.1
@@ -16843,7 +16735,7 @@ packages:
engines: {node: '>= 0.8'}
dependencies:
array.prototype.reduce: 1.0.4
- call-bind: 1.0.2
+ call-bind: 1.0.7
define-properties: 1.2.1
es-abstract: 1.22.1
dev: true
@@ -16851,10 +16743,10 @@ packages:
/object.groupby@1.0.1:
resolution: {integrity: sha512-HqaQtqLnp/8Bn4GL16cj+CUYbnpe1bh0TtEaWvybszDG4tgxCJuRpV8VGuvNaI1fAnI4lUJzDG55MXcOH4JZcQ==}
dependencies:
- call-bind: 1.0.2
+ call-bind: 1.0.7
define-properties: 1.2.1
es-abstract: 1.22.1
- get-intrinsic: 1.2.1
+ get-intrinsic: 1.2.4
dev: true
/object.hasown@1.1.2:
@@ -16882,7 +16774,7 @@ packages:
resolution: {integrity: sha512-aU6xnDFYT3x17e/f0IiiwlGPTy2jzMySGfUB4fq6z7CV8l85CWHDk5ErhyhpfDHhrOMwGFhSQkhMGHaIotA6Ng==}
engines: {node: '>= 0.4'}
dependencies:
- call-bind: 1.0.2
+ call-bind: 1.0.7
define-properties: 1.2.1
es-abstract: 1.22.1
@@ -17508,6 +17400,10 @@ packages:
engines: {node: '>=0.10.0'}
dev: false
+ /possible-typed-array-names@1.0.0:
+ resolution: {integrity: sha512-d7Uw+eZoloe0EHDIYoe+bQ5WXnGMOpmiZFTuMWCwpjzzkL2nTjcKiAk4hh8TjnGye2TwWOk3UXucZ+3rbmBa8Q==}
+ engines: {node: '>= 0.4'}
+
/postcss-cli@8.3.1(postcss@8.4.35):
resolution: {integrity: sha512-leHXsQRq89S3JC9zw/tKyiVV2jAhnfQe0J8VI4eQQbUjwIe0XxVqLrR+7UsahF1s9wi4GlqP6SJ8ydf44cgF2Q==}
engines: {node: '>=10'}
@@ -17532,12 +17428,6 @@ packages:
- ts-node
dev: false
- /postcss-combine-media-query@1.0.1:
- resolution: {integrity: sha512-DFSXuYy3ltDkC2esIF0ORoS9DCjlyfWhtoQkG9brZMuJY1ABOER95sm3dvccR6IEgSrYX4RgqiHD4Lq3JGrxyw==}
- dependencies:
- postcss: 7.0.39
- dev: true
-
/postcss-import@15.1.0(postcss@8.4.35):
resolution: {integrity: sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==}
engines: {node: '>=14.0.0'}
@@ -17830,10 +17720,10 @@ packages:
engines: {node: '>= 0.4'}
dependencies:
array.prototype.map: 1.0.5
- call-bind: 1.0.2
+ call-bind: 1.0.7
define-properties: 1.2.1
es-abstract: 1.22.1
- get-intrinsic: 1.2.1
+ get-intrinsic: 1.2.4
iterate-value: 1.0.2
dev: false
@@ -18327,26 +18217,27 @@ packages:
/react-refresh@0.14.0:
resolution: {integrity: sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==}
engines: {node: '>=0.10.0'}
+ dev: false
- /react-router-dom@6.21.3(react-dom@18.2.0)(react@18.2.0):
- resolution: {integrity: sha512-kNzubk7n4YHSrErzjLK72j0B5i969GsuCGazRl3G6j1zqZBLjuSlYBdVdkDOgzGdPIffUOc9nmgiadTEVoq91g==}
+ /react-router-dom@6.22.1(react-dom@18.2.0)(react@18.2.0):
+ resolution: {integrity: sha512-iwMyyyrbL7zkKY7MRjOVRy+TMnS/OPusaFVxM2P11x9dzSzGmLsebkCvYirGq0DWB9K9hOspHYYtDz33gE5Duw==}
engines: {node: '>=14.0.0'}
peerDependencies:
react: '>=16.8'
react-dom: '>=16.8'
dependencies:
- '@remix-run/router': 1.14.2
+ '@remix-run/router': 1.15.1
react: 18.2.0
react-dom: 18.2.0(react@18.2.0)
- react-router: 6.21.3(react@18.2.0)
+ react-router: 6.22.1(react@18.2.0)
- /react-router@6.21.3(react@18.2.0):
- resolution: {integrity: sha512-a0H638ZXULv1OdkmiK6s6itNhoy33ywxmUFT/xtSoVyf9VnC7n7+VT4LjVzdIHSaF5TIh9ylUgxMXksHTgGrKg==}
+ /react-router@6.22.1(react@18.2.0):
+ resolution: {integrity: sha512-0pdoRGwLtemnJqn1K0XHUbnKiX0S4X8CgvVVmHGOWmofESj31msHo/1YiqcJWK7Wxfq2a4uvvtS01KAQyWK/CQ==}
engines: {node: '>=14.0.0'}
peerDependencies:
react: '>=16.8'
dependencies:
- '@remix-run/router': 1.14.2
+ '@remix-run/router': 1.15.1
react: 18.2.0
/react-runner@1.0.3(react-dom@18.2.0)(react@18.2.0):
@@ -18730,10 +18621,10 @@ packages:
resolution: {integrity: sha512-ECkTw8TmJwW60lOTR+ZkODISW6RQ8+2CL3COqtiJKLd6MmB45hN51HprHFziKLGkAuTGQhBb91V8cy+KHlaCjw==}
engines: {node: '>= 0.4'}
dependencies:
- call-bind: 1.0.2
+ call-bind: 1.0.7
define-properties: 1.2.1
es-abstract: 1.22.1
- get-intrinsic: 1.2.1
+ get-intrinsic: 1.2.4
globalthis: 1.0.3
which-builtin-type: 1.1.3
dev: true
@@ -18769,13 +18660,14 @@ packages:
safe-regex: 1.1.0
dev: false
- /regexp.prototype.flags@1.5.0:
- resolution: {integrity: sha512-0SutC3pNudRKgquxGoRGIz946MZVHqbNfPjBdxeOhBrdgDKlRoXmYLQN9xRbrR09ZXWeGAdPuif7egofn6v5LA==}
+ /regexp.prototype.flags@1.5.2:
+ resolution: {integrity: sha512-NcDiDkTLuPR+++OCKB0nWafEmhg/Da8aUPLPMQbK+bxKKCm1/S5he+AqYa4PlMCVBalb4/yxIRub6qkEx5yJbw==}
engines: {node: '>= 0.4'}
dependencies:
- call-bind: 1.0.2
+ call-bind: 1.0.7
define-properties: 1.2.1
- functions-have-names: 1.2.3
+ es-errors: 1.3.0
+ set-function-name: 2.0.1
/regexpu-core@5.3.2:
resolution: {integrity: sha512-RAM5FlZz+Lhmo7db9L298p2vHP5ZywrVXmVXpmAD9GuL5MPH6t9ROw1iA/wfHkQ76Qe7AaPF0nGuim96/IrQMQ==}
@@ -19151,8 +19043,8 @@ packages:
resolution: {integrity: sha512-6XbUAseYE2KtOuGueyeobCySj9L4+66Tn6KQMOPQJrAJEowYKW/YR/MGJZl7FdydUdaFu4LYyDZjxf4/Nmo23Q==}
engines: {node: '>=0.4'}
dependencies:
- call-bind: 1.0.2
- get-intrinsic: 1.2.1
+ call-bind: 1.0.7
+ get-intrinsic: 1.2.4
has-symbols: 1.0.3
isarray: 2.0.5
@@ -19165,8 +19057,8 @@ packages:
/safe-regex-test@1.0.0:
resolution: {integrity: sha512-JBUUzyOgEwXQY1NuPtvcj/qcBDbDmEvWufhlnXZIm75DEHp+afM1r1ujJpJsV/gSM4t59tpDyPi1sd6ZaPFfsA==}
dependencies:
- call-bind: 1.0.2
- get-intrinsic: 1.2.1
+ call-bind: 1.0.7
+ get-intrinsic: 1.2.4
is-regex: 1.1.4
/safe-regex@1.1.0:
@@ -19356,14 +19248,24 @@ packages:
/set-blocking@2.0.0:
resolution: {integrity: sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==}
+ /set-function-length@1.2.1:
+ resolution: {integrity: sha512-j4t6ccc+VsKwYHso+kElc5neZpjtq9EnRICFZtWyBsLojhmeF/ZBd/elqm22WJh/BziDe/SBiOeAt0m2mfLD0g==}
+ engines: {node: '>= 0.4'}
+ dependencies:
+ define-data-property: 1.1.4
+ es-errors: 1.3.0
+ function-bind: 1.1.2
+ get-intrinsic: 1.2.4
+ gopd: 1.0.1
+ has-property-descriptors: 1.0.2
+
/set-function-name@2.0.1:
resolution: {integrity: sha512-tMNCiqYVkXIZgc2Hnoy2IvC/f8ezc5koaRFkCjrpWzGpCd3qbZXPzVy9MAZzK1ch/X0jvSkojys3oqJN0qCmdA==}
engines: {node: '>= 0.4'}
dependencies:
- define-data-property: 1.1.0
+ define-data-property: 1.1.4
functions-have-names: 1.2.3
- has-property-descriptors: 1.0.0
- dev: true
+ has-property-descriptors: 1.0.2
/set-value@2.0.1:
resolution: {integrity: sha512-JxHc1weCN68wRY0fhCoXpyK55m/XPHafOmK4UWD7m2CI14GMcFypt4w/0+NV5f/ZMby2F6S2wwA7fgynh9gWSw==}
@@ -19445,8 +19347,8 @@ packages:
/side-channel@1.0.4:
resolution: {integrity: sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==}
dependencies:
- call-bind: 1.0.2
- get-intrinsic: 1.2.1
+ call-bind: 1.0.7
+ get-intrinsic: 1.2.4
object-inspect: 1.12.3
/signal-exit@3.0.7:
@@ -19899,13 +19801,13 @@ packages:
/string.prototype.matchall@4.0.8:
resolution: {integrity: sha512-6zOCOcJ+RJAQshcTvXPHoxoQGONa3e/Lqx90wUA+wEzX78sg5Bo+1tQo4N0pohS0erG9qtCqJDjNCQBjeWVxyg==}
dependencies:
- call-bind: 1.0.2
+ call-bind: 1.0.7
define-properties: 1.2.1
es-abstract: 1.22.1
- get-intrinsic: 1.2.1
+ get-intrinsic: 1.2.4
has-symbols: 1.0.3
internal-slot: 1.0.5
- regexp.prototype.flags: 1.5.0
+ regexp.prototype.flags: 1.5.2
side-channel: 1.0.4
dev: true
@@ -19913,21 +19815,21 @@ packages:
resolution: {integrity: sha512-p6TmeT1T3411M8Cgg9wBTMRtY2q9+PNy9EV1i2lIXUN/btt763oIfxwN3RR8VU6wHX8j/1CFy0L+YuThm6bgOg==}
engines: {node: '>= 0.4'}
dependencies:
- call-bind: 1.0.2
+ call-bind: 1.0.7
define-properties: 1.2.1
es-abstract: 1.22.1
/string.prototype.trimend@1.0.6:
resolution: {integrity: sha512-JySq+4mrPf9EsDBEDYMOb/lM7XQLulwg5R/m1r0PXEFqrV0qHvl58sdTilSXtKOflCsK2E8jxf+GKC0T07RWwQ==}
dependencies:
- call-bind: 1.0.2
+ call-bind: 1.0.7
define-properties: 1.2.1
es-abstract: 1.22.1
/string.prototype.trimstart@1.0.6:
resolution: {integrity: sha512-omqjMDaY92pbn5HOX7f9IccLA+U1tA9GvtU4JrodiXFfYB7jPzzHpRzpglLAjtUV6bB557zwClJezTqnAiYnQA==}
dependencies:
- call-bind: 1.0.2
+ call-bind: 1.0.7
define-properties: 1.2.1
es-abstract: 1.22.1
@@ -20825,15 +20727,15 @@ packages:
resolution: {integrity: sha512-Y8KTSIglk9OZEr8zywiIHG/kmQ7KWyjseXs1CbSo8vC42w7hg2HgYTxSWwP0+is7bWDc1H+Fo026CpHFwm8tkw==}
engines: {node: '>= 0.4'}
dependencies:
- call-bind: 1.0.2
- get-intrinsic: 1.2.1
+ call-bind: 1.0.7
+ get-intrinsic: 1.2.4
is-typed-array: 1.1.12
/typed-array-byte-length@1.0.0:
resolution: {integrity: sha512-Or/+kvLxNpeQ9DtSydonMxCx+9ZXOswtwJn17SNLvhptaXYDJvkFFP5zbfU/uLmvnBJlI4yrnXRxpdWH/M5tNA==}
engines: {node: '>= 0.4'}
dependencies:
- call-bind: 1.0.2
+ call-bind: 1.0.7
for-each: 0.3.3
has-proto: 1.0.1
is-typed-array: 1.1.12
@@ -20842,8 +20744,8 @@ packages:
resolution: {integrity: sha512-RD97prjEt9EL8YgAgpOkf3O4IF9lhJFr9g0htQkm0rchFp/Vx7LW5Q8fSXXub7BXAODyUQohRMyOc3faCPd0hg==}
engines: {node: '>= 0.4'}
dependencies:
- available-typed-arrays: 1.0.5
- call-bind: 1.0.2
+ available-typed-arrays: 1.0.7
+ call-bind: 1.0.7
for-each: 0.3.3
has-proto: 1.0.1
is-typed-array: 1.1.12
@@ -20851,7 +20753,7 @@ packages:
/typed-array-length@1.0.4:
resolution: {integrity: sha512-KjZypGq+I/H7HI5HlOoGHkWUUGq+Q0TPhQurLbyrVrvnKTBgzLhIJ7j6J/XTQOi0d1RjyZ0wdas8bKs2p0x3Ng==}
dependencies:
- call-bind: 1.0.2
+ call-bind: 1.0.7
for-each: 0.3.3
is-typed-array: 1.1.12
@@ -20889,7 +20791,7 @@ packages:
/unbox-primitive@1.0.2:
resolution: {integrity: sha512-61pPlCD9h51VoreyJ0BReideM3MDKMKnh6+V9L08331ipq6Q8OFXZYiqP6n/tbHx4s5I9uRhcye6BrbkizkBDw==}
dependencies:
- call-bind: 1.0.2
+ call-bind: 1.0.7
has-bigints: 1.0.2
has-symbols: 1.0.3
which-boxed-primitive: 1.0.2
@@ -21125,7 +21027,7 @@ packages:
is-arguments: 1.1.1
is-generator-function: 1.0.10
is-typed-array: 1.1.12
- which-typed-array: 1.1.11
+ which-typed-array: 1.1.14
/utila@0.4.0:
resolution: {integrity: sha512-Z0DbgELS9/L/75wZbro8xAnT50pBVFQZ+hUEueGDU5FN51YSCYM+jdxsfCiHjwNP/4LCDD0i/graKpeBnOXKRA==}
@@ -21480,7 +21382,7 @@ packages:
engines: {node: '>= 0.4'}
dependencies:
function.prototype.name: 1.1.5
- has-tostringtag: 1.0.0
+ has-tostringtag: 1.0.2
is-async-function: 2.0.0
is-date-object: 1.0.5
is-finalizationregistry: 1.0.2
@@ -21490,7 +21392,7 @@ packages:
isarray: 2.0.5
which-boxed-primitive: 1.0.2
which-collection: 1.0.1
- which-typed-array: 1.1.11
+ which-typed-array: 1.1.14
dev: true
/which-collection@1.0.1:
@@ -21504,15 +21406,15 @@ packages:
/which-module@2.0.0:
resolution: {integrity: sha512-B+enWhmw6cjfVC7kS8Pj9pCrKSc5txArRyaYGe088shv/FGWH+0Rjx/xPgtsWfsUtS27FkP697E4DDhgrgoc0Q==}
- /which-typed-array@1.1.11:
- resolution: {integrity: sha512-qe9UWWpkeG5yzZ0tNYxDmd7vo58HDBc39mZ0xWWpolAGADdFOzkfamWLDxkOWcvHQKVmdTyQdLD4NOfjLWTKew==}
+ /which-typed-array@1.1.14:
+ resolution: {integrity: sha512-VnXFiIW8yNn9kIHN88xvZ4yOWchftKDsRJ8fEPacX/wl1lOvBrhsJ/OeJCXq7B0AaijRuqgzSKalJoPk+D8MPg==}
engines: {node: '>= 0.4'}
dependencies:
- available-typed-arrays: 1.0.5
- call-bind: 1.0.2
+ available-typed-arrays: 1.0.7
+ call-bind: 1.0.7
for-each: 0.3.3
gopd: 1.0.1
- has-tostringtag: 1.0.0
+ has-tostringtag: 1.0.2
/which@1.3.1:
resolution: {integrity: sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==}
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index b02f0b0d8d9901..1df4b976eee7ea 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -5,4 +5,3 @@ packages:
- 'packages-internal/*'
- 'docs'
- 'test'
- - 'apps/*'
diff --git a/scripts/zero-render-mui-demos.mjs b/scripts/zero-render-mui-demos.mjs
new file mode 100644
index 00000000000000..6954ca0bcc359f
--- /dev/null
+++ b/scripts/zero-render-mui-demos.mjs
@@ -0,0 +1,104 @@
+import path from 'path';
+import fse from 'fs-extra';
+
+function capitalize(string) {
+ if (typeof string !== 'string') {
+ throw new Error('`capitalize(string)` expects a string argument.');
+ }
+
+ return string.charAt(0).toUpperCase() + string.slice(1);
+}
+
+function titleCase(str) {
+ const result = str.replace(/([A-Z])/g, ' $1');
+ return result.charAt(0).toUpperCase() + result.slice(1);
+}
+
+const args = process.argv.slice(2);
+
+async function run() {
+ if (!args[0]) {
+ throw new Error(
+ 'Please provide a string of `react-` from the `docs/pages/material-ui/*` directory.',
+ );
+ }
+
+ // Find the demos of the component
+ const docSource = await fse.readFile(
+ path.join(process.cwd(), `docs/pages/material-ui/${args[0]}.js`),
+ 'utf8',
+ );
+ const matches = docSource.match(/\/([a-z-]+)\.md\?/);
+ const dataFolderName = matches[1];
+
+ const filenames = await fse.readdir(
+ path.join(process.cwd(), `docs/data/material/components/${dataFolderName}`),
+ );
+ const tsFiles = filenames.filter((filename) => filename.endsWith('.tsx'));
+
+ const renders = tsFiles.map((filename) => {
+ const componentName = filename.replace('.tsx', '');
+ return `
+ `;
+ });
+ /**
+ * Zero-Runtime Next.js App
+ */
+ // Create import and render statements
+ const nextImports = tsFiles.map((filename) => {
+ const componentName = filename.replace('.tsx', '');
+ return `import ${componentName} from '../../../../../../docs/data/material/components/${dataFolderName}/${componentName}';`;
+ });
+ const nextFileContent = `'use client';
+import * as React from 'react';
+${nextImports.join('\n')}
+
+export default function ${capitalize(dataFolderName)}() {
+ return (
+
+${renders.join('\n')}
+
+ );
+}
+`;
+
+ // Create the page in zero-runtime apps
+ await fse.mkdirp(`apps/zero-runtime-next-app/src/app/material-ui/${args[0]}`);
+ await fse.writeFile(
+ path.join(process.cwd(), `apps/zero-runtime-next-app/src/app/material-ui/${args[0]}/page.tsx`),
+ nextFileContent,
+ );
+
+ /**
+ * Zero-Runtime Vite App
+ */
+ const viteImports = tsFiles.map((filename) => {
+ const componentName = filename.replace('.tsx', '');
+ return `import ${componentName} from '../../../../../docs/data/material/components/${dataFolderName}/${componentName}.tsx';`;
+ });
+ const viteFileContent = `import * as React from 'react';
+import MaterialUILayout from '../../Layout';
+${viteImports.join('\n')}
+
+export default function ${capitalize(dataFolderName)}() {
+ return (
+
+
+ );
+}
+`;
+ // Create the page in zero-runtime apps
+ await fse.mkdirp(`apps/zero-runtime-vite-app/src/pages/material-ui`);
+ await fse.writeFile(
+ path.join(process.cwd(), `apps/zero-runtime-vite-app/src/pages/material-ui/${args[0]}.tsx`),
+ viteFileContent,
+ );
+}
+
+run();
diff --git a/scripts/zero-runtime-license.mjs b/scripts/zero-runtime-license.mjs
new file mode 100644
index 00000000000000..121cccded534c1
--- /dev/null
+++ b/scripts/zero-runtime-license.mjs
@@ -0,0 +1,11 @@
+import * as path from 'node:path';
+import fse from 'fs-extra';
+import { getWorkspaceRoot } from './utils.mjs';
+
+async function run() {
+ const licenseFile = path.join(getWorkspaceRoot(), 'LICENSE');
+ const cwd = process.cwd();
+ await fse.copyFile(licenseFile, path.join(cwd, 'LICENSE'));
+}
+
+run();
diff --git a/test/e2e/fixtures/TextareaAutosize/TextareaAutosizeSuspense.tsx b/test/e2e/fixtures/TextareaAutosize/TextareaAutosizeSuspense.tsx
index 00058ada505ad3..989d8109c1d82f 100644
--- a/test/e2e/fixtures/TextareaAutosize/TextareaAutosizeSuspense.tsx
+++ b/test/e2e/fixtures/TextareaAutosize/TextareaAutosizeSuspense.tsx
@@ -8,7 +8,7 @@ function LazyRoute() {
if (!isDone) {
// Force React to show fallback suspense
throw new Promise((resolve) => {
- window.setTimeout(resolve, 1);
+ setTimeout(resolve, 1);
setIsDone(true);
});
}
diff --git a/test/regressions/webpack.config.js b/test/regressions/webpack.config.js
index f01402c61451df..b4472eedd1cfe4 100644
--- a/test/regressions/webpack.config.js
+++ b/test/regressions/webpack.config.js
@@ -33,7 +33,7 @@ module.exports = {
rules: [
{
test: /\.(js|ts|tsx)$/,
- // prism.js blocks @mui/markdown/prism from being interpreted as ESM in this build.
+ // prism.js blocks @mui/internal-markdown/prism from being interpreted as ESM in this build.
exclude: /node_modules|prism\.js/,
loader: 'babel-loader',
options: {
diff --git a/tsconfig.json b/tsconfig.json
index 5e860876aa929b..1dcf1925a54a49 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -18,8 +18,8 @@
"@mui/material/*": ["./packages/mui-material/src/*"],
"@mui/lab": ["./packages/mui-lab/src"],
"@mui/lab/*": ["./packages/mui-lab/src/*"],
- "@mui/markdown": ["./packages/markdown"],
- "@mui/markdown/*": ["./packages/markdown/*"],
+ "@mui/internal-markdown": ["./packages/markdown"],
+ "@mui/internal-markdown/*": ["./packages/markdown/*"],
"@mui/styled-engine": ["./packages/mui-styled-engine/src"],
"@mui/styled-engine/*": ["./packages/mui-styled-engine/src/*"],
"@mui/styled-engine-sc": ["./packages/mui-styled-engine-sc/src"],
diff --git a/tsup.config.ts b/tsup.config.ts
index 9891894d481fd0..10795948887c53 100644
--- a/tsup.config.ts
+++ b/tsup.config.ts
@@ -1,5 +1,18 @@
+import * as path from 'node:path';
+import fs from 'node:fs';
import { defineConfig } from 'tsup';
+const pkgJson = JSON.parse(fs.readFileSync(path.join(process.cwd(), 'package.json'), 'utf8'));
+
+const licenseText = `/**
+ * ${pkgJson.name} v${pkgJson.version}
+ *
+ * @license ${pkgJson.license}
+ * This source code is licensed under the ${pkgJson.license} license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+ `;
+
export default defineConfig({
entry: ['src/index.ts'],
outDir: 'build',
@@ -11,4 +24,7 @@ export default defineConfig({
cjsInterop: true,
dts: true,
silent: true,
+ banner: {
+ js: licenseText,
+ },
});
diff --git a/webpackBaseConfig.js b/webpackBaseConfig.js
index 9262773b3678c6..c9530cd25ee3bf 100644
--- a/webpackBaseConfig.js
+++ b/webpackBaseConfig.js
@@ -9,7 +9,7 @@ module.exports = {
resolve: {
modules: [__dirname, 'node_modules'],
alias: {
- '@mui/markdown': path.resolve(__dirname, './packages/markdown'),
+ '@mui/internal-markdown': path.resolve(__dirname, './packages/markdown'),
'@mui/material': path.resolve(__dirname, './packages/mui-material/src'),
'@mui/docs': path.resolve(__dirname, './packages/mui-docs/src'),
'@mui/icons-material': path.resolve(__dirname, './packages/mui-icons-material/lib/esm'),
+
+
+```
diff --git a/docs/data/system/getting-started/support/support.md b/docs/data/system/getting-started/support/support.md
index a44a0cee1b98e8..34c5cf75dd4268 100644
--- a/docs/data/system/getting-started/support/support.md
+++ b/docs/data/system/getting-started/support/support.md
@@ -39,9 +39,9 @@ You have a few possible options to provide it:
- You can use a starter React template to build a reproduction case with [JavaScript](https://stackblitz.com/github/stackblitz/starters/tree/main/react) or [TypeScript](https://stackblitz.com/github/stackblitz/starters/tree/main/react-ts).
-## Stack Overflow
+## Stack Overflow
-We use Stack Overflow for how-to questions. Answers are crowdsourced from expert developers in the MUI System community as well as MUI System maintainers.
+We use Stack Overflow for how-to questions. Answers are crowdsourced from expert developers in the MUI System community as well as MUI System maintainers.
You can search through existing questions and answers to see if someone has asked a similar question using the [mui-system tags](https://stackoverflow.com/questions/tagged/material-ui):
@@ -84,7 +84,7 @@ Our tools are used by thousands of developers and teams all around the world, ma
You can join Discord to engage in lively discussions, share your projects, and interact with developers just like you from all around the world. We'd love for you to join us!
:::warning
-How-to questions are not accepted on Discord, they should be asked on [Stack Overflow](#stack-overflow).
+How-to questions are not accepted on Discord, they should be asked on [Stack Overflow](#stack-overflow).
:::
## Custom work
diff --git a/docs/lib/sourcing.ts b/docs/lib/sourcing.ts
index b35f5413a5cf2e..3c3678f9810ea4 100644
--- a/docs/lib/sourcing.ts
+++ b/docs/lib/sourcing.ts
@@ -1,6 +1,6 @@
import fs from 'fs';
import path from 'path';
-import { getHeaders } from '@mui/markdown';
+import { getHeaders } from '@mui/internal-markdown';
const blogDir = path.join(process.cwd(), 'pages/blog');
diff --git a/docs/next.config.mjs b/docs/next.config.mjs
index 87531b1a2cf1c8..a0ec4b89d6df8c 100644
--- a/docs/next.config.mjs
+++ b/docs/next.config.mjs
@@ -129,14 +129,33 @@ export default withDocsInfra({
test: /\.md$/,
oneOf: [
{
- resourceQuery: /@mui\/markdown/,
+ resourceQuery: /muiMarkdown/,
use: [
options.defaultLoaders.babel,
{
- loader: require.resolve('@mui/markdown/loader'),
+ loader: require.resolve('@mui/internal-markdown/loader'),
options: {
+ workspaceRoot,
ignoreLanguagePages: LANGUAGES_IGNORE_PAGES,
languagesInProgress: LANGUAGES_IN_PROGRESS,
+ packages: [
+ {
+ productId: 'material-ui',
+ paths: [
+ path.join(workspaceRoot, 'packages/mui-base/src'),
+ path.join(workspaceRoot, 'packages/mui-lab/src'),
+ path.join(workspaceRoot, 'packages/mui-material/src'),
+ ],
+ },
+ {
+ productId: 'base-ui',
+ paths: [path.join(workspaceRoot, 'packages/mui-base/src')],
+ },
+ {
+ productId: 'joy-ui',
+ paths: [path.join(workspaceRoot, 'packages/mui-joy/src')],
+ },
+ ],
env: {
SOURCE_CODE_REPO: options.config.env.SOURCE_CODE_REPO,
LIB_VERSION: options.config.env.LIB_VERSION,
diff --git a/docs/package.json b/docs/package.json
index d58ecec1b0b5cd..e74f4b0ea4ba69 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -36,7 +36,7 @@
"@mui/icons-material": "workspace:^",
"@mui/joy": "workspace:*",
"@mui/lab": "workspace:*",
- "@mui/markdown": "workspace:^",
+ "@mui/internal-markdown": "workspace:^",
"@mui/material": "workspace:^",
"@mui/material-next": "workspace:*",
"@mui/styled-engine": "workspace:^",
diff --git a/docs/pages/_app.js b/docs/pages/_app.js
index e8c07a174183e1..05916ec32e58a6 100644
--- a/docs/pages/_app.js
+++ b/docs/pages/_app.js
@@ -28,6 +28,7 @@ import findActivePage from 'docs/src/modules/utils/findActivePage';
import { pathnameToLanguage } from 'docs/src/modules/utils/helpers';
import getProductInfoFromUrl from 'docs/src/modules/utils/getProductInfoFromUrl';
import { DocsProvider } from '@mui/docs/DocsProvider';
+import { mapTranslations } from '@mui/docs/i18n';
import './global.css';
import '../public/static/components-gallery/base-theme.css';
import config from '../config';
@@ -295,7 +296,11 @@ function AppWrapper(props) {
-
+
1534 out of 1589 answered.
diff --git a/docs/pages/blog/2021-q1-update.js b/docs/pages/blog/2021-q1-update.js index 6ed19c06da619c..fd97f7e345842b 100644 --- a/docs/pages/blog/2021-q1-update.js +++ b/docs/pages/blog/2021-q1-update.js @@ -1,6 +1,6 @@ import * as React from 'react'; import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog'; -import { docs } from './2021-q1-update.md?@mui/markdown'; +import { docs } from './2021-q1-update.md?muiMarkdown'; export default function Page() { returnIt seems that React keeps taking market share in the frontend ecosystem; it's growing faster than Vue or Angular. - Most indicators point to it: [Stack Overflow questions](https://insights.stackoverflow.com/trends?tags=vue.js%2Creactjs%2Cangular), [stars](https://bestofjs.org/projects?sort=monthly), [downloads](https://npm-stat.com/charts.html?package=react-dom,@angular/core,vue), [Traffic on the documentation](https://www.similarweb.com/website/reactjs.org/?competitors=vuejs.org). + Most indicators point to it: [Stack Overflow questions](https://insights.stackoverflow.com/trends?tags=vue.js%2Creactjs%2Cangular), [stars](https://bestofjs.org/projects?sort=monthly), [downloads](https://npm-stat.com/charts.html?package=react-dom,@angular/core,vue), [Traffic on the documentation](https://www.similarweb.com/website/reactjs.org/?competitors=vuejs.org). Our strategy to focus on React only seems to be paying off. - ⭐️ From 63.8k to 67.2k stars, leave us yours [🌟](https://github.com/mui/material-ui). diff --git a/docs/pages/blog/2021-q2-update.js b/docs/pages/blog/2021-q2-update.js index 5afab0a64d20c5..7c5e2751324c90 100644 --- a/docs/pages/blog/2021-q2-update.js +++ b/docs/pages/blog/2021-q2-update.js @@ -1,6 +1,6 @@ import * as React from 'react'; import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog'; -import { docs } from './2021-q2-update.md?@mui/markdown'; +import { docs } from './2021-q2-update.md?muiMarkdown'; export default function Page() { return
This year, one of our highest priorities has been to create a central hub for the MUI community.
-Up until now, our community has been scattered across discussions and interactions on [X](https://twitter.com/MUI_hq), [LinkedIn](https://linkedin.com/company/mui), [GitHub](https://github.com/mui), and [Stack Overflow](https://stackoverflow.com/questions/tagged/material-ui).
+Up until now, our community has been scattered across discussions and interactions on [X](https://twitter.com/MUI_hq), [LinkedIn](https://linkedin.com/company/mui), [GitHub](https://github.com/mui), and [Stack Overflow](https://stackoverflow.com/questions/tagged/material-ui).
That's why we've officially launched our [Discord Server](https://mui.com/r/discord/)—and we'd love for you to be a part of our community!
diff --git a/docs/pages/blog/docs-restructure-2022.js b/docs/pages/blog/docs-restructure-2022.js
index 75b4dad5bb69db..33c0378c424688 100644
--- a/docs/pages/blog/docs-restructure-2022.js
+++ b/docs/pages/blog/docs-restructure-2022.js
@@ -1,6 +1,6 @@
import * as React from 'react';
import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
-import { docs } from './docs-restructure-2022.md?@mui/markdown';
+import { docs } from './docs-restructure-2022.md?muiMarkdown';
export default function Page() {
return
+
+
## kbd tag
Make sure to include the `class="key"` declaration in each individual `kbd` element.
diff --git a/docs/pages/experiments/website/branding-theme-test.tsx b/docs/pages/experiments/website/branding-theme-test.tsx
new file mode 100644
index 00000000000000..eb6ce1645af27b
--- /dev/null
+++ b/docs/pages/experiments/website/branding-theme-test.tsx
@@ -0,0 +1,54 @@
+import * as React from 'react';
+import Stack from '@mui/material/Stack';
+import Chip from '@mui/material/Chip';
+import Button from '@mui/material/Button';
+import Divider from '@mui/material/Divider';
+import Head from 'docs/src/modules/components/Head';
+import BrandingCssVarsProvider from 'docs/src/BrandingCssVarsProvider';
+import AppHeader from 'docs/src/layouts/AppHeader';
+import Section from 'docs/src/layouts/Section';
+import AppFooter from 'docs/src/layouts/AppFooter';
+
+export default function BrandingThemeTest() {
+ return (
+ Primary
+ +```js +const primary = { + 50: '#F4FAFF', + 100: '#DDF1FF', + 200: '#ADDBFF', +}; + +extendTheme({ + colorSchemes: { + light: { + palette: { + primary: { + ...primary, + plainColor: `var(--joy-palette-primary-600)`, + plainHoverBg: `var(--joy-palette-primary-100)`, + plainActiveBg: `var(--joy-palette-primary-200)`, + plainDisabledColor: `var(--joy-palette-primary-200)`, + }, + }, + }, + }, +}); +``` + +slots prop instead. This prop will be removed in v7. How to migrate."
},
"componentsProps": {
"type": {
"name": "shape",
"description": "{ input?: func| object, mark?: func
| object, markLabel?: func
| object, rail?: func
| object, root?: func
| object, thumb?: func
| object, track?: func
| object, valueLabel?: func
| { children?: element, className?: string, open?: bool, style?: object, value?: number, valueLabelDisplay?: 'auto'
| 'off'
| 'on' } }" }, - "default": "{}" + "default": "{}", + "deprecated": true, + "deprecationInfo": "use the
slotProps prop instead. This prop will be removed in v7. How to migrate."
},
"defaultValue": {
"type": { "name": "union", "description": "Array<number>| number" } diff --git a/docs/pages/material-ui/customization/breakpoints.js b/docs/pages/material-ui/customization/breakpoints.js index 3775eba2144f64..32016c39448d4a 100644 --- a/docs/pages/material-ui/customization/breakpoints.js +++ b/docs/pages/material-ui/customization/breakpoints.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/material/customization/breakpoints/breakpoints.md?@mui/markdown'; +import * as pageProps from 'docs/data/material/customization/breakpoints/breakpoints.md?muiMarkdown'; export default function Page() { return
action is provided"
},
+ "colorError": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "color=\"error\""
+ },
+ "colorInfo": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "color=\"info\""
+ },
+ "colorSuccess": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "color=\"success\""
+ },
+ "colorWarning": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "color=\"warning\""
+ },
"filled": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
@@ -51,22 +71,24 @@
"filledError": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
- "conditions": "variant=\"filled\" and color=\"error\""
+ "conditions": "variant=\"filled\" and color=\"error\"",
+ "deprecationInfo": "Combine the .MuiAlert-filled and .MuiAlert-colorError classes instead. How to migrate."
},
"filledInfo": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
- "conditions": "variant=\"filled\" and color=\"info\""
+ "conditions": "variant=\"filled\" and color=\"info\"",
+ "deprecationInfo": "Combine the .MuiAlert-filled and .MuiAlert-colorInfo classes instead. How to migrate."
},
"filledSuccess": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
- "conditions": "variant=\"filled\" and color=\"success\""
+ "conditions": "variant=\"filled\" and color=\"success\"",
+ "deprecationInfo": "Combine the .MuiAlert-filled and .MuiAlert-colorSuccess classes instead. How to migrate."
},
"filledWarning": {
- "description": "Styles applied to {{nodeName}} if {{conditions}}.",
- "nodeName": "the root element",
- "conditions": "variant=\"filled\" and color=\"warning\""
+ "description": "Styles applied to the root element if variant="filled" and color="warning"",
+ "deprecationInfo": "Combine the .MuiAlert-filled and .MuiAlert-colorWarning classes instead. How to migrate."
},
"icon": {
"description": "Styles applied to {{nodeName}}.",
@@ -84,22 +106,26 @@
"outlinedError": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
- "conditions": "variant=\"outlined\" and color=\"error\""
+ "conditions": "variant=\"outlined\" and color=\"error\"",
+ "deprecationInfo": "Combine the .MuiAlert-outlined and .MuiAlert-colorError classes instead. How to migrate."
},
"outlinedInfo": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
- "conditions": "variant=\"outlined\" and color=\"info\""
+ "conditions": "variant=\"outlined\" and color=\"info\"",
+ "deprecationInfo": "Combine the .MuiAlert-outlined and .MuiAlert-colorInfo classes instead. How to migrate."
},
"outlinedSuccess": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
- "conditions": "variant=\"outlined\" and color=\"success\""
+ "conditions": "variant=\"outlined\" and color=\"success\"",
+ "deprecationInfo": "Combine the .MuiAlert-outlined and .MuiAlert-colorSuccess classes instead. How to migrate."
},
"outlinedWarning": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
- "conditions": "variant=\"outlined\" and color=\"warning\""
+ "conditions": "variant=\"outlined\" and color=\"warning\"",
+ "deprecationInfo": "Combine the .MuiAlert-outlined and .MuiAlert-colorWarning classes instead. How to migrate."
},
"root": { "description": "Styles applied to the root element." },
"standard": {
@@ -110,22 +136,26 @@
"standardError": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
- "conditions": "variant=\"standard\" and color=\"error\""
+ "conditions": "variant=\"standard\" and color=\"error\"",
+ "deprecationInfo": "Combine the .MuiAlert-standard and .MuiAlert-colorError classes instead. How to migrate."
},
"standardInfo": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
- "conditions": "variant=\"standard\" and color=\"info\""
+ "conditions": "variant=\"standard\" and color=\"info\"",
+ "deprecationInfo": "Combine the .MuiAlert-standard and .MuiAlert-colorInfo classes instead. How to migrate."
},
"standardSuccess": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
- "conditions": "variant=\"standard\" and color=\"success\""
+ "conditions": "variant=\"standard\" and color=\"success\"",
+ "deprecationInfo": "Combine the .MuiAlert-standard and .MuiAlert-colorSuccess classes instead. How to migrate."
},
"standardWarning": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
- "conditions": "variant=\"standard\" and color=\"warning\""
+ "conditions": "variant=\"standard\" and color=\"warning\"",
+ "deprecationInfo": "Combine the .MuiAlert-standard and .MuiAlert-colorWarning classes instead. How to migrate."
}
},
"slotDescriptions": {
diff --git a/docs/translations/api-docs/button/button.json b/docs/translations/api-docs/button/button.json
index 9f40cac1d4db52..a5d8a0a8da8375 100644
--- a/docs/translations/api-docs/button/button.json
+++ b/docs/translations/api-docs/button/button.json
@@ -34,11 +34,41 @@
"variant": { "description": "The variant to use." }
},
"classDescriptions": {
+ "colorError": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "color=\"error\""
+ },
+ "colorInfo": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "color=\"info\""
+ },
"colorInherit": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "color=\"inherit\""
},
+ "colorPrimary": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "color=\"primary\""
+ },
+ "colorSecondary": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "color=\"secondary\""
+ },
+ "colorSuccess": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "color=\"success\""
+ },
+ "colorWarning": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "color=\"warning\""
+ },
"contained": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
@@ -47,52 +77,62 @@
"containedError": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
- "conditions": "variant=\"contained\" and color=\"error\""
+ "conditions": "variant=\"contained\" and color=\"error\"",
+ "deprecationInfo": "Combine the .MuiButton-contained and .MuiButton-colorError classes instead. How to migrate"
},
"containedInfo": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
- "conditions": "variant=\"contained\" and color=\"info\""
+ "conditions": "variant=\"contained\" and color=\"info\"",
+ "deprecationInfo": "Combine the .MuiButton-contained and .MuiButton-colorInfo classes instead. How to migrate"
},
"containedInherit": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
- "conditions": "variant=\"contained\" and color=\"inherit\""
+ "conditions": "variant=\"contained\" and color=\"inherit\"",
+ "deprecationInfo": "Combine the .MuiButton-contained and .MuiButton-colorInherit classes instead. How to migrate"
},
"containedPrimary": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
- "conditions": "variant=\"contained\" and color=\"primary\""
+ "conditions": "variant=\"contained\" and color=\"primary\"",
+ "deprecationInfo": "Combine the .MuiButton-contained and .MuiButton-colorPrimary classes instead. How to migrate"
},
"containedSecondary": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
- "conditions": "variant=\"contained\" and color=\"secondary\""
+ "conditions": "variant=\"contained\" and color=\"secondary\"",
+ "deprecationInfo": "Combine the .MuiButton-contained and .MuiButton-colorSecondary classes instead. How to migrate"
},
"containedSizeLarge": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
- "conditions": "size=\"large\" and variant=\"contained\""
+ "conditions": "size=\"large\" and variant=\"contained\"",
+ "deprecationInfo": "Combine the .MuiButton-sizeLarge and .MuiButton-contained classes instead. How to migrate"
},
"containedSizeMedium": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
- "conditions": "size=\"medium\" and variant=\"contained\""
+ "conditions": "size=\"medium\" and variant=\"contained\"",
+ "deprecationInfo": "Combine the .MuiButton-sizeMedium and .MuiButton-contained classes instead. How to migrate"
},
"containedSizeSmall": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
- "conditions": "size=\"small\" and variant=\"contained\""
+ "conditions": "size=\"small\" and variant=\"contained\"",
+ "deprecationInfo": "Combine the .MuiButton-sizeSmall and .MuiButton-contained classes instead. How to migrate"
},
"containedSuccess": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
- "conditions": "variant=\"contained\" and color=\"success\""
+ "conditions": "variant=\"contained\" and color=\"success\"",
+ "deprecationInfo": "Combine the .MuiButton-contained and .MuiButton-colorSuccess classes instead. How to migrate"
},
"containedWarning": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
- "conditions": "variant=\"contained\" and color=\"warning\""
+ "conditions": "variant=\"contained\" and color=\"warning\"",
+ "deprecationInfo": "Combine the .MuiButton-contained and .MuiButton-colorWarning classes instead. How to migrate"
},
"disabled": {
"description": "State class applied to {{nodeName}} if {{conditions}}.",
@@ -119,20 +159,24 @@
"nodeName": "the root element",
"conditions": "fullWidth={true}"
},
+ "icon": { "description": "Styles applied to the icon element if supplied" },
"iconSizeLarge": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the icon element",
- "conditions": "supplied and size=\"large\""
+ "conditions": "supplied and size=\"large\"",
+ "deprecationInfo": "Combine the .MuiButton-icon and .MuiButtonSizeLarge classes instead. How to migrate"
},
"iconSizeMedium": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the icon element",
- "conditions": "supplied and size=\"medium\""
+ "conditions": "supplied and size=\"medium\"",
+ "deprecationInfo": "Combine the .MuiButton-icon and .MuiButtonSizeMedium classes instead. How to migrate"
},
"iconSizeSmall": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the icon element",
- "conditions": "supplied and size=\"small\""
+ "conditions": "supplied and size=\"small\"",
+ "deprecationInfo": "Combine the .MuiButton-icon and .MuiButtonSizeSmall classes instead. How to migrate"
},
"outlined": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
@@ -142,52 +186,62 @@
"outlinedError": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
- "conditions": "variant=\"outlined\" and color=\"error\""
+ "conditions": "variant=\"outlined\" and color=\"error\"",
+ "deprecationInfo": "Combine the .MuiButton-outlined and .MuiButton-colorError classes instead. How to migrate"
},
"outlinedInfo": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
- "conditions": "variant=\"outlined\" and color=\"info\""
+ "conditions": "variant=\"outlined\" and color=\"info\"",
+ "deprecationInfo": "Combine the .MuiButton-outlined and .MuiButton-colorInfo classes instead. How to migrate"
},
"outlinedInherit": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
- "conditions": "variant=\"outlined\" and color=\"inherit\""
+ "conditions": "variant=\"outlined\" and color=\"inherit\"",
+ "deprecationInfo": "Combine the .MuiButton-outlined and .MuiButton-colorInherit classes instead. How to migrate"
},
"outlinedPrimary": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
- "conditions": "variant=\"outlined\" and color=\"primary\""
+ "conditions": "variant=\"outlined\" and color=\"primary\"",
+ "deprecationInfo": "Combine the .MuiButton-outlined and .MuiButton-colorPrimary classes instead. How to migrate"
},
"outlinedSecondary": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
- "conditions": "variant=\"outlined\" and color=\"secondary\""
+ "conditions": "variant=\"outlined\" and color=\"secondary\"",
+ "deprecationInfo": "Combine the .MuiButton-outlined and .MuiButton-colorSecondary classes instead. How to migrate"
},
"outlinedSizeLarge": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
- "conditions": "size=\"large\" and variant=\"outlined\""
+ "conditions": "size=\"large\" and variant=\"outlined\"",
+ "deprecationInfo": "Combine the .MuiButton-sizeLarge and .MuiButton-outlined classes instead. How to migrate"
},
"outlinedSizeMedium": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
- "conditions": "size=\"medium\" and variant=\"outlined\""
+ "conditions": "size=\"medium\" and variant=\"outlined\"",
+ "deprecationInfo": "Combine the .MuiButton-sizeMedium and .MuiButton-outlined classes instead. How to migrate"
},
"outlinedSizeSmall": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
- "conditions": "size=\"small\" and variant=\"outlined\""
+ "conditions": "size=\"small\" and variant=\"outlined\"",
+ "deprecationInfo": "Combine the .MuiButton-sizeSmall and .MuiButton-outlined classes instead. How to migrate"
},
"outlinedSuccess": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
- "conditions": "variant=\"outlined\" and color=\"success\""
+ "conditions": "variant=\"outlined\" and color=\"success\"",
+ "deprecationInfo": "Combine the .MuiButton-outlined and .MuiButton-colorSuccess classes instead. How to migrate"
},
"outlinedWarning": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
- "conditions": "variant=\"outlined\" and color=\"warning\""
+ "conditions": "variant=\"outlined\" and color=\"warning\"",
+ "deprecationInfo": "Combine the .MuiButton-outlined and .MuiButton-colorWarning classes instead. How to migrate"
},
"root": { "description": "Styles applied to the root element." },
"sizeLarge": {
@@ -218,52 +272,62 @@
"textError": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
- "conditions": "variant=\"text\" and color=\"error\""
+ "conditions": "variant=\"text\" and color=\"error\"",
+ "deprecationInfo": "Combine the .MuiButton-text and .MuiButton-colorError classes instead. How to migrate"
},
"textInfo": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
- "conditions": "variant=\"text\" and color=\"info\""
+ "conditions": "variant=\"text\" and color=\"info\"",
+ "deprecationInfo": "Combine the .MuiButton-text and .MuiButton-colorInfo classes instead. How to migrate"
},
"textInherit": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
- "conditions": "variant=\"text\" and color=\"inherit\""
+ "conditions": "variant=\"text\" and color=\"inherit\"",
+ "deprecationInfo": "Combine the .MuiButton-text and .MuiButton-colorInherit classes instead. How to migrate"
},
"textPrimary": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
- "conditions": "variant=\"text\" and color=\"primary\""
+ "conditions": "variant=\"text\" and color=\"primary\"",
+ "deprecationInfo": "Combine the .MuiButton-text and .MuiButton-colorPrimary classes instead. How to migrate"
},
"textSecondary": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
- "conditions": "variant=\"text\" and color=\"secondary\""
+ "conditions": "variant=\"text\" and color=\"secondary\"",
+ "deprecationInfo": "Combine the .MuiButton-text and .MuiButton-colorSecondary classes instead. How to migrate"
},
"textSizeLarge": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
- "conditions": "size=\"large\" and variant=\"text\""
+ "conditions": "size=\"large\" and variant=\"text\"",
+ "deprecationInfo": "Combine the .MuiButton-sizeLarge and .MuiButton-text classes instead. How to migrate"
},
"textSizeMedium": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
- "conditions": "size=\"medium\" and variant=\"text\""
+ "conditions": "size=\"medium\" and variant=\"text\"",
+ "deprecationInfo": "Combine the .MuiButton-sizeMedium and .MuiButton-text classes instead. How to migrate"
},
"textSizeSmall": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
- "conditions": "size=\"small\" and variant=\"text\""
+ "conditions": "size=\"small\" and variant=\"text\"",
+ "deprecationInfo": "Combine the .MuiButton-sizeSmall and .MuiButton-text classes instead. How to migrate"
},
"textSuccess": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
- "conditions": "variant=\"text\" and color=\"success\""
+ "conditions": "variant=\"text\" and color=\"success\"",
+ "deprecationInfo": "Combine the .MuiButton-text and .MuiButton-colorSuccess classes instead. How to migrate"
},
"textWarning": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
- "conditions": "variant=\"text\" and color=\"warning\""
+ "conditions": "variant=\"text\" and color=\"warning\"",
+ "deprecationInfo": "Combine the .MuiButton-text and .MuiButton-colorWarning classes instead. How to migrate"
}
}
}
diff --git a/docs/translations/api-docs/chip/chip.json b/docs/translations/api-docs/chip/chip.json
index 3cbbc11437a3bc..fddc50bdb23a05 100644
--- a/docs/translations/api-docs/chip/chip.json
+++ b/docs/translations/api-docs/chip/chip.json
@@ -41,22 +41,26 @@
"avatarColorPrimary": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the avatar element",
- "conditions": "color=\"primary\""
+ "conditions": "color=\"primary\"",
+ "deprecationInfo": "Combine the .MuiChip-avatar and .MuiChip-colorPrimary classes instead. How to migrate"
},
"avatarColorSecondary": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the avatar element",
- "conditions": "color=\"secondary\""
+ "conditions": "color=\"secondary\"",
+ "deprecationInfo": "Combine the .MuiChip-avatar and .MuiChip-colorSecondary classes instead. How to migrate"
},
"avatarMedium": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the avatar element",
- "conditions": "size=\"medium\""
+ "conditions": "size=\"medium\"",
+ "deprecationInfo": "Combine the .MuiChip-avatar and .MuiChip-sizeMedium classes instead. How to migrate"
},
"avatarSmall": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the avatar element",
- "conditions": "size=\"small\""
+ "conditions": "size=\"small\"",
+ "deprecationInfo": "Combine the .MuiChip-avatar and .MuiChip-sizeSmall classes instead. How to migrate"
},
"clickable": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
@@ -66,12 +70,14 @@
"clickableColorPrimary": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
- "conditions": "onClick and color=\"primary\" is defined or clickable={true}"
+ "conditions": "onClick and color=\"primary\" is defined or clickable={true}",
+ "deprecationInfo": "Combine the .MuiChip-clickable and .MuiChip-colorPrimary classes instead. How to migrate"
},
"clickableColorSecondary": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
- "conditions": "onClick and color=\"secondary\" is defined or clickable={true}"
+ "conditions": "onClick and color=\"secondary\" is defined or clickable={true}",
+ "deprecationInfo": "Combine the .MuiChip-clickable and .MuiChip-colorSecondary classes instead. How to migrate"
},
"colorError": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
@@ -111,12 +117,14 @@
"deletableColorPrimary": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
- "conditions": "onDelete and color=\"primary\" is defined"
+ "conditions": "onDelete and color=\"primary\" is defined",
+ "deprecationInfo": "Combine the .MuiChip-deletable and .MuiChip-colorPrimary classes instead. How to migrate"
},
"deletableColorSecondary": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
- "conditions": "onDelete and color=\"secondary\" is defined"
+ "conditions": "onDelete and color=\"secondary\" is defined",
+ "deprecationInfo": "Combine the .MuiChip-deletable and .MuiChip-colorSecondary classes instead. How to migrate"
},
"deleteIcon": {
"description": "Styles applied to {{nodeName}}.",
@@ -125,42 +133,50 @@
"deleteIconColorPrimary": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the deleteIcon element",
- "conditions": "color=\"primary\" and variant=\"filled\""
+ "conditions": "color=\"primary\"",
+ "deprecationInfo": "Combine the .MuiChip-deleteIcon and .MuiChip-colorPrimary classes instead. How to migrate"
},
"deleteIconColorSecondary": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the deleteIcon element",
- "conditions": "color=\"secondary\" and variant=\"filled\""
+ "conditions": "color=\"secondary\"",
+ "deprecationInfo": "Combine the .MuiChip-deleteIcon and .MuiChip-colorSecondary classes instead. How to migrate"
},
"deleteIconFilledColorPrimary": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the deleteIcon element",
- "conditions": "color=\"primary\" and variant=\"filled\""
+ "conditions": "color=\"primary\" and variant=\"filled\"",
+ "deprecationInfo": "Combine the .MuiChip-deleteIcon , .MuiChip-filled and .MuiChip-colorPrimary classes instead. How to migrate"
},
"deleteIconFilledColorSecondary": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the deleteIcon element",
- "conditions": "color=\"secondary\" and variant=\"filled\""
+ "conditions": "color=\"secondary\" and variant=\"filled\"",
+ "deprecationInfo": "Combine the .MuiChip-deleteIcon , .MuiChip-filled and .MuiChip-colorSecondary classes instead. How to migrate"
},
"deleteIconMedium": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the deleteIcon element",
- "conditions": "size=\"medium\""
+ "conditions": "size=\"medium\"",
+ "deprecationInfo": "Combine the .MuiChip-deleteIcon and .MuiChip-sizeMedium classes instead. How to migrate"
},
"deleteIconOutlinedColorPrimary": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the deleteIcon element",
- "conditions": "color=\"primary\" and variant=\"outlined\""
+ "conditions": "color=\"primary\" and variant=\"outlined\"",
+ "deprecationInfo": "Combine the .MuiChip-deleteIcon , .MuiChip-outlined and .MuiChip-colorPrimary classes instead. How to migrate"
},
"deleteIconOutlinedColorSecondary": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the deleteIcon element",
- "conditions": "color=\"secondary\" and variant=\"outlined\""
+ "conditions": "color=\"secondary\" and variant=\"outlined\"",
+ "deprecationInfo": "Combine the .MuiChip-deleteIcon , .MuiChip-outlined and .MuiChip-colorSecondary classes instead. How to migrate"
},
"deleteIconSmall": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the deleteIcon element",
- "conditions": "size=\"small\""
+ "conditions": "size=\"small\"",
+ "deprecationInfo": "Combine the .MuiChip-deleteIcon and .MuiChip-sizeSmall classes instead. How to migrate"
},
"disabled": {
"description": "State class applied to {{nodeName}} if {{conditions}}.",
@@ -175,12 +191,14 @@
"filledPrimary": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
- "conditions": "variant=\"filled\" and color=\"primary\""
+ "conditions": "variant=\"filled\" and color=\"primary\"",
+ "deprecationInfo": "Combine the .MuiChip-filled and .MuiChip-colorPrimary classes instead. How to migrate"
},
"filledSecondary": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
- "conditions": "variant=\"filled\" and color=\"secondary\""
+ "conditions": "variant=\"filled\" and color=\"secondary\"",
+ "deprecationInfo": "Combine the .MuiChip-filled and .MuiChip-colorSecondary classes instead. How to migrate"
},
"focusVisible": {
"description": "State class applied to {{nodeName}} if {{conditions}}.",
@@ -191,22 +209,26 @@
"iconColorPrimary": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the icon element",
- "conditions": "color=\"primary\""
+ "conditions": "color=\"primary\"",
+ "deprecationInfo": "Combine the .MuiChip-icon and .MuiChip-colorPrimary classes instead. How to migrate"
},
"iconColorSecondary": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the icon element",
- "conditions": "color=\"secondary\""
+ "conditions": "color=\"secondary\"",
+ "deprecationInfo": "Combine the .MuiChip-icon and .MuiChip-colorSecondary classes instead. How to migrate"
},
"iconMedium": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the icon element",
- "conditions": "size=\"medium\""
+ "conditions": "size=\"medium\"",
+ "deprecationInfo": "Combine the .MuiChip-icon and .MuiChip-sizeMedium classes instead. How to migrate"
},
"iconSmall": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the icon element",
- "conditions": "size=\"small\""
+ "conditions": "size=\"small\"",
+ "deprecationInfo": "Combine the .MuiChip-icon and .MuiChip-sizeSmall classes instead. How to migrate"
},
"label": {
"description": "Styles applied to {{nodeName}}.",
@@ -215,12 +237,14 @@
"labelMedium": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the label span element",
- "conditions": "size=\"medium\""
+ "conditions": "size=\"medium\"",
+ "deprecationInfo": "Combine the .MuiChip-label and .MuiChip-sizeMedium classes instead. How to migrate"
},
"labelSmall": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the label span element",
- "conditions": "size=\"small\""
+ "conditions": "size=\"small\"",
+ "deprecationInfo": "Combine the .MuiChip-label and .MuiChip-sizeSmall classes instead. How to migrate"
},
"outlined": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
@@ -230,12 +254,14 @@
"outlinedPrimary": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
- "conditions": "variant=\"outlined\" and color=\"primary\""
+ "conditions": "variant=\"outlined\" and color=\"primary\"",
+ "deprecationInfo": "Combine the .MuiChip-outlined and .MuiChip-colorPrimary classes instead. How to migrate"
},
"outlinedSecondary": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
- "conditions": "variant=\"outlined\" and color=\"secondary\""
+ "conditions": "variant=\"outlined\" and color=\"secondary\"",
+ "deprecationInfo": "Combine the .MuiChip-outlined and .MuiChip-colorSecondary classes instead. How to migrate"
},
"root": { "description": "Styles applied to the root element." },
"sizeMedium": {
diff --git a/docs/translations/api-docs/loading-button/loading-button.json b/docs/translations/api-docs/loading-button/loading-button.json
index 754eada8502299..dfa09c1686c1b8 100644
--- a/docs/translations/api-docs/loading-button/loading-button.json
+++ b/docs/translations/api-docs/loading-button/loading-button.json
@@ -19,11 +19,41 @@
"variant": { "description": "The variant to use." }
},
"classDescriptions": {
+ "colorError": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "color=\"error\""
+ },
+ "colorInfo": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "color=\"info\""
+ },
"colorInherit": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "color=\"inherit\""
},
+ "colorPrimary": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "color=\"primary\""
+ },
+ "colorSecondary": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "color=\"secondary\""
+ },
+ "colorSuccess": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "color=\"success\""
+ },
+ "colorWarning": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "color=\"warning\""
+ },
"contained": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
@@ -32,52 +62,62 @@
"containedError": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
- "conditions": "variant=\"contained\" and color=\"error\""
+ "conditions": "variant=\"contained\" and color=\"error\"",
+ "deprecationInfo": "Combine the .MuiButton-contained and .MuiButton-colorError classes instead. How to migrate"
},
"containedInfo": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
- "conditions": "variant=\"contained\" and color=\"info\""
+ "conditions": "variant=\"contained\" and color=\"info\"",
+ "deprecationInfo": "Combine the .MuiButton-contained and .MuiButton-colorInfo classes instead. How to migrate"
},
"containedInherit": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
- "conditions": "variant=\"contained\" and color=\"inherit\""
+ "conditions": "variant=\"contained\" and color=\"inherit\"",
+ "deprecationInfo": "Combine the .MuiButton-contained and .MuiButton-colorInherit classes instead. How to migrate"
},
"containedPrimary": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
- "conditions": "variant=\"contained\" and color=\"primary\""
+ "conditions": "variant=\"contained\" and color=\"primary\"",
+ "deprecationInfo": "Combine the .MuiButton-contained and .MuiButton-colorPrimary classes instead. How to migrate"
},
"containedSecondary": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
- "conditions": "variant=\"contained\" and color=\"secondary\""
+ "conditions": "variant=\"contained\" and color=\"secondary\"",
+ "deprecationInfo": "Combine the .MuiButton-contained and .MuiButton-colorSecondary classes instead. How to migrate"
},
"containedSizeLarge": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
- "conditions": "size=\"large\" and variant=\"contained\""
+ "conditions": "size=\"large\" and variant=\"contained\"",
+ "deprecationInfo": "Combine the .MuiButton-sizeLarge and .MuiButton-contained classes instead. How to migrate"
},
"containedSizeMedium": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
- "conditions": "size=\"medium\" and variant=\"contained\""
+ "conditions": "size=\"medium\" and variant=\"contained\"",
+ "deprecationInfo": "Combine the .MuiButton-sizeMedium and .MuiButton-contained classes instead. How to migrate"
},
"containedSizeSmall": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
- "conditions": "size=\"small\" and variant=\"contained\""
+ "conditions": "size=\"small\" and variant=\"contained\"",
+ "deprecationInfo": "Combine the .MuiButton-sizeSmall and .MuiButton-contained classes instead. How to migrate"
},
"containedSuccess": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
- "conditions": "variant=\"contained\" and color=\"success\""
+ "conditions": "variant=\"contained\" and color=\"success\"",
+ "deprecationInfo": "Combine the .MuiButton-contained and .MuiButton-colorSuccess classes instead. How to migrate"
},
"containedWarning": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
- "conditions": "variant=\"contained\" and color=\"warning\""
+ "conditions": "variant=\"contained\" and color=\"warning\"",
+ "deprecationInfo": "Combine the .MuiButton-contained and .MuiButton-colorWarning classes instead. How to migrate"
},
"disabled": {
"description": "State class applied to {{nodeName}} if {{conditions}}.",
@@ -109,20 +149,24 @@
"nodeName": "the root element",
"conditions": "fullWidth={true}"
},
+ "icon": { "description": "Styles applied to the icon element if supplied" },
"iconSizeLarge": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the icon element",
- "conditions": "supplied and size=\"large\""
+ "conditions": "supplied and size=\"large\"",
+ "deprecationInfo": "Combine the .MuiButton-icon and .MuiButtonSizeLarge classes instead. How to migrate"
},
"iconSizeMedium": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the icon element",
- "conditions": "supplied and size=\"medium\""
+ "conditions": "supplied and size=\"medium\"",
+ "deprecationInfo": "Combine the .MuiButton-icon and .MuiButtonSizeMedium classes instead. How to migrate"
},
"iconSizeSmall": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the icon element",
- "conditions": "supplied and size=\"small\""
+ "conditions": "supplied and size=\"small\"",
+ "deprecationInfo": "Combine the .MuiButton-icon and .MuiButtonSizeSmall classes instead. How to migrate"
},
"loading": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
@@ -156,52 +200,62 @@
"outlinedError": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
- "conditions": "variant=\"outlined\" and color=\"error\""
+ "conditions": "variant=\"outlined\" and color=\"error\"",
+ "deprecationInfo": "Combine the .MuiButton-outlined and .MuiButton-colorError classes instead. How to migrate"
},
"outlinedInfo": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
- "conditions": "variant=\"outlined\" and color=\"info\""
+ "conditions": "variant=\"outlined\" and color=\"info\"",
+ "deprecationInfo": "Combine the .MuiButton-outlined and .MuiButton-colorInfo classes instead. How to migrate"
},
"outlinedInherit": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
- "conditions": "variant=\"outlined\" and color=\"inherit\""
+ "conditions": "variant=\"outlined\" and color=\"inherit\"",
+ "deprecationInfo": "Combine the .MuiButton-outlined and .MuiButton-colorInherit classes instead. How to migrate"
},
"outlinedPrimary": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
- "conditions": "variant=\"outlined\" and color=\"primary\""
+ "conditions": "variant=\"outlined\" and color=\"primary\"",
+ "deprecationInfo": "Combine the .MuiButton-outlined and .MuiButton-colorPrimary classes instead. How to migrate"
},
"outlinedSecondary": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
- "conditions": "variant=\"outlined\" and color=\"secondary\""
+ "conditions": "variant=\"outlined\" and color=\"secondary\"",
+ "deprecationInfo": "Combine the .MuiButton-outlined and .MuiButton-colorSecondary classes instead. How to migrate"
},
"outlinedSizeLarge": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
- "conditions": "size=\"large\" and variant=\"outlined\""
+ "conditions": "size=\"large\" and variant=\"outlined\"",
+ "deprecationInfo": "Combine the .MuiButton-sizeLarge and .MuiButton-outlined classes instead. How to migrate"
},
"outlinedSizeMedium": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
- "conditions": "size=\"medium\" and variant=\"outlined\""
+ "conditions": "size=\"medium\" and variant=\"outlined\"",
+ "deprecationInfo": "Combine the .MuiButton-sizeMedium and .MuiButton-outlined classes instead. How to migrate"
},
"outlinedSizeSmall": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
- "conditions": "size=\"small\" and variant=\"outlined\""
+ "conditions": "size=\"small\" and variant=\"outlined\"",
+ "deprecationInfo": "Combine the .MuiButton-sizeSmall and .MuiButton-outlined classes instead. How to migrate"
},
"outlinedSuccess": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
- "conditions": "variant=\"outlined\" and color=\"success\""
+ "conditions": "variant=\"outlined\" and color=\"success\"",
+ "deprecationInfo": "Combine the .MuiButton-outlined and .MuiButton-colorSuccess classes instead. How to migrate"
},
"outlinedWarning": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
- "conditions": "variant=\"outlined\" and color=\"warning\""
+ "conditions": "variant=\"outlined\" and color=\"warning\"",
+ "deprecationInfo": "Combine the .MuiButton-outlined and .MuiButton-colorWarning classes instead. How to migrate"
},
"root": { "description": "Styles applied to the root element." },
"sizeLarge": {
@@ -237,52 +291,62 @@
"textError": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
- "conditions": "variant=\"text\" and color=\"error\""
+ "conditions": "variant=\"text\" and color=\"error\"",
+ "deprecationInfo": "Combine the .MuiButton-text and .MuiButton-colorError classes instead. How to migrate"
},
"textInfo": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
- "conditions": "variant=\"text\" and color=\"info\""
+ "conditions": "variant=\"text\" and color=\"info\"",
+ "deprecationInfo": "Combine the .MuiButton-text and .MuiButton-colorInfo classes instead. How to migrate"
},
"textInherit": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
- "conditions": "variant=\"text\" and color=\"inherit\""
+ "conditions": "variant=\"text\" and color=\"inherit\"",
+ "deprecationInfo": "Combine the .MuiButton-text and .MuiButton-colorInherit classes instead. How to migrate"
},
"textPrimary": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
- "conditions": "variant=\"text\" and color=\"primary\""
+ "conditions": "variant=\"text\" and color=\"primary\"",
+ "deprecationInfo": "Combine the .MuiButton-text and .MuiButton-colorPrimary classes instead. How to migrate"
},
"textSecondary": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
- "conditions": "variant=\"text\" and color=\"secondary\""
+ "conditions": "variant=\"text\" and color=\"secondary\"",
+ "deprecationInfo": "Combine the .MuiButton-text and .MuiButton-colorSecondary classes instead. How to migrate"
},
"textSizeLarge": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
- "conditions": "size=\"large\" and variant=\"text\""
+ "conditions": "size=\"large\" and variant=\"text\"",
+ "deprecationInfo": "Combine the .MuiButton-sizeLarge and .MuiButton-text classes instead. How to migrate"
},
"textSizeMedium": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
- "conditions": "size=\"medium\" and variant=\"text\""
+ "conditions": "size=\"medium\" and variant=\"text\"",
+ "deprecationInfo": "Combine the .MuiButton-sizeMedium and .MuiButton-text classes instead. How to migrate"
},
"textSizeSmall": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
- "conditions": "size=\"small\" and variant=\"text\""
+ "conditions": "size=\"small\" and variant=\"text\"",
+ "deprecationInfo": "Combine the .MuiButton-sizeSmall and .MuiButton-text classes instead. How to migrate"
},
"textSuccess": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
- "conditions": "variant=\"text\" and color=\"success\""
+ "conditions": "variant=\"text\" and color=\"success\"",
+ "deprecationInfo": "Combine the .MuiButton-text and .MuiButton-colorSuccess classes instead. How to migrate"
},
"textWarning": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
- "conditions": "variant=\"text\" and color=\"warning\""
+ "conditions": "variant=\"text\" and color=\"warning\"",
+ "deprecationInfo": "Combine the .MuiButton-text and .MuiButton-colorWarning classes instead. How to migrate"
}
}
}
diff --git a/docs/translations/api-docs/slider/slider.json b/docs/translations/api-docs/slider/slider.json
index 12e4419e1cdec1..71c3e069bd729b 100644
--- a/docs/translations/api-docs/slider/slider.json
+++ b/docs/translations/api-docs/slider/slider.json
@@ -12,11 +12,9 @@
"color": {
"description": "The color of the component. It supports both default and custom theme colors, which can be added as shown in the palette customization guide."
},
- "components": {
- "description": "The components used for each slot inside.This prop is an alias for the
slots prop. It's recommended to use the slots prop instead."
- },
+ "components": { "description": "The components used for each slot inside." },
"componentsProps": {
- "description": "The extra props for the slot components. You can override the existing props or add new ones.This prop is an alias for the
slotProps prop. It's recommended to use the slotProps prop instead, as componentsProps will be deprecated in the future."
+ "description": "The extra props for the slot components. You can override the existing props or add new ones."
},
"defaultValue": {
"description": "The default value. Use when the component is not controlled."
diff --git a/docs/translations/translations.json b/docs/translations/translations.json
index bda321ce700c3f..59c851317d12df 100644
--- a/docs/translations/translations.json
+++ b/docs/translations/translations.json
@@ -1,215 +1,4 @@
{
- "adblock": "If you don't mind tech-related ads (no tracking or remarketing), and want to keep us running, please whitelist us in your blocker.",
- "api-docs": {
- "componentName": "Component name",
- "componentsApi": "Components API",
- "themeDefaultProps": "Theme default props",
- "themeDefaultPropsDescription": "You can use {{muiName}} to change the default props of this component with the theme.",
- "classes": "CSS classes",
- "classesDescription": "These class names are useful for styling with CSS. They are applied to the component's slots when specific states are triggered.",
- "className": "Class name",
- "cssDescription": "The following class names are useful for styling with CSS (the state classes are marked). To learn more, visit the component customization page.", - "css": "CSS", - "cssComponent": "As a CSS utility, the {{name}} component also supports all
system properties. You can use them as props directly on the component.",
- "default": "Default",
- "defaultComponent": "Default component",
- "defaultValue": "Default value",
- "defaultHTMLTag": "Default HTML tag",
- "demos": "Component demos",
- "deprecated": "Deprecated",
- "description": "Description",
- "globalClass": "Global class",
- "defaultClass": "Default class",
- "hookName": "Hook name",
- "hooksApi": "Hooks API",
- "hooksNoParameters": "This hook does not accept any input parameters.",
- "hooksPageDescription": "API reference docs for the {{name}} hook. Learn about the input parameters and other APIs of this exported module.",
- "import": "Import",
- "importDifference": "Learn about the difference by reading this guide on minimizing bundle size.",
- "inheritance": "Inheritance",
- "inheritanceDescription": "While not explicitly documented above, the props of the {{component}} component{{suffix}} are also available in {{name}}. You can take advantage of this to target nested components.",
- "inheritanceSuffixTransition": " from react-transition-group",
- "name": "Name",
- "nativeElement": "native",
- "overrideStyles": "You can override the style of the component using one of these customization options:\n",
- "overrideStylesStyledComponent": "- \n
ref is forwarded to the root element.",
- "ruleName": "Rule name",
- "signature": "Signature",
- "slots": "Slots",
- "spreadHint": "Props of the {{spreadHintElement}} component are also available.",
- "state": "STATE",
- "styleOverrides": "The name {{componentStyles.name}} can be used when providing default props or style overrides in the theme.",
- "slotDescription": "To learn how to customize the slot, check out the Overriding component structure guide.",
- "slotName": "Slot name",
- "type": "Type",
- "required": "Required",
- "optional": "Optional",
- "additional-info": {
- "cssApi": "See CSS classes API below for more details.",
- "sx": "See the `sx` page for more details.",
- "slotsApi": "See Slots API below for more details.",
- "joy-size": "To learn how to add custom sizes to the component, check out Themed components—Extend sizes.",
- "joy-color": "To learn how to add your own colors, check out Themed components—Extend colors.",
- "joy-variant": "To learn how to add your own variants, check out Themed components—Extend variants."
- }
- },
- "landingPageDescr": "A responsive landing page layout with many common sections.",
- "landingPageTitle": "Landing page",
- "searchButton": "Search…",
- "algoliaSearch": "What are you looking for?",
- "appFrame": {
- "changeLanguage": "Change language",
- "github": "GitHub repository",
- "helpToTranslate": "Help to translate",
- "openDrawer": "Open main navigation",
- "skipToContent": "Skip to content",
- "toggleSettings": "Toggle settings drawer"
- },
- "backToTop": "Scroll back to top",
- "blogDescr": "A sophisticated blog page layout. Markdown support is courtesy of markdown-to-jsx.",
- "blogTitle": "Blog",
- "bundleSize": "Bundle size",
- "bundleSizeTooltip": "Scroll down to 'Exports Analysis' for a more detailed report.",
- "cancel": "Cancel",
- "cdn": "or use a CDN.",
- "checkoutDescr": "A step-by-step checkout page layout. Adapt the number of steps to suit your needs, or make steps optional.",
- "checkoutTitle": "Checkout",
- "clickToCopy": "Click to copy",
- "close": "Close",
- "codesandbox": "Edit in CodeSandbox",
- "copied": "Copied",
- "copiedSource": "The source code has been copied to your clipboard.",
- "copiedSourceLink": "Link to the source code has been copied to your clipboard.",
- "copySource": "Copy the source",
- "copySourceLinkJS": "Copy link to JavaScript source",
- "copySourceLinkTS": "Copy link to TypeScript source",
- "dashboardDescr": "Contains a taskbar and a mini variant drawer. The chart is courtesy of Recharts.",
- "dashboardTitle": "Dashboard",
- "decreaseSpacing": "decrease spacing",
- "demoToolbarLabel": "demo source",
- "demoStylingSelectSystem": "MUI System",
- "demoStylingSelectTailwind": "Tailwind CSS",
- "demoStylingSelectCSS": "Plain CSS",
- "diamondSponsors": "Diamond sponsors",
- "becomeADiamondSponsor": "Become a Diamond sponsor",
- "diamondSponsorVacancies": "One spot left!",
- "editorHint": "Press Enter to start editing",
- "editPage": "Edit this page",
- "emojiLove": "Love",
- "emojiWarning": "Warning",
- "expandAll": "Expand all",
- "feedbackCommentLabel": "Comment",
- "feedbackFailed": "Couldn't submit feedback. Please try again later.",
- "feedbackMessage": "Was this page helpful?",
- "feedbackMessageDown": "How can we improve this page? (optional)",
- "feedbackMessageUp": "What did you like about this page? (optional)",
- "feedbackSectionSpecific": "How can we improve the {{sectionName}} section? (optional)",
- "feedbackMessageToGitHub": {
- "usecases": "If something is broken or if you need a reply to a problem you've encountered, please",
- "reasonWhy": "Otherwise, the team won't be able to answer back or ask for more information.",
- "callToAction": {
- "link": "open an issue instead."
- }
- },
- "feedbackNo": "No",
- "feedbackSubmitted": "Feedback submitted",
- "feedbackYes": "Yes",
- "footerCompany": "Company",
- "goToHome": "go to homepage",
- "getProfessionalSupport": "Get Professional Support",
- "getStarted": "Get Started",
- "githubLabel": "Feedback",
- "headTitle": "MUI: A popular React UI framework",
- "hideFullSource": "Collapse code",
- "hideSource": "Hide code",
- "homeQuickWord": "A quick word from our sponsors:",
- "increaseSpacing": "increase spacing",
- "initialFocusLabel": "A generic container that is programmatically focused to test keyboard navigation of our components.",
- "installation": "Installation",
- "installButton": "Read installation docs",
- "installDescr": "Install MUI's source files via npm. We take care of injecting the CSS needed.",
- "joinThese": "Join these and other great organizations!",
- "JS": "JavaScript",
- "letUsKnow": "Let us know!",
- "likeMui": "Help us keep running",
- "loadFont": "Load the default Roboto font.",
- "mainNavigation": "documentation",
- "newest": "Newest",
- "openDrawer": "Open documentation navigation",
- "or": "or",
- "pageTOC": "Page table of contents",
- "praise": "Praise for MUI",
- "praiseDescr": "Here's what some of our users are saying.",
- "pricingDescr": "Quickly build an effective pricing table for your potential customers.",
- "pricingTitle": "Pricing",
- "resetDemo": "Reset demo",
- "resetDensity": "Reset density",
- "resetFocus": "Reset focus to test keyboard navigation",
- "searchIcons": {
- "learnMore": "Learn more about the import"
- },
- "seeMore": "See more",
- "settings": {
- "color": "Color",
- "dark": "Dark",
- "direction": "Direction",
- "editWebsiteColors": "Edit website colors",
- "light": "Light",
- "ltr": "Left to right",
- "mode": "Mode",
- "rtl": "Right to left",
- "settings": "Settings",
- "system": "System",
- "language": "Language"
- },
- "showFullSource": "Expand code",
- "showJSSource": "Show JavaScript source",
- "showSource": "Show code",
- "showTSSource": "Show TypeScript source",
- "signInDescr": "A simple sign-in page using text fields, buttons, checkboxes, links, and more.",
- "signInSideDescr": "A simple sign-in page with a two-column layout using text fields, buttons, and more.",
- "signInSideTitle": "Sign-in side",
- "signInTitle": "Sign-in",
- "signUpDescr": "A simple sign-up page using text fields, buttons, checkboxes, links, and more.",
- "signUpTitle": "Sign-up",
- "sourceCode": "Source code",
- "spacingUnit": "Spacing unit",
- "stackblitz": "Edit in StackBlitz",
- "stars": "GitHub stars",
- "stickyFooterDescr": "Attach a footer to the bottom of the viewport when page content is short.",
- "stickyFooterTitle": "Sticky footer",
- "strapline": "MUI provides a simple, customizable, and accessible library of React components. Follow your own design system, or start with Material Design.",
- "submit": "Submit",
- "tableOfContents": "Contents",
- "thanks": "Thank you!",
- "themes": "Premium themes",
- "themesButton": "Browse themes",
- "themesDescr": "Take your project to the next level with premium themes from our store – all built on MUI.",
- "toggleNotifications": "Toggle notifications panel",
- "toggleRTL": "Toggle right-to-left/left-to-right",
- "traffic": "Traffic",
- "TS": "TypeScript",
- "v5IsOut": "🎉 v5 release candidate is out! Head to the",
- "v5docsLink": "v5 documentation",
- "v5startAdoption": "to get started.",
- "unreadNotifications": "unread notifications",
- "usage": "Usage",
- "usageButton": "Explore the docs",
- "usageDescr": "MUI components work without any additional setup, and don't pollute the global scope.",
- "useDarkTheme": "Use dark theme",
- "useHighDensity": "Apply higher density via props",
- "usingMui": "Are you using MUI?",
- "viewGitHub": "View the source on GitHub",
- "visit": "Visit the website",
- "whosUsing": "Who's using MUI?",
"pages": {
"/system/getting-started-group": "Getting started",
"/system/getting-started": "Overview",
diff --git a/docs/types/docs.d.ts b/docs/types/docs.d.ts
index 99dc918d166794..ccfe104621b766 100644
--- a/docs/types/docs.d.ts
+++ b/docs/types/docs.d.ts
@@ -13,7 +13,7 @@ declare module 'docs/src/modules/components/HighlightedCode' {
copyButtonProps?: JSX.IntrinsicElements['button'];
/**
* short identifier of the code language
- * see @mui/markdown/prism for possible languages
+ * see @mui/internal-markdown/prism for possible languages
*/
language: string;
/**
diff --git a/docs/writing-rules.zip b/docs/writing-rules.zip
index 2ad5d9de800afe..a1decff750c500 100644
Binary files a/docs/writing-rules.zip and b/docs/writing-rules.zip differ
diff --git a/docs/writing-rules/BrandName.yml b/docs/writing-rules/BrandName.yml
index 56ea998e7dcd2c..bfdb8da88c2725 100644
--- a/docs/writing-rules/BrandName.yml
+++ b/docs/writing-rules/BrandName.yml
@@ -1,4 +1,7 @@
-# Without a non-breaking space, brand names can be split in the middle, with the start and end on two different lines.
+# Without a non-breaking space, brand names can be split in the middle
+# with the start and end on two different lines.
+# For example, Apple does this meticulously with their brand name: https://www.apple.com/macbook-air/.
+# Also read https://www.chrisdpeters.com/blog/using-non-breaking-spaces-to-help-with-branding/ for why.
extends: substitution
message: Use a non-breaking space for brand name ('%s' instead of '%s')
level: error
@@ -14,6 +17,7 @@ swap:
MUI Core: MUI Core
MUI Toolpad: MUI Toolpad
MUI Connect: MUI Connect
+ Stack Overflow: Stack Overflow
# Don't forget to run the following command to generate the package writing-rules.zip file
# Vale uses that ZIP file and not the YAML files.
#
diff --git a/docs/writing-rules/NamingConventions.yml b/docs/writing-rules/NamingConventions.yml
index 1a1842788b78c4..6fc6645f1862f4 100644
--- a/docs/writing-rules/NamingConventions.yml
+++ b/docs/writing-rules/NamingConventions.yml
@@ -17,6 +17,7 @@ swap:
Css: CSS
NPM: npm # https://css-tricks.com/start-sentence-npm/
Github: GitHub
+ StackOverflow: Stack Overflow
# Don't forget to run the following command to generate the package writing-rules.zip file
# Vale uses that ZIP file and not the YAML files.
#
diff --git a/examples/material-ui-remix-ts/app/entry.client.tsx b/examples/material-ui-remix-ts/app/entry.client.tsx
index 69e61993f3dd7e..97286fb8e10286 100644
--- a/examples/material-ui-remix-ts/app/entry.client.tsx
+++ b/examples/material-ui-remix-ts/app/entry.client.tsx
@@ -50,5 +50,5 @@ if (window.requestIdleCallback) {
} else {
// Safari doesn't support requestIdleCallback
// https://caniuse.com/requestidlecallback
- window.setTimeout(hydrate, 1);
+ setTimeout(hydrate, 1);
}
diff --git a/nx.json b/nx.json
index cf46819b1157a9..89b57c7c1b8295 100644
--- a/nx.json
+++ b/nx.json
@@ -2,9 +2,14 @@
"$schema": "./node_modules/nx/schemas/nx-schema.json",
"extends": "nx/presets/npm.json",
"targetDefaults": {
+ "copy-license": {
+ "cache": true,
+ "outputs": ["{projectRoot}/LICENSE"]
+ },
"build": {
"cache": true,
- "dependsOn": ["^build"]
+ "dependsOn": ["copy-license", "^build"],
+ "outputs": ["{projectRoot}/build"]
}
}
}
diff --git a/package.json b/package.json
index f2c8d4778eb012..8dd8cc42e5d3ea 100644
--- a/package.json
+++ b/package.json
@@ -1,13 +1,15 @@
{
"name": "@mui/monorepo",
- "version": "5.15.10",
+ "version": "5.15.11",
"private": true,
"scripts": {
"preinstall": "npx only-allow pnpm",
"proptypes": "tsx ./scripts/generateProptypes.ts",
"deduplicate": "pnpm dedupe",
"benchmark:browser": "pnpm --filter benchmark browser",
- "build": "lerna run --scope \"@mui/*\" build",
+ "build": "lerna run build --ignore docs",
+ "build:public": "lerna run --no-private build",
+ "build:ci": "lerna run build --ignore docs --concurrency 8 --skip-nx-cache",
"build:zero": "lerna run --scope \"@mui/zero-*\" build",
"clean:zero": "pnpm --filter \"@mui/zero-*\" clean",
"build:codesandbox": "NODE_OPTIONS=\"--max_old_space_size=4096\" lerna run --concurrency 8 --scope \"@mui/*\" --scope \"@mui-internal/*\" --no-private build",
@@ -28,7 +30,7 @@
"docs:size-why": "cross-env DOCS_STATS_ENABLED=true pnpm docs:build",
"docs:start": "pnpm --filter docs start",
"docs:create-playground": "pnpm --filter docs create-playground",
- "docs:i18n": "cross-env BABEL_ENV=development babel-node --extensions \".tsx,.ts,.js\" ./docs/scripts/i18n.js",
+ "docs:i18n": "cross-env BABEL_ENV=development babel-node --extensions \".tsx,.ts,.js\" ./docs/scripts/i18n.ts",
"docs:link-check": "pnpm --filter docs link-check",
"docs:typescript": "pnpm docs:typescript:formatted --watch",
"docs:typescript:check": "pnpm --filter docs typescript",
diff --git a/packages-internal/scripts/CHANGELOG.md b/packages-internal/scripts/CHANGELOG.md
index dc7990cf50c3e2..dd86612b025856 100644
--- a/packages-internal/scripts/CHANGELOG.md
+++ b/packages-internal/scripts/CHANGELOG.md
@@ -1,5 +1,10 @@
# Changelog
+## 1.0.1
+
+- Unpinned version of the @mui-internal/docs-utils dependency.
+- Corrected the README file.
+
## 1.0.0
Initial release as an npm package.
diff --git a/packages-internal/scripts/README.md b/packages-internal/scripts/README.md
index 4521bd893bca63..7d0ed6c75648a4 100644
--- a/packages-internal/scripts/README.md
+++ b/packages-internal/scripts/README.md
@@ -1,25 +1,12 @@
-# @mui-internal/typescript-to-proptypes
+# @mui/internal-scripts
-An API for converting [TypeScript](https://www.npmjs.com/package/typescript) definitions to [PropTypes](https://www.npmjs.com/package/prop-types) using the TypeScript Compiler API.
-
-This package has been adapted for MUI needs.
+Code infra scripts for MUI repositories
It is not meant for general use.
-## Support
-
-| Component type | |
-| :--------------- | :----------------- |
-| Class | :heavy_check_mark: |
-| Function | :heavy_check_mark: |
-| Const functions | :heavy_check_mark: |
-| React.memo | :heavy_check_mark: |
-| React.ForwardRef | :heavy_check_mark: |
-
-## License
-
-This project is licensed under the terms of the [MIT license](/LICENSE).
-
-## Release
+## Scripts
-1. Build the project: `pnpm build`
-2. Publish the build artifacts to npm: `pnpm release:publish`
+- `build` - transpiles TS files into the build directory.
+- `release:publish` - builds the project and publishes it in the npm registry.
+- `release:publish:dry-run` - builds the project and publishes it in a local registry accessible on port 4873 (this is the default port of Verdaccio private npm server).
+- `test` - runs all the tests.
+- `typescript` - checks validity of types.
diff --git a/packages-internal/scripts/package.json b/packages-internal/scripts/package.json
index 1182ad834c9913..755c1b94c8305e 100644
--- a/packages-internal/scripts/package.json
+++ b/packages-internal/scripts/package.json
@@ -1,6 +1,6 @@
{
"name": "@mui/internal-scripts",
- "version": "1.0.0",
+ "version": "1.0.1",
"author": "MUI Team",
"description": "Utilities supporting MUI libraries build and docs generation. This is an internal package not meant for general use.",
"main": "build/index.js",
@@ -30,7 +30,7 @@
"@babel/plugin-syntax-jsx": "^7.23.3",
"@babel/plugin-syntax-typescript": "^7.23.3",
"@babel/types": "^7.23.9",
- "@mui-internal/docs-utils": "workspace:*",
+ "@mui-internal/docs-utils": "workspace:^",
"doctrine": "^3.0.0",
"lodash": "^4.17.21",
"typescript": "^5.3.3",
diff --git a/packages/api-docs-builder-core/baseUi/generateBaseUiApiPages.ts b/packages/api-docs-builder-core/baseUi/generateBaseUiApiPages.ts
index 929ada80e915a5..2989159dd6fd24 100644
--- a/packages/api-docs-builder-core/baseUi/generateBaseUiApiPages.ts
+++ b/packages/api-docs-builder-core/baseUi/generateBaseUiApiPages.ts
@@ -1,7 +1,7 @@
import fs from 'fs';
import path from 'path';
import kebabCase from 'lodash/kebabCase';
-import { getHeaders } from '@mui/markdown';
+import { getHeaders } from '@mui/internal-markdown';
import findPagesMarkdown from '@mui-internal/api-docs-builder/utils/findPagesMarkdown';
import { writePrettifiedFile } from '@mui-internal/api-docs-builder/buildApiUtils';
@@ -30,7 +30,7 @@ export async function generateBaseUIApiPages() {
import * as React from 'react';
import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
import AppFrame from 'docs/src/modules/components/AppFrame';
-import * as pageProps from '${importStatement}?@mui/markdown';
+import * as pageProps from '${importStatement}?muiMarkdown';
export default function Page(props) {
const { userLanguage, ...other } = props;
@@ -116,7 +116,7 @@ Page.getLayout = (page) => {
import * as React from 'react';
import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
import AppFrame from 'docs/src/modules/components/AppFrame';
-import * as pageProps from '${importStatement}?@mui/markdown';
+import * as pageProps from '${importStatement}?muiMarkdown';
import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
${apiTabImportStatements}
diff --git a/packages/api-docs-builder-core/baseUi/getBaseUiComponentInfo.ts b/packages/api-docs-builder-core/baseUi/getBaseUiComponentInfo.ts
index 3a9b2a12718bdd..b3d8ba5c182530 100644
--- a/packages/api-docs-builder-core/baseUi/getBaseUiComponentInfo.ts
+++ b/packages/api-docs-builder-core/baseUi/getBaseUiComponentInfo.ts
@@ -1,7 +1,7 @@
import fs from 'fs';
import path from 'path';
import kebabCase from 'lodash/kebabCase';
-import { getHeaders, getTitle } from '@mui/markdown';
+import { getHeaders, getTitle } from '@mui/internal-markdown';
import {
ComponentInfo,
extractPackageFile,
diff --git a/packages/api-docs-builder-core/baseUi/getBaseUiHookInfo.ts b/packages/api-docs-builder-core/baseUi/getBaseUiHookInfo.ts
index 7a74e48c77801e..6859623e09a5de 100644
--- a/packages/api-docs-builder-core/baseUi/getBaseUiHookInfo.ts
+++ b/packages/api-docs-builder-core/baseUi/getBaseUiHookInfo.ts
@@ -1,7 +1,7 @@
import fs from 'fs';
import path from 'path';
import kebabCase from 'lodash/kebabCase';
-import { getHeaders, getTitle } from '@mui/markdown';
+import { getHeaders, getTitle } from '@mui/internal-markdown';
import {
ComponentInfo,
HookInfo,
diff --git a/packages/api-docs-builder-core/joyUi/getJoyUiComponentInfo.ts b/packages/api-docs-builder-core/joyUi/getJoyUiComponentInfo.ts
index cedc966f4a1640..6e93feb97b55eb 100644
--- a/packages/api-docs-builder-core/joyUi/getJoyUiComponentInfo.ts
+++ b/packages/api-docs-builder-core/joyUi/getJoyUiComponentInfo.ts
@@ -1,7 +1,7 @@
import fs from 'fs';
import path from 'path';
import kebabCase from 'lodash/kebabCase';
-import { getHeaders, getTitle } from '@mui/markdown';
+import { getHeaders, getTitle } from '@mui/internal-markdown';
import {
ComponentInfo,
extractPackageFile,
diff --git a/packages/api-docs-builder-core/materialUi/getMaterialUiComponentInfo.ts b/packages/api-docs-builder-core/materialUi/getMaterialUiComponentInfo.ts
index c95b740ee79cd5..be080b01e268a9 100644
--- a/packages/api-docs-builder-core/materialUi/getMaterialUiComponentInfo.ts
+++ b/packages/api-docs-builder-core/materialUi/getMaterialUiComponentInfo.ts
@@ -1,7 +1,7 @@
import fs from 'fs';
import path from 'path';
import kebabCase from 'lodash/kebabCase';
-import { getHeaders, getTitle } from '@mui/markdown';
+import { getHeaders, getTitle } from '@mui/internal-markdown';
import {
ComponentInfo,
extractPackageFile,
diff --git a/packages/api-docs-builder-core/muiSystem/getSystemComponentInfo.ts b/packages/api-docs-builder-core/muiSystem/getSystemComponentInfo.ts
index 5074cf652e9d87..7ae097a4ffc2eb 100644
--- a/packages/api-docs-builder-core/muiSystem/getSystemComponentInfo.ts
+++ b/packages/api-docs-builder-core/muiSystem/getSystemComponentInfo.ts
@@ -1,7 +1,7 @@
import fs from 'fs';
import path from 'path';
import kebabCase from 'lodash/kebabCase';
-import { getHeaders, getTitle } from '@mui/markdown';
+import { getHeaders, getTitle } from '@mui/internal-markdown';
import {
ComponentInfo,
extractPackageFile,
diff --git a/packages/api-docs-builder-core/package.json b/packages/api-docs-builder-core/package.json
index 471dfded3f00d3..aa4dc20a1f6fc2 100644
--- a/packages/api-docs-builder-core/package.json
+++ b/packages/api-docs-builder-core/package.json
@@ -10,7 +10,7 @@
},
"dependencies": {
"@mui-internal/api-docs-builder": "workspace:^",
- "@mui/markdown": "workspace:^",
+ "@mui/internal-markdown": "workspace:^",
"docs": "workspace:^",
"lodash": "^4.17.21"
},
diff --git a/packages/api-docs-builder/ApiBuilders/ComponentApiBuilder.ts b/packages/api-docs-builder/ApiBuilders/ComponentApiBuilder.ts
index ebe0d2e8374a07..379532af1e7d0f 100644
--- a/packages/api-docs-builder/ApiBuilders/ComponentApiBuilder.ts
+++ b/packages/api-docs-builder/ApiBuilders/ComponentApiBuilder.ts
@@ -9,7 +9,7 @@ import remark from 'remark';
import remarkVisit from 'unist-util-visit';
import type { Link } from 'mdast';
import { defaultHandlers, parse as docgenParse, ReactDocgenApi } from 'react-docgen';
-import { renderMarkdown } from '@mui/markdown';
+import { renderMarkdown } from '@mui/internal-markdown';
import { ComponentClassDefinition } from '@mui-internal/docs-utils';
import { ProjectSettings, SortingStrategiesType } from '../ProjectSettings';
import { ComponentInfo, toGitHubPath, writePrettifiedFile } from '../buildApiUtils';
diff --git a/packages/api-docs-builder/ApiBuilders/HookApiBuilder.ts b/packages/api-docs-builder/ApiBuilders/HookApiBuilder.ts
index e9d357164e67cd..f02e5e6d9de344 100644
--- a/packages/api-docs-builder/ApiBuilders/HookApiBuilder.ts
+++ b/packages/api-docs-builder/ApiBuilders/HookApiBuilder.ts
@@ -8,7 +8,7 @@ import traverse from '@babel/traverse';
import { defaultHandlers, parse as docgenParse, ReactDocgenApi } from 'react-docgen';
import kebabCase from 'lodash/kebabCase';
import upperFirst from 'lodash/upperFirst';
-import { renderMarkdown } from '@mui/markdown';
+import { renderMarkdown } from '@mui/internal-markdown';
import { ProjectSettings } from '../ProjectSettings';
import { computeApiDescription } from './ComponentApiBuilder';
import {
diff --git a/packages/api-docs-builder/package.json b/packages/api-docs-builder/package.json
index d04916d0fd9049..ab819321b1f584 100644
--- a/packages/api-docs-builder/package.json
+++ b/packages/api-docs-builder/package.json
@@ -12,7 +12,7 @@
"@babel/preset-typescript": "^7.23.3",
"@babel/traverse": "^7.23.9",
"@mui-internal/docs-utils": "workspace:^",
- "@mui/markdown": "workspace:^",
+ "@mui/internal-markdown": "workspace:^",
"ast-types": "^0.14.2",
"doctrine": "^3.0.0",
"fast-glob": "^3.3.2",
diff --git a/packages/api-docs-builder/utils/parseSlotsAndClasses.ts b/packages/api-docs-builder/utils/parseSlotsAndClasses.ts
index 8056c440d663bf..92582e71355370 100644
--- a/packages/api-docs-builder/utils/parseSlotsAndClasses.ts
+++ b/packages/api-docs-builder/utils/parseSlotsAndClasses.ts
@@ -1,6 +1,6 @@
import * as ts from 'typescript';
import { ComponentClassDefinition } from '@mui-internal/docs-utils';
-import { renderMarkdown } from '@mui/markdown';
+import { renderMarkdown } from '@mui/internal-markdown';
import { getSymbolDescription, getSymbolJSDocTags } from '../buildApiUtils';
import { TypeScriptProject } from './createTypeScriptProject';
import { getPropsFromComponentNode } from './getPropsFromComponentNode';
@@ -53,7 +53,10 @@ export default function parseSlotsAndClasses({
componentName,
muiName,
slotInterfaceName,
-}: ParseSlotsAndClassesParameters): { slots: Slot[]; classes: ComponentClassDefinition[] } {
+}: ParseSlotsAndClassesParameters): {
+ slots: Slot[];
+ classes: ComponentClassDefinition[];
+} {
// Obtain an array of classes for the given component
const classDefinitions = extractClasses(
typescriptProject,
diff --git a/packages/markdown/CHANGELOG.md b/packages/markdown/CHANGELOG.md
new file mode 100644
index 00000000000000..e8e145aeb8077c
--- /dev/null
+++ b/packages/markdown/CHANGELOG.md
@@ -0,0 +1,5 @@
+# Changelog
+
+## 1.0.0
+
+First release as an npm package.
diff --git a/packages/markdown/README.md b/packages/markdown/README.md
new file mode 100644
index 00000000000000..d7f8bba018b3bf
--- /dev/null
+++ b/packages/markdown/README.md
@@ -0,0 +1,11 @@
+# @mui-internal/markdown
+
+MUI markdown parser and webpack loader.
+This is an internal package not meant for general use.
+
+## Release
+
+There is no build step.
+Sources are meant to be used directly.
+
+To publish the build artifacts to npm run `pnpm release:publish`.
diff --git a/packages/markdown/loader.js b/packages/markdown/loader.js
index 99da3ae6403e1c..ed418dc2bfc0b8 100644
--- a/packages/markdown/loader.js
+++ b/packages/markdown/loader.js
@@ -28,50 +28,33 @@ function moduleIDToJSIdentifier(moduleID) {
.join('');
}
-const componentPackageMapping = {
- 'material-ui': {},
- 'base-ui': {},
- 'joy-ui': {},
-};
+let componentPackageMapping = null;
-const packages = [
- {
- productId: 'material-ui',
- paths: [
- path.join(__dirname, '../../packages/mui-base/src'),
- path.join(__dirname, '../../packages/mui-lab/src'),
- path.join(__dirname, '../../packages/mui-material/src'),
- ],
- },
- {
- productId: 'base-ui',
- paths: [path.join(__dirname, '../../packages/mui-base/src')],
- },
- {
- productId: 'joy-ui',
- paths: [path.join(__dirname, '../../packages/mui-joy/src')],
- },
-];
-
-packages.forEach((pkg) => {
- pkg.paths.forEach((pkgPath) => {
- const match = pkgPath.match(/packages(?:\\|\/)([^/\\]+)(?:\\|\/)src/);
- const packageName = match ? match[1] : null;
- if (!packageName) {
- throw new Error(`cannot find package name from path: ${pkgPath}`);
- }
- const filePaths = readdirSync(pkgPath);
- filePaths.forEach((folder) => {
- if (folder.match(/^[A-Z]/)) {
- if (!componentPackageMapping[pkg.productId]) {
- throw new Error(`componentPackageMapping must have "${pkg.productId}" as a key`);
- }
- // filename starts with Uppercase = component
- componentPackageMapping[pkg.productId][folder] = packageName;
+function findComponents(packages) {
+ const mapping = {};
+
+ packages.forEach((pkg) => {
+ pkg.paths.forEach((pkgPath) => {
+ const match = pkgPath.match(/packages(?:\\|\/)([^/\\]+)(?:\\|\/)src/);
+ const packageName = match ? match[1] : null;
+ if (!packageName) {
+ throw new Error(`cannot find package name from path: ${pkgPath}`);
}
+ const filePaths = readdirSync(pkgPath);
+ filePaths.forEach((folder) => {
+ if (folder.match(/^[A-Z]/)) {
+ if (!mapping[pkg.productId]) {
+ mapping[pkg.productId] = {};
+ }
+ // filename starts with Uppercase = component
+ mapping[pkg.productId][folder] = packageName;
+ }
+ });
});
});
-});
+
+ return mapping;
+}
/**
* @type {import('webpack').loader.Loader}
@@ -80,6 +63,10 @@ module.exports = async function demoLoader() {
const englishFilepath = this.resourcePath;
const options = this.getOptions();
+ if (componentPackageMapping === null) {
+ componentPackageMapping = findComponents(options.packages ?? []);
+ }
+
const englishFilename = path.basename(englishFilepath, '.md');
const files = await fs.readdir(path.dirname(englishFilepath));
@@ -122,9 +109,8 @@ module.exports = async function demoLoader() {
);
// Use .. as the docs runs from the /docs folder
- const repositoryRoot = path.join(this.rootContext, '..');
const fileRelativeContext = path
- .relative(repositoryRoot, this.context)
+ .relative(options.workspaceRoot, this.context)
// win32 to posix
.replace(/\\/g, '/');
diff --git a/packages/markdown/package.json b/packages/markdown/package.json
index d6d982041d4255..4b799f5e3f95b2 100644
--- a/packages/markdown/package.json
+++ b/packages/markdown/package.json
@@ -1,7 +1,8 @@
{
- "name": "@mui/markdown",
- "version": "5.0.0",
- "private": true,
+ "name": "@mui/internal-markdown",
+ "version": "1.0.0",
+ "author": "MUI Team",
+ "description": "MUI markdown parser. This is an internal package not meant for general use.",
"main": "./index.js",
"types": "./index.d.ts",
"exports": {
@@ -9,6 +10,15 @@
"./loader": "./loader.js",
"./prism": "./prism.js"
},
+ "repository": {
+ "type": "git",
+ "url": "https://github.com/mui/material-ui.git",
+ "directory": "packages/docs-utils"
+ },
+ "scripts": {
+ "release:publish": "pnpm publish --tag latest",
+ "release:publish:dry-run": "pnpm publish --tag latest --registry=\"http://localhost:4873/\""
+ },
"dependencies": {
"@babel/runtime": "^7.23.9",
"lodash": "^4.17.21",
@@ -18,5 +28,8 @@
"devDependencies": {
"@types/chai": "^4.3.11",
"chai": "^4.4.1"
+ },
+ "publishConfig": {
+ "access": "public"
}
}
diff --git a/packages/markdown/prepareMarkdown.js b/packages/markdown/prepareMarkdown.js
index bce1eff29d8764..31e2a95a9e710b 100644
--- a/packages/markdown/prepareMarkdown.js
+++ b/packages/markdown/prepareMarkdown.js
@@ -104,7 +104,7 @@ function prepareMarkdown(config) {
contents.push(`
## Unstyled
-Use the [Base UI ${markdownH1}](${headers.unstyled}) for complete ownership of the component's design, with no Material UI styles to override.
+Use the [Base UI ${markdownH1}](${headers.unstyled}) for complete ownership of the component's design, with no Material UI or Joy UI styles to override.
This unstyled version of the component is the ideal choice for heavy customization with a smaller bundle size.
`);
}
@@ -240,7 +240,7 @@ ${headers.hooks
if (docs.en.headers.card === 'true') {
const slug = docs.en.location.replace(/(.*)\/(.*)\.md/, '$2');
const exists = fs.existsSync(
- path.resolve(__dirname, `../../docs/public/static/blog/${slug}/card.png`),
+ path.resolve(config.options.workspaceRoot, `docs/public/static/blog/${slug}/card.png`),
);
if (!exists) {
diff --git a/packages/mui-babel-macros/CHANGELOG.md b/packages/mui-babel-macros/CHANGELOG.md
new file mode 100644
index 00000000000000..a6c93f9bf457a6
--- /dev/null
+++ b/packages/mui-babel-macros/CHANGELOG.md
@@ -0,0 +1,5 @@
+# Changelog
+
+## 1.0.0
+
+Initial release as an npm package.
diff --git a/packages/mui-babel-macros/MuiError.macro.js b/packages/mui-babel-macros/MuiError.macro.js
index d10b169d9183e6..0b2e2a0a963d59 100644
--- a/packages/mui-babel-macros/MuiError.macro.js
+++ b/packages/mui-babel-macros/MuiError.macro.js
@@ -12,7 +12,7 @@ function invertObject(object) {
/**
* Supported imports:
- * 1. bare specifier e.g. `'@mui-internal/babel-macros/MuiError.macro'`
+ * 1. bare specifier e.g. `'@mui/internal-babel-macros/MuiError.macro'`
* 2. relative import from `packages/mui-utils/src` e.g. `'../macros/MuiError.macro'`
* @param {import('babel-plugin-macros').MacroParams} param0
*/
@@ -128,9 +128,9 @@ function muiError({ references, babel, config, source }) {
errorCode = parseInt(errorCode, 10);
if (formatMuiErrorMessageIdentifier === null) {
- const isBareImportSourceIdentifier = source.startsWith('@mui-internal/babel-macros');
+ const isBareImportSourceIdentifier = source.startsWith('@mui/internal-babel-macros');
if (isBareImportSourceIdentifier) {
- // Input: import MuiError from '@mui-internal/babel-macros/MuiError.macro'
+ // Input: import MuiError from '@mui/internal-babel-macros/MuiError.macro'
// Outputs:
// import { formatMuiErrorMessage } from '@mui/utils';
formatMuiErrorMessageIdentifier = helperModuleImports.addDefault(
@@ -139,7 +139,7 @@ function muiError({ references, babel, config, source }) {
{ nameHint: '_formatMuiErrorMessage' },
);
} else {
- throw new Error('Only package imports from @mui-internal/babel-macros are supported');
+ throw new Error('Only package imports from @mui/internal-babel-macros are supported');
}
}
diff --git a/packages/mui-babel-macros/README.md b/packages/mui-babel-macros/README.md
new file mode 100644
index 00000000000000..4fcfb319018975
--- /dev/null
+++ b/packages/mui-babel-macros/README.md
@@ -0,0 +1,9 @@
+# @mui/internal-babel-macros
+
+This package contains the error macro used in MUI projects.
+This is an internal package not meant for general use.
+
+## Release
+
+There is no build step.
+To publish the package to npm, run: `pnpm release:publish`
diff --git a/packages/mui-babel-macros/__fixtures__/error-code-extraction/input.js b/packages/mui-babel-macros/__fixtures__/error-code-extraction/input.js
index 0e9bea7f05e01a..69a30d073b7136 100644
--- a/packages/mui-babel-macros/__fixtures__/error-code-extraction/input.js
+++ b/packages/mui-babel-macros/__fixtures__/error-code-extraction/input.js
@@ -1,4 +1,4 @@
-import MuiError from '@mui-internal/babel-macros/MuiError.macro';
+import MuiError from '@mui/internal-babel-macros/MuiError.macro';
throw new MuiError('exists');
throw new MuiError('will be created');
diff --git a/packages/mui-babel-macros/__fixtures__/factory-call/input.js b/packages/mui-babel-macros/__fixtures__/factory-call/input.js
index 30a058dbfe37b5..c4957eb663baad 100644
--- a/packages/mui-babel-macros/__fixtures__/factory-call/input.js
+++ b/packages/mui-babel-macros/__fixtures__/factory-call/input.js
@@ -1,4 +1,4 @@
-import MuiError from '@mui-internal/babel-macros/MuiError.macro';
+import MuiError from '@mui/internal-babel-macros/MuiError.macro';
// `throw Error(message)` is valid JS but we limit error construction to a single syntax.
throw MuiError('my message');
diff --git a/packages/mui-babel-macros/__fixtures__/literal/input.js b/packages/mui-babel-macros/__fixtures__/literal/input.js
index ef1f0337c1b16e..2ed3398ceb8021 100644
--- a/packages/mui-babel-macros/__fixtures__/literal/input.js
+++ b/packages/mui-babel-macros/__fixtures__/literal/input.js
@@ -1,3 +1,3 @@
-import MuiError from '@mui-internal/babel-macros/MuiError.macro';
+import MuiError from '@mui/internal-babel-macros/MuiError.macro';
throw new MuiError('MUI: Expected valid input target.\n' + 'Did you use `inputComponent`');
diff --git a/packages/mui-babel-macros/__fixtures__/no-error-code-annotation/input.js b/packages/mui-babel-macros/__fixtures__/no-error-code-annotation/input.js
index 9931ed0b0a1963..922dbfba609578 100644
--- a/packages/mui-babel-macros/__fixtures__/no-error-code-annotation/input.js
+++ b/packages/mui-babel-macros/__fixtures__/no-error-code-annotation/input.js
@@ -1,3 +1,3 @@
-import MuiError from '@mui-internal/babel-macros/MuiError.macro';
+import MuiError from '@mui/internal-babel-macros/MuiError.macro';
throw new MuiError('MUI: Expected valid input target.\n' + 'Did you use inputComponent');
diff --git a/packages/mui-babel-macros/__fixtures__/no-error-code-throw/input.js b/packages/mui-babel-macros/__fixtures__/no-error-code-throw/input.js
index 834e86b59175c1..d804f33d59c04d 100644
--- a/packages/mui-babel-macros/__fixtures__/no-error-code-throw/input.js
+++ b/packages/mui-babel-macros/__fixtures__/no-error-code-throw/input.js
@@ -1,3 +1,3 @@
-import MuiError from '@mui-internal/babel-macros/MuiError.macro';
+import MuiError from '@mui/internal-babel-macros/MuiError.macro';
throw new MuiError('missing');
diff --git a/packages/mui-babel-macros/package.json b/packages/mui-babel-macros/package.json
index 13eb125da748a9..825d35f8b080b3 100644
--- a/packages/mui-babel-macros/package.json
+++ b/packages/mui-babel-macros/package.json
@@ -1,8 +1,9 @@
{
- "name": "@mui-internal/babel-macros",
+ "name": "@mui/internal-babel-macros",
"version": "1.0.0",
- "private": true,
"author": "MUI Team",
+ "description": "MUI Babel macros. This is an internal package not meant for general use.",
+ "main": "./MuiError.macro.js",
"repository": {
"type": "git",
"url": "https://github.com/mui/material-ui.git",
@@ -12,12 +13,13 @@
"bugs": {
"url": "https://github.com/mui/material-ui/issues"
},
- "homepage": "private package",
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/mui-org"
},
"scripts": {
+ "release:publish": "pnpm publish --tag latest",
+ "release:publish:dry-run": "pnpm publish --tag latest --registry=\"http://localhost:4873/\"",
"test": "cd ../../ && cross-env NODE_ENV=test mocha 'packages/mui-babel-macros/**/*.test.{js,ts,tsx}'"
},
"dependencies": {
@@ -26,7 +28,7 @@
"babel-plugin-macros": "^3.1.0"
},
"devDependencies": {
- "@mui-internal/babel-macros": "workspace:*",
+ "@mui/internal-babel-macros": "workspace:*",
"@types/babel-plugin-macros": "^3.1.3",
"@types/chai": "^4.3.11",
"@types/mocha": "^10.0.6",
@@ -35,10 +37,13 @@
"chai": "^4.4.1"
},
"peerDependencies": {
- "@mui/utils": "workspace:^"
+ "@mui/utils": "^5.0.0"
},
"sideEffects": false,
"engines": {
"node": ">=12.0.0"
+ },
+ "publishConfig": {
+ "access": "public"
}
}
diff --git a/packages/mui-base/README.md b/packages/mui-base/README.md
index 9b85e19eace6ca..35b605e1330406 100644
--- a/packages/mui-base/README.md
+++ b/packages/mui-base/README.md
@@ -24,7 +24,7 @@ Visit [https://mui.com/base-ui/](https://mui.com/base-ui/) to view the full docu
## Questions
For how-to questions that don't involve making changes to the code base, please use [Stack Overflow](https://stackoverflow.com/questions/tagged/base-ui) instead of GitHub issues.
-Use the "base-ui" tag on Stack Overflow to make it easier for the community to find your question.
+Use the "base-ui" tag on Stack Overflow to make it easier for the community to find your question.
## Examples
diff --git a/packages/mui-base/package.json b/packages/mui-base/package.json
index ad1056ac3742f3..7593292d12cd68 100644
--- a/packages/mui-base/package.json
+++ b/packages/mui-base/package.json
@@ -1,6 +1,6 @@
{
"name": "@mui/base",
- "version": "5.0.0-beta.36",
+ "version": "5.0.0-beta.37",
"private": false,
"author": "MUI Team",
"description": "Base UI is a library of headless ('unstyled') React components and low-level hooks. You gain complete control over your app's CSS and accessibility features.",
@@ -50,7 +50,7 @@
"prop-types": "^15.8.1"
},
"devDependencies": {
- "@mui-internal/babel-macros": "workspace:^",
+ "@mui/internal-babel-macros": "workspace:^",
"@mui-internal/test-utils": "workspace:^",
"@mui/types": "workspace:^",
"@testing-library/react": "^14.2.1",
diff --git a/packages/mui-base/src/Unstable_Popup/Popup.test.tsx b/packages/mui-base/src/Unstable_Popup/Popup.test.tsx
index c557195636c768..03ae6a31d9195d 100644
--- a/packages/mui-base/src/Unstable_Popup/Popup.test.tsx
+++ b/packages/mui-base/src/Unstable_Popup/Popup.test.tsx
@@ -13,7 +13,7 @@ function FakeTransition(props: React.PropsWithChildren<{}>) {
const { requestedEnter, onExited } = useTransitionStateManager();
React.useEffect(() => {
- let timeoutId: NodeJS.Timeout | null = null;
+ let timeoutId: ReturnType{{muiName}} to change the default props of this component with the theme.",
+ "classes": "CSS classes",
+ "classesDescription": "These class names are useful for styling with CSS. They are applied to the component's slots when specific states are triggered.",
+ "className": "Class name",
+ "cssDescription": "The following class names are useful for styling with CSS (the state classes are marked). To learn more, visit the component customization page.", + "css": "CSS", + "cssComponent": "As a CSS utility, the {{name}} component also supports all
system properties. You can use them as props directly on the component.",
+ "default": "Default",
+ "defaultComponent": "Default component",
+ "defaultValue": "Default value",
+ "defaultHTMLTag": "Default HTML tag",
+ "demos": "Component demos",
+ "deprecated": "Deprecated",
+ "description": "Description",
+ "globalClass": "Global class",
+ "defaultClass": "Default class",
+ "hookName": "Hook name",
+ "hooksApi": "Hooks API",
+ "hooksNoParameters": "This hook does not accept any input parameters.",
+ "hooksPageDescription": "API reference docs for the {{name}} hook. Learn about the input parameters and other APIs of this exported module.",
+ "import": "Import",
+ "importDifference": "Learn about the difference by reading this guide on minimizing bundle size.",
+ "inheritance": "Inheritance",
+ "inheritanceDescription": "While not explicitly documented above, the props of the {{component}} component{{suffix}} are also available in {{name}}. You can take advantage of this to target nested components.",
+ "inheritanceSuffixTransition": " from react-transition-group",
+ "name": "Name",
+ "nativeElement": "native",
+ "overrideStyles": "You can override the style of the component using one of these customization options:\n",
+ "overrideStylesStyledComponent": "- \n
ref is forwarded to the root element.",
+ "ruleName": "Rule name",
+ "signature": "Signature",
+ "slots": "Slots",
+ "spreadHint": "Props of the {{spreadHintElement}} component are also available.",
+ "state": "STATE",
+ "styleOverrides": "The name {{componentStyles.name}} can be used when providing default props or style overrides in the theme.",
+ "slotDescription": "To learn how to customize the slot, check out the Overriding component structure guide.",
+ "slotName": "Slot name",
+ "type": "Type",
+ "required": "Required",
+ "optional": "Optional",
+ "additional-info": {
+ "cssApi": "See CSS classes API below for more details.",
+ "sx": "See the `sx` page for more details.",
+ "slotsApi": "See Slots API below for more details.",
+ "joy-size": "To learn how to add custom sizes to the component, check out Themed components—Extend sizes.",
+ "joy-color": "To learn how to add your own colors, check out Themed components—Extend colors.",
+ "joy-variant": "To learn how to add your own variants, check out Themed components—Extend variants."
+ }
+ },
+ "landingPageDescr": "A responsive landing page layout with many common sections.",
+ "landingPageTitle": "Landing page",
+ "searchButton": "Search…",
+ "algoliaSearch": "What are you looking for?",
+ "appFrame": {
+ "changeLanguage": "Change language",
+ "github": "GitHub repository",
+ "helpToTranslate": "Help to translate",
+ "openDrawer": "Open main navigation",
+ "skipToContent": "Skip to content",
+ "toggleSettings": "Toggle settings drawer"
+ },
+ "backToTop": "Scroll back to top",
+ "blogDescr": "A sophisticated blog page layout. Markdown support is courtesy of markdown-to-jsx.",
+ "blogTitle": "Blog",
+ "bundleSize": "Bundle size",
+ "bundleSizeTooltip": "Scroll down to 'Exports Analysis' for a more detailed report.",
+ "cancel": "Cancel",
+ "cdn": "or use a CDN.",
+ "checkoutDescr": "A step-by-step checkout page layout. Adapt the number of steps to suit your needs, or make steps optional.",
+ "checkoutTitle": "Checkout",
+ "clickToCopy": "Click to copy",
+ "close": "Close",
+ "codesandbox": "Edit in CodeSandbox",
+ "copied": "Copied",
+ "copiedSource": "The source code has been copied to your clipboard.",
+ "copiedSourceLink": "Link to the source code has been copied to your clipboard.",
+ "copySource": "Copy the source",
+ "copySourceLinkJS": "Copy link to JavaScript source",
+ "copySourceLinkTS": "Copy link to TypeScript source",
+ "dashboardDescr": "Contains a taskbar and a mini variant drawer. The chart is courtesy of Recharts.",
+ "dashboardTitle": "Dashboard",
+ "decreaseSpacing": "decrease spacing",
+ "demoToolbarLabel": "demo source",
+ "demoStylingSelectSystem": "MUI System",
+ "demoStylingSelectTailwind": "Tailwind CSS",
+ "demoStylingSelectCSS": "Plain CSS",
+ "diamondSponsors": "Diamond sponsors",
+ "becomeADiamondSponsor": "Become a Diamond sponsor",
+ "diamondSponsorVacancies": "One spot left!",
+ "editorHint": "Press Enter to start editing",
+ "editPage": "Edit this page",
+ "emojiLove": "Love",
+ "emojiWarning": "Warning",
+ "expandAll": "Expand all",
+ "feedbackCommentLabel": "Comment",
+ "feedbackFailed": "Couldn't submit feedback. Please try again later.",
+ "feedbackMessage": "Was this page helpful?",
+ "feedbackMessageDown": "How can we improve this page? (optional)",
+ "feedbackMessageUp": "What did you like about this page? (optional)",
+ "feedbackSectionSpecific": "How can we improve the {{sectionName}} section? (optional)",
+ "feedbackMessageToGitHub": {
+ "usecases": "If something is broken or if you need a reply to a problem you've encountered, please",
+ "reasonWhy": "Otherwise, the team won't be able to answer back or ask for more information.",
+ "callToAction": {
+ "link": "open an issue instead."
+ }
+ },
+ "feedbackNo": "No",
+ "feedbackSubmitted": "Feedback submitted",
+ "feedbackYes": "Yes",
+ "footerCompany": "Company",
+ "goToHome": "go to homepage",
+ "getProfessionalSupport": "Get Professional Support",
+ "getStarted": "Get Started",
+ "githubLabel": "Feedback",
+ "headTitle": "MUI: A popular React UI framework",
+ "hideFullSource": "Collapse code",
+ "hideSource": "Hide code",
+ "homeQuickWord": "A quick word from our sponsors:",
+ "increaseSpacing": "increase spacing",
+ "initialFocusLabel": "A generic container that is programmatically focused to test keyboard navigation of our components.",
+ "installation": "Installation",
+ "installButton": "Read installation docs",
+ "installDescr": "Install MUI's source files via npm. We take care of injecting the CSS needed.",
+ "joinThese": "Join these and other great organizations!",
+ "JS": "JavaScript",
+ "letUsKnow": "Let us know!",
+ "likeMui": "Help us keep running",
+ "loadFont": "Load the default Roboto font.",
+ "mainNavigation": "documentation",
+ "newest": "Newest",
+ "openDrawer": "Open documentation navigation",
+ "or": "or",
+ "pageTOC": "Page table of contents",
+ "praise": "Praise for MUI",
+ "praiseDescr": "Here's what some of our users are saying.",
+ "pricingDescr": "Quickly build an effective pricing table for your potential customers.",
+ "pricingTitle": "Pricing",
+ "resetDemo": "Reset demo",
+ "resetDensity": "Reset density",
+ "resetFocus": "Reset focus to test keyboard navigation",
+ "searchIcons": {
+ "learnMore": "Learn more about the import"
+ },
+ "seeMore": "See more",
+ "settings": {
+ "color": "Color",
+ "dark": "Dark",
+ "direction": "Direction",
+ "editWebsiteColors": "Edit website colors",
+ "light": "Light",
+ "ltr": "Left to right",
+ "mode": "Mode",
+ "rtl": "Right to left",
+ "settings": "Settings",
+ "system": "System",
+ "language": "Language"
+ },
+ "showFullSource": "Expand code",
+ "showJSSource": "Show JavaScript source",
+ "showSource": "Show code",
+ "showTSSource": "Show TypeScript source",
+ "signInDescr": "A simple sign-in page using text fields, buttons, checkboxes, links, and more.",
+ "signInSideDescr": "A simple sign-in page with a two-column layout using text fields, buttons, and more.",
+ "signInSideTitle": "Sign-in side",
+ "signInTitle": "Sign-in",
+ "signUpDescr": "A simple sign-up page using text fields, buttons, checkboxes, links, and more.",
+ "signUpTitle": "Sign-up",
+ "sourceCode": "Source code",
+ "spacingUnit": "Spacing unit",
+ "stackblitz": "Edit in StackBlitz",
+ "stars": "GitHub stars",
+ "stickyFooterDescr": "Attach a footer to the bottom of the viewport when page content is short.",
+ "stickyFooterTitle": "Sticky footer",
+ "strapline": "MUI provides a simple, customizable, and accessible library of React components. Follow your own design system, or start with Material Design.",
+ "submit": "Submit",
+ "tableOfContents": "Contents",
+ "thanks": "Thank you!",
+ "themes": "Premium themes",
+ "themesButton": "Browse themes",
+ "themesDescr": "Take your project to the next level with premium themes from our store – all built on MUI.",
+ "toggleNotifications": "Toggle notifications panel",
+ "toggleRTL": "Toggle right-to-left/left-to-right",
+ "traffic": "Traffic",
+ "TS": "TypeScript",
+ "v5IsOut": "🎉 v5 release candidate is out! Head to the",
+ "v5docsLink": "v5 documentation",
+ "v5startAdoption": "to get started.",
+ "unreadNotifications": "unread notifications",
+ "usage": "Usage",
+ "usageButton": "Explore the docs",
+ "usageDescr": "MUI components work without any additional setup, and don't pollute the global scope.",
+ "useDarkTheme": "Use dark theme",
+ "useHighDensity": "Apply higher density via props",
+ "usingMui": "Are you using MUI?",
+ "viewGitHub": "View the source on GitHub",
+ "visit": "Visit the website",
+ "whosUsing": "Who's using MUI?"
+}
diff --git a/packages/mui-docs/tsconfig.build.json b/packages/mui-docs/tsconfig.build.json
index ba7a787fa189f4..e51a26ab34c9e5 100644
--- a/packages/mui-docs/tsconfig.build.json
+++ b/packages/mui-docs/tsconfig.build.json
@@ -8,9 +8,10 @@
"noEmit": false,
"emitDeclarationOnly": true,
"outDir": "build",
- "rootDir": "./src"
+ "rootDir": "./src",
+ "tsBuildInfoFile": "build/tsconfig.build.tsbuildinfo"
},
- "include": ["src/**/*.ts*"],
+ "include": ["src/**/*.ts*", "src/**/*.json"],
"exclude": ["src/**/*.spec.ts*", "src/**/*.test.ts*"],
"references": [{ "path": "../mui-material/tsconfig.build.json" }]
}
diff --git a/packages/mui-docs/tsconfig.json b/packages/mui-docs/tsconfig.json
index 1227ceb7c1f109..63ed1fc8920b4f 100644
--- a/packages/mui-docs/tsconfig.json
+++ b/packages/mui-docs/tsconfig.json
@@ -2,6 +2,7 @@
"extends": "../../tsconfig.json",
"compilerOptions": {
"skipLibCheck": true,
+ "resolveJsonModule": true,
"types": ["react", "node"]
},
"include": ["src/**/*", "test/**/*"]
diff --git a/packages/mui-icons-material/package.json b/packages/mui-icons-material/package.json
index 3ec0aa17a551a1..655de74410cd1b 100644
--- a/packages/mui-icons-material/package.json
+++ b/packages/mui-icons-material/package.json
@@ -1,6 +1,6 @@
{
"name": "@mui/icons-material",
- "version": "5.15.10",
+ "version": "5.15.11",
"private": false,
"author": "MUI Team",
"description": "Material Design icons distributed as SVG React components.",
diff --git a/packages/mui-icons-material/test/generated-types/tsconfig.json b/packages/mui-icons-material/test/generated-types/tsconfig.json
index 182ab1f9baed41..9b00faf9c2d744 100644
--- a/packages/mui-icons-material/test/generated-types/tsconfig.json
+++ b/packages/mui-icons-material/test/generated-types/tsconfig.json
@@ -21,8 +21,8 @@
"@mui/joy/*": ["./mui-joy/src/*"],
"@mui/lab": ["./mui-lab/src"],
"@mui/lab/*": ["./mui-lab/src/*"],
- "@mui/markdown": ["./markdown"],
- "@mui/markdown/*": ["./markdown/*"],
+ "@mui/internal-markdown": ["./markdown"],
+ "@mui/internal-markdown/*": ["./markdown/*"],
"@mui/material-next": ["./mui-material-next/src"],
"@mui/material-next/*": ["./mui-material-next/src/*"],
"@mui/material-nextjs": ["./mui-material-nextjs/src"],
diff --git a/packages/mui-joy/README.md b/packages/mui-joy/README.md
index 023f2c85fec6ae..98053e50428614 100644
--- a/packages/mui-joy/README.md
+++ b/packages/mui-joy/README.md
@@ -22,7 +22,7 @@ Visit [https://mui.com/joy-ui/getting-started/](https://mui.com/joy-ui/getting-s
## Questions
For how-to questions that don't involve making changes to the code base, please use [Stack Overflow](https://stackoverflow.com/questions/tagged/joy-ui) instead of GitHub issues.
-Use the "joy-ui" tag on Stack Overflow to make it easier for the community to find your question.
+Use the "joy-ui" tag on Stack Overflow to make it easier for the community to find your question.
## Examples
diff --git a/packages/mui-joy/package.json b/packages/mui-joy/package.json
index f96e1c6064b189..c46bd9f9b649af 100644
--- a/packages/mui-joy/package.json
+++ b/packages/mui-joy/package.json
@@ -1,6 +1,6 @@
{
"name": "@mui/joy",
- "version": "5.0.0-beta.28",
+ "version": "5.0.0-beta.29",
"private": false,
"author": "MUI Team",
"description": "Joy UI is an open-source React component library that implements MUI's own design principles. It's comprehensive and can be used in production out of the box.",
diff --git a/packages/mui-lab/package.json b/packages/mui-lab/package.json
index 2b00ba123f521d..37c1a9941320fa 100644
--- a/packages/mui-lab/package.json
+++ b/packages/mui-lab/package.json
@@ -1,6 +1,6 @@
{
"name": "@mui/lab",
- "version": "5.0.0-alpha.165",
+ "version": "5.0.0-alpha.166",
"private": false,
"author": "MUI Team",
"description": "Laboratory for new MUI modules.",
diff --git a/packages/mui-lab/src/TimelineDot/color-palette-prop.spec.tsx b/packages/mui-lab/src/TimelineDot/color-palette-prop.spec.tsx
new file mode 100644
index 00000000000000..3702b0b0c914bb
--- /dev/null
+++ b/packages/mui-lab/src/TimelineDot/color-palette-prop.spec.tsx
@@ -0,0 +1,15 @@
+import * as React from 'react';
+import TimelineDot from '@mui/lab/TimelineDot';
+
+function TestBaseColorPaletteProp() {
+ const baseColorPalette = ['primary', 'secondary', 'error', 'info', 'success', 'warning'] as const;
+ return (
+
+ {baseColorPalette.map((color) => (
+
+ );
+}
diff --git a/packages/mui-material-next/package.json b/packages/mui-material-next/package.json
index e5260817da6f50..474288b423c989 100644
--- a/packages/mui-material-next/package.json
+++ b/packages/mui-material-next/package.json
@@ -1,6 +1,6 @@
{
"name": "@mui/material-next",
- "version": "6.0.0-alpha.123",
+ "version": "6.0.0-alpha.124",
"private": false,
"author": "MUI Team",
"description": "v6-alpha: React components that implement Google's Material Design",
@@ -54,7 +54,7 @@
},
"devDependencies": {
"@emotion/react": "^11.11.3",
- "@mui-internal/babel-macros": "workspace:^",
+ "@mui/internal-babel-macros": "workspace:^",
"@mui-internal/test-utils": "workspace:^",
"@testing-library/user-event": "^14.5.2",
"@types/chai": "^4.3.11",
diff --git a/packages/mui-material-next/src/Select/SelectInput.js b/packages/mui-material-next/src/Select/SelectInput.js
index 7c7bbfd9d5c3a6..a90bd619bbe932 100644
--- a/packages/mui-material-next/src/Select/SelectInput.js
+++ b/packages/mui-material-next/src/Select/SelectInput.js
@@ -3,7 +3,7 @@ import * as React from 'react';
import { isFragment } from 'react-is';
import PropTypes from 'prop-types';
import clsx from 'clsx';
-import MuiError from '@mui-internal/babel-macros/MuiError.macro';
+import MuiError from '@mui/internal-babel-macros/MuiError.macro';
import { unstable_composeClasses as composeClasses } from '@mui/base/composeClasses';
import {
refType,
diff --git a/packages/mui-material-nextjs/package.json b/packages/mui-material-nextjs/package.json
index 19709d4470c0b3..31abc5f6818c76 100644
--- a/packages/mui-material-nextjs/package.json
+++ b/packages/mui-material-nextjs/package.json
@@ -1,6 +1,6 @@
{
"name": "@mui/material-nextjs",
- "version": "5.15.9",
+ "version": "5.15.11",
"private": false,
"author": "MUI Team",
"description": "Collection of utilities for integration between Material UI and Next.js.",
diff --git a/packages/mui-material/README.md b/packages/mui-material/README.md
index cc920b4b4032ce..1d88d3f9be3911 100644
--- a/packages/mui-material/README.md
+++ b/packages/mui-material/README.md
@@ -22,7 +22,7 @@ Visit [https://mui.com/material-ui/](https://mui.com/material-ui/) to view the f
## 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 "material-ui" tag on Stack Overflow to make it easier for the community to find your question.
+Use the "material-ui" tag on Stack Overflow to make it easier for the community to find your question.
## Examples
diff --git a/packages/mui-material/package.json b/packages/mui-material/package.json
index 49aa2273adbb84..c49f2e526f340c 100644
--- a/packages/mui-material/package.json
+++ b/packages/mui-material/package.json
@@ -1,6 +1,6 @@
{
"name": "@mui/material",
- "version": "5.15.10",
+ "version": "5.15.11",
"private": false,
"author": "MUI Team",
"description": "Material UI is an open-source React component library that implements Google's Material Design. It's comprehensive and can be used in production out of the box.",
@@ -56,9 +56,8 @@
"react-transition-group": "^4.4.5"
},
"devDependencies": {
- "@mui-internal/babel-macros": "workspace:^",
+ "@mui/internal-babel-macros": "workspace:^",
"@mui-internal/test-utils": "workspace:^",
- "@mui/lab": "workspace:*",
"@popperjs/core": "^2.11.8",
"@rollup/plugin-replace": "^5.0.5",
"@testing-library/dom": "^9.3.4",
diff --git a/packages/mui-material/src/Alert/Alert.js b/packages/mui-material/src/Alert/Alert.js
index 9701368cbbf77c..e9d5b3f5a0647b 100644
--- a/packages/mui-material/src/Alert/Alert.js
+++ b/packages/mui-material/src/Alert/Alert.js
@@ -21,7 +21,12 @@ const useUtilityClasses = (ownerState) => {
const { variant, color, severity, classes } = ownerState;
const slots = {
- root: ['root', `${variant}${capitalize(color || severity)}`, `${variant}`],
+ root: [
+ 'root',
+ `color${capitalize(color || severity)}`,
+ `${variant}${capitalize(color || severity)}`,
+ `${variant}`,
+ ],
icon: ['icon'],
message: ['message'],
action: ['action'],
diff --git a/packages/mui-material/src/Alert/Alert.test.js b/packages/mui-material/src/Alert/Alert.test.js
index 18cda2b0690235..e0fefe68874db0 100644
--- a/packages/mui-material/src/Alert/Alert.test.js
+++ b/packages/mui-material/src/Alert/Alert.test.js
@@ -7,6 +7,7 @@ import Paper, { paperClasses } from '@mui/material/Paper';
import { iconButtonClasses } from '@mui/material/IconButton';
import { svgIconClasses } from '@mui/material/SvgIcon';
import describeConformance from '../../test/describeConformance';
+import capitalize from '../utils/capitalize';
describe('
+
+ ))}
+ ${titleCase(componentName)}
+
+ <${componentName} />
+
+