@mui/docs 6.0.0-alpha.3 → 6.0.0-alpha.5

package/MarkdownElement/index.d.ts

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

package/MarkdownElement/index.js

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

package/MarkdownElement/package.json

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

package/branding/brandingTheme.js

@@ -142,7 +142,7 @@ export const getDesignTokens = mode => ({
     warning,
     gradients: {
       radioSubtle: mode === 'dark' ? `radial-gradient(100% 100% at 100% 100%, transparent 0, ${alpha(blue[900], 0.3)} 300%)` : `radial-gradient(100% 90% at 50% 0, transparent 0, ${alpha(blue[100], 0.3)} 300%)`,
-      linearSubtle: mode === 'light' ? `linear-gradient(to bottom right, ${alpha(blue[50], 0.3)} 25%, ${alpha(grey[50], 0.2)} 100%)` : `linear-gradient(to bottom right, ${alpha(blue[900], 0.1)} 25%, ${alpha(blueDark[800], 0.2)} 100%)`
+      linearSubtle: mode === 'dark' ? `linear-gradient(0deg, ${alpha(blue[900], 0.1)}, ${alpha(blueDark[900], 0.5)})` : `linear-gradient(0deg, ${alpha(blue[50], 0.4)}, ${alpha(grey[50], 0.1)})`
     }
   }),
   shape: {
@@ -218,20 +218,17 @@ export const getDesignTokens = mode => ({
     },
     body1: {
       fontSize: defaultTheme.typography.pxToRem(16),
-      // 16px
       lineHeight: 24 / 16,
       letterSpacing: 0
     },
     body2: {
       fontSize: defaultTheme.typography.pxToRem(14),
-      // 14px
       lineHeight: 21 / 14,
       letterSpacing: 0
     },
     caption: {
       display: 'inline-block',
       fontSize: defaultTheme.typography.pxToRem(12),
-      // 12px
       lineHeight: 18 / 12,
       letterSpacing: 0,
       fontWeight: 700
@@ -380,7 +377,7 @@ export function getThemedComponents() {
               transform: 'translateX(2px)'
             }
           }, ownerState.size === 'small' && {
-            padding: theme.spacing('6px', 1),
+            padding: theme.spacing('6px', 1.5),
             fontFamily: theme.typography.fontFamily,
             fontSize: defaultTheme.typography.pxToRem(13),
             fontWeight: theme.typography.fontWeightSemiBold,

package/node/CodeCopy/CodeCopy.js

@@ -0,0 +1,188 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CodeCopyProvider = CodeCopyProvider;
+exports.useCodeCopy = useCodeCopy;
+var React = _interopRequireWildcard(require("react"));
+var _router = require("next/router");
+var _clipboardCopy = _interopRequireDefault(require("clipboard-copy"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _InitCodeCopy;
+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; }
+const CodeBlockContext = /*#__PURE__*/React.createContext({
+  current: null
+});
+
+/**
+ * How to use: spread the handlers to the .MuiCode-root
+ *
+ * The html structure should be:
+ * <div className="MuiCode-root">
+ *  <pre>...</pre>
+ *  <button className="MuiCode-copy">...</button>
+ * </div>
+ */
+function useCodeCopy() {
+  const rootNode = React.useContext(CodeBlockContext);
+  return {
+    onMouseEnter: event => {
+      rootNode.current = event.currentTarget;
+    },
+    onMouseLeave: event => {
+      if (rootNode.current === event.currentTarget) {
+        var _rootNode$current$que;
+        (_rootNode$current$que = rootNode.current.querySelector('.MuiCode-copy')) == null || _rootNode$current$que.blur();
+        rootNode.current = null;
+      }
+    },
+    onFocus: event => {
+      rootNode.current = event.currentTarget;
+    },
+    onBlur: event => {
+      if (rootNode.current === event.currentTarget) {
+        rootNode.current = null;
+      }
+    }
+  };
+}
+function InitCodeCopy() {
+  const rootNode = React.useContext(CodeBlockContext);
+  const router = (0, _router.useRouter)();
+  React.useEffect(() => {
+    let key = 'Ctrl + ';
+    if (typeof window !== 'undefined') {
+      const macOS = window.navigator.platform.toUpperCase().indexOf('MAC') >= 0;
+      if (macOS) {
+        key = '⌘';
+      }
+    }
+    const codeRoots = document.getElementsByClassName('MuiCode-root');
+    if (codeRoots !== null) {
+      const listeners = [];
+      Array.from(codeRoots).forEach(elm => {
+        const handleMouseEnter = () => {
+          rootNode.current = elm;
+        };
+        elm.addEventListener('mouseenter', handleMouseEnter);
+        listeners.push(() => elm.removeEventListener('mouseenter', handleMouseEnter));
+        const handleMouseLeave = () => {
+          if (rootNode.current === elm) {
+            var _rootNode$current$que2;
+            (_rootNode$current$que2 = rootNode.current.querySelector('.MuiCode-copy')) == null || _rootNode$current$que2.blur();
+            rootNode.current = null;
+          }
+        };
+        elm.addEventListener('mouseleave', handleMouseLeave);
+        listeners.push(() => elm.removeEventListener('mouseleave', handleMouseLeave));
+        const handleFocusin = () => {
+          // use `focusin` because it bubbles from the copy button
+          rootNode.current = elm;
+        };
+        elm.addEventListener('focusin', handleFocusin);
+        listeners.push(() => elm.removeEventListener('focusin', handleFocusin));
+        const handleFocusout = () => {
+          // use `focusout` because it bubbles from the copy button
+          if (rootNode.current === elm) {
+            rootNode.current = null;
+          }
+        };
+        elm.addEventListener('focusout', handleFocusout);
+        listeners.push(() => elm.removeEventListener('focusout', handleFocusout));
+        async function handleClick(event) {
+          var _event$currentTarget, _textNode$textContent;
+          const trigger = event.currentTarget;
+          const pre = (_event$currentTarget = event.currentTarget) == null ? void 0 : _event$currentTarget.previousElementSibling;
+          const textNode = trigger.childNodes[0];
+          textNode.nodeValue = ((_textNode$textContent = textNode.textContent) == null ? void 0 : _textNode$textContent.replace('Copy', 'Copied')) || null;
+          trigger.dataset.copied = 'true';
+          setTimeout(() => {
+            if (trigger) {
+              var _textNode$textContent2;
+              textNode.nodeValue = ((_textNode$textContent2 = textNode.textContent) == null ? void 0 : _textNode$textContent2.replace('Copied', 'Copy')) || null;
+              delete trigger.dataset.copied;
+            }
+          }, 2000);
+          try {
+            if (pre.textContent) {
+              await (0, _clipboardCopy.default)(pre.textContent);
+            }
+            // eslint-disable-next-line no-empty
+          } catch (error) {}
+        }
+        const btn = elm.querySelector('.MuiCode-copy');
+        if (btn) {
+          var _btn$querySelector, _keyNode$textContent;
+          const keyNode = (_btn$querySelector = btn.querySelector('.MuiCode-copyKeypress')) == null ? void 0 : _btn$querySelector.childNodes[1];
+          if (!keyNode) {
+            // skip the logic if the btn is not generated from the markdown.
+            return;
+          }
+          keyNode.textContent = (keyNode == null || (_keyNode$textContent = keyNode.textContent) == null ? void 0 : _keyNode$textContent.replace('$key', key)) || null;
+          btn.addEventListener('click', handleClick);
+          listeners.push(() => btn.removeEventListener('click', handleClick));
+        }
+      });
+      return () => {
+        listeners.forEach(removeEventListener => {
+          removeEventListener();
+        });
+      };
+    }
+    return undefined;
+  }, [rootNode, router.pathname]);
+  return null;
+}
+function hasNativeSelection(element) {
+  var _window$getSelection;
+  if ((_window$getSelection = window.getSelection()) != null && _window$getSelection.toString()) {
+    return true;
+  }
+
+  // window.getSelection() returns an empty string in Firefox for selections inside a form element.
+  // See: https://bugzilla.mozilla.org/show_bug.cgi?id=85686.
+  // Instead, we can use element.selectionStart that is only defined on form elements.
+  if (element && (element.selectionEnd || 0) - (element.selectionStart || 0) > 0) {
+    return true;
+  }
+  return false;
+}
+/**
+ * Place <CodeCopyProvider> at the page level. It will check the keydown event and try to initiate copy click if rootNode exist.
+ * Any code block inside the tree can set the rootNode when mouse enter to leverage keyboard copy.
+ */
+function CodeCopyProvider({
+  children
+}) {
+  const rootNode = React.useRef(null);
+  React.useEffect(() => {
+    document.addEventListener('keydown', event => {
+      if (!rootNode.current) {
+        return;
+      }
+
+      // Skip if user is highlighting a text.
+      if (hasNativeSelection(event.target)) {
+        return;
+      }
+
+      // Skip if it's not a copy keyboard event
+      if (!((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 'c' && !event.shiftKey && !event.altKey)) {
+        return;
+      }
+      const copyBtn = rootNode.current.querySelector('.MuiCode-copy');
+      const initialEventAction = copyBtn.getAttribute('data-ga-event-action');
+      // update the 'data-ga-event-action' on the button to track keyboard interaction
+      copyBtn.dataset.gaEventAction = (initialEventAction == null ? void 0 : initialEventAction.replace('click', 'keyboard')) || 'copy-keyboard';
+      copyBtn.click(); // let the GA setup in GoogleAnalytics.js do the job
+      copyBtn.dataset.gaEventAction = initialEventAction; // reset the 'data-ga-event-action' back to initial
+    });
+  }, []);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(CodeBlockContext.Provider, {
+    value: rootNode,
+    children: [_InitCodeCopy || (_InitCodeCopy = /*#__PURE__*/(0, _jsxRuntime.jsx)(InitCodeCopy, {})), children]
+  });
+}

package/node/CodeCopy/CodeCopyButton.js

@@ -0,0 +1,59 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+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;
+const _excluded = ["code"];
+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 CodeCopyButton(props) {
+  const {
+      code
+    } = props,
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const {
+    copy,
+    isCopied
+  } = (0, _useClipboardCopy.default)();
+  // This component is designed to be wrapped in NoSsr
+  const macOS = window.navigator.platform.toUpperCase().indexOf('MAC') >= 0;
+  const key = macOS ? '⌘' : 'Ctrl + ';
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: "MuiCode-copy-container",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", (0, _extends2.default)({}, other, {
+      "aria-label": "Copy the code",
+      type: "button",
+      className: "MuiCode-copy",
+      onClick: async () => {
+        // 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", {
+        className: "MuiCode-copyKeypress",
+        children: [_span || (_span = /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          children: "(or"
+        })), " ", key, "C", _span2 || (_span2 = /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          children: ")"
+        }))]
+      })]
+    }))
+  });
+}

package/node/CodeCopy/index.js

@@ -0,0 +1,40 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  useClipboardCopy: true
+};
+Object.defineProperty(exports, "useClipboardCopy", {
+  enumerable: true,
+  get: function () {
+    return _useClipboardCopy.default;
+  }
+});
+var _CodeCopy = require("./CodeCopy");
+Object.keys(_CodeCopy).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _CodeCopy[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _CodeCopy[key];
+    }
+  });
+});
+var _CodeCopyButton = require("./CodeCopyButton");
+Object.keys(_CodeCopyButton).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _CodeCopyButton[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _CodeCopyButton[key];
+    }
+  });
+});
+var _useClipboardCopy = _interopRequireDefault(require("./useClipboardCopy"));

package/node/CodeCopy/useClipboardCopy.js

@@ -0,0 +1,30 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useClipboardCopy;
+var React = _interopRequireWildcard(require("react"));
+var _clipboardCopy = _interopRequireDefault(require("clipboard-copy"));
+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 useClipboardCopy() {
+  const [isCopied, setIsCopied] = React.useState(false);
+  const timeout = React.useRef();
+  React.useEffect(() => () => {
+    clearTimeout(timeout.current);
+  }, []);
+  const copy = async text => {
+    await (0, _clipboardCopy.default)(text);
+    setIsCopied(true);
+    clearTimeout(timeout.current);
+    timeout.current = setTimeout(() => {
+      setIsCopied(false);
+    }, 1200);
+  };
+  return {
+    copy,
+    isCopied
+  };
+}

package/node/HighlightedCode/HighlightedCode.js

@@ -0,0 +1,77 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.HighlightedCode = void 0;
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _prism = _interopRequireDefault(require("@mui/internal-markdown/prism"));
+var _NoSsr = require("@mui/base/NoSsr");
+var _styles = require("@mui/material/styles");
+var _CodeCopy = require("../CodeCopy");
+var _MarkdownElement = require("../MarkdownElement");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["copyButtonHidden", "copyButtonProps", "code", "language", "plainStyle", "parentComponent", "preComponent"];
+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; }
+const Pre = (0, _styles.styled)('pre')(({
+  theme
+}) => ({
+  margin: 0,
+  color: 'hsl(60deg 30% 96.08%)',
+  // fallback color until Prism's theme is loaded
+  WebkitOverflowScrolling: 'touch',
+  // iOS momentum scrolling.
+  maxWidth: 'calc(100vw - 32px)',
+  [theme.breakpoints.up('md')]: {
+    maxWidth: 'calc(100vw - 32px - 16px)'
+  },
+  '& code': (0, _extends2.default)({}, 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
+  })
+}));
+const HighlightedCode = exports.HighlightedCode = /*#__PURE__*/React.forwardRef(function HighlightedCode(props, ref) {
+  const {
+      copyButtonHidden = false,
+      copyButtonProps,
+      code,
+      language,
+      plainStyle,
+      parentComponent: Component = plainStyle ? 'div' : _MarkdownElement.MarkdownElement,
+      preComponent: PreComponent = plainStyle ? Pre : 'pre'
+    } = props,
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const renderedCode = React.useMemo(() => {
+    return (0, _prism.default)(code.trim(), language);
+  }, [code, language]);
+  const handlers = (0, _CodeCopy.useCodeCopy)();
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, (0, _extends2.default)({
+    ref: ref
+  }, other, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", (0, _extends2.default)({
+      className: "MuiCode-root"
+    }, handlers, {
+      children: [copyButtonHidden ? null : /*#__PURE__*/(0, _jsxRuntime.jsx)(_NoSsr.NoSsr, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CodeCopy.CodeCopyButton, (0, _extends2.default)({
+          code: code
+        }, copyButtonProps))
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(PreComponent, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("code", {
+          className: `language-${language}`
+          // eslint-disable-next-line react/no-danger
+          ,
+          dangerouslySetInnerHTML: {
+            __html: renderedCode
+          }
+        })
+      })]
+    }))
+  }));
+});

package/node/HighlightedCode/index.js

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