@mui/docs 6.0.0-alpha.7 → 6.0.0-alpha.8

package/CHANGELOG.md

@@ -1,5 +1,40 @@
 # [Versions](https://mui.com/versions/)
 
+## v6.0.0-alpha.8
+
+<!-- generated comparing v6.0.0-alpha.7..next -->
+
+_May 21, 2024_
+
+A big thanks to the 7 contributors who made this release possible.
+This release was mostly about 🐛 bug fixes and 📚 documentation improvements.
+
+### `@mui/material@6.0.0-alpha.7`
+
+- &#8203;<!-- 04 -->[material-ui] Filter only valid theme palette for generating styles (#42147) @siriwatknp
+- &#8203;<!-- 03 -->[material-ui] Remove UMD bundle (#42172) @ZeeshanTamboli
+- &#8203;<!-- 02 -->[material-ui][TextField] Deprecate `*Props` props (#42062) @DiegoAndai
+
+### Docs
+
+- &#8203;<!-- 08 -->[docs] Remove Base UI from the README (#42307) @danilo-leal
+- &#8203;<!-- 07 -->[docs][material-ui] Fix typo in style interoperability with Tailwind CSS docs (#42279) @ZeeshanTamboli
+- &#8203;<!-- 06 -->[docs][material-ui] Add supported browsers section to migration guide (#42194) @DiegoAndai
+- &#8203;<!-- 05 -->[docs][material-ui][Pagination] Clarify pagination `page` prop API (#42220) @Mandar-Pandya
+
+### Core
+
+- &#8203;<!-- 12 -->[blog] Update blog post OG image (#42270) @danilo-leal
+- &#8203;<!-- 11 -->[blog] Update Pigment CSS post (#42266) @danilo-leal
+- &#8203;<!-- 10 -->[docs] Remove LocalMonero (#42224) @oliviertassinari
+- &#8203;<!-- 08 -->[docs-infra] Fix keyboard navigation on page tabs (#42152) @danilo-leal
+- &#8203;<!-- 10 -->[code-infra] Remove raw-loader (#42275) @Janpot
+- &#8203;<!-- 09 -->[core] Remove outdated Babel plugins (#42140) @ZeeshanTamboli
+- &#8203;<!-- 12 -->[core] Fix a few more key spread issues (#42168) @oliviertassinari
+- &#8203;<!-- 01 -->[website] Avoid duplicate simple vs. rich (#42100) @oliviertassinari
+
+All contributors of this release in alphabetical order: @danilo-leal, @DiegoAndai, @Janpot, @Mandar-Pandya, @oliviertassinari, @siriwatknp, @ZeeshanTamboli
+
 ## v6.0.0-alpha.7
 
 <!-- generated comparing v6.0.0-alpha.6..next -->
@@ -53,7 +88,7 @@ All contributors of this release in alphabetical order: @aarongarciah, @alexfauq
 
 _May 8, 2024_
 
-A big thanks to the 10 contributors who made this release possible. Here are some highlights ✨:
+A big thanks to the 10 contributors who made this release possible.
 
 ### `@mui/material@6.0.0-alpha.6`
 
@@ -101,7 +136,7 @@ All contributors of this release in alphabetical order: @aarongarciah, @danilo-l
 
 _May 1, 2024_
 
-A big thanks to the 9 contributors who made this release possible. Here are some highlights ✨:
+A big thanks to the 9 contributors who made this release possible.
 
 ### `@mui/material@6.0.0-alpha.5`
 

package/CodeCopy/CodeCopyButton.js

@@ -1,15 +1,12 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 var _span, _span2;
-const _excluded = ["code"];
 import * as React from 'react';
 import useClipboardCopy from './useClipboardCopy';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export function CodeCopyButton(props) {
   const {
-      code
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
+    code,
+    ...other
+  } = props;
   const {
     copy,
     isCopied
@@ -19,7 +16,8 @@ export function CodeCopyButton(props) {
   const key = macOS ? '⌘' : 'Ctrl + ';
   return /*#__PURE__*/_jsx("div", {
     className: "MuiCode-copy-container",
-    children: /*#__PURE__*/_jsxs("button", _extends({}, other, {
+    children: /*#__PURE__*/_jsxs("button", {
+      ...other,
       "aria-label": "Copy the code",
       type: "button",
       className: "MuiCode-copy",
@@ -38,6 +36,6 @@ export function CodeCopyButton(props) {
           children: ")"
         }))]
       })]
-    }))
+    })
   });
 }

package/HighlightedCode/HighlightedCode.js

@@ -1,6 +1,3 @@
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["copyButtonHidden", "copyButtonProps", "code", "language", "plainStyle", "parentComponent", "preComponent"];
 import * as React from 'react';
 import prism from '@mui/internal-markdown/prism';
 import { NoSsr } from '@mui/base/NoSsr';
@@ -20,39 +17,42 @@ const Pre = styled('pre')(({
   [theme.breakpoints.up('md')]: {
     maxWidth: 'calc(100vw - 32px - 16px)'
   },
-  '& code': _extends({}, theme.typography.caption, {
+  '& code': {
+    // Avoid layout jump after hydration (style injected by Prism)
+    ...theme.typography.caption,
     fontFamily: theme.typography.fontFamilyCode,
     fontWeight: 400,
     WebkitFontSmoothing: 'subpixel-antialiased'
     // Reset for Safari
     // https://github.com/necolas/normalize.css/blob/master/normalize.css#L102
-  })
+  }
 }));
 export const HighlightedCode = /*#__PURE__*/React.forwardRef(function HighlightedCode(props, ref) {
   const {
-      copyButtonHidden = false,
-      copyButtonProps,
-      code,
-      language,
-      plainStyle,
-      parentComponent: Component = plainStyle ? 'div' : MarkdownElement,
-      preComponent: PreComponent = plainStyle ? Pre : 'pre'
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
+    copyButtonHidden = false,
+    copyButtonProps,
+    code,
+    language,
+    plainStyle,
+    parentComponent: Component = plainStyle ? 'div' : MarkdownElement,
+    preComponent: PreComponent = plainStyle ? Pre : 'pre',
+    ...other
+  } = props;
   const renderedCode = React.useMemo(() => {
     return prism(code.trim(), language);
   }, [code, language]);
   const handlers = useCodeCopy();
-  return /*#__PURE__*/_jsx(Component, _extends({
-    ref: ref
-  }, other, {
-    children: /*#__PURE__*/_jsxs("div", _extends({
-      className: "MuiCode-root"
-    }, handlers, {
+  return /*#__PURE__*/_jsx(Component, {
+    ref: ref,
+    ...other,
+    children: /*#__PURE__*/_jsxs("div", {
+      className: "MuiCode-root",
+      ...handlers,
       children: [copyButtonHidden ? null : /*#__PURE__*/_jsx(NoSsr, {
-        children: /*#__PURE__*/_jsx(CodeCopyButton, _extends({
-          code: code
-        }, copyButtonProps))
+        children: /*#__PURE__*/_jsx(CodeCopyButton, {
+          code: code,
+          ...copyButtonProps
+        })
       }), /*#__PURE__*/_jsx(PreComponent, {
         children: /*#__PURE__*/_jsx("code", {
           className: `language-${language}`
@@ -63,6 +63,6 @@ export const HighlightedCode = /*#__PURE__*/React.forwardRef(function Highlighte
           }
         })
       })]
-    }))
-  }));
+    })
+  });
 });

package/InfoCard/InfoCard.js

@@ -1,6 +1,3 @@
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["classNameDescription", "classNameTitle", "description", "icon", "link", "svg", "title", "titleProps"];
 import * as React from 'react';
 import { alpha } from '@mui/material/styles';
 import Box from '@mui/material/Box';
@@ -12,7 +9,7 @@ export function GlowingIconContainer({
   icon
 }) {
   return /*#__PURE__*/_jsx(Box, {
-    sx: theme => _extends({
+    sx: theme => ({
       width: 36,
       height: 36,
       display: 'flex',
@@ -26,63 +23,65 @@ export function GlowingIconContainer({
       boxShadow: `0px 0 0 2px ${alpha(theme.palette.primary[500], 0.1)}, 0px 2px 12px 0px rgba(234, 237, 241, 0.3) inset`,
       '& .MuiSvgIcon-root': {
         fontSize: theme.typography.pxToRem(18)
-      }
-    }, theme.applyDarkStyles({
-      borderColor: alpha(theme.palette.primary[400], 0.25),
-      bgcolor: alpha(theme.palette.primary[900], 0.2),
-      boxShadow: `0 0 0 2px ${alpha(theme.palette.primary[600], 0.1)}, 0px 2px 12px 0px rgba(0, 0, 0, 0.25) inset`
-    })),
+      },
+      ...theme.applyDarkStyles({
+        borderColor: alpha(theme.palette.primary[400], 0.25),
+        bgcolor: alpha(theme.palette.primary[900], 0.2),
+        boxShadow: `0 0 0 2px ${alpha(theme.palette.primary[600], 0.1)}, 0px 2px 12px 0px rgba(0, 0, 0, 0.25) inset`
+      })
+    }),
     children: icon
   });
 }
 export function InfoCard(props) {
   const {
-      classNameDescription,
-      classNameTitle,
-      description,
-      icon,
-      link,
-      svg,
-      title,
-      titleProps
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  return /*#__PURE__*/_jsxs(Paper, _extends({
+    classNameDescription,
+    classNameTitle,
+    description,
+    icon,
+    link,
+    svg,
+    title,
+    titleProps,
+    ...other
+  } = props;
+  return /*#__PURE__*/_jsxs(Paper, {
     variant: "outlined",
     component: link ? Link : 'div',
-    href: link
-  }, link ? {
-    noLinkStyle: true,
-    // Fix overloading with prefetch={false}, only prefetch on hover.
-    prefetch: false
-  } : {}, {
-    sx: theme => _extends({
+    href: link,
+    ...(link ? {
+      noLinkStyle: true,
+      // Fix overloading with prefetch={false}, only prefetch on hover.
+      prefetch: false
+    } : {}),
+    sx: theme => ({
       p: 2.5,
       height: '100%',
-      background: `${(theme.vars || theme).palette.gradients.linearSubtle}`
-    }, theme.applyDarkStyles({
-      bgcolor: alpha(theme.palette.primaryDark[800], 0.25),
       background: `${(theme.vars || theme).palette.gradients.linearSubtle}`,
-      borderColor: 'primaryDark.700'
-    }))
-  }, other, {
+      ...theme.applyDarkStyles({
+        bgcolor: alpha(theme.palette.primaryDark[800], 0.25),
+        background: `${(theme.vars || theme).palette.gradients.linearSubtle}`,
+        borderColor: 'primaryDark.700'
+      })
+    }),
+    ...other,
     children: [svg && svg, icon && /*#__PURE__*/_jsx(GlowingIconContainer, {
       icon: icon
-    }), /*#__PURE__*/_jsx(Typography, _extends({
+    }), /*#__PURE__*/_jsx(Typography, {
       fontWeight: "semiBold",
       component: "h3",
       color: "text.primary",
       variant: "body2",
       mt: icon ? 2 : 0,
       mb: description ? 0.5 : 0,
-      className: classNameTitle
-    }, titleProps, {
+      className: classNameTitle,
+      ...titleProps,
       children: title
-    })), /*#__PURE__*/_jsx(Typography, {
+    }), /*#__PURE__*/_jsx(Typography, {
       variant: "body2",
       color: "text.secondary",
       className: classNameDescription,
       children: description
     })]
-  }));
+  });
 }

package/Link/Link.js

@@ -1,7 +1,3 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["to", "linkAs", "replace", "scroll", "shallow", "prefetch", "legacyBehavior", "locale"],
-  _excluded2 = ["activeClassName", "as", "className", "href", "legacyBehavior", "linkAs", "locale", "noLinkStyle", "prefetch", "replace", "role", "scroll", "shallow"];
 import * as React from 'react';
 import clsx from 'clsx';
 import { useRouter } from 'next/router';
@@ -24,16 +20,16 @@ import { jsx as _jsx } from "react/jsx-runtime";
 const Anchor = styled('a')({});
 const NextLinkComposed = /*#__PURE__*/React.forwardRef(function NextLinkComposed(props, ref) {
   const {
-      to,
-      linkAs,
-      replace,
-      scroll,
-      shallow,
-      prefetch,
-      legacyBehavior = true,
-      locale
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
+    to,
+    linkAs,
+    replace,
+    scroll,
+    shallow,
+    prefetch,
+    legacyBehavior = true,
+    locale,
+    ...other
+  } = props;
   return /*#__PURE__*/_jsx(NextLink, {
     href: to,
     prefetch: prefetch,
@@ -44,31 +40,33 @@ const NextLinkComposed = /*#__PURE__*/React.forwardRef(function NextLinkComposed
     passHref: true,
     locale: locale,
     legacyBehavior: legacyBehavior,
-    children: /*#__PURE__*/_jsx(Anchor, _extends({
+    children: /*#__PURE__*/_jsx(Anchor, {
       "data-no-markdown-link": "true",
-      ref: ref
-    }, other))
+      ref: ref,
+      ...other
+    })
   });
 });
 // A styled version of the Next.js Pages Router Link component:
 // https://nextjs.org/docs/pages/api-reference/components/link
 export const Link = /*#__PURE__*/React.forwardRef(function Link(props, ref) {
   const {
-      activeClassName = 'active',
-      as,
-      className: classNameProps,
-      href,
-      legacyBehavior,
-      linkAs: linkAsProp,
-      locale,
-      noLinkStyle,
-      prefetch,
-      replace,
-      // Link don't have roles.
-      scroll,
-      shallow
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded2);
+    activeClassName = 'active',
+    as,
+    className: classNameProps,
+    href,
+    legacyBehavior,
+    linkAs: linkAsProp,
+    locale,
+    noLinkStyle,
+    prefetch,
+    replace,
+    role,
+    // Link don't have roles.
+    scroll,
+    shallow,
+    ...other
+  } = props;
   const router = useRouter();
   const pathname = typeof href === 'string' ? href : href?.pathname;
   const routerPathname = router.pathname.replace('/[docsTab]', '');
@@ -93,14 +91,18 @@ export const Link = /*#__PURE__*/React.forwardRef(function Link(props, ref) {
     locale
   };
   if (noLinkStyle) {
-    return /*#__PURE__*/_jsx(NextLinkComposed, _extends({
+    return /*#__PURE__*/_jsx(NextLinkComposed, {
       className: className,
-      ref: ref
-    }, nextjsProps, other));
+      ref: ref,
+      ...nextjsProps,
+      ...other
+    });
   }
-  return /*#__PURE__*/_jsx(MuiLink, _extends({
+  return /*#__PURE__*/_jsx(MuiLink, {
     component: NextLinkComposed,
     className: className,
-    ref: ref
-  }, nextjsProps, other));
+    ref: ref,
+    ...nextjsProps,
+    ...other
+  });
 });

package/MarkdownElement/MarkdownElement.js

@@ -1,6 +1,3 @@
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["className", "renderedMarkdown"];
 import * as React from 'react';
 import clsx from 'clsx';
 import { alpha, darken, styled } from '@mui/material/styles';
@@ -8,7 +5,8 @@ import { brandingDarkTheme as darkTheme, brandingLightTheme as lightTheme } from
 import { jsx as _jsx } from "react/jsx-runtime";
 const Root = styled('div')(({
   theme
-}) => _extends({}, lightTheme.typography.body1, {
+}) => ({
+  ...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})`,
@@ -41,11 +39,12 @@ const Root = styled('div')(({
       maxWidth: 'calc(100vw - 32px - 16px)'
     }
   },
-  '& code': _extends({}, lightTheme.typography.body2, {
+  '& 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
@@ -63,47 +62,53 @@ const Root = styled('div')(({
     direction: 'ltr /*! @noflip */',
     boxDecorationBreak: 'clone'
   },
-  '& h1': _extends({}, lightTheme.typography.h3, {
+  '& 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': _extends({}, lightTheme.typography.subtitle1, {
+  },
+  '& .description': {
+    ...lightTheme.typography.subtitle1,
     fontWeight: 400,
     margin: '0 0 24px'
-  }),
+  },
   '& .component-tabs': {
     margin: '0 0 40px'
   },
-  '& h2': _extends({}, lightTheme.typography.h5, {
+  '& 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': _extends({}, lightTheme.typography.h6, {
+  },
+  '& 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': _extends({}, lightTheme.typography.subtitle1, {
+  },
+  '& 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': _extends({}, lightTheme.typography.subtitle2, {
+  },
+  '& 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,
@@ -231,13 +236,14 @@ const Root = styled('div')(({
       borderBottom: `1px dotted var(--muidocs-palette-divider, ${lightTheme.palette.divider})`
     }
   },
-  '& td': _extends({}, theme.typography.body2, {
+  '& 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
   },
@@ -798,10 +804,10 @@ const Root = styled('div')(({
 }));
 export const MarkdownElement = /*#__PURE__*/React.forwardRef(function MarkdownElement(props, ref) {
   const {
-      className,
-      renderedMarkdown
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
+    className,
+    renderedMarkdown,
+    ...other
+  } = props;
   const more = {};
   if (typeof renderedMarkdown === 'string') {
     // workaround for https://github.com/facebook/react/issues/17170
@@ -810,9 +816,10 @@ export const MarkdownElement = /*#__PURE__*/React.forwardRef(function MarkdownEl
       __html: renderedMarkdown
     };
   }
-  return /*#__PURE__*/_jsx(Root, _extends({
-    className: clsx('markdown-body', className)
-  }, more, other, {
+  return /*#__PURE__*/_jsx(Root, {
+    className: clsx('markdown-body', className),
+    ...more,
+    ...other,
     ref: ref
-  }));
+  });
 });

package/NProgressBar/NProgressBar.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import NProgress from 'nprogress';
@@ -38,7 +37,7 @@ function NProgressBar(props) {
   return /*#__PURE__*/_jsxs(NoSsr, {
     children: [props.children, /*#__PURE__*/_jsx(GlobalStyles, {
       styles: theme => ({
-        '#nprogress': _extends({
+        '#nprogress': {
           direction: 'ltr',
           pointerEvents: 'none',
           position: 'fixed',
@@ -47,10 +46,10 @@ function NProgressBar(props) {
           right: 0,
           height: 2,
           zIndex: (theme.vars || theme).zIndex.tooltip,
-          backgroundColor: (theme.vars || theme).palette.primary[200]
-        }, theme.applyDarkStyles({
-          backgroundColor: (theme.vars || theme).palette.primary[700]
-        }), {
+          backgroundColor: (theme.vars || theme).palette.primary[200],
+          ...theme.applyDarkStyles({
+            backgroundColor: (theme.vars || theme).palette.primary[700]
+          }),
           '& .nprogress-bar': {
             position: 'fixed',
             backgroundColor: (theme.vars || theme).palette.primary.main,
@@ -79,7 +78,7 @@ function NProgressBar(props) {
             right: -80,
             clip: 'rect(-6px,90px,14px,-6px)'
           }
-        })
+        }
       })
     })]
   });