@mui/docs 6.0.0-alpha.1 → 6.0.0-alpha.11

package/CodeCopy/CodeCopy.js

@@ -0,0 +1,172 @@
+var _InitCodeCopy;
+import * as React from 'react';
+import { useRouter } from 'next/router';
+import clipboardCopy from 'clipboard-copy';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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>
+ */
+export function useCodeCopy() {
+  const rootNode = React.useContext(CodeBlockContext);
+  return {
+    onMouseEnter: event => {
+      rootNode.current = event.currentTarget;
+    },
+    onMouseLeave: event => {
+      if (rootNode.current === event.currentTarget) {
+        rootNode.current.querySelector('.MuiCode-copy')?.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 = 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) {
+            rootNode.current.querySelector('.MuiCode-copy')?.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) {
+          const trigger = event.currentTarget;
+          const pre = event.currentTarget?.previousElementSibling;
+          const textNode = trigger.childNodes[0];
+          textNode.nodeValue = textNode.textContent?.replace('Copy', 'Copied') || null;
+          trigger.dataset.copied = 'true';
+          setTimeout(() => {
+            if (trigger) {
+              textNode.nodeValue = textNode.textContent?.replace('Copied', 'Copy') || null;
+              delete trigger.dataset.copied;
+            }
+          }, 2000);
+          try {
+            if (pre.textContent) {
+              await clipboardCopy(pre.textContent);
+            }
+            // eslint-disable-next-line no-empty
+          } catch (error) {}
+        }
+        const btn = elm.querySelector('.MuiCode-copy');
+        if (btn) {
+          const keyNode = btn.querySelector('.MuiCode-copyKeypress')?.childNodes[1];
+          if (!keyNode) {
+            // skip the logic if the btn is not generated from the markdown.
+            return;
+          }
+          keyNode.textContent = 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) {
+  if (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.
+ */
+export 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?.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__*/_jsxs(CodeBlockContext.Provider, {
+    value: rootNode,
+    children: [_InitCodeCopy || (_InitCodeCopy = /*#__PURE__*/_jsx(InitCodeCopy, {})), children]
+  });
+}

package/CodeCopy/CodeCopyButton.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+export interface CodeCopyButtonProps {
+    code: string;
+}
+export declare function CodeCopyButton(props: CodeCopyButtonProps): React.JSX.Element;

package/CodeCopy/CodeCopyButton.js

@@ -0,0 +1,41 @@
+var _span, _span2;
+import * as React from 'react';
+import useClipboardCopy from './useClipboardCopy';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function CodeCopyButton(props) {
+  const {
+    code,
+    ...other
+  } = props;
+  const {
+    copy,
+    isCopied
+  } = useClipboardCopy();
+  // This component is designed to be wrapped in NoSsr
+  const macOS = window.navigator.platform.toUpperCase().indexOf('MAC') >= 0;
+  const key = macOS ? '⌘' : 'Ctrl + ';
+  return /*#__PURE__*/_jsx("div", {
+    className: "MuiCode-copy-container",
+    children: /*#__PURE__*/_jsxs("button", {
+      ...other,
+      "aria-label": "Copy the code",
+      type: "button",
+      className: "MuiCode-copy",
+      onClick: async () => {
+        // event.stopPropagation();
+        await copy(code);
+      },
+      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/CodeCopy/index.d.ts

@@ -0,0 +1,3 @@
+export * from './CodeCopy';
+export * from './CodeCopyButton';
+export { default as useClipboardCopy } from './useClipboardCopy';

package/CodeCopy/index.js

@@ -0,0 +1,3 @@
+export * from './CodeCopy';
+export * from './CodeCopyButton';
+export { default as useClipboardCopy } from './useClipboardCopy';

package/CodeCopy/package.json

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

package/CodeCopy/useClipboardCopy.d.ts

@@ -0,0 +1,4 @@
+export default function useClipboardCopy(): {
+    copy: (text: string) => Promise<void>;
+    isCopied: boolean;
+};

package/CodeCopy/useClipboardCopy.js

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import clipboardCopy from 'clipboard-copy';
+export default function useClipboardCopy() {
+  const [isCopied, setIsCopied] = React.useState(false);
+  const timeout = React.useRef();
+  React.useEffect(() => () => {
+    clearTimeout(timeout.current);
+  }, []);
+  const copy = async text => {
+    await clipboardCopy(text);
+    setIsCopied(true);
+    clearTimeout(timeout.current);
+    timeout.current = setTimeout(() => {
+      setIsCopied(false);
+    }, 1200);
+  };
+  return {
+    copy,
+    isCopied
+  };
+}

package/ComponentLinkHeader/ComponentLinkHeader.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { MarkdownHeaders } from '@mui/internal-markdown';
+export interface ComponentLinkHeaderProps {
+    design?: boolean;
+    markdown: {
+        headers: MarkdownHeaders;
+    };
+}
+export declare function ComponentLinkHeader(props: ComponentLinkHeaderProps): React.JSX.Element;

package/ComponentLinkHeader/ComponentLinkHeader.js

@@ -0,0 +1,179 @@
+var _ChatRounded, _BundleSizeIcon, _W3CIcon, _MaterialDesignIcon, _li, _React$Fragment;
+import * as React from 'react';
+import Chip from '@mui/material/Chip';
+import Tooltip from '@mui/material/Tooltip';
+import ChatRounded from '@mui/icons-material/ChatRounded';
+import { styled } from '@mui/material/styles';
+import SketchIcon from '../svgIcons/SketchIcon';
+import FigmaIcon from '../svgIcons/FigmaIcon';
+import AdobeXDIcon from '../svgIcons/AdobeXDIcon';
+import BundleSizeIcon from '../svgIcons/BundleSizeIcon';
+import W3CIcon from '../svgIcons/W3CIcon';
+import MaterialDesignIcon from '../svgIcons/MaterialDesignIcon';
+import { useTranslate } from '../i18n';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const Root = styled('ul')({
+  margin: 0,
+  padding: 0,
+  listStyle: 'none',
+  display: 'flex',
+  flexWrap: 'wrap',
+  gap: 8,
+  '& .MuiChip-root': {
+    height: 26,
+    padding: '0 8px',
+    gap: 6,
+    '& .MuiChip-label': {
+      padding: 0
+    },
+    '& .MuiChip-iconSmall': {
+      margin: 0,
+      fontSize: 14
+    }
+  }
+});
+const defaultPackageNames = {
+  'material-ui': '@mui/material',
+  'joy-ui': '@mui/joy',
+  'base-ui': '@mui/base',
+  system: '@mui/system'
+};
+export function ComponentLinkHeader(props) {
+  const {
+    markdown: {
+      headers
+    },
+    design
+  } = props;
+  const t = useTranslate();
+  const packageName = headers.packageName ?? defaultPackageNames[headers.productId] ?? '@mui/material';
+  return /*#__PURE__*/_jsxs(Root, {
+    children: [headers.githubLabel ? /*#__PURE__*/_jsx("li", {
+      children: /*#__PURE__*/_jsx(Chip, {
+        clickable: true,
+        role: undefined,
+        component: "a",
+        size: "small",
+        variant: "outlined",
+        rel: "nofollow",
+        href: `${process.env.SOURCE_CODE_REPO}/labels/${encodeURIComponent(headers.githubLabel)}`,
+        icon: _ChatRounded || (_ChatRounded = /*#__PURE__*/_jsx(ChatRounded, {
+          color: "primary"
+        })),
+        "data-ga-event-category": "ComponentLinkHeader",
+        "data-ga-event-action": "click",
+        "data-ga-event-label": t('githubLabel'),
+        "data-ga-event-split": "0.1",
+        label: t('githubLabel')
+      })
+    }) : null, /*#__PURE__*/_jsx("li", {
+      children: /*#__PURE__*/_jsx(Tooltip, {
+        title: t('bundleSizeTooltip'),
+        describeChild: true,
+        children: /*#__PURE__*/_jsx(Chip, {
+          clickable: true,
+          role: undefined,
+          component: "a",
+          size: "small",
+          variant: "outlined",
+          rel: "nofollow",
+          href: `https://bundlephobia.com/package/${packageName}@latest`,
+          icon: _BundleSizeIcon || (_BundleSizeIcon = /*#__PURE__*/_jsx(BundleSizeIcon, {
+            color: "primary"
+          })),
+          "data-ga-event-category": "ComponentLinkHeader",
+          "data-ga-event-action": "click",
+          "data-ga-event-label": t('bundleSize'),
+          "data-ga-event-split": "0.1",
+          label: t('bundleSize')
+        })
+      })
+    }), headers.waiAria ? /*#__PURE__*/_jsx("li", {
+      children: /*#__PURE__*/_jsx(Chip, {
+        clickable: true,
+        role: undefined,
+        component: "a",
+        size: "small",
+        variant: "outlined",
+        rel: "nofollow",
+        href: headers.waiAria,
+        icon: _W3CIcon || (_W3CIcon = /*#__PURE__*/_jsx(W3CIcon, {
+          color: "primary"
+        })),
+        "data-ga-event-category": "ComponentLinkHeader",
+        "data-ga-event-action": "click",
+        "data-ga-event-label": "WAI-ARIA",
+        "data-ga-event-split": "0.1",
+        label: "WAI-ARIA"
+      })
+    }) : null, headers.materialDesign ? /*#__PURE__*/_jsx("li", {
+      children: /*#__PURE__*/_jsx(Chip, {
+        clickable: true,
+        role: undefined,
+        component: "a",
+        size: "small",
+        variant: "outlined",
+        rel: "nofollow",
+        href: headers.materialDesign,
+        icon: _MaterialDesignIcon || (_MaterialDesignIcon = /*#__PURE__*/_jsx(MaterialDesignIcon, {})),
+        "data-ga-event-category": "ComponentLinkHeader",
+        "data-ga-event-action": "click",
+        "data-ga-event-label": "Material Design",
+        "data-ga-event-split": "0.1",
+        label: "Material Design"
+      })
+    }) : null, design === false ? null : /*#__PURE__*/_jsxs(React.Fragment, {
+      children: [_li || (_li = /*#__PURE__*/_jsx("li", {
+        children: /*#__PURE__*/_jsx(Chip, {
+          clickable: true,
+          role: undefined,
+          component: "a",
+          size: "small",
+          variant: "outlined",
+          rel: "nofollow",
+          href: "https://mui.com/store/items/figma-react/?utm_source=docs&utm_medium=referral&utm_campaign=component-link-header",
+          icon: /*#__PURE__*/_jsx(FigmaIcon, {}),
+          "data-ga-event-category": "ComponentLinkHeader",
+          "data-ga-event-action": "click",
+          "data-ga-event-label": "Figma",
+          "data-ga-event-split": "0.1",
+          label: "Figma"
+        })
+      })), packageName === '@mui/joy' ? null : _React$Fragment || (_React$Fragment = /*#__PURE__*/_jsxs(React.Fragment, {
+        children: [/*#__PURE__*/_jsx("li", {
+          children: /*#__PURE__*/_jsx(Chip, {
+            clickable: true,
+            role: undefined,
+            component: "a",
+            size: "small",
+            variant: "outlined",
+            rel: "nofollow",
+            href: "https://mui.com/store/items/adobe-xd-react/?utm_source=docs&utm_medium=referral&utm_campaign=component-link-header",
+            icon: /*#__PURE__*/_jsx(AdobeXDIcon, {}),
+            "data-ga-event-category": "ComponentLinkHeader",
+            "data-ga-event-action": "click",
+            "data-ga-event-label": "Adobe XD",
+            "data-ga-event-split": "0.1",
+            label: "Adobe"
+          })
+        }), /*#__PURE__*/_jsx("li", {
+          children: /*#__PURE__*/_jsx(Chip, {
+            clickable: true,
+            role: undefined,
+            component: "a",
+            size: "small",
+            variant: "outlined",
+            rel: "nofollow",
+            href: "https://mui.com/store/items/sketch-react/?utm_source=docs&utm_medium=referral&utm_campaign=component-link-header",
+            icon: /*#__PURE__*/_jsx(SketchIcon, {}),
+            "data-ga-event-category": "ComponentLinkHeader",
+            "data-ga-event-action": "click",
+            "data-ga-event-label": "Sketch",
+            "data-ga-event-split": "0.1",
+            label: "Sketch"
+          })
+        })]
+      }))]
+    })]
+  });
+}

package/ComponentLinkHeader/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ComponentLinkHeader';
+export { ComponentLinkHeader as default } from './ComponentLinkHeader';

package/ComponentLinkHeader/index.js

@@ -0,0 +1,2 @@
+export * from './ComponentLinkHeader';
+export { ComponentLinkHeader as default } from './ComponentLinkHeader';

package/ComponentLinkHeader/package.json

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

package/HighlightedCode/HighlightedCode.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { ButtonProps } from '@mui/material/Button';
+import { SxProps } from '@mui/material/styles';
+export interface HighlightedCodeProps {
+    code: string;
+    copyButtonHidden?: boolean;
+    copyButtonProps?: ButtonProps;
+    language: string;
+    parentComponent?: React.ElementType;
+    plainStyle?: boolean;
+    preComponent?: React.ElementType;
+    sx?: SxProps;
+}
+export declare const HighlightedCode: React.ForwardRefExoticComponent<HighlightedCodeProps & React.RefAttributes<HTMLDivElement>>;

package/HighlightedCode/HighlightedCode.js

@@ -0,0 +1,68 @@
+import * as React from 'react';
+import prism from '@mui/internal-markdown/prism';
+import { NoSsr } from '@mui/base/NoSsr';
+import { styled } from '@mui/material/styles';
+import { useCodeCopy, CodeCopyButton } from '../CodeCopy';
+import { MarkdownElement } from '../MarkdownElement';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const Pre = 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': {
+    // 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 {
+    code,
+    copyButtonHidden = false,
+    copyButtonProps,
+    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, {
+    ref: ref,
+    ...other,
+    children: /*#__PURE__*/_jsxs("div", {
+      className: "MuiCode-root",
+      ...handlers,
+      children: [copyButtonHidden ? null : /*#__PURE__*/_jsx(NoSsr, {
+        children: /*#__PURE__*/_jsx(CodeCopyButton, {
+          code: code,
+          ...copyButtonProps
+        })
+      }), /*#__PURE__*/_jsx(PreComponent, {
+        children: /*#__PURE__*/_jsx("code", {
+          className: `language-${language}`
+          // eslint-disable-next-line react/no-danger
+          ,
+          dangerouslySetInnerHTML: {
+            __html: renderedCode
+          }
+        })
+      })]
+    })
+  });
+});

package/HighlightedCode/index.d.ts

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

package/HighlightedCode/index.js

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

package/HighlightedCode/package.json

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

package/InfoCard/InfoCard.d.ts

@@ -8,7 +8,6 @@ export declare function GlowingIconContainer({ icon }: GlowingIconContainerProps
 interface InfoCardProps {
     classNameDescription?: string;
     classNameTitle?: string;
-    dense?: boolean;
     description?: string;
     icon?: React.ReactNode;
     link?: string;