docusaurus-theme-openapi-docs 0.0.0-1110 → 0.0.0-1130

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

@@ -80,7 +80,7 @@ const FormTextInput_1 = __importDefault(
 const hooks_1 = require("@theme/ApiItem/hooks");
 const translationIds_1 = require("@theme/translationIds");
 const slice_1 = require("./slice");
-function Server() {
+function Server({ labelId }) {
   const [isEditing, setIsEditing] = (0, react_1.useState)(false);
   const value = (0, hooks_1.useTypedSelector)((state) => state.server.value);
   const options = (0, hooks_1.useTypedSelector)(
@@ -154,6 +154,7 @@ function Server() {
         FormItem_1.default,
         null,
         react_1.default.createElement(FormSelect_1.default, {
+          ariaLabelledBy: labelId,
           options: options.map((s) => s.url),
           onChange: (e) => {
             dispatch(
@@ -177,8 +178,9 @@ function Server() {
           if (value.variables?.[key].enum !== undefined) {
             return react_1.default.createElement(
               FormItem_1.default,
-              { label: key },
+              null,
               react_1.default.createElement(FormSelect_1.default, {
+                label: key,
                 options: value.variables[key].enum,
                 onChange: (e) => {
                   dispatch(
@@ -193,8 +195,9 @@ function Server() {
           }
           return react_1.default.createElement(
             FormItem_1.default,
-            { label: key },
+            null,
             react_1.default.createElement(FormTextInput_1.default, {
+              label: key,
               placeholder: value.variables?.[key].default,
               onChange: (e) => {
                 dispatch(

package/lib/theme/styles.scss

@@ -9,6 +9,7 @@
 @use "./ApiExplorer/FloatingButton/FloatingButton";
 @use "./ApiExplorer/FormFileUpload/FormFileUpload";
 @use "./ApiExplorer/FormItem/FormItem";
+@use "./ApiExplorer/FormLabel/FormLabel";
 @use "./ApiExplorer/FormMultiSelect/FormMultiSelect";
 @use "./ApiExplorer/FormSelect/FormSelect";
 @use "./ApiExplorer/FormTextInput/FormTextInput";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "docusaurus-theme-openapi-docs",
   "description": "OpenAPI theme for Docusaurus.",
-  "version": "0.0.0-1110",
+  "version": "0.0.0-1130",
   "license": "MIT",
   "keywords": [
     "openapi",
@@ -38,7 +38,7 @@
     "@types/postman-collection": "^3.5.11",
     "@types/react-modal": "^3.16.3",
     "concurrently": "^9.2.0",
-    "docusaurus-plugin-openapi-docs": "0.0.0-1110",
+    "docusaurus-plugin-openapi-docs": "0.0.0-1130",
     "docusaurus-plugin-sass": "^0.2.6",
     "eslint-plugin-prettier": "^5.5.1"
   },
@@ -53,6 +53,7 @@
     "file-saver": "^2.0.5",
     "lodash": "^4.17.21",
     "pako": "^2.1.0",
+    "path-browserify": "^1.0.1",
     "postman-code-generators": "^2.0.0",
     "postman-collection": "^5.0.2",
     "prism-react-renderer": "^2.4.1",
@@ -81,5 +82,5 @@
   "engines": {
     "node": ">=14"
   },
-  "gitHead": "e4a99880178b660e4ba688b2d13aef1280752322"
+  "gitHead": "5e9591e0e848677c7589a091580feffcc0a86b41"
 }

package/src/index.ts

@@ -42,6 +42,7 @@ export default function docusaurusThemeOpenAPI(): Plugin<void> {
           resolve: {
             fallback: {
               buffer: require.resolve("buffer/"),
+              path: require.resolve("path-browserify"),
             },
           },
           plugins: [
@@ -71,6 +72,7 @@ export default function docusaurusThemeOpenAPI(): Plugin<void> {
         resolve: {
           fallback: {
             buffer: require.resolve("buffer/"),
+            path: require.resolve("path-browserify"),
           },
         },
         plugins: [

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

@@ -23,8 +23,9 @@ function Accept() {
   }
 
   return (
-    <FormItem label="Accept">
+    <FormItem>
       <FormSelect
+        label="Accept"
         value={value}
         options={options}
         onChange={(e: any) => dispatch(setAccept(e.target.value))}

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

@@ -34,13 +34,12 @@ function Authorization() {
   return (
     <div>
       {optionKeys.length > 1 && (
-        <FormItem
-          label={translate({
-            id: OPENAPI_AUTH.SECURITY_SCHEME,
-            message: "Security Scheme",
-          })}
-        >
+        <FormItem>
           <FormSelect
+            label={translate({
+              id: OPENAPI_AUTH.SECURITY_SCHEME,
+              message: "Security Scheme",
+            })}
             options={optionKeys}
             value={selected}
             onChange={(e: React.ChangeEvent<HTMLSelectElement>) => {
@@ -52,14 +51,12 @@ function Authorization() {
       {selectedAuth.map((a: any) => {
         if (a.type === "http" && a.scheme === "bearer") {
           return (
-            <FormItem
-              label={translate({
-                id: OPENAPI_AUTH.BEARER_TOKEN,
-                message: "Bearer Token",
-              })}
-              key={a.key + "-bearer"}
-            >
+            <FormItem key={a.key + "-bearer"}>
               <FormTextInput
+                label={translate({
+                  id: OPENAPI_AUTH.BEARER_TOKEN,
+                  message: "Bearer Token",
+                })}
                 placeholder={translate({
                   id: OPENAPI_AUTH.BEARER_TOKEN,
                   message: "Bearer Token",
@@ -83,14 +80,12 @@ function Authorization() {
 
         if (a.type === "oauth2") {
           return (
-            <FormItem
-              label={translate({
-                id: OPENAPI_AUTH.BEARER_TOKEN,
-                message: "Bearer Token",
-              })}
-              key={a.key + "-oauth2"}
-            >
+            <FormItem key={a.key + "-oauth2"}>
               <FormTextInput
+                label={translate({
+                  id: OPENAPI_AUTH.BEARER_TOKEN,
+                  message: "Bearer Token",
+                })}
                 placeholder={translate({
                   id: OPENAPI_AUTH.BEARER_TOKEN,
                   message: "Bearer Token",
@@ -115,13 +110,12 @@ function Authorization() {
         if (a.type === "http" && a.scheme === "basic") {
           return (
             <React.Fragment key={a.key + "-basic"}>
-              <FormItem
-                label={translate({
-                  id: OPENAPI_AUTH.USERNAME,
-                  message: "Username",
-                })}
-              >
+              <FormItem>
                 <FormTextInput
+                  label={translate({
+                    id: OPENAPI_AUTH.USERNAME,
+                    message: "Username",
+                  })}
                   placeholder={translate({
                     id: OPENAPI_AUTH.USERNAME,
                     message: "Username",
@@ -139,13 +133,12 @@ function Authorization() {
                   }}
                 />
               </FormItem>
-              <FormItem
-                label={translate({
-                  id: OPENAPI_AUTH.PASSWORD,
-                  message: "Password",
-                })}
-              >
+              <FormItem>
                 <FormTextInput
+                  label={translate({
+                    id: OPENAPI_AUTH.PASSWORD,
+                    message: "Password",
+                  })}
                   placeholder={translate({
                     id: OPENAPI_AUTH.PASSWORD,
                     message: "Password",
@@ -170,8 +163,9 @@ function Authorization() {
 
         if (a.type === "apiKey") {
           return (
-            <FormItem label={`${a.key}`} key={a.key + "-apikey"}>
+            <FormItem key={a.key + "-apikey"}>
               <FormTextInput
+                label={`${a.key}`}
                 placeholder={`${a.key}`}
                 password
                 value={data[a.key].apiKey ?? ""}

package/src/theme/ApiExplorer/Body/FormBodyItem/index.tsx

@@ -8,6 +8,7 @@
 import React from "react";
 
 import FormFileUpload from "@theme/ApiExplorer/FormFileUpload";
+import FormLabel from "@theme/ApiExplorer/FormLabel";
 import FormSelect from "@theme/ApiExplorer/FormSelect";
 import FormTextInput from "@theme/ApiExplorer/FormTextInput";
 import LiveApp from "@theme/ApiExplorer/LiveEditor";
@@ -21,12 +22,16 @@ interface FormBodyItemProps {
   schemaObject: SchemaObject;
   id: string;
   schema: SchemaObject;
+  label?: string;
+  required?: boolean;
 }
 
 export default function FormBodyItem({
   schemaObject,
   id,
   schema,
+  label,
+  required,
 }: FormBodyItemProps): React.JSX.Element {
   const dispatch = useTypedDispatch();
 
@@ -35,30 +40,36 @@ export default function FormBodyItem({
     schemaObject.items?.format === "binary"
   ) {
     return (
-      <FileArrayFormBodyItem id={id} description={schemaObject.description} />
+      <>
+        {label && <FormLabel label={label} required={required} />}
+        <FileArrayFormBodyItem id={id} description={schemaObject.description} />
+      </>
     );
   }
 
   if (schemaObject.format === "binary") {
     return (
-      <FormFileUpload
-        placeholder={schemaObject.description || id}
-        onChange={(file: any) => {
-          if (file === undefined) {
-            dispatch(clearFormBodyKey(id));
-            return;
-          }
-          dispatch(
-            setFileFormBody({
-              key: id,
-              value: {
-                src: `/path/to/${file.name}`,
-                content: file,
-              },
-            })
-          );
-        }}
-      />
+      <>
+        {label && <FormLabel label={label} required={required} />}
+        <FormFileUpload
+          placeholder={schemaObject.description || id}
+          onChange={(file: any) => {
+            if (file === undefined) {
+              dispatch(clearFormBodyKey(id));
+              return;
+            }
+            dispatch(
+              setFileFormBody({
+                key: id,
+                value: {
+                  src: `/path/to/${file.name}`,
+                  content: file,
+                },
+              })
+            );
+          }}
+        />
+      </>
     );
   }
 
@@ -73,13 +84,16 @@ export default function FormBodyItem({
     );
 
     return (
-      <LiveApp
-        action={(code: string) =>
-          dispatch(setStringFormBody({ key: id, value: code }))
-        }
-      >
-        {objectExample}
-      </LiveApp>
+      <>
+        {label && <FormLabel label={label} required={required} />}
+        <LiveApp
+          action={(code: string) =>
+            dispatch(setStringFormBody({ key: id, value: code }))
+          }
+        >
+          {objectExample}
+        </LiveApp>
+      </>
     );
   }
 
@@ -89,6 +103,8 @@ export default function FormBodyItem({
   ) {
     return (
       <FormSelect
+        label={label}
+        required={required}
         options={["---", ...schemaObject.enum]}
         onChange={(e: React.ChangeEvent<HTMLSelectElement>) => {
           const val = e.target.value;
@@ -109,6 +125,8 @@ export default function FormBodyItem({
   // TODO: support all the other types.
   return (
     <FormTextInput
+      label={label}
+      required={required}
       paramName={id}
       isRequired={
         Array.isArray(schema.required) && schema.required.includes(id)

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

@@ -318,18 +318,17 @@ function Body({
       <FormItem className="openapi-explorer__form-item-body-container">
         {Object.entries(schema.properties ?? {}).map(([key, val]: any) => {
           return (
-            <FormItem
-              key={key}
-              label={key}
-              required={
-                Array.isArray(schema.required) && schema.required.includes(key)
-              }
-            >
+            <FormItem key={key}>
               <FormBodyItem
                 schemaObject={val}
                 id={key}
                 schema={schema}
-              ></FormBodyItem>
+                label={key}
+                required={
+                  Array.isArray(schema.required) &&
+                  schema.required.includes(key)
+                }
+              />
             </FormItem>
           );
         })}

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

@@ -23,8 +23,9 @@ function ContentType() {
   }
 
   return (
-    <FormItem label="Content-Type">
+    <FormItem>
       <FormSelect
+        label="Content-Type"
         value={value}
         options={options}
         onChange={(e: React.ChangeEvent<HTMLSelectElement>) =>

package/src/theme/ApiExplorer/FormItem/_FormItem.scss

@@ -14,8 +14,3 @@
 .openapi-explorer__form-item-body-container {
   padding: 0;
 }
-
-.openapi-explorer__form-item-label {
-  font-family: var(--ifm-font-family-monospace);
-  font-weight: bold;
-}

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

@@ -7,31 +7,17 @@
 
 import React from "react";
 
-import { translate } from "@docusaurus/Translate";
-import { OPENAPI_SCHEMA_ITEM } from "@theme/translationIds";
 import clsx from "clsx";
 
 export interface Props {
-  label?: string;
-  type?: string;
-  required?: boolean | undefined;
   children?: React.ReactNode;
   className?: string;
 }
 
-function FormItem({ label, type, required, children, className }: Props) {
+function FormItem({ children, className }: Props) {
   return (
     <div className={clsx("openapi-explorer__form-item", className)}>
-      {label && (
-        <label className="openapi-explorer__form-item-label">{label}</label>
-      )}
-      {type && <span style={{ opacity: 0.6 }}> — {type}</span>}
-      {required && (
-        <span className="openapi-schema__required">
-          {translate({ id: OPENAPI_SCHEMA_ITEM.REQUIRED, message: "required" })}
-        </span>
-      )}
-      <div>{children}</div>
+      {children}
     </div>
   );
 }

package/src/theme/ApiExplorer/FormLabel/_FormLabel.scss

@@ -0,0 +1,4 @@
+.openapi-explorer__form-item-label {
+  font-family: var(--ifm-font-family-monospace);
+  font-weight: bold;
+}

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

@@ -0,0 +1,43 @@
+/* ============================================================================
+ * 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 from "react";
+
+import { translate } from "@docusaurus/Translate";
+import { OPENAPI_SCHEMA_ITEM } from "@theme/translationIds";
+
+export interface Props {
+  htmlFor?: string;
+  label: string;
+  type?: string;
+  required?: boolean;
+}
+
+function FormLabel({ htmlFor, label, type, required }: Props) {
+  return (
+    <>
+      {htmlFor ? (
+        <label className="openapi-explorer__form-item-label" htmlFor={htmlFor}>
+          {label}
+        </label>
+      ) : (
+        <span className="openapi-explorer__form-item-label">{label}</span>
+      )}
+      {type && <span style={{ opacity: 0.6 }}> — {type}</span>}
+      {required && (
+        <span className="openapi-schema__required">
+          {translate({
+            id: OPENAPI_SCHEMA_ITEM.REQUIRED,
+            message: "required",
+          })}
+        </span>
+      )}
+    </>
+  );
+}
+
+export default FormLabel;

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

@@ -5,8 +5,9 @@
  * LICENSE file in the root directory of this source tree.
  * ========================================================================== */
 
-import React from "react";
+import React, { useId } from "react";
 
+import FormLabel from "@theme/ApiExplorer/FormLabel";
 import clsx from "clsx";
 
 export interface Props {
@@ -14,9 +15,22 @@ export interface Props {
   options: string[];
   onChange?: React.ChangeEventHandler<HTMLSelectElement>;
   showErrors?: boolean;
+  label?: string;
+  type?: string;
+  required?: boolean;
 }
 
-function FormMultiSelect({ value, options, onChange, showErrors }: Props) {
+function FormMultiSelect({
+  value,
+  options,
+  onChange,
+  showErrors,
+  label,
+  type,
+  required,
+}: Props) {
+  const id = useId();
+
   if (options.length === 0) {
     return null;
   }
@@ -33,24 +47,30 @@ function FormMultiSelect({ value, options, onChange, showErrors }: Props) {
   }
 
   return (
-    <select
-      style={{ height: height }}
-      className={clsx("openapi-explorer__multi-select-input", {
-        error: showErrors,
-      })}
-      value={value}
-      onChange={onChange}
-      size={Math.min(6, options.length + 1)}
-      multiple
-    >
-      {options.map((option) => {
-        return (
-          <option key={option} value={option}>
-            {option}
-          </option>
-        );
-      })}
-    </select>
+    <>
+      {label && (
+        <FormLabel htmlFor={id} label={label} type={type} required={required} />
+      )}
+      <select
+        id={label ? id : undefined}
+        style={{ height: height }}
+        className={clsx("openapi-explorer__multi-select-input", {
+          error: showErrors,
+        })}
+        value={value}
+        onChange={onChange}
+        size={Math.min(6, options.length + 1)}
+        multiple
+      >
+        {options.map((option) => {
+          return (
+            <option key={option} value={option}>
+              {option}
+            </option>
+          );
+        })}
+      </select>
+    </>
   );
 }
 

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

@@ -5,33 +5,59 @@
  * LICENSE file in the root directory of this source tree.
  * ========================================================================== */
 
-import React from "react";
+import React, { useId } from "react";
+
+import FormLabel from "@theme/ApiExplorer/FormLabel";
 
 export interface Props {
   value?: string;
   options?: string[];
   onChange?: React.ChangeEventHandler<HTMLSelectElement>;
+  label?: string;
+  type?: string;
+  required?: boolean;
+  ariaLabelledBy?: string;
+  ariaLabel?: string;
 }
 
-function FormSelect({ value, options, onChange }: Props) {
+function FormSelect({
+  value,
+  options,
+  onChange,
+  label,
+  type,
+  required,
+  ariaLabelledBy,
+  ariaLabel,
+}: Props) {
+  const id = useId();
+
   if (!Array.isArray(options) || options.length === 0) {
     return null;
   }
 
   return (
-    <select
-      className="openapi-explorer__select-input"
-      value={value}
-      onChange={onChange}
-    >
-      {options.map((option) => {
-        return (
-          <option key={option} value={option}>
-            {option}
-          </option>
-        );
-      })}
-    </select>
+    <>
+      {label && (
+        <FormLabel htmlFor={id} label={label} type={type} required={required} />
+      )}
+      <select
+        id={label ? id : undefined}
+        className="openapi-explorer__select-input"
+        value={value}
+        onChange={onChange}
+        aria-labelledby={!label ? ariaLabelledBy : undefined}
+        aria-label={!label && !ariaLabelledBy ? ariaLabel : undefined}
+      >
+        {options.map((option) => {
+          return (
+            <option key={option} value={option}>
+              {option}
+            </option>
+          );
+        })}
+      </select>
+    </>
   );
 }