docusaurus-theme-openapi-docs 5.0.2 → 5.1.0

package/lib/markdown/schema.js

@@ -9,7 +9,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.getSchemaName = getSchemaName;
 exports.getQualifierMessage = getQualifierMessage;
 const Translate_1 = require("@docusaurus/Translate");
-const translationIds_1 = require("../theme/translationIds");
 /**
  * Extracts enum values from a schema, including when wrapped in allOf.
  */
@@ -42,13 +41,36 @@ function getTypeFromSchema(schema) {
     }
     return undefined;
 }
+// OpenAPI 3.1 / JSON Schema 2020-12 allows `type` to be an array of type names
+// (e.g. `["string", "null"]`). Normalize to a single name and a pretty-printed
+// union form joined with ` | `.
+function normalizeType(type) {
+    if (Array.isArray(type)) {
+        const filtered = type.filter((t) => typeof t === "string");
+        if (filtered.length === 0)
+            return { isUnion: false };
+        if (filtered.length === 1)
+            return { single: filtered[0], isUnion: false };
+        return { pretty: filtered.join(" | "), isUnion: true };
+    }
+    if (typeof type === "string")
+        return { single: type, isUnion: false };
+    return { isUnion: false };
+}
 function prettyName(schema, circular) {
     // Handle enum-only schemas (valid in JSON Schema)
     // When enum is present without explicit type, treat as string
     if (schema.enum && !schema.type) {
         return "string";
     }
+    const t = normalizeType(schema.type);
     if (schema.format) {
+        if (t.single) {
+            return `${t.single}<${schema.format}>`;
+        }
+        if (t.isUnion) {
+            return `(${t.pretty})<${schema.format}>`;
+        }
         return schema.format;
     }
     if (schema.allOf) {
@@ -72,22 +94,23 @@ function prettyName(schema, circular) {
     if (schema.anyOf) {
         return "object";
     }
-    if (schema.type === "object") {
-        return schema.xml?.name ?? schema.type;
-        // return schema.type;
+    if (t.single === "object") {
+        return schema.xml?.name ?? t.single;
     }
-    if (schema.type === "array") {
-        return schema.xml?.name ?? schema.type;
-        // return schema.type;
+    if (t.single === "array") {
+        return schema.xml?.name ?? t.single;
     }
-    if (Array.isArray(schema.type)) {
-        return schema.type.join(" | ");
+    if (t.isUnion) {
+        return t.pretty;
     }
-    return schema.title ?? schema.type;
+    return schema.title ?? t.single;
 }
 function getSchemaName(schema, circular) {
     if (schema.items) {
-        return prettyName(schema.items, circular) + "[]";
+        const items = schema.items;
+        const inner = getSchemaName(items, circular);
+        const needsParens = Array.isArray(items.type) && items.type.length > 1;
+        return needsParens ? `(${inner})[]` : `${inner}[]`;
     }
     return prettyName(schema, circular) ?? "";
 }
@@ -106,7 +129,7 @@ function getQualifierMessage(schema) {
         return getQualifierMessage(schema.items);
     }
     let message = `**${(0, Translate_1.translate)({
-        id: translationIds_1.OPENAPI_SCHEMA_ITEM.POSSIBLE_VALUES,
+        id: "theme.openapi.schemaItem.possibleValues",
         message: "Possible values:",
     })}** `;
     let qualifierGroups = [];
@@ -122,11 +145,11 @@ function getQualifierMessage(schema) {
         let minLength;
         let maxLength;
         const charactersMessage = (0, Translate_1.translate)({
-            id: translationIds_1.OPENAPI_SCHEMA_ITEM.CHARACTERS,
+            id: "theme.openapi.schemaItem.characters",
             message: "characters",
         });
         const nonEmptyMessage = (0, Translate_1.translate)({
-            id: translationIds_1.OPENAPI_SCHEMA_ITEM.NON_EMPTY,
+            id: "theme.openapi.schemaItem.nonEmpty",
             message: "non-empty",
         });
         if (schema.minLength && schema.minLength > 1) {
@@ -187,7 +210,7 @@ function getQualifierMessage(schema) {
     }
     if (schema.pattern) {
         const expressionMessage = (0, Translate_1.translate)({
-            id: translationIds_1.OPENAPI_SCHEMA_ITEM.EXPRESSION,
+            id: "theme.openapi.schemaItem.expression",
             message: "Value must match regular expression",
         });
         qualifierGroups.push(`${expressionMessage} \`${schema.pattern}\``);

package/lib/markdown/schema.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/markdown/schema.test.js

@@ -0,0 +1,86 @@
+"use strict";
+/* ============================================================================
+ * Copyright (c) Palo Alto Networks
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ * ========================================================================== */
+Object.defineProperty(exports, "__esModule", { value: true });
+jest.mock("@docusaurus/Translate", () => ({
+    translate: ({ message }) => message,
+}), { virtual: true });
+const schema_1 = require("./schema");
+describe("getSchemaName", () => {
+    it("returns the type for a primitive schema", () => {
+        expect((0, schema_1.getSchemaName)({ type: "string" })).toBe("string");
+    });
+    it("appends [] for an array of primitives", () => {
+        const schema = {
+            type: "array",
+            items: { type: "string" },
+        };
+        expect((0, schema_1.getSchemaName)(schema)).toBe("string[]");
+    });
+    it("appends [][] for an array of arrays of primitives", () => {
+        const schema = {
+            type: "array",
+            items: { type: "array", items: { type: "string" } },
+        };
+        expect((0, schema_1.getSchemaName)(schema)).toBe("string[][]");
+    });
+    it("appends [][] for an array of arrays of objects (issue #1114)", () => {
+        const schema = {
+            type: "array",
+            items: {
+                type: "array",
+                items: { type: "object", properties: { foo: { type: "string" } } },
+            },
+        };
+        expect((0, schema_1.getSchemaName)(schema)).toBe("object[][]");
+    });
+    it("handles three levels of array nesting", () => {
+        const schema = {
+            type: "array",
+            items: {
+                type: "array",
+                items: { type: "array", items: { type: "integer" } },
+            },
+        };
+        expect((0, schema_1.getSchemaName)(schema)).toBe("integer[][][]");
+    });
+    it("joins OpenAPI 3.1 type arrays with ` | ` (issue #950)", () => {
+        const schema = { type: ["string", "null"] };
+        expect((0, schema_1.getSchemaName)(schema)).toBe("string | null");
+    });
+    it("unwraps a single-element type array", () => {
+        const schema = { type: ["integer"] };
+        expect((0, schema_1.getSchemaName)(schema)).toBe("integer");
+    });
+    it("renders single type with format as `type<format>`", () => {
+        const schema = {
+            type: "string",
+            format: "uuid",
+        };
+        expect((0, schema_1.getSchemaName)(schema)).toBe("string<uuid>");
+    });
+    it("renders type union with format", () => {
+        const schema = {
+            type: ["string", "null"],
+            format: "uuid",
+        };
+        expect((0, schema_1.getSchemaName)(schema)).toBe("(string | null)<uuid>");
+    });
+    it("resolves type from an allOf wrapper that contains an enum", () => {
+        const schema = {
+            allOf: [{ type: "string", enum: ["a", "b"] }],
+        };
+        expect((0, schema_1.getSchemaName)(schema)).toBe("string");
+    });
+    it("renders array of items whose type is a union", () => {
+        const schema = {
+            type: "array",
+            items: { type: ["string", "null"] },
+        };
+        expect((0, schema_1.getSchemaName)(schema)).toBe("(string | null)[]");
+    });
+});

package/lib/theme/ApiExplorer/ApiCodeBlock/Container/index.js

@@ -14,11 +14,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = CodeBlockContainer;
 const react_1 = __importDefault(require("react"));
 const theme_common_1 = require("@docusaurus/theme-common");
-const internal_1 = require("@docusaurus/theme-common/internal");
 const clsx_1 = __importDefault(require("clsx"));
+const codeBlockUtils_1 = require("@theme/utils/codeBlockUtils");
 function CodeBlockContainer({ as: As, ...props }) {
   const prismTheme = (0, theme_common_1.usePrismTheme)();
-  const prismCssVariables = (0, internal_1.getPrismCssVariables)(prismTheme);
+  const prismCssVariables = (0, codeBlockUtils_1.getPrismCssVariables)(
+    prismTheme
+  );
   return react_1.default.createElement(
     As,
     // Polymorphic components are hard to type, without `oneOf` generics

package/lib/theme/ApiExplorer/ApiCodeBlock/Content/String.js

@@ -14,7 +14,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = CodeBlockString;
 const react_1 = __importDefault(require("react"));
 const theme_common_1 = require("@docusaurus/theme-common");
-const internal_1 = require("@docusaurus/theme-common/internal");
 const Container_1 = __importDefault(
   require("@theme/ApiExplorer/ApiCodeBlock/Container")
 );
@@ -30,6 +29,8 @@ const WordWrapButton_1 = __importDefault(
 );
 const clsx_1 = __importDefault(require("clsx"));
 const prism_react_renderer_1 = require("prism-react-renderer");
+const codeBlockUtils_1 = require("@theme/utils/codeBlockUtils");
+const useCodeWordWrap_1 = require("@theme/utils/useCodeWordWrap");
 function CodeBlockString({
   children,
   className: blockClassName = "",
@@ -43,21 +44,23 @@ function CodeBlockString({
   } = (0, theme_common_1.useThemeConfig)();
   const language =
     languageProp ??
-    (0, internal_1.parseLanguage)(blockClassName) ??
+    (0, codeBlockUtils_1.parseLanguage)(blockClassName) ??
     defaultLanguage;
   const prismTheme = (0, theme_common_1.usePrismTheme)();
-  const wordWrap = (0, internal_1.useCodeWordWrap)();
+  const wordWrap = (0, useCodeWordWrap_1.useCodeWordWrap)();
   // We still parse the metastring in case we want to support more syntax in the
   // future. Note that MDX doesn't strip quotes when parsing metastring:
   // "title=\"xyz\"" => title: "\"xyz\""
-  const title = (0, internal_1.parseCodeBlockTitle)(metastring) || titleProp;
-  const { lineClassNames, code } = (0, internal_1.parseLines)(children, {
+  const title =
+    (0, codeBlockUtils_1.parseCodeBlockTitle)(metastring) || titleProp;
+  const { lineClassNames, code } = (0, codeBlockUtils_1.parseLines)(children, {
     metastring,
     language,
     magicComments,
   });
   const showLineNumbers =
-    showLineNumbersProp ?? (0, internal_1.containsLineNumbers)(metastring);
+    showLineNumbersProp ??
+    (0, codeBlockUtils_1.containsLineNumbers)(metastring);
   return react_1.default.createElement(
     Container_1.default,
     {

package/lib/theme/ApiExplorer/ApiCodeBlock/Line/index.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
-import { LineProps } from "@docusaurus/theme-common/internal";
+import type { Props as LineProps } from "@theme/CodeBlock/Line";
 export default function CodeBlockLine({ line, classNames, showLineNumbers, getLineProps, getTokenProps, }: LineProps): React.JSX.Element;

package/lib/theme/ApiExplorer/ApiCodeBlock/index.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
-import { CodeBlockProps } from "@docusaurus/theme-common/internal";
+import type { Props as CodeBlockProps } from "@theme/CodeBlock";
 export default function ApiCodeBlock({ children: rawChildren, ...props }: CodeBlockProps): React.JSX.Element;

package/lib/theme/ApiExplorer/Authorization/index.js

@@ -19,7 +19,6 @@ const FormTextInput_1 = __importDefault(
   require("@theme/ApiExplorer/FormTextInput")
 );
 const hooks_1 = require("@theme/ApiItem/hooks");
-const translationIds_1 = require("@theme/translationIds");
 const slice_1 = require("./slice");
 function Authorization() {
   const data = (0, hooks_1.useTypedSelector)((state) => state.auth.data);
@@ -42,7 +41,7 @@ function Authorization() {
         null,
         react_1.default.createElement(FormSelect_1.default, {
           label: (0, Translate_1.translate)({
-            id: translationIds_1.OPENAPI_AUTH.SECURITY_SCHEME,
+            id: "theme.openapi.auth.securityScheme",
             message: "Security Scheme",
           }),
           options: optionKeys,
@@ -59,11 +58,11 @@ function Authorization() {
           { key: a.key + "-bearer" },
           react_1.default.createElement(FormTextInput_1.default, {
             label: (0, Translate_1.translate)({
-              id: translationIds_1.OPENAPI_AUTH.BEARER_TOKEN,
+              id: "theme.openapi.auth.bearerToken",
               message: "Bearer Token",
             }),
             placeholder: (0, Translate_1.translate)({
-              id: translationIds_1.OPENAPI_AUTH.BEARER_TOKEN,
+              id: "theme.openapi.auth.bearerToken",
               message: "Bearer Token",
             }),
             password: true,
@@ -87,11 +86,11 @@ function Authorization() {
           { key: a.key + "-oauth2" },
           react_1.default.createElement(FormTextInput_1.default, {
             label: (0, Translate_1.translate)({
-              id: translationIds_1.OPENAPI_AUTH.BEARER_TOKEN,
+              id: "theme.openapi.auth.bearerToken",
               message: "Bearer Token",
             }),
             placeholder: (0, Translate_1.translate)({
-              id: translationIds_1.OPENAPI_AUTH.BEARER_TOKEN,
+              id: "theme.openapi.auth.bearerToken",
               message: "Bearer Token",
             }),
             password: true,
@@ -118,11 +117,11 @@ function Authorization() {
             null,
             react_1.default.createElement(FormTextInput_1.default, {
               label: (0, Translate_1.translate)({
-                id: translationIds_1.OPENAPI_AUTH.USERNAME,
+                id: "theme.openapi.auth.username",
                 message: "Username",
               }),
               placeholder: (0, Translate_1.translate)({
-                id: translationIds_1.OPENAPI_AUTH.USERNAME,
+                id: "theme.openapi.auth.username",
                 message: "Username",
               }),
               value: data[a.key].username ?? "",
@@ -143,11 +142,11 @@ function Authorization() {
             null,
             react_1.default.createElement(FormTextInput_1.default, {
               label: (0, Translate_1.translate)({
-                id: translationIds_1.OPENAPI_AUTH.PASSWORD,
+                id: "theme.openapi.auth.password",
                 message: "Password",
               }),
               placeholder: (0, Translate_1.translate)({
-                id: translationIds_1.OPENAPI_AUTH.PASSWORD,
+                id: "theme.openapi.auth.password",
                 message: "Password",
               }),
               password: true,

package/lib/theme/ApiExplorer/Body/index.js

@@ -79,7 +79,6 @@ const hooks_1 = require("@theme/ApiItem/hooks");
 const Markdown_1 = __importDefault(require("@theme/Markdown"));
 const SchemaTabs_1 = __importDefault(require("@theme/SchemaTabs"));
 const TabItem_1 = __importDefault(require("@theme/TabItem"));
-const translationIds_1 = require("@theme/translationIds");
 const createSchemaExample_1 = require("docusaurus-plugin-openapi-docs/lib/openapi/createSchemaExample");
 const xml_formatter_1 = __importDefault(require("xml-formatter"));
 const FormBodyItem_1 = __importDefault(require("./FormBodyItem"));
@@ -340,7 +339,7 @@ function Body({
         placeholder:
           schema.description ||
           (0, Translate_1.translate)({
-            id: translationIds_1.OPENAPI_REQUEST.BODY_TITLE,
+            id: "theme.openapi.request.body.title",
             message: "Body",
           }),
         onChange: (file) => {
@@ -373,7 +372,7 @@ function Body({
           TabItem_1.default,
           {
             label: (0, Translate_1.translate)({
-              id: translationIds_1.OPENAPI_BODY.EXAMPLE_FROM_SCHEMA,
+              id: "theme.openapi.body.exampleFromSchema",
               message: "Example (from schema)",
             }),
             value: "Example (from schema)",
@@ -465,7 +464,7 @@ function Body({
           TabItem_1.default,
           {
             label: (0, Translate_1.translate)({
-              id: translationIds_1.OPENAPI_BODY.EXAMPLE_FROM_SCHEMA,
+              id: "theme.openapi.body.exampleFromSchema",
               message: "Example (from schema)",
             }),
             value: "Example (from schema)",
@@ -517,7 +516,7 @@ function Body({
           TabItem_1.default,
           {
             label: (0, Translate_1.translate)({
-              id: translationIds_1.OPENAPI_BODY.EXAMPLE_FROM_SCHEMA,
+              id: "theme.openapi.body.exampleFromSchema",
               message: "Example (from schema)",
             }),
             value: "Example (from schema)",

package/lib/theme/ApiExplorer/CodeSnippets/index.js

@@ -69,6 +69,7 @@ var __importDefault =
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.languageSet = void 0;
 const react_1 = __importStar(require("react"));
+const theme_common_1 = require("@docusaurus/theme-common");
 const useDocusaurusContext_1 = __importDefault(
   require("@docusaurus/useDocusaurusContext")
 );
@@ -94,6 +95,17 @@ function CodeTab({ children, hidden, className }) {
     children
   );
 }
+/** Align with Docusaurus `<Tabs groupId="code-samples">` persisted tab value. */
+function resolveOuterLanguageFromPersistedTab(persistedTab, langs) {
+  if (langs.length === 1) {
+    return langs[0];
+  }
+  const matched = langs.find((lang) => lang.language === persistedTab);
+  if (matched) {
+    return matched;
+  }
+  return langs[0];
+}
 function CodeSnippets({
   postman,
   codeSamples,
@@ -163,43 +175,62 @@ function CodeSnippets({
     auth: cleanedAuth,
     encoding,
   });
+  const themeConfig = siteConfig.themeConfig;
+  const hideGeneratedSnippets =
+    themeConfig?.api?.hideGeneratedSnippets ?? false;
   // User-defined languages array
   // Can override languageSet, change order of langs, override options and variants
   const userDefinedLanguageSet =
     siteConfig?.themeConfig?.languageTabs ?? exports.languageSet;
-  // Filter languageSet by user-defined langs
-  const filteredLanguageSet = exports.languageSet.filter((ls) => {
-    return userDefinedLanguageSet?.some((lang) => {
-      return lang.language === ls.language;
+  const mergedLangs = (0, react_1.useMemo)(() => {
+    const filteredLanguageSet = exports.languageSet.filter((ls) => {
+      return userDefinedLanguageSet?.some((lang) => {
+        return lang.language === ls.language;
+      });
     });
-  });
-  // Merge user-defined langs into languageSet
-  const mergedLangs = (0, languages_1.mergeCodeSampleLanguage)(
-    (0, languages_1.mergeArraysbyLanguage)(
-      userDefinedLanguageSet,
-      filteredLanguageSet
-    ),
-    codeSamples
+    return (0, languages_1.mergeCodeSampleLanguage)(
+      (0, languages_1.mergeArraysbyLanguage)(
+        userDefinedLanguageSet,
+        filteredLanguageSet
+      ),
+      codeSamples
+    );
+  }, [userDefinedLanguageSet, codeSamples]);
+  const [persistedOuterTab] = (0, theme_common_1.useStorageSlot)(
+    "docusaurus.tab.code-samples"
   );
-  // Read defaultLang from localStorage
-  const defaultLang = mergedLangs.filter(
-    (lang) =>
-      lang.language === localStorage.getItem("docusaurus.tab.code-samples")
+  const initialOuterLanguage = (0, react_1.useMemo)(
+    () => resolveOuterLanguageFromPersistedTab(persistedOuterTab, mergedLangs),
+    [persistedOuterTab, mergedLangs]
   );
   const [selectedVariant, setSelectedVariant] = (0, react_1.useState)();
   const [selectedSample, setSelectedSample] = (0, react_1.useState)();
-  const [language, setLanguage] = (0, react_1.useState)(() => {
-    // Return first index if only 1 user-defined language exists
-    if (mergedLangs.length === 1) {
-      return mergedLangs[0];
-    }
-    // Fall back to language in localStorage or first user-defined language
-    return defaultLang[0] ?? mergedLangs[0];
-  });
+  const [language, setLanguage] = (0, react_1.useState)(() =>
+    resolveOuterLanguageFromPersistedTab(persistedOuterTab, mergedLangs)
+  );
+  (0, react_1.useEffect)(() => {
+    const next = resolveOuterLanguageFromPersistedTab(
+      persistedOuterTab,
+      mergedLangs
+    );
+    setLanguage((prev) => {
+      if (prev?.language !== next.language) {
+        return next;
+      }
+      return mergedLangs.find((l) => l.language === next.language) ?? next;
+    });
+  }, [persistedOuterTab, mergedLangs]);
   const [codeText, setCodeText] = (0, react_1.useState)("");
   const [codeSampleCodeText, setCodeSampleCodeText] = (0, react_1.useState)(
     () => (0, languages_1.getCodeSampleSourceFromLanguage)(language)
   );
+  // Reset selectedSample whenever the active language changes so the inner
+  // tab strip falls back to its first sample instead of trying to match an
+  // id that belongs to a different language's samples.
+  (0, react_1.useEffect)(() => {
+    setSelectedSample(language?.samples?.[0]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [language?.language]);
   (0, react_1.useEffect)(() => {
     if (language && !!language.sample) {
       setCodeSampleCodeText(
@@ -305,7 +336,7 @@ function CodeSnippets({
           setSelectedSample: setSelectedSample,
         },
         languageSet: mergedLangs,
-        defaultValue: defaultLang[0]?.language ?? mergedLangs[0].language,
+        defaultValue: initialOuterLanguage.language,
         lazy: true,
       },
       mergedLangs.map((lang) => {
@@ -330,7 +361,10 @@ function CodeSnippets({
                 },
                 includeSample: true,
                 currentLanguage: lang,
-                defaultValue: selectedSample,
+                defaultValue:
+                  selectedSample && lang.samples.includes(selectedSample)
+                    ? selectedSample
+                    : lang.samples[0],
                 languageSet: mergedLangs,
                 lazy: true,
               },
@@ -342,7 +376,7 @@ function CodeSnippets({
                     label: lang.samplesLabels
                       ? lang.samplesLabels[index]
                       : sample,
-                    key: `${lang.language}-${lang.sample}`,
+                    key: `${lang.language}-${sample}`,
                     attributes: {
                       className: `openapi-tabs__code-item--sample`,
                     },
@@ -359,43 +393,44 @@ function CodeSnippets({
                 );
               })
             ),
-          react_1.default.createElement(
-            CodeTabs_1.default,
-            {
-              className: "openapi-tabs__code-container-inner",
-              action: {
-                setLanguage: setLanguage,
-                setSelectedVariant: setSelectedVariant,
-              },
-              includeVariant: true,
-              currentLanguage: lang,
-              defaultValue: selectedVariant,
-              languageSet: mergedLangs,
-              lazy: true,
-            },
-            lang.variants.map((variant, index) => {
-              return react_1.default.createElement(
-                CodeTab,
-                {
-                  value: variant.toLowerCase(),
-                  label: variant.toUpperCase(),
-                  key: `${lang.language}-${lang.variant}`,
-                  attributes: {
-                    className: `openapi-tabs__code-item--variant`,
-                  },
+          !(hideGeneratedSnippets && lang.samples?.length) &&
+            react_1.default.createElement(
+              CodeTabs_1.default,
+              {
+                className: "openapi-tabs__code-container-inner",
+                action: {
+                  setLanguage: setLanguage,
+                  setSelectedVariant: setSelectedVariant,
                 },
-                react_1.default.createElement(
-                  ApiCodeBlock_1.default,
+                includeVariant: true,
+                currentLanguage: lang,
+                defaultValue: selectedVariant,
+                languageSet: mergedLangs,
+                lazy: true,
+              },
+              lang.variants.map((variant, index) => {
+                return react_1.default.createElement(
+                  CodeTab,
                   {
-                    language: lang.highlight,
-                    className: "openapi-explorer__code-block",
-                    showLineNumbers: true,
+                    value: variant.toLowerCase(),
+                    label: variant.toUpperCase(),
+                    key: `${lang.language}-${variant}`,
+                    attributes: {
+                      className: `openapi-tabs__code-item--variant`,
+                    },
                   },
-                  codeText
-                )
-              );
-            })
-          )
+                  react_1.default.createElement(
+                    ApiCodeBlock_1.default,
+                    {
+                      language: lang.highlight,
+                      className: "openapi-explorer__code-block",
+                      showLineNumbers: true,
+                    },
+                    codeText
+                  )
+                );
+              })
+            )
         );
       })
     )

package/lib/theme/ApiExplorer/CodeSnippets/languages.js

@@ -27,11 +27,22 @@ function mergeCodeSampleLanguage(languages, codeSamples) {
       ({ lang }) => lang === language.codeSampleLanguage
     );
     if (languageCodeSamples.length) {
-      const samples = languageCodeSamples.map(({ lang }) => lang);
       const samplesLabels = languageCodeSamples.map(
         ({ label, lang }) => label || lang
       );
       const samplesSources = languageCodeSamples.map(({ source }) => source);
+      // Build a unique id per sample for use as the inner Tab's `value`.
+      // Prefer `${lang}-${label}`; fall back to `${lang}-${index}` when no
+      // label is provided. Defensively suffix with `-${index}` on collision
+      // so duplicate-label specs render two visually identical tabs instead
+      // of crashing Docusaurus's unique-value check.
+      const seen = new Set();
+      const samples = languageCodeSamples.map((cs, i) => {
+        const base = cs.label ? `${cs.lang}-${cs.label}` : `${cs.lang}-${i}`;
+        const id = seen.has(base) ? `${base}-${i}` : base;
+        seen.add(id);
+        return id;
+      });
       return {
         ...language,
         sample: samples[0],

package/lib/theme/ApiExplorer/CodeSnippets/languages.test.d.ts

@@ -0,0 +1 @@
+export {};