docusaurus-theme-openapi-docs 1.6.0 → 2.0.0-beta.0

package/lib/index.js

@@ -18,7 +18,7 @@ function docusaurusThemeOpenAPI() {
   return {
     name: "docusaurus-theme-openapi",
     getClientModules() {
-      const modules = [require.resolve("./theme/styles.css")];
+      const modules = [require.resolve("./theme/styles.scss")];
       return modules;
     },
     getThemePath() {

package/lib/markdown/utils.js

@@ -26,7 +26,7 @@ function create(tag, props) {
   return `<${tag}${propString}>${render(children)}</${tag}>`;
 }
 function guard(value, cb) {
-  if (value !== undefined) {
+  if (!!value) {
     const children = cb(value);
     return render(children);
   }

package/lib/theme/ApiDemoPanel/Body/index.js

@@ -213,12 +213,14 @@ function Body({
   }
   if (exampleBody) {
     return <_FormItem.default label="Body" required={required}>
-        <_SchemaTabs.default lazy>
+        <_SchemaTabs.default className="openapi-tabs__schema" lazy>
+          {/* @ts-ignore */}
           <_TabItem.default label="Default" value="default" default>
             <_LiveEditor.default action={dispatch} language={language}>
               {defaultBody}
             </_LiveEditor.default>
           </_TabItem.default>
+          {/* @ts-ignore */}
           <_TabItem.default label="Example" value="example">
             {exampleBody && <_LiveEditor.default action={dispatch} language={language}>
                 {exampleBody}
@@ -229,19 +231,23 @@ function Body({
   }
   if (examplesBodies && examplesBodies.length > 0) {
     return <_FormItem.default label="Body" required={required}>
-        <_SchemaTabs.default lazy>
+        <_SchemaTabs.default className="openapi-tabs__schema" lazy>
+          {/* @ts-ignore */}
           <_TabItem.default label="Default" value="default" default>
             <_LiveEditor.default action={dispatch} language={language}>
               {defaultBody}
             </_LiveEditor.default>
           </_TabItem.default>
           {examplesBodies.map(example => {
-          return <_TabItem.default label={example.label} value={example.label} key={example.label}>
+          return (
+            // @ts-ignore
+            <_TabItem.default label={example.label} value={example.label} key={example.label}>
                 {example.summary && <p>{example.summary}</p>}
                 {example.body && <_LiveEditor.default action={dispatch} language={language}>
                     {example.body}
                   </_LiveEditor.default>}
-              </_TabItem.default>;
+              </_TabItem.default>
+          );
         })}
         </_SchemaTabs.default>
       </_FormItem.default>;

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

@@ -0,0 +1,216 @@
+.openapi-tabs__code-list-container {
+  display: table-row-group;
+}
+
+.openapi-tabs__code-item {
+  margin-top: 0 !important;
+  margin-right: 0.5rem;
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+  padding-top: 1rem !important;
+  padding-bottom: 1rem !important;
+
+  &.active {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+}
+
+.openapi-tabs__code-item--python {
+  color: var(--ifm-color-success);
+
+  &::after {
+    content: "";
+    width: 28px;
+    height: 28px;
+    background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/python/python-original.svg");
+    margin-block: auto;
+  }
+
+  &.active {
+    border-bottom-color: var(--ifm-color-success);
+    background-color: var(--ifm-color-emphasis-100);
+  }
+}
+
+.language-python {
+  max-height: 500px;
+  overflow: auto;
+}
+
+.openapi-tabs__code-item--go {
+  color: var(--ifm-color-info);
+
+  &::after {
+    content: "";
+    width: 28px;
+    height: 28px;
+    background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/go/go-original-wordmark.svg");
+    margin-block: auto;
+  }
+
+  &.active {
+    border-bottom-color: var(--ifm-color-info);
+    background-color: var(--ifm-color-emphasis-100);
+  }
+}
+
+.language-go {
+  max-height: 500px;
+  overflow: auto;
+}
+
+.openapi-tabs__code-item--javascript {
+  color: var(--ifm-color-warning);
+
+  &::after {
+    content: "";
+    width: 28px;
+    height: 28px;
+    background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/javascript/javascript-original.svg");
+    margin-block: auto;
+  }
+
+  &.active {
+    border-bottom-color: var(--ifm-color-warning);
+    background-color: var(--ifm-color-emphasis-100);
+  }
+}
+
+.language-javascript {
+  max-height: 500px;
+  overflow: auto;
+}
+
+.openapi-tabs__code-item--bash {
+  color: var(--ifm-color-danger);
+
+  &::after {
+    content: "";
+    width: 28px;
+    height: 28px;
+    background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/linux/linux-original.svg");
+    margin-block: auto;
+  }
+
+  &.active {
+    border-bottom-color: var(--ifm-color-danger);
+    background-color: var(--ifm-color-emphasis-100);
+  }
+}
+
+.language-bash {
+  max-height: 500px;
+  overflow: auto;
+}
+
+.openapi-tabs__code-item--ruby {
+  color: var(--ifm-color-danger);
+
+  &::after {
+    content: "";
+    width: 28px;
+    height: 28px;
+    background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/ruby/ruby-plain.svg");
+    margin-block: auto;
+  }
+
+  &.active {
+    border-bottom-color: var(--ifm-color-danger);
+    background-color: var(--ifm-color-emphasis-100);
+  }
+}
+
+.language-ruby {
+  max-height: 500px;
+  overflow: auto;
+}
+
+.openapi-tabs__code-item--csharp {
+  color: var(--ifm-color-gray-500);
+
+  &::after {
+    content: "";
+    width: 28px;
+    height: 28px;
+    background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/csharp/csharp-original.svg");
+    margin-block: auto;
+  }
+
+  &.active {
+    border-bottom-color: var(--ifm-color-gray-500);
+    background-color: var(--ifm-color-emphasis-100);
+  }
+}
+
+.language-csharp {
+  max-height: 500px;
+  overflow: auto;
+}
+
+.openapi-tabs__code-item--nodejs {
+  color: var(--ifm-color-success);
+
+  &::after {
+    content: "";
+    width: 28px;
+    height: 28px;
+    background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/nodejs/nodejs-original.svg");
+    margin-block: auto;
+  }
+
+  &.active {
+    border-bottom-color: var(--ifm-color-success);
+    background-color: var(--ifm-color-emphasis-100);
+  }
+}
+
+.language-nodejs {
+  max-height: 500px;
+  overflow: auto;
+}
+
+.openapi-tabs__code-item--php {
+  color: var(--ifm-color-gray-500);
+
+  &::after {
+    content: "";
+    width: 28px;
+    height: 28px;
+    background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/php/php-original.svg");
+    margin-block: auto;
+  }
+
+  &.active {
+    border-bottom-color: var(--ifm-color-gray-500);
+    background-color: var(--ifm-color-emphasis-100);
+  }
+}
+
+.language-php {
+  max-height: 500px;
+  overflow: auto;
+}
+
+.openapi-tabs__code-item--java {
+  color: var(--ifm-color-warning);
+
+  &::after {
+    content: "";
+    width: 28px;
+    height: 28px;
+    background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/java/java-original.svg");
+    margin-block: auto;
+  }
+
+  &.active {
+    border-bottom-color: var(--ifm-color-warning);
+    background-color: var(--ifm-color-emphasis-100);
+  }
+}
+
+@media only screen and (min-width: 768px) and (max-width: 996px) {
+  .openapi-tabs__code-list {
+    justify-content: space-around;
+  }
+}

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

@@ -1,18 +1,3 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = CodeTabs;
-var _react = _interopRequireWildcard(require("react"));
-var _themeCommon = require("@docusaurus/theme-common");
-var _useIsBrowser = _interopRequireDefault(require("@docusaurus/useIsBrowser"));
-var _Curl = require("@theme/ApiDemoPanel/Curl");
-var _clsx = _interopRequireDefault(require("clsx"));
-var _stylesModule = _interopRequireDefault(require("./styles.module.css"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 /* ============================================================================
  * Copyright (c) Palo Alto Networks
  *
@@ -20,142 +5,152 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  * LICENSE file in the root directory of this source tree.
  * ========================================================================== */
 
-const {
+import React, { cloneElement } from "react";
+
+import {
   useScrollPositionBlocker,
-  useTabGroupChoice
-} = require("@docusaurus/theme-common/internal");
+  useTabs,
+} from "@docusaurus/theme-common/internal";
+import useIsBrowser from "@docusaurus/useIsBrowser";
+import { languageSet } from "@theme/ApiDemoPanel/Curl";
+import clsx from "clsx";
 
-// A very rough duck type, but good enough to guard against mistakes while
-// allowing customization
-function isTabItem(comp) {
-  return "value" in comp.props;
-}
-function TabsComponent(props) {
-  var _ref, _children$find;
-  const {
-    lazy,
-    block,
-    defaultValue: defaultValueProp,
-    values: valuesProp,
-    groupId,
-    className,
-    action
-  } = props;
-  const children = _react.default.Children.map(props.children, child => {
-    if ((0, _react.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 !== null && valuesProp !== void 0 ? valuesProp :
-  // Only pick keys that we recognize. MDX would inject some keys by default
-  children.map(({
-    props: {
-      value,
-      label,
-      attributes
-    }
-  }) => ({
-    value,
-    label,
-    attributes
-  }));
-  const dup = (0, _themeCommon.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 : (_ref = defaultValueProp !== null && defaultValueProp !== void 0 ? defaultValueProp : (_children$find = children.find(child => child.props.default)) === null || _children$find === void 0 ? void 0 : _children$find.props.value) !== null && _ref !== void 0 ? _ref : 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] = (0, _react.useState)(defaultValue);
+function TabList({
+  action,
+  className,
+  block,
+  selectedValue,
+  selectValue,
+  tabValues,
+}) {
   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 { blockElementScrollPositionUntilNextRender } =
+    useScrollPositionBlocker();
+
+  const handleTabChange = (event) => {
     const newTab = event.currentTarget;
     const newTabIndex = tabRefs.indexOf(newTab);
-    const newTabValue = values[newTabIndex].value;
+    const newTabValue = tabValues[newTabIndex].value;
+
     if (newTabValue !== selectedValue) {
       blockElementScrollPositionUntilNextRender(newTab);
-      setSelectedValue(newTabValue);
-      if (action) {
-        const newLanguage = _Curl.languageSet.filter(lang => lang.language === newTabValue);
-        action(newLanguage[0]);
-      }
-      if (groupId != null) {
-        setTabGroupChoices(groupId, String(newTabValue));
-      }
+      selectValue(newTabValue);
+    }
+
+    if (action) {
+      const newLanguage = languageSet.filter(
+        (lang) => lang.language === newTabValue
+      );
+      action(newLanguage[0]);
     }
   };
-  const handleKeydown = event => {
-    var _focusElement;
+
+  const handleKeydown = (event) => {
     let focusElement = null;
     switch (event.key) {
-      case "ArrowRight":
-        {
-          var _tabRefs$nextTab;
-          const nextTab = tabRefs.indexOf(event.currentTarget) + 1;
-          focusElement = (_tabRefs$nextTab = tabRefs[nextTab]) !== null && _tabRefs$nextTab !== void 0 ? _tabRefs$nextTab : tabRefs[0];
-          break;
-        }
-      case "ArrowLeft":
-        {
-          var _tabRefs$prevTab;
-          const prevTab = tabRefs.indexOf(event.currentTarget) - 1;
-          focusElement = (_tabRefs$prevTab = tabRefs[prevTab]) !== null && _tabRefs$prevTab !== void 0 ? _tabRefs$prevTab : tabRefs[tabRefs.length - 1];
-          break;
-        }
+      case "Enter": {
+        handleTabChange(event);
+        break;
+      }
+      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 = focusElement) === null || _focusElement === void 0 ? void 0 : _focusElement.focus();
+    focusElement?.focus();
   };
-  return <div className={(0, _clsx.default)("tabs-container", _stylesModule.default.tabList)}>
-      <ul role="tablist" aria-orientation="horizontal" className={(0, _clsx.default)("tabs", {
-      "tabs--block": block
-    }, _stylesModule.default.code__tabs, className)}>
-        {values.map(({
-        value,
-        label,
-        attributes
-      }) => <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={(0, _clsx.default)("tabs__item", _stylesModule.default.tabItem, attributes === null || attributes === void 0 ? void 0 : attributes.className, {
-        "tabs__item--active": selectedValue === value
-      })}>
-            {label !== null && label !== void 0 ? label : value}
-          </li>)}
-      </ul>
 
-      {lazy ? (0, _react.cloneElement)(children.filter(tabItem => tabItem.props.value === selectedValue)[0], {
-      className: "margin-top--md"
-    }) : <div className="margin-top--md">
-          {children.map((tabItem, i) => (0, _react.cloneElement)(tabItem, {
-        key: i,
-        hidden: tabItem.props.value !== selectedValue
-      }))}
-        </div>}
-    </div>;
+  return (
+    <ul
+      role="tablist"
+      aria-orientation="horizontal"
+      className={clsx(
+        "tabs",
+        "openapi-tabs__code-list-container",
+        {
+          "tabs--block": block,
+        },
+        className
+      )}
+    >
+      {tabValues.map(({ value, label, attributes }) => (
+        <li
+          // TODO extract TabListItem
+          role="tab"
+          tabIndex={selectedValue === value ? 0 : -1}
+          aria-selected={selectedValue === value}
+          key={value}
+          ref={(tabControl) => tabRefs.push(tabControl)}
+          onKeyDown={handleKeydown}
+          onClick={handleTabChange}
+          {...attributes}
+          className={clsx(
+            "tabs__item",
+            "openapi-tabs__code-item",
+            attributes?.className,
+            {
+              active: selectedValue === value,
+            }
+          )}
+        >
+          {label ?? value}
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+function TabContent({ lazy, children, selectedValue }) {
+  // eslint-disable-next-line no-param-reassign
+  children = Array.isArray(children) ? children : [children];
+  if (lazy) {
+    const selectedTabItem = children.find(
+      (tabItem) => tabItem.props.value === selectedValue
+    );
+    if (!selectedTabItem) {
+      // fail-safe or fail-fast? not sure what's best here
+      return null;
+    }
+    return cloneElement(selectedTabItem, { className: "margin-top--md" });
+  }
+  return (
+    <div className="margin-top--md">
+      {children.map((tabItem, i) =>
+        cloneElement(tabItem, {
+          key: i,
+          hidden: tabItem.props.value !== selectedValue,
+        })
+      )}
+    </div>
+  );
+}
+
+function TabsComponent(props) {
+  const tabs = useTabs(props);
+  return (
+    <div className="tabs-container">
+      <TabList {...props} {...tabs} />
+      <TabContent {...props} {...tabs} />
+    </div>
+  );
+}
+
+export default function CodeTabs(props) {
+  const isBrowser = useIsBrowser();
+  return (
+    <TabsComponent
+      // Remount tabs after hydration
+      // Temporary fix for https://github.com/facebook/docusaurus/issues/5653
+      key={String(isBrowser)}
+      {...props}
+    />
+  );
 }
-function CodeTabs(props) {
-  const isBrowser = (0, _useIsBrowser.default)();
-  return <TabsComponent
-  // Remount tabs after hydration
-  // Temporary fix for https://github.com/facebook/docusaurus/issues/5653
-  key={String(isBrowser)} {...props} />;
-}

package/lib/theme/ApiDemoPanel/Curl/index.js

@@ -11,9 +11,7 @@ var _buildPostmanRequest = _interopRequireDefault(require("@theme/ApiDemoPanel/b
 var _CodeTabs = _interopRequireDefault(require("@theme/ApiDemoPanel/CodeTabs"));
 var _hooks = require("@theme/ApiItem/hooks");
 var _CodeBlock = _interopRequireDefault(require("@theme/CodeBlock"));
-var _clsx = _interopRequireDefault(require("clsx"));
 var _merge = _interopRequireDefault(require("lodash/merge"));
-var _stylesModule = _interopRequireDefault(require("./styles.module.css"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -106,7 +104,7 @@ function CodeTab({
   className,
   onClick
 }) {
-  return <div role="tabpanel" className={(0, _clsx.default)(_stylesModule.default.tabItem, className)} {...{
+  return <div role="tabpanel" className={className} {...{
     hidden
   }}>
       {children}
@@ -217,9 +215,9 @@ function Curl({
       <_CodeTabs.default groupId="code-samples" action={setLanguage}>
         {mergedLangs.map(lang => {
         return <CodeTab value={lang.language} label={""} key={lang.variant ? `${lang.language}-${lang.variant}` : lang.language} attributes={{
-          className: `code__tab--${lang.logoClass}`
+          className: `openapi-tabs__code-item--${lang.logoClass}`
         }}>
-              <_CodeBlock.default language={lang.highlight} className={_stylesModule.default.codeBlock}>
+              <_CodeBlock.default language={lang.highlight} className="openapi-demo__code-block">
                 {codeText}
               </_CodeBlock.default>
             </CodeTab>;

package/lib/theme/ApiDemoPanel/Execute/index.js

@@ -98,10 +98,14 @@ function Execute({
       try {
         await delay(1200);
         const res = await (0, _makeRequest.default)(postmanRequest, proxy, body);
-        dispatch((0, _slice.setResponse)(res));
+        dispatch((0, _slice.setResponse)(await res.text()));
+        dispatch((0, _slice.setCode)(res.status));
+        res.headers && dispatch((0, _slice.setHeaders)(Object.fromEntries(res.headers)));
       } catch (e) {
         console.log(e);
         dispatch((0, _slice.setResponse)("Connection failed"));
+        dispatch((0, _slice.clearCode)());
+        dispatch((0, _slice.clearHeaders)());
       }
     }}>
         Send API Request

package/lib/theme/ApiDemoPanel/Execute/makeRequest.js

@@ -174,7 +174,7 @@ async function makeRequest(request, proxy, _body) {
     finalUrl = normalizedProxy + request.url.toString();
   }
   return await fetchWithtimeout(finalUrl, requestOptions).then(response => {
-    return response.text();
+    return response;
   });
 }
 var _default = makeRequest;

package/lib/theme/ApiDemoPanel/FloatingButton/_FloatingButton.scss

@@ -0,0 +1,25 @@
+.openapi-demo__floating-btn {
+  position: relative;
+
+  button {
+    position: relative;
+    background: var(--ifm-color-emphasis-900);
+    border: none;
+    border-radius: var(--ifm-global-radius);
+    color: var(--ifm-color-emphasis-100);
+    cursor: pointer;
+    padding: 0.4rem 0.5rem;
+    opacity: 0;
+    visibility: hidden;
+    transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out,
+      bottom 0.2s ease-in-out;
+    position: absolute;
+    right: calc(var(--ifm-pre-padding) / 2);
+  }
+}
+.openapi-demo__floating-btn:hover button,
+.openapi-demo__floating-btn:focus-visible button,
+.openapi-demo__floating-btn button:focus-visible {
+  visibility: visible;
+  opacity: 1;
+}

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

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _stylesModule = _interopRequireDefault(require("./styles.module.css"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /* ============================================================================
  * Copyright (c) Palo Alto Networks
@@ -19,7 +18,7 @@ function FloatingButton({
   onClick,
   children
 }) {
-  return <div tabIndex={0} className={_stylesModule.default.floatingButton}>
+  return <div tabIndex={0} className="openapi-demo__floating-btn">
       {label && <button tabIndex={0} onClick={onClick}>
           {label}
         </button>}