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

package/CHANGELOG.md

@@ -1,5 +1,60 @@
 # [Versions](https://mui.com/versions/)
 
+## v6.0.0-alpha.4
+
+<!-- generated comparing v6.0.0-alpha.3..next -->
+
+_Apr 24, 2024_
+
+A big thanks to the 15 contributors who made this release possible. Here are some highlights ✨:
+
+- 🔥 Converted 3 more Material UI components to use Pigment CSS.
+- ℹ️ Pigment CSS now lives in [its own repository](https://github.com/mui/pigment-css)! From now on, all future development will happen there.
+
+### `@mui/material@6.0.0-alpha.4`
+
+- [Checkbox] Convert to support CSS extraction (#41957) @lhilgert9
+- [IconButton] Convert to support CSS extraction (#41850) @gijsbotje
+- [Radio] Convert to support CSS extraction (#41840) @lhilgert9
+- [Typography] Fix ownerState prop placement (#41903) @sai6855
+- Generate typography tokens (#41703) @siriwatknp
+- Move typography CSS variables to `font` (#42003) @siriwatknp
+- Fix getOverlayAlpha type (#41995) @oliviertassinari
+- Support CSS Extraction using codemod (#41935) @siriwatknp
+
+### `@mui/icons-material@6.0.0-alpha.4`
+
+- &#8203;<!-- 08 -->[icons] Update the icons package (#41937) @danilo-leal
+
+### Docs
+
+- [material-ui] Remove react-swipeable-views from demos as it's no longer maintained (#41912) @soler1212
+- [material-ui] Add dark theme thumbnails for templates (#41947) @zanivan
+- [material-ui] Remove links and interdependencies from free templates (#41941) @zanivan
+- [material-ui] Add missing backticks to HTML tag in the installation page (#41972) @Miguelrom
+- Fix 301 Toolpad links @oliviertassinari
+- Fix 301 image redirections @oliviertassinari
+
+### Core
+
+- pnpm docs:zipRules && vale sync @oliviertassinari
+- Remove @pigment-css/\* packages (#41965) @mnajdova
+- [code-infra] Move the HighlightedCode component to @mui/docs (#41859) @Janpot
+- [code-infra] Move the HighlightedCode component to @mui/docs (#41859) @Janpot
+- [code-infra] Make Babel config path configurable in API docs builder (#41999) @michaldudak
+- [docs-infra] Fix flex-shrink pro-plan (#41990) @oliviertassinari
+- [docs-infra] Allow more value uses of MUI (#41706) @oliviertassinari
+- [docs-infra] Move CPU to shared config (#41901) @oliviertassinari
+- [docs-infra] Improve Twitter OG:image (#41860) @oliviertassinari
+- [docs-infra] Adapt docs infra to Base UI docs needs (#41963) @michaldudak
+- [docs-infra] Add demo container design refinements (#41948) @danilo-leal
+- [docs-infra] Use the `getLayout` on the material demo pages (#41936) @alexfauquette
+- [test] Update browser versions in karma config (#42008) @ZeeshanTamboli
+- [website] Remove customer support agent role from website (#41969) @rluzists1
+- [website] Fix grid usage and add stray improvements (#41930) @danilo-leal
+
+All contributors of this release in alphabetical order: @alexfauquette, @danilo-leal, @gijsbotje, @Janpot, @lhilgert9, @michaldudak, @Miguelrom, @mnajdova, @oliviertassinari, @rluzists1, @sai6855, @siriwatknp, @soler1212, @zanivan, @ZeeshanTamboli
+
 ## v6.0.0-alpha.3
 
 <!-- generated comparing v6.0.0-alpha.2..next -->

package/CodeCopy/CodeCopy.d.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+/**
+ * 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 declare function useCodeCopy(): React.HTMLAttributes<HTMLDivElement>;
+interface CodeCopyProviderProps {
+    children: React.ReactNode;
+}
+/**
+ * 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 declare function CodeCopyProvider({ children }: CodeCopyProviderProps): React.JSX.Element;
+export {};

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,50 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+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) {
+  const {
+      code
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  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", _extends({}, other, {
+      "aria-label": "Copy the code",
+      type: "button",
+      className: "MuiCode-copy",
+      onClick: async () => {
+        // event.stopPropagation();
+        await copy(code);
+      },
+      children: [isCopied ? /*#__PURE__*/_jsx(LibraryAddCheckRoundedIcon, {
+        sx: {
+          fontSize: 18
+        }
+      }) : /*#__PURE__*/_jsx(ContentCopyRoundedIcon, {
+        sx: {
+          fontSize: 18
+        }
+      }), /*#__PURE__*/_jsxs("span", {
+        className: "MuiCode-copyKeypress",
+        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/HighlightedCode/HighlightedCode.d.ts

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

package/HighlightedCode/HighlightedCode.js

@@ -0,0 +1,45 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["copyButtonHidden", "copyButtonProps", "code", "language", "component"];
+import * as React from 'react';
+import prism from '@mui/internal-markdown/prism';
+import { NoSsr } from '@mui/base/NoSsr';
+import { useCodeCopy, CodeCopyButton } from '../CodeCopy';
+import { MarkdownElement } from '../MarkdownElement';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const HighlightedCode = /*#__PURE__*/React.forwardRef(function HighlightedCode(props, ref) {
+  const {
+      copyButtonHidden = false,
+      copyButtonProps,
+      code,
+      language,
+      component: Component = MarkdownElement
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const renderedCode = React.useMemo(() => {
+    return prism(code.trim(), language);
+  }, [code, language]);
+  const handlers = useCodeCopy();
+  return /*#__PURE__*/_jsx(Component, _extends({
+    ref: ref
+  }, other, {
+    children: /*#__PURE__*/_jsxs("div", _extends({
+      className: "MuiCode-root"
+    }, handlers, {
+      children: [copyButtonHidden ? null : /*#__PURE__*/_jsx(NoSsr, {
+        children: /*#__PURE__*/_jsx(CodeCopyButton, _extends({
+          code: code
+        }, copyButtonProps))
+      }), /*#__PURE__*/_jsx("pre", {
+        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/MarkdownElement/MarkdownElement.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+export interface MarkdownElementProps {
+    className?: string;
+    renderedMarkdown?: string;
+}
+export declare const MarkdownElement: React.ForwardRefExoticComponent<MarkdownElementProps & React.RefAttributes<HTMLDivElement>>;