@nok-integration/storefront-react 0.19.4 → 0.19.6

package/dist/index.mjs

@@ -5410,6 +5410,7 @@ const styles$M = {
   surface: surface$1,
   fill
 };
+const SETTLE_MS$1 = 150;
 function offsetFromViewportTop(el) {
   let top = el.getBoundingClientRect().top;
   for (let node = el.parentElement; node; node = node.parentElement) {
@@ -5423,17 +5424,30 @@ function useTopOffset(ref, property, enabled = true) {
   useEffect(() => {
     const el = ref.current;
     if (!el || !enabled) return;
+    let timer2;
     const measure = () => {
       el.style.setProperty(property, `${offsetFromViewportTop(el)}px`);
     };
+    const settle = () => {
+      if (timer2) clearTimeout(timer2);
+      timer2 = setTimeout(measure, SETTLE_MS$1);
+    };
     measure();
     window.addEventListener("resize", measure);
     window.addEventListener("orientationchange", measure);
+    document.addEventListener("scroll", settle, {
+      capture: true,
+      passive: true
+    });
     const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(measure);
     if (observer && el.parentElement) observer.observe(el.parentElement);
     return () => {
+      if (timer2) clearTimeout(timer2);
       window.removeEventListener("resize", measure);
       window.removeEventListener("orientationchange", measure);
+      document.removeEventListener("scroll", settle, {
+        capture: true
+      });
       observer?.disconnect();
     };
   }, [ref, property, enabled]);
@@ -6822,7 +6836,7 @@ const widget = "_widget_1v9my_18";
 const titleRow = "_titleRow_1v9my_26";
 const headline$1 = "_headline_1v9my_42";
 const track$5 = "_track_1v9my_74";
-const rule = "_rule_1v9my_99";
+const rule$1 = "_rule_1v9my_99";
 const help = "_help_1v9my_109";
 const helpTitle = "_helpTitle_1v9my_115";
 const helpRows = "_helpRows_1v9my_122";
@@ -6837,7 +6851,7 @@ const styles$A = {
   titleRow,
   headline: headline$1,
   track: track$5,
-  rule,
+  rule: rule$1,
   help,
   helpTitle,
   helpRows,
@@ -7660,18 +7674,20 @@ function ReturnFlowContent({ orderRef, returnRef, onDone, locale }) {
     busy
   });
 }
-const page$2 = "_page_1s8l9_6";
-const confirmed = "_confirmed_1s8l9_16";
-const title$h = "_title_1s8l9_22";
-const headline = "_headline_1s8l9_47";
-const subtitle$4 = "_subtitle_1s8l9_65";
-const done = "_done_1s8l9_87";
+const page$2 = "_page_2uqhz_6";
+const confirmed = "_confirmed_2uqhz_16";
+const title$h = "_title_2uqhz_22";
+const headline = "_headline_2uqhz_47";
+const subtitle$4 = "_subtitle_2uqhz_65";
+const rule = "_rule_2uqhz_90";
+const done = "_done_2uqhz_107";
 const styles$w = {
   page: page$2,
   confirmed,
   title: title$h,
   headline,
   subtitle: subtitle$4,
+  rule,
   done
 };
 function OrderConfirmationView(props) {
@@ -7761,6 +7777,8 @@ function OrderConfirmationContent({ orderRef, locale: localeProp, onDone }) {
         } : {},
         locale
       })]
+    }), jsx("hr", {
+      className: styles$w.rule
     }), jsx(OrderLines, {
       order
     }), jsx(ShippingAddressCard, {

package/dist/standalone/storefront.mjs

@@ -5410,6 +5410,7 @@ const styles$M = {
   surface: surface$1,
   fill
 };
+const SETTLE_MS$1 = 150;
 function offsetFromViewportTop(el) {
   let top = el.getBoundingClientRect().top;
   for (let node = el.parentElement; node; node = node.parentElement) {
@@ -5423,17 +5424,30 @@ function useTopOffset(ref, property, enabled = true) {
   useEffect(() => {
     const el = ref.current;
     if (!el || !enabled) return;
+    let timer2;
     const measure = () => {
       el.style.setProperty(property, `${offsetFromViewportTop(el)}px`);
     };
+    const settle = () => {
+      if (timer2) clearTimeout(timer2);
+      timer2 = setTimeout(measure, SETTLE_MS$1);
+    };
     measure();
     window.addEventListener("resize", measure);
     window.addEventListener("orientationchange", measure);
+    document.addEventListener("scroll", settle, {
+      capture: true,
+      passive: true
+    });
     const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(measure);
     if (observer && el.parentElement) observer.observe(el.parentElement);
     return () => {
+      if (timer2) clearTimeout(timer2);
       window.removeEventListener("resize", measure);
       window.removeEventListener("orientationchange", measure);
+      document.removeEventListener("scroll", settle, {
+        capture: true
+      });
       observer?.disconnect();
     };
   }, [ref, property, enabled]);
@@ -6822,7 +6836,7 @@ const widget = "_widget_1v9my_18";
 const titleRow = "_titleRow_1v9my_26";
 const headline$1 = "_headline_1v9my_42";
 const track$5 = "_track_1v9my_74";
-const rule = "_rule_1v9my_99";
+const rule$1 = "_rule_1v9my_99";
 const help = "_help_1v9my_109";
 const helpTitle = "_helpTitle_1v9my_115";
 const helpRows = "_helpRows_1v9my_122";
@@ -6837,7 +6851,7 @@ const styles$A = {
   titleRow,
   headline: headline$1,
   track: track$5,
-  rule,
+  rule: rule$1,
   help,
   helpTitle,
   helpRows,
@@ -7660,18 +7674,20 @@ function ReturnFlowContent({ orderRef, returnRef, onDone, locale }) {
     busy
   });
 }
-const page$2 = "_page_1s8l9_6";
-const confirmed = "_confirmed_1s8l9_16";
-const title$h = "_title_1s8l9_22";
-const headline = "_headline_1s8l9_47";
-const subtitle$4 = "_subtitle_1s8l9_65";
-const done = "_done_1s8l9_87";
+const page$2 = "_page_2uqhz_6";
+const confirmed = "_confirmed_2uqhz_16";
+const title$h = "_title_2uqhz_22";
+const headline = "_headline_2uqhz_47";
+const subtitle$4 = "_subtitle_2uqhz_65";
+const rule = "_rule_2uqhz_90";
+const done = "_done_2uqhz_107";
 const styles$w = {
   page: page$2,
   confirmed,
   title: title$h,
   headline,
   subtitle: subtitle$4,
+  rule,
   done
 };
 function OrderConfirmationView(props) {
@@ -7761,6 +7777,8 @@ function OrderConfirmationContent({ orderRef, locale: localeProp, onDone }) {
         } : {},
         locale
       })]
+    }), jsx("hr", {
+      className: styles$w.rule
     }), jsx(OrderLines, {
       order
     }), jsx(ShippingAddressCard, {

package/dist/standalone/styles.css

@@ -1500,30 +1500,30 @@
   text-decoration: line-through;
   font-variant-numeric: tabular-nums;
 }
-._page_1s8l9_6 {
+._page_2uqhz_6 {
   display: flex;
   flex-direction: column;
   gap: var(--space-32);
   padding: var(--space-20) var(--space-16) var(--space-24);
 }
-._confirmed_1s8l9_16 {
+._confirmed_2uqhz_16 {
   display: flex;
   flex-direction: column;
   gap: var(--space-24);
 }
-._title_1s8l9_22 {
+._title_2uqhz_22 {
   display: flex;
   flex-direction: column;
   gap: var(--space-12);
 }
-._headline_1s8l9_47 {
+._headline_2uqhz_47 {
   margin: 0;
   font-size: var(--type-heading-md-size);
   line-height: 14px;
   font-weight: var(--font-weight-bold);
   color: var(--color-state-text-success);
 }
-._subtitle_1s8l9_65 {
+._subtitle_2uqhz_65 {
   margin: -6px 0;
   padding: 6px 0;
   font-size: var(--type-paragraph-size);
@@ -1534,7 +1534,13 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-._done_1s8l9_87 {
+._rule_2uqhz_90 {
+  height: 1px;
+  margin: 0 0 -1px;
+  border: 0;
+  background: var(--color-border-default);
+}
+._done_2uqhz_107 {
   border-color: var(--color-surface-max);
 }
 ._badge_ghd02_6 {

package/dist/styles.css

@@ -1500,30 +1500,30 @@
   text-decoration: line-through;
   font-variant-numeric: tabular-nums;
 }
-._page_1s8l9_6 {
+._page_2uqhz_6 {
   display: flex;
   flex-direction: column;
   gap: var(--space-32);
   padding: var(--space-20) var(--space-16) var(--space-24);
 }
-._confirmed_1s8l9_16 {
+._confirmed_2uqhz_16 {
   display: flex;
   flex-direction: column;
   gap: var(--space-24);
 }
-._title_1s8l9_22 {
+._title_2uqhz_22 {
   display: flex;
   flex-direction: column;
   gap: var(--space-12);
 }
-._headline_1s8l9_47 {
+._headline_2uqhz_47 {
   margin: 0;
   font-size: var(--type-heading-md-size);
   line-height: 14px;
   font-weight: var(--font-weight-bold);
   color: var(--color-state-text-success);
 }
-._subtitle_1s8l9_65 {
+._subtitle_2uqhz_65 {
   margin: -6px 0;
   padding: 6px 0;
   font-size: var(--type-paragraph-size);
@@ -1534,7 +1534,13 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-._done_1s8l9_87 {
+._rule_2uqhz_90 {
+  height: 1px;
+  margin: 0 0 -1px;
+  border: 0;
+  background: var(--color-border-default);
+}
+._done_2uqhz_107 {
   border-color: var(--color-surface-max);
 }
 ._badge_ghd02_6 {

package/package.json

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