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

package/DocsApp/AnalyticsProvider.js

@@ -0,0 +1,229 @@
+var _CookieOutlinedIcon, _BrandingCssThemeProv;
+import * as React from 'react';
+import Button from '@mui/material/Button';
+import Fade from '@mui/material/Fade';
+import Paper from '@mui/material/Paper';
+import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+import useLocalStorageState from '@mui/utils/useLocalStorageState';
+import { alpha } from '@mui/system';
+import Portal from '@mui/material/Portal';
+import TrapFocus from '@mui/material/Unstable_TrapFocus';
+import CookieOutlinedIcon from '@mui/icons-material/CookieOutlined';
+import { BrandingCssThemeProvider } from "../branding/BrandingCssVarsProvider.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const COOKIE_CONSENT_KEY = 'docs-cookie-consent';
+function getDoNotTrack() {
+  if (typeof window === 'undefined') {
+    return false;
+  }
+  // Check for Do Not Track (DNT)
+  return navigator.doNotTrack === '1' || window.doNotTrack === '1';
+}
+
+// DNT doesn't change during a session, so we can use a simple external store
+const subscribeToNothing = () => () => {};
+const getDoNotTrackSnapshot = () => getDoNotTrack();
+const getDoNotTrackServerSnapshot = () => true; // Assume DNT until we know the actual value
+
+function useDoNotTrack() {
+  return React.useSyncExternalStore(subscribeToNothing, getDoNotTrackSnapshot, getDoNotTrackServerSnapshot);
+}
+const AnalyticsContext = /*#__PURE__*/React.createContext({
+  consentStatus: null,
+  hasAnalyticsConsent: false,
+  needsConsent: false,
+  setAnalyticsConsent: () => {},
+  setEssentialOnly: () => {}
+});
+export function useAnalyticsConsent() {
+  return React.useContext(AnalyticsContext);
+}
+export function CookieConsentDialog() {
+  const {
+    needsConsent,
+    setAnalyticsConsent,
+    setEssentialOnly
+  } = useAnalyticsConsent();
+  const [show, setShow] = React.useState(false);
+  React.useEffect(() => {
+    if (needsConsent) {
+      // Double rAF to ensure the initial opacity: 0 state is painted before transitioning
+      const frame = requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          setShow(true);
+        });
+      });
+      return () => cancelAnimationFrame(frame);
+    }
+    setShow(false);
+    return undefined;
+  }, [needsConsent]);
+  return /*#__PURE__*/_jsx(Portal, {
+    children: /*#__PURE__*/_jsx(TrapFocus, {
+      open: needsConsent,
+      disableAutoFocus: true,
+      disableEnforceFocus: true,
+      children: /*#__PURE__*/_jsx(Fade, {
+        in: show,
+        unmountOnExit: true,
+        children: /*#__PURE__*/_jsx(Paper, {
+          role: "dialog",
+          "aria-modal": "false",
+          "aria-labelledby": "cookie-consent-dialog-title",
+          "aria-describedby": "cookie-consent-dialog-description",
+          variant: "outlined",
+          tabIndex: -1,
+          sx: theme => ({
+            position: 'fixed',
+            bottom: 0,
+            right: 0,
+            p: 2,
+            m: 2,
+            maxWidth: 340,
+            pointerEvents: 'auto',
+            boxShadow: theme.shadows[2],
+            zIndex: theme.zIndex.snackbar,
+            ...(theme.applyDarkStyles ? theme.applyDarkStyles({
+              bgcolor: 'primaryDark.900'
+            }) : {
+              [theme.getColorSchemeSelector?.('dark') || '&.mode-dark']: {
+                bgcolor: 'primaryDark.900'
+              }
+            })
+          }),
+          children: /*#__PURE__*/_jsxs(Stack, {
+            direction: "column",
+            spacing: 3,
+            sx: {
+              justifyContent: 'flex-start'
+            },
+            children: [/*#__PURE__*/_jsxs(Stack, {
+              spacing: 1,
+              sx: {
+                flexShrink: 1,
+                alignSelf: {
+                  xs: 'flex-start',
+                  sm: 'center'
+                }
+              },
+              children: [/*#__PURE__*/_jsx(Box, {
+                sx: theme => ({
+                  borderRadius: '50%',
+                  bgcolor: alpha(theme.palette.primary.main, 0.1),
+                  p: 1,
+                  display: 'inline-block',
+                  width: 40,
+                  height: 40,
+                  mb: -1,
+                  alignSelf: {
+                    xs: 'center',
+                    sm: 'flex-start'
+                  }
+                }),
+                children: _CookieOutlinedIcon || (_CookieOutlinedIcon = /*#__PURE__*/_jsx(CookieOutlinedIcon, {
+                  color: "primary",
+                  strokeWidth: 1.5
+                }))
+              }), /*#__PURE__*/_jsxs(Stack, {
+                spacing: 0.5,
+                children: [/*#__PURE__*/_jsx(Typography, {
+                  variant: "subtitle2",
+                  id: "cookie-consent-dialog-title",
+                  sx: {
+                    textAlign: {
+                      xs: 'center',
+                      sm: 'start'
+                    }
+                  },
+                  children: "Cookie Preferences"
+                }), /*#__PURE__*/_jsx(Typography, {
+                  id: "cookie-consent-dialog-description",
+                  variant: "body2",
+                  sx: {
+                    textAlign: {
+                      xs: 'center',
+                      sm: 'start'
+                    }
+                  },
+                  children: "We use cookies to understand site usage and improve our content. This includes third-party analytics."
+                })]
+              })]
+            }), /*#__PURE__*/_jsxs(Stack, {
+              direction: "row",
+              spacing: 1,
+              sx: {
+                justifyContent: 'flex-start'
+              },
+              children: [/*#__PURE__*/_jsx(Button, {
+                onClick: setAnalyticsConsent,
+                variant: "contained",
+                size: "small",
+                children: "Allow analytics"
+              }), /*#__PURE__*/_jsx(Button, {
+                onClick: setEssentialOnly,
+                size: "small",
+                children: "Essential only"
+              })]
+            })]
+          })
+        })
+      })
+    })
+  });
+}
+function updateGoogleConsent(hasAnalytics) {
+  if (typeof window !== 'undefined' && typeof window.gtag === 'function') {
+    window.gtag('consent', 'update', {
+      ad_storage: 'denied',
+      ad_user_data: 'denied',
+      ad_personalization: 'denied',
+      analytics_storage: hasAnalytics ? 'granted' : 'denied'
+    });
+
+    // Initialize Apollo when analytics consent is granted
+    const win = window;
+    if (hasAnalytics && typeof win.initApollo === 'function') {
+      win.initApollo();
+    }
+  }
+}
+export function AnalyticsProvider({
+  children
+}) {
+  const [consentStatus, setConsentStatus] = useLocalStorageState(COOKIE_CONSENT_KEY, null);
+  const doNotTrack = useDoNotTrack();
+
+  // Respect Do Not Track - don't show dialog and treat as essential only
+  const needsConsent = consentStatus === null && !doNotTrack;
+
+  // Update Google consent when status changes or on mount if already set
+  React.useEffect(() => {
+    if (doNotTrack) {
+      // DNT is enabled - always deny analytics
+      updateGoogleConsent(false);
+    } else if (consentStatus !== null) {
+      updateGoogleConsent(consentStatus === 'analytics');
+    }
+  }, [consentStatus, doNotTrack]);
+  const setAnalyticsConsent = React.useCallback(() => {
+    setConsentStatus('analytics');
+  }, [setConsentStatus]);
+  const setEssentialOnly = React.useCallback(() => {
+    setConsentStatus('essential');
+  }, [setConsentStatus]);
+  const contextValue = React.useMemo(() => ({
+    consentStatus: doNotTrack ? 'essential' : consentStatus,
+    hasAnalyticsConsent: !doNotTrack && consentStatus === 'analytics',
+    needsConsent,
+    setAnalyticsConsent,
+    setEssentialOnly
+  }), [consentStatus, doNotTrack, needsConsent, setAnalyticsConsent, setEssentialOnly]);
+  return /*#__PURE__*/_jsxs(AnalyticsContext.Provider, {
+    value: contextValue,
+    children: [children, _BrandingCssThemeProv || (_BrandingCssThemeProv = /*#__PURE__*/_jsx(BrandingCssThemeProvider, {
+      children: /*#__PURE__*/_jsx(CookieConsentDialog, {})
+    }))]
+  });
+}

package/DocsApp/DocsApp.d.ts

@@ -0,0 +1,79 @@
+import * as React from 'react';
+import type { AdConfig } from "../Ad/index.js";
+import type { DemoContextValue } from "../DemoContext/index.js";
+import type { DocsConfig } from "../DocsProvider/index.js";
+import type { MuiPageContext } from "../PageContext/index.js";
+import type { Translations } from "../i18n/index.js";
+import createEmotionCache from "./createEmotionCache.js";
+export interface DocsAppProps {
+  /**
+   * The Next.js page component.
+   */
+  Component: React.ComponentType<any> & {
+    getLayout?: (page: React.ReactElement) => React.ReactNode;
+  };
+  /**
+   * The Emotion cache for CSS-in-JS. Falls back to a client-side cache.
+   */
+  emotionCache?: ReturnType<typeof createEmotionCache>;
+  /**
+   * Page props from Next.js, including userLanguage and translations.
+   */
+  pageProps: {
+    userLanguage: string;
+    translations: Translations;
+    [key: string]: unknown;
+  };
+  /**
+   * Docs configuration object (from docs/config.ts)
+   */
+  docsConfig: DocsConfig;
+  /**
+   * Path to the service worker file, e.g. '/sw.js'
+   */
+  serviceWorkerPath: string;
+  /**
+   * The currently active page object
+   */
+  activePage: MuiPageContext['activePage'];
+  /**
+   * The parent pages of the active page
+   */
+  activePageParents: MuiPageContext['activePageParents'];
+  /**
+   * List of all pages for the product
+   */
+  pageList: MuiPageContext['pages'];
+  /**
+   * Product metadata and branding info
+   */
+  productIdentifier: MuiPageContext['productIdentifier'];
+  /**
+   * Product identifier string (e.g. 'material-ui')
+   */
+  productId: MuiPageContext['productId'];
+  /**
+   * Product category identifier string (e.g. 'core')
+   */
+  productCategoryId: MuiPageContext['productCategoryId'];
+  /**
+   * Display name for the product (e.g. 'Material UI')
+   */
+  demoDisplayName: DemoContextValue['productDisplayName'];
+  /**
+   * CodeSandbox configuration for demos
+   */
+  csbConfig: DemoContextValue['csb'];
+  /**
+   * Optional ad configuration
+   */
+  adConfig?: Partial<AdConfig>;
+  /**
+   * Optional wrapper component for theming
+   */
+  ThemeWrapper?: React.ComponentType<{
+    children: React.ReactNode;
+  }>;
+}
+declare function DocsApp(props: DocsAppProps): import("react/jsx-runtime").JSX.Element;
+export { DocsApp };

package/DocsApp/DocsApp.js

@@ -0,0 +1,105 @@
+var _meta, _GoogleAnalytics;
+import NextHead from 'next/head';
+import * as React from 'react';
+import { CodeCopyProvider } from "../CodeCopy/index.js";
+import DemoContext from "../DemoContext/index.js";
+import { DocsProvider } from "../DocsProvider/index.js";
+import PageContext from "../PageContext/index.js";
+import { ThemeProvider } from "../ThemeContext/index.js";
+import { CodeStylingProvider } from "../codeStyling/index.js";
+import { CodeVariantProvider } from "../codeVariant/index.js";
+import { AnalyticsProvider } from "./AnalyticsProvider.js";
+import GoogleAnalytics from "./GoogleAnalytics.js";
+import DocsStyledEngineProvider from "./StyledEngineProvider.js";
+import createEmotionCache from "./createEmotionCache.js";
+import { loadDependencies } from "./loadDependencies.js";
+import { registerServiceWorker } from "./serviceWorker.js";
+
+// Client-side cache, shared for the whole session of the user in the browser.
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const clientSideEmotionCache = createEmotionCache();
+function DocsApp(props) {
+  const {
+    Component,
+    emotionCache = clientSideEmotionCache,
+    pageProps,
+    docsConfig,
+    serviceWorkerPath,
+    activePage,
+    activePageParents,
+    pageList,
+    productIdentifier,
+    productId,
+    productCategoryId,
+    demoDisplayName,
+    csbConfig,
+    adConfig,
+    ThemeWrapper = ThemeProvider
+  } = props;
+  const pageContextValue = React.useMemo(() => ({
+    activePage,
+    activePageParents,
+    pages: pageList,
+    productIdentifier,
+    productId,
+    productCategoryId
+  }), [activePage, activePageParents, pageList, productIdentifier, productId, productCategoryId]);
+  const demoContextValue = React.useMemo(() => ({
+    productDisplayName: demoDisplayName,
+    csb: csbConfig
+  }), [demoDisplayName, csbConfig]);
+  const getLayout = Component.getLayout ?? (page => page);
+  React.useEffect(() => {
+    loadDependencies();
+    registerServiceWorker(serviceWorkerPath);
+
+    // Remove the server-side injected CSS.
+    const jssStyles = document.querySelector('#jss-server-side');
+    if (jssStyles) {
+      jssStyles.parentElement.removeChild(jssStyles);
+    }
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+  return /*#__PURE__*/_jsxs(React.Fragment, {
+    children: [/*#__PURE__*/_jsxs(NextHead, {
+      children: [_meta || (_meta = /*#__PURE__*/_jsx("meta", {
+        name: "viewport",
+        content: "initial-scale=1, width=device-width"
+      })), /*#__PURE__*/_jsx("meta", {
+        name: "mui:productId",
+        content: productId
+      }), /*#__PURE__*/_jsx("meta", {
+        name: "mui:productCategoryId",
+        content: productCategoryId
+      })]
+    }), /*#__PURE__*/_jsx(DocsProvider, {
+      config: docsConfig,
+      adConfig: adConfig,
+      defaultUserLanguage: pageProps.userLanguage,
+      translations: pageProps.translations,
+      children: /*#__PURE__*/_jsx(CodeCopyProvider, {
+        children: /*#__PURE__*/_jsx(CodeStylingProvider, {
+          children: /*#__PURE__*/_jsx(CodeVariantProvider, {
+            children: /*#__PURE__*/_jsx(PageContext.Provider, {
+              value: pageContextValue,
+              children: /*#__PURE__*/_jsx(DemoContext.Provider, {
+                value: demoContextValue,
+                children: /*#__PURE__*/_jsx(ThemeWrapper, {
+                  children: /*#__PURE__*/_jsx(DocsStyledEngineProvider, {
+                    cacheLtr: emotionCache,
+                    children: /*#__PURE__*/_jsxs(AnalyticsProvider, {
+                      children: [getLayout(/*#__PURE__*/_jsx(Component, {
+                        ...pageProps
+                      })), _GoogleAnalytics || (_GoogleAnalytics = /*#__PURE__*/_jsx(GoogleAnalytics, {}))]
+                    })
+                  })
+                })
+              })
+            })
+          })
+        })
+      })
+    })]
+  });
+}
+export { DocsApp };

package/DocsApp/GoogleAnalytics.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+/**
+ * basically just a `useAnalytics` hook.
+ * However, it needs the redux store which is created
+ * in the same component this "hook" is used.
+ */
+declare function GoogleAnalytics(): null;
+declare const _default: React.MemoExoticComponent<typeof GoogleAnalytics>;
+export default _default;

package/DocsApp/GoogleAnalytics.js

@@ -0,0 +1,129 @@
+import * as React from 'react';
+import useMediaQuery from '@mui/material/useMediaQuery';
+import { useRouter } from 'next/router';
+import { useNoSsrCodeVariant } from "../codeVariant/index.js";
+import { useUserLanguage } from "../i18n/index.js";
+import { pathnameToLanguage } from "../helpers/index.js";
+import { ThemeOptionsContext } from "../ThemeContext/index.js";
+
+// So we can write code like:
+//
+// <Button
+//   data-ga-event-category="demo"
+//   data-ga-event-action="expand"
+// >
+//   Foo
+// </Button>
+function handleClick(event) {
+  let el = event.target;
+  while (el && el !== document) {
+    const element = el;
+    const category = element.getAttribute('data-ga-event-category');
+
+    // We reach a tracking element, no need to look higher in the dom tree.
+    if (category) {
+      const split = parseFloat(element.getAttribute('data-ga-event-split') || '');
+      if (split && split < Math.random()) {
+        return;
+      }
+      window.gtag('event', category, {
+        eventAction: element.getAttribute('data-ga-event-action'),
+        eventLabel: element.getAttribute('data-ga-event-label')
+      });
+      break;
+    }
+    el = element.parentElement;
+  }
+}
+let boundDataGaListener = false;
+
+/**
+ * basically just a `useAnalytics` hook.
+ * However, it needs the redux store which is created
+ * in the same component this "hook" is used.
+ */
+function GoogleAnalytics() {
+  React.useEffect(() => {
+    if (!boundDataGaListener) {
+      boundDataGaListener = true;
+      document.addEventListener('click', handleClick);
+    }
+  }, []);
+  const router = useRouter();
+  const timeout = React.useRef(null);
+  React.useEffect(() => {
+    // Wait for the title to be updated.
+    // React fires useEffect twice in dev mode
+    if (timeout.current) {
+      clearTimeout(timeout.current);
+    }
+    timeout.current = setTimeout(() => {
+      const {
+        canonicalAsServer
+      } = pathnameToLanguage(window.location.pathname);
+
+      // https://developers.google.com/analytics/devguides/collection/ga4/views?client_type=gtag
+      const productIdMeta = document.querySelector('meta[name="mui:productId"]');
+      const productCategoryIdMeta = document.querySelector('meta[name="mui:productCategoryId"]');
+      window.gtag('event', 'page_view', {
+        page_title: document.title,
+        page_location: canonicalAsServer,
+        productId: productIdMeta?.content,
+        productCategoryId: productCategoryIdMeta?.content
+      });
+    });
+  }, [router.route]);
+  const codeVariant = useNoSsrCodeVariant();
+  React.useEffect(() => {
+    window.gtag('set', 'user_properties', {
+      codeVariant
+    });
+  }, [codeVariant]);
+  const userLanguage = useUserLanguage();
+  React.useEffect(() => {
+    window.gtag('set', 'user_properties', {
+      userLanguage
+    });
+  }, [userLanguage]);
+  React.useEffect(() => {
+    /**
+     * Based on https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio#Monitoring_screen_resolution_or_zoom_level_changes
+     * Adjusted to track 3 or more different ratios
+     */
+    function trackDevicePixelRation() {
+      const devicePixelRatio = Math.round(window.devicePixelRatio * 10) / 10;
+      window.gtag('set', 'user_properties', {
+        devicePixelRatio
+      });
+    }
+    trackDevicePixelRation();
+
+    /**
+     * @type {MediaQueryList}
+     */
+    const matchMedia = window.matchMedia(`(resolution: ${window.devicePixelRatio}dppx)`);
+    // Intentionally use deprecated listener methods to support iOS & old browsers
+    matchMedia.addListener(trackDevicePixelRation);
+    return () => {
+      matchMedia.removeListener(trackDevicePixelRation);
+    };
+  }, []);
+  const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)', {
+    noSsr: true
+  });
+  const colorSchemeOS = prefersDarkMode ? 'dark' : 'light';
+  const themeOptions = React.useContext(ThemeOptionsContext);
+  const colorScheme = themeOptions.paletteMode;
+  React.useEffect(() => {
+    window.gtag('set', 'user_properties', {
+      colorSchemeOS
+    });
+  }, [colorSchemeOS]);
+  React.useEffect(() => {
+    window.gtag('set', 'user_properties', {
+      colorScheme
+    });
+  }, [colorScheme]);
+  return null;
+}
+export default /*#__PURE__*/React.memo(GoogleAnalytics);

package/DocsApp/StyledEngineProvider.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { createEmotionCache as createCache } from '@mui/material-nextjs/v15-pagesRouter';
+type StyledEngineProviderProps = {
+  cacheLtr: ReturnType<typeof createCache>;
+  children: React.ReactNode;
+};
+export default function StyledEngineProvider(props: StyledEngineProviderProps): import("react/jsx-runtime").JSX.Element;
+export {};

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,18 @@
+import { getTheme } from "../branding/index.js";
+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/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 declare function createGetInitialProps(options: {
+  translationsContext: RequireContext;
+}): ({
+  ctx,
+  Component
+}: AppContext) => Promise<{
+  pageProps: {
+    userLanguage: string;
+    translations: import("../i18n/index.js").Translations;
+  };
+}>;
+export {};