fix: resolve api explorer type errors

Author: sserrata

packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/CodeSnippets/index.tsx

@@ -141,9 +141,9 @@ function CodeSnippets({
     return defaultLang[0] ?? mergedLangs[0];
   });
   const [codeText, setCodeText] = useState<string>("");
-  const [codeSampleCodeText, setCodeSampleCodeText] = useState<
-    string | (() => string)
-  >(() => getCodeSampleSourceFromLanguage(language));
+  const [codeSampleCodeText, setCodeSampleCodeText] = useState<string>(() =>
+    getCodeSampleSourceFromLanguage(language)
+  );
 
   useEffect(() => {
     if (language && !!language.sample) {
@@ -273,7 +273,7 @@ function CodeSnippets({
                     setSelectedSample: setSelectedSample,
                   }}
                   includeSample={true}
-                  currentLanguage={lang.language}
+                  currentLanguage={lang}
                   defaultValue={selectedSample}
                   languageSet={mergedLangs}
                   lazy
@@ -314,7 +314,7 @@ function CodeSnippets({
                   setSelectedVariant: setSelectedVariant,
                 }}
                 includeVariant={true}
-                currentLanguage={lang.language}
+                currentLanguage={lang}
                 defaultValue={selectedVariant}
                 languageSet={mergedLangs}
                 lazy

packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/CodeTabs/index.tsx

@@ -15,16 +15,17 @@ import {
 } from "@docusaurus/theme-common/internal";
 import { TabItemProps } from "@docusaurus/theme-common/lib/utils/tabsUtils";
 import useIsBrowser from "@docusaurus/useIsBrowser";
-import { Language } from "@theme/ApiExplorer/CodeSnippets";
 import clsx from "clsx";
 
+import { Language } from "../CodeSnippets/code-snippets-types";
+
 export interface Props {
   action: {
     [key: string]: React.Dispatch<any>;
   };
-  currentLanguage: Language;
+  currentLanguage?: Language;
   languageSet: Language[];
-  includeVariant: boolean;
+  includeVariant?: boolean;
 }
 
 export interface CodeTabsProps extends Props, TabProps {
@@ -94,13 +95,13 @@ function TabList({
       let newLanguage: Language;
       if (currentLanguage && includeVariant) {
         newLanguage = languageSet.filter(
-          (lang: Language) => lang.language === currentLanguage
+          (lang: Language) => lang.language === currentLanguage.language
         )[0];
         newLanguage.variant = newTabValue;
         action.setSelectedVariant(newTabValue.toLowerCase());
       } else if (currentLanguage && includeSample) {
         newLanguage = languageSet.filter(
-          (lang: Language) => lang.language === currentLanguage
+          (lang: Language) => lang.language === currentLanguage.language
         )[0];
         newLanguage.sample = newTabValue;
         action.setSelectedSample(newTabValue);

packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/ContentType/index.tsx

@@ -27,7 +27,7 @@ function ContentType() {
       <FormSelect
         value={value}
         options={options}
-        onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+        onChange={(e: React.ChangeEvent<HTMLSelectElement>) =>
           dispatch(setContentType(e.target.value))
         }
       />

packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/ParamOptions/ParamFormItems/ParamArrayFormItem.tsx

@@ -30,7 +30,7 @@ function ArrayItem({
     return (
       <FormSelect
         options={["---", "true", "false"]}
-        onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+        onChange={(e: React.ChangeEvent<HTMLSelectElement>) => {
           const val = e.target.value;
           onChange(val === "---" ? undefined : val);
         }}
@@ -87,15 +87,16 @@ export default function ParamArrayFormItem({ param }: ParamProps) {
   }, [items]);
 
   useEffect(() => {
-    if (param.schema?.example?.length > 0) {
-      const examplesWithIds = param.schema.example.map((item: any) => ({
+    const example = param.schema?.example;
+    if (Array.isArray(example) && example.length > 0) {
+      const examplesWithIds = example.map((item: any) => ({
         id: nanoid(),
         value: item.toString(),
       }));
 
       setItems(examplesWithIds);
     }
-  }, [param.schema.example, param.schema.length]);
+  }, [param.schema?.example]);
 
   function handleDeleteItem(itemToDelete: { id: string }) {
     return () => {
@@ -123,7 +124,7 @@ export default function ParamArrayFormItem({ param }: ParamProps) {
         control={control}
         rules={{ required: param.required ? "This field is required" : false }}
         name="paramArray"
-        render={({ field: { onChange, name } }) => (
+        render={({ field: { onChange } }) => (
           <>
             {items.map((item) => (
               <div key={item.id} style={{ display: "flex" }}>

packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/ParamOptions/ParamFormItems/ParamBooleanFormItem.tsx

@@ -33,11 +33,10 @@ export default function ParamBooleanFormItem({ param }: ParamProps) {
         control={control}
         rules={{ required: param.required ? "This field is required" : false }}
         name="paramBoolean"
-        render={({ field: { onChange, name } }) => (
+        render={({ field: { onChange } }) => (
           <FormSelect
-            name={name}
             options={["---", "true", "false"]}
-            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+            onChange={(e: React.ChangeEvent<HTMLSelectElement>) => {
               const val = e.target.value;
               dispatch(
                 setParam({

packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/ParamOptions/ParamFormItems/ParamMultiSelectFormItem.tsx

@@ -63,12 +63,11 @@ export default function ParamMultiSelectFormItem({ param }: ParamProps) {
         control={control}
         rules={{ required: param.required ? "This field is required" : false }}
         name="paramMultiSelect"
-        render={({ field: { onChange, name } }) => (
+        render={({ field: { onChange } }) => (
           <FormMultiSelect
             options={options as string[]}
-            name={name}
             onChange={(e: any) => handleChange(e, onChange)}
-            showErrors={showErrorMessage}
+            showErrors={!!showErrorMessage}
           />
         )}
       />

packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/ParamOptions/ParamFormItems/ParamSelectFormItem.tsx

@@ -35,10 +35,10 @@ export default function ParamSelectFormItem({ param }: ParamProps) {
         control={control}
         rules={{ required: param.required ? "This field is required" : false }}
         name="paramSelect"
-        render={({ field: { onChange, name } }) => (
+        render={({ field: { onChange } }) => (
           <FormSelect
             options={["---", ...(options as string[])]}
-            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+            onChange={(e: React.ChangeEvent<HTMLSelectElement>) => {
               const val = e.target.value;
               dispatch(
                 setParam({

packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/Server/index.tsx

@@ -72,7 +72,7 @@ function Server() {
         <FormItem>
           <FormSelect
             options={options.map((s: any) => s.url)}
-            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+            onChange={(e: React.ChangeEvent<HTMLSelectElement>) => {
               dispatch(
                 setServer(
                   JSON.stringify(
@@ -94,7 +94,7 @@ function Server() {
                 <FormItem label={key}>
                   <FormSelect
                     options={value.variables[key].enum}
-                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                    onChange={(e: React.ChangeEvent<HTMLSelectElement>) => {
                       dispatch(
                         setServerVariable(
                           JSON.stringify({ key, value: e.target.value })

packages/docusaurus-theme-openapi-docs/src/theme/ApiItem/Layout/index.tsx

@@ -9,11 +9,11 @@ import React, { type JSX } from "react";
 
 import { useDoc } from "@docusaurus/plugin-content-docs/client";
 import { useWindowSize } from "@docusaurus/theme-common";
-import type { Props } from "@theme/ApiItem/Layout";
 import ContentVisibility from "@theme/ContentVisibility";
 import DocBreadcrumbs from "@theme/DocBreadcrumbs";
 import DocItemContent from "@theme/DocItem/Content";
 import DocItemFooter from "@theme/DocItem/Footer";
+import type { Props } from "@theme/DocItem/Layout";
 import DocItemPaginator from "@theme/DocItem/Paginator";
 import DocItemTOCDesktop from "@theme/DocItem/TOC/Desktop";
 import DocItemTOCMobile from "@theme/DocItem/TOC/Mobile";