@salesforcedevs/docs-components 1.20.18-redocly3 → 1.21.1-redocly1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/docs-components",
-    "version": "1.20.18-redocly3",
+    "version": "1.21.1-redocly1",
     "description": "Docs Lightning web components for DSC",
     "license": "MIT",
     "main": "index.js",

package/src/modules/doc/componentPlayground/componentPlayground.css

@@ -23,13 +23,6 @@ iframe {
     height: 606px;
     min-height: var(--playground-iframe-min-height);
     max-height: var(--playground-iframe-max-height);
-    transition: height 0.3s ease, min-height 0.3s ease;
-}
-
-@media (prefers-reduced-motion: reduce) {
-    iframe {
-        transition: none;
-    }
 }
 
 .playground-container {

package/src/modules/doc/redocReference/redocReference.ts

@@ -4,6 +4,7 @@ import DocPhase from "doc/phase";
 import DxFooter from "dx/footer";
 import SprigSurvey from "doc/sprigSurvey";
 import { throttle } from "throttle-debounce";
+import { pollUntil } from "dxUtils/async";
 
 declare global {
     interface Window {
@@ -33,6 +34,8 @@ export default class RedocReference extends LightningElement {
     private _parentDocPhaseInfo: string | null = null;
     private redocInitialized = false;
 
+    private docHeaderElement: Element | null = null;
+
     showError = false;
 
     @api
@@ -85,6 +88,35 @@ export default class RedocReference extends LightningElement {
         this._parentDocPhaseInfo = docPhaseInfo;
     }
 
+    private getGlobalCSSVariableValue(variableName: string): number {
+        const value = getComputedStyle(
+            document.documentElement
+        ).getPropertyValue(variableName);
+        return parseInt(value, 10) || 0;
+    }
+
+    private getGlobalHeaderHeight(): number {
+        /*
+         ** Since we could not use --dx-g-global-header-height as getPropertyValue returns a calc expression,
+         ** we are using the respective CSS variables to calculate the height.
+         */
+        const rowHeight = this.getGlobalCSSVariableValue(
+            "--dx-g-global-header-nav-row-height"
+        );
+        const rowCount = this.getGlobalCSSVariableValue(
+            "--dx-g-global-header-nav-row-count"
+        );
+        return rowHeight * rowCount;
+    }
+
+    private getDocHeaderHeight(): number {
+        if (!this.docHeaderElement) {
+            this.docHeaderElement =
+                document.querySelector(".sticky-doc-header");
+        }
+        return this.docHeaderElement?.getBoundingClientRect().height || 0;
+    }
+
     private handleLayoutChange = () => {
         requestAnimationFrame(() => {
             const redocContainer = this.getRedocContainer();
@@ -92,50 +124,15 @@ export default class RedocReference extends LightningElement {
                 return;
             }
 
-            const globalNavElement = document.querySelector("hgf-c360nav");
-            const contextNavElement =
-                document.querySelector("hgf-c360contextnav");
-            const docHeaderElement =
-                document.querySelector(".sticky-doc-header");
-
-            const globalNavHeight =
-                globalNavElement?.getBoundingClientRect().height || 0;
-            const contextNavHeight =
-                contextNavElement?.getBoundingClientRect().height || 0;
-            const docHeaderHeight =
-                docHeaderElement?.getBoundingClientRect().height || 0;
-
-            const calculatedTopValue = `${
-                globalNavHeight + contextNavHeight + docHeaderHeight
-            }px`;
+            const globalNavHeight = this.getGlobalHeaderHeight();
+            const docHeaderHeight = this.getDocHeaderHeight();
+            const calculatedTopValue = `${globalNavHeight + docHeaderHeight}px`;
 
             // Set updated top value for the sidebar and doc phase
             this.template.host.style.setProperty(
                 "--doc-c-redoc-sidebar-top",
                 calculatedTopValue
             );
-
-            // Update thirdColumnContainer bottom positioning
-            const footer = redocContainer.querySelector(
-                ".redoc-wrap .api-content dx-footer"
-            ) as HTMLElement;
-            const thirdColumnContainer = redocContainer.querySelector(
-                ".redoc-wrap > div:last-child"
-            ) as HTMLElement;
-
-            if (thirdColumnContainer && footer) {
-                const footerHeight = footer.getBoundingClientRect().height || 0;
-                const footerMarginTop = parseInt(
-                    getComputedStyle(this.template.host).getPropertyValue(
-                        "--dx-footer-margin-top"
-                    ) || "142",
-                    10
-                );
-                thirdColumnContainer.style.setProperty(
-                    "bottom",
-                    `${footerHeight + footerMarginTop}px`
-                );
-            }
         });
     };
 
@@ -155,10 +152,10 @@ export default class RedocReference extends LightningElement {
     }
 
     private getSelectedReference(): ReferenceItem | null {
-        return this._referenceConfig?.refList?.length
-            ? this._referenceConfig.refList.find((ref) => ref.isSelected) ||
-                  this._referenceConfig.refList[0]
-            : null;
+        return (
+            this._referenceConfig?.refList?.find((ref) => ref.isSelected) ||
+            this._referenceConfig?.refList?.[0]
+        );
     }
 
     private getRedocContainer(): HTMLElement | null {
@@ -191,24 +188,24 @@ export default class RedocReference extends LightningElement {
                 const specUrl = selectedRef.source;
                 const redocContainer = this.getRedocContainer();
                 if (specUrl && redocContainer) {
-                    try {
-                        window.Redoc.init(
-                            specUrl,
-                            {
-                                expandResponses: "200,400"
-                            },
-                            redocContainer,
-                            () => {
+                    window.Redoc.init(
+                        specUrl,
+                        {
+                            expandResponses: "200,400"
+                        },
+                        redocContainer,
+                        (error: any) => {
+                            if (error) {
+                                this.showError = true;
+                                console.error(
+                                    "Failed to show Reference UI using Redoc: ",
+                                    error
+                                );
+                            } else {
                                 this.insertCustomLayoutElements();
                             }
-                        );
-                    } catch (error) {
-                        this.showError = true;
-                        console.error(
-                            "Failed to show Reference UI using Redoc:",
-                            error
-                        );
-                    }
+                        }
+                    );
                 } else {
                     this.showError = true;
                 }
@@ -219,45 +216,18 @@ export default class RedocReference extends LightningElement {
         }
     }
 
-    /**
-     * Waits until a condition is ready/satisfied within a timeout period
-     * @param readinessCheck - Function that returns truthy when condition is satisfied
-     * @param timeoutErrorMessage - Error message if timeout occurs
-     * @param maxWaitTime - Maximum time to wait in milliseconds
-     */
-    private waitUntilReady(
-        readinessCheck: () => boolean | HTMLElement | null,
-        timeoutErrorMessage: string,
-        maxWaitTime = ELEMENT_TIMEOUT
-    ): Promise<void> {
-        return new Promise((resolve, reject) => {
-            const pollingStartTime = Date.now();
-
-            const performReadinessCheck = () => {
-                if (readinessCheck()) {
-                    resolve();
-                    return;
-                }
-
-                const elapsedTime = Date.now() - pollingStartTime;
-                if (elapsedTime > maxWaitTime) {
-                    reject(new Error(timeoutErrorMessage));
-                    return;
-                }
-
-                setTimeout(performReadinessCheck, ELEMENT_CHECK_INTERVAL);
-            };
-
-            performReadinessCheck();
-        });
-    }
-
-    private waitForRedoc(timeout = ELEMENT_TIMEOUT): Promise<void> {
-        return this.waitUntilReady(
+    private async waitForRedoc(timeout = ELEMENT_TIMEOUT): Promise<void> {
+        const success = await pollUntil(
             () => !!window.Redoc,
-            "Redoc library failed to load within timeout period",
+            ELEMENT_CHECK_INTERVAL,
             timeout
         );
+
+        if (!success) {
+            throw new Error(
+                "Redoc library failed to load within timeout period"
+            );
+        }
     }
 
     private async insertCustomLayoutElements(): Promise<void> {
@@ -280,6 +250,12 @@ export default class RedocReference extends LightningElement {
                 }
 
                 this.insertFooter(apiContentDiv);
+
+                // Wait for footer to be rendered before updating styles
+                requestAnimationFrame(() => {
+                    // Update third column bottom position to avoid footer overlap.
+                    this.updateRedocThirdColumnStyle(redocContainer);
+                });
             }
         } catch (error) {
             this.showError = true;
@@ -290,10 +266,18 @@ export default class RedocReference extends LightningElement {
     private async waitForApiContent(
         container: HTMLElement
     ): Promise<HTMLElement> {
-        await this.waitUntilReady(
-            () => container.querySelector<HTMLElement>(".api-content"),
-            "Redoc API content element not found within timeout period"
+        const success = await pollUntil(
+            () => !!container.querySelector(".api-content"),
+            ELEMENT_CHECK_INTERVAL,
+            ELEMENT_TIMEOUT
         );
+
+        if (!success) {
+            throw new Error(
+                "Redoc API content element not found within timeout period"
+            );
+        }
+
         return container.querySelector<HTMLElement>(".api-content")!;
     }
 
@@ -324,4 +308,35 @@ export default class RedocReference extends LightningElement {
         wrapper.appendChild(feedbackElement);
         container.appendChild(wrapper);
     }
+
+    private updateRedocThirdColumnStyle(redocContainer: HTMLElement): void {
+        const footer = redocContainer.querySelector(
+            ".redoc-wrap .api-content dx-footer"
+        ) as HTMLElement;
+        const thirdColumnContainer = redocContainer.querySelector(
+            ".redoc-wrap > div:last-child"
+        ) as HTMLElement;
+
+        if (!thirdColumnContainer || !footer) {
+            console.warn(
+                !thirdColumnContainer
+                    ? "Redoc Third column container not found"
+                    : "Footer not found in DOM, skipping third column styling"
+            );
+            return;
+        }
+
+        const footerHeight = footer.getBoundingClientRect().height || 0;
+        const footerMarginTop = parseInt(
+            getComputedStyle(this.template.host).getPropertyValue(
+                "--dx-footer-margin-top"
+            ),
+            10
+        );
+
+        thirdColumnContainer.style.setProperty(
+            "bottom",
+            `${footerHeight + footerMarginTop}px`
+        );
+    }
 }