docusaurus-theme-openapi-docs 4.0.1 → 4.1.0

package/lib/markdown/utils.d.ts

@@ -1,9 +1,10 @@
 import { ReactNode } from "react";
-export type Children = ReactNode | string | undefined | (string | undefined)[];
+/** @deprecated use ReactNode from React instead */
+export type Children = ReactNode;
 export type Props = Record<string, any> & {
-    children?: Children;
+    children?: ReactNode;
 };
 export declare function create(tag: string, props: Props): string;
-export declare function guard<T>(value: T | undefined | string, cb: (value: T) => Children): string;
-export declare function render(children: Children): string;
+export declare function guard<T>(value: T | undefined | string, cb: (value: T) => ReactNode): string | number | boolean | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode>;
+export declare function render(children: ReactNode): string | number | boolean | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode>;
 export declare function toString(value: any): string | undefined;

package/lib/theme/ApiExplorer/CodeSnippets/code-snippets-types.d.ts

@@ -1,4 +1,4 @@
-export type CodeSampleLanguage = "C" | "C#" | "C++" | "CoffeeScript" | "CSS" | "Dart" | "DM" | "Elixir" | "Go" | "Groovy" | "HTML" | "Java" | "JavaScript" | "Kotlin" | "Objective-C" | "Perl" | "PHP" | "PowerShell" | "Python" | "Ruby" | "Rust" | "Scala" | "Shell" | "Swift" | "TypeScript";
+export type CodeSampleLanguage = "C" | "C#" | "C++" | "CoffeeScript" | "CSS" | "Dart" | "DM" | "Elixir" | "Go" | "Groovy" | "HTML" | "Java" | "JavaScript" | "Kotlin" | "Objective-C" | "OCaml" | "Perl" | "PHP" | "PowerShell" | "Python" | "R" | "Ruby" | "Rust" | "Scala" | "Shell" | "Swift" | "TypeScript";
 export interface Language {
     highlight: string;
     language: string;

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

@@ -78,118 +78,7 @@ const postman_code_generators_1 = __importDefault(
   require("postman-code-generators")
 );
 const languages_1 = require("./languages");
-exports.languageSet = [
-  {
-    highlight: "bash",
-    language: "curl",
-    codeSampleLanguage: "Shell",
-    logoClass: "bash",
-    options: {
-      longFormat: false,
-      followRedirect: true,
-      trimRequestBody: true,
-    },
-    variant: "cURL",
-    variants: ["curl"],
-  },
-  {
-    highlight: "python",
-    language: "python",
-    codeSampleLanguage: "Python",
-    logoClass: "python",
-    options: {
-      followRedirect: true,
-      trimRequestBody: true,
-    },
-    variant: "requests",
-    variants: ["requests", "http.client"],
-  },
-  {
-    highlight: "go",
-    language: "go",
-    codeSampleLanguage: "Go",
-    logoClass: "go",
-    options: {
-      followRedirect: true,
-      trimRequestBody: true,
-    },
-    variant: "native",
-    variants: ["native"],
-  },
-  {
-    highlight: "javascript",
-    language: "nodejs",
-    codeSampleLanguage: "JavaScript",
-    logoClass: "nodejs",
-    options: {
-      ES6_enabled: true,
-      followRedirect: true,
-      trimRequestBody: true,
-    },
-    variant: "axios",
-    variants: ["axios", "native"],
-  },
-  {
-    highlight: "ruby",
-    language: "ruby",
-    codeSampleLanguage: "Ruby",
-    logoClass: "ruby",
-    options: {
-      followRedirect: true,
-      trimRequestBody: true,
-    },
-    variant: "Net::HTTP",
-    variants: ["net::http"],
-  },
-  {
-    highlight: "csharp",
-    language: "csharp",
-    codeSampleLanguage: "C#",
-    logoClass: "csharp",
-    options: {
-      followRedirect: true,
-      trimRequestBody: true,
-    },
-    variant: "RestSharp",
-    variants: ["restsharp", "httpclient"],
-  },
-  {
-    highlight: "php",
-    language: "php",
-    codeSampleLanguage: "PHP",
-    logoClass: "php",
-    options: {
-      followRedirect: true,
-      trimRequestBody: true,
-    },
-    variant: "cURL",
-    variants: ["curl", "guzzle", "pecl_http", "http_request2"],
-  },
-  {
-    highlight: "java",
-    language: "java",
-    codeSampleLanguage: "Java",
-    logoClass: "java",
-    options: {
-      followRedirect: true,
-      trimRequestBody: true,
-    },
-    variant: "OkHttp",
-    variants: ["okhttp", "unirest"],
-  },
-  {
-    highlight: "powershell",
-    language: "powershell",
-    codeSampleLanguage: "PowerShell",
-    logoClass: "powershell",
-    options: {
-      followRedirect: true,
-      trimRequestBody: true,
-    },
-    variant: "RestMethod",
-    variants: ["restmethod"],
-  },
-];
+exports.languageSet = (0, languages_1.generateLanguageSet)();
 function CodeTab({ children, hidden, className }) {
   return react_1.default.createElement(
     "div",
@@ -392,6 +281,7 @@ function CodeSnippets({ postman, codeSamples }) {
           setSelectedSample: setSelectedSample,
         },
         languageSet: mergedLangs,
+        defaultValue: defaultLang[0]?.language ?? mergedLangs[0].language,
         lazy: true,
       },
       mergedLangs.map((lang) => {

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

@@ -2,3 +2,4 @@ import { CodeSample, Language } from "./code-snippets-types";
 export declare function mergeCodeSampleLanguage(languages: Language[], codeSamples: CodeSample[]): Language[];
 export declare const mergeArraysbyLanguage: (arr1: any, arr2: any) => any[];
 export declare function getCodeSampleSourceFromLanguage(language: Language): string;
+export declare function generateLanguageSet(): Language[];

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

@@ -11,14 +11,17 @@ var __importDefault =
     return mod && mod.__esModule ? mod : { default: mod };
   };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getCodeSampleSourceFromLanguage =
+exports.generateLanguageSet =
+  exports.getCodeSampleSourceFromLanguage =
   exports.mergeArraysbyLanguage =
   exports.mergeCodeSampleLanguage =
     void 0;
 const find_1 = __importDefault(require("lodash/find"));
-const isArray_1 = __importDefault(require("lodash/isArray"));
 const mergeWith_1 = __importDefault(require("lodash/mergeWith"));
 const unionBy_1 = __importDefault(require("lodash/unionBy"));
+const postman_code_generators_1 = __importDefault(
+  require("postman-code-generators")
+);
 function mergeCodeSampleLanguage(languages, codeSamples) {
   return languages.map((language) => {
     const languageCodeSamples = codeSamples.filter(
@@ -50,10 +53,7 @@ const mergeArraysbyLanguage = (arr1, arr2) => {
       (0, find_1.default)(arr2, ["language", item["language"]]),
     ];
     return (0, mergeWith_1.default)({}, ...matchingItems, (objValue) => {
-      if ((0, isArray_1.default)(objValue)) {
-        return objValue;
-      }
-      return undefined;
+      return objValue;
     });
   });
 };
@@ -73,3 +73,27 @@ function getCodeSampleSourceFromLanguage(language) {
   return "";
 }
 exports.getCodeSampleSourceFromLanguage = getCodeSampleSourceFromLanguage;
+function generateLanguageSet() {
+  const languageSet = [];
+  postman_code_generators_1.default.getLanguageList().forEach((language) => {
+    const variants = [];
+    language.variants.forEach((variant) => {
+      variants.push(variant.key);
+    });
+    languageSet.push({
+      highlight: language.syntax_mode,
+      language: language.key,
+      codeSampleLanguage: language.label,
+      logoClass: language.key,
+      options: {
+        longFormat: false,
+        followRedirect: true,
+        trimRequestBody: true,
+      },
+      variant: variants[0],
+      variants: variants,
+    });
+  });
+  return languageSet;
+}
+exports.generateLanguageSet = generateLanguageSet;

package/lib/theme/ApiExplorer/CodeTabs/_CodeTabs.scss

@@ -146,6 +146,24 @@ body[class="ReactModal__Body--open"] {
   }
 }
 
+.openapi-tabs__code-item--dart {
+  color: var(--ifm-color-info);
+
+  &::after {
+    content: "";
+    width: var(--code-tab-logo-width);
+    height: var(--code-tab-logo-height);
+    background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/dart/dart-original.svg")
+      no-repeat;
+    margin-block: auto;
+  }
+
+  &.active {
+    box-shadow: 0 0 0 3px var(--openapi-code-tab-shadow-color-dart);
+    border-color: var(--openapi-code-tab-border-color-dart);
+  }
+}
+
 .openapi-tabs__code-item--javascript {
   color: var(--ifm-color-warning);
 
@@ -164,7 +182,7 @@ body[class="ReactModal__Body--open"] {
   }
 }
 
-.openapi-tabs__code-item--bash {
+.openapi-tabs__code-item--curl {
   color: var(--ifm-color-danger);
 
   &::after {
@@ -179,7 +197,7 @@ body[class="ReactModal__Body--open"] {
   }
 
   &.active {
-    box-shadow: 0 0 0 3px var(--openapi-code-tab-shadow-color-bash);
+    box-shadow: 0 0 0 3px var(--openapi-code-tab-shadow-color-curl);
     border-color: var(--ifm-color-danger);
   }
 }
@@ -220,6 +238,96 @@ body[class="ReactModal__Body--open"] {
   }
 }
 
+.openapi-tabs__code-item--r {
+  color: var(--ifm-color-gray-500);
+
+  &::after {
+    content: "";
+    width: var(--code-tab-logo-width);
+    height: var(--code-tab-logo-height);
+    background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/r/r-original.svg")
+      no-repeat;
+    margin-block: auto;
+  }
+
+  &.active {
+    box-shadow: 0 0 0 3px var(--openapi-code-tab-shadow-color-r);
+    border-color: var(--openapi-code-tab-border-color-r);
+  }
+}
+
+.openapi-tabs__code-item--swift {
+  color: var(--ifm-color-danger);
+
+  &::after {
+    content: "";
+    width: var(--code-tab-logo-width);
+    height: var(--code-tab-logo-height);
+    background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/swift/swift-original.svg")
+      no-repeat;
+    margin-block: auto;
+  }
+
+  &.active {
+    box-shadow: 0 0 0 3px var(--openapi-code-tab-shadow-color-swift);
+    border-color: var(--openapi-code-tab-border-color-swift);
+  }
+}
+
+.openapi-tabs__code-item--c {
+  color: var(--ifm-color-info);
+
+  &::after {
+    content: "";
+    width: var(--code-tab-logo-width);
+    height: var(--code-tab-logo-height);
+    background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/c/c-original.svg")
+      no-repeat;
+    margin-block: auto;
+  }
+
+  &.active {
+    box-shadow: 0 0 0 3px var(--openapi-code-tab-shadow-color-c);
+    border-color: var(--openapi-code-tab-border-color-c);
+  }
+}
+
+.openapi-tabs__code-item--objective-c {
+  color: var(--ifm-color-info);
+
+  &::after {
+    content: "";
+    width: var(--code-tab-logo-width);
+    height: var(--code-tab-logo-height);
+    background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/objectivec/objectivec-plain.svg")
+      no-repeat;
+    margin-block: auto;
+  }
+
+  &.active {
+    box-shadow: 0 0 0 3px var(--openapi-code-tab-shadow-color-objective-c);
+    border-color: var(--openapi-code-tab-border-color-objective-c);
+  }
+}
+
+.openapi-tabs__code-item--ocaml {
+  color: var(--ifm-color-warning);
+
+  &::after {
+    content: "";
+    width: var(--code-tab-logo-width);
+    height: var(--code-tab-logo-height);
+    background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/ocaml/ocaml-original.svg")
+      no-repeat;
+    margin-block: auto;
+  }
+
+  &.active {
+    box-shadow: 0 0 0 3px var(--openapi-code-tab-shadow-color-objective-ocaml);
+    border-color: var(--openapi-code-tab-border-color-objective-ocaml);
+  }
+}
+
 .openapi-tabs__code-item--nodejs {
   color: var(--ifm-color-success);
 
@@ -256,6 +364,42 @@ body[class="ReactModal__Body--open"] {
   }
 }
 
+.openapi-tabs__code-item--kotlin {
+  color: var(--ifm-color-gray-500);
+
+  &::after {
+    content: "";
+    width: var(--code-tab-logo-width);
+    height: var(--code-tab-logo-height);
+    background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/kotlin/kotlin-original.svg")
+      no-repeat;
+    margin-block: auto;
+  }
+
+  &.active {
+    box-shadow: 0 0 0 3px var(--openapi-code-tab-shadow-color-kotlin);
+    border-color: var(--openapi-code-tab-border-color-kotlin);
+  }
+}
+
+.openapi-tabs__code-item--rust {
+  color: var(--ifm-color-gray-500);
+
+  &::after {
+    content: "";
+    width: var(--code-tab-logo-width);
+    height: var(--code-tab-logo-height);
+    background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/rust/rust-original.svg")
+      no-repeat;
+    margin-block: auto;
+  }
+
+  &.active {
+    box-shadow: 0 0 0 3px var(--openapi-code-tab-shadow-color-rust);
+    border-color: var(--openapi-code-tab-border-color-rust);
+  }
+}
+
 .openapi-tabs__code-item--java {
   color: var(--ifm-color-warning);
 

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

@@ -71,12 +71,35 @@ function TabList({
   selectValue,
   tabValues,
 }) {
-  const tabRefs = [];
+  const tabRefs = (0, react_1.useRef)([]);
+  const tabsScrollContainerRef = (0, react_1.useRef)();
   const { blockElementScrollPositionUntilNextRender } = (0,
   internal_1.useScrollPositionBlocker)();
+  (0, react_1.useEffect)(() => {
+    const activeTab = tabRefs.current.find(
+      (tab) => tab?.getAttribute("aria-selected") === "true"
+    );
+    if (activeTab && tabsScrollContainerRef.current) {
+      const container = tabsScrollContainerRef.current;
+      const containerRect = container.getBoundingClientRect();
+      const activeTabRect = activeTab.getBoundingClientRect();
+      // Calculate the distance to scroll to align active tab to the left
+      const glowOffset = 3;
+      const scrollOffset =
+        activeTabRect.left -
+        containerRect.left +
+        container.scrollLeft -
+        glowOffset;
+      // Check if the active tab is not already at the left position
+      if (Math.abs(scrollOffset - container.scrollLeft) > 4) {
+        // Adjust the scroll of the container
+        container.scrollLeft = scrollOffset;
+      }
+    }
+  }, []);
   const handleTabChange = (event) => {
     const newTab = event.currentTarget;
-    const newTabIndex = tabRefs.indexOf(newTab);
+    const newTabIndex = tabRefs.current.indexOf(newTab);
     const newTabValue = tabValues[newTabIndex].value;
     if (newTabValue !== selectedValue) {
       blockElementScrollPositionUntilNextRender(newTab);
@@ -100,7 +123,7 @@ function TabList({
         newLanguage = languageSet.filter(
           (lang) => lang.language === newTabValue
         )[0];
-        action.setSelectedVariant(newLanguage.variant.toLowerCase());
+        action.setSelectedVariant(newLanguage.variants[0].toLowerCase());
         action.setSelectedSample(newLanguage.sample);
       }
       action.setLanguage(newLanguage);
@@ -114,13 +137,15 @@ function TabList({
         break;
       }
       case "ArrowRight": {
-        const nextTab = tabRefs.indexOf(event.currentTarget) + 1;
-        focusElement = tabRefs[nextTab] ?? tabRefs[0];
+        const nextTab = tabRefs.current.indexOf(event.currentTarget) + 1;
+        focusElement = tabRefs.current[nextTab] ?? tabRefs.current[0];
         break;
       }
       case "ArrowLeft": {
-        const prevTab = tabRefs.indexOf(event.currentTarget) - 1;
-        focusElement = tabRefs[prevTab] ?? tabRefs[tabRefs.length - 1];
+        const prevTab = tabRefs.current.indexOf(event.currentTarget) - 1;
+        focusElement =
+          tabRefs.current[prevTab] ??
+          tabRefs.current[tabRefs.current.length - 1];
         break;
       }
       default:
@@ -141,6 +166,7 @@ function TabList({
         },
         className
       ),
+      ref: tabsScrollContainerRef,
     },
     tabValues.map(({ value, label, attributes }) =>
       react_1.default.createElement(
@@ -151,7 +177,7 @@ function TabList({
           tabIndex: selectedValue === value ? 0 : -1,
           "aria-selected": selectedValue === value,
           key: value,
-          ref: (tabControl) => tabRefs.push(tabControl),
+          ref: (tabControl) => tabRefs.current.push(tabControl),
           onKeyDown: handleKeydown,
           onClick: handleTabChange,
           ...attributes,

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

@@ -2,6 +2,7 @@ import React from "react";
 export interface Props {
     method: string;
     path: string;
+    context?: "endpoint" | "callback";
 }
-declare function MethodEndpoint({ method, path }: Props): React.JSX.Element;
+declare function MethodEndpoint({ method, path, context }: Props): React.JSX.Element;
 export default MethodEndpoint;

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

@@ -13,7 +13,7 @@ var __importDefault =
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const BrowserOnly_1 = __importDefault(require("@docusaurus/BrowserOnly"));
-const hooks_1 = require("../../ApiItem/hooks");
+const hooks_1 = require("@theme/ApiItem/hooks");
 function colorForMethod(method) {
   switch (method.toLowerCase()) {
     case "get":
@@ -34,12 +34,15 @@ function colorForMethod(method) {
       return undefined;
   }
 }
-function MethodEndpoint({ method, path }) {
+function MethodEndpoint({ method, path, context }) {
   let serverValue = (0, hooks_1.useTypedSelector)(
     (state) => state.server.value
   );
   let serverUrlWithVariables = "";
   const renderServerUrl = () => {
+    if (context === "callback") {
+      return "";
+    }
     if (serverValue && serverValue.variables) {
       serverUrlWithVariables = serverValue.url.replace(/\/$/, "");
       Object.keys(serverValue.variables).forEach((variable) => {

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

@@ -145,6 +145,7 @@ function ParamOptions() {
         react_1.default.createElement(
           "button",
           {
+            type: "button",
             className: "openapi-explorer__show-more-btn",
             onClick: () => setShowOptional((prev) => !prev),
           },

package/lib/theme/ApiExplorer/Request/_Request.scss

@@ -114,6 +114,11 @@
   }
 }
 
+.openapi-security__summary-container {
+  background: var(--ifm-pre-background);
+  border-radius: var(--ifm-pre-border-radius);
+}
+
 // Prevent auto zoom on mobile iOS devices when focusing on input elmenents
 @media screen and (-webkit-min-device-pixel-ratio: 0) and (max-device-width: 1024px) {
   .prism-code,

package/lib/theme/ApiExplorer/index.js

@@ -17,12 +17,18 @@ const CodeSnippets_1 = __importDefault(
 );
 const Request_1 = __importDefault(require("@theme/ApiExplorer/Request"));
 const Response_1 = __importDefault(require("@theme/ApiExplorer/Response"));
+const SecuritySchemes_1 = __importDefault(
+  require("@theme/ApiExplorer/SecuritySchemes")
+);
 const postman_collection_1 = __importDefault(require("postman-collection"));
 function ApiExplorer({ item, infoPath }) {
   const postman = new postman_collection_1.default.Request(item.postman);
   return react_1.default.createElement(
     react_1.default.Fragment,
     null,
+    react_1.default.createElement(SecuritySchemes_1.default, {
+      infoPath: infoPath,
+    }),
     item.method !== "event" &&
       react_1.default.createElement(CodeSnippets_1.default, {
         postman: postman,

package/lib/theme/ApiItem/Layout/index.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { Props } from "@theme/ApiItem/Layout";
+export default function DocItemLayout({ children }: Props): JSX.Element;

package/lib/theme/ApiItem/Layout/index.js

@@ -0,0 +1,117 @@
+"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.
+ * ========================================================================== */
+var __importDefault =
+  (this && this.__importDefault) ||
+  function (mod) {
+    return mod && mod.__esModule ? mod : { default: mod };
+  };
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const client_1 = require("@docusaurus/plugin-content-docs/client");
+const theme_common_1 = require("@docusaurus/theme-common");
+const ContentVisibility_1 = __importDefault(
+  require("@theme/ContentVisibility")
+);
+const DocBreadcrumbs_1 = __importDefault(require("@theme/DocBreadcrumbs"));
+const Content_1 = __importDefault(require("@theme/DocItem/Content"));
+const Footer_1 = __importDefault(require("@theme/DocItem/Footer"));
+const Paginator_1 = __importDefault(require("@theme/DocItem/Paginator"));
+const Desktop_1 = __importDefault(require("@theme/DocItem/TOC/Desktop"));
+const Mobile_1 = __importDefault(require("@theme/DocItem/TOC/Mobile"));
+const DocVersionBadge_1 = __importDefault(require("@theme/DocVersionBadge"));
+const DocVersionBanner_1 = __importDefault(require("@theme/DocVersionBanner"));
+const clsx_1 = __importDefault(require("clsx"));
+const styles_module_css_1 = __importDefault(require("./styles.module.css"));
+/**
+ * Decide if the toc should be rendered, on mobile or desktop viewports
+ */
+function useDocTOC() {
+  const { frontMatter, toc } = (0, client_1.useDoc)();
+  const windowSize = (0, theme_common_1.useWindowSize)();
+  const hidden = frontMatter.hide_table_of_contents;
+  const canRender = !hidden && toc.length > 0;
+  const mobile = canRender
+    ? react_1.default.createElement(Mobile_1.default, null)
+    : undefined;
+  const desktop =
+    canRender && (windowSize === "desktop" || windowSize === "ssr")
+      ? react_1.default.createElement(Desktop_1.default, null)
+      : undefined;
+  return {
+    hidden,
+    mobile,
+    desktop,
+  };
+}
+function DocItemLayout({ children }) {
+  const docTOC = useDocTOC();
+  const { metadata } = (0, client_1.useDoc)();
+  const { frontMatter } = (0, client_1.useDoc)();
+  const api = frontMatter.api;
+  return react_1.default.createElement(
+    "div",
+    { className: "row" },
+    react_1.default.createElement(
+      "div",
+      {
+        className: (0, clsx_1.default)(
+          "col",
+          !docTOC.hidden && styles_module_css_1.default.docItemCol
+        ),
+      },
+      react_1.default.createElement(ContentVisibility_1.default, {
+        metadata: metadata,
+      }),
+      react_1.default.createElement(DocVersionBanner_1.default, null),
+      react_1.default.createElement(
+        "div",
+        { className: styles_module_css_1.default.docItemContainer },
+        react_1.default.createElement(
+          "article",
+          null,
+          react_1.default.createElement(DocBreadcrumbs_1.default, null),
+          react_1.default.createElement(DocVersionBadge_1.default, null),
+          docTOC.mobile,
+          react_1.default.createElement(Content_1.default, null, children),
+          react_1.default.createElement(
+            "div",
+            { className: "row" },
+            react_1.default.createElement(
+              "div",
+              {
+                className: (0, clsx_1.default)(
+                  "col",
+                  api ? "col--7" : "col--12"
+                ),
+              },
+              react_1.default.createElement(Footer_1.default, null)
+            )
+          )
+        ),
+        react_1.default.createElement(
+          "div",
+          { className: "row" },
+          react_1.default.createElement(
+            "div",
+            {
+              className: (0, clsx_1.default)("col", api ? "col--7" : "col--12"),
+            },
+            react_1.default.createElement(Paginator_1.default, null)
+          )
+        )
+      )
+    ),
+    docTOC.desktop &&
+      react_1.default.createElement(
+        "div",
+        { className: "col col--3" },
+        docTOC.desktop
+      )
+  );
+}
+exports.default = DocItemLayout;