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

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

@@ -2,7 +2,7 @@ import * as React from 'react';
 import clsx from 'clsx';
 import { alpha, darken, styled } from '@mui/material/styles';
 import useForkRef from '@mui/utils/useForkRef';
-import { brandingDarkTheme as darkTheme, brandingLightTheme as lightTheme } from "../branding/index.js";
+import { brandingDarkTheme as darkTheme, brandingLightTheme as lightTheme } from "../branding/index.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
 const Root = styled('div')(({
   theme

package/MarkdownElement/index.d.mts

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

package/MarkdownElement/index.mjs

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

package/NProgressBar/index.d.mts

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

package/NProgressBar/index.mjs

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

package/SectionHeadline/SectionHeadline.d.mts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+export interface SectionHeadlineProps {
+  alwaysCenter?: boolean;
+  description?: React.ReactNode;
+  id?: string;
+  /**
+   * For using with dark background.
+   */
+  inverted?: boolean;
+  overline?: React.ReactNode;
+  title: string | React.ReactElement<React.HTMLAttributes<HTMLElement>>;
+}
+export default function SectionHeadline(props: SectionHeadlineProps): import("react/jsx-runtime").JSX.Element;

package/SectionHeadline/SectionHeadline.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+export interface SectionHeadlineProps {
+  alwaysCenter?: boolean;
+  description?: React.ReactNode;
+  id?: string;
+  /**
+   * For using with dark background.
+   */
+  inverted?: boolean;
+  overline?: React.ReactNode;
+  title: string | React.ReactElement<React.HTMLAttributes<HTMLElement>>;
+}
+export default function SectionHeadline(props: SectionHeadlineProps): import("react/jsx-runtime").JSX.Element;

package/SectionHeadline/SectionHeadline.js

@@ -0,0 +1,89 @@
+"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.default = SectionHeadline;
+var React = _interopRequireWildcard(require("react"));
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
+var _jsxRuntime = require("react/jsx-runtime");
+function SectionHeadline(props) {
+  const {
+    alwaysCenter = false,
+    description,
+    id,
+    inverted = false,
+    overline,
+    title
+  } = props;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+    sx: {
+      m: alwaysCenter ? 'auto' : null
+    },
+    children: [overline && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+      id: id,
+      component: "h2",
+      variant: "body2",
+      sx: {
+        fontWeight: 'bold',
+        color: 'primary.main',
+        mb: 1,
+        ...(alwaysCenter && {
+          textAlign: 'center'
+        })
+      },
+      children: overline
+    }), typeof title === 'string' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+      variant: "h2",
+      sx: theme => ({
+        maxWidth: 500,
+        ...(inverted ? {
+          color: '#fff'
+        } : {
+          color: 'primaryDark.900',
+          ...theme.applyDarkStyles({
+            color: 'grey.100'
+          })
+        }),
+        ...(alwaysCenter && {
+          textAlign: 'center',
+          maxWidth: '100%'
+        })
+      }),
+      children: title
+    }) : (/*#__PURE__*/React.cloneElement(title, {
+      style: {
+        maxWidth: 500,
+        ...(alwaysCenter && {
+          maxWidth: '100%',
+          textAlign: 'center'
+        }),
+        ...(inverted && {
+          color: '#fff'
+        })
+      }
+    })), description && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+      sx: theme => ({
+        mt: 1,
+        mb: 3,
+        maxWidth: 500,
+        ...(inverted ? {
+          color: 'grey.400'
+        } : {
+          color: 'grey.800',
+          ...theme.applyDarkStyles({
+            color: 'grey.500'
+          })
+        }),
+        ...(alwaysCenter && {
+          textAlign: 'center',
+          mx: 'auto'
+        })
+      }),
+      children: description
+    })]
+  });
+}

package/SectionHeadline/SectionHeadline.mjs

@@ -0,0 +1,81 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export default function SectionHeadline(props) {
+  const {
+    alwaysCenter = false,
+    description,
+    id,
+    inverted = false,
+    overline,
+    title
+  } = props;
+  return /*#__PURE__*/_jsxs(Box, {
+    sx: {
+      m: alwaysCenter ? 'auto' : null
+    },
+    children: [overline && /*#__PURE__*/_jsx(Typography, {
+      id: id,
+      component: "h2",
+      variant: "body2",
+      sx: {
+        fontWeight: 'bold',
+        color: 'primary.main',
+        mb: 1,
+        ...(alwaysCenter && {
+          textAlign: 'center'
+        })
+      },
+      children: overline
+    }), typeof title === 'string' ? /*#__PURE__*/_jsx(Typography, {
+      variant: "h2",
+      sx: theme => ({
+        maxWidth: 500,
+        ...(inverted ? {
+          color: '#fff'
+        } : {
+          color: 'primaryDark.900',
+          ...theme.applyDarkStyles({
+            color: 'grey.100'
+          })
+        }),
+        ...(alwaysCenter && {
+          textAlign: 'center',
+          maxWidth: '100%'
+        })
+      }),
+      children: title
+    }) : (/*#__PURE__*/React.cloneElement(title, {
+      style: {
+        maxWidth: 500,
+        ...(alwaysCenter && {
+          maxWidth: '100%',
+          textAlign: 'center'
+        }),
+        ...(inverted && {
+          color: '#fff'
+        })
+      }
+    })), description && /*#__PURE__*/_jsx(Typography, {
+      sx: theme => ({
+        mt: 1,
+        mb: 3,
+        maxWidth: 500,
+        ...(inverted ? {
+          color: 'grey.400'
+        } : {
+          color: 'grey.800',
+          ...theme.applyDarkStyles({
+            color: 'grey.500'
+          })
+        }),
+        ...(alwaysCenter && {
+          textAlign: 'center',
+          mx: 'auto'
+        })
+      }),
+      children: description
+    })]
+  });
+}

package/SectionHeadline/index.d.mts

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

package/SectionHeadline/index.d.ts

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

package/SectionHeadline/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {};
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _SectionHeadline.default;
+  }
+});
+var _SectionHeadline = _interopRequireWildcard(require("./SectionHeadline"));
+Object.keys(_SectionHeadline).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _SectionHeadline[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _SectionHeadline[key];
+    }
+  });
+});

package/SectionHeadline/index.mjs

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

package/SectionTitle/index.d.mts

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

package/SectionTitle/index.mjs

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

package/ThemeContext/ThemeContext.d.mts

@@ -0,0 +1,92 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+export declare const highDensity: {
+  components: {
+    MuiButton: {
+      defaultProps: {
+        size: string;
+      };
+    };
+    MuiFilledInput: {
+      defaultProps: {
+        margin: string;
+      };
+    };
+    MuiFormControl: {
+      defaultProps: {
+        margin: string;
+      };
+    };
+    MuiFormHelperText: {
+      defaultProps: {
+        margin: string;
+      };
+    };
+    MuiIconButton: {
+      defaultProps: {
+        size: string;
+      };
+    };
+    MuiInputBase: {
+      defaultProps: {
+        margin: string;
+      };
+    };
+    MuiInputLabel: {
+      defaultProps: {
+        margin: string;
+      };
+    };
+    MuiListItem: {
+      defaultProps: {
+        dense: boolean;
+      };
+    };
+    MuiOutlinedInput: {
+      defaultProps: {
+        margin: string;
+      };
+    };
+    MuiFab: {
+      defaultProps: {
+        size: string;
+      };
+    };
+    MuiTable: {
+      defaultProps: {
+        size: string;
+      };
+    };
+    MuiTextField: {
+      defaultProps: {
+        margin: string;
+      };
+    };
+    MuiToolbar: {
+      defaultProps: {
+        variant: string;
+      };
+    };
+  };
+};
+export declare const DispatchContext: React.Context<React.ActionDispatch<any>>;
+export declare const ThemeOptionsContext: React.Context<{
+  dense: boolean;
+  direction: "ltr" | "rtl";
+  paletteMode: "light" | "dark";
+}>;
+export declare function ThemeProvider(props: React.PropsWithChildren): import("react/jsx-runtime").JSX.Element;
+export declare namespace ThemeProvider {
+  var propTypes: {
+    children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+  };
+}
+/**
+ * @returns {(nextOptions: Partial<typeof themeInitialOptions>) => void}
+ */
+export declare function useChangeTheme(): (options: any) => void;
+export declare function useColorSchemeShim(): {
+  mode: string | null;
+  systemMode: string;
+  setMode: React.Dispatch<React.SetStateAction<string | null>>;
+};

package/ThemeContext/ThemeContext.d.ts

@@ -0,0 +1,92 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+export declare const highDensity: {
+  components: {
+    MuiButton: {
+      defaultProps: {
+        size: string;
+      };
+    };
+    MuiFilledInput: {
+      defaultProps: {
+        margin: string;
+      };
+    };
+    MuiFormControl: {
+      defaultProps: {
+        margin: string;
+      };
+    };
+    MuiFormHelperText: {
+      defaultProps: {
+        margin: string;
+      };
+    };
+    MuiIconButton: {
+      defaultProps: {
+        size: string;
+      };
+    };
+    MuiInputBase: {
+      defaultProps: {
+        margin: string;
+      };
+    };
+    MuiInputLabel: {
+      defaultProps: {
+        margin: string;
+      };
+    };
+    MuiListItem: {
+      defaultProps: {
+        dense: boolean;
+      };
+    };
+    MuiOutlinedInput: {
+      defaultProps: {
+        margin: string;
+      };
+    };
+    MuiFab: {
+      defaultProps: {
+        size: string;
+      };
+    };
+    MuiTable: {
+      defaultProps: {
+        size: string;
+      };
+    };
+    MuiTextField: {
+      defaultProps: {
+        margin: string;
+      };
+    };
+    MuiToolbar: {
+      defaultProps: {
+        variant: string;
+      };
+    };
+  };
+};
+export declare const DispatchContext: React.Context<React.ActionDispatch<any>>;
+export declare const ThemeOptionsContext: React.Context<{
+  dense: boolean;
+  direction: "ltr" | "rtl";
+  paletteMode: "light" | "dark";
+}>;
+export declare function ThemeProvider(props: React.PropsWithChildren): import("react/jsx-runtime").JSX.Element;
+export declare namespace ThemeProvider {
+  var propTypes: {
+    children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+  };
+}
+/**
+ * @returns {(nextOptions: Partial<typeof themeInitialOptions>) => void}
+ */
+export declare function useChangeTheme(): (options: any) => void;
+export declare function useColorSchemeShim(): {
+  mode: string | null;
+  systemMode: string;
+  setMode: React.Dispatch<React.SetStateAction<string | null>>;
+};

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
+  };
+}