impact-nova 2.6.0-alpha.0 → 2.6.0

package/dist/components/flows/guidance/renderers/guidance-tour-overlay.js

@@ -1,33 +1,33 @@
-import { jsxs as h, jsx as o, Fragment as C } from "react/jsx-runtime";
-import * as l from "react";
-import { createPortal as $ } from "react-dom";
-import { GuidanceStepPanel as S } from "./guidance-card-shared.js";
-import { useGuidanceOverlayGeometry as z } from "../hooks/useGuidanceOverlayGeometry.js";
-import { useAdvanceOnTargetClick as E, buildHighlightRectForTarget as P, computePopoverPosition as A } from "./guidance-renderer-shared.js";
-const R = 220, n = `motion-safe:transition-[top,left,width,height] motion-safe:duration-[${R}ms] motion-safe:ease-[cubic-bezier(0.22,1,0.36,1)]`;
-function G({
+import { jsxs as g, jsx as o, Fragment as $ } from "react/jsx-runtime";
+import * as h from "react";
+import { createPortal as z } from "react-dom";
+import { GuidanceStepPanel as A } from "./guidance-card-shared.js";
+import { useGuidanceOverlayGeometry as G } from "../hooks/useGuidanceOverlayGeometry.js";
+import { useAdvanceOnTargetClick as P, buildHighlightRectForTarget as T, computePopoverPosition as H } from "./guidance-renderer-shared.js";
+const _ = 220, i = `motion-safe:transition-[top,left,width,height] motion-safe:duration-[${_}ms] motion-safe:ease-[cubic-bezier(0.22,1,0.36,1)]`;
+function L({
   highlightRect: e,
-  blocksPointerEvents: u = !0
+  blocksPointerEvents: n = !0
 }) {
-  const i = typeof window < "u" ? window.innerWidth : 0, g = typeof window < "u" ? window.innerHeight : 0, s = e.x + e.width, a = e.y + e.height, d = u ? `pointer-events-auto absolute bg-[var(--guidance-backdrop-bg)] opacity-[var(--guidance-backdrop-opacity,0.6)] ${n}` : `pointer-events-none absolute bg-[var(--guidance-backdrop-bg)] opacity-[var(--guidance-backdrop-opacity,0.6)] ${n}`;
-  return /* @__PURE__ */ h(C, { children: [
+  const a = typeof window < "u" ? window.innerWidth : 0, d = typeof window < "u" ? window.innerHeight : 0, l = e.x + e.width, c = e.y + e.height, r = n ? `pointer-events-auto absolute bg-[var(--guidance-backdrop-bg)] opacity-[var(--guidance-backdrop-opacity,0.6)] ${i}` : `pointer-events-none absolute bg-[var(--guidance-backdrop-bg)] opacity-[var(--guidance-backdrop-opacity,0.6)] ${i}`;
+  return /* @__PURE__ */ g($, { children: [
     /* @__PURE__ */ o(
       "div",
       {
-        className: d,
-        style: { top: 0, left: 0, width: i, height: e.y },
+        className: r,
+        style: { top: 0, left: 0, width: a, height: e.y },
         "aria-hidden": "true"
       }
     ),
     /* @__PURE__ */ o(
       "div",
       {
-        className: d,
+        className: r,
         style: {
-          top: a,
+          top: c,
           left: 0,
-          width: i,
-          height: Math.max(0, g - a)
+          width: a,
+          height: Math.max(0, d - c)
         },
         "aria-hidden": "true"
       }
@@ -35,7 +35,7 @@ function G({
     /* @__PURE__ */ o(
       "div",
       {
-        className: d,
+        className: r,
         style: {
           top: e.y,
           left: 0,
@@ -48,11 +48,11 @@ function G({
     /* @__PURE__ */ o(
       "div",
       {
-        className: d,
+        className: r,
         style: {
           top: e.y,
-          left: s,
-          width: Math.max(0, i - s),
+          left: l,
+          width: Math.max(0, a - l),
           height: e.height
         },
         "aria-hidden": "true"
@@ -60,58 +60,94 @@ function G({
     )
   ] });
 }
+const C = 12, y = 20;
+function M(e) {
+  const n = C / 2, a = e.placement === "left" || e.placement === "right", d = a ? e.highlightRect.y + e.highlightRect.height / 2 : e.highlightRect.x + e.highlightRect.width / 2, l = a ? e.popoverTop : e.popoverLeft, c = a ? e.popoverHeight : e.popoverWidth, r = d - l - n, m = Math.max(
+    y,
+    c - y - C
+  );
+  return Math.min(Math.max(r, y), m);
+}
 function B({
+  placement: e,
+  offset: n
+}) {
+  const a = e === "left" || e === "right" ? { top: n } : { left: n }, d = {
+    bottom: "left-0 top-0 -translate-y-1/2 border-l border-t",
+    top: "bottom-0 left-0 translate-y-1/2 border-b border-r",
+    right: "left-0 top-0 -translate-x-1/2 border-b border-l",
+    left: "right-0 top-0 translate-x-1/2 border-r border-t"
+  }[e];
+  return /* @__PURE__ */ o(
+    "span",
+    {
+      "aria-hidden": "true",
+      className: `pointer-events-none absolute z-0 size-3 rotate-45 border border-[var(--color-border-accent-muted)] bg-[var(--color-border-accent-muted)] ${d}`,
+      style: a
+    }
+  );
+}
+function j({
   instruction: e,
-  overlayComponent: u,
-  onNext: i,
-  onSkip: g,
-  onDismiss: s
+  overlayComponent: n,
+  onNext: a,
+  onSkip: d,
+  onDismiss: l,
+  onBack: c
 }) {
-  const a = e.target?.element, d = z(a, e.stepId), I = e.stepIndex + 1 >= e.totalSteps, c = E(e, i), v = c || e.advanceOn === "auto", b = l.useRef(null), f = l.useRef(null), [m, O] = l.useState({ width: 400, height: 240 }), N = l.useCallback(() => {
-    a?.click();
-  }, [a]);
-  if (l.useLayoutEffect(() => {
-    const r = f.current;
-    r?.parentElement === document.body && document.body.appendChild(r);
-  }, [e.stepId, v]), l.useLayoutEffect(() => {
-    const r = b.current;
-    if (!r)
+  const r = e.target?.element, m = G(r, e.stepId), N = e.stepIndex + 1 >= e.totalSteps, f = P(e, a), u = f || e.advanceOn === "auto", w = h.useRef(null), k = h.useRef(null), [v, E] = h.useState({ width: 400, height: 240 }), R = h.useCallback(() => {
+    r?.click();
+  }, [r]);
+  if (h.useLayoutEffect(() => {
+    const p = k.current;
+    p?.parentElement === document.body && document.body.appendChild(p);
+  }, [e.stepId, u]), h.useLayoutEffect(() => {
+    const p = w.current;
+    if (!p)
       return;
-    const k = () => {
-      const p = r.getBoundingClientRect();
-      p.width > 0 && p.height > 0 && O({
-        width: p.width,
-        height: p.height
+    const I = () => {
+      const b = p.getBoundingClientRect();
+      b.width > 0 && b.height > 0 && E({
+        width: b.width,
+        height: b.height
       });
     };
-    k();
-    const x = new ResizeObserver(k);
-    return x.observe(r), () => {
-      x.disconnect();
+    I();
+    const O = new ResizeObserver(I);
+    return O.observe(p), () => {
+      O.disconnect();
     };
-  }, [e.stepId, e.content.title, e.content.body]), !d || !a || typeof document > "u")
+  }, [e.stepId, e.content.title, e.content.body]), !m || !r || typeof document > "u")
     return null;
-  const t = P(a), y = A({
+  const t = T(r), s = H({
     targetRect: t,
-    popoverWidth: m.width,
-    popoverHeight: m.height
-  }), w = `guidance-mask-${e.stepId}`;
-  return $(
-    /* @__PURE__ */ h(
+    popoverWidth: v.width,
+    popoverHeight: v.height,
+    preferredPlacement: e.placement
+  }), S = M({
+    placement: s.placement,
+    popoverTop: s.top,
+    popoverLeft: s.left,
+    highlightRect: t,
+    popoverWidth: v.width,
+    popoverHeight: v.height
+  }), x = `guidance-mask-${e.stepId}`;
+  return z(
+    /* @__PURE__ */ g(
       "div",
       {
-        ref: f,
-        "data-component": u,
-        className: "fixed inset-0 z-50 pointer-events-none",
+        ref: k,
+        "data-component": n,
+        className: "fixed inset-0 z-[60] pointer-events-none",
         role: "presentation",
         children: [
-          /* @__PURE__ */ h(
+          /* @__PURE__ */ g(
             "svg",
             {
-              className: `pointer-events-none absolute inset-0 size-full ${n}`,
+              className: `pointer-events-none absolute inset-0 size-full ${i}`,
               "aria-hidden": "true",
               children: [
-                /* @__PURE__ */ o("defs", { children: /* @__PURE__ */ h("mask", { id: w, children: [
+                /* @__PURE__ */ o("defs", { children: /* @__PURE__ */ g("mask", { id: x, children: [
                   /* @__PURE__ */ o("rect", { width: "100%", height: "100%", fill: "white" }),
                   /* @__PURE__ */ o(
                     "rect",
@@ -122,7 +158,7 @@ function B({
                       height: t.height,
                       rx: "8",
                       fill: "black",
-                      className: n
+                      className: i
                     }
                   )
                 ] }) }),
@@ -133,24 +169,37 @@ function B({
                     height: "100%",
                     fill: "var(--guidance-backdrop-bg)",
                     fillOpacity: "var(--guidance-backdrop-opacity, 0.6)",
-                    mask: `url(#${w})`
+                    mask: `url(#${x})`
                   }
                 )
               ]
             }
           ),
           /* @__PURE__ */ o(
-            G,
+            L,
             {
               highlightRect: t,
-              blocksPointerEvents: !v
+              blocksPointerEvents: !u
             }
           ),
-          c ? /* @__PURE__ */ o(
+          u ? null : /* @__PURE__ */ o(
+            "div",
+            {
+              className: "pointer-events-auto absolute z-10",
+              style: {
+                top: t.y,
+                left: t.x,
+                width: t.width,
+                height: t.height
+              },
+              "aria-hidden": "true"
+            }
+          ),
+          f ? /* @__PURE__ */ o(
             "button",
             {
               type: "button",
-              className: `absolute z-10 cursor-pointer border-0 bg-transparent p-0 pointer-events-auto ${n}`,
+              className: `absolute z-10 cursor-pointer border-0 bg-transparent p-0 pointer-events-auto ${i}`,
               style: {
                 top: t.y,
                 left: t.x,
@@ -158,13 +207,13 @@ function B({
                 height: t.height
               },
               "aria-label": `Click ${e.content.title}`,
-              onClick: N
+              onClick: R
             }
           ) : null,
           /* @__PURE__ */ o(
             "div",
             {
-              className: `pointer-events-none absolute rounded-lg ring-2 ring-[var(--guidance-highlight-ring,var(--color-primary))] ${n}`,
+              className: `pointer-events-none absolute rounded-lg ring-2 ring-[var(--guidance-highlight-ring,var(--color-primary))] ${i}`,
               style: {
                 top: t.y,
                 left: t.x,
@@ -173,37 +222,51 @@ function B({
               }
             }
           ),
-          /* @__PURE__ */ o(
+          /* @__PURE__ */ g(
             "div",
             {
-              ref: b,
-              className: `pointer-events-auto absolute z-20 w-[min(400px,calc(100vw-2rem))] overflow-hidden rounded-2xl border border-stroke bg-canvas shadow-elevation-floating ${n}`,
+              ref: w,
+              className: `pointer-events-auto absolute z-20 w-[min(400px,calc(100vw-2rem))] ${i}`,
               style: {
-                top: y.top,
-                left: y.left
+                top: s.top,
+                left: s.left
               },
               role: "dialog",
               "aria-labelledby": `guidance-tour-title-${e.stepId}`,
               "aria-describedby": `guidance-tour-body-${e.stepId}`,
-              children: /* @__PURE__ */ o(
-                S,
-                {
-                  title: e.content.title,
-                  body: e.content.body,
-                  optionalFooter: e.advanceOn !== "auto" ? e.content.footer : void 0,
-                  stepIndex: e.stepIndex,
-                  totalSteps: e.totalSteps,
-                  skippable: e.skippable,
-                  primaryActionLabel: I ? "Done" : "Next",
-                  onSkip: g,
-                  onDismiss: s,
-                  onPrimaryAction: i,
-                  showPrimaryAction: !c && e.advanceOn !== "auto",
-                  footerHint: c ? e.content.footer ?? "Click the highlighted button to continue." : e.advanceOn === "auto" ? e.content.footer ?? "Complete the action above to continue." : null,
-                  titleId: `guidance-tour-title-${e.stepId}`,
-                  bodyId: `guidance-tour-body-${e.stepId}`
-                }
-              )
+              children: [
+                /* @__PURE__ */ o(
+                  B,
+                  {
+                    placement: s.placement,
+                    offset: S
+                  }
+                ),
+                /* @__PURE__ */ o("div", { className: "relative z-[1] overflow-hidden rounded-2xl border border-stroke bg-canvas shadow-elevation-floating", children: /* @__PURE__ */ o(
+                  A,
+                  {
+                    title: e.content.title,
+                    body: e.content.body,
+                    optionalFooter: e.advanceOn !== "auto" ? e.content.footer : void 0,
+                    stepIndex: e.stepIndex,
+                    totalSteps: e.totalSteps,
+                    skippable: e.skippable,
+                    primaryActionLabel: N ? "Done" : "Next",
+                    onSkip: d,
+                    onDismiss: l,
+                    onBack: c,
+                    canGoBack: e.canGoBack,
+                    advanceOn: e.advanceOn,
+                    onPrimaryAction: a,
+                    showPrimaryAction: !f && e.advanceOn !== "auto",
+                    footerHint: f ? e.content.footer ?? "Click the highlighted button to continue." : e.advanceOn === "auto" ? e.content.footer ?? "Complete the action above to continue." : null,
+                    footerKeybinding: e.content.keybinding,
+                    shortcutReferences: e.content.shortcutReferences,
+                    titleId: `guidance-tour-title-${e.stepId}`,
+                    bodyId: `guidance-tour-body-${e.stepId}`
+                  }
+                ) })
+              ]
             }
           )
         ]
@@ -213,5 +276,5 @@ function B({
   );
 }
 export {
-  B as GuidanceTourOverlay
+  j as GuidanceTourOverlay
 };