@salesforcedevs/docs-components 1.28.7 → 1.29.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/docs-components",
-    "version": "1.28.7",
+    "version": "1.29.0",
     "description": "Docs Lightning web components for DSC",
     "license": "MIT",
     "main": "index.js",
@@ -25,5 +25,5 @@
         "@types/lodash.orderby": "4.6.9",
         "@types/lodash.uniqby": "4.7.9"
     },
-    "gitHead": "aedcb1c0ab8cb16ff85f61c0d3ed0c908502d843"
+    "gitHead": "0dce435f5845187b50577dc005de80ddc3002b9d"
 }

package/src/modules/doc/amfReference/amfReference.ts

@@ -37,6 +37,7 @@ type NavigationItem = {
     isExpanded: boolean;
     children: ParsedMarkdownTopic[];
     isChildrenLoading: boolean;
+    showForwardArrow?: boolean;
 };
 
 export default class AmfReference extends LightningElement {
@@ -204,6 +205,7 @@ export default class AmfReference extends LightningElement {
 
     _boundOnApiNavigationChanged;
     _boundUpdateSelectedItemFromUrlQuery;
+    _boundOnPageShow;
 
     constructor() {
         super();
@@ -212,6 +214,7 @@ export default class AmfReference extends LightningElement {
             this.onApiNavigationChanged.bind(this);
         this._boundUpdateSelectedItemFromUrlQuery =
             this.updateSelectedItemFromUrlQuery.bind(this);
+        this._boundOnPageShow = this.onPageShow.bind(this);
     }
 
     connectedCallback(): void {
@@ -223,6 +226,7 @@ export default class AmfReference extends LightningElement {
             "popstate",
             this._boundUpdateSelectedItemFromUrlQuery
         );
+        window.addEventListener("pageshow", this._boundOnPageShow);
     }
 
     disconnectedCallback(): void {
@@ -234,6 +238,22 @@ export default class AmfReference extends LightningElement {
             "popstate",
             this._boundUpdateSelectedItemFromUrlQuery
         );
+        window.removeEventListener("pageshow", this._boundOnPageShow);
+    }
+
+    /**
+     * On bfcache restore, reset the sidebar selection so the tree re-syncs
+     * its highlighted tile with the current URL.
+     */
+    protected onPageShow(event: PageTransitionEvent): void {
+        if (!event.persisted) {
+            return;
+        }
+        const currentPath = window.location.pathname;
+        this.selectedSidebarValue = "";
+        Promise.resolve().then(() => {
+            this.selectedSidebarValue = currentPath;
+        });
     }
 
     renderedCallback(): void {
@@ -443,16 +463,21 @@ export default class AmfReference extends LightningElement {
             let navItemChildren = [] as ParsedMarkdownTopic[];
             let isChildrenLoading = false;
             if (amfConfig.referenceType !== REFERENCE_TYPES.markdown) {
-                if (amfConfig.isSelected) {
-                    const amfPromise = this.fetchAmf(amfConfig).then(
-                        (amfJson) => {
-                            this.updateModel(amfConfig.id, amfJson);
-                            this.assignNavigationItemsFromAmf(amfConfig, index);
-                        }
-                    );
-                    this.amfFetchPromiseMap[amfConfig.id] = amfPromise;
+                if (amfConfig.amf) {
+                    if (amfConfig.isSelected) {
+                        const amfPromise = this.fetchAmf(amfConfig).then(
+                            (amfJson) => {
+                                this.updateModel(amfConfig.id, amfJson);
+                                this.assignNavigationItemsFromAmf(
+                                    amfConfig,
+                                    index
+                                );
+                            }
+                        );
+                        this.amfFetchPromiseMap[amfConfig.id] = amfPromise;
+                    }
+                    isChildrenLoading = true;
                 }
-                isChildrenLoading = true;
             } else {
                 const isExpandChildrenEnabled = this.isExpandChildrenEnabled(
                     amfConfig.id
@@ -473,13 +498,30 @@ export default class AmfReference extends LightningElement {
                     amfConfig.isSelected ||
                     this.isExpandChildrenEnabled(amfConfig.id),
                 children: navItemChildren,
-                isChildrenLoading
+                isChildrenLoading,
+                showForwardArrow: this.resolveNavRenderWith(amfConfig)
             };
             this.parentReferenceUrls.push(amfConfig.href);
         }
         this.navigation = navAmfOrder;
     }
 
+    /**
+     * Determines whether the sidebar tile should render a forward arrow for
+     * this reference. Honors `redoc` set on the config, and also infers it
+     * for non-markdown references that have no AMF URL (i.e. those rendered
+     * by Redoc).
+     */
+    private resolveNavRenderWith(amfConfig: AmfConfig): boolean {
+        if (amfConfig.renderWith) {
+            return amfConfig.renderWith === "redoc";
+        }
+        return (
+            amfConfig.referenceType !== REFERENCE_TYPES.markdown &&
+            !amfConfig.amf
+        );
+    }
+
     /**
      * Returns a boolean indicating whether the children should be expanded or not.
      */

package/src/modules/doc/amfReference/types.ts

@@ -78,6 +78,11 @@ export interface AmfConfig {
 
     // required for markdown based references
     topic?: ParsedMarkdownTopic;
+
+    /**
+     * Required for rendering the arrow on LNB
+     */
+    renderWith?: string;
 }
 
 export interface ParsedTopicModel {

package/src/modules/doc/header/header.html

@@ -13,7 +13,6 @@
                         onclick={onLinkClick}
                         class="dev-center-content"
                     >
-                        <dx-icon symbol="back"></dx-icon>
                         <dx-icon
                             class="brand-icon"
                             lwc:if={devCenter.icon}

package/src/modules/doc/redocReference/redocReference.ts

@@ -2,6 +2,7 @@
 import { createElement, LightningElement, api } from "lwc";
 import DocPhase from "doc/phase";
 import DxFooter from "dx/footer";
+import DxIcon from "dx/icon";
 import SprigSurvey from "doc/sprigSurvey";
 import { throttle } from "throttle-debounce";
 import { pollUntil } from "dxUtils/async";
@@ -14,11 +15,19 @@ declare global {
 
 declare const Sprig: (eventType: string, eventName: string) => void;
 
+type ReferenceTopic = {
+    link?: { href?: string };
+    children?: ReferenceTopic[];
+};
+
 type ReferenceItem = {
     source: string;
     href: string;
+    title?: string;
     isSelected?: boolean;
     docPhase?: string | null;
+    referenceType?: string;
+    topic?: ReferenceTopic;
 };
 
 type ReferenceConfig = {
@@ -28,6 +37,7 @@ type ReferenceConfig = {
 const SCROLL_THROTTLE_DELAY = 50;
 const ELEMENT_TIMEOUT = 10000;
 const ELEMENT_CHECK_INTERVAL = 100;
+const REFERENCES_SEGMENT = "/references/";
 
 export default class RedocReference extends LightningElement {
     private _referenceConfig: ReferenceConfig = { refList: [] };
@@ -38,6 +48,12 @@ export default class RedocReference extends LightningElement {
     private docPhaseWrapperElement: Element | null = null;
     private lastSidebarTop = 0;
 
+    /**
+     * History length captured at mount (pre-Redoc), used by `onBackClick` to
+     * distinguish in-tab navigation (> 1) from a fresh entry (=== 1).
+     */
+    private initialHistoryLength = 0;
+
     showError = false;
 
     @api
@@ -71,6 +87,75 @@ export default class RedocReference extends LightningElement {
     /** Optional origin URL for the footer MFE (e.g. wp-json endpoint). Passed through to dx-footer. */
     @api origin: string | null = null;
 
+    /**
+     * Project title (same value passed to `<doc-header>` as `subtitle`). Used
+     * inside the Redoc-rendered UI to label the parent project.
+     */
+    @api projectTitle: string | null = "All Reference";
+
+    get specTitle(): string | null {
+        return this.getSelectedReference()?.title ?? null;
+    }
+
+    /**
+     * Whether to show the project header (only for multi-spec reference sets).
+     */
+    get showRedocHeader(): boolean {
+        const refCount = this._referenceConfig?.refList?.length ?? 0;
+        const isMultiSpecSet = refCount > 1;
+        return isMultiSpecSet && !!(this.projectTitle || this.specTitle);
+    }
+
+    /**
+     * Navigates back to reference doc.
+     */
+    private onBackClick = (event: Event): void => {
+        event.preventDefault();
+        const referrerHref = this.getSameOriginReferrerHref();
+        if (referrerHref) {
+            window.location.href = referrerHref;
+            return;
+        }
+        const fallbackHref = this.getReferencesRootHref();
+        if (fallbackHref) {
+            window.location.href = fallbackHref;
+        }
+    };
+
+    /**
+     * Returns the referrer URL when the page was reached via in-tab navigation
+     * from a same-origin page; otherwise `null`. Both `initialHistoryLength`
+     * and `document.referrer` are checked since neither signal is reliable on
+     * its own.
+     */
+    private getSameOriginReferrerHref(): string | null {
+        if (this.initialHistoryLength <= 1 || !document.referrer) {
+            return null;
+        }
+        try {
+            const referrerUrl = new URL(document.referrer);
+            if (referrerUrl.origin !== window.location.origin) {
+                return null;
+            }
+            return referrerUrl.href;
+        } catch {
+            return null;
+        }
+    }
+
+    /**
+     * Derives the project's `.../references` root from the current URL by
+     * trimming any trailing reference id (and deeper segments). Returns null
+     * when the URL doesn't contain a `/references` segment.
+     */
+    private getReferencesRootHref(): string | null {
+        const { pathname } = window.location;
+        const idx = pathname.lastIndexOf(REFERENCES_SEGMENT);
+        return idx === -1
+            ? null
+            : pathname.slice(0, idx + REFERENCES_SEGMENT.length);
+    }
+
     /** When origin is provided, pass it to the footer; otherwise use dx-footer's default. */
     get effectiveFooterOrigin(): string {
         return (
@@ -79,6 +164,10 @@ export default class RedocReference extends LightningElement {
     }
 
     connectedCallback(): void {
+        // Snapshot history length before Redoc pushes its own hash entries,
+        // so it reflects real in-tab navigation rather than Redoc's churn.
+        this.initialHistoryLength = window.history.length;
+
         window.addEventListener("scroll", this.handleScrollAndResize);
         window.addEventListener("resize", this.handleScrollAndResize);
     }
@@ -304,6 +393,9 @@ export default class RedocReference extends LightningElement {
 
             this.appendFooterItems(apiContentDiv);
 
+            // Inject the multi-spec project header into Redoc's left menu only.
+            this.insertProjectHeaderInMenu(redocContainer);
+
             // Wait for footer to be rendered before updating styles
             requestAnimationFrame(() => {
                 this.updateRedocThirdColumnStyle(redocContainer);
@@ -316,6 +408,65 @@ export default class RedocReference extends LightningElement {
         }
     }
 
+    /**
+     * Inserts the project header into Redoc for multi-spec reference sets.
+     */
+    private insertProjectHeaderInMenu(redocContainer: HTMLElement): void {
+        if (!this.showRedocHeader) {
+            return;
+        }
+
+        // Select the LNB and content area of Redoc and insert the requried header.
+        redocContainer
+            .querySelectorAll<HTMLElement>(".menu-content, .api-content")
+            .forEach((target) => {
+                target.insertBefore(
+                    this.buildProjectHeaderDom(),
+                    target.firstChild
+                );
+            });
+    }
+
+    /**
+     * Builds a fresh project-title/spec-title header DOM node.
+     */
+    private buildProjectHeaderDom(): HTMLElement {
+        const wrapper = document.createElement("div");
+        wrapper.className = "redoc-project-header";
+
+        if (this.projectTitle) {
+            const backLink = document.createElement("a");
+            backLink.className = "redoc-project-back";
+            backLink.href = "#";
+            backLink.addEventListener("click", this.onBackClick);
+
+            const icon = createElement("dx-icon", { is: DxIcon });
+            Object.assign(icon, {
+                sprite: "utility",
+                symbol: "back",
+                size: "medium"
+            });
+            icon.classList.add("redoc-project-back-arrow");
+
+            const label = document.createElement("span");
+            label.className = "redoc-project-title";
+            label.textContent = this.projectTitle;
+
+            backLink.appendChild(icon);
+            backLink.appendChild(label);
+            wrapper.appendChild(backLink);
+        }
+
+        if (this.specTitle) {
+            const specEl = document.createElement("h2");
+            specEl.className = "redoc-spec-title dx-text-display-7";
+            specEl.textContent = this.specTitle;
+            wrapper.appendChild(specEl);
+        }
+
+        return wrapper;
+    }
+
     // Waits for Redoc's API content element to be rendered
     private async waitForApiContent(
         container: HTMLElement