@mui/docs 9.0.0-alpha.2 → 9.0.0-alpha.4

package/DocsApp/StyledEngineProvider.js

@@ -0,0 +1,38 @@
+var _GlobalStyles;
+import * as React from 'react';
+import { StyleSheetManager } from 'styled-components';
+import { CacheProvider } from '@emotion/react';
+import { createEmotionCache as createCache } from '@mui/material-nextjs/v15-pagesRouter';
+import { prefixer } from 'stylis';
+import rtlPlugin from '@mui/stylis-plugin-rtl';
+import GlobalStyles from '@mui/material/GlobalStyles';
+import { ThemeOptionsContext } from "../ThemeContext/index.js";
+import globalSelector from "../globalSelector/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Cache for the rtl version of the styles
+const cacheRtl = createCache({
+  key: 'rtl',
+  prepend: true,
+  enableCssLayer: true,
+  stylisPlugins: [prefixer, rtlPlugin, globalSelector]
+});
+export default function StyledEngineProvider(props) {
+  const {
+    children,
+    cacheLtr
+  } = props;
+  const {
+    direction
+  } = React.useContext(ThemeOptionsContext);
+  const rtl = direction === 'rtl';
+  const emotionCache = direction === 'rtl' ? cacheRtl : cacheLtr;
+  return /*#__PURE__*/_jsx(StyleSheetManager, {
+    stylisPlugins: rtl ? [rtlPlugin] : [],
+    children: /*#__PURE__*/_jsxs(CacheProvider, {
+      value: emotionCache,
+      children: [_GlobalStyles || (_GlobalStyles = /*#__PURE__*/_jsx(GlobalStyles, {
+        styles: "@layer theme, docsearch, mui, utilities;"
+      })), children]
+    })
+  });
+}

package/DocsApp/consoleBanner.d.ts

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

package/DocsApp/consoleBanner.js

@@ -0,0 +1,19 @@
+import { getTheme } from "../branding/index.js";
+// eslint-disable-next-line import/prefer-default-export
+export function printConsoleBanner() {
+  if (typeof window !== 'undefined' && process.env.NODE_ENV === 'production') {
+    window.theme = getTheme('ltr');
+    // eslint-disable-next-line no-console
+    console.log(`%c
+
+███╗   ███╗ ██╗   ██╗ ██████╗
+████╗ ████║ ██║   ██║   ██╔═╝
+██╔████╔██║ ██║   ██║   ██║
+██║╚██╔╝██║ ██║   ██║   ██║
+██║ ╚═╝ ██║ ╚██████╔╝ ██████╗
+╚═╝     ╚═╝  ╚═════╝  ╚═════╝
+
+Tip: you can access the documentation \`theme\` object directly in the console.
+`, 'font-family:monospace;color:#1976d2;font-size:12px;');
+  }
+}

package/DocsApp/createEmotionCache.d.ts

@@ -0,0 +1 @@
+export default function createEmotionCache(): import("@emotion/cache").EmotionCache;

package/DocsApp/createEmotionCache.js

@@ -0,0 +1,12 @@
+import { createEmotionCache as createCache } from '@mui/material-nextjs/v15-pagesRouter';
+import { prefixer } from 'stylis';
+import globalSelector from "../globalSelector/index.js";
+export default function createEmotionCache() {
+  // TODO remove prepend: true once JSS is out
+  return createCache({
+    key: 'css',
+    prepend: true,
+    enableCssLayer: true,
+    stylisPlugins: [prefixer, globalSelector]
+  });
+}

package/DocsApp/createGetInitialProps.d.ts

@@ -0,0 +1,30 @@
+import type { RequireContext } from "../i18n/index.js";
+interface AppContext {
+  ctx: {
+    query: {
+      userLanguage?: string;
+    };
+  };
+  Component: {
+    getInitialProps?: (ctx: AppContext['ctx']) => Promise<Record<string, unknown>>;
+  };
+}
+/**
+ * Factory to create MyApp.getInitialProps.
+ * Follows the same pattern as `@mui/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 declare function createGetInitialProps(options: {
+  translationsContext: RequireContext;
+}): ({
+  ctx,
+  Component
+}: AppContext) => Promise<{
+  pageProps: {
+    userLanguage: string;
+    translations: import("../i18n/index.js").Translations;
+  };
+}>;
+export {};

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/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$/)`
+ */
+// eslint-disable-next-line import/prefer-default-export
+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,11 @@
+import { loadCSS } from 'fg-loadcss';
+let dependenciesLoaded = false;
+
+// eslint-disable-next-line import/prefer-default-export
+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,24 @@
+// 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;
+
+// eslint-disable-next-line import/prefer-default-export
+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,61 @@
+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);
+}
+
+// eslint-disable-next-line import/prefer-default-export
+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.js

@@ -1,28 +1,20 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.DocsProvider = DocsProvider;
-exports.useDocsConfig = useDocsConfig;
-var React = _interopRequireWildcard(require("react"));
-var _i18n = require("../i18n");
-var _Ad = require("../Ad");
-var _jsxRuntime = require("react/jsx-runtime");
+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);
-function DocsProvider({
+export function DocsProvider({
   config,
   adConfig,
   defaultUserLanguage,
   translations,
   children
 }) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(DocsConfigContext.Provider, {
+  return /*#__PURE__*/_jsx(DocsConfigContext.Provider, {
     value: config,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Ad.AdProvider, {
+    children: /*#__PURE__*/_jsx(AdProvider, {
       config: adConfig,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_i18n.UserLanguageProvider, {
+      children: /*#__PURE__*/_jsx(UserLanguageProvider, {
         defaultUserLanguage: defaultUserLanguage,
         translations: translations,
         children: children
@@ -30,7 +22,7 @@ function DocsProvider({
     })
   });
 }
-function useDocsConfig() {
+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>');

package/DocsProvider/index.js

@@ -1,16 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-var _DocsProvider = require("./DocsProvider");
-Object.keys(_DocsProvider).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _DocsProvider[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _DocsProvider[key];
-    }
-  });
-});
+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 '@mui/docs/branding';
+import { fontClasses } from '@mui/docs/nextFonts';
+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,62 @@
+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";
+
+// eslint-disable-next-line import/prefer-default-export
+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";