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

package/CHANGELOG.md

@@ -1,5 +1,52 @@
 # [Versions](https://mui.com/versions/)
 
+## 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 -->

package/CodeCopy/CodeCopyButton.js

@@ -3,8 +3,6 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 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) {
@@ -29,16 +27,11 @@ 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", {

package/MarkdownElement/MarkdownElement.js

@@ -526,45 +526,35 @@ const Root = styled('div')(({
     top: 0
   },
   '& .MuiCode-copy': {
-    display: 'inline-flex',
-    flexDirection: 'row-reverse',
-    alignItems: 'center',
-    width: 26,
-    height: 26,
     cursor: 'pointer',
     position: 'absolute',
     top: 12,
     right: 12,
+    display: 'inline-flex',
+    flexDirection: 'row-reverse',
+    alignItems: 'center',
+    height: 24,
     padding: theme.spacing(0.5),
-    fontFamily: 'inherit',
-    fontWeight: 500,
+    paddingBottom: '5px',
+    // optical alignment
+    fontFamily: lightTheme.typography.fontFamily,
+    fontWeight: lightTheme.typography.fontWeightMedium,
+    fontSize: lightTheme.typography.pxToRem(12),
     borderRadius: 6,
-    border: 'none',
-    backgroundColor: 'hsl(210, 35%, 9%)',
-    // using the code block one-off background color (defined in line 23)
-    color: '#FFF',
+    border: '1px solid',
+    borderColor: alpha(lightTheme.palette.primaryDark[600], 0.5),
+    backgroundColor: alpha(lightTheme.palette.primaryDark[800], 0.5),
+    color: `var(--muidocs-palette-grey-200, ${lightTheme.palette.grey[200]})`,
     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': {
+    '& .MuiCode-copied-label': {
       display: 'none'
     },
     '&:hover, &:focus': {
-      backgroundColor: lightTheme.palette.primaryDark[600],
-      '& svg': {
-        opacity: 1
-      },
+      borderColor: `var(--muidocs-palette-primaryDark-400, ${lightTheme.palette.primaryDark[400]})`,
+      backgroundColor: `var(--muidocs-palette-primaryDark-700, ${lightTheme.palette.primaryDark[700]})`,
+      color: '#FFF',
       '& .MuiCode-copyKeypress': {
         display: 'block',
         // Approximate no hover capabilities with no keyboard
@@ -577,17 +567,19 @@ const Root = styled('div')(({
     '& .MuiCode-copyKeypress': {
       display: 'none',
       position: 'absolute',
-      right: 26
+      right: 34
     },
     '&[data-copied]': {
-      // style of the button when it is in copied state.
-      borderColor: lightTheme.palette.primary[700],
+      borderColor: `var(--muidocs-palette-primaryDark-400, ${lightTheme.palette.primaryDark[400]})`,
+      backgroundColor: `var(--muidocs-palette-primaryDark-700, ${lightTheme.palette.primaryDark[700]})`,
       color: '#fff',
-      backgroundColor: lightTheme.palette.primaryDark[600],
-      '& .MuiCode-copy-icon': {
+      '& .MuiCode-copyKeypress': {
+        opacity: 0
+      },
+      '& .MuiCode-copy-label': {
         display: 'none'
       },
-      '& .MuiCode-copied-icon': {
+      '& .MuiCode-copied-label': {
         display: 'block'
       }
     }

package/SectionTitle/SectionTitle.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+export interface SectionTitleProps {
+    title: string;
+    hash: string;
+    level?: 'h2' | 'h3' | 'h4';
+}
+export declare function SectionTitle(props: SectionTitleProps): React.JSX.Element;

package/SectionTitle/SectionTitle.js

@@ -0,0 +1,30 @@
+var _span;
+import * as React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function SectionTitle(props) {
+  const {
+    title,
+    hash,
+    level: Level = 'h2'
+  } = props;
+  return /*#__PURE__*/_jsx(Level, {
+    id: hash,
+    style: {
+      flexGrow: 1
+    },
+    children: /*#__PURE__*/_jsxs("a", {
+      "aria-labelledby": hash,
+      className: "title-link-to-anchor",
+      href: `#${hash}`,
+      tabIndex: -1,
+      children: [title, _span || (_span = /*#__PURE__*/_jsx("span", {
+        className: "anchor-icon",
+        children: /*#__PURE__*/_jsx("svg", {
+          children: /*#__PURE__*/_jsx("use", {
+            xlinkHref: "#anchor-link-icon"
+          })
+        })
+      }))]
+    })
+  });
+}

package/SectionTitle/index.d.ts

@@ -0,0 +1 @@
+export * from './SectionTitle';

package/SectionTitle/index.js

@@ -0,0 +1 @@
+export * from './SectionTitle';

package/SectionTitle/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "main": "../node/SectionTitle/index.js",
+  "types": "./index.d.ts"
+}

package/node/CodeCopy/CodeCopyButton.js

@@ -8,8 +8,6 @@ exports.CodeCopyButton = CodeCopyButton;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
-var _ContentCopyRounded = _interopRequireDefault(require("@mui/icons-material/ContentCopyRounded"));
-var _LibraryAddCheckRounded = _interopRequireDefault(require("@mui/icons-material/LibraryAddCheckRounded"));
 var _useClipboardCopy = _interopRequireDefault(require("./useClipboardCopy"));
 var _jsxRuntime = require("react/jsx-runtime");
 var _span, _span2;
@@ -38,16 +36,11 @@ function CodeCopyButton(props) {
         // event.stopPropagation();
         await copy(code);
       },
-      children: [isCopied ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_LibraryAddCheckRounded.default, {
-        sx: {
-          fontSize: 18
-        }
-      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_ContentCopyRounded.default, {
-        sx: {
-          fontSize: 18
-        }
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+      children: [isCopied ? 'Copied' : 'Copy', /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
         className: "MuiCode-copyKeypress",
+        style: {
+          opacity: isCopied ? 0 : 1
+        },
         children: [_span || (_span = /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
           children: "(or"
         })), " ", key, "C", _span2 || (_span2 = /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {

package/node/MarkdownElement/MarkdownElement.js

@@ -537,45 +537,35 @@ const Root = (0, _styles.styled)('div')(({
       top: 0
     },
     '& .MuiCode-copy': {
-      display: 'inline-flex',
-      flexDirection: 'row-reverse',
-      alignItems: 'center',
-      width: 26,
-      height: 26,
       cursor: 'pointer',
       position: 'absolute',
       top: 12,
       right: 12,
+      display: 'inline-flex',
+      flexDirection: 'row-reverse',
+      alignItems: 'center',
+      height: 24,
       padding: theme.spacing(0.5),
-      fontFamily: 'inherit',
-      fontWeight: 500,
+      paddingBottom: '5px',
+      // optical alignment
+      fontFamily: _branding.brandingLightTheme.typography.fontFamily,
+      fontWeight: _branding.brandingLightTheme.typography.fontWeightMedium,
+      fontSize: _branding.brandingLightTheme.typography.pxToRem(12),
       borderRadius: 6,
-      border: 'none',
-      backgroundColor: 'hsl(210, 35%, 9%)',
-      // using the code block one-off background color (defined in line 23)
-      color: '#FFF',
+      border: '1px solid',
+      borderColor: (0, _styles.alpha)(_branding.brandingLightTheme.palette.primaryDark[600], 0.5),
+      backgroundColor: (0, _styles.alpha)(_branding.brandingLightTheme.palette.primaryDark[800], 0.5),
+      color: `var(--muidocs-palette-grey-200, ${_branding.brandingLightTheme.palette.grey[200]})`,
       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': {
+      '& .MuiCode-copied-label': {
         display: 'none'
       },
       '&:hover, &:focus': {
-        backgroundColor: _branding.brandingLightTheme.palette.primaryDark[600],
-        '& svg': {
-          opacity: 1
-        },
+        borderColor: `var(--muidocs-palette-primaryDark-400, ${_branding.brandingLightTheme.palette.primaryDark[400]})`,
+        backgroundColor: `var(--muidocs-palette-primaryDark-700, ${_branding.brandingLightTheme.palette.primaryDark[700]})`,
+        color: '#FFF',
         '& .MuiCode-copyKeypress': {
           display: 'block',
           // Approximate no hover capabilities with no keyboard
@@ -588,17 +578,19 @@ const Root = (0, _styles.styled)('div')(({
       '& .MuiCode-copyKeypress': {
         display: 'none',
         position: 'absolute',
-        right: 26
+        right: 34
       },
       '&[data-copied]': {
-        // style of the button when it is in copied state.
-        borderColor: _branding.brandingLightTheme.palette.primary[700],
+        borderColor: `var(--muidocs-palette-primaryDark-400, ${_branding.brandingLightTheme.palette.primaryDark[400]})`,
+        backgroundColor: `var(--muidocs-palette-primaryDark-700, ${_branding.brandingLightTheme.palette.primaryDark[700]})`,
         color: '#fff',
-        backgroundColor: _branding.brandingLightTheme.palette.primaryDark[600],
-        '& .MuiCode-copy-icon': {
+        '& .MuiCode-copyKeypress': {
+          opacity: 0
+        },
+        '& .MuiCode-copy-label': {
           display: 'none'
         },
-        '& .MuiCode-copied-icon': {
+        '& .MuiCode-copied-label': {
           display: 'block'
         }
       }

package/node/SectionTitle/SectionTitle.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SectionTitle = SectionTitle;
+var React = _interopRequireWildcard(require("react"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _span;
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function SectionTitle(props) {
+  const {
+    title,
+    hash,
+    level: Level = 'h2'
+  } = props;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Level, {
+    id: hash,
+    style: {
+      flexGrow: 1
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("a", {
+      "aria-labelledby": hash,
+      className: "title-link-to-anchor",
+      href: `#${hash}`,
+      tabIndex: -1,
+      children: [title, _span || (_span = /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: "anchor-icon",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("use", {
+            xlinkHref: "#anchor-link-icon"
+          })
+        })
+      }))]
+    })
+  });
+}

package/node/SectionTitle/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _SectionTitle = require("./SectionTitle");
+Object.keys(_SectionTitle).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _SectionTitle[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _SectionTitle[key];
+    }
+  });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/docs",
-  "version": "6.0.0-alpha.6",
+  "version": "6.0.0-alpha.7",
   "private": false,
   "author": "MUI Team",
   "description": "MUI Docs - Documentation building blocks.",
@@ -23,12 +23,12 @@
   },
   "homepage": "https://github.com/mui/material-ui/tree/master/packages/mui-docs",
   "dependencies": {
-    "@babel/runtime": "^7.24.4",
+    "@babel/runtime": "^7.24.5",
     "clipboard-copy": "^4.0.1",
     "clsx": "^2.1.1",
     "nprogress": "^0.2.0",
     "prop-types": "^15.8.1",
-    "@mui/internal-markdown": "^1.0.3"
+    "@mui/internal-markdown": "^1.0.4"
   },
   "peerDependencies": {
     "@mui/base": "*",