@mui/docs 6.0.0-dev.240424162023-9968b4889d → 6.0.0

package/MarkdownElement/MarkdownElement.js

@@ -1,16 +1,15 @@
-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';
-import { brandingDarkTheme as darkTheme, brandingLightTheme as lightTheme } from '../branding';
+import useForkRef from '@mui/utils/useForkRef';
+import { brandingDarkTheme as darkTheme, brandingLightTheme as lightTheme } from "../branding/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const Root = styled('div')(({
   theme
-}) => _extends({}, lightTheme.typography.body1, {
-  lineHeight: 1.6,
-  // Increased compared to the 1.5 default to make the docs easier to read.
+}) => ({
+  ...lightTheme.typography.body1,
+  lineHeight: 1.625,
+  // Rounds up to 26px－increased compared to the 1.5 default to make the docs easier to read.
   color: `var(--muidocs-palette-text-primary, ${lightTheme.palette.text.primary})`,
   '& :focus-visible': {
     outline: `3px solid ${alpha(lightTheme.palette.primary[500], 0.5)}`,
@@ -25,7 +24,7 @@ const Root = styled('div')(({
     // Developers like when the code is dense.
     margin: theme.spacing(2, 'auto'),
     padding: theme.spacing(2),
-    backgroundColor: 'hsl(210, 35%, 9%)',
+    backgroundColor: 'hsl(210, 25%, 9%)',
     // a special, one-off, color tailored for the code blocks using MUI's branding theme blue palette as the starting point. It has a less saturaded color but still maintaining a bit of the blue tint.
     color: 'hsl(60, 30%, 96%)',
     colorScheme: 'dark',
@@ -41,11 +40,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 +63,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,
@@ -117,6 +123,44 @@ const Root = styled('div')(({
       marginBottom: 6
     }
   },
+  '& a[target="_blank"]::after': {
+    content: '""',
+    maskImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' focusable='false' aria-hidden='true' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M6 6v2h8.59L5 17.59 6.41 19 16 9.41V18h2V6z'%3E%3C/path%3E%3C/svg%3E")`,
+    display: 'inline-flex',
+    width: '1em',
+    height: '1em',
+    color: 'inherit',
+    backgroundColor: 'currentColor',
+    transform: 'translate(0, 2px)',
+    transition: 'transform 0.3s cubic-bezier(0.1, 0.8, 0.3, 1)',
+    // bounce effect
+    opacity: 0.8
+  },
+  '& a[target="_blank"]:hover::after': {
+    opacity: 1,
+    transform: 'translate(1px, 0)'
+  },
+  '& a.remove-link-arrow::after': {
+    // Allows to remove link arrows for images
+    display: 'none'
+  },
+  '& .Ad-root a::after': {
+    // Remove link arrow for ads
+    display: 'none'
+  },
+  '& a': {
+    // Style taken from the Link component
+    color: `var(--muidocs-palette-primary-600, ${lightTheme.palette.primary[600]})`,
+    fontWeight: theme.typography.fontWeightMedium,
+    textDecoration: 'underline',
+    textDecorationColor: alpha(lightTheme.palette.primary.main, 0.4),
+    '&:hover': {
+      textDecorationColor: 'inherit'
+    }
+  },
+  '& a code': {
+    color: darken(lightTheme.palette.primary.main, 0.2)
+  },
   '& h1, & h2, & h3, & h4': {
     display: 'flex',
     alignItems: 'center',
@@ -130,9 +174,10 @@ const Root = styled('div')(({
     '& .title-link-to-anchor': {
       color: 'inherit',
       textDecoration: 'none',
+      boxShadow: 'none',
+      fontWeight: 'inherit',
       position: 'relative',
-      display: 'flex',
-      alignItems: 'center'
+      userSelect: 'text'
     },
     '& .anchor-icon': {
       // To prevent the link to get the focus.
@@ -140,12 +185,6 @@ const Root = styled('div')(({
       alignItems: 'center',
       visibility: 'hidden'
     },
-    '& a:not(.title-link-to-anchor):hover': {
-      color: 'currentColor',
-      border: 'none',
-      boxShadow: '0 1px 0 0 currentColor',
-      textDecoration: 'none'
-    },
     '& .anchor-icon, & .comment-link': {
       padding: 0,
       cursor: 'pointer',
@@ -156,11 +195,13 @@ const Root = styled('div')(({
       marginLeft: 8,
       height: 26,
       width: 26,
-      backgroundColor: `var(--muidocs-palette-primary-50, ${lightTheme.palette.grey[50]})`,
       color: `var(--muidocs-palette-grey-600, ${lightTheme.palette.grey[600]})`,
-      border: '1px solid',
-      borderColor: `var(--muidocs-palette-divider, ${lightTheme.palette.divider})`,
+      backgroundColor: 'transparent',
+      border: '1px solid transparent',
       borderRadius: 8,
+      transition: theme.transitions.create(['visibility', 'background-color', 'color', 'border-color'], {
+        duration: theme.transitions.duration.shortest
+      }),
       '&:hover': {
         backgroundColor: alpha(lightTheme.palette.primary[100], 0.4),
         borderColor: `var(--muidocs-palette-primary-100, ${lightTheme.palette.primary[100]})`,
@@ -181,7 +222,7 @@ const Root = styled('div')(({
       display: 'none',
       // So we can have the comment button opt-in.
       marginLeft: 'auto',
-      transition: theme.transitions.create('opacity', {
+      transition: theme.transitions.create(['background-color', 'color', 'border-color'], {
         duration: theme.transitions.duration.shortest
       }),
       '& svg': {
@@ -231,13 +272,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
   },
@@ -278,44 +320,58 @@ const Root = styled('div')(({
   },
   '& .MuiCallout-root': {
     display: 'flex',
-    gap: 12,
-    padding: '16px',
+    gap: '8px',
+    padding: '12px',
     margin: '16px 0',
     border: '1px solid',
     color: `var(--muidocs-palette-text-secondary, ${lightTheme.palette.text.secondary})`,
     borderColor: `var(--muidocs-palette-grey-100, ${lightTheme.palette.grey[100]})`,
     borderRadius: `var(--muidocs-shape-borderRadius, ${theme.shape?.borderRadius ?? lightTheme.shape.borderRadius}px)`,
-    '& > code': {
+    '& .MuiCallout-content': {
+      minWidth: 0,
+      // Allows content to shrink. Useful when callout contains code block
+      flexGrow: 1
+    },
+    '& code': {
       height: 'fit-content',
       backgroundColor: `var(--muidocs-palette-grey-100, ${lightTheme.palette.grey[100]})`,
       borderColor: `var(--muidocs-palette-grey-300, ${lightTheme.palette.grey[300]})`
     },
-    '& .MuiCallout-content': {
-      minWidth: 0,
-      // Allows content to shrink. Useful when callout contains code block
-      flexGrow: 1,
+    '& p': {
+      marginBottom: '8px',
       '& > p:last-child, & > ul:last-child': {
         // Avoid margin on last child
         marginBottom: 0
       },
-      '& .MuiCode-root': {
-        '& > pre': {
-          margin: 0,
-          marginTop: 4
-        }
-      },
       '& > ul': {
         // Because of the gap left by the icon, we visually need less padding
         paddingLeft: 22
       }
     },
-    '& > svg': {
-      marginTop: 2,
-      width: 20,
-      height: 20,
-      flexShrink: 0
+    '& .MuiCode-root': {
+      '& pre': {
+        margin: '4px 0 0 0',
+        borderRadius: '12px 12px 6px 12px',
+        borderColor: alpha(lightTheme.palette.primaryDark[600], 0.6),
+        '& code': {
+          backgroundColor: 'transparent'
+        }
+      }
+    },
+    '& .MuiCallout-icon-container': {
+      width: 26,
+      // to match text's line-height
+      height: 26,
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      flexShrink: 0,
+      '& svg': {
+        width: 18,
+        height: 18
+      }
     },
-    '& > ul, & > p': {
+    '& ul, & p': {
       '&:last-child': {
         margin: 0
       }
@@ -330,7 +386,7 @@ const Root = styled('div')(({
       '& strong': {
         color: `var(--muidocs-palette-error-800, ${lightTheme.palette.error[800]})`
       },
-      '& > svg': {
+      '& svg': {
         fill: `var(--muidocs-palette-error-500, ${lightTheme.palette.error[600]})`
       },
       '& a': {
@@ -348,7 +404,7 @@ const Root = styled('div')(({
       '& strong': {
         color: `var(--muidocs-palette-primary-800, ${lightTheme.palette.primary[800]})`
       },
-      '& > svg': {
+      '& svg': {
         fill: `var(--muidocs-palette-grey-600, ${lightTheme.palette.grey[600]})`
       }
     },
@@ -359,7 +415,7 @@ const Root = styled('div')(({
       '& strong': {
         color: `var(--muidocs-palette-success-900, ${lightTheme.palette.success[900]})`
       },
-      '& > svg': {
+      '& svg': {
         fill: `var(--muidocs-palette-success-600, ${lightTheme.palette.success[600]})`
       },
       '& a': {
@@ -377,7 +433,7 @@ const Root = styled('div')(({
       '& strong': {
         color: `var(--muidocs-palette-warning-800, ${lightTheme.palette.warning[800]})`
       },
-      '& > svg': {
+      '& svg': {
         fill: `var(--muidocs-palette-warning-600, ${lightTheme.palette.warning[600]})`
       },
       '& a': {
@@ -389,47 +445,6 @@ const Root = styled('div')(({
       }
     }
   },
-  '& a[target="_blank"]::after': {
-    content: '""',
-    maskImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' focusable='false' aria-hidden='true' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M6 6v2h8.59L5 17.59 6.41 19 16 9.41V18h2V6z'%3E%3C/path%3E%3C/svg%3E")`,
-    display: 'inline-flex',
-    width: '1em',
-    height: '1em',
-    color: 'inherit',
-    backgroundColor: 'currentColor',
-    transform: 'translate(0, 2px)',
-    transition: 'transform 0.3s cubic-bezier(0.1, 0.8, 0.3, 1)',
-    // bounce effect
-    opacity: 0.8
-  },
-  '& a[target="_blank"]:hover::after': {
-    opacity: 1,
-    transform: 'translate(1px, 0)'
-  },
-  '& a.remove-link-arrow::after': {
-    // Allows to remove link arrows for images
-    display: 'none'
-  },
-  '& .Ad-root a::after': {
-    // Remove link arrow for ads
-    display: 'none'
-  },
-  '& a:not(.title-link-to-anchor), & a:not(.title-link-to-anchor) code': {
-    // Style taken from the Link component
-    color: `var(--muidocs-palette-primary-600, ${lightTheme.palette.primary[600]})`,
-    fontWeight: theme.typography.fontWeightMedium,
-    textDecoration: 'underline',
-    textDecorationColor: alpha(lightTheme.palette.primary.main, 0.4),
-    '&:hover': {
-      textDecorationColor: 'inherit'
-    }
-  },
-  '& a code': {
-    color: darken(lightTheme.palette.primary.main, 0.04)
-  },
-  '& a:not(.title-link-to-anchor) code': {
-    color: darken(lightTheme.palette.primary.main, 0.2)
-  },
   '& img, & video': {
     // Use !important so that inline style on <img> or <video> can't win.
     // This avoid horizontal overflows on mobile.
@@ -526,45 +541,34 @@ 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',
     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-300, ${lightTheme.palette.grey[300]})`,
     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 +581,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'
       }
     }
@@ -665,24 +671,26 @@ const Root = styled('div')(({
     '& hr': {
       backgroundColor: `var(--muidocs-palette-divider, ${darkTheme.palette.divider})`
     },
-    '& h1, & h2, & h3, & h4, & h5': {
-      color: `var(--muidocs-palette-grey-50, ${darkTheme.palette.grey[50]})`
+    '& a': {
+      color: `var(--muidocs-palette-primary-300, ${darkTheme.palette.primary[300]})`
     },
-    '& p, & ul, & ol': {
-      color: `var(--muidocs-palette-grey-400, ${darkTheme.palette.grey[400]})`
+    '& a code': {
+      color: `var(--muidocs-palette-primary-light, ${darkTheme.palette.primary.light})`
     },
-    '& h1, & h2, & h3, & h4': {
-      '&:hover .anchor-icon, & .comment-link': {
-        color: `var(--muidocs-palette-primary-300, ${darkTheme.palette.primaryDark[300]})`,
-        borderColor: `var(--muidocs-palette-divider, ${darkTheme.palette.divider})`,
-        backgroundColor: alpha(darkTheme.palette.primaryDark[700], 0.5),
+    '& h1, & h2, & h3, & h4, & h5': {
+      color: `var(--muidocs-palette-grey-50, ${darkTheme.palette.grey[50]})`,
+      '& .anchor-icon, & .comment-link': {
+        color: `var(--muidocs-palette-primary-300, ${darkTheme.palette.primaryDark[400]})`,
         '&:hover': {
+          color: `var(--muidocs-palette-primary-100, ${darkTheme.palette.primary[100]})`,
           borderColor: `var(--muidocs-palette-primary-900, ${darkTheme.palette.primary[900]})`,
-          backgroundColor: alpha(darkTheme.palette.primary[900], 0.6),
-          color: `var(--muidocs-palette-primary-100, ${darkTheme.palette.primary[100]})`
+          backgroundColor: alpha(darkTheme.palette.primary[900], 0.6)
         }
       }
     },
+    '& p, & ul, & ol': {
+      color: `var(--muidocs-palette-grey-400, ${darkTheme.palette.grey[400]})`
+    },
     '& h1 code, & h2 code, & h3 code': {
       color: `var(--muidocs-palette-grey-100, ${darkTheme.palette.grey[100]})`
     },
@@ -716,8 +724,7 @@ const Root = styled('div')(({
     },
     '& .MuiCallout-root': {
       borderColor: `var(--muidocs-palette-primaryDark-700, ${darkTheme.palette.primaryDark[700]})`,
-      '& > code': {
-        height: 'fit-content',
+      '& code': {
         backgroundColor: `var(--muidocs-palette-primaryDark-600, ${darkTheme.palette.primaryDark[600]})`,
         borderColor: `var(--muidocs-palette-primaryDark-500, ${darkTheme.palette.primaryDark[500]})`
       },
@@ -728,7 +735,7 @@ const Root = styled('div')(({
         '& strong': {
           color: `var(--muidocs-palette-error-300, ${darkTheme.palette.error[300]})`
         },
-        '& > svg': {
+        '& svg': {
           fill: `var(--muidocs-palette-error-500, ${darkTheme.palette.error[500]})`
         },
         '& a': {
@@ -742,7 +749,7 @@ const Root = styled('div')(({
         '& strong': {
           color: `var(--muidocs-palette-primary-200, ${darkTheme.palette.primary[200]})`
         },
-        '& > svg': {
+        '& svg': {
           fill: `var(--muidocs-palette-grey-400, ${darkTheme.palette.grey[400]})`
         }
       },
@@ -753,7 +760,7 @@ const Root = styled('div')(({
         '& strong': {
           color: `var(--muidocs-palette-success-200, ${darkTheme.palette.success[200]})`
         },
-        '& > svg': {
+        '& svg': {
           fill: `var(--muidocs-palette-success-500, ${darkTheme.palette.success[500]})`
         },
         '& a': {
@@ -767,7 +774,7 @@ const Root = styled('div')(({
         '& strong': {
           color: `var(--muidocs-palette-warning-200, ${darkTheme.palette.warning[200]})`
         },
-        '& > svg': {
+        '& svg': {
           fill: `var(--muidocs-palette-warning-400, ${darkTheme.palette.warning[400]})`
         },
         '& a': {
@@ -775,12 +782,6 @@ const Root = styled('div')(({
         }
       }
     },
-    '& a:not(.title-link-to-anchor), & a:not(.title-link-to-anchor) code': {
-      color: `var(--muidocs-palette-primary-300, ${darkTheme.palette.primary[300]})`
-    },
-    '& a:not(.title-link-to-anchor) code': {
-      color: `var(--muidocs-palette-primary-light, ${darkTheme.palette.primary.light})`
-    },
     '& kbd.key': {
       color: `var(--muidocs-palette-text-primary, ${darkTheme.palette.text.primary})`,
       backgroundColor: `var(--muidocs-palette-primaryDark-800, ${darkTheme.palette.primaryDark[800]})`,
@@ -804,12 +805,32 @@ const Root = styled('div')(({
     }
   }
 }));
+function handleHeaderClick(event) {
+  const selection = document.getSelection();
+  if (selection === null) {
+    return;
+  }
+  if (selection.type === 'Range') {
+    // Disable the <a> behavior to be able to select text.
+    event.preventDefault();
+  }
+}
 export const MarkdownElement = /*#__PURE__*/React.forwardRef(function MarkdownElement(props, ref) {
   const {
-      className,
-      renderedMarkdown
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
+    className,
+    renderedMarkdown,
+    ...other
+  } = props;
+  const rootRef = React.useRef(null);
+  const handleRef = useForkRef(rootRef, ref);
+  React.useEffect(() => {
+    const elements = rootRef.current.getElementsByClassName('title-link-to-anchor');
+    for (let i = 0; i < elements.length; i += 1) {
+      // More reliable than `-webkit-user-drag` (https://caniuse.com/webkit-user-drag)
+      elements[i].setAttribute('draggable', 'false');
+      elements[i].addEventListener('click', handleHeaderClick);
+    }
+  }, []);
   const more = {};
   if (typeof renderedMarkdown === 'string') {
     // workaround for https://github.com/facebook/react/issues/17170
@@ -818,9 +839,10 @@ export const MarkdownElement = /*#__PURE__*/React.forwardRef(function MarkdownEl
       __html: renderedMarkdown
     };
   }
-  return /*#__PURE__*/_jsx(Root, _extends({
-    className: clsx('markdown-body', className)
-  }, more, other, {
-    ref: ref
-  }));
+  return /*#__PURE__*/_jsx(Root, {
+    className: clsx('markdown-body', className),
+    ...more,
+    ...other,
+    ref: handleRef
+  });
 });

package/MarkdownElement/index.js

@@ -1 +1 @@
-export * from './MarkdownElement';
+export * from "./MarkdownElement.js";

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)'
           }
-        })
+        }
       })
     })]
   });

package/NProgressBar/index.js

@@ -1 +1 @@
-export { default } from './NProgressBar';
+export { default } from "./NProgressBar.js";

package/README.md

@@ -9,7 +9,7 @@ Install the package in your project directory with:
 <!-- #default-branch-switch -->
 
 ```bash
-npm install @mui/docs@next
+npm install @mui/docs
 ```
 
 The docs has a peer dependency on the core components.
@@ -18,7 +18,7 @@ If you are not already using Material UI in your project, you can add it with:
 <!-- #default-branch-switch -->
 
 ```bash
-npm install @mui/material@next
+npm install @mui/material
 ```
 
 ## Documentation