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

package/MarkdownElement/index.js

@@ -1,16 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-var _MarkdownElement = require("./MarkdownElement");
-Object.keys(_MarkdownElement).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _MarkdownElement[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _MarkdownElement[key];
-    }
-  });
-});
+export * from "./MarkdownElement.js";

package/MuiPage/MuiPage.d.ts

@@ -0,0 +1,67 @@
+import * as React from 'react';
+export type MuiPageIcon = 'ReaderIcon' | 'BookIcon' | 'DescriptionIcon' | 'VisibilityIcon' | 'WebIcon' | React.ComponentType;
+export interface MuiPage {
+  pathname: string;
+  query?: object;
+  children?: MuiPage[];
+  disableDrawer?: boolean;
+  icon?: MuiPageIcon;
+  /**
+   * Indicates if the pages are regarding some legacy API.
+   */
+  legacy?: boolean;
+  /**
+   * Indicates if the pages are only available in some plan.
+   * @default 'community'
+   */
+  plan?: 'community' | 'pro' | 'premium';
+  /**
+   * In case the children have pathnames out of pathname value, use this field to scope other pathnames.
+   * Pathname can be partial, for example '/components/' will cover '/components/button/' and '/components/link/'.
+   * @deprecated Dead code, to remove.
+   */
+  scopePathnames?: string[];
+  /**
+   * Pages are considered to be ordered depth-first.
+   * If a page should be excluded from this order, set `order: false`.
+   * You want to set `inSideNav: false` if you don't want the page to appear in an ordered list e.g. for previous/next page navigation.
+   */
+  inSideNav?: boolean;
+  /**
+   * Props spread to the Link component.
+   */
+  linkProps?: Record<string, unknown>;
+  /**
+   * Subheader to display before navigation links.
+   */
+  subheader?: string;
+  /**
+   * Overrides the default page title.
+   */
+  title?: string;
+  /**
+   * Indicates if the feature has been recently released.
+   * @default false
+   */
+  newFeature?: boolean;
+  /**
+   * Indicates if the feature is planned for development.
+   * @default false
+   */
+  planned?: boolean;
+  /**
+   * Indicates if the component/hook is not stable yet.
+   */
+  unstable?: boolean;
+  /**
+   * Indicates the item is in beta release.
+   */
+  beta?: boolean;
+  /**
+   * Indicates if the pages are regarding some deprecated API.
+   */
+  deprecated?: boolean;
+}
+export interface OrderedMuiPage extends MuiPage {
+  ordered?: true;
+}

package/MuiPage/MuiPage.js

@@ -0,0 +1 @@
+export {};

package/MuiPage/index.d.ts

@@ -0,0 +1 @@
+export type { MuiPage, MuiPageIcon, OrderedMuiPage } from "./MuiPage.js";

package/MuiPage/index.js

@@ -0,0 +1 @@
+export {};

package/NextNProgressBar/NextNProgressBar.d.ts

@@ -0,0 +1 @@
+export declare function NextNProgressBar(): import("react/jsx-runtime").JSX.Element;

package/NextNProgressBar/NextNProgressBar.js

@@ -0,0 +1,44 @@
+var _NProgressBar;
+import * as React from 'react';
+import { debounce } from '@mui/material/utils';
+import { useRouter } from 'next/router';
+import NProgress from 'nprogress';
+import NProgressBar from "./NProgressBar.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const nProgressStart = debounce(() => {
+  NProgress.start();
+}, 200);
+function nProgressDone() {
+  nProgressStart.clear();
+  NProgress.done();
+}
+
+// eslint-disable-next-line import/prefer-default-export
+export function NextNProgressBar() {
+  const router = useRouter();
+  React.useEffect(() => {
+    const handleRouteChangeStart = (_url, {
+      shallow
+    }) => {
+      if (!shallow) {
+        nProgressStart();
+      }
+    };
+    const handleRouteChangeDone = (_url, {
+      shallow
+    }) => {
+      if (!shallow) {
+        nProgressDone();
+      }
+    };
+    router.events.on('routeChangeStart', handleRouteChangeStart);
+    router.events.on('routeChangeComplete', handleRouteChangeDone);
+    router.events.on('routeChangeError', handleRouteChangeDone);
+    return () => {
+      router.events.off('routeChangeStart', handleRouteChangeStart);
+      router.events.off('routeChangeComplete', handleRouteChangeDone);
+      router.events.off('routeChangeError', handleRouteChangeDone);
+    };
+  }, [router]);
+  return _NProgressBar || (_NProgressBar = /*#__PURE__*/_jsx(NProgressBar, {}));
+}

package/NextNProgressBar/index.d.ts

@@ -0,0 +1 @@
+export * from "./NextNProgressBar.js";

package/NextNProgressBar/index.js

@@ -0,0 +1 @@
+export * from "./NextNProgressBar.js";

package/PageContext/PageContext.d.ts

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import type { Theme } from '@mui/material/styles';
+import type { SxProps } from '@mui/system';
+import type { MuiPage } from "../MuiPage/index.js";
+import type { MuiProductId } from "../getProductInfoFromUrl/index.js";
+export type RootSvgProps<P = unknown> = Omit<React.SVGProps<SVGSVGElement>, 'ref'> & {
+  sx?: SxProps<Theme>;
+  ref?: React.Ref<SVGSVGElement>;
+} & P;
+export interface ProductVersion {
+  text: string;
+  current: boolean;
+  href?: undefined;
+}
+export interface ProductInfo {
+  metadata: string;
+  name: string;
+  logo: (props: RootSvgProps) => React.JSX.Element;
+  logoSvg: string;
+  wordmarkSvg: string;
+  versions: ProductVersion[];
+}
+export interface MuiPageContext {
+  activePage: MuiPage | null;
+  pages: MuiPage[];
+  productId: MuiProductId;
+  productIdentifier: ProductInfo;
+  activePageParents: MuiPage[];
+}
+declare const PageContext: React.Context<MuiPageContext>;
+export default PageContext;

package/PageContext/PageContext.js

@@ -0,0 +1,6 @@
+import * as React from 'react';
+const PageContext = /*#__PURE__*/React.createContext(undefined);
+if (process.env.NODE_ENV !== 'production') {
+  PageContext.displayName = 'PageContext';
+}
+export default PageContext;

package/PageContext/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./PageContext.js";
+export type { RootSvgProps, ProductVersion, ProductInfo, MuiPageContext } from "./PageContext.js";

package/PageContext/index.js

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

package/SectionHeadline/SectionHeadline.js

@@ -1,16 +1,8 @@
-"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) {
+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,
@@ -19,11 +11,11 @@ function SectionHeadline(props) {
     overline,
     title
   } = props;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+  return /*#__PURE__*/_jsxs(Box, {
     sx: {
       m: alwaysCenter ? 'auto' : null
     },
-    children: [overline && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+    children: [overline && /*#__PURE__*/_jsx(Typography, {
       id: id,
       component: "h2",
       variant: "body2",
@@ -36,7 +28,7 @@ function SectionHeadline(props) {
         })
       },
       children: overline
-    }), typeof title === 'string' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+    }), typeof title === 'string' ? /*#__PURE__*/_jsx(Typography, {
       variant: "h2",
       sx: theme => ({
         maxWidth: 500,
@@ -65,7 +57,7 @@ function SectionHeadline(props) {
           color: '#fff'
         })
       }
-    })), description && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+    })), description && /*#__PURE__*/_jsx(Typography, {
       sx: theme => ({
         mt: 1,
         mb: 3,

package/SectionHeadline/index.js

@@ -1,25 +1,2 @@
-"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];
-    }
-  });
-});
+export * from "./SectionHeadline.js";
+export { default } from "./SectionHeadline.js";

package/SectionTitle/SectionTitle.js

@@ -1,31 +1,25 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.SectionTitle = SectionTitle;
-var _jsxRuntime = require("react/jsx-runtime");
 var _span;
-function SectionTitle(props) {
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function SectionTitle(props) {
   const {
     title,
     hash,
     level: Level = 'h2'
   } = props;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Level, {
+  return /*#__PURE__*/_jsx(Level, {
     id: hash,
     style: {
       flexGrow: 1
     },
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("a", {
+    children: /*#__PURE__*/_jsxs("a", {
       "aria-labelledby": hash,
       className: "title-link-to-anchor",
       href: `#${hash}`,
       tabIndex: -1,
-      children: [title, _span || (_span = /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      children: [title, _span || (_span = /*#__PURE__*/_jsx("span", {
         className: "anchor-icon",
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", {
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("use", {
+        children: /*#__PURE__*/_jsx("svg", {
+          children: /*#__PURE__*/_jsx("use", {
             xlinkHref: "#anchor-link-icon"
           })
         })

package/SectionTitle/index.js

@@ -1,16 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-var _SectionTitle = require("./SectionTitle");
-Object.keys(_SectionTitle).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _SectionTitle[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _SectionTitle[key];
-    }
-  });
-});
+export * from "./SectionTitle.js";

package/StyledEngineProvider/StyledEngineProvider.d.ts

@@ -0,0 +1,9 @@
+declare function StyledEngineProvider(props: any): import("react/jsx-runtime").JSX.Element;
+declare namespace StyledEngineProvider {
+  namespace propTypes {
+    let cacheLtr: PropTypes.Validator<object>;
+    let children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+  }
+}
+export default StyledEngineProvider;
+import PropTypes from 'prop-types';

package/StyledEngineProvider/StyledEngineProvider.js

@@ -0,0 +1,44 @@
+var _GlobalStyles;
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { StyleSheetManager } from 'styled-components';
+import { CacheProvider } from '@emotion/react';
+import { createEmotionCache as createCache } from '@mui/material-nextjs/v15-pagesRouter';
+import { prefixer } from 'stylis';
+import rtlPlugin from '@mui/stylis-plugin-rtl';
+import GlobalStyles from '@mui/material/GlobalStyles';
+import { ThemeOptionsContext } from "../ThemeContext/index.js";
+import globalSelector from "../globalSelector/index.js";
+
+// Cache for the rtl version of the styles
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const cacheRtl = createCache({
+  key: 'rtl',
+  prepend: true,
+  enableCssLayer: true,
+  stylisPlugins: [prefixer, rtlPlugin, globalSelector]
+});
+export default function StyledEngineProvider(props) {
+  const {
+    children,
+    cacheLtr
+  } = props;
+  const {
+    direction
+  } = React.useContext(ThemeOptionsContext);
+  const rtl = direction === 'rtl';
+  const emotionCache = direction === 'rtl' ? cacheRtl : cacheLtr;
+  return /*#__PURE__*/_jsx(StyleSheetManager, {
+    stylisPlugins: rtl ? [rtlPlugin] : [],
+    children: /*#__PURE__*/_jsxs(CacheProvider, {
+      value: emotionCache,
+      children: [_GlobalStyles || (_GlobalStyles = /*#__PURE__*/_jsx(GlobalStyles, {
+        styles: "@layer theme, docsearch, mui, utilities;"
+      })), children]
+    })
+  });
+}
+process.env.NODE_ENV !== "production" ? StyledEngineProvider.propTypes = {
+  cacheLtr: PropTypes.object.isRequired,
+  children: PropTypes.node
+} : void 0;

package/StyledEngineProvider/index.d.ts

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

package/StyledEngineProvider/index.js

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

package/ThemeContext/ThemeContext.js

@@ -1,30 +1,18 @@
-"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");
+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'
 };
-const highDensity = exports.highDensity = {
+export const highDensity = {
   components: {
     MuiButton: {
       defaultProps: {
@@ -93,17 +81,17 @@ const highDensity = exports.highDensity = {
     }
   }
 };
-const DispatchContext = exports.DispatchContext = /*#__PURE__*/React.createContext(() => {
+export const 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);
+export const ThemeOptionsContext = /*#__PURE__*/React.createContext(themeInitialOptions);
 if (process.env.NODE_ENV !== 'production') {
   ThemeOptionsContext.displayName = 'ThemeOptionsContext';
 }
-function ThemeProvider(props) {
+export function ThemeProvider(props) {
   const {
     children
   } = props;
@@ -137,7 +125,7 @@ function ThemeProvider(props) {
     direction,
     paletteMode
   } = themeOptions;
-  (0, _useLazyCSS.default)('/static/styles/prism-okaidia.css', '#prismjs');
+  useLazyCSS('/static/styles/prism-okaidia.css', '#prismjs');
 
   // TODO replace with useColorScheme once all pages support css vars
   const {
@@ -145,7 +133,7 @@ function ThemeProvider(props) {
     systemMode
   } = useColorSchemeShim();
   const calculatedMode = mode === 'system' ? systemMode : mode;
-  (0, _utils.unstable_useEnhancedEffect)(() => {
+  useEnhancedEffect(() => {
     dispatch({
       type: 'CHANGE',
       payload: {
@@ -153,10 +141,10 @@ function ThemeProvider(props) {
       }
     });
   }, [calculatedMode]);
-  (0, _utils.unstable_useEnhancedEffect)(() => {
+  useEnhancedEffect(() => {
     document.body.setAttribute('dir', direction);
   }, [direction]);
-  (0, _utils.unstable_useEnhancedEffect)(() => {
+  useEnhancedEffect(() => {
     // To support light and dark mode images in the docs
     if (paletteMode === 'dark') {
       document.body.classList.remove('mode-light');
@@ -167,29 +155,29 @@ function ThemeProvider(props) {
     }
     const metas = document.querySelectorAll('meta[name="theme-color"]');
     metas.forEach(meta => {
-      meta.setAttribute('content', (0, _branding.getMetaThemeColor)(paletteMode));
+      meta.setAttribute('content', getMetaThemeColor(paletteMode));
     });
   }, [paletteMode]);
   React.useEffect(() => {
     // Expose the theme as a global variable so people can play with it.
-    window.createTheme = _styles.createTheme;
+    window.createTheme = createMdTheme;
   }, []);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(ThemeOptionsContext.Provider, {
+  return /*#__PURE__*/_jsx(ThemeOptionsContext.Provider, {
     value: themeOptions,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(DispatchContext.Provider, {
+    children: /*#__PURE__*/_jsx(DispatchContext.Provider, {
       value: dispatch,
       children: children
     })
   });
 }
 process.env.NODE_ENV !== "production" ? ThemeProvider.propTypes = {
-  children: _propTypes.default.node
+  children: PropTypes.node
 } : void 0;
 
 /**
  * @returns {(nextOptions: Partial<typeof themeInitialOptions>) => void}
  */
-function useChangeTheme() {
+export function useChangeTheme() {
   const dispatch = React.useContext(DispatchContext);
   return React.useCallback(options => dispatch({
     type: 'CHANGE',
@@ -198,9 +186,9 @@ function useChangeTheme() {
 }
 
 // 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)', {
+export function useColorSchemeShim() {
+  const [mode, setMode] = useLocalStorageState('mui-mode', 'system');
+  const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)', {
     noSsr: true
   });
   const systemMode = prefersDarkMode ? 'dark' : 'light';

package/ThemeContext/index.js

@@ -1,42 +1 @@
-"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");
+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;