@zoreal/oauth2-react 0.2.20 → 0.2.22

package/dist/index.d.cts

@@ -286,10 +286,10 @@ declare function PairingModal({ state, qrUrl, onCancel, locale, theme, timeoutMs
 
 declare function useZorealLogin(options: {
     flow?: 'browser-direct';
-} & BrowserDirectFlowOptions): () => void;
+} & BrowserDirectFlowOptions): (event?: unknown) => void;
 declare function useZorealLogin(options: {
     flow: 'auth-code';
-} & AuthCodeFlowOptions): () => void;
+} & AuthCodeFlowOptions): (event?: unknown) => void;
 
 /**
  * Silent re-auth with prompt=none. NOT One Tap and never could be: there is no

package/dist/index.d.ts

@@ -286,10 +286,10 @@ declare function PairingModal({ state, qrUrl, onCancel, locale, theme, timeoutMs
 
 declare function useZorealLogin(options: {
     flow?: 'browser-direct';
-} & BrowserDirectFlowOptions): () => void;
+} & BrowserDirectFlowOptions): (event?: unknown) => void;
 declare function useZorealLogin(options: {
     flow: 'auth-code';
-} & AuthCodeFlowOptions): () => void;
+} & AuthCodeFlowOptions): (event?: unknown) => void;
 
 /**
  * Silent re-auth with prompt=none. NOT One Tap and never could be: there is no

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.20";
+var SDK_VERSION = "0.2.22";
 var DEFAULT_ISSUER = "https://id.zoreal.com";
 var POLL_INTERVAL_MS = 2e3;
 var POLL_INTERVAL_ENROLLING_MS = 5e3;
@@ -1360,6 +1360,16 @@ var CSS = `
   transition: opacity 200ms ease-out;
 }
 .${PREFIX}-ring[data-busy="true"] > .${PREFIX}-ring-svg { opacity: 1; }
+/* The same light as an overlay in the document body, placed over a site's
+   own control by the package itself (busy.ts): nothing of the site's
+   markup or CSS is touched, and neither an ancestor's overflow nor a
+   selector on the control's parent is affected. */
+.${PREFIX}-ring-overlay {
+  position: fixed;
+  display: block;
+  z-index: 2147483000;
+  pointer-events: none;
+}
 .${PREFIX}-ring-svg rect {
   --zrl-l: var(--zrl-ring-len, 600px);
   x: 2px;
@@ -1595,11 +1605,101 @@ 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";
 
+// src/busy.ts
+var SVG_NS = "http://www.w3.org/2000/svg";
+var TAIL = 0.3;
+var STACK = Array.from({ length: 12 }, (_, i) => 12 - i);
+var HALO = [3, 2, 1];
+function radiusOf(control) {
+  const value = parseFloat(getComputedStyle(control).borderTopLeftRadius);
+  return Number.isFinite(value) ? value : 8;
+}
+function holdBusy(control) {
+  if (typeof document === "undefined") return () => {
+  };
+  ensureStyles();
+  const hadDisabled = control.hasAttribute("disabled");
+  const hadBusy = control.getAttribute("aria-busy");
+  if (control instanceof HTMLButtonElement || control instanceof HTMLInputElement) {
+    control.disabled = true;
+  } else {
+    control.setAttribute("aria-disabled", "true");
+  }
+  control.setAttribute("aria-busy", "true");
+  const overlay = document.createElement("div");
+  overlay.className = `${cx("root")} ${cx("ring")} ${cx("ring-overlay")}`;
+  overlay.dataset.theme = "auto";
+  overlay.dataset.busy = "true";
+  overlay.setAttribute("aria-hidden", "true");
+  const svg = document.createElementNS(SVG_NS, "svg");
+  svg.setAttribute("class", cx("ring-svg"));
+  const rx = radiusOf(control) + 2;
+  const layer = (name, len, alpha) => {
+    const rect = document.createElementNS(SVG_NS, "rect");
+    rect.setAttribute("class", cx(name));
+    rect.setAttribute("rx", String(rx));
+    rect.setAttribute("ry", String(rx));
+    rect.style.strokeDasharray = `calc(var(--zrl-l) * ${len}) calc(var(--zrl-l) * ${1 - len})`;
+    rect.style.setProperty("--zrl-s", `calc(var(--zrl-l) * ${-(TAIL - len)})`);
+    rect.style.opacity = alpha;
+    svg.appendChild(rect);
+    return rect;
+  };
+  let measured = null;
+  for (const n of HALO) {
+    const rect = layer("ring-halo", TAIL * n / HALO.length, `calc(var(--zrl-glow-opacity) * 0.6 / ${n})`);
+    measured ?? (measured = rect);
+  }
+  for (const n of STACK) layer(n <= 2 ? "ring-head" : "ring-tail", TAIL * n / STACK.length, String(1 / n));
+  overlay.appendChild(svg);
+  document.body.appendChild(overlay);
+  let frame = 0;
+  const place = () => {
+    frame = 0;
+    const box = control.getBoundingClientRect();
+    overlay.style.left = `${box.left}px`;
+    overlay.style.top = `${box.top}px`;
+    overlay.style.width = `${box.width}px`;
+    overlay.style.height = `${box.height}px`;
+    const length = typeof measured?.getTotalLength === "function" ? measured.getTotalLength() : 0;
+    if (length > 0) overlay.style.setProperty("--zrl-ring-len", `${length}px`);
+  };
+  const schedule = () => {
+    if (!frame) frame = requestAnimationFrame(place);
+  };
+  place();
+  const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(schedule);
+  observer?.observe(control);
+  window.addEventListener("scroll", schedule, true);
+  window.addEventListener("resize", schedule);
+  let released = false;
+  return () => {
+    if (released) return;
+    released = true;
+    if (frame) cancelAnimationFrame(frame);
+    observer?.disconnect();
+    window.removeEventListener("scroll", schedule, true);
+    window.removeEventListener("resize", schedule);
+    overlay.remove();
+    if (control instanceof HTMLButtonElement || control instanceof HTMLInputElement) {
+      control.disabled = hadDisabled;
+    } else {
+      control.removeAttribute("aria-disabled");
+    }
+    if (hadBusy === null) control.removeAttribute("aria-busy");
+    else control.setAttribute("aria-busy", hadBusy);
+  };
+}
+function controlFrom(event) {
+  const target = event?.currentTarget;
+  return typeof HTMLElement !== "undefined" && target instanceof HTMLElement ? target : null;
+}
+
 // src/return.ts
 var PREFIX2 = "zoreal:oauth2:return:";
 var DONE = "zoreal:oauth2:done:";
@@ -2064,6 +2164,7 @@ function useZorealFlow(options) {
     () => () => {
       abortRef.current?.abort();
       publishRef.current?.(null);
+      releaseRef.current();
     },
     []
   );
@@ -2122,10 +2223,21 @@ function useZorealFlow(options) {
       }
     })();
   }, [clientId, issuer]);
-  const login = useCallback(() => {
+  const releaseRef = useRef2(() => {
+  });
+  const login = useCallback((event) => {
     const opts = optionsRef.current;
+    const control = controlFrom(event);
     const run = async () => {
       abortRef.current?.abort();
+      releaseRef.current();
+      releaseRef.current = control ? holdBusy(control) : () => {
+      };
+      const release = () => {
+        releaseRef.current();
+        releaseRef.current = () => {
+        };
+      };
       const controller = new AbortController();
       abortRef.current = controller;
       const flow = opts.flow;
@@ -2274,6 +2386,7 @@ function useZorealFlow(options) {
         setPairing(null);
         publishRef.current?.(null);
         if (returnId) markReturnDone(returnId);
+        release();
         if (flow === "auth-code") {
           opts.onCode?.({
             code,
@@ -2298,6 +2411,7 @@ function useZorealFlow(options) {
         };
         opts.onCredential?.(response);
       } catch (e) {
+        release();
         setPairing(null);
         publishRef.current?.(null);
         if (e instanceof DOMException && e.name === "AbortError") {
@@ -2343,79 +2457,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 TAIL = 0.3;
-var STACK = Array.from({ length: 12 }, (_, i) => 12 - i);
-var HALO = [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) * ${-(TAIL - 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: [
-          HALO.map(
-            (n, i) => layer(`h${n}`, "ring-halo", TAIL * n / HALO.length, `calc(var(--zrl-glow-opacity) * 0.6 / ${n})`, i === 0 ? measureRef : void 0)
-          ),
-          STACK.map((n) => layer(`t${n}`, n <= 2 ? "ring-head" : "ring-tail", TAIL * n / STACK.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",
@@ -2446,26 +2489,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;
@@ -2488,25 +2518,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