next-tour - npm Package Compare versions

Comparing version 0.2.4 to 0.2.5

dist/index.d.ts

 import React$1 from 'react';
 
-/** Position represents the preferred position of a floating element. */
-type Position = "top-center" | "bottom-center" | "left-center" | "right-center";
+type FloatingPosition = 'top-center' | 'bottom-center' | 'left-center' | 'right-center' | 'window-center';
 
@@ -9,2 +8,3 @@ interface TourOptions {
      * Whether to show the tour navigation buttons.
+     * Enables navigating through the tour steps with next and previous buttons.
      * @default true
@@ -15,2 +15,3 @@ */
      * Whether to show the tour progress indicator.
+     * Displays the current step number over the total steps, providing users with a sense of how much of the tour remains.
      * @default true
@@ -20,8 +21,13 @@ */
     /**
-     * Controls the visibility of the tour mask. The tour mask is used to highlight
-     * the current step's target element while dimming the rest of the page to focus
-     * user attention on the highlighted element.
+     * Whether to visually highlight the target element of each tour step.
+     * When enabled, draws attention to the element that the tour step is focused on, often by dimming the background or creating a visual border around the element.
      * @default true
      */
-    showMask?: boolean;
+    highlightTarget?: boolean;
+    /**
+     * Whether to prevent the tour from closing when clicking outside the tour step.
+     * When enabled, the tour will only close when the user clicks the close button or completes the tour.
+     * @default false
+     */
+    preventCloseOnClickOutside?: boolean;
 }
@@ -31,2 +37,3 @@ interface StepOptions {
      * Whether to show the close button on the tour.
+     * Allows users to exit the tour before completion.
      * @default true
@@ -37,2 +44,3 @@ */
      * Whether to show the skip button on the tour.
+     * Enables users to skip the tour and proceed to the end.
      * @default true
@@ -43,2 +51,3 @@ */
      * Whether to show the back button on the tour.
+     * Allows users to navigate to the previous step of the tour.
      * @default true
@@ -66,3 +75,3 @@ */
      */
-    position?: Position;
+    position?: FloatingPosition;
     /** Optional configuration options for the step. */
@@ -98,8 +107,8 @@ options?: StepOptions;
 
-type TourProviderProps = React$1.PropsWithChildren<{}>;
+type TourProviderProps = React$1.PropsWithChildren<unknown>;
 type TourProps = Tour$1;
 
-declare const TourProvider: React$1.FC<TourProviderProps>;
+declare const TourProvider: ({ children }: TourProviderProps) => React$1.JSX.Element;
 
-declare const Tour: ({ options, ...tour }: TourProps) => React$1.JSX.Element;
+declare const Tour: (props: TourProps) => React$1.JSX.Element | null;
 
@@ -106,0 +115,0 @@ declare const useTourControls: () => TourControls;

dist/index.js

@@ -1,3 +0,3 @@
-"use strict";var Q=Object.create;var v=Object.defineProperty;var W=Object.getOwnPropertyDescriptor;var Y=Object.getOwnPropertyNames;var Z=Object.getPrototypeOf,V=Object.prototype.hasOwnProperty;var X=(t,o)=>{for(var r in o)v(t,r,{get:o[r],enumerable:!0})},H=(t,o,r,e)=>{if(o&&typeof o=="object"||typeof o=="function")for(let i of Y(o))!V.call(t,i)&&i!==r&&v(t,i,{get:()=>o[i],enumerable:!(e=W(o,i))||e.enumerable});return t};var l=(t,o,r)=>(r=t!=null?Q(Z(t)):{},H(o||!t||!t.__esModule?v(r,"default",{value:t,enumerable:!0}):r,t)),G=t=>H(v({},"__esModule",{value:!0}),t);var dt={};X(dt,{Tour:()=>F,TourProvider:()=>y,useTourControls:()=>f,useTourState:()=>m});module.exports=G(dt);var p=l(require("react")),b=p.default.createContext(null),J=({children:t})=>{var _;let[o,r]=p.default.useState(!1),[e,i]=p.default.useState(null),[n,s]=p.default.useState(0),u=p.default.useRef([]),c=(_=e==null?void 0:e.steps.length)!=null?_:0,C=a=>{u.current.push(a)},T=a=>{let A=u.current.find(q=>q.id===a);A&&(i(A),r(!0),s(0))},E=()=>{r(!1),i(null),s(0)},h=p.default.useCallback(()=>{s(a=>Math.min(c-1,a+1))},[c]),g=()=>{s(a=>Math.max(0,a-1))},w=p.default.useCallback(a=>{a<1||a>=c||s(a-1)},[c]);return p.default.createElement(b.Provider,{value:{isTourOpen:o,activeTour:e,activeStepIndex:n,totalSteps:c,tours:u.current,addTour:C,startTour:T,endTour:E,goToStep:w,nextStep:h,prevStep:g}},t)},y=J;function S(t,{insertAt:o}={}){if(!t||typeof document=="undefined")return;let r=document.head||document.getElementsByTagName("head")[0],e=document.createElement("style");e.type="text/css",o==="top"&&r.firstChild?r.insertBefore(e,r.firstChild):r.appendChild(e),e.styleSheet?e.styleSheet.cssText=t:e.appendChild(document.createTextNode(t))}S(`:root{--nt-background-color: #ffffff;--nt-foreground-color: #2d3748;--nt-secondary-color: #4a5568;--nt-border-color: #cbd5e0;--nt-accent-color: #3182ce;--nt-shadow-color: rgba(0, 0, 0, .1);--nt-on-accent-color: #ffffff;--nt-radius: .6rem;--nt-spacing: 1rem;--nt-transition-timing-function-step: cubic-bezier(.2, 0, .2, 1);--nt-transition-duration: .3s;--nt-animation-duration: .3s}.dark{--nt-background-color: #1a202c;--nt-foreground-color: #e2e8f0;--nt-secondary-color: #a0aec0;--nt-border-color: #4a5568;--nt-accent-color: #63b3ed;--nt-shadow-color: rgba(0, 0, 0, .2);--nt-on-accent-color: #2d3748}:where([data-tour-step]){background-color:var(--nt-background-color);color:var(--nt-foreground-color);border:1px solid var(--nt-border-color);box-shadow:0 2px 4px var(--nt-shadow-color);padding:var(--nt-spacing);border-radius:var(--nt-radius);transition:top .4s var(--nt-transition-timing-function-step),left .4s var(--nt-transition-timing-function-step),opacity var(--nt-transition-duration) ease-in-out}:where([data-tour-step]>*){animation:fadeIn var(--nt-animation-duration) ease-in-out forwards}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}
-`);var O=l(require("react"));var D=l(require("react"));var tt=()=>{let t=D.default.useContext(b);if(!t)throw new Error("useTourControls must be used within a <TourProvider> component");let{startTour:o,endTour:r,goToStep:e,nextStep:i,prevStep:n,addTour:s}=t;return{startTour:o,endTour:r,goToStep:e,nextStep:i,prevStep:n,addTour:s}},f=tt;var N=l(require("react"));var et=()=>{let t=N.default.useContext(b);if(!t)throw new Error("useTourState must be used within a <TourProvider> component");let{tours:o,activeStepIndex:r,activeTour:e,isTourOpen:i,totalSteps:n}=t;return{tours:o,activeStepIndex:r,activeTour:e,isTourOpen:i,totalSteps:n}},m=et;var z=l(require("react")),ot=(t,o)=>{z.default.useEffect(()=>{let r=e=>{t.current&&!t.current.contains(e.target)&&o()};return document.addEventListener("pointerdown",r),()=>{document.removeEventListener("pointerdown",r)}},[t,o])},M=ot;var j=l(require("react"));var B=`
+"use strict";var W=Object.create;var b=Object.defineProperty;var Q=Object.getOwnPropertyDescriptor;var V=Object.getOwnPropertyNames;var Y=Object.getPrototypeOf,$=Object.prototype.hasOwnProperty;var G=(t,o)=>{for(var r in o)b(t,r,{get:o[r],enumerable:!0})},H=(t,o,r,e)=>{if(o&&typeof o=="object"||typeof o=="function")for(let i of V(o))!$.call(t,i)&&i!==r&&b(t,i,{get:()=>o[i],enumerable:!(e=Q(o,i))||e.enumerable});return t};var m=(t,o,r)=>(r=t!=null?W(Y(t)):{},H(o||!t||!t.__esModule?b(r,"default",{value:t,enumerable:!0}):r,t)),J=t=>H(b({},"__esModule",{value:!0}),t);var at={};G(at,{Tour:()=>M,TourProvider:()=>w,useTourControls:()=>T,useTourState:()=>h});module.exports=J(at);var p=m(require("react")),g=p.default.createContext(null),X=({children:t})=>{var L;let[o,r]=p.default.useState(!1),[e,i]=p.default.useState(null),[n,s]=p.default.useState(0),u=p.default.useRef([]),a=(L=e==null?void 0:e.steps.length)!=null?L:0,x=c=>{u.current.push(c)},C=c=>{let I=u.current.find(R=>R.id===c);I&&(i(I),r(!0),s(0))},l=()=>{r(!1),i(null),s(0)},f=p.default.useCallback(()=>{s(c=>Math.min(a-1,c+1))},[a]),E=()=>{s(c=>Math.max(0,c-1))},q=p.default.useCallback(c=>{c<1||c>=a||s(c-1)},[a]);return p.default.createElement(g.Provider,{value:{isTourOpen:o,activeTour:e,activeStepIndex:n,totalSteps:a,tours:u.current,addTour:x,startTour:C,endTour:l,goToStep:q,nextStep:f,prevStep:E}},t)},w=X;function y(t,{insertAt:o}={}){if(!t||typeof document=="undefined")return;let r=document.head||document.getElementsByTagName("head")[0],e=document.createElement("style");e.type="text/css",o==="top"&&r.firstChild?r.insertBefore(e,r.firstChild):r.appendChild(e),e.styleSheet?e.styleSheet.cssText=t:e.appendChild(document.createTextNode(t))}y(`:root{--nt-background-color: #ffffff;--nt-foreground-color: #2d3748;--nt-secondary-color: #4a5568;--nt-border-color: #cbd5e0;--nt-accent-color: #3182ce;--nt-shadow-color: rgba(0, 0, 0, .1);--nt-on-accent-color: #ffffff;--nt-radius: .6rem;--nt-spacing: 1rem;--nt-transition-timing-function-step: cubic-bezier(.2, 0, .2, 1);--nt-transition-duration: .2s;--nt-animation-duration: .2s}.dark{--nt-background-color: #1a202c;--nt-foreground-color: #e2e8f0;--nt-secondary-color: #a0aec0;--nt-border-color: #4a5568;--nt-accent-color: #63b3ed;--nt-shadow-color: rgba(0, 0, 0, .2);--nt-on-accent-color: #2d3748}[data-nt-popover]{position:fixed;z-index:10000;top:50%;left:50%}[data-nt-popover-container]{position:fixed;z-index:9999;top:0;left:0;width:100%;height:100%;animation:NtfadeIn var(--nt-animation-duration) ease-out}@keyframes NtfadeIn{0%{opacity:0}to{opacity:1}}:where([data-tour-step]){background-color:var(--nt-background-color);color:var(--nt-foreground-color);border:1px solid var(--nt-border-color);box-shadow:0 2px 4px var(--nt-shadow-color);padding:var(--nt-spacing);border-radius:var(--nt-radius);animation:NtScaleUp var(--nt-animation-duration) ease-out}@keyframes NtScaleUp{0%{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}
+`);var F=m(require("react"));var O=m(require("react"));var Z=()=>{let t=O.default.useContext(g);if(!t)throw new Error("useTourControls must be used within a <TourProvider> component");let{startTour:o,endTour:r,goToStep:e,nextStep:i,prevStep:n,addTour:s}=t;return{startTour:o,endTour:r,goToStep:e,nextStep:i,prevStep:n,addTour:s}},T=Z;var A=m(require("react"));var tt=()=>{let t=A.default.useContext(g);if(!t)throw new Error("useTourState must be used within a <TourProvider> component");let{tours:o,activeStepIndex:r,activeTour:e,isTourOpen:i,totalSteps:n}=t;return{tours:o,activeStepIndex:r,activeTour:e,isTourOpen:i,totalSteps:n}},h=tt;var _=m(require("react"));var N=`
   a[href]:not([tabindex^="-"]),
@@ -17,2 +17,2 @@ area[href]:not([tabindex^="-"]),
   object[usemap]:not([tabindex^="-"])
-  `;var rt=t=>{j.default.useEffect(()=>{let o=t.current;if(!o)return;let r=()=>Array.from(o.querySelectorAll(B)).filter(n=>!n.hasAttribute("disabled")),e=r();e[0]&&e[0].focus();let i=n=>{if(n.key!=="Tab"||(e=r(),e.length===0))return;let{firstElement:s,lastElement:u}={firstElement:e[0],lastElement:e[e.length-1]};(n.shiftKey&&document.activeElement===s||!n.shiftKey&&document.activeElement===u)&&((n.shiftKey?u:s).focus(),n.preventDefault())};return document.addEventListener("keydown",i),()=>document.removeEventListener("keydown",i)},[t])},k=rt;var x=l(require("react"));var d=l(require("react")),U=l(require("react-dom"));var K=(t,o,r)=>{let n=0,s=0;switch(r){case"top-center":n=t.top-o.height-10,s=t.left+t.width/2-o.width/2;break;case"bottom-center":n=t.top+t.height+10,s=t.left+t.width/2-o.width/2;break;case"left-center":n=t.top+t.height/2-o.height/2,s=t.left-o.width-10;break;case"right-center":n=t.top+t.height/2-o.height/2,s=t.left+t.width+10;break}return n=Math.max(10,Math.min(n,window.innerHeight-o.height-10)),s=Math.max(10,Math.min(s,window.innerWidth-o.width-10)),{top:n,left:s}};var L=d.default.createContext(null);L.displayName="PopoverContext";var nt=()=>{let t=d.default.useContext(L);if(!t)throw new Error("usePopover must be used within a Popover component");return t},st="bottom-center",I=1e4,R=({children:t,open:o,preferredPosition:r=st,target:e,onClickOutside:i,shouldMaskTarget:n=!0})=>e?d.default.createElement(L.Provider,{value:{open:o,preferredPosition:r,target:e,onClickOutside:i,shouldMaskTarget:n}},t):null,it=({children:t,...o})=>{let{open:r,target:e,preferredPosition:i,onClickOutside:n,shouldMaskTarget:s}=nt(),u=d.default.useRef(null),[c,C]=d.default.useState({left:0,top:0}),[T,E]=d.default.useState(null);return d.default.useEffect(()=>{if(!e)return;let h=e.getBoundingClientRect();E(h)},[e]),d.default.useLayoutEffect(()=>{if(!r||!u.current||!T)return;let h=u.current.getBoundingClientRect(),g=K(T,h,i);C(g);let w=e==null?void 0:e.style.zIndex;return s&&e&&(e.style.zIndex=`${I+1}`),()=>{s&&e&&(e.style.zIndex=w||"")}},[r,T,i,s,e]),k(u),M(u,()=>n==null?void 0:n()),r?U.default.createPortal(d.default.createElement("div",{style:{position:"fixed",top:0,left:0,zIndex:I,width:"100%",height:"100%",backgroundColor:s?"rgba(0, 0, 0, 0.05)":"transparent"}},d.default.createElement("div",{...o,ref:u,style:{...o.style,position:"fixed",left:`${c.left}px`,top:`${c.top}px`,zIndex:I+2}},t)),document.body):null};R.Content=it;var P=R;var ut=({activeStep:t,tourOptions:o})=>{let{nextStep:r,prevStep:e}=f(),{isTourOpen:i}=m(),[n,s]=x.default.useState(null);return x.default.useEffect(()=>{if(!t)return;let u=document.querySelector(t.target);u&&s(u)},[t]),t?x.default.createElement(P,{open:i,target:n,preferredPosition:t.position,shouldMaskTarget:o==null?void 0:o.showMask},x.default.createElement(P.Content,{"data-tour-step":!0},t.content,x.default.createElement("button",{onClick:r},"Next"),x.default.createElement("button",{onClick:e},"Prev"))):null},$=ut;var at=({options:t,...o})=>{var s;let{addTour:r}=f(),{activeTour:e,activeStepIndex:i}=m();O.default.useEffect(()=>{r(o)},[r,o]);let n=(s=e==null?void 0:e.steps[i])!=null?s:null;return O.default.createElement($,{activeStep:n,tourOptions:t})},F=at;0&&(module.exports={Tour,TourProvider,useTourControls,useTourState});
+  `,U="bottom-center";var et=t=>{_.default.useEffect(()=>{let o=t.current;if(!o)return;let r=()=>Array.from(o.querySelectorAll(N)).filter(n=>!n.hasAttribute("disabled")),e=r();e[0]&&e[0].focus();let i=n=>{if(n.key!=="Tab"||(e=r(),e.length===0))return;let{firstElement:s,lastElement:u}={firstElement:e[0],lastElement:e[e.length-1]};(n.shiftKey&&document.activeElement===s||!n.shiftKey&&document.activeElement===u)&&((n.shiftKey?u:s).focus(),n.preventDefault())};return document.addEventListener("keydown",i),()=>document.removeEventListener("keydown",i)},[t])},S=et;var ot=t=>{var n,s,u,a;let o=(n=t==null?void 0:t.highlightTarget)!=null?n:!0,r=(s=t==null?void 0:t.preventCloseOnClickOutside)!=null?s:!1,e=(u=t==null?void 0:t.showNavigation)!=null?u:!0,i=(a=t==null?void 0:t.showProgress)!=null?a:!0;return{highlightTarget:o,preventCloseOnClickOutside:r,showNavigation:e,showProgress:i}},k=ot;var v=m(require("react"));var d=m(require("react")),B=m(require("react-dom"));var D=(t,o,r)=>{let n=0,s=0;switch(r){case"top-center":n=t.top-o.height-10,s=t.left+t.width/2-o.width/2;break;case"bottom-center":n=t.top+t.height+10,s=t.left+t.width/2-o.width/2;break;case"left-center":n=t.top+t.height/2-o.height/2,s=t.left-o.width-10;break;case"right-center":n=t.top+t.height/2-o.height/2,s=t.left+t.width+10;break;case"window-center":n=window.innerHeight/2-o.height/2,s=window.innerWidth/2-o.width/2;break}return n=Math.max(10,Math.min(n,window.innerHeight-o.height-10)),s=Math.max(10,Math.min(s,window.innerWidth-o.width-10)),{top:n,left:s}};var z=d.default.createContext(null),rt=()=>{let t=d.default.useContext(z);if(!t)throw new Error("usePopover must be used within a Popover component");return t},K=({children:t,open:o,preferredPosition:r=U,target:e,onClickOutside:i,shouldHighlightTarget:n=!0})=>!e||!o?null:d.default.createElement(z.Provider,{value:{open:o,preferredPosition:r,target:e,onClickOutside:i,shouldHighlightTarget:n}},t),nt=({children:t,...o})=>{let{open:r,target:e,preferredPosition:i,onClickOutside:n,shouldHighlightTarget:s}=rt(),u=d.default.useRef(null),a=d.default.useRef(null),[x,C]=d.default.useState(null);return d.default.useEffect(()=>{if(e){let l=e.getBoundingClientRect();C(l)}},[e]),d.default.useEffect(()=>{if(!r||!x||!u.current)return;let l=D(x,u.current.getBoundingClientRect(),i),{current:f}=u;f.style.top=`${l.top}px`,f.style.left=`${l.left}px`;let E=setTimeout(()=>{f.style.transition="top var(--nt-transition-duration), left var(--nt-transition-duration)"},50);return()=>{f.style.transition="",clearTimeout(E)}},[r,x,i]),d.default.useEffect(()=>{if(s&&e&&a.current){e.style.zIndex="10001",a.current.style.backgroundColor="rgba(0, 0, 0, 0.5)";let l=a.current;return()=>{l&&(l.style.backgroundColor=""),e&&(e.style.zIndex="")}}},[s,e]),S(u),d.default.useEffect(()=>{let l=f=>{a.current===f.target&&(n==null||n())};return document.addEventListener("mousedown",l),()=>document.removeEventListener("mousedown",l)},[n]),B.default.createPortal(d.default.createElement("div",{ref:a,"data-nt-popover-container":!0},d.default.createElement("div",{...o,ref:u,"data-nt-popover":!0},t)),document.body)};K.Content=nt;var P=K;var it=({activeStep:t,tourOptions:o})=>{let{endTour:r}=T(),{isTourOpen:e}=h(),[i,n]=v.default.useState(null),{highlightTarget:s,preventCloseOnClickOutside:u}=k(o);return v.default.useEffect(()=>{if(!t)return;let a=document.querySelector(t.target);a&&n(a)},[t]),t?v.default.createElement(P,{open:e,target:i,preferredPosition:t.position,shouldHighlightTarget:s,onClickOutside:()=>u?void 0:r()},v.default.createElement(P.Content,{"data-tour-step":!0},t.content)):null},j=it;var st=t=>{let{addTour:o}=T(),{activeTour:r,activeStepIndex:e}=h();F.default.useEffect(()=>{o(t)},[o,t]);let i=(r==null?void 0:r.id)===t.id,n=i?r.steps[e]:null;return i?F.default.createElement(j,{activeStep:n,tourOptions:r.options}):null},M=st;0&&(module.exports={Tour,TourProvider,useTourControls,useTourState});

package.json

 {
   "name": "next-tour",
-  "version": "0.2.4",
+  "version": "0.2.5",
   "description": "Guided tours and walkthroughs for Next.js",
@@ -14,3 +14,4 @@ "main": "./dist/index.js",
     "dev": "tsup src/index.ts --watch",
-    "lint": "eslint . --ext .ts,.tsx"
+    "lint": "eslint . --ext .ts,.tsx --fix",
+    "tsc": "tsc --noEmit"
   },
@@ -17,0 +18,0 @@ "devDependencies": {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

24043

increased by11%

Lines of code

188

increased by8.05%

No dependency changes