@salesforcedevs/docs-components 1.3.325-rnbtab-alpha → 1.3.325-rnbtab-alpha1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/docs-components",
-    "version": "1.3.325-rnbtab-alpha",
+    "version": "1.3.325-rnbtab-alpha1",
     "description": "Docs Lightning web components for DSC",
     "license": "MIT",
     "main": "index.js",

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

@@ -128,16 +128,13 @@ export default class ContentLayout extends LightningElement {
         let headingElements = document.querySelectorAll(TOC_HEADER_TAG);
         if (this.showTabBasedRNB) {
             const tabPanelListItem: any = this.selectTabElement();
-            // for (const tabPanelListItem of tabPanelListItems) {
-            if (tabPanelListItem.id === RNB_BY_TAB) {
-                const tabPanels =
-                    tabPanelListItem.querySelectorAll("dx-tab-panel");
-                for (const tabPanelItem of tabPanels) {
-                    if (tabPanelItem.active) {
-                        headingElements =
-                            tabPanelItem.querySelectorAll(TOC_HEADER_TAG);
-                        break;
-                    }
+            const tabPanels =
+                tabPanelListItem?.querySelectorAll("dx-tab-panel");
+            for (const tabPanelItem of tabPanels) {
+                if (tabPanelItem.active) {
+                    headingElements =
+                        tabPanelItem.querySelectorAll(TOC_HEADER_TAG);
+                    break;
                 }
             }
         }
@@ -146,66 +143,24 @@ export default class ContentLayout extends LightningElement {
 
     private updateURL() {
         const tabPanelListItem: any = this.selectTabElement();
-        if (tabPanelListItem?.id === RNB_BY_TAB) {
-            const tabPanelItems: any =
-                tabPanelListItem?.shadowRoot.querySelectorAll(
+        if (tabPanelListItem?.shadowRoot) {
+            const tabPanelItems =
+                tabPanelListItem.shadowRoot.querySelectorAll(
                     "dx-tab-panel-item"
                 );
             if (tabPanelItems) {
-                for (const tabPanelItem of tabPanelItems as any) {
+                tabPanelItems.forEach((tabPanelItem: any) => {
                     const tab = tabPanelItem.shadowRoot.querySelector("button");
-                    const url = new URL(window.location.href);
-                    const previousTabID = url.searchParams.get("type");
-                    const tabID = tab?.getAttribute("aria-label");
-                    if (
-                        tab?.getAttribute("aria-selected") === "true" &&
-                        previousTabID !== tabID
-                    ) {
-                        url.searchParams.set("type", tabID);
-                        url.hash = "";
-                        window.history.pushState({}, "", url.toString());
-                        break;
-                    }
-                }
-            }
-        }
-    }
-
-    private tabOnPageLoad() {
-        const url = new URL(window.location.href);
-        const previousTabID = url.searchParams.get("type");
-
-        if (!previousTabID) {
-            this.updateURL();
-        } else {
-            const tabPanelListItem: any = this.selectTabElement();
-            const tabPanelItems: any =
-                tabPanelListItem?.shadowRoot.querySelectorAll(
-                    "dx-tab-panel-item"
-                );
-            const tabPanels = tabPanelListItem.querySelectorAll("dx-tab-panel");
-            if (tabPanelItems) {
-                let tabIndex = 0;
-                for (const tabPanelItem of tabPanelItems as any) {
-                    const tab = tabPanelItem.shadowRoot.querySelector("button");
-                    const activeTab =
-                        tabPanels[tabIndex]?.shadowRoot.querySelector(
-                            ".tabpanel"
-                        );
-                    if (tab?.getAttribute("aria-label") === previousTabID) {
-                        if (activeTab) {
-                            activeTab.classList.add("tabpanel-active");
+                    if (tab?.getAttribute("aria-selected") === "true") {
+                        const tabID = tab?.getAttribute("aria-label");
+                        const url = new URL(window.location.href);
+                        if (url.searchParams.get("type") !== tabID) {
+                            url.searchParams.set("type", tabID);
+                            url.hash = "";
+                            window.history.pushState({}, "", url.toString());
                         }
-                        tab.active = true;
-                        this.initialIndex = tabIndex;
-                    } else {
-                        if (activeTab) {
-                            activeTab.classList.remove("tabpanel-active");
-                        }
-                        tab.active = false;
                     }
-                    tabIndex++;
-                }
+                });
             }
         }
     }
@@ -260,10 +215,40 @@ export default class ContentLayout extends LightningElement {
 
         if (this.showTabBasedRNB) {
             window.addEventListener("tabchanged", this.onTabChanged);
-            this.tabOnPageLoad();
+            this.restoreTabSelection();
         }
     }
 
+    private restoreTabSelection() {
+        const urlParams = new URLSearchParams(window.location.search);
+        const selectedTabId = urlParams.get("type");
+
+        if (selectedTabId) {
+            this.selectTabById(selectedTabId);
+        }
+    }
+
+    private selectTabById(tabId: string) {
+        requestAnimationFrame(() => {
+            const tabPanelListItem: any = this.selectTabElement();
+            if (tabPanelListItem?.shadowRoot) {
+                const tabPanelItems =
+                    tabPanelListItem.shadowRoot.querySelectorAll(
+                        "dx-tab-panel-item"
+                    );
+                if (tabPanelItems) {
+                    tabPanelItems.forEach((tabPanelItem: any) => {
+                        const tab =
+                            tabPanelItem.shadowRoot.querySelector("button");
+                        if (tab?.getAttribute("aria-label") === tabId) {
+                            tab?.click();
+                        }
+                    });
+                }
+            }
+        });
+    }
+
     renderedCallback(): void {
         /**
          * Note: We are adding timeout because chrome is optimizing and not triggering recent renderedCallback though elements reference is changed
@@ -439,7 +424,12 @@ export default class ContentLayout extends LightningElement {
 
         // Note: We are doing document.querySelectorAll as a quick fix as we are not getting heading elements reference this.querySelectorAll
         const headingElements = this.getHeadingElements();
-        this.updateURL();
+
+        // We only need to update URL in case of /docs and ignore if tabs are used anywhere else in DSC
+        if (this.showTabBasedRNB) {
+            this.updateURL();
+        }
+
         for (const headingElement of headingElements as any) {
             // Add headingElements to intersectionObserver for highlighting respective RNB item when user scroll
             const id = headingElement.getAttribute("id")!;