@mui/docs 7.0.0-alpha.0 → 7.0.0-alpha.1

package/{node → esm}/HighlightedCodeWithTabs/HighlightedCodeWithTabs.js

@@ -1,22 +1,13 @@
-"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.CodeTabPanel = exports.CodeTabList = exports.CodeTab = void 0;
-exports.HighlightedCodeWithTabs = HighlightedCodeWithTabs;
-var React = _interopRequireWildcard(require("react"));
-var _styles = require("@mui/material/styles");
-var _Tabs = require("@mui/base/Tabs");
-var _TabsList = require("@mui/base/TabsList");
-var _TabPanel = require("@mui/base/TabPanel");
-var _Tab = require("@mui/base/Tab");
-var _useLocalStorageState = _interopRequireDefault(require("@mui/utils/useLocalStorageState"));
-var _HighlightedCode = require("../HighlightedCode");
-var _jsxRuntime = require("react/jsx-runtime");
-const CodeTabList = exports.CodeTabList = (0, _styles.styled)(_TabsList.TabsList)(({
+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',
@@ -25,7 +16,7 @@ const CodeTabList = exports.CodeTabList = (0, _styles.styled)(_TabsList.TabsList
   borderRight: '1px solid',
   overflowX: 'auto',
   ...theme.applyDarkStyles({
-    backgroundColor: (0, _styles.alpha)(theme.palette.primaryDark[800], 0.2)
+    backgroundColor: alpha(theme.palette.primaryDark[800], 0.2)
   }),
   variants: [{
     props: ({
@@ -116,7 +107,7 @@ const CodeTabList = exports.CodeTabList = (0, _styles.styled)(_TabsList.TabsList
       ownerState
     }) => ownerState?.contained,
     style: {
-      backgroundColor: (0, _styles.alpha)(theme.palette.grey[50], 0.2)
+      backgroundColor: alpha(theme.palette.grey[50], 0.2)
     }
   }, {
     props: ({
@@ -127,7 +118,7 @@ const CodeTabList = exports.CodeTabList = (0, _styles.styled)(_TabsList.TabsList
     }
   }]
 }));
-const CodeTabPanel = exports.CodeTabPanel = (0, _styles.styled)(_TabPanel.TabPanel)({
+export const CodeTabPanel = styled(TabPanelBase)({
   '& pre': {
     borderTopLeftRadius: 0,
     borderTopRightRadius: 0,
@@ -189,7 +180,7 @@ const CodeTabPanel = exports.CodeTabPanel = (0, _styles.styled)(_TabPanel.TabPan
     }
   }]
 });
-const CodeTab = exports.CodeTab = (0, _styles.styled)(_Tab.Tab)(({
+export const CodeTab = styled(TabBase)(({
   theme
 }) => ({
   variants: [{
@@ -270,7 +261,7 @@ const CodeTab = exports.CodeTab = (0, _styles.styled)(_Tab.Tab)(({
     }) => !ownerState?.contained,
     style: {
       '&:hover': {
-        backgroundColor: (0, _styles.alpha)(theme.palette.primaryDark[500], 0.5),
+        backgroundColor: alpha(theme.palette.primaryDark[500], 0.5),
         color: (theme.vars || theme).palette.grey[400]
       }
     }
@@ -314,7 +305,7 @@ const CodeTab = exports.CodeTab = (0, _styles.styled)(_Tab.Tab)(({
     }
   })
 }));
-function HighlightedCodeWithTabs(props) {
+export function HighlightedCodeWithTabs(props) {
   const {
     tabs,
     storageKey
@@ -322,7 +313,7 @@ function HighlightedCodeWithTabs(props) {
   const availableTabs = React.useMemo(() => tabs.map(({
     tab
   }) => tab), [tabs]);
-  const [activeTab, setActiveTab] = (0, _useLocalStorageState.default)(storageKey ?? null, availableTabs[0]);
+  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);
@@ -335,15 +326,15 @@ function HighlightedCodeWithTabs(props) {
   const ownerState = {
     mounted
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Tabs.Tabs, {
+  return /*#__PURE__*/_jsxs(Tabs, {
     selectionFollowsFocus: true,
     value: defaultizedActiveTab,
     onChange: handleChange,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(CodeTabList, {
+    children: [/*#__PURE__*/_jsx(CodeTabList, {
       ownerState: ownerState,
       children: tabs.map(({
         tab
-      }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(CodeTab, {
+      }) => /*#__PURE__*/_jsx(CodeTab, {
         ownerState: ownerState,
         value: tab,
         children: tab
@@ -352,10 +343,10 @@ function HighlightedCodeWithTabs(props) {
       tab,
       language,
       code
-    }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(CodeTabPanel, {
+    }) => /*#__PURE__*/_jsx(CodeTabPanel, {
       ownerState: ownerState,
       value: tab,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_HighlightedCode.HighlightedCode, {
+      children: /*#__PURE__*/_jsx(HighlightedCode, {
         language: language || 'bash',
         code: typeof code === 'function' ? code(tab) : code
       })

package/esm/HighlightedCodeWithTabs/index.d.ts

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

package/esm/HighlightedCodeWithTabs/index.js

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

package/esm/InfoCard/InfoCard.d.ts

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { TypographyProps } from '@mui/material/Typography';
+import { LinkProps } from "../Link/index.js";
+interface GlowingIconContainerProps {
+  icon: React.ReactNode;
+}
+export declare function GlowingIconContainer({
+  icon
+}: GlowingIconContainerProps): React.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): React.JSX.Element;
+export {};

package/esm/InfoCard/InfoCard.js

@@ -0,0 +1,87 @@
+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.js";
+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/esm/InfoCard/index.d.ts

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

package/esm/InfoCard/index.js

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

package/esm/Link/Link.d.ts

@@ -0,0 +1,22 @@
+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:
+ *
+ * - /examples/material-ui-nextjs-pages-router/src/Link.js
+ * - /examples/material-ui-nextjs-pages-router-ts/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 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/{node → esm}/Link/Link.js

@@ -1,30 +1,18 @@
-"use strict";
+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.js";
+import { useDocsConfig } from "../DocsProvider/index.js";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Link = void 0;
-var React = _interopRequireWildcard(require("react"));
-var _clsx = _interopRequireDefault(require("clsx"));
-var _router = require("next/router");
-var _link = _interopRequireDefault(require("next/link"));
-var _Link = _interopRequireDefault(require("@mui/material/Link"));
-var _styles = require("@mui/material/styles");
-var _i18n = require("../i18n");
-var _DocsProvider = require("../DocsProvider");
-var _jsxRuntime = require("react/jsx-runtime");
 /**
  * File to keep in sync with:
  *
- * - /docs/src/modules/components/Link.tsx
  * - /examples/material-ui-nextjs-pages-router/src/Link.js
  * - /examples/material-ui-nextjs-pages-router-ts/src/Link.tsx
  */
-
-// Add support for the sx prop for consistency with the other branches.
-const Anchor = (0, _styles.styled)('a')({});
+import { jsx as _jsx } from "react/jsx-runtime";
 const NextLinkComposed = /*#__PURE__*/React.forwardRef(function NextLinkComposed(props, ref) {
   const {
     to,
@@ -33,11 +21,10 @@ const NextLinkComposed = /*#__PURE__*/React.forwardRef(function NextLinkComposed
     scroll,
     shallow,
     prefetch,
-    legacyBehavior = true,
     locale,
     ...other
   } = props;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_link.default, {
+  return /*#__PURE__*/_jsx(NextLink, {
     href: to,
     prefetch: prefetch,
     as: linkAs,
@@ -46,23 +33,19 @@ const NextLinkComposed = /*#__PURE__*/React.forwardRef(function NextLinkComposed
     shallow: shallow,
     passHref: true,
     locale: locale,
-    legacyBehavior: legacyBehavior,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Anchor, {
-      "data-no-markdown-link": "true",
-      ref: ref,
-      ...other
-    })
+    "data-no-markdown-link": "true",
+    ref: ref,
+    ...other
   });
 });
 // A styled version of the Next.js Pages Router Link component:
 // https://nextjs.org/docs/pages/api-reference/components/link
-const Link = exports.Link = /*#__PURE__*/React.forwardRef(function Link(props, ref) {
+export const Link = /*#__PURE__*/React.forwardRef(function Link(props, ref) {
   const {
     activeClassName = 'active',
     as,
     className: classNameProps,
     href,
-    legacyBehavior,
     linkAs: linkAsProp,
     locale,
     noLinkStyle,
@@ -72,15 +55,15 @@ const Link = exports.Link = /*#__PURE__*/React.forwardRef(function Link(props, r
     shallow,
     ...other
   } = props;
-  const router = (0, _router.useRouter)();
+  const router = useRouter();
   const pathname = typeof href === 'string' ? href : href?.pathname;
   const routerPathname = router.pathname.replace('/[docsTab]', '');
   const shouldBeActive = routerPathname === pathname;
-  const className = (0, _clsx.default)(classNameProps, shouldBeActive && activeClassName);
-  const userLanguage = (0, _i18n.useUserLanguage)();
+  const className = clsx(classNameProps, shouldBeActive && activeClassName);
+  const userLanguage = useUserLanguage();
   const {
     LANGUAGES_IGNORE_PAGES
-  } = (0, _DocsProvider.useDocsConfig)();
+  } = useDocsConfig();
   let linkAs = linkAsProp || as || href;
   if (userLanguage !== 'en' && pathname && pathname.startsWith('/') && !LANGUAGES_IGNORE_PAGES(pathname) && !pathname.startsWith(`/${userLanguage}/`)) {
     linkAs = `/${userLanguage}${linkAs}`;
@@ -91,19 +74,18 @@ const Link = exports.Link = /*#__PURE__*/React.forwardRef(function Link(props, r
     replace,
     scroll,
     shallow,
-    legacyBehavior,
     prefetch,
     locale
   };
   if (noLinkStyle) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(NextLinkComposed, {
+    return /*#__PURE__*/_jsx(NextLinkComposed, {
       className: className,
       ref: ref,
       ...nextjsProps,
       ...other
     });
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Link.default, {
+  return /*#__PURE__*/_jsx(MuiLink, {
     component: NextLinkComposed,
     className: className,
     ref: ref,

package/esm/Link/index.d.ts

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

package/esm/Link/index.js

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

package/esm/MarkdownElement/MarkdownElement.d.ts

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