next-tour - npm Package Compare versions

Comparing version 0.3.0 to 0.3.1

dist/index.d.ts

@@ -20,3 +20,3 @@ import React$1 from 'react';
      * 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.
+     * When enabled, draws attention to the element that the tour step is focused on.
      * @default true
@@ -62,7 +62,11 @@ */
 interface TourStep {
-    /** The CSS selector of the target element for this step. */
-    target: string;
+    /** Optional target element to highlight during this step.
+     * If not provided, the step will be displayed in center of the screen like a modal.
+     */
+    target?: string;
     /** The title to display for this step. */
     title?: string;
-    /** The content to display for this step. */
+    /** The content to display for this step.
+     * This can be a string or a React component.
+     */
     content: React.ReactNode;
@@ -109,3 +113,3 @@ /**
 
-declare const Tour: (props: TourProps) => React$1.JSX.Element | null;
+declare const Tour: React$1.MemoExoticComponent<({ id, ...restProps }: TourProps) => React$1.JSX.Element | null>;
 
@@ -112,0 +116,0 @@ declare const useTourControls: () => TourControls;

dist/index.js

@@ -1,3 +0,3 @@
-"use strict";var rt=Object.create;var w=Object.defineProperty;var nt=Object.getOwnPropertyDescriptor;var it=Object.getOwnPropertyNames;var at=Object.getPrototypeOf,st=Object.prototype.hasOwnProperty;var dt=(t,e)=>{for(var r in e)w(t,r,{get:e[r],enumerable:!0})},U=(t,e,r,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let i of it(e))!st.call(t,i)&&i!==r&&w(t,i,{get:()=>e[i],enumerable:!(o=nt(e,i))||o.enumerable});return t};var f=(t,e,r)=>(r=t!=null?rt(at(t)):{},U(e||!t||!t.__esModule?w(r,"default",{value:t,enumerable:!0}):r,t)),lt=t=>U(w({},"__esModule",{value:!0}),t);var Pt={};dt(Pt,{Tour:()=>H,TourProvider:()=>E,useTourControls:()=>g,useTourState:()=>v});module.exports=lt(Pt);var h=f(require("react")),x=h.default.createContext(null),ut=({children:t})=>{var N;let[e,r]=h.default.useState(!1),[o,i]=h.default.useState(null),[n,a]=h.default.useState(0),d=h.default.useRef([]),s=(N=o==null?void 0:o.steps.length)!=null?N:0,m=c=>{d.current.push(c)},y=c=>{let O=d.current.find(ot=>ot.id===c);O&&(i(O),r(!0),a(0))},l=()=>{r(!1),i(null),a(0)},p=h.default.useCallback(()=>{a(c=>Math.min(s-1,c+1))},[s]),P=()=>{a(c=>Math.max(0,c-1))},et=h.default.useCallback(c=>{c<1||c>=s||a(c-1)},[s]);return h.default.createElement(x.Provider,{value:{isTourOpen:e,activeTour:o,activeStepIndex:n,totalSteps:s,tours:d.current,addTour:m,startTour:y,endTour:l,goToStep:et,nextStep:p,prevStep:P}},t)},E=ut;function k(t,{insertAt:e}={}){if(!t||typeof document=="undefined")return;let r=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css",e==="top"&&r.firstChild?r.insertBefore(o,r.firstChild):r.appendChild(o),o.styleSheet?o.styleSheet.cssText=t:o.appendChild(document.createTextNode(t))}k(`:root{--gray1: #fcfcfc;--gray2: #f9f9f9;--gray3: #f0f0f0;--gray4: #e8e8e8;--gray5: #e0e0e0;--gray6: #d9d9d9;--gray7: #cecece;--gray8: #bbbbbb;--gray9: #8d8d8d;--gray10: #838383;--gray11: #646464;--gray12: #202020;--color-bg: #fff;--color-fg: var(--gray12);--color-secondary: var(--gray6);--color-secondary-fg: var(--gray9);--color-muted: var(--gray3);--color-muted-fg: var(--gray8);--color-border: var(--gray7);--color-border-hover: var(--gray6);--color-border-muted: var(--gray4);--color-border-muted-hover: var(--gray5);--shadow-border: 0 0 0 1px rgba(0, 0, 0, .08);--transition: cubic-bezier(.645, .045, .355, 1);--duration: .2s;--duration-long: .4s;--sc-1: .25rem;--sc-2: .5rem;--sc-3: .75rem;--sc-4: 1rem;--sc-5: 1.25rem;--sc-6: 1.5rem;--rd-1: .25rem;--rd-2: .5rem;--rd-3: .75rem;--rd-4: 1rem}[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(--duration) var(--transition)}@keyframes NtFadeIn{0%{opacity:0}to{opacity:1}}:where([data-nt-step-container]){min-width:350px;background-color:var(--color-bg);color:var(--color-fg);box-shadow:var(--shadow-border),0 1px 1px #00000005,0 4px 8px -4px #0000000a,0 16px 24px -8px #0000000f;border-radius:var(--rd-3);animation:ntScaleUp var(--duration) var(--transition);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}:where([data-nt-step-container][data-target-highlight=true]){box-shadow:none}:where([data-nt-step-container]) [data-nt-button]{border:none;padding:var(--sc-3) var(--sc-5);width:auto;overflow:visible;outline:none;background:var(--gray12);cursor:pointer;color:var(--gray1);font:inherit;font-weight:500;text-align:center;font-size:.875rem;border-radius:var(--rd-2);opacity:1;line-height:normal;transition:all .15s var(--transition)}:where([data-nt-step-container]) [data-nt-button]:hover{opacity:.8}:where([data-nt-step-container]) [data-nt-button][data-variant=outline]{background-color:transparent;color:var(--color-fg);border:1px solid var(--color-border)}:where([data-nt-step-container]) [data-nt-button][data-variant=outline]:hover{background-color:var(--color-muted);border:1px solid var(--color-border-hover);opacity:1}:where([data-nt-step-container]) [data-nt-tour-step-footer]{width:100%;padding:var(--sc-3) var(--sc-4);display:flex;flex-direction:column;justify-content:center;align-items:center;border-top:1px solid var(--color-border-muted);border-bottom-left-radius:inherit;border-bottom-right-radius:inherit}:where([data-nt-step-container]) [data-nt-tour-step-footer-actions]{width:100%;display:flex;justify-content:space-between;align-items:center;gap:var(--sc-1)}:where([data-nt-step-container]) [data-nt-step-content]{padding:var(--sc-4);display:flex;flex-direction:column;justify-content:center;align-items:start;text-align:start;gap:var(--sc-2);max-width:300px;text-wrap:pretty}:where([data-nt-step-container]) [data-nt-step-content]>[data-nt-step-title]{font-size:1.25rem;font-weight:600;letter-spacing:-.02em}@keyframes ntScaleUp{0%{transform:scale(.95);opacity:0}to{transform:scale(1);opacity:1}}
-`);var B=f(require("react"));var V=f(require("react"));var ct=()=>{let t=V.default.useContext(x);if(!t)throw new Error("useTourControls must be used within a <TourProvider> component");let{startTour:e,endTour:r,goToStep:o,nextStep:i,prevStep:n,addTour:a}=t;return{startTour:e,endTour:r,goToStep:o,nextStep:i,prevStep:n,addTour:a}},g=ct;var _=f(require("react"));var pt=()=>{let t=_.default.useContext(x);if(!t)throw new Error("useTourState must be used within a <TourProvider> component");let{tours:e,activeStepIndex:r,activeTour:o,isTourOpen:i,totalSteps:n}=t;return{tours:e,activeStepIndex:r,activeTour:o,isTourOpen:i,totalSteps:n}},v=pt;var z=f(require("react"));var D=`
+"use strict";var at=Object.create;var E=Object.defineProperty;var lt=Object.getOwnPropertyDescriptor;var ut=Object.getOwnPropertyNames;var ct=Object.getPrototypeOf,dt=Object.prototype.hasOwnProperty;var pt=(t,o)=>{for(var e in o)E(t,e,{get:o[e],enumerable:!0})},q=(t,o,e,r)=>{if(o&&typeof o=="object"||typeof o=="function")for(let n of ut(o))!dt.call(t,n)&&n!==e&&E(t,n,{get:()=>o[n],enumerable:!(r=lt(o,n))||r.enumerable});return t};var f=(t,o,e)=>(e=t!=null?at(ct(t)):{},q(o||!t||!t.__esModule?E(e,"default",{value:t,enumerable:!0}):e,t)),mt=t=>q(E({},"__esModule",{value:!0}),t);var Ft={};pt(Ft,{Tour:()=>j,TourProvider:()=>L,useTourControls:()=>g,useTourState:()=>b});module.exports=mt(Ft);var p=f(require("react")),P=p.default.createContext(null),ft=({children:t})=>{var w;let[o,e]=p.default.useState(!1),[r,n]=p.default.useState(null),[i,s]=p.default.useState(0),a=p.default.useRef([]),l=(w=r==null?void 0:r.steps.length)!=null?w:0,h=d=>{a.current.push(d)},v=d=>{let D=a.current.find(st=>st.id===d);D&&(n(D),e(!0),s(0))},u=()=>{e(!1),n(null),s(0)},c=p.default.useCallback(()=>{s(d=>Math.min(l-1,d+1))},[l]),x=p.default.useCallback(()=>{s(d=>Math.max(0,d-1))},[]),C=p.default.useCallback(d=>{d<1||d>=l||s(d-1)},[l]),A=p.default.useMemo(()=>({isTourOpen:o,activeTour:r,activeStepIndex:i,totalSteps:l,tours:a.current,addTour:h,startTour:v,endTour:u,goToStep:C,nextStep:c,prevStep:x}),[o,r,i,l,h,v,u,C,c,x]);return p.default.createElement(P.Provider,{value:A},t)},L=ft;function B(t,{insertAt:o}={}){if(!t||typeof document=="undefined")return;let e=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css",o==="top"&&e.firstChild?e.insertBefore(r,e.firstChild):e.appendChild(r),r.styleSheet?r.styleSheet.cssText=t:r.appendChild(document.createTextNode(t))}B(`:root{--gray1: #fcfcfc;--gray2: #f9f9f9;--gray3: #f0f0f0;--gray4: #e8e8e8;--gray5: #e0e0e0;--gray6: #d9d9d9;--gray7: #cecece;--gray8: #bbbbbb;--gray9: #8d8d8d;--gray10: #838383;--gray11: #646464;--gray12: #202020;--color-bg: #fff;--color-fg: var(--gray12);--color-secondary: var(--gray6);--color-secondary-fg: var(--gray9);--color-muted: var(--gray3);--color-muted-fg: var(--gray8);--color-border: var(--gray7);--color-border-hover: var(--gray6);--color-border-muted: var(--gray4);--color-border-muted-hover: var(--gray5);--shadow-border: 0 0 0 1px rgba(0, 0, 0, .08);--transition: cubic-bezier(.4, 0, .2, 1);--duration: .3s;--duration-long: .4s;--sc-1: .25rem;--sc-2: .5rem;--sc-3: .75rem;--sc-4: 1rem;--sc-5: 1.25rem;--sc-6: 1.5rem;--rd-1: .25rem;--rd-2: .5rem;--rd-3: .75rem;--rd-4: 1rem}.nt-popover{position:fixed;z-index:10010;top:0;left:0}.nt-popover.enable-transition{transition:top var(--duration) var(--transition),left var(--duration) var(--transition)}.nt-popover-overlay{position:fixed;z-index:10000;top:0;left:0;width:100%;height:100%;animation:NtFadeIn var(--duration) var(--transition)}.nt-popover-overlay.active{background-color:#00000080}@keyframes NtFadeIn{0%{opacity:0}to{opacity:1}}.nt-step-container{min-width:350px;background-color:var(--color-bg);color:var(--color-fg);box-shadow:var(--shadow-border),0 1px 1px #00000005,0 4px 8px -4px #0000000a,0 16px 24px -8px #0000000f;border-radius:var(--rd-3);animation:ntScaleUp var(--duration) var(--transition);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.nt-step-container[data-target-highlight=true]{box-shadow:none}.nt-button{border:none;padding:var(--sc-3) var(--sc-5);width:auto;overflow:visible;outline:none;background:var(--gray12);cursor:pointer;color:var(--gray1);font:inherit;font-weight:500;text-align:center;font-size:.875rem;border-radius:var(--rd-2);opacity:1;line-height:normal;transition:all .15s var(--transition)}.nt-button:hover{opacity:.8}.nt-button[data-variant=outline]{background-color:transparent;color:var(--color-fg);border:1px solid var(--color-border)}.nt-button[data-variant=outline]:hover{background-color:var(--color-muted);border:1px solid var(--color-border-hover);opacity:1}.nt-step-footer{width:100%;padding:var(--sc-3) var(--sc-4);display:flex;flex-direction:column;justify-content:center;align-items:center;border-top:1px solid var(--color-border-muted);border-bottom-left-radius:inherit;border-bottom-right-radius:inherit}.nt-step-footer-actions{width:100%;display:flex;justify-content:space-between;align-items:center;gap:var(--sc-1)}.nt-step-content{padding:var(--sc-4);display:flex;flex-direction:column;justify-content:center;align-items:start;text-align:start;gap:var(--sc-2);max-width:300px;text-wrap:pretty}.nt-step-title{font-size:1.25rem;font-weight:600;letter-spacing:-.02em}@keyframes ntScaleUp{0%{transform:scale(.95);opacity:0}to{transform:scale(1);opacity:1}}
+`);var S=f(require("react"));var z=f(require("react"));var ht=()=>{let t=z.default.useContext(P);if(!t)throw new Error("useTourControls must be used within a <TourProvider> component");let{startTour:o,endTour:e,goToStep:r,nextStep:n,prevStep:i,addTour:s}=t;return{startTour:o,endTour:e,goToStep:r,nextStep:n,prevStep:i,addTour:s}},g=ht;var W=f(require("react"));var vt=()=>{let t=W.default.useContext(P);if(!t)throw new Error("useTourState must be used within a <TourProvider> component");let{tours:o,activeStepIndex:e,activeTour:r,isTourOpen:n,totalSteps:i}=t;return{tours:o,activeStepIndex:e,activeTour:r,isTourOpen:n,totalSteps:i}},b=vt;var Y=f(require("react"));var K=`
   a[href]:not([tabindex^="-"]),
@@ -17,2 +17,2 @@ area[href]:not([tabindex^="-"]),
   object[usemap]:not([tabindex^="-"])
-  `,j="bottom-center";var ft=t=>{z.default.useEffect(()=>{var n;let e=t.current;if(!e)return;let r=()=>Array.from(e.querySelectorAll(D)).filter(a=>!a.hasAttribute("disabled")),o=r();(n=o[0])==null||n.focus();let i=a=>{if(a.key!=="Tab"||o.length===0)return;let d=o[0],s=o[o.length-1],m=document.activeElement,y=!a.shiftKey&&m===s,l=a.shiftKey&&m===d;(y||l)&&((a.shiftKey?d:s).focus(),a.preventDefault()),o=r()};return document.addEventListener("keydown",i),()=>document.removeEventListener("keydown",i)},[t])},F=ft;var mt=t=>{var n,a,d,s;let e=(n=t==null?void 0:t.highlightTarget)!=null?n:!0,r=(a=t==null?void 0:t.preventCloseOnClickOutside)!=null?a:!1,o=(d=t==null?void 0:t.showNavigation)!=null?d:!0,i=(s=t==null?void 0:t.showProgress)!=null?s:!0;return{highlightTarget:e,preventCloseOnClickOutside:r,showNavigation:o,showProgress:i}},M=mt;var S=require("react");var W=t=>{if(!t||!window.visualViewport)return!1;let e=t.getBoundingClientRect();return e.top>=0&&e.left>=0&&e.bottom<=window.visualViewport.height-40&&e.right<=window.visualViewport.width},q=(t,e,r)=>{let o=t.style[e];return t.style[e]=r,()=>{t.style[e]=o}},K=/^((?!chrome|android).)*safari/i.test(navigator.userAgent),Y=typeof window!="undefined";var ht=Y?S.useLayoutEffect:S.useEffect,gt=t=>{ht(()=>{if(!t)return;let e=K?bt():vt();return()=>{e()}},[t])},vt=()=>{let t=window.getComputedStyle(document.body).overflow;return document.body.style.overflow="hidden",()=>{document.body.style.overflow=t}},bt=()=>{let t={overflow:document.body.style.overflow,position:document.body.style.position,top:document.body.style.top,left:document.body.style.left,right:document.body.style.right},e=window.scrollY;return document.body.style.position="fixed",document.body.style.top=`-${e}px`,document.body.style.overflow="hidden",()=>{document.body.style.overflow=t.overflow,document.body.style.position=t.position,document.body.style.top=t.top,document.body.style.left=t.left,document.body.style.right=t.right,window.scrollTo(0,e)}},I=gt;var T=f(require("react"));var $=(t,e,r)=>{let n=0,a=0;switch(r){case"top-center":n=t.top-e.height-10,a=t.left+t.width/2-e.width/2;break;case"bottom-center":n=t.top+t.height+10,a=t.left+t.width/2-e.width/2;break;case"left-center":n=t.top+t.height/2-e.height/2,a=t.left-e.width-10;break;case"right-center":n=t.top+t.height/2-e.height/2,a=t.left+t.width+10;break;case"window-center":n=window.innerHeight/2-e.height/2,a=window.innerWidth/2-e.width/2;break}return n=Math.max(10,Math.min(n,window.innerHeight-e.height-10)),a=Math.max(10,Math.min(a,window.innerWidth-e.width-10)),{top:n,left:a}},J=(t,e)=>{if(!t){e();return}t.scrollIntoView({behavior:"smooth",block:"center"});let r=null,o=0,i=()=>{if(o%3===0){let n=t.getBoundingClientRect().top;if(n===r){if(++o>6){e();return}}else r=n,o=0}else o++;window.requestAnimationFrame(i)};window.requestAnimationFrame(i)};var u=f(require("react")),Q=f(require("react-dom"));var Z=u.default.createContext(null),Tt=()=>{let t=u.default.useContext(Z);if(!t)throw new Error("usePopover must be used within a Popover component");return t},G=({children:t,open:e,preferredPosition:r=j,target:o,onClickOutside:i,shouldHighlightTarget:n=!0})=>!o||!e?null:u.default.createElement(Z.Provider,{value:{open:e,preferredPosition:r,target:o,onClickOutside:i,shouldHighlightTarget:n}},t),yt=({children:t,...e})=>{let{open:r,target:o,preferredPosition:i,onClickOutside:n,shouldHighlightTarget:a}=Tt(),d=u.default.useRef(null),s=u.default.useRef(null),[m,y]=u.default.useState(null);return u.default.useEffect(()=>{if(o){let l=o.getBoundingClientRect();y(l)}},[o]),u.default.useEffect(()=>{if(!r||!m||!d.current)return;let l=$(m,d.current.getBoundingClientRect(),i),{current:p}=d;p.style.top=`${l.top}px`,p.style.left=`${l.left}px`;let P=setTimeout(()=>{p.style.transition="top var(--duration-long), left var(--duration-long)"},50);return()=>{clearTimeout(P)}},[r,m,i]),u.default.useEffect(()=>{if(a&&o&&s.current){let l=q(o,"zIndex","10001");s.current.style.backgroundColor="rgba(0, 0, 0, 0.5)";let p=s.current;return()=>{p.style.backgroundColor="",l()}}},[a,o]),F(d),I(r),u.default.useEffect(()=>{let l=p=>{s.current===p.target&&(n==null||n())};return document.addEventListener("mousedown",l),()=>document.removeEventListener("mousedown",l)},[n]),Q.default.createPortal(u.default.createElement("div",{ref:s,"data-nt-popover-container":!0},u.default.createElement("div",{...e,ref:d,"data-nt-popover":!0},t)),document.body)};G.Content=yt;var C=G;var L=f(require("react")),X=({children:t})=>L.default.createElement("div",{"data-nt-step-content":!0},t),xt=({children:t})=>L.default.createElement("h3",{"data-nt-step-title":!0},t);X.Title=xt;var A=X;var b=f(require("react"));var wt=()=>{let{nextStep:t,prevStep:e,endTour:r}=g(),{totalSteps:o,activeStepIndex:i}=v(),n=o>1&&i>0,a=i<o-1,d=i===o-1;return b.default.createElement("footer",{"data-nt-tour-step-footer":!0},b.default.createElement("div",{"data-nt-tour-step-footer-actions":!0},n&&b.default.createElement("button",{onClick:()=>e(),"data-nt-button":!0,"data-variant":"outline"},"Back"),b.default.createElement("button",{onClick:()=>r(),"data-nt-button":!0,"data-variant":"outline"},"Skip"),b.default.createElement("div",{style:{flex:1}}),a&&b.default.createElement("button",{onClick:()=>t(),"data-nt-button":!0,"data-variant":"primary"},"Next"),d&&b.default.createElement("button",{onClick:()=>r(),"data-nt-button":!0,"data-variant":"primary"},"Finish")))},R=wt;var St=({activeStep:t,tourOptions:e})=>{let{endTour:r}=g(),{isTourOpen:o}=v(),[i,n]=T.default.useState(null),{highlightTarget:a,preventCloseOnClickOutside:d}=M(e);return T.default.useEffect(()=>{if(!t)return;let s=document.querySelector(t.target);if(!s)return;if(W(s))i!==s&&n(s);else return n(null),J(s,()=>{n(s)}),()=>{i!==null&&n(null)}},[t,i]),t?T.default.createElement(C,{open:o,target:i,preferredPosition:t.position,shouldHighlightTarget:a,onClickOutside:()=>d?void 0:r()},T.default.createElement(C.Content,{"data-nt-step-container":!0,"data-target-highlight":a},T.default.createElement(A,null,T.default.createElement(A.Title,null,t.title),t.content),T.default.createElement(R,null))):null},tt=St;var Ct=t=>{let{addTour:e}=g(),{activeTour:r,activeStepIndex:o}=v();B.default.useEffect(()=>{e(t)},[e,t]);let i=(r==null?void 0:r.id)===t.id,n=i?r.steps[o]:null;return i?B.default.createElement(tt,{activeStep:n,tourOptions:r.options}):null},H=Ct;0&&(module.exports={Tour,TourProvider,useTourControls,useTourState});
+  `,k="bottom-center";var gt=(t,o=!0)=>{Y.default.useEffect(()=>{var s;if(!o)return;let e=t.current;if(!e)return;let r=()=>Array.from(e.querySelectorAll(K)).filter(a=>!a.hasAttribute("disabled")),n=r();(s=n[0])==null||s.focus();let i=a=>{if(a.key!=="Tab"||n.length===0)return;let l=n[0],h=n[n.length-1],v=document.activeElement,u=!a.shiftKey&&v===h,c=a.shiftKey&&v===l;(u||c)&&((a.shiftKey?l:h).focus(),a.preventDefault()),n=r()};return document.addEventListener("keydown",i),()=>document.removeEventListener("keydown",i)},[t,o])},O=gt;var bt=t=>{var i,s,a,l;let o=(i=t==null?void 0:t.highlightTarget)!=null?i:!0,e=(s=t==null?void 0:t.preventCloseOnClickOutside)!=null?s:!1,r=(a=t==null?void 0:t.showNavigation)!=null?a:!0,n=(l=t==null?void 0:t.showProgress)!=null?l:!0;return{highlightTarget:o,preventCloseOnClickOutside:e,showNavigation:r,showProgress:n}},_=bt;var M=require("react");var $=t=>{if(!t||!window.visualViewport)return!1;let o=t.getBoundingClientRect();return o.top>=0&&o.left>=0&&o.bottom<=window.visualViewport.height-40&&o.right<=window.visualViewport.width},F=(t,o,e)=>{let r=t.style[o];return t.style[o]=e,()=>{t.style[o]=r}},N=(...t)=>{let o=[];for(let e of t)if(e){if(typeof e=="string")o.push(e);else if(Array.isArray(e))o.push(N(...e));else if(typeof e=="object")for(let[r,n]of Object.entries(e))n&&o.push(r)}return o.join(" ")},J=(t,o=100)=>{let e;return()=>{e&&clearTimeout(e),e=window.setTimeout(()=>{t()},o)}},Q=/^((?!chrome|android).)*safari/i.test(navigator.userAgent),G=typeof window!="undefined";var yt=G?M.useLayoutEffect:M.useEffect,xt=t=>{yt(()=>{if(!t)return;let o=Q?wt():Tt();return()=>{o()}},[t])},Tt=()=>{let t=window.getComputedStyle(document.body).overflow;return document.body.style.overflow="hidden",()=>{document.body.style.overflow=t}},wt=()=>{let t={overflow:document.body.style.overflow,position:document.body.style.position,top:document.body.style.top,left:document.body.style.left,right:document.body.style.right},o=window.scrollY;return document.body.style.position="fixed",document.body.style.top=`-${o}px`,document.body.style.overflow="hidden",()=>{document.body.style.overflow=t.overflow,document.body.style.position=t.position,document.body.style.top=t.top,document.body.style.left=t.left,document.body.style.right=t.right,window.scrollTo(0,o)}},V=xt;var y=f(require("react"));var X=(t,o,e)=>{let i=0,s=0;switch(e){case"top-center":i=t.top-o.height-10,s=t.left+t.width/2-o.width/2;break;case"bottom-center":i=t.top+t.height+10,s=t.left+t.width/2-o.width/2;break;case"left-center":i=t.top+t.height/2-o.height/2,s=t.left-o.width-10;break;case"right-center":i=t.top+t.height/2-o.height/2,s=t.left+t.width+10;break;case"window-center":i=window.innerHeight/2-o.height/2,s=window.innerWidth/2-o.width/2;break}return i=Math.max(10,Math.min(i,window.innerHeight-o.height-10)),s=Math.max(10,Math.min(s,window.innerWidth-o.width-10)),{top:i,left:s}},Z=(t,o)=>{if(!t){o();return}t.scrollIntoView({behavior:"smooth",block:"center"});let e=null,r=!1,n=()=>{r=!1;let a=t.getBoundingClientRect().top;if(a===e){o();return}e=a,i()},i=()=>{r||(requestAnimationFrame(n),r=!0)};J(i,100)()};var m=f(require("react")),R=f(require("react-dom"));var tt=m.default.createContext(null),Pt=()=>{let t=m.default.useContext(tt);if(!t)throw new Error("usePopover must be used within a Popover component");return t},ot=({children:t,open:o,preferredPosition:e=k,target:r,onClickOutside:n,shouldHighlightTarget:i=!0})=>o?m.default.createElement(tt.Provider,{value:{open:o,preferredPosition:e,target:r,onClickOutside:n,shouldHighlightTarget:i}},t):null,St=({children:t,className:o,...e})=>{let{open:r,target:n,preferredPosition:i,onClickOutside:s,shouldHighlightTarget:a}=Pt(),l=m.default.useRef(null),[h,v]=m.default.useState(!1);return m.default.useEffect(()=>{let{current:u}=l;if(!r||!n||!u)return;(()=>{let C=n.getBoundingClientRect(),A=u.getBoundingClientRect(),w=X(C,A,i);F(u,"top",`${w.top}px`),F(u,"left",`${w.left}px`),v(!0)})();let x;return a&&(x=F(n,"zIndex","10001")),()=>{x&&x()}},[r,n,i,a]),O(l,r),V(r),R.default.createPortal(m.default.createElement(m.default.Fragment,null,m.default.createElement("div",{className:N("nt-popover-overlay",{active:r&&!!a}),onClick:s}),m.default.createElement("div",{...e,ref:l,className:N("nt-popover",{"enable-transition":h},o)},t)),document.body)};ot.Content=St;var I=ot;var H=f(require("react")),et=({children:t})=>H.default.createElement("div",{className:"nt-step-content"},t),Ct=({children:t})=>H.default.createElement("h3",{className:"nt-step-title"},t);et.Title=Ct;var U=et;var T=f(require("react"));var Et=()=>{let{nextStep:t,prevStep:o,endTour:e}=g(),{totalSteps:r,activeStepIndex:n}=b(),i=r>1&&n>0,s=n<r-1,a=n===r-1;return T.default.createElement("footer",{className:"nt-step-footer"},T.default.createElement("div",{className:"nt-step-footer-actions"},i&&T.default.createElement("button",{onClick:()=>o(),className:"nt-button","data-variant":"outline"},"Back"),T.default.createElement("button",{onClick:()=>e(),className:"nt-button","data-variant":"outline"},"Skip"),T.default.createElement("div",{style:{flex:1}}),s&&T.default.createElement("button",{onClick:()=>t(),className:"nt-button","data-variant":"primary"},"Next"),a&&T.default.createElement("button",{onClick:()=>e(),className:"nt-button","data-variant":"primary"},"Finish")))},rt=Et;var kt=({activeStep:t,tourOptions:o})=>{let{endTour:e}=g(),{isTourOpen:r}=b(),[n,i]=y.default.useState(k),[s,a]=y.default.useState(null),{highlightTarget:l,preventCloseOnClickOutside:h}=_(o);return y.default.useEffect(()=>{if(!t){a(null);return}let v=t.target?t.position:"window-center";i(v);let u=t.target;if(!u){a(null);return}let c=document.querySelector(u);if(!c){console.warn(`Step target not found: ${u}`),a(null);return}(()=>{$(c)?a(c):(a(null),Z(c,()=>a(c)))})()},[t,r]),!t||!r?null:y.default.createElement(I,{open:r,target:s,preferredPosition:n,shouldHighlightTarget:l,onClickOutside:()=>!h&&e()},y.default.createElement(I.Content,{className:"nt-step-container","data-target-highlight":l},y.default.createElement(U,null,y.default.createElement(U.Title,null,t.title),t.content),y.default.createElement(rt,null)))},nt=kt;var it=S.default.memo(({id:t,...o})=>{let{addTour:e}=g(),{activeTour:r,activeStepIndex:n}=b(),i=S.default.useMemo(()=>({id:t,...o}),[t,o]);S.default.useEffect(()=>{e(i)},[e,i]);let s=(r==null?void 0:r.id)===t,a=s?r.steps[n]:null;return s?S.default.createElement(nt,{activeStep:a,tourOptions:r.options}):null});it.displayName="Next Tour";var j=it;0&&(module.exports={Tour,TourProvider,useTourControls,useTourState});

package.json

 {
   "name": "next-tour",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "Guided tours and walkthroughs for Next.js",
@@ -5,0 +5,0 @@ "main": "./dist/index.js",

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

33053

increased by0.42%

Lines of code

228

increased by2.7%

No dependency changes