docusaurus-theme-openapi-docs 1.7.2 → 1.7.3

package/lib/theme/ApiTabs/index.js

@@ -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 = () => {

package/lib/theme/DiscriminatorTabs/index.js

@@ -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 && (

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

@@ -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;

package/lib/theme/MimeTabs/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)}

package/lib/theme/ParamsItem/index.js

@@ -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>
   );
 }
 

package/lib/theme/SchemaItem/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>
   );
 }
 

package/lib/theme/SchemaTabs/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)}

package/lib/theme/styles.css

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

package/lib-next/theme/ApiTabs/index.js

@@ -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 = () => {

package/lib-next/theme/DiscriminatorTabs/index.js

@@ -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 && (

package/lib-next/theme/DiscriminatorTabs/styles.module.css

@@ -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;

package/lib-next/theme/MimeTabs/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)}

package/lib-next/theme/ParamsItem/index.js

@@ -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>
   );
 }
 

package/lib-next/theme/SchemaItem/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>
   );
 }
 

package/lib-next/theme/SchemaTabs/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)}

package/lib-next/theme/styles.css

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "docusaurus-theme-openapi-docs",
   "description": "OpenAPI theme for Docusaurus.",
-  "version": "1.7.2",
+  "version": "1.7.3",
   "license": "MIT",
   "keywords": [
     "openapi",
@@ -51,7 +51,7 @@
     "buffer": "^6.0.3",
     "clsx": "^1.1.1",
     "crypto-js": "^4.1.1",
-    "docusaurus-plugin-openapi-docs": "^1.7.2",
+    "docusaurus-plugin-openapi-docs": "^1.7.3",
     "file-saver": "^2.0.5",
     "immer": "^9.0.7",
     "lodash": "^4.17.20",
@@ -74,5 +74,5 @@
   "engines": {
     "node": ">=14"
   },
-  "gitHead": "d6450052aff8a6fc691aef3d38bf835f4c70b1ef"
+  "gitHead": "b30ae6acf881863cb2422bce775f1d9fe6f0fcb6"
 }

package/src/theme/ApiTabs/index.js

@@ -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 = () => {

package/src/theme/DiscriminatorTabs/index.js

@@ -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 && (

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

@@ -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;

package/src/theme/MimeTabs/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)}

package/src/theme/ParamsItem/index.js

@@ -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>
   );
 }
 

package/src/theme/SchemaItem/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>
   );
 }
 

package/src/theme/SchemaTabs/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)}

package/src/theme/styles.css

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