docusaurus-theme-openapi-docs 5.0.2 → 5.1.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "docusaurus-theme-openapi-docs",
   "description": "OpenAPI theme for Docusaurus.",
-  "version": "5.0.2",
+  "version": "5.1.0",
   "license": "MIT",
   "keywords": [
     "openapi",
@@ -37,8 +37,8 @@
     "@types/pako": "^2.0.3",
     "@types/postman-collection": "^3.5.11",
     "@types/react-modal": "^3.16.3",
-    "concurrently": "^9.2.0",
-    "docusaurus-plugin-openapi-docs": "^5.0.2",
+    "concurrently": "^10.0.3",
+    "docusaurus-plugin-openapi-docs": "^5.1.0",
     "docusaurus-plugin-sass": "^0.2.6",
     "eslint-plugin-prettier": "^5.5.1"
   },
@@ -82,5 +82,5 @@
   "engines": {
     "node": ">=14"
   },
-  "gitHead": "2cfff9eee1b2fadb15c21bf8eff21c32121b16e7"
+  "gitHead": "977ec415b37207142f71f6e3d3780df834301d31"
 }

package/src/markdown/schema.test.ts

@@ -0,0 +1,102 @@
+/* ============================================================================
+ * 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.
+ * ========================================================================== */
+
+jest.mock(
+  "@docusaurus/Translate",
+  () => ({
+    translate: ({ message }: { message: string }) => message,
+  }),
+  { virtual: true }
+);
+
+import { getSchemaName } from "./schema";
+import { SchemaObject } from "../types";
+
+describe("getSchemaName", () => {
+  it("returns the type for a primitive schema", () => {
+    expect(getSchemaName({ type: "string" } as SchemaObject)).toBe("string");
+  });
+
+  it("appends [] for an array of primitives", () => {
+    const schema: SchemaObject = {
+      type: "array",
+      items: { type: "string" },
+    } as SchemaObject;
+    expect(getSchemaName(schema)).toBe("string[]");
+  });
+
+  it("appends [][] for an array of arrays of primitives", () => {
+    const schema: SchemaObject = {
+      type: "array",
+      items: { type: "array", items: { type: "string" } },
+    } as SchemaObject;
+    expect(getSchemaName(schema)).toBe("string[][]");
+  });
+
+  it("appends [][] for an array of arrays of objects (issue #1114)", () => {
+    const schema: SchemaObject = {
+      type: "array",
+      items: {
+        type: "array",
+        items: { type: "object", properties: { foo: { type: "string" } } },
+      },
+    } as SchemaObject;
+    expect(getSchemaName(schema)).toBe("object[][]");
+  });
+
+  it("handles three levels of array nesting", () => {
+    const schema: SchemaObject = {
+      type: "array",
+      items: {
+        type: "array",
+        items: { type: "array", items: { type: "integer" } },
+      },
+    } as SchemaObject;
+    expect(getSchemaName(schema)).toBe("integer[][][]");
+  });
+
+  it("joins OpenAPI 3.1 type arrays with ` | ` (issue #950)", () => {
+    const schema = { type: ["string", "null"] } as unknown as SchemaObject;
+    expect(getSchemaName(schema)).toBe("string | null");
+  });
+
+  it("unwraps a single-element type array", () => {
+    const schema = { type: ["integer"] } as unknown as SchemaObject;
+    expect(getSchemaName(schema)).toBe("integer");
+  });
+
+  it("renders single type with format as `type<format>`", () => {
+    const schema = {
+      type: "string",
+      format: "uuid",
+    } as SchemaObject;
+    expect(getSchemaName(schema)).toBe("string<uuid>");
+  });
+
+  it("renders type union with format", () => {
+    const schema = {
+      type: ["string", "null"],
+      format: "uuid",
+    } as unknown as SchemaObject;
+    expect(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"] }],
+    } as unknown as SchemaObject;
+    expect(getSchemaName(schema)).toBe("string");
+  });
+
+  it("renders array of items whose type is a union", () => {
+    const schema: SchemaObject = {
+      type: "array",
+      items: { type: ["string", "null"] } as any,
+    } as SchemaObject;
+    expect(getSchemaName(schema)).toBe("(string | null)[]");
+  });
+});

package/src/markdown/schema.ts

@@ -7,7 +7,6 @@
 
 import { translate } from "@docusaurus/Translate";
 
-import { OPENAPI_SCHEMA_ITEM } from "../theme/translationIds";
 import { SchemaObject } from "../types";
 
 /**
@@ -48,6 +47,24 @@ function getTypeFromSchema(schema: SchemaObject): string | undefined {
   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: unknown): {
+  single?: string;
+  pretty?: string;
+  isUnion: boolean;
+} {
+  if (Array.isArray(type)) {
+    const filtered = type.filter((t): t is string => 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: SchemaObject, circular?: boolean) {
   // Handle enum-only schemas (valid in JSON Schema)
   // When enum is present without explicit type, treat as string
@@ -55,7 +72,15 @@ function prettyName(schema: SchemaObject, circular?: boolean) {
     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;
   }
 
@@ -83,21 +108,19 @@ function prettyName(schema: SchemaObject, circular?: boolean) {
     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;
 }
 
 export function getSchemaName(
@@ -105,7 +128,11 @@ export function getSchemaName(
   circular?: boolean
 ): string {
   if (schema.items) {
-    return prettyName(schema.items, circular) + "[]";
+    const items = schema.items as SchemaObject;
+    const inner = getSchemaName(items, circular);
+    const needsParens =
+      Array.isArray((items as any).type) && (items as any).type.length > 1;
+    return needsParens ? `(${inner})[]` : `${inner}[]`;
   }
 
   return prettyName(schema, circular) ?? "";
@@ -130,7 +157,7 @@ export function getQualifierMessage(schema?: SchemaObject): string | undefined {
   }
 
   let message = `**${translate({
-    id: OPENAPI_SCHEMA_ITEM.POSSIBLE_VALUES,
+    id: "theme.openapi.schemaItem.possibleValues",
     message: "Possible values:",
   })}** `;
 
@@ -149,11 +176,11 @@ export function getQualifierMessage(schema?: SchemaObject): string | undefined {
     let minLength;
     let maxLength;
     const charactersMessage = translate({
-      id: OPENAPI_SCHEMA_ITEM.CHARACTERS,
+      id: "theme.openapi.schemaItem.characters",
       message: "characters",
     });
     const nonEmptyMessage = translate({
-      id: OPENAPI_SCHEMA_ITEM.NON_EMPTY,
+      id: "theme.openapi.schemaItem.nonEmpty",
       message: "non-empty",
     });
     if (schema.minLength && schema.minLength > 1) {
@@ -218,7 +245,7 @@ export function getQualifierMessage(schema?: SchemaObject): string | undefined {
 
   if (schema.pattern) {
     const expressionMessage = translate({
-      id: OPENAPI_SCHEMA_ITEM.EXPRESSION,
+      id: "theme.openapi.schemaItem.expression",
       message: "Value must match regular expression",
     });
     qualifierGroups.push(`${expressionMessage} \`${schema.pattern}\``);

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

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

package/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({

package/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";
 

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

@@ -12,7 +12,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_AUTH } from "@theme/translationIds";
 
 import { setAuthData, setSelectedAuth } from "./slice";
 
@@ -37,7 +36,7 @@ function Authorization() {
         <FormItem>
           <FormSelect
             label={translate({
-              id: OPENAPI_AUTH.SECURITY_SCHEME,
+              id: "theme.openapi.auth.securityScheme",
               message: "Security Scheme",
             })}
             options={optionKeys}
@@ -54,11 +53,11 @@ function Authorization() {
             <FormItem key={a.key + "-bearer"}>
               <FormTextInput
                 label={translate({
-                  id: OPENAPI_AUTH.BEARER_TOKEN,
+                  id: "theme.openapi.auth.bearerToken",
                   message: "Bearer Token",
                 })}
                 placeholder={translate({
-                  id: OPENAPI_AUTH.BEARER_TOKEN,
+                  id: "theme.openapi.auth.bearerToken",
                   message: "Bearer Token",
                 })}
                 password
@@ -83,11 +82,11 @@ function Authorization() {
             <FormItem key={a.key + "-oauth2"}>
               <FormTextInput
                 label={translate({
-                  id: OPENAPI_AUTH.BEARER_TOKEN,
+                  id: "theme.openapi.auth.bearerToken",
                   message: "Bearer Token",
                 })}
                 placeholder={translate({
-                  id: OPENAPI_AUTH.BEARER_TOKEN,
+                  id: "theme.openapi.auth.bearerToken",
                   message: "Bearer Token",
                 })}
                 password
@@ -113,11 +112,11 @@ function Authorization() {
               <FormItem>
                 <FormTextInput
                   label={translate({
-                    id: OPENAPI_AUTH.USERNAME,
+                    id: "theme.openapi.auth.username",
                     message: "Username",
                   })}
                   placeholder={translate({
-                    id: OPENAPI_AUTH.USERNAME,
+                    id: "theme.openapi.auth.username",
                     message: "Username",
                   })}
                   value={data[a.key].username ?? ""}
@@ -136,11 +135,11 @@ function Authorization() {
               <FormItem>
                 <FormTextInput
                   label={translate({
-                    id: OPENAPI_AUTH.PASSWORD,
+                    id: "theme.openapi.auth.password",
                     message: "Password",
                   })}
                   placeholder={translate({
-                    id: OPENAPI_AUTH.PASSWORD,
+                    id: "theme.openapi.auth.password",
                     message: "Password",
                   })}
                   password

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

@@ -16,7 +16,6 @@ import { useTypedDispatch, useTypedSelector } from "@theme/ApiItem/hooks";
 import Markdown from "@theme/Markdown";
 import SchemaTabs from "@theme/SchemaTabs";
 import TabItem from "@theme/TabItem";
-import { OPENAPI_BODY, OPENAPI_REQUEST } from "@theme/translationIds";
 import { sampleFromSchema } from "docusaurus-plugin-openapi-docs/lib/openapi/createSchemaExample";
 import type { RequestBodyObject } from "docusaurus-plugin-openapi-docs/src/openapi/types";
 import format from "xml-formatter";
@@ -292,7 +291,10 @@ function Body({
         <FormFileUpload
           placeholder={
             schema.description ||
-            translate({ id: OPENAPI_REQUEST.BODY_TITLE, message: "Body" })
+            translate({
+              id: "theme.openapi.request.body.title",
+              message: "Body",
+            })
           }
           onChange={(file: any) => {
             if (file === undefined) {
@@ -322,7 +324,7 @@ function Body({
           {/* @ts-ignore */}
           <TabItem
             label={translate({
-              id: OPENAPI_BODY.EXAMPLE_FROM_SCHEMA,
+              id: "theme.openapi.body.exampleFromSchema",
               message: "Example (from schema)",
             })}
             value="Example (from schema)"
@@ -412,7 +414,7 @@ function Body({
           {/* @ts-ignore */}
           <TabItem
             label={translate({
-              id: OPENAPI_BODY.EXAMPLE_FROM_SCHEMA,
+              id: "theme.openapi.body.exampleFromSchema",
               message: "Example (from schema)",
             })}
             value="Example (from schema)"
@@ -453,7 +455,7 @@ function Body({
           {/* @ts-ignore */}
           <TabItem
             label={translate({
-              id: OPENAPI_BODY.EXAMPLE_FROM_SCHEMA,
+              id: "theme.openapi.body.exampleFromSchema",
               message: "Example (from schema)",
             })}
             value="Example (from schema)"

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

@@ -5,14 +5,16 @@
  * LICENSE file in the root directory of this source tree.
  * ========================================================================== */
 
-import React, { useState, useEffect } from "react";
+import React, { useEffect, useMemo, useState } from "react";
 
+import { useStorageSlot } from "@docusaurus/theme-common";
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 import ApiCodeBlock from "@theme/ApiExplorer/ApiCodeBlock";
 import buildPostmanRequest from "@theme/ApiExplorer/buildPostmanRequest";
 import CodeTabs from "@theme/ApiExplorer/CodeTabs";
 import { useResolvedEncoding } from "@theme/ApiExplorer/EncodingSelection/useResolvedEncoding";
 import { useTypedSelector } from "@theme/ApiItem/hooks";
+import type { ThemeConfig } from "docusaurus-theme-openapi-docs/src/types";
 import cloneDeep from "lodash/cloneDeep";
 import codegen from "postman-code-generators";
 import * as sdk from "postman-collection";
@@ -42,6 +44,21 @@ function CodeTab({ children, hidden, className }: any): React.JSX.Element {
   );
 }
 
+/** Align with Docusaurus `<Tabs groupId="code-samples">` persisted tab value. */
+function resolveOuterLanguageFromPersistedTab(
+  persistedTab: string | null,
+  langs: Language[]
+): Language {
+  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,
@@ -114,45 +131,66 @@ function CodeSnippets({
     encoding,
   });
 
+  const themeConfig = siteConfig.themeConfig as 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 as Language[] | undefined) ??
     languageSet;
 
-  // Filter languageSet by user-defined langs
-  const filteredLanguageSet = languageSet.filter((ls) => {
-    return userDefinedLanguageSet?.some((lang) => {
-      return lang.language === ls.language;
+  const mergedLangs = useMemo(() => {
+    const filteredLanguageSet = languageSet.filter((ls) => {
+      return userDefinedLanguageSet?.some((lang) => {
+        return lang.language === ls.language;
+      });
     });
-  });
+    return mergeCodeSampleLanguage(
+      mergeArraysbyLanguage(userDefinedLanguageSet, filteredLanguageSet),
+      codeSamples
+    );
+  }, [userDefinedLanguageSet, codeSamples]);
 
-  // Merge user-defined langs into languageSet
-  const mergedLangs = mergeCodeSampleLanguage(
-    mergeArraysbyLanguage(userDefinedLanguageSet, filteredLanguageSet),
-    codeSamples
-  );
+  const [persistedOuterTab] = useStorageSlot("docusaurus.tab.code-samples");
 
-  // Read defaultLang from localStorage
-  const defaultLang: Language[] = mergedLangs.filter(
-    (lang) =>
-      lang.language === localStorage.getItem("docusaurus.tab.code-samples")
+  const initialOuterLanguage = useMemo(
+    () => resolveOuterLanguageFromPersistedTab(persistedOuterTab, mergedLangs),
+    [persistedOuterTab, mergedLangs]
   );
+
   const [selectedVariant, setSelectedVariant] = useState<string | undefined>();
   const [selectedSample, setSelectedSample] = useState<string | undefined>();
-  const [language, setLanguage] = 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] = useState(() =>
+    resolveOuterLanguageFromPersistedTab(persistedOuterTab, mergedLangs)
+  );
+
+  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] = useState<string>("");
   const [codeSampleCodeText, setCodeSampleCodeText] = useState<string>(() =>
     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.
+  useEffect(() => {
+    setSelectedSample(language?.samples?.[0]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [language?.language]);
+
   useEffect(() => {
     if (language && !!language.sample) {
       setCodeSampleCodeText(getCodeSampleSourceFromLanguage(language));
@@ -259,7 +297,7 @@ function CodeSnippets({
           setSelectedSample: setSelectedSample,
         }}
         languageSet={mergedLangs}
-        defaultValue={defaultLang[0]?.language ?? mergedLangs[0].language}
+        defaultValue={initialOuterLanguage.language}
         lazy
       >
         {mergedLangs.map((lang) => {
@@ -282,7 +320,11 @@ function CodeSnippets({
                   }}
                   includeSample={true}
                   currentLanguage={lang}
-                  defaultValue={selectedSample}
+                  defaultValue={
+                    selectedSample && lang.samples.includes(selectedSample)
+                      ? selectedSample
+                      : lang.samples[0]
+                  }
                   languageSet={mergedLangs}
                   lazy
                 >
@@ -295,7 +337,7 @@ function CodeSnippets({
                             ? lang.samplesLabels[index]
                             : sample
                         }
-                        key={`${lang.language}-${lang.sample}`}
+                        key={`${lang.language}-${sample}`}
                         attributes={{
                           className: `openapi-tabs__code-item--sample`,
                         }}
@@ -315,40 +357,42 @@ function CodeSnippets({
               )}
 
               {/* Inner generated code snippets */}
-              <CodeTabs
-                className="openapi-tabs__code-container-inner"
-                action={{
-                  setLanguage: setLanguage,
-                  setSelectedVariant: setSelectedVariant,
-                }}
-                includeVariant={true}
-                currentLanguage={lang}
-                defaultValue={selectedVariant}
-                languageSet={mergedLangs}
-                lazy
-              >
-                {lang.variants.map((variant, index) => {
-                  return (
-                    <CodeTab
-                      value={variant.toLowerCase()}
-                      label={variant.toUpperCase()}
-                      key={`${lang.language}-${lang.variant}`}
-                      attributes={{
-                        className: `openapi-tabs__code-item--variant`,
-                      }}
-                    >
-                      {/* @ts-ignore */}
-                      <ApiCodeBlock
-                        language={lang.highlight}
-                        className="openapi-explorer__code-block"
-                        showLineNumbers={true}
+              {!(hideGeneratedSnippets && lang.samples?.length) && (
+                <CodeTabs
+                  className="openapi-tabs__code-container-inner"
+                  action={{
+                    setLanguage: setLanguage,
+                    setSelectedVariant: setSelectedVariant,
+                  }}
+                  includeVariant={true}
+                  currentLanguage={lang}
+                  defaultValue={selectedVariant}
+                  languageSet={mergedLangs}
+                  lazy
+                >
+                  {lang.variants.map((variant, index) => {
+                    return (
+                      <CodeTab
+                        value={variant.toLowerCase()}
+                        label={variant.toUpperCase()}
+                        key={`${lang.language}-${variant}`}
+                        attributes={{
+                          className: `openapi-tabs__code-item--variant`,
+                        }}
                       >
-                        {codeText}
-                      </ApiCodeBlock>
-                    </CodeTab>
-                  );
-                })}
-              </CodeTabs>
+                        {/* @ts-ignore */}
+                        <ApiCodeBlock
+                          language={lang.highlight}
+                          className="openapi-explorer__code-block"
+                          showLineNumbers={true}
+                        >
+                          {codeText}
+                        </ApiCodeBlock>
+                      </CodeTab>
+                    );
+                  })}
+                </CodeTabs>
+              )}
             </CodeTab>
           );
         })}