@mui/docs 9.0.0-alpha.3 → 9.0.0-beta.0

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/Document/Document.js

@@ -4,8 +4,8 @@ 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 { 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,

package/Document/getInitialProps.js

@@ -1,15 +1,13 @@
 var _style, _style2, _style3, _style4;
 import * as React from 'react';
 import { documentGetInitialProps } from '@mui/material-nextjs/v13-pagesRouter';
-import createEmotionCache from "../createEmotionCache/index.js";
+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 getInitialProps(ctx) {
+  async function getInitialPropsDocument(ctx) {
     const styledComponentsSheet = setupStyledComponents ? new (await import('styled-components')).ServerStyleSheet() : null;
     try {
       const finalProps = await documentGetInitialProps(ctx, {
@@ -58,5 +56,5 @@ export function createGetInitialProps({
       }
     }
   }
-  return getInitialProps;
+  return getInitialPropsDocument;
 }

package/InfoCard/InfoCard.js

@@ -68,18 +68,22 @@ export function InfoCard(props) {
     children: [svg && svg, icon && /*#__PURE__*/_jsx(GlowingIconContainer, {
       icon: icon
     }), /*#__PURE__*/_jsx(Typography, {
-      fontWeight: "semiBold",
       component: "h3",
-      color: "text.primary",
       variant: "body2",
-      mt: icon ? 2 : 0,
-      mb: description ? 0.5 : 0,
       className: classNameTitle,
       ...titleProps,
+      sx: [{
+        fontWeight: 'semiBold',
+        color: 'text.primary',
+        mt: icon ? 2 : 0,
+        mb: description ? 0.5 : 0
+      }, ...(Array.isArray(titleProps?.sx) ? titleProps.sx : [titleProps?.sx])],
       children: title
     }), /*#__PURE__*/_jsx(Typography, {
       variant: "body2",
-      color: "text.secondary",
+      sx: {
+        color: 'text.secondary'
+      },
       className: classNameDescription,
       children: description
     })]

package/Link/SkipLink.js

@@ -1,6 +1,6 @@
 import MuiLink from '@mui/material/Link';
 import { styled } from '@mui/material/styles';
-import { useTranslate } from '@mui/docs/i18n';
+import { useTranslate } from "../i18n/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const StyledLink = styled(MuiLink)(({
   theme
@@ -55,8 +55,6 @@ const StyledLink = styled(MuiLink)(({
     }
   })
 }));
-
-// eslint-disable-next-line import/prefer-default-export
 export function SkipLink() {
   const t = useTranslate();
   return /*#__PURE__*/_jsx(StyledLink, {

package/NextNProgressBar/NextNProgressBar.js

@@ -12,8 +12,6 @@ function nProgressDone() {
   nProgressStart.clear();
   NProgress.done();
 }
-
-// eslint-disable-next-line import/prefer-default-export
 export function NextNProgressBar() {
   const router = useRouter();
   React.useEffect(() => {

package/PageContext/PageContext.d.ts

@@ -9,21 +9,22 @@ export type RootSvgProps<P = unknown> = Omit<React.SVGProps<SVGSVGElement>, 'ref
 } & P;
 export interface ProductVersion {
   text: string;
-  current: boolean;
-  href?: undefined;
+  current?: boolean;
+  href?: string;
 }
 export interface ProductInfo {
   metadata: string;
   name: string;
-  logo: (props: RootSvgProps) => React.JSX.Element;
-  logoSvg: string;
-  wordmarkSvg: string;
+  logo?: (props: RootSvgProps) => React.JSX.Element;
+  logoSvg?: string;
+  wordmarkSvg?: string;
   versions: ProductVersion[];
 }
 export interface MuiPageContext {
   activePage: MuiPage | null;
   pages: MuiPage[];
   productId: MuiProductId;
+  productCategoryId: string;
   productIdentifier: ProductInfo;
   activePageParents: MuiPage[];
 }

package/branding/BrandingCssVarsProvider.d.ts

@@ -9,15 +9,19 @@ export declare function setDocsColors(primary: Record<string, string>, secondary
 export declare function resetDocsColor(): void;
 export declare function setDocsSpacing(value: number): void;
 export declare function resetDocsSpacing(): void;
+export declare function getTheme(direction: 'ltr' | 'rtl'): import("@mui/material/styles").Theme;
+interface BrandingCssThemeProviderProps {
+  children: React.ReactNode;
+  direction?: 'ltr' | 'rtl';
+  forceThemeRerender?: boolean;
+}
 export declare function BrandingCssThemeProvider({
   children,
   direction,
   forceThemeRerender
-}: React.PropsWithChildren<{
-  direction?: 'ltr' | 'rtl';
-  forceThemeRerender?: boolean;
-}>): import("react/jsx-runtime").JSX.Element;
+}: BrandingCssThemeProviderProps): import("react/jsx-runtime").JSX.Element;
 export declare function BrandingCssVarsProvider(props: {
   children: React.ReactNode;
   direction?: 'ltr' | 'rtl';
-}): import("react/jsx-runtime").JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;
+export {};

package/branding/BrandingCssVarsProvider.js

@@ -104,7 +104,7 @@ export function resetDocsSpacing() {
   }
 }
 const themeCache = new Map();
-function getTheme(direction) {
+export function getTheme(direction) {
   let cachedTheme = themeCache.get(direction);
   if (!cachedTheme) {
     cachedTheme = createTheme({

package/branding/brandingTheme.js

@@ -317,7 +317,9 @@ export function getThemedComponents() {
     components: {
       MuiAlert: {
         styleOverrides: {
-          root: {
+          root: ({
+            theme
+          }) => ({
             padding: '16px',
             gap: '12px',
             fontSize: '1rem',
@@ -333,80 +335,85 @@ export function getThemedComponents() {
             },
             '& .MuiAlert-message': {
               padding: 0
-            }
-          },
+            },
+            variants: [{
+              // same styles from the MarkdownElement callout
+              props: {
+                variant: 'standard',
+                color: 'warning'
+              },
+              style: [{
+                backgroundColor: alpha(theme.palette.warning[50], 0.5),
+                color: (theme.vars || theme).palette.grey[900],
+                border: '1px solid',
+                borderColor: alpha(theme.palette.warning[700], 0.15),
+                '& .MuiAlert-icon': {
+                  color: (theme.vars || theme).palette.warning[600]
+                },
+                '& * a': {
+                  // !important is used here to override the anchor tag color coming from MarkdownElement
+                  color: `${(theme.vars || theme).palette.warning[900]} !important`,
+                  textDecorationColor: `${alpha(theme.palette.warning.main, 0.4)} !important`,
+                  '&:hover': {
+                    textDecorationColor: `${(theme.vars || theme).palette.warning[900]} !important`
+                  }
+                }
+              }, theme.applyDarkStyles({
+                backgroundColor: alpha(theme.palette.warning[700], 0.12),
+                color: (theme.vars || theme).palette.warning[50],
+                '& .MuiAlert-icon': {
+                  color: (theme.vars || theme).palette.warning[400]
+                },
+                '& * a': {
+                  color: `${(theme.vars || theme).palette.warning[100]} !important`,
+                  textDecorationColor: `${alpha(theme.palette.warning[600], 0.4)} !important`,
+                  '&:hover': {
+                    textDecorationColor: `${(theme.vars || theme).palette.warning[600]} !important`
+                  }
+                }
+              })]
+            }, {
+              // same styles from the MarkdownElement callout
+              props: {
+                variant: 'standard',
+                color: 'success'
+              },
+              style: [{
+                backgroundColor: alpha(theme.palette.success[50], 0.5),
+                color: (theme.vars || theme).palette.success[900],
+                border: `1px solid ${(theme.vars || theme).palette.success[100]}`,
+                '& .MuiAlert-icon': {
+                  color: (theme.vars || theme).palette.success[600]
+                },
+                '& * a': {
+                  // !important is used here to override the anchor tag color coming from MarkdownElement
+                  color: `${(theme.vars || theme).palette.success[900]} !important`,
+                  textDecorationColor: `${alpha(theme.palette.success.main, 0.4)} !important`,
+                  '&:hover': {
+                    textDecorationColor: `${(theme.vars || theme).palette.success[900]} !important`
+                  }
+                }
+              }, theme.applyDarkStyles({
+                backgroundColor: alpha(theme.palette.success[700], 0.12),
+                color: (theme.vars || theme).palette.success[50],
+                borderColor: alpha(theme.palette.success[400], 0.1),
+                '& .MuiAlert-icon': {
+                  color: (theme.vars || theme).palette.success[500]
+                },
+                '& * a': {
+                  color: `${(theme.vars || theme).palette.success[100]} !important`,
+                  textDecorationColor: `${alpha(theme.palette.success[600], 0.4)} !important`,
+                  '&:hover': {
+                    textDecorationColor: `${(theme.vars || theme).palette.success[600]} !important`
+                  }
+                }
+              })]
+            }]
+          }),
           icon: {
             paddingTop: 10,
             paddingBottom: 0
-          },
-          standardWarning: ({
-            theme
-          }) => [
-          // same styles from the MarkdownElement callout
-          {
-            backgroundColor: alpha(theme.palette.warning[50], 0.5),
-            color: (theme.vars || theme).palette.grey[900],
-            border: '1px solid',
-            borderColor: alpha(theme.palette.warning[700], 0.15),
-            '& .MuiAlert-icon': {
-              color: (theme.vars || theme).palette.warning[600]
-            },
-            '& * a': {
-              // !important is used here to override the anchor tag color coming from MarkdownElement
-              color: `${(theme.vars || theme).palette.warning[900]} !important`,
-              textDecorationColor: `${alpha(theme.palette.warning.main, 0.4)} !important`,
-              '&:hover': {
-                textDecorationColor: `${(theme.vars || theme).palette.warning[900]} !important`
-              }
-            }
-          }, theme.applyDarkStyles({
-            backgroundColor: alpha(theme.palette.warning[700], 0.12),
-            color: (theme.vars || theme).palette.warning[50],
-            '& .MuiAlert-icon': {
-              color: (theme.vars || theme).palette.warning[400]
-            },
-            '& * a': {
-              color: `${(theme.vars || theme).palette.warning[100]} !important`,
-              textDecorationColor: `${alpha(theme.palette.warning[600], 0.4)} !important`,
-              '&:hover': {
-                textDecorationColor: `${(theme.vars || theme).palette.warning[600]} !important`
-              }
-            }
-          })],
-          standardSuccess: ({
-            theme
-          }) => [
-          // same styles from the MarkdownElement callout
-          {
-            backgroundColor: alpha(theme.palette.success[50], 0.5),
-            color: (theme.vars || theme).palette.success[900],
-            border: `1px solid ${(theme.vars || theme).palette.success[100]}`,
-            '& .MuiAlert-icon': {
-              color: (theme.vars || theme).palette.success[600]
-            },
-            '& * a': {
-              // !important is used here to override the anchor tag color coming from MarkdownElement
-              color: `${(theme.vars || theme).palette.success[900]} !important`,
-              textDecorationColor: `${alpha(theme.palette.success.main, 0.4)} !important`,
-              '&:hover': {
-                textDecorationColor: `${(theme.vars || theme).palette.success[900]} !important`
-              }
-            }
-          }, theme.applyDarkStyles({
-            backgroundColor: alpha(theme.palette.success[700], 0.12),
-            color: (theme.vars || theme).palette.success[50],
-            borderColor: alpha(theme.palette.success[400], 0.1),
-            '& .MuiAlert-icon': {
-              color: (theme.vars || theme).palette.success[500]
-            },
-            '& * a': {
-              color: `${(theme.vars || theme).palette.success[100]} !important`,
-              textDecorationColor: `${alpha(theme.palette.success[600], 0.4)} !important`,
-              '&:hover': {
-                textDecorationColor: `${(theme.vars || theme).palette.success[600]} !important`
-              }
-            }
-          })]
+          }
         }
       },
       MuiButtonBase: {
@@ -1185,12 +1192,12 @@ export function getThemedComponents() {
           IconComponent: ArrowDropDownRounded
         },
         styleOverrides: {
-          iconFilled: {
-            top: 'calc(50% - .25em)'
-          },
           root: ({
             theme
           }) => ({
+            '& .MuiSelect-filled ~ .MuiSelect-icon': {
+              top: 'calc(50% - .25em)'
+            },
             variants: [{
               props: {
                 variant: 'outlined'

package/codeStyling/codeStyling.d.ts

@@ -1,10 +1,7 @@
-export function CodeStylingProvider(props: any): import("react/jsx-runtime").JSX.Element;
-export namespace CodeStylingProvider {
-  namespace propTypes {
-    let children: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
-  }
-}
-export function useCodeStyling(): string;
-export function useNoSsrCodeStyling(): any;
-export function useSetCodeStyling(): () => void;
-import PropTypes from 'prop-types';
+import * as React from 'react';
+export declare function CodeStylingProvider(props: {
+  children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function useCodeStyling(): string;
+export declare function useNoSsrCodeStyling(): string | undefined;
+export declare function useSetCodeStyling(): React.Dispatch<React.SetStateAction<string>>;

package/codeStyling/codeStyling.js

@@ -1,4 +1,3 @@
-import PropTypes from 'prop-types';
 import * as React from 'react';
 import { CODE_STYLING } from "../constants/index.js";
 import { getCookie } from "../helpers/index.js";
@@ -70,9 +69,6 @@ export function CodeStylingProvider(props) {
     children: children
   });
 }
-process.env.NODE_ENV !== "production" ? CodeStylingProvider.propTypes = {
-  children: PropTypes.node.isRequired
-} : void 0;
 export function useCodeStyling() {
   return React.useContext(CodeStylingContext).codeStyling;
 }

package/codeVariant/codeVariant.d.ts

@@ -1,10 +1,7 @@
-export function CodeVariantProvider(props: any): import("react/jsx-runtime").JSX.Element;
-export namespace CodeVariantProvider {
-  namespace propTypes {
-    let children: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
-  }
-}
-export function useCodeVariant(): string;
-export function useNoSsrCodeVariant(): any;
-export function useSetCodeVariant(): () => void;
-import PropTypes from 'prop-types';
+import * as React from 'react';
+export declare function CodeVariantProvider(props: {
+  children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function useCodeVariant(): string;
+export declare function useNoSsrCodeVariant(): string | undefined;
+export declare function useSetCodeVariant(): React.Dispatch<React.SetStateAction<string>>;

package/codeVariant/codeVariant.js

@@ -1,4 +1,3 @@
-import PropTypes from 'prop-types';
 import * as React from 'react';
 import { CODE_VARIANTS } from "../constants/index.js";
 import { getCookie } from "../helpers/index.js";
@@ -59,9 +58,6 @@ export function CodeVariantProvider(props) {
     children: children
   });
 }
-process.env.NODE_ENV !== "production" ? CodeVariantProvider.propTypes = {
-  children: PropTypes.node.isRequired
-} : void 0;
 export function useCodeVariant() {
   return React.useContext(CodeVariantContext).codeVariant;
 }

package/constants/constants.d.ts

@@ -1,13 +1,13 @@
-export namespace CODE_VARIANTS {
-  let JS: string;
-  let TS: string;
-}
-export namespace CODE_STYLING {
-  let SYSTEM: string;
-  let TAILWIND: string;
-  let CSS: string;
-}
-export const LANGUAGES_LABEL: {
+export declare const CODE_VARIANTS: {
+  JS: string;
+  TS: string;
+};
+export declare const CODE_STYLING: {
+  SYSTEM: string;
+  TAILWIND: string;
+  CSS: string;
+};
+export declare const LANGUAGES_LABEL: {
   code: string;
   text: string;
 }[];

package/constants/index.d.ts

@@ -1 +1 @@
-export { CODE_VARIANTS, CODE_STYLING, LANGUAGES_LABEL } from "./constants.js";
+export * from "./constants.js";

package/constants/index.js

@@ -1 +1 @@
-export { CODE_VARIANTS, CODE_STYLING, LANGUAGES_LABEL } from "./constants.js";
+export * from "./constants.js";