docusaurus-theme-openapi-docs 2.1.0 → 2.1.2

package/lib/markdown/utils.js

@@ -17,11 +17,11 @@ function create(tag, props) {
 }
 exports.create = create;
 function guard(value, cb) {
-    if (value === undefined || value === "") {
-        return "";
+    if (!!value || value === 0) {
+        const children = cb(value);
+        return render(children);
     }
-    const children = cb(value);
-    return render(children);
+    return "";
 }
 exports.guard = guard;
 function render(children) {

package/lib/markdown/utils.test.js

@@ -20,6 +20,10 @@ describe("guard", () => {
         });
         expect(actual).toBe("");
     });
+    it("should guard false booleans", () => {
+        const actual = (0, utils_1.guard)(false, (value) => `${value}`);
+        expect(actual).toBe("");
+    });
     it("should not guard strings", () => {
         const actual = (0, utils_1.guard)("hello", (value) => value);
         expect(actual).toBe("hello");
@@ -32,10 +36,6 @@ describe("guard", () => {
         const actual = (0, utils_1.guard)(0, (value) => `${value}`);
         expect(actual).toBe("0");
     });
-    it("should not guard false booleans", () => {
-        const actual = (0, utils_1.guard)(false, (value) => `${value}`);
-        expect(actual).toBe("false");
-    });
     it("should not guard true booleans", () => {
         const actual = (0, utils_1.guard)(true, (value) => `${value}`);
         expect(actual).toBe("true");

package/lib/theme/ApiTabs/index.js

@@ -67,11 +67,13 @@ function TabList({
   useEffect(() => {
     const resizeObserver = new ResizeObserver((entries) => {
       for (let entry of entries) {
-        if (entry.target.offsetWidth < entry.target.scrollWidth) {
-          setShowTabArrows(true);
-        } else {
-          setShowTabArrows(false);
-        }
+        requestAnimationFrame(() => {
+          if (entry.target.offsetWidth < entry.target.scrollWidth) {
+            setShowTabArrows(true);
+          } else {
+            setShowTabArrows(false);
+          }
+        });
       }
     });
 

package/lib/theme/DiscriminatorTabs/index.js

@@ -57,11 +57,13 @@ function TabList({ className, block, selectedValue, selectValue, tabValues }) {
   useEffect(() => {
     const resizeObserver = new ResizeObserver((entries) => {
       for (let entry of entries) {
-        if (entry.target.offsetWidth < entry.target.scrollWidth) {
-          setShowTabArrows(true);
-        } else {
-          setShowTabArrows(false);
-        }
+        requestAnimationFrame(() => {
+          if (entry.target.offsetWidth < entry.target.scrollWidth) {
+            setShowTabArrows(true);
+          } else {
+            setShowTabArrows(false);
+          }
+        });
       }
     });
 

package/lib/theme/MimeTabs/index.js

@@ -94,11 +94,13 @@ function TabList({
   useEffect(() => {
     const resizeObserver = new ResizeObserver((entries) => {
       for (let entry of entries) {
-        if (entry.target.offsetWidth < entry.target.scrollWidth) {
-          setShowTabArrows(true);
-        } else {
-          setShowTabArrows(false);
-        }
+        requestAnimationFrame(() => {
+          if (entry.target.offsetWidth < entry.target.scrollWidth) {
+            setShowTabArrows(true);
+          } else {
+            setShowTabArrows(false);
+          }
+        });
       }
     });
 

package/lib/theme/OperationTabs/index.js

@@ -60,11 +60,13 @@ function TabList({ className, block, selectedValue, selectValue, tabValues }) {
   useEffect(() => {
     const resizeObserver = new ResizeObserver((entries) => {
       for (let entry of entries) {
-        if (entry.target.offsetWidth < entry.target.scrollWidth) {
-          setShowTabArrows(true);
-        } else {
-          setShowTabArrows(false);
-        }
+        requestAnimationFrame(() => {
+          if (entry.target.offsetWidth < entry.target.scrollWidth) {
+            setShowTabArrows(true);
+          } else {
+            setShowTabArrows(false);
+          }
+        });
       }
     });
 

package/lib/theme/ParamsItem/index.js

@@ -11,6 +11,7 @@ import CodeBlock from "@theme/CodeBlock";
 import SchemaTabs from "@theme/SchemaTabs";
 import TabItem from "@theme/TabItem";
 /* eslint-disable import/no-extraneous-dependencies*/
+import clsx from "clsx";
 import { createDescription } from "docusaurus-theme-openapi-docs/lib/markdown/createDescription";
 /* eslint-disable import/no-extraneous-dependencies*/
 import {
@@ -26,7 +27,7 @@ import ReactMarkdown from "react-markdown";
 import rehypeRaw from "rehype-raw";
 
 function ParamsItem({
-  param: { description, example, examples, name, required, schema },
+  param: { description, example, examples, name, required, schema, deprecated },
 }) {
   if (!schema || !schema?.type) {
     schema = { type: "any" };
@@ -40,6 +41,10 @@ function ParamsItem({
     <span className="openapi-schema__required">required</span>
   ));
 
+  const renderDeprecated = guard(deprecated, () => (
+    <span className="openapi-schema__deprecated">deprecated</span>
+  ));
+
   const renderSchema = guard(getQualifierMessage(schema), (message) => (
     <div>
       <ReactMarkdown
@@ -119,10 +124,19 @@ function ParamsItem({
   return (
     <div className="openapi-params__list-item">
       <span className="openapi-schema__container">
-        <strong className="openapi-schema__property">{name}</strong>
+        <strong
+          className={clsx("openapi-schema__property", {
+            "openapi-schema__strikethrough": deprecated,
+          })}
+        >
+          {name}
+        </strong>
         {renderSchemaName}
-        {required && <span className="openapi-schema__divider"></span>}
+        {(required || deprecated) && (
+          <span className="openapi-schema__divider"></span>
+        )}
         {renderSchemaRequired}
+        {renderDeprecated}
       </span>
       {renderSchema}
       {renderDefaultValue}

package/lib/theme/SchemaItem/index.js

@@ -100,7 +100,7 @@ function SchemaItem({
           <span className="openapi-schema__divider"></span>
         )}
         {renderNullable}
-        {!deprecated && renderRequired}
+        {renderRequired}
         {renderDeprecated}
       </span>
       {renderQualifierMessage}

package/lib/theme/SchemaTabs/index.js

@@ -57,11 +57,13 @@ function TabList({ className, block, selectedValue, selectValue, tabValues }) {
   useEffect(() => {
     const resizeObserver = new ResizeObserver((entries) => {
       for (let entry of entries) {
-        if (entry.target.offsetWidth < entry.target.scrollWidth) {
-          setShowTabArrows(true);
-        } else {
-          setShowTabArrows(false);
-        }
+        requestAnimationFrame(() => {
+          if (entry.target.offsetWidth < entry.target.scrollWidth) {
+            setShowTabArrows(true);
+          } else {
+            setShowTabArrows(false);
+          }
+        });
       }
     });
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "docusaurus-theme-openapi-docs",
   "description": "OpenAPI theme for Docusaurus.",
-  "version": "2.1.0",
+  "version": "2.1.2",
   "license": "MIT",
   "keywords": [
     "openapi",
@@ -43,7 +43,7 @@
     "clsx": "^1.1.1",
     "copy-text-to-clipboard": "^3.1.0",
     "crypto-js": "^4.1.1",
-    "docusaurus-plugin-openapi-docs": "^2.1.0",
+    "docusaurus-plugin-openapi-docs": "^2.1.2",
     "docusaurus-plugin-sass": "^0.2.3",
     "file-saver": "^2.0.5",
     "lodash": "^4.17.20",
@@ -68,5 +68,5 @@
   "engines": {
     "node": ">=14"
   },
-  "gitHead": "9064dd22c8e18125f838fd88caba6364e5484b68"
+  "gitHead": "4bb7040ce39ebe38b2a2837ab0c6a8c477a9a546"
 }

package/src/markdown/utils.test.ts

@@ -22,6 +22,11 @@ describe("guard", () => {
     expect(actual).toBe("");
   });
 
+  it("should guard false booleans", () => {
+    const actual = guard(false, (value) => `${value}`);
+    expect(actual).toBe("");
+  });
+
   it("should not guard strings", () => {
     const actual = guard("hello", (value) => value);
     expect(actual).toBe("hello");
@@ -37,10 +42,6 @@ describe("guard", () => {
     expect(actual).toBe("0");
   });
 
-  it("should not guard false booleans", () => {
-    const actual = guard(false, (value) => `${value}`);
-    expect(actual).toBe("false");
-  });
   it("should not guard true booleans", () => {
     const actual = guard(true, (value) => `${value}`);
     expect(actual).toBe("true");

package/src/markdown/utils.ts

@@ -24,11 +24,11 @@ export function guard<T>(
   value: T | undefined | string,
   cb: (value: T) => Children
 ): string {
-  if (value === undefined || value === "") {
-    return "";
+  if (!!value || value === 0) {
+    const children = cb(value as T);
+    return render(children);
   }
-  const children = cb(value as T);
-  return render(children);
+  return "";
 }
 
 export function render(children: Children): string {

package/src/theme/ApiTabs/index.js

@@ -67,11 +67,13 @@ function TabList({
   useEffect(() => {
     const resizeObserver = new ResizeObserver((entries) => {
       for (let entry of entries) {
-        if (entry.target.offsetWidth < entry.target.scrollWidth) {
-          setShowTabArrows(true);
-        } else {
-          setShowTabArrows(false);
-        }
+        requestAnimationFrame(() => {
+          if (entry.target.offsetWidth < entry.target.scrollWidth) {
+            setShowTabArrows(true);
+          } else {
+            setShowTabArrows(false);
+          }
+        });
       }
     });
 

package/src/theme/DiscriminatorTabs/index.js

@@ -57,11 +57,13 @@ function TabList({ className, block, selectedValue, selectValue, tabValues }) {
   useEffect(() => {
     const resizeObserver = new ResizeObserver((entries) => {
       for (let entry of entries) {
-        if (entry.target.offsetWidth < entry.target.scrollWidth) {
-          setShowTabArrows(true);
-        } else {
-          setShowTabArrows(false);
-        }
+        requestAnimationFrame(() => {
+          if (entry.target.offsetWidth < entry.target.scrollWidth) {
+            setShowTabArrows(true);
+          } else {
+            setShowTabArrows(false);
+          }
+        });
       }
     });
 

package/src/theme/MimeTabs/index.js

@@ -94,11 +94,13 @@ function TabList({
   useEffect(() => {
     const resizeObserver = new ResizeObserver((entries) => {
       for (let entry of entries) {
-        if (entry.target.offsetWidth < entry.target.scrollWidth) {
-          setShowTabArrows(true);
-        } else {
-          setShowTabArrows(false);
-        }
+        requestAnimationFrame(() => {
+          if (entry.target.offsetWidth < entry.target.scrollWidth) {
+            setShowTabArrows(true);
+          } else {
+            setShowTabArrows(false);
+          }
+        });
       }
     });
 

package/src/theme/OperationTabs/index.js

@@ -60,11 +60,13 @@ function TabList({ className, block, selectedValue, selectValue, tabValues }) {
   useEffect(() => {
     const resizeObserver = new ResizeObserver((entries) => {
       for (let entry of entries) {
-        if (entry.target.offsetWidth < entry.target.scrollWidth) {
-          setShowTabArrows(true);
-        } else {
-          setShowTabArrows(false);
-        }
+        requestAnimationFrame(() => {
+          if (entry.target.offsetWidth < entry.target.scrollWidth) {
+            setShowTabArrows(true);
+          } else {
+            setShowTabArrows(false);
+          }
+        });
       }
     });
 

package/src/theme/ParamsItem/index.js

@@ -11,6 +11,7 @@ import CodeBlock from "@theme/CodeBlock";
 import SchemaTabs from "@theme/SchemaTabs";
 import TabItem from "@theme/TabItem";
 /* eslint-disable import/no-extraneous-dependencies*/
+import clsx from "clsx";
 import { createDescription } from "docusaurus-theme-openapi-docs/lib/markdown/createDescription";
 /* eslint-disable import/no-extraneous-dependencies*/
 import {
@@ -26,7 +27,7 @@ import ReactMarkdown from "react-markdown";
 import rehypeRaw from "rehype-raw";
 
 function ParamsItem({
-  param: { description, example, examples, name, required, schema },
+  param: { description, example, examples, name, required, schema, deprecated },
 }) {
   if (!schema || !schema?.type) {
     schema = { type: "any" };
@@ -40,6 +41,10 @@ function ParamsItem({
     <span className="openapi-schema__required">required</span>
   ));
 
+  const renderDeprecated = guard(deprecated, () => (
+    <span className="openapi-schema__deprecated">deprecated</span>
+  ));
+
   const renderSchema = guard(getQualifierMessage(schema), (message) => (
     <div>
       <ReactMarkdown
@@ -119,10 +124,19 @@ function ParamsItem({
   return (
     <div className="openapi-params__list-item">
       <span className="openapi-schema__container">
-        <strong className="openapi-schema__property">{name}</strong>
+        <strong
+          className={clsx("openapi-schema__property", {
+            "openapi-schema__strikethrough": deprecated,
+          })}
+        >
+          {name}
+        </strong>
         {renderSchemaName}
-        {required && <span className="openapi-schema__divider"></span>}
+        {(required || deprecated) && (
+          <span className="openapi-schema__divider"></span>
+        )}
         {renderSchemaRequired}
+        {renderDeprecated}
       </span>
       {renderSchema}
       {renderDefaultValue}

package/src/theme/SchemaItem/index.js

@@ -100,7 +100,7 @@ function SchemaItem({
           <span className="openapi-schema__divider"></span>
         )}
         {renderNullable}
-        {!deprecated && renderRequired}
+        {renderRequired}
         {renderDeprecated}
       </span>
       {renderQualifierMessage}

package/src/theme/SchemaTabs/index.js

@@ -57,11 +57,13 @@ function TabList({ className, block, selectedValue, selectValue, tabValues }) {
   useEffect(() => {
     const resizeObserver = new ResizeObserver((entries) => {
       for (let entry of entries) {
-        if (entry.target.offsetWidth < entry.target.scrollWidth) {
-          setShowTabArrows(true);
-        } else {
-          setShowTabArrows(false);
-        }
+        requestAnimationFrame(() => {
+          if (entry.target.offsetWidth < entry.target.scrollWidth) {
+            setShowTabArrows(true);
+          } else {
+            setShowTabArrows(false);
+          }
+        });
       }
     });