docusaurus-theme-openapi-docs 2.0.0-beta.3 → 2.0.0-beta.5

package/{lib/theme/ApiDemoPanel → src/theme/ApiExplorer}/FormTextInput/_FormTextInput.scss

@@ -1,11 +1,11 @@
-.openapi-demo__form-item-input {
+.openapi-explorer__form-item-input {
   margin-top: calc(var(--ifm-pre-padding) / 2);
   background-color: var(--openapi-input-background);
   border: 1px solid transparent;
   outline: none;
   width: 100%;
   color: var(--ifm-pre-color);
-  padding: var(--openapi-demo-padding-input);
+  padding: var(--openapi-explorer-padding-input);
   border-radius: 4px;
 
   &:hover {
@@ -22,10 +22,10 @@
   }
 }
 
-.openapi-demo__input-error {
-  font-size: var(--openapi-demo-font-size-input);
+.openapi-explorer__input-error {
+  font-size: var(--openapi-explorer-font-size-input);
   color: var(--openapi-required);
-  padding-top: var(--openapi-demo-padding-input);
+  padding-top: var(--openapi-explorer-padding-input);
 
   &::before {
     display: inline;

package/src/theme/{ApiDemoPanel → ApiExplorer}/FormTextInput/index.tsx

@@ -43,7 +43,7 @@ function FormTextInput({
           {...register(paramName, {
             required: isRequired ? "This field is required" : false,
           })}
-          className={clsx("openapi-demo__form-item-input", {
+          className={clsx("openapi-explorer__form-item-input", {
             error: showErrorMessage,
           })}
           type={password ? "password" : "text"}
@@ -55,7 +55,7 @@ function FormTextInput({
         />
       ) : (
         <input
-          className="openapi-demo__form-item-input"
+          className="openapi-explorer__form-item-input"
           type={password ? "password" : "text"}
           placeholder={placeholder}
           title={placeholder}
@@ -69,7 +69,7 @@ function FormTextInput({
           errors={errors}
           name={paramName}
           render={({ message }) => (
-            <div className="openapi-demo__input-error">{message}</div>
+            <div className="openapi-explorer__input-error">{message}</div>
           )}
         />
       )}

package/src/theme/{ApiDemoPanel → ApiExplorer}/LiveEditor/_LiveEditor.scss

@@ -1,4 +1,4 @@
-.openapi-demo__playground-container {
+.openapi-explorer__playground-container {
   margin-top: 1rem;
   margin-bottom: var(--ifm-leading);
   border-radius: var(--ifm-global-radius);
@@ -7,7 +7,7 @@
   max-height: 500px;
 }
 
-.openapi-demo__playground-editor {
+.openapi-explorer__playground-editor {
   font: var(--ifm-code-font-size) / var(--ifm-pre-line-height)
     var(--ifm-font-family-monospace) !important;
   /* rtl:ignore */

package/src/theme/{ApiDemoPanel → ApiExplorer}/LiveEditor/index.tsx

@@ -10,7 +10,7 @@ import React, { useEffect, useState } from "react";
 import { usePrismTheme } from "@docusaurus/theme-common";
 import useIsBrowser from "@docusaurus/useIsBrowser";
 import { ErrorMessage } from "@hookform/error-message";
-import { setStringRawBody } from "@theme/ApiDemoPanel/Body/slice";
+import { setStringRawBody } from "@theme/ApiExplorer/Body/slice";
 import clsx from "clsx";
 import { Controller, useFormContext } from "react-hook-form";
 import { LiveProvider, LiveEditor, withLive } from "react-live";
@@ -27,8 +27,8 @@ function Live({ onEdit, showErrors }: any) {
       <LiveEditor
         key={String(isBrowser)}
         className={clsx({
-          "openapi-demo__playground-editor": true,
-          "openapi-demo__form-item-input": showErrors,
+          "openapi-explorer__playground-editor": true,
+          "openapi-explorer__form-item-input": showErrors,
           error: showErrors,
         })}
         onChange={onEdit}
@@ -72,7 +72,7 @@ function App({
   return (
     <div
       className={clsx({
-        "openapi-demo__playground-container": true,
+        "openapi-explorer__playground-container": true,
       })}
     >
       <LiveProvider
@@ -99,7 +99,7 @@ function App({
             errors={errors}
             name="requestBody"
             render={({ message }) => (
-              <div className="openapi-demo__input-error">{message}</div>
+              <div className="openapi-explorer__input-error">{message}</div>
             )}
           />
         )}

package/src/theme/{ApiDemoPanel → ApiExplorer}/MethodEndpoint/index.tsx

@@ -70,12 +70,14 @@ function MethodEndpoint({ method, path }: Props) {
     <>
       <pre className="openapi__method-endpoint">
         <span className={"badge badge--" + colorForMethod(method)}>
-          {method.toUpperCase()}
+          {method === "event" ? "Webhook" : method.toUpperCase()}
         </span>{" "}
-        <h2 className="openapi__method-endpoint-path">
-          {renderServerUrl()}
-          {`${path.replace(/{([a-z0-9-_]+)}/gi, ":$1")}`}
-        </h2>
+        {method !== "event" && (
+          <h2 className="openapi__method-endpoint-path">
+            {renderServerUrl()}
+            {`${path.replace(/{([a-z0-9-_]+)}/gi, ":$1")}`}
+          </h2>
+        )}
       </pre>
       <div className="openapi__divider" />
     </>

package/src/theme/{ApiDemoPanel → ApiExplorer}/ParamOptions/ParamFormItems/ParamArrayFormItem.tsx

@@ -9,9 +9,9 @@ import React, { useEffect, useState } from "react";
 
 import { ErrorMessage } from "@hookform/error-message";
 import { nanoid } from "@reduxjs/toolkit";
-import FormSelect from "@theme/ApiDemoPanel/FormSelect";
-import FormTextInput from "@theme/ApiDemoPanel/FormTextInput";
-import { Param, setParam } from "@theme/ApiDemoPanel/ParamOptions/slice";
+import FormSelect from "@theme/ApiExplorer/FormSelect";
+import FormTextInput from "@theme/ApiExplorer/FormTextInput";
+import { Param, setParam } from "@theme/ApiExplorer/ParamOptions/slice";
 import { useTypedDispatch } from "@theme/ApiItem/hooks";
 import { Controller, useFormContext } from "react-hook-form";
 
@@ -114,7 +114,7 @@ export default function ParamArrayFormItem({ param }: ParamProps) {
                   onChange={handleChangeItem(item, onChange)}
                 />
                 <button
-                  className="openapi-demo__delete-btn"
+                  className="openapi-explorer__delete-btn"
                   onClick={handleDeleteItem(item)}
                 >
                   <svg
@@ -133,7 +133,10 @@ export default function ParamArrayFormItem({ param }: ParamProps) {
                 </button>
               </div>
             ))}
-            <button className="openapi-demo__thin-btn" onClick={handleAddItem}>
+            <button
+              className="openapi-explorer__thin-btn"
+              onClick={handleAddItem}
+            >
               Add item
             </button>
           </>
@@ -144,7 +147,7 @@ export default function ParamArrayFormItem({ param }: ParamProps) {
           errors={errors}
           name="paramArray"
           render={({ message }) => (
-            <div className="openapi-demo__input-error">{message}</div>
+            <div className="openapi-explorer__input-error">{message}</div>
           )}
         />
       )}

package/src/theme/{ApiDemoPanel → ApiExplorer}/ParamOptions/ParamFormItems/ParamBooleanFormItem.tsx

@@ -8,8 +8,8 @@
 import React from "react";
 
 import { ErrorMessage } from "@hookform/error-message";
-import FormSelect from "@theme/ApiDemoPanel/FormSelect";
-import { Param, setParam } from "@theme/ApiDemoPanel/ParamOptions/slice";
+import FormSelect from "@theme/ApiExplorer/FormSelect";
+import { Param, setParam } from "@theme/ApiExplorer/ParamOptions/slice";
 import { useTypedDispatch } from "@theme/ApiItem/hooks";
 import { Controller, useFormContext } from "react-hook-form";
 
@@ -55,7 +55,7 @@ export default function ParamBooleanFormItem({ param }: ParamProps) {
           errors={errors}
           name="paramBoolean"
           render={({ message }) => (
-            <div className="openapi-demo__input-error">{message}</div>
+            <div className="openapi-explorer__input-error">{message}</div>
           )}
         />
       )}

package/src/theme/{ApiDemoPanel → ApiExplorer}/ParamOptions/ParamFormItems/ParamMultiSelectFormItem.tsx

@@ -8,8 +8,8 @@
 import React from "react";
 
 import { ErrorMessage } from "@hookform/error-message";
-import FormMultiSelect from "@theme/ApiDemoPanel/FormMultiSelect";
-import { Param, setParam } from "@theme/ApiDemoPanel/ParamOptions/slice";
+import FormMultiSelect from "@theme/ApiExplorer/FormMultiSelect";
+import { Param, setParam } from "@theme/ApiExplorer/ParamOptions/slice";
 import { useTypedDispatch, useTypedSelector } from "@theme/ApiItem/hooks";
 import { Controller, useFormContext } from "react-hook-form";
 
@@ -77,7 +77,7 @@ export default function ParamMultiSelectFormItem({ param }: ParamProps) {
           errors={errors}
           name="paramMultiSelect"
           render={({ message }) => (
-            <div className="openapi-demo__input-error">{message}</div>
+            <div className="openapi-explorer__input-error">{message}</div>
           )}
         />
       )}

package/src/theme/{ApiDemoPanel → ApiExplorer}/ParamOptions/ParamFormItems/ParamSelectFormItem.tsx

@@ -8,8 +8,8 @@
 import React from "react";
 
 import { ErrorMessage } from "@hookform/error-message";
-import FormSelect from "@theme/ApiDemoPanel/FormSelect";
-import { Param, setParam } from "@theme/ApiDemoPanel/ParamOptions/slice";
+import FormSelect from "@theme/ApiExplorer/FormSelect";
+import { Param, setParam } from "@theme/ApiExplorer/ParamOptions/slice";
 import { useTypedDispatch } from "@theme/ApiItem/hooks";
 import { Controller, useFormContext } from "react-hook-form";
 
@@ -56,7 +56,7 @@ export default function ParamSelectFormItem({ param }: ParamProps) {
           errors={errors}
           name="paramSelect"
           render={({ message }) => (
-            <div className="openapi-demo__input-error">{message}</div>
+            <div className="openapi-explorer__input-error">{message}</div>
           )}
         />
       )}

package/src/theme/{ApiDemoPanel → ApiExplorer}/ParamOptions/ParamFormItems/ParamTextFormItem.tsx

@@ -7,8 +7,8 @@
 
 import React from "react";
 
-import FormTextInput from "@theme/ApiDemoPanel/FormTextInput";
-import { Param, setParam } from "@theme/ApiDemoPanel/ParamOptions/slice";
+import FormTextInput from "@theme/ApiExplorer/FormTextInput";
+import { Param, setParam } from "@theme/ApiExplorer/ParamOptions/slice";
 import { useTypedDispatch } from "@theme/ApiItem/hooks";
 
 export interface ParamProps {

package/{lib/theme/ApiDemoPanel → src/theme/ApiExplorer}/ParamOptions/_ParamOptions.scss

@@ -1,4 +1,4 @@
-.openapi-demo__plus-btn--expanded {
+.openapi-explorer__plus-btn--expanded {
   transition: transform 0.2s ease;
   display: inline-block;
   transform: rotate(0deg);
@@ -7,7 +7,7 @@
   transform: rotate(45deg);
 }
 
-.openapi-demo__show-more-btn {
+.openapi-explorer__show-more-btn {
   width: 100%;
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -16,7 +16,7 @@
   margin-bottom: 0.5rem;
   padding: 0;
   cursor: pointer;
-  font-size: var(--openapi-demo-font-size-input);
+  font-size: var(--openapi-explorer-font-size-input);
   user-select: none;
   white-space: nowrap;
   border: 0px solid transparent;
@@ -34,7 +34,7 @@
   }
 }
 
-.openapi-demo__delete-btn {
+.openapi-explorer__delete-btn {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
@@ -77,7 +77,7 @@
   }
 }
 
-.openapi-demo__thin-btn {
+.openapi-explorer__thin-btn {
   -webkit-appearance: none;
   -moz-appearance: none;
   cursor: pointer;
@@ -112,11 +112,11 @@
   }
 }
 
-.openapi-demo__show-options {
+.openapi-explorer__show-options {
   visibility: visible;
 }
 
-.openapi-demo__hide-options {
+.openapi-explorer__hide-options {
   display: none;
   visibility: hidden;
 }

package/src/theme/{ApiDemoPanel → ApiExplorer}/ParamOptions/index.tsx

@@ -7,12 +7,12 @@
 
 import React, { useState } from "react";
 
-import FormItem from "@theme/ApiDemoPanel/FormItem";
-import ParamArrayFormItem from "@theme/ApiDemoPanel/ParamOptions/ParamFormItems/ParamArrayFormItem";
-import ParamBooleanFormItem from "@theme/ApiDemoPanel/ParamOptions/ParamFormItems/ParamBooleanFormItem";
-import ParamMultiSelectFormItem from "@theme/ApiDemoPanel/ParamOptions/ParamFormItems/ParamMultiSelectFormItem";
-import ParamSelectFormItem from "@theme/ApiDemoPanel/ParamOptions/ParamFormItems/ParamSelectFormItem";
-import ParamTextFormItem from "@theme/ApiDemoPanel/ParamOptions/ParamFormItems/ParamTextFormItem";
+import FormItem from "@theme/ApiExplorer/FormItem";
+import ParamArrayFormItem from "@theme/ApiExplorer/ParamOptions/ParamFormItems/ParamArrayFormItem";
+import ParamBooleanFormItem from "@theme/ApiExplorer/ParamOptions/ParamFormItems/ParamBooleanFormItem";
+import ParamMultiSelectFormItem from "@theme/ApiExplorer/ParamOptions/ParamFormItems/ParamMultiSelectFormItem";
+import ParamSelectFormItem from "@theme/ApiExplorer/ParamOptions/ParamFormItems/ParamSelectFormItem";
+import ParamTextFormItem from "@theme/ApiExplorer/ParamOptions/ParamFormItems/ParamTextFormItem";
 import { useTypedSelector } from "@theme/ApiItem/hooks";
 
 import { Param } from "./slice";
@@ -80,7 +80,7 @@ function ParamOptions() {
       {optionalParams.length > 0 && (
         <>
           <button
-            className="openapi-demo__show-more-btn"
+            className="openapi-explorer__show-more-btn"
             onClick={() => setShowOptional((prev) => !prev)}
           >
             <span
@@ -93,8 +93,8 @@ function ParamOptions() {
               <span
                 className={
                   showOptional
-                    ? "openapi-demo__plus-btn--expanded"
-                    : "openapi-demo__plus-btn"
+                    ? "openapi-explorer__plus-btn--expanded"
+                    : "openapi-explorer__plus-btn"
                 }
               >
                 <div>
@@ -125,8 +125,8 @@ function ParamOptions() {
           <div
             className={
               showOptional
-                ? "openapi-demo__show-options"
-                : "openapi-demo__hide-options"
+                ? "openapi-explorer__show-options"
+                : "openapi-explorer__hide-options"
             }
           >
             {optionalParams.map((param) => (

package/{lib/theme/ApiDemoPanel → src/theme/ApiExplorer}/Request/_Request.scss

@@ -1,7 +1,7 @@
-.openapi-demo__request-form {
+.openapi-explorer__request-form {
   background-color: var(--ifm-pre-background);
   border-radius: var(--openapi-card-border-radius);
-  border: 1px solid var(--openapi-demo-border-color);
+  border: 1px solid var(--openapi-explorer-border-color);
   box-shadow: 0 2px 3px hsla(222, 8%, 43%, 0.1),
     0 8px 16px -10px hsla(222, 8%, 43%, 0.2);
   color: var(--ifm-pre-color);
@@ -34,10 +34,10 @@
   }
 }
 
-.openapi-demo__request-header-container {
+.openapi-explorer__request-header-container {
   display: flex;
   justify-content: space-between;
-  border-bottom: 1px solid var(--openapi-demo-border-color);
+  border-bottom: 1px solid var(--openapi-explorer-border-color);
   margin: 0;
   padding: 0.75rem var(--ifm-pre-padding);
   text-transform: uppercase;
@@ -45,24 +45,24 @@
   font-weight: bold;
 }
 
-.openapi-demo__expand-details-btn {
+.openapi-explorer__expand-details-btn {
   &:hover {
     cursor: pointer;
   }
 }
 
-.openapi-demo__details-outer-container {
+.openapi-explorer__details-outer-container {
   padding: 1rem;
 }
 
-.openapi-demo__details-container[open] {
-  .openapi-demo__details-summary::before {
+.openapi-explorer__details-container[open] {
+  .openapi-explorer__details-summary::before {
     transform: rotate(180deg);
     margin-top: 0.25rem;
   }
 }
 
-.openapi-demo__details-summary {
+.openapi-explorer__details-summary {
   display: inline-flex;
   align-items: center;
   padding: 0.35rem 0;
@@ -80,16 +80,17 @@
   &::before {
     margin-right: 0.25rem;
     margin-bottom: 0.25rem;
-    background-image: var(--openapi-demo-caret-bg);
+    margin-top: 0.25rem;
+    background-image: var(--openapi-explorer-caret-bg);
     border: none !important;
     transform: rotate(90deg);
     content: "";
-    height: 0.75rem;
-    width: 0.75rem;
+    height: 1rem;
+    width: 1rem;
   }
 }
 
-.openapi-demo__request-btn {
+.openapi-explorer__request-btn {
   border: none;
   border-radius: var(--ifm-global-radius);
   padding: 0.5rem 1rem;

package/src/theme/{ApiDemoPanel → ApiExplorer}/Request/index.tsx

@@ -10,20 +10,20 @@ import React, { useState } from "react";
 
 import { useDoc } from "@docusaurus/theme-common/internal";
 import sdk from "@paloaltonetworks/postman-collection";
-import Accept from "@theme/ApiDemoPanel/Accept";
-import Authorization from "@theme/ApiDemoPanel/Authorization";
-import Body from "@theme/ApiDemoPanel/Body";
-import buildPostmanRequest from "@theme/ApiDemoPanel/buildPostmanRequest";
-import ContentType from "@theme/ApiDemoPanel/ContentType";
-import ParamOptions from "@theme/ApiDemoPanel/ParamOptions";
+import Accept from "@theme/ApiExplorer/Accept";
+import Authorization from "@theme/ApiExplorer/Authorization";
+import Body from "@theme/ApiExplorer/Body";
+import buildPostmanRequest from "@theme/ApiExplorer/buildPostmanRequest";
+import ContentType from "@theme/ApiExplorer/ContentType";
+import ParamOptions from "@theme/ApiExplorer/ParamOptions";
 import {
   setResponse,
   setCode,
   clearCode,
   setHeaders,
   clearHeaders,
-} from "@theme/ApiDemoPanel/Response/slice";
-import Server from "@theme/ApiDemoPanel/Server";
+} from "@theme/ApiExplorer/Response/slice";
+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";
@@ -151,35 +151,35 @@ function Request({ item }: { item: NonNullable<ApiItem> }) {
   return (
     <FormProvider {...methods}>
       <form
-        className="openapi-demo__request-form"
+        className="openapi-explorer__request-form"
         onSubmit={methods.handleSubmit(onSubmit)}
       >
-        <div className="openapi-demo__request-header-container">
-          <span className="openapi-demo__request-title">Request </span>
+        <div className="openapi-explorer__request-header-container">
+          <span className="openapi-explorer__request-title">Request </span>
           {allDetailsExpanded ? (
             <span
-              className="openapi-demo__expand-details-btn"
+              className="openapi-explorer__expand-details-btn"
               onClick={collapseAllDetails}
             >
               Collapse all
             </span>
           ) : (
             <span
-              className="openapi-demo__expand-details-btn"
+              className="openapi-explorer__expand-details-btn"
               onClick={expandAllDetails}
             >
               Expand all
             </span>
           )}
         </div>
-        <div className="openapi-demo__details-outer-container">
-          {showServerOptions && (
+        <div className="openapi-explorer__details-outer-container">
+          {showServerOptions && item.method !== "event" && (
             <details
               open={expandServer}
-              className="openapi-demo__details-container"
+              className="openapi-explorer__details-container"
             >
               <summary
-                className="openapi-demo__details-summary"
+                className="openapi-explorer__details-summary"
                 onClick={(e) => {
                   e.preventDefault();
                   setExpandServer(!expandServer);
@@ -193,10 +193,10 @@ function Request({ item }: { item: NonNullable<ApiItem> }) {
           {showAuth && (
             <details
               open={expandAuth}
-              className="openapi-demo__details-container"
+              className="openapi-explorer__details-container"
             >
               <summary
-                className="openapi-demo__details-summary"
+                className="openapi-explorer__details-summary"
                 onClick={(e) => {
                   e.preventDefault();
                   setExpandAuth(!expandAuth);
@@ -212,10 +212,10 @@ function Request({ item }: { item: NonNullable<ApiItem> }) {
               open={
                 expandParams || Object.keys(methods.formState.errors).length
               }
-              className="openapi-demo__details-container"
+              className="openapi-explorer__details-container"
             >
               <summary
-                className="openapi-demo__details-summary"
+                className="openapi-explorer__details-summary"
                 onClick={(e) => {
                   e.preventDefault();
                   setExpandParams(!expandParams);
@@ -229,10 +229,10 @@ function Request({ item }: { item: NonNullable<ApiItem> }) {
           {showRequestBody && (
             <details
               open={expandBody}
-              className="openapi-demo__details-container"
+              className="openapi-explorer__details-container"
             >
               <summary
-                className="openapi-demo__details-summary"
+                className="openapi-explorer__details-summary"
                 onClick={(e) => {
                   e.preventDefault();
                   setExpandBody(!expandBody);
@@ -258,10 +258,10 @@ function Request({ item }: { item: NonNullable<ApiItem> }) {
           {showAcceptOptions && (
             <details
               open={expandAccept}
-              className="openapi-demo__details-container"
+              className="openapi-explorer__details-container"
             >
               <summary
-                className="openapi-demo__details-summary"
+                className="openapi-explorer__details-summary"
                 onClick={(e) => {
                   e.preventDefault();
                   setExpandAccept(!expandAccept);
@@ -272,8 +272,8 @@ function Request({ item }: { item: NonNullable<ApiItem> }) {
               <Accept />
             </details>
           )}
-          {showRequestButton && (
-            <button className="openapi-demo__request-btn" type="submit">
+          {showRequestButton && item.method !== "event" && (
+            <button className="openapi-explorer__request-btn" type="submit">
               Send API Request
             </button>
           )}

package/src/theme/{ApiDemoPanel → ApiExplorer}/Request/makeRequest.ts

@@ -6,7 +6,7 @@
  * ========================================================================== */
 
 import sdk from "@paloaltonetworks/postman-collection";
-import { Body } from "@theme/ApiDemoPanel/Body/slice";
+import { Body } from "@theme/ApiExplorer/Body/slice";
 
 function fetchWithtimeout(
   url: string,
@@ -152,11 +152,14 @@ async function makeRequest(
         break;
       }
       case "formdata": {
+        // The Content-Type header will be set automatically based on the type of body.
+        myHeaders.delete("Content-Type");
+
         myBody = new FormData();
-        if (Array.isArray(body.formdata)) {
-          for (const data of body.formdata) {
-            if (data.key && data.value) {
-              myBody.append(data.key, data.value);
+        if (Array.isArray(request.body.formdata.members)) {
+          for (const data of request.body.formdata.members) {
+            if (data.key && data.value.content) {
+              myBody.append(data.key, data.value.content);
             }
           }
         }