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

package/Link/Link.js

@@ -0,0 +1,75 @@
+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";
+
+/**
+ * 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/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,64 @@
+import MuiLink from '@mui/material/Link';
+import { styled } from '@mui/material/styles';
+import { useTranslate } from "../i18n/index.js";
+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]
+    }
+  })
+}));
+export function SkipLink() {
+  const t = useTranslate();
+  return /*#__PURE__*/_jsx(StyledLink, {
+    href: "#main-content",
+    children: t('appFrame.skipToContent')
+  });
+}

package/Link/index.d.ts

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

package/Link/index.js

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

package/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>>;