asterui 0.12.43 → 0.12.45

package/dist/components/Tour.js

@@ -1,237 +1,400 @@
-import { jsxs as a, jsx as h } from "react/jsx-runtime";
-import { useState as P, useRef as Z, useCallback as m, useEffect as g } from "react";
-import { createPortal as I } from "react-dom";
-const j = (t) => t ? typeof t == "function" ? t() : t.current : null, R = (t, f, e, i) => {
-  if (!t || f === "center")
+import { jsx as l, jsxs as p } from "react/jsx-runtime";
+import { forwardRef as St, useState as H, useRef as K, useCallback as y, useImperativeHandle as jt, useEffect as L } from "react";
+import { createPortal as Dt } from "react-dom";
+const et = (t) => t ? typeof t == "function" ? t() : t.current : null, qt = (t, c, i, o, k) => {
+  if (!t || c === "center")
     return {
-      top: window.innerHeight / 2 - e.height / 2,
-      left: window.innerWidth / 2 - e.width / 2
+      top: window.innerHeight / 2 - i.height / 2,
+      left: window.innerWidth / 2 - i.width / 2
     };
-  const o = window.scrollY, r = window.scrollX;
+  const a = window.scrollY, d = window.scrollX, D = typeof k == "object" && k.pointAtCenter;
   return {
     top: {
-      top: t.top + o - e.height - i,
-      left: t.left + r + t.width / 2 - e.width / 2
+      top: t.top + a - i.height - o,
+      left: t.left + d + t.width / 2 - i.width / 2
     },
     topLeft: {
-      top: t.top + o - e.height - i,
-      left: t.left + r
+      top: t.top + a - i.height - o,
+      left: t.left + d
     },
     topRight: {
-      top: t.top + o - e.height - i,
-      left: t.right + r - e.width
+      top: t.top + a - i.height - o,
+      left: t.right + d - i.width
     },
     bottom: {
-      top: t.bottom + o + i,
-      left: t.left + r + t.width / 2 - e.width / 2
+      top: t.bottom + a + o,
+      left: t.left + d + t.width / 2 - i.width / 2
     },
     bottomLeft: {
-      top: t.bottom + o + i,
-      left: t.left + r
+      top: t.bottom + a + o,
+      left: t.left + d
     },
     bottomRight: {
-      top: t.bottom + o + i,
-      left: t.right + r - e.width
+      top: t.bottom + a + o,
+      left: t.right + d - i.width
     },
     left: {
-      top: t.top + o + t.height / 2 - e.height / 2,
-      left: t.left + r - e.width - i
+      top: t.top + a + t.height / 2 - i.height / 2,
+      left: t.left + d - i.width - o
     },
     leftTop: {
-      top: t.top + o,
-      left: t.left + r - e.width - i
+      top: t.top + a,
+      left: t.left + d - i.width - o
     },
     leftBottom: {
-      top: t.bottom + o - e.height,
-      left: t.left + r - e.width - i
+      top: t.bottom + a - i.height,
+      left: t.left + d - i.width - o
     },
     right: {
-      top: t.top + o + t.height / 2 - e.height / 2,
-      left: t.right + r + i
+      top: t.top + a + t.height / 2 - i.height / 2,
+      left: t.right + d + o
     },
     rightTop: {
-      top: t.top + o,
-      left: t.right + r + i
+      top: t.top + a,
+      left: t.right + d + o
     },
     rightBottom: {
-      top: t.bottom + o - e.height,
-      left: t.right + r + i
+      top: t.bottom + a - i.height,
+      left: t.right + d + o
     },
     center: {
-      top: window.innerHeight / 2 - e.height / 2,
-      left: window.innerWidth / 2 - e.width / 2
+      top: window.innerHeight / 2 - i.height / 2,
+      left: window.innerWidth / 2 - i.width / 2
     }
-  }[f];
-}, nt = ({
-  open: t = !1,
-  onClose: f,
-  onFinish: e,
-  steps: i,
-  current: o,
-  onChange: r,
-  mask: p = !0,
-  type: D = "default",
-  gap: c = 8,
-  prevButtonText: F = "Previous",
-  nextButtonText: H = "Next",
-  finishButtonText: U = "Finish",
-  skipButtonText: W = "Skip",
-  showSkip: X = !0,
-  showIndicators: Y = !0,
-  closeOnMaskClick: A = !0,
-  closeOnEscape: E = !0,
-  scrollIntoView: S = !0,
-  zIndex: v = 1e3
-}) => {
-  const [q, T] = P(0), [w, z] = P(null), [B, G] = P({ top: 0, left: 0 }), N = Z(null), b = o !== void 0, s = b ? o : q, l = i[s], u = Array.isArray(c) ? c[0] : c, C = Array.isArray(c) ? c[1] : c, y = m(() => {
-    if (!l) return;
-    const d = j(l.target)?.getBoundingClientRect() ?? null;
-    if (z(d), N.current) {
-      const M = N.current.getBoundingClientRect(), Q = l.placement ?? "bottom", V = R(d, Q, M, C + u);
-      G(V);
-    }
-  }, [l, C, u]), k = m(
-    (n) => {
-      n < 0 || n >= i.length || (i[s]?.onClose?.(), b || T(n), r?.(n), i[n]?.onOpen?.());
-    },
-    [i, s, b, r]
-  ), x = m(() => {
-    k(s - 1);
-  }, [s, k]), L = m(() => {
-    s === i.length - 1 ? (e?.(), f?.()) : k(s + 1);
-  }, [s, i.length, k, e, f]), K = m(() => {
-    f?.();
-  }, [f]), O = m(() => {
-    A && f?.();
-  }, [A, f]);
-  if (g(() => {
-    t && !b && T(0);
-  }, [t, b]), g(() => {
-    t && (y(), S && l?.target && j(l.target)?.scrollIntoView({ behavior: "smooth", block: "center" }), s === 0 && l?.onOpen?.());
-  }, [t, s, l, S, y]), g(() => {
-    if (!t) return;
-    const n = () => y();
-    return window.addEventListener("resize", n), window.addEventListener("scroll", n, !0), requestAnimationFrame(y), () => {
-      window.removeEventListener("resize", n), window.removeEventListener("scroll", n, !0);
-    };
-  }, [t, y]), g(() => {
-    if (!t || !E) return;
-    const n = (d) => {
-      d.key === "Escape" ? f?.() : d.key === "ArrowRight" || d.key === "ArrowDown" ? L() : (d.key === "ArrowLeft" || d.key === "ArrowUp") && x();
-    };
-    return document.addEventListener("keydown", n), () => document.removeEventListener("keydown", n);
-  }, [t, E, f, L, x]), !t || !l) return null;
-  const _ = s === 0, $ = s === i.length - 1, J = /* @__PURE__ */ a(
-    "div",
-    {
-      className: "fixed inset-0",
-      style: { zIndex: v },
-      "data-testid": "tour",
-      role: "dialog",
-      "aria-modal": "true",
-      children: [
-        p && /* @__PURE__ */ a(
-          "svg",
+  }[c];
+}, Wt = (t) => ({
+  top: { position: "bottom-0 left-1/2", transform: "translate(-50%, 50%) rotate(45deg)" },
+  topLeft: { position: "bottom-0 left-4", transform: "translate(0, 50%) rotate(45deg)" },
+  topRight: { position: "bottom-0 right-4", transform: "translate(0, 50%) rotate(45deg)" },
+  bottom: { position: "top-0 left-1/2", transform: "translate(-50%, -50%) rotate(45deg)" },
+  bottomLeft: { position: "top-0 left-4", transform: "translate(0, -50%) rotate(45deg)" },
+  bottomRight: { position: "top-0 right-4", transform: "translate(0, -50%) rotate(45deg)" },
+  left: { position: "right-0 top-1/2", transform: "translate(50%, -50%) rotate(45deg)" },
+  leftTop: { position: "right-0 top-4", transform: "translate(50%, 0) rotate(45deg)" },
+  leftBottom: { position: "right-0 bottom-4", transform: "translate(50%, 0) rotate(45deg)" },
+  right: { position: "left-0 top-1/2", transform: "translate(-50%, -50%) rotate(45deg)" },
+  rightTop: { position: "left-0 top-4", transform: "translate(-50%, 0) rotate(45deg)" },
+  rightBottom: { position: "left-0 bottom-4", transform: "translate(-50%, 0) rotate(45deg)" },
+  center: { position: "hidden", transform: "" }
+})[t], Ft = /* @__PURE__ */ l("svg", { className: "w-4 h-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ l("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }), Ht = St(
+  ({
+    open: t = !1,
+    onClose: c,
+    onFinish: i,
+    steps: o,
+    current: k,
+    onChange: a,
+    arrow: d = !0,
+    closeIcon: D,
+    mask: M = !0,
+    disabledInteraction: O = !1,
+    type: nt = "default",
+    gap: V = { offset: 6, radius: 2 },
+    prevButtonText: rt = "Previous",
+    nextButtonText: it = "Next",
+    finishButtonText: lt = "Finish",
+    skipButtonText: st = "Skip",
+    showSkip: at = !0,
+    showIndicators: dt = !0,
+    closeOnMaskClick: I = !0,
+    closeOnEscape: U = !0,
+    scrollIntoViewOptions: ct = !0,
+    zIndex: A = 1001,
+    indicatorsRender: X,
+    actionsRender: Y,
+    getPopupContainer: z,
+    classNames: m = {},
+    styles: b = {},
+    className: ft,
+    style: ht,
+    "data-testid": ut,
+    ...mt
+  }, bt) => {
+    const [pt, G] = H(0), [u, wt] = H(null), [_, gt] = H({ top: 0, left: 0 }), w = K(null), vt = K(null), $ = K(null), B = ut ?? "tour", f = (n) => `${B}-${n}`, x = k !== void 0, s = x ? k : pt, e = o[s], q = V.offset ?? 6, h = V.radius ?? 2, J = Array.isArray(q) ? q[0] : q, W = e?.arrow ?? d, g = e?.mask ?? M, yt = e?.type ?? nt, E = e?.scrollIntoViewOptions ?? ct, Q = e?.closeIcon ?? D, kt = W !== !1 && e?.placement !== "center", $t = typeof g == "object" && g.color ? g.color : "rgba(0, 0, 0, 0.5)", xt = typeof g == "object" && g.style ? g.style : {}, N = y(() => {
+      if (!e) return;
+      const r = et(e.target)?.getBoundingClientRect() ?? null;
+      if (wt(r), w.current) {
+        const C = w.current.getBoundingClientRect(), S = e.placement ?? "bottom", j = qt(
+          r,
+          S,
+          C,
+          J + h,
+          W
+        );
+        gt(j);
+      }
+    }, [e, J, h, W]), v = y(
+      (n) => {
+        n < 0 || n >= o.length || (o[s]?.onClose?.(), x || G(n), a?.(n), $.current && ($.current.textContent = `Step ${n + 1} of ${o.length}: ${typeof o[n]?.title == "string" ? o[n]?.title : ""}`));
+      },
+      [o, s, x, a]
+    ), F = y(() => {
+      c?.();
+    }, [c]), P = y(() => {
+      e?.prevButtonProps?.onClick?.(), v(s - 1);
+    }, [s, v, e]), T = y(() => {
+      e?.nextButtonProps?.onClick?.(), s === o.length - 1 ? (i?.(), c?.()) : v(s + 1);
+    }, [s, o.length, v, i, c, e]), Nt = y(() => {
+      c?.();
+    }, [c]), Pt = y(() => {
+      I && c?.();
+    }, [I, c]);
+    if (jt(
+      bt,
+      () => ({
+        goTo: v,
+        next: T,
+        prev: P,
+        close: F
+      }),
+      [v, T, P, F]
+    ), L(() => {
+      t && !x && G(0);
+    }, [t, x]), L(() => {
+      if (t) {
+        if (N(), E && e?.target) {
+          const n = et(e.target);
+          if (n) {
+            const r = typeof E == "object" ? E : { behavior: "smooth", block: "center" };
+            n.scrollIntoView(r);
+          }
+        }
+        s === 0 && $.current && ($.current.textContent = `Tour started. Step 1 of ${o.length}: ${typeof e?.title == "string" ? e?.title : ""}`);
+      }
+    }, [t, s, e, E, N, o.length]), L(() => {
+      if (!t) return;
+      const n = () => N();
+      return window.addEventListener("resize", n), window.addEventListener("scroll", n, !0), requestAnimationFrame(N), () => {
+        window.removeEventListener("resize", n), window.removeEventListener("scroll", n, !0);
+      };
+    }, [t, N]), L(() => {
+      if (!t) return;
+      const n = (r) => {
+        if (r.key === "Escape" && U)
+          c?.();
+        else if (r.key === "ArrowRight" || r.key === "ArrowDown")
+          r.preventDefault(), T();
+        else if (r.key === "ArrowLeft" || r.key === "ArrowUp")
+          r.preventDefault(), P();
+        else if (r.key === "Tab" && w.current) {
+          const C = w.current.querySelectorAll(
+            'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+          ), S = C[0], j = C[C.length - 1];
+          r.shiftKey && document.activeElement === S ? (r.preventDefault(), j?.focus()) : !r.shiftKey && document.activeElement === j && (r.preventDefault(), S?.focus());
+        }
+      };
+      return document.addEventListener("keydown", n), () => document.removeEventListener("keydown", n);
+    }, [t, U, c, T, P]), L(() => {
+      t && w.current && requestAnimationFrame(() => {
+        w.current?.querySelector("button")?.focus();
+      });
+    }, [t, s]), !t || !e) return null;
+    const Tt = s === 0, Z = s === o.length - 1, R = e.placement ?? "bottom", tt = Wt(R), Ct = dt && o.length > 1 ? /* @__PURE__ */ l(
+      "div",
+      {
+        className: `flex gap-1 mb-4 ${m.indicator ?? ""}`,
+        style: b.indicator,
+        "data-testid": f("indicators"),
+        children: o.map((n, r) => /* @__PURE__ */ l(
+          "button",
           {
-            className: "absolute inset-0 w-full h-full pointer-events-auto",
-            onClick: O,
-            style: { zIndex: v },
-            children: [
-              /* @__PURE__ */ h("defs", { children: /* @__PURE__ */ a("mask", { id: "tour-mask", children: [
-                /* @__PURE__ */ h("rect", { x: "0", y: "0", width: "100%", height: "100%", fill: "white" }),
-                w && /* @__PURE__ */ h(
+            className: `w-2 h-2 rounded-full transition-colors ${r === s ? "bg-primary" : "bg-base-300 hover:bg-base-content/30"}`,
+            onClick: () => v(r),
+            "aria-label": `Go to step ${r + 1}`,
+            "aria-current": r === s ? "step" : void 0,
+            "data-testid": f(`indicator-${r}`)
+          },
+          r
+        ))
+      }
+    ) : null, Lt = X ? X(s, o.length) : Ct, ot = /* @__PURE__ */ p(
+      "div",
+      {
+        className: `flex items-center justify-between gap-2 ${m.footer ?? ""}`,
+        style: b.footer,
+        "data-testid": f("footer"),
+        children: [
+          /* @__PURE__ */ l("div", { children: at && !Z && /* @__PURE__ */ l(
+            "button",
+            {
+              className: "btn btn-ghost btn-sm",
+              onClick: Nt,
+              "data-testid": f("skip"),
+              children: st
+            }
+          ) }),
+          /* @__PURE__ */ p("div", { className: "flex gap-2", children: [
+            !Tt && /* @__PURE__ */ l(
+              "button",
+              {
+                className: "btn btn-ghost btn-sm",
+                onClick: P,
+                "data-testid": f("prev"),
+                children: e.prevButtonProps?.children ?? rt
+              }
+            ),
+            /* @__PURE__ */ l(
+              "button",
+              {
+                className: `btn btn-sm ${yt === "primary" ? "btn-primary" : ""}`,
+                onClick: T,
+                "data-testid": f("next"),
+                children: e.nextButtonProps?.children ?? (Z ? lt : it)
+              }
+            )
+          ] })
+        ]
+      }
+    ), At = Y ? Y(ot, { current: s, total: o.length }) : ot, Bt = /* @__PURE__ */ p(
+      "div",
+      {
+        ref: vt,
+        className: `fixed inset-0 ${m.root ?? ""} ${ft ?? ""}`,
+        style: { zIndex: A, ...b.root, ...ht },
+        "data-testid": B,
+        "data-state": t ? "open" : "closed",
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-label": `Tour step ${s + 1} of ${o.length}`,
+        ...mt,
+        children: [
+          /* @__PURE__ */ l(
+            "div",
+            {
+              ref: $,
+              className: "sr-only",
+              role: "status",
+              "aria-live": "polite",
+              "aria-atomic": "true"
+            }
+          ),
+          g && /* @__PURE__ */ p(
+            "svg",
+            {
+              className: `absolute inset-0 w-full h-full pointer-events-auto ${m.mask ?? ""}`,
+              style: { zIndex: A, ...xt, ...b.mask },
+              onClick: Pt,
+              "data-testid": f("mask"),
+              "aria-hidden": "true",
+              children: [
+                /* @__PURE__ */ l("defs", { children: /* @__PURE__ */ p("mask", { id: `tour-mask-${B}`, children: [
+                  /* @__PURE__ */ l("rect", { x: "0", y: "0", width: "100%", height: "100%", fill: "white" }),
+                  u && /* @__PURE__ */ l(
+                    "rect",
+                    {
+                      x: u.left - h,
+                      y: u.top - h,
+                      width: u.width + h * 2,
+                      height: u.height + h * 2,
+                      rx: h,
+                      fill: "black"
+                    }
+                  )
+                ] }) }),
+                /* @__PURE__ */ l(
                   "rect",
                   {
-                    x: w.left - u,
-                    y: w.top - u,
-                    width: w.width + u * 2,
-                    height: w.height + u * 2,
-                    rx: u,
-                    fill: "black"
+                    x: "0",
+                    y: "0",
+                    width: "100%",
+                    height: "100%",
+                    fill: $t,
+                    mask: `url(#tour-mask-${B})`
                   }
                 )
-              ] }) }),
-              /* @__PURE__ */ h(
-                "rect",
-                {
-                  x: "0",
-                  y: "0",
-                  width: "100%",
-                  height: "100%",
-                  fill: "rgba(0, 0, 0, 0.5)",
-                  mask: "url(#tour-mask)"
-                }
-              )
-            ]
-          }
-        ),
-        /* @__PURE__ */ a(
-          "div",
-          {
-            ref: N,
-            className: `absolute bg-base-100 rounded-lg shadow-xl border border-base-300 max-w-sm ${l.className ?? ""}`,
-            style: {
-              top: B.top,
-              left: B.left,
-              zIndex: v + 1
-            },
-            onClick: (n) => n.stopPropagation(),
-            "data-testid": "tour-popover",
-            children: [
-              l.cover && /* @__PURE__ */ h("div", { className: "rounded-t-lg overflow-hidden", children: l.cover }),
-              /* @__PURE__ */ a("div", { className: "p-4", children: [
-                /* @__PURE__ */ h("h3", { className: "font-semibold text-lg mb-1", children: l.title }),
-                l.description && /* @__PURE__ */ h("p", { className: "text-base-content/70 text-sm mb-4", children: l.description }),
-                Y && i.length > 1 && /* @__PURE__ */ h("div", { className: "flex gap-1 mb-4", children: i.map((n, d) => /* @__PURE__ */ h(
+              ]
+            }
+          ),
+          O && u && /* @__PURE__ */ l(
+            "div",
+            {
+              className: "absolute pointer-events-auto",
+              style: {
+                left: u.left - h,
+                top: u.top - h,
+                width: u.width + h * 2,
+                height: u.height + h * 2,
+                zIndex: A + 1
+              },
+              "data-testid": f("blocker")
+            }
+          ),
+          /* @__PURE__ */ p(
+            "div",
+            {
+              ref: w,
+              className: `absolute bg-base-100 rounded-lg shadow-xl border border-base-300 max-w-sm ${m.popover ?? ""} ${e.className ?? ""}`,
+              style: {
+                top: _.top,
+                left: _.left,
+                zIndex: A + 2,
+                ...b.popover,
+                ...e.style
+              },
+              onClick: (n) => n.stopPropagation(),
+              "data-testid": f("popover"),
+              "data-placement": R,
+              children: [
+                kt && /* @__PURE__ */ l(
+                  "div",
+                  {
+                    className: `absolute w-3 h-3 bg-base-100 border-base-300 ${tt.position}`,
+                    style: {
+                      transform: tt.transform,
+                      borderWidth: "1px",
+                      borderTopColor: "transparent",
+                      borderLeftColor: "transparent"
+                    },
+                    "data-testid": f("arrow")
+                  }
+                ),
+                Q !== !1 && /* @__PURE__ */ l(
                   "button",
                   {
-                    className: `w-2 h-2 rounded-full transition-colors ${d === s ? "bg-primary" : "bg-base-300 hover:bg-base-content/30"}`,
-                    onClick: () => k(d),
-                    "aria-label": `Go to step ${d + 1}`
-                  },
-                  d
-                )) }),
-                /* @__PURE__ */ a("div", { className: "flex items-center justify-between gap-2", children: [
-                  /* @__PURE__ */ h("div", { children: X && !$ && /* @__PURE__ */ h(
-                    "button",
-                    {
-                      className: "btn btn-ghost btn-sm",
-                      onClick: K,
-                      "data-testid": "tour-skip",
-                      children: W
-                    }
-                  ) }),
-                  /* @__PURE__ */ a("div", { className: "flex gap-2", children: [
-                    !_ && /* @__PURE__ */ h(
-                      "button",
-                      {
-                        className: "btn btn-ghost btn-sm",
-                        onClick: x,
-                        "data-testid": "tour-prev",
-                        children: F
-                      }
-                    ),
-                    /* @__PURE__ */ h(
-                      "button",
-                      {
-                        className: `btn btn-sm ${D === "primary" ? "btn-primary" : ""}`,
-                        onClick: L,
-                        "data-testid": "tour-next",
-                        children: $ ? U : H
-                      }
-                    )
-                  ] })
-                ] })
-              ] })
-            ]
-          }
-        )
-      ]
-    }
-  );
-  return I(J, document.body);
-};
+                    className: `absolute top-2 right-2 btn btn-ghost btn-xs btn-circle ${m.close ?? ""}`,
+                    style: b.close,
+                    onClick: F,
+                    "aria-label": "Close tour",
+                    "data-testid": f("close"),
+                    children: Q ?? Ft
+                  }
+                ),
+                e.cover && /* @__PURE__ */ l("div", { className: "rounded-t-lg overflow-hidden", "data-testid": f("cover"), children: e.cover }),
+                /* @__PURE__ */ p(
+                  "div",
+                  {
+                    className: `p-4 ${m.content ?? ""}`,
+                    style: b.content,
+                    "data-testid": f("content"),
+                    children: [
+                      /* @__PURE__ */ p(
+                        "div",
+                        {
+                          className: `${m.header ?? ""}`,
+                          style: b.header,
+                          "data-testid": f("header"),
+                          children: [
+                            /* @__PURE__ */ l("h3", { className: "font-semibold text-lg mb-1 pr-6", children: e.title }),
+                            e.description && /* @__PURE__ */ l("p", { className: "text-base-content/70 text-sm mb-4", children: e.description })
+                          ]
+                        }
+                      ),
+                      Lt,
+                      At
+                    ]
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    ), Et = z ? z(document.body) : document.body;
+    return Dt(Bt, Et);
+  }
+);
+Ht.displayName = "Tour";
 export {
-  nt as Tour
+  Ht as Tour
 };
 //# sourceMappingURL=Tour.js.map