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

package/ThemeContext/ThemeContext.mjs

@@ -0,0 +1,200 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { createTheme as createMdTheme } from '@mui/material/styles';
+import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/material/utils';
+import useMediaQuery from '@mui/material/useMediaQuery';
+import useLocalStorageState from '@mui/utils/useLocalStorageState';
+import useLazyCSS from "../useLazyCSS/index.mjs";
+import { getMetaThemeColor } from "../branding/index.mjs";
+import { jsx as _jsx } from "react/jsx-runtime";
+const themeInitialOptions = {
+  dense: false,
+  direction: 'ltr',
+  paletteMode: 'light'
+};
+export const highDensity = {
+  components: {
+    MuiButton: {
+      defaultProps: {
+        size: 'small'
+      }
+    },
+    MuiFilledInput: {
+      defaultProps: {
+        margin: 'dense'
+      }
+    },
+    MuiFormControl: {
+      defaultProps: {
+        margin: 'dense'
+      }
+    },
+    MuiFormHelperText: {
+      defaultProps: {
+        margin: 'dense'
+      }
+    },
+    MuiIconButton: {
+      defaultProps: {
+        size: 'small'
+      }
+    },
+    MuiInputBase: {
+      defaultProps: {
+        margin: 'dense'
+      }
+    },
+    MuiInputLabel: {
+      defaultProps: {
+        margin: 'dense'
+      }
+    },
+    MuiListItem: {
+      defaultProps: {
+        dense: true
+      }
+    },
+    MuiOutlinedInput: {
+      defaultProps: {
+        margin: 'dense'
+      }
+    },
+    MuiFab: {
+      defaultProps: {
+        size: 'small'
+      }
+    },
+    MuiTable: {
+      defaultProps: {
+        size: 'small'
+      }
+    },
+    MuiTextField: {
+      defaultProps: {
+        margin: 'dense'
+      }
+    },
+    MuiToolbar: {
+      defaultProps: {
+        variant: 'dense'
+      }
+    }
+  }
+};
+export const DispatchContext = /*#__PURE__*/React.createContext(() => {
+  throw new Error('Forgot to wrap component in `ThemeProvider`');
+});
+if (process.env.NODE_ENV !== 'production') {
+  DispatchContext.displayName = 'ThemeDispatchContext';
+}
+export const ThemeOptionsContext = /*#__PURE__*/React.createContext(themeInitialOptions);
+if (process.env.NODE_ENV !== 'production') {
+  ThemeOptionsContext.displayName = 'ThemeOptionsContext';
+}
+export function ThemeProvider(props) {
+  const {
+    children
+  } = props;
+  const [themeOptions, dispatch] = React.useReducer((state, action) => {
+    switch (action.type) {
+      case 'SET_DENSE':
+        return {
+          ...state,
+          dense: action.payload
+        };
+      case 'RESET_DENSITY':
+        return {
+          ...state,
+          dense: themeInitialOptions.dense
+        };
+      case 'CHANGE':
+        // No value changed
+        if ((!action.payload.paletteMode || action.payload.paletteMode === state.paletteMode) && (!action.payload.direction || action.payload.direction === state.direction)) {
+          return state;
+        }
+        return {
+          ...state,
+          paletteMode: action.payload.paletteMode || state.paletteMode,
+          direction: action.payload.direction || state.direction
+        };
+      default:
+        throw new Error(`Unrecognized type ${action.type}`);
+    }
+  }, themeInitialOptions);
+  const {
+    direction,
+    paletteMode
+  } = themeOptions;
+  useLazyCSS('/static/styles/prism-okaidia.css', '#prismjs');
+
+  // TODO replace with useColorScheme once all pages support css vars
+  const {
+    mode,
+    systemMode
+  } = useColorSchemeShim();
+  const calculatedMode = mode === 'system' ? systemMode : mode;
+  useEnhancedEffect(() => {
+    dispatch({
+      type: 'CHANGE',
+      payload: {
+        paletteMode: calculatedMode
+      }
+    });
+  }, [calculatedMode]);
+  useEnhancedEffect(() => {
+    document.body.setAttribute('dir', direction);
+  }, [direction]);
+  useEnhancedEffect(() => {
+    // To support light and dark mode images in the docs
+    if (paletteMode === 'dark') {
+      document.body.classList.remove('mode-light');
+      document.body.classList.add('mode-dark');
+    } else {
+      document.body.classList.remove('mode-dark');
+      document.body.classList.add('mode-light');
+    }
+    const metas = document.querySelectorAll('meta[name="theme-color"]');
+    metas.forEach(meta => {
+      meta.setAttribute('content', getMetaThemeColor(paletteMode));
+    });
+  }, [paletteMode]);
+  React.useEffect(() => {
+    // Expose the theme as a global variable so people can play with it.
+    window.createTheme = createMdTheme;
+  }, []);
+  return /*#__PURE__*/_jsx(ThemeOptionsContext.Provider, {
+    value: themeOptions,
+    children: /*#__PURE__*/_jsx(DispatchContext.Provider, {
+      value: dispatch,
+      children: children
+    })
+  });
+}
+process.env.NODE_ENV !== "production" ? ThemeProvider.propTypes = {
+  children: PropTypes.node
+} : void 0;
+
+/**
+ * @returns {(nextOptions: Partial<typeof themeInitialOptions>) => void}
+ */
+export function useChangeTheme() {
+  const dispatch = React.useContext(DispatchContext);
+  return React.useCallback(options => dispatch({
+    type: 'CHANGE',
+    payload: options
+  }), [dispatch]);
+}
+
+// TODO: remove once all pages support css vars and replace call sites with useColorScheme()
+export function useColorSchemeShim() {
+  const [mode, setMode] = useLocalStorageState('mui-mode', 'system');
+  const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)', {
+    noSsr: true
+  });
+  const systemMode = prefersDarkMode ? 'dark' : 'light';
+  return {
+    mode,
+    systemMode,
+    setMode
+  };
+}

package/ThemeContext/index.d.mts

@@ -0,0 +1 @@
+export { ThemeProvider, ThemeOptionsContext, DispatchContext, highDensity, useChangeTheme, useColorSchemeShim } from "./ThemeContext.mjs";

package/ThemeContext/index.d.ts

@@ -0,0 +1 @@
+export { ThemeProvider, ThemeOptionsContext, DispatchContext, highDensity, useChangeTheme, useColorSchemeShim } from "./ThemeContext.js";

package/ThemeContext/index.js

@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "DispatchContext", {
+  enumerable: true,
+  get: function () {
+    return _ThemeContext.DispatchContext;
+  }
+});
+Object.defineProperty(exports, "ThemeOptionsContext", {
+  enumerable: true,
+  get: function () {
+    return _ThemeContext.ThemeOptionsContext;
+  }
+});
+Object.defineProperty(exports, "ThemeProvider", {
+  enumerable: true,
+  get: function () {
+    return _ThemeContext.ThemeProvider;
+  }
+});
+Object.defineProperty(exports, "highDensity", {
+  enumerable: true,
+  get: function () {
+    return _ThemeContext.highDensity;
+  }
+});
+Object.defineProperty(exports, "useChangeTheme", {
+  enumerable: true,
+  get: function () {
+    return _ThemeContext.useChangeTheme;
+  }
+});
+Object.defineProperty(exports, "useColorSchemeShim", {
+  enumerable: true,
+  get: function () {
+    return _ThemeContext.useColorSchemeShim;
+  }
+});
+var _ThemeContext = require("./ThemeContext");

package/ThemeContext/index.mjs

@@ -0,0 +1 @@
+export { ThemeProvider, ThemeOptionsContext, DispatchContext, highDensity, useChangeTheme, useColorSchemeShim } from "./ThemeContext.mjs";

package/{esm/branding/BrandingProvider.js → branding/BrandingProvider.mjs}

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { ThemeProvider, useTheme } from '@mui/material/styles';
-import { brandingDarkTheme, brandingLightTheme } from "./brandingTheme.js";
+import { brandingDarkTheme, brandingLightTheme } from "./brandingTheme.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
 export function BrandingProvider(props) {
   const {

package/branding/index.d.mts

@@ -0,0 +1,2 @@
+export * from "./brandingTheme.mjs";
+export * from "./BrandingProvider.mjs";

package/branding/index.mjs

@@ -0,0 +1,2 @@
+export * from "./brandingTheme.mjs";
+export * from "./BrandingProvider.mjs";

package/i18n/i18n.js

@@ -100,7 +100,9 @@ function useTranslate() {
     }
     const translation = getPath(wordings, key);
     if (!translation) {
-      warn(userLanguage, key, ignoreWarning);
+      if (process.env.NODE_ENV !== 'production') {
+        warn(userLanguage, key, ignoreWarning);
+      }
       const enTranslation = getPath(translations.en, key);
       return enTranslation ?? null;
     }

package/{esm/i18n/i18n.js → i18n/i18n.mjs}

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import deepmerge from '@mui/utils/deepmerge';
-import defaultTranslations from "../translations/index.js";
+import defaultTranslations from "../translations/index.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
 const TranslationsContext = /*#__PURE__*/React.createContext(defaultTranslations);
 function TranslationsProvider({
@@ -88,7 +88,9 @@ export function useTranslate() {
     }
     const translation = getPath(wordings, key);
     if (!translation) {
-      warn(userLanguage, key, ignoreWarning);
+      if (process.env.NODE_ENV !== 'production') {
+        warn(userLanguage, key, ignoreWarning);
+      }
       const enTranslation = getPath(translations.en, key);
       return enTranslation ?? null;
     }

package/i18n/index.d.mts

@@ -0,0 +1 @@
+export * from "./i18n.mjs";

package/i18n/index.mjs

@@ -0,0 +1 @@
+export * from "./i18n.mjs";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/docs",
-  "version": "9.0.0-alpha.0",
+  "version": "9.0.0-alpha.2",
   "author": "MUI Team",
   "description": "MUI Docs - Documentation building blocks.",
   "keywords": [
@@ -24,15 +24,17 @@
     "@babel/runtime": "^7.28.6",
     "clipboard-copy": "^4.0.1",
     "clsx": "^2.1.1",
+    "fg-loadcss": "^3.1.0",
     "nprogress": "^0.2.0",
     "prop-types": "^15.8.1",
-    "@mui/internal-markdown": "^3.0.1"
+    "@mui/internal-markdown": "^3.0.2"
   },
   "peerDependencies": {
     "@mui/base": "^5.0.0 || ^5.0.0-beta || ^7.0.0 || ^7.0.0-beta",
     "@mui/icons-material": "^5.0.0 || ^6.0.0 || ^7.0.0 || ^7.0.0-beta",
     "@mui/material": "^5.0.0 || ^6.0.0 || ^7.0.0 || ^7.0.0-beta",
     "@mui/system": "^5.0.0 || ^6.0.0 || ^7.0.0 || ^7.0.0-beta",
+    "@mui/utils": "^5.0.0 || ^6.0.0 || ^7.0.0 || ^7.0.0-beta",
     "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
     "chai": "^6.0.1",
     "csstype": "^3.1.3",
@@ -53,16 +55,271 @@
   "type": "commonjs",
   "exports": {
     "./package.json": "./package.json",
-    "./*": {
+    "./NProgressBar": {
+      "import": {
+        "types": "./NProgressBar/index.d.mts",
+        "default": "./NProgressBar/index.mjs"
+      },
+      "require": {
+        "types": "./NProgressBar/index.d.ts",
+        "default": "./NProgressBar/index.js"
+      },
+      "default": {
+        "types": "./NProgressBar/index.d.mts",
+        "default": "./NProgressBar/index.mjs"
+      }
+    },
+    "./SectionTitle": {
+      "import": {
+        "types": "./SectionTitle/index.d.mts",
+        "default": "./SectionTitle/index.mjs"
+      },
+      "require": {
+        "types": "./SectionTitle/index.d.ts",
+        "default": "./SectionTitle/index.js"
+      },
+      "default": {
+        "types": "./SectionTitle/index.d.mts",
+        "default": "./SectionTitle/index.mjs"
+      }
+    },
+    "./Ad": {
+      "import": {
+        "types": "./Ad/index.d.mts",
+        "default": "./Ad/index.mjs"
+      },
+      "require": {
+        "types": "./Ad/index.d.ts",
+        "default": "./Ad/index.js"
+      },
+      "default": {
+        "types": "./Ad/index.d.mts",
+        "default": "./Ad/index.mjs"
+      }
+    },
+    "./CodeCopy": {
+      "import": {
+        "types": "./CodeCopy/index.d.mts",
+        "default": "./CodeCopy/index.mjs"
+      },
+      "require": {
+        "types": "./CodeCopy/index.d.ts",
+        "default": "./CodeCopy/index.js"
+      },
+      "default": {
+        "types": "./CodeCopy/index.d.mts",
+        "default": "./CodeCopy/index.mjs"
+      }
+    },
+    "./ComponentLinkHeader": {
+      "import": {
+        "types": "./ComponentLinkHeader/index.d.mts",
+        "default": "./ComponentLinkHeader/index.mjs"
+      },
+      "require": {
+        "types": "./ComponentLinkHeader/index.d.ts",
+        "default": "./ComponentLinkHeader/index.js"
+      },
+      "default": {
+        "types": "./ComponentLinkHeader/index.d.mts",
+        "default": "./ComponentLinkHeader/index.mjs"
+      }
+    },
+    "./DocsProvider": {
+      "import": {
+        "types": "./DocsProvider/index.d.mts",
+        "default": "./DocsProvider/index.mjs"
+      },
+      "require": {
+        "types": "./DocsProvider/index.d.ts",
+        "default": "./DocsProvider/index.js"
+      },
+      "default": {
+        "types": "./DocsProvider/index.d.mts",
+        "default": "./DocsProvider/index.mjs"
+      }
+    },
+    "./HighlightedCode": {
+      "import": {
+        "types": "./HighlightedCode/index.d.mts",
+        "default": "./HighlightedCode/index.mjs"
+      },
+      "require": {
+        "types": "./HighlightedCode/index.d.ts",
+        "default": "./HighlightedCode/index.js"
+      },
+      "default": {
+        "types": "./HighlightedCode/index.d.mts",
+        "default": "./HighlightedCode/index.mjs"
+      }
+    },
+    "./HighlightedCodeWithTabs": {
+      "import": {
+        "types": "./HighlightedCodeWithTabs/index.d.mts",
+        "default": "./HighlightedCodeWithTabs/index.mjs"
+      },
+      "require": {
+        "types": "./HighlightedCodeWithTabs/index.d.ts",
+        "default": "./HighlightedCodeWithTabs/index.js"
+      },
+      "default": {
+        "types": "./HighlightedCodeWithTabs/index.d.mts",
+        "default": "./HighlightedCodeWithTabs/index.mjs"
+      }
+    },
+    "./IconImage": {
+      "import": {
+        "types": "./IconImage/index.d.mts",
+        "default": "./IconImage/index.mjs"
+      },
+      "require": {
+        "types": "./IconImage/index.d.ts",
+        "default": "./IconImage/index.js"
+      },
+      "default": {
+        "types": "./IconImage/index.d.mts",
+        "default": "./IconImage/index.mjs"
+      }
+    },
+    "./InfoCard": {
+      "import": {
+        "types": "./InfoCard/index.d.mts",
+        "default": "./InfoCard/index.mjs"
+      },
       "require": {
-        "types": "./*/index.d.ts",
-        "default": "./*/index.js"
+        "types": "./InfoCard/index.d.ts",
+        "default": "./InfoCard/index.js"
       },
       "default": {
-        "types": "./esm/*/index.d.ts",
-        "default": "./esm/*/index.js"
+        "types": "./InfoCard/index.d.mts",
+        "default": "./InfoCard/index.mjs"
       }
     },
-    "./esm": null
+    "./Link": {
+      "import": {
+        "types": "./Link/index.d.mts",
+        "default": "./Link/index.mjs"
+      },
+      "require": {
+        "types": "./Link/index.d.ts",
+        "default": "./Link/index.js"
+      },
+      "default": {
+        "types": "./Link/index.d.mts",
+        "default": "./Link/index.mjs"
+      }
+    },
+    "./MarkdownElement": {
+      "import": {
+        "types": "./MarkdownElement/index.d.mts",
+        "default": "./MarkdownElement/index.mjs"
+      },
+      "require": {
+        "types": "./MarkdownElement/index.d.ts",
+        "default": "./MarkdownElement/index.js"
+      },
+      "default": {
+        "types": "./MarkdownElement/index.d.mts",
+        "default": "./MarkdownElement/index.mjs"
+      }
+    },
+    "./SectionHeadline": {
+      "import": {
+        "types": "./SectionHeadline/index.d.mts",
+        "default": "./SectionHeadline/index.mjs"
+      },
+      "require": {
+        "types": "./SectionHeadline/index.d.ts",
+        "default": "./SectionHeadline/index.js"
+      },
+      "default": {
+        "types": "./SectionHeadline/index.d.mts",
+        "default": "./SectionHeadline/index.mjs"
+      }
+    },
+    "./ThemeContext": {
+      "import": {
+        "types": "./ThemeContext/index.d.mts",
+        "default": "./ThemeContext/index.mjs"
+      },
+      "require": {
+        "types": "./ThemeContext/index.d.ts",
+        "default": "./ThemeContext/index.js"
+      },
+      "default": {
+        "types": "./ThemeContext/index.d.mts",
+        "default": "./ThemeContext/index.mjs"
+      }
+    },
+    "./branding": {
+      "import": {
+        "types": "./branding/index.d.mts",
+        "default": "./branding/index.mjs"
+      },
+      "require": {
+        "types": "./branding/index.d.ts",
+        "default": "./branding/index.js"
+      },
+      "default": {
+        "types": "./branding/index.d.mts",
+        "default": "./branding/index.mjs"
+      }
+    },
+    "./i18n": {
+      "import": {
+        "types": "./i18n/index.d.mts",
+        "default": "./i18n/index.mjs"
+      },
+      "require": {
+        "types": "./i18n/index.d.ts",
+        "default": "./i18n/index.js"
+      },
+      "default": {
+        "types": "./i18n/index.d.mts",
+        "default": "./i18n/index.mjs"
+      }
+    },
+    "./nextFonts": {
+      "import": {
+        "types": "./nextFonts/index.d.mts",
+        "default": "./nextFonts/index.mjs"
+      },
+      "require": {
+        "types": "./nextFonts/index.d.ts",
+        "default": "./nextFonts/index.js"
+      },
+      "default": {
+        "types": "./nextFonts/index.d.mts",
+        "default": "./nextFonts/index.mjs"
+      }
+    },
+    "./translations": {
+      "import": {
+        "types": "./translations/index.d.mts",
+        "default": "./translations/index.mjs"
+      },
+      "require": {
+        "types": "./translations/index.d.ts",
+        "default": "./translations/index.js"
+      },
+      "default": {
+        "types": "./translations/index.d.mts",
+        "default": "./translations/index.mjs"
+      }
+    },
+    "./useLazyCSS": {
+      "import": {
+        "types": "./useLazyCSS/index.d.mts",
+        "default": "./useLazyCSS/index.mjs"
+      },
+      "require": {
+        "types": "./useLazyCSS/index.d.ts",
+        "default": "./useLazyCSS/index.js"
+      },
+      "default": {
+        "types": "./useLazyCSS/index.d.mts",
+        "default": "./useLazyCSS/index.mjs"
+      }
+    }
   }
 }

package/translations/index.d.mts

@@ -0,0 +1,3 @@
+import type { Translations } from "../i18n/index.mjs";
+declare const _default: Record<string, Translations>;
+export default _default;

package/useLazyCSS/index.d.mts

@@ -0,0 +1 @@
+export { default } from "./useLazyCSS.mjs";

package/useLazyCSS/index.d.ts

@@ -0,0 +1 @@
+export { default } from "./useLazyCSS.js";

package/useLazyCSS/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _useLazyCSS.default;
+  }
+});
+var _useLazyCSS = _interopRequireDefault(require("./useLazyCSS"));

package/useLazyCSS/index.mjs

@@ -0,0 +1 @@
+export { default } from "./useLazyCSS.mjs";

package/useLazyCSS/useLazyCSS.d.mts

@@ -0,0 +1,11 @@
+/**
+ * Enhanced lazy CSS loader that wraps CSS in a layer using fetch to avoid CORS issues
+ * @param {string} href - URL of the CSS file to load
+ * @param {string} before - CSS selector to insert before
+ * @param {object} options - Additional options
+ * @param {string} options.layer - Optional CSS layer name to wrap the CSS in
+ * @returns {() => void} cleanup function
+ */
+export default function useLazyCSS(href: string, before: string, options?: {
+  layer?: string;
+}): void;

package/useLazyCSS/useLazyCSS.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Enhanced lazy CSS loader that wraps CSS in a layer using fetch to avoid CORS issues
+ * @param {string} href - URL of the CSS file to load
+ * @param {string} before - CSS selector to insert before
+ * @param {object} options - Additional options
+ * @param {string} options.layer - Optional CSS layer name to wrap the CSS in
+ * @returns {() => void} cleanup function
+ */
+export default function useLazyCSS(href: string, before: string, options?: {
+  layer?: string;
+}): void;