docusaurus-theme-openapi-docs 3.0.0-beta.6 → 3.0.0-beta.8

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

@@ -108,11 +108,13 @@ function TabList({
   (0, react_1.useEffect)(() => {
     const resizeObserver = new ResizeObserver((entries) => {
       for (let entry of entries) {
-        if (entry.target.clientWidth < entry.target.scrollWidth) {
-          setShowTabArrows(true);
-        } else {
-          setShowTabArrows(false);
-        }
+        requestAnimationFrame(() => {
+          if (entry.target.clientWidth < entry.target.scrollWidth) {
+            setShowTabArrows(true);
+          } else {
+            setShowTabArrows(false);
+          }
+        });
       }
     });
     resizeObserver.observe(tabItemListContainerRef.current);

package/lib/theme/DiscriminatorTabs/index.js

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

package/lib/theme/MimeTabs/index.js

@@ -138,11 +138,13 @@ function TabList({
   (0, react_1.useEffect)(() => {
     const resizeObserver = new ResizeObserver((entries) => {
       for (let entry of entries) {
-        if (entry.target.clientWidth < entry.target.scrollWidth) {
-          setShowTabArrows(true);
-        } else {
-          setShowTabArrows(false);
-        }
+        requestAnimationFrame(() => {
+          if (entry.target.clientWidth < entry.target.scrollWidth) {
+            setShowTabArrows(true);
+          } else {
+            setShowTabArrows(false);
+          }
+        });
       }
     });
     resizeObserver.observe(tabItemListContainerRef.current);

package/lib/theme/OperationTabs/index.js

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

package/lib/theme/ParamsItem/index.d.ts

@@ -15,8 +15,9 @@ export interface Props {
         examples: Map<ExampleObject>;
         name: string;
         required: boolean;
+        deprecated: boolean;
         schema: any;
     };
 }
-declare function ParamsItem({ param: { description, example, examples, name, required, schema }, }: Props): React.JSX.Element;
+declare function ParamsItem({ param: { description, example, examples, name, required, schema, deprecated }, }: Props): React.JSX.Element;
 export default ParamsItem;

package/lib/theme/ParamsItem/index.js

@@ -15,13 +15,15 @@ const react_1 = __importDefault(require("react"));
 const CodeBlock_1 = __importDefault(require("@theme/CodeBlock"));
 const SchemaTabs_1 = __importDefault(require("@theme/SchemaTabs"));
 const TabItem_1 = __importDefault(require("@theme/TabItem"));
+/* eslint-disable import/no-extraneous-dependencies*/
+const clsx_1 = __importDefault(require("clsx"));
 const react_markdown_1 = __importDefault(require("react-markdown"));
 const rehype_raw_1 = __importDefault(require("rehype-raw"));
 const createDescription_1 = require("../../markdown/createDescription");
 const schema_1 = require("../../markdown/schema");
 const utils_1 = require("../../markdown/utils");
 function ParamsItem({
-  param: { description, example, examples, name, required, schema },
+  param: { description, example, examples, name, required, schema, deprecated },
 }) {
   if (!schema || !schema?.type) {
     schema = { type: "any" };
@@ -41,6 +43,13 @@ function ParamsItem({
       "required"
     )
   );
+  const renderDeprecated = (0, utils_1.guard)(deprecated, () =>
+    react_1.default.createElement(
+      "span",
+      { className: "openapi-schema__deprecated" },
+      "deprecated"
+    )
+  );
   const renderSchema = (0, utils_1.guard)(
     (0, schema_1.getQualifierMessage)(schema),
     (message) =>
@@ -161,15 +170,20 @@ function ParamsItem({
       { className: "openapi-schema__container" },
       react_1.default.createElement(
         "strong",
-        { className: "openapi-schema__property" },
+        {
+          className: (0, clsx_1.default)("openapi-schema__property", {
+            "openapi-schema__strikethrough": deprecated,
+          }),
+        },
         name
       ),
       renderSchemaName,
-      required &&
+      (required || deprecated) &&
         react_1.default.createElement("span", {
           className: "openapi-schema__divider",
         }),
-      renderSchemaRequired
+      renderSchemaRequired,
+      renderDeprecated
     ),
     renderSchema,
     renderDefaultValue,

package/lib/theme/SchemaItem/index.js

@@ -138,7 +138,7 @@ function SchemaItem({
           className: "openapi-schema__divider",
         }),
       renderNullable,
-      !deprecated && renderRequired,
+      renderRequired,
       renderDeprecated
     ),
     renderQualifierMessage,

package/lib/theme/SchemaTabs/index.js

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "docusaurus-theme-openapi-docs",
   "description": "OpenAPI theme for Docusaurus.",
-  "version": "3.0.0-beta.6",
+  "version": "3.0.0-beta.8",
   "license": "MIT",
   "keywords": [
     "openapi",
@@ -44,7 +44,7 @@
     "clsx": "^1.1.1",
     "copy-text-to-clipboard": "^3.1.0",
     "crypto-js": "^4.1.1",
-    "docusaurus-plugin-openapi-docs": "^3.0.0-beta.6",
+    "docusaurus-plugin-openapi-docs": "^3.0.0-beta.8",
     "docusaurus-plugin-sass": "^0.2.3",
     "file-saver": "^2.0.5",
     "lodash": "^4.17.20",
@@ -69,5 +69,5 @@
   "engines": {
     "node": ">=14"
   },
-  "gitHead": "e2334e1ceb562f3dc021f861bd16393ef343ba40"
+  "gitHead": "5877a91dbf3a6f75d4b13258fe5d1f578dd35637"
 }

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

@@ -26,11 +26,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.tsx

@@ -89,11 +89,13 @@ function TabList({
   useEffect(() => {
     const resizeObserver = new ResizeObserver((entries) => {
       for (let entry of entries) {
-        if (entry.target.clientWidth < entry.target.scrollWidth) {
-          setShowTabArrows(true);
-        } else {
-          setShowTabArrows(false);
-        }
+        requestAnimationFrame(() => {
+          if (entry.target.clientWidth < entry.target.scrollWidth) {
+            setShowTabArrows(true);
+          } else {
+            setShowTabArrows(false);
+          }
+        });
       }
     });
 
@@ -159,8 +161,8 @@ function TabList({
                 parseInt(value) >= 400
                   ? "danger"
                   : parseInt(value) >= 200 && parseInt(value) < 300
-                    ? "success"
-                    : "info",
+                  ? "success"
+                  : "info",
                 {
                   active: selectedValue === value,
                 }

package/src/theme/DiscriminatorTabs/index.tsx

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

package/src/theme/MimeTabs/index.tsx

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

package/src/theme/OperationTabs/index.tsx

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

package/src/theme/ParamsItem/index.tsx

@@ -10,6 +10,8 @@ import React from "react";
 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 ReactMarkdown from "react-markdown";
 import rehypeRaw from "rehype-raw";
 
@@ -35,12 +37,13 @@ export interface Props {
     examples: Map<ExampleObject>;
     name: string;
     required: boolean;
+    deprecated: boolean;
     schema: any;
   };
 }
 
 function ParamsItem({
-  param: { description, example, examples, name, required, schema },
+  param: { description, example, examples, name, required, schema, deprecated },
 }: Props) {
   if (!schema || !schema?.type) {
     schema = { type: "any" };
@@ -54,6 +57,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
@@ -134,10 +141,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.tsx

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

package/src/theme/SchemaTabs/index.tsx

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