@mui/docs 6.0.0-dev.240424162023-9968b4889d → 6.0.0

package/HighlightedCodeWithTabs/HighlightedCodeWithTabs.js

@@ -0,0 +1,355 @@
+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.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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(() => tabs.map(({
+    tab
+  }) => tab), [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.ts

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

package/HighlightedCodeWithTabs/index.js

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

package/HighlightedCodeWithTabs/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "main": "../node/HighlightedCodeWithTabs/index.js",
+  "types": "./index.d.ts"
+}

package/InfoCard/InfoCard.d.ts

@@ -8,7 +8,6 @@ export declare function GlowingIconContainer({ icon }: GlowingIconContainerProps
 interface InfoCardProps {
     classNameDescription?: string;
     classNameTitle?: string;
-    dense?: boolean;
     description?: string;
     icon?: React.ReactNode;
     link?: string;

package/InfoCard/InfoCard.js

@@ -1,20 +1,17 @@
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["classNameDescription", "classNameTitle", "dense", "description", "icon", "link", "svg", "title", "titleProps"];
 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';
+import { Link } from "../Link/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export function GlowingIconContainer({
   icon
 }) {
   return /*#__PURE__*/_jsx(Box, {
-    sx: theme => _extends({
-      width: 40,
-      height: 40,
+    sx: theme => ({
+      width: 36,
+      height: 36,
       display: 'flex',
       justifyContent: 'center',
       alignItems: 'center',
@@ -23,64 +20,68 @@ export function GlowingIconContainer({
       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`
-    }, theme.applyDarkStyles({
-      borderColor: alpha(theme.palette.primary[400], 0.25),
-      bgcolor: alpha(theme.palette.primary[900], 0.4),
-      boxShadow: `0 0 0 2px ${alpha(theme.palette.primary[600], 0.1)}, 0px 2px 12px 0px rgba(0, 0, 0, 0.25) inset`
-    })),
+      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,
-      dense,
-      description,
-      icon,
-      link,
-      svg,
-      title,
-      titleProps
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  return /*#__PURE__*/_jsxs(Paper, _extends({
+    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 => _extends({
-      p: dense ? 2.5 : 3.5,
+    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, {
+      ...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, _extends({
-      fontWeight: "bold",
+    }), /*#__PURE__*/_jsx(Typography, {
+      fontWeight: "semiBold",
       component: "h3",
       color: "text.primary",
       variant: "body2",
       mt: icon ? 2 : 0,
       mb: description ? 0.5 : 0,
-      className: classNameTitle
-    }, titleProps, {
+      className: classNameTitle,
+      ...titleProps,
       children: title
-    })), /*#__PURE__*/_jsx(Typography, {
+    }), /*#__PURE__*/_jsx(Typography, {
       variant: "body2",
       color: "text.secondary",
       className: classNameDescription,
       children: description
     })]
-  }));
+  });
 }

package/InfoCard/index.js

@@ -1 +1 @@
-export * from './InfoCard';
+export * from "./InfoCard.js";

package/Link/Link.js

@@ -1,15 +1,11 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["to", "linkAs", "replace", "scroll", "shallow", "prefetch", "legacyBehavior", "locale"],
-  _excluded2 = ["activeClassName", "as", "className", "href", "legacyBehavior", "linkAs", "locale", "noLinkStyle", "prefetch", "replace", "role", "scroll", "shallow"];
 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 { styled } from '@mui/material/styles';
-import { useUserLanguage } from '../i18n';
-import { useDocsConfig } from '../DocsProvider';
+import { useUserLanguage } from "../i18n/index.js";
+import { useDocsConfig } from "../DocsProvider/index.js";
 
 /**
  * File to keep in sync with:
@@ -24,16 +20,16 @@ import { jsx as _jsx } from "react/jsx-runtime";
 const Anchor = styled('a')({});
 const NextLinkComposed = /*#__PURE__*/React.forwardRef(function NextLinkComposed(props, ref) {
   const {
-      to,
-      linkAs,
-      replace,
-      scroll,
-      shallow,
-      prefetch,
-      legacyBehavior = true,
-      locale
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
+    to,
+    linkAs,
+    replace,
+    scroll,
+    shallow,
+    prefetch,
+    legacyBehavior = true,
+    locale,
+    ...other
+  } = props;
   return /*#__PURE__*/_jsx(NextLink, {
     href: to,
     prefetch: prefetch,
@@ -44,31 +40,31 @@ const NextLinkComposed = /*#__PURE__*/React.forwardRef(function NextLinkComposed
     passHref: true,
     locale: locale,
     legacyBehavior: legacyBehavior,
-    children: /*#__PURE__*/_jsx(Anchor, _extends({
+    children: /*#__PURE__*/_jsx(Anchor, {
       "data-no-markdown-link": "true",
-      ref: ref
-    }, other))
+      ref: ref,
+      ...other
+    })
   });
 });
 // A styled version of the Next.js Pages Router 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,
-      legacyBehavior,
-      linkAs: linkAsProp,
-      locale,
-      noLinkStyle,
-      prefetch,
-      replace,
-      // Link don't have roles.
-      scroll,
-      shallow
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded2);
+    activeClassName = 'active',
+    as,
+    className: classNameProps,
+    href,
+    legacyBehavior,
+    linkAs: linkAsProp,
+    locale,
+    noLinkStyle,
+    prefetch,
+    replace,
+    scroll,
+    shallow,
+    ...other
+  } = props;
   const router = useRouter();
   const pathname = typeof href === 'string' ? href : href?.pathname;
   const routerPathname = router.pathname.replace('/[docsTab]', '');
@@ -79,7 +75,7 @@ export const Link = /*#__PURE__*/React.forwardRef(function Link(props, ref) {
     LANGUAGES_IGNORE_PAGES
   } = useDocsConfig();
   let linkAs = linkAsProp || as || href;
-  if (userLanguage !== 'en' && pathname && pathname.indexOf('/') === 0 && !LANGUAGES_IGNORE_PAGES(pathname) && !pathname.startsWith(`/${userLanguage}/`)) {
+  if (userLanguage !== 'en' && pathname && pathname.startsWith('/') && !LANGUAGES_IGNORE_PAGES(pathname) && !pathname.startsWith(`/${userLanguage}/`)) {
     linkAs = `/${userLanguage}${linkAs}`;
   }
   const nextjsProps = {
@@ -93,14 +89,18 @@ export const Link = /*#__PURE__*/React.forwardRef(function Link(props, ref) {
     locale
   };
   if (noLinkStyle) {
-    return /*#__PURE__*/_jsx(NextLinkComposed, _extends({
+    return /*#__PURE__*/_jsx(NextLinkComposed, {
       className: className,
-      ref: ref
-    }, nextjsProps, other));
+      ref: ref,
+      ...nextjsProps,
+      ...other
+    });
   }
-  return /*#__PURE__*/_jsx(MuiLink, _extends({
+  return /*#__PURE__*/_jsx(MuiLink, {
     component: NextLinkComposed,
     className: className,
-    ref: ref
-  }, nextjsProps, other));
+    ref: ref,
+    ...nextjsProps,
+    ...other
+  });
 });

package/Link/index.js

@@ -1 +1 @@
-export * from './Link';
+export * from "./Link.js";

package/MarkdownElement/MarkdownElement.d.ts

@@ -2,5 +2,6 @@ import * as React from 'react';
 export interface MarkdownElementProps {
     className?: string;
     renderedMarkdown?: string;
+    children?: React.ReactNode;
 }
 export declare const MarkdownElement: React.ForwardRefExoticComponent<MarkdownElementProps & React.RefAttributes<HTMLDivElement>>;