@nok-integration/storefront-react 0.20.10 → 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();
@@ -6581,6 +6638,50 @@ function PriceBlock({ price: price2, compareAt: compareAt2, discountPct: discoun
     })]
   });
 }
+const STATE_KEY = "__daznShop";
+function current$1(name2) {
+  if (typeof window === "undefined") return null;
+  const state = window.history.state;
+  const ours = state?.[STATE_KEY];
+  if (!ours || ours.href !== window.location.href) return null;
+  const value2 = ours[name2];
+  return typeof value2 === "string" ? value2 : null;
+}
+function useInPlaceScreen(name2) {
+  const [value2, setValue] = useState(() => current$1(name2));
+  useEffect(() => {
+    const onPop = () => setValue(current$1(name2));
+    window.addEventListener("popstate", onPop);
+    return () => window.removeEventListener("popstate", onPop);
+  }, [name2]);
+  const open = useCallback((next) => {
+    const history = window.history;
+    const state = history.state ?? {};
+    const href = window.location.href;
+    const ours = state[STATE_KEY]?.href === href ? state[STATE_KEY] : {};
+    history.pushState({
+      ...state,
+      [STATE_KEY]: {
+        ...ours,
+        href,
+        [name2]: next
+      }
+    }, "", href);
+    setValue(next);
+  }, [name2]);
+  const close2 = useCallback(() => {
+    if (current$1(name2) !== null) {
+      window.history.back();
+      return;
+    }
+    setValue(null);
+  }, [name2]);
+  return {
+    value: value2,
+    open,
+    close: close2
+  };
+}
 const timeline = "_timeline_1cum7_7";
 const row$8 = "_row_1cum7_15";
 const line$3 = "_line_1cum7_20";
@@ -7921,15 +8022,16 @@ function ChevronRight$1() {
     })
   });
 }
+const useBrowserLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
 function OrderTrackingView(props) {
-  const [flow, setFlow] = useState(null);
-  if (flow !== null) {
+  const flow = useInPlaceScreen("returnFlow");
+  if (flow.value !== null) {
     return jsx(ReturnFlowView, {
       orderRef: props.orderRef,
-      ...flow ? {
-        returnRef: flow
+      ...flow.value ? {
+        returnRef: flow.value
       } : {},
-      onDone: () => setFlow(null)
+      onDone: flow.close
     });
   }
   return jsx(ShopSurface, {
@@ -7937,8 +8039,8 @@ function OrderTrackingView(props) {
     fill: true,
     children: jsx(OrderTrackingContent, {
       ...props,
-      onStartReturn: props.onStartReturn ?? (() => setFlow("")),
-      onOpenReturn: props.onOpenReturn ?? ((returnRef) => setFlow(returnRef))
+      onStartReturn: props.onStartReturn ?? (() => flow.open("")),
+      onOpenReturn: props.onOpenReturn ?? flow.open
     })
   });
 }
@@ -7969,6 +8071,12 @@ function OrderTrackingContent({ orderRef, locale: localeProp, onStartReturn, onO
   useEffect(() => {
     void load();
   }, [load]);
+  const cancelled = order?.status === "cancelled";
+  const cancelledPage = useRef(null);
+  useBrowserLayoutEffect(() => {
+    if (!cancelled) return;
+    return anchorTop(void 0, void 0, scrollerOf(cancelledPage.current));
+  }, [cancelled]);
   if (state === "loading") {
     return jsxs("div", {
       className: styles$y.page,
@@ -8050,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", {
@@ -8446,11 +8555,11 @@ function Chevron() {
   });
 }
 function OrderListView(props) {
-  const [opened, setOpened] = useState(null);
-  if (opened !== null) {
+  const opened = useInPlaceScreen("return");
+  if (opened.value !== null) {
     return jsx(ReturnFlowView, {
-      returnRef: opened,
-      onDone: () => setOpened(null)
+      returnRef: opened.value,
+      onDone: opened.close
     });
   }
   return jsx(ShopSurface, {
@@ -8458,7 +8567,7 @@ function OrderListView(props) {
     fill: true,
     children: jsx(OrderListContent, {
       ...props,
-      onOpenReturn: props.onOpenReturn ?? setOpened
+      onOpenReturn: props.onOpenReturn ?? opened.open
     })
   });
 }
@@ -10675,6 +10784,7 @@ function ProductDetail({ product, inventory: inventory2, recommendations = [] })
   function ensureSelection() {
     if (needsSize) {
       setSizeError(true);
+      releaseHolds();
       sizeRef.current?.scrollIntoView({
         behavior: "smooth",
         block: "center"
@@ -10682,6 +10792,7 @@ function ProductDetail({ product, inventory: inventory2, recommendations = [] })
       return false;
     }
     if (needsColour) {
+      releaseHolds();
       colourRef.current?.scrollIntoView({
         behavior: "smooth",
         block: "center"
@@ -11374,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";
@@ -11396,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 = () => {
     };
@@ -11417,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();
@@ -6581,6 +6638,50 @@ function PriceBlock({ price: price2, compareAt: compareAt2, discountPct: discoun
     })]
   });
 }
+const STATE_KEY = "__daznShop";
+function current$1(name2) {
+  if (typeof window === "undefined") return null;
+  const state = window.history.state;
+  const ours = state?.[STATE_KEY];
+  if (!ours || ours.href !== window.location.href) return null;
+  const value2 = ours[name2];
+  return typeof value2 === "string" ? value2 : null;
+}
+function useInPlaceScreen(name2) {
+  const [value2, setValue] = useState(() => current$1(name2));
+  useEffect(() => {
+    const onPop = () => setValue(current$1(name2));
+    window.addEventListener("popstate", onPop);
+    return () => window.removeEventListener("popstate", onPop);
+  }, [name2]);
+  const open = useCallback((next) => {
+    const history = window.history;
+    const state = history.state ?? {};
+    const href = window.location.href;
+    const ours = state[STATE_KEY]?.href === href ? state[STATE_KEY] : {};
+    history.pushState({
+      ...state,
+      [STATE_KEY]: {
+        ...ours,
+        href,
+        [name2]: next
+      }
+    }, "", href);
+    setValue(next);
+  }, [name2]);
+  const close2 = useCallback(() => {
+    if (current$1(name2) !== null) {
+      window.history.back();
+      return;
+    }
+    setValue(null);
+  }, [name2]);
+  return {
+    value: value2,
+    open,
+    close: close2
+  };
+}
 const timeline = "_timeline_1cum7_7";
 const row$8 = "_row_1cum7_15";
 const line$3 = "_line_1cum7_20";
@@ -7921,15 +8022,16 @@ function ChevronRight$1() {
     })
   });
 }
+const useBrowserLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
 function OrderTrackingView(props) {
-  const [flow, setFlow] = useState(null);
-  if (flow !== null) {
+  const flow = useInPlaceScreen("returnFlow");
+  if (flow.value !== null) {
     return jsx(ReturnFlowView, {
       orderRef: props.orderRef,
-      ...flow ? {
-        returnRef: flow
+      ...flow.value ? {
+        returnRef: flow.value
       } : {},
-      onDone: () => setFlow(null)
+      onDone: flow.close
     });
   }
   return jsx(ShopSurface, {
@@ -7937,8 +8039,8 @@ function OrderTrackingView(props) {
     fill: true,
     children: jsx(OrderTrackingContent, {
       ...props,
-      onStartReturn: props.onStartReturn ?? (() => setFlow("")),
-      onOpenReturn: props.onOpenReturn ?? ((returnRef) => setFlow(returnRef))
+      onStartReturn: props.onStartReturn ?? (() => flow.open("")),
+      onOpenReturn: props.onOpenReturn ?? flow.open
     })
   });
 }
@@ -7969,6 +8071,12 @@ function OrderTrackingContent({ orderRef, locale: localeProp, onStartReturn, onO
   useEffect(() => {
     void load();
   }, [load]);
+  const cancelled = order?.status === "cancelled";
+  const cancelledPage = useRef(null);
+  useBrowserLayoutEffect(() => {
+    if (!cancelled) return;
+    return anchorTop(void 0, void 0, scrollerOf(cancelledPage.current));
+  }, [cancelled]);
   if (state === "loading") {
     return jsxs("div", {
       className: styles$y.page,
@@ -8050,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", {
@@ -8446,11 +8555,11 @@ function Chevron() {
   });
 }
 function OrderListView(props) {
-  const [opened, setOpened] = useState(null);
-  if (opened !== null) {
+  const opened = useInPlaceScreen("return");
+  if (opened.value !== null) {
     return jsx(ReturnFlowView, {
-      returnRef: opened,
-      onDone: () => setOpened(null)
+      returnRef: opened.value,
+      onDone: opened.close
     });
   }
   return jsx(ShopSurface, {
@@ -8458,7 +8567,7 @@ function OrderListView(props) {
     fill: true,
     children: jsx(OrderListContent, {
       ...props,
-      onOpenReturn: props.onOpenReturn ?? setOpened
+      onOpenReturn: props.onOpenReturn ?? opened.open
     })
   });
 }
@@ -10675,6 +10784,7 @@ function ProductDetail({ product, inventory: inventory2, recommendations = [] })
   function ensureSelection() {
     if (needsSize) {
       setSizeError(true);
+      releaseHolds();
       sizeRef.current?.scrollIntoView({
         behavior: "smooth",
         block: "center"
@@ -10682,6 +10792,7 @@ function ProductDetail({ product, inventory: inventory2, recommendations = [] })
       return false;
     }
     if (needsColour) {
+      releaseHolds();
       colourRef.current?.scrollIntoView({
         behavior: "smooth",
         block: "center"
@@ -11374,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";
@@ -11396,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 = () => {
     };
@@ -11417,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.10",
+  "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",