@salesforcedevs/dx-components 1.3.217 → 1.3.219

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "1.3.217",
+    "version": "1.3.219",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
@@ -44,5 +44,5 @@
     "volta": {
         "node": "16.19.1"
     },
-    "gitHead": "97fa28da77d1550d42ebc27eb8878f50fdcac89f"
+    "gitHead": "c0f8f19b7bfc14f9a6ca02a2dc328f726d72270a"
 }

package/src/modules/dx/scrollManager/scrollManager.ts

@@ -164,12 +164,13 @@ export default class ScrollManager extends LightningElement {
     }
 
     saveScroll = throttle(100, () => {
+        const scrollingElement = document.scrollingElement || document.body;
         window.history.replaceState(
             {
                 ...window.history.state,
                 scroll: {
-                    value: document.body.scrollTop,
-                    docSize: document.body.scrollHeight
+                    value: scrollingElement.scrollTop,
+                    docSize: scrollingElement.scrollHeight
                 }
             },
             "",

package/src/modules/dx/searchResults/searchResults.css

@@ -422,11 +422,17 @@ a.CoveoResultLink,
     width: fit-content;
 }
 
-.dx-badge {
-    display: block;
+.dx-result-info {
+    display: flex;
+    gap: 12px;
     margin-bottom: var(--dx-g-spacing-smd);
 }
 
+.breadcrumb {
+    color: #555;
+    font-size: var(--dx-g-text-xs);
+}
+
 .no-results {
     display: flex;
     justify-content: center;

package/src/modules/dx/searchResults/searchResults.ts

@@ -6,6 +6,7 @@ import {
     CONTENT_TYPE_ICONS
 } from "dxConstants/contentTypes";
 import { getContentTypeColorVariables } from "dxUtils/contentTypes";
+import { pollUntil } from "dxUtils/async";
 
 interface CoveoSearch {
     state: typeof CoveoSDK.state;
@@ -40,16 +41,27 @@ const resultsTemplatesInnerHtml = `
     <script
         id="myDocumentResultTemplate"
         class="result-template"
-        type="text/html"
+        type="text/underscore"
         data-field-publicurl=""
     >
         <div class="dx-result">
-            <span class="CoveoFieldValue" data-field="@content_type" data-helper="badge" data-html-value="true"></span>
+            <div class="dx-result-info">
+                <span class="CoveoFieldValue" data-field="@content_type" data-helper="badge" data-html-value="true"></span>
+                <% if (!raw.breadcrumbs && !raw.metabreadcrumbs) { %>
+                    <span class="CoveoFieldValue" data-field="@uri" data-helper="uriBreadcrumbs" data-html-value="true"></span>
+                <% } else { %>
+                    <% if (raw.uri.includes('/references/')) { %>
+                        <span class="CoveoFieldValue" data-field="@metabreadcrumbs" data-helper="metabreadcrumbs" data-html-value="true"></span>
+                    <% } else { %>
+                        <span class="CoveoFieldValue" data-field="@breadcrumbs" data-helper="breadcrumbs" data-html-value="true"></span>
+                    <% } %>
+                <% } %>
+            </div>
             <p class="dx-result-title">
-                <a
+                <span
                     class="CoveoResultLink"
-                    data-field="@publicurl"
-                ></a>
+                    data-field="@uri"
+                ></span>
             </p>
             <p class="dx-result-excerpt CoveoExcerpt"></p>
         </div>
@@ -57,10 +69,21 @@ const resultsTemplatesInnerHtml = `
     <script
         id="myDefaultResultTemplate"
         class="result-template"
-        type="text/html"
+        type="text/underscore"
     >
             <div class="dx-result">
-                <span class="CoveoFieldValue" data-field="@content_type" data-helper="badge" data-html-value="true"></span>
+                <div class="dx-result-info">
+                    <span class="CoveoFieldValue" data-field="@content_type" data-helper="badge" data-html-value="true"></span>
+                    <% if (!raw.breadcrumbs && !raw.metabreadcrumbs) { %>
+                        <span class="CoveoFieldValue" data-field="@uri" data-helper="uriBreadcrumbs" data-html-value="true"></span>
+                    <% } else { %>
+                        <% if (raw.uri.includes('/references/')) { %>
+                            <span class="CoveoFieldValue" data-field="@metabreadcrumbs" data-helper="metabreadcrumbs" data-html-value="true"></span>
+                        <% } else { %>
+                            <span class="CoveoFieldValue" data-field="@breadcrumbs" data-helper="breadcrumbs" data-html-value="true"></span>
+                        <% } %>
+                    <% } %>
+                </div>
                 <p class="dx-result-title">
                     <a class="CoveoResultLink"></a>
                 </p>
@@ -69,6 +92,14 @@ const resultsTemplatesInnerHtml = `
     </script>
 `;
 
+const isInternalDomain = (domain: string) =>
+    domain === "developer.salesforce.com" ||
+    domain === "developer-website-s.herokuapp.com";
+
+const isTrailheadDomain = (domain: string) =>
+    domain === "trailhead.salesforce.com" ||
+    domain === "dev.trailhead.salesforce.com";
+
 const buildTemplateHelperBadge = (value: keyof typeof CONTENT_TYPE_LABELS) => {
     const style = getContentTypeColorVariables(value);
     const label = CONTENT_TYPE_LABELS[value];
@@ -88,6 +119,107 @@ const buildTemplateHelperBadge = (value: keyof typeof CONTENT_TYPE_LABELS) => {
         `;
 };
 
+const processParts = (parts: string[], internalFlag = false) => {
+    // filter /docs/ breadcrumb item from internal domains
+    const filterFn = internalFlag
+        ? (part: string) => part !== "docs"
+        : (part: string) => part;
+
+    return parts.filter(filterFn).map((part) => {
+        // Remove special characters & .htm/.xml extension
+        part = part
+            .replace(/_/g, " ")
+            .replace(/-/g, " ")
+            .replace(/.html*/g, " ")
+            .replace(/.xml/g, " ")
+            .replace(/b2c/g, "B2C");
+
+        // Capitalize first letter of each word
+        part = part.replace(/\w\S*/g, (w) => {
+            return w.replace(/^\w/, (c) => c.toUpperCase());
+        });
+
+        return `<span class="breadcrumb-item">${decodeURI(part)}</span>`;
+    });
+};
+
+const buildTemplateHelperUriBreadcrumbs = (value: string) => {
+    const url = new URL(value);
+
+    // exclude youtube links from breadcrumbs
+    const hostnamePattern = /^((www\.)?(youtube\.com|youtu\.be))$/;
+
+    // we don't want to show atlas docs because the url structure is mad ugly
+    if (hostnamePattern.test(url.hostname) || url.pathname.includes("atlas.")) {
+        return "";
+    }
+
+    let parts = url.pathname.split("/").filter((part) => part !== "");
+
+    // Remove language prefix from trailhead URLs
+    if (isTrailheadDomain(url.hostname)) {
+        parts = parts
+            .slice(1)
+            .filter((part) => part !== "content" && part !== "learn");
+    }
+
+    const breadcrumbs = processParts(parts, isInternalDomain(url.hostname));
+
+    if (!isInternalDomain(url.hostname)) {
+        // Remove the first breadcrumb item if it's an internal domain (i.e drop developer.salesforce.com from developer.salesforce.com / B2C Commerce / Open Commerce API / Filtering)
+        breadcrumbs.unshift(
+            `<span class="breadcrumb-item">${url.hostname}</span>`
+        );
+
+        return `
+            <span class="breadcrumb">
+                ${breadcrumbs.join(" / ")}
+            </span>
+        `;
+    } else if (breadcrumbs.length === 1) {
+        // Hide breadcrumbs if there is only one breadcrumb item
+        return "";
+    }
+
+    // remove the last breadcrumb item (the search result title makes it redundant)
+    breadcrumbs.pop();
+
+    return `<span class="breadcrumb">/ ${breadcrumbs.join(" / ")} /</span>`;
+};
+
+const buildTemplateHelperBreadcrumbs = (value: string) => {
+    const parts = value.split("/").filter((part) => part !== "");
+
+    // Don't show breadcrumbs if there's only one part
+    if (parts.length === 1) {
+        return "";
+    }
+
+    const breadcrumbs = processParts(parts);
+
+    // remove last breadcrumb item
+    breadcrumbs.pop();
+
+    return `
+            <span class="breadcrumb">/ ${breadcrumbs.join(" / ")} /</span>
+        `;
+};
+
+const buildTemplateHelperMetaBreadcrumbs = (value: string) => {
+    const parts = value.split("/").filter((part) => part !== "");
+
+    // Don't show breadcrumbs if there's only one part
+    if (parts.length === 1) {
+        return "";
+    }
+
+    const breadcrumbs = processParts(parts);
+
+    return `
+            <span class="breadcrumb">/ ${breadcrumbs.join(" / ")}</span>
+        `;
+};
+
 // @ts-ignore Dark Magic (TM) we are overriding the 'title' field with a custom getter. We should really stop doing this.
 export default class SearchResults extends LightningElement {
     @api coveoOrganizationId!: string;
@@ -139,9 +271,12 @@ export default class SearchResults extends LightningElement {
         BreadcrumbManager.clearBreadcrumbs();
     }
 
-    private currentPage: number = 1;
+    private currentPage: number = 25;
     private totalPages: number = 1;
 
+    private originalBreadcrumbs: string[] = [];
+    private initialWindowWidth = window.innerWidth;
+
     private goToPage(e: CustomEvent) {
         const page = e.detail;
         const Pager = Coveo.get(
@@ -179,6 +314,7 @@ export default class SearchResults extends LightningElement {
                 if (Coveo.state(this.root!, "q") === "") {
                     Coveo.state(this.root!, "sort", "date descending");
                 }
+
                 this.isInitialized = true;
             }
         );
@@ -204,6 +340,110 @@ export default class SearchResults extends LightningElement {
 
             this.trackSearchResults(event, this.query, this.totalResults);
         });
+
+        Coveo.$$(root).on(Coveo.QueryEvents.deferredQuerySuccess, async () => {
+            // wait specified time to ensure breadcrumbs are rendered before processing them
+            await pollUntil(
+                () => {
+                    const coveoResults =
+                        this.root!.querySelector(".CoveoResult");
+
+                    return Boolean(coveoResults);
+                },
+                20,
+                1000
+            );
+
+            this.processBreadcrumbs(this.root!);
+
+            window.onresize = () => this.processBreadcrumbs(root);
+        });
+    }
+
+    // Checks if text is wrapping by comparing it with an element's text that doesn't wrap
+    private isTextWrapping = (
+        elementOne: HTMLElement,
+        elementTwo: HTMLElement
+    ) => elementOne.offsetHeight > elementTwo.offsetHeight;
+
+    private truncateBreadcrumbText = (breadcrumbItems: HTMLElement[]) => {
+        breadcrumbItems.forEach((breadcrumbItem: HTMLElement) => {
+            const breadcrumbItemText = breadcrumbItem.textContent!;
+            if (breadcrumbItemText.length > 30) {
+                breadcrumbItem.textContent = `${breadcrumbItemText.substring(
+                    0,
+                    30
+                )}...`;
+            }
+        });
+    };
+
+    private addBreadcrumbEllipsis = (
+        breadcrumbItems: HTMLElement[],
+        breadcrumb: HTMLElement
+    ) => {
+        for (let i = 1; i < breadcrumbItems.length; i++) {
+            if (this.isTextWrapping(breadcrumb, breadcrumbItems[0])) {
+                breadcrumbItems[i].textContent = "...";
+            } else {
+                break; // Exit the loop if the breadcrumb is no longer overflowing
+            }
+        }
+    };
+
+    private formatBreadcrumbs = (breadcrumbs: HTMLElement[]) => {
+        breadcrumbs?.forEach((breadcrumb: HTMLElement) => {
+            // Get all breadcrumb items that are separated by '/'
+            const breadcrumbItems: any =
+                breadcrumb.querySelectorAll(".breadcrumb-item");
+
+            // Check if the breadcrumb is overflowing by comparing it's height to the height of the first breadcrumb item
+            if (this.isTextWrapping(breadcrumb, breadcrumbItems[0])) {
+                // it is overflowing, so we need to truncate long titles to 30 characters
+                this.truncateBreadcrumbText(breadcrumbItems);
+
+                // Iteratively check if the breadcrumb is still overflowing and replace text with '...' starting from the second breadcrumb item
+                this.addBreadcrumbEllipsis(breadcrumbItems, breadcrumb);
+
+                // After processing all breadcrumb items, if it's still overflowing, hide the breadcrumb element
+                if (this.isTextWrapping(breadcrumb, breadcrumbItems[0])) {
+                    breadcrumb.style.display = "none";
+                }
+            }
+        });
+    };
+
+    private restoreBreadcrumbs = (breadcrumbs: HTMLElement[]) => {
+        breadcrumbs.forEach((breadcrumb: HTMLElement, index: number) => {
+            // eslint-disable-next-line @lwc/lwc/no-inner-html
+            breadcrumb.innerHTML = this.originalBreadcrumbs[index];
+        });
+    };
+
+    private windowSizeIncreased = () =>
+        window.innerWidth > this.initialWindowWidth;
+
+    private processBreadcrumbs(root: HTMLElement) {
+        // Get all breadcrumbs from search results
+        const breadcrumbs = Array.from(
+            root.querySelectorAll(".breadcrumb")
+        ) as HTMLElement[];
+
+        if (this.originalBreadcrumbs.length === 0) {
+            this.originalBreadcrumbs = breadcrumbs.map(
+                (breadcrumb) => breadcrumb.innerHTML
+            );
+        }
+
+        if (this.windowSizeIncreased()) {
+            /*
+                Reset the breadcrumbs to their original state and process them again.
+                The additional space means we can replace ellipsis with full text.
+            */
+            this.restoreBreadcrumbs(breadcrumbs);
+        }
+
+        this.formatBreadcrumbs(breadcrumbs);
     }
 
     private initializeCoveo() {
@@ -212,6 +452,7 @@ export default class SearchResults extends LightningElement {
         const resultsList = this.template.querySelector(".CoveoResultList");
 
         if (resultsList) {
+            // eslint-disable-next-line @lwc/lwc/no-inner-html
             resultsList.innerHTML = resultsTemplatesInnerHtml;
         }
 
@@ -227,6 +468,21 @@ export default class SearchResults extends LightningElement {
             buildTemplateHelperBadge
         );
 
+        Coveo.TemplateHelpers.registerTemplateHelper(
+            "breadcrumbs",
+            buildTemplateHelperBreadcrumbs
+        );
+
+        Coveo.TemplateHelpers.registerTemplateHelper(
+            "metabreadcrumbs",
+            buildTemplateHelperMetaBreadcrumbs
+        );
+
+        Coveo.TemplateHelpers.registerTemplateHelper(
+            "uriBreadcrumbs",
+            buildTemplateHelperUriBreadcrumbs
+        );
+
         Coveo.init(this.root);
     }
 
@@ -235,6 +491,7 @@ export default class SearchResults extends LightningElement {
             if (Object.prototype.hasOwnProperty.call(window, "Coveo")) {
                 this.initializeCoveo();
             } else {
+                // eslint-disable-next-line @lwc/lwc/no-document-query
                 const script = document.querySelector("script.coveo-script");
                 script?.addEventListener("load", () => {
                     this.initializeCoveo();

package/src/modules/dx/stepSequence/stepSequence.ts

@@ -9,6 +9,7 @@ import cx from "classnames";
 export default class StepSequence extends LightningElement {
     @api animateTransitions = false;
     @api communicateStepChanges = false;
+    @api containerScrollToId = "";
     @api forceInitiallyVisible = false;
     @api initialStepIndex: string | undefined;
     @api optimizePositionAfterAnimation = false;
@@ -39,15 +40,9 @@ export default class StepSequence extends LightningElement {
 
         if (this.useHistory) {
             this.defaultScrollRestorationValue = history.scrollRestoration;
-            history.scrollRestoration = "manual";
-            history.replaceState(
-                {
-                    ...window.history.state,
-                    currentStepIndex: this.currentStepIndex
-                },
-                ""
-            );
+            history.scrollRestoration = "manual"; // Step component must override scroll behavior to work properly with history and maintain scrollTo behavior of component
             window.addEventListener("popstate", this.handleHistoryPopstate);
+            window.addEventListener("hashchange", this.handleHashChange);
         }
 
         if (this.sessionStorageId) {
@@ -87,6 +82,7 @@ export default class StepSequence extends LightningElement {
 
     disconnectedCallback() {
         window.removeEventListener("popstate", this.handleHistoryPopstate);
+        window.removeEventListener("hashchange", this.handleHashChange);
         this.removeEventListener("transitionend", this.handleTransitionEnd);
         history.scrollRestoration = this.defaultScrollRestorationValue;
     }
@@ -166,6 +162,17 @@ export default class StepSequence extends LightningElement {
         }
 
         if (this.useHistory && updateHistory) {
+            if (typeof history.state?.currentStepIndex !== "number") {
+                // This is a "new" interaction with the step component, so we store the current
+                // component state in history so that going back from the next step works right
+                history.pushState(
+                    {
+                        currentStepIndex: this.currentStepIndex
+                    },
+                    "",
+                    this.containerScrollToId // update browser hash for correct "feel" to in-page navigation
+                );
+            }
             history.pushState(
                 {
                     currentStepIndex: nextStepIndex
@@ -247,9 +254,34 @@ export default class StepSequence extends LightningElement {
     }
 
     handleHistoryPopstate = ({ state }: PopStateEvent) => {
-        if (typeof state?.currentStepIndex === "number") {
-            this.remeasureSteps();
-            this.changeActiveStep(state.currentStepIndex, false);
+        if (
+            typeof state?.currentStepIndex !== "number" ||
+            state.currentStepIndex === this.currentStepIndex
+        ) {
+            // This history item is not a step change, so bail early.
+            return;
+        }
+
+        this.remeasureSteps();
+        this.changeActiveStep(state.currentStepIndex, false);
+        this.scrollToStepTop();
+    };
+
+    handleHashChange = ({ newURL }: HashChangeEvent) => {
+        const newHash = new URL(newURL).hash;
+        const oldScrollValue = history.state?.scroll?.value;
+
+        if (typeof oldScrollValue === "number") {
+            window.scrollTo({
+                top: oldScrollValue
+            });
+        } else if (newHash) {
+            document.querySelector(newHash)?.scrollIntoView();
+        } else {
+            // No hash and no old scroll value means this was the initial history item
+            window.scrollTo({
+                top: 0
+            });
         }
     };