docusaurus-theme-openapi-docs 1.0.6 → 1.1.2

package/lib/theme/ApiItem/index.js

@@ -11,27 +11,11 @@ var _ExecutionEnvironment = _interopRequireDefault(require("@docusaurus/Executio
 
 var _themeCommon = require("@docusaurus/theme-common");
 
-var _DocBreadcrumbs = _interopRequireDefault(require("@theme/DocBreadcrumbs"));
-
-var _DocItemFooter = _interopRequireDefault(require("@theme/DocItemFooter"));
-
-var _DocPaginator = _interopRequireDefault(require("@theme/DocPaginator"));
-
-var _DocVersionBadge = _interopRequireDefault(require("@theme/DocVersionBadge"));
-
-var _DocVersionBanner = _interopRequireDefault(require("@theme/DocVersionBanner"));
-
-var _Heading = _interopRequireDefault(require("@theme/Heading"));
-
-var _MDXContent = _interopRequireDefault(require("@theme/MDXContent"));
-
-var _TOC = _interopRequireDefault(require("@theme/TOC"));
-
-var _TOCCollapsible = _interopRequireDefault(require("@theme/TOCCollapsible"));
-
 var _clsx = _interopRequireDefault(require("clsx"));
 
-var _stylesModule = _interopRequireDefault(require("./styles.module.css"));
+var _Layout = _interopRequireDefault(require("./Layout"));
+
+var _Metadata = _interopRequireDefault(require("./Metadata"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -41,6 +25,10 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  * ========================================================================== */
+const {
+  DocProvider
+} = require("@docusaurus/theme-common/internal");
+
 let ApiDemoPanel = _ => <div style={{
   marginTop: "3.5em"
 }} />;
@@ -49,113 +37,36 @@ if (_ExecutionEnvironment.default.canUseDOM) {
   ApiDemoPanel = require("@theme/ApiDemoPanel").default;
 }
 
-function DocItemMetadata(props) {
-  var _assets$image;
-
-  const {
-    content: DocContent
-  } = props;
-  const {
-    metadata,
-    frontMatter,
-    assets
-  } = DocContent;
-  const {
-    keywords
-  } = frontMatter;
-  const {
-    description,
-    title
-  } = metadata;
-  const image = (_assets$image = assets.image) !== null && _assets$image !== void 0 ? _assets$image : frontMatter.image;
-  return <_themeCommon.PageMetadata {...{
-    title,
-    description,
-    keywords,
-    image
-  }} />;
-}
-
-function DocItemContent(props) {
-  const {
-    content: DocContent
-  } = props;
-  const {
-    metadata,
-    frontMatter
-  } = DocContent;
-  const {
-    info_path: infoPath,
-    hide_title: hideTitle,
-    hide_table_of_contents: hideTableOfContents,
-    toc_min_heading_level: tocMinHeadingLevel,
-    toc_max_heading_level: tocMaxHeadingLevel
-  } = frontMatter;
-  const {
-    title
-  } = metadata;
-  const {
-    api
-  } = frontMatter; // We only add a title if:
-  // - user doesn't ask to hide it with front matter
-  // - the markdown content does not already contain a top-level h1 heading
-
-  const shouldAddTitle = !hideTitle && typeof DocContent.contentTitle === "undefined";
-  const windowSize = (0, _themeCommon.useWindowSize)();
-  const canRenderTOC = !hideTableOfContents && DocContent.toc && DocContent.toc.length > 0;
-  const renderTocDesktop = canRenderTOC && (windowSize === "desktop" || windowSize === "ssr");
-  return <div className="row">
-      <div className={(0, _clsx.default)("col", !hideTableOfContents && _stylesModule.default.docItemCol)}>
-        <_DocVersionBanner.default />
-        <div className={_stylesModule.default.docItemContainer}>
-          <article>
-            <_DocBreadcrumbs.default />
-            <_DocVersionBadge.default />
-
-            {canRenderTOC && <_TOCCollapsible.default toc={DocContent.toc} minHeadingLevel={tocMinHeadingLevel} maxHeadingLevel={tocMaxHeadingLevel} className={(0, _clsx.default)(_themeCommon.ThemeClassNames.docs.docTocMobile, _stylesModule.default.tocMobile)} />}
-
-            <div className={(0, _clsx.default)(_themeCommon.ThemeClassNames.docs.docMarkdown, "theme-api-markdown", "markdown")}>
-              {
-              /*
-               Title can be declared inside md content or declared through
-               front matter and added manually. To make both cases consistent,
-               the added title is added under the same div.markdown block
-               See https://github.com/facebook/docusaurus/pull/4882#issuecomment-853021120
-               */
-            }
-              {shouldAddTitle && <header>
-                  <_Heading.default as="h1">{title}</_Heading.default>
-                </header>}
-              <_MDXContent.default>
-                <div className="row">
-                  <div className={(0, _clsx.default)("col", api ? "col--7" : "col--12")}>
-                    <DocContent />
-                  </div>
-                  {api && <div className="col col--5">
-                      <ApiDemoPanel item={api} infoPath={infoPath} />
-                    </div>}
-                </div>
-              </_MDXContent.default>
-            </div>
-            <div className={(0, _clsx.default)("col", api ? "col--7" : "col--12")}>
-              <_DocItemFooter.default {...props} />
-            </div>
-          </article>
-          <div className={(0, _clsx.default)("col", api ? "col--7" : "col--12")}>
-            <_DocPaginator.default previous={metadata.previous} next={metadata.next} />
-          </div>
-        </div>
-      </div>
-      {renderTocDesktop && <div className="col col--3">
-          <_TOC.default toc={DocContent.toc} minHeadingLevel={tocMinHeadingLevel} maxHeadingLevel={tocMaxHeadingLevel} className={_themeCommon.ThemeClassNames.docs.docTocDesktop} />
-        </div>}
-    </div>;
-}
-
 function DocItem(props) {
   const docHtmlClassName = `docs-doc-id-${props.content.metadata.unversionedId}`;
-  return <_themeCommon.HtmlClassNameProvider className={docHtmlClassName}>
-      <DocItemMetadata {...props} />
-      <DocItemContent {...props} />
-    </_themeCommon.HtmlClassNameProvider>;
+
+  const DocContent = () => {
+    const MDXComponent = props.content;
+    const {
+      frontMatter
+    } = MDXComponent;
+    const {
+      info_path: infoPath
+    } = frontMatter;
+    const {
+      api
+    } = frontMatter;
+    return <div className="row">
+        <div className={(0, _clsx.default)("col", api ? "col--7" : "col--12")}>
+          <MDXComponent />
+        </div>
+        {api && <div className="col col--5">
+            <ApiDemoPanel item={api} infoPath={infoPath} />
+          </div>}
+      </div>;
+  };
+
+  return <DocProvider content={props.content}>
+      <_themeCommon.HtmlClassNameProvider className={docHtmlClassName}>
+        <_Metadata.default />
+        <_Layout.default>
+          <DocContent />
+        </_Layout.default>
+      </_themeCommon.HtmlClassNameProvider>
+    </DocProvider>;
 }

package/lib/theme/ApiTabs/index.js

@@ -9,20 +9,22 @@ import React, {
   Children,
   cloneElement,
   isValidElement,
+  useEffect,
   useRef,
   useState,
 } from "react";
 
-import {
-  duplicates,
-  useScrollPositionBlocker,
-  useTabGroupChoice,
-} from "@docusaurus/theme-common";
+import { duplicates } from "@docusaurus/theme-common";
 import useIsBrowser from "@docusaurus/useIsBrowser";
 import clsx from "clsx";
 
 import styles from "./styles.module.css"; // A very rough duck type, but good enough to guard against mistakes while
 
+const {
+  useScrollPositionBlocker,
+  useTabGroupChoice,
+} = require("@docusaurus/theme-common/internal");
+
 // allowing customization
 
 function isTabItem(comp) {
@@ -142,7 +144,16 @@ function ApiTabsComponent(props) {
   };
 
   const tabItemListContainerRef = useRef(null);
-  const showTabArrows = values.length >= 5;
+  const [showTabArrows, setShowTabArrows] = useState(false);
+
+  useEffect(() => {
+    const tabOffsetWidth = tabItemListContainerRef.current.offsetWidth;
+    const tabScrollWidth = tabItemListContainerRef.current.scrollWidth;
+
+    if (tabOffsetWidth < tabScrollWidth) {
+      setShowTabArrows(true);
+    }
+  }, []);
 
   const handleRightClick = () => {
     tabItemListContainerRef.current.scrollLeft += 90;

package/lib/theme/ApiTabs/styles.module.css

@@ -87,7 +87,6 @@
   content: "";
   height: 1.25rem;
   width: 1.25rem;
-  padding: 0 0.75rem;
   border: none;
   min-width: 1.25rem;
   background: var(--ifm-menu-link-sublist-icon) 50% / 2rem 2rem;

package/lib/theme/SchemaTabs/index.js

@@ -0,0 +1,258 @@
+/* ============================================================================
+ * 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, {
+  Children,
+  cloneElement,
+  isValidElement,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+
+import { duplicates } from "@docusaurus/theme-common";
+import useIsBrowser from "@docusaurus/useIsBrowser";
+import clsx from "clsx";
+
+import styles from "./styles.module.css"; // A very rough duck type, but good enough to guard against mistakes while
+
+const {
+  useScrollPositionBlocker,
+  useTabGroupChoice,
+} = require("@docusaurus/theme-common/internal");
+
+// allowing customization
+
+function isTabItem(comp) {
+  return typeof comp.props.value !== "undefined";
+}
+
+function SchemaTabsComponent(props) {
+  const {
+    lazy,
+    block,
+    defaultValue: defaultValueProp,
+    values: valuesProp,
+    groupId,
+    className,
+  } = props;
+  const children = Children.map(props.children, (child) => {
+    if (isValidElement(child) && isTabItem(child)) {
+      return child;
+    } // child.type.name will give non-sensical values in prod because of
+    // minification, but we assume it won't throw in prod.
+
+    throw new Error(
+      `Docusaurus error: Bad <Tabs> child <${
+        // @ts-expect-error: guarding against unexpected cases
+        typeof child.type === "string" ? child.type : child.type.name
+      }>: all children of the <Tabs> component should be <TabItem>, and every <TabItem> should have a unique "value" prop.`
+    );
+  });
+  const values =
+    valuesProp ?? // We only pick keys that we recognize. MDX would inject some keys by default
+    children.map(({ props: { value, label, attributes } }) => ({
+      value,
+      label,
+      attributes,
+    }));
+  const dup = duplicates(values, (a, b) => a.value === b.value);
+
+  if (dup.length > 0) {
+    throw new Error(
+      `Docusaurus error: Duplicate values "${dup
+        .map((a) => a.value)
+        .join(", ")}" found in <Tabs>. Every value needs to be unique.`
+    );
+  } // When defaultValueProp is null, don't show a default tab
+
+  const defaultValue =
+    defaultValueProp === null
+      ? defaultValueProp
+      : defaultValueProp ??
+        children.find((child) => child.props.default)?.props.value ??
+        children[0]?.props.value;
+
+  if (defaultValue !== null && !values.some((a) => a.value === defaultValue)) {
+    throw new Error(
+      `Docusaurus error: The <Tabs> has a defaultValue "${defaultValue}" but none of its children has the corresponding value. Available values are: ${values
+        .map((a) => a.value)
+        .join(
+          ", "
+        )}. If you intend to show no default tab, use defaultValue={null} instead.`
+    );
+  }
+
+  const { tabGroupChoices, setTabGroupChoices } = useTabGroupChoice();
+  const [selectedValue, setSelectedValue] = useState(defaultValue);
+  const tabRefs = [];
+  const { blockElementScrollPositionUntilNextRender } =
+    useScrollPositionBlocker();
+
+  if (groupId != null) {
+    const relevantTabGroupChoice = tabGroupChoices[groupId];
+
+    if (
+      relevantTabGroupChoice != null &&
+      relevantTabGroupChoice !== selectedValue &&
+      values.some((value) => value.value === relevantTabGroupChoice)
+    ) {
+      setSelectedValue(relevantTabGroupChoice);
+    }
+  }
+
+  const handleTabChange = (event) => {
+    const newTab = event.currentTarget;
+    const newTabIndex = tabRefs.indexOf(newTab);
+    const newTabValue = values[newTabIndex].value;
+
+    if (newTabValue !== selectedValue) {
+      blockElementScrollPositionUntilNextRender(newTab);
+      setSelectedValue(newTabValue);
+
+      if (groupId != null) {
+        setTabGroupChoices(groupId, newTabValue);
+      }
+    }
+  };
+
+  const handleKeydown = (event) => {
+    let focusElement = null;
+
+    switch (event.key) {
+      case "ArrowRight": {
+        const nextTab = tabRefs.indexOf(event.currentTarget) + 1;
+        focusElement = tabRefs[nextTab] || tabRefs[0];
+        break;
+      }
+
+      case "ArrowLeft": {
+        const prevTab = tabRefs.indexOf(event.currentTarget) - 1;
+        focusElement = tabRefs[prevTab] || tabRefs[tabRefs.length - 1];
+        break;
+      }
+
+      default:
+        break;
+    }
+
+    focusElement?.focus();
+  };
+
+  const tabItemListContainerRef = useRef(null);
+  const [showTabArrows, setShowTabArrows] = useState(false);
+
+  useEffect(() => {
+    const tabOffsetWidth = tabItemListContainerRef.current.offsetWidth;
+    const tabScrollWidth = tabItemListContainerRef.current.scrollWidth;
+
+    if (tabOffsetWidth < tabScrollWidth) {
+      setShowTabArrows(true);
+    }
+  }, []);
+
+  const handleRightClick = () => {
+    tabItemListContainerRef.current.scrollLeft += 90;
+  };
+
+  const handleLeftClick = () => {
+    tabItemListContainerRef.current.scrollLeft -= 90;
+  };
+
+  return (
+    <div className="tabs__container">
+      <div className={styles.schemaTabsTopSection}>
+        <div className={styles.schemaTabsContainer}>
+          {showTabArrows && (
+            <button
+              className={clsx(styles.tabArrow, styles.tabArrowLeft)}
+              onClick={handleLeftClick}
+            />
+          )}
+          <ul
+            ref={tabItemListContainerRef}
+            role="tablist"
+            aria-orientation="horizontal"
+            className={clsx(
+              styles.schemaTabsListContainer,
+              "tabs",
+              {
+                "tabs--block": block,
+              },
+              className
+            )}
+          >
+            {values.map(({ value, label, attributes }) => {
+              return (
+                <li
+                  role="tab"
+                  tabIndex={selectedValue === value ? 0 : -1}
+                  aria-selected={selectedValue === value}
+                  key={value}
+                  ref={(tabControl) => tabRefs.push(tabControl)}
+                  onKeyDown={handleKeydown}
+                  onFocus={handleTabChange}
+                  onClick={handleTabChange}
+                  {...attributes}
+                  className={clsx(
+                    "tabs__item",
+                    styles.tabItem,
+                    attributes?.className,
+                    {
+                      [styles.schemaTabActive]: selectedValue === value,
+                    }
+                  )}
+                >
+                  <span className={styles.schemaTabLabel}>
+                    {label ?? value}
+                  </span>
+                </li>
+              );
+            })}
+          </ul>
+          {showTabArrows && (
+            <button
+              className={clsx(styles.tabArrow, styles.tabArrowRight)}
+              onClick={handleRightClick}
+            />
+          )}
+        </div>
+      </div>
+      <hr />
+      {lazy ? (
+        cloneElement(
+          children.filter(
+            (tabItem) => tabItem.props.value === selectedValue
+          )[0],
+          {
+            className: clsx("margin-vert--md", styles.schemaTabsContainer),
+          }
+        )
+      ) : (
+        <div className={clsx("margin-vert--md", styles.schemaTabsContainer)}>
+          {children.map((tabItem, i) =>
+            cloneElement(tabItem, {
+              key: i,
+              hidden: tabItem.props.value !== selectedValue,
+            })
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default function SchemaTabs(props) {
+  const isBrowser = useIsBrowser();
+  return (
+    <SchemaTabsComponent // Remount tabs after hydration
+      // Temporary fix for https://github.com/facebook/docusaurus/issues/5653
+      key={String(isBrowser)}
+      {...props}
+    />
+  );
+}

package/lib/theme/SchemaTabs/styles.module.css

@@ -0,0 +1,110 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+.tabItem {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 1.8rem;
+  margin-top: 0 !important;
+  margin-right: 0.5rem;
+  border: 1px solid var(--openapi-code-dim-dark);
+  border-radius: var(--ifm-global-radius);
+  color: var(--openapi-code-dim-dark);
+  font-size: 12px;
+}
+
+.tabItem:hover {
+  color: var(--ifm-color-emphasis-500) !important;
+}
+
+.tabItem:last-child {
+  margin-right: 0 !important;
+}
+
+/* Open API Schema Tabs */
+.schemaTabsTopSection {
+  margin-top: 1rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.schemaTabsTopSection + hr {
+  display: none;
+}
+
+.schemaTabsContainer {
+  display: flex;
+  align-items: center;
+  max-width: 390px;
+  padding-left: 3px;
+  overflow: hidden;
+}
+
+.schemaTabsListContainer {
+  padding: 0 0.25rem;
+  overflow-y: hidden;
+  overflow-x: scroll;
+  scroll-behavior: smooth;
+}
+
+.schemaTabsListContainer::-webkit-scrollbar {
+  display: none;
+}
+
+.tabItem.schemaTabActive {
+  border: 1px solid var(--ifm-color-primary);
+  color: var(--ifm-color-primary);
+}
+
+.schemaTabLabel {
+  white-space: nowrap;
+}
+
+.schemaTabsContainer {
+  max-width: 600px;
+}
+
+/* Tab Arrows */
+.tabArrow {
+  content: "";
+  height: 1.25rem;
+  width: 1.25rem;
+  padding: 0 0.75rem;
+  border: none;
+  min-width: 1.25rem;
+  background: var(--ifm-menu-link-sublist-icon) 50% / 2rem 2rem;
+  filter: var(--ifm-menu-link-sublist-icon-filter);
+}
+
+.tabArrow:hover {
+  cursor: pointer;
+}
+
+.tabArrowLeft {
+  transform: rotate(270deg);
+}
+
+.tabArrowRight {
+  transform: rotate(90deg);
+}
+
+@media screen and (max-width: 500px) {
+  .schemaTabsTopSection {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .schemaTabsContainer {
+    width: 100%;
+  }
+
+  .tabItem {
+    height: 100%;
+  }
+}

package/lib-next/theme/ApiDemoPanel/CodeTabs/index.js

@@ -5,15 +5,16 @@
  * LICENSE file in the root directory of this source tree.
  * ========================================================================== */
 import React, { useState, cloneElement, isValidElement } from "react";
-import {
-  useScrollPositionBlocker,
-  duplicates,
-  useTabGroupChoice,
-} from "@docusaurus/theme-common";
+import { duplicates } from "@docusaurus/theme-common";
 import useIsBrowser from "@docusaurus/useIsBrowser";
 import clsx from "clsx";
 import { languageSet } from "../Curl";
-import styles from "./styles.module.css"; // A very rough duck type, but good enough to guard against mistakes while
+import styles from "./styles.module.css";
+
+const {
+  useScrollPositionBlocker,
+  useTabGroupChoice,
+} = require("@docusaurus/theme-common/internal"); // A very rough duck type, but good enough to guard against mistakes while
 // allowing customization
 
 function isTabItem(comp) {

package/lib-next/theme/ApiDemoPanel/FloatingButton/index.js

@@ -9,8 +9,12 @@ import styles from "./styles.module.css";
 
 function FloatingButton({ label, onClick, children }) {
   return (
-    <div className={styles.floatingButton}>
-      {label && <button onClick={onClick}>{label}</button>}
+    <div tabIndex={0} className={styles.floatingButton}>
+      {label && (
+        <button tabIndex={0} onClick={onClick}>
+          {label}
+        </button>
+      )}
       {children}
     </div>
   );

package/lib-next/theme/ApiDemoPanel/FloatingButton/styles.module.css

@@ -9,7 +9,6 @@
   border-radius: var(--ifm-global-radius);
   color: var(--ifm-color-white);
   cursor: pointer;
-  outline: none;
   padding: 0.4rem 0.5rem;
   opacity: 0;
   visibility: hidden;
@@ -20,7 +19,9 @@
   right: calc(var(--ifm-pre-padding) / 2);
 }
 
-.floatingButton:hover button {
+.floatingButton:hover button,
+.floatingButton:focus-visible button,
+.floatingButton button:focus-visible {
   visibility: visible;
   opacity: 1;
 }

package/lib-next/theme/ApiDemoPanel/LiveEditor/index.js

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  * ========================================================================== */
-import React from "react";
+import React, { useState } from "react";
 import { usePrismTheme } from "@docusaurus/theme-common";
 import useIsBrowser from "@docusaurus/useIsBrowser";
 import { LiveProvider, LiveEditor, withLive } from "react-live";
@@ -13,14 +13,25 @@ import styles from "./styles.module.css";
 
 function Live({ onEdit }) {
   const isBrowser = useIsBrowser();
+  const [editorDisabled, setEditorDisabled] = useState(false); // TODO: Temporary solution for disabling tab key
+
+  const handleKeydown = (event) => {
+    if (event.key === "Tab") {
+      event.preventDefault();
+      setEditorDisabled(true);
+    }
+  };
+
   return (
-    <>
+    <div onClick={() => setEditorDisabled(false)}>
       <LiveEditor
         key={String(isBrowser)}
         className={styles.playgroundEditor}
         onChange={onEdit}
+        disabled={editorDisabled}
+        onKeyDown={handleKeydown}
       />
-    </>
+    </div>
   );
 }