@nok-integration/storefront-react 0.20.16 → 0.20.17

package/dist/index.mjs

@@ -5189,6 +5189,60 @@ function requireClient() {
   return client;
 }
 var clientExports = requireClient();
+const TOP = {
+  doc: 0,
+  pane: 0
+};
+const places = /* @__PURE__ */ new Map();
+let returnedTo = null;
+function here() {
+  if (typeof window === "undefined") return "";
+  const { pathname, search, hash } = window.location;
+  return pathname + search + hash;
+}
+if (typeof window !== "undefined") {
+  window.addEventListener("popstate", () => {
+    returnedTo = here();
+  }, {
+    capture: true
+  });
+}
+function cameBack() {
+  return returnedTo !== null && returnedTo === here();
+}
+function returnOffset(key) {
+  if (!cameBack() || returnedTo !== key) return null;
+  return places.get(key) ?? null;
+}
+function settleReturn() {
+  returnedTo = null;
+}
+function remember(key, offset) {
+  places.set(key, offset);
+}
+let latestScreen = 0;
+let currentScreen = 0;
+function claimScreen() {
+  latestScreen += 1;
+  currentScreen = latestScreen;
+  return currentScreen;
+}
+function leaveScreen() {
+  currentScreen = 0;
+  settleReturn();
+}
+function isCurrentScreen(screen2) {
+  return screen2 === currentScreen;
+}
+function placeOf(pane) {
+  return {
+    doc: window.scrollY || document.documentElement.scrollTop || 0,
+    pane: pane ? pane.scrollTop : 0
+  };
+}
+function reached(now, at) {
+  return Math.abs(now.doc - at.doc) <= 1 && Math.abs(now.pane - at.pane) <= 1;
+}
 const HOLD_MS = 2500;
 function withoutRestoration() {
   const history = typeof window !== "undefined" ? window.history : void 0;
@@ -5201,11 +5255,14 @@ function withoutRestoration() {
   };
 }
 function scrollToTop(box2) {
+  scrollToOffset(0, box2);
+}
+function scrollToOffset(offset, box2) {
   const target = box2 ?? document.documentElement;
   const behaviour = target.style.scrollBehavior;
   target.style.scrollBehavior = "auto";
-  if (box2) box2.scrollTop = 0;
-  else window.scrollTo(0, 0);
+  if (box2) box2.scrollTop = offset;
+  else window.scrollTo(0, offset);
   target.style.scrollBehavior = behaviour;
 }
 function scrollerOf(el) {
@@ -5231,17 +5288,20 @@ const holds = /* @__PURE__ */ new Set();
 function releaseHolds() {
   for (const end2 of Array.from(holds)) end2();
 }
-function anchorTop(onMoved = () => true, onEnd, box2 = null) {
+function anchorTop(onMoved = () => true, onEnd, box2 = null, at = TOP) {
   let released = false;
   let touching = false;
   const top2 = () => {
     if (released || touching) return;
     const document_ = window.scrollY || document.documentElement.scrollTop || 0;
     const pane = box2 ? box2.scrollTop : 0;
-    if (document_ <= 0 && pane <= 0) return;
+    const off = (now, want) => want === 0 ? now > 0 : Math.abs(now - want) > 1;
+    const documentOff = off(document_, at.doc);
+    const paneOff = box2 !== null && off(pane, at.pane);
+    if (!documentOff && !paneOff) return;
     if (!onMoved()) return;
-    if (document_ > 0) scrollToTop();
-    if (box2 && pane > 0) scrollToTop(box2);
+    if (documentOff) scrollToOffset(at.doc);
+    if (box2 && paneOff) scrollToOffset(at.pane, box2);
   };
   const down = (event) => {
     if (event.type !== "pointerdown" || event.pointerType === "touch") {
@@ -5321,6 +5381,7 @@ function onResize(el, resized) {
 }
 function anchorToTop() {
   if (typeof window === "undefined") return;
+  leaveScreen();
   const top2 = () => scrollToTop();
   top2();
   if (typeof window.requestAnimationFrame === "function") window.requestAnimationFrame(top2);
@@ -5867,22 +5928,62 @@ function useScreenAnchor(ref, enabled = true) {
     if (!el || !enabled) return;
     const restore = withoutRestoration();
     let moved = false;
-    const hold = () => anchorTop(() => beginsOnTheFirstViewport(el), (end2) => {
-      if (end2 === "moved") moved = true;
-    }, scrollerOf(el));
-    let release = hold();
-    const again = () => {
+    let holding = false;
+    let returning = false;
+    let at = TOP;
+    const settle = () => {
+      returning = false;
+      settleReturn();
+    };
+    const hold = (entered) => {
+      if (entered) {
+        const back = returnOffset(here());
+        returning = back !== null;
+        at = back ?? TOP;
+      }
+      holding = true;
+      return anchorTop(() => beginsOnTheFirstViewport(el), (end2) => {
+        holding = false;
+        if (end2 === "moved") moved = true;
+        if (returning && end2 === "moved") settle();
+      }, scrollerOf(el), at);
+    };
+    let screen2 = claimScreen();
+    let release = hold(true);
+    const again = (entered) => {
       release();
-      release = hold();
+      release = hold(entered);
     };
     const unobserve = onReveal(el, () => {
       moved = false;
-      again();
+      screen2 = claimScreen();
+      again(true);
     });
     const settled = onResize(el, () => {
-      if (!moved) again();
+      if (!moved) again(false);
+    });
+    const fan = (event) => {
+      if (movesThePage(event)) moved = true;
+    };
+    for (const type of RELEASES) window.addEventListener(type, fan, {
+      passive: true
+    });
+    const note2 = () => {
+      if (!isCurrentScreen(screen2)) return;
+      const now = placeOf(scrollerOf(el));
+      if (returning && reached(now, at)) settle();
+      if (holding) return;
+      remember(here(), now);
+    };
+    document.addEventListener("scroll", note2, {
+      capture: true,
+      passive: true
     });
     return () => {
+      for (const type of RELEASES) window.removeEventListener(type, fan);
+      document.removeEventListener("scroll", note2, {
+        capture: true
+      });
       settled();
       unobserve();
       release();
@@ -11658,15 +11759,26 @@ function useDocumentSnap(ref, enabled = true) {
         passive: true
       });
     };
+    let at = TOP;
+    let returning = false;
+    let holding = false;
+    const settle = () => {
+      returning = false;
+      settleReturn();
+    };
     const top2 = () => {
-      scrollToTop();
-      if (pane) scrollToTop(pane);
+      scrollToOffset(at.doc);
+      if (pane) scrollToOffset(at.pane, pane);
     };
     let frame2 = null;
     let release = () => {
     };
     const anchor2 = () => {
       release();
+      const back = returnOffset(here());
+      returning = back !== null;
+      at = back ?? TOP;
+      holding = true;
       if (frame2 !== null && typeof window.cancelAnimationFrame === "function") {
         window.cancelAnimationFrame(frame2);
       }
@@ -11682,18 +11794,42 @@ function useDocumentSnap(ref, enabled = true) {
           snapOnAtTouch();
         }
         return true;
-      }, void 0, pane);
+      }, (end2) => {
+        holding = false;
+        if (returning && end2 === "moved") settle();
+      }, pane, at);
     };
+    let screen2 = claimScreen();
     anchor2();
     const history = window.history;
     const previousRestoration = history && "scrollRestoration" in history ? history.scrollRestoration : null;
     if (previousRestoration !== null) history.scrollRestoration = "manual";
     const onPageShow = (event) => {
-      if (event.persisted) anchor2();
+      if (event.persisted) {
+        screen2 = claimScreen();
+        anchor2();
+      }
     };
     window.addEventListener("pageshow", onPageShow);
-    const unobserve = onReveal(el, anchor2);
+    const unobserve = onReveal(el, () => {
+      screen2 = claimScreen();
+      anchor2();
+    });
+    const note2 = () => {
+      if (!isCurrentScreen(screen2)) return;
+      const now = placeOf(pane);
+      if (returning && reached(now, at)) settle();
+      if (holding) return;
+      remember(here(), now);
+    };
+    document.addEventListener("scroll", note2, {
+      capture: true,
+      passive: true
+    });
     return () => {
+      document.removeEventListener("scroll", note2, {
+        capture: true
+      });
       unobserve();
       release();
       if (frame2 !== null && typeof window.cancelAnimationFrame === "function") {

package/dist/standalone/storefront.mjs

@@ -5189,6 +5189,60 @@ function requireClient() {
   return client;
 }
 var clientExports = requireClient();
+const TOP = {
+  doc: 0,
+  pane: 0
+};
+const places = /* @__PURE__ */ new Map();
+let returnedTo = null;
+function here() {
+  if (typeof window === "undefined") return "";
+  const { pathname, search, hash } = window.location;
+  return pathname + search + hash;
+}
+if (typeof window !== "undefined") {
+  window.addEventListener("popstate", () => {
+    returnedTo = here();
+  }, {
+    capture: true
+  });
+}
+function cameBack() {
+  return returnedTo !== null && returnedTo === here();
+}
+function returnOffset(key) {
+  if (!cameBack() || returnedTo !== key) return null;
+  return places.get(key) ?? null;
+}
+function settleReturn() {
+  returnedTo = null;
+}
+function remember(key, offset) {
+  places.set(key, offset);
+}
+let latestScreen = 0;
+let currentScreen = 0;
+function claimScreen() {
+  latestScreen += 1;
+  currentScreen = latestScreen;
+  return currentScreen;
+}
+function leaveScreen() {
+  currentScreen = 0;
+  settleReturn();
+}
+function isCurrentScreen(screen2) {
+  return screen2 === currentScreen;
+}
+function placeOf(pane) {
+  return {
+    doc: window.scrollY || document.documentElement.scrollTop || 0,
+    pane: pane ? pane.scrollTop : 0
+  };
+}
+function reached(now, at) {
+  return Math.abs(now.doc - at.doc) <= 1 && Math.abs(now.pane - at.pane) <= 1;
+}
 const HOLD_MS = 2500;
 function withoutRestoration() {
   const history = typeof window !== "undefined" ? window.history : void 0;
@@ -5201,11 +5255,14 @@ function withoutRestoration() {
   };
 }
 function scrollToTop(box2) {
+  scrollToOffset(0, box2);
+}
+function scrollToOffset(offset, box2) {
   const target = box2 ?? document.documentElement;
   const behaviour = target.style.scrollBehavior;
   target.style.scrollBehavior = "auto";
-  if (box2) box2.scrollTop = 0;
-  else window.scrollTo(0, 0);
+  if (box2) box2.scrollTop = offset;
+  else window.scrollTo(0, offset);
   target.style.scrollBehavior = behaviour;
 }
 function scrollerOf(el) {
@@ -5231,17 +5288,20 @@ const holds = /* @__PURE__ */ new Set();
 function releaseHolds() {
   for (const end2 of Array.from(holds)) end2();
 }
-function anchorTop(onMoved = () => true, onEnd, box2 = null) {
+function anchorTop(onMoved = () => true, onEnd, box2 = null, at = TOP) {
   let released = false;
   let touching = false;
   const top2 = () => {
     if (released || touching) return;
     const document_ = window.scrollY || document.documentElement.scrollTop || 0;
     const pane = box2 ? box2.scrollTop : 0;
-    if (document_ <= 0 && pane <= 0) return;
+    const off = (now, want) => want === 0 ? now > 0 : Math.abs(now - want) > 1;
+    const documentOff = off(document_, at.doc);
+    const paneOff = box2 !== null && off(pane, at.pane);
+    if (!documentOff && !paneOff) return;
     if (!onMoved()) return;
-    if (document_ > 0) scrollToTop();
-    if (box2 && pane > 0) scrollToTop(box2);
+    if (documentOff) scrollToOffset(at.doc);
+    if (box2 && paneOff) scrollToOffset(at.pane, box2);
   };
   const down = (event) => {
     if (event.type !== "pointerdown" || event.pointerType === "touch") {
@@ -5321,6 +5381,7 @@ function onResize(el, resized) {
 }
 function anchorToTop() {
   if (typeof window === "undefined") return;
+  leaveScreen();
   const top2 = () => scrollToTop();
   top2();
   if (typeof window.requestAnimationFrame === "function") window.requestAnimationFrame(top2);
@@ -5867,22 +5928,62 @@ function useScreenAnchor(ref, enabled = true) {
     if (!el || !enabled) return;
     const restore = withoutRestoration();
     let moved = false;
-    const hold = () => anchorTop(() => beginsOnTheFirstViewport(el), (end2) => {
-      if (end2 === "moved") moved = true;
-    }, scrollerOf(el));
-    let release = hold();
-    const again = () => {
+    let holding = false;
+    let returning = false;
+    let at = TOP;
+    const settle = () => {
+      returning = false;
+      settleReturn();
+    };
+    const hold = (entered) => {
+      if (entered) {
+        const back = returnOffset(here());
+        returning = back !== null;
+        at = back ?? TOP;
+      }
+      holding = true;
+      return anchorTop(() => beginsOnTheFirstViewport(el), (end2) => {
+        holding = false;
+        if (end2 === "moved") moved = true;
+        if (returning && end2 === "moved") settle();
+      }, scrollerOf(el), at);
+    };
+    let screen2 = claimScreen();
+    let release = hold(true);
+    const again = (entered) => {
       release();
-      release = hold();
+      release = hold(entered);
     };
     const unobserve = onReveal(el, () => {
       moved = false;
-      again();
+      screen2 = claimScreen();
+      again(true);
     });
     const settled = onResize(el, () => {
-      if (!moved) again();
+      if (!moved) again(false);
+    });
+    const fan = (event) => {
+      if (movesThePage(event)) moved = true;
+    };
+    for (const type of RELEASES) window.addEventListener(type, fan, {
+      passive: true
+    });
+    const note2 = () => {
+      if (!isCurrentScreen(screen2)) return;
+      const now = placeOf(scrollerOf(el));
+      if (returning && reached(now, at)) settle();
+      if (holding) return;
+      remember(here(), now);
+    };
+    document.addEventListener("scroll", note2, {
+      capture: true,
+      passive: true
     });
     return () => {
+      for (const type of RELEASES) window.removeEventListener(type, fan);
+      document.removeEventListener("scroll", note2, {
+        capture: true
+      });
       settled();
       unobserve();
       release();
@@ -11658,15 +11759,26 @@ function useDocumentSnap(ref, enabled = true) {
         passive: true
       });
     };
+    let at = TOP;
+    let returning = false;
+    let holding = false;
+    const settle = () => {
+      returning = false;
+      settleReturn();
+    };
     const top2 = () => {
-      scrollToTop();
-      if (pane) scrollToTop(pane);
+      scrollToOffset(at.doc);
+      if (pane) scrollToOffset(at.pane, pane);
     };
     let frame2 = null;
     let release = () => {
     };
     const anchor2 = () => {
       release();
+      const back = returnOffset(here());
+      returning = back !== null;
+      at = back ?? TOP;
+      holding = true;
       if (frame2 !== null && typeof window.cancelAnimationFrame === "function") {
         window.cancelAnimationFrame(frame2);
       }
@@ -11682,18 +11794,42 @@ function useDocumentSnap(ref, enabled = true) {
           snapOnAtTouch();
         }
         return true;
-      }, void 0, pane);
+      }, (end2) => {
+        holding = false;
+        if (returning && end2 === "moved") settle();
+      }, pane, at);
     };
+    let screen2 = claimScreen();
     anchor2();
     const history = window.history;
     const previousRestoration = history && "scrollRestoration" in history ? history.scrollRestoration : null;
     if (previousRestoration !== null) history.scrollRestoration = "manual";
     const onPageShow = (event) => {
-      if (event.persisted) anchor2();
+      if (event.persisted) {
+        screen2 = claimScreen();
+        anchor2();
+      }
     };
     window.addEventListener("pageshow", onPageShow);
-    const unobserve = onReveal(el, anchor2);
+    const unobserve = onReveal(el, () => {
+      screen2 = claimScreen();
+      anchor2();
+    });
+    const note2 = () => {
+      if (!isCurrentScreen(screen2)) return;
+      const now = placeOf(pane);
+      if (returning && reached(now, at)) settle();
+      if (holding) return;
+      remember(here(), now);
+    };
+    document.addEventListener("scroll", note2, {
+      capture: true,
+      passive: true
+    });
     return () => {
+      document.removeEventListener("scroll", note2, {
+        capture: true
+      });
       unobserve();
       release();
       if (frame2 !== null && typeof window.cancelAnimationFrame === "function") {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nok-integration/storefront-react",
-  "version": "0.20.16",
+  "version": "0.20.17",
   "description": "Mountable React storefront components: catalogue, product detail and cart, mounted directly into a host DOM tree. No iframe.",
   "license": "UNLICENSED",
   "type": "module",