[Bug] Add handler for oneOf properties, fix nested <li> and and avoid duplicate properties in createAnyOneOf (#561)

* Pop schemas as we're iterating in createAnyOneOf and add handler for oneOf properties

* Convert ul and li tags to divs to avoid nested lists

* Add type and description to each oneOf property option

* Add handlers for nodes with circular refs

* Add custom styles to discriminator tabs

* Allow SchemaItem to return children

* Add custom style for discriminator tabs

* Revert discriminator top tab section left margin to 1rem

* Improve additionalProperties support and cleanup <li> in createAnyOneOf

* Use type as schemaName instead of format

* Fix how schemaName is derived for some additionalProperties

* Fix arrow rendering for tab components

---------

Co-authored-by: Bryan <[email protected]>

Author: sserrata

packages/docusaurus-plugin-openapi-docs/src/markdown/createRequestSchema.ts

@@ -147,12 +147,21 @@ function ApiTabsComponent(props) {
   const [showTabArrows, setShowTabArrows] = useState(false);
 
   useEffect(() => {
-    const tabOffsetWidth = tabItemListContainerRef.current.offsetWidth;
-    const tabScrollWidth = tabItemListContainerRef.current.scrollWidth;
+    const resizeObserver = new ResizeObserver((entries) => {
+      for (let entry of entries) {
+        if (entry.target.offsetWidth < entry.target.scrollWidth) {
+          setShowTabArrows(true);
+        } else {
+          setShowTabArrows(false);
+        }
+      }
+    });
 
-    if (tabOffsetWidth < tabScrollWidth) {
-      setShowTabArrows(true);
-    }
+    resizeObserver.observe(tabItemListContainerRef.current);
+
+    return () => {
+      resizeObserver.disconnect();
+    };
   }, []);
 
   const handleRightClick = () => {

packages/docusaurus-plugin-openapi-docs/src/markdown/createResponseSchema.ts

@@ -147,12 +147,21 @@ function DiscriminatorTabsComponent(props) {
   const [showTabArrows, setShowTabArrows] = useState(false);
 
   useEffect(() => {
-    const tabOffsetWidth = tabItemListContainerRef.current.offsetWidth;
-    const tabScrollWidth = tabItemListContainerRef.current.scrollWidth;
+    const resizeObserver = new ResizeObserver((entries) => {
+      for (let entry of entries) {
+        if (entry.target.offsetWidth < entry.target.scrollWidth) {
+          setShowTabArrows(true);
+        } else {
+          setShowTabArrows(false);
+        }
+      }
+    });
 
-    if (tabOffsetWidth < tabScrollWidth) {
-      setShowTabArrows(true);
-    }
+    resizeObserver.observe(tabItemListContainerRef.current);
+
+    return () => {
+      resizeObserver.disconnect();
+    };
   }, []);
 
   const handleRightClick = () => {
@@ -164,7 +173,7 @@ function DiscriminatorTabsComponent(props) {
   };
 
   return (
-    <div className="tabs__container">
+    <div className={clsx("tabs__container", "discriminatorTabs")}>
       <div className={styles.discriminatorTabsTopSection}>
         <div className={clsx(styles.discriminatorTabsContainer)}>
           {showTabArrows && (

packages/docusaurus-theme-openapi-docs/src/theme/ApiTabs/index.js

@@ -32,9 +32,13 @@
 }
 
 /* Open API Schema Tabs */
+.discriminatorTabs {
+  margin-left: -20px !important;
+}
+
 .discriminatorTabsTopSection {
   margin-top: 1rem;
-  margin-left: 0.9rem;
+  margin-left: 1rem;
   display: flex;
   justify-content: space-between;
   align-items: center;

packages/docusaurus-theme-openapi-docs/src/theme/DiscriminatorTabs/index.js

@@ -173,12 +173,21 @@ function MimeTabsComponent(props) {
   const [showTabArrows, setShowTabArrows] = useState(false);
 
   useEffect(() => {
-    const tabOffsetWidth = tabItemListContainerRef.current.offsetWidth;
-    const tabScrollWidth = tabItemListContainerRef.current.scrollWidth;
+    const resizeObserver = new ResizeObserver((entries) => {
+      for (let entry of entries) {
+        if (entry.target.offsetWidth < entry.target.scrollWidth) {
+          setShowTabArrows(true);
+        } else {
+          setShowTabArrows(false);
+        }
+      }
+    });
 
-    if (tabOffsetWidth < tabScrollWidth) {
-      setShowTabArrows(true);
-    }
+    resizeObserver.observe(tabItemListContainerRef.current);
+
+    return () => {
+      resizeObserver.disconnect();
+    };
   }, []);
 
   const handleRightClick = () => {
@@ -200,7 +209,7 @@ function MimeTabsComponent(props) {
               onClick={handleLeftClick}
             />
           )}
-          <ul
+          <div
             ref={tabItemListContainerRef}
             role="tablist"
             aria-orientation="horizontal"
@@ -215,7 +224,7 @@ function MimeTabsComponent(props) {
           >
             {values.map(({ value, label, attributes }) => {
               return (
-                <li
+                <div
                   role="tab"
                   tabIndex={selectedValue === value ? 0 : -1}
                   aria-selected={selectedValue === value}
@@ -238,10 +247,10 @@ function MimeTabsComponent(props) {
                     className={clsx(styles.mimeTabDot, mimeTabDotStyle)}
                   /> */}
                   {label ?? value}
-                </li>
+                </div>
               );
             })}
-          </ul>
+          </div>
           {showTabArrows && (
             <button
               className={clsx(styles.tabArrow, styles.tabArrowRight)}

packages/docusaurus-theme-openapi-docs/src/theme/DiscriminatorTabs/styles.module.css

@@ -119,7 +119,7 @@ function ParamsItem({
   });
 
   return (
-    <li className={styles.paramsItem}>
+    <div className={styles.paramsItem}>
       <strong>{name}</strong>
       {renderSchemaName}
       {renderSchemaRequired}
@@ -128,7 +128,7 @@ function ParamsItem({
       {renderDescription}
       {renderExample}
       {renderExamples}
-    </li>
+    </div>
   );
 }
 

packages/docusaurus-theme-openapi-docs/src/theme/MimeTabs/index.js

@@ -28,6 +28,7 @@ function SchemaItem({
   required,
   schemaName,
   schema,
+  discriminator,
 }) {
   let deprecated;
   let schemaDescription;
@@ -99,13 +100,14 @@ function SchemaItem({
       {renderQualifierMessage}
       {renderDefaultValue}
       {renderSchemaDescription}
+      {collapsibleSchemaContent ?? collapsibleSchemaContent}
     </div>
   );
 
   return (
-    <li className={styles.schemaItem}>
+    <div className={styles.schemaItem}>
       {collapsible ? collapsibleSchemaContent : schemaContent}
-    </li>
+    </div>
   );
 }
 

packages/docusaurus-theme-openapi-docs/src/theme/ParamsItem/index.js

@@ -182,7 +182,7 @@ function SchemaTabsComponent(props) {
               onClick={handleLeftClick}
             />
           )}
-          <ul
+          <div
             ref={tabItemListContainerRef}
             role="tablist"
             aria-orientation="horizontal"
@@ -197,7 +197,7 @@ function SchemaTabsComponent(props) {
           >
             {values.map(({ value, label, attributes }) => {
               return (
-                <li
+                <div
                   role="tab"
                   tabIndex={selectedValue === value ? 0 : -1}
                   aria-selected={selectedValue === value}
@@ -219,10 +219,10 @@ function SchemaTabsComponent(props) {
                   <span className={styles.schemaTabLabel}>
                     {label ?? value}
                   </span>
-                </li>
+                </div>
               );
             })}
-          </ul>
+          </div>
           {showTabArrows && (
             <button
               className={clsx(styles.tabArrow, styles.tabArrowRight)}

packages/docusaurus-theme-openapi-docs/src/theme/SchemaItem/index.js

@@ -217,6 +217,10 @@
   padding-left: 0 !important;
 }
 
+.discriminatorTabs {
+  margin-left: -20px;
+}
+
 .schemaItem:hover {
   background-color: var(--ifm-menu-color-background-active);
 }