@salesforcedevs/docs-components - npm Package Compare versions

Comparing version 1.3.366 to 1.3.376-alpha

lwc.config.json

@@ -16,2 +16,3 @@ {
         "doc/docXmlContent",
+        "doc/lwcContentLayout",
         "doc/header",
@@ -22,2 +23,3 @@ "doc/heading",
         "doc/phase",
+        "doc/specificationContent",
         "doc/versionPicker",
@@ -24,0 +26,0 @@ "doc/xmlContent",

package.json

 {
     "name": "@salesforcedevs/docs-components",
-    "version": "1.3.366",
+    "version": "1.3.376-alpha",
     "description": "Docs Lightning web components for DSC",
@@ -27,3 +27,3 @@ "license": "MIT",
     },
-    "gitHead": "879600edad044c730d365d3737f72f9f5eaec399"
+    "gitHead": "4629fdd9ca18a13480044ad43515b91945d16aad"
 }

src/modules/doc/contentLayout/contentLayout.ts

@@ -14,3 +14,3 @@ /* eslint-disable @lwc/lwc/no-document-query */
 const TOC_HEADER_TAG = "doc-heading";
-const RNB_BY_TAB = "docs-tab";
+
 const HIGHLIGHTABLE_SELECTOR = [
@@ -87,17 +87,16 @@ "p",
     @track
-    private _sidebarContent: unknown;
+    protected _sidebarContent: unknown;
 
-    private _breadcrumbs = null;
+    protected _breadcrumbs = null;
 
     @track
-    private _tocOptions!: Array<unknown>;
+    protected _tocOptions!: Array<unknown>;
 
-    private tocOptionIdsSet = new Set();
-    private anchoredElements: AnchorMap = {};
-    private lastScrollPosition!: number;
-    private observer?: IntersectionObserver;
-    private hasRendered: boolean = false;
-    private contentLoaded: boolean = false;
-    private sidebarOpen: boolean = false;
-    private rnbByTab: boolean = false;
+    protected tocOptionIdsSet = new Set();
+    protected anchoredElements: AnchorMap = {};
+    protected lastScrollPosition!: number;
+    protected observer?: IntersectionObserver;
+    protected hasRendered: boolean = false;
+    protected contentLoaded: boolean = false;
+    protected sidebarOpen: boolean = false;
 
@@ -108,63 +107,3 @@ get shouldDisplayFeedback() {
 
-    private setRNBByTab() {
-        const tabPanelListItem: any = this.getTabPanelList();
-        this.rnbByTab = tabPanelListItem?.id === RNB_BY_TAB ? true : false;
-    }
-
-    get showTabBasedRNB() {
-        return this.rnbByTab;
-    }
-
-    onTabChanged = () => {
-        this.updateRNB();
-    };
-
-    private getTabPanelList() {
-        return document.querySelector("dx-tab-panel-list");
-    }
-
-    updateRNB = () => {
-        const headingElements = this.getHeadingElements();
-        headingElements.forEach((headingElement: any) => {
-            // Sometimes elements hash and header is not being set when slot content is wrapped with div
-            headingElement.hash = headingElement.attributes.hash?.nodeValue;
-            headingElement.header = headingElement.attributes.header?.nodeValue;
-        });
-        this.updateTocItems(headingElements);
-    };
-
-    private getHeadingElements() {
-        let headingElements = document.querySelectorAll(TOC_HEADER_TAG);
-        if (this.showTabBasedRNB) {
-            const tabPanelListItem: any = this.getTabPanelList();
-            const tabPanels =
-                tabPanelListItem?.querySelectorAll("dx-tab-panel");
-            for (const tabPanelItem of tabPanels) {
-                if (tabPanelItem.active) {
-                    headingElements =
-                        tabPanelItem.querySelectorAll(TOC_HEADER_TAG);
-                    break;
-                }
-            }
-        }
-        return headingElements;
-    }
-
-    private updateURL() {
-        const tabs = this.getAllTabs();
-        const selectedTabId = this.getSelectedTabId();
-        tabs.forEach((tab: any) => {
-            if (tab.getAttribute("aria-selected") === "true") {
-                const tabID = tab.getAttribute("aria-label");
-                const url = new URL(window.location.href);
-                if (selectedTabId !== tabID) {
-                    url.searchParams.set("type", tabID);
-                    url.hash = "";
-                    window.history.pushState({}, "", url.toString());
-                }
-            }
-        });
-    }
-
-    private searchSyncer = new SearchSyncer({
+    protected searchSyncer = new SearchSyncer({
         callbacks: {
@@ -183,7 +122,7 @@ onSearchChange: (nextSearchString: string): void => {
     });
-    private tocValue?: string = undefined;
+    protected tocValue?: string = undefined;
     // eslint-disable-next-line no-undef
-    private observerTimerId?: NodeJS.Timeout;
-    private didScrollToSelectedHash = false;
-    private _scrollInterval = 0;
+    protected observerTimerId?: NodeJS.Timeout;
+    protected didScrollToSelectedHash = false;
+    protected _scrollInterval = 0;
 
@@ -205,9 +144,2 @@ get showToc(): boolean {
 
-    // This event gets triggered when navigating back/forward
-    handlePopState = (): void => {
-        if (this.showTabBasedRNB) {
-            this.restoreTabSelection();
-        }
-    };
-
     connectedCallback(): void {
@@ -225,43 +157,7 @@ const hasParentHighlightListener = closest(
         }
-        window.addEventListener("popstate", this.handlePopState);
     }
 
-    private getSelectedTabId() {
-        const urlParams = new URLSearchParams(window.location.search);
-        const selectedTabId = urlParams.get("type");
-        return selectedTabId;
-    }
+    // Placeholder for childs renderedCallback
+    protected postRenderedCallback?(): void;
 
-    private restoreTabSelection() {
-        requestAnimationFrame(() => {
-            const selectedTabId = this.getSelectedTabId();
-            if (selectedTabId) {
-                this.selectTabById(selectedTabId);
-            }
-        });
-    }
-
-    private getAllTabs(): any[] {
-        const tabPanelListItem: any = this.getTabPanelList();
-        if (tabPanelListItem?.shadowRoot) {
-            return Array.from(
-                tabPanelListItem.shadowRoot.querySelectorAll(
-                    "dx-tab-panel-item"
-                )
-            ).map((tabPanelItem: any) =>
-                tabPanelItem.shadowRoot.querySelector("button")
-            );
-        }
-        return [];
-    }
-
-    private selectTabById(tabId: string) {
-        const tabs = this.getAllTabs();
-        tabs.forEach((tab: any) => {
-            if (tab.getAttribute("aria-label") === tabId) {
-                tab.click();
-            }
-        });
-    }
-
     renderedCallback(): void {
@@ -284,8 +180,6 @@ /**
             this.hasRendered = true;
-            this.setRNBByTab();
-            if (this.showTabBasedRNB) {
-                window.addEventListener("tabchanged", this.onTabChanged);
-                this.restoreTabSelection();
-            }
             this.restoreScroll();
+
+            // Dynamically call `renderedCallbackForLwcContentLayout` if it exists
+            this.postRenderedCallback?.();
         }
@@ -302,4 +196,2 @@ }
         window.removeEventListener("resize", this.adjustNavPosition);
-        window.removeEventListener("tabchanged", this.onTabChanged);
-        window.removeEventListener("popstate", this.handlePopState);
         this.searchSyncer.dispose();
@@ -424,2 +316,30 @@ this.clearRenderObserverTimer();
 
+    protected getHeadingElements() {
+        // Note: We are doing document.querySelectorAll as a quick fix as we are not getting heading elements reference this.querySelectorAll
+        const headingElements = document.querySelectorAll(TOC_HEADER_TAG);
+        return headingElements;
+    }
+
+    updateHeadingForRNB(): void {
+        const headingElements = this.getHeadingElements();
+        this.addObserverAndScroll(headingElements);
+    }
+
+    addObserverAndScroll(headingElements: any) {
+        for (const headingElement of headingElements as any) {
+            // Add headingElements to intersectionObserver for highlighting respective RNB item when user scroll
+            const id = headingElement.getAttribute("id")!;
+            this.anchoredElements[id] = {
+                id,
+                intersect: false
+            };
+            this.observer?.observe(headingElement);
+        }
+
+        if (!this.didScrollToSelectedHash) {
+            this.didScrollToSelectedHash = true;
+            this.scrollToHash(headingElements);
+        }
+    }
+
     attachInteractionObserver = (): void => {
@@ -449,34 +369,7 @@ if (!this.enableSlotChange) {
         );
-
-        // Note: We are doing document.querySelectorAll as a quick fix as we are not getting heading elements reference this.querySelectorAll
-        const headingElements = this.getHeadingElements();
-
-        // 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")!;
-            this.anchoredElements[id] = {
-                id,
-                intersect: false
-            };
-            this.observer.observe(headingElement);
-        }
-
-        if (!this.didScrollToSelectedHash) {
-            this.didScrollToSelectedHash = true;
-            this.scrollToHash(headingElements);
-        }
+        this.updateHeadingForRNB();
     };
 
-    onSlotChange(): void {
-        this.updateRNB();
-        this.contentLoaded = true;
-    }
-
     // eslint-disable-next-line no-undef
-    private updateTocItems(headingElements: NodeListOf<Element>): void {
+    updateTocItems(headingElements: any): void {
         const tocOptions = [];
@@ -506,3 +399,29 @@
 
-    private disconnectObserver(): void {
+    setHashAndHeaderForDocHeading(headingElements: any) {
+        for (const headingElement of headingElements as any) {
+            // Sometimes elements hash and header is not being set when slot content is wrapped with div
+            if (!headingElement.hash) {
+                headingElement.hash = headingElement.attributes.hash?.nodeValue;
+            }
+
+            if (!headingElement.header) {
+                headingElement.header =
+                    headingElement.attributes.header?.nodeValue;
+            }
+        }
+
+        this.updateTocItems(headingElements);
+    }
+
+    updateRNB = () => {
+        const headingElements = this.getHeadingElements();
+        this.setHashAndHeaderForDocHeading(headingElements);
+    };
+
+    onSlotChange(): void {
+        this.updateRNB();
+        this.contentLoaded = true;
+    }
+
+    protected disconnectObserver(): void {
         if (this.observer) {
@@ -515,3 +434,3 @@ this.observer.disconnect();
     // eslint-disable-next-line no-undef
-    private scrollToHash(headingElements: NodeListOf<Element>): void {
+    protected scrollToHash(headingElements: NodeListOf<Element>): void {
         let { hash } = window.location;
@@ -553,3 +472,3 @@ if (hash) {
 
-    private scrollIntoViewWithOffset(
+    protected scrollIntoViewWithOffset(
         headingElement: HTMLElement,
@@ -567,3 +486,3 @@ offset: number
 
-    private calculateActualSection(): void {
+    protected calculateActualSection(): void {
         const currentScrollPosition = document.documentElement.scrollTop;
@@ -583,3 +502,3 @@ const id = Object.keys(this.anchoredElements).find(
 
-    private calculatePreviousElementId(): string | undefined {
+    protected calculatePreviousElementId(): string | undefined {
         const keys = Object.keys(this.anchoredElements);
@@ -591,3 +510,3 @@ const currentIndex = keys.findIndex((id) => this.tocValue === id);
 
-    private assignElementId(id: string | undefined): void {
+    protected assignElementId(id: string | undefined): void {
         // Change toc(RNB) highlight only for H2
@@ -599,3 +518,3 @@ if (this.tocOptionIdsSet.has(id)) {
 
-    private dispatchHighlightChange(term: string): void {
+    protected dispatchHighlightChange(term: string): void {
         this.dispatchEvent(
@@ -610,3 +529,3 @@ new CustomEvent("highlightedtermchange", {
 
-    private updateHighlightsAndSearch(nextSearchString: string): void {
+    protected updateHighlightsAndSearch(nextSearchString: string): void {
         const nextSearchParam =
@@ -618,3 +537,3 @@ new URLSearchParams(nextSearchString).get("q") || "";
 
-    private onToggleSidebar(e: CustomEvent): void {
+    protected onToggleSidebar(e: CustomEvent): void {
         this.sidebarOpen = e.detail.open;
@@ -621,0 +540,0 @@

src/modules/doc/header/header.ts

@@ -10,2 +10,9 @@ import { api } from "lwc";
 
+const isStorybook = () => {
+    const { host } = window.location;
+    return (
+        host === "localhost:6006" || /^dsc-comp.*\.herokuapp\.com$/.test(host)
+    );
+};
+
 export default class Header extends HeaderBase {
@@ -61,4 +68,3 @@ @api langValuePath: string = "id"; // allows to override how language property is interpreted, follows valuePath dropdown api.
                 "/tableau/embedding-playground/overview" ||
-            window.location.host === "localhost:6006" ||
-            window.location.host === "dsc-components.herokuapp.com"
+            isStorybook()
         ) {
@@ -65,0 +71,0 @@ this.shouldRender = true;

New alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Fixed alerts

Mixed license

License

(Experimental) Package contains multiple licenses.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

276832

increased by5.58%

Number of package files

85

increased by7.59%

Number of low license alerts

0

decreased by-100%

Lines of code

6895

increased by3.08%

Worsened metrics

Number of low quality alerts

2

increased by100%

No dependency changes