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

package/ThemeContext/ThemeContext.js

@@ -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.js";
+import { getMetaThemeColor } from "../branding/index.js";
+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.ts

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

package/ThemeContext/index.js

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

package/branding/BrandingCssVarsProvider.d.ts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { PaletteColorOptions } from '@mui/material/styles';
+declare module '@mui/material/styles' {
+  interface PaletteOptions {
+    primaryDark?: PaletteColorOptions;
+  }
+}
+export declare function setDocsColors(primary: Record<string, string>, secondary: Record<string, string>): void;
+export declare function resetDocsColor(): void;
+export declare function setDocsSpacing(value: number): void;
+export declare function resetDocsSpacing(): void;
+export declare function BrandingCssThemeProvider({
+  children,
+  direction,
+  forceThemeRerender
+}: React.PropsWithChildren<{
+  direction?: 'ltr' | 'rtl';
+  forceThemeRerender?: boolean;
+}>): import("react/jsx-runtime").JSX.Element;
+export declare function BrandingCssVarsProvider(props: {
+  children: React.ReactNode;
+  direction?: 'ltr' | 'rtl';
+}): import("react/jsx-runtime").JSX.Element;

package/branding/BrandingCssVarsProvider.js

@@ -0,0 +1,170 @@
+var _NextNProgressBar, _CssBaseline, _SkipLink, _MarkdownLinks;
+import * as React from 'react';
+import { useRouter } from 'next/router';
+import deepmerge from '@mui/utils/deepmerge';
+import { ThemeProvider, createTheme } from '@mui/material/styles';
+import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/material/utils';
+import { colorChannel, getContrastRatio, lighten, darken } from '@mui/system/colorManipulator';
+import CssBaseline from '@mui/material/CssBaseline';
+import { getCookie, pathnameToLanguage } from "../helpers/helpers.js";
+import { NextNProgressBar } from "../NextNProgressBar/index.js";
+import { getDesignTokens, getThemedComponents } from "./brandingTheme.js";
+import { SkipLink, MarkdownLinks } from "../Link/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const {
+  palette: lightPalette,
+  typography,
+  ...designTokens
+} = getDesignTokens('light');
+const {
+  palette: darkPalette
+} = getDesignTokens('dark');
+const themeOptions = {
+  colorSchemes: {
+    light: {
+      palette: lightPalette
+    },
+    dark: {
+      palette: darkPalette
+    }
+  },
+  ...designTokens,
+  typography: deepmerge(typography, {
+    h1: {
+      ':where([data-mui-color-scheme="dark"]) &': {
+        color: 'var(--muidocs-palette-common-white)'
+      }
+    },
+    h2: {
+      ':where([data-mui-color-scheme="dark"]) &': {
+        color: 'var(--muidocs-palette-grey-100)'
+      }
+    },
+    h5: {
+      ':where([data-mui-color-scheme="dark"]) &': {
+        color: 'var(--muidocs-palette-primary-300)'
+      }
+    }
+  }),
+  ...getThemedComponents()
+};
+export function setDocsColors(primary, secondary) {
+  function injectPalette(prefix, palette, color, el) {
+    // simplified logic of `createPalette` to avoid `useTheme`.
+    const light = lighten(color, 0.2);
+    const dark = darken(color, 0.3);
+    const contrastText = getContrastRatio(color, '#fff') >= 3 ? '#fff' : 'rgba(0, 0, 0, 0.87)';
+    const elStyle = el.style;
+    elStyle.setProperty(`--${prefix}-palette-${palette}-main`, color);
+    elStyle.setProperty(`--${prefix}-palette-${palette}-mainChannel`, colorChannel(color));
+    elStyle.setProperty(`--${prefix}-palette-${palette}-light`, light);
+    elStyle.setProperty(`--${prefix}-palette-${palette}-lightChannel`, colorChannel(light));
+    elStyle.setProperty(`--${prefix}-palette-${palette}-dark`, dark);
+    elStyle.setProperty(`--${prefix}-palette-${palette}-darkChannel`, colorChannel(dark));
+    elStyle.setProperty(`--${prefix}-palette-${palette}-contrastText`, contrastText);
+    elStyle.setProperty(`--${prefix}-palette-${palette}-contrastTextChannel`, colorChannel(contrastText));
+  }
+  if (typeof document !== 'undefined') {
+    const htmlEl = document.documentElement;
+    injectPalette('muidocs', 'primary', primary.main, htmlEl);
+    injectPalette('muidocs', 'secondary', secondary.main, htmlEl);
+    ['50', '100', '200', '300', '400', '500', '600', '700', '800', '900'].forEach(key => {
+      htmlEl.style.setProperty(`--muidocs-palette-primary-${key}`, primary[key]);
+      htmlEl.style.setProperty(`--muidocs-palette-secondary-${key}`, secondary[key]);
+    });
+    injectPalette('mui', 'primary', primary.main, htmlEl);
+    injectPalette('mui', 'secondary', secondary.main, htmlEl);
+  }
+}
+export function resetDocsColor() {
+  if (typeof document !== 'undefined') {
+    const htmlElStyle = document.documentElement.style;
+    htmlElStyle.removeProperty('--muidocs-palette-primary-main');
+    htmlElStyle.removeProperty('--muidocs-palette-secondary-main');
+    htmlElStyle.removeProperty('--mui-palette-primary-main');
+    htmlElStyle.removeProperty('--mui-palette-secondary-main');
+    ['50', '100', '200', '300', '400', '500', '600', '700', '800', '900'].forEach(key => {
+      htmlElStyle.removeProperty(`--muidocs-palette-primary-${key}`);
+      htmlElStyle.removeProperty(`--muidocs-palette-secondary-${key}`);
+    });
+  }
+}
+export function setDocsSpacing(value) {
+  if (typeof document !== 'undefined') {
+    const htmlElStyle = document.documentElement.style;
+    htmlElStyle.setProperty('--muidocs-spacing', `${value}px`);
+    htmlElStyle.setProperty('--mui-spacing', `${value}px`);
+  }
+}
+export function resetDocsSpacing() {
+  if (typeof document !== 'undefined') {
+    const htmlElStyle = document.documentElement.style;
+    htmlElStyle.removeProperty('--muidocs-spacing');
+    htmlElStyle.removeProperty('--mui-spacing');
+  }
+}
+const themeCache = new Map();
+function getTheme(direction) {
+  let cachedTheme = themeCache.get(direction);
+  if (!cachedTheme) {
+    cachedTheme = createTheme({
+      cssVariables: {
+        cssVarPrefix: 'muidocs',
+        colorSchemeSelector: 'data-mui-color-scheme'
+      },
+      direction,
+      ...themeOptions
+    });
+    themeCache.set(direction, cachedTheme);
+  }
+  return cachedTheme;
+}
+export function BrandingCssThemeProvider({
+  children,
+  direction = 'ltr',
+  forceThemeRerender = false
+}) {
+  const theme = React.useMemo(() => getTheme(direction), [direction]);
+  return /*#__PURE__*/_jsx(ThemeProvider, {
+    theme: theme,
+    disableTransitionOnChange: true
+    // TODO: remove `forceThemeRerender` once custom theme on some demos rely on CSS variables instead of `theme.palette.mode`
+    ,
+    forceThemeRerender: forceThemeRerender,
+    children: children
+  });
+}
+export function BrandingCssVarsProvider(props) {
+  const {
+    direction = 'ltr',
+    children
+  } = props;
+  const {
+    asPath
+  } = useRouter();
+  const {
+    canonicalAs
+  } = pathnameToLanguage(asPath);
+  useEnhancedEffect(() => {
+    const nextPaletteColors = JSON.parse(getCookie('paletteColors') || 'null');
+    if (nextPaletteColors) {
+      setDocsColors(nextPaletteColors.primary, nextPaletteColors.secondary);
+    }
+  }, []);
+  useEnhancedEffect(() => {
+    // This is required to ensure that the layer order is declared first in the head
+    // because when the direction is RTL on the client, emotion reinserts the RTL styles back to the top of the insertion point.
+    if (direction === 'rtl') {
+      const head = document.querySelector('head');
+      if (head) {
+        const style = document.createElement('style');
+        style.textContent = '@layer theme, docsearch, mui, mui.global, mui.default, mui.theme, mui.custom, mui.sx, utilities;';
+        head.prepend(style);
+      }
+    }
+  }, [direction]);
+  return /*#__PURE__*/_jsxs(BrandingCssThemeProvider, {
+    forceThemeRerender: canonicalAs.startsWith('/x/') || canonicalAs.startsWith('/toolpad/'),
+    children: [_NextNProgressBar || (_NextNProgressBar = /*#__PURE__*/_jsx(NextNProgressBar, {})), _CssBaseline || (_CssBaseline = /*#__PURE__*/_jsx(CssBaseline, {})), _SkipLink || (_SkipLink = /*#__PURE__*/_jsx(SkipLink, {})), _MarkdownLinks || (_MarkdownLinks = /*#__PURE__*/_jsx(MarkdownLinks, {})), children]
+  });
+}

package/branding/BrandingProvider.js

@@ -1,23 +1,16 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.BrandingProvider = BrandingProvider;
-var React = _interopRequireWildcard(require("react"));
-var _styles = require("@mui/material/styles");
-var _brandingTheme = require("./brandingTheme");
-var _jsxRuntime = require("react/jsx-runtime");
-function BrandingProvider(props) {
+import * as React from 'react';
+import { ThemeProvider, useTheme } from '@mui/material/styles';
+import { brandingDarkTheme, brandingLightTheme } from "./brandingTheme.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export function BrandingProvider(props) {
   const {
     children,
     mode: modeProp
   } = props;
-  const upperTheme = (0, _styles.useTheme)();
+  const upperTheme = useTheme();
   const mode = modeProp || upperTheme.palette.mode;
-  const theme = mode === 'dark' ? _brandingTheme.brandingDarkTheme : _brandingTheme.brandingLightTheme;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.ThemeProvider, {
+  const theme = mode === 'dark' ? brandingDarkTheme : brandingLightTheme;
+  return /*#__PURE__*/_jsx(ThemeProvider, {
     theme: modeProp ? () => theme : theme,
     children: children
   });