@mui/internal-core-docs 0.0.1 → 9.0.0-canary.1

package/MarkdownElement/index.d.ts

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

package/MarkdownElement/index.js

@@ -0,0 +1 @@
+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/NProgressBar.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+export interface NProgressBarProps {
+  children?: React.ReactNode;
+}
+declare const NProgressBar: React.FunctionComponent<NProgressBarProps>;
+export default NProgressBar;

package/NextNProgressBar/NProgressBar.js

@@ -0,0 +1,91 @@
+import PropTypes from 'prop-types';
+import NProgress from 'nprogress';
+import { NoSsr } from '@mui/base/NoSsr';
+import exactProp from '@mui/utils/exactProp';
+import GlobalStyles from '@mui/material/GlobalStyles';
+import { keyframes } from '@mui/material/styles';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+NProgress.configure({
+  barSelector: '.nprogress-bar',
+  template: `
+    <div class="nprogress-bar">
+      <div></div>
+      <div></div>
+    </div>
+  `
+});
+const muiNProgressPulse = keyframes`
+  30% {
+    opacity: 0.6;
+  }
+
+  60% {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 0.6;
+  }
+`;
+
+/**
+ * Elegant and ready-to-use wrapper on top of https://github.com/rstacruz/nprogress/.
+ * The implementation is highly inspired by the YouTube one.
+ */
+function NProgressBar(props) {
+  return /*#__PURE__*/_jsxs(NoSsr, {
+    children: [props.children, /*#__PURE__*/_jsx(GlobalStyles, {
+      styles: theme => ({
+        '#nprogress': {
+          direction: 'ltr',
+          pointerEvents: 'none',
+          position: 'fixed',
+          top: 0,
+          left: 0,
+          right: 0,
+          height: 2,
+          zIndex: (theme.vars || theme).zIndex.tooltip,
+          backgroundColor: (theme.vars || theme).palette.primary[200],
+          ...theme.applyStyles('dark', {
+            backgroundColor: (theme.vars || theme).palette.primary[700]
+          }),
+          '& .nprogress-bar': {
+            position: 'fixed',
+            backgroundColor: (theme.vars || theme).palette.primary.main,
+            top: 0,
+            left: 0,
+            right: 0,
+            height: 2
+          },
+          '& .nprogress-bar > div': {
+            position: 'absolute',
+            top: 0,
+            height: 2,
+            boxShadow: `${(theme.vars || theme).palette.primary.main} 1px 0 6px 1px`,
+            borderRadius: '100%',
+            animation: `${muiNProgressPulse} 2s ease-out 0s infinite`
+          },
+          '& .nprogress-bar > div:first-of-type': {
+            opacity: 0.6,
+            width: 20,
+            right: 0,
+            clip: 'rect(-6px,22px,14px,10px)'
+          },
+          '& .nprogress-bar > div:last-of-type': {
+            opacity: 0.6,
+            width: 180,
+            right: -80,
+            clip: 'rect(-6px,90px,14px,-6px)'
+          }
+        }
+      })
+    })]
+  });
+}
+process.env.NODE_ENV !== "production" ? NProgressBar.propTypes = {
+  children: PropTypes.node
+} : void 0;
+if (process.env.NODE_ENV !== 'production') {
+  process.env.NODE_ENV !== "production" ? NProgressBar.propTypes = exactProp(NProgressBar.propTypes) : void 0;
+}
+export default NProgressBar;

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,42 @@
+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();
+}
+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,32 @@
+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?: string;
+}
+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;
+  productCategoryId: string;
+  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/README.md

@@ -0,0 +1,26 @@
+# @mui/internal-core-docs
+
+This package hosts the documentation building blocks.
+
+## Installation
+
+Install the package in your project directory with:
+
+<!-- #npm-tag-reference -->
+
+```bash
+npm install @mui/internal-core-docs@next
+```
+
+The docs has a peer dependency on the core components.
+If you are not already using Material UI in your project, you can add it with:
+
+<!-- #npm-tag-reference -->
+
+```bash
+npm install @mui/material@next
+```
+
+## Documentation
+
+We have no documentation for these components.

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.d.ts

@@ -0,0 +1,6 @@
+export interface SectionTitleProps<Hash extends string = string> {
+  title: string;
+  hash: Hash;
+  level?: 'h2' | 'h3' | 'h4';
+}
+export declare function SectionTitle(props: SectionTitleProps): import("react/jsx-runtime").JSX.Element;

package/SectionTitle/SectionTitle.js

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

package/SectionTitle/index.d.ts

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

package/SectionTitle/index.js

@@ -0,0 +1 @@
+export * from "./SectionTitle.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>>;
+};