@mui/internal-core-docs 0.0.1 → 9.0.0-canary.1

package/DocsApp/createGetInitialProps.js

@@ -0,0 +1,29 @@
+import { mapTranslations } from "../i18n/index.js";
+/**
+ * Factory to create MyApp.getInitialProps.
+ * Follows the same pattern as `@mui/internal-core-docs/Document`'s `createGetInitialProps`.
+ *
+ * @param options.translationsContext - A webpack require.context pointing at translation JSON files.
+ *   e.g. `require.context('docs/translations', false, /\.\/translations.*\.json$/)`
+ */
+
+export function createGetInitialProps(options) {
+  async function getInitialPropsApp({
+    ctx,
+    Component
+  }) {
+    let pageProps = {};
+    const translations = mapTranslations(options.translationsContext);
+    if (Component.getInitialProps) {
+      pageProps = await Component.getInitialProps(ctx);
+    }
+    return {
+      pageProps: {
+        userLanguage: ctx.query.userLanguage || 'en',
+        translations,
+        ...pageProps
+      }
+    };
+  }
+  return getInitialPropsApp;
+}

package/DocsApp/index.d.ts

@@ -0,0 +1,5 @@
+export { DocsApp } from "./DocsApp.js";
+export type { DocsAppProps } from "./DocsApp.js";
+export { createGetInitialProps } from "./createGetInitialProps.js";
+export { printConsoleBanner } from "./consoleBanner.js";
+export { reportWebVitals } from "./reportWebVitals.js";

package/DocsApp/index.js

@@ -0,0 +1,4 @@
+export { DocsApp } from "./DocsApp.js";
+export { createGetInitialProps } from "./createGetInitialProps.js";
+export { printConsoleBanner } from "./consoleBanner.js";
+export { reportWebVitals } from "./reportWebVitals.js";

package/DocsApp/loadDependencies.d.ts

@@ -0,0 +1 @@
+export declare function loadDependencies(): void;

package/DocsApp/loadDependencies.js

@@ -0,0 +1,9 @@
+import { loadCSS } from 'fg-loadcss';
+let dependenciesLoaded = false;
+export function loadDependencies() {
+  if (dependenciesLoaded) {
+    return;
+  }
+  dependenciesLoaded = true;
+  loadCSS('https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Two+Tone', document.querySelector('#material-icon-font') ?? undefined);
+}

package/DocsApp/reportWebVitals.d.ts

@@ -0,0 +1,13 @@
+export declare function reportWebVitals({
+  id,
+  name,
+  label,
+  delta,
+  value
+}: {
+  id: string;
+  name: string;
+  label: string;
+  delta: number;
+  value: number;
+}): void;

package/DocsApp/reportWebVitals.js

@@ -0,0 +1,22 @@
+// Track fraction of actual events to prevent exceeding event quota.
+// Filter sessions instead of individual events so that we can track multiple metrics per device.
+// See https://github.com/GoogleChromeLabs/web-vitals-report to use this data
+const disableWebVitalsReporting = Math.random() > 0.0001;
+export function reportWebVitals({
+  id,
+  name,
+  label,
+  delta,
+  value
+}) {
+  if (disableWebVitalsReporting) {
+    return;
+  }
+  window.gtag('event', name, {
+    value: delta,
+    metric_label: label === 'web-vital' ? 'Web Vitals' : 'Next.js custom metric',
+    metric_value: value,
+    metric_delta: delta,
+    metric_id: id // id unique to current page load
+  });
+}

package/DocsApp/serviceWorker.d.ts

@@ -0,0 +1 @@
+export declare function registerServiceWorker(swPath: string): Promise<void>;

package/DocsApp/serviceWorker.js

@@ -0,0 +1,59 @@
+let reloadInterval;
+
+// Avoid infinite loop when "Update on reload" is set in the Chrome sw dev tools.
+function lazyReload() {
+  clearInterval(reloadInterval);
+  reloadInterval = setInterval(() => {
+    if (document.hasFocus()) {
+      window.location.reload();
+    }
+  }, 100);
+}
+
+// Inspired by
+// https://developers.google.com/web/tools/workbox/guides/advanced-recipes#offer_a_page_reload_for_users
+function forcePageReload(registration) {
+  // console.log('already controlled?', Boolean(navigator.serviceWorker.controller));
+
+  if (!navigator.serviceWorker.controller) {
+    // The window client isn't currently controlled so it's a new service
+    // worker that will activate immediately.
+    return;
+  }
+
+  // console.log('registration waiting?', Boolean(registration.waiting));
+  if (registration.waiting) {
+    // SW is waiting to activate. Can occur if multiple clients open and
+    // one of the clients is refreshed.
+    registration.waiting.postMessage('skipWaiting');
+    return;
+  }
+  function listenInstalledStateChange() {
+    registration.installing.addEventListener('statechange', event => {
+      // console.log('statechange', event.target.state);
+      if (event.target.state === 'installed' && registration.waiting) {
+        // A new service worker is available, inform the user
+        registration.waiting.postMessage('skipWaiting');
+      } else if (event.target.state === 'activated') {
+        // Force the control of the page by the activated service worker.
+        lazyReload();
+      }
+    });
+  }
+  if (registration.installing) {
+    listenInstalledStateChange();
+    return;
+  }
+
+  // We are currently controlled so a new SW may be found...
+  // Add a listener in case a new SW is found,
+  registration.addEventListener('updatefound', listenInstalledStateChange);
+}
+export async function registerServiceWorker(swPath) {
+  if ('serviceWorker' in navigator && process.env.NODE_ENV === 'production' && window.location.host.includes('mui.com')) {
+    // register() automatically attempts to refresh the sw.js.
+    const registration = await navigator.serviceWorker.register(swPath);
+    // Force the page reload for users.
+    forcePageReload(registration);
+  }
+}

package/DocsProvider/DocsProvider.d.ts

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { Translations } from "../i18n/index.js";
+import { AdConfig } from "../Ad/index.js";
+export interface DocsConfig {
+  LANGUAGES: string[];
+  LANGUAGES_SSR: string[];
+  LANGUAGES_IN_PROGRESS: string[];
+  LANGUAGES_IGNORE_PAGES: (pathname: string) => boolean;
+}
+export interface DocsProviderProps {
+  config: DocsConfig;
+  adConfig?: Partial<AdConfig>;
+  defaultUserLanguage: string;
+  children?: React.ReactNode;
+  translations?: Translations;
+}
+export declare function DocsProvider({
+  config,
+  adConfig,
+  defaultUserLanguage,
+  translations,
+  children
+}: DocsProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function useDocsConfig(): DocsConfig;

package/DocsProvider/DocsProvider.js

@@ -0,0 +1,31 @@
+import * as React from 'react';
+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(AdProvider, {
+      config: adConfig,
+      children: /*#__PURE__*/_jsx(UserLanguageProvider, {
+        defaultUserLanguage: defaultUserLanguage,
+        translations: translations,
+        children: children
+      })
+    })
+  });
+}
+export function useDocsConfig() {
+  const config = React.useContext(DocsConfigContext);
+  if (!config) {
+    throw new Error('Could not find docs config context value; please ensure the component is wrapped in a <DocsProvider>');
+  }
+  return config;
+}

package/DocsProvider/index.d.ts

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

package/DocsProvider/index.js

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

package/Document/Document.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+export type DocumentProps = {
+  canonicalAsServer: string;
+  analytics: {
+    google: string;
+    apollo: string;
+  };
+  userLanguage: string;
+  children?: React.ReactNode;
+};
+export declare function Document({
+  canonicalAsServer,
+  userLanguage,
+  analytics,
+  children
+}: DocumentProps): import("react/jsx-runtime").JSX.Element;

package/Document/Document.js

@@ -0,0 +1,147 @@
+var _link, _link2, _link3, _MuiInitColorSchemeSc, _Main, _NextScript;
+import * as React from 'react';
+import Script from 'next/script';
+import { Html, Head, Main, NextScript } from 'next/document';
+import GlobalStyles from '@mui/material/GlobalStyles';
+import MuiInitColorSchemeScript from '@mui/material/InitColorSchemeScript';
+import { getMetaThemeColor } from "../branding/index.js";
+import { fontClasses } from "../nextFonts/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function Document({
+  canonicalAsServer,
+  userLanguage,
+  analytics,
+  children
+}) {
+  return /*#__PURE__*/_jsxs(Html, {
+    lang: userLanguage,
+    "data-mui-color-scheme": "light",
+    children: [/*#__PURE__*/_jsxs(Head, {
+      children: [_link || (_link = /*#__PURE__*/_jsx("link", {
+        rel: "manifest",
+        href: "/static/manifest.json"
+      })), /*#__PURE__*/_jsx("meta", {
+        name: "theme-color",
+        content: getMetaThemeColor('light'),
+        media: "(prefers-color-scheme: light)"
+      }), /*#__PURE__*/_jsx("meta", {
+        name: "theme-color",
+        content: getMetaThemeColor('dark'),
+        media: "(prefers-color-scheme: dark)"
+      }), _link2 || (_link2 = /*#__PURE__*/_jsx("link", {
+        rel: "icon",
+        href: "/static/favicon.ico"
+      })), _link3 || (_link3 = /*#__PURE__*/_jsx("link", {
+        rel: "apple-touch-icon",
+        sizes: "180x180",
+        href: "/static/icons/180x180.png"
+      })), /*#__PURE__*/_jsx("link", {
+        rel: "canonical",
+        href: `https://mui.com${userLanguage === 'en' ? '' : `/${userLanguage}`}${canonicalAsServer}`
+      }), /*#__PURE__*/_jsx("link", {
+        rel: "alternate",
+        href: `https://mui.com${canonicalAsServer}`,
+        hrefLang: "x-default"
+      }), /*#__PURE__*/_jsx(GlobalStyles, {
+        styles: {
+          // First SSR paint
+          '.only-light-mode': {
+            display: 'block'
+          },
+          '.only-dark-mode': {
+            display: 'none'
+          },
+          // Post SSR Hydration
+          '.mode-dark .only-light-mode': {
+            display: 'none'
+          },
+          '.mode-dark .only-dark-mode': {
+            display: 'block'
+          },
+          // TODO migrate to .only-dark-mode to .only-dark-mode-v2
+          '[data-mui-color-scheme="light"] .only-dark-mode-v2': {
+            display: 'none'
+          },
+          '[data-mui-color-scheme="dark"] .only-light-mode-v2': {
+            display: 'none'
+          },
+          '.plan-pro, .plan-premium': {
+            display: 'inline-block',
+            height: '0.9em',
+            width: '1em',
+            verticalAlign: 'middle',
+            marginLeft: '0.3em',
+            marginBottom: '0.08em',
+            backgroundSize: 'contain',
+            backgroundRepeat: 'no-repeat',
+            flexShrink: 0
+          },
+          '.plan-pro': {
+            backgroundImage: 'url(/static/x/pro.svg)'
+          },
+          '.plan-premium': {
+            backgroundImage: 'url(/static/x/premium.svg)'
+          }
+        }
+      })]
+    }), /*#__PURE__*/_jsxs("body", {
+      className: fontClasses,
+      children: [_MuiInitColorSchemeSc || (_MuiInitColorSchemeSc = /*#__PURE__*/_jsx(MuiInitColorSchemeScript, {
+        defaultMode: "system"
+      })), children, _Main || (_Main = /*#__PURE__*/_jsx(Main, {})), /*#__PURE__*/_jsx("script", {
+        // eslint-disable-next-line react/no-danger
+        dangerouslySetInnerHTML: {
+          __html: `
+window.dataLayer = window.dataLayer || [];
+function gtag(){dataLayer.push(arguments);}
+window.gtag = gtag;
+
+${ /* Set default consent to denied (Google Consent Mode v2) */''}
+gtag('consent', 'default', {
+  'ad_storage': 'denied',
+  'ad_user_data': 'denied',
+  'ad_personalization': 'denied',
+  'analytics_storage': 'denied',
+  'wait_for_update': 500
+});
+gtag('set', 'ads_data_redaction', true);
+gtag('set', 'url_passthrough', true);
+
+gtag('js', new Date());
+gtag('config', '${analytics.google}', {
+  send_page_view: false,
+});
+
+${ /* Apollo initialization - called by AnalyticsProvider when consent is granted */''}
+window.initApollo = function() {
+  if (window.apolloInitialized) return;
+  window.apolloInitialized = true;
+  var n = Math.random().toString(36).substring(7),
+    o = document.createElement('script');
+  o.src = 'https://assets.apollo.io/micro/website-tracker/tracker.iife.js?nocache=' + n;
+  o.async = true;
+  o.defer = true;
+  o.onload = function () {
+    window.trackingFunctions.onLoad({ appId: '${analytics.apollo}' });
+  };
+  document.head.appendChild(o);
+};
+
+${ /* Check localStorage for existing consent and initialize if already granted */''}
+(function() {
+  try {
+    var consent = localStorage.getItem('docs-cookie-consent');
+    if (consent === 'analytics') {
+      window.initApollo();
+    }
+  } catch (e) {}
+})();
+`
+        }
+      }), /*#__PURE__*/_jsx(Script, {
+        strategy: "afterInteractive",
+        src: `https://www.googletagmanager.com/gtag/js?id=${analytics.google}`
+      }), _NextScript || (_NextScript = /*#__PURE__*/_jsx(NextScript, {}))]
+    })]
+  });
+}

package/Document/getInitialProps.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import type { DocumentContext } from 'next/document';
+export declare function createGetInitialProps({
+  setupStyledComponents
+}: {
+  setupStyledComponents: boolean;
+}): (ctx: DocumentContext) => Promise<{
+  canonicalAsServer: string;
+  analytics: {
+    google: string;
+    apollo: string;
+  };
+  userLanguage: string | string[];
+  styles: (string | number | bigint | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element)[];
+  html: string;
+  head?: Array<React.JSX.Element | null>;
+  emotionStyleTags: React.ReactElement<unknown>[];
+}>;

package/Document/getInitialProps.js

@@ -0,0 +1,60 @@
+var _style, _style2, _style3, _style4;
+import * as React from 'react';
+import { documentGetInitialProps } from '@mui/material-nextjs/v13-pagesRouter';
+import createEmotionCache from "../DocsApp/createEmotionCache.js";
+import { pathnameToLanguage } from "../helpers/helpers.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export function createGetInitialProps({
+  setupStyledComponents = false
+}) {
+  async function getInitialPropsDocument(ctx) {
+    const styledComponentsSheet = setupStyledComponents ? new (await import('styled-components')).ServerStyleSheet() : null;
+    try {
+      const finalProps = await documentGetInitialProps(ctx, {
+        emotionCache: createEmotionCache(),
+        plugins: styledComponentsSheet ? [{
+          enhanceApp: App => props => styledComponentsSheet.collectStyles(/*#__PURE__*/_jsx(App, {
+            ...props
+          })),
+          resolveProps: async initialProps => ({
+            ...initialProps,
+            styles: [styledComponentsSheet.getStyleElement(), ...React.Children.toArray(initialProps.styles)]
+          })
+        }] : []
+      });
+
+      // All the URLs should have a leading /.
+      // This is missing in the Next.js static export.
+      let url = ctx.req?.url;
+      if (url && url[url.length - 1] !== '/') {
+        url += '/';
+      }
+      const isProd = process.env.DEPLOY_ENV === 'production' || process.env.DEPLOY_ENV === 'staging';
+      const google = isProd ? 'G-5NXDQLC2ZK' : 'G-XJ83JQEK7J';
+      const apollo = isProd ? '691c2e920c5e20000d7801b6' : 'dev-id';
+      return {
+        ...finalProps,
+        canonicalAsServer: pathnameToLanguage(url ?? '').canonicalAsServer,
+        analytics: {
+          google,
+          apollo
+        },
+        userLanguage: ctx.query.userLanguage || 'en',
+        styles: [_style || (_style = /*#__PURE__*/_jsx("style", {
+          id: "material-icon-font"
+        }, "material-icon-font")), _style2 || (_style2 = /*#__PURE__*/_jsx("style", {
+          id: "font-awesome-css"
+        }, "font-awesome-css")), ...finalProps.emotionStyleTags, _style3 || (_style3 = /*#__PURE__*/_jsx("style", {
+          id: "app-search"
+        }, "app-search")), _style4 || (_style4 = /*#__PURE__*/_jsx("style", {
+          id: "prismjs"
+        }, "prismjs")), ...React.Children.toArray(finalProps.styles)]
+      };
+    } finally {
+      if (styledComponentsSheet) {
+        styledComponentsSheet.seal();
+      }
+    }
+  }
+  return getInitialPropsDocument;
+}

package/Document/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./Document.js";
+export * from "./getInitialProps.js";

package/Document/index.js

@@ -0,0 +1,2 @@
+export * from "./Document.js";
+export * from "./getInitialProps.js";

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 function HighlightedCode(props: HighlightedCodeProps): import("react/jsx-runtime").JSX.Element;

package/HighlightedCode/HighlightedCode.js

@@ -0,0 +1,67 @@
+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/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.
+  '& 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 function HighlightedCode(props) {
+  const {
+    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();
+  const componentProps = !plainStyle ? other : undefined;
+  return /*#__PURE__*/_jsx(Component, {
+    ...componentProps,
+    children: /*#__PURE__*/_jsxs("div", {
+      className: "MuiCode-root",
+      ...handlers,
+      style: {
+        height: '100%'
+      },
+      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.js";

package/HighlightedCode/index.js

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

package/HighlightedCodeWithTabs/HighlightedCodeWithTabs.d.ts

@@ -0,0 +1,28 @@
+export declare const CodeTabList: import("@emotion/styled").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("@emotion/styled").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("@emotion/styled").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>): import("react/jsx-runtime").JSX.Element;
+export {};