Upgrade demo and packages to support 3.7.0

demo/package.json

@@ -21,16 +21,16 @@
     "re-gen": "yarn clean-all-versions && yarn gen-all-versions"
   },
   "dependencies": {
-    "@docusaurus/core": "3.6.3",
-    "@docusaurus/faster": "3.6.3",
-    "@docusaurus/plugin-google-gtag": "3.6.3",
-    "@docusaurus/preset-classic": "3.6.3",
+    "@docusaurus/core": "3.7.0",
+    "@docusaurus/faster": "3.7.0",
+    "@docusaurus/plugin-google-gtag": "3.7.0",
+    "@docusaurus/preset-classic": "3.7.0",
     "clsx": "^1.1.1",
     "docusaurus-plugin-openapi-docs": "^4.3.1",
     "docusaurus-theme-openapi-docs": "^4.3.1",
     "prism-react-renderer": "^2.3.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
   },
   "browserslist": {
     "production": [

demo/src/components/BrowserWindow/index.tsx

@@ -5,13 +5,13 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, { type CSSProperties, type ReactNode } from "react";
+import React, { type CSSProperties, type ReactNode, type JSX } from "react";
 import clsx from "clsx";
 
 import styles from "./styles.module.css";
 
 interface Props {
-  children: ReactNode;
+  children: JSX.Element;
   minHeight?: number;
   url: string;
   style?: CSSProperties;

package.json

@@ -71,7 +71,7 @@
     "semver": "^7.3.5",
     "start-server-and-test": "^1.14.0",
     "ts-jest": "^27.0.6",
-    "typescript": "^4.9.5"
+    "typescript": "^5.1"
   },
   "lint-staged": {
     "**/*": "prettier --write --ignore-unknown"

packages/docusaurus-plugin-openapi-docs/src/sidebars/index.ts

@@ -154,7 +154,7 @@ function groupByTags(
       );
       const tagObject = tags.flat().find(
         (t) =>
-          tag === t.name ?? {
+          tag === t.name && {
             name: tag,
             description: `${tag} Index`,
           }

packages/docusaurus-theme-openapi-docs/package.json

@@ -69,8 +69,8 @@
     "@docusaurus/theme-common": "^3.5.0",
     "docusaurus-plugin-openapi-docs": "^4.0.0",
     "docusaurus-plugin-sass": "^0.2.3",
-    "react": "^16.8.4 || ^17.0.0 || ^18.0.0",
-    "react-dom": "^16.8.4 || ^17.0.0 || ^18.0.0"
+    "react": "^16.8.4 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+    "react-dom": "^16.8.4 || ^17.0.0 || ^18.0.0 || ^19.0.0"
   },
   "engines": {
     "node": ">=14"

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

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  * ========================================================================== */
 
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, type JSX } from "react";
 
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 import ApiCodeBlock from "@theme/ApiExplorer/ApiCodeBlock";

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

@@ -44,7 +44,7 @@ function TabList({
   tabValues,
 }: CodeTabsProps & ReturnType<typeof useTabs>) {
   const tabRefs = useRef<(HTMLLIElement | null)[]>([]);
-  const tabsScrollContainerRef = useRef<any>();
+  const tabsScrollContainerRef = useRef<any>(null);
   const { blockElementScrollPositionUntilNextRender } =
     useScrollPositionBlocker();
 
@@ -163,7 +163,11 @@ function TabList({
           tabIndex={selectedValue === value ? 0 : -1}
           aria-selected={selectedValue === value}
           key={value}
-          ref={(tabControl) => tabRefs.current.push(tabControl)}
+          ref={(tabControl) => {
+            if (tabControl) {
+              tabRefs.current.push(tabControl);
+            }
+          }}
           onKeyDown={handleKeydown}
           onClick={handleTabChange}
           {...attributes}

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

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  * ========================================================================== */
 
-import React, { useEffect, useState } from "react";
+import React, { type JSX, useEffect, useState } from "react";
 
 import { usePrismTheme } from "@docusaurus/theme-common";
 import useIsBrowser from "@docusaurus/useIsBrowser";

packages/docusaurus-theme-openapi-docs/src/theme/ApiItem/Layout/index.tsx

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  * ========================================================================== */
 
-import React from "react";
+import React, { type JSX } from "react";
 
 import { useDoc } from "@docusaurus/plugin-content-docs/client";
 import { useWindowSize } from "@docusaurus/theme-common";

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

@@ -65,7 +65,7 @@ export default function ApiItem(props: Props): JSX.Element {
   if (api) {
     try {
       api = JSON.parse(
-        zlib.inflateSync(Buffer.from(api as any, "base64")).toString()
+        zlib.inflateSync(Buffer.from(api as any, "base64") as any).toString()
       );
     } catch {}
   }

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

@@ -150,7 +150,9 @@ function TabList({
               tabIndex={selectedValue === value ? 0 : -1}
               aria-selected={selectedValue === value}
               key={value}
-              ref={(tabControl) => tabRefs.push(tabControl)}
+              ref={(tabControl) => {
+                tabRefs.push(tabControl);
+              }}
               onKeyDown={handleKeydown}
               onClick={handleTabChange}
               {...attributes}

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

@@ -136,7 +136,9 @@ function TabList({
               tabIndex={selectedValue === value ? 0 : -1}
               aria-selected={selectedValue === value}
               key={value}
-              ref={(tabControl) => tabRefs.push(tabControl)}
+              ref={(tabControl) => {
+                tabRefs.push(tabControl);
+              }}
               onKeyDown={handleKeydown}
               onClick={handleTabChange}
               {...attributes}

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

@@ -173,7 +173,9 @@ function TabList({
                 tabIndex={selectedValue === value ? 0 : -1}
                 aria-selected={selectedValue === value}
                 key={value}
-                ref={(tabControl) => tabRefs.push(tabControl)}
+                ref={(tabControl) => {
+                  tabRefs.push(tabControl);
+                }}
                 onKeyDown={handleKeydown}
                 onFocus={handleTabChange}
                 onClick={(e) => handleTabChange(e)}

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

@@ -136,7 +136,9 @@ function TabList({
                 tabIndex={selectedValue === value ? 0 : -1}
                 aria-selected={selectedValue === value}
                 key={value}
-                ref={(tabControl) => tabRefs.push(tabControl)}
+                ref={(tabControl) => {
+                  tabRefs.push(tabControl);
+                }}
                 onKeyDown={handleKeydown}
                 onFocus={handleTabChange}
                 onClick={(e) => handleTabChange(e)}

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

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  * ========================================================================== */
 
-import React, { Suspense } from "react";
+import React from "react";
 
 import BrowserOnly from "@docusaurus/BrowserOnly";
 import Details from "@theme/Details";
@@ -72,14 +72,7 @@ const ParamsDetails: React.FC<Props> = (props) => {
   return (
     <BrowserOnly fallback={<SkeletonLoader size="sm" />}>
       {() => {
-        const LazyComponent = React.lazy(() =>
-          Promise.resolve({ default: ParamsDetailsComponent })
-        );
-        return (
-          <Suspense fallback={null}>
-            <LazyComponent {...props} />
-          </Suspense>
-        );
+        return <ParamsDetailsComponent {...props} />;
       }}
     </BrowserOnly>
   );

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

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  * ========================================================================== */
 
-import React, { Suspense } from "react";
+import React from "react";
 
 import BrowserOnly from "@docusaurus/BrowserOnly";
 import Details from "@theme/Details";
@@ -148,14 +148,7 @@ const RequestSchema: React.FC<Props> = (props) => {
   return (
     <BrowserOnly fallback={<SkeletonLoader size="sm" />}>
       {() => {
-        const LazyComponent = React.lazy(() =>
-          Promise.resolve({ default: RequestSchemaComponent })
-        );
-        return (
-          <Suspense fallback={null}>
-            <LazyComponent {...props} />
-          </Suspense>
-        );
+        return <RequestSchemaComponent {...props} />;
       }}
     </BrowserOnly>
   );

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

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  * ========================================================================== */
 
-import React, { Suspense } from "react";
+import React from "react";
 
 import BrowserOnly from "@docusaurus/BrowserOnly";
 import Details from "@theme/Details";
@@ -135,14 +135,7 @@ const ResponseSchema: React.FC<Props> = (props) => {
   return (
     <BrowserOnly fallback={<SkeletonLoader size="md" />}>
       {() => {
-        const LazyComponent = React.lazy(() =>
-          Promise.resolve({ default: ResponseSchemaComponent })
-        );
-        return (
-          <Suspense fallback={null}>
-            <LazyComponent {...props} />
-          </Suspense>
-        );
+        return <ResponseSchemaComponent {...props} />;
       }}
     </BrowserOnly>
   );

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

@@ -142,7 +142,9 @@ function TabList({
             tabIndex={selectedValue === value ? 0 : -1}
             aria-selected={selectedValue === value}
             key={value}
-            ref={(tabControl) => tabRefs.push(tabControl)}
+            ref={(tabControl) => {
+              tabRefs.push(tabControl);
+            }}
             onKeyDown={handleKeydown}
             onClick={handleTabChange}
             {...attributes}