@tent-official/react-walkthrough 1.1.94 → 1.1.96

package/README.md

@@ -155,6 +155,21 @@ resetWalkthrough({
 | `storageSuffix` | `string` | `""` | Storage suffix |
 | `walkthroughList` | `string[]` | `[]` | Names of walkthroughs to reset |
 
+### `getCompletedWalkthroughs(options?)`
+
+Get a list of all completed walkthrough names. Returns an array of walkthrough name strings that have been marked as done.
+
+```js
+import { getCompletedWalkthroughs } from "@tent-official/react-walkthrough";
+
+const list = getCompletedWalkthroughs({ storageSuffix: "my-app" });
+// => ["intro-tour", "feature-tour"]
+```
+
+| Option | Type | Default | Description |
+| --- | --- | --- | --- |
+| `storageSuffix` | `string` | `""` | Storage suffix matching the one used in useWalkthrough |
+
 ## Dependency Chains
 
 You can create sequential walkthroughs using `dependsOn`:

package/dist/index.d.mts

@@ -140,6 +140,18 @@ interface IReadElementOptions {
     /** Optional AbortSignal to cancel waiting for the element */
     signal?: AbortSignal;
 }
+/**
+ * Options for the getCompletedWalkthroughs function.
+ */
+interface IGetCompletedWalkthroughsOptions {
+    /** Storage suffix matching the one used in useWalkthrough. Default: "" */
+    storageSuffix?: string;
+}
+/**
+ * Get a list of all completed walkthrough names.
+ * Returns an array of walkthrough name strings that have been marked as done.
+ */
+declare function getCompletedWalkthroughs(options?: IGetCompletedWalkthroughsOptions): string[];
 /**
  * Reset specified walkthroughs so they can be replayed without page refresh.
  */
@@ -161,4 +173,4 @@ declare function useWalkthrough(options: IUseWalkthroughOptions): IUseWalkthroug
  */
 declare function WalkthroughOverlay(props?: IWalkthroughOverlayProps): ReactPortal | null;
 
-export { type IReadElementOptions, type IResetWalkthroughOptions, type IStepDescription, type IUseWalkthroughOptions, type IUseWalkthroughReturn, type IWalkthroughOverlayProps, type IWalkthroughStep, type TDescriptionDirection, type TPopoverPosition, WalkthroughOverlay, readElement, resetWalkthrough, useWalkthrough };
+export { type IGetCompletedWalkthroughsOptions, type IReadElementOptions, type IResetWalkthroughOptions, type IStepDescription, type IUseWalkthroughOptions, type IUseWalkthroughReturn, type IWalkthroughOverlayProps, type IWalkthroughStep, type TDescriptionDirection, type TPopoverPosition, WalkthroughOverlay, getCompletedWalkthroughs, readElement, resetWalkthrough, useWalkthrough };

package/dist/index.d.ts

@@ -140,6 +140,18 @@ interface IReadElementOptions {
     /** Optional AbortSignal to cancel waiting for the element */
     signal?: AbortSignal;
 }
+/**
+ * Options for the getCompletedWalkthroughs function.
+ */
+interface IGetCompletedWalkthroughsOptions {
+    /** Storage suffix matching the one used in useWalkthrough. Default: "" */
+    storageSuffix?: string;
+}
+/**
+ * Get a list of all completed walkthrough names.
+ * Returns an array of walkthrough name strings that have been marked as done.
+ */
+declare function getCompletedWalkthroughs(options?: IGetCompletedWalkthroughsOptions): string[];
 /**
  * Reset specified walkthroughs so they can be replayed without page refresh.
  */
@@ -161,4 +173,4 @@ declare function useWalkthrough(options: IUseWalkthroughOptions): IUseWalkthroug
  */
 declare function WalkthroughOverlay(props?: IWalkthroughOverlayProps): ReactPortal | null;
 
-export { type IReadElementOptions, type IResetWalkthroughOptions, type IStepDescription, type IUseWalkthroughOptions, type IUseWalkthroughReturn, type IWalkthroughOverlayProps, type IWalkthroughStep, type TDescriptionDirection, type TPopoverPosition, WalkthroughOverlay, readElement, resetWalkthrough, useWalkthrough };
+export { type IGetCompletedWalkthroughsOptions, type IReadElementOptions, type IResetWalkthroughOptions, type IStepDescription, type IUseWalkthroughOptions, type IUseWalkthroughReturn, type IWalkthroughOverlayProps, type IWalkthroughStep, type TDescriptionDirection, type TPopoverPosition, WalkthroughOverlay, getCompletedWalkthroughs, readElement, resetWalkthrough, useWalkthrough };

package/dist/index.js

@@ -51,6 +51,10 @@ var isAnyDepDone = (storageSuffix, deps) => {
   if (!deps || deps.length === 0) return true;
   return deps.some((d) => isDone(storageSuffix, d));
 };
+var getCompletedWalkthroughs = ({ storageSuffix = "" } = {}) => {
+  const data = getStorageData(storageSuffix);
+  return Object.keys(data).filter((name) => data[name] === true);
+};
 var resetWalkthrough = ({ storageSuffix = "", walkthroughList = [] } = {}) => {
   const key = getStorageKey(storageSuffix);
   const data = getStorageData(storageSuffix);
@@ -519,7 +523,21 @@ var computePopoverPosition = (rect, popoverW, popoverH, gap, preferred) => {
   const vw = window.innerWidth;
   const vh = window.innerHeight;
   const clampLeft = (left) => Math.max(EDGE_MARGIN, Math.min(left, vw - popoverW - EDGE_MARGIN));
-  const clampTop = (top) => Math.max(EDGE_MARGIN, Math.min(top, vh - popoverH - EDGE_MARGIN));
+  const spaceBottom = vh - (rect.top + rect.height + gap) - EDGE_MARGIN;
+  const spaceTop = rect.top - gap - EDGE_MARGIN;
+  const spaceRight = vw - (rect.left + rect.width + gap) - EDGE_MARGIN;
+  const spaceLeft = rect.left - gap - EDGE_MARGIN;
+  const clampTopForVertical = (top, dir) => {
+    const clamped = Math.max(EDGE_MARGIN, Math.min(top, vh - popoverH - EDGE_MARGIN));
+    if (dir === "top") {
+      return Math.min(clamped, rect.top - gap - popoverH);
+    }
+    if (dir === "bottom") {
+      return Math.max(clamped, rect.top + rect.height + gap);
+    }
+    return clamped;
+  };
+  const clampTopForHorizontal = (top) => Math.max(EDGE_MARGIN, Math.min(top, vh - popoverH - EDGE_MARGIN));
   const positions = {
     bottom: {
       top: rect.top + rect.height + gap,
@@ -530,28 +548,36 @@ var computePopoverPosition = (rect, popoverW, popoverH, gap, preferred) => {
       left: clampLeft(rect.left)
     },
     right: {
-      top: clampTop(rect.top),
+      top: clampTopForHorizontal(rect.top),
       left: rect.left + rect.width + gap
     },
     left: {
-      top: clampTop(rect.top),
+      top: clampTopForHorizontal(rect.top),
       left: rect.left - popoverW - gap
     }
   };
   const fitsInViewport = (pos) => pos.top >= EDGE_MARGIN && pos.left >= EDGE_MARGIN && pos.top + popoverH <= vh - EDGE_MARGIN && pos.left + popoverW <= vw - EDGE_MARGIN;
+  const buildResult = (pos, dir) => {
+    let maxH = null;
+    if (dir === "bottom") {
+      maxH = vh - pos.top - EDGE_MARGIN;
+    } else if (dir === "top") {
+      maxH = rect.top - gap - EDGE_MARGIN;
+    } else {
+      maxH = vh - EDGE_MARGIN * 2;
+    }
+    if (maxH >= popoverH) maxH = null;
+    return { top: pos.top, left: pos.left, ...maxH != null && { maxHeight: Math.max(maxH, 60) } };
+  };
   if (preferred && positions[preferred] && fitsInViewport(positions[preferred])) {
-    return positions[preferred];
+    return buildResult(positions[preferred], preferred);
   }
   const order = ["bottom", "top", "right", "left"];
   for (const dir of order) {
     if (fitsInViewport(positions[dir])) {
-      return positions[dir];
+      return buildResult(positions[dir], dir);
     }
   }
-  const spaceBottom = vh - (rect.top + rect.height + gap);
-  const spaceTop = rect.top - gap;
-  const spaceRight = vw - (rect.left + rect.width + gap);
-  const spaceLeft = rect.left - gap;
   const best = [
     { dir: "bottom", space: spaceBottom },
     { dir: "top", space: spaceTop },
@@ -559,10 +585,9 @@ var computePopoverPosition = (rect, popoverW, popoverH, gap, preferred) => {
     { dir: "left", space: spaceLeft }
   ].sort((a, b) => b.space - a.space)[0].dir;
   const fallback = positions[best];
-  return {
-    top: Math.max(EDGE_MARGIN, Math.min(fallback.top, vh - popoverH - EDGE_MARGIN)),
-    left: Math.max(EDGE_MARGIN, Math.min(fallback.left, vw - popoverW - EDGE_MARGIN))
-  };
+  const clampedTop = best === "top" || best === "bottom" ? clampTopForVertical(fallback.top, best) : clampTopForHorizontal(fallback.top);
+  const clampedLeft = Math.max(EDGE_MARGIN, Math.min(fallback.left, vw - popoverW - EDGE_MARGIN));
+  return buildResult({ top: clampedTop, left: clampedLeft }, best);
 };
 var WT_CONTAINER_ID = "wt-portal-root";
 var getPortalContainer = () => {
@@ -823,8 +848,9 @@ var WalkthroughOverlay = ({
       const el = document.getElementById(resolveElId(step.el));
       if (!el) return;
     }
+    if (!popoverPos) return;
     setPopoverHidden(false);
-  }, [popoverHidden, isAnimating, step]);
+  }, [popoverHidden, isAnimating, step, popoverPos]);
   if (!activeTour) return null;
   if (_activeOverlayId !== null && _activeOverlayId !== instanceIdRef.current) {
     return null;
@@ -920,6 +946,7 @@ var WalkthroughOverlay = ({
       completeTour();
     } else {
       setPopoverHidden(true);
+      setPopoverPos(null);
       const nextValidStep = validSteps[currentValidPos + 1];
       const nextOrigIdx = hasTrigger && !nextValidStep ? currentOrigIdx + 1 : (_a2 = nextValidStep == null ? void 0 : nextValidStep._originalIdx) != null ? _a2 : currentOrigIdx + 1;
       setGlobalState((s) => ({
@@ -932,6 +959,7 @@ var WalkthroughOverlay = ({
     const hasTrigger = !!step.triggerElOnNext;
     if (hasTrigger) {
       setPopoverHidden(true);
+      setPopoverPos(null);
       const triggerTarget = typeof step.triggerElOnNext === "string" ? document.getElementById(resolveElId(step.triggerElOnNext)) : document.getElementById(resolveElId(step.el));
       if (triggerTarget) {
         triggerTarget.dispatchEvent(new PointerEvent("pointerdown", { bubbles: true, cancelable: true, button: 0, ctrlKey: false, pointerId: 1, pointerType: "mouse" }));
@@ -982,6 +1010,7 @@ var WalkthroughOverlay = ({
         return;
       }
       setPopoverHidden(true);
+      setPopoverPos(null);
       if (activeTour.handleWhenLastStep) activeTour.handleWhenLastStep();
       setTimeout(() => completeTour(), 300);
       return;
@@ -991,6 +1020,7 @@ var WalkthroughOverlay = ({
   const prev = () => {
     if (currentValidPos > 0) {
       setPopoverHidden(true);
+      setPopoverPos(null);
       const prevStep = validSteps[currentValidPos - 1];
       setGlobalState((s) => ({
         ...s,
@@ -1030,7 +1060,11 @@ var WalkthroughOverlay = ({
     minWidth: $popoverMinWidth,
     padding: $popoverPadding,
     borderRadius: $popoverBorderRadius,
-    fontFamily: "inherit"
+    fontFamily: "inherit",
+    ...popoverPos.maxHeight != null && {
+      maxHeight: popoverPos.maxHeight,
+      overflowY: "auto"
+    }
   } : {
     position: "fixed",
     top: -9999,
@@ -1145,6 +1179,7 @@ var WalkthroughOverlay = ({
 };
 
 exports.WalkthroughOverlay = WalkthroughOverlay;
+exports.getCompletedWalkthroughs = getCompletedWalkthroughs;
 exports.readElement = readElement;
 exports.resetWalkthrough = resetWalkthrough;
 exports.useWalkthrough = useWalkthrough;