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

package/CodeCopy/CodeCopy.js

@@ -154,7 +154,7 @@ export function CodeCopyProvider({
       }
 
       // Skip if it's not a copy keyboard event
-      if (!((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 'c' && !event.shiftKey && !event.altKey)) {
+      if (!((event.ctrlKey || event.metaKey) && String.fromCharCode(event.keyCode) === 'C' && !event.shiftKey && !event.altKey)) {
         return;
       }
       const copyBtn = rootNode.current.querySelector('.MuiCode-copy');

package/CodeCopy/CodeCopyButton.js

@@ -1,17 +1,12 @@
-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 useClipboardCopy from "./useClipboardCopy.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export function CodeCopyButton(props) {
   const {
-      code
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
+    code,
+    ...other
+  } = props;
   const {
     copy,
     isCopied
@@ -21,7 +16,8 @@ export function CodeCopyButton(props) {
   const key = macOS ? '⌘' : 'Ctrl + ';
   return /*#__PURE__*/_jsx("div", {
     className: "MuiCode-copy-container",
-    children: /*#__PURE__*/_jsxs("button", _extends({}, other, {
+    children: /*#__PURE__*/_jsxs("button", {
+      ...other,
       "aria-label": "Copy the code",
       type: "button",
       className: "MuiCode-copy",
@@ -29,22 +25,17 @@ export function CodeCopyButton(props) {
         // event.stopPropagation();
         await copy(code);
       },
-      children: [isCopied ? /*#__PURE__*/_jsx(LibraryAddCheckRoundedIcon, {
-        sx: {
-          fontSize: 18
-        }
-      }) : /*#__PURE__*/_jsx(ContentCopyRoundedIcon, {
-        sx: {
-          fontSize: 18
-        }
-      }), /*#__PURE__*/_jsxs("span", {
+      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.js

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

package/CodeCopy/useClipboardCopy.js

@@ -2,7 +2,7 @@ import * as React from 'react';
 import clipboardCopy from 'clipboard-copy';
 export default function useClipboardCopy() {
   const [isCopied, setIsCopied] = React.useState(false);
-  const timeout = React.useRef();
+  const timeout = React.useRef(undefined);
   React.useEffect(() => () => {
     clearTimeout(timeout.current);
   }, []);

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,197 @@
+var _ChatRounded, _BundleSizeIcon, _GitHubIcon, _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 GitHubIcon from '@mui/icons-material/GitHub';
+import { styled } from '@mui/material/styles';
+import SketchIcon from "../svgIcons/SketchIcon.js";
+import FigmaIcon from "../svgIcons/FigmaIcon.js";
+import AdobeXDIcon from "../svgIcons/AdobeXDIcon.js";
+import BundleSizeIcon from "../svgIcons/BundleSizeIcon.js";
+import W3CIcon from "../svgIcons/W3CIcon.js";
+import MaterialDesignIcon from "../svgIcons/MaterialDesignIcon.js";
+import { useTranslate } from "../i18n/index.js";
+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.githubSource ? /*#__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}/blob/v${process.env.LIB_VERSION}/${headers.githubSource}`,
+        icon: _GitHubIcon || (_GitHubIcon = /*#__PURE__*/_jsx(GitHubIcon, {})),
+        "data-ga-event-category": "ComponentLinkHeader",
+        "data-ga-event-action": "click",
+        "data-ga-event-label": "Source",
+        "data-ga-event-split": "0.1",
+        label: "Source",
+        target: "_blank"
+      })
+    }) : null, 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.js";
+export { ComponentLinkHeader as default } from "./ComponentLinkHeader.js";

package/ComponentLinkHeader/package.json

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

package/DocsProvider/DocsProvider.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { Translations } from '../i18n';
+import { AdConfig } from '../Ad';
 export interface DocsConfig {
     LANGUAGES: string[];
     LANGUAGES_SSR: string[];
@@ -8,9 +9,10 @@ export interface DocsConfig {
 }
 export interface DocsProviderProps {
     config: DocsConfig;
+    adConfig?: Partial<AdConfig>;
     defaultUserLanguage: string;
     children?: React.ReactNode;
     translations?: Translations;
 }
-export declare function DocsProvider({ config, defaultUserLanguage, translations, children, }: DocsProviderProps): React.JSX.Element;
+export declare function DocsProvider({ config, adConfig, defaultUserLanguage, translations, children, }: DocsProviderProps): React.JSX.Element;
 export declare function useDocsConfig(): DocsConfig;

package/DocsProvider/DocsProvider.js

@@ -1,19 +1,24 @@
 import * as React from 'react';
-import { UserLanguageProvider } from '../i18n';
+import { UserLanguageProvider } from "../i18n/index.js";
+import { AdProvider } from "../Ad/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const DocsConfigContext = /*#__PURE__*/React.createContext(null);
 export function DocsProvider({
   config,
+  adConfig,
   defaultUserLanguage,
   translations,
   children
 }) {
   return /*#__PURE__*/_jsx(DocsConfigContext.Provider, {
     value: config,
-    children: /*#__PURE__*/_jsx(UserLanguageProvider, {
-      defaultUserLanguage: defaultUserLanguage,
-      translations: translations,
-      children: children
+    children: /*#__PURE__*/_jsx(AdProvider, {
+      config: adConfig,
+      children: /*#__PURE__*/_jsx(UserLanguageProvider, {
+        defaultUserLanguage: defaultUserLanguage,
+        translations: translations,
+        children: children
+      })
     })
   });
 }

package/DocsProvider/index.js

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

package/HighlightedCode/HighlightedCode.d.ts

@@ -3,10 +3,12 @@ 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;
+    parentComponent?: React.ElementType;
+    plainStyle?: boolean;
+    preComponent?: React.ElementType;
     sx?: SxProps;
 }
 export declare const HighlightedCode: React.ForwardRefExoticComponent<HighlightedCodeProps & React.RefAttributes<HTMLDivElement>>;

package/HighlightedCode/HighlightedCode.js

@@ -1,36 +1,62 @@
-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 { styled } from '@mui/material/styles';
+import { useCodeCopy, CodeCopyButton } from "../CodeCopy/index.js";
+import { MarkdownElement } from "../MarkdownElement/index.js";
 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 {
-      copyButtonHidden = false,
-      copyButtonProps,
-      code,
-      language,
-      component: Component = MarkdownElement
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
+    code,
+    copyButtonHidden = false,
+    copyButtonProps,
+    language,
+    plainStyle,
+    parentComponent: Component = plainStyle ? React.Fragment : 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, _extends({
-    ref: ref
-  }, other, {
-    children: /*#__PURE__*/_jsxs("div", _extends({
-      className: "MuiCode-root"
-    }, handlers, {
+  return /*#__PURE__*/_jsx(Component, {
+    ref: ref,
+    ...other,
+    children: /*#__PURE__*/_jsxs("div", {
+      className: "MuiCode-root",
+      ...handlers,
+      style: {
+        height: '100%'
+      },
       children: [copyButtonHidden ? null : /*#__PURE__*/_jsx(NoSsr, {
-        children: /*#__PURE__*/_jsx(CodeCopyButton, _extends({
-          code: code
-        }, copyButtonProps))
-      }), /*#__PURE__*/_jsx("pre", {
+        children: /*#__PURE__*/_jsx(CodeCopyButton, {
+          code: code,
+          ...copyButtonProps
+        })
+      }), /*#__PURE__*/_jsx(PreComponent, {
         children: /*#__PURE__*/_jsx("code", {
           className: `language-${language}`
           // eslint-disable-next-line react/no-danger
@@ -40,6 +66,6 @@ export const HighlightedCode = /*#__PURE__*/React.forwardRef(function Highlighte
           }
         })
       })]
-    }))
-  }));
+    })
+  });
 });

package/HighlightedCode/index.js

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

package/HighlightedCodeWithTabs/HighlightedCodeWithTabs.d.ts

@@ -0,0 +1,29 @@
+import * as React from 'react';
+export declare const CodeTabList: import("@mui/styled-engine").StyledComponent<import("@mui/base/TabsList").TabsListOwnProps & Omit<any, keyof import("@mui/base/TabsList").TabsListOwnProps> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
+    ownerState: {
+        mounted: boolean;
+        contained?: boolean;
+    };
+}, {}, {}>;
+export declare const CodeTabPanel: import("@mui/styled-engine").StyledComponent<import("@mui/base/TabPanel").TabPanelOwnProps & Omit<any, keyof import("@mui/base/TabPanel").TabPanelOwnProps> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
+    ownerState: {
+        mounted: boolean;
+        contained?: boolean;
+    };
+}, {}, {}>;
+export declare const CodeTab: import("@mui/styled-engine").StyledComponent<import("@mui/base/Tab").TabOwnProps & Omit<any, keyof import("@mui/base/Tab").TabOwnProps> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
+    ownerState: {
+        mounted: boolean;
+        contained?: boolean;
+    };
+}, {}, {}>;
+type TabsConfig = {
+    code: string | ((tab: string) => string);
+    language: string;
+    tab: string;
+};
+export declare function HighlightedCodeWithTabs(props: {
+    tabs: Array<TabsConfig>;
+    storageKey?: string;
+} & Record<string, any>): React.JSX.Element;
+export {};