@mui/docs 9.0.0-alpha.1 → 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.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,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.ts

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

package/SectionHeadline/index.js

@@ -0,0 +1,2 @@
+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.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>>;
+};