@zoreal/oauth2-react 0.2.21 → 0.2.23

package/dist/index.cjs

@@ -42,7 +42,7 @@ var import_react2 = require("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;
@@ -1642,7 +1642,7 @@ function useZorealOAuth() {
 }
 
 // src/ZorealLogin.tsx
-var import_react5 = require("react");
+var import_react4 = require("react");
 
 // src/useZorealLogin.ts
 var import_react3 = require("react");
@@ -1786,6 +1786,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;
@@ -2348,7 +2372,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 {
@@ -2494,79 +2518,8 @@ function useZorealLogin(options) {
   }).login;
 }
 
-// src/ring.tsx
-var import_react4 = require("react");
-var import_jsx_runtime5 = require("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
-}) {
-  (0, import_react4.useEffect)(() => {
-    ensureStyles();
-  }, []);
-  const wrapRef = (0, import_react4.useRef)(null);
-  const measureRef = (0, import_react4.useRef)(null);
-  (0, import_react4.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__ */ (0, import_jsx_runtime5.jsx)(
-    "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__ */ (0, import_jsx_runtime5.jsxs)(
-    "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__ */ (0, import_jsx_runtime5.jsxs)("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
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 var TEXTS = {
   continue_with: null,
   signin_with: "Sign in with ZOREAL",
@@ -2597,31 +2550,18 @@ function ZorealLogin(props) {
   } = props;
   const { locale } = useZorealOAuth();
   const label = TEXTS[text] ?? strings(locale).buttonContinue;
-  const [busy, setBusy] = (0, import_react5.useState)(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;
   const brandMark = theme !== "filled";
-  const style = (0, import_react5.useMemo)(
+  const style = (0, import_react4.useMemo)(
     () => ({
       display: "inline-flex",
       alignItems: "center",
@@ -2639,25 +2579,92 @@ function ZorealLogin(props) {
     }),
     [logo_alignment, s, radius, theme, width]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { ...containerProps, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ZorealBusyRing, { busy, radius, theme: theme === "outline" ? "auto" : "light", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { ...containerProps, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
     "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__ */ (0, import_jsx_runtime6.jsx)(ZorealMark, { size: s.mark, brand: brandMark }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ZorealMark, { size: s.mark, brand: brandMark }),
         type === "standard" && label
       ]
     }
-  ) }) });
+  ) });
+}
+
+// src/ring.tsx
+var import_react5 = require("react");
+var import_jsx_runtime6 = require("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
+}) {
+  (0, import_react5.useEffect)(() => {
+    ensureStyles();
+  }, []);
+  const wrapRef = (0, import_react5.useRef)(null);
+  const measureRef = (0, import_react5.useRef)(null);
+  (0, import_react5.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__ */ (0, import_jsx_runtime6.jsx)(
+    "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__ */ (0, import_jsx_runtime6.jsxs)(
+    "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__ */ (0, import_jsx_runtime6.jsxs)("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