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

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
   },
@@ -526,45 +532,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 +573,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'
       }
     }
@@ -806,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
@@ -818,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)'
           }
-        })
+        }
       })
     })]
   });

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"
+}