docusaurus-theme-openapi-docs 0.0.0-477 → 0.0.0-478

package/lib/theme/ApiDemoPanel/Accept/index.js

@@ -7,7 +7,7 @@ exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _hooks = require("../hooks");
+var _hooks = require("../../ApiItem/hooks");
 
 var _FormItem = _interopRequireDefault(require("./../FormItem"));
 

package/lib/theme/ApiDemoPanel/Authorization/index.js

@@ -7,14 +7,14 @@ exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
+var _hooks = require("../../ApiItem/hooks");
+
 var _FormItem = _interopRequireDefault(require("../FormItem"));
 
 var _FormSelect = _interopRequireDefault(require("../FormSelect"));
 
 var _FormTextInput = _interopRequireDefault(require("../FormTextInput"));
 
-var _hooks = require("../hooks");
-
 var _slice = require("./slice");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/theme/ApiDemoPanel/Body/index.js

@@ -11,14 +11,14 @@ var _TabItem = _interopRequireDefault(require("@theme/TabItem"));
 
 var _xmlFormatter = _interopRequireDefault(require("xml-formatter"));
 
+var _hooks = require("../../ApiItem/hooks");
+
 var _SchemaTabs = _interopRequireDefault(require("../../SchemaTabs"));
 
 var _ContentType = _interopRequireDefault(require("../ContentType"));
 
 var _FormSelect = _interopRequireDefault(require("../FormSelect"));
 
-var _hooks = require("../hooks");
-
 var _LiveEditor = _interopRequireDefault(require("../LiveEditor"));
 
 var _FormFileUpload = _interopRequireDefault(require("./../FormFileUpload"));

package/lib/theme/ApiDemoPanel/ContentType/index.js

@@ -7,7 +7,7 @@ exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _hooks = require("../hooks");
+var _hooks = require("../../ApiItem/hooks");
 
 var _FormItem = _interopRequireDefault(require("./../FormItem"));
 

package/lib/theme/ApiDemoPanel/Curl/index.js

@@ -15,9 +15,9 @@ var _CodeBlock = _interopRequireDefault(require("@theme/CodeBlock"));
 
 var _clsx = _interopRequireDefault(require("clsx"));
 
-var _CodeTabs = _interopRequireDefault(require("../CodeTabs"));
+var _hooks = require("../../ApiItem/hooks");
 
-var _hooks = require("../hooks");
+var _CodeTabs = _interopRequireDefault(require("../CodeTabs"));
 
 var _buildPostmanRequest = _interopRequireDefault(require("./../buildPostmanRequest"));
 

package/lib/theme/ApiDemoPanel/Execute/index.js

@@ -9,7 +9,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _reactModal = _interopRequireDefault(require("react-modal"));
 
-var _hooks = require("../hooks");
+var _hooks = require("../../ApiItem/hooks");
 
 var _slice = require("../Response/slice");
 

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

@@ -9,7 +9,7 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _toolkit = require("@reduxjs/toolkit");
 
-var _hooks = require("../hooks");
+var _hooks = require("../../ApiItem/hooks");
 
 var _FormItem = _interopRequireDefault(require("./../FormItem"));
 

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

@@ -11,6 +11,8 @@ var _useDocusaurusContext = _interopRequireDefault(require("@docusaurus/useDocus
 
 var _postmanCollection = _interopRequireDefault(require("@paloaltonetworks/postman-collection"));
 
+var _hooks = require("../../ApiItem/hooks");
+
 var _Accept = _interopRequireDefault(require("../Accept"));
 
 var _Authorization = _interopRequireDefault(require("../Authorization"));
@@ -19,8 +21,6 @@ var _Body = _interopRequireDefault(require("../Body"));
 
 var _Execute = _interopRequireDefault(require("../Execute"));
 
-var _hooks = require("../hooks");
-
 var _ParamOptions = _interopRequireDefault(require("../ParamOptions"));
 
 var _Server = _interopRequireDefault(require("../Server"));

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

@@ -9,7 +9,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _CodeBlock = _interopRequireDefault(require("@theme/CodeBlock"));
 
-var _hooks = require("../hooks");
+var _hooks = require("../../ApiItem/hooks");
 
 var _slice = require("./slice");
 

package/lib/theme/ApiDemoPanel/SecuritySchemes/index.js

@@ -9,7 +9,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _Link = _interopRequireDefault(require("@docusaurus/Link"));
 
-var _hooks = require("../hooks");
+var _hooks = require("../../ApiItem/hooks");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 

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

@@ -7,9 +7,9 @@ exports.default = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _FloatingButton = _interopRequireDefault(require("../FloatingButton"));
+var _hooks = require("../../ApiItem/hooks");
 
-var _hooks = require("../hooks");
+var _FloatingButton = _interopRequireDefault(require("../FloatingButton"));
 
 var _FormItem = _interopRequireDefault(require("./../FormItem"));
 
@@ -47,6 +47,21 @@ function Server() {
     return null;
   }
 
+  if (!value) {
+    const defaultOption = options[0];
+    dispatch((0, _slice.setServer)(JSON.stringify(defaultOption)));
+  } // Default to first option when existing server state is mismatched
+
+
+  if (value) {
+    const urlExists = options.find(s => s.url === value.url);
+
+    if (!urlExists) {
+      const defaultOption = options[0];
+      dispatch((0, _slice.setServer)(JSON.stringify(defaultOption)));
+    }
+  }
+
   if (!isEditing) {
     let url = "";
 
@@ -77,30 +92,32 @@ function Server() {
   return <div className={_stylesModule.default.optionsPanel}>
       <_FloatingButton.default onClick={() => setIsEditing(false)} label="Hide">
         <_FormItem.default label="Base URL">
-          <_FormSelect.default options={options.map(s => s.url)} onChange={e => dispatch((0, _slice.setServer)(e.target.value))} value={value === null || value === void 0 ? void 0 : value.url} />
+          <_FormSelect.default options={options.map(s => s.url)} onChange={e => {
+          dispatch((0, _slice.setServer)(JSON.stringify(options.filter(s => s.url === e.target.value)[0])));
+        }} value={value === null || value === void 0 ? void 0 : value.url} />
           <small>{value === null || value === void 0 ? void 0 : value.description}</small>
         </_FormItem.default>
         {(value === null || value === void 0 ? void 0 : value.variables) && Object.keys(value.variables).map(key => {
-        var _value$variables2, _value$variables3;
+        var _value$variables2, _value$variables3, _value$variables4;
 
         if (((_value$variables2 = value.variables) === null || _value$variables2 === void 0 ? void 0 : _value$variables2[key].enum) !== undefined) {
           return <_FormItem.default label={key}>
                   <_FormSelect.default options={value.variables[key].enum} onChange={e => {
-              dispatch((0, _slice.setServerVariable)({
+              dispatch((0, _slice.setServerVariable)(JSON.stringify({
                 key,
                 value: e.target.value
-              }));
-            }} />
+              })));
+            }} value={value === null || value === void 0 ? void 0 : value.variables[key].default} />
                 </_FormItem.default>;
         }
 
         return <_FormItem.default label={key}>
                 <_FormTextInput.default placeholder={(_value$variables3 = value.variables) === null || _value$variables3 === void 0 ? void 0 : _value$variables3[key].default} onChange={e => {
-            dispatch((0, _slice.setServerVariable)({
+            dispatch((0, _slice.setServerVariable)(JSON.stringify({
               key,
               value: e.target.value
-            }));
-          }} />
+            })));
+          }} value={value === null || value === void 0 ? void 0 : (_value$variables4 = value.variables) === null || _value$variables4 === void 0 ? void 0 : _value$variables4[key].default} />
               </_FormItem.default>;
       })}
       </_FloatingButton.default>

package/lib/theme/ApiDemoPanel/Server/slice.js

@@ -19,13 +19,14 @@ const slice = (0, _toolkit.createSlice)({
   initialState,
   reducers: {
     setServer: (state, action) => {
-      state.value = state.options.find(s => s.url === action.payload);
+      state.value = state.options.find(s => s.url === JSON.parse(action.payload).url);
     },
     setServerVariable: (state, action) => {
       var _state$value;
 
       if ((_state$value = state.value) !== null && _state$value !== void 0 && _state$value.variables) {
-        state.value.variables[action.payload.key].default = action.payload.value;
+        const parsedPayload = JSON.parse(action.payload);
+        state.value.variables[parsedPayload.key].default = parsedPayload.value;
       }
     }
   }

package/lib/theme/ApiDemoPanel/index.js

@@ -7,28 +7,18 @@ exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _useDocusaurusContext = _interopRequireDefault(require("@docusaurus/useDocusaurusContext"));
-
 var _postmanCollection = _interopRequireDefault(require("@paloaltonetworks/postman-collection"));
 
-var _reactRedux = require("react-redux");
-
-var _slice = require("./Authorization/slice");
-
 var _Curl = _interopRequireDefault(require("./Curl"));
 
 var _MethodEndpoint = _interopRequireDefault(require("./MethodEndpoint"));
 
-var _persistanceMiddleware = require("./persistanceMiddleware");
-
 var _Request = _interopRequireDefault(require("./Request"));
 
 var _Response = _interopRequireDefault(require("./Response"));
 
 var _SecuritySchemes = _interopRequireDefault(require("./SecuritySchemes"));
 
-var _store = require("./store");
-
 var _stylesModule = _interopRequireDefault(require("./styles.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -43,74 +33,20 @@ function ApiDemoPanel({
   item,
   infoPath
 }) {
-  var _item$responses, _item$requestBody$con, _item$requestBody, _item$servers, _item$parameters, _xCodeSamples;
+  var _xCodeSamples;
 
-  const {
-    siteConfig
-  } = (0, _useDocusaurusContext.default)();
-  const themeConfig = siteConfig.themeConfig;
-  const options = themeConfig.api;
   const postman = new _postmanCollection.default.Request(item.postman);
-  const acceptArray = Array.from(new Set(Object.values((_item$responses = item.responses) !== null && _item$responses !== void 0 ? _item$responses : {}).map(response => {
-    var _response$content;
-
-    return Object.keys((_response$content = response.content) !== null && _response$content !== void 0 ? _response$content : {});
-  }).flat()));
-  const content = (_item$requestBody$con = (_item$requestBody = item.requestBody) === null || _item$requestBody === void 0 ? void 0 : _item$requestBody.content) !== null && _item$requestBody$con !== void 0 ? _item$requestBody$con : {};
-  const contentTypeArray = Object.keys(content);
-  const servers = (_item$servers = item.servers) !== null && _item$servers !== void 0 ? _item$servers : [];
-  const params = {
-    path: [],
-    query: [],
-    header: [],
-    cookie: []
-  };
-  (_item$parameters = item.parameters) === null || _item$parameters === void 0 ? void 0 : _item$parameters.forEach(param => {
-    const paramType = param.in;
-    const paramsArray = params[paramType];
-    paramsArray.push(param);
-  });
-  const auth = (0, _slice.createAuth)({
-    security: item.security,
-    securitySchemes: item.securitySchemes,
-    options
-  });
-  const persistanceMiddleware = (0, _persistanceMiddleware.createPersistanceMiddleware)(options);
-  const store2 = (0, _store.createStoreWithState)({
-    accept: {
-      value: acceptArray[0],
-      options: acceptArray
-    },
-    contentType: {
-      value: contentTypeArray[0],
-      options: contentTypeArray
-    },
-    server: {
-      value: servers[0],
-      options: servers
-    },
-    response: {
-      value: undefined
-    },
-    body: {
-      type: "empty"
-    },
-    params,
-    auth
-  }, [persistanceMiddleware]);
   const {
     path,
     method
   } = item;
-  return <_reactRedux.Provider store={store2}>
-      <div className={_stylesModule.default.apiDemoPanelContainer}>
-        <_MethodEndpoint.default method={method} path={path} />
-        <_SecuritySchemes.default infoPath={infoPath} />
-        <_Request.default item={item} />
-        <_Response.default />
-        <_Curl.default postman={postman} codeSamples={(_xCodeSamples = item["x-code-samples"]) !== null && _xCodeSamples !== void 0 ? _xCodeSamples : []} />
-      </div>
-    </_reactRedux.Provider>;
+  return <div className={_stylesModule.default.apiDemoPanelContainer}>
+      <_MethodEndpoint.default method={method} path={path} />
+      <_SecuritySchemes.default infoPath={infoPath} />
+      <_Request.default item={item} />
+      <_Response.default />
+      <_Curl.default postman={postman} codeSamples={(_xCodeSamples = item["x-code-samples"]) !== null && _xCodeSamples !== void 0 ? _xCodeSamples : []} />
+    </div>;
 }
 
 var _default = ApiDemoPanel;

package/lib/theme/ApiDemoPanel/persistanceMiddleware.js

@@ -37,6 +37,28 @@ function createPersistanceMiddleware(options) {
       }
     }
 
+    if (action.type === "contentType/setContentType") {
+      storage.setItem("contentType", action.payload);
+    }
+
+    if (action.type === "accept/setAccept") {
+      storage.setItem("accept", action.payload);
+    }
+
+    if (action.type === "server/setServer") {
+      storage.setItem("server", action.payload);
+    }
+
+    if (action.type === "server/setServerVariable") {
+      var _storage$getItem;
+
+      const server = (_storage$getItem = storage.getItem("server")) !== null && _storage$getItem !== void 0 ? _storage$getItem : "{}";
+      const variables = JSON.parse(action.payload);
+      let serverObject = JSON.parse(server);
+      serverObject.variables[variables.key].default = variables.value;
+      storage.setItem("server", JSON.stringify(serverObject));
+    }
+
     return result;
   };
 

package/lib/theme/ApiItem/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = DocItem;
+exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -11,12 +11,22 @@ var _ExecutionEnvironment = _interopRequireDefault(require("@docusaurus/Executio
 
 var _themeCommon = require("@docusaurus/theme-common");
 
+var _useDocusaurusContext = _interopRequireDefault(require("@docusaurus/useDocusaurusContext"));
+
 var _clsx = _interopRequireDefault(require("clsx"));
 
+var _reactRedux = require("react-redux");
+
+var _slice = require("../ApiDemoPanel/Authorization/slice");
+
+var _persistanceMiddleware = require("../ApiDemoPanel/persistanceMiddleware");
+
 var _Layout = _interopRequireDefault(require("./Layout"));
 
 var _Metadata = _interopRequireDefault(require("./Metadata"));
 
+var _store = require("./store");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 /* ============================================================================
@@ -33,14 +43,19 @@ let ApiDemoPanel = _ => <div style={{
   marginTop: "3.5em"
 }} />;
 
+let DocItem = props => {
+  return <div style={{
+    marginTop: "3.5em"
+  }} />;
+};
+
 if (_ExecutionEnvironment.default.canUseDOM) {
   ApiDemoPanel = require("@theme/ApiDemoPanel").default;
-}
 
-function DocItem(props) {
-  const docHtmlClassName = `docs-doc-id-${props.content.metadata.unversionedId}`;
+  DocItem = function DocItem(props) {
+    var _api$responses, _api$requestBody$cont, _api$requestBody, _api$servers, _api$parameters, _window, _window2, _window3, _ref;
 
-  const DocContent = () => {
+    const docHtmlClassName = `docs-doc-id-${props.content.metadata.unversionedId}`;
     const MDXComponent = props.content;
     const {
       frontMatter
@@ -51,22 +66,86 @@ function DocItem(props) {
     const {
       api
     } = frontMatter;
-    return <div className="row">
-        <div className={(0, _clsx.default)("col", api ? "col--7" : "col--12")}>
-          <MDXComponent />
-        </div>
-        {api && <div className="col col--5">
-            <ApiDemoPanel item={api} infoPath={infoPath} />
-          </div>}
-      </div>;
+    const {
+      siteConfig
+    } = (0, _useDocusaurusContext.default)();
+    const themeConfig = siteConfig.themeConfig;
+    const options = themeConfig.api;
+    const acceptArray = Array.from(new Set(Object.values((_api$responses = api === null || api === void 0 ? void 0 : api.responses) !== null && _api$responses !== void 0 ? _api$responses : {}).map(response => {
+      var _response$content;
+
+      return Object.keys((_response$content = response.content) !== null && _response$content !== void 0 ? _response$content : {});
+    }).flat()));
+    const content = (_api$requestBody$cont = api === null || api === void 0 ? void 0 : (_api$requestBody = api.requestBody) === null || _api$requestBody === void 0 ? void 0 : _api$requestBody.content) !== null && _api$requestBody$cont !== void 0 ? _api$requestBody$cont : {};
+    const contentTypeArray = Object.keys(content);
+    const servers = (_api$servers = api === null || api === void 0 ? void 0 : api.servers) !== null && _api$servers !== void 0 ? _api$servers : [];
+    const params = {
+      path: [],
+      query: [],
+      header: [],
+      cookie: []
+    };
+    api === null || api === void 0 ? void 0 : (_api$parameters = api.parameters) === null || _api$parameters === void 0 ? void 0 : _api$parameters.forEach(param => {
+      const paramType = param.in;
+      const paramsArray = params[paramType];
+      paramsArray.push(param);
+    });
+    const auth = (0, _slice.createAuth)({
+      security: api === null || api === void 0 ? void 0 : api.security,
+      securitySchemes: api === null || api === void 0 ? void 0 : api.securitySchemes,
+      options
+    });
+    const persistanceMiddleware = (0, _persistanceMiddleware.createPersistanceMiddleware)(options);
+    const acceptValue = (_window = window) === null || _window === void 0 ? void 0 : _window.sessionStorage.getItem("accept");
+    const contentTypeValue = (_window2 = window) === null || _window2 === void 0 ? void 0 : _window2.sessionStorage.getItem("contentType");
+    const server = (_window3 = window) === null || _window3 === void 0 ? void 0 : _window3.sessionStorage.getItem("server");
+    const serverObject = (_ref = JSON.parse(server)) !== null && _ref !== void 0 ? _ref : {};
+    const store2 = (0, _store.createStoreWithState)({
+      accept: {
+        value: acceptValue || acceptArray[0],
+        options: acceptArray
+      },
+      contentType: {
+        value: contentTypeValue || contentTypeArray[0],
+        options: contentTypeArray
+      },
+      server: {
+        value: serverObject.url ? serverObject : undefined,
+        options: servers
+      },
+      response: {
+        value: undefined
+      },
+      body: {
+        type: "empty"
+      },
+      params,
+      auth
+    }, [persistanceMiddleware]);
+
+    const DocContent = () => {
+      return <div className="row">
+          <div className={(0, _clsx.default)("col", api ? "col--7" : "col--12")}>
+            <MDXComponent />
+          </div>
+          {api && <div className="col col--5">
+              <ApiDemoPanel item={api} infoPath={infoPath} />
+            </div>}
+        </div>;
+    };
+
+    return <_reactRedux.Provider store={store2}>
+        <DocProvider content={props.content}>
+          <_themeCommon.HtmlClassNameProvider className={docHtmlClassName}>
+            <_Metadata.default />
+            <_Layout.default>
+              <DocContent />
+            </_Layout.default>
+          </_themeCommon.HtmlClassNameProvider>
+        </DocProvider>
+      </_reactRedux.Provider>;
   };
+}
 
-  return <DocProvider content={props.content}>
-      <_themeCommon.HtmlClassNameProvider className={docHtmlClassName}>
-        <_Metadata.default />
-        <_Layout.default>
-          <DocContent />
-        </_Layout.default>
-      </_themeCommon.HtmlClassNameProvider>
-    </DocProvider>;
-}
+var _default = DocItem;
+exports.default = _default;

package/lib/theme/{ApiDemoPanel → ApiItem}/store.js

@@ -7,19 +7,19 @@ exports.createStoreWithState = void 0;
 
 var _toolkit = require("@reduxjs/toolkit");
 
-var _slice = _interopRequireDefault(require("./Accept/slice"));
+var _slice = _interopRequireDefault(require("../ApiDemoPanel/Accept/slice"));
 
-var _slice2 = _interopRequireDefault(require("./Authorization/slice"));
+var _slice2 = _interopRequireDefault(require("../ApiDemoPanel/Authorization/slice"));
 
-var _slice3 = _interopRequireDefault(require("./Body/slice"));
+var _slice3 = _interopRequireDefault(require("../ApiDemoPanel/Body/slice"));
 
-var _slice4 = _interopRequireDefault(require("./ContentType/slice"));
+var _slice4 = _interopRequireDefault(require("../ApiDemoPanel/ContentType/slice"));
 
-var _slice5 = _interopRequireDefault(require("./ParamOptions/slice"));
+var _slice5 = _interopRequireDefault(require("../ApiDemoPanel/ParamOptions/slice"));
 
-var _slice6 = _interopRequireDefault(require("./Response/slice"));
+var _slice6 = _interopRequireDefault(require("../ApiDemoPanel/Response/slice"));
 
-var _slice7 = _interopRequireDefault(require("./Server/slice"));
+var _slice7 = _interopRequireDefault(require("../ApiDemoPanel/Server/slice"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 

package/lib/theme/MimeTabs/index.js

@@ -18,6 +18,9 @@ import { duplicates } from "@docusaurus/theme-common";
 import useIsBrowser from "@docusaurus/useIsBrowser";
 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
 
 const {
@@ -39,6 +42,7 @@ function MimeTabsComponent(props) {
     values: valuesProp,
     groupId,
     className,
+    schemaType,
   } = props;
   const children = Children.map(props.children, (child) => {
     if (isValidElement(child) && isTabItem(child)) {
@@ -105,12 +109,22 @@ function MimeTabsComponent(props) {
     }
   }
 
+  const dispatch = useTypedDispatch();
+  const isRequestSchema = schemaType?.toLowerCase() === "request";
+
   const handleTabChange = (event) => {
+    event.preventDefault();
     const newTab = event.currentTarget;
     const newTabIndex = tabRefs.indexOf(newTab);
     const newTabValue = values[newTabIndex].value;
 
     if (newTabValue !== selectedValue) {
+      if (isRequestSchema) {
+        dispatch(setContentType(newTabValue));
+      } else {
+        dispatch(setAccept(newTabValue));
+      }
+
       blockElementScrollPositionUntilNextRender(newTab);
       setSelectedValue(newTabValue);
 
@@ -120,6 +134,20 @@ function MimeTabsComponent(props) {
     }
   };
 
+  const contentTypeVal = useTypedSelector((state) => state.contentType.value);
+  const acceptTypeVal = useTypedSelector((state) => state.accept.value);
+
+  useEffect(() => {
+    if (tabRefs.length > 1) {
+      if (isRequestSchema) {
+        setSelectedValue(contentTypeVal);
+      } else {
+        setSelectedValue(acceptTypeVal);
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [contentTypeVal, acceptTypeVal]);
+
   const handleKeydown = (event) => {
     let focusElement = null;
 
@@ -197,7 +225,7 @@ function MimeTabsComponent(props) {
                   ref={(tabControl) => tabRefs.push(tabControl)}
                   onKeyDown={handleKeydown}
                   onFocus={handleTabChange}
-                  onClick={handleTabChange}
+                  onClick={(e) => handleTabChange(e)}
                   {...attributes}
                   className={clsx(
                     "tabs__item",

package/lib-next/theme/ApiDemoPanel/Accept/index.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  * ========================================================================== */
 import React from "react";
-import { useTypedDispatch, useTypedSelector } from "../hooks";
+import { useTypedDispatch, useTypedSelector } from "../../ApiItem/hooks";
 import FormItem from "./../FormItem";
 import FormSelect from "./../FormSelect";
 import { setAccept } from "./slice";

package/lib-next/theme/ApiDemoPanel/Authorization/index.js

@@ -5,10 +5,10 @@
  * LICENSE file in the root directory of this source tree.
  * ========================================================================== */
 import React from "react";
+import { useTypedDispatch, useTypedSelector } from "../../ApiItem/hooks";
 import FormItem from "../FormItem";
 import FormSelect from "../FormSelect";
 import FormTextInput from "../FormTextInput";
-import { useTypedDispatch, useTypedSelector } from "../hooks";
 import { setAuthData, setSelectedAuth } from "./slice";
 
 function Authorization() {

package/lib-next/theme/ApiDemoPanel/Body/index.js

@@ -6,12 +6,12 @@
  * ========================================================================== */
 import React from "react";
 import TabItem from "@theme/TabItem";
-import format from "xml-formatter"; // @ts-ignore
+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 { useTypedDispatch, useTypedSelector } from "../hooks";
 import LiveApp from "../LiveEditor";
 import FormFileUpload from "./../FormFileUpload";
 import FormItem from "./../FormItem";