@salesforcedevs/dx-components 1.3.217 → 1.3.218

package/package.json

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

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/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
+            });
         }
     };