feat: upgrade to MDX v2 (#8288)

Co-authored-by: Armano <armano2@users.noreply.github.com>

packages/docusaurus-theme-common/src/components/Details/styles.module.css

@@ -57,6 +57,10 @@ CSS variables, meant to be overridden by final theme
   padding-top: 1rem;
 }
 
-.collapsibleContent > *:last-child {
+.collapsibleContent p:last-child {
+  margin-bottom: 0;
+}
+
+.details > summary > p:last-child {
   margin-bottom: 0;
 }

packages/docusaurus-theme-common/src/internal.ts

@@ -42,7 +42,7 @@ export {
   useAnnouncementBar,
 } from './contexts/announcementBar';
 
-export {useTabs} from './utils/tabsUtils';
+export {useTabs, sanitizeTabsChildren} from './utils/tabsUtils';
 export type {TabValue, TabsProps, TabItemProps} from './utils/tabsUtils';
 
 export {useNavbarMobileSidebar} from './contexts/navbarMobileSidebar';

packages/docusaurus-theme-common/src/utils/admonitionUtils.tsx

@@ -14,15 +14,16 @@ function extractMDXAdmonitionTitle(children: ReactNode): {
   rest: ReactNode;
 } {
   const items = React.Children.toArray(children);
-  const mdxAdmonitionTitle = items.find(
-    (item) =>
-      React.isValidElement(item) &&
-      (item.props as {mdxType: string} | null)?.mdxType ===
-        'mdxAdmonitionTitle',
+  const mdxAdmonitionTitleWrapper = items.find(
+    (item) => React.isValidElement(item) && item.type === 'mdxAdmonitionTitle',
   ) as JSX.Element | undefined;
-  const rest = items.filter((item) => item !== mdxAdmonitionTitle);
+
+  const rest = items.filter((item) => item !== mdxAdmonitionTitleWrapper);
+
+  const mdxAdmonitionTitle = mdxAdmonitionTitleWrapper?.props.children;
+
   return {
-    mdxAdmonitionTitle: mdxAdmonitionTitle?.props.children,
+    mdxAdmonitionTitle,
     rest: rest.length > 0 ? <>{rest}</> : null,
   };
 }

packages/docusaurus-theme-common/src/utils/tabsUtils.tsx

@@ -61,25 +61,27 @@ function isTabItem(
   return !!props && typeof props === 'object' && 'value' in props;
 }
 
-function ensureValidChildren(children: TabsProps['children']) {
-  return (React.Children.map(children, (child) => {
-    // Pass falsy values through: allow conditionally not rendering a tab
-    if (!child || (isValidElement(child) && isTabItem(child))) {
-      return child;
-    }
-    // child.type.name will give non-sensical values in prod because of
-    // minification, but we assume it won't throw in prod.
-    throw new Error(
-      `Docusaurus error: Bad <Tabs> child <${
-        // @ts-expect-error: guarding against unexpected cases
-        typeof child.type === 'string' ? child.type : child.type.name
-      }>: all children of the <Tabs> component should be <TabItem>, and every <TabItem> should have a unique "value" prop.`,
-    );
-  })?.filter(Boolean) ?? []) as ReactElement<TabItemProps>[];
+export function sanitizeTabsChildren(children: TabsProps['children']) {
+  return (React.Children.toArray(children)
+    .filter((child) => child !== '\n')
+    .map((child) => {
+      if (!child || (isValidElement(child) && isTabItem(child))) {
+        return child;
+      }
+      // child.type.name will give non-sensical values in prod because of
+      // minification, but we assume it won't throw in prod.
+      throw new Error(
+        `Docusaurus error: Bad <Tabs> child <${
+          // @ts-expect-error: guarding against unexpected cases
+          typeof child.type === 'string' ? child.type : child.type.name
+        }>: all children of the <Tabs> component should be <TabItem>, and every <TabItem> should have a unique "value" prop.`,
+      );
+    })
+    ?.filter(Boolean) ?? []) as ReactElement<TabItemProps>[];
 }
 
 function extractChildrenTabValues(children: TabsProps['children']): TabValue[] {
-  return ensureValidChildren(children).map(
+  return sanitizeTabsChildren(children).map(
     ({props: {value, label, attributes, default: isDefault}}) => ({
       value,
       label,