@nok-integration/storefront-react 0.20.11 → 0.20.12

package/dist/index.mjs

@@ -5175,9 +5175,113 @@ function requireClient() {
   return client;
 }
 var clientExports = requireClient();
+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;
+  };
+}
+function scrollToTop(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);
+  target.style.scrollBehavior = behaviour;
+}
+function scrollerOf(el) {
+  if (!el || typeof getComputedStyle !== "function") return null;
+  for (let node = el.parentElement; node; node = node.parentElement) {
+    if (node === document.documentElement) return null;
+    const { overflowY } = getComputedStyle(node);
+    if (overflowY !== "auto" && overflowY !== "scroll" && overflowY !== "overlay") continue;
+    if (node !== document.body) return node;
+    const root2 = getComputedStyle(document.documentElement).overflowY;
+    return root2 === "visible" || root2 === "" ? null : node;
+  }
+  return null;
+}
+const RELEASES = ["touchmove", "wheel", "keydown", "pointerdown"];
+function movesThePage(event) {
+  if (event.type === "pointerdown") return event.pointerType !== "touch";
+  return true;
+}
+const holds = /* @__PURE__ */ new Set();
+function releaseHolds() {
+  for (const end2 of Array.from(holds)) end2();
+}
+function anchorTop(onMoved = () => true, onEnd, box2 = null) {
+  let released = false;
+  const top2 = () => {
+    if (released) return;
+    const document_ = window.scrollY || document.documentElement.scrollTop || 0;
+    const pane = box2 ? box2.scrollTop : 0;
+    if (document_ <= 0 && pane <= 0) return;
+    if (!onMoved()) return;
+    if (document_ > 0) scrollToTop();
+    if (box2 && pane > 0) scrollToTop(box2);
+  };
+  const end2 = (how2) => {
+    if (released) return;
+    released = true;
+    holds.delete(moved);
+    if (frame2 !== null && typeof cancelAnimationFrame === "function") cancelAnimationFrame(frame2);
+    clearTimeout(timer2);
+    window.removeEventListener("scroll", top2);
+    box2?.removeEventListener("scroll", top2);
+    for (const type of RELEASES) window.removeEventListener(type, release);
+    onEnd?.(how2);
+  };
+  const release = (event) => {
+    if (movesThePage(event)) end2("moved");
+  };
+  const moved = () => end2("moved");
+  top2();
+  const frame2 = typeof requestAnimationFrame === "function" ? requestAnimationFrame(top2) : null;
+  const timer2 = setTimeout(() => end2("lapsed"), HOLD_MS);
+  window.addEventListener("scroll", top2, {
+    passive: true
+  });
+  box2?.addEventListener("scroll", top2, {
+    passive: true
+  });
+  for (const type of RELEASES) window.addEventListener(type, release, {
+    passive: true
+  });
+  holds.add(moved);
+  return () => end2("released");
+}
+function onReveal(el, revealed) {
+  if (typeof IntersectionObserver === "undefined") return () => {
+  };
+  let seen = false;
+  let visible = true;
+  const observer = new IntersectionObserver((entries) => {
+    const entry = entries[entries.length - 1];
+    if (!entry) return;
+    const now = entry.isIntersecting;
+    if (seen && now && !visible) revealed();
+    seen = true;
+    visible = now;
+  });
+  observer.observe(el);
+  return () => observer.disconnect();
+}
+function onResize(el, resized) {
+  if (typeof ResizeObserver === "undefined") return () => {
+  };
+  const observer = new ResizeObserver(() => resized());
+  observer.observe(el);
+  return () => observer.disconnect();
+}
 function anchorToTop() {
   if (typeof window === "undefined") return;
-  const top2 = () => window.scrollTo(0, 0);
+  const top2 = () => scrollToTop();
   top2();
   if (typeof window.requestAnimationFrame === "function") window.requestAnimationFrame(top2);
 }
@@ -5702,65 +5806,6 @@ function useTopOffset(ref, property, enabled = true) {
     };
   }, [ref, property, enabled]);
 }
-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 = ["touchmove", "wheel", "keydown", "pointerdown"];
-function movesThePage(event) {
-  if (event.type === "pointerdown") return event.pointerType !== "touch";
-  return true;
-}
-function anchorTop(onMoved = () => true) {
-  let released = false;
-  const top2 = () => {
-    if (released) return;
-    const scrolled2 = window.scrollY || document.documentElement.scrollTop || 0;
-    if (scrolled2 > 0 && onMoved()) window.scrollTo(0, 0);
-  };
-  const release = (event) => {
-    if (released) return;
-    if (event && !movesThePage(event)) return;
-    released = true;
-    if (frame2 !== null && typeof cancelAnimationFrame === "function") cancelAnimationFrame(frame2);
-    clearTimeout(timer2);
-    window.removeEventListener("scroll", top2);
-    for (const type of RELEASES) window.removeEventListener(type, release);
-  };
-  top2();
-  const frame2 = typeof requestAnimationFrame === "function" ? requestAnimationFrame(top2) : null;
-  const timer2 = setTimeout(release, HOLD_MS);
-  window.addEventListener("scroll", top2, {
-    passive: true
-  });
-  for (const type of RELEASES) window.addEventListener(type, release, {
-    passive: true
-  });
-  return () => release();
-}
-function onReveal(el, revealed) {
-  if (typeof IntersectionObserver === "undefined") return () => {
-  };
-  let seen = false;
-  let visible = true;
-  const observer = new IntersectionObserver((entries) => {
-    const entry = entries[entries.length - 1];
-    if (!entry) return;
-    const now = entry.isIntersecting;
-    if (seen && now && !visible) revealed();
-    seen = true;
-    visible = now;
-  });
-  observer.observe(el);
-  return () => observer.disconnect();
-}
 const useMountEffect$1 = typeof window === "undefined" ? useEffect : useLayoutEffect;
 function documentTop(el) {
   let top2 = 0;
@@ -5777,12 +5822,24 @@ function useScreenAnchor(ref, enabled = true) {
     const el = ref.current;
     if (!el || !enabled) return;
     const restore = withoutRestoration();
-    let release = anchorTop(() => beginsOnTheFirstViewport(el));
-    const unobserve = onReveal(el, () => {
+    let moved = false;
+    const hold = () => anchorTop(() => beginsOnTheFirstViewport(el), (end2) => {
+      if (end2 === "moved") moved = true;
+    }, scrollerOf(el));
+    let release = hold();
+    const again = () => {
       release();
-      release = anchorTop(() => beginsOnTheFirstViewport(el));
+      release = hold();
+    };
+    const unobserve = onReveal(el, () => {
+      moved = false;
+      again();
+    });
+    const settled = onResize(el, () => {
+      if (!moved) again();
     });
     return () => {
+      settled();
       unobserve();
       release();
       restore();
@@ -8015,9 +8072,10 @@ function OrderTrackingContent({ orderRef, locale: localeProp, onStartReturn, onO
     void load();
   }, [load]);
   const cancelled = order?.status === "cancelled";
+  const cancelledPage = useRef(null);
   useBrowserLayoutEffect(() => {
     if (!cancelled) return;
-    return anchorTop();
+    return anchorTop(void 0, void 0, scrollerOf(cancelledPage.current));
   }, [cancelled]);
   if (state === "loading") {
     return jsxs("div", {
@@ -8100,6 +8158,7 @@ function OrderTrackingContent({ orderRef, locale: localeProp, onStartReturn, onO
   if (order.status === "cancelled") {
     return jsxs("div", {
       className: styles$y.page,
+      ref: cancelledPage,
       children: [jsxs("div", {
         className: styles$y.cancelledHead,
         children: [jsx("h1", {
@@ -10725,6 +10784,7 @@ function ProductDetail({ product, inventory: inventory2, recommendations = [] })
   function ensureSelection() {
     if (needsSize) {
       setSizeError(true);
+      releaseHolds();
       sizeRef.current?.scrollIntoView({
         behavior: "smooth",
         block: "center"
@@ -10732,6 +10792,7 @@ function ProductDetail({ product, inventory: inventory2, recommendations = [] })
       return false;
     }
     if (needsColour) {
+      releaseHolds();
       colourRef.current?.scrollIntoView({
         behavior: "smooth",
         block: "center"
@@ -11424,7 +11485,8 @@ function useDocumentSnap(ref, enabled = true) {
   useMountEffect(() => {
     const el = ref.current;
     if (!el || !enabled || typeof document === "undefined") return;
-    const root2 = document.documentElement;
+    const pane = scrollerOf(el);
+    const root2 = pane ?? document.documentElement;
     const previousType = root2.style.scrollSnapType;
     const previousPadding = root2.style.scrollPaddingTop;
     root2.style.scrollPaddingTop = "0px";
@@ -11446,7 +11508,10 @@ function useDocumentSnap(ref, enabled = true) {
         passive: true
       });
     };
-    const top2 = () => window.scrollTo(0, 0);
+    const top2 = () => {
+      scrollToTop();
+      if (pane) scrollToTop(pane);
+    };
     let frame2 = null;
     let release = () => {
     };
@@ -11467,7 +11532,7 @@ function useDocumentSnap(ref, enabled = true) {
           snapOnAtTouch();
         }
         return true;
-      });
+      }, void 0, pane);
     };
     anchor2();
     const history = window.history;

package/dist/standalone/storefront.mjs

@@ -5175,9 +5175,113 @@ function requireClient() {
   return client;
 }
 var clientExports = requireClient();
+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;
+  };
+}
+function scrollToTop(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);
+  target.style.scrollBehavior = behaviour;
+}
+function scrollerOf(el) {
+  if (!el || typeof getComputedStyle !== "function") return null;
+  for (let node = el.parentElement; node; node = node.parentElement) {
+    if (node === document.documentElement) return null;
+    const { overflowY } = getComputedStyle(node);
+    if (overflowY !== "auto" && overflowY !== "scroll" && overflowY !== "overlay") continue;
+    if (node !== document.body) return node;
+    const root2 = getComputedStyle(document.documentElement).overflowY;
+    return root2 === "visible" || root2 === "" ? null : node;
+  }
+  return null;
+}
+const RELEASES = ["touchmove", "wheel", "keydown", "pointerdown"];
+function movesThePage(event) {
+  if (event.type === "pointerdown") return event.pointerType !== "touch";
+  return true;
+}
+const holds = /* @__PURE__ */ new Set();
+function releaseHolds() {
+  for (const end2 of Array.from(holds)) end2();
+}
+function anchorTop(onMoved = () => true, onEnd, box2 = null) {
+  let released = false;
+  const top2 = () => {
+    if (released) return;
+    const document_ = window.scrollY || document.documentElement.scrollTop || 0;
+    const pane = box2 ? box2.scrollTop : 0;
+    if (document_ <= 0 && pane <= 0) return;
+    if (!onMoved()) return;
+    if (document_ > 0) scrollToTop();
+    if (box2 && pane > 0) scrollToTop(box2);
+  };
+  const end2 = (how2) => {
+    if (released) return;
+    released = true;
+    holds.delete(moved);
+    if (frame2 !== null && typeof cancelAnimationFrame === "function") cancelAnimationFrame(frame2);
+    clearTimeout(timer2);
+    window.removeEventListener("scroll", top2);
+    box2?.removeEventListener("scroll", top2);
+    for (const type of RELEASES) window.removeEventListener(type, release);
+    onEnd?.(how2);
+  };
+  const release = (event) => {
+    if (movesThePage(event)) end2("moved");
+  };
+  const moved = () => end2("moved");
+  top2();
+  const frame2 = typeof requestAnimationFrame === "function" ? requestAnimationFrame(top2) : null;
+  const timer2 = setTimeout(() => end2("lapsed"), HOLD_MS);
+  window.addEventListener("scroll", top2, {
+    passive: true
+  });
+  box2?.addEventListener("scroll", top2, {
+    passive: true
+  });
+  for (const type of RELEASES) window.addEventListener(type, release, {
+    passive: true
+  });
+  holds.add(moved);
+  return () => end2("released");
+}
+function onReveal(el, revealed) {
+  if (typeof IntersectionObserver === "undefined") return () => {
+  };
+  let seen = false;
+  let visible = true;
+  const observer = new IntersectionObserver((entries) => {
+    const entry = entries[entries.length - 1];
+    if (!entry) return;
+    const now = entry.isIntersecting;
+    if (seen && now && !visible) revealed();
+    seen = true;
+    visible = now;
+  });
+  observer.observe(el);
+  return () => observer.disconnect();
+}
+function onResize(el, resized) {
+  if (typeof ResizeObserver === "undefined") return () => {
+  };
+  const observer = new ResizeObserver(() => resized());
+  observer.observe(el);
+  return () => observer.disconnect();
+}
 function anchorToTop() {
   if (typeof window === "undefined") return;
-  const top2 = () => window.scrollTo(0, 0);
+  const top2 = () => scrollToTop();
   top2();
   if (typeof window.requestAnimationFrame === "function") window.requestAnimationFrame(top2);
 }
@@ -5702,65 +5806,6 @@ function useTopOffset(ref, property, enabled = true) {
     };
   }, [ref, property, enabled]);
 }
-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 = ["touchmove", "wheel", "keydown", "pointerdown"];
-function movesThePage(event) {
-  if (event.type === "pointerdown") return event.pointerType !== "touch";
-  return true;
-}
-function anchorTop(onMoved = () => true) {
-  let released = false;
-  const top2 = () => {
-    if (released) return;
-    const scrolled2 = window.scrollY || document.documentElement.scrollTop || 0;
-    if (scrolled2 > 0 && onMoved()) window.scrollTo(0, 0);
-  };
-  const release = (event) => {
-    if (released) return;
-    if (event && !movesThePage(event)) return;
-    released = true;
-    if (frame2 !== null && typeof cancelAnimationFrame === "function") cancelAnimationFrame(frame2);
-    clearTimeout(timer2);
-    window.removeEventListener("scroll", top2);
-    for (const type of RELEASES) window.removeEventListener(type, release);
-  };
-  top2();
-  const frame2 = typeof requestAnimationFrame === "function" ? requestAnimationFrame(top2) : null;
-  const timer2 = setTimeout(release, HOLD_MS);
-  window.addEventListener("scroll", top2, {
-    passive: true
-  });
-  for (const type of RELEASES) window.addEventListener(type, release, {
-    passive: true
-  });
-  return () => release();
-}
-function onReveal(el, revealed) {
-  if (typeof IntersectionObserver === "undefined") return () => {
-  };
-  let seen = false;
-  let visible = true;
-  const observer = new IntersectionObserver((entries) => {
-    const entry = entries[entries.length - 1];
-    if (!entry) return;
-    const now = entry.isIntersecting;
-    if (seen && now && !visible) revealed();
-    seen = true;
-    visible = now;
-  });
-  observer.observe(el);
-  return () => observer.disconnect();
-}
 const useMountEffect$1 = typeof window === "undefined" ? useEffect : useLayoutEffect;
 function documentTop(el) {
   let top2 = 0;
@@ -5777,12 +5822,24 @@ function useScreenAnchor(ref, enabled = true) {
     const el = ref.current;
     if (!el || !enabled) return;
     const restore = withoutRestoration();
-    let release = anchorTop(() => beginsOnTheFirstViewport(el));
-    const unobserve = onReveal(el, () => {
+    let moved = false;
+    const hold = () => anchorTop(() => beginsOnTheFirstViewport(el), (end2) => {
+      if (end2 === "moved") moved = true;
+    }, scrollerOf(el));
+    let release = hold();
+    const again = () => {
       release();
-      release = anchorTop(() => beginsOnTheFirstViewport(el));
+      release = hold();
+    };
+    const unobserve = onReveal(el, () => {
+      moved = false;
+      again();
+    });
+    const settled = onResize(el, () => {
+      if (!moved) again();
     });
     return () => {
+      settled();
       unobserve();
       release();
       restore();
@@ -8015,9 +8072,10 @@ function OrderTrackingContent({ orderRef, locale: localeProp, onStartReturn, onO
     void load();
   }, [load]);
   const cancelled = order?.status === "cancelled";
+  const cancelledPage = useRef(null);
   useBrowserLayoutEffect(() => {
     if (!cancelled) return;
-    return anchorTop();
+    return anchorTop(void 0, void 0, scrollerOf(cancelledPage.current));
   }, [cancelled]);
   if (state === "loading") {
     return jsxs("div", {
@@ -8100,6 +8158,7 @@ function OrderTrackingContent({ orderRef, locale: localeProp, onStartReturn, onO
   if (order.status === "cancelled") {
     return jsxs("div", {
       className: styles$y.page,
+      ref: cancelledPage,
       children: [jsxs("div", {
         className: styles$y.cancelledHead,
         children: [jsx("h1", {
@@ -10725,6 +10784,7 @@ function ProductDetail({ product, inventory: inventory2, recommendations = [] })
   function ensureSelection() {
     if (needsSize) {
       setSizeError(true);
+      releaseHolds();
       sizeRef.current?.scrollIntoView({
         behavior: "smooth",
         block: "center"
@@ -10732,6 +10792,7 @@ function ProductDetail({ product, inventory: inventory2, recommendations = [] })
       return false;
     }
     if (needsColour) {
+      releaseHolds();
       colourRef.current?.scrollIntoView({
         behavior: "smooth",
         block: "center"
@@ -11424,7 +11485,8 @@ function useDocumentSnap(ref, enabled = true) {
   useMountEffect(() => {
     const el = ref.current;
     if (!el || !enabled || typeof document === "undefined") return;
-    const root2 = document.documentElement;
+    const pane = scrollerOf(el);
+    const root2 = pane ?? document.documentElement;
     const previousType = root2.style.scrollSnapType;
     const previousPadding = root2.style.scrollPaddingTop;
     root2.style.scrollPaddingTop = "0px";
@@ -11446,7 +11508,10 @@ function useDocumentSnap(ref, enabled = true) {
         passive: true
       });
     };
-    const top2 = () => window.scrollTo(0, 0);
+    const top2 = () => {
+      scrollToTop();
+      if (pane) scrollToTop(pane);
+    };
     let frame2 = null;
     let release = () => {
     };
@@ -11467,7 +11532,7 @@ function useDocumentSnap(ref, enabled = true) {
           snapOnAtTouch();
         }
         return true;
-      });
+      }, void 0, pane);
     };
     anchor2();
     const history = window.history;

package/package.json

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