docusaurus-theme-openapi-docs 1.4.4 → 1.4.6

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

@@ -9,7 +9,7 @@ import React from "react";
 
 import styles from "./styles.module.css";
 
-interface Props {
+export interface Props {
   value?: string;
   options?: string[];
   onChange?: React.ChangeEventHandler<HTMLSelectElement>;

package/src/theme/ApiDemoPanel/FormTextInput/index.tsx

@@ -9,7 +9,7 @@ import React from "react";
 
 import styles from "./styles.module.css";
 
-interface Props {
+export interface Props {
   value?: string;
   placeholder?: string;
   password?: boolean;

package/src/theme/ApiDemoPanel/LiveEditor/index.tsx

@@ -9,9 +9,9 @@ import React, { useEffect, useState } from "react";
 
 import { usePrismTheme } from "@docusaurus/theme-common";
 import useIsBrowser from "@docusaurus/useIsBrowser";
+import { setStringRawBody } from "@theme/ApiDemoPanel/Body/slice";
 import { LiveProvider, LiveEditor, withLive } from "react-live";
 
-import { setStringRawBody } from "../Body/slice";
 import styles from "./styles.module.css";
 
 function Live({ onEdit }: any) {

package/src/theme/ApiDemoPanel/MethodEndpoint/index.tsx

@@ -30,7 +30,7 @@ function colorForMethod(method: string) {
   }
 }
 
-interface Props {
+export interface Props {
   method: string;
   path: string;
 }

package/src/theme/ApiDemoPanel/ParamOptions/index.tsx

@@ -8,16 +8,16 @@
 import React, { useState, useEffect } from "react";
 
 import { nanoid } from "@reduxjs/toolkit";
+import FormItem from "@theme/ApiDemoPanel/FormItem";
+import FormMultiSelect from "@theme/ApiDemoPanel/FormMultiSelect";
+import FormSelect from "@theme/ApiDemoPanel/FormSelect";
+import FormTextInput from "@theme/ApiDemoPanel/FormTextInput";
+import { useTypedDispatch, useTypedSelector } from "@theme/ApiItem/hooks";
 
-import { useTypedDispatch, useTypedSelector } from "../../ApiItem/hooks";
-import FormItem from "./../FormItem";
-import FormMultiSelect from "./../FormMultiSelect";
-import FormSelect from "./../FormSelect";
-import FormTextInput from "./../FormTextInput";
 import { Param, setParam } from "./slice";
 import styles from "./styles.module.css";
 
-interface ParamProps {
+export interface ParamProps {
   param: Param;
 }
 
@@ -54,10 +54,10 @@ function ParamOptionWrapper({ param }: ParamProps) {
 function ParamOptions() {
   const [showOptional, setShowOptional] = useState(false);
 
-  const pathParams = useTypedSelector((state) => state.params.path);
-  const queryParams = useTypedSelector((state) => state.params.query);
-  const cookieParams = useTypedSelector((state) => state.params.cookie);
-  const headerParams = useTypedSelector((state) => state.params.header);
+  const pathParams = useTypedSelector((state: any) => state.params.path);
+  const queryParams = useTypedSelector((state: any) => state.params.query);
+  const cookieParams = useTypedSelector((state: any) => state.params.cookie);
+  const headerParams = useTypedSelector((state: any) => state.params.header);
 
   const allParams = [
     ...pathParams,
@@ -142,7 +142,7 @@ function ArrayItem({
     return (
       <FormSelect
         options={["---", "true", "false"]}
-        onChange={(e) => {
+        onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
           const val = e.target.value;
           onChange(val === "---" ? undefined : val);
         }}
@@ -153,7 +153,7 @@ function ArrayItem({
   return (
     <FormTextInput
       placeholder={param.description || param.name}
-      onChange={(e) => {
+      onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
         onChange(e.target.value);
       }}
     />
@@ -246,7 +246,7 @@ function ParamSelectFormItem({ param }: ParamProps) {
   return (
     <FormSelect
       options={["---", ...(options as string[])]}
-      onChange={(e) => {
+      onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
         const val = e.target.value;
         dispatch(
           setParam({
@@ -265,7 +265,7 @@ function ParamBooleanFormItem({ param }: ParamProps) {
   return (
     <FormSelect
       options={["---", "true", "false"]}
-      onChange={(e) => {
+      onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
         const val = e.target.value;
         dispatch(
           setParam({
@@ -286,7 +286,7 @@ function ParamMultiSelectFormItem({ param }: ParamProps) {
   return (
     <FormMultiSelect
       options={options as string[]}
-      onChange={(e) => {
+      onChange={(e: any) => {
         const values = Array.prototype.filter
           .call(e.target.options, (o) => o.selected)
           .map((o) => o.value);
@@ -308,7 +308,17 @@ function ParamTextFormItem({ param }: ParamProps) {
   return (
     <FormTextInput
       placeholder={param.description || param.name}
-      onChange={(e) => dispatch(setParam({ ...param, value: e.target.value }))}
+      onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+        dispatch(
+          setParam({
+            ...param,
+            value:
+              param.in === "path" || param.in === "query"
+                ? e.target.value.replace(/\s/g, "%20")
+                : e.target.value,
+          })
+        )
+      }
     />
   );
 }

package/src/theme/ApiDemoPanel/Request/index.tsx

@@ -7,26 +7,26 @@
 
 import React from "react";
 
+import { ThemeConfig } from "@docusaurus/types";
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 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 Execute from "@theme/ApiDemoPanel/Execute";
+import ParamOptions from "@theme/ApiDemoPanel/ParamOptions";
+import Server from "@theme/ApiDemoPanel/Server";
+import { useTypedSelector } from "@theme/ApiItem/hooks";
 import { ParameterObject } from "docusaurus-plugin-openapi-docs/src/openapi/types";
 import { ApiItem } from "docusaurus-plugin-openapi-docs/src/types";
 
-import { ThemeConfig } from "../../../types";
-import { useTypedSelector } from "../../ApiItem/hooks";
-import Accept from "../Accept";
-import Authorization from "../Authorization";
-import Body from "../Body";
-import Execute from "../Execute";
-import ParamOptions from "../ParamOptions";
-import Server from "../Server";
 import styles from "./styles.module.css";
 
 function Request({ item }: { item: NonNullable<ApiItem> }) {
-  const response = useTypedSelector((state) => state.response.value);
+  const response = useTypedSelector((state: any) => state.response.value);
   const { siteConfig } = useDocusaurusContext();
   const themeConfig = siteConfig.themeConfig as ThemeConfig;
-  const options = themeConfig.api;
+  const options = themeConfig.api as ApiItem;
   const postman = new sdk.Request(item.postman);
 
   const params = {

package/src/theme/ApiDemoPanel/Response/index.tsx

@@ -7,9 +7,9 @@
 
 import React from "react";
 
+import { useTypedDispatch, useTypedSelector } from "@theme/ApiItem/hooks";
 import CodeBlock from "@theme/CodeBlock";
 
-import { useTypedDispatch, useTypedSelector } from "../../ApiItem/hooks";
 import { clearResponse } from "./slice";
 
 // TODO: We probably shouldn't attempt to format XML...
@@ -33,7 +33,7 @@ function formatXml(xml: string) {
 }
 
 function Response() {
-  const response = useTypedSelector((state) => state.response.value);
+  const response = useTypedSelector((state: any) => state.response.value);
   const dispatch = useTypedDispatch();
 
   if (response === undefined) {

package/src/theme/ApiDemoPanel/SecuritySchemes/index.tsx

@@ -8,12 +8,11 @@
 import React from "react";
 
 import Link from "@docusaurus/Link";
-
-import { useTypedSelector } from "../../ApiItem/hooks";
+import { useTypedSelector } from "@theme/ApiItem/hooks";
 
 function SecuritySchemes(props: any) {
-  const options = useTypedSelector((state) => state.auth.options);
-  const selected = useTypedSelector((state) => state.auth.selected);
+  const options = useTypedSelector((state: any) => state.auth.options);
+  const selected = useTypedSelector((state: any) => state.auth.selected);
   const infoAuthPath = `/${props.infoPath}#authentication`;
 
   if (selected === undefined) return null;
@@ -24,7 +23,7 @@ function SecuritySchemes(props: any) {
       <summary className={`details__request-summary`}>
         <h4>Authorization</h4>
       </summary>
-      {selectedAuth.map((auth) => {
+      {selectedAuth.map((auth: any) => {
         const isApiKey = auth.type === "apiKey";
         const isBearer = auth.type === "http" && auth.key === "Bearer";
         const isOauth2 = auth.type === "oauth2";

package/src/theme/ApiDemoPanel/Server/index.tsx

@@ -7,18 +7,19 @@
 
 import React, { useState } from "react";
 
-import { useTypedDispatch, useTypedSelector } from "../../ApiItem/hooks";
-import FloatingButton from "../FloatingButton";
-import FormItem from "./../FormItem";
-import FormSelect from "./../FormSelect";
-import FormTextInput from "./../FormTextInput";
+import FloatingButton from "@theme/ApiDemoPanel/FloatingButton";
+import FormItem from "@theme/ApiDemoPanel/FormItem";
+import FormSelect from "@theme/ApiDemoPanel/FormSelect";
+import FormTextInput from "@theme/ApiDemoPanel/FormTextInput";
+import { useTypedDispatch, useTypedSelector } from "@theme/ApiItem/hooks";
+
 import { setServer, setServerVariable } from "./slice";
 import styles from "./styles.module.css";
 
 function Server() {
   const [isEditing, setIsEditing] = useState(false);
-  const value = useTypedSelector((state) => state.server.value);
-  const options = useTypedSelector((state) => state.server.options);
+  const value = useTypedSelector((state: any) => state.server.value);
+  const options = useTypedSelector((state: any) => state.server.options);
   const dispatch = useTypedDispatch();
 
   if (options.length <= 0) {
@@ -36,7 +37,7 @@ function Server() {
 
   // Default to first option when existing server state is mismatched
   if (value) {
-    const urlExists = options.find((s) => s.url === value.url);
+    const urlExists = options.find((s: any) => s.url === value.url);
     if (!urlExists) {
       const defaultOption = options[0];
       dispatch(setServer(JSON.stringify(defaultOption)));
@@ -76,12 +77,12 @@ function Server() {
       <FloatingButton onClick={() => setIsEditing(false)} label="Hide">
         <FormItem label="Base URL">
           <FormSelect
-            options={options.map((s) => s.url)}
-            onChange={(e) => {
+            options={options.map((s: any) => s.url)}
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
               dispatch(
                 setServer(
                   JSON.stringify(
-                    options.filter((s) => s.url === e.target.value)[0]
+                    options.filter((s: any) => s.url === e.target.value)[0]
                   )
                 )
               );
@@ -97,7 +98,7 @@ function Server() {
                 <FormItem label={key}>
                   <FormSelect
                     options={value.variables[key].enum}
-                    onChange={(e) => {
+                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                       dispatch(
                         setServerVariable(
                           JSON.stringify({ key, value: e.target.value })
@@ -113,7 +114,7 @@ function Server() {
               <FormItem label={key}>
                 <FormTextInput
                   placeholder={value.variables?.[key].default}
-                  onChange={(e) => {
+                  onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                     dispatch(
                       setServerVariable(
                         JSON.stringify({ key, value: e.target.value })

package/src/theme/ApiDemoPanel/buildPostmanRequest.ts

@@ -6,15 +6,14 @@
  * ========================================================================== */
 
 import sdk from "@paloaltonetworks/postman-collection";
+import { AuthState, Scheme } from "@theme/ApiDemoPanel/Authorization/slice";
+import { Body, Content } from "@theme/ApiDemoPanel/Body/slice";
 import {
   ParameterObject,
   ServerObject,
 } from "docusaurus-plugin-openapi-docs/src/openapi/types";
 import cloneDeep from "lodash/cloneDeep";
 
-import { AuthState, Scheme } from "./Authorization/slice";
-import { Body, Content } from "./Body/slice";
-
 type Param = {
   value?: string | string[];
 } & ParameterObject;

package/src/theme/ApiDemoPanel/index.tsx

@@ -8,14 +8,13 @@
 import React from "react";
 
 import sdk from "@paloaltonetworks/postman-collection";
+import Curl from "@theme/ApiDemoPanel/Curl";
+import MethodEndpoint from "@theme/ApiDemoPanel/MethodEndpoint";
+import Request from "@theme/ApiDemoPanel/Request";
+import Response from "@theme/ApiDemoPanel/Response";
+import SecuritySchemes from "@theme/ApiDemoPanel/SecuritySchemes";
 import { ApiItem } from "docusaurus-plugin-openapi-docs/src/types";
 
-import Curl from "./Curl";
-import MethodEndpoint from "./MethodEndpoint";
-import Request from "./Request";
-import Response from "./Response";
-import SecuritySchemes from "./SecuritySchemes";
-
 function ApiDemoPanel({
   item,
   infoPath,

package/src/theme/ApiDemoPanel/persistanceMiddleware.ts

@@ -6,10 +6,14 @@
  * ========================================================================== */
 
 import { Middleware } from "@reduxjs/toolkit";
+import {
+  setAuthData,
+  setSelectedAuth,
+} from "@theme/ApiDemoPanel/Authorization/slice";
+import { AppDispatch, RootState } from "@theme/ApiItem/store";
+/* eslint-disable import/no-extraneous-dependencies*/
+import { ThemeConfig } from "docusaurus-theme-openapi-docs/src/types";
 
-import { ThemeConfig } from "../../types";
-import { AppDispatch, RootState } from "../ApiItem/store";
-import { setAuthData, setSelectedAuth } from "./Authorization/slice";
 import { createStorage, hashArray } from "./storage-utils";
 
 export function createPersistanceMiddleware(options: ThemeConfig["api"]) {
@@ -23,7 +27,7 @@ export function createPersistanceMiddleware(options: ThemeConfig["api"]) {
 
       if (action.type === setAuthData.type) {
         for (const [key, value] of Object.entries(state.auth.data)) {
-          if (Object.values(value).filter(Boolean).length > 0) {
+          if (Object.values(value as any).filter(Boolean).length > 0) {
             storage.setItem(key, JSON.stringify(value));
           } else {
             storage.removeItem(key);

package/src/theme/ApiItem/index.tsx

@@ -12,19 +12,22 @@ import ExecutionEnvironment from "@docusaurus/ExecutionEnvironment";
 import { HtmlClassNameProvider } from "@docusaurus/theme-common";
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 import useIsBrowser from "@docusaurus/useIsBrowser";
+import { createAuth } from "@theme/ApiDemoPanel/Authorization/slice";
+import { createPersistanceMiddleware } from "@theme/ApiDemoPanel/persistanceMiddleware";
+import DocItemLayout from "@theme/ApiItem/Layout";
 import type { Props } from "@theme/DocItem";
 import DocItemMetadata from "@theme/DocItem/Metadata";
 import clsx from "clsx";
 import { ServerObject } from "docusaurus-plugin-openapi-docs/src/openapi/types";
 import { ParameterObject } from "docusaurus-plugin-openapi-docs/src/openapi/types";
 import type { ApiItem as ApiItemType } from "docusaurus-plugin-openapi-docs/src/types";
+/* eslint-disable import/no-extraneous-dependencies*/
+import type {
+  DocFrontMatter,
+  ThemeConfig,
+} from "docusaurus-theme-openapi-docs/src/types";
 import { Provider } from "react-redux";
 
-import { DocFrontMatter } from "../../types";
-import { ThemeConfig } from "../../types";
-import { createAuth } from "../ApiDemoPanel/Authorization/slice";
-import { createPersistanceMiddleware } from "../ApiDemoPanel/persistanceMiddleware";
-import DocItemLayout from "./Layout";
 import { createStoreWithoutState, createStoreWithState } from "./store";
 
 const { DocProvider } = require("@docusaurus/theme-common/internal");

package/src/theme/ApiItem/store.ts

@@ -6,14 +6,13 @@
  * ========================================================================== */
 
 import { configureStore, combineReducers } from "@reduxjs/toolkit";
-
-import accept from "../ApiDemoPanel/Accept/slice";
-import auth from "../ApiDemoPanel/Authorization/slice";
-import body from "../ApiDemoPanel/Body/slice";
-import contentType from "../ApiDemoPanel/ContentType/slice";
-import params from "../ApiDemoPanel/ParamOptions/slice";
-import response from "../ApiDemoPanel/Response/slice";
-import server from "../ApiDemoPanel/Server/slice";
+import accept from "@theme/ApiDemoPanel/Accept/slice";
+import auth from "@theme/ApiDemoPanel/Authorization/slice";
+import body from "@theme/ApiDemoPanel/Body/slice";
+import contentType from "@theme/ApiDemoPanel/ContentType/slice";
+import params from "@theme/ApiDemoPanel/ParamOptions/slice";
+import response from "@theme/ApiDemoPanel/Response/slice";
+import server from "@theme/ApiDemoPanel/Server/slice";
 
 const rootReducer = combineReducers({
   accept,

package/src/theme/DiscriminatorTabs/styles.module.css

@@ -12,14 +12,19 @@
   height: 1.8rem;
   margin-top: 0 !important;
   margin-right: 0.5rem;
-  border: 1px solid var(--openapi-code-dim-dark);
+  border: 1px solid var(--ifm-color-primary);
   border-radius: var(--ifm-global-radius);
-  color: var(--openapi-code-dim-dark);
+  color: var(--ifm-color-primary);
   font-size: 12px;
 }
 
+.tabItem:not(.discriminatorTabActive) {
+  opacity: 0.65;
+}
+
 .tabItem:hover {
-  color: var(--ifm-color-emphasis-500) !important;
+  opacity: 1;
+  background-color: var(--ifm-color-emphasis-100);
 }
 
 .tabItem:last-child {
@@ -59,8 +64,7 @@
 }
 
 .tabItem.discriminatorTabActive {
-  border: 1px solid var(--ifm-color-primary);
-  color: var(--ifm-color-primary);
+  background-color: var(--ifm-color-emphasis-100);
 }
 
 .discriminatorTabLabel {

package/src/theme/MimeTabs/index.js

@@ -16,20 +16,18 @@ import React, {
 
 import { duplicates } from "@docusaurus/theme-common";
 import useIsBrowser from "@docusaurus/useIsBrowser";
+import { setAccept } from "@theme/ApiDemoPanel/Accept/slice";
+import { setContentType } from "@theme/ApiDemoPanel/ContentType/slice";
+import { useTypedDispatch, useTypedSelector } from "@theme/ApiItem/hooks";
 import clsx from "clsx";
 
-import { setAccept } from "../ApiDemoPanel/Accept/slice";
-import { setContentType } from "../ApiDemoPanel/ContentType/slice";
-import { useTypedDispatch, useTypedSelector } from "../ApiItem/hooks";
-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");
 
-// allowing customization
-
 function isTabItem(comp) {
   return typeof comp.props.value !== "undefined";
 }

package/src/theme/ParamsItem/index.js

@@ -8,12 +8,18 @@
 import React from "react";
 
 import CodeBlock from "@theme/CodeBlock";
+/* eslint-disable import/no-extraneous-dependencies*/
+import { createDescription } from "docusaurus-theme-openapi-docs/src/markdown/createDescription";
+/* eslint-disable import/no-extraneous-dependencies*/
+import {
+  getQualifierMessage,
+  getSchemaName,
+} from "docusaurus-theme-openapi-docs/src/markdown/schema";
+/* eslint-disable import/no-extraneous-dependencies*/
+import { guard } from "docusaurus-theme-openapi-docs/src/markdown/utils";
 import ReactMarkdown from "react-markdown";
 import rehypeRaw from "rehype-raw";
 
-import { createDescription } from "../../markdown/createDescription";
-import { getQualifierMessage, getSchemaName } from "../../markdown/schema";
-import { guard } from "../../markdown/utils";
 import styles from "./styles.module.css";
 
 function ParamsItem({

package/src/theme/SchemaItem/index.js

@@ -8,11 +8,13 @@
 import React from "react";
 
 import CodeBlock from "@theme/CodeBlock";
+/* eslint-disable import/no-extraneous-dependencies*/
+import { createDescription } from "docusaurus-theme-openapi-docs/src/markdown/createDescription";
+/* eslint-disable import/no-extraneous-dependencies*/
+import { guard } from "docusaurus-theme-openapi-docs/src/markdown/utils";
 import ReactMarkdown from "react-markdown";
 import rehypeRaw from "rehype-raw";
 
-import { createDescription } from "../../markdown/createDescription";
-import { guard } from "../../markdown/utils";
 import styles from "./styles.module.css";
 
 function SchemaItem({

package/src/theme/styles.css

@@ -14,6 +14,7 @@
   --openapi-card-background-color: var(--ifm-color-gray-100);
   --openapi-card-border-radius: var(--ifm-pre-border-radius);
   --openapi-input-border: var(--ifm-color-primary);
+  --openapi-input-background: var(--openapi-card-background-color);
 }
 
 [data-theme="dark"] {