docusaurus-theme-openapi-docs 2.1.3 → 2.2.1

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

@@ -1,5 +1,5 @@
 import React from "react";
-import sdk from "@paloaltonetworks/postman-collection";
+import sdk from "postman-collection";
 import { CodeSample, Language } from "./code-snippets-types";
 export declare const languageSet: Language[];
 export interface Props {

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

@@ -56,13 +56,16 @@ var __importDefault =
   };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.languageSet = void 0;
+/* ============================================================================
+ * 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.
+ * ========================================================================== */
 const react_1 = __importStar(require("react"));
 const useDocusaurusContext_1 = __importDefault(
   require("@docusaurus/useDocusaurusContext")
 );
-const postman_code_generators_1 = __importDefault(
-  require("@paloaltonetworks/postman-code-generators")
-);
 const ApiCodeBlock_1 = __importDefault(
   require("@theme/ApiExplorer/ApiCodeBlock")
 );
@@ -71,7 +74,9 @@ const buildPostmanRequest_1 = __importDefault(
 );
 const CodeTabs_1 = __importDefault(require("@theme/ApiExplorer/CodeTabs"));
 const hooks_1 = require("@theme/ApiItem/hooks");
-const merge_1 = __importDefault(require("lodash/merge"));
+const postman_code_generators_1 = __importDefault(
+  require("postman-code-generators")
+);
 const languages_1 = require("./languages");
 exports.languageSet = [
   {
@@ -193,7 +198,6 @@ function CodeTab({ children, hidden, className }) {
   );
 }
 function CodeSnippets({ postman, codeSamples }) {
-  // TODO: match theme for vscode.
   const { siteConfig } = (0, useDocusaurusContext_1.default)();
   const contentType = (0, hooks_1.useTypedSelector)(
     (state) => state.contentType.value
@@ -216,18 +220,20 @@ function CodeSnippets({ postman, codeSamples }) {
   const auth = (0, hooks_1.useTypedSelector)((state) => state.auth);
   // User-defined languages array
   // Can override languageSet, change order of langs, override options and variants
-  const langs = [
-    ...(siteConfig?.themeConfig?.languageTabs ?? exports.languageSet),
-  ];
+  const userDefinedLanguageSet =
+    siteConfig?.themeConfig?.languageTabs ?? exports.languageSet;
   // Filter languageSet by user-defined langs
   const filteredLanguageSet = exports.languageSet.filter((ls) => {
-    return langs.some((lang) => {
+    return userDefinedLanguageSet?.some((lang) => {
       return lang.language === ls.language;
     });
   });
   // Merge user-defined langs into languageSet
   const mergedLangs = (0, languages_1.mergeCodeSampleLanguage)(
-    (0, merge_1.default)(filteredLanguageSet, langs),
+    (0, languages_1.mergeArraysbyLanguage)(
+      userDefinedLanguageSet,
+      filteredLanguageSet
+    ),
     codeSamples
   );
   // Read defaultLang from localStorage

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

@@ -1,3 +1,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;

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

@@ -5,9 +5,20 @@
  * 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 });
-exports.getCodeSampleSourceFromLanguage = exports.mergeCodeSampleLanguage =
-  void 0;
+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"));
 function mergeCodeSampleLanguage(languages, codeSamples) {
   return languages.map((language) => {
     const languageCodeSamples = codeSamples.filter(
@@ -31,6 +42,22 @@ function mergeCodeSampleLanguage(languages, codeSamples) {
   });
 }
 exports.mergeCodeSampleLanguage = mergeCodeSampleLanguage;
+const mergeArraysbyLanguage = (arr1, arr2) => {
+  const mergedArray = (0, unionBy_1.default)(arr1, arr2, "language");
+  return mergedArray.map((item) => {
+    const matchingItems = [
+      (0, find_1.default)(arr1, ["language", item["language"]]),
+      (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;
+    });
+  });
+};
+exports.mergeArraysbyLanguage = mergeArraysbyLanguage;
 function getCodeSampleSourceFromLanguage(language) {
   if (
     language &&

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

@@ -58,9 +58,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 // @ts-nocheck
 const react_1 = __importStar(require("react"));
 const internal_1 = require("@docusaurus/theme-common/internal");
-const postman_collection_1 = __importDefault(
-  require("@paloaltonetworks/postman-collection")
-);
 const Accept_1 = __importDefault(require("@theme/ApiExplorer/Accept"));
 const Authorization_1 = __importDefault(
   require("@theme/ApiExplorer/Authorization")
@@ -78,6 +75,7 @@ const ParamOptions_1 = __importDefault(
 const slice_1 = require("@theme/ApiExplorer/Response/slice");
 const Server_1 = __importDefault(require("@theme/ApiExplorer/Server"));
 const hooks_1 = require("@theme/ApiItem/hooks");
+const postman_collection_1 = __importDefault(require("postman-collection"));
 const react_hook_form_1 = require("react-hook-form");
 const makeRequest_1 = __importDefault(require("./makeRequest"));
 function Request({ item }) {

package/lib/theme/ApiExplorer/Request/makeRequest.d.ts

@@ -1,4 +1,4 @@
-import sdk from "@paloaltonetworks/postman-collection";
 import { Body } from "@theme/ApiExplorer/Body/slice";
+import sdk from "postman-collection";
 declare function makeRequest(request: sdk.Request, proxy: string | undefined, _body: Body): Promise<any>;
 export default makeRequest;

package/lib/theme/ApiExplorer/buildPostmanRequest.d.ts

@@ -1,7 +1,7 @@
-import sdk from "@paloaltonetworks/postman-collection";
 import { AuthState } from "@theme/ApiExplorer/Authorization/slice";
 import { Body } from "@theme/ApiExplorer/Body/slice";
 import { ParameterObject, ServerObject } from "docusaurus-plugin-openapi-docs/src/openapi/types";
+import sdk from "postman-collection";
 type Param = {
     value?: string | string[];
 } & ParameterObject;

package/lib/theme/ApiExplorer/buildPostmanRequest.js

@@ -11,10 +11,8 @@ var __importDefault =
     return mod && mod.__esModule ? mod : { default: mod };
   };
 Object.defineProperty(exports, "__esModule", { value: true });
-const postman_collection_1 = __importDefault(
-  require("@paloaltonetworks/postman-collection")
-);
 const cloneDeep_1 = __importDefault(require("lodash/cloneDeep"));
+const postman_collection_1 = __importDefault(require("postman-collection"));
 function setQueryParams(postman, queryParams) {
   postman.url.query.clear();
   const qp = queryParams

package/lib/theme/ApiExplorer/index.js

@@ -12,14 +12,12 @@ var __importDefault =
   };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
-const postman_collection_1 = __importDefault(
-  require("@paloaltonetworks/postman-collection")
-);
 const CodeSnippets_1 = __importDefault(
   require("@theme/ApiExplorer/CodeSnippets")
 );
 const Request_1 = __importDefault(require("@theme/ApiExplorer/Request"));
 const Response_1 = __importDefault(require("@theme/ApiExplorer/Response"));
+const postman_collection_1 = __importDefault(require("postman-collection"));
 const SecuritySchemes_1 = __importDefault(require("./SecuritySchemes"));
 function ApiExplorer({ item, infoPath }) {
   const postman = new postman_collection_1.default.Request(item.postman);

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

@@ -74,16 +74,29 @@ function DocItemLayout({ children }) {
           react_1.default.createElement(Content_1.default, null, children),
           react_1.default.createElement(
             "div",
-            {
-              className: (0, clsx_1.default)("col", api ? "col--7" : "col--12"),
-            },
-            react_1.default.createElement(Footer_1.default, null)
+            { 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: (0, clsx_1.default)("col", api ? "col--7" : "col--12") },
-          react_1.default.createElement(Paginator_1.default, null)
+          { 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)
+          )
         )
       )
     ),

package/lib/theme/ApiItem/index.js

@@ -43,9 +43,11 @@ function ApiItem(props) {
   const { schema } = frontMatter;
   // decompress and parse
   if (api) {
-    api = JSON.parse(
-      zlib_1.default.inflateSync(Buffer.from(api, "base64")).toString()
-    );
+    try {
+      api = JSON.parse(
+        zlib_1.default.inflateSync(Buffer.from(api, "base64")).toString()
+      );
+    } catch {}
   }
   const { siteConfig } = (0, useDocusaurusContext_1.default)();
   const themeConfig = siteConfig.themeConfig;
@@ -204,7 +206,7 @@ function ApiItem(props) {
           { className: "row" },
           react_1.default.createElement(
             "div",
-            { className: "col col--12" },
+            { className: "col col--12 markdown" },
             react_1.default.createElement(MDXComponent, null)
           )
         )

package/lib/theme/ApiTabs/_ApiTabs.scss

@@ -85,6 +85,7 @@
   overflow-y: hidden;
   overflow-x: scroll;
   scroll-behavior: smooth;
+  scrollbar-width: none;
 }
 
 .openapi-tabs__response-list-container::-webkit-scrollbar {

package/lib/theme/DiscriminatorTabs/_DiscriminatorTabs.scss

@@ -59,6 +59,7 @@
   overflow-y: hidden;
   overflow-x: scroll;
   scroll-behavior: smooth;
+  scrollbar-width: none;
 }
 
 .openapi-tabs__discriminator-list-container::-webkit-scrollbar {

package/lib/theme/MimeTabs/_MimeTabs.scss

@@ -45,6 +45,7 @@
   overflow-y: hidden;
   overflow-x: scroll;
   scroll-behavior: smooth;
+  scrollbar-width: none;
 
   &::-webkit-scrollbar {
     display: none;

package/lib/theme/OperationTabs/_OperationTabs.scss

@@ -44,6 +44,7 @@
   overflow-y: hidden;
   overflow-x: scroll;
   scroll-behavior: smooth;
+  scrollbar-width: none;
 
   &::-webkit-scrollbar {
     display: none;

package/lib/theme/SchemaTabs/_SchemaTabs.scss

@@ -42,6 +42,7 @@
   overflow-y: hidden;
   overflow-x: scroll;
   scroll-behavior: smooth;
+  scrollbar-width: none;
 
   &::-webkit-scrollbar {
     display: none;

package/lib/theme/SchemaTabs/index.js

@@ -74,11 +74,13 @@ function TabList({ className, block, selectedValue, selectValue, tabValues }) {
     };
   }, []);
 
-  const handleRightClick = () => {
+  const handleRightClick = (e) => {
+    e.preventDefault();
     tabItemListContainerRef.current.scrollLeft += 90;
   };
 
-  const handleLeftClick = () => {
+  const handleLeftClick = (e) => {
+    e.preventDefault();
     tabItemListContainerRef.current.scrollLeft -= 90;
   };
 

package/lib/theme/styles.scss

@@ -130,22 +130,22 @@
 
 /* Version button */
 
-// .version-button div {
-//   display: block;
-// }
+.version-button div {
+  display: block;
+}
 
-// .version-button div > button > span::after {
-//   border-color: currentcolor transparent;
-//   border-style: solid;
-//   border-width: 0.4em 0.4em 0;
-//   content: "";
-//   margin-left: 0.3em;
-//   position: relative;
-//   transform: translateY(-50%);
-//   display: inline-block;
-//   font-size: 0.8rem;
-//   top: 1px;
-// }
+.version-button div > button > span::after {
+  border-color: currentcolor transparent;
+  border-style: solid;
+  border-width: 0.4em 0.4em 0;
+  content: "";
+  margin-left: 0.3em;
+  position: relative;
+  transform: translateY(-50%);
+  display: inline-block;
+  font-size: 0.8rem;
+  top: 1px;
+}
 
 .openapi__logo {
   width: 250px;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "docusaurus-theme-openapi-docs",
   "description": "OpenAPI theme for Docusaurus.",
-  "version": "2.1.3",
+  "version": "2.2.1",
   "license": "MIT",
   "keywords": [
     "openapi",
@@ -37,17 +37,17 @@
   "dependencies": {
     "@docusaurus/theme-common": ">=2.4.1 <=2.4.3",
     "@hookform/error-message": "^2.0.1",
-    "@paloaltonetworks/postman-code-generators": "1.1.15-patch.2",
-    "@paloaltonetworks/postman-collection": "^4.1.0",
     "@reduxjs/toolkit": "^1.7.1",
     "clsx": "^1.1.1",
     "copy-text-to-clipboard": "^3.1.0",
     "crypto-js": "^4.1.1",
-    "docusaurus-plugin-openapi-docs": "^2.1.3",
+    "docusaurus-plugin-openapi-docs": "^2.2.0",
     "docusaurus-plugin-sass": "^0.2.3",
     "file-saver": "^2.0.5",
     "lodash": "^4.17.20",
     "node-polyfill-webpack-plugin": "^2.0.1",
+    "postman-code-generators": "^1.10.1",
+    "postman-collection": "^4.4.0",
     "prism-react-renderer": "^1.3.5",
     "react-hook-form": "^7.43.8",
     "react-live": "^4.0.0",
@@ -68,5 +68,5 @@
   "engines": {
     "node": ">=14"
   },
-  "gitHead": "3bca23ffd3bc51c3d7f4ebb3916e2ece8c823961"
+  "gitHead": "73b212d18343aa7a35ede5136f5353f06b89d25f"
 }

package/src/postman-code-generators.d.ts

@@ -6,4 +6,4 @@
  * ========================================================================== */
 
 // TODO: Remove this when https://github.com/facebook/docusaurus/issues/6087 is resolved.
-declare module "@paloaltonetworks/postman-code-generators";
+declare module "postman-code-generators";

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

@@ -5,20 +5,27 @@
  * LICENSE file in the root directory of this source tree.
  * ========================================================================== */
 
+/* ============================================================================
+ * 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.
+ * ========================================================================== */
+
 import React, { useState, useEffect } from "react";
 
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
-import codegen from "@paloaltonetworks/postman-code-generators";
-import sdk from "@paloaltonetworks/postman-collection";
 import ApiCodeBlock from "@theme/ApiExplorer/ApiCodeBlock";
 import buildPostmanRequest from "@theme/ApiExplorer/buildPostmanRequest";
 import CodeTabs from "@theme/ApiExplorer/CodeTabs";
 import { useTypedSelector } from "@theme/ApiItem/hooks";
-import merge from "lodash/merge";
+import codegen from "postman-code-generators";
+import sdk from "postman-collection";
 
 import { CodeSample, Language } from "./code-snippets-types";
 import {
   getCodeSampleSourceFromLanguage,
+  mergeArraysbyLanguage,
   mergeCodeSampleLanguage,
 } from "./languages";
 
@@ -149,8 +156,6 @@ function CodeTab({ children, hidden, className }: any): JSX.Element {
 }
 
 function CodeSnippets({ postman, codeSamples }: Props) {
-  // TODO: match theme for vscode.
-
   const { siteConfig } = useDocusaurusContext();
 
   const contentType = useTypedSelector((state: any) => state.contentType.value);
@@ -167,21 +172,20 @@ function CodeSnippets({ postman, codeSamples }: Props) {
 
   // User-defined languages array
   // Can override languageSet, change order of langs, override options and variants
-  const langs = [
-    ...((siteConfig?.themeConfig?.languageTabs as Language[] | undefined) ??
-      languageSet),
-  ];
+  const userDefinedLanguageSet =
+    (siteConfig?.themeConfig?.languageTabs as Language[] | undefined) ??
+    languageSet;
 
   // Filter languageSet by user-defined langs
   const filteredLanguageSet = languageSet.filter((ls) => {
-    return langs.some((lang) => {
+    return userDefinedLanguageSet?.some((lang) => {
       return lang.language === ls.language;
     });
   });
 
   // Merge user-defined langs into languageSet
   const mergedLangs = mergeCodeSampleLanguage(
-    merge(filteredLanguageSet, langs),
+    mergeArraysbyLanguage(userDefinedLanguageSet, filteredLanguageSet),
     codeSamples
   );
 

package/src/theme/ApiExplorer/CodeSnippets/languages.ts

@@ -5,6 +5,11 @@
  * LICENSE file in the root directory of this source tree.
  * ========================================================================== */
 
+import find from "lodash/find";
+import isArray from "lodash/isArray";
+import mergeWith from "lodash/mergeWith";
+import unionBy from "lodash/unionBy";
+
 import { CodeSample, Language } from "./code-snippets-types";
 
 export function mergeCodeSampleLanguage(
@@ -36,6 +41,23 @@ export function mergeCodeSampleLanguage(
   });
 }
 
+export const mergeArraysbyLanguage = (arr1: any, arr2: any) => {
+  const mergedArray = unionBy(arr1, arr2, "language");
+
+  return mergedArray.map((item: any) => {
+    const matchingItems = [
+      find(arr1, ["language", item["language"]]),
+      find(arr2, ["language", item["language"]]),
+    ];
+    return mergeWith({}, ...matchingItems, (objValue: any) => {
+      if (isArray(objValue)) {
+        return objValue;
+      }
+      return undefined;
+    });
+  });
+};
+
 export function getCodeSampleSourceFromLanguage(language: Language) {
   if (
     language &&

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

@@ -9,7 +9,6 @@
 import React, { useState } from "react";
 
 import { useDoc } from "@docusaurus/theme-common/internal";
-import sdk from "@paloaltonetworks/postman-collection";
 import Accept from "@theme/ApiExplorer/Accept";
 import Authorization from "@theme/ApiExplorer/Authorization";
 import Body from "@theme/ApiExplorer/Body";
@@ -27,6 +26,7 @@ import Server from "@theme/ApiExplorer/Server";
 import { useTypedDispatch, useTypedSelector } from "@theme/ApiItem/hooks";
 import { ParameterObject } from "docusaurus-plugin-openapi-docs/src/openapi/types";
 import { ApiItem } from "docusaurus-plugin-openapi-docs/src/types";
+import sdk from "postman-collection";
 import { FormProvider, useForm } from "react-hook-form";
 
 import makeRequest from "./makeRequest";

package/src/theme/ApiExplorer/Request/makeRequest.ts

@@ -5,8 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  * ========================================================================== */
 
-import sdk from "@paloaltonetworks/postman-collection";
 import { Body } from "@theme/ApiExplorer/Body/slice";
+import sdk from "postman-collection";
 
 function fetchWithtimeout(
   url: string,

package/src/theme/ApiExplorer/buildPostmanRequest.ts

@@ -5,7 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  * ========================================================================== */
 
-import sdk from "@paloaltonetworks/postman-collection";
 import { AuthState, Scheme } from "@theme/ApiExplorer/Authorization/slice";
 import { Body, Content } from "@theme/ApiExplorer/Body/slice";
 import {
@@ -13,6 +12,7 @@ import {
   ServerObject,
 } from "docusaurus-plugin-openapi-docs/src/openapi/types";
 import cloneDeep from "lodash/cloneDeep";
+import sdk from "postman-collection";
 
 type Param = {
   value?: string | string[];

package/src/theme/ApiExplorer/index.tsx

@@ -7,11 +7,11 @@
 
 import React from "react";
 
-import sdk from "@paloaltonetworks/postman-collection";
 import CodeSnippets from "@theme/ApiExplorer/CodeSnippets";
 import Request from "@theme/ApiExplorer/Request";
 import Response from "@theme/ApiExplorer/Response";
 import { ApiItem } from "docusaurus-plugin-openapi-docs/src/types";
+import sdk from "postman-collection";
 
 import SecuritySchemes from "./SecuritySchemes";
 

package/src/theme/ApiExplorer/postman-collection.d.ts

@@ -5,6 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  * ========================================================================== */
 
-declare module "@paloaltonetworks/postman-collection" {
+declare module "postman-collection" {
   export = Request.sdk;
 }

package/src/theme/ApiItem/Layout/index.tsx

@@ -62,12 +62,16 @@ export default function DocItemLayout({ children }: Props): JSX.Element {
             <DocVersionBadge />
             {docTOC.mobile}
             <DocItemContent>{children}</DocItemContent>
-            <div className={clsx("col", api ? "col--7" : "col--12")}>
-              <DocItemFooter />
+            <div className="row">
+              <div className={clsx("col", api ? "col--7" : "col--12")}>
+                <DocItemFooter />
+              </div>
             </div>
           </article>
-          <div className={clsx("col", api ? "col--7" : "col--12")}>
-            <DocItemPaginator />
+          <div className="row">
+            <div className={clsx("col", api ? "col--7" : "col--12")}>
+              <DocItemPaginator />
+            </div>
           </div>
         </div>
       </div>

package/src/theme/ApiItem/index.tsx

@@ -57,11 +57,12 @@ export default function ApiItem(props: Props): JSX.Element {
   const { schema } = frontMatter as SchemaFrontMatter;
   // decompress and parse
   if (api) {
-    api = JSON.parse(
-      zlib.inflateSync(Buffer.from(api as any, "base64")).toString()
-    );
+    try {
+      api = JSON.parse(
+        zlib.inflateSync(Buffer.from(api as any, "base64")).toString()
+      );
+    } catch {}
   }
-
   const { siteConfig } = useDocusaurusContext();
   const themeConfig = siteConfig.themeConfig as ThemeConfig;
   const options = themeConfig.api;
@@ -188,7 +189,7 @@ export default function ApiItem(props: Props): JSX.Element {
         <DocItemMetadata />
         <DocItemLayout>
           <div className="row">
-            <div className="col col--12">
+            <div className="col col--12 markdown">
               <MDXComponent />
             </div>
           </div>

package/src/theme/ApiTabs/_ApiTabs.scss

@@ -85,6 +85,7 @@
   overflow-y: hidden;
   overflow-x: scroll;
   scroll-behavior: smooth;
+  scrollbar-width: none;
 }
 
 .openapi-tabs__response-list-container::-webkit-scrollbar {

package/src/theme/DiscriminatorTabs/_DiscriminatorTabs.scss

@@ -59,6 +59,7 @@
   overflow-y: hidden;
   overflow-x: scroll;
   scroll-behavior: smooth;
+  scrollbar-width: none;
 }
 
 .openapi-tabs__discriminator-list-container::-webkit-scrollbar {

package/src/theme/MimeTabs/_MimeTabs.scss

@@ -45,6 +45,7 @@
   overflow-y: hidden;
   overflow-x: scroll;
   scroll-behavior: smooth;
+  scrollbar-width: none;
 
   &::-webkit-scrollbar {
     display: none;

package/src/theme/OperationTabs/_OperationTabs.scss

@@ -44,6 +44,7 @@
   overflow-y: hidden;
   overflow-x: scroll;
   scroll-behavior: smooth;
+  scrollbar-width: none;
 
   &::-webkit-scrollbar {
     display: none;

package/src/theme/SchemaTabs/_SchemaTabs.scss

@@ -42,6 +42,7 @@
   overflow-y: hidden;
   overflow-x: scroll;
   scroll-behavior: smooth;
+  scrollbar-width: none;
 
   &::-webkit-scrollbar {
     display: none;

package/src/theme/SchemaTabs/index.js

@@ -74,11 +74,13 @@ function TabList({ className, block, selectedValue, selectValue, tabValues }) {
     };
   }, []);
 
-  const handleRightClick = () => {
+  const handleRightClick = (e) => {
+    e.preventDefault();
     tabItemListContainerRef.current.scrollLeft += 90;
   };
 
-  const handleLeftClick = () => {
+  const handleLeftClick = (e) => {
+    e.preventDefault();
     tabItemListContainerRef.current.scrollLeft -= 90;
   };
 

package/src/theme/styles.scss

@@ -130,22 +130,22 @@
 
 /* Version button */
 
-// .version-button div {
-//   display: block;
-// }
+.version-button div {
+  display: block;
+}
 
-// .version-button div > button > span::after {
-//   border-color: currentcolor transparent;
-//   border-style: solid;
-//   border-width: 0.4em 0.4em 0;
-//   content: "";
-//   margin-left: 0.3em;
-//   position: relative;
-//   transform: translateY(-50%);
-//   display: inline-block;
-//   font-size: 0.8rem;
-//   top: 1px;
-// }
+.version-button div > button > span::after {
+  border-color: currentcolor transparent;
+  border-style: solid;
+  border-width: 0.4em 0.4em 0;
+  content: "";
+  margin-left: 0.3em;
+  position: relative;
+  transform: translateY(-50%);
+  display: inline-block;
+  font-size: 0.8rem;
+  top: 1px;
+}
 
 .openapi__logo {
   width: 250px;

package/lib/theme/ApiDemoPanel/ApiCodeBlock/ExpandButton/index.js

@@ -1,165 +0,0 @@
-/* ============================================================================
- * 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.
- * ========================================================================== */
-
-import React, { useEffect } from "react";
-
-import { usePrismTheme } from "@docusaurus/theme-common";
-import { translate } from "@docusaurus/Translate";
-import Container from "@theme/ApiDemoPanel/ApiCodeBlock/Container";
-import CopyButton from "@theme/ApiDemoPanel/ApiCodeBlock/CopyButton";
-import ExitButton from "@theme/ApiDemoPanel/ApiCodeBlock/ExitButton";
-import Line from "@theme/ApiDemoPanel/ApiCodeBlock/Line";
-import clsx from "clsx";
-import Highlight, { defaultProps } from "prism-react-renderer";
-import Modal from "react-modal";
-
-export default function ExpandButton({
-  code,
-  className,
-  language,
-  showLineNumbers,
-  blockClassName,
-  title,
-  lineClassNames,
-}) {
-  const prismTheme = usePrismTheme();
-
-  function openModal() {
-    setIsOpen(true);
-  }
-
-  function closeModal() {
-    setIsOpen(false);
-  }
-
-  const [modalIsOpen, setIsOpen] = React.useState(false);
-
-  useEffect(() => {
-    Modal.setAppElement("body");
-  });
-
-  return (
-    <>
-      <button
-        type="button"
-        aria-label={
-          modalIsOpen
-            ? translate({
-                id: "theme.CodeBlock.expanded",
-                message: "Expanded",
-                description: "The expanded button label on code blocks",
-              })
-            : translate({
-                id: "theme.CodeBlock.expandButtonAriaLabel",
-                message: "Expand code to fullscreen",
-                description: "The ARIA label for expand code blocks button",
-              })
-        }
-        title={translate({
-          id: "theme.CodeBlock.expand",
-          message: "Expand",
-          description: "The expand button label on code blocks",
-        })}
-        className={clsx(
-          "clean-btn",
-          className,
-          "openapi-explorer__code-block-expand-btn",
-          modalIsOpen && "openapi-explorer__code-block-expand-btn--copied"
-        )}
-        onClick={openModal}
-      >
-        <span
-          className="openapi-explorer__code-block-expand-btn-icons"
-          aria-hidden="true"
-        >
-          <svg
-            className="openapi-explorer__code-block-expand-btn-icon"
-            viewBox="0 0 448 512"
-          >
-            <path d="M32 32C14.3 32 0 46.3 0 64v96c0 17.7 14.3 32 32 32s32-14.3 32-32V96h64c17.7 0 32-14.3 32-32s-14.3-32-32-32H32zM64 352c0-17.7-14.3-32-32-32s-32 14.3-32 32v96c0 17.7 14.3 32 32 32h96c17.7 0 32-14.3 32-32s-14.3-32-32-32H64V352zM320 32c-17.7 0-32 14.3-32 32s14.3 32 32 32h64v64c0 17.7 14.3 32 32 32s32-14.3 32-32V64c0-17.7-14.3-32-32-32H320zM448 352c0-17.7-14.3-32-32-32s-32 14.3-32 32v64H320c-17.7 0-32 14.3-32 32s14.3 32 32 32h96c17.7 0 32-14.3 32-32V352z" />
-          </svg>
-          <svg
-            className="openapi-explorer__code-block-expand-btn-icon--success"
-            viewBox="0 0 24 24"
-          >
-            <path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" />
-          </svg>
-        </span>
-      </button>
-      <Modal
-        className="openapi-explorer__expand-modal-content"
-        overlayClassName="openapi-explorer__expand-modal-overlay"
-        isOpen={modalIsOpen}
-        onRequestClose={closeModal}
-        contentLabel="Code Snippet"
-      >
-        <Container
-          as="div"
-          className={clsx(
-            "openapi-explorer__code-block-container",
-            language &&
-              !blockClassName.includes(`language-${language}`) &&
-              `language-${language}`
-          )}
-        >
-          {title && (
-            <div className="openapi-explorer__code-block-title">{title}</div>
-          )}
-          <div className="openapi-explorer__code-block-content">
-            <Highlight
-              {...defaultProps}
-              theme={prismTheme}
-              code={code}
-              language={language ?? "text"}
-            >
-              {({ className, tokens, getLineProps, getTokenProps }) => (
-                <pre
-                  /* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */
-                  tabIndex={0}
-                  className={clsx(
-                    className,
-                    "openapi-explorer__code-block",
-                    "thin-scrollbar"
-                  )}
-                >
-                  <code
-                    className={clsx(
-                      "openapi-explorer__code-block-lines",
-                      showLineNumbers &&
-                        "openapi-explorer__code-block-lines-numbers"
-                    )}
-                  >
-                    {tokens.map((line, i) => (
-                      <Line
-                        key={i}
-                        line={line}
-                        getLineProps={getLineProps}
-                        getTokenProps={getTokenProps}
-                        classNames={lineClassNames[i]}
-                        showLineNumbers={showLineNumbers}
-                      />
-                    ))}
-                  </code>
-                </pre>
-              )}
-            </Highlight>
-            <div className="openapi-explorer__code-block-btn-group">
-              <CopyButton
-                className="openapi-explorer__code-block-code-btn"
-                code={code}
-              />
-              <ExitButton
-                className="openapi-dmeo__code-block-code-btn"
-                handler={closeModal}
-              />
-            </div>
-          </div>
-        </Container>
-      </Modal>
-    </>
-  );
-}

package/lib/theme/ApiDemoPanel/ApiCodeBlock/Line/_Line.scss

@@ -1,46 +0,0 @@
-/* Intentionally has zero specificity, so that to be able to override
-the background in custom CSS file due bug https://github.com/facebook/docusaurus/issues/3678 */
-:where(:root) {
-  --docusaurus-highlighted-code-line-bg: rgb(72 77 91);
-}
-
-:where([data-theme="dark"]) {
-  --docusaurus-highlighted-code-line-bg: rgb(100 100 100);
-}
-
-.theme-code-block-highlighted-line {
-  background-color: var(--docusaurus-highlighted-code-line-bg);
-  display: block;
-  margin: 0 calc(-1 * var(--ifm-pre-padding));
-  padding: 0 var(--ifm-pre-padding);
-}
-
-.openapi-explorer__code-block-code-line {
-  display: table-row;
-  counter-increment: line-count;
-}
-
-.openapi-explorer__code-block-code-line-number {
-  display: table-cell;
-  text-align: right;
-  width: 1%;
-  position: sticky;
-  left: 0;
-  padding: 0 var(--ifm-pre-padding);
-  background: var(--ifm-pre-background);
-  overflow-wrap: normal;
-}
-
-.openapi-explorer__code-block-code-line-number::before {
-  content: counter(line-count);
-  opacity: 0.4;
-}
-
-:global(.theme-code-block-highlighted-line)
-  .openapi-explorer__code-block-code-line-number::before {
-  opacity: 0.8;
-}
-
-.openapi-explorer__code-block-code-line-number {
-  padding-right: var(--ifm-pre-padding);
-}

package/src/theme/ApiDemoPanel/ApiCodeBlock/ExpandButton/index.js

@@ -1,165 +0,0 @@
-/* ============================================================================
- * 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.
- * ========================================================================== */
-
-import React, { useEffect } from "react";
-
-import { usePrismTheme } from "@docusaurus/theme-common";
-import { translate } from "@docusaurus/Translate";
-import Container from "@theme/ApiDemoPanel/ApiCodeBlock/Container";
-import CopyButton from "@theme/ApiDemoPanel/ApiCodeBlock/CopyButton";
-import ExitButton from "@theme/ApiDemoPanel/ApiCodeBlock/ExitButton";
-import Line from "@theme/ApiDemoPanel/ApiCodeBlock/Line";
-import clsx from "clsx";
-import Highlight, { defaultProps } from "prism-react-renderer";
-import Modal from "react-modal";
-
-export default function ExpandButton({
-  code,
-  className,
-  language,
-  showLineNumbers,
-  blockClassName,
-  title,
-  lineClassNames,
-}) {
-  const prismTheme = usePrismTheme();
-
-  function openModal() {
-    setIsOpen(true);
-  }
-
-  function closeModal() {
-    setIsOpen(false);
-  }
-
-  const [modalIsOpen, setIsOpen] = React.useState(false);
-
-  useEffect(() => {
-    Modal.setAppElement("body");
-  });
-
-  return (
-    <>
-      <button
-        type="button"
-        aria-label={
-          modalIsOpen
-            ? translate({
-                id: "theme.CodeBlock.expanded",
-                message: "Expanded",
-                description: "The expanded button label on code blocks",
-              })
-            : translate({
-                id: "theme.CodeBlock.expandButtonAriaLabel",
-                message: "Expand code to fullscreen",
-                description: "The ARIA label for expand code blocks button",
-              })
-        }
-        title={translate({
-          id: "theme.CodeBlock.expand",
-          message: "Expand",
-          description: "The expand button label on code blocks",
-        })}
-        className={clsx(
-          "clean-btn",
-          className,
-          "openapi-explorer__code-block-expand-btn",
-          modalIsOpen && "openapi-explorer__code-block-expand-btn--copied"
-        )}
-        onClick={openModal}
-      >
-        <span
-          className="openapi-explorer__code-block-expand-btn-icons"
-          aria-hidden="true"
-        >
-          <svg
-            className="openapi-explorer__code-block-expand-btn-icon"
-            viewBox="0 0 448 512"
-          >
-            <path d="M32 32C14.3 32 0 46.3 0 64v96c0 17.7 14.3 32 32 32s32-14.3 32-32V96h64c17.7 0 32-14.3 32-32s-14.3-32-32-32H32zM64 352c0-17.7-14.3-32-32-32s-32 14.3-32 32v96c0 17.7 14.3 32 32 32h96c17.7 0 32-14.3 32-32s-14.3-32-32-32H64V352zM320 32c-17.7 0-32 14.3-32 32s14.3 32 32 32h64v64c0 17.7 14.3 32 32 32s32-14.3 32-32V64c0-17.7-14.3-32-32-32H320zM448 352c0-17.7-14.3-32-32-32s-32 14.3-32 32v64H320c-17.7 0-32 14.3-32 32s14.3 32 32 32h96c17.7 0 32-14.3 32-32V352z" />
-          </svg>
-          <svg
-            className="openapi-explorer__code-block-expand-btn-icon--success"
-            viewBox="0 0 24 24"
-          >
-            <path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" />
-          </svg>
-        </span>
-      </button>
-      <Modal
-        className="openapi-explorer__expand-modal-content"
-        overlayClassName="openapi-explorer__expand-modal-overlay"
-        isOpen={modalIsOpen}
-        onRequestClose={closeModal}
-        contentLabel="Code Snippet"
-      >
-        <Container
-          as="div"
-          className={clsx(
-            "openapi-explorer__code-block-container",
-            language &&
-              !blockClassName.includes(`language-${language}`) &&
-              `language-${language}`
-          )}
-        >
-          {title && (
-            <div className="openapi-explorer__code-block-title">{title}</div>
-          )}
-          <div className="openapi-explorer__code-block-content">
-            <Highlight
-              {...defaultProps}
-              theme={prismTheme}
-              code={code}
-              language={language ?? "text"}
-            >
-              {({ className, tokens, getLineProps, getTokenProps }) => (
-                <pre
-                  /* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */
-                  tabIndex={0}
-                  className={clsx(
-                    className,
-                    "openapi-explorer__code-block",
-                    "thin-scrollbar"
-                  )}
-                >
-                  <code
-                    className={clsx(
-                      "openapi-explorer__code-block-lines",
-                      showLineNumbers &&
-                        "openapi-explorer__code-block-lines-numbers"
-                    )}
-                  >
-                    {tokens.map((line, i) => (
-                      <Line
-                        key={i}
-                        line={line}
-                        getLineProps={getLineProps}
-                        getTokenProps={getTokenProps}
-                        classNames={lineClassNames[i]}
-                        showLineNumbers={showLineNumbers}
-                      />
-                    ))}
-                  </code>
-                </pre>
-              )}
-            </Highlight>
-            <div className="openapi-explorer__code-block-btn-group">
-              <CopyButton
-                className="openapi-explorer__code-block-code-btn"
-                code={code}
-              />
-              <ExitButton
-                className="openapi-dmeo__code-block-code-btn"
-                handler={closeModal}
-              />
-            </div>
-          </div>
-        </Container>
-      </Modal>
-    </>
-  );
-}

package/src/theme/ApiDemoPanel/ApiCodeBlock/Line/_Line.scss

@@ -1,46 +0,0 @@
-/* Intentionally has zero specificity, so that to be able to override
-the background in custom CSS file due bug https://github.com/facebook/docusaurus/issues/3678 */
-:where(:root) {
-  --docusaurus-highlighted-code-line-bg: rgb(72 77 91);
-}
-
-:where([data-theme="dark"]) {
-  --docusaurus-highlighted-code-line-bg: rgb(100 100 100);
-}
-
-.theme-code-block-highlighted-line {
-  background-color: var(--docusaurus-highlighted-code-line-bg);
-  display: block;
-  margin: 0 calc(-1 * var(--ifm-pre-padding));
-  padding: 0 var(--ifm-pre-padding);
-}
-
-.openapi-explorer__code-block-code-line {
-  display: table-row;
-  counter-increment: line-count;
-}
-
-.openapi-explorer__code-block-code-line-number {
-  display: table-cell;
-  text-align: right;
-  width: 1%;
-  position: sticky;
-  left: 0;
-  padding: 0 var(--ifm-pre-padding);
-  background: var(--ifm-pre-background);
-  overflow-wrap: normal;
-}
-
-.openapi-explorer__code-block-code-line-number::before {
-  content: counter(line-count);
-  opacity: 0.4;
-}
-
-:global(.theme-code-block-highlighted-line)
-  .openapi-explorer__code-block-code-line-number::before {
-  opacity: 0.8;
-}
-
-.openapi-explorer__code-block-code-line-number {
-  padding-right: var(--ifm-pre-padding);
-}