Merge branch 'next' of https://github.com/mui/material-ui into fix/co…

…demod-pigment
mui · Jun 4, 2024 · ec44ea2 · ec44ea2
2 parents 7533f08 + 460d6f7
commit ec44ea2
Show file tree

Hide file tree

Showing 77 changed files with 662 additions and 400 deletions.
diff --git a/apps/local-ui-lib/package.json b/apps/local-ui-lib/package.json
@@ -3,6 +3,6 @@
   "version": "0.0.1",
   "private": true,
   "dependencies": {
-    "@pigment-css/react": "^0.0.9"
+    "@pigment-css/react": "^0.0.12"
   }
 }
diff --git a/apps/pigment-css-next-app/package.json b/apps/pigment-css-next-app/package.json
@@ -9,7 +9,7 @@
     "clean": "rimraf .next"
   },
   "dependencies": {
-    "@pigment-css/react": "^0.0.10",
+    "@pigment-css/react": "^0.0.12",
     "@mui/utils": "workspace:^",
     "@mui/base": "workspace:^",
     "@mui/lab": "workspace:^",
@@ -24,7 +24,7 @@
     "next": "latest"
   },
   "devDependencies": {
-    "@pigment-css/nextjs-plugin": "^0.0.10",
+    "@pigment-css/nextjs-plugin": "^0.0.12",
     "@types/node": "^20.5.7",
     "@types/react": "^18.2.55",
     "@types/react-dom": "^18.3.0",

diff --git a/apps/pigment-css-vite-app/package.json b/apps/pigment-css-vite-app/package.json
@@ -9,7 +9,7 @@
     "build": "vite build"
   },
   "dependencies": {
-    "@pigment-css/react": "^0.0.9",
+    "@pigment-css/react": "^0.0.12",
     "@mui/utils": "workspace:^",
     "@mui/base": "workspace:^",
     "@mui/lab": "workspace:^",
@@ -27,7 +27,7 @@
   "devDependencies": {
     "@babel/preset-react": "^7.24.6",
     "@babel/preset-typescript": "^7.24.6",
-    "@pigment-css/vite-plugin": "^0.0.9",
+    "@pigment-css/vite-plugin": "^0.0.12",
     "@types/react": "^18.2.55",
     "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react": "^4.3.0",

diff --git a/docs/data/joy/components/radio-button/radio-button.md b/docs/data/joy/components/radio-button/radio-button.md
@@ -37,7 +37,7 @@ When should you use radio buttons rather than checkboxes, switches, or selects?
 import Radio from '@mui/joy/Radio';
 ```
 
-The Joy UI Radio button behaves similar to the native HTML <input type="radio">, so it accepts props like `checked`, `value` and `onChange`.
+The Joy UI Radio button behaves similar to the native HTML `<input type="radio">`, so it accepts props like `checked`, `value` and `onChange`.
 
 {{"demo": "RadioButtons.js"}}
 

diff --git a/docs/data/material/components/accordion/AccordionTransition.js b/docs/data/material/components/accordion/AccordionTransition.js
@@ -20,10 +20,30 @@ export default function AccordionTransition() {
         onChange={handleExpansion}
         slots={{ transition: Fade }}
         slotProps={{ transition: { timeout: 400 } }}
-        sx={{
-          '& .MuiAccordion-region': { height: expanded ? 'auto' : 0 },
-          '& .MuiAccordionDetails-root': { display: expanded ? 'block' : 'none' },
-        }}
+        sx={[
+          expanded
+            ? {
+                '& .MuiAccordion-region': {
+                  height: 'auto',
+                },
+              }
+            : {
+                '& .MuiAccordion-region': {
+                  height: 0,
+                },
+              },
+          expanded
+            ? {
+                '& .MuiAccordionDetails-root': {
+                  display: 'block',
+                },
+              }
+            : {
+                '& .MuiAccordionDetails-root': {
+                  display: 'none',
+                },
+              },
+        ]}
       >
         <AccordionSummary
           expandIcon={<ExpandMoreIcon />}

diff --git a/docs/data/material/components/accordion/AccordionTransition.tsx b/docs/data/material/components/accordion/AccordionTransition.tsx
@@ -20,10 +20,30 @@ export default function AccordionTransition() {
         onChange={handleExpansion}
         slots={{ transition: Fade as AccordionSlots['transition'] }}
         slotProps={{ transition: { timeout: 400 } }}
-        sx={{
-          '& .MuiAccordion-region': { height: expanded ? 'auto' : 0 },
-          '& .MuiAccordionDetails-root': { display: expanded ? 'block' : 'none' },
-        }}
+        sx={[
+          expanded
+            ? {
+                '& .MuiAccordion-region': {
+                  height: 'auto',
+                },
+              }
+            : {
+                '& .MuiAccordion-region': {
+                  height: 0,
+                },
+              },
+          expanded
+            ? {
+                '& .MuiAccordionDetails-root': {
+                  display: 'block',
+                },
+              }
+            : {
+                '& .MuiAccordionDetails-root': {
+                  display: 'none',
+                },
+              },
+        ]}
       >
         <AccordionSummary
           expandIcon={<ExpandMoreIcon />}

diff --git a/docs/data/material/components/app-bar/ResponsiveAppBar.js b/docs/data/material/components/app-bar/ResponsiveAppBar.js
@@ -124,7 +124,6 @@ function ResponsiveAppBar() {
               </Button>
             ))}
           </Box>
-
           <Box sx={{ flexGrow: 0 }}>
             <Tooltip title="Open settings">
               <IconButton onClick={handleOpenUserMenu} sx={{ p: 0 }}>

diff --git a/docs/data/material/components/app-bar/ResponsiveAppBar.tsx b/docs/data/material/components/app-bar/ResponsiveAppBar.tsx
@@ -124,7 +124,6 @@ function ResponsiveAppBar() {
               </Button>
             ))}
           </Box>
-
           <Box sx={{ flexGrow: 0 }}>
             <Tooltip title="Open settings">
               <IconButton onClick={handleOpenUserMenu} sx={{ p: 0 }}>

diff --git a/docs/data/material/components/autocomplete/CountrySelect.tsx b/docs/data/material/components/autocomplete/CountrySelect.tsx
@@ -38,14 +38,12 @@ export default function CountrySelect() {
     />
   );
 }
-
 interface CountryType {
   code: string;
   label: string;
   phone: string;
   suggested?: boolean;
 }
-
 // From https://bitbucket.org/atlassian/atlaskit-mk-2/raw/4ad0e56649c3e6c973e226b7efaeb28cb240ccb0/packages/core/select/src/data/countries.js
 const countries: readonly CountryType[] = [
   { code: 'AD', label: 'Andorra', phone: '376' },

diff --git a/docs/data/material/components/autocomplete/CustomInputAutocomplete.js b/docs/data/material/components/autocomplete/CustomInputAutocomplete.js
@@ -8,15 +8,14 @@ export default function CustomInputAutocomplete() {
     <label>
       Value:{' '}
       <Autocomplete
-        sx={{
+        sx={(theme) => ({
           display: 'inline-block',
           '& input': {
             width: 200,
             bgcolor: 'background.paper',
-            color: (theme) =>
-              theme.palette.getContrastText(theme.palette.background.paper),
+            color: theme.palette.getContrastText(theme.palette.background.paper),
           },
-        }}
+        })}
         id="custom-input-demo"
         options={options}
         renderInput={(params) => (

diff --git a/docs/data/material/components/autocomplete/CustomInputAutocomplete.tsx b/docs/data/material/components/autocomplete/CustomInputAutocomplete.tsx
@@ -8,15 +8,14 @@ export default function CustomInputAutocomplete() {
     <label>
       Value:{' '}
       <Autocomplete
-        sx={{
+        sx={(theme) => ({
           display: 'inline-block',
           '& input': {
             width: 200,
             bgcolor: 'background.paper',
-            color: (theme) =>
-              theme.palette.getContrastText(theme.palette.background.paper),
+            color: theme.palette.getContrastText(theme.palette.background.paper),
           },
-        }}
+        })}
         id="custom-input-demo"
         options={options}
         renderInput={(params) => (

diff --git a/docs/data/material/components/autocomplete/GitHubLabel.js b/docs/data/material/components/autocomplete/GitHubLabel.js
@@ -162,13 +162,14 @@ export default function GitHubLabel() {
         <ClickAwayListener onClickAway={handleClose}>
           <div>
             <Box
-              sx={{
-                borderBottom: `1px solid ${
-                  theme.palette.mode === 'light' ? '#eaecef' : '#30363d'
-                }`,
+              sx={(t) => ({
+                borderBottom: `1px solid ${'#30363d'}`,
                 padding: '8px 10px',
                 fontWeight: 600,
-              }}
+                ...t.applyStyles('light', {
+                  borderBottom: `1px solid ${'#eaecef'}`,
+                }),
+              })}
             >
               Apply labels to this pull request
             </Box>
@@ -216,13 +217,15 @@ export default function GitHubLabel() {
                     style={{ backgroundColor: option.color }}
                   />
                   <Box
-                    sx={{
+                    sx={(t) => ({
                       flexGrow: 1,
                       '& span': {
-                        color:
-                          theme.palette.mode === 'light' ? '#586069' : '#8b949e',
+                        color: '#8b949e',
+                        ...t.applyStyles('light', {
+                          color: '#586069',
+                        }),
                       },
-                    }}
+                    })}
                   >
                     {option.name}
                     <br />

diff --git a/docs/data/material/components/autocomplete/GitHubLabel.tsx b/docs/data/material/components/autocomplete/GitHubLabel.tsx
@@ -164,13 +164,14 @@ export default function GitHubLabel() {
         <ClickAwayListener onClickAway={handleClose}>
           <div>
             <Box
-              sx={{
-                borderBottom: `1px solid ${
-                  theme.palette.mode === 'light' ? '#eaecef' : '#30363d'
-                }`,
+              sx={(t) => ({
+                borderBottom: `1px solid ${'#30363d'}`,
                 padding: '8px 10px',
                 fontWeight: 600,
-              }}
+                ...t.applyStyles('light', {
+                  borderBottom: `1px solid ${'#eaecef'}`,
+                }),
+              })}
             >
               Apply labels to this pull request
             </Box>
@@ -222,13 +223,15 @@ export default function GitHubLabel() {
                     style={{ backgroundColor: option.color }}
                   />
                   <Box
-                    sx={{
+                    sx={(t) => ({
                       flexGrow: 1,
                       '& span': {
-                        color:
-                          theme.palette.mode === 'light' ? '#586069' : '#8b949e',
+                        color: '#8b949e',
+                        ...t.applyStyles('light', {
+                          color: '#586069',
+                        }),
                       },
-                    }}
+                    })}
                   >
                     {option.name}
                     <br />

diff --git a/docs/data/material/components/backdrop/SimpleBackdrop.js b/docs/data/material/components/backdrop/SimpleBackdrop.js
@@ -16,7 +16,7 @@ export default function SimpleBackdrop() {
     <div>
       <Button onClick={handleOpen}>Show backdrop</Button>
       <Backdrop
-        sx={{ color: '#fff', zIndex: (theme) => theme.zIndex.drawer + 1 }}
+        sx={(theme) => ({ color: '#fff', zIndex: theme.zIndex.drawer + 1 })}
         open={open}
         onClick={handleClose}
       >

diff --git a/docs/data/material/components/backdrop/SimpleBackdrop.tsx b/docs/data/material/components/backdrop/SimpleBackdrop.tsx
@@ -16,7 +16,7 @@ export default function SimpleBackdrop() {
     <div>
       <Button onClick={handleOpen}>Show backdrop</Button>
       <Backdrop
-        sx={{ color: '#fff', zIndex: (theme) => theme.zIndex.drawer + 1 }}
+        sx={(theme) => ({ color: '#fff', zIndex: theme.zIndex.drawer + 1 })}
         open={open}
         onClick={handleClose}
       >

diff --git a/docs/data/material/components/backdrop/SimpleBackdrop.tsx.preview b/docs/data/material/components/backdrop/SimpleBackdrop.tsx.preview
@@ -1,6 +1,6 @@
 <Button onClick={handleOpen}>Show backdrop</Button>
 <Backdrop
-  sx={{ color: '#fff', zIndex: (theme) => theme.zIndex.drawer + 1 }}
+  sx={(theme) => ({ color: '#fff', zIndex: theme.zIndex.drawer + 1 })}
   open={open}
   onClick={handleClose}
 >

diff --git a/docs/data/material/components/badges/BadgeOverlap.tsx b/docs/data/material/components/badges/BadgeOverlap.tsx
@@ -9,7 +9,6 @@ const rectangle = <Box component="span" sx={shapeStyles} />;
 const circle = (
   <Box component="span" sx={{ ...shapeStyles, ...shapeCircleStyles }} />
 );
-
 export default function BadgeOverlap() {
   return (
     <Stack spacing={3} direction="row">

diff --git a/docs/data/material/components/buttons/ButtonBaseDemo.js b/docs/data/material/components/buttons/ButtonBaseDemo.js
@@ -104,12 +104,12 @@ export default function ButtonBaseDemo() {
               component="span"
               variant="subtitle1"
               color="inherit"
-              sx={{
+              sx={(theme) => ({
                 position: 'relative',
                 p: 4,
                 pt: 2,
-                pb: (theme) => `calc(${theme.spacing(1)} + 6px)`,
-              }}
+                pb: `calc(${theme.spacing(1)} + 6px)`,
+              })}
             >
               {image.title}
               <ImageMarked className="MuiImageMarked-root" />

diff --git a/docs/data/material/components/buttons/ButtonBaseDemo.tsx b/docs/data/material/components/buttons/ButtonBaseDemo.tsx
@@ -104,12 +104,12 @@ export default function ButtonBaseDemo() {
               component="span"
               variant="subtitle1"
               color="inherit"
-              sx={{
+              sx={(theme) => ({
                 position: 'relative',
                 p: 4,
                 pt: 2,
-                pb: (theme) => `calc(${theme.spacing(1)} + 6px)`,
-              }}
+                pb: `calc(${theme.spacing(1)} + 6px)`,
+              })}
             >
               {image.title}
               <ImageMarked className="MuiImageMarked-root" />

diff --git a/docs/data/material/components/buttons/LoadingButtonsTransition.js b/docs/data/material/components/buttons/LoadingButtonsTransition.js
@@ -69,7 +69,6 @@ export default function LoadingButtonsTransition() {
           <span>Save</span>
         </LoadingButton>
       </Box>
-
       <Box sx={{ '& > button': { m: 1 } }}>
         <LoadingButton
           onClick={handleClick}

diff --git a/docs/data/material/components/buttons/LoadingButtonsTransition.tsx b/docs/data/material/components/buttons/LoadingButtonsTransition.tsx
@@ -69,7 +69,6 @@ export default function LoadingButtonsTransition() {
           <span>Save</span>
         </LoadingButton>
       </Box>
-
       <Box sx={{ '& > button': { m: 1 } }}>
         <LoadingButton
           onClick={handleClick}

diff --git a/docs/data/material/components/chips/ChipsPlayground.js b/docs/data/material/components/chips/ChipsPlayground.js
@@ -93,7 +93,12 @@ function ChipsPlayground() {
     <Grid container sx={{ flexGrow: 1 }}>
       <Grid item xs={12}>
         <Grid container justifyContent="center" alignItems="center">
-          <Grid item sx={{ height: (theme) => theme.spacing(10) }}>
+          <Grid
+            item
+            sx={(theme) => ({
+              height: theme.spacing(10),
+            })}
+          >
             <Chip
               label="Chip Component"
               color={color}
@@ -258,5 +263,4 @@ function ChipsPlayground() {
     </Grid>
   );
 }
-
 export default ChipsPlayground;
diff --git a/docs/data/material/components/dialogs/CustomizedDialogs.js b/docs/data/material/components/dialogs/CustomizedDialogs.js
@@ -44,12 +44,12 @@ export default function CustomizedDialogs() {
         <IconButton
           aria-label="close"
           onClick={handleClose}
-          sx={{
+          sx={(theme) => ({
             position: 'absolute',
             right: 8,
             top: 8,
-            color: (theme) => theme.palette.grey[500],
-          }}
+            color: theme.palette.grey[500],
+          })}
         >
           <CloseIcon />
         </IconButton>