docusaurus-theme-openapi-docs 0.0.0-845 → 0.0.0-852

package/lib/theme/ApiExplorer/CodeTabs/index.js

@@ -72,18 +72,29 @@ function TabList({
   tabValues,
 }) {
   const tabRefs = (0, react_1.useRef)([]);
+  const tabsScrollContainerRef = (0, react_1.useRef)();
   const { blockElementScrollPositionUntilNextRender } = (0,
   internal_1.useScrollPositionBlocker)();
   (0, react_1.useEffect)(() => {
     const activeTab = tabRefs.current.find(
       (tab) => tab?.getAttribute("aria-selected") === "true"
     );
-    if (activeTab) {
-      activeTab.scrollIntoView({
-        behavior: "auto",
-        block: "center",
-        inline: "start",
-      });
+    if (activeTab && tabsScrollContainerRef.current) {
+      const container = tabsScrollContainerRef.current;
+      const containerRect = container.getBoundingClientRect();
+      const activeTabRect = activeTab.getBoundingClientRect();
+      // Calculate the distance to scroll to align active tab to the left
+      const glowOffset = 3;
+      const scrollOffset =
+        activeTabRect.left -
+        containerRect.left +
+        container.scrollLeft -
+        glowOffset;
+      // Check if the active tab is not already at the left position
+      if (Math.abs(scrollOffset - container.scrollLeft) > 4) {
+        // Adjust the scroll of the container
+        container.scrollLeft = scrollOffset;
+      }
     }
   }, []);
   const handleTabChange = (event) => {
@@ -155,6 +166,7 @@ function TabList({
         },
         className
       ),
+      ref: tabsScrollContainerRef,
     },
     tabValues.map(({ value, label, attributes }) =>
       react_1.default.createElement(

package/lib/theme/SchemaItem/index.js

@@ -51,6 +51,7 @@ function SchemaItem(props) {
   let deprecated;
   let schemaDescription;
   let defaultValue;
+  let example;
   let nullable;
   let enumDescriptions = [];
   if (schema) {
@@ -58,6 +59,7 @@ function SchemaItem(props) {
     schemaDescription = schema.description;
     enumDescriptions = transformEnumDescriptions(schema["x-enumDescriptions"]);
     defaultValue = schema.default;
+    example = schema.example;
     nullable = schema.nullable;
   }
   const renderRequired = (0, utils_1.guard)(
@@ -167,6 +169,33 @@ function SchemaItem(props) {
     }
     return undefined;
   }
+  function renderExample() {
+    if (example !== undefined) {
+      if (typeof example === "string") {
+        return react_1.default.createElement(
+          "div",
+          null,
+          react_1.default.createElement("strong", null, "Example: "),
+          react_1.default.createElement(
+            "span",
+            null,
+            react_1.default.createElement("code", null, example)
+          )
+        );
+      }
+      return react_1.default.createElement(
+        "div",
+        null,
+        react_1.default.createElement("strong", null, "Example: "),
+        react_1.default.createElement(
+          "span",
+          null,
+          react_1.default.createElement("code", null, JSON.stringify(example))
+        )
+      );
+    }
+    return undefined;
+  }
   const schemaContent = react_1.default.createElement(
     "div",
     null,
@@ -200,6 +229,7 @@ function SchemaItem(props) {
     renderEnumDescriptions,
     renderQualifierMessage,
     renderDefaultValue(),
+    renderExample(),
     collapsibleSchemaContent ?? collapsibleSchemaContent
   );
   return react_1.default.createElement(

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "docusaurus-theme-openapi-docs",
   "description": "OpenAPI theme for Docusaurus.",
-  "version": "0.0.0-845",
+  "version": "0.0.0-852",
   "license": "MIT",
   "keywords": [
     "openapi",
@@ -42,7 +42,7 @@
     "clsx": "^1.1.1",
     "copy-text-to-clipboard": "^3.1.0",
     "crypto-js": "^4.1.1",
-    "docusaurus-plugin-openapi-docs": "0.0.0-845",
+    "docusaurus-plugin-openapi-docs": "0.0.0-852",
     "docusaurus-plugin-sass": "^0.2.3",
     "file-saver": "^2.0.5",
     "lodash": "^4.17.20",
@@ -70,5 +70,5 @@
   "engines": {
     "node": ">=14"
   },
-  "gitHead": "ded3ee63c094b99f9b194d6553698bc8bb440e17"
+  "gitHead": "a352f9c4ce4e9fb46044d7cba30c132aaa81518f"
 }

package/src/theme/ApiExplorer/CodeTabs/index.tsx

@@ -44,6 +44,7 @@ function TabList({
   tabValues,
 }: CodeTabsProps & ReturnType<typeof useTabs>) {
   const tabRefs = useRef<(HTMLLIElement | null)[]>([]);
+  const tabsScrollContainerRef = useRef<any>();
   const { blockElementScrollPositionUntilNextRender } =
     useScrollPositionBlocker();
 
@@ -51,12 +52,26 @@ function TabList({
     const activeTab = tabRefs.current.find(
       (tab) => tab?.getAttribute("aria-selected") === "true"
     );
-    if (activeTab) {
-      activeTab.scrollIntoView({
-        behavior: "auto",
-        block: "center",
-        inline: "start",
-      });
+
+    if (activeTab && tabsScrollContainerRef.current) {
+      const container = tabsScrollContainerRef.current;
+      const containerRect = container.getBoundingClientRect();
+      const activeTabRect = activeTab.getBoundingClientRect();
+
+      // Calculate the distance to scroll to align active tab to the left
+      const glowOffset = 3;
+      const scrollOffset =
+        activeTabRect.left -
+        containerRect.left +
+        container.scrollLeft -
+        glowOffset;
+
+      // Check if the active tab is not already at the left position
+
+      if (Math.abs(scrollOffset - container.scrollLeft) > 4) {
+        // Adjust the scroll of the container
+        container.scrollLeft = scrollOffset;
+      }
     }
   }, []);
 
@@ -139,6 +154,7 @@ function TabList({
         },
         className
       )}
+      ref={tabsScrollContainerRef}
     >
       {tabValues.map(({ value, label, attributes }) => (
         <li

package/src/theme/SchemaItem/index.tsx

@@ -66,6 +66,7 @@ export default function SchemaItem(props: Props) {
   let deprecated;
   let schemaDescription;
   let defaultValue: string | undefined;
+  let example: string | undefined;
   let nullable;
   let enumDescriptions: [string, string][] = [];
 
@@ -74,6 +75,7 @@ export default function SchemaItem(props: Props) {
     schemaDescription = schema.description;
     enumDescriptions = transformEnumDescriptions(schema["x-enumDescriptions"]);
     defaultValue = schema.default;
+    example = schema.example;
     nullable = schema.nullable;
   }
 
@@ -157,6 +159,30 @@ export default function SchemaItem(props: Props) {
     return undefined;
   }
 
+  function renderExample() {
+    if (example !== undefined) {
+      if (typeof example === "string") {
+        return (
+          <div>
+            <strong>Example: </strong>
+            <span>
+              <code>{example}</code>
+            </span>
+          </div>
+        );
+      }
+      return (
+        <div>
+          <strong>Example: </strong>
+          <span>
+            <code>{JSON.stringify(example)}</code>
+          </span>
+        </div>
+      );
+    }
+    return undefined;
+  }
+
   const schemaContent = (
     <div>
       <span className="openapi-schema__container">
@@ -179,6 +205,7 @@ export default function SchemaItem(props: Props) {
       {renderEnumDescriptions}
       {renderQualifierMessage}
       {renderDefaultValue()}
+      {renderExample()}
       {collapsibleSchemaContent ?? collapsibleSchemaContent}
     </div>
   );