docusaurus-theme-openapi-docs 1.4.5 → 1.4.7

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

@@ -7,16 +7,17 @@
 
 import React from "react";
 
-import { useTypedDispatch, useTypedSelector } from "../../ApiItem/hooks";
-import FormItem from "../FormItem";
-import FormSelect from "../FormSelect";
-import FormTextInput from "../FormTextInput";
+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 { setAuthData, setSelectedAuth } from "./slice";
 
 function Authorization() {
-  const data = useTypedSelector((state) => state.auth.data);
-  const options = useTypedSelector((state) => state.auth.options);
-  const selected = useTypedSelector((state) => state.auth.selected);
+  const data = useTypedSelector((state: any) => state.auth.data);
+  const options = useTypedSelector((state: any) => state.auth.options);
+  const selected = useTypedSelector((state: any) => state.auth.selected);
 
   const dispatch = useTypedDispatch();
 
@@ -35,21 +36,21 @@ function Authorization() {
           <FormSelect
             options={optionKeys}
             value={selected}
-            onChange={(e) => {
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
               dispatch(setSelectedAuth(e.target.value));
             }}
           />
         </FormItem>
       )}
-      {selectedAuth.map((a) => {
+      {selectedAuth.map((a: any) => {
         if (a.type === "http" && a.scheme === "bearer") {
           return (
             <FormItem label="Bearer Token" key={a.key + "-bearer"}>
               <FormTextInput
                 placeholder="Bearer Token"
                 value={data[a.key].token ?? ""}
-                onChange={(e) => {
-                  const value = e.target.value.trim();
+                onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                  const value = e.target.value;
                   dispatch(
                     setAuthData({
                       scheme: a.key,
@@ -69,8 +70,8 @@ function Authorization() {
               <FormTextInput
                 placeholder="Bearer Token"
                 value={data[a.key].token ?? ""}
-                onChange={(e) => {
-                  const value = e.target.value.trim();
+                onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                  const value = e.target.value;
                   dispatch(
                     setAuthData({
                       scheme: a.key,
@@ -91,8 +92,8 @@ function Authorization() {
                 <FormTextInput
                   placeholder="Username"
                   value={data[a.key].username ?? ""}
-                  onChange={(e) => {
-                    const value = e.target.value.trim();
+                  onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                    const value = e.target.value;
                     dispatch(
                       setAuthData({
                         scheme: a.key,
@@ -108,8 +109,8 @@ function Authorization() {
                   placeholder="Password"
                   password
                   value={data[a.key].password ?? ""}
-                  onChange={(e) => {
-                    const value = e.target.value.trim();
+                  onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                    const value = e.target.value;
                     dispatch(
                       setAuthData({
                         scheme: a.key,
@@ -130,8 +131,8 @@ function Authorization() {
               <FormTextInput
                 placeholder={`${a.key}`}
                 value={data[a.key].apiKey ?? ""}
-                onChange={(e) => {
-                  const value = e.target.value.trim();
+                onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                  const value = e.target.value;
                   dispatch(
                     setAuthData({
                       scheme: a.key,

package/src/theme/ApiDemoPanel/Authorization/slice.ts

@@ -6,13 +6,14 @@
  * ========================================================================== */
 
 import { createSlice, PayloadAction } from "@reduxjs/toolkit";
+import { createStorage, hashArray } from "@theme/ApiDemoPanel/storage-utils";
 import {
   SecurityRequirementObject,
   SecuritySchemeObject,
 } from "docusaurus-plugin-openapi-docs/src/openapi/types";
+/* eslint-disable import/no-extraneous-dependencies*/
+import { ThemeConfig } from "docusaurus-theme-openapi-docs/src/types";
 
-import { ThemeConfig } from "../../../types";
-import { createStorage, hashArray } from "../storage-utils";
 import { getAuthDataKeys } from "./auth-types";
 
 // The global definitions

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

@@ -7,21 +7,19 @@
 
 import React from "react";
 
+import json2xml from "@theme/ApiDemoPanel/Body/json2xml";
+import ContentType from "@theme/ApiDemoPanel/ContentType";
+import FormFileUpload from "@theme/ApiDemoPanel/FormFileUpload";
+import FormItem from "@theme/ApiDemoPanel/FormItem";
+import FormSelect from "@theme/ApiDemoPanel/FormSelect";
+import FormTextInput from "@theme/ApiDemoPanel/FormTextInput";
+import LiveApp from "@theme/ApiDemoPanel/LiveEditor";
+import { useTypedDispatch, useTypedSelector } from "@theme/ApiItem/hooks";
+import SchemaTabs from "@theme/SchemaTabs";
 import TabItem from "@theme/TabItem";
 import { RequestBodyObject } from "docusaurus-plugin-openapi-docs/src/openapi/types";
 import format from "xml-formatter";
 
-import { useTypedDispatch, useTypedSelector } from "../../ApiItem/hooks";
-// @ts-ignore
-import SchemaTabs from "../../SchemaTabs";
-import ContentType from "../ContentType";
-import FormSelect from "../FormSelect";
-import LiveApp from "../LiveEditor";
-import FormFileUpload from "./../FormFileUpload";
-import FormItem from "./../FormItem";
-import FormTextInput from "./../FormTextInput";
-// @ts-ignore
-import json2xml from "./json2xml";
 import {
   clearFormBodyKey,
   clearRawBody,
@@ -30,13 +28,13 @@ import {
   setStringFormBody,
 } from "./slice";
 
-interface Props {
+export interface Props {
   jsonRequestBodyExample: string;
   requestBodyMetadata?: RequestBodyObject;
 }
 
 function BodyWrap({ requestBodyMetadata, jsonRequestBodyExample }: Props) {
-  const contentType = useTypedSelector((state) => state.contentType.value);
+  const contentType = useTypedSelector((state: any) => state.contentType.value);
 
   // NOTE: We used to check if body was required, but opted to always show the request body
   // to reduce confusion, see: https://github.com/cloud-annotations/docusaurus-openapi/issues/145
@@ -58,7 +56,7 @@ function BodyWrap({ requestBodyMetadata, jsonRequestBodyExample }: Props) {
 }
 
 function Body({ requestBodyMetadata, jsonRequestBodyExample }: Props) {
-  const contentType = useTypedSelector((state) => state.contentType.value);
+  const contentType = useTypedSelector((state: any) => state.contentType.value);
   const required = requestBodyMetadata?.required;
 
   const dispatch = useTypedDispatch();
@@ -93,7 +91,7 @@ function Body({ requestBodyMetadata, jsonRequestBodyExample }: Props) {
       <FormItem label="Body" required={required}>
         <FormFileUpload
           placeholder={schema.description || "Body"}
-          onChange={(file) => {
+          onChange={(file: any) => {
             if (file === undefined) {
               dispatch(clearRawBody());
               return;
@@ -138,7 +136,7 @@ function Body({ requestBodyMetadata, jsonRequestBodyExample }: Props) {
                 >
                   <FormFileUpload
                     placeholder={val.description || key}
-                    onChange={(file) => {
+                    onChange={(file: any) => {
                       if (file === undefined) {
                         dispatch(clearFormBodyKey(key));
                         return;
@@ -170,7 +168,7 @@ function Body({ requestBodyMetadata, jsonRequestBodyExample }: Props) {
                 >
                   <FormSelect
                     options={["---", ...val.enum]}
-                    onChange={(e) => {
+                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                       const val = e.target.value;
                       if (val === "---") {
                         dispatch(clearFormBodyKey(key));
@@ -199,7 +197,7 @@ function Body({ requestBodyMetadata, jsonRequestBodyExample }: Props) {
               >
                 <FormTextInput
                   placeholder={val.description || key}
-                  onChange={(e) => {
+                  onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                     dispatch(
                       setStringFormBody({ key: key, value: e.target.value })
                     );

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

@@ -14,10 +14,11 @@ import React, {
 
 import { duplicates } from "@docusaurus/theme-common";
 import useIsBrowser from "@docusaurus/useIsBrowser";
+import { languageSet } from "@theme/ApiDemoPanel/Curl";
+import { Language } from "@theme/ApiDemoPanel/Curl";
 import type { Props as TabItemProps } from "@theme/TabItem";
 import clsx from "clsx";
 
-import { languageSet } from "../Curl";
 import styles from "./styles.module.css";
 
 const {
@@ -133,7 +134,7 @@ function TabsComponent(props: Props): JSX.Element {
       setSelectedValue(newTabValue);
       if (action) {
         const newLanguage = languageSet.filter(
-          (lang) => lang.language === newTabValue
+          (lang: Language) => lang.language === newTabValue
         );
         action(newLanguage[0]);
       }

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

@@ -7,14 +7,15 @@
 
 import React from "react";
 
-import { useTypedDispatch, useTypedSelector } from "../../ApiItem/hooks";
-import FormItem from "./../FormItem";
-import FormSelect from "./../FormSelect";
+import FormItem from "@theme/ApiDemoPanel/FormItem";
+import FormSelect from "@theme/ApiDemoPanel/FormSelect";
+import { useTypedDispatch, useTypedSelector } from "@theme/ApiItem/hooks";
+
 import { setContentType } from "./slice";
 
 function ContentType() {
-  const value = useTypedSelector((state) => state.contentType.value);
-  const options = useTypedSelector((state) => state.contentType.options);
+  const value = useTypedSelector((state: any) => state.contentType.value);
+  const options = useTypedSelector((state: any) => state.contentType.options);
   const dispatch = useTypedDispatch();
 
   if (options.length <= 1) {
@@ -26,7 +27,9 @@ function ContentType() {
       <FormSelect
         value={value}
         options={options}
-        onChange={(e) => dispatch(setContentType(e.target.value))}
+        onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+          dispatch(setContentType(e.target.value))
+        }
       />
     </FormItem>
   );

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

@@ -10,15 +10,15 @@ import React, { useState, useEffect } from "react";
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 import codegen from "@paloaltonetworks/postman-code-generators";
 import sdk from "@paloaltonetworks/postman-collection";
+import buildPostmanRequest from "@theme/ApiDemoPanel/buildPostmanRequest";
+import CodeTabs from "@theme/ApiDemoPanel/CodeTabs";
+import { useTypedSelector } from "@theme/ApiItem/hooks";
 import CodeBlock from "@theme/CodeBlock";
 import clsx from "clsx";
 
-import { useTypedSelector } from "../../ApiItem/hooks";
-import CodeTabs from "../CodeTabs";
-import buildPostmanRequest from "./../buildPostmanRequest";
 import styles from "./styles.module.css";
 
-interface Language {
+export interface Language {
   highlight?: string;
   language: string;
   logoClass?: string;
@@ -102,7 +102,7 @@ export const languageSet: Language[] = [
   },
 ];
 
-interface Props {
+export interface Props {
   postman: sdk.Request;
   codeSamples: any; // TODO: Type this...
 }
@@ -124,17 +124,17 @@ function Curl({ postman, codeSamples }: Props) {
 
   const { siteConfig } = useDocusaurusContext();
 
-  const contentType = useTypedSelector((state) => state.contentType.value);
-  const accept = useTypedSelector((state) => state.accept.value);
-  const server = useTypedSelector((state) => state.server.value);
-  const body = useTypedSelector((state) => state.body);
+  const contentType = useTypedSelector((state: any) => state.contentType.value);
+  const accept = useTypedSelector((state: any) => state.accept.value);
+  const server = useTypedSelector((state: any) => state.server.value);
+  const body = useTypedSelector((state: any) => state.body);
 
-  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 auth = useTypedSelector((state) => state.auth);
+  const auth = useTypedSelector((state: any) => state.auth);
 
   // TODO
   const langs = [

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

@@ -8,12 +8,12 @@
 import React from "react";
 
 import sdk from "@paloaltonetworks/postman-collection";
+import buildPostmanRequest from "@theme/ApiDemoPanel/buildPostmanRequest";
+import { Param } from "@theme/ApiDemoPanel/ParamOptions/slice";
+import { setResponse } from "@theme/ApiDemoPanel/Response/slice";
+import { useTypedDispatch, useTypedSelector } from "@theme/ApiItem/hooks";
 import Modal from "react-modal";
 
-import { useTypedDispatch, useTypedSelector } from "../../ApiItem/hooks";
-import { Param } from "../ParamOptions/slice";
-import { setResponse } from "../Response/slice";
-import buildPostmanRequest from "./../buildPostmanRequest";
 import makeRequest from "./makeRequest";
 
 function validateRequest(params: {
@@ -32,22 +32,22 @@ function validateRequest(params: {
   return true;
 }
 
-interface Props {
+export interface Props {
   postman: sdk.Request;
   proxy?: string;
 }
 
 function Execute({ postman, proxy }: Props) {
-  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 contentType = useTypedSelector((state) => state.contentType.value);
-  const body = useTypedSelector((state) => state.body);
-  const accept = useTypedSelector((state) => state.accept.value);
-  const server = useTypedSelector((state) => state.server.value);
-  const params = useTypedSelector((state) => state.params);
-  const auth = useTypedSelector((state) => state.auth);
+  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 contentType = useTypedSelector((state: any) => state.contentType.value);
+  const body = useTypedSelector((state: any) => state.body);
+  const accept = useTypedSelector((state: any) => state.accept.value);
+  const server = useTypedSelector((state: any) => state.server.value);
+  const params = useTypedSelector((state: any) => state.params);
+  const auth = useTypedSelector((state: any) => state.auth);
 
   const isValidRequest = validateRequest(params);
 

package/src/theme/ApiDemoPanel/Execute/makeRequest.ts

@@ -6,8 +6,7 @@
  * ========================================================================== */
 
 import sdk from "@paloaltonetworks/postman-collection";
-
-import { Body } from "../Body/slice";
+import { Body } from "@theme/ApiDemoPanel/Body/slice";
 
 function fetchWithtimeout(
   url: string,

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

@@ -9,7 +9,7 @@ import React from "react";
 
 import styles from "./styles.module.css";
 
-interface Props {
+export interface Props {
   label?: string;
   onClick?: React.MouseEventHandler<HTMLButtonElement>;
   children?: React.ReactNode;

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

@@ -7,9 +7,9 @@
 
 import React, { useState } from "react";
 
+import FloatingButton from "@theme/ApiDemoPanel/FloatingButton";
 import MagicDropzone from "react-magic-dropzone";
 
-import FloatingButton from "../FloatingButton";
 import styles from "./styles.module.css";
 
 type PreviewFile = { preview: string } & File;
@@ -61,7 +61,7 @@ function RenderPreview({ file }: RenderPreviewProps) {
   }
 }
 
-interface Props {
+export interface Props {
   placeholder: string;
   onChange?(file?: File): any;
 }

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

@@ -9,7 +9,7 @@ import React from "react";
 
 import styles from "./styles.module.css";
 
-interface Props {
+export interface Props {
   label?: string;
   type?: string;
   required?: boolean | undefined;

package/src/theme/ApiDemoPanel/FormMultiSelect/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/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";