@zoreal/oauth2-react 0.2.19 → 0.2.21

package/dist/index.d.cts

@@ -254,6 +254,13 @@ declare function ZorealBusyRing({ busy, radius, theme, block, className, style,
     children: ReactNode;
 }): react.JSX.Element;
 
+declare function ZorealMark({ size, brand, className, }: {
+    size?: number;
+    /** Paint the brand blue instead of inheriting currentColor. */
+    brand?: boolean;
+    className?: string;
+}): react.JSX.Element;
+
 /**
  * The pairing modal, rendered by the SDK rather than by every integrator.
  *
@@ -279,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
@@ -323,4 +330,4 @@ declare function hasGrantedAnyScopeZoreal(response: Pick<ZorealCodeResponse, 'sc
  */
 declare function resolveIntent(intent: LoginIntent | undefined, scope: string | undefined, acrValues: string | readonly string[] | undefined): LoginIntent;
 
-export { type AcrValue, type AuthCodeFlowOptions, type BrowserDirectFlowOptions, DEFAULT_PAIRING_TIMEOUT_MS, type ErrorCode, type LoginIntent, type NonOAuthError, PairingModal, type PairingModalProps, type PairingState, type PairingUI, type SelectBy, type UseZorealAutoLoginOptions, ZorealBusyRing, type ZorealButtonConfiguration, type ZorealCodeResponse, type ZorealCredentialResponse, ZorealLogin, type ZorealLoginProps, type ZorealLoginRequestOptions, type ZorealOAuthContextProps, ZorealOAuthProvider, type ZorealOAuthProviderProps, type ZorealTheme, hasGrantedAllScopesZoreal, hasGrantedAnyScopeZoreal, resolveIntent, useZorealAutoLogin, useZorealLogin, useZorealOAuth, zorealLogout };
+export { type AcrValue, type AuthCodeFlowOptions, type BrowserDirectFlowOptions, DEFAULT_PAIRING_TIMEOUT_MS, type ErrorCode, type LoginIntent, type NonOAuthError, PairingModal, type PairingModalProps, type PairingState, type PairingUI, type SelectBy, type UseZorealAutoLoginOptions, ZorealBusyRing, type ZorealButtonConfiguration, type ZorealCodeResponse, type ZorealCredentialResponse, ZorealLogin, type ZorealLoginProps, type ZorealLoginRequestOptions, ZorealMark, type ZorealOAuthContextProps, ZorealOAuthProvider, type ZorealOAuthProviderProps, type ZorealTheme, hasGrantedAllScopesZoreal, hasGrantedAnyScopeZoreal, resolveIntent, useZorealAutoLogin, useZorealLogin, useZorealOAuth, zorealLogout };

package/dist/index.d.ts

@@ -254,6 +254,13 @@ declare function ZorealBusyRing({ busy, radius, theme, block, className, style,
     children: ReactNode;
 }): react.JSX.Element;
 
+declare function ZorealMark({ size, brand, className, }: {
+    size?: number;
+    /** Paint the brand blue instead of inheriting currentColor. */
+    brand?: boolean;
+    className?: string;
+}): react.JSX.Element;
+
 /**
  * The pairing modal, rendered by the SDK rather than by every integrator.
  *
@@ -279,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
@@ -323,4 +330,4 @@ declare function hasGrantedAnyScopeZoreal(response: Pick<ZorealCodeResponse, 'sc
  */
 declare function resolveIntent(intent: LoginIntent | undefined, scope: string | undefined, acrValues: string | readonly string[] | undefined): LoginIntent;
 
-export { type AcrValue, type AuthCodeFlowOptions, type BrowserDirectFlowOptions, DEFAULT_PAIRING_TIMEOUT_MS, type ErrorCode, type LoginIntent, type NonOAuthError, PairingModal, type PairingModalProps, type PairingState, type PairingUI, type SelectBy, type UseZorealAutoLoginOptions, ZorealBusyRing, type ZorealButtonConfiguration, type ZorealCodeResponse, type ZorealCredentialResponse, ZorealLogin, type ZorealLoginProps, type ZorealLoginRequestOptions, type ZorealOAuthContextProps, ZorealOAuthProvider, type ZorealOAuthProviderProps, type ZorealTheme, hasGrantedAllScopesZoreal, hasGrantedAnyScopeZoreal, resolveIntent, useZorealAutoLogin, useZorealLogin, useZorealOAuth, zorealLogout };
+export { type AcrValue, type AuthCodeFlowOptions, type BrowserDirectFlowOptions, DEFAULT_PAIRING_TIMEOUT_MS, type ErrorCode, type LoginIntent, type NonOAuthError, PairingModal, type PairingModalProps, type PairingState, type PairingUI, type SelectBy, type UseZorealAutoLoginOptions, ZorealBusyRing, type ZorealButtonConfiguration, type ZorealCodeResponse, type ZorealCredentialResponse, ZorealLogin, type ZorealLoginProps, type ZorealLoginRequestOptions, ZorealMark, type ZorealOAuthContextProps, ZorealOAuthProvider, type ZorealOAuthProviderProps, type ZorealTheme, hasGrantedAllScopesZoreal, hasGrantedAnyScopeZoreal, resolveIntent, useZorealAutoLogin, useZorealLogin, useZorealOAuth, zorealLogout };

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.19";
+var SDK_VERSION = "0.2.21";
 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;
@@ -1600,6 +1610,96 @@ import { useMemo as useMemo2, useState as useState4 } 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") {
@@ -2346,9 +2460,9 @@ function useZorealLogin(options) {
 // 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];
+var TAIL2 = 0.3;
+var STACK2 = Array.from({ length: 12 }, (_, i) => 12 - i);
+var HALO2 = [3, 2, 1];
 function ZorealBusyRing({
   busy,
   radius = 8,
@@ -2387,7 +2501,7 @@ function ZorealBusyRing({
       ry: rx,
       style: {
         strokeDasharray: `calc(var(--zrl-l) * ${len}) calc(var(--zrl-l) * ${1 - len})`,
-        "--zrl-s": `calc(var(--zrl-l) * ${-(TAIL - len)})`,
+        "--zrl-s": `calc(var(--zrl-l) * ${-(TAIL2 - len)})`,
         opacity: alpha
       }
     },
@@ -2404,10 +2518,10 @@ function ZorealBusyRing({
       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)
+          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)
           ),
-          STACK.map((n) => layer(`t${n}`, n <= 2 ? "ring-head" : "ring-tail", TAIL * n / STACK.length, String(1 / n)))
+          STACK2.map((n) => layer(`t${n}`, n <= 2 ? "ring-head" : "ring-tail", TAIL2 * n / STACK2.length, String(1 / n)))
         ] })
       ]
     }
@@ -2553,6 +2667,7 @@ export {
   PairingModal,
   ZorealBusyRing,
   ZorealLogin,
+  ZorealMark,
   ZorealOAuthProvider,
   hasGrantedAllScopesZoreal,
   hasGrantedAnyScopeZoreal,