docusaurus-theme-openapi-docs 5.0.1 → 5.1.0

package/src/theme/ApiExplorer/Response/index.tsx

@@ -15,13 +15,63 @@ import ApiCodeBlock from "@theme/ApiExplorer/ApiCodeBlock";
 import { useTypedDispatch, useTypedSelector } from "@theme/ApiItem/hooks";
 import SchemaTabs from "@theme/SchemaTabs";
 import TabItem from "@theme/TabItem";
-import { OPENAPI_REQUEST, OPENAPI_RESPONSE } from "@theme/translationIds";
 import clsx from "clsx";
 import type { ApiItem } from "docusaurus-plugin-openapi-docs/src/types";
 import type { ThemeConfig } from "docusaurus-theme-openapi-docs/src/types";
 
 import { clearResponse, clearCode, clearHeaders } from "./slice";
 
+// Pretty-print a JSON string by re-indenting structural tokens only.
+// Numbers pass through verbatim, so values beyond Number.MAX_SAFE_INTEGER
+// (e.g. 19-digit IDs) keep their exact digits. Issue #1208.
+function prettyPrintJson(raw: string, indent = 2): string {
+  const pad = " ".repeat(indent);
+  let out = "";
+  let depth = 0;
+  let inString = false;
+  let escape = false;
+
+  for (let i = 0; i < raw.length; i++) {
+    const ch = raw[i];
+
+    if (inString) {
+      out += ch;
+      if (escape) escape = false;
+      else if (ch === "\\") escape = true;
+      else if (ch === '"') inString = false;
+      continue;
+    }
+
+    if (ch === " " || ch === "\t" || ch === "\n" || ch === "\r") continue;
+
+    if (ch === '"') {
+      out += ch;
+      inString = true;
+    } else if (ch === "{" || ch === "[") {
+      let j = i + 1;
+      while (j < raw.length && /\s/.test(raw[j])) j++;
+      if (raw[j] === "}" || raw[j] === "]") {
+        out += ch + raw[j];
+        i = j;
+      } else {
+        depth++;
+        out += ch + "\n" + pad.repeat(depth);
+      }
+    } else if (ch === "}" || ch === "]") {
+      depth--;
+      out += "\n" + pad.repeat(depth) + ch;
+    } else if (ch === ",") {
+      out += ",\n" + pad.repeat(depth);
+    } else if (ch === ":") {
+      out += ": ";
+    } else {
+      out += ch;
+    }
+  }
+
+  return out;
+}
+
 // TODO: We probably shouldn't attempt to format XML...
 function formatXml(xml: string) {
   const tab = "  ";
@@ -70,7 +120,8 @@ function Response({ item }: { item: ApiItem }) {
 
   if (prettyResponse) {
     try {
-      prettyResponse = JSON.stringify(JSON.parse(response), null, 2);
+      JSON.parse(response);
+      prettyResponse = prettyPrintJson(response);
     } catch {
       if (response.startsWith("<")) {
         prettyResponse = formatXml(response);
@@ -82,7 +133,10 @@ function Response({ item }: { item: ApiItem }) {
     <div className="openapi-explorer__response-container">
       <div className="openapi-explorer__response-title-container">
         <span className="openapi-explorer__response-title">
-          {translate({ id: OPENAPI_RESPONSE.TITLE, message: "Response" })}
+          {translate({
+            id: "theme.openapi.response.title",
+            message: "Response",
+          })}
         </span>
         <button
           type="button"
@@ -93,7 +147,7 @@ function Response({ item }: { item: ApiItem }) {
             dispatch(clearHeaders());
           }}
         >
-          {translate({ id: OPENAPI_RESPONSE.CLEAR, message: "Clear" })}
+          {translate({ id: "theme.openapi.response.clear", message: "Clear" })}
         </button>
       </div>
       <div
@@ -128,11 +182,11 @@ function Response({ item }: { item: ApiItem }) {
                 {prettyResponse || (
                   <p className="openapi-explorer__response-placeholder-message">
                     <Translate
-                      id={OPENAPI_RESPONSE.PLACEHOLDER}
+                      id={"theme.openapi.response.placeholder"}
                       values={{
                         code: (
                           <code>
-                            <Translate id={OPENAPI_REQUEST.SEND_BUTTON}>
+                            <Translate id={"theme.openapi.request.sendButton"}>
                               Send API Request
                             </Translate>
                           </code>
@@ -150,7 +204,7 @@ function Response({ item }: { item: ApiItem }) {
             {/* @ts-ignore */}
             <TabItem
               label={translate({
-                id: OPENAPI_RESPONSE.HEADERS_TAB,
+                id: "theme.openapi.response.headersTab",
                 message: "Headers",
               })}
               value="headers"
@@ -176,11 +230,11 @@ function Response({ item }: { item: ApiItem }) {
         ) : (
           <p className="openapi-explorer__response-placeholder-message">
             <Translate
-              id={OPENAPI_RESPONSE.PLACEHOLDER}
+              id={"theme.openapi.response.placeholder"}
               values={{
                 code: (
                   <code>
-                    <Translate id={OPENAPI_REQUEST.SEND_BUTTON}>
+                    <Translate id={"theme.openapi.request.sendButton"}>
                       Send API Request
                     </Translate>
                   </code>

package/src/theme/ApiExplorer/SecuritySchemes/index.tsx

@@ -10,7 +10,6 @@ import React from "react";
 import Link from "@docusaurus/Link";
 import { translate } from "@docusaurus/Translate";
 import { useTypedSelector } from "@theme/ApiItem/hooks";
-import { OPENAPI_SECURITY_SCHEMES } from "@theme/translationIds";
 
 function SecuritySchemes(props: any) {
   const options = useTypedSelector((state: any) => state.auth.options);
@@ -25,45 +24,54 @@ function SecuritySchemes(props: any) {
 
   const selectedAuth = options[selected];
 
-  const keyTranslations: Record<string, { id: string; message: string }> = {
-    description: {
-      id: OPENAPI_SECURITY_SCHEMES.DESCRIPTION,
-      message: "description:",
-    },
-    scheme: {
-      id: OPENAPI_SECURITY_SCHEMES.SCHEME,
-      message: "scheme:",
-    },
-    bearerFormat: {
-      id: OPENAPI_SECURITY_SCHEMES.BEARER_FORMAT,
-      message: "bearerFormat:",
-    },
-    openIdConnectUrl: {
-      id: OPENAPI_SECURITY_SCHEMES.OPEN_ID_CONNECT_URL,
-      message: "openIdConnectUrl:",
-    },
+  // Each label uses a static `translate()` call (literal id + message) so that
+  // `docusaurus write-translations` can statically extract it. A dynamic
+  // `translate({ id: someVar })` would be skipped by the extractor.
+  const renderRestLabel = (k: string): string => {
+    switch (k) {
+      case "description":
+        return translate({
+          id: "theme.openapi.securitySchemes.description",
+          message: "description:",
+        });
+      case "scheme":
+        return translate({
+          id: "theme.openapi.securitySchemes.scheme",
+          message: "scheme:",
+        });
+      case "bearerFormat":
+        return translate({
+          id: "theme.openapi.securitySchemes.bearerFormat",
+          message: "bearerFormat:",
+        });
+      case "openIdConnectUrl":
+        return translate({
+          id: "theme.openapi.securitySchemes.openIdConnectUrl",
+          message: "openIdConnectUrl:",
+        });
+      default:
+        return `${k}:`;
+    }
   };
 
   const renderRest = (rest: Record<string, any>) =>
-    Object.keys(rest).map((k) => {
-      const translation = keyTranslations[k];
-      const label = translation
-        ? translate({ id: translation.id, message: translation.message })
-        : `${k}:`;
-      return (
-        <span key={k}>
-          <strong>{label} </strong>
-          {typeof rest[k] === "object"
-            ? JSON.stringify(rest[k], null, 2)
-            : String(rest[k])}
-        </span>
-      );
-    });
+    Object.keys(rest).map((k) => (
+      <span key={k}>
+        <strong>{renderRestLabel(k)} </strong>
+        {typeof rest[k] === "object"
+          ? JSON.stringify(rest[k], null, 2)
+          : String(rest[k])}
+      </span>
+    ));
   return (
     <details className="openapi-security__details" open={false}>
       <summary className="openapi-security__summary-container">
         <h4 className="openapi-security__summary-header">
-          Authorization: {selectedAuth[0].name ?? selectedAuth[0].type}
+          {translate({
+            id: "theme.openapi.securitySchemes.authorization",
+            message: "Authorization:",
+          })}{" "}
+          {selectedAuth[0].name ?? selectedAuth[0].type}
         </h4>
       </summary>
       {selectedAuth.map((auth: any) => {
@@ -87,7 +95,7 @@ function SecuritySchemes(props: any) {
                   <span>
                     <strong>
                       {translate({
-                        id: OPENAPI_SECURITY_SCHEMES.NAME,
+                        id: "theme.openapi.securitySchemes.name",
                         message: "name:",
                       })}
                     </strong>{" "}
@@ -96,7 +104,7 @@ function SecuritySchemes(props: any) {
                   <span>
                     <strong>
                       {translate({
-                        id: OPENAPI_SECURITY_SCHEMES.TYPE,
+                        id: "theme.openapi.securitySchemes.type",
                         message: "type:",
                       })}
                     </strong>{" "}
@@ -106,7 +114,7 @@ function SecuritySchemes(props: any) {
                     <span>
                       <strong>
                         {translate({
-                          id: OPENAPI_SECURITY_SCHEMES.SCOPES,
+                          id: "theme.openapi.securitySchemes.scopes",
                           message: "scopes:",
                         })}
                       </strong>{" "}
@@ -134,7 +142,7 @@ function SecuritySchemes(props: any) {
                   <span>
                     <strong>
                       {translate({
-                        id: OPENAPI_SECURITY_SCHEMES.NAME,
+                        id: "theme.openapi.securitySchemes.name",
                         message: "name:",
                       })}
                     </strong>{" "}
@@ -143,7 +151,7 @@ function SecuritySchemes(props: any) {
                   <span>
                     <strong>
                       {translate({
-                        id: OPENAPI_SECURITY_SCHEMES.TYPE,
+                        id: "theme.openapi.securitySchemes.type",
                         message: "type:",
                       })}
                     </strong>{" "}
@@ -153,7 +161,7 @@ function SecuritySchemes(props: any) {
                     <span>
                       <strong>
                         {translate({
-                          id: OPENAPI_SECURITY_SCHEMES.SCOPES,
+                          id: "theme.openapi.securitySchemes.scopes",
                           message: "scopes:",
                         })}
                       </strong>{" "}
@@ -179,7 +187,7 @@ function SecuritySchemes(props: any) {
                 <span>
                   <strong>
                     {translate({
-                      id: OPENAPI_SECURITY_SCHEMES.NAME,
+                      id: "theme.openapi.securitySchemes.name",
                       message: "name:",
                     })}
                   </strong>{" "}
@@ -188,7 +196,7 @@ function SecuritySchemes(props: any) {
                 <span>
                   <strong>
                     {translate({
-                      id: OPENAPI_SECURITY_SCHEMES.TYPE,
+                      id: "theme.openapi.securitySchemes.type",
                       message: "type:",
                     })}
                   </strong>{" "}
@@ -197,7 +205,7 @@ function SecuritySchemes(props: any) {
                 <span>
                   <strong>
                     {translate({
-                      id: OPENAPI_SECURITY_SCHEMES.IN,
+                      id: "theme.openapi.securitySchemes.in",
                       message: "in:",
                     })}
                   </strong>{" "}
@@ -222,7 +230,7 @@ function SecuritySchemes(props: any) {
                 <span>
                   <strong>
                     {translate({
-                      id: OPENAPI_SECURITY_SCHEMES.NAME,
+                      id: "theme.openapi.securitySchemes.name",
                       message: "name:",
                     })}
                   </strong>{" "}
@@ -231,7 +239,7 @@ function SecuritySchemes(props: any) {
                 <span>
                   <strong>
                     {translate({
-                      id: OPENAPI_SECURITY_SCHEMES.TYPE,
+                      id: "theme.openapi.securitySchemes.type",
                       message: "type:",
                     })}
                   </strong>{" "}
@@ -241,7 +249,7 @@ function SecuritySchemes(props: any) {
                   <span>
                     <strong>
                       {translate({
-                        id: OPENAPI_SECURITY_SCHEMES.SCOPES,
+                        id: "theme.openapi.securitySchemes.scopes",
                         message: "scopes:",
                       })}
                     </strong>{" "}
@@ -270,7 +278,7 @@ function SecuritySchemes(props: any) {
                 <span>
                   <strong>
                     {translate({
-                      id: OPENAPI_SECURITY_SCHEMES.NAME,
+                      id: "theme.openapi.securitySchemes.name",
                       message: "name:",
                     })}
                   </strong>{" "}
@@ -279,7 +287,7 @@ function SecuritySchemes(props: any) {
                 <span>
                   <strong>
                     {translate({
-                      id: OPENAPI_SECURITY_SCHEMES.TYPE,
+                      id: "theme.openapi.securitySchemes.type",
                       message: "type:",
                     })}
                   </strong>{" "}
@@ -289,7 +297,7 @@ function SecuritySchemes(props: any) {
                   <span>
                     <strong>
                       {translate({
-                        id: OPENAPI_SECURITY_SCHEMES.SCOPES,
+                        id: "theme.openapi.securitySchemes.scopes",
                         message: "scopes:",
                       })}
                     </strong>{" "}
@@ -304,7 +312,7 @@ function SecuritySchemes(props: any) {
                     <code>
                       <strong>
                         {translate({
-                          id: OPENAPI_SECURITY_SCHEMES.FLOWS,
+                          id: "theme.openapi.securitySchemes.flows",
                           message: "flows:",
                         })}
                       </strong>{" "}
@@ -331,7 +339,7 @@ function SecuritySchemes(props: any) {
                 <span>
                   <strong>
                     {translate({
-                      id: OPENAPI_SECURITY_SCHEMES.NAME,
+                      id: "theme.openapi.securitySchemes.name",
                       message: "name:",
                     })}
                   </strong>{" "}
@@ -340,7 +348,7 @@ function SecuritySchemes(props: any) {
                 <span>
                   <strong>
                     {translate({
-                      id: OPENAPI_SECURITY_SCHEMES.TYPE,
+                      id: "theme.openapi.securitySchemes.type",
                       message: "type:",
                     })}
                   </strong>{" "}
@@ -350,7 +358,7 @@ function SecuritySchemes(props: any) {
                   <span>
                     <strong>
                       {translate({
-                        id: OPENAPI_SECURITY_SCHEMES.SCOPES,
+                        id: "theme.openapi.securitySchemes.scopes",
                         message: "scopes:",
                       })}
                     </strong>{" "}

package/src/theme/ApiExplorer/Server/index.tsx

@@ -13,7 +13,6 @@ import FormItem from "@theme/ApiExplorer/FormItem";
 import FormSelect from "@theme/ApiExplorer/FormSelect";
 import FormTextInput from "@theme/ApiExplorer/FormTextInput";
 import { useTypedDispatch, useTypedSelector } from "@theme/ApiItem/hooks";
-import { OPENAPI_SERVER } from "@theme/translationIds";
 
 import { setServer, setServerVariable } from "./slice";
 
@@ -65,7 +64,10 @@ function Server({ labelId }: ServerProps) {
     return (
       <FloatingButton
         onClick={() => setIsEditing(true)}
-        label={translate({ id: OPENAPI_SERVER.EDIT_BUTTON, message: "Edit" })}
+        label={translate({
+          id: "theme.openapi.server.editButton",
+          message: "Edit",
+        })}
       >
         <FormItem>
           <span className="openapi-explorer__server-url" title={url}>
@@ -79,7 +81,10 @@ function Server({ labelId }: ServerProps) {
     <div className="openapi-explorer__server-container">
       <FloatingButton
         onClick={() => setIsEditing(false)}
-        label={translate({ id: OPENAPI_SERVER.HIDE_BUTTON, message: "Hide" })}
+        label={translate({
+          id: "theme.openapi.server.hideButton",
+          message: "Hide",
+        })}
       >
         <FormItem>
           <FormSelect

package/src/theme/ApiItem/index.tsx

@@ -20,6 +20,7 @@ import DocItemLayout from "@theme/ApiItem/Layout";
 import CodeBlock from "@theme/CodeBlock";
 import type { Props } from "@theme/DocItem";
 import DocItemMetadata from "@theme/DocItem/Metadata";
+import { SchemaExpansionProvider } from "@theme/SchemaExpansion";
 import SkeletonLoader from "@theme/SkeletonLoader";
 import clsx from "clsx";
 import type {
@@ -122,7 +123,24 @@ export default function ApiItem(props: Props): JSX.Element {
       (param: { in: "path" | "query" | "header" | "cookie" }) => {
         const paramType = param.in;
         const paramsArray: ParameterObject[] = params[paramType];
-        paramsArray?.push(param as ParameterObject);
+        const p = param as any;
+        // Prefill order: schema.default, then example sources. `default` is
+        // semantically a server-side fallback, so for required params authors
+        // typically rely on `example` / `examples`. See #544 and #1079.
+        const firstNamedExample =
+          p.examples && typeof p.examples === "object"
+            ? (Object.values(p.examples)[0] as any)?.value
+            : undefined;
+        const prefill =
+          p.schema?.default ??
+          p.example ??
+          p.schema?.example ??
+          firstNamedExample;
+        const initialized =
+          prefill !== undefined
+            ? ({ ...param, value: prefill } as unknown as ParameterObject)
+            : (param as ParameterObject);
+        paramsArray?.push(initialized);
       }
     );
     const auth = createAuth({
@@ -172,18 +190,20 @@ export default function ApiItem(props: Props): JSX.Element {
           <DocItemMetadata />
           <DocItemLayout>
             <Provider store={store2}>
-              <div className={clsx("row", "theme-api-markdown")}>
-                <div className="col col--7 openapi-left-panel__container">
-                  <MDXComponent />
-                </div>
-                <div className="col col--5 openapi-right-panel__container">
-                  <BrowserOnly fallback={<SkeletonLoader size="lg" />}>
-                    {() => {
-                      return <ApiExplorer item={api} infoPath={infoPath} />;
-                    }}
-                  </BrowserOnly>
+              <SchemaExpansionProvider>
+                <div className={clsx("row", "theme-api-markdown")}>
+                  <div className="col col--7 openapi-left-panel__container">
+                    <MDXComponent />
+                  </div>
+                  <div className="col col--5 openapi-right-panel__container">
+                    <BrowserOnly fallback={<SkeletonLoader size="lg" />}>
+                      {() => {
+                        return <ApiExplorer item={api} infoPath={infoPath} />;
+                      }}
+                    </BrowserOnly>
+                  </div>
                 </div>
-              </div>
+              </SchemaExpansionProvider>
             </Provider>
           </DocItemLayout>
         </HtmlClassNameProvider>
@@ -195,16 +215,18 @@ export default function ApiItem(props: Props): JSX.Element {
         <HtmlClassNameProvider className={docHtmlClassName}>
           <DocItemMetadata />
           <DocItemLayout>
-            <div className={clsx("row", "theme-api-markdown")}>
-              <div className="col col--7 openapi-left-panel__container schema">
-                <MDXComponent />
-              </div>
-              <div className="col col--5 openapi-right-panel__container">
-                <CodeBlock language="json" title={`${frontMatter.title}`}>
-                  {JSON.stringify(sample, null, 2)}
-                </CodeBlock>
+            <SchemaExpansionProvider>
+              <div className={clsx("row", "theme-api-markdown")}>
+                <div className="col col--7 openapi-left-panel__container schema">
+                  <MDXComponent />
+                </div>
+                <div className="col col--5 openapi-right-panel__container">
+                  <CodeBlock language="json" title={`${frontMatter.title}`}>
+                    {JSON.stringify(sample, null, 2)}
+                  </CodeBlock>
+                </div>
               </div>
-            </div>
+            </SchemaExpansionProvider>
           </DocItemLayout>
         </HtmlClassNameProvider>
       </DocProvider>

package/src/theme/ApiTabs/index.tsx

@@ -13,19 +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 { OPENAPI_TABS } from "@theme/translationIds";
-import clsx from "clsx";
+} from "@theme/utils/tabsUtils";
 
 export interface TabListProps extends TabProps {
   label: string;
@@ -39,7 +39,7 @@ function TabList({
   selectValue,
   tabValues,
   label = translate({
-    id: OPENAPI_TABS.RESPONSES_LABEL,
+    id: "theme.openapi.tabs.responses.label",
     message: "Responses",
   }),
   id = "responses",

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

package/src/theme/Example/index.tsx

@@ -11,7 +11,6 @@ import { translate } from "@docusaurus/Translate";
 import { ExampleObject } from "@theme/ParamsItem";
 import SchemaTabs from "@theme/SchemaTabs";
 import TabItem from "@theme/TabItem";
-import { OPENAPI_SCHEMA_ITEM } from "@theme/translationIds";
 
 const EXAMPLE_CLASS_NAME = "openapi-example";
 const EXAMPLES_CLASS_NAME = "openapi-examples";
@@ -58,7 +57,7 @@ const renderExample = (example: ExampleType) => {
     <div className={EXAMPLE_CLASS_NAME}>
       <strong>
         {translate({
-          id: OPENAPI_SCHEMA_ITEM.EXAMPLE,
+          id: "theme.openapi.schemaItem.example",
           message: "Example:",
         })}{" "}
       </strong>
@@ -121,7 +120,7 @@ export const renderExamplesRecord = (
     <div className={EXAMPLES_CLASS_NAME}>
       <strong>
         {translate({
-          id: OPENAPI_SCHEMA_ITEM.EXAMPLES,
+          id: "theme.openapi.schemaItem.examples",
           message: "Examples:",
         })}
       </strong>
@@ -153,7 +152,7 @@ const renderExampleObject = (
         <p>
           <strong>
             {translate({
-              id: OPENAPI_SCHEMA_ITEM.DESCRIPTION,
+              id: "theme.openapi.schemaItem.description",
               message: "Description:",
             })}{" "}
           </strong>

package/src/theme/MimeTabs/index.tsx

@@ -13,14 +13,6 @@ 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";
@@ -28,6 +20,15 @@ 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;
 }

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