@zoreal/oauth2-react 0.2.21 → 0.2.23

package/dist/index.js

@@ -5,7 +5,7 @@ import { createContext, useContext, useMemo, useState as useState2 } from "react
 
 // src/wire.ts
 var WIRE_VERSION = 1;
-var SDK_VERSION = "0.2.21";
+var SDK_VERSION = "0.2.23";
 var DEFAULT_ISSUER = "https://id.zoreal.com";
 var POLL_INTERVAL_MS = 2e3;
 var POLL_INTERVAL_ENROLLING_MS = 5e3;
@@ -1605,7 +1605,7 @@ function useZorealOAuth() {
 }
 
 // src/ZorealLogin.tsx
-import { useMemo as useMemo2, useState as useState4 } from "react";
+import { useMemo as useMemo2 } from "react";
 
 // src/useZorealLogin.ts
 import { useCallback, useEffect as useEffect2, useRef as useRef2, useState as useState3 } from "react";
@@ -1749,6 +1749,30 @@ function markReturnDone(requestId) {
 function isReturnDone(requestId) {
   return storage()?.getItem(DONE + requestId) !== null && storage()?.getItem(DONE + requestId) !== void 0;
 }
+function visibleOrDone(requestId, signal) {
+  if (typeof document === "undefined" || document.visibilityState !== "hidden") {
+    return Promise.resolve(!isReturnDone(requestId));
+  }
+  return new Promise((resolve) => {
+    const finish = (value) => {
+      document.removeEventListener("visibilitychange", onVisible);
+      window.removeEventListener("storage", onStorage);
+      signal?.removeEventListener("abort", onAbort);
+      resolve(value);
+    };
+    const onVisible = () => {
+      if (document.visibilityState !== "hidden") finish(!isReturnDone(requestId));
+    };
+    const onStorage = () => {
+      if (isReturnDone(requestId)) finish(false);
+    };
+    const onAbort = () => finish(false);
+    document.addEventListener("visibilitychange", onVisible);
+    window.addEventListener("storage", onStorage);
+    signal?.addEventListener("abort", onAbort, { once: true });
+    if (isReturnDone(requestId)) finish(false);
+  });
+}
 function returnToUrl() {
   if (typeof window === "undefined") return void 0;
   const { href } = window.location;
@@ -2311,7 +2335,7 @@ function useZorealFlow(options) {
             controller.signal,
             { tolerateUnknownUntil: Date.now() + 15e3 }
           );
-          if (isReturnDone(requestId)) {
+          if (!await visibleOrDone(requestId, controller.signal)) {
             throw new DOMException("aborted", "AbortError");
           }
         } else {
@@ -2457,79 +2481,8 @@ function useZorealLogin(options) {
   }).login;
 }
 
-// src/ring.tsx
-import { useEffect as useEffect3, useLayoutEffect, useRef as useRef3 } from "react";
-import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
-var TAIL2 = 0.3;
-var STACK2 = Array.from({ length: 12 }, (_, i) => 12 - i);
-var HALO2 = [3, 2, 1];
-function ZorealBusyRing({
-  busy,
-  radius = 8,
-  theme = "auto",
-  block = false,
-  className,
-  style,
-  children
-}) {
-  useEffect3(() => {
-    ensureStyles();
-  }, []);
-  const wrapRef = useRef3(null);
-  const measureRef = useRef3(null);
-  useLayoutEffect(() => {
-    const wrap = wrapRef.current;
-    const rect = measureRef.current;
-    if (!wrap || !rect) return;
-    const measure = () => {
-      const length = rect.getTotalLength();
-      if (length > 0) wrap.style.setProperty("--zrl-ring-len", `${length}px`);
-    };
-    measure();
-    if (typeof ResizeObserver === "undefined") return;
-    const observer = new ResizeObserver(measure);
-    observer.observe(wrap);
-    return () => observer.disconnect();
-  }, [radius]);
-  const rx = radius + 2;
-  const layer = (key, name, len, alpha, ref) => /* @__PURE__ */ jsx5(
-    "rect",
-    {
-      ref,
-      className: cx(name),
-      rx,
-      ry: rx,
-      style: {
-        strokeDasharray: `calc(var(--zrl-l) * ${len}) calc(var(--zrl-l) * ${1 - len})`,
-        "--zrl-s": `calc(var(--zrl-l) * ${-(TAIL2 - len)})`,
-        opacity: alpha
-      }
-    },
-    key
-  );
-  return /* @__PURE__ */ jsxs5(
-    "span",
-    {
-      ref: wrapRef,
-      className: className ? `${cx("root")} ${cx("ring")} ${className}` : `${cx("root")} ${cx("ring")}`,
-      "data-theme": theme,
-      "data-busy": busy,
-      style: block ? { display: "flex", ...style } : style,
-      children: [
-        children,
-        /* @__PURE__ */ jsxs5("svg", { className: cx("ring-svg"), "aria-hidden": "true", children: [
-          HALO2.map(
-            (n, i) => layer(`h${n}`, "ring-halo", TAIL2 * n / HALO2.length, `calc(var(--zrl-glow-opacity) * 0.6 / ${n})`, i === 0 ? measureRef : void 0)
-          ),
-          STACK2.map((n) => layer(`t${n}`, n <= 2 ? "ring-head" : "ring-tail", TAIL2 * n / STACK2.length, String(1 / n)))
-        ] })
-      ]
-    }
-  );
-}
-
 // src/ZorealLogin.tsx
-import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 var TEXTS = {
   continue_with: null,
   signin_with: "Sign in with ZOREAL",
@@ -2560,26 +2513,13 @@ function ZorealLogin(props) {
   } = props;
   const { locale } = useZorealOAuth();
   const label = TEXTS[text] ?? strings(locale).buttonContinue;
-  const [busy, setBusy] = useState4(false);
   const { login } = useZorealFlow({
     ...request,
     flow,
-    onCredential: flow === "browser-direct" ? (r) => {
-      setBusy(false);
-      onSuccess(r);
-    } : void 0,
-    onCode: flow === "auth-code" ? (r) => {
-      setBusy(false);
-      onSuccess(r);
-    } : void 0,
-    onError: (e) => {
-      setBusy(false);
-      onError?.({ type: "unknown", description: e.description ?? e.error });
-    },
-    onNonOAuthError: (e) => {
-      setBusy(false);
-      onError?.(e);
-    }
+    onCredential: flow === "browser-direct" ? onSuccess : void 0,
+    onCode: flow === "auth-code" ? onSuccess : void 0,
+    onError: (e) => onError?.({ type: "unknown", description: e.description ?? e.error }),
+    onNonOAuthError: (e) => onError?.(e)
   });
   const s = SIZES[size];
   const radius = shape === "pill" ? s.height / 2 : shape === "square" ? 4 : s.radius;
@@ -2602,25 +2542,92 @@ function ZorealLogin(props) {
     }),
     [logo_alignment, s, radius, theme, width]
   );
-  return /* @__PURE__ */ jsx6("div", { ...containerProps, children: /* @__PURE__ */ jsx6(ZorealBusyRing, { busy, radius, theme: theme === "outline" ? "auto" : "light", children: /* @__PURE__ */ jsxs6(
+  return /* @__PURE__ */ jsx5("div", { ...containerProps, children: /* @__PURE__ */ jsxs5(
     "button",
     {
       type: "button",
-      style: busy ? { ...style, cursor: "progress" } : style,
-      disabled: busy,
-      "aria-busy": busy,
-      onClick: () => {
-        if (busy) return;
+      style,
+      onClick: (event) => {
         click_listener?.();
-        setBusy(true);
-        login();
+        login(event);
       },
       children: [
-        /* @__PURE__ */ jsx6(ZorealMark, { size: s.mark, brand: brandMark }),
+        /* @__PURE__ */ jsx5(ZorealMark, { size: s.mark, brand: brandMark }),
         type === "standard" && label
       ]
     }
-  ) }) });
+  ) });
+}
+
+// src/ring.tsx
+import { useEffect as useEffect3, useLayoutEffect, useRef as useRef3 } from "react";
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+var TAIL2 = 0.3;
+var STACK2 = Array.from({ length: 12 }, (_, i) => 12 - i);
+var HALO2 = [3, 2, 1];
+function ZorealBusyRing({
+  busy,
+  radius = 8,
+  theme = "auto",
+  block = false,
+  className,
+  style,
+  children
+}) {
+  useEffect3(() => {
+    ensureStyles();
+  }, []);
+  const wrapRef = useRef3(null);
+  const measureRef = useRef3(null);
+  useLayoutEffect(() => {
+    const wrap = wrapRef.current;
+    const rect = measureRef.current;
+    if (!wrap || !rect) return;
+    const measure = () => {
+      const length = rect.getTotalLength();
+      if (length > 0) wrap.style.setProperty("--zrl-ring-len", `${length}px`);
+    };
+    measure();
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(measure);
+    observer.observe(wrap);
+    return () => observer.disconnect();
+  }, [radius]);
+  const rx = radius + 2;
+  const layer = (key, name, len, alpha, ref) => /* @__PURE__ */ jsx6(
+    "rect",
+    {
+      ref,
+      className: cx(name),
+      rx,
+      ry: rx,
+      style: {
+        strokeDasharray: `calc(var(--zrl-l) * ${len}) calc(var(--zrl-l) * ${1 - len})`,
+        "--zrl-s": `calc(var(--zrl-l) * ${-(TAIL2 - len)})`,
+        opacity: alpha
+      }
+    },
+    key
+  );
+  return /* @__PURE__ */ jsxs6(
+    "span",
+    {
+      ref: wrapRef,
+      className: className ? `${cx("root")} ${cx("ring")} ${className}` : `${cx("root")} ${cx("ring")}`,
+      "data-theme": theme,
+      "data-busy": busy,
+      style: block ? { display: "flex", ...style } : style,
+      children: [
+        children,
+        /* @__PURE__ */ jsxs6("svg", { className: cx("ring-svg"), "aria-hidden": "true", children: [
+          HALO2.map(
+            (n, i) => layer(`h${n}`, "ring-halo", TAIL2 * n / HALO2.length, `calc(var(--zrl-glow-opacity) * 0.6 / ${n})`, i === 0 ? measureRef : void 0)
+          ),
+          STACK2.map((n) => layer(`t${n}`, n <= 2 ? "ring-head" : "ring-tail", TAIL2 * n / STACK2.length, String(1 / n)))
+        ] })
+      ]
+    }
+  );
 }
 
 // src/useZorealAutoLogin.ts