@salesforcedevs/docs-components 1.3.109 → 1.3.110

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/docs-components",
-    "version": "1.3.109",
+    "version": "1.3.110",
     "description": "Docs Lightning web components for DSC",
     "license": "MIT",
     "main": "index.js",
@@ -24,5 +24,5 @@
         "@types/lodash.orderby": "^4.6.7",
         "@types/lodash.uniqby": "^4.7.7"
     },
-    "gitHead": "dc6143d85c8352cce4abf6c8d5c96b79c5bcfce2"
+    "gitHead": "fe501f7ff16c070a2afe4de0314651ede0a6f254"
 }

package/src/modules/doc/contentLayout/contentLayout.ts

@@ -149,6 +149,11 @@ export default class ContentLayout extends LightningElement {
             this.attachInteractionObserver,
             OBSERVER_ATTACH_WAIT_TIME
         );
+
+        this.adjustNavPosition();
+        window.addEventListener("scroll", this.adjustNavPosition);
+        window.addEventListener("resize", this.adjustNavPosition);
+
         if (!this.hasRendered) {
             this.hasRendered = true;
             this.restoreScroll();
@@ -161,6 +166,8 @@ export default class ContentLayout extends LightningElement {
             "highlightedtermchange",
             this.updateHighlighted
         );
+        window.removeEventListener("scroll", this.adjustNavPosition);
+        window.removeEventListener("resize", this.adjustNavPosition);
         this.searchSyncer.dispose();
         this.clearRenderObserverTimer();
 
@@ -178,6 +185,61 @@ export default class ContentLayout extends LightningElement {
         }
     };
 
+    /* 
+        This is a workaround for the global nav sticky header being decoupled from the doc header & doc phase.
+        We have to account for the global nav changing height due to animations.
+    */
+    adjustNavPosition = () => {
+        const sidebarType = this.useOldSidebar
+            ? "dx-sidebar-old"
+            : "dx-sidebar";
+        const sidebarEl = this.template.querySelector(sidebarType);
+        const globalNavEl = document.querySelector(
+            "hgf-c360nav"
+        ) as HTMLElement;
+        const contextNavEl = document.querySelector(
+            "hgf-c360contextnav"
+        ) as HTMLElement;
+        const docHeaderEl = document.querySelector(
+            ".sticky-doc-header"
+        ) as HTMLElement;
+        const docPhaseEl = document.querySelector("doc-phase") as HTMLElement;
+
+        if (!sidebarEl || !globalNavEl || !contextNavEl || !docHeaderEl) {
+            console.warn("One or more required elements are missing.");
+            return;
+        }
+
+        // sync with the browser to account for any reflows that may have happened
+        requestAnimationFrame(() => {
+            const globalNavHeight =
+                globalNavEl.offsetHeight + contextNavEl.offsetHeight;
+            const docHeaderHeight = docHeaderEl.offsetHeight;
+            sidebarEl.style.setProperty(
+                "--dx-c-content-sidebar-sticky-top",
+                `${globalNavHeight + docHeaderHeight}px`
+            );
+            docHeaderEl.style.setProperty(
+                "--dx-g-global-header-height",
+                `${globalNavHeight}px`
+            );
+
+            // If doc phase element exists, we need to account for its sticky position. Mobile should include the sidebar height (since it becomes sticky aswell).
+            if (docPhaseEl) {
+                docPhaseEl.style.setProperty(
+                    "--doc-c-phase-top",
+                    `${
+                        window.innerWidth < 769
+                            ? globalNavHeight +
+                              docHeaderHeight +
+                              sidebarEl.offsetHeight
+                            : globalNavHeight + docHeaderHeight
+                    }px`
+                );
+            }
+        });
+    };
+
     updateHighlighted = (event: Event): void =>
         highlightTerms(
             this.querySelectorAll(HIGHLIGHTABLE_SELECTOR),

package/src/modules/doc/header/header.css

@@ -84,10 +84,10 @@ header:not(.has-brand) > .header_l2 {
     }
 
     .header_l2_group-title {
-        height: var(--dx-g-doc-header-main-nav-height);
         margin-right: 0;
         padding: var(--dx-g-spacing-smd)
             var(--dx-g-global-header-padding-horizontal);
+        min-height: var(--dx-g-doc-header-main-nav-height);
     }
 
     .header_l2_group-title .header_lang-dropdown {

package/src/modules/doc/header/header.ts

@@ -8,7 +8,7 @@ import { track } from "dxUtils/analytics";
 
 const TABLET_MATCH = "980px";
 const MOBILE_MATCH = "880px";
-const SMALL_MOBILE_MATCH = "740px";
+const SMALL_MOBILE_MATCH = "768px";
 
 export default class Header extends HeaderBase {
     @api langValuePath: string = "id"; // allows to override how language property is interpreted, follows valuePath dropdown api.

package/src/modules/doc/xmlContent/xmlContent.ts

@@ -155,7 +155,29 @@ export default class DocXmlContent extends LightningElementWithState<{
                 ));
 
         if (anchorEl) {
-            anchorEl.scrollIntoView();
+            const globalNavHeader = document.querySelector(
+                ".global-nav-container"
+            ) as HTMLElement;
+            const docHeader = document.querySelector(
+                "doc-header"
+            ) as HTMLElement;
+            const headerHeight = globalNavHeader.offsetHeight;
+            const docHeaderHeight = docHeader.offsetHeight;
+            const rect = anchorEl.getBoundingClientRect();
+
+            // Calculate the scroll position required to bring the element into view
+            const scrollTop =
+                window.pageYOffset || document.documentElement.scrollTop;
+            const scrollX = rect.left + window.pageXOffset;
+            const scrollY =
+                rect.top + scrollTop - (headerHeight + docHeaderHeight); // subtract the header height from the top position
+
+            // Scroll to the calculated position
+            window.scrollTo({
+                top: scrollY,
+                left: scrollX
+            });
+
             this.setState({ internalLinkClicked: false });
         }