@salesforcedevs/dx-components 1.3.20 → 1.3.22

package/lwc.config.json

@@ -61,6 +61,7 @@
         "dx/popover",
         "dx/radioGroup",
         "dx/relativeDateTime",
+        "dx/scrollManager",
         "dx/searchResults",
         "dx/section",
         "dx/sectionSignup",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "1.3.20",
+    "version": "1.3.22",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
@@ -38,5 +38,5 @@
         "eventsourcemock": "^2.0.0",
         "luxon": "^3.1.0"
     },
-    "gitHead": "fd75928b1271710415ebcde0ae715f7442bc0a99"
+    "gitHead": "78accbacab7e5ff5cc7cf327092884064a86d78f"
 }

package/src/modules/dx/header/header.html

@@ -39,7 +39,7 @@
             </div>
             <div class="header_l2">
                 <div class="header_l2_group header_l2_group-title">
-                    <a href="/" class="home-link">
+                    <a href="/" class="home-link" if:true={isValidSubtitle}>
                         <dx-icon
                             class="brand-icon"
                             if:true={isValidBrand}

package/src/modules/dx/header/header.ts

@@ -14,4 +14,8 @@ export default class Header extends HeaderBase {
     protected mobileBreakpoint(): string {
         return "768px";
     }
+
+    get isValidSubtitle() {
+        return this.isValidBrand || this.subtitle;
+    }
 }

package/src/modules/dx/scrollManager/scrollManager.html

@@ -0,0 +1 @@
+<template></template>

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

@@ -0,0 +1,105 @@
+import { LightningElement } from "lwc";
+
+const RESTORE_SCROLL_EVENT_NAME = "restore-scroll";
+const LOAD_TIME_SCROLL_RESTORE_DELAY = 750;
+
+declare module globalThis {
+    let singletonScrollManagerRendered: boolean;
+    let singletonScrollManagerConnected: boolean;
+}
+// mostly components shouldn't be using this, but there are a few exceptions such as amfReference
+export const restoreScroll = () => {
+    document.body.scrollTop = document.documentElement.scrollTop =
+        window.history.state?.scroll.value;
+};
+
+export default class ScrollManager extends LightningElement {
+    /*
+        WARNING: Dark Magic(TM) follows. This code is likely to be unreliable if:
+            - Our load times significantly change (in this case, LOAD_TIME_SCROLL_RESTORE_DELAY may need to be adjusted)
+            - Any other components attempt to manipulate the body scroll (including #a links) before LOAD_TIME_SCROLL_RESTORE_DELAY has expired
+
+        This Dark Magic(TM) was required because of the following super annoying race condition occuring while trying to restore scroll position:
+            1. Load a page on our site (reproducible consistently at time of writing at https://developer.salesforce.com)
+            2. Scroll down somewhere (remember where)
+            3. Navigate to another page
+            4. Navigate back/forward/back, using the browser forward/back buttons (sometimes it takes a few tries to reproduce the race condition)
+            5. If the page you're on takes long enough for its components to finish rendering asynchronously, sometimes your scroll position will be incorrect 
+                (until the second scroll restore is called. To see the really bad behavior, simply remove the window.setTimeout bit)
+        This is because basically it scrolls you down a bit, then a component gets bigger above you as it finishes rendering
+        This pushes your whole view down, so unless we do this Dark Magic(TM) where we attempt to restore scroll _again_
+        after some reasonable interval, your window will be in the wrong spot when everything finishes rendering
+    */
+
+    protected scrollCount = 0; // this is for dark magic, basically we lock the user out of scrolling in the first quarter second, unless they really mean it. We do this because load timings mean that the scroll can get messed up in that period
+    protected scrollUnlocked = false;
+
+    renderedCallback() {
+        if (!globalThis.singletonScrollManagerRendered) {
+            globalThis.singletonScrollManagerRendered = true;
+            if (
+                window.history.state?.scroll.docSize ===
+                document.body.scrollHeight
+            ) {
+                // only do this if loading is complete and the scrollHeight matches expectations
+                // otherwise, we're likely still loading, so just chill to avoid jumping around so much
+                restoreScroll();
+            } else {
+                window.setTimeout(() => {
+                    // sometimes loading is slow, so we may want to reset the scroll to
+                    // the correct position after loading is complete, to avoid weird behavior
+                    // but only if the user hasn't scrolled around in the meantime
+                    if (!this.scrollUnlocked) {
+                        restoreScroll();
+                        this.scrollUnlocked = true;
+                    }
+                }, LOAD_TIME_SCROLL_RESTORE_DELAY);
+            }
+        } else {
+            console.error(
+                "Multiple <dx-scroll-manager>s detected, this should never be the case."
+            );
+        }
+    }
+
+    connectedCallback(): void {
+        if (!globalThis.singletonScrollManagerConnected) {
+            globalThis.singletonScrollManagerConnected = true;
+            window.addEventListener(RESTORE_SCROLL_EVENT_NAME, restoreScroll);
+
+            document.body.addEventListener("scroll", this.manualScrollListener);
+        } else {
+            console.error(
+                "Multiple <dx-scroll-manager>s detected, this should never be the case."
+            );
+        }
+    }
+
+    saveScroll = () => {
+        window.history.replaceState(
+            {
+                scroll: {
+                    value: document.body.scrollTop,
+                    docSize: document.body.scrollHeight
+                }
+            },
+            "",
+            window.location.href
+        );
+    };
+
+    manualScrollListener = () => {
+        if (this.scrollCount < 5) {
+            this.scrollCount++;
+        } else {
+            this.scrollUnlocked = true;
+        }
+        if (this.scrollUnlocked) {
+            this.saveScroll();
+        }
+    };
+
+    disconnectedCallback(): void {
+        window.removeEventListener(RESTORE_SCROLL_EVENT_NAME, restoreScroll);
+    }
+}

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

@@ -197,8 +197,8 @@ li.coveo-dynamic-facet-breadcrumb-value-list-item {
 
 .CoveoSort.coveo-selected,
 .CoveoSort.coveo-selected:hover {
-    color: var(--dx-g-blue-vibrant-50);
-    border-bottom-color: var(--dx-g-blue-vibrant-50);
+    color: var(--dx-g-blue-vibrant-40);
+    border-bottom-color: var(--dx-g-blue-vibrant-40);
 }
 
 .CoveoBreadcrumb {

package/src/modules/dx/tbidAvatarButton/tbidAvatarButton.css

@@ -1,10 +1,10 @@
 @import "dxHelpers/reset";
 
 :host {
-    --dx-c-button-custom-color: var(--dx-g-blue-vibrant-50);
+    --dx-c-button-custom-color: var(--dx-g-blue-vibrant-40);
     --dx-c-button-custom-background: transparent;
     --dx-c-button-custom-border: 1px solid transparent;
-    --dx-c-button-custom-color-hover: var(--dx-g-blue-vibrant-50);
+    --dx-c-button-custom-color-hover: var(--dx-g-blue-vibrant-40);
     --dx-c-button-custom-background-hover: var(--dx-g-cloud-blue-vibrant-90);
     --dx-c-button-custom-border-hover: var(--dx-g-cloud-blue-vibrant-90);
     --dx-c-slot-empty-width: max-content;