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

package/CHANGELOG.md

@@ -1,12 +1,94 @@
 # [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 -->
+
+_May 16, 2024_
+
+A big thanks to the 14 contributors who made this release possible.
+
+### `@mui/material@6.0.0-alpha.7`
+
+- &#8203;<!-- 23 -->[Autocomplete] Deprecate `componentsProps` props (#42179) @lhilgert9
+- &#8203;<!-- 22 -->[Autocomplete] Improve design when there's a start adornment for small autocomplete (#41781) @TahaRhidouani
+- &#8203;<!-- 21 -->[Autocomplete] deprecate `*Component` and `*Props` for v6 (#41875) @lhilgert9
+- &#8203;<!-- 19 -->[CircularProgress] Deprecate composed classes (#42076) @sai6855
+- &#8203;<!-- 05 -->[ToggleButtonGroup] Add missing `selected` class in ToggleButtonGroupClasses type (#42243) @tarunrajput
+
+### `@mui/codemod@6.0.0-alpha.6`
+
+- &#8203;<!-- 18 -->[Divider] Only apply codemod if light prop is present (#42098) @DiegoAndai
+
+### Docs
+
+- &#8203;<!-- 13 -->Fix 301 to Figma @oliviertassinari
+- &#8203;<!-- 12 -->Fix use of deprecated React API (#42118) @oliviertassinari
+- &#8203;<!-- 11 -->Remove the Base notification (#42191) @danilo-leal
+- &#8203;<!-- 07 -->[material-ui] Improve descriptions for deprecated props (#42221) @aarongarciah
+- &#8203;<!-- 06 -->[material-ui] Fix typo in composition docs (#42195) @aarongarciah
+
+### Core
+
+- &#8203;<!-- 20 -->[blog] Introducing Pigment CSS blog post (#42198) @samuelsycamore
+- &#8203;<!-- 17 -->[core] Remove confusing comment @oliviertassinari
+- &#8203;<!-- 16 -->[core] Match other repositories and convention @oliviertassinari
+- &#8203;<!-- 15 -->[core] Fix React 18.3 warnings about spreading keys in the Material UI `Autocomplete` component (#42099) @heath-freenome
+- &#8203;<!-- 14 -->[core] Remove unecessary quotes @oliviertassinari
+- &#8203;<!-- 10 -->[docs-infra] Share code for section title (#42236) @alexfauquette
+- &#8203;<!-- 09 -->[docs-infra] Limit the copy button to the visible code block (#42115) @danilo-leal
+- &#8203;<!-- 08 -->[docs-infra] Make select components with two capital letters (#42004) @alexfauquette
+- &#8203;<!-- 08 -->[docs-infra][toolpad] Fix Page title and SERP title mismatch (#41919) @bharatkashyap
+- &#8203;<!-- 05 -->[website] Add redirection for talk @oliviertassinari
+- &#8203;<!-- 04 -->[website] Adds Arthur Balduini team info (#42193) @arthurbalduini
+- &#8203;<!-- 03 -->[website] Update the role template file (#42192) @danilo-leal
+- &#8203;<!-- 02 -->[website] Update MUI X deps and migrate TreeView demos to v7 API (#42149) @noraleonte
+- &#8203;<!-- 01 -->[website] Fix pricing casing (#42178) @aarongarciah
+
+All contributors of this release in alphabetical order: @aarongarciah, @alexfauquette, @arthurbalduini, @bharatkashyap, @danilo-leal, @DiegoAndai, @heath-freenome, @lhilgert9, @noraleonte, @oliviertassinari, @sai6855, @samuelsycamore, @TahaRhidouani, @tarunrajput
+
 ## v6.0.0-alpha.6
 
 <!-- generated comparing v6.0.0-alpha.5..next -->
 
 _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`
 
@@ -54,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,17 +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 ContentCopyRoundedIcon from '@mui/icons-material/ContentCopyRounded';
-import LibraryAddCheckRoundedIcon from '@mui/icons-material/LibraryAddCheckRounded';
 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
@@ -21,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",
@@ -29,22 +25,17 @@ export function CodeCopyButton(props) {
         // event.stopPropagation();
         await copy(code);
       },
-      children: [isCopied ? /*#__PURE__*/_jsx(LibraryAddCheckRoundedIcon, {
-        sx: {
-          fontSize: 18
-        }
-      }) : /*#__PURE__*/_jsx(ContentCopyRoundedIcon, {
-        sx: {
-          fontSize: 18
-        }
-      }), /*#__PURE__*/_jsxs("span", {
+      children: [isCopied ? 'Copied' : 'Copy', /*#__PURE__*/_jsxs("span", {
         className: "MuiCode-copyKeypress",
+        style: {
+          opacity: isCopied ? 0 : 1
+        },
         children: [_span || (_span = /*#__PURE__*/_jsx("span", {
           children: "(or"
         })), " ", key, "C", _span2 || (_span2 = /*#__PURE__*/_jsx("span", {
           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
+  });
 });