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

package/ThemeContext/ThemeContext.js

@@ -0,0 +1,212 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ThemeOptionsContext = exports.DispatchContext = void 0;
+exports.ThemeProvider = ThemeProvider;
+exports.highDensity = void 0;
+exports.useChangeTheme = useChangeTheme;
+exports.useColorSchemeShim = useColorSchemeShim;
+var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styles = require("@mui/material/styles");
+var _utils = require("@mui/material/utils");
+var _useMediaQuery = _interopRequireDefault(require("@mui/material/useMediaQuery"));
+var _useLocalStorageState = _interopRequireDefault(require("@mui/utils/useLocalStorageState"));
+var _useLazyCSS = _interopRequireDefault(require("../useLazyCSS"));
+var _branding = require("../branding");
+var _jsxRuntime = require("react/jsx-runtime");
+const themeInitialOptions = {
+  dense: false,
+  direction: 'ltr',
+  paletteMode: 'light'
+};
+const highDensity = exports.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'
+      }
+    }
+  }
+};
+const DispatchContext = exports.DispatchContext = /*#__PURE__*/React.createContext(() => {
+  throw new Error('Forgot to wrap component in `ThemeProvider`');
+});
+if (process.env.NODE_ENV !== 'production') {
+  DispatchContext.displayName = 'ThemeDispatchContext';
+}
+const ThemeOptionsContext = exports.ThemeOptionsContext = /*#__PURE__*/React.createContext(themeInitialOptions);
+if (process.env.NODE_ENV !== 'production') {
+  ThemeOptionsContext.displayName = 'ThemeOptionsContext';
+}
+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;
+  (0, _useLazyCSS.default)('/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;
+  (0, _utils.unstable_useEnhancedEffect)(() => {
+    dispatch({
+      type: 'CHANGE',
+      payload: {
+        paletteMode: calculatedMode
+      }
+    });
+  }, [calculatedMode]);
+  (0, _utils.unstable_useEnhancedEffect)(() => {
+    document.body.setAttribute('dir', direction);
+  }, [direction]);
+  (0, _utils.unstable_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', (0, _branding.getMetaThemeColor)(paletteMode));
+    });
+  }, [paletteMode]);
+  React.useEffect(() => {
+    // Expose the theme as a global variable so people can play with it.
+    window.createTheme = _styles.createTheme;
+  }, []);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(ThemeOptionsContext.Provider, {
+    value: themeOptions,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(DispatchContext.Provider, {
+      value: dispatch,
+      children: children
+    })
+  });
+}
+process.env.NODE_ENV !== "production" ? ThemeProvider.propTypes = {
+  children: _propTypes.default.node
+} : void 0;
+
+/**
+ * @returns {(nextOptions: Partial<typeof themeInitialOptions>) => void}
+ */
+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()
+function useColorSchemeShim() {
+  const [mode, setMode] = (0, _useLocalStorageState.default)('mui-mode', 'system');
+  const prefersDarkMode = (0, _useMediaQuery.default)('(prefers-color-scheme: dark)', {
+    noSsr: true
+  });
+  const systemMode = prefersDarkMode ? 'dark' : 'light';
+  return {
+    mode,
+    systemMode,
+    setMode
+  };
+}

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/docs",
-  "version": "9.0.0-alpha.1",
+  "version": "9.0.0-alpha.2",
   "author": "MUI Team",
   "description": "MUI Docs - Documentation building blocks.",
   "keywords": [
@@ -24,6 +24,7 @@
     "@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.2"
@@ -33,6 +34,7 @@
     "@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",
@@ -165,6 +167,20 @@
         "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",
@@ -207,6 +223,34 @@
         "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",
@@ -262,6 +306,20 @@
         "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/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;

package/useLazyCSS/useLazyCSS.js

@@ -0,0 +1,76 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useLazyCSS;
+var React = _interopRequireWildcard(require("react"));
+var _fgLoadcss = require("fg-loadcss");
+/**
+ * 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
+ */
+function useLazyCSS(href, before, options = {}) {
+  React.useEffect(() => {
+    // If no layer is specified, add style and clean it on unmount
+    if (!options.layer) {
+      const link = (0, _fgLoadcss.loadCSS)(href, document.querySelector(before));
+      return () => {
+        link.parentElement?.removeChild(link);
+      };
+    }
+
+    // With layer option, we need to fetch the CSS content and wrap it
+    let styleElement = null;
+    const abortController = new AbortController();
+
+    // Fetch the CSS content directly to avoid CORS issues with cssRules
+    fetch(href, {
+      signal: abortController.signal
+    }).then(response => {
+      if (!response.ok) {
+        throw new Error(`Failed to fetch CSS: ${response.statusText}`);
+      }
+      return response.text();
+    }).then(cssText => {
+      // Create a style element with the CSS wrapped in the specified layer
+      styleElement = document.createElement('style');
+      styleElement.setAttribute('data-href', href);
+      styleElement.textContent = `@layer ${options.layer} {\n${cssText}\n}`;
+
+      // Insert at the specified position
+      const beforeElement = document.querySelector(before);
+      if (beforeElement?.parentNode) {
+        beforeElement.parentNode.insertBefore(styleElement, beforeElement);
+      } else {
+        document.head.appendChild(styleElement);
+      }
+    }).catch(error => {
+      // Ignore abort errors, log others
+      if (error !== 'useEffect' && error.name !== 'AbortError') {
+        if (process.env.NODE_ENV !== 'production') {
+          console.error('Error loading CSS with layer:', error);
+        }
+
+        // Fall back to regular link element if fetch fails
+        styleElement = (0, _fgLoadcss.loadCSS)(href, document.querySelector(before));
+      }
+    });
+
+    // Cleanup function
+    return () => {
+      // Cancel any pending fetch
+      abortController.abort('useEffect');
+
+      // Remove the style element if it was created
+      if (styleElement && styleElement.parentElement) {
+        styleElement.parentElement.removeChild(styleElement);
+      }
+    };
+  }, [href, before, options.layer]);
+}