docusaurus-theme-openapi-docs 3.0.0-beta.8 → 3.0.0

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

@@ -88,7 +88,10 @@ function Response({ item }: { item: NonNullable<ApiItem> }) {
       </div>
       <div
         style={{
-          backgroundColor: prismTheme.plain.backgroundColor,
+          backgroundColor:
+            code && prettyResponse !== "Fetching..."
+              ? prismTheme.plain.backgroundColor
+              : "transparent",
           paddingLeft: "1rem",
           paddingTop: "1rem",
           ...((prettyResponse === "Fetching..." || !code) && {

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";
 
 function ApiExplorer({
   item,

package/src/theme/ApiExplorer/persistanceMiddleware.ts

@@ -45,13 +45,13 @@ export function createPersistanceMiddleware(options: ThemeConfig["api"]) {
       }
 
       // TODO: determine way to rehydrate without flashing
-      // if (action.type === "contentType/setContentType") {
-      //   storage.setItem("contentType", action.payload);
-      // }
+      if (action.type === "contentType/setContentType") {
+        storage.setItem("contentType", action.payload);
+      }
 
-      // if (action.type === "accept/setAccept") {
-      //   storage.setItem("accept", action.payload);
-      // }
+      if (action.type === "accept/setAccept") {
+        storage.setItem("accept", action.payload);
+      }
 
       if (action.type === "server/setServer") {
         storage.setItem("server", action.payload);

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

@@ -65,12 +65,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

@@ -56,11 +56,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;
@@ -187,7 +188,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

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

package/src/theme/ApiTabs/index.tsx

@@ -161,8 +161,8 @@ function TabList({
                 parseInt(value) >= 400
                   ? "danger"
                   : parseInt(value) >= 200 && parseInt(value) < 300
-                  ? "success"
-                  : "info",
+                    ? "success"
+                    : "info",
                 {
                   active: selectedValue === value,
                 }

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/MimeTabs/index.tsx

@@ -21,7 +21,7 @@ import {
 } from "@docusaurus/theme-common/internal";
 import { TabItemProps } from "@docusaurus/theme-common/lib/utils/tabsUtils";
 import useIsBrowser from "@docusaurus/useIsBrowser";
-import setAccept from "@theme/ApiExplorer/Accept/slice";
+import { setAccept } from "@theme/ApiExplorer/Accept/slice";
 import { setContentType } from "@theme/ApiExplorer/ContentType/slice";
 import { useTypedDispatch, useTypedSelector } from "@theme/ApiItem/hooks";
 import { RootState } from "@theme/ApiItem/store";

package/src/theme/OperationTabs/_OperationTabs.scss

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

package/src/theme/SchemaTabs/_SchemaTabs.scss

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

package/src/theme/SchemaTabs/index.tsx

@@ -11,6 +11,7 @@ import React, {
   useEffect,
   useState,
   ReactElement,
+  LegacyRef,
 } from "react";
 
 import {
@@ -99,12 +100,18 @@ function TabList({
     };
   }, []);
 
-  const handleRightClick = () => {
-    tabItemListContainerRef.current!.scrollLeft += 90;
+  const handleRightClick = (e: any) => {
+    e.preventDefault();
+    if (tabItemListContainerRef.current) {
+      tabItemListContainerRef.current.scrollLeft += 90;
+    }
   };
 
-  const handleLeftClick = () => {
-    tabItemListContainerRef.current!.scrollLeft -= 90;
+  const handleLeftClick = (e: any) => {
+    e.preventDefault();
+    if (tabItemListContainerRef.current) {
+      tabItemListContainerRef.current.scrollLeft -= 90;
+    }
   };
 
   return (
@@ -116,7 +123,7 @@ function TabList({
         />
       )}
       <ul
-        ref={tabItemListContainerRef}
+        ref={tabItemListContainerRef as LegacyRef<HTMLUListElement>}
         role="tablist"
         aria-orientation="horizontal"
         className={clsx(

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/src/theme-openapi.d.ts

@@ -74,6 +74,7 @@ declare module "@theme/ApiExplorer/Accept" {
 }
 
 declare module "@theme/ApiExplorer/Accept/slice" {
+  export { setAccept };
   export default accept as Reducer<State, AnyAction>;
 }
 

package/lib/theme/ApiDemoPanel/ApiCodeBlock/ExpandButton/index.d.ts

@@ -1,13 +0,0 @@
-import React from "react";
-import { type Language } from "prism-react-renderer";
-interface Props {
-    code: string;
-    className: string;
-    language: Language;
-    showLineNumbers: boolean;
-    blockClassName: string;
-    title: string;
-    lineClassNames: string[];
-}
-export default function ExpandButton({ code, className, language, showLineNumbers, blockClassName, title, lineClassNames, }: Props): React.JSX.Element;
-export {};

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

@@ -1,240 +0,0 @@
-"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 __createBinding =
-  (this && this.__createBinding) ||
-  (Object.create
-    ? function (o, m, k, k2) {
-        if (k2 === undefined) k2 = k;
-        var desc = Object.getOwnPropertyDescriptor(m, k);
-        if (
-          !desc ||
-          ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)
-        ) {
-          desc = {
-            enumerable: true,
-            get: function () {
-              return m[k];
-            },
-          };
-        }
-        Object.defineProperty(o, k2, desc);
-      }
-    : function (o, m, k, k2) {
-        if (k2 === undefined) k2 = k;
-        o[k2] = m[k];
-      });
-var __setModuleDefault =
-  (this && this.__setModuleDefault) ||
-  (Object.create
-    ? function (o, v) {
-        Object.defineProperty(o, "default", { enumerable: true, value: v });
-      }
-    : function (o, v) {
-        o["default"] = v;
-      });
-var __importStar =
-  (this && this.__importStar) ||
-  function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null)
-      for (var k in mod)
-        if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k))
-          __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-  };
-var __importDefault =
-  (this && this.__importDefault) ||
-  function (mod) {
-    return mod && mod.__esModule ? mod : { default: mod };
-  };
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importStar(require("react"));
-const theme_common_1 = require("@docusaurus/theme-common");
-const Translate_1 = require("@docusaurus/Translate");
-// @ts-ignore
-const Container_1 = __importDefault(
-  require("@theme/ApiExplorer/ApiCodeBlock/Container")
-);
-// @ts-ignore
-const CopyButton_1 = __importDefault(
-  require("@theme/ApiExplorer/ApiCodeBlock/CopyButton")
-);
-// @ts-ignore
-const ExitButton_1 = __importDefault(
-  require("@theme/ApiExplorer/ApiCodeBlock/ExitButton")
-);
-// @ts-ignore
-const Line_1 = __importDefault(require("@theme/ApiExplorer/ApiCodeBlock/Line"));
-const clsx_1 = __importDefault(require("clsx"));
-const prism_react_renderer_1 = require("prism-react-renderer");
-const react_modal_1 = __importDefault(require("react-modal"));
-function ExpandButton({
-  code,
-  className,
-  language,
-  showLineNumbers,
-  blockClassName,
-  title,
-  lineClassNames,
-}) {
-  const prismTheme = (0, theme_common_1.usePrismTheme)();
-  function openModal() {
-    setIsOpen(true);
-  }
-  function closeModal() {
-    setIsOpen(false);
-  }
-  const [modalIsOpen, setIsOpen] = react_1.default.useState(false);
-  (0, react_1.useEffect)(() => {
-    react_modal_1.default.setAppElement("body");
-  });
-  return react_1.default.createElement(
-    react_1.default.Fragment,
-    null,
-    react_1.default.createElement(
-      "button",
-      {
-        type: "button",
-        "aria-label": modalIsOpen
-          ? (0, Translate_1.translate)({
-              id: "theme.CodeBlock.expanded",
-              message: "Expanded",
-              description: "The expanded button label on code blocks",
-            })
-          : (0, Translate_1.translate)({
-              id: "theme.CodeBlock.expandButtonAriaLabel",
-              message: "Expand code to fullscreen",
-              description: "The ARIA label for expand code blocks button",
-            }),
-        title: (0, Translate_1.translate)({
-          id: "theme.CodeBlock.expand",
-          message: "Expand",
-          description: "The expand button label on code blocks",
-        }),
-        className: (0, clsx_1.default)(
-          "clean-btn",
-          className,
-          "openapi-explorer__code-block-expand-btn",
-          modalIsOpen && "openapi-explorer__code-block-expand-btn--copied"
-        ),
-        onClick: openModal,
-      },
-      react_1.default.createElement(
-        "span",
-        {
-          className: "openapi-explorer__code-block-expand-btn-icons",
-          "aria-hidden": "true",
-        },
-        react_1.default.createElement(
-          "svg",
-          {
-            className: "openapi-explorer__code-block-expand-btn-icon",
-            viewBox: "0 0 448 512",
-          },
-          react_1.default.createElement("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",
-          })
-        ),
-        react_1.default.createElement(
-          "svg",
-          {
-            className: "openapi-explorer__code-block-expand-btn-icon--success",
-            viewBox: "0 0 24 24",
-          },
-          react_1.default.createElement("path", {
-            d: "M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z",
-          })
-        )
-      )
-    ),
-    react_1.default.createElement(
-      react_modal_1.default,
-      {
-        className: "openapi-explorer__expand-modal-content",
-        overlayClassName: "openapi-explorer__expand-modal-overlay",
-        isOpen: modalIsOpen,
-        onRequestClose: closeModal,
-        contentLabel: "Code Snippet",
-      },
-      react_1.default.createElement(
-        Container_1.default,
-        {
-          as: "div",
-          className: (0, clsx_1.default)(
-            "openapi-explorer__code-block-container",
-            language &&
-              !blockClassName.includes(`language-${language}`) &&
-              `language-${language}`
-          ),
-        },
-        title &&
-          react_1.default.createElement(
-            "div",
-            { className: "openapi-explorer__code-block-title" },
-            title
-          ),
-        react_1.default.createElement(
-          "div",
-          { className: "openapi-explorer__code-block-content" },
-          react_1.default.createElement(
-            prism_react_renderer_1.Highlight,
-            { theme: prismTheme, code: code, language: language ?? "text" },
-            ({ className, tokens, getLineProps, getTokenProps }) =>
-              react_1.default.createElement(
-                "pre",
-                {
-                  /* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */
-                  tabIndex: 0,
-                  className: (0, clsx_1.default)(
-                    className,
-                    "openapi-explorer__code-block",
-                    "thin-scrollbar"
-                  ),
-                },
-                react_1.default.createElement(
-                  "code",
-                  {
-                    className: (0, clsx_1.default)(
-                      "openapi-explorer__code-block-lines",
-                      showLineNumbers &&
-                        "openapi-explorer__code-block-lines-numbers"
-                    ),
-                  },
-                  tokens.map((line, i) =>
-                    react_1.default.createElement(Line_1.default, {
-                      key: i,
-                      line: line,
-                      getLineProps: getLineProps,
-                      getTokenProps: getTokenProps,
-                      classNames: lineClassNames,
-                      showLineNumbers: showLineNumbers,
-                    })
-                  )
-                )
-              )
-          ),
-          react_1.default.createElement(
-            "div",
-            { className: "openapi-explorer__code-block-btn-group" },
-            react_1.default.createElement(CopyButton_1.default, {
-              className: "openapi-explorer__code-block-code-btn",
-              code: code,
-            }),
-            react_1.default.createElement(ExitButton_1.default, {
-              className: "openapi-dmeo__code-block-code-btn",
-              handler: closeModal,
-            })
-          )
-        )
-      )
-    )
-  );
-}
-exports.default = ExpandButton;

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);
-}