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

package/HighlightedCode/HighlightedCode.mjs

@@ -1,67 +0,0 @@
-import * as React from 'react';
-import prism from '@mui/internal-markdown/prism';
-import { NoSsr } from '@mui/base/NoSsr';
-import { styled } from '@mui/material/styles';
-import { useCodeCopy, CodeCopyButton } from "../CodeCopy/index.mjs";
-import { MarkdownElement } from "../MarkdownElement/index.mjs";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const Pre = styled('pre')(({
-  theme
-}) => ({
-  margin: 0,
-  color: 'hsl(60deg 30% 96.08%)',
-  // fallback color until Prism's theme is loaded
-  WebkitOverflowScrolling: 'touch',
-  // iOS momentum scrolling.
-  '& code': {
-    // Avoid layout jump after hydration (style injected by Prism)
-    ...theme.typography.caption,
-    fontFamily: theme.typography.fontFamilyCode,
-    fontWeight: 400,
-    WebkitFontSmoothing: 'subpixel-antialiased'
-    // Reset for Safari
-    // https://github.com/necolas/normalize.css/blob/master/normalize.css#L102
-  }
-}));
-export function HighlightedCode(props) {
-  const {
-    code,
-    copyButtonHidden = false,
-    copyButtonProps,
-    language,
-    plainStyle,
-    parentComponent: Component = plainStyle ? React.Fragment : MarkdownElement,
-    preComponent: PreComponent = plainStyle ? Pre : 'pre',
-    ...other
-  } = props;
-  const renderedCode = React.useMemo(() => {
-    return prism(code.trim(), language);
-  }, [code, language]);
-  const handlers = useCodeCopy();
-  const componentProps = !plainStyle ? other : undefined;
-  return /*#__PURE__*/_jsx(Component, {
-    ...componentProps,
-    children: /*#__PURE__*/_jsxs("div", {
-      className: "MuiCode-root",
-      ...handlers,
-      style: {
-        height: '100%'
-      },
-      children: [copyButtonHidden ? null : /*#__PURE__*/_jsx(NoSsr, {
-        children: /*#__PURE__*/_jsx(CodeCopyButton, {
-          code: code,
-          ...copyButtonProps
-        })
-      }), /*#__PURE__*/_jsx(PreComponent, {
-        children: /*#__PURE__*/_jsx("code", {
-          className: `language-${language}`
-          // eslint-disable-next-line react/no-danger
-          ,
-          dangerouslySetInnerHTML: {
-            __html: renderedCode
-          }
-        })
-      })]
-    })
-  });
-}

package/HighlightedCode/index.d.mts

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

package/HighlightedCode/index.mjs

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

package/HighlightedCodeWithTabs/HighlightedCodeWithTabs.d.mts

@@ -1,28 +0,0 @@
-export declare const CodeTabList: import("@emotion/styled").StyledComponent<import("@mui/base/TabsList").TabsListOwnProps & Omit<any, keyof import("@mui/base/TabsList").TabsListOwnProps> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
-  ownerState: {
-    mounted: boolean;
-    contained?: boolean;
-  };
-}, {}, {}>;
-export declare const CodeTabPanel: import("@emotion/styled").StyledComponent<import("@mui/base/TabPanel").TabPanelOwnProps & Omit<any, keyof import("@mui/base/TabPanel").TabPanelOwnProps> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
-  ownerState: {
-    mounted: boolean;
-    contained?: boolean;
-  };
-}, {}, {}>;
-export declare const CodeTab: import("@emotion/styled").StyledComponent<import("@mui/base/Tab").TabOwnProps & Omit<any, keyof import("@mui/base/Tab").TabOwnProps> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
-  ownerState: {
-    mounted: boolean;
-    contained?: boolean;
-  };
-}, {}, {}>;
-type TabsConfig = {
-  code: string | ((tab: string) => string);
-  language: string;
-  tab: string;
-};
-export declare function HighlightedCodeWithTabs(props: {
-  tabs: Array<TabsConfig>;
-  storageKey?: string;
-} & Record<string, any>): import("react/jsx-runtime").JSX.Element;
-export {};

package/HighlightedCodeWithTabs/HighlightedCodeWithTabs.mjs

@@ -1,362 +0,0 @@
-import * as React from 'react';
-import { styled, alpha } from '@mui/material/styles';
-import { Tabs } from '@mui/base/Tabs';
-import { TabsList as TabsListBase } from '@mui/base/TabsList';
-import { TabPanel as TabPanelBase } from '@mui/base/TabPanel';
-import { Tab as TabBase } from '@mui/base/Tab';
-import useLocalStorageState from '@mui/utils/useLocalStorageState';
-import { HighlightedCode } from "../HighlightedCode/index.mjs";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const PACKAGE_MANAGER_ORDER = new Map(['npm', 'pnpm', 'yarn'].map((manager, index) => [manager, index]));
-export const CodeTabList = styled(TabsListBase)(({
-  theme
-}) => ({
-  display: 'flex',
-  gap: theme.spacing(0.5),
-  borderLeft: '1px solid',
-  borderRight: '1px solid',
-  overflowX: 'auto',
-  ...theme.applyDarkStyles({
-    backgroundColor: alpha(theme.palette.primaryDark[800], 0.2)
-  }),
-  variants: [{
-    props: ({
-      ownerState
-    }) => ownerState?.contained,
-    style: {
-      padding: theme.spacing(1.5, 1)
-    }
-  }, {
-    props: ({
-      ownerState
-    }) => !ownerState?.contained,
-    style: {
-      padding: theme.spacing(1)
-    }
-  }, {
-    props: ({
-      ownerState
-    }) => ownerState?.contained,
-    style: {
-      borderTop: 'none'
-    }
-  }, {
-    props: ({
-      ownerState
-    }) => !ownerState?.contained,
-    style: {
-      borderTop: '1px solid'
-    }
-  }, {
-    props: ({
-      ownerState
-    }) => ownerState?.contained,
-    style: {
-      borderBottom: 'none'
-    }
-  }, {
-    props: ({
-      ownerState
-    }) => !ownerState?.contained,
-    style: {
-      borderBottom: '1px solid'
-    }
-  }, {
-    props: ({
-      ownerState
-    }) => ownerState?.contained,
-    style: {
-      borderTopLeftRadius: 0
-    }
-  }, {
-    props: ({
-      ownerState
-    }) => !ownerState?.contained,
-    style: {
-      borderTopLeftRadius: (theme.vars || theme).shape.borderRadius
-    }
-  }, {
-    props: ({
-      ownerState
-    }) => ownerState?.contained,
-    style: {
-      borderTopRightRadius: 0
-    }
-  }, {
-    props: ({
-      ownerState
-    }) => !ownerState?.contained,
-    style: {
-      borderTopRightRadius: (theme.vars || theme).shape.borderRadius
-    }
-  }, {
-    props: ({
-      ownerState
-    }) => ownerState?.contained,
-    style: {
-      borderColor: (theme.vars || theme).palette.divider
-    }
-  }, {
-    props: ({
-      ownerState
-    }) => !ownerState?.contained,
-    style: {
-      borderColor: (theme.vars || theme).palette.primaryDark[700]
-    }
-  }, {
-    props: ({
-      ownerState
-    }) => ownerState?.contained,
-    style: {
-      backgroundColor: alpha(theme.palette.grey[50], 0.2)
-    }
-  }, {
-    props: ({
-      ownerState
-    }) => !ownerState?.contained,
-    style: {
-      backgroundColor: (theme.vars || theme).palette.primaryDark[900]
-    }
-  }]
-}));
-export const CodeTabPanel = styled(TabPanelBase)({
-  '& pre': {
-    borderTopLeftRadius: 0,
-    borderTopRightRadius: 0,
-    '& code': {}
-  },
-  variants: [{
-    props: ({
-      ownerState
-    }) => ownerState?.contained,
-    style: {
-      marginTop: -1
-    }
-  }, {
-    props: ({
-      ownerState
-    }) => !ownerState?.contained,
-    style: {
-      marginTop: 0
-    }
-  }, {
-    props: ({
-      ownerState
-    }) => ownerState?.contained,
-    style: {
-      '& pre': {
-        marginTop: 0
-      }
-    }
-  }, {
-    props: ({
-      ownerState
-    }) => !ownerState?.contained,
-    style: {
-      '& pre': {
-        marginTop: -1
-      }
-    }
-  }, {
-    props: ({
-      ownerState
-    }) => ownerState.mounted,
-    style: {
-      '& pre': {
-        '& code': {
-          opacity: 1
-        }
-      }
-    }
-  }, {
-    props: ({
-      ownerState
-    }) => !ownerState.mounted,
-    style: {
-      '& pre': {
-        '& code': {
-          opacity: 0
-        }
-      }
-    }
-  }]
-});
-export const CodeTab = styled(TabBase)(({
-  theme
-}) => ({
-  variants: [{
-    props: ({
-      ownerState
-    }) => ownerState?.contained,
-    style: {
-      border: '1px solid transparent',
-      fontSize: theme.typography.pxToRem(13)
-    }
-  }, {
-    props: ({
-      ownerState
-    }) => !ownerState?.contained,
-    style: {
-      border: 'none',
-      fontSize: theme.typography.pxToRem(12)
-    }
-  }, {
-    props: ({
-      ownerState
-    }) => ownerState?.contained,
-    style: {
-      color: (theme.vars || theme).palette.text.tertiary
-    }
-  }, {
-    props: ({
-      ownerState
-    }) => !ownerState?.contained,
-    style: {
-      color: (theme.vars || theme).palette.grey[500]
-    }
-  }, {
-    props: ({
-      ownerState
-    }) => ownerState?.contained,
-    style: {
-      fontFamily: theme.typography.fontFamily
-    }
-  }, {
-    props: ({
-      ownerState
-    }) => !ownerState?.contained,
-    style: {
-      fontFamily: theme.typography.fontFamilyCode
-    }
-  }, {
-    props: ({
-      ownerState
-    }) => ownerState?.contained,
-    style: {
-      fontWeight: theme.typography.fontWeightMedium
-    }
-  }, {
-    props: ({
-      ownerState
-    }) => !ownerState?.contained,
-    style: {
-      fontWeight: theme.typography.fontWeightBold
-    }
-  }, {
-    props: ({
-      ownerState
-    }) => ownerState?.contained,
-    style: {
-      transition: 'background, color, 100ms ease'
-    }
-  }, {
-    props: ({
-      ownerState
-    }) => !ownerState?.contained,
-    style: {
-      transition: 'unset'
-    }
-  }, {
-    props: ({
-      ownerState
-    }) => !ownerState?.contained,
-    style: {
-      '&:hover': {
-        backgroundColor: alpha(theme.palette.primaryDark[500], 0.5),
-        color: (theme.vars || theme).palette.grey[400]
-      }
-    }
-  }, {
-    props: ({
-      ownerState
-    }) => !ownerState?.contained && ownerState.mounted,
-    style: {
-      '&.base--selected': {
-        color: '#FFF',
-        '&::after': {
-          content: "''",
-          position: 'absolute',
-          left: 0,
-          bottom: '-8px',
-          height: 2,
-          width: '100%',
-          bgcolor: (theme.vars || theme).palette.primary.light
-        }
-      }
-    }
-  }],
-  ...theme.unstable_sx({
-    flex: '0 0 auto',
-    height: 26,
-    p: '2px 8px',
-    bgcolor: 'transparent',
-    lineHeight: 1.2,
-    outline: 'none',
-    minWidth: 45,
-    cursor: 'pointer',
-    borderRadius: 99,
-    position: 'relative',
-    '&:hover': {
-      backgroundColor: (theme.vars || theme).palette.divider
-    },
-    '&:focus-visible': {
-      outline: '3px solid',
-      outlineOffset: '1px',
-      outlineColor: (theme.vars || theme).palette.primary.light
-    }
-  })
-}));
-export function HighlightedCodeWithTabs(props) {
-  const {
-    tabs,
-    storageKey
-  } = props;
-  const availableTabs = React.useMemo(() => {
-    const result = tabs.map(({
-      tab
-    }) => tab);
-    if (storageKey === 'package-manager') {
-      result.sort((a, b) => (PACKAGE_MANAGER_ORDER.get(a) ?? Infinity) - (PACKAGE_MANAGER_ORDER.get(b) ?? Infinity));
-    }
-    return result;
-  }, [storageKey, tabs]);
-  const [activeTab, setActiveTab] = useLocalStorageState(storageKey ?? null, availableTabs[0]);
-  // During hydration, activeTab is null, default to first value.
-  const defaultizedActiveTab = activeTab ?? availableTabs[0];
-  const [mounted, setMounted] = React.useState(false);
-  React.useEffect(() => {
-    setMounted(true);
-  }, []);
-  const handleChange = (event, newValue) => {
-    setActiveTab(newValue);
-  };
-  const ownerState = {
-    mounted
-  };
-  return /*#__PURE__*/_jsxs(Tabs, {
-    selectionFollowsFocus: true,
-    value: defaultizedActiveTab,
-    onChange: handleChange,
-    children: [/*#__PURE__*/_jsx(CodeTabList, {
-      ownerState: ownerState,
-      children: tabs.map(({
-        tab
-      }) => /*#__PURE__*/_jsx(CodeTab, {
-        ownerState: ownerState,
-        value: tab,
-        children: tab
-      }, tab))
-    }), tabs.map(({
-      tab,
-      language,
-      code
-    }) => /*#__PURE__*/_jsx(CodeTabPanel, {
-      ownerState: ownerState,
-      value: tab,
-      children: /*#__PURE__*/_jsx(HighlightedCode, {
-        language: language || 'bash',
-        code: typeof code === 'function' ? code(tab) : code
-      })
-    }, tab))]
-  });
-}

package/HighlightedCodeWithTabs/index.d.mts

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

package/HighlightedCodeWithTabs/index.mjs

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

package/InfoCard/InfoCard.d.mts

@@ -1,22 +0,0 @@
-import * as React from 'react';
-import { TypographyProps } from '@mui/material/Typography';
-import { LinkProps } from "../Link/index.mjs";
-interface GlowingIconContainerProps {
-  icon: React.ReactNode;
-}
-export declare function GlowingIconContainer({
-  icon
-}: GlowingIconContainerProps): import("react/jsx-runtime").JSX.Element;
-interface InfoCardProps {
-  classNameDescription?: string;
-  classNameTitle?: string;
-  description?: string;
-  icon?: React.ReactNode;
-  link?: string;
-  prefetch?: LinkProps['prefetch'];
-  svg?: React.ReactNode;
-  title: string;
-  titleProps?: TypographyProps;
-}
-export declare function InfoCard(props: InfoCardProps): import("react/jsx-runtime").JSX.Element;
-export {};

package/InfoCard/InfoCard.mjs

@@ -1,87 +0,0 @@
-import * as React from 'react';
-import { alpha } from '@mui/material/styles';
-import Box from '@mui/material/Box';
-import Paper from '@mui/material/Paper';
-import Typography from '@mui/material/Typography';
-import { Link } from "../Link/index.mjs";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export function GlowingIconContainer({
-  icon
-}) {
-  return /*#__PURE__*/_jsx(Box, {
-    sx: theme => ({
-      width: 36,
-      height: 36,
-      display: 'flex',
-      justifyContent: 'center',
-      alignItems: 'center',
-      flexShrink: 0,
-      borderRadius: 1,
-      border: '1px solid',
-      borderColor: 'primary.200',
-      bgcolor: 'primary.50',
-      boxShadow: `0px 0 0 2px ${alpha(theme.palette.primary[500], 0.1)}, 0px 2px 12px 0px rgba(234, 237, 241, 0.3) inset`,
-      '& .MuiSvgIcon-root': {
-        fontSize: theme.typography.pxToRem(18)
-      },
-      ...theme.applyDarkStyles({
-        borderColor: alpha(theme.palette.primary[400], 0.25),
-        bgcolor: alpha(theme.palette.primary[900], 0.2),
-        boxShadow: `0 0 0 2px ${alpha(theme.palette.primary[600], 0.1)}, 0px 2px 12px 0px rgba(0, 0, 0, 0.25) inset`
-      })
-    }),
-    children: icon
-  });
-}
-export function InfoCard(props) {
-  const {
-    classNameDescription,
-    classNameTitle,
-    description,
-    icon,
-    link,
-    svg,
-    title,
-    titleProps,
-    ...other
-  } = props;
-  return /*#__PURE__*/_jsxs(Paper, {
-    variant: "outlined",
-    component: link ? Link : 'div',
-    href: link,
-    ...(link ? {
-      noLinkStyle: true,
-      // Fix overloading with prefetch={false}, only prefetch on hover.
-      prefetch: false
-    } : {}),
-    sx: theme => ({
-      p: 2.5,
-      height: '100%',
-      background: `${(theme.vars || theme).palette.gradients.linearSubtle}`,
-      ...theme.applyDarkStyles({
-        bgcolor: alpha(theme.palette.primaryDark[800], 0.25),
-        background: `${(theme.vars || theme).palette.gradients.linearSubtle}`,
-        borderColor: 'primaryDark.700'
-      })
-    }),
-    ...other,
-    children: [svg && svg, icon && /*#__PURE__*/_jsx(GlowingIconContainer, {
-      icon: icon
-    }), /*#__PURE__*/_jsx(Typography, {
-      fontWeight: "semiBold",
-      component: "h3",
-      color: "text.primary",
-      variant: "body2",
-      mt: icon ? 2 : 0,
-      mb: description ? 0.5 : 0,
-      className: classNameTitle,
-      ...titleProps,
-      children: title
-    }), /*#__PURE__*/_jsx(Typography, {
-      variant: "body2",
-      color: "text.secondary",
-      className: classNameDescription,
-      children: description
-    })]
-  });
-}

package/InfoCard/index.d.mts

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

package/InfoCard/index.mjs

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

package/Link/Link.d.mts

@@ -1,25 +0,0 @@
-import * as React from 'react';
-import { LinkProps as NextLinkProps } from 'next/link';
-import { LinkProps as MuiLinkProps } from '@mui/material/Link';
-/**
- * File to keep in sync with:
- *
- * - /packages/mui-docs/src/Link/Link.tsx
- * - /examples/material-ui-nextjs-pages-router/src/Link.js
- * - /examples/material-ui-nextjs-pages-router-ts/src/Link.tsx
- * - /examples/material-ui-nextjs-ts-v4-v5-migration/src/Link.tsx
- */
-interface NextLinkComposedProps extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href'>, Omit<NextLinkProps, 'href' | 'as' | 'passHref' | 'onMouseEnter' | 'onClick' | 'onTouchStart'> {
-  to: NextLinkProps['href'];
-  linkAs?: NextLinkProps['as'];
-}
-export declare const NextLinkComposed: React.ForwardRefExoticComponent<NextLinkComposedProps & React.RefAttributes<HTMLAnchorElement>>;
-export type LinkProps = {
-  activeClassName?: string;
-  as?: NextLinkProps['as'];
-  href: NextLinkProps['href'];
-  linkAs?: NextLinkProps['as'];
-  noLinkStyle?: boolean;
-} & Omit<NextLinkComposedProps, 'to' | 'linkAs' | 'href'> & Omit<MuiLinkProps, 'href'>;
-export declare const Link: React.ForwardRefExoticComponent<Omit<LinkProps, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
-export {};

package/Link/Link.mjs

@@ -1,75 +0,0 @@
-import * as React from 'react';
-import clsx from 'clsx';
-import { useRouter } from 'next/router';
-import NextLink from 'next/link';
-import MuiLink from '@mui/material/Link';
-import { useUserLanguage } from "../i18n/index.mjs";
-import { useDocsConfig } from "../DocsProvider/index.mjs";
-
-/**
- * File to keep in sync with:
- *
- * - /packages/mui-docs/src/Link/Link.tsx
- * - /examples/material-ui-nextjs-pages-router/src/Link.js
- * - /examples/material-ui-nextjs-pages-router-ts/src/Link.tsx
- * - /examples/material-ui-nextjs-ts-v4-v5-migration/src/Link.tsx
- */
-import { jsx as _jsx } from "react/jsx-runtime";
-export const NextLinkComposed = /*#__PURE__*/React.forwardRef(function NextLinkComposed(props, ref) {
-  const {
-    to,
-    linkAs,
-    ...other
-  } = props;
-  return /*#__PURE__*/_jsx(NextLink, {
-    href: to,
-    as: linkAs,
-    "data-no-markdown-link": "true",
-    ref: ref,
-    ...other
-  });
-});
-// A styled version of the Next.js Link component:
-// https://nextjs.org/docs/pages/api-reference/components/link
-export const Link = /*#__PURE__*/React.forwardRef(function Link(props, ref) {
-  const {
-    activeClassName = 'active',
-    as,
-    className: classNameProps,
-    href,
-    linkAs: linkAsProp,
-    noLinkStyle,
-    ...other
-  } = props;
-  const router = useRouter();
-  const pathname = typeof href === 'string' ? href : href?.pathname;
-  const routerPathname = router.pathname.replace('/[docsTab]', '');
-  const className = clsx(classNameProps, routerPathname === pathname && activeClassName);
-  const userLanguage = useUserLanguage();
-  const {
-    LANGUAGES_IGNORE_PAGES
-  } = useDocsConfig();
-  let linkAs = linkAsProp || as || href;
-  if (userLanguage !== 'en' && pathname && pathname.startsWith('/') && !LANGUAGES_IGNORE_PAGES(pathname) && !pathname.startsWith(`/${userLanguage}/`)) {
-    linkAs = `/${userLanguage}${linkAs}`;
-  }
-  const nextjsProps = {
-    to: href,
-    linkAs
-  };
-  if (noLinkStyle) {
-    return /*#__PURE__*/_jsx(NextLinkComposed, {
-      className: className,
-      ref: ref,
-      ...nextjsProps,
-      ...other
-    });
-  }
-  return /*#__PURE__*/_jsx(MuiLink, {
-    component: NextLinkComposed,
-    className: className,
-    ref: ref,
-    ...nextjsProps,
-    ...other
-  });
-});

package/Link/index.d.mts

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

package/Link/index.mjs

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