impact-nova 2.5.6 → 2.5.8

package/dist/components/flows/guidance/hooks/useGuidanceOverlayGeometry.js

@@ -1,29 +1,31 @@
-import * as c from "react";
-import { beginTourScrollSnapshot as m, needsGuidanceTargetScroll as l, scrollGuidanceTargetIntoView as f, getVisibleTargetRect as v } from "../renderers/guidance-renderer-shared.js";
+import * as u from "react";
+import { beginTourScrollSnapshot as l, needsGuidanceTargetScroll as f, scrollGuidanceTargetIntoView as s, getVisibleTargetRect as v } from "../renderers/guidance-renderer-shared.js";
 import { hasRunningAnimations as p } from "../utils/motion-settle.js";
-function T(e, u) {
-  const [d, s] = c.useState(null);
-  return c.useEffect(() => {
+function T(e, d) {
+  const [m, t] = u.useState(null);
+  return u.useEffect(() => {
     if (!e) {
-      s(null);
+      t(null);
       return;
     }
-    let i = !1, o = 0;
+    let n = !1, o = 0;
     const r = () => {
-      i || s(v(e));
-    }, t = () => {
-      r(), !i && p(e) && (o = requestAnimationFrame(t));
+      n || t(v(e));
+    }, c = () => {
+      r(), !n && p(e) && (o = requestAnimationFrame(c));
     };
-    m(e), l(e) && f(e), r(), o = requestAnimationFrame(t);
-    const a = new ResizeObserver(r);
+    l(e), f(e) && s(e), r(), o = requestAnimationFrame(c);
+    const a = new ResizeObserver(() => {
+      s(e), r();
+    });
     a.observe(e);
-    const n = () => {
-      r();
+    const i = () => {
+      s(e), r();
     };
-    return window.addEventListener("resize", n), document.addEventListener("scroll", n, !0), () => {
-      i = !0, cancelAnimationFrame(o), a.disconnect(), window.removeEventListener("resize", n), document.removeEventListener("scroll", n, !0);
+    return window.addEventListener("resize", i), document.addEventListener("scroll", i, !0), () => {
+      n = !0, cancelAnimationFrame(o), a.disconnect(), window.removeEventListener("resize", i), document.removeEventListener("scroll", i, !0);
     };
-  }, [u, e]), d;
+  }, [d, e]), m;
 }
 export {
   T as useGuidanceOverlayGeometry

package/dist/components/flows/guidance/index.d.ts

@@ -15,4 +15,4 @@ export { createAgGridTargetAdapter, createAgGridReadyTriggerPlugin, emitAgGridRe
 export type { AgGridTargetConfig } from './adapters/ag-grid-adapter';
 export { createDialogOpenedTriggerPlugin, getOverlayScopeRoot, } from './adapters/overlay-adapter';
 export { registerRenderer, getRenderer } from './renderers/renderer-registry';
-export type { GuideManifest, Step, StepContent, TriggerExpression, GuidanceSessionState, GuidancePlugin, GuidanceStorageAdapter, GuidanceAnalyticsAdapter, RendererProps, RenderInstruction, } from '../../../lib/guidance';
+export type { GuideManifest, Step, StepContent, StepTransition, TriggerExpression, GuidanceSessionState, GuidancePlugin, GuidanceStorageAdapter, GuidanceAnalyticsAdapter, RendererProps, RenderInstruction, } from '../../../lib/guidance';

package/dist/components/flows/guidance/renderers/announcement-renderer.d.ts

@@ -1,3 +1,3 @@
 import { RendererProps } from '../../../../lib/guidance';
 import * as React from 'react';
-export declare function AnnouncementRenderer({ instruction, onNext, onSkip, onDismiss, }: RendererProps): React.ReactElement;
+export declare function AnnouncementRenderer({ instruction, onNext, onSkip, }: RendererProps): React.ReactElement;

package/dist/components/flows/guidance/renderers/announcement-renderer.js

@@ -1,23 +1,31 @@
 import { jsx as o } from "react/jsx-runtime";
 import "react";
-import { Dialog as d, DialogContent as l } from "../../../feedback/dialog/dialog.js";
-import { GuidanceStepPanel as m } from "./guidance-card-shared.js";
-function b({
+import { Dialog as r, DialogContent as l } from "../../../feedback/dialog/dialog.js";
+import { GuidanceStepPanel as d } from "./guidance-card-shared.js";
+function f({
   instruction: e,
-  onNext: n,
-  onSkip: a,
-  onDismiss: t
+  onNext: a,
+  onSkip: n
 }) {
   const p = e.stepIndex + 1 >= e.totalSteps;
-  return /* @__PURE__ */ o(d, { open: !0, onOpenChange: (r) => !r && t(), children: /* @__PURE__ */ o(
+  return /* @__PURE__ */ o(r, { open: !0, children: /* @__PURE__ */ o(
     l,
     {
       "data-component": "guidance-announcement",
       hideClose: !0,
       className: "max-w-[400px] gap-0 overflow-hidden p-0 sm:rounded-2xl sm:shadow-elevation-floating",
       "aria-describedby": void 0,
+      onPointerDownOutside: (t) => {
+        t.preventDefault();
+      },
+      onInteractOutside: (t) => {
+        t.preventDefault();
+      },
+      onEscapeKeyDown: (t) => {
+        t.preventDefault();
+      },
       children: /* @__PURE__ */ o(
-        m,
+        d,
         {
           title: e.content.title,
           body: e.content.body,
@@ -26,9 +34,9 @@ function b({
           totalSteps: e.totalSteps,
           skippable: e.skippable,
           primaryActionLabel: p ? "Done" : "Next",
-          onSkip: a,
-          onDismiss: t,
-          onPrimaryAction: n,
+          onSkip: n,
+          onDismiss: n,
+          onPrimaryAction: a,
           showPrimaryAction: !0
         }
       )
@@ -36,5 +44,5 @@ function b({
   ) });
 }
 export {
-  b as AnnouncementRenderer
+  f as AnnouncementRenderer
 };

package/dist/components/flows/guidance/renderers/guidance-card-shared.d.ts

@@ -1,14 +1,13 @@
 import * as React from 'react';
-export declare function GuidanceCardCloseButton({ onClose, closeAriaLabel, className, }: {
-    onClose: () => void;
-    closeAriaLabel: string;
-    className?: string;
-}): React.ReactElement;
-export declare function GuidanceStepProgress({ activeStepIndex, totalSteps, }: {
+export declare function GuidanceStepProgressBar({ activeStepIndex, totalSteps, className, }: {
     activeStepIndex: number;
     totalSteps: number;
+    className?: string;
 }): React.ReactElement | null;
-export declare function GuidanceStepProgressDots({ activeStepIndex, totalSteps, }: {
+export declare function GuidanceTourInteractionFooter({ hint, }: {
+    hint: string;
+}): React.ReactElement;
+export declare function GuidanceStepCounter({ activeStepIndex, totalSteps, }: {
     activeStepIndex: number;
     totalSteps: number;
 }): React.ReactElement;
@@ -19,10 +18,9 @@ export interface GuidanceTourNavFooterProps {
     primaryActionLabel: string;
     onSkip: () => void;
     onPrimaryAction: () => void;
-    showPrimaryAction: boolean;
-    footerHint?: string | null;
+    showPrimaryAction?: boolean;
 }
-export declare function GuidanceTourNavFooter({ activeStepIndex, totalSteps, skippable, primaryActionLabel, onSkip, onPrimaryAction, showPrimaryAction, footerHint, }: GuidanceTourNavFooterProps): React.ReactElement;
+export declare function GuidanceTourNavFooter({ activeStepIndex, totalSteps, skippable, primaryActionLabel, onSkip, onPrimaryAction, showPrimaryAction, }: GuidanceTourNavFooterProps): React.ReactElement;
 export interface GuidanceStepPanelProps {
     title: string;
     body: string;
@@ -39,4 +37,4 @@ export interface GuidanceStepPanelProps {
     titleId?: string;
     bodyId?: string;
 }
-export declare function GuidanceStepPanel({ title, body, optionalFooter, stepIndex, totalSteps, skippable, primaryActionLabel, onSkip, onDismiss, onPrimaryAction, showPrimaryAction, footerHint, titleId, bodyId, }: GuidanceStepPanelProps): React.ReactElement;
+export declare function GuidanceStepPanel({ title, body, optionalFooter, stepIndex, totalSteps, skippable, primaryActionLabel, onSkip, onPrimaryAction, showPrimaryAction, footerHint, titleId, bodyId, }: GuidanceStepPanelProps): React.ReactElement;

package/dist/components/flows/guidance/renderers/guidance-card-shared.js

@@ -1,213 +1,160 @@
-import { jsxs as o, jsx as n } from "react/jsx-runtime";
+import { jsxs as c, jsx as e, Fragment as N } from "react/jsx-runtime";
 import "react";
-import { Cross as v } from "impact-nova-icons";
-import { Button as x } from "../../../primitives/button/button.js";
+import { Button as m } from "../../../primitives/button/button.js";
+import { Progress as b } from "../../../primitives/progress/progress.js";
 import { cn as h } from "../../../../lib/utils.js";
-const u = 5, f = 2;
-function b(s, e) {
-  if (e <= u)
-    return Array.from({ length: e }, (r, l) => ({
-      kind: "step",
-      stepIndex: l
-    }));
-  const t = Math.max(
-    0,
-    Math.min(
-      s - 2,
-      e - u
-    )
-  ), a = t + u - 1, i = [];
-  if (t > 0)
-    for (let r = 0; r < f; r += 1)
-      i.push({
-        kind: "ellipsis",
-        markerId: `leading-${r}`
-      });
-  for (let r = t; r <= a; r += 1)
-    i.push({ kind: "step", stepIndex: r });
-  if (a < e - 1)
-    for (let r = 0; r < f; r += 1)
-      i.push({
-        kind: "ellipsis",
-        markerId: `trailing-${r}`
-      });
-  return i;
+const v = "End Tour";
+function G({
+  activeStepIndex: t,
+  totalSteps: n,
+  className: a
+}) {
+  if (n <= 1)
+    return null;
+  const r = (t + 1) / n * 100;
+  return /* @__PURE__ */ e(
+    b,
+    {
+      value: r,
+      label: !1,
+      className: h("bg-brand-subtle", a),
+      "aria-label": `Step ${t + 1} of ${n}`
+    }
+  );
 }
-function y({
-  onClose: s,
-  closeAriaLabel: e,
-  className: t
+function $({
+  hint: t
 }) {
-  return /* @__PURE__ */ n(
-    x,
+  return /* @__PURE__ */ e(
+    "div",
     {
-      variant: "ghost",
-      size: "iconSm",
-      className: h(
-        "shrink-0 text-content-tertiary hover:text-content-secondary",
-        t
-      ),
-      "aria-label": e,
-      onClick: s,
-      children: /* @__PURE__ */ n(v, { className: "size-3.5" })
+      "data-component": "guidance-tour-interaction-footer",
+      className: "border-t border-stroke-hairline bg-canvas-subtle px-4 py-2.5 text-center text-sm leading-snug text-content-secondary",
+      children: t
     }
   );
 }
-function I({
-  activeStepIndex: s,
-  totalSteps: e
+function y({
+  activeStepIndex: t,
+  totalSteps: n
 }) {
-  return e <= 1 ? null : /* @__PURE__ */ n(
-    C,
+  return /* @__PURE__ */ c(
+    "span",
     {
-      activeStepIndex: s,
-      totalSteps: e
+      className: "text-sm leading-none",
+      "aria-label": `Step ${t + 1} of ${n}`,
+      children: [
+        /* @__PURE__ */ e("span", { className: "font-bold text-content", children: t + 1 }),
+        /* @__PURE__ */ e("span", { className: "font-normal text-content-tertiary", children: ` / ${n}` })
+      ]
     }
   );
 }
-function C({
-  activeStepIndex: s,
-  totalSteps: e
+function x({
+  activeStepIndex: t,
+  totalSteps: n,
+  skippable: a,
+  primaryActionLabel: r,
+  onSkip: l,
+  onPrimaryAction: i,
+  showPrimaryAction: s = !0
 }) {
-  const t = b(s, e);
-  return /* @__PURE__ */ n(
+  return /* @__PURE__ */ c(
     "div",
     {
-      className: "flex items-center justify-center gap-1.5",
-      role: "progressbar",
-      "aria-valuemin": 1,
-      "aria-valuenow": s + 1,
-      "aria-valuemax": e,
-      "aria-label": `Step ${s + 1} of ${e}`,
-      children: t.map((a) => {
-        if (a.kind === "ellipsis")
-          return /* @__PURE__ */ n(
-            "span",
-            {
-              className: "size-1 rounded-full bg-stroke",
-              "aria-hidden": "true"
-            },
-            a.markerId
-          );
-        const i = a.stepIndex;
-        return /* @__PURE__ */ n(
-          "span",
+      className: h(
+        "flex items-center justify-between gap-3 px-4",
+        s ? "pb-4 pt-2" : "pb-2 pt-2"
+      ),
+      children: [
+        n > 1 ? /* @__PURE__ */ e(
+          y,
           {
-            className: h(
-              "rounded-full transition-all",
-              i === s ? "size-2.5 bg-[var(--guidance-step-counter-active,var(--color-primary))]" : "size-2 bg-stroke"
-            )
-          },
-          i
-        );
-      })
+            activeStepIndex: t,
+            totalSteps: n
+          }
+        ) : /* @__PURE__ */ e("span", { "aria-hidden": "true" }),
+        /* @__PURE__ */ c("div", { className: "ms-auto flex shrink-0 items-center gap-2", children: [
+          a ? /* @__PURE__ */ e(m, { variant: "secondary", size: "md", onClick: l, children: v }) : null,
+          s ? /* @__PURE__ */ e(m, { size: "md", onClick: i, children: r }) : null
+        ] })
+      ]
     }
   );
 }
-function w({
-  activeStepIndex: s,
-  totalSteps: e,
-  skippable: t,
-  primaryActionLabel: a,
-  onSkip: i,
-  onPrimaryAction: r,
-  showPrimaryAction: l,
-  footerHint: c
-}) {
-  const d = e > 1;
-  return /* @__PURE__ */ o("div", { className: "mt-4 flex flex-col", children: [
-    d ? /* @__PURE__ */ n("div", { className: "flex justify-center", children: /* @__PURE__ */ n(
-      I,
-      {
-        activeStepIndex: s,
-        totalSteps: e
-      }
-    ) }) : null,
-    /* @__PURE__ */ o("div", { className: "flex items-center justify-between gap-3", children: [
-      /* @__PURE__ */ n("div", { className: "shrink-0", children: t ? /* @__PURE__ */ n(
-        "button",
-        {
-          type: "button",
-          className: "flex h-6 items-center text-sm leading-4 text-content-tertiary transition-colors hover:text-content-secondary",
-          onClick: i,
-          children: "Skip"
-        }
-      ) : null }),
-      /* @__PURE__ */ n("div", { className: "min-w-0 text-right", children: l ? /* @__PURE__ */ n(
-        x,
-        {
-          size: "sm",
-          className: "rounded-full px-4",
-          onClick: r,
-          children: a
-        }
-      ) : c ? /* @__PURE__ */ n("span", { className: "text-xs font-medium leading-snug text-content-tertiary", children: c }) : null })
-    ] })
-  ] });
-}
-function z({
-  title: s,
-  body: e,
-  optionalFooter: t,
-  stepIndex: a,
-  totalSteps: i,
-  skippable: r,
-  primaryActionLabel: l,
-  onSkip: c,
-  onDismiss: d,
-  onPrimaryAction: p,
-  showPrimaryAction: N,
-  footerHint: m,
-  titleId: g,
-  bodyId: k
+function E({
+  title: t,
+  body: n,
+  optionalFooter: a,
+  stepIndex: r,
+  totalSteps: l,
+  skippable: i,
+  primaryActionLabel: s,
+  onSkip: d,
+  onPrimaryAction: u,
+  showPrimaryAction: f,
+  footerHint: o,
+  titleId: p,
+  bodyId: g
 }) {
-  return /* @__PURE__ */ o("div", { className: "p-4", children: [
-    /* @__PURE__ */ o("div", { className: "flex items-center justify-between gap-2", children: [
-      /* @__PURE__ */ n(
+  return /* @__PURE__ */ c("div", { className: "flex flex-col", children: [
+    /* @__PURE__ */ c("div", { className: "px-4 pt-4", children: [
+      /* @__PURE__ */ e(
         "h3",
         {
-          id: g,
-          className: "min-w-0 text-base font-bold leading-5 text-content",
-          children: s
+          id: p,
+          className: "text-base font-bold leading-5 text-content",
+          children: t
         }
       ),
-      /* @__PURE__ */ n(
-        y,
+      n ? /* @__PURE__ */ e(
+        "p",
         {
-          onClose: d,
-          closeAriaLabel: "Close",
-          className: "-me-1 shrink-0"
+          id: g,
+          className: "mt-2 text-sm leading-snug text-content-secondary",
+          children: n
         }
-      )
+      ) : null,
+      a && !o ? /* @__PURE__ */ e("p", { className: "mt-1.5 text-xs text-content-tertiary", children: a }) : null
     ] }),
-    e ? /* @__PURE__ */ n(
-      "p",
+    /* @__PURE__ */ e("div", { className: "px-4 pt-3", children: /* @__PURE__ */ e(
+      G,
       {
-        id: k,
-        className: "mt-2 text-sm leading-relaxed text-content-secondary",
-        children: e
+        activeStepIndex: r,
+        totalSteps: l
       }
-    ) : null,
-    t && !m ? /* @__PURE__ */ n("p", { className: "mt-1.5 text-xs text-content-tertiary", children: t }) : null,
-    /* @__PURE__ */ n(
-      w,
+    ) }),
+    !!o ? /* @__PURE__ */ c(N, { children: [
+      i ? /* @__PURE__ */ e(
+        x,
+        {
+          activeStepIndex: r,
+          totalSteps: l,
+          skippable: i,
+          primaryActionLabel: s,
+          onSkip: d,
+          onPrimaryAction: u,
+          showPrimaryAction: !1
+        }
+      ) : null,
+      /* @__PURE__ */ e($, { hint: o })
+    ] }) : f ? /* @__PURE__ */ e(
+      x,
       {
-        activeStepIndex: a,
-        totalSteps: i,
-        skippable: r,
-        primaryActionLabel: l,
-        onSkip: c,
-        onPrimaryAction: p,
-        showPrimaryAction: N,
-        footerHint: m
+        activeStepIndex: r,
+        totalSteps: l,
+        skippable: i,
+        primaryActionLabel: s,
+        onSkip: d,
+        onPrimaryAction: u
       }
-    )
+    ) : null
   ] });
 }
 export {
-  y as GuidanceCardCloseButton,
-  z as GuidanceStepPanel,
-  I as GuidanceStepProgress,
-  C as GuidanceStepProgressDots,
-  w as GuidanceTourNavFooter
+  y as GuidanceStepCounter,
+  E as GuidanceStepPanel,
+  G as GuidanceStepProgressBar,
+  $ as GuidanceTourInteractionFooter,
+  x as GuidanceTourNavFooter
 };

package/dist/components/flows/guidance/renderers/guidance-renderer-shared.d.ts

@@ -1,6 +1,6 @@
 import { RenderInstruction } from '../../../../lib/guidance';
 import * as React from 'react';
-export declare const GUIDANCE_SPOTLIGHT_PADDING = 8;
+export declare const GUIDANCE_SPOTLIGHT_PADDING = 16;
 export declare const GUIDANCE_POPOVER_GAP = 12;
 export declare const GUIDANCE_VIEWPORT_PADDING = 16;
 export declare const GUIDANCE_TARGET_ANIMATION_POLL_MS = 32;