-
- Item One
-
-
- Item Two
-
-
- Item Three
-
-
+
+ Item One
+
+
+ Item Two
+
+
+ Item Three
+
{fabs.map((fab, index) => (
{
- setValue(index);
- };
-
const transitionDuration = {
enter: theme.transitions.duration.enteringScreen,
exit: theme.transitions.duration.leavingScreen,
@@ -120,21 +115,15 @@ export default function FloatingActionButtonZoom() {
-
- Item One
-
-
- Item Two
-
-
- Item Three
-
-
+
+ Item One
+
+
+ Item Two
+
+
+ Item Three
+
{fabs.map((fab, index) => (
prop !== 'arrow',
diff --git a/docs/data/material/components/stack/InteractiveStack.js b/docs/data/material/components/stack/InteractiveStack.js
index 8c61706ef15893..270c7d2354c96d 100644
--- a/docs/data/material/components/stack/InteractiveStack.js
+++ b/docs/data/material/components/stack/InteractiveStack.js
@@ -7,7 +7,7 @@ import Paper from '@mui/material/Paper';
import RadioGroup from '@mui/material/RadioGroup';
import Radio from '@mui/material/Radio';
import Stack from '@mui/material/Stack';
-import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
+import { HighlightedCode } from '@mui/docs/HighlightedCode';
export default function InteractiveStack() {
const [direction, setDirection] = React.useState('row');
diff --git a/docs/data/material/components/stack/InteractiveStack.tsx b/docs/data/material/components/stack/InteractiveStack.tsx
index c6320ecb8a77c5..2c4fb30f5c44e8 100644
--- a/docs/data/material/components/stack/InteractiveStack.tsx
+++ b/docs/data/material/components/stack/InteractiveStack.tsx
@@ -7,7 +7,7 @@ import Paper from '@mui/material/Paper';
import RadioGroup from '@mui/material/RadioGroup';
import Radio from '@mui/material/Radio';
import Stack, { StackProps } from '@mui/material/Stack';
-import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
+import { HighlightedCode } from '@mui/docs/HighlightedCode';
export default function InteractiveStack() {
const [direction, setDirection] = React.useState('row');
diff --git a/docs/data/material/components/steppers/SwipeableTextMobileStepper.js b/docs/data/material/components/steppers/SwipeableTextMobileStepper.js
deleted file mode 100644
index d7fd286fadf318..00000000000000
--- a/docs/data/material/components/steppers/SwipeableTextMobileStepper.js
+++ /dev/null
@@ -1,128 +0,0 @@
-import * as React from 'react';
-import { useTheme } from '@mui/material/styles';
-import Box from '@mui/material/Box';
-import MobileStepper from '@mui/material/MobileStepper';
-import Paper from '@mui/material/Paper';
-import Typography from '@mui/material/Typography';
-import Button from '@mui/material/Button';
-import KeyboardArrowLeft from '@mui/icons-material/KeyboardArrowLeft';
-import KeyboardArrowRight from '@mui/icons-material/KeyboardArrowRight';
-import SwipeableViews from 'react-swipeable-views';
-import { autoPlay } from 'react-swipeable-views-utils';
-
-const AutoPlaySwipeableViews = autoPlay(SwipeableViews);
-
-const images = [
- {
- label: 'San Francisco – Oakland Bay Bridge, United States',
- imgPath:
- 'https://images.unsplash.com/photo-1537944434965-cf4679d1a598?auto=format&fit=crop&w=400&h=250&q=60',
- },
- {
- label: 'Bird',
- imgPath:
- 'https://images.unsplash.com/photo-1538032746644-0212e812a9e7?auto=format&fit=crop&w=400&h=250&q=60',
- },
- {
- label: 'Bali, Indonesia',
- imgPath:
- 'https://images.unsplash.com/photo-1537996194471-e657df975ab4?auto=format&fit=crop&w=400&h=250',
- },
- {
- label: 'Goč, Serbia',
- imgPath:
- 'https://images.unsplash.com/photo-1512341689857-198e7e2f3ca8?auto=format&fit=crop&w=400&h=250&q=60',
- },
-];
-
-function SwipeableTextMobileStepper() {
- const theme = useTheme();
- const [activeStep, setActiveStep] = React.useState(0);
- const maxSteps = images.length;
-
- const handleNext = () => {
- setActiveStep((prevActiveStep) => prevActiveStep + 1);
- };
-
- const handleBack = () => {
- setActiveStep((prevActiveStep) => prevActiveStep - 1);
- };
-
- const handleStepChange = (step) => {
- setActiveStep(step);
- };
-
- return (
-
-
- {images[activeStep].label}
-
-
- {images.map((step, index) => (
-
- {Math.abs(activeStep - index) <= 2 ? (
-
- ))}
-
-
- Next
- {theme.direction === 'rtl' ? (
-
- {theme.direction === 'rtl' ? (
-
- }
- />
-
- );
-}
-
-export default SwipeableTextMobileStepper;
diff --git a/docs/data/material/components/steppers/SwipeableTextMobileStepper.tsx b/docs/data/material/components/steppers/SwipeableTextMobileStepper.tsx
deleted file mode 100644
index 7eb9ecd57e5960..00000000000000
--- a/docs/data/material/components/steppers/SwipeableTextMobileStepper.tsx
+++ /dev/null
@@ -1,128 +0,0 @@
-import * as React from 'react';
-import { useTheme } from '@mui/material/styles';
-import Box from '@mui/material/Box';
-import MobileStepper from '@mui/material/MobileStepper';
-import Paper from '@mui/material/Paper';
-import Typography from '@mui/material/Typography';
-import Button from '@mui/material/Button';
-import KeyboardArrowLeft from '@mui/icons-material/KeyboardArrowLeft';
-import KeyboardArrowRight from '@mui/icons-material/KeyboardArrowRight';
-import SwipeableViews from 'react-swipeable-views';
-import { autoPlay } from 'react-swipeable-views-utils';
-
-const AutoPlaySwipeableViews = autoPlay(SwipeableViews);
-
-const images = [
- {
- label: 'San Francisco – Oakland Bay Bridge, United States',
- imgPath:
- 'https://images.unsplash.com/photo-1537944434965-cf4679d1a598?auto=format&fit=crop&w=400&h=250&q=60',
- },
- {
- label: 'Bird',
- imgPath:
- 'https://images.unsplash.com/photo-1538032746644-0212e812a9e7?auto=format&fit=crop&w=400&h=250&q=60',
- },
- {
- label: 'Bali, Indonesia',
- imgPath:
- 'https://images.unsplash.com/photo-1537996194471-e657df975ab4?auto=format&fit=crop&w=400&h=250',
- },
- {
- label: 'Goč, Serbia',
- imgPath:
- 'https://images.unsplash.com/photo-1512341689857-198e7e2f3ca8?auto=format&fit=crop&w=400&h=250&q=60',
- },
-];
-
-function SwipeableTextMobileStepper() {
- const theme = useTheme();
- const [activeStep, setActiveStep] = React.useState(0);
- const maxSteps = images.length;
-
- const handleNext = () => {
- setActiveStep((prevActiveStep) => prevActiveStep + 1);
- };
-
- const handleBack = () => {
- setActiveStep((prevActiveStep) => prevActiveStep - 1);
- };
-
- const handleStepChange = (step: number) => {
- setActiveStep(step);
- };
-
- return (
-
-
- {images[activeStep].label}
-
-
- {images.map((step, index) => (
-
- {Math.abs(activeStep - index) <= 2 ? (
-
- ))}
-
-
- Next
- {theme.direction === 'rtl' ? (
-
- {theme.direction === 'rtl' ? (
-
- }
- />
-
- );
-}
-
-export default SwipeableTextMobileStepper;
diff --git a/docs/data/material/components/steppers/steppers.md b/docs/data/material/components/steppers/steppers.md
index 909ed00bd884f3..8b8181d6db1497 100644
--- a/docs/data/material/components/steppers/steppers.md
+++ b/docs/data/material/components/steppers/steppers.md
@@ -94,13 +94,6 @@ The current step and total number of steps are displayed as text.
{{"demo": "TextMobileStepper.js", "bg": true}}
-### Text with carousel effect
-
-This demo uses
-[react-swipeable-views](https://github.com/oliviertassinari/react-swipeable-views) to create a carousel.
-
-{{"demo": "SwipeableTextMobileStepper.js", "bg": true}}
-
### Dots
Use dots when the number of steps is small.
diff --git a/docs/data/material/components/table/EnhancedTable.js b/docs/data/material/components/table/EnhancedTable.js
index 8417fa180abbe7..b0fa5ea53be9ce 100644
--- a/docs/data/material/components/table/EnhancedTable.js
+++ b/docs/data/material/components/table/EnhancedTable.js
@@ -65,22 +65,6 @@ function getComparator(order, orderBy) {
: (a, b) => -descendingComparator(a, b, orderBy);
}
-// Since 2020 all major browsers ensure sort stability with Array.prototype.sort().
-// stableSort() brings sort stability to non-modern browsers (notably IE11). If you
-// only support modern browsers you can replace stableSort(exampleArray, exampleComparator)
-// with exampleArray.slice().sort(exampleComparator)
-function stableSort(array, comparator) {
- const stabilizedThis = array.map((el, index) => [el, index]);
- stabilizedThis.sort((a, b) => {
- const order = comparator(a[0], b[0]);
- if (order !== 0) {
- return order;
- }
- return a[1] - b[1];
- });
- return stabilizedThis.map((el) => el[0]);
-}
-
const headCells = [
{
id: 'name',
@@ -288,10 +272,9 @@ export default function EnhancedTable() {
const visibleRows = React.useMemo(
() =>
- stableSort(rows, getComparator(order, orderBy)).slice(
- page * rowsPerPage,
- page * rowsPerPage + rowsPerPage,
- ),
+ [...rows]
+ .sort(getComparator(order, orderBy))
+ .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage),
[order, orderBy, page, rowsPerPage],
);
diff --git a/docs/data/material/components/table/EnhancedTable.tsx b/docs/data/material/components/table/EnhancedTable.tsx
index d1fd663dc821cc..23d1f23a1c19d2 100644
--- a/docs/data/material/components/table/EnhancedTable.tsx
+++ b/docs/data/material/components/table/EnhancedTable.tsx
@@ -88,22 +88,6 @@ function getComparator(
: (a, b) => -descendingComparator(a, b, orderBy);
}
-// Since 2020 all major browsers ensure sort stability with Array.prototype.sort().
-// stableSort() brings sort stability to non-modern browsers (notably IE11). If you
-// only support modern browsers you can replace stableSort(exampleArray, exampleComparator)
-// with exampleArray.slice().sort(exampleComparator)
-function stableSort(array: readonly T[], comparator: (a: T, b: T) => number) {
- const stabilizedThis = array.map((el, index) => [el, index] as [T, number]);
- stabilizedThis.sort((a, b) => {
- const order = comparator(a[0], b[0]);
- if (order !== 0) {
- return order;
- }
- return a[1] - b[1];
- });
- return stabilizedThis.map((el) => el[0]);
-}
-
interface HeadCell {
disablePadding: boolean;
id: keyof Data;
@@ -320,10 +304,9 @@ export default function EnhancedTable() {
const visibleRows = React.useMemo(
() =>
- stableSort(rows, getComparator(order, orderBy)).slice(
- page * rowsPerPage,
- page * rowsPerPage + rowsPerPage,
- ),
+ [...rows]
+ .sort(getComparator(order, orderBy))
+ .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage),
[order, orderBy, page, rowsPerPage],
);
diff --git a/docs/data/material/components/tabs/FullWidthTabs.js b/docs/data/material/components/tabs/FullWidthTabs.js
index 8439038ffc54b5..2e8a08deba0e8a 100644
--- a/docs/data/material/components/tabs/FullWidthTabs.js
+++ b/docs/data/material/components/tabs/FullWidthTabs.js
@@ -1,6 +1,5 @@
import * as React from 'react';
import PropTypes from 'prop-types';
-import SwipeableViews from 'react-swipeable-views';
import { useTheme } from '@mui/material/styles';
import AppBar from '@mui/material/AppBar';
import Tabs from '@mui/material/Tabs';
@@ -49,10 +48,6 @@ export default function FullWidthTabs() {
setValue(newValue);
};
- const handleChangeIndex = (index) => {
- setValue(index);
- };
-
return (
@@ -69,21 +64,15 @@ export default function FullWidthTabs() {
-
-
- Item One
-
-
- Item Two
-
-
- Item Three
-
-
+
+ Item One
+
+
+ Item Two
+
+
+ Item Three
+
);
}
diff --git a/docs/data/material/components/tabs/FullWidthTabs.tsx b/docs/data/material/components/tabs/FullWidthTabs.tsx
index 0b3b1c34d556cf..99ff253bb02f63 100644
--- a/docs/data/material/components/tabs/FullWidthTabs.tsx
+++ b/docs/data/material/components/tabs/FullWidthTabs.tsx
@@ -1,5 +1,4 @@
import * as React from 'react';
-import SwipeableViews from 'react-swipeable-views';
import { useTheme } from '@mui/material/styles';
import AppBar from '@mui/material/AppBar';
import Tabs from '@mui/material/Tabs';
@@ -49,10 +48,6 @@ export default function FullWidthTabs() {
setValue(newValue);
};
- const handleChangeIndex = (index: number) => {
- setValue(index);
- };
-
return (
@@ -69,21 +64,15 @@ export default function FullWidthTabs() {
-
-
- Item One
-
-
- Item Two
-
-
- Item Three
-
-
+
+ Item One
+
+
+ Item Two
+
+
+ Item Three
+
);
}
diff --git a/docs/data/material/components/tabs/tabs.md b/docs/data/material/components/tabs/tabs.md
index f75936d72dee57..443e2daf8cda99 100644
--- a/docs/data/material/components/tabs/tabs.md
+++ b/docs/data/material/components/tabs/tabs.md
@@ -67,7 +67,6 @@ Fixed tabs should be used with a limited number of tabs, and when a consistent p
### Full width
The `variant="fullWidth"` prop should be used for smaller views.
-This demo also uses [react-swipeable-views](https://github.com/oliviertassinari/react-swipeable-views) to animate the Tab transition, and allowing tabs to be swiped on touch devices.
{{"demo": "FullWidthTabs.js", "bg": true}}
diff --git a/docs/data/material/getting-started/templates/checkout/Checkout.js b/docs/data/material/getting-started/templates/checkout/Checkout.js
index d0929cac54591d..32e9da0dc52420 100644
--- a/docs/data/material/getting-started/templates/checkout/Checkout.js
+++ b/docs/data/material/getting-started/templates/checkout/Checkout.js
@@ -142,7 +142,7 @@ export default function Checkout() {
({
- maxWidth: { sm: '100%', md: '50%' },
- flexGrow: 1,
- border: '1px solid',
- borderColor: 'divider',
- '&:hover': {
- background:
- theme.palette.mode === 'light'
- ? 'linear-gradient(to bottom right, hsla(210, 100%, 97%, 0.5) 25%, hsla(210, 100%, 90%, 0.3) 100%)'
- : 'linear-gradient(to right bottom, hsla(210, 100%, 12%, 0.2) 25%, hsla(210, 100%, 16%, 0.2) 100%)',
- borderColor:
- theme.palette.mode === 'light' ? 'primary.light' : 'primary.dark',
- boxShadow:
- theme.palette.mode === 'light'
- ? '0px 2px 8px hsla(0, 0%, 0%, 0.1)'
- : '0px 1px 8px hsla(210, 100%, 25%, 0.5) ',
- },
- ...(paymentType === 'creditCard' && {
- backgroundColor: 'action.selected',
- borderColor:
- theme.palette.mode === 'light' ? 'primary.light' : 'primary.dark',
- }),
- })}
- >
+
setPaymentType('creditCard')}
sx={{
@@ -122,31 +150,7 @@ export default function PaymentForm() {
- ({
- maxWidth: { sm: '100%', md: '50%' },
- flexGrow: 1,
- border: '1px solid',
- borderColor: 'divider',
- '&:hover': {
- background:
- theme.palette.mode === 'light'
- ? 'linear-gradient(to bottom right, hsla(210, 100%, 97%, 0.5) 25%, hsla(210, 100%, 90%, 0.3) 100%)'
- : 'linear-gradient(to right bottom, hsla(210, 100%, 12%, 0.2) 25%, hsla(210, 100%, 16%, 0.2) 100%)',
- borderColor:
- theme.palette.mode === 'light' ? 'primary.light' : 'primary.dark',
- boxShadow:
- theme.palette.mode === 'light'
- ? '0px 2px 8px hsla(0, 0%, 0%, 0.1)'
- : '0px 1px 8px hsla(210, 100%, 25%, 0.5) ',
- },
- ...(paymentType === 'bankTransfer' && {
- backgroundColor: 'action.selected',
- borderColor:
- theme.palette.mode === 'light' ? 'primary.light' : 'primary.dark',
- }),
- })}
- >
+
setPaymentType('bankTransfer')}
sx={{
@@ -182,21 +186,7 @@ export default function PaymentForm() {
gap: 2,
}}
>
-
+
Credit card
-
+
({
- maxWidth: { sm: '100%', md: '50%' },
- flexGrow: 1,
- border: '1px solid',
- borderColor: 'divider',
- '&:hover': {
- background:
- theme.palette.mode === 'light'
- ? 'linear-gradient(to bottom right, hsla(210, 100%, 97%, 0.5) 25%, hsla(210, 100%, 90%, 0.3) 100%)'
- : 'linear-gradient(to right bottom, hsla(210, 100%, 12%, 0.2) 25%, hsla(210, 100%, 16%, 0.2) 100%)',
- borderColor:
- theme.palette.mode === 'light' ? 'primary.light' : 'primary.dark',
- boxShadow:
- theme.palette.mode === 'light'
- ? '0px 2px 8px hsla(0, 0%, 0%, 0.1)'
- : '0px 1px 8px hsla(210, 100%, 25%, 0.5) ',
- },
- ...(paymentType === 'creditCard' && {
- backgroundColor: 'action.selected',
- borderColor:
- theme.palette.mode === 'light' ? 'primary.light' : 'primary.dark',
- }),
- })}
- >
+
setPaymentType('creditCard')}
sx={{
@@ -124,31 +152,7 @@ export default function PaymentForm() {
- ({
- maxWidth: { sm: '100%', md: '50%' },
- flexGrow: 1,
- border: '1px solid',
- borderColor: 'divider',
- '&:hover': {
- background:
- theme.palette.mode === 'light'
- ? 'linear-gradient(to bottom right, hsla(210, 100%, 97%, 0.5) 25%, hsla(210, 100%, 90%, 0.3) 100%)'
- : 'linear-gradient(to right bottom, hsla(210, 100%, 12%, 0.2) 25%, hsla(210, 100%, 16%, 0.2) 100%)',
- borderColor:
- theme.palette.mode === 'light' ? 'primary.light' : 'primary.dark',
- boxShadow:
- theme.palette.mode === 'light'
- ? '0px 2px 8px hsla(0, 0%, 0%, 0.1)'
- : '0px 1px 8px hsla(210, 100%, 25%, 0.5) ',
- },
- ...(paymentType === 'bankTransfer' && {
- backgroundColor: 'action.selected',
- borderColor:
- theme.palette.mode === 'light' ? 'primary.light' : 'primary.dark',
- }),
- })}
- >
+
setPaymentType('bankTransfer')}
sx={{
@@ -184,21 +188,7 @@ export default function PaymentForm() {
gap: 2,
}}
>
-
+
Credit card
-
+
+
Sign in
-
+
Sign up
@@ -190,26 +176,12 @@ function AppAppBar({ mode, toggleColorMode }) {
scrollToSection('faq')}>FAQ
-
+
Sign up
-
+
Sign in
diff --git a/docs/data/material/getting-started/templates/landing-page/components/AppAppBar.tsx b/docs/data/material/getting-started/templates/landing-page/components/AppAppBar.tsx
index d0b2a9b6e99a98..5402d2072c46b1 100644
--- a/docs/data/material/getting-started/templates/landing-page/components/AppAppBar.tsx
+++ b/docs/data/material/getting-started/templates/landing-page/components/AppAppBar.tsx
@@ -135,24 +135,10 @@ export default function AppAppBar({ mode, toggleColorMode }: AppAppBarProps) {
}}
>
+
Sign in
-
+
Sign up
@@ -194,26 +180,12 @@ export default function AppAppBar({ mode, toggleColorMode }: AppAppBarProps) {
scrollToSection('faq')}>FAQ
-
+
Sign up
-
+
Sign in
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 565084d9b210a9..34b8842a6a8539 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
@@ -2,12 +2,15 @@ import * as React from 'react';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import Card from '@mui/material/Card';
-import Chip from '@mui/material/Chip';
+import { Chip as MuiChip } from '@mui/material';
import Container from '@mui/material/Container';
import Grid from '@mui/material/Grid';
import Link from '@mui/material/Link';
import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography';
+
+import { styled } from '@mui/material/styles';
+
import ChevronRightRoundedIcon from '@mui/icons-material/ChevronRightRounded';
import DevicesRoundedIcon from '@mui/icons-material/DevicesRounded';
import EdgesensorHighRoundedIcon from '@mui/icons-material/EdgesensorHighRounded';
@@ -40,6 +43,21 @@ const items = [
},
];
+const Chip = styled(MuiChip)(({ theme, selected }) => ({
+ ...(selected && {
+ borderColor:
+ theme.palette.mode === 'light'
+ ? theme.palette.primary.light
+ : theme.palette.primary.dark,
+ background:
+ 'linear-gradient(to bottom right, hsl(210, 98%, 48%), hsl(210, 98%, 35%))',
+ color: 'hsl(0, 0%, 100%)',
+ '& .MuiChip-label': {
+ color: 'hsl(0, 0%, 100%)',
+ },
+ }),
+}));
+
export default function Features() {
const [selectedItemIndex, setSelectedItemIndex] = React.useState(0);
@@ -73,20 +91,7 @@ export default function Features() {
key={index}
label={title}
onClick={() => handleItemClick(index)}
- sx={(theme) => ({
- ...(selectedItemIndex === index && {
- borderColor:
- theme.palette.mode === 'light'
- ? 'primary.light'
- : 'primary.dark',
- background:
- 'linear-gradient(to bottom right, hsl(210, 98%, 48%), hsl(210, 98%, 35%))',
- color: 'hsl(0, 0%, 100%)',
- '& .MuiChip-label': {
- color: 'hsl(0, 0%, 100%)',
- },
- }),
- })}
+ selected={selectedItemIndex === index}
/>
))}
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 f02afaa5483979..1f198bafe9b841 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
@@ -2,12 +2,15 @@ import * as React from 'react';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import Card from '@mui/material/Card';
-import Chip from '@mui/material/Chip';
+import { Chip as MuiChip } from '@mui/material';
import Container from '@mui/material/Container';
import Grid from '@mui/material/Grid';
import Link from '@mui/material/Link';
import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography';
+
+import { styled } from '@mui/material/styles';
+
import ChevronRightRoundedIcon from '@mui/icons-material/ChevronRightRounded';
import DevicesRoundedIcon from '@mui/icons-material/DevicesRounded';
import EdgesensorHighRoundedIcon from '@mui/icons-material/EdgesensorHighRounded';
@@ -40,6 +43,25 @@ const items = [
},
];
+interface ChipProps {
+ selected?: boolean;
+}
+
+const Chip = styled(MuiChip)(({ theme, selected }) => ({
+ ...(selected && {
+ borderColor:
+ theme.palette.mode === 'light'
+ ? theme.palette.primary.light
+ : theme.palette.primary.dark,
+ background:
+ 'linear-gradient(to bottom right, hsl(210, 98%, 48%), hsl(210, 98%, 35%))',
+ color: 'hsl(0, 0%, 100%)',
+ '& .MuiChip-label': {
+ color: 'hsl(0, 0%, 100%)',
+ },
+ }),
+}));
+
export default function Features() {
const [selectedItemIndex, setSelectedItemIndex] = React.useState(0);
@@ -73,20 +95,7 @@ export default function Features() {
key={index}
label={title}
onClick={() => handleItemClick(index)}
- sx={(theme) => ({
- ...(selectedItemIndex === index && {
- borderColor:
- theme.palette.mode === 'light'
- ? 'primary.light'
- : 'primary.dark',
- background:
- 'linear-gradient(to bottom right, hsl(210, 98%, 48%), hsl(210, 98%, 35%))',
- color: 'hsl(0, 0%, 100%)',
- '& .MuiChip-label': {
- color: 'hsl(0, 0%, 100%)',
- },
- }),
- })}
+ selected={selectedItemIndex === index}
/>
))}
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 a8e9b21b0c2ef9..dadc3e27009461 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
@@ -9,6 +9,34 @@ import TextField from '@mui/material/TextField';
import Typography from '@mui/material/Typography';
import { visuallyHidden } from '@mui/utils';
+import { styled } from '@mui/material/styles';
+
+const StyledBox = styled('div')(({ theme }) => ({
+ alignSelf: 'center',
+ width: '100%',
+ height: 400,
+ marginTop: theme.spacing(8),
+ borderRadius: theme.shape.borderRadius,
+ boxShadow:
+ theme.palette.mode === 'light'
+ ? '0 0 12px 8px hsla(220, 25%, 80%, 0.2)'
+ : '0 0 24px 12px hsla(210, 100%, 25%, 0.2)',
+ outline: '1px solid',
+ backgroundImage: `url(${
+ theme.palette.mode === 'light'
+ ? '/static/images/templates/templates-images/hero-light.png'
+ : '/static/images/templates/templates-images/hero-dark.png'
+ })`,
+ backgroundSize: 'cover',
+ outlineColor:
+ theme.palette.mode === 'light'
+ ? 'hsla(220, 25%, 80%, 0.5)'
+ : 'hsla(210, 100%, 80%, 0.1)',
+ [theme.breakpoints.up('sm')]: {
+ marginTop: theme.spacing(10),
+ height: 700,
+ },
+}));
export default function Hero() {
return (
@@ -102,30 +130,7 @@ export default function Hero() {
.
- ({
- mt: { xs: 8, sm: 10 },
- alignSelf: 'center',
- height: { xs: 200, sm: 700 },
- width: '100%',
- backgroundImage:
- theme.palette.mode === 'light'
- ? 'url("/static/images/templates/templates-images/hero-light.png")'
- : 'url("/static/images/templates/templates-images/hero-dark.png")',
- backgroundSize: 'cover',
- borderRadius: '12px',
- outline: '1px solid',
- outlineColor:
- theme.palette.mode === 'light'
- ? 'hsla(220, 25%, 80%, 0.5)'
- : 'hsla(210, 100%, 80%, 0.1)',
- boxShadow:
- theme.palette.mode === 'light'
- ? '0 0 12px 8px hsla(220, 25%, 80%, 0.2)'
- : '0 0 24px 12px hsla(210, 100%, 25%, 0.2)',
- })}
- />
+
);
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 a8e9b21b0c2ef9..dadc3e27009461 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
@@ -9,6 +9,34 @@ import TextField from '@mui/material/TextField';
import Typography from '@mui/material/Typography';
import { visuallyHidden } from '@mui/utils';
+import { styled } from '@mui/material/styles';
+
+const StyledBox = styled('div')(({ theme }) => ({
+ alignSelf: 'center',
+ width: '100%',
+ height: 400,
+ marginTop: theme.spacing(8),
+ borderRadius: theme.shape.borderRadius,
+ boxShadow:
+ theme.palette.mode === 'light'
+ ? '0 0 12px 8px hsla(220, 25%, 80%, 0.2)'
+ : '0 0 24px 12px hsla(210, 100%, 25%, 0.2)',
+ outline: '1px solid',
+ backgroundImage: `url(${
+ theme.palette.mode === 'light'
+ ? '/static/images/templates/templates-images/hero-light.png'
+ : '/static/images/templates/templates-images/hero-dark.png'
+ })`,
+ backgroundSize: 'cover',
+ outlineColor:
+ theme.palette.mode === 'light'
+ ? 'hsla(220, 25%, 80%, 0.5)'
+ : 'hsla(210, 100%, 80%, 0.1)',
+ [theme.breakpoints.up('sm')]: {
+ marginTop: theme.spacing(10),
+ height: 700,
+ },
+}));
export default function Hero() {
return (
@@ -102,30 +130,7 @@ export default function Hero() {
.
- ({
- mt: { xs: 8, sm: 10 },
- alignSelf: 'center',
- height: { xs: 200, sm: 700 },
- width: '100%',
- backgroundImage:
- theme.palette.mode === 'light'
- ? 'url("/static/images/templates/templates-images/hero-light.png")'
- : 'url("/static/images/templates/templates-images/hero-dark.png")',
- backgroundSize: 'cover',
- borderRadius: '12px',
- outline: '1px solid',
- outlineColor:
- theme.palette.mode === 'light'
- ? 'hsla(220, 25%, 80%, 0.5)'
- : 'hsla(210, 100%, 80%, 0.1)',
- boxShadow:
- theme.palette.mode === 'light'
- ? '0 0 12px 8px hsla(220, 25%, 80%, 0.2)'
- : '0 0 24px 12px hsla(210, 100%, 25%, 0.2)',
- })}
- />
+
);
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 54a00b4a03dcd8..5a005b5f68e74b 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
@@ -196,13 +196,7 @@ export default function Pricing() {
))}
-
+
{tier.buttonText}
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 52ca695ee1ff1e..5c508931a71af3 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
@@ -199,9 +199,6 @@ export default function Pricing() {
{tier.buttonText}
diff --git a/docs/data/material/getting-started/templates/sign-in-side/SignInCard.js b/docs/data/material/getting-started/templates/sign-in-side/SignInCard.js
index 9c6c23678ee7b9..92d27a719c33fb 100644
--- a/docs/data/material/getting-started/templates/sign-in-side/SignInCard.js
+++ b/docs/data/material/getting-started/templates/sign-in-side/SignInCard.js
@@ -1,7 +1,7 @@
import * as React from 'react';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
-import Card from '@mui/material/Card';
+import { Card as MuiCard } from '@mui/material';
import Checkbox from '@mui/material/Checkbox';
import Divider from '@mui/material/Divider';
import FormLabel from '@mui/material/FormLabel';
@@ -11,9 +11,28 @@ import Link from '@mui/material/Link';
import TextField from '@mui/material/TextField';
import Typography from '@mui/material/Typography';
+import { styled } from '@mui/material/styles';
+
import ForgotPassword from './ForgotPassword';
import { GoogleIcon, FacebookIcon, SitemarkIcon } from './CustomIcons';
+const Card = styled(MuiCard)(({ theme }) => ({
+ display: 'flex',
+ flexDirection: 'column',
+ alignSelf: 'center',
+ gap: theme.spacing(4),
+ width: '100%',
+ padding: theme.spacing(2),
+ boxShadow:
+ theme.palette.mode === 'light'
+ ? 'hsla(220, 30%, 5%, 0.05) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.05) 0px 15px 35px -5px, hsla(220, 30%, 5%, 0.05) 0px 0px 0px 1px'
+ : 'hsla(220, 30%, 5%, 0.5) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.08) 0px 15px 35px -5px, hsla(220, 30%, 5%, 0.05) 0px 0px 0px 1px',
+ [theme.breakpoints.up('sm')]: {
+ padding: theme.spacing(4),
+ width: '450px',
+ },
+}));
+
export default function SignInCard() {
const [emailError, setEmailError] = React.useState(false);
const [emailErrorMessage, setEmailErrorMessage] = React.useState('');
@@ -66,20 +85,7 @@ export default function SignInCard() {
};
return (
- ({
- display: 'flex',
- flexDirection: 'column',
- alignSelf: 'center',
- width: { xs: '100%', sm: '450px' },
- p: { xs: 2, sm: 4 },
- gap: 2,
- boxShadow:
- theme.palette.mode === 'light'
- ? 'hsla(220, 30%, 5%, 0.05) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.05) 0px 15px 35px -5px, hsla(220, 30%, 5%, 0.05) 0px 0px 0px 1px'
- : 'hsla(220, 30%, 5%, 0.5) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.08) 0px 15px 35px -5px, hsla(220, 30%, 5%, 0.05) 0px 0px 0px 1px',
- })}
- >
+
diff --git a/docs/data/material/getting-started/templates/sign-in-side/SignInCard.tsx b/docs/data/material/getting-started/templates/sign-in-side/SignInCard.tsx
index 8697dcc3e042df..139b35c8ad4ad7 100644
--- a/docs/data/material/getting-started/templates/sign-in-side/SignInCard.tsx
+++ b/docs/data/material/getting-started/templates/sign-in-side/SignInCard.tsx
@@ -1,7 +1,7 @@
import * as React from 'react';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
-import Card from '@mui/material/Card';
+import { Card as MuiCard } from '@mui/material';
import Checkbox from '@mui/material/Checkbox';
import Divider from '@mui/material/Divider';
import FormLabel from '@mui/material/FormLabel';
@@ -11,9 +11,28 @@ import Link from '@mui/material/Link';
import TextField from '@mui/material/TextField';
import Typography from '@mui/material/Typography';
+import { styled } from '@mui/material/styles';
+
import ForgotPassword from './ForgotPassword';
import { GoogleIcon, FacebookIcon, SitemarkIcon } from './CustomIcons';
+const Card = styled(MuiCard)(({ theme }) => ({
+ display: 'flex',
+ flexDirection: 'column',
+ alignSelf: 'center',
+ gap: theme.spacing(4),
+ width: '100%',
+ padding: theme.spacing(2),
+ boxShadow:
+ theme.palette.mode === 'light'
+ ? 'hsla(220, 30%, 5%, 0.05) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.05) 0px 15px 35px -5px, hsla(220, 30%, 5%, 0.05) 0px 0px 0px 1px'
+ : 'hsla(220, 30%, 5%, 0.5) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.08) 0px 15px 35px -5px, hsla(220, 30%, 5%, 0.05) 0px 0px 0px 1px',
+ [theme.breakpoints.up('sm')]: {
+ padding: theme.spacing(4),
+ width: '450px',
+ },
+}));
+
export default function SignInCard() {
const [emailError, setEmailError] = React.useState(false);
const [emailErrorMessage, setEmailErrorMessage] = React.useState('');
@@ -66,20 +85,7 @@ export default function SignInCard() {
};
return (
- ({
- display: 'flex',
- flexDirection: 'column',
- alignSelf: 'center',
- width: { xs: '100%', sm: '450px' },
- p: { xs: 2, sm: 4 },
- gap: 2,
- boxShadow:
- theme.palette.mode === 'light'
- ? 'hsla(220, 30%, 5%, 0.05) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.05) 0px 15px 35px -5px, hsla(220, 30%, 5%, 0.05) 0px 0px 0px 1px'
- : 'hsla(220, 30%, 5%, 0.5) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.08) 0px 15px 35px -5px, hsla(220, 30%, 5%, 0.05) 0px 0px 0px 1px',
- })}
- >
+
diff --git a/docs/data/material/getting-started/templates/sign-in/SignIn.js b/docs/data/material/getting-started/templates/sign-in/SignIn.js
index 8398bfef899d8f..ba53cf3e9ddf2a 100644
--- a/docs/data/material/getting-started/templates/sign-in/SignIn.js
+++ b/docs/data/material/getting-started/templates/sign-in/SignIn.js
@@ -2,7 +2,6 @@ import * as React from 'react';
import PropTypes from 'prop-types';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
-import Card from '@mui/material/Card';
import Checkbox from '@mui/material/Checkbox';
import CssBaseline from '@mui/material/CssBaseline';
import FormControlLabel from '@mui/material/FormControlLabel';
@@ -15,8 +14,8 @@ import ToggleButton from '@mui/material/ToggleButton';
import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
import Typography from '@mui/material/Typography';
import Stack from '@mui/material/Stack';
-
-import { ThemeProvider, createTheme } from '@mui/material/styles';
+import { Card as MuiCard } from '@mui/material';
+import { ThemeProvider, createTheme, styled } from '@mui/material/styles';
import ArrowBackRoundedIcon from '@mui/icons-material/ArrowBackRounded';
import AutoAwesomeRoundedIcon from '@mui/icons-material/AutoAwesomeRounded';
@@ -68,6 +67,37 @@ ToggleCustomTheme.propTypes = {
toggleCustomTheme: PropTypes.func.isRequired,
};
+const Card = styled(MuiCard)(({ theme }) => ({
+ display: 'flex',
+ flexDirection: 'column',
+ alignSelf: 'center',
+ gap: theme.spacing(4),
+ width: '100%',
+ padding: theme.spacing(2),
+ boxShadow:
+ theme.palette.mode === 'light'
+ ? 'hsla(220, 30%, 5%, 0.05) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.05) 0px 15px 35px -5px, hsla(220, 30%, 5%, 0.05) 0px 0px 0px 1px'
+ : 'hsla(220, 30%, 5%, 0.5) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.08) 0px 15px 35px -5px, hsla(220, 30%, 5%, 0.05) 0px 0px 0px 1px',
+ [theme.breakpoints.up('sm')]: {
+ padding: theme.spacing(4),
+ width: '450px',
+ },
+}));
+
+const SignInContainer = styled(Stack)(({ theme }) => ({
+ height: 'auto',
+ padingBottom: theme.spacing(12),
+ backgroundImage:
+ theme.palette.mode === 'light'
+ ? 'radial-gradient(ellipse at 50% 50%, hsl(210, 100%, 97%), hsl(0, 0%, 100%))'
+ : 'radial-gradient(at 50% 50%, hsla(210, 100%, 16%, 0.3), hsl(220, 30%, 5%))',
+ backgroundRepeat: 'no-repeat',
+ [theme.breakpoints.up('sm')]: {
+ paddingBottom: 0,
+ height: '100dvh',
+ },
+}));
+
export default function SignIn() {
const [mode, setMode] = React.useState('light');
const [showCustomTheme, setShowCustomTheme] = React.useState(true);
@@ -134,20 +164,7 @@ export default function SignIn() {
return (
({
- backgroundImage:
- theme.palette.mode === 'light'
- ? 'radial-gradient(ellipse at 50% 50%, hsl(210, 100%, 97%), hsl(0, 0%, 100%))'
- : 'radial-gradient(at 50% 50%, hsla(210, 100%, 16%, 0.3), hsl(220, 30%, 5%))',
- backgroundRepeat: 'no-repeat',
- height: { xs: 'auto', sm: '100dvh' },
- pb: { xs: 12, sm: 0 },
- })}
- component="main"
- >
+
- ({
- display: 'flex',
- flexDirection: 'column',
- alignSelf: 'center',
- width: { xs: '100%', sm: '450px' },
- p: { xs: 2, sm: 4 },
- gap: 4,
- boxShadow:
- theme.palette.mode === 'light'
- ? 'hsla(220, 30%, 5%, 0.05) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.05) 0px 15px 35px -5px, hsla(220, 30%, 5%, 0.05) 0px 0px 0px 1px'
- : 'hsla(220, 30%, 5%, 0.5) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.08) 0px 15px 35px -5px, hsla(220, 30%, 5%, 0.05) 0px 0px 0px 1px',
- })}
- >
+
-
+
({
+ display: 'flex',
+ flexDirection: 'column',
+ alignSelf: 'center',
+ gap: theme.spacing(4),
+ width: '100%',
+ padding: theme.spacing(2),
+ boxShadow:
+ theme.palette.mode === 'light'
+ ? 'hsla(220, 30%, 5%, 0.05) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.05) 0px 15px 35px -5px, hsla(220, 30%, 5%, 0.05) 0px 0px 0px 1px'
+ : 'hsla(220, 30%, 5%, 0.5) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.08) 0px 15px 35px -5px, hsla(220, 30%, 5%, 0.05) 0px 0px 0px 1px',
+ [theme.breakpoints.up('sm')]: {
+ padding: theme.spacing(4),
+ width: '450px',
+ },
+}));
+
+const SignInContainer = styled(Stack)(({ theme }) => ({
+ height: 'auto',
+ padingBottom: theme.spacing(12),
+ backgroundImage:
+ theme.palette.mode === 'light'
+ ? 'radial-gradient(ellipse at 50% 50%, hsl(210, 100%, 97%), hsl(0, 0%, 100%))'
+ : 'radial-gradient(at 50% 50%, hsla(210, 100%, 16%, 0.3), hsl(220, 30%, 5%))',
+ backgroundRepeat: 'no-repeat',
+ [theme.breakpoints.up('sm')]: {
+ paddingBottom: 0,
+ height: '100dvh',
+ },
+}));
+
export default function SignIn() {
const [mode, setMode] = React.useState('light');
const [showCustomTheme, setShowCustomTheme] = React.useState(true);
@@ -134,20 +164,7 @@ export default function SignIn() {
return (
({
- backgroundImage:
- theme.palette.mode === 'light'
- ? 'radial-gradient(ellipse at 50% 50%, hsl(210, 100%, 97%), hsl(0, 0%, 100%))'
- : 'radial-gradient(at 50% 50%, hsla(210, 100%, 16%, 0.3), hsl(220, 30%, 5%))',
- backgroundRepeat: 'no-repeat',
- height: { xs: 'auto', sm: '100dvh' },
- pb: { xs: 12, sm: 0 },
- })}
- component="main"
- >
+
- ({
- display: 'flex',
- flexDirection: 'column',
- alignSelf: 'center',
- width: { xs: '100%', sm: '450px' },
- p: { xs: 2, sm: 4 },
- gap: 4,
- boxShadow:
- theme.palette.mode === 'light'
- ? 'hsla(220, 30%, 5%, 0.05) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.05) 0px 15px 35px -5px, hsla(220, 30%, 5%, 0.05) 0px 0px 0px 1px'
- : 'hsla(220, 30%, 5%, 0.5) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.08) 0px 15px 35px -5px, hsla(220, 30%, 5%, 0.05) 0px 0px 0px 1px',
- })}
- >
+
-
+
({
+ display: 'flex',
+ flexDirection: 'column',
+ alignSelf: 'center',
+ gap: theme.spacing(4),
+ width: '100%',
+ padding: theme.spacing(2),
+ boxShadow:
+ theme.palette.mode === 'light'
+ ? 'hsla(220, 30%, 5%, 0.05) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.05) 0px 15px 35px -5px, hsla(220, 30%, 5%, 0.05) 0px 0px 0px 1px'
+ : 'hsla(220, 30%, 5%, 0.5) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.08) 0px 15px 35px -5px, hsla(220, 30%, 5%, 0.05) 0px 0px 0px 1px',
+ [theme.breakpoints.up('sm')]: {
+ padding: theme.spacing(4),
+ width: '450px',
+ },
+}));
+
+const SignUpContainer = styled(Stack)(({ theme }) => ({
+ height: 'auto',
+ padingBottom: theme.spacing(12),
+ backgroundImage:
+ theme.palette.mode === 'light'
+ ? 'radial-gradient(ellipse at 50% 50%, hsl(210, 100%, 97%), hsl(0, 0%, 100%))'
+ : 'radial-gradient(at 50% 50%, hsla(210, 100%, 16%, 0.3), hsl(220, 30%, 5%))',
+ backgroundRepeat: 'no-repeat',
+ [theme.breakpoints.up('sm')]: {
+ paddingBottom: 0,
+ height: '100dvh',
+ },
+}));
+
export default function SignUp() {
const [mode, setMode] = React.useState('light');
const [showCustomTheme, setShowCustomTheme] = React.useState(true);
@@ -138,19 +168,7 @@ export default function SignUp() {
return (
({
- backgroundRepeat: 'no-repeat',
- backgroundImage:
- theme.palette.mode === 'light'
- ? 'radial-gradient(ellipse at 50% 50%, hsl(210, 100%, 97%), hsl(0, 0%, 100%))'
- : 'radial-gradient(at 50% 50%, hsla(210, 100%, 16%, 0.3), hsl(220, 30%, 5%))',
- pb: { xs: 12, sm: 0 },
- })}
- >
+
- ({
- display: 'flex',
- flexDirection: 'column',
- alignSelf: 'center',
- width: { xs: '100%', sm: '450px' },
- p: { xs: 2, sm: 4 },
- gap: 4,
- boxShadow:
- theme.palette.mode === 'light'
- ? 'hsla(220, 30%, 5%, 0.05) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.05) 0px 15px 35px -5px, hsla(220, 30%, 5%, 0.05) 0px 0px 0px 1px'
- : 'hsla(220, 30%, 5%, 0.5) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.08) 0px 15px 35px -5px, hsla(220, 30%, 5%, 0.05) 0px 0px 0px 1px',
- })}
- >
+
-
+
({
+ display: 'flex',
+ flexDirection: 'column',
+ alignSelf: 'center',
+ gap: theme.spacing(4),
+ width: '100%',
+ padding: theme.spacing(2),
+ boxShadow:
+ theme.palette.mode === 'light'
+ ? 'hsla(220, 30%, 5%, 0.05) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.05) 0px 15px 35px -5px, hsla(220, 30%, 5%, 0.05) 0px 0px 0px 1px'
+ : 'hsla(220, 30%, 5%, 0.5) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.08) 0px 15px 35px -5px, hsla(220, 30%, 5%, 0.05) 0px 0px 0px 1px',
+ [theme.breakpoints.up('sm')]: {
+ padding: theme.spacing(4),
+ width: '450px',
+ },
+}));
+
+const SignUpContainer = styled(Stack)(({ theme }) => ({
+ height: 'auto',
+ padingBottom: theme.spacing(12),
+ backgroundImage:
+ theme.palette.mode === 'light'
+ ? 'radial-gradient(ellipse at 50% 50%, hsl(210, 100%, 97%), hsl(0, 0%, 100%))'
+ : 'radial-gradient(at 50% 50%, hsla(210, 100%, 16%, 0.3), hsl(220, 30%, 5%))',
+ backgroundRepeat: 'no-repeat',
+ [theme.breakpoints.up('sm')]: {
+ paddingBottom: 0,
+ height: '100dvh',
+ },
+}));
+
export default function SignUp() {
const [mode, setMode] = React.useState('light');
const [showCustomTheme, setShowCustomTheme] = React.useState(true);
@@ -138,19 +168,7 @@ export default function SignUp() {
return (
({
- backgroundRepeat: 'no-repeat',
- backgroundImage:
- theme.palette.mode === 'light'
- ? 'radial-gradient(ellipse at 50% 50%, hsl(210, 100%, 97%), hsl(0, 0%, 100%))'
- : 'radial-gradient(at 50% 50%, hsla(210, 100%, 16%, 0.3), hsl(220, 30%, 5%))',
- pb: { xs: 12, sm: 0 },
- })}
- >
+
- ({
- display: 'flex',
- flexDirection: 'column',
- alignSelf: 'center',
- width: { xs: '100%', sm: '450px' },
- p: { xs: 2, sm: 4 },
- gap: 4,
- boxShadow:
- theme.palette.mode === 'light'
- ? 'hsla(220, 30%, 5%, 0.05) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.05) 0px 15px 35px -5px, hsla(220, 30%, 5%, 0.05) 0px 0px 0px 1px'
- : 'hsla(220, 30%, 5%, 0.5) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.08) 0px 15px 35px -5px, hsla(220, 30%, 5%, 0.05) 0px 0px 0px 1px',
- })}
- >
+
-
+
premium template section.
-
+
+
+
diff --git a/docs/data/system/components/grid/SpacingGrid.js b/docs/data/system/components/grid/SpacingGrid.js
index 4ffd3591650ef4..79e2db15c03725 100644
--- a/docs/data/system/components/grid/SpacingGrid.js
+++ b/docs/data/system/components/grid/SpacingGrid.js
@@ -6,7 +6,7 @@ import FormControlLabel from '@mui/material/FormControlLabel';
import RadioGroup from '@mui/material/RadioGroup';
import Radio from '@mui/material/Radio';
import Paper from '@mui/material/Paper';
-import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
+import { HighlightedCode } from '@mui/docs/HighlightedCode';
export default function SpacingGrid() {
const [spacing, setSpacing] = React.useState(2);
diff --git a/docs/data/system/components/grid/SpacingGrid.tsx b/docs/data/system/components/grid/SpacingGrid.tsx
index 97c0d5fe114b2d..80a78f26c3ca75 100644
--- a/docs/data/system/components/grid/SpacingGrid.tsx
+++ b/docs/data/system/components/grid/SpacingGrid.tsx
@@ -6,7 +6,7 @@ import FormControlLabel from '@mui/material/FormControlLabel';
import RadioGroup from '@mui/material/RadioGroup';
import Radio from '@mui/material/Radio';
import Paper from '@mui/material/Paper';
-import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
+import { HighlightedCode } from '@mui/docs/HighlightedCode';
export default function SpacingGrid() {
const [spacing, setSpacing] = React.useState(2);
diff --git a/docs/data/system/components/stack/InteractiveStack.js b/docs/data/system/components/stack/InteractiveStack.js
index 25f978b8fe2827..ed48e6ac727308 100644
--- a/docs/data/system/components/stack/InteractiveStack.js
+++ b/docs/data/system/components/stack/InteractiveStack.js
@@ -8,7 +8,7 @@ import Radio from '@mui/material/Radio';
import Grid from '@mui/system/Unstable_Grid';
import Stack from '@mui/system/Stack';
import { styled } from '@mui/system';
-import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
+import { HighlightedCode } from '@mui/docs/HighlightedCode';
const Item = styled('div')(({ theme }) => ({
backgroundColor: theme.palette.mode === 'dark' ? '#262B32' : '#fff',
diff --git a/docs/data/system/components/stack/InteractiveStack.tsx b/docs/data/system/components/stack/InteractiveStack.tsx
index 026d18c5ff7d5f..40c09e895eddc1 100644
--- a/docs/data/system/components/stack/InteractiveStack.tsx
+++ b/docs/data/system/components/stack/InteractiveStack.tsx
@@ -8,7 +8,7 @@ import Radio from '@mui/material/Radio';
import Grid from '@mui/system/Unstable_Grid';
import Stack, { StackProps } from '@mui/system/Stack';
import { styled } from '@mui/system';
-import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
+import { HighlightedCode } from '@mui/docs/HighlightedCode';
const Item = styled('div')(({ theme }) => ({
backgroundColor: theme.palette.mode === 'dark' ? '#262B32' : '#fff',
diff --git a/docs/data/system/getting-started/the-sx-prop/the-sx-prop.md b/docs/data/system/getting-started/the-sx-prop/the-sx-prop.md
index a3e75054c37355..17b147787e83b6 100644
--- a/docs/data/system/getting-started/the-sx-prop/the-sx-prop.md
+++ b/docs/data/system/getting-started/the-sx-prop/the-sx-prop.md
@@ -179,7 +179,7 @@ Read more on the [Typography page](/system/typography/).
## Responsive values
-All properties associated with the `sx` prop also support responsive values for specific breakpoints.
+All properties associated with the `sx` prop also support responsive values for specific breakpoints and container queries.
Read more on the [Usage page—Responsive values](/system/getting-started/usage/#responsive-values).
diff --git a/docs/data/system/getting-started/usage/ContainerQueries.js b/docs/data/system/getting-started/usage/ContainerQueries.js
new file mode 100644
index 00000000000000..aa1e523a0989e4
--- /dev/null
+++ b/docs/data/system/getting-started/usage/ContainerQueries.js
@@ -0,0 +1,88 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+
+export default function ContainerQueries() {
+ return (
+
+
+
+
+
+ 123 Main St, Phoenix AZ
+
+
+ $280,000 — $310,000
+
+
+
+ Confidence score: 85%
+
+
+
+
+ );
+}
diff --git a/docs/data/system/getting-started/usage/ContainerQueries.tsx b/docs/data/system/getting-started/usage/ContainerQueries.tsx
new file mode 100644
index 00000000000000..aa1e523a0989e4
--- /dev/null
+++ b/docs/data/system/getting-started/usage/ContainerQueries.tsx
@@ -0,0 +1,88 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+
+export default function ContainerQueries() {
+ return (
+
+
+
+
+
+ 123 Main St, Phoenix AZ
+
+
+ $280,000 — $310,000
+
+
+
+ Confidence score: 85%
+
+
+
+
+ );
+}
diff --git a/docs/data/system/getting-started/usage/usage.md b/docs/data/system/getting-started/usage/usage.md
index 487340ad2b1585..1e5d3de608f2f2 100644
--- a/docs/data/system/getting-started/usage/usage.md
+++ b/docs/data/system/getting-started/usage/usage.md
@@ -291,6 +291,19 @@ The following demo shows how to define a set of breakpoints using the object syn
{{"demo": "BreakpointsAsObject.js"}}
+:::info
+📣 Starting from v6, the object structure supports [container queries](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_containment/Container_queries) shorthand with `@`.
+
+We recommend you to check the [browser support](https://caniuse.com/?search=container%20que) before using CSS container queries.
+:::
+
+The shorthand syntax is `@{breakpoint}/{container}`:
+
+- **breakpoint**: a number for `px` unit or a breakpoint key (e.g. `sm`, `md`, `lg`, `xl` for default breakpoints) or a valid CSS value (e.g. `40em`).
+- **container** (optional): the name of the [containment context](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_containment/Container_queries#naming_containment_contexts).
+
+{{"demo": "ContainerQueries.js"}}
+
#### Breakpoints as an array
The second option is to define your breakpoints as an array, from smallest to largest.
diff --git a/docs/package.json b/docs/package.json
index 315a51a02a861e..f8ea8e340c9db7 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -20,7 +20,6 @@
},
"dependencies": {
"@babel/core": "^7.24.4",
- "@babel/plugin-transform-object-assign": "^7.24.1",
"@babel/runtime": "^7.24.4",
"@babel/runtime-corejs2": "^7.24.4",
"@docsearch/react": "^3.6.0",
diff --git a/docs/pages/_app.js b/docs/pages/_app.js
index 70dc207b752e66..7ba45523219f4e 100644
--- a/docs/pages/_app.js
+++ b/docs/pages/_app.js
@@ -18,7 +18,7 @@ import joyPages from 'docs/data/joy/pages';
import systemPages from 'docs/data/system/pages';
import PageContext from 'docs/src/modules/components/PageContext';
import GoogleAnalytics from 'docs/src/modules/components/GoogleAnalytics';
-import { CodeCopyProvider } from 'docs/src/modules/utils/CodeCopy';
+import { CodeCopyProvider } from '@mui/docs/CodeCopy';
import { ThemeProvider } from 'docs/src/modules/components/ThemeContext';
import { CodeVariantProvider } from 'docs/src/modules/utils/codeVariant';
import { CodeStylingProvider } from 'docs/src/modules/utils/codeStylingSolution';
diff --git a/docs/pages/blog/2020-developer-survey-results.md b/docs/pages/blog/2020-developer-survey-results.md
index 42f611ecce9484..fe4f383a04f160 100644
--- a/docs/pages/blog/2020-developer-survey-results.md
+++ b/docs/pages/blog/2020-developer-survey-results.md
@@ -315,5 +315,5 @@ We will run a similar survey next year to keep track of our progress.
If you want to continue to influence our roadmap, please upvote 👍 the issues you are the most interested in on GitHub.
-Help us prioritize by upvoting.
diff --git a/docs/pages/blog/mui-core-v5.md b/docs/pages/blog/mui-core-v5.md
index 688cf79b04aadd..868808c1e65088 100644
--- a/docs/pages/blog/mui-core-v5.md
+++ b/docs/pages/blog/mui-core-v5.md
@@ -477,7 +477,7 @@ Although each product has its unique vision and mission statements, they complem
- Vision: Create the last UI component library developers will ever need. High quality, consistent, feature-rich, and covering the most frequent/challenging use-cases.
- Mission: Make building rich, data-intensive, dynamic apps a breeze.
-MUI Core has a positive cash flow thanks to its paid templates, design assets, ads on the documentation, and backers/sponsors (❤️). The [MIT](https://tldrlegal.com/license/mit-license) license model works great for it.
+MUI Core has a positive cash flow thanks to its paid templates, design assets, ads on the documentation, and backers/sponsors (❤️). The [MIT](https://www.tldrlegal.com/license/mit-license) license model works great for it.
However, none of these revenue sources would scale with the outcome and amount of work required for MUI X.
It's why we are using an [open core license model](https://en.m.wikipedia.org/wiki/Open-core_model) for this new product.
diff --git a/docs/pages/experiments/docs/DemoMultiTabs.js b/docs/pages/experiments/docs/DemoMultiTabs.js
new file mode 100644
index 00000000000000..77f396e925cec7
--- /dev/null
+++ b/docs/pages/experiments/docs/DemoMultiTabs.js
@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { BarChart } from '@mui/x-charts/BarChart';
+import { axisClasses } from '@mui/x-charts';
+import dataset from './dataset.json';
+
+const chartSetting = {
+ yAxis: [
+ {
+ label: 'rainfall (mm)',
+ },
+ ],
+ width: 500,
+ height: 300,
+ sx: {
+ [`.${axisClasses.left} .${axisClasses.label}`]: {
+ transform: 'translate(-20px, 0)',
+ },
+ },
+};
+
+const valueFormatter = (value) => `${value}mm`;
+
+export default function BarsDataset() {
+ return (
+ {page} ;
+};
diff --git a/docs/pages/material-ui/icons.js b/docs/pages/material-ui/icons.js
index 567b92d1ef1e9c..07de341709f0e8 100644
--- a/docs/pages/material-ui/icons.js
+++ b/docs/pages/material-ui/icons.js
@@ -1,7 +1,12 @@
import * as React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
+import AppFrame from 'docs/src/modules/components/AppFrame';
import * as pageProps from 'docs/data/material/components/icons/icons.md?muiMarkdown';
export default function Page() {
return {page} ;
+};
diff --git a/docs/pages/material-ui/material-icons.js b/docs/pages/material-ui/material-icons.js
index 8bdbc9d6729753..88344171346946 100644
--- a/docs/pages/material-ui/material-icons.js
+++ b/docs/pages/material-ui/material-icons.js
@@ -1,7 +1,12 @@
import * as React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
+import AppFrame from 'docs/src/modules/components/AppFrame';
import * as pageProps from 'docs/data/material/components/material-icons/material-icons.md?muiMarkdown';
export default function Page() {
return {page} ;
+};
diff --git a/docs/pages/material-ui/react-accordion.js b/docs/pages/material-ui/react-accordion.js
index 26291b13befe10..1c7e53c5306d51 100644
--- a/docs/pages/material-ui/react-accordion.js
+++ b/docs/pages/material-ui/react-accordion.js
@@ -1,7 +1,12 @@
import * as React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
+import AppFrame from 'docs/src/modules/components/AppFrame';
import * as pageProps from 'docs/data/material/components/accordion/accordion.md?muiMarkdown';
export default function Page() {
return {page} ;
+};
diff --git a/docs/pages/material-ui/react-alert.js b/docs/pages/material-ui/react-alert.js
index 84552123aacd05..5ff0b8e14c5653 100644
--- a/docs/pages/material-ui/react-alert.js
+++ b/docs/pages/material-ui/react-alert.js
@@ -1,7 +1,12 @@
import * as React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
+import AppFrame from 'docs/src/modules/components/AppFrame';
import * as pageProps from 'docs/data/material/components/alert/alert.md?muiMarkdown';
export default function Page() {
return {page} ;
+};
diff --git a/docs/pages/material-ui/react-app-bar.js b/docs/pages/material-ui/react-app-bar.js
index 2a58a66711a75c..84efc04925f535 100644
--- a/docs/pages/material-ui/react-app-bar.js
+++ b/docs/pages/material-ui/react-app-bar.js
@@ -1,7 +1,12 @@
import * as React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
+import AppFrame from 'docs/src/modules/components/AppFrame';
import * as pageProps from 'docs/data/material/components/app-bar/app-bar.md?muiMarkdown';
export default function Page() {
return {page} ;
+};
diff --git a/docs/pages/material-ui/react-autocomplete.js b/docs/pages/material-ui/react-autocomplete.js
index 1ec006a4f20a34..8902dffd65db28 100644
--- a/docs/pages/material-ui/react-autocomplete.js
+++ b/docs/pages/material-ui/react-autocomplete.js
@@ -1,7 +1,12 @@
import * as React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
+import AppFrame from 'docs/src/modules/components/AppFrame';
import * as pageProps from 'docs/data/material/components/autocomplete/autocomplete.md?muiMarkdown';
export default function Page() {
return {page} ;
+};
diff --git a/docs/pages/material-ui/react-avatar.js b/docs/pages/material-ui/react-avatar.js
index 0c74ca45a6b3d7..fb69aa1b721484 100644
--- a/docs/pages/material-ui/react-avatar.js
+++ b/docs/pages/material-ui/react-avatar.js
@@ -1,7 +1,12 @@
import * as React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
+import AppFrame from 'docs/src/modules/components/AppFrame';
import * as pageProps from 'docs/data/material/components/avatars/avatars.md?muiMarkdown';
export default function Page() {
return {page} ;
+};
diff --git a/docs/pages/material-ui/react-backdrop.js b/docs/pages/material-ui/react-backdrop.js
index cac8c8788807d3..9246804b99e358 100644
--- a/docs/pages/material-ui/react-backdrop.js
+++ b/docs/pages/material-ui/react-backdrop.js
@@ -1,7 +1,12 @@
import * as React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
+import AppFrame from 'docs/src/modules/components/AppFrame';
import * as pageProps from 'docs/data/material/components/backdrop/backdrop.md?muiMarkdown';
export default function Page() {
return {page} ;
+};
diff --git a/docs/pages/material-ui/react-badge.js b/docs/pages/material-ui/react-badge.js
index 096d87c87f47f8..bf7e789c24b2dd 100644
--- a/docs/pages/material-ui/react-badge.js
+++ b/docs/pages/material-ui/react-badge.js
@@ -1,7 +1,12 @@
import * as React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
+import AppFrame from 'docs/src/modules/components/AppFrame';
import * as pageProps from 'docs/data/material/components/badges/badges.md?muiMarkdown';
export default function Page() {
return {page} ;
+};
diff --git a/docs/pages/material-ui/react-bottom-navigation.js b/docs/pages/material-ui/react-bottom-navigation.js
index edefefdea6dbce..133c440143c6e5 100644
--- a/docs/pages/material-ui/react-bottom-navigation.js
+++ b/docs/pages/material-ui/react-bottom-navigation.js
@@ -1,7 +1,12 @@
import * as React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
+import AppFrame from 'docs/src/modules/components/AppFrame';
import * as pageProps from 'docs/data/material/components/bottom-navigation/bottom-navigation.md?muiMarkdown';
export default function Page() {
return {page} ;
+};
diff --git a/docs/pages/material-ui/react-box.js b/docs/pages/material-ui/react-box.js
index e9439033fd229e..350423ce30f00b 100644
--- a/docs/pages/material-ui/react-box.js
+++ b/docs/pages/material-ui/react-box.js
@@ -1,7 +1,12 @@
import * as React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
+import AppFrame from 'docs/src/modules/components/AppFrame';
import * as pageProps from 'docs/data/material/components/box/box.md?muiMarkdown';
export default function Page() {
return {page} ;
+};
diff --git a/docs/pages/material-ui/react-breadcrumbs.js b/docs/pages/material-ui/react-breadcrumbs.js
index 0cd1f21647d87d..f64f67b09fd1d0 100644
--- a/docs/pages/material-ui/react-breadcrumbs.js
+++ b/docs/pages/material-ui/react-breadcrumbs.js
@@ -1,7 +1,12 @@
import * as React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
+import AppFrame from 'docs/src/modules/components/AppFrame';
import * as pageProps from 'docs/data/material/components/breadcrumbs/breadcrumbs.md?muiMarkdown';
export default function Page() {
return {page} ;
+};
diff --git a/docs/pages/material-ui/react-card.js b/docs/pages/material-ui/react-card.js
index 67fa766a02990f..8fb6f72afe1968 100644
--- a/docs/pages/material-ui/react-card.js
+++ b/docs/pages/material-ui/react-card.js
@@ -1,7 +1,12 @@
import * as React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
+import AppFrame from 'docs/src/modules/components/AppFrame';
import * as pageProps from 'docs/data/material/components/cards/cards.md?muiMarkdown';
export default function Page() {
return {page} ;
+};
diff --git a/docs/pages/material-ui/react-checkbox.js b/docs/pages/material-ui/react-checkbox.js
index 16ebde8c0e0a9a..e6c610d0dd0ba6 100644
--- a/docs/pages/material-ui/react-checkbox.js
+++ b/docs/pages/material-ui/react-checkbox.js
@@ -1,7 +1,12 @@
import * as React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
+import AppFrame from 'docs/src/modules/components/AppFrame';
import * as pageProps from 'docs/data/material/components/checkboxes/checkboxes.md?muiMarkdown';
export default function Page() {
return {page} ;
+};
diff --git a/docs/pages/material-ui/react-chip.js b/docs/pages/material-ui/react-chip.js
index 548d240e966a38..9af1f9e4bd4785 100644
--- a/docs/pages/material-ui/react-chip.js
+++ b/docs/pages/material-ui/react-chip.js
@@ -1,7 +1,12 @@
import * as React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
+import AppFrame from 'docs/src/modules/components/AppFrame';
import * as pageProps from 'docs/data/material/components/chips/chips.md?muiMarkdown';
export default function Page() {
return {page} ;
+};
diff --git a/docs/pages/material-ui/react-click-away-listener.js b/docs/pages/material-ui/react-click-away-listener.js
index 8b51c04a6b1cf2..fb964ae06144a5 100644
--- a/docs/pages/material-ui/react-click-away-listener.js
+++ b/docs/pages/material-ui/react-click-away-listener.js
@@ -1,7 +1,12 @@
import * as React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
+import AppFrame from 'docs/src/modules/components/AppFrame';
import * as pageProps from 'docs/data/material/components/click-away-listener/click-away-listener.md?muiMarkdown';
export default function Page() {
return {page} ;
+};
diff --git a/docs/pages/material-ui/react-container.js b/docs/pages/material-ui/react-container.js
index d5d647dc828dfa..974047436f4464 100644
--- a/docs/pages/material-ui/react-container.js
+++ b/docs/pages/material-ui/react-container.js
@@ -1,7 +1,12 @@
import * as React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
+import AppFrame from 'docs/src/modules/components/AppFrame';
import * as pageProps from 'docs/data/material/components/container/container.md?muiMarkdown';
export default function Page() {
return {page} ;
+};
diff --git a/docs/pages/material-ui/react-css-baseline.js b/docs/pages/material-ui/react-css-baseline.js
index 68d27f2b41af7c..fb43be46fc6ea0 100644
--- a/docs/pages/material-ui/react-css-baseline.js
+++ b/docs/pages/material-ui/react-css-baseline.js
@@ -1,7 +1,12 @@
import * as React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
+import AppFrame from 'docs/src/modules/components/AppFrame';
import * as pageProps from 'docs/data/material/components/css-baseline/css-baseline.md?muiMarkdown';
export default function Page() {
return {page} ;
+};
diff --git a/docs/pages/material-ui/react-dialog.js b/docs/pages/material-ui/react-dialog.js
index 537a476553a2eb..2ded281a496a7a 100644
--- a/docs/pages/material-ui/react-dialog.js
+++ b/docs/pages/material-ui/react-dialog.js
@@ -1,7 +1,12 @@
import * as React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
+import AppFrame from 'docs/src/modules/components/AppFrame';
import * as pageProps from 'docs/data/material/components/dialogs/dialogs.md?muiMarkdown';
export default function Page() {
return {page} ;
+};
diff --git a/docs/pages/material-ui/react-divider.js b/docs/pages/material-ui/react-divider.js
index 7c32aa1c784f47..4ca13335073941 100644
--- a/docs/pages/material-ui/react-divider.js
+++ b/docs/pages/material-ui/react-divider.js
@@ -1,7 +1,12 @@
import * as React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
+import AppFrame from 'docs/src/modules/components/AppFrame';
import * as pageProps from 'docs/data/material/components/dividers/dividers.md?muiMarkdown';
export default function Page() {
return {page} ;
+};
diff --git a/docs/pages/material-ui/react-drawer.js b/docs/pages/material-ui/react-drawer.js
index 6d8905e8275778..8aac39efcdfaca 100644
--- a/docs/pages/material-ui/react-drawer.js
+++ b/docs/pages/material-ui/react-drawer.js
@@ -1,7 +1,12 @@
import * as React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
+import AppFrame from 'docs/src/modules/components/AppFrame';
import * as pageProps from 'docs/data/material/components/drawers/drawers.md?muiMarkdown';
export default function Page() {
return {page} ;
+};
diff --git a/docs/pages/material-ui/react-floating-action-button.js b/docs/pages/material-ui/react-floating-action-button.js
index 681bebda025a79..66a5658de6a2cf 100644
--- a/docs/pages/material-ui/react-floating-action-button.js
+++ b/docs/pages/material-ui/react-floating-action-button.js
@@ -1,7 +1,12 @@
import * as React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
+import AppFrame from 'docs/src/modules/components/AppFrame';
import * as pageProps from 'docs/data/material/components/floating-action-button/floating-action-button.md?muiMarkdown';
export default function Page() {
return {page} ;
+};
diff --git a/docs/pages/material-ui/react-grid.js b/docs/pages/material-ui/react-grid.js
index 78ddcb6ee321ee..2ffecb31f92132 100644
--- a/docs/pages/material-ui/react-grid.js
+++ b/docs/pages/material-ui/react-grid.js
@@ -1,7 +1,12 @@
import * as React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
+import AppFrame from 'docs/src/modules/components/AppFrame';
import * as pageProps from 'docs/data/material/components/grid/grid.md?muiMarkdown';
export default function Page() {
return {page} ;
+};
diff --git a/docs/pages/material-ui/react-grid2.js b/docs/pages/material-ui/react-grid2.js
index b4dbffc77707c3..99e253537cc1a6 100644
--- a/docs/pages/material-ui/react-grid2.js
+++ b/docs/pages/material-ui/react-grid2.js
@@ -1,7 +1,12 @@
import * as React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
+import AppFrame from 'docs/src/modules/components/AppFrame';
import * as pageProps from 'docs/data/material/components/grid2/grid2.md?muiMarkdown';
export default function Page() {
return {page} ;
+};
diff --git a/docs/pages/material-ui/react-hidden.js b/docs/pages/material-ui/react-hidden.js
index 51cccdd38378a2..6f2d3fabf003e6 100644
--- a/docs/pages/material-ui/react-hidden.js
+++ b/docs/pages/material-ui/react-hidden.js
@@ -1,7 +1,12 @@
import * as React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
+import AppFrame from 'docs/src/modules/components/AppFrame';
import * as pageProps from 'docs/data/material/components/hidden/hidden.md?muiMarkdown';
export default function Page() {
return {page} ;
+};
diff --git a/docs/pages/material-ui/react-image-list.js b/docs/pages/material-ui/react-image-list.js
index f0f150afe7277e..79a5925eb05e95 100644
--- a/docs/pages/material-ui/react-image-list.js
+++ b/docs/pages/material-ui/react-image-list.js
@@ -1,7 +1,12 @@
import * as React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
+import AppFrame from 'docs/src/modules/components/AppFrame';
import * as pageProps from 'docs/data/material/components/image-list/image-list.md?muiMarkdown';
export default function Page() {
return {page} ;
+};
diff --git a/docs/pages/material-ui/react-link.js b/docs/pages/material-ui/react-link.js
index c288ac87affe2b..6a3c6bbb71149c 100644
--- a/docs/pages/material-ui/react-link.js
+++ b/docs/pages/material-ui/react-link.js
@@ -1,7 +1,12 @@
import * as React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
+import AppFrame from 'docs/src/modules/components/AppFrame';
import * as pageProps from 'docs/data/material/components/links/links.md?muiMarkdown';
export default function Page() {
return {page} ;
+};
diff --git a/docs/pages/material-ui/react-list.js b/docs/pages/material-ui/react-list.js
index c78ea0de33ba26..5ff15e226ab828 100644
--- a/docs/pages/material-ui/react-list.js
+++ b/docs/pages/material-ui/react-list.js
@@ -1,7 +1,12 @@
import * as React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
+import AppFrame from 'docs/src/modules/components/AppFrame';
import * as pageProps from 'docs/data/material/components/lists/lists.md?muiMarkdown';
export default function Page() {
return {page} ;
+};
diff --git a/docs/pages/material-ui/react-masonry.js b/docs/pages/material-ui/react-masonry.js
index 56633ff2e8d6d0..8d60dbed5893bf 100644
--- a/docs/pages/material-ui/react-masonry.js
+++ b/docs/pages/material-ui/react-masonry.js
@@ -1,7 +1,12 @@
import * as React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
+import AppFrame from 'docs/src/modules/components/AppFrame';
import * as pageProps from 'docs/data/material/components/masonry/masonry.md?muiMarkdown';
export default function Page() {
return {page} ;
+};
diff --git a/docs/pages/material-ui/react-menu.js b/docs/pages/material-ui/react-menu.js
index 33113e15a78f28..adeeb30a02ab9c 100644
--- a/docs/pages/material-ui/react-menu.js
+++ b/docs/pages/material-ui/react-menu.js
@@ -1,7 +1,12 @@
import * as React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
+import AppFrame from 'docs/src/modules/components/AppFrame';
import * as pageProps from 'docs/data/material/components/menus/menus.md?muiMarkdown';
export default function Page() {
return {page} ;
+};
diff --git a/docs/pages/material-ui/react-modal.js b/docs/pages/material-ui/react-modal.js
index 46d8fc442d7d0d..2fd8152936ee4d 100644
--- a/docs/pages/material-ui/react-modal.js
+++ b/docs/pages/material-ui/react-modal.js
@@ -1,7 +1,12 @@
import * as React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
+import AppFrame from 'docs/src/modules/components/AppFrame';
import * as pageProps from 'docs/data/material/components/modal/modal.md?muiMarkdown';
export default function Page() {
return {page} ;
+};
diff --git a/docs/pages/material-ui/react-no-ssr.js b/docs/pages/material-ui/react-no-ssr.js
index ee83206a71178d..3b2bf08f6f15a8 100644
--- a/docs/pages/material-ui/react-no-ssr.js
+++ b/docs/pages/material-ui/react-no-ssr.js
@@ -1,7 +1,12 @@
import * as React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
+import AppFrame from 'docs/src/modules/components/AppFrame';
import * as pageProps from 'docs/data/material/components/no-ssr/no-ssr.md?muiMarkdown';
export default function Page() {
return {page} ;
+};
diff --git a/docs/pages/material-ui/react-pagination.js b/docs/pages/material-ui/react-pagination.js
index 9a48a0ed86d11b..fe739abc49562b 100644
--- a/docs/pages/material-ui/react-pagination.js
+++ b/docs/pages/material-ui/react-pagination.js
@@ -1,7 +1,12 @@
import * as React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
+import AppFrame from 'docs/src/modules/components/AppFrame';
import * as pageProps from 'docs/data/material/components/pagination/pagination.md?muiMarkdown';
export default function Page() {
return {page} ;
+};
diff --git a/docs/pages/material-ui/react-paper.js b/docs/pages/material-ui/react-paper.js
index 41ece6824d65db..1d3530c004087e 100644
--- a/docs/pages/material-ui/react-paper.js
+++ b/docs/pages/material-ui/react-paper.js
@@ -1,7 +1,12 @@
import * as React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
+import AppFrame from 'docs/src/modules/components/AppFrame';
import * as pageProps from 'docs/data/material/components/paper/paper.md?muiMarkdown';
export default function Page() {
return {page} ;
+};
diff --git a/docs/pages/material-ui/react-popover.js b/docs/pages/material-ui/react-popover.js
index 48cba31980a1c7..9bbd2deb5f5e5f 100644
--- a/docs/pages/material-ui/react-popover.js
+++ b/docs/pages/material-ui/react-popover.js
@@ -1,7 +1,12 @@
import * as React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
+import AppFrame from 'docs/src/modules/components/AppFrame';
import * as pageProps from 'docs/data/material/components/popover/popover.md?muiMarkdown';
export default function Page() {
return {page} ;
+};
diff --git a/docs/pages/material-ui/react-popper.js b/docs/pages/material-ui/react-popper.js
index 6ab2616c48f0af..f228bcde1491d2 100644
--- a/docs/pages/material-ui/react-popper.js
+++ b/docs/pages/material-ui/react-popper.js
@@ -1,7 +1,12 @@
import * as React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
+import AppFrame from 'docs/src/modules/components/AppFrame';
import * as pageProps from 'docs/data/material/components/popper/popper.md?muiMarkdown';
export default function Page() {
return {page} ;
+};
diff --git a/docs/pages/material-ui/react-portal.js b/docs/pages/material-ui/react-portal.js
index 07a891e7658072..ad08e80adecda0 100644
--- a/docs/pages/material-ui/react-portal.js
+++ b/docs/pages/material-ui/react-portal.js
@@ -1,7 +1,12 @@
import * as React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
+import AppFrame from 'docs/src/modules/components/AppFrame';
import * as pageProps from 'docs/data/material/components/portal/portal.md?muiMarkdown';
export default function Page() {
return {page} ;
+};
diff --git a/docs/pages/material-ui/react-progress.js b/docs/pages/material-ui/react-progress.js
index 85e37159117a78..e4a2a09cd1db57 100644
--- a/docs/pages/material-ui/react-progress.js
+++ b/docs/pages/material-ui/react-progress.js
@@ -1,7 +1,12 @@
import * as React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
+import AppFrame from 'docs/src/modules/components/AppFrame';
import * as pageProps from 'docs/data/material/components/progress/progress.md?muiMarkdown';
export default function Page() {
return {page} ;
+};
diff --git a/docs/pages/material-ui/react-radio-button.js b/docs/pages/material-ui/react-radio-button.js
index b881c8a18b6f80..e8db25df8ce071 100644
--- a/docs/pages/material-ui/react-radio-button.js
+++ b/docs/pages/material-ui/react-radio-button.js
@@ -1,7 +1,12 @@
import * as React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
+import AppFrame from 'docs/src/modules/components/AppFrame';
import * as pageProps from 'docs/data/material/components/radio-buttons/radio-buttons.md?muiMarkdown';
export default function Page() {
return {page} ;
+};
diff --git a/docs/pages/material-ui/react-rating.js b/docs/pages/material-ui/react-rating.js
index ece9b071bf2aaa..a4fba7027ca9c6 100644
--- a/docs/pages/material-ui/react-rating.js
+++ b/docs/pages/material-ui/react-rating.js
@@ -1,7 +1,12 @@
import * as React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
+import AppFrame from 'docs/src/modules/components/AppFrame';
import * as pageProps from 'docs/data/material/components/rating/rating.md?muiMarkdown';
export default function Page() {
return {page} ;
+};
diff --git a/docs/pages/material-ui/react-select.js b/docs/pages/material-ui/react-select.js
index d5d9459ff95307..e158606f9199b5 100644
--- a/docs/pages/material-ui/react-select.js
+++ b/docs/pages/material-ui/react-select.js
@@ -1,7 +1,12 @@
import * as React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
+import AppFrame from 'docs/src/modules/components/AppFrame';
import * as pageProps from 'docs/data/material/components/selects/selects.md?muiMarkdown';
export default function Page() {
return {page} ;
+};
diff --git a/docs/pages/material-ui/react-skeleton.js b/docs/pages/material-ui/react-skeleton.js
index 40aeb2ea2b2bbe..2ff3091f92006f 100644
--- a/docs/pages/material-ui/react-skeleton.js
+++ b/docs/pages/material-ui/react-skeleton.js
@@ -1,7 +1,12 @@
import * as React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
+import AppFrame from 'docs/src/modules/components/AppFrame';
import * as pageProps from 'docs/data/material/components/skeleton/skeleton.md?muiMarkdown';
export default function Page() {
return {page} ;
+};
diff --git a/docs/pages/material-ui/react-slider.js b/docs/pages/material-ui/react-slider.js
index 2762b71458c831..e11443c469eaf4 100644
--- a/docs/pages/material-ui/react-slider.js
+++ b/docs/pages/material-ui/react-slider.js
@@ -1,7 +1,12 @@
import * as React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
+import AppFrame from 'docs/src/modules/components/AppFrame';
import * as pageProps from 'docs/data/material/components/slider/slider.md?muiMarkdown';
export default function Page() {
return {page} ;
+};
diff --git a/docs/pages/material-ui/react-snackbar.js b/docs/pages/material-ui/react-snackbar.js
index ef9cd9110e75e7..b1f6c4efa1a6a3 100644
--- a/docs/pages/material-ui/react-snackbar.js
+++ b/docs/pages/material-ui/react-snackbar.js
@@ -1,7 +1,12 @@
import * as React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
+import AppFrame from 'docs/src/modules/components/AppFrame';
import * as pageProps from 'docs/data/material/components/snackbars/snackbars.md?muiMarkdown';
export default function Page() {
return {page} ;
+};
diff --git a/docs/pages/material-ui/react-speed-dial.js b/docs/pages/material-ui/react-speed-dial.js
index b51a5eece1a78d..3ed86f5fde2a05 100644
--- a/docs/pages/material-ui/react-speed-dial.js
+++ b/docs/pages/material-ui/react-speed-dial.js
@@ -1,7 +1,12 @@
import * as React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
+import AppFrame from 'docs/src/modules/components/AppFrame';
import * as pageProps from 'docs/data/material/components/speed-dial/speed-dial.md?muiMarkdown';
export default function Page() {
return {page} ;
+};
diff --git a/docs/pages/material-ui/react-stack.js b/docs/pages/material-ui/react-stack.js
index 44e36ffc1eeff3..af230dcf002b3f 100644
--- a/docs/pages/material-ui/react-stack.js
+++ b/docs/pages/material-ui/react-stack.js
@@ -1,7 +1,12 @@
import * as React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
+import AppFrame from 'docs/src/modules/components/AppFrame';
import * as pageProps from 'docs/data/material/components/stack/stack.md?muiMarkdown';
export default function Page() {
return {page} ;
+};
diff --git a/docs/pages/material-ui/react-stepper.js b/docs/pages/material-ui/react-stepper.js
index f56275b1654708..7a389033833b41 100644
--- a/docs/pages/material-ui/react-stepper.js
+++ b/docs/pages/material-ui/react-stepper.js
@@ -1,7 +1,12 @@
import * as React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
+import AppFrame from 'docs/src/modules/components/AppFrame';
import * as pageProps from 'docs/data/material/components/steppers/steppers.md?muiMarkdown';
export default function Page() {
return {page} ;
+};
diff --git a/docs/pages/material-ui/react-switch.js b/docs/pages/material-ui/react-switch.js
index d8d850f538c943..59f5eae99895ea 100644
--- a/docs/pages/material-ui/react-switch.js
+++ b/docs/pages/material-ui/react-switch.js
@@ -1,7 +1,12 @@
import * as React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
+import AppFrame from 'docs/src/modules/components/AppFrame';
import * as pageProps from 'docs/data/material/components/switches/switches.md?muiMarkdown';
export default function Page() {
return {page} ;
+};
diff --git a/docs/pages/material-ui/react-table.js b/docs/pages/material-ui/react-table.js
index 10b6203c6b830b..398a5a9a46a551 100644
--- a/docs/pages/material-ui/react-table.js
+++ b/docs/pages/material-ui/react-table.js
@@ -1,7 +1,12 @@
import * as React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
+import AppFrame from 'docs/src/modules/components/AppFrame';
import * as pageProps from 'docs/data/material/components/table/table.md?muiMarkdown';
export default function Page() {
return {page} ;
+};
diff --git a/docs/pages/material-ui/react-tabs.js b/docs/pages/material-ui/react-tabs.js
index 51e69d3a7630ae..2406fcc3a665ce 100644
--- a/docs/pages/material-ui/react-tabs.js
+++ b/docs/pages/material-ui/react-tabs.js
@@ -1,7 +1,12 @@
import * as React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
+import AppFrame from 'docs/src/modules/components/AppFrame';
import * as pageProps from 'docs/data/material/components/tabs/tabs.md?muiMarkdown';
export default function Page() {
return {page} ;
+};
diff --git a/docs/pages/material-ui/react-text-field.js b/docs/pages/material-ui/react-text-field.js
index f7756ce29ddd50..c3f07ee5467c48 100644
--- a/docs/pages/material-ui/react-text-field.js
+++ b/docs/pages/material-ui/react-text-field.js
@@ -1,7 +1,12 @@
import * as React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
+import AppFrame from 'docs/src/modules/components/AppFrame';
import * as pageProps from 'docs/data/material/components/text-fields/text-fields.md?muiMarkdown';
export default function Page() {
return {page} ;
+};
diff --git a/docs/pages/material-ui/react-textarea-autosize.js b/docs/pages/material-ui/react-textarea-autosize.js
index 7d1def906c2aec..4c87d54571af4e 100644
--- a/docs/pages/material-ui/react-textarea-autosize.js
+++ b/docs/pages/material-ui/react-textarea-autosize.js
@@ -1,7 +1,12 @@
import * as React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
+import AppFrame from 'docs/src/modules/components/AppFrame';
import * as pageProps from 'docs/data/material/components/textarea-autosize/textarea-autosize.md?muiMarkdown';
export default function Page() {
return {page} ;
+};
diff --git a/docs/pages/material-ui/react-timeline.js b/docs/pages/material-ui/react-timeline.js
index 83869d3365841c..87167e7220fba0 100644
--- a/docs/pages/material-ui/react-timeline.js
+++ b/docs/pages/material-ui/react-timeline.js
@@ -1,7 +1,12 @@
import * as React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
+import AppFrame from 'docs/src/modules/components/AppFrame';
import * as pageProps from 'docs/data/material/components/timeline/timeline.md?muiMarkdown';
export default function Page() {
return {page} ;
+};
diff --git a/docs/pages/material-ui/react-toggle-button.js b/docs/pages/material-ui/react-toggle-button.js
index 822839b3fad4a8..c5df44f259cd62 100644
--- a/docs/pages/material-ui/react-toggle-button.js
+++ b/docs/pages/material-ui/react-toggle-button.js
@@ -1,7 +1,12 @@
import * as React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
+import AppFrame from 'docs/src/modules/components/AppFrame';
import * as pageProps from 'docs/data/material/components/toggle-button/toggle-button.md?muiMarkdown';
export default function Page() {
return {page} ;
+};
diff --git a/docs/pages/material-ui/react-tooltip.js b/docs/pages/material-ui/react-tooltip.js
index 4cd5c404f860db..3893fc2aed36a6 100644
--- a/docs/pages/material-ui/react-tooltip.js
+++ b/docs/pages/material-ui/react-tooltip.js
@@ -1,7 +1,12 @@
import * as React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
+import AppFrame from 'docs/src/modules/components/AppFrame';
import * as pageProps from 'docs/data/material/components/tooltips/tooltips.md?muiMarkdown';
export default function Page() {
return {page} ;
+};
diff --git a/docs/pages/material-ui/react-transfer-list.js b/docs/pages/material-ui/react-transfer-list.js
index 952f286ac40fc6..2ae58dcfb4ff3b 100644
--- a/docs/pages/material-ui/react-transfer-list.js
+++ b/docs/pages/material-ui/react-transfer-list.js
@@ -1,7 +1,12 @@
import * as React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
+import AppFrame from 'docs/src/modules/components/AppFrame';
import * as pageProps from 'docs/data/material/components/transfer-list/transfer-list.md?muiMarkdown';
export default function Page() {
return {page} ;
+};
diff --git a/docs/pages/material-ui/react-typography.js b/docs/pages/material-ui/react-typography.js
index f5014b469b0416..4a0b190155e9ea 100644
--- a/docs/pages/material-ui/react-typography.js
+++ b/docs/pages/material-ui/react-typography.js
@@ -1,7 +1,12 @@
import * as React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
+import AppFrame from 'docs/src/modules/components/AppFrame';
import * as pageProps from 'docs/data/material/components/typography/typography.md?muiMarkdown';
export default function Page() {
return {page} ;
+};
diff --git a/docs/pages/material-ui/react-use-media-query.js b/docs/pages/material-ui/react-use-media-query.js
index 44e229472b0685..ae24bc8ce38672 100644
--- a/docs/pages/material-ui/react-use-media-query.js
+++ b/docs/pages/material-ui/react-use-media-query.js
@@ -1,7 +1,12 @@
import * as React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
+import AppFrame from 'docs/src/modules/components/AppFrame';
import * as pageProps from 'docs/data/material/components/use-media-query/use-media-query.md?muiMarkdown';
export default function Page() {
return {page} ;
+};
diff --git a/docs/pages/material-ui/transitions.js b/docs/pages/material-ui/transitions.js
index c60770e5e2c518..2647d9bc2870e8 100644
--- a/docs/pages/material-ui/transitions.js
+++ b/docs/pages/material-ui/transitions.js
@@ -1,7 +1,12 @@
import * as React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
+import AppFrame from 'docs/src/modules/components/AppFrame';
import * as pageProps from 'docs/data/material/components/transitions/transitions.md?muiMarkdown';
export default function Page() {
return {page} ;
+};
diff --git a/docs/public/static/error-codes.json b/docs/public/static/error-codes.json
index a6486f38f45d49..c5acc584689575 100644
--- a/docs/public/static/error-codes.json
+++ b/docs/public/static/error-codes.json
@@ -18,5 +18,6 @@
"17": "MUI: Expected valid input target. Did you use a custom `slots.input` and forget to forward refs? See https://mui.com/r/input-component-ref-interface for more info.",
"18": "MUI: `vars` is a private field used for CSS variables support.\nPlease use another name.",
"19": "MUI: `useColorScheme` must be called under ` or `@/`.\nFor example, `@sm` or `@600` or `@40rem/sidebar`."
}
diff --git a/docs/public/static/images/templates/blog-dark.png b/docs/public/static/images/templates/blog-dark.png
new file mode 100644
index 00000000000000..03ad60a492a907
Binary files /dev/null and b/docs/public/static/images/templates/blog-dark.png differ
diff --git a/docs/public/static/images/templates/blog-light.png b/docs/public/static/images/templates/blog-light.png
new file mode 100644
index 00000000000000..ff252d1e7aa33e
Binary files /dev/null and b/docs/public/static/images/templates/blog-light.png differ
diff --git a/docs/public/static/images/templates/blog.png b/docs/public/static/images/templates/blog.png
deleted file mode 100644
index debe0f3ed3a9b4..00000000000000
Binary files a/docs/public/static/images/templates/blog.png and /dev/null differ
diff --git a/docs/public/static/images/templates/checkout-dark.png b/docs/public/static/images/templates/checkout-dark.png
new file mode 100644
index 00000000000000..6269d11fed5dd8
Binary files /dev/null and b/docs/public/static/images/templates/checkout-dark.png differ
diff --git a/docs/public/static/images/templates/checkout-light.png b/docs/public/static/images/templates/checkout-light.png
new file mode 100644
index 00000000000000..6bdda36f908a5a
Binary files /dev/null and b/docs/public/static/images/templates/checkout-light.png differ
diff --git a/docs/public/static/images/templates/checkout.png b/docs/public/static/images/templates/checkout.png
deleted file mode 100644
index e5cfba2cd01c55..00000000000000
Binary files a/docs/public/static/images/templates/checkout.png and /dev/null differ
diff --git a/docs/public/static/images/templates/dashboard-dark.png b/docs/public/static/images/templates/dashboard-dark.png
new file mode 100644
index 00000000000000..42984725db85dc
Binary files /dev/null and b/docs/public/static/images/templates/dashboard-dark.png differ
diff --git a/docs/public/static/images/templates/dashboard-light.png b/docs/public/static/images/templates/dashboard-light.png
new file mode 100644
index 00000000000000..e93b5e52c57954
Binary files /dev/null and b/docs/public/static/images/templates/dashboard-light.png differ
diff --git a/docs/public/static/images/templates/dashboard.png b/docs/public/static/images/templates/dashboard.png
deleted file mode 100644
index 2a10b08116f94f..00000000000000
Binary files a/docs/public/static/images/templates/dashboard.png and /dev/null differ
diff --git a/docs/public/static/images/templates/landing-page-dark.png b/docs/public/static/images/templates/landing-page-dark.png
new file mode 100644
index 00000000000000..e48adbb205b1f3
Binary files /dev/null and b/docs/public/static/images/templates/landing-page-dark.png differ
diff --git a/docs/public/static/images/templates/landing-page-light.png b/docs/public/static/images/templates/landing-page-light.png
new file mode 100644
index 00000000000000..b6d375da2a36c0
Binary files /dev/null and b/docs/public/static/images/templates/landing-page-light.png differ
diff --git a/docs/public/static/images/templates/landing-page.png b/docs/public/static/images/templates/landing-page.png
deleted file mode 100644
index a6dfeac3242598..00000000000000
Binary files a/docs/public/static/images/templates/landing-page.png and /dev/null differ
diff --git a/docs/public/static/images/templates/pricing.png b/docs/public/static/images/templates/pricing.png
deleted file mode 100644
index 745f03cbeb7689..00000000000000
Binary files a/docs/public/static/images/templates/pricing.png and /dev/null differ
diff --git a/docs/public/static/images/templates/sign-in-dark.png b/docs/public/static/images/templates/sign-in-dark.png
new file mode 100644
index 00000000000000..a67406f45f8a81
Binary files /dev/null and b/docs/public/static/images/templates/sign-in-dark.png differ
diff --git a/docs/public/static/images/templates/sign-in-light.png b/docs/public/static/images/templates/sign-in-light.png
new file mode 100644
index 00000000000000..888b41cff9c4f5
Binary files /dev/null and b/docs/public/static/images/templates/sign-in-light.png differ
diff --git a/docs/public/static/images/templates/sign-in-side-dark.png b/docs/public/static/images/templates/sign-in-side-dark.png
new file mode 100644
index 00000000000000..b3332ca4079314
Binary files /dev/null and b/docs/public/static/images/templates/sign-in-side-dark.png differ
diff --git a/docs/public/static/images/templates/sign-in-side-light.png b/docs/public/static/images/templates/sign-in-side-light.png
new file mode 100644
index 00000000000000..b8180488e28e20
Binary files /dev/null and b/docs/public/static/images/templates/sign-in-side-light.png differ
diff --git a/docs/public/static/images/templates/sign-in-side.png b/docs/public/static/images/templates/sign-in-side.png
deleted file mode 100644
index fb00a2d01160fb..00000000000000
Binary files a/docs/public/static/images/templates/sign-in-side.png and /dev/null differ
diff --git a/docs/public/static/images/templates/sign-in.png b/docs/public/static/images/templates/sign-in.png
deleted file mode 100644
index 597b57ae1d1356..00000000000000
Binary files a/docs/public/static/images/templates/sign-in.png and /dev/null differ
diff --git a/docs/public/static/images/templates/sign-up-dark.png b/docs/public/static/images/templates/sign-up-dark.png
new file mode 100644
index 00000000000000..ad19c16a0de062
Binary files /dev/null and b/docs/public/static/images/templates/sign-up-dark.png differ
diff --git a/docs/public/static/images/templates/sign-up-light.png b/docs/public/static/images/templates/sign-up-light.png
new file mode 100644
index 00000000000000..514db1bcce3d1a
Binary files /dev/null and b/docs/public/static/images/templates/sign-up-light.png differ
diff --git a/docs/public/static/images/templates/sign-up.png b/docs/public/static/images/templates/sign-up.png
deleted file mode 100644
index b92eca0b42a10a..00000000000000
Binary files a/docs/public/static/images/templates/sign-up.png and /dev/null differ
diff --git a/docs/public/static/images/templates/sticky-footer-dark.png b/docs/public/static/images/templates/sticky-footer-dark.png
new file mode 100644
index 00000000000000..276cd14a764555
Binary files /dev/null and b/docs/public/static/images/templates/sticky-footer-dark.png differ
diff --git a/docs/public/static/images/templates/sticky-footer-light.png b/docs/public/static/images/templates/sticky-footer-light.png
new file mode 100644
index 00000000000000..5a44b3e9168bfb
Binary files /dev/null and b/docs/public/static/images/templates/sticky-footer-light.png differ
diff --git a/docs/public/static/images/templates/sticky-footer.png b/docs/public/static/images/templates/sticky-footer.png
deleted file mode 100644
index 72f56aab9cc854..00000000000000
Binary files a/docs/public/static/images/templates/sticky-footer.png and /dev/null differ
diff --git a/docs/public/static/images/themes-display-dark.png b/docs/public/static/images/themes-display-dark.png
new file mode 100644
index 00000000000000..bf9e83555f2b25
Binary files /dev/null and b/docs/public/static/images/themes-display-dark.png differ
diff --git a/docs/public/static/images/themes-display-light.png b/docs/public/static/images/themes-display-light.png
new file mode 100644
index 00000000000000..4b18dd868eb00f
Binary files /dev/null and b/docs/public/static/images/themes-display-light.png differ
diff --git a/docs/public/static/images/themes-display.png b/docs/public/static/images/themes-display.png
deleted file mode 100644
index 43069c6f6855bf..00000000000000
Binary files a/docs/public/static/images/themes-display.png and /dev/null differ
diff --git a/docs/src/components/about/HowToSupport.tsx b/docs/src/components/about/HowToSupport.tsx
index 99bc248bd1db31..128763cae41126 100644
--- a/docs/src/components/about/HowToSupport.tsx
+++ b/docs/src/components/about/HowToSupport.tsx
@@ -27,17 +27,12 @@ function Widget({
({
- p: 4,
+ p: 3,
height: '100%',
display: 'flex',
flexDirection: 'column',
- borderRadius: '12px',
- border: '1px solid',
- borderColor: 'grey.100',
background: `${(theme.vars || theme).palette.gradients.linearSubtle}`,
...theme.applyDarkStyles({
- bgcolor: 'primaryDark.900',
- borderColor: 'primaryDark.700',
background: `${(theme.vars || theme).palette.gradients.linearSubtle}`,
}),
})}
@@ -85,12 +80,12 @@ export default function HowToSupport() {
@@ -146,12 +141,12 @@ export default function HowToSupport() {
@@ -173,12 +168,12 @@ export default function HowToSupport() {
diff --git a/docs/src/components/action/NpmCopyButton.tsx b/docs/src/components/action/NpmCopyButton.tsx
index e74acf024aae3b..de9efd9e45a99b 100644
--- a/docs/src/components/action/NpmCopyButton.tsx
+++ b/docs/src/components/action/NpmCopyButton.tsx
@@ -34,11 +34,11 @@ const Button = styled('button')(({ theme }) => ({
}),
WebkitTapHighlightColor: 'transparent',
WebkitFontSmoothing: 'subpixel-antialiased',
- color: (theme.vars || theme).palette.grey[600],
+ color: (theme.vars || theme).palette.text.tertiary,
'&:hover, &:focus-visible': {
color: (theme.vars || theme).palette.primary.main,
'@media (hover: none)': {
- color: (theme.vars || theme).palette.grey[600],
+ color: (theme.vars || theme).palette.text.tertiary,
},
},
'& svg': {
diff --git a/docs/src/components/home/AdvancedShowcase.tsx b/docs/src/components/home/AdvancedShowcase.tsx
index 59caeeccbc97ad..dcf4b50acd53c6 100644
--- a/docs/src/components/home/AdvancedShowcase.tsx
+++ b/docs/src/components/home/AdvancedShowcase.tsx
@@ -5,8 +5,8 @@ import Paper from '@mui/material/Paper';
import Typography from '@mui/material/Typography';
import Divider from '@mui/material/Divider';
import ShowcaseContainer from 'docs/src/components/home/ShowcaseContainer';
-import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
-import MarkdownElement from 'docs/src/components/markdown/MarkdownElement';
+import { HighlightedCode } from '@mui/docs/HighlightedCode';
+import { MarkdownElement } from '@mui/docs/MarkdownElement';
import XGridGlobalStyles from 'docs/src/components/home/XGridGlobalStyles';
import ProgressBar from 'docs/src/components/x-grid/ProgressBar';
import EditProgress from 'docs/src/components/x-grid/EditProgress';
diff --git a/docs/src/components/home/CoreShowcase.tsx b/docs/src/components/home/CoreShowcase.tsx
index b2483ab7abe165..0277cad4422d1d 100644
--- a/docs/src/components/home/CoreShowcase.tsx
+++ b/docs/src/components/home/CoreShowcase.tsx
@@ -2,8 +2,8 @@ import * as React from 'react';
import { alpha, ThemeProvider, createTheme, useTheme } from '@mui/material/styles';
import Box from '@mui/material/Box';
import Button, { buttonClasses } from '@mui/material/Button';
-import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
-import MarkdownElement from 'docs/src/components/markdown/MarkdownElement';
+import { HighlightedCode } from '@mui/docs/HighlightedCode';
+import { MarkdownElement } from '@mui/docs/MarkdownElement';
import MaterialDesignDemo, { componentCode } from 'docs/src/components/home/MaterialDesignDemo';
import ShowcaseContainer from 'docs/src/components/home/ShowcaseContainer';
import PointerContainer, { Data } from 'docs/src/components/home/ElementPointer';
diff --git a/docs/src/components/home/MaterialDesignDemo.tsx b/docs/src/components/home/MaterialDesignDemo.tsx
index ec6f9a3d8f516b..459d43967408b0 100644
--- a/docs/src/components/home/MaterialDesignDemo.tsx
+++ b/docs/src/components/home/MaterialDesignDemo.tsx
@@ -24,7 +24,7 @@ export const componentCode = `
label={active ? 'Active' : 'Inactive'}
color={active ? 'success' : 'default'}
/>
-
-
+
-
+
{renderItem(0)}
{renderItem(1)}
{renderItem(2)}
{renderItem(3)}
-
+
{renderItem(4)}
{renderItem(5)}
{renderItem(6)}
{renderItem(7)}
-
+
({
diff --git a/docs/src/components/pricing/PricingList.tsx b/docs/src/components/pricing/PricingList.tsx
index 46eceaabc760a6..3ca9c94cea8a6f 100644
--- a/docs/src/components/pricing/PricingList.tsx
+++ b/docs/src/components/pricing/PricingList.tsx
@@ -117,7 +117,7 @@ export default function PricingList() {
theme.applyDarkStyles({
'& .MuiTab-root': {
'&.Mui-selected': {
- bgcolor: 'primaryDark.700',
+ bgcolor: 'primaryDark.800',
},
},
}),
diff --git a/docs/src/components/pricing/PricingWhatToExpect.tsx b/docs/src/components/pricing/PricingWhatToExpect.tsx
index ffeaea5868b4e6..13066ac27238de 100644
--- a/docs/src/components/pricing/PricingWhatToExpect.tsx
+++ b/docs/src/components/pricing/PricingWhatToExpect.tsx
@@ -36,15 +36,9 @@ export default function PricingWhatToExpect() {
}}
>
-
+
+
Required quantity
@@ -53,6 +47,7 @@ export default function PricingWhatToExpect() {
developers contributing changes to the front-end code of the projects that use the
software.
-
+
+
Perpetual license model
@@ -93,15 +82,9 @@ export default function PricingWhatToExpect() {
-
+
+
Perpetual vs. Annual license model
@@ -118,15 +101,9 @@ export default function PricingWhatToExpect() {
-
+
+
Annual license model
@@ -152,15 +129,9 @@ export default function PricingWhatToExpect() {
-
+
+
Maintenance and support
@@ -170,21 +141,17 @@ export default function PricingWhatToExpect() {
-
+
+
Volume discounts
@@ -192,6 +159,7 @@ export default function PricingWhatToExpect() {
The Pro plan is capped at 10 developers licensed; you do not need to pay for additional
licenses for more than 10 developers.
-
+
-
+
diff --git a/docs/src/components/productMaterial/MaterialStyling.tsx b/docs/src/components/productMaterial/MaterialStyling.tsx
index 48897433cb4dc4..2565c703eea688 100644
--- a/docs/src/components/productMaterial/MaterialStyling.tsx
+++ b/docs/src/components/productMaterial/MaterialStyling.tsx
@@ -1,11 +1,11 @@
import * as React from 'react';
import Box from '@mui/material/Box';
-import Grid from '@mui/material/Grid';
+import Grid from '@mui/material/Unstable_Grid2';
import Typography from '@mui/material/Typography';
import DevicesOtherRoundedIcon from '@mui/icons-material/DevicesOtherRounded';
-import ContrastRoundedIcon from '@mui/icons-material/ContrastRounded';
import SwitchAccessShortcutRoundedIcon from '@mui/icons-material/SwitchAccessShortcutRounded';
import DragHandleRounded from '@mui/icons-material/DragHandleRounded';
+import StyleRoundedIcon from '@mui/icons-material/StyleRounded';
import Section from 'docs/src/layouts/Section';
import SectionHeadline from 'docs/src/components/typography/SectionHeadline';
import GradientText from 'docs/src/components/typography/GradientText';
@@ -13,8 +13,8 @@ import Item, { Group } from 'docs/src/components/action/Item';
import Highlighter from 'docs/src/components/action/Highlighter';
import Frame from 'docs/src/components/action/Frame';
import RealEstateCard from 'docs/src/components/showcase/RealEstateCard';
-import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
-import MarkdownElement from 'docs/src/components/markdown/MarkdownElement';
+import { HighlightedCode } from '@mui/docs/HighlightedCode';
+import { MarkdownElement } from '@mui/docs/MarkdownElement';
import FlashCode from 'docs/src/components/animation/FlashCode';
const code = `
@@ -161,7 +161,7 @@ export default function MaterialStyling() {
return (
-
+
setIndex(0)}>
-
+
({
- width: { xs: 70, sm: 100 },
- height: { xs: 70, sm: 100 },
+ width: { xs: 70, sm: 48 },
+ height: { xs: 70, sm: 48 },
position: 'absolute',
top: 'calc(50% - 50px)',
p: 1.5,
- color: '#FFF',
+ color: (theme.vars || theme).palette.primary[500],
+ bgcolor: '#FFF',
+ border: '1px solid',
+ borderColor: (theme.vars || theme).palette.primary[200],
borderRadius: '50%',
+ boxShadow: `0 4px 12px ${alpha(theme.palette.grey[500], 0.2)}`,
transition: '0.2s',
- backdropFilter: 'blur(4px)',
- bgcolor: alpha(theme.palette.primary[500], 0.5),
'& > svg': { transition: '0.2s' },
'&.Mui-disabled': {
opacity: 0,
@@ -115,6 +123,12 @@ function ActionArea(props: ButtonBaseProps) {
'&:hover, &:focus': {
'& > svg': { fontSize: 28 },
},
+ ...theme.applyDarkStyles({
+ bgcolor: (theme.vars || theme).palette.primaryDark[900],
+ borderColor: (theme.vars || theme).palette.primary[900],
+ color: (theme.vars || theme).palette.primary[300],
+ boxShadow: `0 4px 12px ${alpha(theme.palette.common.black, 0.2)}`,
+ }),
}),
...(Array.isArray(props.sx) ? props.sx : [props.sx]),
]}
@@ -138,7 +152,7 @@ export default function MaterialTemplates() {
specific use case
}
- description="A carefully curated collection of gorgeous, fully functional templates, all powered by Material UI."
+ description="A carefully curated collection of gorgeous, fully functional templates."
/>
{DEMOS.map((name) => (
@@ -163,147 +177,160 @@ export default function MaterialTemplates() {
noLinkStyle
/>
-
- div': { px: '12%', overflow: 'unset !important' },
- '& .react-swipeable-view-container > div': {
- overflow: 'unset !important',
- },
+
+ div': { px: '12%', overflow: 'unset !important' },
+ '& .react-swipeable-view-container > div': {
+ overflow: 'unset !important',
+ },
+ }}
+ >
+ setTemplateIndex(index)}
>
- setTemplateIndex(index)}
- >
- {templates.map((item, index) => (
- ({
- overflow: 'auto',
- borderRadius: 1,
- height: { xs: 220, sm: 320, md: 450 },
- backgroundImage: `url(${item.src.light})`,
- backgroundSize: 'cover',
- backgroundRepeat: 'no-repeat',
- border: '1px solid',
- borderColor: templateIndex === index ? 'primary.100' : 'divider',
- boxShadow: `0px 2px 12px ${alpha(theme.palette.primary[200], 0.3)}`,
- transition: '0.6s cubic-bezier(0.15, 0.3, 0.25, 1)',
- transform: templateIndex !== index ? 'scale(0.92)' : 'scale(1)',
- ...theme.applyDarkStyles({
- backgroundImage: `url(${item.src.dark})`,
- borderColor: templateIndex === index ? 'primary.800' : 'divider',
- boxShadow: `0px 2px 12px ${alpha(theme.palette.primary[900], 0.5)}`,
+ {templates.map((item, index) => (
+ ({
+ overflow: 'auto',
+ borderRadius: 1,
+ height: { xs: 220, sm: 320, md: 500 },
+ backgroundImage: `url(${item.src.light})`,
+ backgroundSize: 'cover',
+ backgroundRepeat: 'no-repeat',
+ border: '1px solid',
+ borderColor: templateIndex === index ? 'primary.100' : 'divider',
+ boxShadow:
+ templateIndex === index
+ ? `0px 2px 12px ${alpha(theme.palette.primary[200], 0.3)}`
+ : undefined,
+ transition: '0.6s cubic-bezier(0.15, 0.3, 0.25, 1)',
+ transform: templateIndex !== index ? 'scale(0.92)' : 'scale(1)',
+ opacity: templateIndex === index ? 1 : 0.2,
+ ...theme.applyDarkStyles({
+ backgroundImage: `url(${item.src.dark})`,
+ borderColor: templateIndex === index ? 'primary.900' : 'divider',
+ boxShadow:
+ templateIndex === index
+ ? `0px 2px 8px ${alpha(theme.palette.primary[900], 0.4)}`
+ : undefined,
+ }),
+ })}
+ >
+
+ {templates[templateIndex].name}
+
+ ({
display: 'flex',
alignItems: 'center',
- justifyContent: 'center',
- flexDirection: 'column',
- gap: 1,
- transition: '0.2s',
- position: 'absolute',
- width: '100%',
- height: '100%',
- opacity: 0,
- top: 0,
- left: 0,
- bgcolor: alpha(theme.palette.primary[50], 0.6),
- backdropFilter: 'blur(4px)',
- textDecoration: 'none',
- '&:hover, &:focus': {
- opacity: 1,
- },
+ gap: 0.5,
+ color: 'primary.500',
...theme.applyDarkStyles({
- bgcolor: alpha(theme.palette.primaryDark[900], 0.6),
+ color: 'primary.200',
}),
}),
]}
>
- ({
- color: 'text.primary',
- ...theme.applyDarkStyles({
- color: '#FFF',
- }),
- }),
- ]}
- >
- {templates[templateIndex].name}
-
- ({
- display: 'flex',
- alignItems: 'center',
- gap: 0.5,
- color: 'primary.500',
- ...theme.applyDarkStyles({
- color: 'primary.100',
- }),
- }),
- ]}
- >
- Buy now
-
-
-
- ))}
-
- {templates.length > 1 && (
-
- setTemplateIndex((current) => Math.max(0, current - 1))}
- sx={{ left: 0, transform: 'translate(-50%)', justifyContent: 'flex-end' }}
- >
-
-
- setTemplateIndex((current) => Math.min(templates.length - 1, current + 1))
- }
- sx={{ right: 0, transform: 'translate(50%)', justifyContent: 'flex-start' }}
- >
-
-
- )}
-
-
-
+ Buy now
+
+
+
+ ))}
+
+ {templates.length > 1 && (
+
+ setTemplateIndex((current) => Math.max(0, current - 1))}
+ sx={{ left: 0, transform: 'translate(-50%)', justifyContent: 'flex-end' }}
+ >
+
+
+ setTemplateIndex((current) => Math.min(templates.length - 1, current + 1))
+ }
+ sx={{ right: 0, transform: 'translate(50%)', justifyContent: 'flex-start' }}
+ >
+
+
+ )}
+
+
);
}
diff --git a/docs/src/components/productMaterial/MaterialTheming.tsx b/docs/src/components/productMaterial/MaterialTheming.tsx
index 01079c893757c9..5324961df64cbb 100644
--- a/docs/src/components/productMaterial/MaterialTheming.tsx
+++ b/docs/src/components/productMaterial/MaterialTheming.tsx
@@ -1,6 +1,6 @@
import * as React from 'react';
import { Experimental_CssVarsProvider as CssVarsProvider } from '@mui/material/styles';
-import Grid from '@mui/material/Grid';
+import Grid from '@mui/material/Unstable_Grid2';
import Typography from '@mui/material/Typography';
import AutoAwesomeRounded from '@mui/icons-material/AutoAwesomeRounded';
import Section from 'docs/src/layouts/Section';
@@ -11,8 +11,8 @@ import Highlighter from 'docs/src/components/action/Highlighter';
import SvgMaterialDesign from 'docs/src/icons/SvgMaterialDesign';
import Frame from 'docs/src/components/action/Frame';
import PlayerCard from 'docs/src/components/showcase/PlayerCard';
-import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
-import MarkdownElement from 'docs/src/components/markdown/MarkdownElement';
+import { HighlightedCode } from '@mui/docs/HighlightedCode';
+import { MarkdownElement } from '@mui/docs/MarkdownElement';
const code = `
-
+
-
+
-
+
specific use case
}
- description="A collection of 4.5 average rating templates, for multiple use cases, all powered by Material UI components and carefully curated by MUI's team.
- "
+ description="The Material UI collection of templates offers an expanding list of use cases designed to support projects of various types."
/>
{DEMOS.map((name) => (
@@ -93,7 +92,7 @@ export default function TemplateDemo() {
/>
-
+
-
-
+
+
{templates[templateIndex].name}
-
-
- {templateIndex + 1} / {templates.length}
-
-
-
+
+ Developed by {templates[templateIndex].author}
+
+
+
+ {templateIndex + 1} / {templates.length}
+
diff --git a/docs/src/components/productTemplate/TemplateHero.tsx b/docs/src/components/productTemplate/TemplateHero.tsx
index aff549228dac2f..1cb0646dfcea50 100644
--- a/docs/src/components/productTemplate/TemplateHero.tsx
+++ b/docs/src/components/productTemplate/TemplateHero.tsx
@@ -35,10 +35,10 @@ export default function TemplateHero() {
- Fully built Material UI templates
+ Beautiful and fully built Material UI templates
- A collection of 4.5 average rating templates, selected and curated by MUI's team of
+ A collection of 4.5 average rating templates, selected and curated by Material UI's
maintainers to get your projects up and running today.
-
+
- {icon}
+ {icon}
,
}
href={ROUTES.chartsOverview}
/>,
@@ -129,7 +130,6 @@ export default function XComponentsSwitcher(props: {
sx={{
display: { md: 'none' },
maxWidth: 'calc(100vw - 40px)',
- minHeight: { xs: 200, sm: 166 },
'& > div': { pr: '32%' },
}}
>
@@ -156,7 +156,7 @@ export default function XComponentsSwitcher(props: {
))}
-
+
{componentElement.map((element, index) => (
-
+
-
+
+
diff --git a/docs/src/components/productX/XPlans.tsx b/docs/src/components/productX/XPlans.tsx
index 2d5c310ba47fdd..4ceb3c9a710da8 100644
--- a/docs/src/components/productX/XPlans.tsx
+++ b/docs/src/components/productX/XPlans.tsx
@@ -1,6 +1,6 @@
import * as React from 'react';
import Stack from '@mui/material/Stack';
-import Grid from '@mui/material/Grid';
+import Grid from '@mui/material/Unstable_Grid2';
import Typography from '@mui/material/Typography';
import Section from 'docs/src/layouts/Section';
import SectionHeadline from 'docs/src/components/typography/SectionHeadline';
@@ -38,7 +38,7 @@ export default function XPlans2() {
return (
-
+
-
+
{content.map(({ icon, title, description, link }) => (
-
+
-
+
Stable
@@ -160,7 +159,7 @@ export default function XRoadmap() {
)}
-
+
Work in progress
@@ -214,7 +213,7 @@ export default function XRoadmap() {
)}
-
+
Future components
diff --git a/docs/src/components/productX/XTheming.tsx b/docs/src/components/productX/XTheming.tsx
index 42bd5aee4f5dc8..62f34c9db157a3 100644
--- a/docs/src/components/productX/XTheming.tsx
+++ b/docs/src/components/productX/XTheming.tsx
@@ -8,7 +8,7 @@ import {
import { useDemoData } from '@mui/x-data-grid-generator';
import { Experimental_CssVarsProvider as CssVarsProvider } from '@mui/material/styles';
import { red } from '@mui/material/colors';
-import Grid from '@mui/material/Grid';
+import Grid from '@mui/material/Unstable_Grid2';
import Typography from '@mui/material/Typography';
import Paper from '@mui/material/Paper';
import Section from 'docs/src/layouts/Section';
@@ -97,7 +97,7 @@ export default function XTheming() {
return (
-
+
-
+
{customized ? (
(
: (a, b) => -descendingComparator(a, b, orderBy);
}
-// Since 2020 all major browsers ensure sort stability with Array.prototype.sort().
-// stableSort() brings sort stability to non-modern browsers (notably IE11). If you
-// only support modern browsers you can replace stableSort(exampleArray, exampleComparator)
-// with exampleArray.slice().sort(exampleComparator)
-function stableSort(array: readonly T[], comparator: (a: T, b: T) => number) {
- const stabilizedThis = array.map((el, index) => [el, index] as [T, number]);
- stabilizedThis.sort((a, b) => {
- const order = comparator(a[0], b[0]);
- if (order !== 0) {
- return order;
- }
- return a[1] - b[1];
- });
- return stabilizedThis.map((el) => el[0]);
-}
-
function formatSize(size: number) {
const kb = size / 1000;
if (kb < 1000) {
@@ -138,7 +122,7 @@ export default function BasicTable() {
- {stableSort(data, getComparator(order, orderBy)).map((row) => (
+ {[...data].sort(getComparator(order, orderBy)).map((row) => (
diff --git a/docs/src/modules/components/ApiPage.js b/docs/src/modules/components/ApiPage.js
index f51d320ae6294c..9d9ff276d444a6 100644
--- a/docs/src/modules/components/ApiPage.js
+++ b/docs/src/modules/components/ApiPage.js
@@ -9,7 +9,7 @@ import Alert from '@mui/material/Alert';
import VerifiedRoundedIcon from '@mui/icons-material/VerifiedRounded';
import { alpha } from '@mui/material/styles';
import { useTranslate, useUserLanguage } from '@mui/docs/i18n';
-import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
+import { HighlightedCode } from '@mui/docs/HighlightedCode';
import MarkdownElement from 'docs/src/modules/components/MarkdownElement';
import AppLayoutDocs from 'docs/src/modules/components/AppLayoutDocs';
import Ad from 'docs/src/modules/components/Ad';
diff --git a/docs/src/modules/components/CodeCopyButton.tsx b/docs/src/modules/components/CodeCopyButton.tsx
index 1a036057ee383a..4fa72ee1c541e0 100644
--- a/docs/src/modules/components/CodeCopyButton.tsx
+++ b/docs/src/modules/components/CodeCopyButton.tsx
@@ -1,41 +1,5 @@
-import * as React from 'react';
-import ContentCopyRoundedIcon from '@mui/icons-material/ContentCopyRounded';
-import LibraryAddCheckRoundedIcon from '@mui/icons-material/LibraryAddCheckRounded';
-import useClipboardCopy from 'docs/src/modules/utils/useClipboardCopy';
+// Backwards compatibility for Toolpad and X.
+// TODO: remove when Toolpad and X migrated to `@mui/docs/CodeCopy`
+import { CodeCopyButton } from '@mui/docs/CodeCopy';
-interface CodeCopyButtonProps {
- code: string;
-}
-
-export default function CodeCopyButton(props: CodeCopyButtonProps) {
- const { code, ...other } = props;
- const { copy, isCopied } = useClipboardCopy();
- // This component is designed to be wrapped in NoSsr
- const macOS = window.navigator.platform.toUpperCase().indexOf('MAC') >= 0;
- const key = macOS ? '⌘' : 'Ctrl + ';
-
- return (
-
- {
- // event.stopPropagation();
- await copy(code);
- }}
- >
- {/* material-ui/no-hardcoded-labels */}
- {isCopied ? (
-
- (or {key}C)
-
-
-
- );
-}
+export default CodeCopyButton;
diff --git a/docs/src/modules/components/ComponentsApiContent.js b/docs/src/modules/components/ComponentsApiContent.js
index eab0596c3c8c06..59d7e53c6073f6 100644
--- a/docs/src/modules/components/ComponentsApiContent.js
+++ b/docs/src/modules/components/ComponentsApiContent.js
@@ -5,7 +5,7 @@ import kebabCase from 'lodash/kebabCase';
import { useRouter } from 'next/router';
import { exactProp } from '@mui/utils';
import { useTranslate, useUserLanguage } from '@mui/docs/i18n';
-import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
+import { HighlightedCode } from '@mui/docs/HighlightedCode';
import MarkdownElement from 'docs/src/modules/components/MarkdownElement';
import PropertiesSection from 'docs/src/modules/components/ApiPage/sections/PropertiesSection';
import ClassesSection from 'docs/src/modules/components/ApiPage/sections/ClassesSection';
diff --git a/docs/src/modules/components/Demo.js b/docs/src/modules/components/Demo.js
index ed82ae5d5aa386..5da994f1ecdfab 100644
--- a/docs/src/modules/components/Demo.js
+++ b/docs/src/modules/components/Demo.js
@@ -4,12 +4,14 @@ import { useRouter } from 'next/router';
import { debounce } from '@mui/material/utils';
import { alpha, styled } from '@mui/material/styles';
import { styled as joyStyled } from '@mui/joy/styles';
+import { Tabs } from '@mui/base/Tabs';
+import { TabPanel } from '@mui/base/TabPanel';
import { unstable_useId as useId } from '@mui/utils';
import IconButton from '@mui/material/IconButton';
import Box from '@mui/material/Box';
import Collapse from '@mui/material/Collapse';
import NoSsr from '@mui/material/NoSsr';
-import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
+import { HighlightedCode } from '@mui/docs/HighlightedCode';
import DemoSandbox from 'docs/src/modules/components/DemoSandbox';
import ReactRunner from 'docs/src/modules/components/ReactRunner';
import DemoEditor from 'docs/src/modules/components/DemoEditor';
@@ -21,8 +23,9 @@ import { useCodeStyling } from 'docs/src/modules/utils/codeStylingSolution';
import { CODE_VARIANTS, CODE_STYLING } from 'docs/src/modules/constants';
import { useUserLanguage, useTranslate } from '@mui/docs/i18n';
import stylingSolutionMapping from 'docs/src/modules/utils/stylingSolutionMapping';
-import { BrandingProvider, blue, blueDark, grey } from '@mui/docs/branding';
import DemoToolbarRoot from 'docs/src/modules/components/DemoToolbarRoot';
+import { BrandingProvider, blue, blueDark, grey } from '@mui/docs/branding';
+import { CodeTab, CodeTabList } from 'docs/src/modules/components/HighlightedCodeWithTabs';
/**
* Removes leading spaces (indentation) present in the `.tsx` previews
@@ -68,24 +71,31 @@ function useDemoData(codeVariant, demo, githubLocation, codeStyling) {
}
let codeOptions = {};
-
if (codeStyling === CODE_STYLING.SYSTEM) {
if (codeVariant === CODE_VARIANTS.TS && demo.rawTS) {
codeOptions = {
codeVariant: CODE_VARIANTS.TS,
githubLocation: githubLocation.replace(/\.js$/, '.tsx'),
raw: demo.rawTS,
- Component: demo.tsx,
+ module: demo.moduleTS,
+ Component: demo.tsx ?? null,
sourceLanguage: 'tsx',
};
+ if (demo.relativeModules) {
+ codeOptions.relativeModules = demo.relativeModules[CODE_VARIANTS.TS];
+ }
} else {
codeOptions = {
codeVariant: CODE_VARIANTS.JS,
githubLocation,
raw: demo.raw,
+ module: demo.module,
Component: demo.js,
sourceLanguage: 'jsx',
};
+ if (demo.relativeModules) {
+ codeOptions.relativeModules = demo.relativeModules[CODE_VARIANTS.JS];
+ }
}
} else if (codeStyling === CODE_STYLING.TAILWIND) {
if (codeVariant === CODE_VARIANTS.TS && demo.rawTailwindTS) {
@@ -93,6 +103,7 @@ function useDemoData(codeVariant, demo, githubLocation, codeStyling) {
codeVariant: CODE_VARIANTS.TS,
githubLocation: githubLocation.replace(/\/system\/index\.js$/, '/tailwind/index.tsx'),
raw: demo.rawTailwindTS,
+ module: demo.moduleTS,
Component: demo.tsxTailwind,
sourceLanguage: 'tsx',
};
@@ -101,6 +112,7 @@ function useDemoData(codeVariant, demo, githubLocation, codeStyling) {
codeVariant: CODE_VARIANTS.JS,
githubLocation: githubLocation.replace(/\/system\/index\.js$/, '/tailwind/index.js'),
raw: demo.rawTailwind ?? demo.raw,
+ module: demo.module,
Component: demo.jsTailwind ?? demo.js,
sourceLanguage: 'jsx',
};
@@ -111,6 +123,7 @@ function useDemoData(codeVariant, demo, githubLocation, codeStyling) {
codeVariant: CODE_VARIANTS.TS,
githubLocation: githubLocation.replace(/\/system\/index\.js$/, '/css/index.tsx'),
raw: demo.rawCSSTS,
+ module: demo.moduleTS,
Component: demo.tsxCSS,
sourceLanguage: 'tsx',
};
@@ -119,6 +132,7 @@ function useDemoData(codeVariant, demo, githubLocation, codeStyling) {
codeVariant: CODE_VARIANTS.JS,
githubLocation: githubLocation.replace(/\/system\/index\.js$/, '/css/index.js'),
raw: demo.rawCSS ?? demo.raw,
+ module: demo.module,
Component: demo.jsCSS ?? demo.js,
sourceLanguage: 'jsx',
};
@@ -329,9 +343,12 @@ const DemoRootJoy = joyStyled('div', {
const DemoCodeViewer = styled(HighlightedCode)(() => ({
'& pre': {
margin: 0,
+ marginTop: -1,
maxHeight: 'min(68vh, 1000px)',
maxWidth: 'initial',
borderRadius: 0,
+ borderBottomLeftRadius: 12,
+ borderBottomRightRadius: 12,
},
'& .MuiCode-copy': {
display: 'none',
@@ -352,6 +369,20 @@ const InitialFocus = styled(IconButton)(({ theme }) => ({
pointerEvents: 'none',
}));
+const selectionOverride = (theme) => ({
+ cursor: 'pointer',
+ '&.base--selected': {
+ color: (theme.vars || theme).palette.primary[700],
+ backgroundColor: (theme.vars || theme).palette.primary[50],
+ borderColor: (theme.vars || theme).palette.primary[200],
+ ...theme.applyDarkStyles({
+ color: (theme.vars || theme).palette.primary[200],
+ backgroundColor: alpha((theme.vars || theme).palette.primary[900], 0.4),
+ borderColor: (theme.vars || theme).palette.primary[800],
+ }),
+ },
+});
+
export default function Demo(props) {
const { demo, demoOptions, disableAd, githubLocation, mode } = props;
@@ -500,6 +531,32 @@ export default function Demo(props) {
liveDemoActive,
});
+ const [activeTab, setActiveTab] = React.useState(0);
+ const handleTabChange = (event, newValue) => {
+ setActiveTab(newValue);
+ };
+ const ownerState = { mounted: true, contained: true };
+
+ const tabs = React.useMemo(() => {
+ if (!demoData.relativeModules) {
+ return [{ module: demoData.module, raw: demoData.raw }];
+ }
+ let demoModule = demoData.module;
+ if (codeVariant === CODE_VARIANTS.TS && demo.moduleTS) {
+ demoModule =
+ demo.moduleTS === demo.module ? demoData.module.replace(/\.js$/, '.tsx') : demo.moduleTS;
+ }
+
+ return [{ module: demoModule, raw: demoData.raw }, ...demoData.relativeModules];
+ }, [
+ codeVariant,
+ demo.moduleTS,
+ demo.module,
+ demoData.module,
+ demoData.raw,
+ demoData.relativeModules,
+ ]);
+
return (
- {/* A limitation from https://github.com/nihgwu/react-runner,
+
+ {demoData.relativeModules && openDemoSource && !editorCode.isPreview ? (
+
+ {tabs.map((tab, index) => (
+
+ {tab.module}
+
+ ))}
+
+ ) : null}
+
+ {/* A limitation from https://github.com/nihgwu/react-runner,
we can't inject the `window` of the iframe so we need a disableLiveEdit option. */}
- {demoOptions.disableLiveEdit ? (
- {
- setEditorCode({
- ...editorCode,
- value,
- });
- }}
- onFocus={() => {
- setLiveDemoActive(true);
- }}
- id={demoSourceId}
- language={demoData.sourceLanguage}
- copyButtonProps={{
- 'data-ga-event-category': codeOpen ? 'demo-expand' : 'demo',
- 'data-ga-event-label': demo.gaLabel,
- 'data-ga-event-action': 'copy-click',
- }}
- >
- {debouncedError}
-
- )}
-
+ {tabs.map((tab, index) => (
+
+ {demoOptions.disableLiveEdit || index > 0 ? (
+ {
+ setEditorCode({
+ ...editorCode,
+ value,
+ });
+ }}
+ onFocus={() => {
+ setLiveDemoActive(true);
+ }}
+ id={demoSourceId}
+ language={demoData.sourceLanguage}
+ copyButtonProps={{
+ 'data-ga-event-category': codeOpen ? 'demo-expand' : 'demo',
+ 'data-ga-event-label': demo.gaLabel,
+ 'data-ga-event-action': 'copy-click',
+ }}
+ >
+ {debouncedError}
+
+ )}
+
+ ))}
+
+
{adVisibility ?
-
+
{hasNonSystemDemos && (
-
- {copyButtonHidden ? null : (
-
-
- )}
-
-
-
- );
-});
-
-HighlightedCode.propTypes = {
- code: PropTypes.string.isRequired,
- component: PropTypes.elementType,
- copyButtonHidden: PropTypes.bool,
- copyButtonProps: PropTypes.object,
- language: PropTypes.string.isRequired,
- sx: PropTypes.object,
-};
+// Backwards compatibility for Toolpad and X.
+// TODO: remove when Toolpad and X migrated to `@mui/docs/HighlightedCode`
+import { HighlightedCode } from '@mui/docs/HighlightedCode';
export default HighlightedCode;
diff --git a/docs/src/modules/components/HighlightedCode.test.js b/docs/src/modules/components/HighlightedCode.test.js
index 05f7f1b627a523..60ccf9b7c04ff4 100644
--- a/docs/src/modules/components/HighlightedCode.test.js
+++ b/docs/src/modules/components/HighlightedCode.test.js
@@ -3,7 +3,7 @@ import { expect } from 'chai';
import { createRenderer } from '@mui-internal/test-utils';
import { ThemeProvider, createTheme } from '@mui/material/styles';
import { getDesignTokens } from '@mui/docs/branding';
-import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
+import { HighlightedCode } from '@mui/docs/HighlightedCode';
describe('HighlightedCode', () => {
const { render } = createRenderer();
diff --git a/docs/src/modules/components/HighlightedCodeWithTabs.tsx b/docs/src/modules/components/HighlightedCodeWithTabs.tsx
index 7372011ff47f06..27242449152c99 100644
--- a/docs/src/modules/components/HighlightedCodeWithTabs.tsx
+++ b/docs/src/modules/components/HighlightedCodeWithTabs.tsx
@@ -7,22 +7,35 @@ import { Tab as TabBase } from '@mui/base/Tab';
import useLocalStorageState from '@mui/utils/useLocalStorageState';
import HighlightedCode from './HighlightedCode';
-const TabList = styled(TabsListBase)(({ theme }) => ({
- padding: 6,
+export const CodeTabList = styled(TabsListBase)<{
+ ownerState: { mounted: boolean; contained?: boolean };
+}>(({ theme, ownerState }) => ({
+ padding: ownerState?.contained ? theme.spacing(1.5, 1) : theme.spacing(1),
display: 'flex',
- border: '1px solid',
- borderColor: (theme.vars || theme).palette.primaryDark[700],
- backgroundColor: (theme.vars || theme).palette.primaryDark[900],
- borderTopLeftRadius: (theme.vars || theme).shape.borderRadius,
- borderTopRightRadius: (theme.vars || theme).shape.borderRadius,
+ gap: theme.spacing(0.5),
+ borderLeft: '1px solid',
+ borderRight: '1px solid',
+ borderTop: ownerState?.contained ? 'none' : '1px solid',
+ borderBottom: ownerState?.contained ? 'none' : '1px solid',
+ borderTopLeftRadius: ownerState?.contained ? 0 : (theme.vars || theme).shape.borderRadius,
+ borderTopRightRadius: ownerState?.contained ? 0 : (theme.vars || theme).shape.borderRadius,
+ borderColor: ownerState?.contained
+ ? (theme.vars || theme).palette.divider
+ : (theme.vars || theme).palette.primaryDark[700],
+ backgroundColor: ownerState?.contained
+ ? alpha(theme.palette.grey[50], 0.2)
+ : (theme.vars || theme).palette.primaryDark[900],
...theme.applyDarkStyles({
- backgroundColor: alpha(theme.palette.primaryDark[800], 0.5),
+ backgroundColor: alpha(theme.palette.primaryDark[800], 0.2),
}),
}));
-const TabPanel = styled(TabPanelBase)<{ ownerState: { mounted: boolean } }>(({ ownerState }) => ({
+export const CodeTabPanel = styled(TabPanelBase)<{
+ ownerState: { mounted: boolean; contained?: boolean };
+}>(({ ownerState }) => ({
+ marginTop: ownerState?.contained ? -1 : 0,
'& pre': {
- marginTop: -1,
+ marginTop: ownerState?.contained ? 0 : -1,
borderTopLeftRadius: 0,
borderTopRightRadius: 0,
'& code': {
@@ -31,46 +44,59 @@ const TabPanel = styled(TabPanelBase)<{ ownerState: { mounted: boolean } }>(({ o
},
}));
-const Tab = styled(TabBase)<{ ownerState: { mounted: boolean } }>(({ theme, ownerState }) =>
- theme.unstable_sx({
- p: 0.8,
- border: 'none',
- bgcolor: 'transparent',
- color: (theme.vars || theme).palette.grey[500],
- fontSize: theme.typography.pxToRem(12),
- fontWeight: theme.typography.fontWeightSemiBold,
- fontFamily: theme.typography.fontFamilyCode,
- outline: 'none',
- minWidth: 52,
- cursor: 'pointer',
- borderRadius: '8px',
- position: 'relative',
- '&:not(:first-of-type)': {
- marginLeft: 0.5,
- },
- ...(ownerState.mounted && {
- '&.base--selected': {
- color: '#FFF',
- '&::after': {
- content: "''",
- position: 'absolute',
- left: 0,
- bottom: '-6px',
- height: 2,
- width: '100%',
- bgcolor: (theme.vars || theme).palette.primary.light,
- },
+export const CodeTab = styled(TabBase)<{ ownerState: { mounted: boolean; contained?: boolean } }>(
+ ({ theme, ownerState }) =>
+ theme.unstable_sx({
+ height: 26,
+ p: '0 8px 2px 8px',
+ border: ownerState?.contained ? '1px solid transparent' : 'none',
+ bgcolor: 'transparent',
+ color: ownerState?.contained
+ ? (theme.vars || theme).palette.text.tertiary
+ : (theme.vars || theme).palette.grey[500],
+ fontSize: theme.typography.pxToRem(ownerState?.contained ? 13 : 12),
+ fontFamily: ownerState?.contained
+ ? theme.typography.fontFamily
+ : theme.typography.fontFamilyCode,
+ fontWeight: ownerState?.contained
+ ? theme.typography.fontWeightMedium
+ : theme.typography.fontWeightBold,
+ lineHeight: 1.2,
+ outline: 'none',
+ minWidth: 52,
+ cursor: 'pointer',
+ borderRadius: 99,
+ position: 'relative',
+ transition: ownerState?.contained ? 'background, color, 100ms ease' : 'unset',
+ '&:hover': {
+ backgroundColor: (theme.vars || theme).palette.divider,
},
+ '&:focus-visible': {
+ outline: '3px solid',
+ outlineOffset: '1px',
+ outlineColor: (theme.vars || theme).palette.primary.light,
+ },
+ ...(!ownerState?.contained && {
+ '&:hover': {
+ backgroundColor: alpha(theme.palette.primaryDark[500], 0.5),
+ color: (theme.vars || theme).palette.grey[400],
+ },
+ ...(ownerState.mounted && {
+ '&.base--selected': {
+ color: '#FFF',
+ '&::after': {
+ content: "''",
+ position: 'absolute',
+ left: 0,
+ bottom: '-8px',
+ height: 2,
+ width: '100%',
+ bgcolor: (theme.vars || theme).palette.primary.light,
+ },
+ },
+ }),
+ }),
}),
- '&:hover': {
- backgroundColor: alpha(theme.palette.primaryDark[500], 0.5),
- },
- '&:focus-visible': {
- outline: '2px solid',
- outlineOffset: '-2px',
- outlineColor: (theme.vars || theme).palette.primary.light,
- },
- }),
);
type TabsConfig = {
@@ -88,6 +114,8 @@ export default function HighlightedCodeWithTabs(
const { tabs, storageKey } = props;
const availableTabs = React.useMemo(() => tabs.map(({ tab }) => tab), [tabs]);
const [activeTab, setActiveTab] = useLocalStorageState(storageKey ?? null, availableTabs[0]);
+ // During hydration, activeTab is null, default to first value.
+ const defaultizedActiveTab = activeTab ?? availableTabs[0];
const [mounted, setMounted] = React.useState(false);
@@ -101,22 +129,22 @@ export default function HighlightedCodeWithTabs(
const ownerState = { mounted };
return (
-
-
+
+
{tabs.map(({ tab }) => (
-
+
{tab}
-
+
))}
-
+
{tabs.map(({ tab, language, code }) => (
-
+
+
))}
);
diff --git a/docs/src/modules/components/HooksApiContent.js b/docs/src/modules/components/HooksApiContent.js
index acb36479c6dd62..cc330f3b22ec67 100644
--- a/docs/src/modules/components/HooksApiContent.js
+++ b/docs/src/modules/components/HooksApiContent.js
@@ -5,7 +5,7 @@ import kebabCase from 'lodash/kebabCase';
import { exactProp } from '@mui/utils';
import { useTranslate, useUserLanguage } from '@mui/docs/i18n';
import PropertiesSection from 'docs/src/modules/components/ApiPage/sections/PropertiesSection';
-import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
+import { HighlightedCode } from '@mui/docs/HighlightedCode';
import MarkdownElement from 'docs/src/modules/components/MarkdownElement';
import { DEFAULT_API_LAYOUT_STORAGE_KEYS } from 'docs/src/modules/components/ApiPage/sections/ToggleDisplayOption';
diff --git a/docs/src/modules/components/JoyThemeBuilder.tsx b/docs/src/modules/components/JoyThemeBuilder.tsx
index fa274153726f15..7cceb465dcba4b 100644
--- a/docs/src/modules/components/JoyThemeBuilder.tsx
+++ b/docs/src/modules/components/JoyThemeBuilder.tsx
@@ -59,7 +59,7 @@ import Search from '@mui/icons-material/Search';
import DescriptionOutlinedIcon from '@mui/icons-material/DescriptionOutlined';
import DarkMode from '@mui/icons-material/DarkMode';
import LightMode from '@mui/icons-material/LightMode';
-import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
+import { HighlightedCode } from '@mui/docs/HighlightedCode';
import { BrandingProvider } from '@mui/docs/branding';
import codeSandbox from 'docs/src/modules/sandbox/CodeSandbox';
import sourceJoyTemplates, { TemplateData } from 'docs/src/modules/joy/sourceJoyTemplates';
diff --git a/docs/src/modules/components/JoyUsageDemo.tsx b/docs/src/modules/components/JoyUsageDemo.tsx
index 8928e277af5ef7..787c5c22800aa4 100644
--- a/docs/src/modules/components/JoyUsageDemo.tsx
+++ b/docs/src/modules/components/JoyUsageDemo.tsx
@@ -19,7 +19,7 @@ import Sheet from '@mui/joy/Sheet';
import Switch from '@mui/joy/Switch';
import Typography from '@mui/joy/Typography';
import { BrandingProvider } from '@mui/docs/branding';
-import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
+import { HighlightedCode } from '@mui/docs/HighlightedCode';
const shallowEqual = (item1: { [k: string]: any }, item2: { [k: string]: any }) => {
let equal = true;
diff --git a/docs/src/modules/components/JoyVariablesDemo.tsx b/docs/src/modules/components/JoyVariablesDemo.tsx
index 2d4392d3059bf3..fe4fb76e37d8ef 100644
--- a/docs/src/modules/components/JoyVariablesDemo.tsx
+++ b/docs/src/modules/components/JoyVariablesDemo.tsx
@@ -12,7 +12,7 @@ import FormHelperText from '@mui/joy/FormHelperText';
import Input, { inputClasses } from '@mui/joy/Input';
import ReplayRoundedIcon from '@mui/icons-material/ReplayRounded';
import KeyboardArrowDown from '@mui/icons-material/KeyboardArrowDown';
-import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
+import { HighlightedCode } from '@mui/docs/HighlightedCode';
import { BrandingProvider } from '@mui/docs/branding';
interface DataItem {
diff --git a/docs/src/modules/components/MarkdownDocsV2.js b/docs/src/modules/components/MarkdownDocsV2.js
index 8833babea4b493..cef3c473ccc059 100644
--- a/docs/src/modules/components/MarkdownDocsV2.js
+++ b/docs/src/modules/components/MarkdownDocsV2.js
@@ -81,7 +81,7 @@ export default function MarkdownDocsV2(props) {
const localizedDoc = docs[userLanguage] || docs.en;
// Generate the TOC based on the tab
- const demosToc = localizedDoc.toc.filter((item) => item.text !== 'API');
+ const demosToc = localizedDoc.toc;
function createHookTocEntry(hookName, sectionName, hookProps = {}) {
const hookPropToc = [];
@@ -275,11 +275,7 @@ export default function MarkdownDocsV2(props) {
{commonElements}
{activeTab === '' &&
localizedDoc.rendered
- // for the "hook only" edge case, for example Base UI autocomplete
- .slice(
- i,
- localizedDoc.rendered.length - (localizedDoc.headers.components.length > 0 ? 1 : 0),
- )
+ .slice(i)
.map((renderedMarkdownOrDemo, index) => (
({
- ...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})`,
- },
- wordBreak: 'break-word',
- '& pre': {
- lineHeight: 1.5, // Developers like when the code is dense.
- margin: theme.spacing(2, 'auto'),
- padding: theme.spacing(2),
- backgroundColor: 'hsl(210, 35%, 9%)', // a special, one-off, color tailored for the code blocks using MUI's branding theme blue palette as the starting point. It has a less saturaded color but still maintaining a bit of the blue tint.
- color: 'hsl(60, 30%, 96%)',
- colorScheme: 'dark',
- borderRadius: `var(--muidocs-shape-borderRadius, ${
- theme.shape?.borderRadius ?? lightTheme.shape.borderRadius
- }px)`,
- border: '1px solid',
- borderColor: `var(--muidocs-palette-primaryDark-700, ${lightTheme.palette.primaryDark[700]})`,
- overflow: 'auto',
- WebkitOverflowScrolling: 'touch',
- fontSize: lightTheme.typography.pxToRem(13),
- maxWidth: 'calc(100vw - 32px)',
- maxHeight: '400px',
- [lightTheme.breakpoints.up('md')]: {
- maxWidth: 'calc(100vw - 32px - 16px)',
- },
- },
- '& code': {
- ...lightTheme.typography.body2,
- fontFamily: lightTheme.typography.fontFamilyCode,
- fontWeight: 400,
- WebkitFontSmoothing: 'subpixel-antialiased',
- },
- '& pre > code': {
- // Reset for Safari
- // https://github.com/necolas/normalize.css/blob/master/normalize.css#L102
- fontSize: 'inherit',
- },
- // inline code block
- '& :not(pre) > code': {
- padding: '2px 4px',
- color: `var(--muidocs-palette-text-primary, ${lightTheme.palette.text.primary})`,
- backgroundColor: `var(--muidocs-palette-grey-50, ${lightTheme.palette.grey[50]})`,
- border: '1px solid',
- borderColor: `var(--muidocs-palette-grey-200, ${lightTheme.palette.grey[200]})`,
- borderRadius: 6,
- fontSize: lightTheme.typography.pxToRem(13),
- direction: 'ltr /*! @noflip */',
- boxDecorationBreak: 'clone',
- },
- '& h1': {
- ...lightTheme.typography.h3,
- fontSize: lightTheme.typography.pxToRem(36),
- fontFamily: `"General Sans", ${lightTheme.typography.fontFamilySystem}`,
- margin: '10px 0',
- color: `var(--muidocs-palette-primaryDark-900, ${lightTheme.palette.primaryDark[900]})`,
- fontWeight: 600,
- letterSpacing: -0.2,
- },
- '& .description': {
- ...lightTheme.typography.subtitle1,
- fontWeight: 400,
- margin: '0 0 24px',
- },
- '& .component-tabs': {
- margin: '0 0 40px',
- },
- '& h2': {
- ...lightTheme.typography.h5,
- fontFamily: `"General Sans", ${lightTheme.typography.fontFamilySystem}`,
- fontSize: theme.typography.pxToRem(26),
- fontWeight: lightTheme.typography.fontWeightSemiBold,
- color: `var(--muidocs-palette-grey-900, ${lightTheme.palette.grey[900]})`,
- margin: '40px 0 4px',
- },
- '& h3': {
- ...lightTheme.typography.h6,
- fontFamily: `"General Sans", ${lightTheme.typography.fontFamilySystem}`,
- fontSize: theme.typography.pxToRem(20),
- fontWeight: lightTheme.typography.fontWeightSemiBold,
- color: `var(--muidocs-palette-grey-900, ${lightTheme.palette.grey[900]})`,
- margin: '24px 0 4px',
- },
- '& h4': {
- ...lightTheme.typography.subtitle1,
- fontFamily: `"General Sans", ${lightTheme.typography.fontFamilySystem}`,
- fontWeight: lightTheme.typography.fontWeightSemiBold,
- color: `var(--muidocs-palette-grey-900, ${lightTheme.palette.grey[900]})`,
- margin: '20px 0 6px',
- },
- '& h5': {
- ...lightTheme.typography.subtitle2,
- fontFamily: `"General Sans", ${lightTheme.typography.fontFamilySystem}`,
- fontWeight: lightTheme.typography.fontWeightSemiBold,
- color: `var(--muidocs-palette-grey-900, ${lightTheme.palette.grey[900]})`,
- margin: '20px 0 8px',
- },
- '& p': {
- marginTop: 0,
- marginBottom: 16,
- color: `var(--muidocs-palette-grey-900, ${lightTheme.palette.grey[900]})`,
- },
- '& ul, & ol': {
- paddingLeft: 30,
- marginTop: 0,
- marginBottom: 16,
- '& ul, & ol': {
- marginBottom: 6,
- },
- },
- '& h1, & h2, & h3, & h4': {
- display: 'flex',
- alignItems: 'center',
- gap: 6,
- '& code': {
- fontSize: 'inherit',
- lineHeight: 'inherit',
- // Remove scroll on small screens.
- wordBreak: 'break-all',
- },
- '& .title-link-to-anchor': {
- color: 'inherit',
- textDecoration: 'none',
- position: 'relative',
- display: 'flex',
- alignItems: 'center',
- },
- '& .anchor-icon': {
- // To prevent the link to get the focus.
- display: 'inline-flex',
- alignItems: 'center',
- visibility: 'hidden',
- },
- '& a:not(.title-link-to-anchor):hover': {
- color: 'currentColor',
- border: 'none',
- boxShadow: '0 1px 0 0 currentColor',
- textDecoration: 'none',
- },
- '& .anchor-icon, & .comment-link': {
- padding: 0,
- cursor: 'pointer',
- alignItems: 'center',
- justifyContent: 'center',
- flexShrink: 0,
- textAlign: 'center',
- marginLeft: 8,
- height: 26,
- width: 26,
- 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})`,
- borderRadius: 8,
- '&:hover': {
- backgroundColor: alpha(lightTheme.palette.primary[100], 0.4),
- borderColor: `var(--muidocs-palette-primary-100, ${lightTheme.palette.primary[100]})`,
- color: `var(--muidocs-palette-primary-main, ${lightTheme.palette.primary.main})`,
- },
- '& svg': {
- height: 14,
- width: 14,
- fill: 'currentColor',
- pointerEvents: 'none',
- verticalAlign: 'middle',
- },
- },
- '&:hover .anchor-icon': {
- visibility: 'visible',
- },
- '& .comment-link': {
- display: 'none', // So we can have the comment button opt-in.
- marginLeft: 'auto',
- transition: theme.transitions.create('opacity', {
- duration: theme.transitions.duration.shortest,
- }),
- '& svg': {
- fill: 'currentColor',
- marginRight: 1.5,
- },
- },
- },
- '& h1 code, & h2 code, & h3 code': {
- color: `var(--muidocs-palette-grey-900, ${lightTheme.palette.grey[900]})`,
- },
- '& h1 code': {
- fontWeight: lightTheme.typography.fontWeightSemiBold,
- },
- '& h2 code': {
- fontSize: lightTheme.typography.pxToRem(24),
- fontWeight: lightTheme.typography.fontWeightSemiBold,
- },
- '& h3 code': {
- fontSize: lightTheme.typography.pxToRem(18),
- },
- '& table': {
- // Trade display table for scroll overflow
- display: 'block',
- wordBreak: 'normal',
- overflowX: 'auto',
- WebkitOverflowScrolling: 'touch',
- borderCollapse: 'collapse',
- marginBottom: '20px',
- borderSpacing: 0,
- '& .prop-name, & .prop-type, & .prop-default, & .slot-name, & .slot-defaultClass, & .slot-default':
- {
- fontWeight: 400,
- fontFamily: lightTheme.typography.fontFamilyCode,
- WebkitFontSmoothing: 'subpixel-antialiased',
- fontSize: lightTheme.typography.pxToRem(13),
- },
- '& .required': {
- color: '#006500',
- },
- '& .optional': {
- color: '#45529f',
- },
- '& .prop-type, & .slot-defaultClass': {
- color: '#932981',
- },
- '& .prop-default, & .slot-default': {
- borderBottom: `1px dotted var(--muidocs-palette-divider, ${lightTheme.palette.divider})`,
- },
- },
- '& td': {
- ...theme.typography.body2,
- borderBottom: `1px solid var(--muidocs-palette-divider, ${lightTheme.palette.divider})`,
- paddingRight: 20,
- paddingTop: 16,
- paddingBottom: 16,
- color: `var(--muidocs-palette-text-secondary, ${lightTheme.palette.text.secondary})`,
- },
- '& td code': {
- lineHeight: 1.6,
- },
- '& th': {
- fontSize: theme.typography.pxToRem(14),
- lineHeight: theme.typography.pxToRem(24),
- fontWeight: 500,
- color: `var(--muidocs-palette-text-primary, ${lightTheme.palette.text.primary})`,
- whiteSpace: 'pre',
- borderBottom: `1px solid var(--muidocs-palette-divider, ${lightTheme.palette.divider})`,
- paddingRight: 20,
- paddingTop: 12,
- paddingBottom: 12,
- },
- '& blockquote': {
- position: 'relative',
- padding: '0 16px',
- margin: 0,
- borderLeft: '1.5px solid',
- borderColor: `var(--muidocs-palette-grey-200, ${lightTheme.palette.grey[200]})`,
- '& p': {
- fontSize: theme.typography.pxToRem(12.5),
- fontFamily: lightTheme.typography.fontFamilyCode,
- fontWeight: lightTheme.typography.fontWeightMedium,
- lineHeight: theme.typography.pxToRem(24),
- textIndent: 20,
- },
- '&::before': {
- position: 'absolute',
- // eslint-disable-next-line material-ui/straight-quotes
- content: '"“"',
- color: `var(--muidocs-palette-grey-300, ${lightTheme.palette.grey[300]})`,
- fontSize: '2.5rem',
- top: 8,
- marginLeft: -6,
- lineHeight: 0.5,
- },
- },
- '& .MuiCallout-root': {
- display: 'flex',
- gap: 12,
- padding: '16px',
- margin: '16px 0',
- border: '1px solid',
- color: `var(--muidocs-palette-text-secondary, ${lightTheme.palette.text.secondary})`,
- borderColor: `var(--muidocs-palette-grey-100, ${lightTheme.palette.grey[100]})`,
- borderRadius: `var(--muidocs-shape-borderRadius, ${
- theme.shape?.borderRadius ?? lightTheme.shape.borderRadius
- }px)`,
- '& > code': {
- height: 'fit-content',
- backgroundColor: `var(--muidocs-palette-grey-100, ${lightTheme.palette.grey[100]})`,
- borderColor: `var(--muidocs-palette-grey-300, ${lightTheme.palette.grey[300]})`,
- },
- '& .MuiCallout-content': {
- minWidth: 0, // Allows content to shrink. Useful when callout contains code block
- flexGrow: 1,
- '& > p:last-child, & > ul:last-child': {
- // Avoid margin on last child
- marginBottom: 0,
- },
- '& .MuiCode-root': {
- '& > pre': {
- margin: 0,
- marginTop: 4,
- },
- },
- '& > ul': {
- // Because of the gap left by the icon, we visually need less padding
- paddingLeft: 22,
- },
- },
- '& > svg': {
- marginTop: 2,
- width: 20,
- height: 20,
- flexShrink: 0,
- },
- '& > ul, & > p': {
- '&:last-child': {
- margin: 0,
- },
- },
- '& ul, li, p': {
- color: 'inherit',
- },
- '&.MuiCallout-error': {
- color: `var(--muidocs-palette-error-900, ${lightTheme.palette.error[900]})`,
- backgroundColor: `var(--muidocs-palette-error-50, ${lightTheme.palette.error[50]})`,
- borderColor: `var(--muidocs-palette-error-100, ${lightTheme.palette.error[100]})`,
- '& strong': {
- color: `var(--muidocs-palette-error-800, ${lightTheme.palette.error[800]})`,
- },
- '& > svg': {
- fill: `var(--muidocs-palette-error-500, ${lightTheme.palette.error[600]})`,
- },
- '& a': {
- color: `var(--muidocs-palette-error-800, ${lightTheme.palette.error[800]})`,
- textDecorationColor: alpha(lightTheme.palette.error.main, 0.4),
- '&:hover': {
- textDecorationColor: 'inherit',
- },
- },
- },
- '&.MuiCallout-info': {
- color: `var(--muidocs-palette-grey-900, ${lightTheme.palette.grey[900]})`,
- backgroundColor: `var(--muidocs-palette-grey-50, ${lightTheme.palette.grey[50]})`,
- borderColor: `var(--muidocs-palette-grey-100, ${lightTheme.palette.grey[100]})`,
- '& strong': {
- color: `var(--muidocs-palette-primary-800, ${lightTheme.palette.primary[800]})`,
- },
- '& > svg': {
- fill: `var(--muidocs-palette-grey-600, ${lightTheme.palette.grey[600]})`,
- },
- },
- '&.MuiCallout-success': {
- color: `var(--muidocs-palette-success-900, ${lightTheme.palette.success[900]})`,
- backgroundColor: `var(--muidocs-palette-success-50, ${lightTheme.palette.success[50]})`,
- borderColor: `var(--muidocs-palette-success-100, ${lightTheme.palette.success[100]})`,
- '& strong': {
- color: `var(--muidocs-palette-success-900, ${lightTheme.palette.success[900]})`,
- },
- '& > svg': {
- fill: `var(--muidocs-palette-success-600, ${lightTheme.palette.success[600]})`,
- },
- '& a': {
- color: `var(--muidocs-palette-success-900, ${lightTheme.palette.success[900]})`,
- textDecorationColor: alpha(lightTheme.palette.success.main, 0.4),
- '&:hover': {
- textDecorationColor: 'inherit',
- },
- },
- },
- '&.MuiCallout-warning': {
- color: `var(--muidocs-palette-grey-900, ${lightTheme.palette.grey[900]})`,
- backgroundColor: alpha(lightTheme.palette.warning[50], 0.5),
- borderColor: alpha(lightTheme.palette.warning[700], 0.15),
- '& strong': {
- color: `var(--muidocs-palette-warning-800, ${lightTheme.palette.warning[800]})`,
- },
- '& > svg': {
- fill: `var(--muidocs-palette-warning-600, ${lightTheme.palette.warning[600]})`,
- },
- '& a': {
- color: `var(--muidocs-palette-warning-800, ${lightTheme.palette.warning[800]})`,
- textDecorationColor: alpha(lightTheme.palette.warning.main, 0.4),
- '&:hover': {
- textDecorationColor: 'inherit',
- },
- },
- },
- },
- '& a[target="_blank"]::after': {
- content: '""',
- maskImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' focusable='false' aria-hidden='true' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M6 6v2h8.59L5 17.59 6.41 19 16 9.41V18h2V6z'%3E%3C/path%3E%3C/svg%3E")`,
- display: 'inline-flex',
- width: '1em',
- height: '1em',
- color: 'inherit',
- backgroundColor: 'currentColor',
- transform: 'translate(0, 2px)',
- transition: 'transform 0.3s cubic-bezier(0.1, 0.8, 0.3, 1)', // bounce effect
- opacity: 0.8,
- },
- '& a[target="_blank"]:hover::after': {
- opacity: 1,
- transform: 'translate(1px, 0)',
- },
- '& 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:not(.title-link-to-anchor), & a:not(.title-link-to-anchor) code': {
- // Style taken from the Link component
- color: `var(--muidocs-palette-primary-600, ${lightTheme.palette.primary[600]})`,
- fontWeight: theme.typography.fontWeightMedium,
- textDecoration: 'underline',
- textDecorationColor: alpha(lightTheme.palette.primary.main, 0.4),
- '&:hover': {
- textDecorationColor: 'inherit',
- },
- },
- '& a:not(.title-link-to-anchor) code': {
- color: darken(lightTheme.palette.primary.main, 0.2),
- },
- '& img, & video': {
- // Use !important so that inline style on can't win.
- // This avoid horizontal overflows on mobile.
- maxWidth: '100% !important',
- // Avoid the image to be fixed height, so it can respect the aspect ratio.
- height: 'auto',
- },
- '& img': {
- // Avoid layout jump
- display: 'inline-block',
- // Avoid very sharp edges
- borderRadius: 2,
- },
- '& hr': {
- height: 1,
- margin: theme.spacing(5, 0),
- border: 0,
- flexShrink: 0,
- backgroundColor: `var(--muidocs-palette-divider, ${lightTheme.palette.divider})`,
- },
- '& kbd.key': {
- padding: 6,
- display: 'inline-block',
- whiteSpace: 'nowrap',
- margin: '0 1px',
- fontFamily: lightTheme.typography.fontFamilyCode,
- fontSize: lightTheme.typography.pxToRem(11),
- color: `var(--muidocs-palette-text-primary, ${lightTheme.palette.text.primary})`,
- lineHeight: '10px',
- verticalAlign: 'middle',
- borderRadius: 6,
- border: `1px solid var(--muidocs-palette-grey-300, ${lightTheme.palette.grey[300]})`,
- backgroundColor: `var(--muidocs-palette-grey-50, ${lightTheme.palette.grey[50]})`,
- 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),
- 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 */',
- position: 'relative',
- // Font size reset to fix a bug with Safari 16.0 when letterSpacing is set
- fontSize: 10,
- '&:has(.MuiCode-title)': {
- margin: theme.spacing(2, 'auto'),
- border: `1px solid var(--muidocs-palette-primaryDark-700, ${lightTheme.palette.primaryDark[700]})`,
- borderRadius: theme.shape.borderRadius,
- overflow: 'clip',
- '& .MuiCode-copy': {
- top: '56px',
- },
- },
- },
- '& .MuiCode-copy-container': {
- // This container is only used in demo and highlight code
- position: 'sticky',
- zIndex: 1,
- top: 0,
- },
- '& .MuiCode-copy': {
- display: 'inline-flex',
- flexDirection: 'row-reverse',
- alignItems: 'center',
- width: 26,
- height: 26,
- cursor: 'pointer',
- position: 'absolute',
- top: 12,
- right: 12,
- padding: theme.spacing(0.5),
- fontFamily: 'inherit',
- fontWeight: 500,
- borderRadius: 6,
- border: 'none',
- backgroundColor: 'hsl(210, 35%, 9%)', // using the code block one-off background color (defined in line 23)
- color: '#FFF',
- transition: theme.transitions.create(['background', 'borderColor', 'display'], {
- duration: theme.transitions.duration.shortest,
- }),
- '& svg': {
- userSelect: 'none',
- width: theme.typography.pxToRem(16),
- height: theme.typography.pxToRem(16),
- display: 'inline-block',
- fill: 'currentcolor',
- flexShrink: 0,
- fontSize: '18px',
- margin: 'auto',
- opacity: 0.5,
- },
- '& .MuiCode-copied-icon': {
- display: 'none',
- },
- '&:hover, &:focus': {
- backgroundColor: lightTheme.palette.primaryDark[600],
- '& svg': {
- opacity: 1,
- },
- '& .MuiCode-copyKeypress': {
- display: 'block',
- // Approximate no hover capabilities with no keyboard
- // https://github.com/w3c/csswg-drafts/issues/3871
- '@media (any-hover: none)': {
- display: 'none',
- },
- },
- },
- '& .MuiCode-copyKeypress': {
- display: 'none',
- position: 'absolute',
- right: 26,
- },
- '&[data-copied]': {
- // style of the button when it is in copied state.
- borderColor: lightTheme.palette.primary[700],
- color: '#fff',
- backgroundColor: lightTheme.palette.primaryDark[600],
- '& .MuiCode-copy-icon': {
- display: 'none',
- },
- '& .MuiCode-copied-icon': {
- display: 'block',
- },
- },
- },
- '& .MuiCode-copyKeypress': {
- pointerEvents: 'none',
- userSelect: 'none',
- marginRight: theme.spacing(1.2),
- marginBottom: theme.spacing(0.2),
- whiteSpace: 'nowrap',
- opacity: 0.6,
- },
- '& li': {
- // tight lists https://spec.commonmark.org/0.30/#tight
- marginBottom: 4,
- '& pre': {
- marginTop: theme.spacing(1),
- },
- // loose lists https://spec.commonmark.org/0.30/#loose
- '& > p': {
- marginBottom: theme.spacing(1),
- },
- },
- '& .feature-list': {
- padding: 0,
- listStyle: 'none',
- '& li': {
- marginBottom: 6,
- display: 'flex',
- alignItems: 'center',
- gap: 12,
- '::before': {
- content: `url('/static/branding/pricing/yes-light.svg')`,
- width: '18px',
- height: '18px',
- },
- },
- },
- '& .MuiCode-title': {
- padding: theme.spacing(1.5),
- display: 'flex',
- alignItems: 'center',
- gap: theme.spacing(1.5),
- borderBottom: `1px solid var(--muidocs-palette-primaryDark-700, ${lightTheme.palette.primaryDark[700]})`,
- backgroundColor: `var(--muidocs-palette-primaryDark-900, ${lightTheme.palette.primaryDark[900]})`,
- fontFamily: theme.typography.fontFamilyCode,
- fontSize: theme.typography.pxToRem(12),
- fontWeight: theme.typography.fontWeightBold,
- color: `var(--muidocs-palette-grey-200, ${lightTheme.palette.grey[200]})`,
- '::before': {
- content: `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='M13.3333 3.99996H8L7.06 3.05996C6.80667 2.80663 6.46667 2.66663 6.11334 2.66663H2.66667C1.93334 2.66663 1.34 3.26663 1.34 3.99996L1.33334 12C1.33334 12.7333 1.93334 13.3333 2.66667 13.3333H13.3333C14.0667 13.3333 14.6667 12.7333 14.6667 12V5.33329C14.6667 4.59996 14.0667 3.99996 13.3333 3.99996ZM12.6667 12H3.33334C2.96667 12 2.66667 11.7 2.66667 11.3333V5.99996C2.66667 5.63329 2.96667 5.33329 3.33334 5.33329H12.6667C13.0333 5.33329 13.3333 5.63329 13.3333 5.99996V11.3333C13.3333 11.7 13.0333 12 12.6667 12Z' fill='%2399CCF3'/%3E%3C/svg%3E%0A");`,
- width: '16px',
- height: '16px',
- },
- '& + pre': {
- margin: 0,
- border: 'none',
- borderRadius: 0,
- },
- },
- }),
- ({ theme }) => ({
- [`:where(${theme.vars ? '[data-mui-color-scheme="dark"]' : '.mode-dark'}) &`]: {
- color: 'rgb(255, 255, 255)',
- '& :not(pre) > code': {
- // inline code block
- color: `var(--muidocs-palette-text-primary, ${darkTheme.palette.text.primary})`,
- borderColor: alpha(darkTheme.palette.primaryDark[600], 0.6),
- backgroundColor: `var(--muidocs-palette-grey-900, ${darkTheme.palette.grey[900]})`,
- },
- '& strong': {
- color: `var(--muidocs-palette-grey-200, ${darkTheme.palette.grey[200]})`,
- },
- '& hr': {
- backgroundColor: `var(--muidocs-palette-divider, ${darkTheme.palette.divider})`,
- },
- '& h1, & h2, & h3, & h4, & h5': {
- color: `var(--muidocs-palette-grey-50, ${darkTheme.palette.grey[50]})`,
- },
- '& p, & ul, & ol': {
- color: `var(--muidocs-palette-grey-400, ${darkTheme.palette.grey[400]})`,
- },
- '& h1, & h2, & h3, & h4': {
- '&:hover .anchor-icon, & .comment-link': {
- color: `var(--muidocs-palette-primary-300, ${darkTheme.palette.primaryDark[300]})`,
- borderColor: `var(--muidocs-palette-divider, ${darkTheme.palette.divider})`,
- 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),
- color: `var(--muidocs-palette-primary-100, ${darkTheme.palette.primary[100]})`,
- },
- },
- },
- '& h1 code, & h2 code, & h3 code': {
- color: `var(--muidocs-palette-grey-100, ${darkTheme.palette.grey[100]})`,
- },
- '& table': {
- '& .required': {
- color: '#a5ffa5',
- },
- '& .optional': {
- color: '#a5b3ff',
- },
- '& .prop-type, & .slot-defaultClass': {
- color: '#ffb6ec',
- },
- '& .prop-default, & .slot-default': {
- borderColor: `var(--muidocs-palette-divider, ${darkTheme.palette.divider})`,
- },
- },
- '& td': {
- color: `var(--muidocs-palette-text-secondary, ${darkTheme.palette.text.secondary})`,
- borderColor: `var(--muidocs-palette-divider, ${darkTheme.palette.divider})`,
- },
- '& th': {
- color: `var(--muidocs-palette-text-primary, ${darkTheme.palette.text.primary})`,
- borderColor: `var(--muidocs-palette-divider, ${darkTheme.palette.divider})`,
- },
- '& blockquote': {
- borderColor: `var(--muidocs-palette-primaryDark-700, ${darkTheme.palette.primaryDark[700]})`,
- '&::before': {
- color: `var(--muidocs-palette-primaryDark-500, ${darkTheme.palette.primaryDark[500]})`,
- },
- },
- '& .MuiCallout-root': {
- borderColor: `var(--muidocs-palette-primaryDark-700, ${darkTheme.palette.primaryDark[700]})`,
- '& > code': {
- height: 'fit-content',
- 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.15),
- borderColor: alpha(darkTheme.palette.error[400], 0.1),
- '& strong': {
- color: `var(--muidocs-palette-error-300, ${darkTheme.palette.error[300]})`,
- },
- '& > svg': {
- fill: `var(--muidocs-palette-error-500, ${darkTheme.palette.error[500]})`,
- },
- '& a': {
- color: `var(--muidocs-palette-error-200, ${darkTheme.palette.error[200]})`,
- },
- },
- '&.MuiCallout-info': {
- color: `var(--muidocs-palette-grey-50, ${darkTheme.palette.grey[50]})`,
- backgroundColor: alpha(darkTheme.palette.grey[700], 0.15),
- borderColor: alpha(darkTheme.palette.grey[800], 0.5),
- '& strong': {
- color: `var(--muidocs-palette-primary-200, ${darkTheme.palette.primary[200]})`,
- },
- '& > svg': {
- fill: `var(--muidocs-palette-grey-400, ${darkTheme.palette.grey[400]})`,
- },
- },
- '&.MuiCallout-success': {
- color: `var(--muidocs-palette-success-50, ${darkTheme.palette.success[50]})`,
- backgroundColor: alpha(darkTheme.palette.success[700], 0.12),
- borderColor: alpha(lightTheme.palette.success[400], 0.1),
- '& strong': {
- color: `var(--muidocs-palette-success-200, ${darkTheme.palette.success[200]})`,
- },
- '& > svg': {
- fill: `var(--muidocs-palette-success-500, ${darkTheme.palette.success[500]})`,
- },
- '& a': {
- color: `var(--muidocs-palette-success-100, ${darkTheme.palette.success[100]})`,
- },
- },
- '&.MuiCallout-warning': {
- color: `var(--muidocs-palette-warning-50, ${darkTheme.palette.warning[50]})`,
- backgroundColor: alpha(darkTheme.palette.warning[700], 0.12),
- borderColor: alpha(darkTheme.palette.warning[400], 0.1),
- '& strong': {
- color: `var(--muidocs-palette-warning-200, ${darkTheme.palette.warning[200]})`,
- },
- '& > svg': {
- fill: `var(--muidocs-palette-warning-400, ${darkTheme.palette.warning[400]})`,
- },
- '& a': {
- color: `var(--muidocs-palette-warning-100, ${darkTheme.palette.warning[100]})`,
- },
- },
- },
- '& a:not(.title-link-to-anchor), & a:not(.title-link-to-anchor) code': {
- color: `var(--muidocs-palette-primary-300, ${darkTheme.palette.primary[300]})`,
- },
- '& a:not(.title-link-to-anchor) code': {
- color: `var(--muidocs-palette-primary-light, ${darkTheme.palette.primary.light})`,
- },
- '& kbd.key': {
- color: `var(--muidocs-palette-text-primary, ${darkTheme.palette.text.primary})`,
- backgroundColor: `var(--muidocs-palette-primaryDark-800, ${darkTheme.palette.primaryDark[800]})`,
- 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]})`,
- },
- },
- '& .feature-list': {
- '& li': {
- '::before': {
- content: `url('/static/branding/pricing/yes-dark.svg')`,
- },
- },
- },
- },
- }),
-);
-
-const MarkdownElement = React.forwardRef(function MarkdownElement(props, ref) {
- const { className, renderedMarkdown, ...other } = props;
- const more = {};
-
- if (typeof renderedMarkdown === 'string') {
- // workaround for https://github.com/facebook/react/issues/17170
- // otherwise we could just set `dangerouslySetInnerHTML={undefined}`
- more.dangerouslySetInnerHTML = { __html: renderedMarkdown };
- }
-
- return
- {layouts(t).map((layout) => (
+ {layouts(translatation, theme).map((layout) => (
[el, index]);
- stabilizedThis.sort((a, b) => {
- const order = cmp(a[0], b[0]);
- if (order !== 0) {
- return order;
- }
- return a[1] - b[1];
- });
- return stabilizedThis.map((el) => el[0]);
-}
-
// Returns a function that sorts reverse numerically by value of `key`
function sortFactory(key) {
return function sortNumeric(a, b) {
@@ -498,96 +486,100 @@ export default function Showcase() {
- {stableSort(
- appList.filter((item) => item[sortFunctionName] !== undefined),
- sortFunction,
- ).map((app) => (
-
- {app.image ? (
- ({
- height: '100%',
- display: 'flex',
- flexDirection: 'column',
- p: 2,
- gap: 2,
- borderRadius: 1,
- backgroundColor: `${alpha(theme.palette.grey[50], 0.3)}`,
- borderColor: 'divider',
- ...theme.applyDarkStyles({
- backgroundColor: `${alpha(theme.palette.primaryDark[700], 0.2)}`,
+ {appList
+ .filter((item) => item[sortFunctionName] !== undefined)
+ .sort(sortFunction)
+ .map((app) => (
+
+ {app.image ? (
+ ({
+ height: '100%',
+ display: 'flex',
+ flexDirection: 'column',
+ p: 2,
+ gap: 2,
+ borderRadius: 1,
+ backgroundColor: `${alpha(theme.palette.grey[50], 0.3)}`,
borderColor: 'divider',
- }),
- })}
- >
-
- ({
- height: 'auto',
- borderRadius: '6px',
- bgcolor: 'currentColor',
- border: '1px solid',
+ ...theme.applyDarkStyles({
+ backgroundColor: `${alpha(theme.palette.primaryDark[700], 0.2)}`,
borderColor: 'divider',
- color: 'grey.100',
- ...theme.applyDarkStyles({
- color: 'primaryDark.900',
- }),
- })}
- />
-
-
-
- {app.title}
- {app.source ? (
-
-
- ) : null}
-
-
- {app.description}
-
-
-
-
-
- ) : (
-
- ))}
+ }),
+ })}
+ >
+
+ ({
+ height: 'auto',
+ borderRadius: '6px',
+ bgcolor: 'currentColor',
+ border: '1px solid',
+ borderColor: 'divider',
+ color: 'grey.100',
+ ...theme.applyDarkStyles({
+ color: 'primaryDark.900',
+ }),
+ })}
+ />
+
+
+
+ {app.title}
+ {app.source ? (
+
+
+ ) : null}
+
+
+ {app.description}
+
+
+
+
+
+ ) : (
+
+ ))}
);
diff --git a/docs/src/modules/components/RichMarkdownElement.js b/docs/src/modules/components/RichMarkdownElement.js
index 449b1df5adb6a9..b41bf70bcdd5de 100644
--- a/docs/src/modules/components/RichMarkdownElement.js
+++ b/docs/src/modules/components/RichMarkdownElement.js
@@ -113,7 +113,9 @@ export default function RichMarkdownElement(props) {
tailwindJsxPreview: demo.tailwindJsxPreview,
cssJsxPreview: demo.cssJsxPreview,
rawTS: demo.rawTS,
- tsx: demoComponents[demo.moduleTS] ?? null,
+ module: demo.module,
+ moduleTS: demo.moduleTS,
+ tsx: demoComponents[demo.moduleTS] ?? noComponent(demo.moduleTS),
rawTailwind: demo.rawTailwind,
rawTailwindTS: demo.rawTailwindTS,
jsTailwind: demoComponents[demo.moduleTailwind] ?? null,
@@ -123,6 +125,7 @@ export default function RichMarkdownElement(props) {
jsCSS: demoComponents[demo.moduleCSS] ?? null,
tsxCSS: demoComponents[demo.moduleTSCSS] ?? null,
gaLabel: fileNameWithLocation.replace(/^\/docs\/data\//, ''),
+ relativeModules: demo.relativeModules,
}}
disableAd={disableAd}
demoOptions={renderedMarkdownOrDemo}
diff --git a/docs/src/modules/utils/CodeCopy.tsx b/docs/src/modules/utils/CodeCopy.tsx
index 68bd9de869c65a..a5f38002898f65 100644
--- a/docs/src/modules/utils/CodeCopy.tsx
+++ b/docs/src/modules/utils/CodeCopy.tsx
@@ -1,199 +1,4 @@
-import * as React from 'react';
-import copy from 'clipboard-copy';
-import { useRouter } from 'next/router';
+// Backwards compatibility for Toolpad and X.
+// TODO: remove when Toolpad and X migrated to `@mui/docs/CodeCopy`
-const CodeBlockContext = React.createContext>({
- current: null,
-});
-
-/**
- * How to use: spread the handlers to the .MuiCode-root
- *
- * The html structure should be:
- *
- */
-export function useCodeCopy(): any {
- const rootNode = React.useContext(CodeBlockContext);
- return {
- onMouseEnter: (event: React.MouseEvent) => {
- rootNode.current = event.currentTarget as HTMLDivElement;
- },
- onMouseLeave: (event: React.MouseEvent) => {
- if (rootNode.current === event.currentTarget) {
- (rootNode.current.querySelector('.MuiCode-copy') as null | HTMLButtonElement)?.blur();
- rootNode.current = null;
- }
- },
- onFocus: (event: React.MouseEvent) => {
- rootNode.current = event.currentTarget as HTMLDivElement;
- },
- onBlur: (event: React.FocusEvent) => {
- if (rootNode.current === event.currentTarget) {
- rootNode.current = null;
- }
- },
- };
-}
-
-function InitCodeCopy() {
- const rootNode = React.useContext(CodeBlockContext);
- const router = useRouter();
- React.useEffect(() => {
- let key = 'Ctrl + ';
- if (typeof window !== 'undefined') {
- const macOS = window.navigator.platform.toUpperCase().indexOf('MAC') >= 0;
- if (macOS) {
- key = '⌘';
- }
- }
- const codeRoots = document.getElementsByClassName(
- 'MuiCode-root',
- ) as HTMLCollectionOf;
-
- if (codeRoots !== null) {
- const listeners: Array<() => void> = [];
- Array.from(codeRoots).forEach((elm) => {
- const handleMouseEnter = () => {
- rootNode.current = elm;
- };
-
- elm.addEventListener('mouseenter', handleMouseEnter);
- listeners.push(() => elm.removeEventListener('mouseenter', handleMouseEnter));
-
- const handleMouseLeave = () => {
- if (rootNode.current === elm) {
- (rootNode.current.querySelector('.MuiCode-copy') as null | HTMLButtonElement)?.blur();
- rootNode.current = null;
- }
- };
- elm.addEventListener('mouseleave', handleMouseLeave);
- listeners.push(() => elm.removeEventListener('mouseleave', handleMouseLeave));
-
- const handleFocusin = () => {
- // use `focusin` because it bubbles from the copy button
- rootNode.current = elm;
- };
- elm.addEventListener('focusin', handleFocusin);
- listeners.push(() => elm.removeEventListener('focusin', handleFocusin));
-
- const handleFocusout = () => {
- // use `focusout` because it bubbles from the copy button
- if (rootNode.current === elm) {
- rootNode.current = null;
- }
- };
- elm.addEventListener('focusout', handleFocusout);
- listeners.push(() => elm.removeEventListener('focusout', handleFocusout));
-
- async function handleClick(event: MouseEvent) {
- const trigger = event.currentTarget as HTMLButtonElement;
- const pre = (event.currentTarget as Element)?.previousElementSibling as Element;
- const textNode = trigger.childNodes[0];
- textNode.nodeValue = textNode.textContent?.replace('Copy', 'Copied') || null;
- trigger.dataset.copied = 'true';
- setTimeout(() => {
- if (trigger) {
- textNode.nodeValue = textNode.textContent?.replace('Copied', 'Copy') || null;
- delete trigger.dataset.copied;
- }
- }, 2000);
- try {
- if (pre.textContent) {
- await copy(pre.textContent);
- }
- // eslint-disable-next-line no-empty
- } catch (error) {}
- }
-
- const btn = elm.querySelector('.MuiCode-copy') as HTMLButtonElement | null;
- if (btn) {
- const keyNode = btn.querySelector('.MuiCode-copyKeypress')?.childNodes[1];
- if (!keyNode) {
- // skip the logic if the btn is not generated from the markdown.
- return;
- }
- keyNode.textContent = keyNode?.textContent?.replace('$key', key) || null;
- btn.addEventListener('click', handleClick);
- listeners.push(() => btn.removeEventListener('click', handleClick));
- }
- });
-
- return () => {
- listeners.forEach((removeEventListener) => {
- removeEventListener();
- });
- };
- }
-
- return undefined;
- }, [rootNode, router.pathname]);
- return null;
-}
-
-function hasNativeSelection(element: HTMLTextAreaElement) {
- if (window.getSelection()?.toString()) {
- return true;
- }
-
- // window.getSelection() returns an empty string in Firefox for selections inside a form element.
- // See: https://bugzilla.mozilla.org/show_bug.cgi?id=85686.
- // Instead, we can use element.selectionStart that is only defined on form elements.
- if (element && (element.selectionEnd || 0) - (element.selectionStart || 0) > 0) {
- return true;
- }
-
- return false;
-}
-
-interface CodeCopyProviderProps {
- children: React.ReactNode;
-}
-
-/**
- * Place at the page level. It will check the keydown event and try to initiate copy click if rootNode exist.
- * Any code block inside the tree can set the rootNode when mouse enter to leverage keyboard copy.
- */
-export function CodeCopyProvider({ children }: CodeCopyProviderProps) {
- const rootNode = React.useRef(null);
- React.useEffect(() => {
- document.addEventListener('keydown', (event) => {
- if (!rootNode.current) {
- return;
- }
-
- // Skip if user is highlighting a text.
- if (hasNativeSelection(event.target as HTMLTextAreaElement)) {
- return;
- }
-
- // Skip if it's not a copy keyboard event
- if (
- !(
- (event.ctrlKey || event.metaKey) &&
- event.key.toLowerCase() === 'c' &&
- !event.shiftKey &&
- !event.altKey
- )
- ) {
- return;
- }
-
- const copyBtn = rootNode.current.querySelector('.MuiCode-copy') as HTMLButtonElement;
- const initialEventAction = copyBtn.getAttribute('data-ga-event-action');
- // update the 'data-ga-event-action' on the button to track keyboard interaction
- copyBtn.dataset.gaEventAction =
- initialEventAction?.replace('click', 'keyboard') || 'copy-keyboard';
- copyBtn.click(); // let the GA setup in GoogleAnalytics.js do the job
- copyBtn.dataset.gaEventAction = initialEventAction!; // reset the 'data-ga-event-action' back to initial
- });
- }, []);
- return (
-
-
- );
-}
+export * from '@mui/docs/CodeCopy';
diff --git a/docs/src/modules/utils/useClipboardCopy.ts b/docs/src/modules/utils/useClipboardCopy.ts
index dd0b3b618b8e3e..817efb527c4c30 100644
--- a/docs/src/modules/utils/useClipboardCopy.ts
+++ b/docs/src/modules/utils/useClipboardCopy.ts
@@ -1,32 +1,5 @@
-import * as React from 'react';
-import clipboardCopy from 'clipboard-copy';
+// Backwards compatibility for Toolpad and X.
+// TODO: remove when Toolpad and X migrated to `@mui/docs/CodeCopy`
+import { useClipboardCopy } from '@mui/docs/CodeCopy';
-export default function useClipboardCopy() {
- const [isCopied, setIsCopied] = React.useState(false);
- const timeout = React.useRef>();
- const mounted = React.useRef(false);
-
- React.useEffect(() => {
- mounted.current = true;
- return () => {
- mounted.current = false;
- };
- }, []);
-
- const copy = async (text: string) => {
- try {
- setIsCopied(true);
- clearTimeout(timeout.current);
- timeout.current = setTimeout(() => {
- if (mounted) {
- setIsCopied(false);
- }
- }, 1200);
- await clipboardCopy(text);
- } catch (error) {
- // ignore error
- }
- };
-
- return { copy, isCopied };
-}
+export default useClipboardCopy;
diff --git a/netlify/edge-functions/og-image.tsx b/netlify/edge-functions/og-image.tsx
index 43c6eab58a42e7..d1c4a05a055d30 100644
--- a/netlify/edge-functions/og-image.tsx
+++ b/netlify/edge-functions/og-image.tsx
@@ -78,6 +78,7 @@ export default async function handler(req: Request) {
fontSize: '24px',
fontWeight: 600,
lineHeight: '40px',
+ letterSpacing: 1,
color: '#007FFF',
}}
>
@@ -101,8 +102,8 @@ export default async function handler(req: Request) {
fontFamily: 'General Sans',
fontStyle: 'normal',
fontWeight: 600,
- fontSize: '48px',
- lineHeight: '57px',
+ fontSize: '56px',
+ lineHeight: '72px',
color: '#0B0D0E',
}}
>
@@ -130,10 +131,10 @@ export default async function handler(req: Request) {
style={{
fontFamily: 'IBM Plex Sans',
fontSize: '28px',
- fontWeight: 600,
- color: '#303740',
+ fontWeight: 500,
+ color: '#000',
lineHeight: '50px',
- marginTop: 12,
+ marginTop: 8,
marginBottom: 0,
marginLeft: 0,
marginRight: 0,
@@ -163,25 +164,25 @@ export default async function handler(req: Request) {
display: 'flex',
flexDirection: 'row',
flexWrap: 'wrap',
- marginBottom: 20,
marginRight: 40,
}}
>
@@ -196,13 +197,12 @@ export default async function handler(req: Request) {
style={{
fontFamily: 'IBM Plex Sans',
fontSize: '26px',
- fontWeight: '600',
lineHeight: '40px',
textAlign: 'left',
color: '#101418',
}}
>
- {name}
+ {name}
a.arrayBuffer(),
),
- weight: 600,
+ weight: 500,
style: 'normal',
},
{
diff --git a/package.json b/package.json
index 64b729f294cc42..cd4682f5879fcf 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "@mui/monorepo",
- "version": "6.0.0-alpha.2",
+ "version": "6.0.0-alpha.3",
"private": true,
"scripts": {
"preinstall": "npx only-allow pnpm",
@@ -98,7 +98,6 @@
"@babel/plugin-proposal-object-rest-spread": "^7.20.7",
"@babel/plugin-proposal-private-methods": "^7.18.6",
"@babel/plugin-proposal-private-property-in-object": "^7.21.11",
- "@babel/plugin-transform-object-assign": "^7.24.1",
"@babel/plugin-transform-react-constant-elements": "^7.24.1",
"@babel/plugin-transform-runtime": "^7.24.3",
"@babel/preset-env": "^7.24.4",
diff --git a/packages-internal/docs-utils/package.json b/packages-internal/docs-utils/package.json
index ad899d5b59ee0d..a5ab0c508a862d 100644
--- a/packages-internal/docs-utils/package.json
+++ b/packages-internal/docs-utils/package.json
@@ -1,6 +1,6 @@
{
"name": "@mui/internal-docs-utils",
- "version": "1.0.5",
+ "version": "1.0.6",
"author": "MUI Team",
"description": "Utilities for MUI docs. This is an internal package not meant for general use.",
"main": "./build/index.js",
diff --git a/packages-internal/scripts/package.json b/packages-internal/scripts/package.json
index 76070d91afba5d..f8459dc41fc169 100644
--- a/packages-internal/scripts/package.json
+++ b/packages-internal/scripts/package.json
@@ -1,6 +1,6 @@
{
"name": "@mui/internal-scripts",
- "version": "1.0.5",
+ "version": "1.0.6",
"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",
diff --git a/packages/markdown/loader.js b/packages/markdown/loader.js
index 2c70b31176dabc..e9bacef953147d 100644
--- a/packages/markdown/loader.js
+++ b/packages/markdown/loader.js
@@ -1,4 +1,4 @@
-const { promises: fs, readdirSync } = require('fs');
+const { promises: fs, readdirSync, statSync } = require('fs');
const path = require('path');
const prepareMarkdown = require('./prepareMarkdown');
const extractImports = require('./extractImports');
@@ -127,6 +127,7 @@ module.exports = async function demoLoader() {
const demoModuleIDs = new Set();
const componentModuleIDs = new Set();
const nonEditableDemos = new Set();
+ const relativeModules = new Map();
const demoNames = Array.from(
new Set(
docs.en.rendered
@@ -142,6 +143,63 @@ module.exports = async function demoLoader() {
),
);
+ /**
+ * @param {*} demoName
+ * @param {*} moduleFilepath
+ * @param {*} variant
+ * @param {*} importModuleID
+ * @example detectRelativeImports('ComboBox.js', '', JS', './top100Films') => relativeModules.set('ComboBox.js', new Map([['./top100Films.js', ['JS']]]))
+ */
+ function detectRelativeImports(demoName, moduleFilepath, variant, importModuleID) {
+ if (importModuleID.startsWith('.')) {
+ let relativeModuleFilename = importModuleID;
+ const demoMap = relativeModules.get(demoName);
+ // If the moduleID does not end with an extension, or ends with an unsupported extension (e.g. ".styling") we need to resolve it
+ // Fastest way to get a file extension, see: https://stackoverflow.com/a/12900504/
+ const importType = importModuleID.slice(
+ (Math.max(0, importModuleID.lastIndexOf('.')) || Infinity) + 1,
+ );
+ const supportedTypes = ['js', 'jsx', 'ts', 'tsx', 'css', 'json'];
+ if (!importType || !supportedTypes.includes(importType)) {
+ // If the demo is a JS demo, we can assume that the relative import is either
+ // a `.js` or a `.jsx` file, with `.js` taking precedence over `.jsx`
+ // likewise for TS demos, with `.ts` taking precedence over `.tsx`
+ const extensions =
+ variant === 'JS' ? ['.js', '.jsx', '.ts', '.tsx'] : ['.ts', '.tsx', '.js', '.jsx'];
+ const extension = extensions.find((ext) => {
+ try {
+ return statSync(path.join(moduleFilepath, '..', `${importModuleID}${ext}`));
+ } catch (error) {
+ // If the file does not exist, we return false and continue to the next extension
+ return false;
+ }
+ });
+ if (!extension) {
+ throw new Error(
+ [
+ `You are trying to import a module "${importModuleID}" in the demo "${demoName}" that could not be resolved.`,
+ `Please make sure that one of the following file exists:`,
+ ...extensions.map((ext) => `- ${importModuleID}${ext}`),
+ ].join('\n'),
+ );
+ } else {
+ relativeModuleFilename = `${importModuleID}${extension}`;
+ }
+ }
+
+ if (!demoMap) {
+ relativeModules.set(demoName, new Map([[relativeModuleFilename, [variant]]]));
+ } else {
+ const variantArray = demoMap.get(relativeModuleFilename);
+ if (variantArray) {
+ variantArray.push(variant);
+ } else {
+ demoMap.set(relativeModuleFilename, [variant]);
+ }
+ }
+ }
+ }
+
await Promise.all(
demoNames.map(async (demoName) => {
const multipleDemoVersionsUsed = !demoName.endsWith('.js');
@@ -168,11 +226,14 @@ module.exports = async function demoLoader() {
raw: await fs.readFile(moduleFilepath, { encoding: 'utf8' }),
};
demoModuleIDs.add(moduleID);
+
// Skip non-editable demos
if (!nonEditableDemos.has(demoName)) {
- extractImports(demos[demoName].raw).forEach((importModuleID) =>
- importedModuleIDs.add(importModuleID),
- );
+ extractImports(demos[demoName].raw).forEach((importModuleID) => {
+ // detect relative import
+ detectRelativeImports(demoName, moduleFilepath, 'JS', importModuleID);
+ importedModuleIDs.add(importModuleID);
+ });
}
if (multipleDemoVersionsUsed) {
@@ -343,10 +404,69 @@ module.exports = async function demoLoader() {
// But this leads to building both demo version i.e. more build time.
demos[demoName].moduleTS = this.mode === 'production' ? moduleID : moduleTS;
demos[demoName].rawTS = rawTS;
+
+ // Extract relative imports from the TypeScript version
+ // of demos which have relative imports in the JS version
+ if (relativeModules.has(demoName)) {
+ extractImports(demos[demoName].rawTS).forEach((importModuleID) => {
+ detectRelativeImports(demoName, moduleTSFilepath, 'TS', importModuleID);
+ importedModuleIDs.add(importModuleID);
+ });
+ }
+
demoModuleIDs.add(demos[demoName].moduleTS);
} catch (error) {
// TS version of the demo doesn't exist. This is fine.
}
+
+ /* Map over relative import module IDs and resolve them
+ * while grouping by demo variant
+ * From:
+ * relativeModules: { 'ComboBox.js' =>
+ * { './top100Films.js' => ['JS', 'TS'] }
+ * }
+ * To:
+ * demos["ComboBox.js"].relativeModules = {
+ * JS: [{ module: './top100Films.js', raw: '...' }],
+ * TS: [{ module: './top100Films.js', raw: '...' }]
+ * }
+ * }
+ */
+
+ if (relativeModules.has(demoName)) {
+ if (!demos[demoName].relativeModules) {
+ demos[demoName].relativeModules = {};
+ }
+
+ await Promise.all(
+ Array.from(relativeModules.get(demoName)).map(async ([relativeModuleID, variants]) => {
+ let raw = '';
+ try {
+ raw = await fs.readFile(path.join(path.dirname(moduleFilepath), relativeModuleID), {
+ encoding: 'utf8',
+ });
+ } catch {
+ throw new Error(
+ `Could not find a module for the relative import "${relativeModuleID}" in the demo "${demoName}"`,
+ );
+ }
+
+ const moduleData = { module: relativeModuleID, raw };
+ const modules = demos[demoName].relativeModules;
+
+ variants.forEach((variant) => {
+ if (modules[variant]) {
+ // Avoid duplicates
+ if (!modules[variant].some((elem) => elem.module === relativeModuleID)) {
+ modules[variant].push(moduleData);
+ }
+ } else {
+ modules[variant] = [moduleData];
+ }
+ });
+ }),
+ );
+ }
}),
);
diff --git a/packages/markdown/package.json b/packages/markdown/package.json
index 9d6cef39b4b224..a26692062dc126 100644
--- a/packages/markdown/package.json
+++ b/packages/markdown/package.json
@@ -1,6 +1,6 @@
{
"name": "@mui/internal-markdown",
- "version": "1.0.2",
+ "version": "1.0.3",
"author": "MUI Team",
"description": "MUI markdown parser. This is an internal package not meant for general use.",
"main": "./index.js",
diff --git a/packages/markdown/prepareMarkdown.js b/packages/markdown/prepareMarkdown.js
index caaa61d0fbbd97..878bdea7e768db 100644
--- a/packages/markdown/prepareMarkdown.js
+++ b/packages/markdown/prepareMarkdown.js
@@ -110,7 +110,7 @@ This unstyled version of the component is the ideal choice for heavy customizati
`);
}
- if (headers.components.length > 0) {
+ if (headers.components.length > 0 && headers.productId !== 'base-ui') {
contents.push(`
## API
diff --git a/packages/mui-babel-macros/MuiError.macro.d.ts b/packages/mui-babel-macros/MuiError.macro.d.ts
index 53d894b2241058..54293408e59b1a 100644
--- a/packages/mui-babel-macros/MuiError.macro.d.ts
+++ b/packages/mui-babel-macros/MuiError.macro.d.ts
@@ -1,3 +1,3 @@
export default class MuiError {
- constructor(message: string);
+ constructor(message: string, ...args: string[]);
}
diff --git a/packages/mui-babel-macros/package.json b/packages/mui-babel-macros/package.json
index 2cc41924b72c25..56390a6c12784c 100644
--- a/packages/mui-babel-macros/package.json
+++ b/packages/mui-babel-macros/package.json
@@ -1,6 +1,6 @@
{
"name": "@mui/internal-babel-macros",
- "version": "1.0.2",
+ "version": "1.0.3",
"author": "MUI Team",
"description": "MUI Babel macros. This is an internal package not meant for general use.",
"main": "./MuiError.macro.js",
diff --git a/packages/mui-base/package.json b/packages/mui-base/package.json
index 08c4b94bcca7f6..a103c186421a98 100644
--- a/packages/mui-base/package.json
+++ b/packages/mui-base/package.json
@@ -27,8 +27,7 @@
"url": "https://opencollective.com/mui-org"
},
"scripts": {
- "build": "pnpm build:legacy && pnpm build:modern && pnpm build:node && pnpm build:stable && pnpm build:types && pnpm build:copy-files",
- "build:legacy": "node ../../scripts/build.mjs legacy",
+ "build": "pnpm build:modern && pnpm build:node && pnpm build:stable && pnpm build:types && pnpm build:copy-files",
"build:modern": "node ../../scripts/build.mjs modern",
"build:node": "node ../../scripts/build.mjs node",
"build:stable": "node ../../scripts/build.mjs stable",
diff --git a/packages/mui-base/src/useAutocomplete/useAutocomplete.js b/packages/mui-base/src/useAutocomplete/useAutocomplete.js
index 344b2cce0efe0f..45caa7dd2123dc 100644
--- a/packages/mui-base/src/useAutocomplete/useAutocomplete.js
+++ b/packages/mui-base/src/useAutocomplete/useAutocomplete.js
@@ -10,11 +10,8 @@ import {
} from '@mui/utils';
// https://stackoverflow.com/questions/990904/remove-accents-diacritics-in-a-string-in-javascript
-// Give up on IE11 support for this feature
function stripDiacritics(string) {
- return typeof string.normalize !== 'undefined'
- ? string.normalize('NFD').replace(/[\u0300-\u036f]/g, '')
- : string;
+ return string.normalize('NFD').replace(/[\u0300-\u036f]/g, '');
}
export function createFilterOptions(config = {}) {
@@ -56,17 +53,6 @@ export function createFilterOptions(config = {}) {
};
}
-// To replace with .findIndex() once we stop IE11 support.
-function findIndex(array, comp) {
- for (let i = 0; i < array.length; i += 1) {
- if (comp(array[i])) {
- return i;
- }
- }
-
- return -1;
-}
-
const defaultFilterOptions = createFilterOptions();
// Number of options to jump in list box when `Page Up` and `Page Down` keys are used.
@@ -498,7 +484,7 @@ export function useAutocomplete(props) {
const previousHighlightedOption = previousProps.filteredOptions[highlightedIndexRef.current];
if (previousHighlightedOption) {
- return findIndex(filteredOptions, (option) => {
+ return filteredOptions.findIndex((option) => {
return getOptionLabel(option) === getOptionLabel(previousHighlightedOption);
});
}
@@ -539,12 +525,12 @@ export function useAutocomplete(props) {
if (
multiple &&
currentOption &&
- findIndex(value, (val) => isOptionEqualToValue(currentOption, val)) !== -1
+ value.findIndex((val) => isOptionEqualToValue(currentOption, val)) !== -1
) {
return;
}
- const itemIndex = findIndex(filteredOptions, (optionItem) =>
+ const itemIndex = filteredOptions.findIndex((optionItem) =>
isOptionEqualToValue(optionItem, valueItem),
);
if (itemIndex === -1) {
@@ -685,7 +671,7 @@ export function useAutocomplete(props) {
}
}
- const itemIndex = findIndex(newValue, (valueItem) => isOptionEqualToValue(option, valueItem));
+ const itemIndex = newValue.findIndex((valueItem) => isOptionEqualToValue(option, valueItem));
if (itemIndex === -1) {
newValue.push(option);
diff --git a/packages/mui-base/src/useSnackbar/useSnackbar.ts b/packages/mui-base/src/useSnackbar/useSnackbar.ts
index d2d73cf641af1f..4b9de6ad0754bb 100644
--- a/packages/mui-base/src/useSnackbar/useSnackbar.ts
+++ b/packages/mui-base/src/useSnackbar/useSnackbar.ts
@@ -44,8 +44,7 @@ export function useSnackbar(parameters: UseSnackbarParameters = {}): UseSnackbar
*/
function handleKeyDown(nativeEvent: KeyboardEvent) {
if (!nativeEvent.defaultPrevented) {
- // IE11, Edge (prior to using Blink?) use 'Esc'
- if (nativeEvent.key === 'Escape' || nativeEvent.key === 'Esc') {
+ if (nativeEvent.key === 'Escape') {
// not calling `preventDefault` since we don't know if people may ignore this event e.g. a permanently open snackbar
onClose?.(nativeEvent, 'escapeKeyDown');
}
diff --git a/packages/mui-codemod/README.md b/packages/mui-codemod/README.md
index ac15226a678a07..adcbb49a7f85bc 100644
--- a/packages/mui-codemod/README.md
+++ b/packages/mui-codemod/README.md
@@ -1054,6 +1054,76 @@ npx @mui/codemod@next deprecations/step-connector-classes
### v6.0.0
+#### `styled-v6`
+
+Updates the usage of `styled` from `@mui/system@v5` to be compatible with `@pigment-css/react`.
+
+This codemod transforms the styles based on props to `variants` by looking for `styled` calls:
+
+```diff
+ styled('div')(({ theme, disabled }) => ({
+ color: theme.palette.primary.main,
+- ...(disabled && {
+- opacity: 0.5,
+- }),
++ variants: [
++ {
++ prop: 'disabled',
++ style: {
++ opacity: 0.5,
++ },
++ },
++ ],
+ }));
+```
+
+This codemod can handle complex styles with spread operators, ternary operators, and nested objects.
+
+However, it has some **limitations**:
+
+- It does not transform dynamic values as shown below:
+
+ ```js
+ const ResizableContainer = styled('div')(({ ownerState, theme }) => ({
+ width: ownerState.width ?? '100%',
+ height: ownerState.height ?? '100%',
+ }));
+ ```
+
+ You need to manually declare a CSS variable and set the values using inline styles:
+
+ ```js
+ // ✅ Recommended way
+ const ResizableContainer = styled('div')({
+ width: 'var(--ResizableContainer-width, 100%)',
+ height: 'var(--ResizableContainer-height, 100%)',
+ });
+ ```
+
+- It does not transform dynamic reference from the theme, for example color palette.
+
+ ```js
+ const Test = styled('div')(({ ownerState, theme }) => ({
+ backgroundColor: (theme.vars || theme).palette[ownerState.color]?.main,
+ }));
+ ```
+
+ You need to manually iterate the theme object and create `variants` for each color.
+
+ ```js
+ // ✅ Recommended way
+ const Test = styled('div')(({ theme }) => ({
+ variants: Object.entries(theme.palette)
+ .filter(([color, value]) => value.main)
+ .map(([color, value]) => ({
+ props: { color },
+ style: {
+ backgroundColor: value.main,
+ },
+ })),
+ }));
+ ```
+
### v5.0.0
#### `base-use-named-exports`
diff --git a/packages/mui-codemod/package.json b/packages/mui-codemod/package.json
index da49eb953ddce7..daee2b438602b3 100644
--- a/packages/mui-codemod/package.json
+++ b/packages/mui-codemod/package.json
@@ -1,6 +1,6 @@
{
"name": "@mui/codemod",
- "version": "6.0.0-alpha.1",
+ "version": "6.0.0-alpha.3",
"bin": "./codemod.js",
"private": false,
"author": "MUI Team",
diff --git a/packages/mui-codemod/src/v6.0.0/styled/index.js b/packages/mui-codemod/src/v6.0.0/styled/index.js
new file mode 100644
index 00000000000000..b848cbfe4e9d99
--- /dev/null
+++ b/packages/mui-codemod/src/v6.0.0/styled/index.js
@@ -0,0 +1 @@
+export { default } from './styled-v6';
diff --git a/packages/mui-codemod/src/v6.0.0/styled/styled-v6.js b/packages/mui-codemod/src/v6.0.0/styled/styled-v6.js
new file mode 100644
index 00000000000000..4bef0e598b7eed
--- /dev/null
+++ b/packages/mui-codemod/src/v6.0.0/styled/styled-v6.js
@@ -0,0 +1,589 @@
+const MAX_DEPTH = 20;
+
+/**
+ * @param {import('jscodeshift').FileInfo} file
+ * @param {import('jscodeshift').API} api
+ */
+export default function styledV6(file, api, options) {
+ const j = api.jscodeshift;
+ const root = j(file.source);
+ const printOptions = options.printOptions;
+
+ /**
+ *
+ * @param {import('ast-types').namedTypes.MemberExpression | import('ast-types').namedTypes.Identifier} node
+ */
+ function getIdentifierKey(node) {
+ if (node.type === 'MemberExpression') {
+ return node.property;
+ }
+ return node;
+ }
+
+ /**
+ *
+ * @param {import('ast-types').namedTypes.UnaryExpression | import('ast-types').namedTypes.MemberExpression | import('ast-types').namedTypes.Identifier} node
+ */
+ function getObjectKey(node) {
+ let tempNode = { ...node };
+ while (tempNode.type === 'UnaryExpression') {
+ tempNode = tempNode.argument;
+ }
+ while (tempNode.type === 'MemberExpression') {
+ tempNode = tempNode.object;
+ }
+ return tempNode;
+ }
+
+ /**
+ *
+ * @param {import('ast-types').namedTypes.ObjectExpression} objectExpression
+ * @param {import('ast-types').namedTypes.BinaryExpression} addtional
+ */
+ function objectToArrowFunction(objectExpression, addtional) {
+ const paramKeys = new Set();
+ let left;
+ objectExpression.properties.forEach((prop, index) => {
+ paramKeys.add(prop.key.name);
+ const result = j.binaryExpression('===', prop.key, prop.value);
+ if (index === 0) {
+ left = result;
+ } else {
+ left = j.logicalExpression('&&', left, result);
+ }
+ });
+ if (addtional) {
+ paramKeys.add(getObjectKey(addtional.left).name);
+ }
+ return buildArrowFunctionAST(
+ paramKeys,
+ addtional ? j.logicalExpression('&&', left, addtional) : left,
+ );
+ }
+
+ /**
+ *
+ * @param {import('ast-types').namedTypes.Identifier | import('ast-types').namedTypes.BinaryExpression | import('ast-types').namedTypes.UnaryExpression} node
+ */
+ function inverseBinaryExpression(node) {
+ if (node.type === 'Identifier') {
+ return j.unaryExpression('!', node);
+ }
+ if (node.operator === '===') {
+ return { ...node, operator: '!==' };
+ }
+ if (node.operator === '!==') {
+ return { ...node, operator: '===' };
+ }
+ if (node.operator === '!') {
+ if (node.argument?.operator === '!') {
+ return node.argument;
+ }
+ return j.unaryExpression('!', node);
+ }
+ return node;
+ }
+
+ /**
+ *
+ * @param {import('ast-types').namedTypes.ObjectExpression} node
+ */
+ function removeProperty(parentNode, child) {
+ if (parentNode) {
+ if (parentNode.type === 'ObjectExpression') {
+ parentNode.properties = parentNode.properties.filter(
+ (prop) => prop !== child && prop.value !== child,
+ );
+ }
+ }
+ }
+
+ function buildObjectAST(jsObject) {
+ const result = j.objectExpression([]);
+ Object.entries(jsObject).forEach(([key, value]) => {
+ result.properties.push(j.objectProperty(j.identifier(key), value));
+ });
+ return result;
+ }
+
+ function buildArrowFunctionAST(params, body) {
+ return j.arrowFunctionExpression(
+ [
+ j.objectPattern(
+ [...params].map((k) => ({
+ ...j.objectProperty(j.identifier(k), j.identifier(k)),
+ shorthand: true,
+ })),
+ ),
+ ],
+ body,
+ );
+ }
+
+ /**
+ *
+ * @param {{ properties: any[] }} node
+ * @param {Record} modeStyles
+ */
+ function appendPaletteModeStyles(node, modeStyles) {
+ Object.entries(modeStyles).forEach(([mode, objectStyles]) => {
+ node.properties.push(
+ j.spreadElement(
+ j.callExpression(j.memberExpression(j.identifier('theme'), j.identifier('applyStyles')), [
+ j.stringLiteral(mode),
+ j.objectExpression(objectStyles),
+ ]),
+ ),
+ );
+ });
+ }
+
+ /**
+ *
+ * @param {import('ast-types').namedTypes.LogicalExpression | import('ast-types').namedTypes.BinaryExpression | import('ast-types').namedTypes.UnaryExpression | import('ast-types').namedTypes.MemberExpression} node
+ */
+ function buildProps(node) {
+ const properties = [];
+ const variables = new Set();
+ let isAllEqual = true;
+ let tempNode = { ...node };
+ function assignProperties(_node) {
+ if (_node.type === 'BinaryExpression') {
+ variables.add(getObjectKey(_node.left).name);
+ if (_node.operator === '===') {
+ properties.push(j.objectProperty(getIdentifierKey(_node.left), _node.right));
+ } else {
+ isAllEqual = false;
+ }
+ }
+ if (_node.type === 'MemberExpression' || _node.type === 'Identifier') {
+ isAllEqual = false;
+ variables.add(getObjectKey(_node).name);
+ }
+ if (_node.type === 'UnaryExpression') {
+ isAllEqual = false;
+ if (_node.argument.type === 'UnaryExpression') {
+ // handle `!!variable`
+ variables.add(getObjectKey(_node.argument.argument).name);
+ } else {
+ // handle `!variable`
+ variables.add(getObjectKey(_node.argument).name);
+ }
+ }
+ }
+ let counter = 0;
+ if (tempNode.type !== 'LogicalExpression') {
+ assignProperties(tempNode);
+ } else {
+ while (tempNode.type === 'LogicalExpression' && counter < MAX_DEPTH) {
+ counter += 1;
+ if (tempNode.operator !== '&&') {
+ isAllEqual = false;
+ }
+
+ assignProperties(tempNode.right);
+ if (tempNode.left.type !== 'LogicalExpression') {
+ assignProperties(tempNode.left);
+ break;
+ }
+
+ tempNode = { ...tempNode.left };
+ }
+ }
+
+ if (!isAllEqual) {
+ return buildArrowFunctionAST(variables, node);
+ }
+ return j.objectExpression(properties);
+ }
+
+ function mergeProps(parentProps, currentProps) {
+ if (parentProps.type === 'ObjectExpression' && currentProps.type === 'ObjectExpression') {
+ return j.objectExpression([...parentProps.properties, ...currentProps.properties]);
+ }
+ const parentArrow =
+ parentProps.type === 'ObjectExpression' ? objectToArrowFunction(parentProps) : parentProps;
+ const currentArrow =
+ currentProps.type === 'ObjectExpression' ? objectToArrowFunction(currentProps) : currentProps;
+ const variables = new Set();
+ [...parentArrow.params[0].properties, ...currentArrow.params[0].properties].forEach((param) => {
+ variables.add(param.key.name);
+ });
+ return buildArrowFunctionAST(
+ variables,
+ j.logicalExpression('&&', parentArrow.body, currentArrow.body),
+ );
+ }
+
+ function isThemePaletteMode(node) {
+ return (
+ node.type === 'MemberExpression' &&
+ node.object.type === 'MemberExpression' &&
+ node.object.object.name === 'theme' &&
+ node.object.property.name === 'palette' &&
+ node.property.name === 'mode'
+ );
+ }
+
+ let shouldTransform = false;
+
+ root.find(j.CallExpression).forEach((path) => {
+ const styles = [];
+ let args = [];
+
+ // styled('div')(...arguments)
+ if (
+ path.node.callee.type === 'Identifier' &&
+ path.node.callee.name === 'styled' &&
+ path.parentPath.node.type === 'CallExpression'
+ ) {
+ args = path.parentPath.node.arguments;
+ }
+
+ // styled.div(...arguments)
+ if (
+ path.node.callee.type === 'MemberExpression' &&
+ path.node.callee.object.type === 'Identifier' &&
+ path.node.callee.object.name === 'styled'
+ ) {
+ args = path.node.arguments;
+ }
+
+ // 1. collecting styles that should be tranformed
+ args.forEach((arg) => {
+ if (
+ arg.type === 'ArrowFunctionExpression' &&
+ arg.params[0] &&
+ arg.params[0].type === 'ObjectPattern'
+ ) {
+ styles.push(arg);
+ }
+ });
+
+ if (!shouldTransform && styles.length > 0) {
+ shouldTransform = true;
+ }
+
+ // 2. Find logical spread expressions to convert to variants
+ styles.forEach((style) => {
+ const parameters = new Set();
+ style.params.forEach((param) => {
+ if (param.type === 'ObjectPattern') {
+ param.properties.forEach((prop) => {
+ parameters.add(prop.key.name);
+ });
+ }
+ });
+ const variants = [];
+
+ if (style.body.type === 'LogicalExpression') {
+ if (
+ style.params[0] &&
+ style.params[0].type === 'ObjectPattern' &&
+ style.params[0].properties.some((prop) => prop.key.name !== 'theme')
+ ) {
+ // case: ({ theme, ownerState }) => ownerState.variant === 'regular' && theme.mixins.toolbar
+ style.body = j.objectExpression([
+ j.objectProperty(
+ j.identifier('variants'),
+ j.arrayExpression([
+ j.objectExpression([
+ j.objectProperty(j.identifier('props'), buildProps(style.body.left)),
+ j.objectProperty(j.identifier('style'), style.body.right),
+ ]),
+ ]),
+ ),
+ ]);
+ }
+ } else if (style.body.type === 'ConditionalExpression') {
+ // skip ConditionalExpression
+ } else {
+ let objectExpression = style.body;
+ let counter = 0;
+ while (objectExpression.type !== 'ObjectExpression' && counter < MAX_DEPTH) {
+ counter += 1;
+ if (objectExpression.type === 'BlockStatement') {
+ objectExpression = objectExpression.body.find(
+ (item) => item.type === 'ReturnStatement',
+ ).argument;
+ }
+ }
+
+ recurseObjectExpression({ node: objectExpression });
+
+ if (variants.length) {
+ objectExpression.properties.push(
+ j.objectProperty(
+ j.identifier('variants'),
+ j.arrayExpression(
+ variants.filter((variant) => {
+ const props = variant.properties.find((prop) => prop.key.name === 'props');
+ const styleVal = variant.properties.find((prop) => prop.key.name === 'style');
+ return (
+ props &&
+ styleVal &&
+ styleVal.value.properties.length > 0 &&
+ (props.value.type === 'ArrowFunctionExpression' ||
+ props.value.properties.length > 0)
+ );
+ }),
+ ),
+ ),
+ );
+ }
+ }
+
+ function recurseObjectExpression(data) {
+ if (data.node.type === 'ObjectExpression') {
+ const modeStyles = {}; // to collect styles from `theme.palette.mode === '...'`
+ data.node.properties.forEach((prop) => {
+ if (prop.type === 'ObjectProperty') {
+ recurseObjectExpression({
+ ...data,
+ node: prop.value,
+ parentNode: data.node,
+ key: prop.key,
+ replaceValue: (newValue) => {
+ prop.value = newValue;
+ },
+ modeStyles,
+ });
+ } else {
+ recurseObjectExpression({ ...data, node: prop, parentNode: data.node });
+ }
+ });
+ appendPaletteModeStyles(data.node, modeStyles);
+ }
+ if (data.node.type === 'SpreadElement') {
+ if (data.node.argument.type === 'LogicalExpression') {
+ const paramName = getObjectKey(data.node.argument.left)?.name;
+ if (paramName && !parameters.has(paramName)) {
+ return;
+ }
+
+ const scopeProps = buildProps(data.node.argument.left);
+ const variant = {
+ props: data.props ? mergeProps(data.props, scopeProps) : scopeProps,
+ style: data.node.argument.right,
+ };
+
+ const modeStyles = {}; // to collect styles from `theme.palette.mode === '...'`
+ variant.style.properties.forEach((prop) => {
+ if (prop.type === 'ObjectProperty') {
+ recurseObjectExpression({
+ ...data,
+ node: prop.value,
+ parentNode: variant.style,
+ props: variant.props,
+ key: prop.key,
+ replaceValue: (newValue) => {
+ prop.value = newValue;
+ },
+ modeStyles,
+ });
+ } else {
+ recurseObjectExpression({
+ ...data,
+ node: prop,
+ parentNode: variant.style,
+ props: variant.props,
+ });
+ }
+ });
+ appendPaletteModeStyles(variant.style, modeStyles);
+ variants.push(buildObjectAST(variant));
+ removeProperty(data.parentNode, data.node);
+ }
+ if (data.node.argument.type === 'ConditionalExpression') {
+ recurseObjectExpression({ ...data, node: data.node.argument, parentNode: data.node });
+ removeProperty(data.parentNode, data.node);
+ }
+ }
+ if (data.node.type === 'ConditionalExpression') {
+ if (
+ data.node.test.type === 'BinaryExpression' ||
+ data.node.test.type === 'UnaryExpression' ||
+ data.node.test.type === 'Identifier'
+ ) {
+ let leftName = getObjectKey(data.node.test)?.name;
+ if (data.node.test.left) {
+ leftName = getObjectKey(data.node.test.left)?.name;
+ }
+ if (data.node.test.argument) {
+ leftName = getObjectKey(data.node.test.argument)?.name;
+ }
+ if (parameters.has(leftName) && leftName !== 'theme') {
+ let props = buildProps(data.node.test);
+ if (data.props) {
+ props = mergeProps(data.props, props);
+ }
+ const styleVal = data.node.consequent;
+ let newStyle = styleVal;
+ if (
+ data.key &&
+ (data.key.type === 'Identifier' || data.key.type === 'StringLiteral')
+ ) {
+ newStyle = j.objectExpression([j.objectProperty(data.key, styleVal)]);
+ }
+ const variant = {
+ props,
+ style: newStyle,
+ };
+ variants.push(buildObjectAST(variant));
+
+ // create another variant with inverted condition
+ let props2 = buildProps(inverseBinaryExpression(data.node.test));
+ if (data.props) {
+ props2 = mergeProps(data.props, props2);
+ }
+ const styleVal2 = data.node.alternate;
+ let newStyle2 = styleVal2;
+ if (
+ data.key &&
+ (data.key.type === 'Identifier' || data.key.type === 'StringLiteral')
+ ) {
+ newStyle2 = j.objectExpression([j.objectProperty(data.key, styleVal2)]);
+ }
+ const variant2 = {
+ props: props2,
+ style: newStyle2,
+ };
+ variants.push(buildObjectAST(variant2));
+ if (data.parentNode?.type === 'ObjectExpression') {
+ removeProperty(data.parentNode, data.node);
+ }
+ }
+ if (
+ leftName === 'theme' &&
+ data.parentNode?.type === 'ObjectExpression' &&
+ data.node.test?.type === 'BinaryExpression' &&
+ isThemePaletteMode(data.node.test.left)
+ ) {
+ if (
+ data.node.consequent.type !== 'ObjectExpression' &&
+ data.node.alternate.type !== 'ObjectExpression'
+ ) {
+ if (data.modeStyles) {
+ if (!data.modeStyles[data.node.test.right.value]) {
+ data.modeStyles[data.node.test.right.value] = [];
+ }
+ data.modeStyles[data.node.test.right.value].push(
+ j.objectProperty(data.key, data.node.consequent),
+ );
+ }
+ data.replaceValue?.(data.node.alternate);
+ }
+ }
+ }
+ }
+ if (data.node.type === 'TemplateLiteral') {
+ if (data.parentNode?.type === 'ObjectExpression') {
+ const modeStyles = {};
+ data.node.expressions.forEach((expression, index) => {
+ recurseObjectExpression({
+ ...data,
+ node: expression,
+ parentNode: data.parentNode,
+ key: data.key,
+ replaceValue: (newValue) => {
+ data.node.expressions[index] = newValue;
+ },
+ modeStyles,
+ });
+ });
+ if (data.modeStyles) {
+ Object.entries(modeStyles).forEach(([mode, objectStyles]) => {
+ const clonedNode = {
+ ...data.node,
+ expressions: data.node.expressions.map((expression) => ({ ...expression })),
+ };
+ clonedNode.expressions = objectStyles.map((item) => item.value);
+
+ if (!data.modeStyles[mode]) {
+ data.modeStyles[mode] = [];
+ }
+ data.modeStyles[mode].push(j.objectProperty(data.key, clonedNode));
+ });
+ }
+ }
+ }
+ if (
+ data.key &&
+ data.key.type === 'Identifier' &&
+ data.node.type === 'MemberExpression' &&
+ data.node.object.type === 'ObjectExpression' &&
+ parameters.has(getObjectKey(data.node.property).name)
+ ) {
+ data.node.object.properties.forEach((prop) => {
+ variants.push(
+ buildObjectAST({
+ props: j.objectExpression([
+ j.objectProperty(
+ getIdentifierKey(data.node.property),
+ j.stringLiteral(prop.key.name),
+ ),
+ ]),
+ style: j.objectExpression([j.objectProperty(data.key, prop.value)]),
+ }),
+ );
+ });
+ removeProperty(data.parentNode, data.node);
+ }
+ }
+
+ style.params.forEach((param) => {
+ if (param.type === 'ObjectPattern') {
+ param.properties = param.properties.filter((prop) => prop.key.name === 'theme');
+ }
+ });
+ });
+
+ // Replace arrow function with object expression if the arg properties is empty
+ args.forEach((arg, index) => {
+ if (
+ arg.type === 'ArrowFunctionExpression' &&
+ arg.params[0] &&
+ arg.params[0].type === 'ObjectPattern' &&
+ arg.params[0].properties.length === 0
+ ) {
+ if (arg.body.type === 'ObjectExpression') {
+ args[index] = arg.body;
+ }
+ if (arg.body.type === 'BlockStatement') {
+ const returnStatement = arg.body.body.find((item) => item.type === 'ReturnStatement');
+ if (returnStatement) {
+ args[index] = returnStatement.argument;
+ }
+ }
+ }
+ });
+ });
+
+ const transformed = root.toSource(printOptions);
+
+ if (shouldTransform) {
+ // recast adds extra newlines that we don't want, https://github.com/facebook/jscodeshift/issues/249
+ // need to remove them manually
+ const lines = [];
+ let isInStyled = false;
+ transformed.split('\n').forEach((line, index, array) => {
+ if (!isInStyled) {
+ lines.push(line);
+ } else if (
+ line !== '' ||
+ (line === '' && array[index + 1] && array[index + 1].includes('return'))
+ ) {
+ if (line.match(/^}\)+(\({}\)|\(\))?;?$/) || line.match(/^\);?$/)) {
+ isInStyled = false;
+ }
+ lines.push(line);
+ }
+ if (line.includes('styled.') || line.includes('styled(')) {
+ isInStyled = true;
+ }
+ });
+ return lines.join('\n');
+ }
+
+ return transformed;
+}
diff --git a/packages/mui-codemod/src/v6.0.0/styled/styled-v6.test.js b/packages/mui-codemod/src/v6.0.0/styled/styled-v6.test.js
new file mode 100644
index 00000000000000..7dee2d833d463f
--- /dev/null
+++ b/packages/mui-codemod/src/v6.0.0/styled/styled-v6.test.js
@@ -0,0 +1,181 @@
+import path from 'path';
+import { expect } from 'chai';
+import { jscodeshift } from '../../../testUtils';
+import transform from './styled-v6';
+import readFile from '../../util/readFile';
+
+function read(fileName) {
+ return readFile(path.join(__dirname, fileName));
+}
+
+describe('@mui/codemod', () => {
+ describe('v6.0.0', () => {
+ describe('basic styled-v6', () => {
+ it('transforms props as needed', () => {
+ const actual = transform(
+ { source: read('./test-cases/BasicStyled.actual.js') },
+ { jscodeshift },
+ {},
+ );
+
+ const expected = read('./test-cases/BasicStyled.expected.js');
+ expect(actual).to.equal(expected, 'The transformed version should be correct');
+ });
+
+ it('should be idempotent', () => {
+ const actual = transform(
+ { source: read('./test-cases/BasicStyled.expected.js') },
+ { jscodeshift },
+ {},
+ );
+
+ const expected = read('./test-cases/BasicStyled.expected.js');
+ expect(actual).to.equal(expected, 'The transformed version should be correct');
+ });
+ });
+
+ describe('logical styled-v6', () => {
+ it('transforms props as needed', () => {
+ const actual = transform(
+ { source: read('./test-cases/LogicalStyled.actual.js') },
+ { jscodeshift },
+ { printOptions: { trailingComma: false } },
+ );
+
+ const expected = read('./test-cases/LogicalStyled.expected.js');
+ expect(actual).to.equal(expected, 'The transformed version should be correct');
+ });
+
+ it('should be idempotent', () => {
+ const actual = transform(
+ { source: read('./test-cases/LogicalStyled.expected.js') },
+ { jscodeshift },
+ {},
+ );
+
+ const expected = read('./test-cases/LogicalStyled.expected.js');
+ expect(actual).to.equal(expected, 'The transformed version should be correct');
+ });
+ });
+
+ describe('nested spread styled-v6', () => {
+ it('transforms props as needed', () => {
+ const actual = transform(
+ { source: read('./test-cases/NestedSpread.actual.js') },
+ { jscodeshift },
+ { printOptions: { trailingComma: false } },
+ );
+
+ const expected = read('./test-cases/NestedSpread.expected.js');
+ expect(actual).to.equal(expected, 'The transformed version should be correct');
+ });
+
+ it('should be idempotent', () => {
+ const actual = transform(
+ { source: read('./test-cases/NestedSpread.expected.js') },
+ { jscodeshift },
+ {},
+ );
+
+ const expected = read('./test-cases/NestedSpread.expected.js');
+ expect(actual).to.equal(expected, 'The transformed version should be correct');
+ });
+ });
+
+ describe('object map styled-v6', () => {
+ it('transforms props as needed', () => {
+ const actual = transform(
+ { source: read('./test-cases/ObjectMap.actual.js') },
+ { jscodeshift },
+ { printOptions: { trailingComma: false } },
+ );
+
+ const expected = read('./test-cases/ObjectMap.expected.js');
+ expect(actual).to.equal(expected, 'The transformed version should be correct');
+ });
+
+ it('should be idempotent', () => {
+ const actual = transform(
+ { source: read('./test-cases/ObjectMap.expected.js') },
+ { jscodeshift },
+ {},
+ );
+
+ const expected = read('./test-cases/ObjectMap.expected.js');
+ expect(actual).to.equal(expected, 'The transformed version should be correct');
+ });
+ });
+
+ describe('conditional styled-v6', () => {
+ it('transforms props as needed', () => {
+ const actual = transform(
+ { source: read('./test-cases/ConditionalStyled.actual.js') },
+ { jscodeshift },
+ { printOptions: { trailingComma: false } },
+ );
+
+ const expected = read('./test-cases/ConditionalStyled.expected.js');
+ expect(actual).to.equal(expected, 'The transformed version should be correct');
+ });
+
+ it('should be idempotent', () => {
+ const actual = transform(
+ { source: read('./test-cases/ConditionalStyled.expected.js') },
+ { jscodeshift },
+ {},
+ );
+
+ const expected = read('./test-cases/ConditionalStyled.expected.js');
+ expect(actual).to.equal(expected, 'The transformed version should be correct');
+ });
+ });
+
+ describe('theme palette mode styled-v6', () => {
+ it('transforms props as needed', () => {
+ const actual = transform(
+ { source: read('./test-cases/ThemePaletteMode.actual.js') },
+ { jscodeshift },
+ { printOptions: { trailingComma: false } },
+ );
+
+ const expected = read('./test-cases/ThemePaletteMode.expected.js');
+ expect(actual).to.equal(expected, 'The transformed version should be correct');
+ });
+
+ it('should be idempotent', () => {
+ const actual = transform(
+ { source: read('./test-cases/ThemePaletteMode.expected.js') },
+ { jscodeshift },
+ {},
+ );
+
+ const expected = read('./test-cases/ThemePaletteMode.expected.js');
+ expect(actual).to.equal(expected, 'The transformed version should be correct');
+ });
+ });
+
+ describe('theme palette mode and variants styled-v6', () => {
+ it('transforms props as needed', () => {
+ const actual = transform(
+ { source: read('./test-cases/VariantAndModeStyled.actual.js') },
+ { jscodeshift },
+ { printOptions: { trailingComma: false } },
+ );
+
+ const expected = read('./test-cases/VariantAndModeStyled.expected.js');
+ expect(actual).to.equal(expected, 'The transformed version should be correct');
+ });
+
+ it('should be idempotent', () => {
+ const actual = transform(
+ { source: read('./test-cases/VariantAndModeStyled.expected.js') },
+ { jscodeshift },
+ {},
+ );
+
+ const expected = read('./test-cases/VariantAndModeStyled.expected.js');
+ expect(actual).to.equal(expected, 'The transformed version should be correct');
+ });
+ });
+ });
+});
diff --git a/packages/mui-codemod/src/v6.0.0/styled/test-cases/BasicStyled.actual.js b/packages/mui-codemod/src/v6.0.0/styled/test-cases/BasicStyled.actual.js
new file mode 100644
index 00000000000000..831808277ff08d
--- /dev/null
+++ b/packages/mui-codemod/src/v6.0.0/styled/test-cases/BasicStyled.actual.js
@@ -0,0 +1,60 @@
+const FormHelperTextRoot = styled('p')(({ theme, ownerState, disabled }) => ({
+ color: (theme.vars || theme).palette.text.secondary,
+ ...theme.typography.caption,
+ textAlign: 'left',
+ [`&.${formHelperTextClasses.disabled}`]: {
+ color: (theme.vars || theme).palette.text.disabled,
+ },
+ ...(ownerState.size === 'small' && {
+ marginTop: 4,
+ }),
+ ...(ownerState.size === 'small' &&
+ ownerState.variant === 'contained' && {
+ marginTop: 6,
+ }),
+ ...(ownerState.size === 'small' &&
+ ownerState.variant === 'contained' &&
+ disabled && {
+ marginTop: 6,
+ }),
+ ...(ownerState.size !== 'small' && {
+ marginBottom: 4,
+ }),
+ ...(ownerState.size !== 'small' &&
+ ownerState.variant !== 'contained' &&
+ !disabled && {
+ marginBottom: 6,
+ }),
+ ...(ownerState.contained && {
+ marginLeft: 14,
+ marginRight: 14,
+ }),
+ ...(!ownerState.contained && {
+ marginTop: 14,
+ marginBottom: 14,
+ }),
+ ...(!!ownerState.disabled && {
+ opacity: 0.5,
+ }),
+}));
+
+const Component = styled.div(({ theme, ownerState }) => ({
+ ...theme.typography.caption,
+ ...(ownerState.size === 'small' && {
+ marginTop: (theme.vars || theme).spacing(1),
+ }),
+}));
+
+const ImageListRoot = styled('ul')(({ ownerState }) => {
+ return {
+ display: 'grid',
+ overflowY: 'auto',
+ listStyle: 'none',
+ padding: 0,
+ // Add iOS momentum scrolling for iOS < 13.0
+ WebkitOverflowScrolling: 'touch',
+ ...(ownerState.variant === 'masonry' && {
+ display: 'block',
+ }),
+ };
+});
diff --git a/packages/mui-codemod/src/v6.0.0/styled/test-cases/BasicStyled.expected.js b/packages/mui-codemod/src/v6.0.0/styled/test-cases/BasicStyled.expected.js
new file mode 100644
index 00000000000000..d7aa53897b899b
--- /dev/null
+++ b/packages/mui-codemod/src/v6.0.0/styled/test-cases/BasicStyled.expected.js
@@ -0,0 +1,119 @@
+const FormHelperTextRoot = styled('p')(({
+ theme
+}) => ({
+ color: (theme.vars || theme).palette.text.secondary,
+ ...theme.typography.caption,
+ textAlign: 'left',
+ [`&.${formHelperTextClasses.disabled}`]: {
+ color: (theme.vars || theme).palette.text.disabled,
+ },
+ variants: [{
+ props: {
+ size: 'small'
+ },
+ style: {
+ marginTop: 4,
+ }
+ }, {
+ props: {
+ variant: 'contained',
+ size: 'small'
+ },
+ style: {
+ marginTop: 6,
+ }
+ }, {
+ props: (
+ {
+ disabled,
+ ownerState
+ }
+ ) => ownerState.size === 'small' &&
+ ownerState.variant === 'contained' &&
+ disabled,
+ style: {
+ marginTop: 6,
+ }
+ }, {
+ props: (
+ {
+ ownerState
+ }
+ ) => ownerState.size !== 'small',
+ style: {
+ marginBottom: 4,
+ }
+ }, {
+ props: (
+ {
+ disabled,
+ ownerState
+ }
+ ) => ownerState.size !== 'small' &&
+ ownerState.variant !== 'contained' &&
+ !disabled,
+ style: {
+ marginBottom: 6,
+ }
+ }, {
+ props: (
+ {
+ ownerState
+ }
+ ) => ownerState.contained,
+ style: {
+ marginLeft: 14,
+ marginRight: 14,
+ }
+ }, {
+ props: (
+ {
+ ownerState
+ }
+ ) => !ownerState.contained,
+ style: {
+ marginTop: 14,
+ marginBottom: 14,
+ }
+ }, {
+ props: (
+ {
+ ownerState
+ }
+ ) => !!ownerState.disabled,
+ style: {
+ opacity: 0.5,
+ }
+ }]
+}));
+
+const Component = styled.div(({
+ theme
+}) => ({
+ ...theme.typography.caption,
+ variants: [{
+ props: {
+ size: 'small'
+ },
+ style: {
+ marginTop: (theme.vars || theme).spacing(1),
+ }
+ }]
+}));
+
+const ImageListRoot = styled('ul')({
+ display: 'grid',
+ overflowY: 'auto',
+ listStyle: 'none',
+ padding: 0,
+ // Add iOS momentum scrolling for iOS < 13.0
+ WebkitOverflowScrolling: 'touch',
+ variants: [{
+ props: {
+ variant: 'masonry'
+ },
+ style: {
+ display: 'block',
+ }
+ }]
+});
diff --git a/packages/mui-codemod/src/v6.0.0/styled/test-cases/ConditionalStyled.actual.js b/packages/mui-codemod/src/v6.0.0/styled/test-cases/ConditionalStyled.actual.js
new file mode 100644
index 00000000000000..c697bd74b69d85
--- /dev/null
+++ b/packages/mui-codemod/src/v6.0.0/styled/test-cases/ConditionalStyled.actual.js
@@ -0,0 +1,125 @@
+const LinearProgressBar1 = styled('span', {
+ name: 'MuiLinearProgress',
+ slot: 'Bar1',
+ overridesResolver: (props, styles) => {
+ const { ownerState } = props;
+
+ return [
+ styles.bar,
+ styles[`barColor${capitalize(ownerState.color)}`],
+ (ownerState.variant === 'indeterminate' || ownerState.variant === 'query') &&
+ styles.bar1Indeterminate,
+ ownerState.variant === 'determinate' && styles.bar1Determinate,
+ ownerState.variant === 'buffer' && styles.bar1Buffer,
+ ];
+ },
+})(({ ownerState, theme }) => ({
+ ...(ownerState.variant === 'buffer' && {
+ backgroundColor:
+ ownerState.color !== 'normal'
+ ? 'currentColor'
+ : (theme.vars || theme).palette[ownerState.color].light,
+ '&:hover': {
+ ...(ownerState.color !== 'inherit'
+ ? {
+ backgroundColor: (theme.vars || theme).palette[ownerState.color].dark,
+ }
+ : {
+ backgroundColor: 'currentColor',
+ }),
+ },
+ }),
+ ...(ownerState.variant !== 'buffer' && {
+ backgroundColor:
+ ownerState.color === 'inherit'
+ ? 'currentColor'
+ : (theme.vars || theme).palette[ownerState.color].main,
+ }),
+}));
+
+const ExpandMore = styled((props) => {
+ const { expand, ...other } = props;
+ return >({
+ current: null,
+});
+
+/**
+ * How to use: spread the handlers to the .MuiCode-root
+ *
+ * The html structure should be:
+ *
+ */
+export function useCodeCopy(): React.HTMLAttributes {
+ const rootNode = React.useContext(CodeBlockContext);
+ return {
+ onMouseEnter: (event) => {
+ rootNode.current = event.currentTarget;
+ },
+ onMouseLeave: (event) => {
+ if (rootNode.current === event.currentTarget) {
+ (rootNode.current.querySelector('.MuiCode-copy') as null | HTMLButtonElement)?.blur();
+ rootNode.current = null;
+ }
+ },
+ onFocus: (event) => {
+ rootNode.current = event.currentTarget;
+ },
+ onBlur: (event) => {
+ if (rootNode.current === event.currentTarget) {
+ rootNode.current = null;
+ }
+ },
+ };
+}
+
+function InitCodeCopy() {
+ const rootNode = React.useContext(CodeBlockContext);
+ const router = useRouter();
+ React.useEffect(() => {
+ let key = 'Ctrl + ';
+ if (typeof window !== 'undefined') {
+ const macOS = window.navigator.platform.toUpperCase().indexOf('MAC') >= 0;
+ if (macOS) {
+ key = '⌘';
+ }
+ }
+ const codeRoots = document.getElementsByClassName(
+ 'MuiCode-root',
+ ) as HTMLCollectionOf;
+
+ if (codeRoots !== null) {
+ const listeners: Array<() => void> = [];
+ Array.from(codeRoots).forEach((elm) => {
+ const handleMouseEnter = () => {
+ rootNode.current = elm;
+ };
+
+ elm.addEventListener('mouseenter', handleMouseEnter);
+ listeners.push(() => elm.removeEventListener('mouseenter', handleMouseEnter));
+
+ const handleMouseLeave = () => {
+ if (rootNode.current === elm) {
+ (rootNode.current.querySelector('.MuiCode-copy') as null | HTMLButtonElement)?.blur();
+ rootNode.current = null;
+ }
+ };
+ elm.addEventListener('mouseleave', handleMouseLeave);
+ listeners.push(() => elm.removeEventListener('mouseleave', handleMouseLeave));
+
+ const handleFocusin = () => {
+ // use `focusin` because it bubbles from the copy button
+ rootNode.current = elm;
+ };
+ elm.addEventListener('focusin', handleFocusin);
+ listeners.push(() => elm.removeEventListener('focusin', handleFocusin));
+
+ const handleFocusout = () => {
+ // use `focusout` because it bubbles from the copy button
+ if (rootNode.current === elm) {
+ rootNode.current = null;
+ }
+ };
+ elm.addEventListener('focusout', handleFocusout);
+ listeners.push(() => elm.removeEventListener('focusout', handleFocusout));
+
+ async function handleClick(event: MouseEvent) {
+ const trigger = event.currentTarget as HTMLButtonElement;
+ const pre = (event.currentTarget as Element)?.previousElementSibling as Element;
+ const textNode = trigger.childNodes[0];
+ textNode.nodeValue = textNode.textContent?.replace('Copy', 'Copied') || null;
+ trigger.dataset.copied = 'true';
+ setTimeout(() => {
+ if (trigger) {
+ textNode.nodeValue = textNode.textContent?.replace('Copied', 'Copy') || null;
+ delete trigger.dataset.copied;
+ }
+ }, 2000);
+ try {
+ if (pre.textContent) {
+ await clipboardCopy(pre.textContent);
+ }
+ // eslint-disable-next-line no-empty
+ } catch (error) {}
+ }
+
+ const btn = elm.querySelector('.MuiCode-copy') as HTMLButtonElement | null;
+ if (btn) {
+ const keyNode = btn.querySelector('.MuiCode-copyKeypress')?.childNodes[1];
+ if (!keyNode) {
+ // skip the logic if the btn is not generated from the markdown.
+ return;
+ }
+ keyNode.textContent = keyNode?.textContent?.replace('$key', key) || null;
+ btn.addEventListener('click', handleClick);
+ listeners.push(() => btn.removeEventListener('click', handleClick));
+ }
+ });
+
+ return () => {
+ listeners.forEach((removeEventListener) => {
+ removeEventListener();
+ });
+ };
+ }
+
+ return undefined;
+ }, [rootNode, router.pathname]);
+ return null;
+}
+
+function hasNativeSelection(element: HTMLTextAreaElement) {
+ if (window.getSelection()?.toString()) {
+ return true;
+ }
+
+ // window.getSelection() returns an empty string in Firefox for selections inside a form element.
+ // See: https://bugzilla.mozilla.org/show_bug.cgi?id=85686.
+ // Instead, we can use element.selectionStart that is only defined on form elements.
+ if (element && (element.selectionEnd || 0) - (element.selectionStart || 0) > 0) {
+ return true;
+ }
+
+ return false;
+}
+
+interface CodeCopyProviderProps {
+ children: React.ReactNode;
+}
+
+/**
+ * Place at the page level. It will check the keydown event and try to initiate copy click if rootNode exist.
+ * Any code block inside the tree can set the rootNode when mouse enter to leverage keyboard copy.
+ */
+export function CodeCopyProvider({ children }: CodeCopyProviderProps) {
+ const rootNode = React.useRef(null);
+ React.useEffect(() => {
+ document.addEventListener('keydown', (event) => {
+ if (!rootNode.current) {
+ return;
+ }
+
+ // Skip if user is highlighting a text.
+ if (hasNativeSelection(event.target as HTMLTextAreaElement)) {
+ return;
+ }
+
+ // Skip if it's not a copy keyboard event
+ if (
+ !(
+ (event.ctrlKey || event.metaKey) &&
+ event.key.toLowerCase() === 'c' &&
+ !event.shiftKey &&
+ !event.altKey
+ )
+ ) {
+ return;
+ }
+
+ const copyBtn = rootNode.current.querySelector('.MuiCode-copy') as HTMLButtonElement;
+ const initialEventAction = copyBtn.getAttribute('data-ga-event-action');
+ // update the 'data-ga-event-action' on the button to track keyboard interaction
+ copyBtn.dataset.gaEventAction =
+ initialEventAction?.replace('click', 'keyboard') || 'copy-keyboard';
+ copyBtn.click(); // let the GA setup in GoogleAnalytics.js do the job
+ copyBtn.dataset.gaEventAction = initialEventAction!; // reset the 'data-ga-event-action' back to initial
+ });
+ }, []);
+ return (
+
+
+ );
+}
diff --git a/packages/mui-docs/src/CodeCopy/CodeCopyButton.tsx b/packages/mui-docs/src/CodeCopy/CodeCopyButton.tsx
new file mode 100644
index 00000000000000..648e479a504399
--- /dev/null
+++ b/packages/mui-docs/src/CodeCopy/CodeCopyButton.tsx
@@ -0,0 +1,41 @@
+import * as React from 'react';
+import ContentCopyRoundedIcon from '@mui/icons-material/ContentCopyRounded';
+import LibraryAddCheckRoundedIcon from '@mui/icons-material/LibraryAddCheckRounded';
+import useClipboardCopy from './useClipboardCopy';
+
+export interface CodeCopyButtonProps {
+ code: string;
+}
+
+export function CodeCopyButton(props: CodeCopyButtonProps) {
+ const { code, ...other } = props;
+ const { copy, isCopied } = useClipboardCopy();
+ // This component is designed to be wrapped in NoSsr
+ const macOS = window.navigator.platform.toUpperCase().indexOf('MAC') >= 0;
+ const key = macOS ? '⌘' : 'Ctrl + ';
+
+ return (
+
+ {
+ // event.stopPropagation();
+ await copy(code);
+ }}
+ >
+ {/* material-ui/no-hardcoded-labels */}
+ {isCopied ? (
+
+ (or {key}C)
+
+
+
+ );
+}
diff --git a/packages/mui-docs/src/CodeCopy/index.tsx b/packages/mui-docs/src/CodeCopy/index.tsx
new file mode 100644
index 00000000000000..074604ad8bfd26
--- /dev/null
+++ b/packages/mui-docs/src/CodeCopy/index.tsx
@@ -0,0 +1,3 @@
+export * from './CodeCopy';
+export * from './CodeCopyButton';
+export { default as useClipboardCopy } from './useClipboardCopy';
diff --git a/packages/mui-docs/src/CodeCopy/useClipboardCopy.ts b/packages/mui-docs/src/CodeCopy/useClipboardCopy.ts
new file mode 100644
index 00000000000000..9979a455775ae5
--- /dev/null
+++ b/packages/mui-docs/src/CodeCopy/useClipboardCopy.ts
@@ -0,0 +1,25 @@
+import * as React from 'react';
+import clipboardCopy from 'clipboard-copy';
+
+export default function useClipboardCopy() {
+ const [isCopied, setIsCopied] = React.useState(false);
+ const timeout = React.useRef>();
+
+ React.useEffect(
+ () => () => {
+ clearTimeout(timeout.current);
+ },
+ [],
+ );
+
+ const copy = async (text: string) => {
+ await clipboardCopy(text);
+ setIsCopied(true);
+ clearTimeout(timeout.current);
+ timeout.current = setTimeout(() => {
+ setIsCopied(false);
+ }, 1200);
+ };
+
+ return { copy, isCopied };
+}
diff --git a/packages/mui-docs/src/HighlightedCode/HighlightedCode.tsx b/packages/mui-docs/src/HighlightedCode/HighlightedCode.tsx
new file mode 100644
index 00000000000000..dd2d43fd020849
--- /dev/null
+++ b/packages/mui-docs/src/HighlightedCode/HighlightedCode.tsx
@@ -0,0 +1,52 @@
+import * as React from 'react';
+import prism from '@mui/internal-markdown/prism';
+import { NoSsr } from '@mui/base/NoSsr';
+import { ButtonProps } from '@mui/material/Button';
+import { SxProps } from '@mui/material/styles';
+import { useCodeCopy, CodeCopyButton } from '../CodeCopy';
+import { MarkdownElement } from '../MarkdownElement';
+
+export interface HighlightedCodeProps {
+ code: string;
+ component?: React.ElementType;
+ copyButtonHidden?: boolean;
+ copyButtonProps?: ButtonProps;
+ language: string;
+ sx?: SxProps;
+}
+
+export const HighlightedCode = React.forwardRef(
+ function HighlightedCode(props, ref) {
+ const {
+ copyButtonHidden = false,
+ copyButtonProps,
+ code,
+ language,
+ component: Component = MarkdownElement,
+ ...other
+ } = props;
+ const renderedCode = React.useMemo(() => {
+ return prism(code.trim(), language);
+ }, [code, language]);
+ const handlers = useCodeCopy();
+
+ return (
+
+
+ {copyButtonHidden ? null : (
+
+
+ )}
+
+
+
+ );
+ },
+);
diff --git a/packages/mui-docs/src/HighlightedCode/index.tsx b/packages/mui-docs/src/HighlightedCode/index.tsx
new file mode 100644
index 00000000000000..c348a40cdaa7c2
--- /dev/null
+++ b/packages/mui-docs/src/HighlightedCode/index.tsx
@@ -0,0 +1 @@
+export * from './HighlightedCode';
diff --git a/packages/mui-docs/src/MarkdownElement/MarkdownElement.tsx b/packages/mui-docs/src/MarkdownElement/MarkdownElement.tsx
new file mode 100644
index 00000000000000..b95280444c9c0a
--- /dev/null
+++ b/packages/mui-docs/src/MarkdownElement/MarkdownElement.tsx
@@ -0,0 +1,831 @@
+import * as React from 'react';
+import clsx from 'clsx';
+import { alpha, darken, styled } from '@mui/material/styles';
+import { brandingDarkTheme as darkTheme, brandingLightTheme as lightTheme } from '../branding';
+
+const Root = styled('div')(
+ ({ theme }) => ({
+ ...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})`,
+ },
+ wordBreak: 'break-word',
+ '& pre': {
+ lineHeight: 1.5, // Developers like when the code is dense.
+ margin: theme.spacing(2, 'auto'),
+ padding: theme.spacing(2),
+ backgroundColor: 'hsl(210, 35%, 9%)', // a special, one-off, color tailored for the code blocks using MUI's branding theme blue palette as the starting point. It has a less saturaded color but still maintaining a bit of the blue tint.
+ color: 'hsl(60, 30%, 96%)',
+ colorScheme: 'dark',
+ borderRadius: `var(--muidocs-shape-borderRadius, ${
+ theme.shape?.borderRadius ?? lightTheme.shape.borderRadius
+ }px)`,
+ border: '1px solid',
+ borderColor: `var(--muidocs-palette-primaryDark-700, ${lightTheme.palette.primaryDark[700]})`,
+ overflow: 'auto',
+ WebkitOverflowScrolling: 'touch',
+ fontSize: lightTheme.typography.pxToRem(13),
+ maxWidth: 'calc(100vw - 32px)',
+ maxHeight: '400px',
+ [lightTheme.breakpoints.up('md')]: {
+ maxWidth: 'calc(100vw - 32px - 16px)',
+ },
+ },
+ '& code': {
+ ...lightTheme.typography.body2,
+ fontFamily: lightTheme.typography.fontFamilyCode,
+ fontWeight: 400,
+ WebkitFontSmoothing: 'subpixel-antialiased',
+ },
+ '& pre > code': {
+ // Reset for Safari
+ // https://github.com/necolas/normalize.css/blob/master/normalize.css#L102
+ fontSize: 'inherit',
+ },
+ // inline code block
+ '& :not(pre) > code': {
+ padding: '2px 4px',
+ color: `var(--muidocs-palette-text-primary, ${lightTheme.palette.text.primary})`,
+ backgroundColor: `var(--muidocs-palette-grey-50, ${lightTheme.palette.grey[50]})`,
+ border: '1px solid',
+ borderColor: `var(--muidocs-palette-grey-200, ${lightTheme.palette.grey[200]})`,
+ borderRadius: 6,
+ fontSize: lightTheme.typography.pxToRem(13),
+ direction: 'ltr /*! @noflip */',
+ boxDecorationBreak: 'clone',
+ },
+ '& h1': {
+ ...lightTheme.typography.h3,
+ fontSize: lightTheme.typography.pxToRem(36),
+ fontFamily: `"General Sans", ${lightTheme.typography.fontFamilySystem}`,
+ margin: '10px 0',
+ color: `var(--muidocs-palette-primaryDark-900, ${lightTheme.palette.primaryDark[900]})`,
+ fontWeight: 600,
+ letterSpacing: -0.2,
+ },
+ '& .description': {
+ ...lightTheme.typography.subtitle1,
+ fontWeight: 400,
+ margin: '0 0 24px',
+ },
+ '& .component-tabs': {
+ margin: '0 0 40px',
+ },
+ '& h2': {
+ ...lightTheme.typography.h5,
+ fontFamily: `"General Sans", ${lightTheme.typography.fontFamilySystem}`,
+ fontSize: theme.typography.pxToRem(26),
+ fontWeight: lightTheme.typography.fontWeightSemiBold,
+ color: `var(--muidocs-palette-grey-900, ${lightTheme.palette.grey[900]})`,
+ margin: '40px 0 4px',
+ },
+ '& h3': {
+ ...lightTheme.typography.h6,
+ fontFamily: `"General Sans", ${lightTheme.typography.fontFamilySystem}`,
+ fontSize: theme.typography.pxToRem(20),
+ fontWeight: lightTheme.typography.fontWeightSemiBold,
+ color: `var(--muidocs-palette-grey-900, ${lightTheme.palette.grey[900]})`,
+ margin: '24px 0 4px',
+ },
+ '& h4': {
+ ...lightTheme.typography.subtitle1,
+ fontFamily: `"General Sans", ${lightTheme.typography.fontFamilySystem}`,
+ fontWeight: lightTheme.typography.fontWeightSemiBold,
+ color: `var(--muidocs-palette-grey-900, ${lightTheme.palette.grey[900]})`,
+ margin: '20px 0 6px',
+ },
+ '& h5': {
+ ...lightTheme.typography.subtitle2,
+ fontFamily: `"General Sans", ${lightTheme.typography.fontFamilySystem}`,
+ fontWeight: lightTheme.typography.fontWeightSemiBold,
+ color: `var(--muidocs-palette-grey-900, ${lightTheme.palette.grey[900]})`,
+ margin: '20px 0 8px',
+ },
+ '& p': {
+ marginTop: 0,
+ marginBottom: 16,
+ color: `var(--muidocs-palette-grey-900, ${lightTheme.palette.grey[900]})`,
+ },
+ '& ul, & ol': {
+ paddingLeft: 30,
+ marginTop: 0,
+ marginBottom: 16,
+ '& ul, & ol': {
+ marginBottom: 6,
+ },
+ },
+ '& h1, & h2, & h3, & h4': {
+ display: 'flex',
+ alignItems: 'center',
+ gap: 6,
+ '& code': {
+ fontSize: 'inherit',
+ lineHeight: 'inherit',
+ // Remove scroll on small screens.
+ wordBreak: 'break-all',
+ },
+ '& .title-link-to-anchor': {
+ color: 'inherit',
+ textDecoration: 'none',
+ position: 'relative',
+ display: 'flex',
+ alignItems: 'center',
+ },
+ '& .anchor-icon': {
+ // To prevent the link to get the focus.
+ display: 'inline-flex',
+ alignItems: 'center',
+ visibility: 'hidden',
+ },
+ '& a:not(.title-link-to-anchor):hover': {
+ color: 'currentColor',
+ border: 'none',
+ boxShadow: '0 1px 0 0 currentColor',
+ textDecoration: 'none',
+ },
+ '& .anchor-icon, & .comment-link': {
+ padding: 0,
+ cursor: 'pointer',
+ alignItems: 'center',
+ justifyContent: 'center',
+ flexShrink: 0,
+ textAlign: 'center',
+ marginLeft: 8,
+ height: 26,
+ width: 26,
+ 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})`,
+ borderRadius: 8,
+ '&:hover': {
+ backgroundColor: alpha(lightTheme.palette.primary[100], 0.4),
+ borderColor: `var(--muidocs-palette-primary-100, ${lightTheme.palette.primary[100]})`,
+ color: `var(--muidocs-palette-primary-main, ${lightTheme.palette.primary.main})`,
+ },
+ '& svg': {
+ height: 14,
+ width: 14,
+ fill: 'currentColor',
+ pointerEvents: 'none',
+ verticalAlign: 'middle',
+ },
+ },
+ '&:hover .anchor-icon': {
+ visibility: 'visible',
+ },
+ '& .comment-link': {
+ display: 'none', // So we can have the comment button opt-in.
+ marginLeft: 'auto',
+ transition: theme.transitions.create('opacity', {
+ duration: theme.transitions.duration.shortest,
+ }),
+ '& svg': {
+ fill: 'currentColor',
+ marginRight: 1.5,
+ },
+ },
+ },
+ '& h1 code, & h2 code, & h3 code': {
+ color: `var(--muidocs-palette-grey-900, ${lightTheme.palette.grey[900]})`,
+ },
+ '& h1 code': {
+ fontWeight: lightTheme.typography.fontWeightSemiBold,
+ },
+ '& h2 code': {
+ fontSize: lightTheme.typography.pxToRem(24),
+ fontWeight: lightTheme.typography.fontWeightSemiBold,
+ },
+ '& h3 code': {
+ fontSize: lightTheme.typography.pxToRem(18),
+ },
+ '& table': {
+ // Trade display table for scroll overflow
+ display: 'block',
+ wordBreak: 'normal',
+ overflowX: 'auto',
+ WebkitOverflowScrolling: 'touch',
+ borderCollapse: 'collapse',
+ marginBottom: '20px',
+ borderSpacing: 0,
+ '& .prop-name, & .prop-type, & .prop-default, & .slot-name, & .slot-defaultClass, & .slot-default':
+ {
+ fontWeight: 400,
+ fontFamily: lightTheme.typography.fontFamilyCode,
+ WebkitFontSmoothing: 'subpixel-antialiased',
+ fontSize: lightTheme.typography.pxToRem(13),
+ },
+ '& .required': {
+ color: '#006500',
+ },
+ '& .optional': {
+ color: '#45529f',
+ },
+ '& .prop-type, & .slot-defaultClass': {
+ color: '#932981',
+ },
+ '& .prop-default, & .slot-default': {
+ borderBottom: `1px dotted var(--muidocs-palette-divider, ${lightTheme.palette.divider})`,
+ },
+ },
+ '& td': {
+ ...theme.typography.body2,
+ borderBottom: `1px solid var(--muidocs-palette-divider, ${lightTheme.palette.divider})`,
+ paddingRight: 20,
+ paddingTop: 16,
+ paddingBottom: 16,
+ color: `var(--muidocs-palette-text-secondary, ${lightTheme.palette.text.secondary})`,
+ },
+ '& td code': {
+ lineHeight: 1.6,
+ },
+ '& th': {
+ fontSize: theme.typography.pxToRem(14),
+ lineHeight: theme.typography.pxToRem(24),
+ fontWeight: 500,
+ color: `var(--muidocs-palette-text-primary, ${lightTheme.palette.text.primary})`,
+ whiteSpace: 'pre',
+ borderBottom: `1px solid var(--muidocs-palette-divider, ${lightTheme.palette.divider})`,
+ paddingRight: 20,
+ paddingTop: 12,
+ paddingBottom: 12,
+ },
+ '& blockquote': {
+ position: 'relative',
+ padding: '0 16px',
+ margin: 0,
+ borderLeft: '1.5px solid',
+ borderColor: `var(--muidocs-palette-grey-200, ${lightTheme.palette.grey[200]})`,
+ '& p': {
+ fontSize: theme.typography.pxToRem(12.5),
+ fontFamily: lightTheme.typography.fontFamilyCode,
+ fontWeight: lightTheme.typography.fontWeightMedium,
+ lineHeight: theme.typography.pxToRem(24),
+ textIndent: 20,
+ },
+ '&::before': {
+ position: 'absolute',
+ // eslint-disable-next-line material-ui/straight-quotes
+ content: '"“"',
+ color: `var(--muidocs-palette-grey-300, ${lightTheme.palette.grey[300]})`,
+ fontSize: '2.5rem',
+ top: 8,
+ marginLeft: -6,
+ lineHeight: 0.5,
+ },
+ },
+ '& .MuiCallout-root': {
+ display: 'flex',
+ gap: 12,
+ padding: '16px',
+ margin: '16px 0',
+ border: '1px solid',
+ color: `var(--muidocs-palette-text-secondary, ${lightTheme.palette.text.secondary})`,
+ borderColor: `var(--muidocs-palette-grey-100, ${lightTheme.palette.grey[100]})`,
+ borderRadius: `var(--muidocs-shape-borderRadius, ${
+ theme.shape?.borderRadius ?? lightTheme.shape.borderRadius
+ }px)`,
+ '& > code': {
+ height: 'fit-content',
+ backgroundColor: `var(--muidocs-palette-grey-100, ${lightTheme.palette.grey[100]})`,
+ borderColor: `var(--muidocs-palette-grey-300, ${lightTheme.palette.grey[300]})`,
+ },
+ '& .MuiCallout-content': {
+ minWidth: 0, // Allows content to shrink. Useful when callout contains code block
+ flexGrow: 1,
+ '& > p:last-child, & > ul:last-child': {
+ // Avoid margin on last child
+ marginBottom: 0,
+ },
+ '& .MuiCode-root': {
+ '& > pre': {
+ margin: 0,
+ marginTop: 4,
+ },
+ },
+ '& > ul': {
+ // Because of the gap left by the icon, we visually need less padding
+ paddingLeft: 22,
+ },
+ },
+ '& > svg': {
+ marginTop: 2,
+ width: 20,
+ height: 20,
+ flexShrink: 0,
+ },
+ '& > ul, & > p': {
+ '&:last-child': {
+ margin: 0,
+ },
+ },
+ '& ul, li, p': {
+ color: 'inherit',
+ },
+ '&.MuiCallout-error': {
+ color: `var(--muidocs-palette-error-900, ${lightTheme.palette.error[900]})`,
+ backgroundColor: `var(--muidocs-palette-error-50, ${lightTheme.palette.error[50]})`,
+ borderColor: `var(--muidocs-palette-error-100, ${lightTheme.palette.error[100]})`,
+ '& strong': {
+ color: `var(--muidocs-palette-error-800, ${lightTheme.palette.error[800]})`,
+ },
+ '& > svg': {
+ fill: `var(--muidocs-palette-error-500, ${lightTheme.palette.error[600]})`,
+ },
+ '& a': {
+ color: `var(--muidocs-palette-error-800, ${lightTheme.palette.error[800]})`,
+ textDecorationColor: alpha(lightTheme.palette.error.main, 0.4),
+ '&:hover': {
+ textDecorationColor: 'inherit',
+ },
+ },
+ },
+ '&.MuiCallout-info': {
+ color: `var(--muidocs-palette-grey-900, ${lightTheme.palette.grey[900]})`,
+ backgroundColor: `var(--muidocs-palette-grey-50, ${lightTheme.palette.grey[50]})`,
+ borderColor: `var(--muidocs-palette-grey-100, ${lightTheme.palette.grey[100]})`,
+ '& strong': {
+ color: `var(--muidocs-palette-primary-800, ${lightTheme.palette.primary[800]})`,
+ },
+ '& > svg': {
+ fill: `var(--muidocs-palette-grey-600, ${lightTheme.palette.grey[600]})`,
+ },
+ },
+ '&.MuiCallout-success': {
+ color: `var(--muidocs-palette-success-900, ${lightTheme.palette.success[900]})`,
+ backgroundColor: `var(--muidocs-palette-success-50, ${lightTheme.palette.success[50]})`,
+ borderColor: `var(--muidocs-palette-success-100, ${lightTheme.palette.success[100]})`,
+ '& strong': {
+ color: `var(--muidocs-palette-success-900, ${lightTheme.palette.success[900]})`,
+ },
+ '& > svg': {
+ fill: `var(--muidocs-palette-success-600, ${lightTheme.palette.success[600]})`,
+ },
+ '& a': {
+ color: `var(--muidocs-palette-success-900, ${lightTheme.palette.success[900]})`,
+ textDecorationColor: alpha(lightTheme.palette.success.main, 0.4),
+ '&:hover': {
+ textDecorationColor: 'inherit',
+ },
+ },
+ },
+ '&.MuiCallout-warning': {
+ color: `var(--muidocs-palette-grey-900, ${lightTheme.palette.grey[900]})`,
+ backgroundColor: alpha(lightTheme.palette.warning[50], 0.5),
+ borderColor: alpha(lightTheme.palette.warning[700], 0.15),
+ '& strong': {
+ color: `var(--muidocs-palette-warning-800, ${lightTheme.palette.warning[800]})`,
+ },
+ '& > svg': {
+ fill: `var(--muidocs-palette-warning-600, ${lightTheme.palette.warning[600]})`,
+ },
+ '& a': {
+ color: `var(--muidocs-palette-warning-800, ${lightTheme.palette.warning[800]})`,
+ textDecorationColor: alpha(lightTheme.palette.warning.main, 0.4),
+ '&:hover': {
+ textDecorationColor: 'inherit',
+ },
+ },
+ },
+ },
+ '& a[target="_blank"]::after': {
+ content: '""',
+ maskImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' focusable='false' aria-hidden='true' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M6 6v2h8.59L5 17.59 6.41 19 16 9.41V18h2V6z'%3E%3C/path%3E%3C/svg%3E")`,
+ display: 'inline-flex',
+ width: '1em',
+ height: '1em',
+ color: 'inherit',
+ backgroundColor: 'currentColor',
+ transform: 'translate(0, 2px)',
+ transition: 'transform 0.3s cubic-bezier(0.1, 0.8, 0.3, 1)', // bounce effect
+ opacity: 0.8,
+ },
+ '& a[target="_blank"]:hover::after': {
+ opacity: 1,
+ transform: 'translate(1px, 0)',
+ },
+ '& 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:not(.title-link-to-anchor), & a:not(.title-link-to-anchor) code': {
+ // Style taken from the Link component
+ color: `var(--muidocs-palette-primary-600, ${lightTheme.palette.primary[600]})`,
+ fontWeight: theme.typography.fontWeightMedium,
+ textDecoration: 'underline',
+ textDecorationColor: alpha(lightTheme.palette.primary.main, 0.4),
+ '&:hover': {
+ textDecorationColor: 'inherit',
+ },
+ },
+ '& a code': {
+ color: darken(lightTheme.palette.primary.main, 0.04),
+ },
+ '& a:not(.title-link-to-anchor) code': {
+ color: darken(lightTheme.palette.primary.main, 0.2),
+ },
+ '& img, & video': {
+ // Use !important so that inline style on can't win.
+ // This avoid horizontal overflows on mobile.
+ maxWidth: '100% !important',
+ // Avoid the image to be fixed height, so it can respect the aspect ratio.
+ height: 'auto',
+ },
+ '& img': {
+ // Avoid layout jump
+ display: 'inline-block',
+ // Avoid very sharp edges
+ borderRadius: 2,
+ },
+ '& hr': {
+ height: 1,
+ margin: theme.spacing(5, 0),
+ border: 0,
+ flexShrink: 0,
+ backgroundColor: `var(--muidocs-palette-divider, ${lightTheme.palette.divider})`,
+ },
+ '& kbd.key': {
+ padding: 6,
+ display: 'inline-block',
+ whiteSpace: 'nowrap',
+ margin: '0 1px',
+ fontFamily: lightTheme.typography.fontFamilyCode,
+ fontSize: lightTheme.typography.pxToRem(11),
+ color: `var(--muidocs-palette-text-primary, ${lightTheme.palette.text.primary})`,
+ lineHeight: '10px',
+ verticalAlign: 'middle',
+ borderRadius: 6,
+ border: `1px solid var(--muidocs-palette-grey-300, ${lightTheme.palette.grey[300]})`,
+ backgroundColor: `var(--muidocs-palette-grey-50, ${lightTheme.palette.grey[50]})`,
+ 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),
+ 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 */',
+ position: 'relative',
+ // Font size reset to fix a bug with Safari 16.0 when letterSpacing is set
+ fontSize: 10,
+ '&:has(.MuiCode-title)': {
+ margin: theme.spacing(2, 'auto'),
+ border: `1px solid var(--muidocs-palette-primaryDark-700, ${lightTheme.palette.primaryDark[700]})`,
+ borderRadius: theme.shape.borderRadius,
+ overflow: 'clip',
+ '& .MuiCode-copy': {
+ top: '56px',
+ },
+ },
+ },
+ '& .MuiCode-copy-container': {
+ // This container is only used in demo and highlight code
+ position: 'sticky',
+ zIndex: 1,
+ top: 0,
+ },
+ '& .MuiCode-copy': {
+ display: 'inline-flex',
+ flexDirection: 'row-reverse',
+ alignItems: 'center',
+ width: 26,
+ height: 26,
+ cursor: 'pointer',
+ position: 'absolute',
+ top: 12,
+ right: 12,
+ padding: theme.spacing(0.5),
+ fontFamily: 'inherit',
+ fontWeight: 500,
+ borderRadius: 6,
+ border: 'none',
+ backgroundColor: 'hsl(210, 35%, 9%)', // using the code block one-off background color (defined in line 23)
+ color: '#FFF',
+ transition: theme.transitions.create(['background', 'borderColor', 'display'], {
+ duration: theme.transitions.duration.shortest,
+ }),
+ '& svg': {
+ userSelect: 'none',
+ width: theme.typography.pxToRem(16),
+ height: theme.typography.pxToRem(16),
+ display: 'inline-block',
+ fill: 'currentcolor',
+ flexShrink: 0,
+ fontSize: '18px',
+ margin: 'auto',
+ opacity: 0.5,
+ },
+ '& .MuiCode-copied-icon': {
+ display: 'none',
+ },
+ '&:hover, &:focus': {
+ backgroundColor: lightTheme.palette.primaryDark[600],
+ '& svg': {
+ opacity: 1,
+ },
+ '& .MuiCode-copyKeypress': {
+ display: 'block',
+ // Approximate no hover capabilities with no keyboard
+ // https://github.com/w3c/csswg-drafts/issues/3871
+ '@media (any-hover: none)': {
+ display: 'none',
+ },
+ },
+ },
+ '& .MuiCode-copyKeypress': {
+ display: 'none',
+ position: 'absolute',
+ right: 26,
+ },
+ '&[data-copied]': {
+ // style of the button when it is in copied state.
+ borderColor: lightTheme.palette.primary[700],
+ color: '#fff',
+ backgroundColor: lightTheme.palette.primaryDark[600],
+ '& .MuiCode-copy-icon': {
+ display: 'none',
+ },
+ '& .MuiCode-copied-icon': {
+ display: 'block',
+ },
+ },
+ },
+ '& .MuiCode-copyKeypress': {
+ pointerEvents: 'none',
+ userSelect: 'none',
+ marginRight: theme.spacing(1.2),
+ marginBottom: theme.spacing(0.2),
+ whiteSpace: 'nowrap',
+ opacity: 0.6,
+ },
+ '& li': {
+ // tight lists https://spec.commonmark.org/0.30/#tight
+ marginBottom: 4,
+ '& pre': {
+ marginTop: theme.spacing(1),
+ },
+ // loose lists https://spec.commonmark.org/0.30/#loose
+ '& > p': {
+ marginBottom: theme.spacing(1),
+ },
+ },
+ '& .feature-list': {
+ padding: 0,
+ listStyle: 'none',
+ '& li': {
+ marginBottom: 6,
+ display: 'flex',
+ alignItems: 'center',
+ gap: 12,
+ '::before': {
+ content: `url('/static/branding/pricing/yes-light.svg')`,
+ width: '18px',
+ height: '18px',
+ },
+ },
+ },
+ '& .MuiCode-title': {
+ padding: theme.spacing(1.5),
+ display: 'flex',
+ alignItems: 'center',
+ gap: theme.spacing(1.5),
+ borderBottom: `1px solid var(--muidocs-palette-primaryDark-700, ${lightTheme.palette.primaryDark[700]})`,
+ backgroundColor: `var(--muidocs-palette-primaryDark-900, ${lightTheme.palette.primaryDark[900]})`,
+ fontFamily: theme.typography.fontFamilyCode,
+ fontSize: theme.typography.pxToRem(12),
+ fontWeight: theme.typography.fontWeightBold,
+ color: `var(--muidocs-palette-grey-200, ${lightTheme.palette.grey[200]})`,
+ '::before': {
+ content: `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='M13.3333 3.99996H8L7.06 3.05996C6.80667 2.80663 6.46667 2.66663 6.11334 2.66663H2.66667C1.93334 2.66663 1.34 3.26663 1.34 3.99996L1.33334 12C1.33334 12.7333 1.93334 13.3333 2.66667 13.3333H13.3333C14.0667 13.3333 14.6667 12.7333 14.6667 12V5.33329C14.6667 4.59996 14.0667 3.99996 13.3333 3.99996ZM12.6667 12H3.33334C2.96667 12 2.66667 11.7 2.66667 11.3333V5.99996C2.66667 5.63329 2.96667 5.33329 3.33334 5.33329H12.6667C13.0333 5.33329 13.3333 5.63329 13.3333 5.99996V11.3333C13.3333 11.7 13.0333 12 12.6667 12Z' fill='%2399CCF3'/%3E%3C/svg%3E%0A");`,
+ width: '16px',
+ height: '16px',
+ },
+ '& + pre': {
+ margin: 0,
+ border: 'none',
+ borderRadius: 0,
+ },
+ },
+ }),
+ ({ theme }) => ({
+ [`:where(${theme.vars ? '[data-mui-color-scheme="dark"]' : '.mode-dark'}) &`]: {
+ color: 'rgb(255, 255, 255)',
+ '& :not(pre) > code': {
+ // inline code block
+ color: `var(--muidocs-palette-text-primary, ${darkTheme.palette.text.primary})`,
+ borderColor: alpha(darkTheme.palette.primaryDark[600], 0.6),
+ backgroundColor: `var(--muidocs-palette-grey-900, ${darkTheme.palette.grey[900]})`,
+ },
+ '& strong': {
+ color: `var(--muidocs-palette-grey-200, ${darkTheme.palette.grey[200]})`,
+ },
+ '& hr': {
+ backgroundColor: `var(--muidocs-palette-divider, ${darkTheme.palette.divider})`,
+ },
+ '& h1, & h2, & h3, & h4, & h5': {
+ color: `var(--muidocs-palette-grey-50, ${darkTheme.palette.grey[50]})`,
+ },
+ '& p, & ul, & ol': {
+ color: `var(--muidocs-palette-grey-400, ${darkTheme.palette.grey[400]})`,
+ },
+ '& h1, & h2, & h3, & h4': {
+ '&:hover .anchor-icon, & .comment-link': {
+ color: `var(--muidocs-palette-primary-300, ${darkTheme.palette.primaryDark[300]})`,
+ borderColor: `var(--muidocs-palette-divider, ${darkTheme.palette.divider})`,
+ 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),
+ color: `var(--muidocs-palette-primary-100, ${darkTheme.palette.primary[100]})`,
+ },
+ },
+ },
+ '& h1 code, & h2 code, & h3 code': {
+ color: `var(--muidocs-palette-grey-100, ${darkTheme.palette.grey[100]})`,
+ },
+ '& table': {
+ '& .required': {
+ color: '#a5ffa5',
+ },
+ '& .optional': {
+ color: '#a5b3ff',
+ },
+ '& .prop-type, & .slot-defaultClass': {
+ color: '#ffb6ec',
+ },
+ '& .prop-default, & .slot-default': {
+ borderColor: `var(--muidocs-palette-divider, ${darkTheme.palette.divider})`,
+ },
+ },
+ '& td': {
+ color: `var(--muidocs-palette-text-secondary, ${darkTheme.palette.text.secondary})`,
+ borderColor: `var(--muidocs-palette-divider, ${darkTheme.palette.divider})`,
+ },
+ '& th': {
+ color: `var(--muidocs-palette-text-primary, ${darkTheme.palette.text.primary})`,
+ borderColor: `var(--muidocs-palette-divider, ${darkTheme.palette.divider})`,
+ },
+ '& blockquote': {
+ borderColor: `var(--muidocs-palette-primaryDark-700, ${darkTheme.palette.primaryDark[700]})`,
+ '&::before': {
+ color: `var(--muidocs-palette-primaryDark-500, ${darkTheme.palette.primaryDark[500]})`,
+ },
+ },
+ '& .MuiCallout-root': {
+ borderColor: `var(--muidocs-palette-primaryDark-700, ${darkTheme.palette.primaryDark[700]})`,
+ '& > code': {
+ height: 'fit-content',
+ 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.15),
+ borderColor: alpha(darkTheme.palette.error[400], 0.1),
+ '& strong': {
+ color: `var(--muidocs-palette-error-300, ${darkTheme.palette.error[300]})`,
+ },
+ '& > svg': {
+ fill: `var(--muidocs-palette-error-500, ${darkTheme.palette.error[500]})`,
+ },
+ '& a': {
+ color: `var(--muidocs-palette-error-200, ${darkTheme.palette.error[200]})`,
+ },
+ },
+ '&.MuiCallout-info': {
+ color: `var(--muidocs-palette-grey-50, ${darkTheme.palette.grey[50]})`,
+ backgroundColor: alpha(darkTheme.palette.grey[700], 0.15),
+ borderColor: alpha(darkTheme.palette.grey[800], 0.5),
+ '& strong': {
+ color: `var(--muidocs-palette-primary-200, ${darkTheme.palette.primary[200]})`,
+ },
+ '& > svg': {
+ fill: `var(--muidocs-palette-grey-400, ${darkTheme.palette.grey[400]})`,
+ },
+ },
+ '&.MuiCallout-success': {
+ color: `var(--muidocs-palette-success-50, ${darkTheme.palette.success[50]})`,
+ backgroundColor: alpha(darkTheme.palette.success[700], 0.12),
+ borderColor: alpha(lightTheme.palette.success[400], 0.1),
+ '& strong': {
+ color: `var(--muidocs-palette-success-200, ${darkTheme.palette.success[200]})`,
+ },
+ '& > svg': {
+ fill: `var(--muidocs-palette-success-500, ${darkTheme.palette.success[500]})`,
+ },
+ '& a': {
+ color: `var(--muidocs-palette-success-100, ${darkTheme.palette.success[100]})`,
+ },
+ },
+ '&.MuiCallout-warning': {
+ color: `var(--muidocs-palette-warning-50, ${darkTheme.palette.warning[50]})`,
+ backgroundColor: alpha(darkTheme.palette.warning[700], 0.12),
+ borderColor: alpha(darkTheme.palette.warning[400], 0.1),
+ '& strong': {
+ color: `var(--muidocs-palette-warning-200, ${darkTheme.palette.warning[200]})`,
+ },
+ '& > svg': {
+ fill: `var(--muidocs-palette-warning-400, ${darkTheme.palette.warning[400]})`,
+ },
+ '& a': {
+ color: `var(--muidocs-palette-warning-100, ${darkTheme.palette.warning[100]})`,
+ },
+ },
+ },
+ '& a:not(.title-link-to-anchor), & a:not(.title-link-to-anchor) code': {
+ color: `var(--muidocs-palette-primary-300, ${darkTheme.palette.primary[300]})`,
+ },
+ '& a:not(.title-link-to-anchor) code': {
+ color: `var(--muidocs-palette-primary-light, ${darkTheme.palette.primary.light})`,
+ },
+ '& kbd.key': {
+ color: `var(--muidocs-palette-text-primary, ${darkTheme.palette.text.primary})`,
+ backgroundColor: `var(--muidocs-palette-primaryDark-800, ${darkTheme.palette.primaryDark[800]})`,
+ 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]})`,
+ },
+ },
+ '& .feature-list': {
+ '& li': {
+ '::before': {
+ content: `url('/static/branding/pricing/yes-dark.svg')`,
+ },
+ },
+ },
+ },
+ }),
+);
+
+export interface MarkdownElementProps {
+ className?: string;
+ renderedMarkdown?: string;
+}
+
+export const MarkdownElement = React.forwardRef(
+ function MarkdownElement(props, ref) {
+ const { className, renderedMarkdown, ...other } = props;
+ const more: React.ComponentProps = {};
+
+ if (typeof renderedMarkdown === 'string') {
+ // workaround for https://github.com/facebook/react/issues/17170
+ // otherwise we could just set `dangerouslySetInnerHTML={undefined}`
+ more.dangerouslySetInnerHTML = { __html: renderedMarkdown };
+ }
+
+ return {theme.vars.typography ? 'typography' : ''}
;
- }
-
- const { container } = render(
-
- ,
- );
-
- expect(container.firstChild?.textContent).not.to.equal('typography');
- });
-
it('should contain only `focus.thickness` in theme.vars', () => {
function Consumer() {
const theme = useTheme();
diff --git a/packages/mui-joy/src/styles/defaultTheme.test.js b/packages/mui-joy/src/styles/defaultTheme.test.js
index 25469909a49cd6..80e9c510728db0 100644
--- a/packages/mui-joy/src/styles/defaultTheme.test.js
+++ b/packages/mui-joy/src/styles/defaultTheme.test.js
@@ -9,6 +9,7 @@ describe('defaultTheme', () => {
'colorSchemeSelector',
'defaultColorScheme',
'breakpoints',
+ 'containerQueries',
'components',
'colorSchemes',
'focus',
@@ -46,4 +47,11 @@ describe('defaultTheme', () => {
expect(defaultTheme.palette.mode).to.equal('light');
expect(defaultTheme.palette.colorScheme).to.equal('light');
});
+
+ it('has `containerQueries` in the theme', () => {
+ expect(defaultTheme.containerQueries('sidebar').up('sm')).to.equal(
+ '@container sidebar (min-width:600px)',
+ );
+ expect(defaultTheme.containerQueries.up(300)).to.equal('@container (min-width:300px)');
+ });
});
diff --git a/packages/mui-joy/src/styles/extendTheme.test.js b/packages/mui-joy/src/styles/extendTheme.test.js
index c13f29d5c99315..f40613de688895 100644
--- a/packages/mui-joy/src/styles/extendTheme.test.js
+++ b/packages/mui-joy/src/styles/extendTheme.test.js
@@ -10,6 +10,7 @@ describe('extendTheme', () => {
expect([
'attribute',
'breakpoints',
+ 'containerQueries',
'colorSchemeSelector',
'components',
'colorSchemes',
@@ -152,6 +153,25 @@ describe('extendTheme', () => {
});
});
+ describe('typography', () => {
+ it('produce typography token by default', () => {
+ const theme = extendTheme();
+ expect(Object.keys(theme.vars.typography)).to.deep.equal([
+ 'h1',
+ 'h2',
+ 'h3',
+ 'h4',
+ 'title-lg',
+ 'title-md',
+ 'title-sm',
+ 'body-lg',
+ 'body-md',
+ 'body-sm',
+ 'body-xs',
+ ]);
+ });
+ });
+
describe('theme.unstable_sx', () => {
const { render } = createRenderer();
diff --git a/packages/mui-joy/src/styles/extendTheme.ts b/packages/mui-joy/src/styles/extendTheme.ts
index 7404c27310ef29..4bff671510dbf0 100644
--- a/packages/mui-joy/src/styles/extendTheme.ts
+++ b/packages/mui-joy/src/styles/extendTheme.ts
@@ -10,7 +10,9 @@ import {
unstable_styleFunctionSx as styleFunctionSx,
SxConfig,
} from '@mui/system';
+import cssContainerQueries from '@mui/system/cssContainerQueries';
import { unstable_applyStyles as applyStyles } from '@mui/system/createTheme';
+import { prepareTypographyVars } from '@mui/system/cssVars';
import { createUnarySpacing } from '@mui/system/spacing';
import defaultSxConfig from './sxConfig';
import colors from '../colors';
@@ -559,7 +561,7 @@ export default function extendTheme(themeOptions?: CssVarsThemeOptions): Theme {
? deepmerge(defaultScales, scalesInput)
: defaultScales;
- const theme = {
+ let theme = {
colorSchemes,
defaultColorScheme: 'light',
...mergedScales,
@@ -604,7 +606,9 @@ export default function extendTheme(themeOptions?: CssVarsThemeOptions): Theme {
cssVarPrefix,
getCssVar,
spacing: getSpacingVal(spacing),
+ typography: prepareTypographyVars(mergedScales.typography),
} as unknown as Theme & { attribute: string; colorSchemeSelector: string }; // Need type casting due to module augmentation inside the repo
+ theme = cssContainerQueries(theme);
/**
Color channels generation
@@ -675,6 +679,7 @@ export default function extendTheme(themeOptions?: CssVarsThemeOptions): Theme {
return createSpacing(spacing, createUnarySpacing(this));
};
theme.spacing = theme.generateSpacing();
+ theme.typography = mergedScales.typography as any; // cast to `any` to avoid internal module augmentation in the repo.
theme.unstable_sxConfig = {
...defaultSxConfig,
...themeOptions?.unstable_sxConfig,
diff --git a/packages/mui-joy/src/styles/shouldSkipGeneratingVar.ts b/packages/mui-joy/src/styles/shouldSkipGeneratingVar.ts
index d61b8f695cc5b8..1fed284abc8bc4 100644
--- a/packages/mui-joy/src/styles/shouldSkipGeneratingVar.ts
+++ b/packages/mui-joy/src/styles/shouldSkipGeneratingVar.ts
@@ -1,6 +1,6 @@
export default function shouldSkipGeneratingVar(keys: string[]) {
return (
- !!keys[0].match(/^(typography|variants|breakpoints)$/) ||
+ !!keys[0].match(/^(variants|breakpoints)$/) ||
!!keys[0].match(/sxConfig$/) || // ends with sxConfig
(keys[0] === 'palette' && !!keys[1]?.match(/^(mode)$/)) ||
(keys[0] === 'focus' && keys[1] !== 'thickness')
diff --git a/packages/mui-joy/src/styles/types/theme.ts b/packages/mui-joy/src/styles/types/theme.ts
index a75ec6487cba59..520ff6501472ce 100644
--- a/packages/mui-joy/src/styles/types/theme.ts
+++ b/packages/mui-joy/src/styles/types/theme.ts
@@ -1,6 +1,7 @@
import { OverridableStringUnion } from '@mui/types';
import {
Breakpoints,
+ CssContainerQueries,
Spacing,
SxProps as SystemSxProps,
SystemProps as SystemSystemProps,
@@ -8,6 +9,7 @@ import {
SxConfig,
ApplyStyles,
} from '@mui/system';
+import { ExtractTypographyTokens } from '@mui/system/cssVars';
import { DefaultColorScheme, ExtendedColorScheme } from './colorScheme';
import { ColorSystem } from './colorSystem';
import { Focus } from './focus';
@@ -82,7 +84,9 @@ export type ThemeScalesOptions = MergeDefault<
interface ColorSystemVars extends Omit {
palette: Omit;
}
-export interface ThemeVars extends ThemeScales, ColorSystemVars {}
+export interface ThemeVars extends ThemeScales, ColorSystemVars {
+ typography: ExtractTypographyTokens;
+}
export interface ThemeCssVarOverrides {}
@@ -95,7 +99,7 @@ export type TextColor =
export type ThemeCssVar = OverridableStringUnion, ThemeCssVarOverrides>;
-export interface Theme extends ThemeScales, RuntimeColorSystem {
+export interface Theme extends ThemeScales, RuntimeColorSystem, CssContainerQueries {
colorSchemes: Record;
defaultColorScheme: DefaultColorScheme | ExtendedColorScheme;
focus: Focus;
diff --git a/packages/mui-lab/package.json b/packages/mui-lab/package.json
index 4ba2dab61dbfaf..b67d469dc9f96e 100644
--- a/packages/mui-lab/package.json
+++ b/packages/mui-lab/package.json
@@ -1,6 +1,6 @@
{
"name": "@mui/lab",
- "version": "6.0.0-alpha.2",
+ "version": "6.0.0-alpha.3",
"private": false,
"author": "MUI Team",
"description": "Laboratory for new MUI modules.",
@@ -28,8 +28,7 @@
"url": "https://opencollective.com/mui-org"
},
"scripts": {
- "build": "pnpm build:legacy && pnpm build:modern && pnpm build:node && pnpm build:stable && pnpm build:types && pnpm build:copy-files",
- "build:legacy": "node ../../scripts/build.mjs legacy",
+ "build": "pnpm build:modern && pnpm build:node && pnpm build:stable && pnpm build:types && pnpm build:copy-files",
"build:modern": "node ../../scripts/build.mjs modern",
"build:node": "node ../../scripts/build.mjs node",
"build:stable": "node ../../scripts/build.mjs stable",
diff --git a/packages/mui-material-nextjs/package.json b/packages/mui-material-nextjs/package.json
index 6f916e47fe5983..431d6d7ebcd00f 100644
--- a/packages/mui-material-nextjs/package.json
+++ b/packages/mui-material-nextjs/package.json
@@ -24,8 +24,7 @@
"url": "https://opencollective.com/mui-org"
},
"scripts": {
- "build": "pnpm build:legacy && pnpm build:modern && pnpm build:node && pnpm build:stable && pnpm build:types && pnpm build:copy-files",
- "build:legacy": "node ../../scripts/build.mjs legacy",
+ "build": "pnpm build:modern && pnpm build:node && pnpm build:stable && pnpm build:types && pnpm build:copy-files",
"build:modern": "node ../../scripts/build.mjs modern",
"build:node": "node ../../scripts/build.mjs node",
"build:stable": "node ../../scripts/build.mjs stable",
diff --git a/packages/mui-material/package.json b/packages/mui-material/package.json
index f886dbe530351e..5ca205a01008b9 100644
--- a/packages/mui-material/package.json
+++ b/packages/mui-material/package.json
@@ -1,6 +1,6 @@
{
"name": "@mui/material",
- "version": "6.0.0-alpha.2",
+ "version": "6.0.0-alpha.3",
"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.",
@@ -27,8 +27,7 @@
"url": "https://opencollective.com/mui-org"
},
"scripts": {
- "build": "pnpm build:legacy && pnpm build:modern && pnpm build:node && pnpm build:stable && pnpm build:umd && pnpm build:types && pnpm build:copy-files",
- "build:legacy": "node ../../scripts/build.mjs legacy",
+ "build": "pnpm build:modern && pnpm build:node && pnpm build:stable && pnpm build:umd && pnpm build:types && pnpm build:copy-files",
"build:modern": "node ../../scripts/build.mjs modern",
"build:node": "node ../../scripts/build.mjs node",
"build:stable": "node ../../scripts/build.mjs stable",
diff --git a/packages/mui-material/src/AppBar/AppBar.js b/packages/mui-material/src/AppBar/AppBar.js
index ddc0befd8e9286..2d85cb28fb18e0 100644
--- a/packages/mui-material/src/AppBar/AppBar.js
+++ b/packages/mui-material/src/AppBar/AppBar.js
@@ -70,7 +70,6 @@ const AppBarRoot = styled(Paper, {
{
props: { position: 'sticky' },
style: {
- // ⚠️ sticky is not supported by IE11.
position: 'sticky',
zIndex: (theme.vars || theme).zIndex.appBar,
top: 0,
diff --git a/packages/mui-material/src/Avatar/Avatar.js b/packages/mui-material/src/Avatar/Avatar.js
index a4aea78bd739ca..051e9d0c7339fc 100644
--- a/packages/mui-material/src/Avatar/Avatar.js
+++ b/packages/mui-material/src/Avatar/Avatar.js
@@ -86,7 +86,7 @@ const AvatarImg = styled('img', {
width: '100%',
height: '100%',
textAlign: 'center',
- // Handle non-square image. The property isn't supported by IE11.
+ // Handle non-square image.
objectFit: 'cover',
// Hide alt text.
color: 'transparent',
diff --git a/packages/mui-material/src/CardMedia/CardMedia.js b/packages/mui-material/src/CardMedia/CardMedia.js
index a721e873db1b42..94d3746941c149 100644
--- a/packages/mui-material/src/CardMedia/CardMedia.js
+++ b/packages/mui-material/src/CardMedia/CardMedia.js
@@ -43,7 +43,6 @@ const CardMediaRoot = styled('div', {
{
props: { isImageComponent: true },
style: {
- // ⚠️ object-fit is not supported by IE11.
objectFit: 'cover',
},
},
diff --git a/packages/mui-material/src/CircularProgress/CircularProgress.js b/packages/mui-material/src/CircularProgress/CircularProgress.js
index 2b81f050eb44d5..ec9762b0e23c9b 100644
--- a/packages/mui-material/src/CircularProgress/CircularProgress.js
+++ b/packages/mui-material/src/CircularProgress/CircularProgress.js
@@ -39,13 +39,22 @@ const circularDashKeyframe = keyframes`
}
`;
-const rotateAnimation = css`
- animation: ${circularRotateKeyframe} 1.4s linear infinite;
-`;
+// This implementation is for supporting both Styled-components v4+ and Pigment CSS.
+// A global animation has to be created here for Styled-components v4+ (https://github.com/styled-components/styled-components/blob/main/packages/styled-components/src/utils/errors.md#12).
+// which can be done by checking typeof indeterminate1Keyframe !== 'string' (at runtime, Pigment CSS transform keyframes`` to a string).
+const rotateAnimation =
+ typeof circularRotateKeyframe !== 'string'
+ ? css`
+ animation: ${circularRotateKeyframe} 1.4s linear infinite;
+ `
+ : null;
-const dashAnimation = css`
- animation: ${circularDashKeyframe} 1.4s ease-in-out infinite;
-`;
+const dashAnimation =
+ typeof circularDashKeyframe !== 'string'
+ ? css`
+ animation: ${circularDashKeyframe} 1.4s ease-in-out infinite;
+ `
+ : null;
const useUtilityClasses = (ownerState) => {
const { classes, variant, color, disableShrink } = ownerState;
@@ -86,13 +95,9 @@ const CircularProgressRoot = styled('span', {
props: {
variant: 'indeterminate',
},
- style:
- // For Styled-components v4+: https://github.com/styled-components/styled-components/blob/main/packages/styled-components/src/utils/errors.md#12
- rotateAnimation !== 'string'
- ? rotateAnimation
- : {
- animation: `${circularRotateKeyframe} 1.4s linear infinite`,
- },
+ style: rotateAnimation || {
+ animation: `${circularRotateKeyframe} 1.4s linear infinite`,
+ },
},
...Object.entries(theme.palette)
.filter(([, palette]) => palette.main)
@@ -147,15 +152,12 @@ const CircularProgressCircle = styled('circle', {
},
},
{
- // For Styled-components v4+: https://github.com/styled-components/styled-components/blob/main/packages/styled-components/src/utils/errors.md#12
props: ({ ownerState }) =>
ownerState.variant === 'indeterminate' && !ownerState.disableShrink,
- style:
- typeof dashAnimation !== 'string'
- ? dashAnimation
- : {
- animation: `${circularDashKeyframe} 1.4s ease-in-out infinite`,
- },
+ style: dashAnimation || {
+ // At runtime for Pigment CSS, `bufferAnimation` will be null and the generated keyframe will be used.
+ animation: `${circularDashKeyframe} 1.4s ease-in-out infinite`,
+ },
},
],
}));
diff --git a/packages/mui-material/src/IconButton/IconButton.js b/packages/mui-material/src/IconButton/IconButton.js
index 902008d145f9ba..d8e82be194ce65 100644
--- a/packages/mui-material/src/IconButton/IconButton.js
+++ b/packages/mui-material/src/IconButton/IconButton.js
@@ -5,12 +5,13 @@ import clsx from 'clsx';
import chainPropTypes from '@mui/utils/chainPropTypes';
import composeClasses from '@mui/utils/composeClasses';
import { alpha } from '@mui/system/colorManipulator';
-import styled from '../styles/styled';
-import useThemeProps from '../styles/useThemeProps';
+import { styled, createUseThemeProps } from '../zero-styled';
import ButtonBase from '../ButtonBase';
import capitalize from '../utils/capitalize';
import iconButtonClasses, { getIconButtonUtilityClass } from './iconButtonClasses';
+const useThemeProps = createUseThemeProps('MuiIconButton');
+
const useUtilityClasses = (ownerState) => {
const { classes, disabled, color, edge, size } = ownerState;
@@ -41,7 +42,7 @@ const IconButtonRoot = styled(ButtonBase, {
];
},
})(
- ({ theme, ownerState }) => ({
+ ({ theme }) => ({
textAlign: 'center',
flex: '0 0 auto',
fontSize: theme.typography.pxToRem(24),
@@ -52,55 +53,98 @@ const IconButtonRoot = styled(ButtonBase, {
transition: theme.transitions.create('background-color', {
duration: theme.transitions.duration.shortest,
}),
- ...(!ownerState.disableRipple && {
- '&:hover': {
- backgroundColor: theme.vars
- ? `rgba(${theme.vars.palette.action.activeChannel} / ${theme.vars.palette.action.hoverOpacity})`
- : alpha(theme.palette.action.active, theme.palette.action.hoverOpacity),
- // Reset on touch devices, it doesn't add specificity
- '@media (hover: none)': {
- backgroundColor: 'transparent',
+ variants: [
+ {
+ props: { disableRipple: false },
+ style: {
+ '&:hover': {
+ backgroundColor: theme.vars
+ ? `rgba(${theme.vars.palette.action.activeChannel} / ${theme.vars.palette.action.hoverOpacity})`
+ : alpha(theme.palette.action.active, theme.palette.action.hoverOpacity),
+ // Reset on touch devices, it doesn't add specificity
+ '@media (hover: none)': {
+ backgroundColor: 'transparent',
+ },
+ },
},
},
- }),
- ...(ownerState.edge === 'start' && {
- marginLeft: ownerState.size === 'small' ? -3 : -12,
- }),
- ...(ownerState.edge === 'end' && {
- marginRight: ownerState.size === 'small' ? -3 : -12,
- }),
+ {
+ props: { edge: 'start' },
+ style: {
+ marginLeft: -12,
+ },
+ },
+ {
+ props: { edge: 'start', size: 'small' },
+ style: {
+ marginLeft: -3,
+ },
+ },
+ {
+ props: { edge: 'end' },
+ style: {
+ marginRight: -12,
+ },
+ },
+ {
+ props: { edge: 'end', size: 'small' },
+ style: {
+ marginRight: -3,
+ },
+ },
+ ],
}),
- ({ theme, ownerState }) => {
- const palette = (theme.vars || theme).palette?.[ownerState.color];
+ ({ theme }) => {
return {
- ...(ownerState.color === 'inherit' && {
- color: 'inherit',
- }),
- ...(ownerState.color !== 'inherit' &&
- ownerState.color !== 'default' && {
- color: palette?.main,
- ...(!ownerState.disableRipple && {
- '&:hover': {
- ...(palette && {
+ variants: [
+ {
+ props: { color: 'inherit' },
+ style: {
+ color: 'inherit',
+ },
+ },
+ ...Object.entries(theme.palette)
+ .filter(([, value]) => value.main) // check all the used fields in the style below
+ .map(([color]) => ({
+ props: { color },
+ style: {
+ color: (theme.vars || theme).palette[color].main,
+ },
+ })),
+ ...Object.entries(theme.palette)
+ .filter(([, value]) => value.main) // check all the used fields in the style below
+ .map(([color]) => ({
+ props: { color, disableRipple: false },
+ style: {
+ '&:hover': {
backgroundColor: theme.vars
- ? `rgba(${palette.mainChannel} / ${theme.vars.palette.action.hoverOpacity})`
- : alpha(palette.main, theme.palette.action.hoverOpacity),
- }),
- // Reset on touch devices, it doesn't add specificity
- '@media (hover: none)': {
- backgroundColor: 'transparent',
+ ? `rgba(${(theme.vars || theme).palette[color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})`
+ : alpha(
+ (theme.vars || theme).palette[color].main,
+ theme.palette.action.hoverOpacity,
+ ),
+ // Reset on touch devices, it doesn't add specificity
+ '@media (hover: none)': {
+ backgroundColor: 'transparent',
+ },
},
},
- }),
- }),
- ...(ownerState.size === 'small' && {
- padding: 5,
- fontSize: theme.typography.pxToRem(18),
- }),
- ...(ownerState.size === 'large' && {
- padding: 12,
- fontSize: theme.typography.pxToRem(28),
- }),
+ })),
+ {
+ props: { size: 'small' },
+ style: {
+ padding: 5,
+ fontSize: theme.typography.pxToRem(18),
+ },
+ },
+ {
+ props: { size: 'large' },
+ style: {
+ padding: 12,
+ fontSize: theme.typography.pxToRem(28),
+ },
+ },
+ ],
[`&.${iconButtonClasses.disabled}`]: {
backgroundColor: 'transparent',
color: (theme.vars || theme).palette.action.disabled,
diff --git a/packages/mui-material/src/LinearProgress/LinearProgress.js b/packages/mui-material/src/LinearProgress/LinearProgress.js
index bb9d8b85cafb3d..c1b70fb5af7398 100644
--- a/packages/mui-material/src/LinearProgress/LinearProgress.js
+++ b/packages/mui-material/src/LinearProgress/LinearProgress.js
@@ -3,14 +3,14 @@ import * as React from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import composeClasses from '@mui/utils/composeClasses';
-import { keyframes, css } from '@mui/system';
import { darken, lighten } from '@mui/system/colorManipulator';
import { useRtl } from '@mui/system/RtlProvider';
+import { keyframes, css, styled, createUseThemeProps } from '../zero-styled';
import capitalize from '../utils/capitalize';
-import styled from '../styles/styled';
-import useThemeProps from '../styles/useThemeProps';
import { getLinearProgressUtilityClass } from './linearProgressClasses';
+const useThemeProps = createUseThemeProps('MuiLinearProgress');
+
const TRANSITION_DURATION = 4; // seconds
const indeterminate1Keyframe = keyframes`
0% {
@@ -29,6 +29,16 @@ const indeterminate1Keyframe = keyframes`
}
`;
+// This implementation is for supporting both Styled-components v4+ and Pigment CSS.
+// A global animation has to be created here for Styled-components v4+ (https://github.com/styled-components/styled-components/blob/main/packages/styled-components/src/utils/errors.md#12).
+// which can be done by checking typeof indeterminate1Keyframe !== 'string' (at runtime, Pigment CSS transform keyframes`` to a string).
+const indeterminate1Animation =
+ typeof indeterminate1Keyframe !== 'string'
+ ? css`
+ animation: ${indeterminate1Keyframe} 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
+ `
+ : null;
+
const indeterminate2Keyframe = keyframes`
0% {
left: -200%;
@@ -45,6 +55,12 @@ const indeterminate2Keyframe = keyframes`
right: -8%;
}
`;
+const indeterminate2Animation =
+ typeof indeterminate2Keyframe !== 'string'
+ ? css`
+ animation: ${indeterminate2Keyframe} 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) 1.15s infinite;
+ `
+ : null;
const bufferKeyframe = keyframes`
0% {
@@ -62,6 +78,12 @@ const bufferKeyframe = keyframes`
background-position: -200px -23px;
}
`;
+const bufferAnimation =
+ typeof bufferKeyframe !== 'string'
+ ? css`
+ animation: ${bufferKeyframe} 3s infinite linear;
+ `
+ : null;
const useUtilityClasses = (ownerState) => {
const { classes, variant, color } = ownerState;
@@ -89,9 +111,6 @@ const useUtilityClasses = (ownerState) => {
};
const getColorShade = (theme, color) => {
- if (color === 'inherit') {
- return 'currentColor';
- }
if (theme.vars) {
return theme.vars.palette.LinearProgress[`${color}Bg`];
}
@@ -112,32 +131,49 @@ const LinearProgressRoot = styled('span', {
styles[ownerState.variant],
];
},
-})(({ ownerState, theme }) => ({
+})(({ theme }) => ({
position: 'relative',
overflow: 'hidden',
display: 'block',
height: 4,
- zIndex: 0, // Fix Safari's bug during composition of different paint.
+ // Fix Safari's bug during composition of different paint.
+ zIndex: 0,
'@media print': {
colorAdjust: 'exact',
},
- backgroundColor: getColorShade(theme, ownerState.color),
- ...(ownerState.color === 'inherit' &&
- ownerState.variant !== 'buffer' && {
- backgroundColor: 'none',
- '&::before': {
- content: '""',
- position: 'absolute',
- left: 0,
- top: 0,
- right: 0,
- bottom: 0,
- backgroundColor: 'currentColor',
- opacity: 0.3,
+ variants: [
+ ...Object.entries(theme.palette)
+ .filter(([, value]) => value.main)
+ .map(([color]) => ({
+ props: { color },
+ style: {
+ backgroundColor: getColorShade(theme, color),
+ },
+ })),
+ {
+ props: ({ ownerState }) => ownerState.color === 'inherit' && ownerState.variant !== 'buffer',
+ style: {
+ '&::before': {
+ content: '""',
+ position: 'absolute',
+ left: 0,
+ top: 0,
+ right: 0,
+ bottom: 0,
+ backgroundColor: 'currentColor',
+ opacity: 0.3,
+ },
},
- }),
- ...(ownerState.variant === 'buffer' && { backgroundColor: 'transparent' }),
- ...(ownerState.variant === 'query' && { transform: 'rotate(180deg)' }),
+ },
+ {
+ props: { variant: 'buffer' },
+ style: { backgroundColor: 'transparent' },
+ },
+ {
+ props: { variant: 'query' },
+ style: { transform: 'rotate(180deg)' },
+ },
+ ],
}));
const LinearProgressDashed = styled('span', {
@@ -149,25 +185,38 @@ const LinearProgressDashed = styled('span', {
return [styles.dashed, styles[`dashedColor${capitalize(ownerState.color)}`]];
},
})(
- ({ ownerState, theme }) => {
- const backgroundColor = getColorShade(theme, ownerState.color);
-
- return {
- position: 'absolute',
- marginTop: 0,
- height: '100%',
- width: '100%',
- ...(ownerState.color === 'inherit' && {
- opacity: 0.3,
- }),
- backgroundImage: `radial-gradient(${backgroundColor} 0%, ${backgroundColor} 16%, transparent 42%)`,
- backgroundSize: '10px 10px',
- backgroundPosition: '0 -23px',
- };
+ ({ theme }) => ({
+ position: 'absolute',
+ marginTop: 0,
+ height: '100%',
+ width: '100%',
+ backgroundSize: '10px 10px',
+ backgroundPosition: '0 -23px',
+ variants: [
+ {
+ props: { color: 'inherit' },
+ style: {
+ opacity: 0.3,
+ backgroundImage: `radial-gradient(currentColor 0%, currentColor 16%, transparent 42%)`,
+ },
+ },
+ ...Object.entries(theme.palette)
+ .filter(([, value]) => value.main)
+ .map(([color]) => {
+ const backgroundColor = getColorShade(theme, color);
+ return {
+ props: { color },
+ style: {
+ backgroundImage: `radial-gradient(${backgroundColor} 0%, ${backgroundColor} 16%, transparent 42%)`,
+ },
+ };
+ }),
+ ],
+ }),
+ bufferAnimation || {
+ // At runtime for Pigment CSS, `bufferAnimation` will be null and the generated keyframe will be used.
+ animation: `${bufferKeyframe} 3s infinite linear`,
},
- css`
- animation: ${bufferKeyframe} 3s infinite linear;
- `,
);
const LinearProgressBar1 = styled('span', {
@@ -185,34 +234,64 @@ const LinearProgressBar1 = styled('span', {
ownerState.variant === 'buffer' && styles.bar1Buffer,
];
},
-})(
- ({ ownerState, theme }) => ({
- width: '100%',
- position: 'absolute',
- left: 0,
- bottom: 0,
- top: 0,
- transition: 'transform 0.2s linear',
- transformOrigin: 'left',
- backgroundColor:
- ownerState.color === 'inherit'
- ? 'currentColor'
- : (theme.vars || theme).palette[ownerState.color].main,
- ...(ownerState.variant === 'determinate' && {
- transition: `transform .${TRANSITION_DURATION}s linear`,
- }),
- ...(ownerState.variant === 'buffer' && {
- zIndex: 1,
- transition: `transform .${TRANSITION_DURATION}s linear`,
- }),
- }),
- ({ ownerState }) =>
- (ownerState.variant === 'indeterminate' || ownerState.variant === 'query') &&
- css`
- width: auto;
- animation: ${indeterminate1Keyframe} 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
- `,
-);
+})(({ theme }) => ({
+ width: '100%',
+ position: 'absolute',
+ left: 0,
+ bottom: 0,
+ top: 0,
+ transition: 'transform 0.2s linear',
+ transformOrigin: 'left',
+ variants: [
+ {
+ props: {
+ color: 'inherit',
+ },
+ style: {
+ backgroundColor: 'currentColor',
+ },
+ },
+ ...Object.entries(theme.palette)
+ .filter(([, value]) => value.main)
+ .map(([color]) => ({
+ props: { color },
+ style: {
+ backgroundColor: (theme.vars || theme).palette[color].main,
+ },
+ })),
+ {
+ props: {
+ variant: 'determinate',
+ },
+ style: {
+ transition: `transform .${TRANSITION_DURATION}s linear`,
+ },
+ },
+ {
+ props: {
+ variant: 'buffer',
+ },
+ style: {
+ zIndex: 1,
+ transition: `transform .${TRANSITION_DURATION}s linear`,
+ },
+ },
+ {
+ props: ({ ownerState }) =>
+ ownerState.variant === 'indeterminate' || ownerState.variant === 'query',
+ style: {
+ width: 'auto',
+ },
+ },
+ {
+ props: ({ ownerState }) =>
+ ownerState.variant === 'indeterminate' || ownerState.variant === 'query',
+ style: indeterminate1Animation || {
+ animation: `${indeterminate1Keyframe} 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite`,
+ },
+ },
+ ],
+}));
const LinearProgressBar2 = styled('span', {
name: 'MuiLinearProgress',
@@ -228,36 +307,62 @@ const LinearProgressBar2 = styled('span', {
ownerState.variant === 'buffer' && styles.bar2Buffer,
];
},
-})(
- ({ ownerState, theme }) => ({
- width: '100%',
- position: 'absolute',
- left: 0,
- bottom: 0,
- top: 0,
- transition: 'transform 0.2s linear',
- transformOrigin: 'left',
- ...(ownerState.variant !== 'buffer' && {
- backgroundColor:
- ownerState.color === 'inherit'
- ? 'currentColor'
- : (theme.vars || theme).palette[ownerState.color].main,
- }),
- ...(ownerState.color === 'inherit' && {
- opacity: 0.3,
- }),
- ...(ownerState.variant === 'buffer' && {
- backgroundColor: getColorShade(theme, ownerState.color),
- transition: `transform .${TRANSITION_DURATION}s linear`,
- }),
- }),
- ({ ownerState }) =>
- (ownerState.variant === 'indeterminate' || ownerState.variant === 'query') &&
- css`
- width: auto;
- animation: ${indeterminate2Keyframe} 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) 1.15s infinite;
- `,
-);
+})(({ theme }) => ({
+ width: '100%',
+ position: 'absolute',
+ left: 0,
+ bottom: 0,
+ top: 0,
+ transition: 'transform 0.2s linear',
+ transformOrigin: 'left',
+ variants: [
+ ...Object.entries(theme.palette)
+ .filter(([, value]) => value.main)
+ .map(([color]) => ({
+ props: { color },
+ style: {
+ '--LinearProgressBar2-barColor': (theme.vars || theme).palette[color].main,
+ },
+ })),
+ {
+ props: ({ ownerState }) => ownerState.variant !== 'buffer' && ownerState.color !== 'inherit',
+ style: {
+ backgroundColor: 'var(--LinearProgressBar2-barColor, currentColor)',
+ },
+ },
+ {
+ props: {
+ color: 'inherit',
+ },
+ style: {
+ opacity: 0.3,
+ },
+ },
+ ...Object.entries(theme.palette)
+ .filter(([, value]) => value.main)
+ .map(([color]) => ({
+ props: { color, variant: 'buffer' },
+ style: {
+ backgroundColor: getColorShade(theme, color),
+ transition: `transform .${TRANSITION_DURATION}s linear`,
+ },
+ })),
+ {
+ props: ({ ownerState }) =>
+ ownerState.variant === 'indeterminate' || ownerState.variant === 'query',
+ style: {
+ width: 'auto',
+ },
+ },
+ {
+ props: ({ ownerState }) =>
+ ownerState.variant === 'indeterminate' || ownerState.variant === 'query',
+ style: indeterminate2Animation || {
+ animation: `${indeterminate2Keyframe} 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) 1.15s infinite`,
+ },
+ },
+ ],
+}));
/**
* ## ARIA
diff --git a/packages/mui-material/src/Radio/Radio.js b/packages/mui-material/src/Radio/Radio.js
index 71025ca11975d4..04e8e6d2cfacb5 100644
--- a/packages/mui-material/src/Radio/Radio.js
+++ b/packages/mui-material/src/Radio/Radio.js
@@ -6,13 +6,15 @@ import refType from '@mui/utils/refType';
import composeClasses from '@mui/utils/composeClasses';
import { alpha } from '@mui/system/colorManipulator';
import SwitchBase from '../internal/SwitchBase';
-import useThemeProps from '../styles/useThemeProps';
import RadioButtonIcon from './RadioButtonIcon';
import capitalize from '../utils/capitalize';
import createChainedFunction from '../utils/createChainedFunction';
import useRadioGroup from '../RadioGroup/useRadioGroup';
import radioClasses, { getRadioUtilityClass } from './radioClasses';
-import styled, { rootShouldForwardProp } from '../styles/styled';
+import { rootShouldForwardProp } from '../styles/styled';
+import { styled, createUseThemeProps } from '../zero-styled';
+
+const useThemeProps = createUseThemeProps('MuiRadio');
const useUtilityClasses = (ownerState) => {
const { classes, color, size } = ownerState;
@@ -40,36 +42,57 @@ const RadioRoot = styled(SwitchBase, {
styles[`color${capitalize(ownerState.color)}`],
];
},
-})(({ theme, ownerState }) => ({
+})(({ theme }) => ({
color: (theme.vars || theme).palette.text.secondary,
- ...(!ownerState.disableRipple && {
- '&:hover': {
- backgroundColor: theme.vars
- ? `rgba(${
- ownerState.color === 'default'
- ? theme.vars.palette.action.activeChannel
- : theme.vars.palette[ownerState.color].mainChannel
- } / ${theme.vars.palette.action.hoverOpacity})`
- : alpha(
- ownerState.color === 'default'
- ? theme.palette.action.active
- : theme.palette[ownerState.color].main,
- theme.palette.action.hoverOpacity,
- ),
- // Reset on touch devices, it doesn't add specificity
- '@media (hover: none)': {
- backgroundColor: 'transparent',
- },
- },
- }),
- ...(ownerState.color !== 'default' && {
- [`&.${radioClasses.checked}`]: {
- color: (theme.vars || theme).palette[ownerState.color].main,
- },
- }),
[`&.${radioClasses.disabled}`]: {
color: (theme.vars || theme).palette.action.disabled,
},
+ variants: [
+ {
+ props: { color: 'default', disableRipple: false },
+ style: {
+ '&:hover': {
+ backgroundColor: theme.vars
+ ? `rgba(${theme.vars.palette.action.activeChannel} / ${theme.vars.palette.action.hoverOpacity})`
+ : alpha(theme.palette.action.active, theme.palette.action.hoverOpacity),
+ },
+ },
+ },
+ ...Object.entries(theme.palette)
+ .filter(([, palette]) => palette.main)
+ .map(([color]) => ({
+ props: { color, disableRipple: false },
+ style: {
+ '&:hover': {
+ backgroundColor: theme.vars
+ ? `rgba(${theme.vars.palette[color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})`
+ : alpha(theme.palette[color].main, theme.palette.action.hoverOpacity),
+ },
+ },
+ })),
+ ...Object.entries(theme.palette)
+ .filter(([, palette]) => palette.main)
+ .map(([color]) => ({
+ props: { color },
+ style: {
+ [`&.${radioClasses.checked}`]: {
+ color: (theme.vars || theme).palette[color].main,
+ },
+ },
+ })),
+ {
+ // Should be last to override other colors
+ props: { disableRipple: false },
+ style: {
+ // Reset on touch devices, it doesn't add specificity
+ '&:hover': {
+ '@media (hover: none)': {
+ backgroundColor: 'transparent',
+ },
+ },
+ },
+ },
+ ],
}));
function areEqualValues(a, b) {
diff --git a/packages/mui-material/src/Radio/RadioButtonIcon.js b/packages/mui-material/src/Radio/RadioButtonIcon.js
index d38eba60cff2ee..817981d374f4de 100644
--- a/packages/mui-material/src/Radio/RadioButtonIcon.js
+++ b/packages/mui-material/src/Radio/RadioButtonIcon.js
@@ -3,7 +3,8 @@ import * as React from 'react';
import PropTypes from 'prop-types';
import RadioButtonUncheckedIcon from '../internal/svg-icons/RadioButtonUnchecked';
import RadioButtonCheckedIcon from '../internal/svg-icons/RadioButtonChecked';
-import styled, { rootShouldForwardProp } from '../styles/styled';
+import { rootShouldForwardProp } from '../styles/styled';
+import { styled } from '../zero-styled';
const RadioButtonIconRoot = styled('span', { shouldForwardProp: rootShouldForwardProp })({
position: 'relative',
@@ -15,7 +16,7 @@ const RadioButtonIconBackground = styled(RadioButtonUncheckedIcon)({
transform: 'scale(1)',
});
-const RadioButtonIconDot = styled(RadioButtonCheckedIcon)(({ theme, ownerState }) => ({
+const RadioButtonIconDot = styled(RadioButtonCheckedIcon)(({ theme }) => ({
left: 0,
position: 'absolute',
transform: 'scale(0)',
@@ -23,13 +24,18 @@ const RadioButtonIconDot = styled(RadioButtonCheckedIcon)(({ theme, ownerState }
easing: theme.transitions.easing.easeIn,
duration: theme.transitions.duration.shortest,
}),
- ...(ownerState.checked && {
- transform: 'scale(1)',
- transition: theme.transitions.create('transform', {
- easing: theme.transitions.easing.easeOut,
- duration: theme.transitions.duration.shortest,
- }),
- }),
+ variants: [
+ {
+ props: { checked: true },
+ style: {
+ transform: 'scale(1)',
+ transition: theme.transitions.create('transform', {
+ easing: theme.transitions.easing.easeOut,
+ duration: theme.transitions.duration.shortest,
+ }),
+ },
+ },
+ ],
}));
/**
@@ -52,7 +58,7 @@ function RadioButtonIcon(props) {
);
}
-RadioButtonIcon.propTypes = {
+RadioButtonIcon.propTypes /* remove-proptypes */ = {
/**
* If `true`, the component is checked.
*/
diff --git a/packages/mui-material/src/Tooltip/Tooltip.js b/packages/mui-material/src/Tooltip/Tooltip.js
index 05cea653d79888..dc71ddee0481ff 100644
--- a/packages/mui-material/src/Tooltip/Tooltip.js
+++ b/packages/mui-material/src/Tooltip/Tooltip.js
@@ -473,8 +473,7 @@ const Tooltip = React.forwardRef(function Tooltip(inProps, ref) {
* @param {KeyboardEvent} nativeEvent
*/
function handleKeyDown(nativeEvent) {
- // IE11, Edge (prior to using Bink?) use 'Esc'
- if (nativeEvent.key === 'Escape' || nativeEvent.key === 'Esc') {
+ if (nativeEvent.key === 'Escape') {
handleClose(nativeEvent);
}
}
diff --git a/packages/mui-material/src/styles/CssVarsProvider.test.js b/packages/mui-material/src/styles/CssVarsProvider.test.js
index d9b2165222e160..7cba05db4952b8 100644
--- a/packages/mui-material/src/styles/CssVarsProvider.test.js
+++ b/packages/mui-material/src/styles/CssVarsProvider.test.js
@@ -305,22 +305,6 @@ describe('[Material UI] CssVarsProvider', () => {
expect(container.firstChild?.textContent).not.to.equal('variants');
});
- it('should not contain `typography` in theme.vars', () => {
- function Consumer() {
- const theme = useTheme();
- // @ts-expect-error
- return {theme.vars.typography ? 'typography' : ''}
;
- }
-
- const { container } = render(
-
- ,
- );
-
- expect(container.firstChild?.textContent).not.to.equal('typography');
- });
-
it('should not contain `focus` in theme.vars', () => {
function Consumer() {
const theme = useTheme();
diff --git a/packages/mui-material/src/styles/createTransitions.js b/packages/mui-material/src/styles/createTransitions.js
index a98b2c2357458e..9f92f9f2d8c4df 100644
--- a/packages/mui-material/src/styles/createTransitions.js
+++ b/packages/mui-material/src/styles/createTransitions.js
@@ -64,9 +64,7 @@ export default function createTransitions(inputTransitions) {
if (process.env.NODE_ENV !== 'production') {
const isString = (value) => typeof value === 'string';
- // IE11 support, replace with Number.isNaN
- // eslint-disable-next-line no-restricted-globals
- const isNumber = (value) => !isNaN(parseFloat(value));
+ const isNumber = (value) => !Number.isNaN(parseFloat(value));
if (!isString(props) && !Array.isArray(props)) {
console.error('MUI: Argument "props" must be a string or Array.');
}
diff --git a/packages/mui-material/src/styles/createTransitions.test.js b/packages/mui-material/src/styles/createTransitions.test.js
index 627186dd0b23e1..1c942fb5a01917 100644
--- a/packages/mui-material/src/styles/createTransitions.test.js
+++ b/packages/mui-material/src/styles/createTransitions.test.js
@@ -130,14 +130,11 @@ describe('createTransitions', () => {
it('should return NaN when passed a negative number', () => {
const zeroHeightDurationNegativeOne = getAutoHeightDuration(-1);
- // eslint-disable-next-line no-restricted-globals
- expect(isNaN(zeroHeightDurationNegativeOne)).to.equal(true);
+ expect(Number.isNaN(zeroHeightDurationNegativeOne)).to.equal(true);
const zeroHeightDurationSmallNegative = getAutoHeightDuration(-0.000001);
- // eslint-disable-next-line no-restricted-globals
- expect(isNaN(zeroHeightDurationSmallNegative)).to.equal(true);
+ expect(Number.isNaN(zeroHeightDurationSmallNegative)).to.equal(true);
const zeroHeightDurationBigNegative = getAutoHeightDuration(-100000);
- // eslint-disable-next-line no-restricted-globals
- expect(isNaN(zeroHeightDurationBigNegative)).to.equal(true);
+ expect(Number.isNaN(zeroHeightDurationBigNegative)).to.equal(true);
});
it('should return values for pre-calculated positive examples', () => {
diff --git a/packages/mui-material/src/styles/experimental_extendTheme.d.ts b/packages/mui-material/src/styles/experimental_extendTheme.d.ts
index 013e945e2fbdf3..4ff6b7853ade8b 100644
--- a/packages/mui-material/src/styles/experimental_extendTheme.d.ts
+++ b/packages/mui-material/src/styles/experimental_extendTheme.d.ts
@@ -1,6 +1,7 @@
/* eslint-disable @typescript-eslint/naming-convention */
import { OverridableStringUnion } from '@mui/types';
import { SxConfig, SxProps, CSSObject, ApplyStyles } from '@mui/system';
+import { ExtractTypographyTokens } from '@mui/system/cssVars';
import { ThemeOptions, Theme } from './createTheme';
import { Palette, PaletteOptions } from './createPalette';
import { Shadows } from './shadows';
@@ -336,6 +337,7 @@ export interface ThemeVars {
shape: Theme['shape'];
spacing: string;
zIndex: ZIndex;
+ typography: ExtractTypographyTokens;
}
type Split = K extends string | number
diff --git a/packages/mui-material/src/styles/experimental_extendTheme.js b/packages/mui-material/src/styles/experimental_extendTheme.js
index 308f78d863644c..e2130a125f993f 100644
--- a/packages/mui-material/src/styles/experimental_extendTheme.js
+++ b/packages/mui-material/src/styles/experimental_extendTheme.js
@@ -1,7 +1,7 @@
import deepmerge from '@mui/utils/deepmerge';
import { unstable_createGetCssVar as systemCreateGetCssVar, createSpacing } from '@mui/system';
import { createUnarySpacing } from '@mui/system/spacing';
-import { prepareCssVars } from '@mui/system/cssVars';
+import { prepareCssVars, prepareTypographyVars } from '@mui/system/cssVars';
import styleFunctionSx, {
unstable_defaultSxConfig as defaultSxConfig,
} from '@mui/system/styleFunctionSx';
@@ -139,6 +139,7 @@ export default function extendTheme(options = {}, ...args) {
overlays: colorSchemesInput.dark?.overlays || defaultDarkOverlays,
},
},
+ typography: prepareTypographyVars(muiTheme.typography),
spacing: getSpacingVal(input.spacing),
};
@@ -436,6 +437,7 @@ export default function extendTheme(options = {}, ...args) {
theme.getColorSchemeSelector = (colorScheme) => `[${theme.attribute}="${colorScheme}"] &`;
theme.spacing = theme.generateSpacing();
theme.shouldSkipGeneratingVar = shouldSkipGeneratingVar;
+ theme.typography = muiTheme.typography;
theme.unstable_sxConfig = {
...defaultSxConfig,
...input?.unstable_sxConfig,
diff --git a/packages/mui-material/src/styles/experimental_extendTheme.test.js b/packages/mui-material/src/styles/experimental_extendTheme.test.js
index 297418eea7ada1..843488a1f55adb 100644
--- a/packages/mui-material/src/styles/experimental_extendTheme.test.js
+++ b/packages/mui-material/src/styles/experimental_extendTheme.test.js
@@ -408,6 +408,38 @@ describe('experimental_extendTheme', () => {
});
});
+ describe('typography', () => {
+ it('produce typography token by default', () => {
+ const theme = extendTheme();
+ expect(Object.keys(theme.vars.typography)).to.deep.equal([
+ 'h1',
+ 'h2',
+ 'h3',
+ 'h4',
+ 'h5',
+ 'h6',
+ 'subtitle1',
+ 'subtitle2',
+ 'body1',
+ 'body2',
+ 'button',
+ 'caption',
+ 'overline',
+ 'inherit',
+ ]);
+ });
+ });
+
+ describe('container queries', () => {
+ it('should generate container queries', () => {
+ const theme = extendTheme();
+ expect(theme.containerQueries('sidebar').up('sm')).to.equal(
+ '@container sidebar (min-width:600px)',
+ );
+ expect(theme.containerQueries.up(300)).to.equal('@container (min-width:300px)');
+ });
+ });
+
it('shallow merges multiple arguments', () => {
const theme = extendTheme({ foo: 'I am foo' }, { bar: 'I am bar' });
expect(theme.foo).to.equal('I am foo');
diff --git a/packages/mui-material/src/styles/shouldSkipGeneratingVar.ts b/packages/mui-material/src/styles/shouldSkipGeneratingVar.ts
index 0146d320943c88..60d3ea937ab57b 100644
--- a/packages/mui-material/src/styles/shouldSkipGeneratingVar.ts
+++ b/packages/mui-material/src/styles/shouldSkipGeneratingVar.ts
@@ -1,6 +1,6 @@
export default function shouldSkipGeneratingVar(keys: string[]) {
return (
- !!keys[0].match(/(cssVarPrefix|typography|mixins|breakpoints|direction|transitions)/) ||
+ !!keys[0].match(/(cssVarPrefix|mixins|breakpoints|direction|transitions)/) ||
!!keys[0].match(/sxConfig$/) || // ends with sxConfig
(keys[0] === 'palette' && !!keys[1]?.match(/(mode|contrastThreshold|tonalOffset)/))
);
diff --git a/packages/mui-private-theming/package.json b/packages/mui-private-theming/package.json
index 7bf488f86cb475..ab7616a2ba265f 100644
--- a/packages/mui-private-theming/package.json
+++ b/packages/mui-private-theming/package.json
@@ -1,6 +1,6 @@
{
"name": "@mui/private-theming",
- "version": "6.0.0-alpha.1",
+ "version": "6.0.0-alpha.3",
"private": false,
"author": "MUI Team",
"description": "Private - The React theme context to be shared between `@mui/styles` and `@mui/material`.",
@@ -26,8 +26,7 @@
"url": "https://opencollective.com/mui-org"
},
"scripts": {
- "build": "pnpm build:legacy && pnpm build:modern && pnpm build:node && pnpm build:stable && pnpm build:copy-files",
- "build:legacy": "node ../../scripts/build.mjs legacy",
+ "build": "pnpm build:modern && pnpm build:node && pnpm build:stable && pnpm build:copy-files",
"build:modern": "node ../../scripts/build.mjs modern",
"build:node": "node ../../scripts/build.mjs node",
"build:stable": "node ../../scripts/build.mjs stable",
diff --git a/packages/mui-styled-engine-sc/package.json b/packages/mui-styled-engine-sc/package.json
index 5e850007c2b664..7e60575f1981b1 100644
--- a/packages/mui-styled-engine-sc/package.json
+++ b/packages/mui-styled-engine-sc/package.json
@@ -1,6 +1,6 @@
{
"name": "@mui/styled-engine-sc",
- "version": "6.0.0-alpha.20",
+ "version": "6.0.0-alpha.21",
"private": false,
"author": "MUI Team",
"description": "styled() API wrapper package for styled-components.",
@@ -26,8 +26,7 @@
"url": "https://opencollective.com/mui-org"
},
"scripts": {
- "build": "pnpm build:legacy && pnpm build:modern && pnpm build:node && pnpm build:stable && pnpm build:copy-files",
- "build:legacy": "node ../../scripts/build.mjs legacy",
+ "build": "pnpm build:modern && pnpm build:node && pnpm build:stable && pnpm build:copy-files",
"build:modern": "node ../../scripts/build.mjs modern",
"build:node": "node ../../scripts/build.mjs node",
"build:stable": "node ../../scripts/build.mjs stable",
diff --git a/packages/mui-styled-engine/package.json b/packages/mui-styled-engine/package.json
index 3f8e17d2c0f092..85e787413babca 100644
--- a/packages/mui-styled-engine/package.json
+++ b/packages/mui-styled-engine/package.json
@@ -1,6 +1,6 @@
{
"name": "@mui/styled-engine",
- "version": "6.0.0-alpha.1",
+ "version": "6.0.0-alpha.3",
"private": false,
"author": "MUI Team",
"description": "styled() API wrapper package for emotion.",
@@ -26,8 +26,7 @@
"url": "https://opencollective.com/mui-org"
},
"scripts": {
- "build": "pnpm build:legacy && pnpm build:modern && pnpm build:node && pnpm build:stable && pnpm build:copy-files",
- "build:legacy": "node ../../scripts/build.mjs legacy",
+ "build": "pnpm build:modern && pnpm build:node && pnpm build:stable && pnpm build:copy-files",
"build:modern": "node ../../scripts/build.mjs modern",
"build:node": "node ../../scripts/build.mjs node",
"build:stable": "node ../../scripts/build.mjs stable",
diff --git a/packages/mui-styles/package.json b/packages/mui-styles/package.json
index 25fb2d11243519..fd792ce469b2fb 100644
--- a/packages/mui-styles/package.json
+++ b/packages/mui-styles/package.json
@@ -1,6 +1,6 @@
{
"name": "@mui/styles",
- "version": "6.0.0-alpha.2",
+ "version": "6.0.0-alpha.3",
"private": false,
"author": "MUI Team",
"description": "MUI Styles - The legacy JSS-based styling solution of Material UI.",
@@ -26,8 +26,7 @@
"url": "https://opencollective.com/mui-org"
},
"scripts": {
- "build": "pnpm build:legacy && pnpm build:modern && pnpm build:node && pnpm build:stable && pnpm build:copy-files",
- "build:legacy": "node ../../scripts/build.mjs legacy",
+ "build": "pnpm build:modern && pnpm build:node && pnpm build:stable && pnpm build:copy-files",
"build:modern": "node ../../scripts/build.mjs modern",
"build:node": "node ../../scripts/build.mjs node",
"build:stable": "node ../../scripts/build.mjs stable",
diff --git a/packages/mui-system/package.json b/packages/mui-system/package.json
index 7a6bb48a0104fe..d0be1842f5f670 100644
--- a/packages/mui-system/package.json
+++ b/packages/mui-system/package.json
@@ -1,6 +1,6 @@
{
"name": "@mui/system",
- "version": "6.0.0-alpha.1",
+ "version": "6.0.0-alpha.3",
"private": false,
"author": "MUI Team",
"description": "MUI System is a set of CSS utilities to help you build custom designs more efficiently. It makes it possible to rapidly lay out custom designs.",
@@ -26,8 +26,7 @@
"url": "https://opencollective.com/mui-org"
},
"scripts": {
- "build": "pnpm build:legacy && pnpm build:modern && pnpm build:node && pnpm build:stable && pnpm build:types && pnpm build:copy-files",
- "build:legacy": "node ../../scripts/build.mjs legacy",
+ "build": "pnpm build:modern && pnpm build:node && pnpm build:stable && pnpm build:types && pnpm build:copy-files",
"build:modern": "node ../../scripts/build.mjs modern",
"build:node": "node ../../scripts/build.mjs node",
"build:stable": "node ../../scripts/build.mjs stable",
diff --git a/packages/mui-system/src/breakpoints/breakpoints.js b/packages/mui-system/src/breakpoints/breakpoints.js
index 4d6fdf84b3eaba..ee98789726298e 100644
--- a/packages/mui-system/src/breakpoints/breakpoints.js
+++ b/packages/mui-system/src/breakpoints/breakpoints.js
@@ -1,6 +1,7 @@
import PropTypes from 'prop-types';
import deepmerge from '@mui/utils/deepmerge';
import merge from '../merge';
+import { isCqShorthand, getContainerQuery } from '../cssContainerQueries';
// The breakpoint **start** at this value.
// For instance with the first breakpoint xs: [xs, sm[.
@@ -19,6 +20,20 @@ const defaultBreakpoints = {
up: (key) => `@media (min-width:${values[key]}px)`,
};
+const defaultContainerQueries = {
+ containerQueries: (containerName) => ({
+ up: (key) => {
+ let result = typeof key === 'number' ? key : values[key] || key;
+ if (typeof result === 'number') {
+ result = `${result}px`;
+ }
+ return containerName
+ ? `@container ${containerName} (min-width:${result})`
+ : `@container (min-width:${result})`;
+ },
+ }),
+};
+
export function handleBreakpoints(props, propValue, styleFromPropValue) {
const theme = props.theme || {};
@@ -33,8 +48,17 @@ export function handleBreakpoints(props, propValue, styleFromPropValue) {
if (typeof propValue === 'object') {
const themeBreakpoints = theme.breakpoints || defaultBreakpoints;
return Object.keys(propValue).reduce((acc, breakpoint) => {
+ if (isCqShorthand(themeBreakpoints.keys, breakpoint)) {
+ const containerKey = getContainerQuery(
+ theme.containerQueries ? theme : defaultContainerQueries,
+ breakpoint,
+ );
+ if (containerKey) {
+ acc[containerKey] = styleFromPropValue(propValue[breakpoint], breakpoint);
+ }
+ }
// key is breakpoint
- if (Object.keys(themeBreakpoints.values || values).indexOf(breakpoint) !== -1) {
+ else if (Object.keys(themeBreakpoints.values || values).indexOf(breakpoint) !== -1) {
const mediaKey = themeBreakpoints.up(breakpoint);
acc[mediaKey] = styleFromPropValue(propValue[breakpoint], breakpoint);
} else {
diff --git a/packages/mui-system/src/createTheme/createTheme.d.ts b/packages/mui-system/src/createTheme/createTheme.d.ts
index aee763ec114398..0d6d555539d1b9 100644
--- a/packages/mui-system/src/createTheme/createTheme.d.ts
+++ b/packages/mui-system/src/createTheme/createTheme.d.ts
@@ -4,6 +4,7 @@ import { Shape, ShapeOptions } from './shape';
import { Spacing, SpacingOptions } from './createSpacing';
import { SxConfig, SxProps } from '../styleFunctionSx';
import { ApplyStyles } from './applyStyles';
+import { CssContainerQueries } from '../cssContainerQueries';
export { Breakpoint, BreakpointOverrides } from './createBreakpoints';
@@ -24,7 +25,7 @@ export interface ThemeOptions {
unstable_sxConfig?: SxConfig;
}
-export interface Theme {
+export interface Theme extends CssContainerQueries {
shape: Shape;
breakpoints: Breakpoints;
direction: Direction;
diff --git a/packages/mui-system/src/createTheme/createTheme.js b/packages/mui-system/src/createTheme/createTheme.js
index 24c1c4d29971cc..dce4ff93cc428d 100644
--- a/packages/mui-system/src/createTheme/createTheme.js
+++ b/packages/mui-system/src/createTheme/createTheme.js
@@ -1,5 +1,6 @@
import deepmerge from '@mui/utils/deepmerge';
import createBreakpoints from './createBreakpoints';
+import cssContainerQueries from '../cssContainerQueries';
import shape from './shape';
import createSpacing from './createSpacing';
import styleFunctionSx from '../styleFunctionSx/styleFunctionSx';
@@ -29,6 +30,7 @@ function createTheme(options = {}, ...args) {
},
other,
);
+ muiTheme = cssContainerQueries(muiTheme);
muiTheme.applyStyles = applyStyles;
diff --git a/packages/mui-system/src/cssContainerQueries/cssContainerQueries.test.ts b/packages/mui-system/src/cssContainerQueries/cssContainerQueries.test.ts
new file mode 100644
index 00000000000000..785aa3186732c7
--- /dev/null
+++ b/packages/mui-system/src/cssContainerQueries/cssContainerQueries.test.ts
@@ -0,0 +1,119 @@
+import { expect } from 'chai';
+
+import createTheme from '@mui/system/createTheme';
+import {
+ isCqShorthand,
+ sortContainerQueries,
+ getContainerQuery,
+} from '@mui/system/cssContainerQueries';
+
+describe('cssContainerQueries', () => {
+ it('should return false if the shorthand is not a container query', () => {
+ expect(isCqShorthand(['xs', 'sm', 'md'], '@container (min-width:600px)')).to.equal(false);
+ expect(isCqShorthand(['xs', 'sm', 'md'], '@media (min-width:600px)')).to.equal(false);
+ expect(isCqShorthand(['xs', 'sm', 'md'], '@page')).to.equal(false);
+ expect(isCqShorthand(['xs', 'sm', 'md'], '@support (display: flex)')).to.equal(false);
+ });
+
+ it('should return true if the shorthand is a container query', () => {
+ expect(isCqShorthand(['xs', 'sm', 'md'], '@xs')).to.equal(true);
+ expect(isCqShorthand(['xs', 'sm', 'md'], '@xs/sidebar')).to.equal(true);
+ expect(isCqShorthand(['xs', 'sm', 'md'], '@md')).to.equal(true);
+ expect(isCqShorthand(['xs', 'sm', 'md'], '@200')).to.equal(true);
+ expect(isCqShorthand(['xs', 'sm', 'md'], '@15.5rem')).to.equal(true);
+ });
+
+ it('should have `up`, `down`, `between`, `only`, and `not` functions', () => {
+ const theme = createTheme();
+
+ expect(theme.containerQueries.up('sm')).to.equal('@container (min-width:600px)');
+ expect(theme.containerQueries.down('sm')).to.equal('@container (max-width:599.95px)');
+ expect(theme.containerQueries.between('sm', 'md')).to.equal(
+ '@container (min-width:600px) and (max-width:899.95px)',
+ );
+ expect(theme.containerQueries.only('sm')).to.equal(
+ '@container (min-width:600px) and (max-width:899.95px)',
+ );
+ expect(theme.containerQueries.not('xs')).to.equal('@container (min-width:600px)');
+ expect(theme.containerQueries.not('xl')).to.equal('@container (max-width:1535.95px)');
+ expect(theme.containerQueries.not('md')).to.equal(
+ '@container (width<900px) and (width>1199.95px)',
+ );
+ });
+
+ it('should be able to create named containment context', () => {
+ const theme = createTheme();
+
+ expect(theme.containerQueries('sidebar').up('sm')).to.equal(
+ '@container sidebar (min-width:600px)',
+ );
+ expect(theme.containerQueries('sidebar').down('sm')).to.equal(
+ '@container sidebar (max-width:599.95px)',
+ );
+ expect(theme.containerQueries('sidebar').between('sm', 'md')).to.equal(
+ '@container sidebar (min-width:600px) and (max-width:899.95px)',
+ );
+ expect(theme.containerQueries('sidebar').only('sm')).to.equal(
+ '@container sidebar (min-width:600px) and (max-width:899.95px)',
+ );
+ expect(theme.containerQueries('sidebar').not('xs')).to.equal(
+ '@container sidebar (min-width:600px)',
+ );
+ expect(theme.containerQueries('sidebar').not('xl')).to.equal(
+ '@container sidebar (max-width:1535.95px)',
+ );
+ expect(theme.containerQueries('sidebar').not('sm')).to.equal(
+ '@container sidebar (width<600px) and (width>899.95px)',
+ );
+ });
+
+ it('should sort container queries', () => {
+ const theme = createTheme();
+
+ const css = {
+ '@container (min-width:960px)': {},
+ '@container (min-width:1280px)': {},
+ '@container (min-width:0px)': {},
+ '@container (min-width:600px)': {},
+ };
+
+ const sorted = sortContainerQueries(theme, css);
+
+ expect(Object.keys(sorted)).to.deep.equal([
+ '@container (min-width:0px)',
+ '@container (min-width:600px)',
+ '@container (min-width:960px)',
+ '@container (min-width:1280px)',
+ ]);
+ });
+
+ it('should sort container queries with other unit', () => {
+ const theme = createTheme();
+
+ const css = {
+ '@container (min-width:30.5rem)': {},
+ '@container (min-width:20rem)': {},
+ '@container (min-width:50.5rem)': {},
+ '@container (min-width:40rem)': {},
+ };
+
+ const sorted = sortContainerQueries(theme, css);
+
+ expect(Object.keys(sorted)).to.deep.equal([
+ '@container (min-width:20rem)',
+ '@container (min-width:30.5rem)',
+ '@container (min-width:40rem)',
+ '@container (min-width:50.5rem)',
+ ]);
+ });
+
+ it('should throw an error if shorthand is invalid', () => {
+ expect(() => {
+ const theme = createTheme();
+ getContainerQuery(theme, 'cq0');
+ }).to.throw(
+ 'MUI: The provided shorthand (cq0) is invalid. The format should be `@` or `@/`.\n' +
+ 'For example, `@sm` or `@600` or `@40rem/sidebar`.',
+ );
+ });
+});
diff --git a/packages/mui-system/src/cssContainerQueries/cssContainerQueries.ts b/packages/mui-system/src/cssContainerQueries/cssContainerQueries.ts
new file mode 100644
index 00000000000000..49b85f558cff00
--- /dev/null
+++ b/packages/mui-system/src/cssContainerQueries/cssContainerQueries.ts
@@ -0,0 +1,118 @@
+import MuiError from '@mui/internal-babel-macros/MuiError.macro';
+import { Breakpoints, Breakpoint } from '../createTheme/createBreakpoints';
+
+interface ContainerQueries {
+ up: Breakpoints['up'];
+ down: Breakpoints['down'];
+ between: Breakpoints['between'];
+ only: Breakpoints['only'];
+ not: Breakpoints['not'];
+}
+
+export interface CssContainerQueries {
+ containerQueries: ((name: string) => ContainerQueries) & ContainerQueries;
+}
+
+/**
+ * For using in `sx` prop to sort the breakpoint from low to high.
+ * Note: this function does not work and will not support multiple units.
+ * e.g. input: { '@container (min-width:300px)': '1rem', '@container (min-width:40rem)': '2rem' }
+ * output: { '@container (min-width:40rem)': '2rem', '@container (min-width:300px)': '1rem' } // since 40 < 300 eventhough 40rem > 300px
+ */
+export function sortContainerQueries(
+ theme: Partial,
+ css: Record,
+) {
+ if (!theme.containerQueries) {
+ return css;
+ }
+ const sorted = Object.keys(css)
+ .filter((key) => key.startsWith('@container'))
+ .sort((a, b) => {
+ const regex = /min-width:\s*([0-9.]+)/;
+ return +(a.match(regex)?.[1] || 0) - +(b.match(regex)?.[1] || 0);
+ });
+ if (!sorted.length) {
+ return css;
+ }
+ return sorted.reduce(
+ (acc, key) => {
+ const value = css[key];
+ delete acc[key];
+ acc[key] = value;
+ return acc;
+ },
+ { ...css },
+ );
+}
+
+export function isCqShorthand(breakpointKeys: string[], value: string) {
+ return (
+ value.startsWith('@') &&
+ (breakpointKeys.some((key) => value.startsWith(`@${key}`)) || !!value.match(/^@\d/))
+ );
+}
+
+export function getContainerQuery(theme: CssContainerQueries, shorthand: string) {
+ const matches = shorthand.match(/^@([^/]+)\/?(.+)?$/);
+ if (!matches) {
+ if (process.env.NODE_ENV !== 'production') {
+ throw new MuiError(
+ 'MUI: The provided shorthand %s is invalid. The format should be `@` or `@/`.\n' +
+ 'For example, `@sm` or `@600` or `@40rem/sidebar`.',
+ `(${shorthand})`,
+ );
+ }
+ return null;
+ }
+ const [, containerQuery, containerName] = matches;
+ const value = (Number.isNaN(+containerQuery) ? containerQuery : +containerQuery) as
+ | Breakpoint
+ | number;
+ return theme.containerQueries(containerName).up(value);
+}
+
+export default function cssContainerQueries(
+ themeInput: T,
+): T & CssContainerQueries {
+ const toContainerQuery = (mediaQuery: string, name?: string) =>
+ mediaQuery.replace('@media', name ? `@container ${name}` : '@container');
+
+ function attachCq(node: any, name?: string) {
+ node.up = (...args: Parameters) =>
+ toContainerQuery(themeInput.breakpoints.up(...args), name);
+
+ node.down = (...args: Parameters) =>
+ toContainerQuery(themeInput.breakpoints.down(...args), name);
+
+ node.between = (...args: Parameters) =>
+ toContainerQuery(themeInput.breakpoints.between(...args), name);
+
+ node.only = (...args: Parameters) =>
+ toContainerQuery(themeInput.breakpoints.only(...args), name);
+
+ node.not = (...args: Parameters) => {
+ const result = toContainerQuery(themeInput.breakpoints.not(...args), name);
+ if (result.includes('not all and')) {
+ // `@container` does not work with `not all and`, so need to invert the logic
+ return result
+ .replace('not all and ', '')
+ .replace('min-width:', 'width<')
+ .replace('max-width:', 'width>');
+ }
+ return result;
+ };
+ }
+ const node = {};
+ const containerQueries = ((name: string) => {
+ attachCq(node, name);
+ return node;
+ }) as CssContainerQueries['containerQueries'];
+
+ attachCq(containerQueries);
+
+ return {
+ ...themeInput,
+ containerQueries,
+ };
+}
diff --git a/packages/mui-system/src/cssContainerQueries/index.ts b/packages/mui-system/src/cssContainerQueries/index.ts
new file mode 100644
index 00000000000000..e1061e417fc187
--- /dev/null
+++ b/packages/mui-system/src/cssContainerQueries/index.ts
@@ -0,0 +1,3 @@
+export { default } from './cssContainerQueries';
+export { isCqShorthand, getContainerQuery, sortContainerQueries } from './cssContainerQueries';
+export type { CssContainerQueries } from './cssContainerQueries';
diff --git a/packages/mui-system/src/cssGrid/cssGrid.test.js b/packages/mui-system/src/cssGrid/cssGrid.test.js
index a12b8d0e511821..62266bcdfb42c4 100644
--- a/packages/mui-system/src/cssGrid/cssGrid.test.js
+++ b/packages/mui-system/src/cssGrid/cssGrid.test.js
@@ -37,4 +37,25 @@ describe('grid', () => {
},
});
});
+
+ it('should support container queries', () => {
+ const output1 = grid({
+ gap: {
+ '@sm': 1,
+ '@900/sidebar': 2,
+ '@80rem/sidebar': 3,
+ },
+ });
+ expect(output1).to.deep.equal({
+ '@container (min-width:600px)': {
+ gap: 8,
+ },
+ '@container sidebar (min-width:900px)': {
+ gap: 16,
+ },
+ '@container sidebar (min-width:80rem)': {
+ gap: 24,
+ },
+ });
+ });
});
diff --git a/packages/mui-system/src/cssVars/index.ts b/packages/mui-system/src/cssVars/index.ts
index c8a640a0a241bd..998285793b9a26 100644
--- a/packages/mui-system/src/cssVars/index.ts
+++ b/packages/mui-system/src/cssVars/index.ts
@@ -8,4 +8,6 @@ export type {
export { default as getInitColorSchemeScript } from './getInitColorSchemeScript';
export { default as prepareCssVars } from './prepareCssVars';
+export { default as prepareTypographyVars } from './prepareTypographyVars';
+export type { ExtractTypographyTokens } from './prepareTypographyVars';
export { default as createCssVarsTheme } from './createCssVarsTheme';
diff --git a/packages/mui-system/src/cssVars/prepareTypographyVars.test.ts b/packages/mui-system/src/cssVars/prepareTypographyVars.test.ts
new file mode 100644
index 00000000000000..81b05d1d00aae3
--- /dev/null
+++ b/packages/mui-system/src/cssVars/prepareTypographyVars.test.ts
@@ -0,0 +1,25 @@
+import { expect } from 'chai';
+import { createTheme } from '@mui/material/styles';
+import prepareTypographyTokens from './prepareTypographyVars';
+
+describe('prepareTypographyVars', () => {
+ it('should prepare typography vars', () => {
+ const theme = createTheme();
+ expect(prepareTypographyTokens(theme.typography)).to.deep.equal({
+ body1: '400 1rem/1.5 "Roboto", "Helvetica", "Arial", sans-serif',
+ body2: '400 0.875rem/1.43 "Roboto", "Helvetica", "Arial", sans-serif',
+ button: '500 0.875rem/1.75 "Roboto", "Helvetica", "Arial", sans-serif',
+ caption: '400 0.75rem/1.66 "Roboto", "Helvetica", "Arial", sans-serif',
+ h1: '300 6rem/1.167 "Roboto", "Helvetica", "Arial", sans-serif',
+ h2: '300 3.75rem/1.2 "Roboto", "Helvetica", "Arial", sans-serif',
+ h3: '400 3rem/1.167 "Roboto", "Helvetica", "Arial", sans-serif',
+ h4: '400 2.125rem/1.235 "Roboto", "Helvetica", "Arial", sans-serif',
+ h5: '400 1.5rem/1.334 "Roboto", "Helvetica", "Arial", sans-serif',
+ h6: '500 1.25rem/1.6 "Roboto", "Helvetica", "Arial", sans-serif',
+ inherit: 'inherit inherit/inherit inherit',
+ overline: '400 0.75rem/2.66 "Roboto", "Helvetica", "Arial", sans-serif',
+ subtitle1: '400 1rem/1.75 "Roboto", "Helvetica", "Arial", sans-serif',
+ subtitle2: '500 0.875rem/1.57 "Roboto", "Helvetica", "Arial", sans-serif',
+ });
+ });
+});
diff --git a/packages/mui-system/src/cssVars/prepareTypographyVars.ts b/packages/mui-system/src/cssVars/prepareTypographyVars.ts
new file mode 100644
index 00000000000000..a7ecc4f336c3a1
--- /dev/null
+++ b/packages/mui-system/src/cssVars/prepareTypographyVars.ts
@@ -0,0 +1,18 @@
+type RecordPropertyNames = {
+ [K in keyof T]: T[K] extends Function ? never : T[K] extends Record ? K : never;
+}[keyof T];
+
+export type ExtractTypographyTokens = { [K in RecordPropertyNames]: string };
+
+export default function prepareTypographyTokens>(typography: T) {
+ const vars: Record = {};
+ const entries = Object.entries(typography);
+ entries.forEach((entry) => {
+ const [key, value] = entry;
+ if (typeof value === 'object') {
+ vars[key] =
+ `${value.fontStyle ? `${value.fontStyle} ` : ''}${value.fontVariant ? `${value.fontVariant} ` : ''}${value.fontWeight ? `${value.fontWeight} ` : ''}${value.fontStretch ? `${value.fontStretch} ` : ''}${value.fontSize || ''}${value.lineHeight ? `/${value.lineHeight} ` : ''}${value.fontFamily || ''}`;
+ }
+ });
+ return vars as ExtractTypographyTokens;
+}
diff --git a/packages/mui-system/src/index.d.ts b/packages/mui-system/src/index.d.ts
index ea3580a981cc9f..ec606cc14d467b 100644
--- a/packages/mui-system/src/index.d.ts
+++ b/packages/mui-system/src/index.d.ts
@@ -5,6 +5,8 @@ export * from './borders';
export { default as breakpoints, handleBreakpoints, mergeBreakpointsInOrder } from './breakpoints';
+export { default as cssContainerQueries, type CssContainerQueries } from './cssContainerQueries';
+
export { default as compose } from './compose';
export * from './display';
diff --git a/packages/mui-system/src/index.js b/packages/mui-system/src/index.js
index b7215ef8dee1b4..8bc93c6d64d0c9 100644
--- a/packages/mui-system/src/index.js
+++ b/packages/mui-system/src/index.js
@@ -5,6 +5,7 @@ export { default as GlobalStyles } from './GlobalStyles';
export { default as borders } from './borders';
export * from './borders';
export { default as breakpoints } from './breakpoints';
+export { default as cssContainerQueries } from './cssContainerQueries';
export {
handleBreakpoints,
mergeBreakpointsInOrder,
diff --git a/packages/mui-system/src/spacing/spacing.test.js b/packages/mui-system/src/spacing/spacing.test.js
index 92f8f5306e94fd..8373c3cbbee208 100644
--- a/packages/mui-system/src/spacing/spacing.test.js
+++ b/packages/mui-system/src/spacing/spacing.test.js
@@ -184,6 +184,27 @@ describe('system spacing', () => {
});
});
+ it('should support container queries', () => {
+ const output1 = spacing({
+ p: {
+ '@sm': 1,
+ '@900/sidebar': 2,
+ '@80rem/sidebar': 3,
+ },
+ });
+ expect(output1).to.deep.equal({
+ '@container (min-width:600px)': {
+ padding: 8,
+ },
+ '@container sidebar (min-width:900px)': {
+ padding: 16,
+ },
+ '@container sidebar (min-width:80rem)': {
+ padding: 24,
+ },
+ });
+ });
+
it('should support full version', () => {
const output1 = spacing({
paddingTop: 1,
diff --git a/packages/mui-system/src/styleFunctionSx/styleFunctionSx.js b/packages/mui-system/src/styleFunctionSx/styleFunctionSx.js
index 151f117c416477..a74b44b553311c 100644
--- a/packages/mui-system/src/styleFunctionSx/styleFunctionSx.js
+++ b/packages/mui-system/src/styleFunctionSx/styleFunctionSx.js
@@ -6,6 +6,7 @@ import {
createEmptyBreakpointObject,
removeUnusedBreakpoints,
} from '../breakpoints';
+import { sortContainerQueries } from '../cssContainerQueries';
import defaultSxConfig from './defaultSxConfig';
function objectsHaveSameKeys(...objects) {
@@ -127,7 +128,7 @@ export function unstable_createStyleFunctionSx() {
}
});
- return removeUnusedBreakpoints(breakpointsKeys, css);
+ return sortContainerQueries(theme, removeUnusedBreakpoints(breakpointsKeys, css));
}
return Array.isArray(sx) ? sx.map(traverse) : traverse(sx);
diff --git a/packages/mui-system/src/styleFunctionSx/styleFunctionSx.test.js b/packages/mui-system/src/styleFunctionSx/styleFunctionSx.test.js
index dced5959cb72aa..d8ca1d7a8e778e 100644
--- a/packages/mui-system/src/styleFunctionSx/styleFunctionSx.test.js
+++ b/packages/mui-system/src/styleFunctionSx/styleFunctionSx.test.js
@@ -1,5 +1,6 @@
import { expect } from 'chai';
import styleFunctionSx from './styleFunctionSx';
+import cssContainerQueries from '../cssContainerQueries';
describe('styleFunctionSx', () => {
const breakpointsValues = {
@@ -12,7 +13,7 @@ describe('styleFunctionSx', () => {
const round = (value) => Math.round(value * 1e5) / 1e5;
- const theme = {
+ const theme = cssContainerQueries({
spacing: (val) => `${val * 10}px`,
breakpoints: {
keys: ['xs', 'sm', 'md', 'lg', 'xl'],
@@ -49,7 +50,7 @@ describe('styleFunctionSx', () => {
lineHeight: 1.43,
},
},
- };
+ });
describe('system', () => {
it('resolves system ', () => {
@@ -243,6 +244,79 @@ describe('styleFunctionSx', () => {
});
});
+ describe('container queries', () => {
+ const queriesExpectedResult = {
+ '@container (min-width:0px)': { border: '1px solid' },
+ '@container (min-width:600px)': { border: '2px solid' },
+ '@container (min-width:960px)': { border: '3px solid' },
+ '@container (min-width:1280px)': { border: '4px solid' },
+ '@container (min-width:1920px)': { border: '5px solid' },
+ };
+
+ it('resolves queries object', () => {
+ const result = styleFunctionSx({
+ theme,
+ sx: {
+ border: {
+ '@xs': 1,
+ '@sm': 2,
+ '@md': 3,
+ '@lg': 4,
+ '@xl': 5,
+ },
+ },
+ });
+
+ expect(result).to.deep.equal(queriesExpectedResult);
+ });
+
+ it('merges multiple queries object', () => {
+ const result = styleFunctionSx({
+ theme,
+ sx: {
+ m: {
+ '@xs': 1,
+ '@sm': 2,
+ '@md': 3,
+ },
+ p: {
+ '@xs': 5,
+ '@sm': 6,
+ '@md': 7,
+ },
+ },
+ });
+
+ expect(result).to.deep.equal({
+ '@container (min-width:0px)': { padding: '50px', margin: '10px' },
+ '@container (min-width:600px)': { padding: '60px', margin: '20px' },
+ '@container (min-width:960px)': { padding: '70px', margin: '30px' },
+ });
+ });
+
+ it('writes queries in correct order', () => {
+ const result = styleFunctionSx({
+ theme,
+ sx: { m: { '@md': 1, '@lg': 2 }, p: { '@xs': 0, '@sm': 1, '@md': 2 } },
+ });
+
+ // Test the order
+ expect(Object.keys(result)).to.deep.equal([
+ '@container (min-width:0px)',
+ '@container (min-width:600px)',
+ '@container (min-width:960px)',
+ '@container (min-width:1280px)',
+ ]);
+
+ expect(result).to.deep.equal({
+ '@container (min-width:0px)': { padding: '0px' },
+ '@container (min-width:600px)': { padding: '10px' },
+ '@container (min-width:960px)': { padding: '20px', margin: '10px' },
+ '@container (min-width:1280px)': { margin: '20px' },
+ });
+ });
+ });
+
describe('theme callback', () => {
it('works on CSS properties', () => {
const result = styleFunctionSx({
diff --git a/packages/mui-utils/package.json b/packages/mui-utils/package.json
index 2675ce2917f370..e3282e474446c0 100644
--- a/packages/mui-utils/package.json
+++ b/packages/mui-utils/package.json
@@ -1,6 +1,6 @@
{
"name": "@mui/utils",
- "version": "6.0.0-alpha.1",
+ "version": "6.0.0-alpha.3",
"private": false,
"author": "MUI Team",
"description": "Utility functions for React components.",
@@ -26,8 +26,7 @@
"url": "https://opencollective.com/mui-org"
},
"scripts": {
- "build": "pnpm build:legacy && pnpm build:modern && pnpm build:node && pnpm build:stable && pnpm build:types && pnpm build:copy-files",
- "build:legacy": "node ../../scripts/build.mjs legacy",
+ "build": "pnpm build:modern && pnpm build:node && pnpm build:stable && pnpm build:types && pnpm build:copy-files",
"build:modern": "node ../../scripts/build.mjs modern",
"build:node": "node ../../scripts/build.mjs node",
"build:stable": "node ../../scripts/build.mjs stable",
diff --git a/packages/mui-utils/src/getDisplayName/getDisplayName.test.tsx b/packages/mui-utils/src/getDisplayName/getDisplayName.test.tsx
index 4d30daac79c0fe..6d2aba0f362085 100644
--- a/packages/mui-utils/src/getDisplayName/getDisplayName.test.tsx
+++ b/packages/mui-utils/src/getDisplayName/getDisplayName.test.tsx
@@ -1,7 +1,7 @@
/* eslint-disable react/prefer-stateless-function */
import * as React from 'react';
import { expect } from 'chai';
-import getDisplayName, { getFunctionName } from './getDisplayName';
+import getDisplayName from './getDisplayName';
describe('utils/getDisplayName.js', () => {
describe('getDisplayName', () => {
@@ -75,14 +75,4 @@ describe('utils/getDisplayName.js', () => {
expect(getDisplayName(false)).to.equal(undefined);
});
});
-
- describe('getFunctionName', () => {
- it('gets the name of a function', () => {
- function SomeFunction() {
- return
;
- }
-
- expect(getFunctionName(SomeFunction)).to.equal('SomeFunction');
- });
- });
});
diff --git a/packages/mui-utils/src/getDisplayName/getDisplayName.ts b/packages/mui-utils/src/getDisplayName/getDisplayName.ts
index 02164eed56390f..5290cabeea2e29 100644
--- a/packages/mui-utils/src/getDisplayName/getDisplayName.ts
+++ b/packages/mui-utils/src/getDisplayName/getDisplayName.ts
@@ -1,20 +1,11 @@
import * as React from 'react';
import { ForwardRef, Memo } from 'react-is';
-// Simplified polyfill for IE11 support
-// https://github.com/JamesMGreene/Function.name/blob/58b314d4a983110c3682f1228f845d39ccca1817/Function.name.js#L3
-const fnNameMatchRegex = /^\s*function(?:\s|\s*\/\*.*\*\/\s*)+([^(\s/]*)\s*/;
-export function getFunctionName(fn: Function): string {
- const match = `${fn}`.match(fnNameMatchRegex);
- const name = match && match[1];
- return name || '';
-}
-
function getFunctionComponentName(
Component: React.FunctionComponent | React.ComponentClass,
fallback = '',
) {
- return Component.displayName || Component.name || getFunctionName(Component) || fallback;
+ return Component.displayName || Component.name || fallback;
}
function getWrappedName(outerType: any, innerType: any, wrapperName: string) {
diff --git a/packages/mui-utils/src/getDisplayName/index.ts b/packages/mui-utils/src/getDisplayName/index.ts
index 601cc5db1f7b67..64a7a4597931fb 100644
--- a/packages/mui-utils/src/getDisplayName/index.ts
+++ b/packages/mui-utils/src/getDisplayName/index.ts
@@ -1,2 +1 @@
export { default } from './getDisplayName';
-export * from './getDisplayName';
diff --git a/packages/mui-utils/src/integerPropType/integerPropType.js b/packages/mui-utils/src/integerPropType/integerPropType.js
index 99105c3d03cd79..ca3afc0fab0583 100644
--- a/packages/mui-utils/src/integerPropType/integerPropType.js
+++ b/packages/mui-utils/src/integerPropType/integerPropType.js
@@ -24,18 +24,10 @@ export function getTypeByValue(value) {
}
}
-// IE 11 support
-function ponyfillIsInteger(x) {
- // eslint-disable-next-line no-restricted-globals
- return typeof x === 'number' && isFinite(x) && Math.floor(x) === x;
-}
-
-const isInteger = Number.isInteger || ponyfillIsInteger;
-
function requiredInteger(props, propName, componentName, location) {
const propValue = props[propName];
- if (propValue == null || !isInteger(propValue)) {
+ if (propValue == null || !Number.isInteger(propValue)) {
const propType = getTypeByValue(propValue);
return new RangeError(
diff --git a/packages/pigment-css-nextjs-plugin/package.json b/packages/pigment-css-nextjs-plugin/package.json
index 7096e3095ad65c..3d6c003465f0f2 100644
--- a/packages/pigment-css-nextjs-plugin/package.json
+++ b/packages/pigment-css-nextjs-plugin/package.json
@@ -1,6 +1,6 @@
{
"name": "@pigment-css/nextjs-plugin",
- "version": "0.0.6",
+ "version": "0.0.7",
"main": "build/index.js",
"module": "build/index.mjs",
"types": "build/index.d.ts",
diff --git a/packages/pigment-css-react/package.json b/packages/pigment-css-react/package.json
index f230f29382a143..7d158db12e3ff9 100644
--- a/packages/pigment-css-react/package.json
+++ b/packages/pigment-css-react/package.json
@@ -1,6 +1,6 @@
{
"name": "@pigment-css/react",
- "version": "0.0.6",
+ "version": "0.0.7",
"main": "build/index.js",
"module": "build/index.mjs",
"types": "build/index.d.ts",
diff --git a/packages/pigment-css-unplugin/package.json b/packages/pigment-css-unplugin/package.json
index ecddb0af7ccd3e..20b76347b07fb8 100644
--- a/packages/pigment-css-unplugin/package.json
+++ b/packages/pigment-css-unplugin/package.json
@@ -1,6 +1,6 @@
{
"name": "@pigment-css/unplugin",
- "version": "0.0.6",
+ "version": "0.0.7",
"main": "build/index.js",
"module": "build/index.mjs",
"types": "build/index.d.ts",
diff --git a/packages/pigment-css-vite-plugin/package.json b/packages/pigment-css-vite-plugin/package.json
index 866082e607cfe5..75691df0b35f97 100644
--- a/packages/pigment-css-vite-plugin/package.json
+++ b/packages/pigment-css-vite-plugin/package.json
@@ -1,6 +1,6 @@
{
"name": "@pigment-css/vite-plugin",
- "version": "0.0.6",
+ "version": "0.0.7",
"main": "build/index.js",
"module": "build/index.mjs",
"types": "build/index.d.ts",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 08af18d8d31af1..3e00caad0410db 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -76,9 +76,6 @@ importers:
'@babel/plugin-proposal-private-property-in-object':
specifier: ^7.21.11
version: 7.21.11(@babel/core@7.24.4)
- '@babel/plugin-transform-object-assign':
- specifier: ^7.24.1
- version: 7.24.1(@babel/core@7.24.4)
'@babel/plugin-transform-react-constant-elements':
specifier: ^7.24.1
version: 7.24.1(@babel/core@7.24.4)
@@ -399,7 +396,7 @@ importers:
version: link:../local-ui-lib
next:
specifier: latest
- version: 14.2.1(@babel/core@7.24.4)(@playwright/test@1.43.1)(babel-plugin-macros@3.1.0)(react-dom@18.2.0)(react@18.2.0)
+ version: 14.2.2(@babel/core@7.24.4)(@playwright/test@1.43.1)(babel-plugin-macros@3.1.0)(react-dom@18.2.0)(react@18.2.0)
react:
specifier: ^18.2.0
version: 18.2.0
@@ -588,9 +585,6 @@ importers:
'@babel/core':
specifier: ^7.24.4
version: 7.24.4
- '@babel/plugin-transform-object-assign':
- specifier: ^7.24.1
- version: 7.24.1(@babel/core@7.24.4)
'@babel/runtime':
specifier: ^7.24.4
version: 7.24.4
@@ -1357,9 +1351,15 @@ importers:
'@mui/base':
specifier: '*'
version: link:../mui-base/build
+ '@mui/internal-markdown':
+ specifier: workspace:^
+ version: link:../markdown
'@mui/system':
specifier: ^5.0.0
version: 5.15.14(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@types/react@18.2.55)(react@18.2.0)
+ clipboard-copy:
+ specifier: ^4.0.1
+ version: 4.0.1
clsx:
specifier: ^2.1.0
version: 2.1.0
@@ -3720,15 +3720,6 @@ packages:
'@babel/helper-plugin-utils': 7.24.0
'@babel/plugin-syntax-numeric-separator': 7.10.4(@babel/core@7.24.4)
- /@babel/plugin-transform-object-assign@7.24.1(@babel/core@7.24.4):
- resolution: {integrity: sha512-I1kctor9iKtupb7jv7FyjApHCuKLBKCblVAeHVK9PB6FW7GI0ac6RtobC3MwwJy8CZ1JxuhQmnbrsqI5G8hAIg==}
- engines: {node: '>=6.9.0'}
- peerDependencies:
- '@babel/core': ^7.24.4
- dependencies:
- '@babel/core': 7.24.4
- '@babel/helper-plugin-utils': 7.24.0
-
/@babel/plugin-transform-object-rest-spread@7.24.1(@babel/core@7.24.4):
resolution: {integrity: sha512-XjD5f0YqOtebto4HGISLNfiNMTTs6tbkFf2TOqJlYKYmbo+mN9Dnpl4SRoofiziuOWMIyq3sZEUqLo3hLITFEA==}
engines: {node: '>=6.9.0'}
@@ -5957,8 +5948,8 @@ packages:
/@next/env@13.5.1:
resolution: {integrity: sha512-CIMWiOTyflFn/GFx33iYXkgLSQsMQZV4jB91qaj/TfxGaGOXxn8C1j72TaUSPIyN7ziS/AYG46kGmnvuk1oOpg==}
- /@next/env@14.2.1:
- resolution: {integrity: sha512-qsHJle3GU3CmVx7pUoXcghX4sRN+vINkbLdH611T8ZlsP//grzqVW87BSUgOZeSAD4q7ZdZicdwNe/20U2janA==}
+ /@next/env@14.2.2:
+ resolution: {integrity: sha512-sk72qRfM1Q90XZWYRoJKu/UWlTgihrASiYw/scb15u+tyzcze3bOuJ/UV6TBOQEeUaxOkRqGeuGUdiiuxc5oqw==}
dev: false
/@next/eslint-plugin-next@14.2.1:
@@ -5975,8 +5966,8 @@ packages:
requiresBuild: true
optional: true
- /@next/swc-darwin-arm64@14.2.1:
- resolution: {integrity: sha512-kGjnjcIJehEcd3rT/3NAATJQndAEELk0J9GmGMXHSC75TMnvpOhONcjNHbjtcWE5HUQnIHy5JVkatrnYm1QhVw==}
+ /@next/swc-darwin-arm64@14.2.2:
+ resolution: {integrity: sha512-3iPgMhzbalizGwHNFUcGnDhFPSgVBHQ8aqSTAMxB5BvJG0oYrDf1WOJZlbXBgunOEj/8KMVbejEur/FpvFsgFQ==}
engines: {node: '>= 10'}
cpu: [arm64]
os: [darwin]
@@ -5992,8 +5983,8 @@ packages:
requiresBuild: true
optional: true
- /@next/swc-darwin-x64@14.2.1:
- resolution: {integrity: sha512-dAdWndgdQi7BK2WSXrx4lae7mYcOYjbHJUhvOUnJjMNYrmYhxbbvJ2xElZpxNxdfA6zkqagIB9He2tQk+l16ew==}
+ /@next/swc-darwin-x64@14.2.2:
+ resolution: {integrity: sha512-x7Afi/jt0ZBRUZHTi49yyej4o8znfIMHO4RvThuoc0P+uli8Jd99y5GKjxoYunPKsXL09xBXEM1+OQy2xEL0Ag==}
engines: {node: '>= 10'}
cpu: [x64]
os: [darwin]
@@ -6009,8 +6000,8 @@ packages:
requiresBuild: true
optional: true
- /@next/swc-linux-arm64-gnu@14.2.1:
- resolution: {integrity: sha512-2ZctfnyFOGvTkoD6L+DtQtO3BfFz4CapoHnyLTXkOxbZkVRgg3TQBUjTD/xKrO1QWeydeo8AWfZRg8539qNKrg==}
+ /@next/swc-linux-arm64-gnu@14.2.2:
+ resolution: {integrity: sha512-zbfPtkk7L41ODMJwSp5VbmPozPmMMQrzAc0HAUomVeVIIwlDGs/UCqLJvLNDt4jpWgc21SjjyIn762lNGrMaUA==}
engines: {node: '>= 10'}
cpu: [arm64]
os: [linux]
@@ -6026,8 +6017,8 @@ packages:
requiresBuild: true
optional: true
- /@next/swc-linux-arm64-musl@14.2.1:
- resolution: {integrity: sha512-jazZXctiaanemy4r+TPIpFP36t1mMwWCKMsmrTRVChRqE6putyAxZA4PDujx0SnfvZHosjdkx9xIq9BzBB5tWg==}
+ /@next/swc-linux-arm64-musl@14.2.2:
+ resolution: {integrity: sha512-wPbS3pI/JU16rm3XdLvvTmlsmm1nd+sBa2ohXgBZcShX4TgOjD4R+RqHKlI1cjo/jDZKXt6OxmcU0Iys0OC/yg==}
engines: {node: '>= 10'}
cpu: [arm64]
os: [linux]
@@ -6043,8 +6034,8 @@ packages:
requiresBuild: true
optional: true
- /@next/swc-linux-x64-gnu@14.2.1:
- resolution: {integrity: sha512-VjCHWCjsAzQAAo8lkBOLEIkBZFdfW+Z18qcQ056kL4KpUYc8o59JhLDCBlhg+hINQRgzQ2UPGma2AURGOH0+Qg==}
+ /@next/swc-linux-x64-gnu@14.2.2:
+ resolution: {integrity: sha512-NqWOHqqq8iC9tuHvZxjQ2tX+jWy2X9y8NX2mcB4sj2bIccuCxbIZrU/ThFPZZPauygajZuVQ6zediejQHwZHwQ==}
engines: {node: '>= 10'}
cpu: [x64]
os: [linux]
@@ -6060,8 +6051,8 @@ packages:
requiresBuild: true
optional: true
- /@next/swc-linux-x64-musl@14.2.1:
- resolution: {integrity: sha512-7HZKYKvAp4nAHiHIbY04finRqjeYvkITOGOurP1aLMexIFG/1+oCnqhGogBdc4lao/lkMW1c+AkwWSzSlLasqw==}
+ /@next/swc-linux-x64-musl@14.2.2:
+ resolution: {integrity: sha512-lGepHhwb9sGhCcU7999+iK1ZZT+6rrIoVg40MP7DZski9GIZP80wORSbt5kJzh9v2x2ev2lxC6VgwMQT0PcgTA==}
engines: {node: '>= 10'}
cpu: [x64]
os: [linux]
@@ -6077,8 +6068,8 @@ packages:
requiresBuild: true
optional: true
- /@next/swc-win32-arm64-msvc@14.2.1:
- resolution: {integrity: sha512-YGHklaJ/Cj/F0Xd8jxgj2p8po4JTCi6H7Z3Yics3xJhm9CPIqtl8erlpK1CLv+HInDqEWfXilqatF8YsLxxA2Q==}
+ /@next/swc-win32-arm64-msvc@14.2.2:
+ resolution: {integrity: sha512-TZSh/48SfcLEQ4rD25VVn2kdIgUWmMflRX3OiyPwGNXn3NiyPqhqei/BaqCYXViIQ+6QsG9R0C8LftMqy8JPMA==}
engines: {node: '>= 10'}
cpu: [arm64]
os: [win32]
@@ -6094,8 +6085,8 @@ packages:
requiresBuild: true
optional: true
- /@next/swc-win32-ia32-msvc@14.2.1:
- resolution: {integrity: sha512-o+ISKOlvU/L43ZhtAAfCjwIfcwuZstiHVXq/BDsZwGqQE0h/81td95MPHliWCnFoikzWcYqh+hz54ZB2FIT8RA==}
+ /@next/swc-win32-ia32-msvc@14.2.2:
+ resolution: {integrity: sha512-M0tBVNMEBJN2ZNQWlcekMn6pvLria7Sa2Fai5znm7CCJz4pP3lrvlSxhKdkCerk0D9E0bqx5yAo3o2Q7RrD4gA==}
engines: {node: '>= 10'}
cpu: [ia32]
os: [win32]
@@ -6111,8 +6102,8 @@ packages:
requiresBuild: true
optional: true
- /@next/swc-win32-x64-msvc@14.2.1:
- resolution: {integrity: sha512-GmRoTiLcvCLifujlisknv4zu9/C4i9r0ktsA8E51EMqJL4bD4CpO7lDYr7SrUxCR0tS4RVcrqKmCak24T0ohaw==}
+ /@next/swc-win32-x64-msvc@14.2.2:
+ resolution: {integrity: sha512-a/20E/wtTJZ3Ykv3f/8F0l7TtgQa2LWHU2oNB9bsu0VjqGuGGHmm/q6waoUNQYTVPYrrlxxaHjJcDV6aiSTt/w==}
engines: {node: '>= 10'}
cpu: [x64]
os: [win32]
@@ -16364,8 +16355,8 @@ packages:
- '@babel/core'
- babel-plugin-macros
- /next@14.2.1(@babel/core@7.24.4)(@playwright/test@1.43.1)(babel-plugin-macros@3.1.0)(react-dom@18.2.0)(react@18.2.0):
- resolution: {integrity: sha512-SF3TJnKdH43PMkCcErLPv+x/DY1YCklslk3ZmwaVoyUfDgHKexuKlf9sEfBQ69w+ue8jQ3msLb+hSj1T19hGag==}
+ /next@14.2.2(@babel/core@7.24.4)(@playwright/test@1.43.1)(babel-plugin-macros@3.1.0)(react-dom@18.2.0)(react@18.2.0):
+ resolution: {integrity: sha512-oGwUaa2bCs47FbuxWMpOoXtBMPYpvTPgdZr3UAo+pu7Ns00z9otmYpoeV1HEiYL06AlRQQIA/ypK526KjJfaxg==}
engines: {node: '>=18.17.0'}
hasBin: true
peerDependencies:
@@ -16382,7 +16373,7 @@ packages:
sass:
optional: true
dependencies:
- '@next/env': 14.2.1
+ '@next/env': 14.2.2
'@playwright/test': 1.43.1
'@swc/helpers': 0.5.5
busboy: 1.6.0
@@ -16393,15 +16384,15 @@ packages:
react-dom: 18.2.0(react@18.2.0)
styled-jsx: 5.1.1(@babel/core@7.24.4)(babel-plugin-macros@3.1.0)(react@18.2.0)
optionalDependencies:
- '@next/swc-darwin-arm64': 14.2.1
- '@next/swc-darwin-x64': 14.2.1
- '@next/swc-linux-arm64-gnu': 14.2.1
- '@next/swc-linux-arm64-musl': 14.2.1
- '@next/swc-linux-x64-gnu': 14.2.1
- '@next/swc-linux-x64-musl': 14.2.1
- '@next/swc-win32-arm64-msvc': 14.2.1
- '@next/swc-win32-ia32-msvc': 14.2.1
- '@next/swc-win32-x64-msvc': 14.2.1
+ '@next/swc-darwin-arm64': 14.2.2
+ '@next/swc-darwin-x64': 14.2.2
+ '@next/swc-linux-arm64-gnu': 14.2.2
+ '@next/swc-linux-arm64-musl': 14.2.2
+ '@next/swc-linux-x64-gnu': 14.2.2
+ '@next/swc-linux-x64-musl': 14.2.2
+ '@next/swc-win32-arm64-msvc': 14.2.2
+ '@next/swc-win32-ia32-msvc': 14.2.2
+ '@next/swc-win32-x64-msvc': 14.2.2
transitivePeerDependencies:
- '@babel/core'
- babel-plugin-macros
diff --git a/scripts/build.mjs b/scripts/build.mjs
index 711bcf389ae274..3a9f594a72844e 100644
--- a/scripts/build.mjs
+++ b/scripts/build.mjs
@@ -8,8 +8,6 @@ import { getWorkspaceRoot } from './utils.mjs';
const exec = promisify(childProcess.exec);
const validBundles = [
- // legacy build using ES6 modules
- 'legacy',
// modern build with a rolling target using ES6 modules
'modern',
// build for node using commonJS modules
@@ -65,7 +63,6 @@ async function run(argv) {
node: topLevelPathImportsCanBePackages ? './node' : './',
modern: './modern',
stable: topLevelPathImportsCanBePackages ? './' : './esm',
- legacy: './legacy',
}[bundle],
);
diff --git a/scripts/sizeSnapshot/webpack.config.js b/scripts/sizeSnapshot/webpack.config.js
index 6a63b053c7ae50..92c97758bc8792 100644
--- a/scripts/sizeSnapshot/webpack.config.js
+++ b/scripts/sizeSnapshot/webpack.config.js
@@ -136,10 +136,6 @@ async function getWebpackEntries() {
// webpack: true,
// path: path.join(path.relative(workspaceRoot, materialPackagePath), 'modern/index.js'),
// },
- {
- id: '@material-ui/core.legacy',
- path: path.join(path.relative(workspaceRoot, materialPackagePath), 'legacy/index.js'),
- },
{
id: '@mui/joy',
path: path.join(path.relative(workspaceRoot, joyPackagePath), 'index.js'),