fix(theme): vendor theme-common/internal usages ahead of Docusaurus v4 (#1140)

packages/docusaurus-theme-openapi-docs/src/theme-classic.d.ts

@@ -6,99 +6,3 @@
  * ========================================================================== */
 
 /// <reference types="@docusaurus/theme-classic" />
-
-declare module "@docusaurus/theme-common/internal" {
-  import { CSSProperties, ReactNode, RefObject } from "react";
-
-  import type { PropDocContent } from "@docusaurus/plugin-content-docs";
-  import { MagicCommentConfig } from "@docusaurus/theme-common/lib/utils/codeBlockUtils";
-  import {
-    TabsProps as ITabsProps,
-    TabValue,
-  } from "@docusaurus/theme-common/lib/utils/tabsUtils";
-  import { Props as ICodeBlockProps } from "@theme/CodeBlock";
-  import { Props as ICopyButtonProps } from "@theme/CodeBlock/CopyButton";
-  import { Props as ILineProps } from "@theme/CodeBlock/Line";
-  import { PrismTheme } from "prism-react-renderer";
-
-  export interface TabItemProps {
-    readonly children: ReactNode;
-    readonly value: string;
-    readonly default?: boolean;
-    readonly label?: string;
-    readonly className?: string;
-    readonly attributes?: { [key: string]: unknown };
-  }
-
-  export interface TabProps extends ITabsProps {
-    length?: number;
-  }
-
-  export interface CopyButtonProps extends ICopyButtonProps {}
-  export interface LineProps extends ILineProps {}
-  export interface CodeBlockProps extends ICodeBlockProps {}
-
-  export function usePrismTheme(): PrismTheme;
-
-  export function sanitizeTabsChildren(children: TabProps["children"]);
-
-  export function getPrismCssVariables(prismTheme: PrismTheme): CSSProperties;
-
-  export function parseCodeBlockTitle(metastring?: string): string;
-
-  export function parseLanguage(className: string): string | undefined;
-
-  export function containsLineNumbers(metastring?: string): boolean;
-
-  export function useScrollPositionBlocker(): {
-    blockElementScrollPositionUntilNextRender: (el: HTMLElement) => void;
-  };
-
-  export function DocProvider({
-    children,
-    content,
-  }: {
-    children: ReactNode;
-    content: PropDocContent;
-  });
-
-  export function useTabsContextValue(props: TabProps): {
-    selectedValue: string;
-    selectValue: (value: string) => void;
-    tabValues: readonly TabValue[];
-    lazy: boolean;
-    block: boolean;
-  };
-
-  export function useTabs(): {
-    selectedValue: string;
-    selectValue: (value: string) => void;
-    tabValues: readonly TabValue[];
-    lazy: boolean;
-    block: boolean;
-  };
-
-  export function TabsProvider(props: {
-    children: ReactNode;
-    value: ReturnType<typeof useTabsContextValue>;
-  }): ReactNode;
-
-  export function parseLines(
-    content: string,
-    options: {
-      metastring: string | undefined;
-      language: string | undefined;
-      magicComments: MagicCommentConfig[];
-    }
-  ): {
-    lineClassNames: { [lineIndex: number]: string[] };
-    code: string;
-  };
-
-  export function useCodeWordWrap(): {
-    readonly codeBlockRef: RefObject<HTMLPreElement>;
-    readonly isEnabled: boolean;
-    readonly isCodeScrollable: boolean;
-    readonly toggle: () => void;
-  };
-}

packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/ApiCodeBlock/Container/index.tsx

@@ -8,9 +8,10 @@
 import React, { ComponentProps } from "react";
 
 import { ThemeClassNames, usePrismTheme } from "@docusaurus/theme-common";
-import { getPrismCssVariables } from "@docusaurus/theme-common/internal";
 import clsx from "clsx";
 
+import { getPrismCssVariables } from "@theme/utils/codeBlockUtils";
+
 export default function CodeBlockContainer<T extends "div" | "pre">({
   as: As,
   ...props

packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/ApiCodeBlock/Content/String.tsx

@@ -8,13 +8,6 @@
 import React from "react";
 
 import { useThemeConfig, usePrismTheme } from "@docusaurus/theme-common";
-import {
-  parseCodeBlockTitle,
-  parseLanguage,
-  parseLines,
-  containsLineNumbers,
-  useCodeWordWrap,
-} from "@docusaurus/theme-common/internal";
 import Container from "@theme/ApiExplorer/ApiCodeBlock/Container";
 import CopyButton from "@theme/ApiExplorer/ApiCodeBlock/CopyButton";
 import ExpandButton from "@theme/ApiExplorer/ApiCodeBlock/ExpandButton";
@@ -24,6 +17,14 @@ import type { Props } from "@theme/CodeBlock/Content/String";
 import clsx from "clsx";
 import { Highlight, Language } from "prism-react-renderer";
 
+import {
+  containsLineNumbers,
+  parseCodeBlockTitle,
+  parseLanguage,
+  parseLines,
+} from "@theme/utils/codeBlockUtils";
+import { useCodeWordWrap } from "@theme/utils/useCodeWordWrap";
+
 export default function CodeBlockString({
   children,
   className: blockClassName = "",

packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/ApiCodeBlock/Line/index.tsx

@@ -7,7 +7,7 @@
 
 import React from "react";
 
-import { LineProps } from "@docusaurus/theme-common/internal";
+import type { Props as LineProps } from "@theme/CodeBlock/Line";
 import clsx from "clsx";
 
 export default function CodeBlockLine({

packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/ApiCodeBlock/index.tsx

@@ -7,8 +7,8 @@
 
 import React, { isValidElement, ReactNode } from "react";
 
-import { CodeBlockProps } from "@docusaurus/theme-common/internal";
 import useIsBrowser from "@docusaurus/useIsBrowser";
+import type { Props as CodeBlockProps } from "@theme/CodeBlock";
 import ElementContent from "@theme/ApiExplorer/ApiCodeBlock/Content/Element";
 import StringContent from "@theme/ApiExplorer/ApiCodeBlock/Content/String";
 

packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/CodeTabs/index.tsx

@@ -7,17 +7,17 @@
 
 import React, { cloneElement, ReactElement, useEffect, useRef } from "react";
 
+import useIsBrowser from "@docusaurus/useIsBrowser";
+import clsx from "clsx";
+
+import { useScrollPositionBlocker } from "@theme/utils/scrollUtils";
 import {
   sanitizeTabsChildren,
   type TabItemProps,
   type TabProps,
   TabsProvider,
-  useScrollPositionBlocker,
   useTabsContextValue,
-} from "@docusaurus/theme-common/internal";
-import useIsBrowser from "@docusaurus/useIsBrowser";
-import clsx from "clsx";
-
+} from "@theme/utils/tabsUtils";
 import { Language } from "../CodeSnippets/code-snippets-types";
 
 export interface Props {

packages/docusaurus-theme-openapi-docs/src/theme/ApiTabs/index.tsx

@@ -13,18 +13,19 @@ import React, {
   ReactElement,
 } from "react";
 
+import { translate } from "@docusaurus/Translate";
+import useIsBrowser from "@docusaurus/useIsBrowser";
+import Heading from "@theme/Heading";
+import clsx from "clsx";
+
+import { useScrollPositionBlocker } from "@theme/utils/scrollUtils";
 import {
   sanitizeTabsChildren,
   type TabItemProps,
   TabProps,
   TabsProvider,
-  useScrollPositionBlocker,
   useTabsContextValue,
-} from "@docusaurus/theme-common/internal";
-import { translate } from "@docusaurus/Translate";
-import useIsBrowser from "@docusaurus/useIsBrowser";
-import Heading from "@theme/Heading";
-import clsx from "clsx";
+} from "@theme/utils/tabsUtils";
 
 export interface TabListProps extends TabProps {
   label: string;

packages/docusaurus-theme-openapi-docs/src/theme/DiscriminatorTabs/index.tsx

@@ -13,17 +13,18 @@ import React, {
   ReactElement,
 } from "react";
 
+import useIsBrowser from "@docusaurus/useIsBrowser";
+import clsx from "clsx";
+import flatten from "lodash/flatten";
+
+import { useScrollPositionBlocker } from "@theme/utils/scrollUtils";
 import {
   sanitizeTabsChildren,
   type TabItemProps,
   TabProps,
   TabsProvider,
-  useScrollPositionBlocker,
   useTabsContextValue,
-} from "@docusaurus/theme-common/internal";
-import useIsBrowser from "@docusaurus/useIsBrowser";
-import clsx from "clsx";
-import flatten from "lodash/flatten";
+} from "@theme/utils/tabsUtils";
 
 function TabList({
   className,

packages/docusaurus-theme-openapi-docs/src/theme/MimeTabs/index.tsx

@@ -13,21 +13,22 @@ import React, {
   ReactElement,
 } from "react";
 
-import {
-  sanitizeTabsChildren,
-  type TabItemProps,
-  TabProps,
-  TabsProvider,
-  useScrollPositionBlocker,
-  useTabsContextValue,
-} from "@docusaurus/theme-common/internal";
 import useIsBrowser from "@docusaurus/useIsBrowser";
 import { setAccept } from "@theme/ApiExplorer/Accept/slice";
 import { setContentType } from "@theme/ApiExplorer/ContentType/slice";
 import { useTypedDispatch, useTypedSelector } from "@theme/ApiItem/hooks";
 import { RootState } from "@theme/ApiItem/store";
 import clsx from "clsx";
 
+import { useScrollPositionBlocker } from "@theme/utils/scrollUtils";
+import {
+  sanitizeTabsChildren,
+  type TabItemProps,
+  TabProps,
+  TabsProvider,
+  useTabsContextValue,
+} from "@theme/utils/tabsUtils";
+
 export interface Props {
   schemaType: any;
 }

packages/docusaurus-theme-openapi-docs/src/theme/OperationTabs/index.tsx

@@ -13,16 +13,17 @@ import React, {
   ReactElement,
 } from "react";
 
+import useIsBrowser from "@docusaurus/useIsBrowser";
+import clsx from "clsx";
+
+import { useScrollPositionBlocker } from "@theme/utils/scrollUtils";
 import {
   sanitizeTabsChildren,
   type TabItemProps,
   TabProps,
   TabsProvider,
-  useScrollPositionBlocker,
   useTabsContextValue,
-} from "@docusaurus/theme-common/internal";
-import useIsBrowser from "@docusaurus/useIsBrowser";
-import clsx from "clsx";
+} from "@theme/utils/tabsUtils";
 
 function TabList({
   className,

packages/docusaurus-theme-openapi-docs/src/theme/SchemaTabs/index.tsx

@@ -14,17 +14,18 @@ import React, {
   LegacyRef,
 } from "react";
 
+import useIsBrowser from "@docusaurus/useIsBrowser";
+import clsx from "clsx";
+import flatten from "lodash/flatten";
+
+import { useScrollPositionBlocker } from "@theme/utils/scrollUtils";
 import {
   sanitizeTabsChildren,
   type TabItemProps,
   TabProps,
   TabsProvider,
-  useScrollPositionBlocker,
   useTabsContextValue,
-} from "@docusaurus/theme-common/internal";
-import useIsBrowser from "@docusaurus/useIsBrowser";
-import clsx from "clsx";
-import flatten from "lodash/flatten";
+} from "@theme/utils/tabsUtils";
 
 export interface SchemaTabsProps extends TabProps {
   /**

packages/docusaurus-theme-openapi-docs/src/theme/TabItem/index.tsx

@@ -0,0 +1,61 @@
+/* ============================================================================
+ * Portions Copyright (c) Meta Platforms, Inc. and affiliates.
+ * Portions Copyright (c) Palo Alto Networks
+ *
+ * Swizzled from @docusaurus/theme-classic/src/theme/TabItem/index.tsx (MIT).
+ * Re-points useTabs to our vendored tabsUtils so that <TabItem> reads the same
+ * context our swizzled <Tabs> and OpenAPI tab variants (ApiTabs, MimeTabs,
+ * SchemaTabs, etc.) provide. See:
+ * https://github.com/PaloAltoNetworks/docusaurus-openapi-docs/issues/1140
+ *
+ * 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 ReactNode } from "react";
+
+import clsx from "clsx";
+
+import { type TabItemProps, useTabs } from "@theme/utils/tabsUtils";
+
+type Props = TabItemProps;
+import styles from "./styles.module.css";
+
+function TabItemPanel({
+  children,
+  className,
+  hidden,
+}: {
+  children: ReactNode;
+  className?: string;
+  hidden?: boolean;
+}) {
+  return (
+    <div
+      role="tabpanel"
+      className={clsx(styles.tabItem, className)}
+      {...{ hidden }}
+    >
+      {children}
+    </div>
+  );
+}
+
+export default function TabItem({
+  children,
+  className,
+  value,
+}: Props): ReactNode {
+  const { selectedValue, lazy } = useTabs();
+  const isSelected = value === selectedValue;
+
+  if (!isSelected && lazy) {
+    return null;
+  }
+
+  return (
+    <TabItemPanel className={className} hidden={!isSelected}>
+      {children}
+    </TabItemPanel>
+  );
+}

packages/docusaurus-theme-openapi-docs/src/theme/TabItem/styles.module.css

@@ -0,0 +1,3 @@
+.tabItem > *:last-child {
+  margin-bottom: 0;
+}