Merge branch 'next' into toolpad-showcase

Signed-off-by: Danilo Leal <67129314+danilo-leal@users.noreply.github.com>
mui · Jun 21, 2024 · e84e880 · e84e880
2 parents efeb4dc + 9ffa010
commit e84e880
Show file tree

Hide file tree

Showing 167 changed files with 1,002 additions and 1,106 deletions.
diff --git a/apps/pigment-css-vite-app/package.json b/apps/pigment-css-vite-app/package.json
@@ -30,7 +30,7 @@
     "@pigment-css/vite-plugin": "^0.0.13",
     "@types/react": "^18.2.55",
     "@types/react-dom": "^18.3.0",
-    "@vitejs/plugin-react": "^4.3.0",
+    "@vitejs/plugin-react": "^4.3.1",
     "postcss": "^8.4.38",
     "postcss-combine-media-query": "^1.0.1",
     "vite": "5.3.1",

diff --git a/benchmark/package.json b/benchmark/package.json
@@ -11,7 +11,7 @@
     "server:system": "cd ../ && cross-env NODE_ENV=production BABEL_ENV=benchmark babel-node benchmark/server/scenarios/system.js --inspect=0.0.0.0:9229 --extensions \".tsx,.ts,.js\""
   },
   "dependencies": {
-    "@babel/runtime": "^7.24.6",
+    "@babel/runtime": "^7.24.7",
     "@chakra-ui/system": "^2.6.2",
     "@emotion/react": "^11.11.4",
     "@emotion/server": "^11.11.0",

diff --git a/docs/data/material/components/autocomplete/FixedTags.js b/docs/data/material/components/autocomplete/FixedTags.js
@@ -21,13 +21,17 @@ export default function FixedTags() {
       options={top100Films}
       getOptionLabel={(option) => option.title}
       renderTags={(tagValue, getTagProps) =>
-        tagValue.map((option, index) => (
-          <Chip
-            label={option.title}
-            {...getTagProps({ index })}
-            disabled={fixedOptions.indexOf(option) !== -1}
-          />
-        ))
+        tagValue.map((option, index) => {
+          const { key, ...tagProps } = getTagProps({ index });
+          return (
+            <Chip
+              key={key}
+              label={option.title}
+              {...tagProps}
+              disabled={fixedOptions.indexOf(option) !== -1}
+            />
+          );
+        })
       }
       style={{ width: 500 }}
       renderInput={(params) => (

diff --git a/docs/data/material/components/autocomplete/FixedTags.tsx b/docs/data/material/components/autocomplete/FixedTags.tsx
@@ -21,13 +21,17 @@ export default function FixedTags() {
       options={top100Films}
       getOptionLabel={(option) => option.title}
       renderTags={(tagValue, getTagProps) =>
-        tagValue.map((option, index) => (
-          <Chip
-            label={option.title}
-            {...getTagProps({ index })}
-            disabled={fixedOptions.indexOf(option) !== -1}
-          />
-        ))
+        tagValue.map((option, index) => {
+          const { key, ...tagProps } = getTagProps({ index });
+          return (
+            <Chip
+              key={key}
+              label={option.title}
+              {...tagProps}
+              disabled={fixedOptions.indexOf(option) !== -1}
+            />
+          );
+        })
       }
       style={{ width: 500 }}
       renderInput={(params) => (

diff --git a/docs/data/material/components/autocomplete/Sizes.js b/docs/data/material/components/autocomplete/Sizes.js
@@ -66,14 +66,18 @@ export default function Sizes() {
         getOptionLabel={(option) => option.title}
         defaultValue={top100Films[13]}
         renderTags={(value, getTagProps) =>
-          value.map((option, index) => (
-            <Chip
-              variant="outlined"
-              label={option.title}
-              size="small"
-              {...getTagProps({ index })}
-            />
-          ))
+          value.map((option, index) => {
+            const { key, ...tagProps } = getTagProps({ index });
+            return (
+              <Chip
+                key={key}
+                variant="outlined"
+                label={option.title}
+                size="small"
+                {...tagProps}
+              />
+            );
+          })
         }
         renderInput={(params) => (
           <TextField
@@ -92,14 +96,18 @@ export default function Sizes() {
         getOptionLabel={(option) => option.title}
         defaultValue={[top100Films[13]]}
         renderTags={(value, getTagProps) =>
-          value.map((option, index) => (
-            <Chip
-              variant="outlined"
-              label={option.title}
-              size="small"
-              {...getTagProps({ index })}
-            />
-          ))
+          value.map((option, index) => {
+            const { key, ...tagProps } = getTagProps({ index });
+            return (
+              <Chip
+                key={key}
+                variant="outlined"
+                label={option.title}
+                size="small"
+                {...tagProps}
+              />
+            );
+          })
         }
         renderInput={(params) => (
           <TextField

diff --git a/docs/data/material/components/autocomplete/Sizes.tsx b/docs/data/material/components/autocomplete/Sizes.tsx
@@ -66,14 +66,18 @@ export default function Sizes() {
         getOptionLabel={(option) => option.title}
         defaultValue={top100Films[13]}
         renderTags={(value, getTagProps) =>
-          value.map((option, index) => (
-            <Chip
-              variant="outlined"
-              label={option.title}
-              size="small"
-              {...getTagProps({ index })}
-            />
-          ))
+          value.map((option, index) => {
+            const { key, ...tagProps } = getTagProps({ index });
+            return (
+              <Chip
+                key={key}
+                variant="outlined"
+                label={option.title}
+                size="small"
+                {...tagProps}
+              />
+            );
+          })
         }
         renderInput={(params) => (
           <TextField
@@ -92,14 +96,18 @@ export default function Sizes() {
         getOptionLabel={(option) => option.title}
         defaultValue={[top100Films[13]]}
         renderTags={(value, getTagProps) =>
-          value.map((option, index) => (
-            <Chip
-              variant="outlined"
-              label={option.title}
-              size="small"
-              {...getTagProps({ index })}
-            />
-          ))
+          value.map((option, index) => {
+            const { key, ...tagProps } = getTagProps({ index });
+            return (
+              <Chip
+                key={key}
+                variant="outlined"
+                label={option.title}
+                size="small"
+                {...tagProps}
+              />
+            );
+          })
         }
         renderInput={(params) => (
           <TextField

diff --git a/docs/data/material/components/selects/SelectAutoWidth.js b/docs/data/material/components/selects/SelectAutoWidth.js
@@ -26,7 +26,7 @@ export default function SelectAutoWidth() {
           <MenuItem value="">
             <em>None</em>
           </MenuItem>
-          <MenuItem value={10}>Twenty</MenuItem>
+          <MenuItem value={20}>Twenty</MenuItem>
           <MenuItem value={21}>Twenty one</MenuItem>
           <MenuItem value={22}>Twenty one and a half</MenuItem>
         </Select>

diff --git a/docs/data/material/components/selects/SelectAutoWidth.tsx b/docs/data/material/components/selects/SelectAutoWidth.tsx
@@ -26,7 +26,7 @@ export default function SelectAutoWidth() {
           <MenuItem value="">
             <em>None</em>
           </MenuItem>
-          <MenuItem value={10}>Twenty</MenuItem>
+          <MenuItem value={20}>Twenty</MenuItem>
           <MenuItem value={21}>Twenty one</MenuItem>
           <MenuItem value={22}>Twenty one and a half</MenuItem>
         </Select>

diff --git a/docs/package.json b/docs/package.json
@@ -43,15 +43,15 @@
     "@mui/system": "workspace:^",
     "@mui/types": "workspace:^",
     "@mui/utils": "workspace:^",
-    "@mui/x-charts": "7.6.2",
-    "@mui/x-data-grid": "7.6.2",
-    "@mui/x-data-grid-generator": "7.6.2",
-    "@mui/x-data-grid-premium": "7.6.2",
-    "@mui/x-data-grid-pro": "7.6.2",
-    "@mui/x-date-pickers": "7.6.2",
-    "@mui/x-date-pickers-pro": "7.6.2",
-    "@mui/x-license": "7.6.1",
-    "@mui/x-tree-view": "7.6.2",
+    "@mui/x-charts": "7.7.0",
+    "@mui/x-data-grid": "7.7.0",
+    "@mui/x-data-grid-generator": "7.7.0",
+    "@mui/x-data-grid-premium": "7.7.0",
+    "@mui/x-data-grid-pro": "7.7.0",
+    "@mui/x-date-pickers": "7.7.0",
+    "@mui/x-date-pickers-pro": "7.7.0",
+    "@mui/x-license": "7.7.0",
+    "@mui/x-tree-view": "7.7.0",
     "@popperjs/core": "^2.11.8",
     "@react-spring/web": "^9.7.3",
     "autoprefixer": "^10.4.19",
@@ -132,7 +132,7 @@
     "chai": "^4.4.1",
     "cross-fetch": "^4.0.0",
     "gm": "^1.25.0",
-    "marked": "^5.1.2",
+    "marked": "^13.0.0",
     "playwright": "^1.44.1",
     "prettier": "^3.3.2",
     "tailwindcss": "^3.4.4",

diff --git a/docs/pages/blog/mui-x-end-v6-features.md b/docs/pages/blog/mui-x-end-v6-features.md
@@ -146,7 +146,7 @@ Most notably:
   - New UI for column management
   - Pivoting for the [Premium](/x/react-data-grid/#premium-plan) version
 
-We'll continue to expand our portfolio of Charts, including [Heatmap](/x/react-charts/heat-map/), [Funnel](/x/react-charts/funnel/), and [Gantt](/x/react-charts/gantt/); and explore virtualization and other advanced use cases for the Tree View component.
+We'll continue to expand our portfolio of Charts, including [Heatmap](/x/react-charts/heatmap/), [Funnel](/x/react-charts/funnel/), and [Gantt](/x/react-charts/gantt/); and explore virtualization and other advanced use cases for the Tree View component.
 
 We encourage you to upvote issues on GitHub to help us prioritize.
 Your input directly influences our development schedule, so don't hesitate to let us know what matters most to you!

diff --git a/docs/pages/blog/mui-x-mid-v6-features.md b/docs/pages/blog/mui-x-mid-v6-features.md
@@ -112,7 +112,7 @@ Check out the video below, highlighting some of our Charts:
 
 As we progress toward the stable version, we're committed to enhancing the overall experience for developers and users, so your feedback is fundamental!
 
-We will also steadily expand our portfolio with new chart types such as [Heatmap](https://mui.com/x/react-charts/heat-map/), [Funnel](https://mui.com/x/react-charts/funnel/), [Gantt](https://mui.com/x/react-charts/gantt/), and more.
+We will also steadily expand our portfolio with new chart types such as [Heatmap](https://mui.com/x/react-charts/heatmap/), [Funnel](https://mui.com/x/react-charts/funnel/), [Gantt](https://mui.com/x/react-charts/gantt/), and more.
 If there's a specific chart visualization you'd like us to prioritize, we encourage you to upvote the respective [issue on GitHub](https://github.com/mui/mui-x/issues?q=is%3Aissue+is%3Aopen+label%3A%22component%3A+charts%22+label%3A%22waiting+for+%F0%9F%91%8D%22).
 Your input can directly influence our development schedule, so don't hesitate to let us know what matters most to you!
 

diff --git a/docs/src/components/about/OurValues.tsx b/docs/src/components/about/OurValues.tsx
@@ -74,7 +74,7 @@ export default function OurValues() {
             <Paper
               variant="outlined"
               sx={(theme) => ({
-                p: 4,
+                p: 2.5,
                 height: '100%',
                 display: 'flex',
                 flexDirection: 'column',
@@ -110,14 +110,12 @@ export default function OurValues() {
                   variant="body2"
                   sx={[
                     {
-                      fontWeight: 'bold',
+                      fontWeight: 'semiBold',
                     },
                     (theme) => ({
                       mb: 0.5,
                       color: (theme.vars || theme).palette.text.primary,
                       '&::first-letter': {
-                        mr: 0.1,
-                        fontSize: theme.typography.pxToRem(16),
                         color: (theme.vars || theme).palette.primary.main,
                       },
                       ...theme.applyDarkStyles({

diff --git a/docs/src/components/careers/PerksBenefits.tsx b/docs/src/components/careers/PerksBenefits.tsx
@@ -19,30 +19,53 @@ const companyInfo = [
   },
   {
     title: 'Handbook',
-    description: 'Learn everything about how MUI as a company is run.',
+    description: 'Learn everything about how MUI as a company.',
     routeUrl: ROUTES.handbook,
   },
   {
     title: 'Blog',
-    description: 'Check behind-the-scenes and news about the company.',
+    description: 'Learn about our products and team.',
     routeUrl: ROUTES.blog,
   },
 ];
 
+interface CardContentBlockProps {
+  description: string;
+  title: string;
+}
+
+function CardContentBlock({ title, description }: CardContentBlockProps) {
+  return (
+    <React.Fragment>
+      <Typography component="h2" variant="body2" sx={{ fontWeight: 'semiBold' }}>
+        {title}
+      </Typography>
+      <Typography variant="body2" sx={{ color: 'text.secondary', mb: 1 }}>
+        {description}
+      </Typography>
+      <Typography variant="body2" color="primary" sx={{ fontWeight: 'bold', mt: 'auto' }}>
+        Learn more <KeyboardArrowRightRounded fontSize="small" sx={{ verticalAlign: 'middle' }} />
+      </Typography>
+    </React.Fragment>
+  );
+}
+
 function RemoteAwardCard() {
   return (
     <Paper
       component={Link}
       href="/blog/remote-award-win-2024/"
       noLinkStyle
       variant="outlined"
-      sx={{ p: 2 }}
+      sx={{ p: 2, display: 'flex', flexDirection: 'column ' }}
     >
       <Box
         sx={{
           mb: 2,
           maxWidth: { xs: 315, sm: 325 },
           maxHeight: 315,
+          display: 'flex',
+          aspectRatio: '1 / 1',
           border: '1px solid',
           borderColor: 'divider',
           borderRadius: '6px',
@@ -68,17 +91,12 @@ function RemoteAwardCard() {
           ]}
         />
       </Box>
-      <div>
-        <Typography component="h2" variant="body2" sx={{ fontWeight: 'semiBold' }}>
-          Remote Excellence Awards
-        </Typography>
-        <Typography variant="body2" sx={{ color: 'text.secondary', mb: 1 }}>
-          Winners in the first-ever Remote Excellence Awards, in the Small & Mighty category! 🎉
-        </Typography>
-        <Typography variant="body2" color="primary" sx={{ fontWeight: 'bold' }}>
-          Learn more <KeyboardArrowRightRounded fontSize="small" sx={{ verticalAlign: 'middle' }} />
-        </Typography>
-      </div>
+      <Box sx={{ mt: 'auto' }}>
+        <CardContentBlock
+          title="Remote Excellence Awards"
+          description={`Winners in the first-ever Remote Excellence Awards, in the Small & Mighty category! 🎉`}
+        />
+      </Box>
     </Paper>
   );
 }
@@ -151,16 +169,7 @@ export default function PerksBenefits() {
                 variant="outlined"
                 sx={{ p: 2, width: '100%', flexGrow: 1, display: 'flex', flexDirection: 'column' }}
               >
-                <Typography variant="body2" sx={{ fontWeight: 'bold', mb: 0.5 }}>
-                  {title}
-                </Typography>
-                <Typography variant="body2" sx={{ color: 'text.secondary', mb: 1 }}>
-                  {description}
-                </Typography>
-                <Typography variant="body2" color="primary" sx={{ fontWeight: 'bold', mt: 'auto' }}>
-                  Learn more{' '}
-                  <KeyboardArrowRightRounded fontSize="small" sx={{ verticalAlign: 'middle' }} />
-                </Typography>
+                <CardContentBlock title={title} description={description} />
               </Paper>
             ))}
           </Stack>