@mxenabled/connect-widget 0.15.0 → 0.15.2

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") }) }) }),
@@ -76158,6 +76183,33 @@ const ManualAccountForm = React__default.forwardRef(
       });
       return schema;
     }
+    useEffect(() => {
+      const handleFocus = (event) => {
+        const focusedElement = event.target;
+        if (formRef.current && focusedElement !== null) {
+          const containerRect = formRef.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);
+            }
+          }
+        }
+      };
+      formRef.current?.addEventListener("focusin", handleFocus);
+      return () => {
+        formRef.current?.addEventListener("focusin", handleFocus);
+      };
+    }, [formRef]);
     useEffect(() => {
       if (!saving) return () => {
       };