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

package/Link/Link.js

@@ -1,19 +1,11 @@
-"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.NextLinkComposed = 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 _i18n = require("../i18n");
-var _DocsProvider = require("../DocsProvider");
-var _jsxRuntime = require("react/jsx-runtime");
 /**
  * File to keep in sync with:
  *
@@ -22,14 +14,14 @@ var _jsxRuntime = require("react/jsx-runtime");
  * - /examples/material-ui-nextjs-pages-router-ts/src/Link.tsx
  * - /examples/material-ui-nextjs-ts-v4-v5-migration/src/Link.tsx
  */
-
-const NextLinkComposed = exports.NextLinkComposed = /*#__PURE__*/React.forwardRef(function NextLinkComposed(props, ref) {
+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__*/(0, _jsxRuntime.jsx)(_link.default, {
+  return /*#__PURE__*/_jsx(NextLink, {
     href: to,
     as: linkAs,
     "data-no-markdown-link": "true",
@@ -39,7 +31,7 @@ const NextLinkComposed = exports.NextLinkComposed = /*#__PURE__*/React.forwardRe
 });
 // A styled version of the Next.js 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,
@@ -49,14 +41,14 @@ const Link = exports.Link = /*#__PURE__*/React.forwardRef(function Link(props, r
     noLinkStyle,
     ...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 className = (0, _clsx.default)(classNameProps, routerPathname === pathname && activeClassName);
-  const userLanguage = (0, _i18n.useUserLanguage)();
+  const className = clsx(classNameProps, routerPathname === pathname && 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}`;
@@ -66,14 +58,14 @@ const Link = exports.Link = /*#__PURE__*/React.forwardRef(function Link(props, r
     linkAs
   };
   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/Link/MarkdownLinks.d.ts

@@ -0,0 +1,2 @@
+export declare function samePageLinkNavigation(event: MouseEvent): boolean;
+export declare function MarkdownLinks(): null;

package/Link/MarkdownLinks.js

@@ -0,0 +1,84 @@
+import * as React from 'react';
+import Router from 'next/router';
+import { pathnameToLanguage } from "../helpers/helpers.js";
+export function samePageLinkNavigation(event) {
+  if (event.defaultPrevented || event.button !== 0 ||
+  // ignore everything but left-click
+  event.metaKey || event.ctrlKey || event.altKey || event.shiftKey) {
+    return true;
+  }
+  return false;
+}
+function isLink(event) {
+  let activeElement = event.target;
+  while (activeElement?.nodeType === Node.ELEMENT_NODE && activeElement.nodeName !== 'A') {
+    activeElement = activeElement.parentElement;
+  }
+
+  // Ignore non internal link clicks.
+  // Absolute URLs can be internal, we delegate this to Next.js's router
+  if (activeElement === null || activeElement.nodeName !== 'A' || activeElement.getAttribute('target') === '_blank' || activeElement.getAttribute('data-no-markdown-link') === 'true') {
+    return null;
+  }
+  return activeElement;
+}
+
+/**
+ * @param {MouseEvent} event
+ */
+function handleClick(event) {
+  // Ignore click events meant for native link handling, for example open in new tab
+  if (samePageLinkNavigation(event)) {
+    return;
+  }
+  const activeElement = isLink(event);
+  if (activeElement === null) {
+    return;
+  }
+  event.preventDefault();
+  const as = activeElement.getAttribute('href');
+  if (as === null) {
+    return;
+  }
+  const canonicalPathname = pathnameToLanguage(as).canonicalPathname;
+  Router.push(canonicalPathname, as);
+}
+
+/**
+ * Source copied from https://github.com/vercel/next.js/blob/ebc4eaaa2564b4283711646079d68e430496c88b/packages/next/src/client/link.tsx
+ */
+function handleMouseOver(event) {
+  const activeElement = isLink(event);
+  if (activeElement === null) {
+    return;
+  }
+  const as = activeElement.getAttribute('href');
+  if (as === null) {
+    return;
+  }
+  const canonicalPathname = pathnameToLanguage(as).canonicalPathname;
+  const prefetchPromise = Router.prefetch(canonicalPathname, as, {
+    priority: true
+  });
+  // Prefetch the JSON page if asked (only in the client)
+  // We need to handle a prefetch error here since we may be
+  // loading with priority which can reject but we don't
+  // want to force navigation since this is only a prefetch
+  Promise.resolve(prefetchPromise).catch(err => {
+    if (process.env.NODE_ENV !== 'production') {
+      // rethrow to show invalid URL errors
+      throw err;
+    }
+  });
+}
+export function MarkdownLinks() {
+  React.useEffect(() => {
+    document.addEventListener('click', handleClick);
+    document.addEventListener('mouseover', handleMouseOver);
+    return () => {
+      document.removeEventListener('click', handleClick);
+      document.removeEventListener('mouseover', handleMouseOver);
+    };
+  }, []);
+  return null;
+}

package/Link/SkipLink.d.ts

@@ -0,0 +1 @@
+export declare function SkipLink(): import("react/jsx-runtime").JSX.Element;

package/Link/SkipLink.js

@@ -0,0 +1,66 @@
+import MuiLink from '@mui/material/Link';
+import { styled } from '@mui/material/styles';
+import { useTranslate } from '@mui/docs/i18n';
+import { jsx as _jsx } from "react/jsx-runtime";
+const StyledLink = styled(MuiLink)(({
+  theme
+}) => ({
+  position: 'fixed',
+  padding: theme.spacing(1, 2),
+  backgroundColor: (theme.vars || theme).palette.primary[50],
+  border: '1px solid',
+  borderColor: (theme.vars || theme).palette.primary[100],
+  color: (theme.vars || theme).palette.primary[600],
+  outlineOffset: 5,
+  outlineColor: (theme.vars || theme).palette.primary[300],
+  borderRadius: theme.shape.borderRadius,
+  left: theme.spacing(2),
+  zIndex: theme.zIndex.tooltip + 1,
+  top: theme.spacing(-10),
+  transition: theme.transitions.create('top', {
+    easing: theme.transitions.easing.easeIn,
+    duration: theme.transitions.duration.leavingScreen
+  }),
+  '&:hover': {
+    backgroundColor: (theme.vars || theme).palette.primary[100],
+    color: (theme.vars || theme).palette.primary[700]
+  },
+  '&:focus': {
+    top: theme.spacing(2),
+    transition: theme.transitions.create('top', {
+      easing: theme.transitions.easing.easeOut,
+      duration: theme.transitions.duration.enteringScreen
+    })
+  },
+  '@media (prefers-reduced-motion: reduce)': {
+    transition: theme.transitions.create('opacity'),
+    opacity: 0,
+    '&:focus': {
+      top: theme.spacing(2),
+      opacity: 1,
+      transition: theme.transitions.create('opacity')
+    }
+  },
+  '@media print': {
+    display: 'none'
+  },
+  ...theme.applyDarkStyles({
+    backgroundColor: (theme.vars || theme).palette.primaryDark[600],
+    borderColor: (theme.vars || theme).palette.primaryDark[400],
+    color: (theme.vars || theme).palette.grey[100],
+    outlineColor: (theme.vars || theme).palette.primary[500],
+    '&:hover': {
+      backgroundColor: (theme.vars || theme).palette.primaryDark[500],
+      color: (theme.vars || theme).palette.grey[50]
+    }
+  })
+}));
+
+// eslint-disable-next-line import/prefer-default-export
+export function SkipLink() {
+  const t = useTranslate();
+  return /*#__PURE__*/_jsx(StyledLink, {
+    href: "#main-content",
+    children: t('appFrame.skipToContent')
+  });
+}

package/Link/index.d.ts

@@ -1 +1,3 @@
-export * from "./Link.js";
+export * from "./Link.js";
+export * from "./MarkdownLinks.js";
+export * from "./SkipLink.js";

package/Link/index.js

@@ -1,16 +1,3 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-var _Link = require("./Link");
-Object.keys(_Link).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _Link[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _Link[key];
-    }
-  });
-});
+export * from "./Link.js";
+export * from "./MarkdownLinks.js";
+export * from "./SkipLink.js";