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

package/lib/theme/ApiExplorer/ParamOptions/ParamFormItems/ParamMultiSelectFormItem.js

@@ -23,7 +23,7 @@ const slice_1 = require("@theme/ApiExplorer/ParamOptions/slice");
 const hooks_1 = require("@theme/ApiItem/hooks");
 const translationIds_1 = require("@theme/translationIds");
 const react_hook_form_1 = require("react-hook-form");
-function ParamMultiSelectFormItem({ param }) {
+function ParamMultiSelectFormItem({ param, label, type, required }) {
   const {
     control,
     formState: { errors },
@@ -78,6 +78,9 @@ function ParamMultiSelectFormItem({ param }) {
       name: "paramMultiSelect",
       render: ({ field: { onChange } }) =>
         react_1.default.createElement(FormMultiSelect_1.default, {
+          label: label,
+          type: type,
+          required: required,
           options: options,
           onChange: (e) => handleChange(e, onChange),
           showErrors: !!showErrorMessage,

package/lib/theme/ApiExplorer/ParamOptions/ParamFormItems/ParamSelectFormItem.d.ts

@@ -2,5 +2,8 @@ import React from "react";
 import { Param } from "@theme/ApiExplorer/ParamOptions/slice";
 export interface ParamProps {
     param: Param;
+    label?: string;
+    type?: string;
+    required?: boolean;
 }
-export default function ParamSelectFormItem({ param }: ParamProps): React.JSX.Element;
+export default function ParamSelectFormItem({ param, label, type, required, }: ParamProps): React.JSX.Element;

package/lib/theme/ApiExplorer/ParamOptions/ParamFormItems/ParamSelectFormItem.js

@@ -21,7 +21,7 @@ const slice_1 = require("@theme/ApiExplorer/ParamOptions/slice");
 const hooks_1 = require("@theme/ApiItem/hooks");
 const translationIds_1 = require("@theme/translationIds");
 const react_hook_form_1 = require("react-hook-form");
-function ParamSelectFormItem({ param }) {
+function ParamSelectFormItem({ param, label, type, required }) {
   const {
     control,
     formState: { errors },
@@ -45,6 +45,9 @@ function ParamSelectFormItem({ param }) {
       name: "paramSelect",
       render: ({ field: { onChange } }) =>
         react_1.default.createElement(FormSelect_1.default, {
+          label: label,
+          type: type,
+          required: required,
           options: ["---", ...options],
           onChange: (e) => {
             const val = e.target.value;

package/lib/theme/ApiExplorer/ParamOptions/ParamFormItems/ParamTextFormItem.d.ts

@@ -2,5 +2,8 @@ import React from "react";
 import { Param } from "@theme/ApiExplorer/ParamOptions/slice";
 export interface ParamProps {
     param: Param;
+    label?: string;
+    type?: string;
+    required?: boolean;
 }
-export default function ParamTextFormItem({ param }: ParamProps): React.JSX.Element;
+export default function ParamTextFormItem({ param, label, type, required, }: ParamProps): React.JSX.Element;

package/lib/theme/ApiExplorer/ParamOptions/ParamFormItems/ParamTextFormItem.js

@@ -18,9 +18,12 @@ const FormTextInput_1 = __importDefault(
 );
 const slice_1 = require("@theme/ApiExplorer/ParamOptions/slice");
 const hooks_1 = require("@theme/ApiItem/hooks");
-function ParamTextFormItem({ param }) {
+function ParamTextFormItem({ param, label, type, required }) {
   const dispatch = (0, hooks_1.useTypedDispatch)();
   return react_1.default.createElement(FormTextInput_1.default, {
+    label: label,
+    type: type,
+    required: required,
     isRequired: param.required,
     paramName: param.name,
     placeholder: param.description || param.name,

package/lib/theme/ApiExplorer/ParamOptions/_ParamOptions.scss

@@ -63,15 +63,10 @@
   margin-top: calc(var(--ifm-pre-padding) / 2);
   background-color: var(--openapi-input-background);
   border: none;
-  outline: none;
   color: var(--ifm-pre-color);
   border-radius: 4px;
   margin-left: 4px;
 
-  &:focus {
-    outline: 0;
-  }
-
   &:active {
     box-shadow: inset 0px 0px 0px 2px var(--openapi-input-border);
   }
@@ -102,10 +97,6 @@
     background-color: var(--openapi-input-border);
   }
 
-  &:focus {
-    outline: 0;
-  }
-
   &:active {
     box-shadow:
       inset 0 0 0 1px var(--openapi-input-border),

package/lib/theme/ApiExplorer/ParamOptions/index.d.ts

@@ -1,5 +1,10 @@
 import React from "react";
 import { Param } from "./slice";
+export interface LabelProps {
+    label?: string;
+    type?: string;
+    required?: boolean;
+}
 export interface ParamProps {
     param: Param;
 }

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

@@ -107,44 +107,65 @@ function getSchemaEnum(schema) {
   }
   return undefined;
 }
-function ParamOption({ param }) {
+function ParamOption({ param, label, type, required }) {
   const schemaEnum = getSchemaEnum(param.schema);
   const itemsEnum = getSchemaEnum(param.schema?.items);
   if (param.schema?.type === "array" && itemsEnum) {
     return react_1.default.createElement(ParamMultiSelectFormItem_1.default, {
       param: param,
+      label: label,
+      type: type,
+      required: required,
     });
   }
   if (param.schema?.type === "array") {
     return react_1.default.createElement(ParamArrayFormItem_1.default, {
       param: param,
+      label: label,
+      type: type,
+      required: required,
     });
   }
   if (schemaEnum) {
     return react_1.default.createElement(ParamSelectFormItem_1.default, {
       param: param,
+      label: label,
+      type: type,
+      required: required,
     });
   }
   if (param.schema?.type === "boolean") {
     return react_1.default.createElement(ParamBooleanFormItem_1.default, {
       param: param,
+      label: label,
+      type: type,
+      required: required,
     });
   }
   // integer, number, string, int32, int64, float, double, object, byte, binary,
   // date-time, date, password
   return react_1.default.createElement(ParamTextFormItem_1.default, {
     param: param,
+    label: label,
+    type: type,
+    required: required,
   });
 }
 function ParamOptionWrapper({ param }) {
   return react_1.default.createElement(
     FormItem_1.default,
-    { label: param.name, type: param.in, required: param.required },
-    react_1.default.createElement(ParamOption, { param: param })
+    null,
+    react_1.default.createElement(ParamOption, {
+      param: param,
+      label: param.name,
+      type: param.in,
+      required: param.required,
+    })
   );
 }
 function ParamOptions() {
   const [showOptional, setShowOptional] = (0, react_1.useState)(false);
+  const optionalId = (0, react_1.useId)();
   const pathParams = (0, hooks_1.useTypedSelector)(
     (state) => state.params.path
   );
@@ -183,6 +204,8 @@ function ParamOptions() {
           {
             type: "button",
             className: "openapi-explorer__show-more-btn",
+            "aria-expanded": showOptional,
+            "aria-controls": optionalId,
             onClick: () => setShowOptional((prev) => !prev),
           },
           react_1.default.createElement(
@@ -241,6 +264,7 @@ function ParamOptions() {
             className: showOptional
               ? "openapi-explorer__show-options"
               : "openapi-explorer__hide-options",
+            id: optionalId,
           },
           optionalParams.map((param) =>
             react_1.default.createElement(ParamOptionWrapper, {

package/lib/theme/ApiExplorer/Request/_Request.scss

@@ -48,6 +48,17 @@
 }
 
 .openapi-explorer__expand-details-btn {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  padding: 0;
+  cursor: pointer;
+  border: 0px solid transparent;
+  background-color: transparent;
+  text-transform: inherit;
+  font-weight: inherit;
+  font-size: inherit;
+
   &:hover {
     cursor: pointer;
   }

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

@@ -140,6 +140,7 @@ function Request({ item }) {
   const [expandBody, setExpandBody] = (0, react_1.useState)(true);
   const [expandParams, setExpandParams] = (0, react_1.useState)(true);
   const [expandServer, setExpandServer] = (0, react_1.useState)(true);
+  const serverLabelId = (0, react_1.useId)();
   const allParams = [
     ...pathParams,
     ...queryParams,
@@ -167,7 +168,7 @@ function Request({ item }) {
   item.parameters?.forEach((param) => {
     const paramType = param.in;
     const paramsArray = paramsObject[paramType];
-    paramsArray.push(param);
+    paramsArray?.push(param);
   });
   const methods = (0, react_hook_form_1.useForm)({ shouldFocusError: false });
   const handleEventStream = async (res) => {
@@ -313,8 +314,9 @@ function Request({ item }) {
         ),
         allDetailsExpanded
           ? react_1.default.createElement(
-              "span",
+              "button",
               {
+                type: "button",
                 className: "openapi-explorer__expand-details-btn",
                 onClick: collapseAllDetails,
               },
@@ -324,8 +326,9 @@ function Request({ item }) {
               })
             )
           : react_1.default.createElement(
-              "span",
+              "button",
               {
+                type: "button",
                 className: "openapi-explorer__expand-details-btn",
                 onClick: expandAllDetails,
               },
@@ -349,6 +352,7 @@ function Request({ item }) {
             react_1.default.createElement(
               "summary",
               {
+                id: serverLabelId,
                 className: "openapi-explorer__details-summary",
                 onClick: (e) => {
                   e.preventDefault();
@@ -360,7 +364,9 @@ function Request({ item }) {
                 message: "Base URL",
               })
             ),
-            react_1.default.createElement(Server_1.default, null)
+            react_1.default.createElement(Server_1.default, {
+              labelId: serverLabelId,
+            })
           ),
         showAuth &&
           react_1.default.createElement(

package/lib/theme/ApiExplorer/Response/_Response.scss

@@ -43,6 +43,17 @@
 }
 
 .openapi-explorer__response-clear-btn {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  padding: 0;
+  cursor: pointer;
+  border: 0px solid transparent;
+  background-color: transparent;
+  text-transform: inherit;
+  font-weight: inherit;
+  font-size: inherit;
+
   &:hover {
     cursor: pointer;
   }

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

@@ -152,8 +152,9 @@ function Response({ item }) {
         })
       ),
       react_1.default.createElement(
-        "span",
+        "button",
         {
+          type: "button",
           className: "openapi-explorer__response-clear-btn",
           onClick: () => {
             dispatch((0, slice_1.clearResponse)());

package/lib/theme/ApiExplorer/Server/index.d.ts

@@ -1,3 +1,6 @@
 import React from "react";
-declare function Server(): React.JSX.Element | null;
+interface ServerProps {
+    labelId?: string;
+}
+declare function Server({ labelId }: ServerProps): React.JSX.Element | null;
 export default Server;

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/ApiItem/index.js

@@ -100,7 +100,7 @@ function ApiItem(props) {
     api?.parameters?.forEach((param) => {
       const paramType = param.in;
       const paramsArray = params[paramType];
-      paramsArray.push(param);
+      paramsArray?.push(param);
     });
     const auth = (0, slice_1.createAuth)({
       security: api?.security,

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-1151",
   "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-1151",
     "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": "ce9f21391974edb2ad7a1a7c2e39700a27bc5123"
 }

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)