@docusaurus/theme-classic 0.0.0-5555 → 0.0.0-5556

package/lib/getSwizzleConfig.js

@@ -290,13 +290,6 @@ function getSwizzleConfig() {
                 },
                 description: 'The component used to render <details> tags in MDX',
             },
-            'MDXComponents/Head': {
-                actions: {
-                    eject: 'forbidden',
-                    wrap: 'forbidden',
-                },
-                description: 'Technical component used to assign metadata (generally for SEO purpose) to the current MDX document',
-            },
             'MDXComponents/Heading': {
                 actions: {
                     eject: 'safe',

package/lib/theme/MDXComponents/Code.js

@@ -4,45 +4,11 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import React, {isValidElement} from 'react';
+import React from 'react';
 import CodeBlock from '@theme/CodeBlock';
 export default function MDXCode(props) {
-  const inlineElements = [
-    'a',
-    'abbr',
-    'b',
-    'br',
-    'button',
-    'cite',
-    'code',
-    'del',
-    'dfn',
-    'em',
-    'i',
-    'img',
-    'input',
-    'ins',
-    'kbd',
-    'label',
-    'object',
-    'output',
-    'q',
-    'ruby',
-    's',
-    'small',
-    'span',
-    'strong',
-    'sub',
-    'sup',
-    'time',
-    'u',
-    'var',
-    'wbr',
-  ];
   const shouldBeInline = React.Children.toArray(props.children).every(
-    (el) =>
-      (typeof el === 'string' && !el.includes('\n')) ||
-      (isValidElement(el) && inlineElements.includes(el.props?.mdxType)),
+    (el) => typeof el === 'string' && !el.includes('\n'),
   );
   return shouldBeInline ? <code {...props} /> : <CodeBlock {...props} />;
 }

package/lib/theme/MDXComponents/Details.js

@@ -11,7 +11,7 @@ export default function MDXDetails(props) {
   // Split summary item from the rest to pass it as a separate prop to the
   // Details theme component
   const summary = items.find(
-    (item) => React.isValidElement(item) && item.props?.mdxType === 'summary',
+    (item) => React.isValidElement(item) && item.type === 'summary',
   );
   const children = <>{items.filter((item) => item !== summary)}</>;
   return (

package/lib/theme/MDXComponents/Pre.d.ts

@@ -4,6 +4,6 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-/// <reference types="react" />
+import { type ReactNode } from 'react';
 import type { Props } from '@theme/MDXComponents/Pre';
-export default function MDXPre(props: Props): JSX.Element;
+export default function MDXPre(props: Props): ReactNode | undefined;

package/lib/theme/MDXComponents/Pre.js

@@ -4,16 +4,9 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import React, {isValidElement} from 'react';
-import CodeBlock from '@theme/CodeBlock';
+import React from 'react';
 export default function MDXPre(props) {
-  return (
-    <CodeBlock
-      // If this pre is created by a ``` fenced codeblock, unwrap the children
-      {...(isValidElement(props.children) &&
-      props.children.props?.originalType === 'code'
-        ? props.children.props
-        : {...props})}
-    />
-  );
+  // With MDX 2, this element is only used for fenced code blocks
+  // It always receives a MDXComponents/Code as children
+  return <>{props.children}</>;
 }

package/lib/theme/MDXComponents/index.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React from 'react';
-import MDXHead from '@theme/MDXComponents/Head';
+import Head from '@docusaurus/Head';
 import MDXCode from '@theme/MDXComponents/Code';
 import MDXA from '@theme/MDXComponents/A';
 import MDXPre from '@theme/MDXComponents/Pre';
@@ -16,11 +16,11 @@ import MDXImg from '@theme/MDXComponents/Img';
 import Admonition from '@theme/Admonition';
 import Mermaid from '@theme/Mermaid';
 const MDXComponents = {
-  head: MDXHead,
+  Head,
+  Details: MDXDetails,
   code: MDXCode,
   a: MDXA,
   pre: MDXPre,
-  details: MDXDetails,
   ul: MDXUl,
   img: MDXImg,
   h1: (props) => <MDXHeading as="h1" {...props} />,

package/lib/theme/MDXContent/index.js

@@ -5,6 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React from 'react';
+// @ts-expect-error: TODO see https://github.com/microsoft/TypeScript/issues/49721
 import {MDXProvider} from '@mdx-js/react';
 import MDXComponents from '@theme/MDXComponents';
 export default function MDXContent({children}) {

package/lib/theme/Tabs/index.js

@@ -9,6 +9,7 @@ import clsx from 'clsx';
 import {
   useScrollPositionBlocker,
   useTabs,
+  sanitizeTabsChildren,
 } from '@docusaurus/theme-common/internal';
 import useIsBrowser from '@docusaurus/useIsBrowser';
 import styles from './styles.module.css';
@@ -119,7 +120,8 @@ export default function Tabs(props) {
       // Remount tabs after hydration
       // Temporary fix for https://github.com/facebook/docusaurus/issues/5653
       key={String(isBrowser)}
-      {...props}
-    />
+      {...props}>
+      {sanitizeTabsChildren(props.children)}
+    </TabsComponent>
   );
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@docusaurus/theme-classic",
-  "version": "0.0.0-5555",
+  "version": "0.0.0-5556",
   "description": "Classic theme for Docusaurus",
   "main": "lib/index.js",
   "types": "src/theme-classic.d.ts",
@@ -20,19 +20,19 @@
     "copy:watch": "node ../../admin/scripts/copyUntypedFiles.js --watch"
   },
   "dependencies": {
-    "@docusaurus/core": "0.0.0-5555",
-    "@docusaurus/mdx-loader": "0.0.0-5555",
-    "@docusaurus/module-type-aliases": "0.0.0-5555",
-    "@docusaurus/plugin-content-blog": "0.0.0-5555",
-    "@docusaurus/plugin-content-docs": "0.0.0-5555",
-    "@docusaurus/plugin-content-pages": "0.0.0-5555",
-    "@docusaurus/theme-common": "0.0.0-5555",
-    "@docusaurus/theme-translations": "0.0.0-5555",
-    "@docusaurus/types": "0.0.0-5555",
-    "@docusaurus/utils": "0.0.0-5555",
-    "@docusaurus/utils-common": "0.0.0-5555",
-    "@docusaurus/utils-validation": "0.0.0-5555",
-    "@mdx-js/react": "^1.6.22",
+    "@docusaurus/core": "0.0.0-5556",
+    "@docusaurus/mdx-loader": "0.0.0-5556",
+    "@docusaurus/module-type-aliases": "0.0.0-5556",
+    "@docusaurus/plugin-content-blog": "0.0.0-5556",
+    "@docusaurus/plugin-content-docs": "0.0.0-5556",
+    "@docusaurus/plugin-content-pages": "0.0.0-5556",
+    "@docusaurus/theme-common": "0.0.0-5556",
+    "@docusaurus/theme-translations": "0.0.0-5556",
+    "@docusaurus/types": "0.0.0-5556",
+    "@docusaurus/utils": "0.0.0-5556",
+    "@docusaurus/utils-common": "0.0.0-5556",
+    "@docusaurus/utils-validation": "0.0.0-5556",
+    "@mdx-js/react": "^2.1.5",
     "clsx": "^1.2.1",
     "copy-text-to-clipboard": "^3.0.1",
     "infima": "0.2.0-alpha.43",
@@ -62,5 +62,5 @@
   "engines": {
     "node": ">=16.14"
   },
-  "gitHead": "f665597881e6070ac67a5568470e33d4ee7b1346"
+  "gitHead": "af59fefe36b8f8cd02bf854d5f41906e631134d6"
 }

package/src/getSwizzleConfig.ts

@@ -312,14 +312,6 @@ export default function getSwizzleConfig(): SwizzleConfig {
         },
         description: 'The component used to render <details> tags in MDX',
       },
-      'MDXComponents/Head': {
-        actions: {
-          eject: 'forbidden',
-          wrap: 'forbidden',
-        },
-        description:
-          'Technical component used to assign metadata (generally for SEO purpose) to the current MDX document',
-      },
       'MDXComponents/Heading': {
         actions: {
           eject: 'safe',

package/src/theme/MDXComponents/Code.tsx

@@ -6,50 +6,13 @@
  */
 
 import type {ComponentProps} from 'react';
-import React, {isValidElement} from 'react';
+import React from 'react';
 import CodeBlock from '@theme/CodeBlock';
 import type {Props} from '@theme/MDXComponents/Code';
 
 export default function MDXCode(props: Props): JSX.Element {
-  const inlineElements: (string | undefined)[] = [
-    'a',
-    'abbr',
-    'b',
-    'br',
-    'button',
-    'cite',
-    'code',
-    'del',
-    'dfn',
-    'em',
-    'i',
-    'img',
-    'input',
-    'ins',
-    'kbd',
-    'label',
-    'object',
-    'output',
-    'q',
-    'ruby',
-    's',
-    'small',
-    'span',
-    'strong',
-    'sub',
-    'sup',
-    'time',
-    'u',
-    'var',
-    'wbr',
-  ];
   const shouldBeInline = React.Children.toArray(props.children).every(
-    (el) =>
-      (typeof el === 'string' && !el.includes('\n')) ||
-      (isValidElement(el) &&
-        inlineElements.includes(
-          (el.props as {mdxType: string} | null)?.mdxType,
-        )),
+    (el) => typeof el === 'string' && !el.includes('\n'),
   );
 
   return shouldBeInline ? (

package/src/theme/MDXComponents/Details.tsx

@@ -15,8 +15,7 @@ export default function MDXDetails(props: Props): JSX.Element {
   // Details theme component
   const summary = items.find(
     (item): item is ReactElement<ComponentProps<'summary'>> =>
-      React.isValidElement(item) &&
-      (item.props as {mdxType: string} | null)?.mdxType === 'summary',
+      React.isValidElement(item) && item.type === 'summary',
   );
   const children = <>{items.filter((item) => item !== summary)}</>;
 

package/src/theme/MDXComponents/Pre.tsx

@@ -5,19 +5,11 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, {isValidElement} from 'react';
-import CodeBlock from '@theme/CodeBlock';
+import React, {type ReactNode} from 'react';
 import type {Props} from '@theme/MDXComponents/Pre';
 
-export default function MDXPre(props: Props): JSX.Element {
-  return (
-    <CodeBlock
-      // If this pre is created by a ``` fenced codeblock, unwrap the children
-      {...(isValidElement(props.children) &&
-      (props.children.props as {originalType: string} | null)?.originalType ===
-        'code'
-        ? props.children.props
-        : {...props})}
-    />
-  );
+export default function MDXPre(props: Props): ReactNode | undefined {
+  // With MDX 2, this element is only used for fenced code blocks
+  // It always receives a MDXComponents/Code as children
+  return <>{props.children}</>;
 }

package/src/theme/MDXComponents/index.tsx

@@ -6,7 +6,7 @@
  */
 
 import React from 'react';
-import MDXHead from '@theme/MDXComponents/Head';
+import Head from '@docusaurus/Head';
 import MDXCode from '@theme/MDXComponents/Code';
 import MDXA from '@theme/MDXComponents/A';
 import MDXPre from '@theme/MDXComponents/Pre';
@@ -20,11 +20,11 @@ import Mermaid from '@theme/Mermaid';
 import type {MDXComponentsObject} from '@theme/MDXComponents';
 
 const MDXComponents: MDXComponentsObject = {
-  head: MDXHead,
+  Head,
+  Details: MDXDetails,
   code: MDXCode,
   a: MDXA,
   pre: MDXPre,
-  details: MDXDetails,
   ul: MDXUl,
   img: MDXImg,
   h1: (props) => <MDXHeading as="h1" {...props} />,

package/src/theme/MDXContent/index.tsx

@@ -6,6 +6,7 @@
  */
 
 import React from 'react';
+// @ts-expect-error: TODO see https://github.com/microsoft/TypeScript/issues/49721
 import {MDXProvider} from '@mdx-js/react';
 import MDXComponents from '@theme/MDXComponents';
 import type {Props} from '@theme/MDXContent';

package/src/theme/Tabs/index.tsx

@@ -10,6 +10,7 @@ import clsx from 'clsx';
 import {
   useScrollPositionBlocker,
   useTabs,
+  sanitizeTabsChildren,
   type TabItemProps,
 } from '@docusaurus/theme-common/internal';
 import useIsBrowser from '@docusaurus/useIsBrowser';
@@ -152,7 +153,8 @@ export default function Tabs(props: Props): JSX.Element {
       // Remount tabs after hydration
       // Temporary fix for https://github.com/facebook/docusaurus/issues/5653
       key={String(isBrowser)}
-      {...props}
-    />
+      {...props}>
+      {sanitizeTabsChildren(props.children)}
+    </TabsComponent>
   );
 }

package/src/theme-classic.d.ts

@@ -861,14 +861,6 @@ declare module '@theme/MDXComponents/Img' {
   export default function MDXImg(props: Props): JSX.Element;
 }
 
-declare module '@theme/MDXComponents/Head' {
-  import type {ComponentProps} from 'react';
-
-  export interface Props extends ComponentProps<'head'> {}
-
-  export default function MDXHead(props: Props): JSX.Element;
-}
-
 declare module '@theme/MDXComponents/Heading' {
   import type {ComponentProps} from 'react';
   import type Heading from '@theme/Heading';
@@ -889,7 +881,6 @@ declare module '@theme/MDXComponents/Pre' {
 declare module '@theme/MDXComponents' {
   import type {ComponentType, ComponentProps} from 'react';
 
-  import type MDXHead from '@theme/MDXComponents/Head';
   import type MDXCode from '@theme/MDXComponents/Code';
   import type MDXA from '@theme/MDXComponents/A';
   import type MDXPre from '@theme/MDXComponents/Pre';
@@ -898,13 +889,14 @@ declare module '@theme/MDXComponents' {
   import type MDXImg from '@theme/MDXComponents/Img';
   import type Admonition from '@theme/Admonition';
   import type Mermaid from '@theme/Mermaid';
+  import type Head from '@docusaurus/Head';
 
   export type MDXComponentsObject = {
-    readonly head: typeof MDXHead;
+    readonly Head: typeof Head;
+    readonly Details: typeof MDXDetails;
     readonly code: typeof MDXCode;
     readonly a: typeof MDXA;
     readonly pre: typeof MDXPre;
-    readonly details: typeof MDXDetails;
     readonly ul: typeof MDXUl;
     readonly img: typeof MDXImg;
     readonly h1: (props: ComponentProps<'h1'>) => JSX.Element;

package/lib/theme/MDXComponents/Head.d.ts

@@ -1,9 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-/// <reference types="react" />
-import type { Props } from '@theme/MDXComponents/Head';
-export default function MDXHead(props: Props): JSX.Element;

package/lib/theme/MDXComponents/Head.js

@@ -1,23 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-import React from 'react';
-import Head from '@docusaurus/Head';
-// MDX elements are wrapped through the MDX pragma. In some cases (notably usage
-// with Head/Helmet) we need to unwrap those elements.
-function unwrapMDXElement(element) {
-  if (element.props?.mdxType && element.props.originalType) {
-    const {mdxType, originalType, ...newProps} = element.props;
-    return React.createElement(element.props.originalType, newProps);
-  }
-  return element;
-}
-export default function MDXHead(props) {
-  const unwrappedChildren = React.Children.map(props.children, (child) =>
-    React.isValidElement(child) ? unwrapMDXElement(child) : child,
-  );
-  return <Head {...props}>{unwrappedChildren}</Head>;
-}

package/src/theme/MDXComponents/Head.tsx

@@ -1,31 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import React, {type ReactElement} from 'react';
-import Head, {type Props as HeadProps} from '@docusaurus/Head';
-import type {Props} from '@theme/MDXComponents/Head';
-
-type MDXElement = ReactElement<
-  {mdxType?: string; originalType?: string} | undefined
->;
-
-// MDX elements are wrapped through the MDX pragma. In some cases (notably usage
-// with Head/Helmet) we need to unwrap those elements.
-function unwrapMDXElement(element: MDXElement) {
-  if (element.props?.mdxType && element.props.originalType) {
-    const {mdxType, originalType, ...newProps} = element.props;
-    return React.createElement(element.props.originalType, newProps);
-  }
-  return element;
-}
-
-export default function MDXHead(props: Props): JSX.Element {
-  const unwrappedChildren = React.Children.map(props.children, (child) =>
-    React.isValidElement(child) ? unwrapMDXElement(child as MDXElement) : child,
-  );
-  return <Head {...(props as HeadProps)}>{unwrappedChildren}</Head>;
-}