@alfadocs/ui-kit-debug 0.60.0 → 0.63.0

package/dist/_chunks/finished-terminal-VjZ_-eDD.js

@@ -0,0 +1,122 @@
+import { jsx as e, jsxs as p } from "react/jsx-runtime";
+import { forwardRef as k, useState as A, useRef as g, useEffect as F, useCallback as j } from "react";
+import { useTranslation as z } from "react-i18next";
+import { C as w } from "./card-DPmk26CL.js";
+import { B as E } from "./button-DD_0Xdmr.js";
+import { u as D } from "./use-countdown-Yd6ts0_a.js";
+import { C as L } from "./circle-check-9AeSgJD_.js";
+function W(s) {
+  const t = globalThis.window !== void 0 && globalThis;
+  return !!(t && (/Chromatic/.test(t.navigator.userAgent) || /chromatic=true/.test(t.location.href)));
+}
+const _ = "https://www.alfadocs.com";
+function x(s) {
+  if (typeof s != "string" || s.length === 0 || s.startsWith("//")) return !1;
+  if (s.startsWith("/")) return !0;
+  try {
+    const { protocol: t } = new URL(s, window.location.origin);
+    return t === "https:" || t === "http:";
+  } catch {
+    return !1;
+  }
+}
+const I = k(
+  ({
+    title: s,
+    body: t,
+    autoCloseSeconds: i = 10,
+    redirectUrl: n,
+    brandUrl: o = _,
+    onClose: a,
+    countdownLabel: d,
+    closeNowLabel: v,
+    redirectingLabel: y,
+    className: N,
+    ...C
+  }, T) => {
+    const { t: r } = z(), [R, b] = A(!1), c = g(!1), l = g(null);
+    F(() => {
+      var h;
+      (h = l.current) == null || h.focus();
+    }, []);
+    const m = j(() => {
+      if (!c.current) {
+        if (c.current = !0, b(!0), a) {
+          a();
+          return;
+        }
+        n ? x(n) && window.location.assign(n) : (window.close(), x(o) && window.location.assign(o));
+      }
+    }, [a, n, o]), { remaining: f } = D(i, {
+      autoStart: i > 0 && !W(),
+      onElapsed: m
+    }), u = i > 0, B = d ? d(f) : r("finishedTerminal.autoClose", { seconds: f });
+    return /* @__PURE__ */ e(
+      "div",
+      {
+        ref: T,
+        "data-component": "finished-terminal",
+        className: [
+          "ds:flex ds:flex-1 ds:flex-col ds:items-center ds:overflow-y-auto ds:p-[var(--spacing-lg)]",
+          N
+        ].filter(Boolean).join(" "),
+        ...C,
+        children: /* @__PURE__ */ e(
+          w,
+          {
+            variant: "elevated",
+            className: "ds:my-auto ds:min-w-0 ds:[inline-size:100%] ds:max-w-[28rem] ds:text-center",
+            children: /* @__PURE__ */ e(w.Body, { children: /* @__PURE__ */ p("div", { className: "ds:flex ds:flex-col ds:items-center ds:gap-[var(--spacing-md)]", children: [
+              /* @__PURE__ */ e(
+                L,
+                {
+                  "aria-hidden": "true",
+                  className: "ds:size-12 ds:text-[var(--success)]"
+                }
+              ),
+              /* @__PURE__ */ e(
+                "h1",
+                {
+                  ref: l,
+                  tabIndex: -1,
+                  className: "type-title-card ds:m-0 ds:outline-none",
+                  children: s
+                }
+              ),
+              /* @__PURE__ */ e("p", { className: "type-body ds:m-0 ds:text-[var(--muted-foreground)]", children: t }),
+              u && R ? (
+                // Mounts once when closing begins → role="status" announces the
+                // hand-off exactly once (no churn).
+                /* @__PURE__ */ e(
+                  "p",
+                  {
+                    role: "status",
+                    className: "type-body-sm ds:m-0 ds:text-[var(--muted-foreground)]",
+                    children: y ?? r("finishedTerminal.redirecting")
+                  }
+                )
+              ) : u ? /* @__PURE__ */ p("div", { className: "ds:flex ds:flex-col ds:items-center ds:gap-[var(--spacing-sm)]", children: [
+                /* @__PURE__ */ e("p", { className: "type-body-sm ds:m-0 ds:text-[var(--muted-foreground)]", children: B }),
+                /* @__PURE__ */ e(
+                  E,
+                  {
+                    intent: "secondary",
+                    size: "lg",
+                    type: "button",
+                    onClick: m,
+                    children: v ?? r("finishedTerminal.closeNow")
+                  }
+                )
+              ] }) : null
+            ] }) })
+          }
+        )
+      }
+    );
+  }
+);
+I.displayName = "FinishedTerminal";
+export {
+  I as F
+};
+//# sourceMappingURL=finished-terminal-VjZ_-eDD.js.map

package/dist/_chunks/finished-terminal-VjZ_-eDD.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"finished-terminal-VjZ_-eDD.js","sources":["../../node_modules/chromatic/isChromatic.mjs","../../src/components/finished-terminal/finished-terminal.tsx"],"sourcesContent":["export default function isChromatic(windowArgument) {\n  const windowToCheck = windowArgument || (globalThis.window !== undefined && globalThis);\n  return !!(\n    windowToCheck &&\n    (/Chromatic/.test(windowToCheck.navigator.userAgent) ||\n      /chromatic=true/.test(windowToCheck.location.href))\n  );\n}\n","/* ------------------------------------------------------------------ */\n/* FinishedTerminal — the post-completion success screen.               */\n/*                                                                       */\n/* The \"you're done\" terminal a public flow (e.g. sign.alfadocs.com)     */\n/* lands on after the signer finishes. A success tick + a consumer-      */\n/* supplied title/body, plus an i18n'd auto-close countdown next-step:   */\n/*                                                                       */\n/*  - `redirectUrl` set  → on elapse / \"Close now\", navigate there.      */\n/*  - no `redirectUrl`   → best-effort `window.close()` (blocked for     */\n/*    tabs the signer opened themselves), falling back to a redirect to   */\n/*    `brandUrl` (the public site).                                      */\n/*                                                                       */\n/* The browser navigation is the component's DEFAULT; pass `onClose` to   */\n/* take it over (analytics, SPA routing, a no-op in stories). The        */\n/* countdown freezes under Chromatic for deterministic snapshots.        */\n/* ------------------------------------------------------------------ */\n\nimport isChromatic from 'chromatic/isChromatic';\nimport {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n  type HTMLAttributes,\n} from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { CheckCircle2 } from 'lucide-react';\nimport { Card } from '../card';\nimport { Button } from '../button';\nimport { useCountdown } from '../../hooks/use-countdown';\n\n/** The public brand site the terminal falls back to when there's no\n *  `redirectUrl` and `window.close()` is blocked. */\nconst DEFAULT_BRAND_URL = 'https://www.alfadocs.com';\n\n/**\n * Gate for the URLs the terminal will navigate to. Allows only same-origin\n * relative paths (`/…`) and explicit `http(s)` absolute URLs; rejects\n * `javascript:` / `data:` / `vbscript:` and any other scheme.\n *\n * This terminal lives on public signing pages where `redirectUrl` may flow\n * from a URL parameter, so a hostile `javascript:…` value must never reach\n * `window.location.assign` (it would execute in the page). Exported for unit\n * testing — it is NOT part of the public component API (`index.ts` does not\n * re-export it).\n */\nexport function isNavigableUrl(url: string): boolean {\n  if (typeof url !== 'string' || url.length === 0) return false;\n  // Protocol-relative `//host` is a classic open-redirect bypass (it resolves\n  // to a cross-origin http(s) URL) — reject it; a caller wanting a cross-origin\n  // target must pass an explicit `https://` URL.\n  if (url.startsWith('//')) return false;\n  // Same-origin relative path.\n  if (url.startsWith('/')) return true;\n  try {\n    const { protocol } = new URL(url, window.location.origin);\n    return protocol === 'https:' || protocol === 'http:';\n  } catch {\n    return false;\n  }\n}\n\nexport interface FinishedTerminalProps extends Omit<\n  HTMLAttributes<HTMLDivElement>,\n  'title'\n> {\n  /** Completion headline — consumer-provided, already translated. */\n  title: string;\n  /** Completion sub-message — consumer-provided, already translated. */\n  body: string;\n  /**\n   * Auto-close countdown, in seconds. Default `10`. Set `0` to disable the\n   * countdown entirely (a static success screen with no next-step).\n   */\n  autoCloseSeconds?: number;\n  /**\n   * Where to send the signer when the countdown elapses / \"Close now\" is\n   * pressed. When omitted, the terminal does a best-effort `window.close()`\n   * and falls back to `brandUrl`.\n   *\n   * @security Navigated to via `window.location.assign`. Only same-origin\n   * relative paths and `http(s)` absolute URLs are honoured — `javascript:` /\n   * `data:` values are dropped. Pass a value from trusted backend config.\n   */\n  redirectUrl?: string;\n  /**\n   * Brand-site fallback used when there is no `redirectUrl` and the\n   * best-effort `window.close()` is blocked. Default `https://www.alfadocs.com`.\n   *\n   * @security Same navigation gate as `redirectUrl`.\n   */\n  brandUrl?: string;\n  /**\n   * Override the default close/redirect behaviour (e.g. SPA routing, analytics,\n   * or a no-op in stories). When provided, the terminal does NO browser\n   * navigation of its own — it just calls this.\n   */\n  onClose?: () => void;\n  /** Override the countdown line (default `ui.finishedTerminal.autoClose`). */\n  countdownLabel?: (seconds: number) => string;\n  /** Override the \"Close now\" label (default `ui.finishedTerminal.closeNow`). */\n  closeNowLabel?: string;\n  /** Override the post-close line (default `ui.finishedTerminal.redirecting`). */\n  redirectingLabel?: string;\n}\n\nexport const FinishedTerminal = forwardRef<\n  HTMLDivElement,\n  FinishedTerminalProps\n>(\n  (\n    {\n      title,\n      body,\n      autoCloseSeconds = 10,\n      redirectUrl,\n      brandUrl = DEFAULT_BRAND_URL,\n      onClose,\n      countdownLabel,\n      closeNowLabel,\n      redirectingLabel,\n      className,\n      ...rest\n    },\n    ref,\n  ) => {\n    const { t } = useTranslation();\n    const [closing, setClosing] = useState(false);\n    const closedRef = useRef(false);\n    const headingRef = useRef<HTMLHeadingElement>(null);\n\n    // Move focus to the completion heading on mount so assistive tech announces\n    // the terminal on arrival. This surface is reached by a flow/page\n    // transition, which otherwise leaves focus on <body> with no spoken\n    // context. The heading is a non-interactive focus receiver (tabIndex={-1},\n    // no visible ring) — the SPA \"route changed\" announcement pattern.\n    useEffect(() => {\n      headingRef.current?.focus();\n    }, []);\n\n    const handleClose = useCallback(() => {\n      if (closedRef.current) return;\n      closedRef.current = true;\n      setClosing(true);\n      if (onClose) {\n        onClose();\n        return;\n      }\n      // Default: navigate to the configured return URL, or best-effort close\n      // the tab and fall back to the brand site (window.close() is blocked for\n      // tabs the user opened themselves, so the redirect is the real fallback).\n      // Both URLs are gated against javascript:/data: schemes before navigating.\n      if (redirectUrl) {\n        if (isNavigableUrl(redirectUrl)) window.location.assign(redirectUrl);\n      } else {\n        window.close();\n        if (isNavigableUrl(brandUrl)) window.location.assign(brandUrl);\n      }\n    }, [onClose, redirectUrl, brandUrl]);\n\n    // Freeze the countdown under Chromatic so the snapshot is deterministic.\n    const { remaining } = useCountdown(autoCloseSeconds, {\n      autoStart: autoCloseSeconds > 0 && !isChromatic(),\n      onElapsed: handleClose,\n    });\n    const showCountdown = autoCloseSeconds > 0;\n\n    const countdownText = countdownLabel\n      ? countdownLabel(remaining)\n      : t('finishedTerminal.autoClose', { seconds: remaining });\n\n    return (\n      <div\n        ref={ref}\n        data-component=\"finished-terminal\"\n        className={[\n          'ds:flex ds:flex-1 ds:flex-col ds:items-center ds:overflow-y-auto ds:p-[var(--spacing-lg)]',\n          className,\n        ]\n          .filter(Boolean)\n          .join(' ')}\n        {...rest}\n      >\n        <Card\n          variant=\"elevated\"\n          className=\"ds:my-auto ds:min-w-0 ds:[inline-size:100%] ds:max-w-[28rem] ds:text-center\"\n        >\n          <Card.Body>\n            <div className=\"ds:flex ds:flex-col ds:items-center ds:gap-[var(--spacing-md)]\">\n              <CheckCircle2\n                aria-hidden=\"true\"\n                className=\"ds:size-12 ds:text-[var(--success)]\"\n              />\n              <h1\n                ref={headingRef}\n                tabIndex={-1}\n                className=\"type-title-card ds:m-0 ds:outline-none\"\n              >\n                {title}\n              </h1>\n              <p className=\"type-body ds:m-0 ds:text-[var(--muted-foreground)]\">\n                {body}\n              </p>\n              {showCountdown && closing ? (\n                // Mounts once when closing begins → role=\"status\" announces the\n                // hand-off exactly once (no churn).\n                <p\n                  role=\"status\"\n                  className=\"type-body-sm ds:m-0 ds:text-[var(--muted-foreground)]\"\n                >\n                  {redirectingLabel ?? t('finishedTerminal.redirecting')}\n                </p>\n              ) : showCountdown ? (\n                <div className=\"ds:flex ds:flex-col ds:items-center ds:gap-[var(--spacing-sm)]\">\n                  {/* The ticking count is visible-only — NO live region. A\n                      polite region re-rewritten every second would announce\n                      \"…10 sec…9 sec…8 sec…\", which is hostile to SR users. The\n                      completion itself is announced via the focused heading; the\n                      auto-close is a sighted convenience. */}\n                  <p className=\"type-body-sm ds:m-0 ds:text-[var(--muted-foreground)]\">\n                    {countdownText}\n                  </p>\n                  <Button\n                    intent=\"secondary\"\n                    size=\"lg\"\n                    type=\"button\"\n                    onClick={handleClose}\n                  >\n                    {closeNowLabel ?? t('finishedTerminal.closeNow')}\n                  </Button>\n                </div>\n              ) : null}\n            </div>\n          </Card.Body>\n        </Card>\n      </div>\n    );\n  },\n);\n\nFinishedTerminal.displayName = 'FinishedTerminal';\n"],"names":["isChromatic","windowArgument","windowToCheck","DEFAULT_BRAND_URL","isNavigableUrl","url","protocol","FinishedTerminal","forwardRef","title","body","autoCloseSeconds","redirectUrl","brandUrl","onClose","countdownLabel","closeNowLabel","redirectingLabel","className","rest","ref","t","useTranslation","closing","setClosing","useState","closedRef","useRef","headingRef","useEffect","_a","handleClose","useCallback","remaining","useCountdown","showCountdown","countdownText","jsx","Card","jsxs","CheckCircle2","Button"],"mappings":"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","x_google_ignoreList":[0]}