@nok-integration/storefront-react 0.20.7 → 0.20.8

package/dist/index.mjs

@@ -1,6 +1,6 @@
 "use client";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { useContext, useEffect, useState, useRef, useCallback, useMemo, createContext, forwardRef, Fragment as Fragment$1 } from "react";
+import { useContext, useEffect, useState, useRef, useCallback, useMemo, createContext, forwardRef, useLayoutEffect, Fragment as Fragment$1 } from "react";
 var client = {};
 var catalog = {};
 var zod = {};
@@ -5189,8 +5189,8 @@ function resolveAssetUrl(src, base) {
 const MAX_AGE_MS = 5 * 6e4;
 const CAPACITY = 60;
 class ProductCache {
-  constructor(now2 = () => Date.now()) {
-    this.now = now2;
+  constructor(now = () => Date.now()) {
+    this.now = now;
   }
   now;
   entries = /* @__PURE__ */ new Map();
@@ -5702,17 +5702,16 @@ function useTopOffset(ref, property, enabled = true) {
     };
   }, [ref, property, enabled]);
 }
-const HOLD_MS = 1e3;
-const TRAVERSAL_WINDOW_MS = 1e3;
-const now = () => typeof performance !== "undefined" ? performance.now() : Date.now();
-let lastTraversal = -Infinity;
-if (typeof window !== "undefined") {
-  window.addEventListener("popstate", () => {
-    lastTraversal = now();
-  });
-}
-function followsTraversal() {
-  return now() - lastTraversal < TRAVERSAL_WINDOW_MS;
+const HOLD_MS = 2500;
+function withoutRestoration() {
+  const history = typeof window !== "undefined" ? window.history : void 0;
+  if (!history || !("scrollRestoration" in history)) return () => {
+  };
+  const previous = history.scrollRestoration;
+  history.scrollRestoration = "manual";
+  return () => {
+    history.scrollRestoration = previous;
+  };
 }
 const RELEASES = ["touchstart", "wheel", "keydown", "pointerdown"];
 function anchorTop(shouldHold = () => true) {
@@ -5741,6 +5740,7 @@ function anchorTop(shouldHold = () => true) {
   });
   return release;
 }
+const useMountEffect$1 = typeof window === "undefined" ? useEffect : useLayoutEffect;
 function documentTop(el) {
   let top2 = 0;
   for (let node = el; node; node = node.offsetParent) {
@@ -5752,11 +5752,15 @@ function beginsOnTheFirstViewport(el) {
   return documentTop(el) < window.innerHeight;
 }
 function useScreenAnchor(ref, enabled = true) {
-  useEffect(() => {
+  useMountEffect$1(() => {
     const el = ref.current;
     if (!el || !enabled) return;
-    if (followsTraversal()) return;
-    return anchorTop(() => beginsOnTheFirstViewport(el));
+    const restore = withoutRestoration();
+    const release = anchorTop(() => beginsOnTheFirstViewport(el));
+    return () => {
+      release();
+      restore();
+    };
   }, [ref, enabled]);
 }
 const ShopSurface = forwardRef(function ShopSurface2({ tone, fill: fill2 = false, children, className, ...rest }, ref) {
@@ -10361,14 +10365,14 @@ function formatRemaining(ms) {
   return `${hh}:${mm}:${ss}`;
 }
 function PromoBanner({ promo: promo2 }) {
-  const [now2, setNow] = useState(null);
+  const [now, setNow] = useState(null);
   useEffect(() => {
     if (!promo2.ends_at) return;
     setNow(Date.now());
     const id = setInterval(() => setNow(Date.now()), 1e3);
     return () => clearInterval(id);
   }, [promo2.ends_at]);
-  const remaining = promo2.ends_at && now2 !== null ? new Date(promo2.ends_at).getTime() - now2 : null;
+  const remaining = promo2.ends_at && now !== null ? new Date(promo2.ends_at).getTime() - now : null;
   const showTimer = remaining !== null && remaining > 0;
   return jsxs("div", {
     className: styles$b.banner,
@@ -11277,8 +11281,9 @@ const styles$2 = {
   cta,
   mosaic
 };
+const useMountEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
 function useDocumentSnap(ref, enabled = true) {
-  useEffect(() => {
+  useMountEffect(() => {
     const el = ref.current;
     if (!el || !enabled || typeof document === "undefined") return;
     const root2 = document.documentElement;
@@ -11287,11 +11292,9 @@ function useDocumentSnap(ref, enabled = true) {
     root2.style.scrollSnapType = "y mandatory";
     root2.style.scrollPaddingTop = "0px";
     const top2 = () => window.scrollTo(0, 0);
-    const entered = !followsTraversal();
-    if (entered) top2();
-    const frame2 = entered && typeof window.requestAnimationFrame === "function" ? window.requestAnimationFrame(top2) : null;
-    const release = entered ? anchorTop() : () => {
-    };
+    top2();
+    const frame2 = typeof window.requestAnimationFrame === "function" ? window.requestAnimationFrame(top2) : null;
+    const release = anchorTop();
     const history = window.history;
     const previousRestoration = history && "scrollRestoration" in history ? history.scrollRestoration : null;
     if (previousRestoration !== null) history.scrollRestoration = "manual";

package/dist/standalone/storefront.mjs

@@ -1,6 +1,6 @@
 "use client";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { useContext, useEffect, useState, useRef, useCallback, useMemo, createContext, forwardRef, Fragment as Fragment$1 } from "react";
+import { useContext, useEffect, useState, useRef, useCallback, useMemo, createContext, forwardRef, useLayoutEffect, Fragment as Fragment$1 } from "react";
 var client = {};
 var catalog = {};
 var zod = {};
@@ -5189,8 +5189,8 @@ function resolveAssetUrl(src, base) {
 const MAX_AGE_MS = 5 * 6e4;
 const CAPACITY = 60;
 class ProductCache {
-  constructor(now2 = () => Date.now()) {
-    this.now = now2;
+  constructor(now = () => Date.now()) {
+    this.now = now;
   }
   now;
   entries = /* @__PURE__ */ new Map();
@@ -5702,17 +5702,16 @@ function useTopOffset(ref, property, enabled = true) {
     };
   }, [ref, property, enabled]);
 }
-const HOLD_MS = 1e3;
-const TRAVERSAL_WINDOW_MS = 1e3;
-const now = () => typeof performance !== "undefined" ? performance.now() : Date.now();
-let lastTraversal = -Infinity;
-if (typeof window !== "undefined") {
-  window.addEventListener("popstate", () => {
-    lastTraversal = now();
-  });
-}
-function followsTraversal() {
-  return now() - lastTraversal < TRAVERSAL_WINDOW_MS;
+const HOLD_MS = 2500;
+function withoutRestoration() {
+  const history = typeof window !== "undefined" ? window.history : void 0;
+  if (!history || !("scrollRestoration" in history)) return () => {
+  };
+  const previous = history.scrollRestoration;
+  history.scrollRestoration = "manual";
+  return () => {
+    history.scrollRestoration = previous;
+  };
 }
 const RELEASES = ["touchstart", "wheel", "keydown", "pointerdown"];
 function anchorTop(shouldHold = () => true) {
@@ -5741,6 +5740,7 @@ function anchorTop(shouldHold = () => true) {
   });
   return release;
 }
+const useMountEffect$1 = typeof window === "undefined" ? useEffect : useLayoutEffect;
 function documentTop(el) {
   let top2 = 0;
   for (let node = el; node; node = node.offsetParent) {
@@ -5752,11 +5752,15 @@ function beginsOnTheFirstViewport(el) {
   return documentTop(el) < window.innerHeight;
 }
 function useScreenAnchor(ref, enabled = true) {
-  useEffect(() => {
+  useMountEffect$1(() => {
     const el = ref.current;
     if (!el || !enabled) return;
-    if (followsTraversal()) return;
-    return anchorTop(() => beginsOnTheFirstViewport(el));
+    const restore = withoutRestoration();
+    const release = anchorTop(() => beginsOnTheFirstViewport(el));
+    return () => {
+      release();
+      restore();
+    };
   }, [ref, enabled]);
 }
 const ShopSurface = forwardRef(function ShopSurface2({ tone, fill: fill2 = false, children, className, ...rest }, ref) {
@@ -10361,14 +10365,14 @@ function formatRemaining(ms) {
   return `${hh}:${mm}:${ss}`;
 }
 function PromoBanner({ promo: promo2 }) {
-  const [now2, setNow] = useState(null);
+  const [now, setNow] = useState(null);
   useEffect(() => {
     if (!promo2.ends_at) return;
     setNow(Date.now());
     const id = setInterval(() => setNow(Date.now()), 1e3);
     return () => clearInterval(id);
   }, [promo2.ends_at]);
-  const remaining = promo2.ends_at && now2 !== null ? new Date(promo2.ends_at).getTime() - now2 : null;
+  const remaining = promo2.ends_at && now !== null ? new Date(promo2.ends_at).getTime() - now : null;
   const showTimer = remaining !== null && remaining > 0;
   return jsxs("div", {
     className: styles$b.banner,
@@ -11277,8 +11281,9 @@ const styles$2 = {
   cta,
   mosaic
 };
+const useMountEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
 function useDocumentSnap(ref, enabled = true) {
-  useEffect(() => {
+  useMountEffect(() => {
     const el = ref.current;
     if (!el || !enabled || typeof document === "undefined") return;
     const root2 = document.documentElement;
@@ -11287,11 +11292,9 @@ function useDocumentSnap(ref, enabled = true) {
     root2.style.scrollSnapType = "y mandatory";
     root2.style.scrollPaddingTop = "0px";
     const top2 = () => window.scrollTo(0, 0);
-    const entered = !followsTraversal();
-    if (entered) top2();
-    const frame2 = entered && typeof window.requestAnimationFrame === "function" ? window.requestAnimationFrame(top2) : null;
-    const release = entered ? anchorTop() : () => {
-    };
+    top2();
+    const frame2 = typeof window.requestAnimationFrame === "function" ? window.requestAnimationFrame(top2) : null;
+    const release = anchorTop();
     const history = window.history;
     const previousRestoration = history && "scrollRestoration" in history ? history.scrollRestoration : null;
     if (previousRestoration !== null) history.scrollRestoration = "manual";

package/package.json

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