@salesforcedevs/docs-components - npm Package Compare versions

Comparing version 1.3.325-rnbtab-alpha to 1.3.325-rnbtab-alpha1

package.json

 {
     "name": "@salesforcedevs/docs-components",
-    "version": "1.3.325-rnbtab-alpha",
+    "version": "1.3.325-rnbtab-alpha1",
     "description": "Docs Lightning web components for DSC",
@@ -5,0 +5,0 @@ "license": "MIT",

src/modules/doc/contentLayout/contentLayout.ts

@@ -131,12 +131,9 @@ /* eslint-disable @lwc/lwc/no-document-query */
             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;
                 }
@@ -150,62 +147,20 @@ }
         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++;
-                }
+                });
             }
@@ -265,6 +220,36 @@ }
             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 {
@@ -445,3 +430,8 @@ /**
         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) {
@@ -448,0 +438,0 @@ // Add headingElements to intersectionObserver for highlighting respective RNB item when user scroll

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

258445

decreased by-0.23%

Lines of code

6632

decreased by-0.2%

No dependency changes