@mxenabled/connect-widget 0.15.0 → 0.15.1

package/dist/index.es.js

@@ -74372,6 +74372,31 @@ const ConfirmDetails = (props) => {
     );
     return () => subscription.unsubscribe();
   }, [isSubmitting]);
+  useEffect(() => {
+    const handleFocus = (event) => {
+      const focusedElement = event.target;
+      if (containerRef.current && focusedElement) {
+        const containerRect = containerRef.current.getBoundingClientRect();
+        const elementRect = focusedElement.getBoundingClientRect();
+        const stickyHeader = document.querySelector('[data-test="navigation-header"]');
+        const stickyHeaderHeight = stickyHeader ? stickyHeader.offsetHeight : 0;
+        if (elementRect.top < containerRect.top + stickyHeaderHeight || // Account for sticky header
+        elementRect.bottom > containerRect.bottom) {
+          focusedElement.scrollIntoView({
+            behavior: "smooth",
+            block: "center"
+          });
+          if (stickyHeaderHeight > 0) {
+            window.scrollBy(0, -stickyHeaderHeight);
+          }
+        }
+      }
+    };
+    containerRef.current?.addEventListener("focusin", handleFocus);
+    return () => {
+      containerRef.current?.removeEventListener("focusin", handleFocus);
+    };
+  }, [containerRef]);
   const handleEdit = (focus) => fadeOut(containerRef.current, "up", 300).then(() => onEditForm(focus));
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { ref: containerRef, children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(SlideDown, { delay: getNextDelay(), children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: styles.header, children: /* @__PURE__ */ jsxRuntimeExports.jsx(x, { "data-test": "title-header", style: styles.title, truncate: false, variant: "H2", children: __("Review your information") }) }) }),