@salesforcedevs/docs-components 1.3.103 → 1.3.104

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/docs-components",
-    "version": "1.3.103",
+    "version": "1.3.104",
     "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": "1595697b3a469a6a1723fdc4066617092739b112"
+    "gitHead": "ebf2666c47ab115c2a14383eb6961fb990fd77d3"
 }

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

@@ -77,6 +77,7 @@ export default class ContentLayout extends LightningElement {
     @track
     private _tocOptions: Array<unknown>;
 
+    private tocOptionIdsSet = new Set();
     private anchoredElements: AnchorMap = {};
     private lastScrollPosition: number;
     private observer?: IntersectionObserver;
@@ -220,14 +221,17 @@ export default class ContentLayout extends LightningElement {
     }
 
     onSlotChange(event: Event): void {
-        const slotElements = (event.target as HTMLSlotElement).assignedElements();
+        const slotElements = (
+            event.target as HTMLSlotElement
+        ).assignedElements();
 
         if (slotElements.length) {
             this.contentLoaded = true;
             const slotContentElement = slotElements[0];
-            const headingElements = slotContentElement.ownerDocument?.getElementsByTagName(
-                TOC_HEADER_TAG
-            );
+            const headingElements =
+                slotContentElement.ownerDocument?.getElementsByTagName(
+                    TOC_HEADER_TAG
+                );
 
             for (const headingElement of headingElements) {
                 // Sometimes elements hash is not being set when slot content is wrapped with div
@@ -239,13 +243,20 @@ export default class ContentLayout extends LightningElement {
             for (const headingElement of headingElements) {
                 headingElement.id = headingElement.hash;
 
-                // Update tocOptions from anchorTags
-                const tocItem = {
-                    anchor: `#${headingElement.hash}`,
-                    id: headingElement.id,
-                    label: headingElement.title
-                };
-                tocOptions.push(tocItem);
+                // Update tocOptions from anchorTags only for H2, consider default as 2 as per component
+                const headingAriaLevel =
+                    headingElement.attributes["aria-level"]?.nodeValue || "2";
+                const isH2 = headingAriaLevel === "2";
+
+                if (isH2) {
+                    const tocItem = {
+                        anchor: `#${headingElement.hash}`,
+                        id: headingElement.id,
+                        label: headingElement.title
+                    };
+                    tocOptions.push(tocItem);
+                    this.tocOptionIdsSet.add(headingElement.id);
+                }
             }
 
             this._tocOptions = tocOptions;
@@ -296,7 +307,10 @@ export default class ContentLayout extends LightningElement {
     }
 
     private assignElementId(id: string): void {
-        this.tocValue = id;
+        // Change toc(RNB) highlight only for H2
+        if (this.tocOptionIdsSet.has(id)) {
+            this.tocValue = id;
+        }
     }
 
     private dispatchHighlightChange(term: string): void {