@salesforcedevs/docs-components 1.3.155-rnb-by-tab1 → 1.3.156-canary.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/docs-components",
-    "version": "1.3.155-rnb-by-tab1",
+    "version": "1.3.156-canary.0",
     "description": "Docs Lightning web components for DSC",
     "license": "MIT",
     "main": "index.js",

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

@@ -35,7 +35,6 @@ export default class ContentLayout extends LightningElement {
     @api coveoSearchHub!: string;
     @api coveoAdvancedQueryConfig!: string;
     @api useOldSidebar?: boolean = false;
-    @api rnbByTabId?: string = "lwc-doc-tab";
 
     @api
     get breadcrumbs() {
@@ -119,10 +118,6 @@ export default class ContentLayout extends LightningElement {
         return window.location.pathname;
     }
 
-    get showTabBasedRNB() {
-        return this.rnbByTabId ? true : false;
-    }
-
     get showBreadcrumbs(): boolean {
         return (
             this.breadcrumbs != null && (this.breadcrumbs as any[]).length > 1
@@ -141,24 +136,8 @@ export default class ContentLayout extends LightningElement {
             );
             this.searchSyncer.init();
         }
-
-        if (this.showTabBasedRNB) {
-            window.addEventListener("tabchanged", this.onTabChanged);
-        }
     }
 
-    onTabChanged = () => {
-        this.updateRNB();
-    };
-
-    updateRNB = () => {
-        const headingElements = this.getHeadingElements();
-        headingElements.forEach((headingElement) => {
-            headingElement.hash = headingElement.attributes.hash?.nodeValue;
-        });
-        this.updateTocItems(headingElements);
-    };
-
     renderedCallback(): void {
         /**
          * Note: We are adding timeout because chrome is optimizing and not triggering recent renderedCallback though elements reference is changed
@@ -186,10 +165,6 @@ export default class ContentLayout extends LightningElement {
             "highlightedtermchange",
             this.updateHighlighted
         );
-
-        if (this.showTabBasedRNB) {
-            window.removeEventListener("tabchanged", this.onTabChanged);
-        }
         window.removeEventListener("scroll", this.adjustNavPosition);
         window.removeEventListener("resize", this.adjustNavPosition);
         this.searchSyncer.dispose();
@@ -209,29 +184,6 @@ export default class ContentLayout extends LightningElement {
         }
     };
 
-    private getHeadingElements() {
-        let headingElements = document.querySelectorAll(TOC_HEADER_TAG);
-        if (this.showTabBasedRNB) {
-            const tabPanelListItems =
-                document.querySelectorAll("dx-tab-panel-list");
-            for (const tabPanelListItem of tabPanelListItems) {
-                if (tabPanelListItem.id === this.rnbByTabId) {
-                    const tabPanelItems =
-                        tabPanelListItem.querySelectorAll("dx-tab-panel");
-                    for (const tabPanelItem of tabPanelItems) {
-                        if (tabPanelItem.active) {
-                            headingElements =
-                                tabPanelItem.querySelectorAll(TOC_HEADER_TAG);
-                            break;
-                        }
-                    }
-                    break;
-                }
-            }
-        }
-        return headingElements;
-    }
-
     /*
         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.
@@ -291,7 +243,9 @@ export default class ContentLayout extends LightningElement {
                 );
 
                 // Adjust scroll margin for doc headings when doc phase is present
-                const docHeadingEls = this.getHeadingElements();
+                const docHeadingEls = Array.from(
+                    document.querySelectorAll("doc-heading")
+                );
                 docHeadingEls.forEach((docHeadingEl) => {
                     docHeadingEl.style.scrollMarginTop = `${
                         globalNavHeight +
@@ -347,7 +301,7 @@ 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();
+        const headingElements = document.querySelectorAll(TOC_HEADER_TAG);
         for (const headingElement of headingElements) {
             // Add headingElements to intersectionObserver for highlighting respective RNB item when user scroll
             const id = headingElement.getAttribute("id");
@@ -363,34 +317,47 @@ export default class ContentLayout extends LightningElement {
         }
     };
 
-    onSlotChange(): void {
-        this.updateRNB();
-    }
+    onSlotChange(event: Event): void {
+        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
+                );
 
-    // eslint-disable-next-line no-undef
-    private updateTocItems(headingElements: NodeListOf<Element>): void {
-        const tocOptions = [];
+            for (const headingElement of headingElements) {
+                // Sometimes elements hash is not being set when slot content is wrapped with div
+                headingElement.hash = headingElement.attributes.hash?.nodeValue;
+            }
 
-        for (const headingElement of headingElements) {
-            headingElement.id = headingElement.hash;
-
-            // 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);
+            const tocOptions = [];
+
+            for (const headingElement of headingElements) {
+                headingElement.id = headingElement.hash;
+
+                // 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;
+            this._tocOptions = tocOptions;
+        }
     }
 
     private disconnectObserver(): void {

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

@@ -13,7 +13,7 @@ import {
     TocMap
 } from "./types";
 import { SearchSyncer } from "docUtils/SearchSyncer";
-import { LightningElementWithState } from "docBaseElements/lightningElementWithState";
+import { LightningElementWithState } from "dxBaseElements/lightningElementWithState";
 import { oldVersionDocInfo } from "docUtils/utils";
 import { Breadcrumb, DocPhaseInfo, Language } from "typings/custom";
 import { track as trackGTM } from "dxUtils/analytics";

package/src/modules/docBaseElements/lightningElementWithState/lightningElementWithState.ts

@@ -1,93 +0,0 @@
-import { LightningElement, track } from "lwc";
-
-/**
- * This is a helper class for when you want your LWC component to have state
- * that is automatically tracked _along with_ its previous state, in a React-
- * like fashion, so that you can compare current state with previous state
- * after a render (like React's `commponentDidUpdate`). One benefit of doing
- * things this way is that you can put all of your reactions to state changes
- * in one place, in `renderedCallback`, rather than having them in various
- * places throughout the component.
- *
- * The API consists in `this.prevState`, `this.state`, and `this.setState`.
- *
- * Usage:
- *
- * ```
- * type MyState = {
- *     isFetchingContent: boolean;
- * };
- *
- * class MyFetchingComponent extends LightningElementWithState<MyState> {
- *     constructor() {
- *         // `this.state` can only be initialized once
- *         this.state = {
- *             isFetchingContent: false
- *         };
- *     }
- *
- *     // Queued for execution whenever a `setState` call completes
- *     renderedCallback() {
- *         if (this.prevState.isFetchingContent && !this.state.isFetchingContent) {
- *             // Do something knowing that we just finished fetching.
- *             notifyFetchSuccessful();
- *         }
- *     }
- *
- *     fetchSomething() {
- *         this.setState({
- *             isFetchingContent: true
- *         });
- *
- *         fetch(whatever).then(() => {
- *             this.setState({
- *                 isFetching: false
- *             }
- *         });
- *     }
- * }
- * ```
- */
-export abstract class LightningElementWithState<
-    T extends { [key: string]: unknown }
-> extends LightningElement {
-    private _prevState = {} as T;
-    @track private _state = {} as T;
-
-    private _didInitializeState = false;
-
-    protected get prevState(): T {
-        return Object.freeze({
-            ...this._prevState
-        });
-    }
-
-    protected get state(): T {
-        return Object.freeze({
-            ...this._state
-        });
-    }
-
-    protected set state(initialState: T) {
-        if (!this._didInitializeState) {
-            this._state = {
-                ...initialState
-            };
-            this._didInitializeState = true;
-        } else {
-            throw new Error(
-                "To mutate state after initialization, use `this.setState`."
-            );
-        }
-    }
-
-    protected setState = (state: Partial<T>): void => {
-        this._prevState = {
-            ...this._state
-        };
-        this._state = {
-            ...this._state,
-            ...state
-        };
-    };
-}