next-tour - npm Package Compare versions

Comparing version 0.2.2 to 0.2.4

dist/index.d.ts

 import React$1 from 'react';
 
-interface TourProviderProps {
-    children: React.ReactNode;
+/** Position represents the preferred position of a floating element. */
+type Position = "top-center" | "bottom-center" | "left-center" | "right-center";
+
+interface TourOptions {
+    /**
+     * Whether to show the tour navigation buttons.
+     * @default true
+     */
+    showNavigation?: boolean;
+    /**
+     * Whether to show the tour progress indicator.
+     * @default true
+     */
+    showProgress?: boolean;
+    /**
+     * 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.
+     * @default true
+     */
+    showMask?: boolean;
 }
-interface TourProps extends Tour$1 {
-    children: React.ReactNode;
+interface StepOptions {
+    /**
+     * Whether to show the close button on the tour.
+     * @default true
+     */
+    showCloseButton?: boolean;
+    /**
+     * Whether to show the skip button on the tour.
+     * @default true
+     */
+    showSkipButton?: boolean;
+    /**
+     * Whether to show the back button on the tour.
+     * @default true
+     */
+    showBackButton?: boolean;
 }
+
 interface Tour$1 {
@@ -14,2 +48,4 @@ /** A unique identifier for the tour, used for starting the tour programmatically. */
     steps: TourStep[];
+    /** Optional configuration options for the tour. */
+    options?: TourOptions;
 }
@@ -21,2 +57,9 @@ interface TourStep {
     content: React.ReactNode;
+    /**
+     * Optional position of the step
+     * @default "bottom-center"
+     */
+    position?: Position;
+    /** Optional configuration options for the step. */
+    options?: StepOptions;
 }
@@ -34,4 +77,4 @@ interface TourControls {
     prevStep: () => void;
-    /** Jump to a specific step in the tour, identified by a index (starting from 1). */
-    goToStep: (step: number) => void;
+    /** Jump to a specific step in the tour by the step number. */
+    goToStep: (stepNumber: number) => void;
 }
@@ -45,4 +88,4 @@ interface TourState {
     activeTour: Tour$1 | null;
-    /** The index (starting from 1) of the currently active step in the tour. */
-    activeStep: number;
+    /** The index of the currently active step in the tour. */
+    activeStepIndex: number;
     /** The total number of steps in the currently active tour. */
@@ -52,6 +95,9 @@ totalSteps: number;
 
-declare const TourProvider: ({ children }: TourProviderProps) => React$1.JSX.Element;
+type TourProviderProps = React$1.PropsWithChildren<{}>;
+type TourProps = Tour$1;
 
-declare const Tour: ({ children, ...tour }: TourProps) => React$1.JSX.Element;
+declare const TourProvider: React$1.FC<TourProviderProps>;
 
+declare const Tour: ({ options, ...tour }: TourProps) => React$1.JSX.Element;
+
 declare const useTourControls: () => TourControls;
@@ -58,0 +104,0 @@

dist/index.js

@@ -1,2 +0,3 @@
-var q=Object.create;var v=Object.defineProperty;var U=Object.getOwnPropertyDescriptor;var _=Object.getOwnPropertyNames;var $=Object.getPrototypeOf,W=Object.prototype.hasOwnProperty;var z=(e,t)=>{for(var o in t)v(e,o,{get:t[o],enumerable:!0})},F=(e,t,o,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let n of _(t))!W.call(e,n)&&n!==o&&v(e,n,{get:()=>t[n],enumerable:!(r=U(t,n))||r.enumerable});return e};var E=(e,t,o)=>(o=e!=null?q($(e)):{},F(t||!e||!e.__esModule?v(o,"default",{value:e,enumerable:!0}):o,e)),G=e=>F(v({},"__esModule",{value:!0}),e);var se={};z(se,{Tour:()=>R,TourProvider:()=>M,useTourControls:()=>x,useTourState:()=>k});module.exports=G(se);var c=E(require("react")),h=(0,c.createContext)(null),J=({children:e})=>{var A;let[t,o]=(0,c.useState)(!1),[r,n]=(0,c.useState)(null),[u,s]=(0,c.useState)(0),l=(0,c.useRef)([]).current,f=(A=r==null?void 0:r.steps.length)!=null?A:0,T=(0,c.useCallback)(a=>{l.push(a)},[]),C=(0,c.useCallback)(a=>{let I=l.find(V=>V.id===a);I&&(n(I),o(!0),s(1))},[l]),b=(0,c.useCallback)(()=>{o(!1),n(null),s(0)},[]),g=(0,c.useCallback)(()=>{s(a=>Math.min(f,a+1))},[f]),S=(0,c.useCallback)(()=>{s(a=>Math.max(1,a-1))},[]),j=(0,c.useCallback)(a=>{s(a)},[]);return c.default.createElement(h.Provider,{value:{isTourOpen:t,activeTour:r,activeStep:u,totalSteps:f,tours:l,addTour:T,startTour:C,endTour:b,goToStep:j,nextStep:g,prevStep:S}},e)},M=J;var d=E(require("react"));var i=E(require("react"));var H=require("react");var Q=()=>{let e=(0,H.useContext)(h);if(!e)throw new Error("Oops! It looks like useTourControls was called outside of a TourProvider context. Please ensure that your component is wrapped in a <TourProvider> to use the tour controls.");let{startTour:t,endTour:o,goToStep:r,nextStep:n,prevStep:u,addTour:s}=e;return{startTour:t,endTour:o,goToStep:r,nextStep:n,prevStep:u,addTour:s}},x=Q;var D=require("react");var X=()=>{let e=(0,D.useContext)(h);if(!e)throw new Error("Oops! It looks like useTour was called outside of a TourProvider context. Please ensure that your component is wrapped in a <TourProvider>");let{tours:t,activeStep:o,activeTour:r,isTourOpen:n,totalSteps:u}=e;return{tours:t,activeStep:o,activeTour:r,isTourOpen:n,totalSteps:u}},k=X;var P=require("react"),Y=e=>{let t=(0,P.useRef)(null);return(0,P.useEffect)(()=>{let o=r=>{t.current&&!t.current.contains(r.target)&&e()};return document.addEventListener("pointerdown",o),()=>{document.removeEventListener("pointerdown",o)}},[e]),t},y=Y;var p=require("react");var L=`
+"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=`
   a[href]:not([tabindex^="-"]),
@@ -16,2 +17,2 @@ area[href]:not([tabindex^="-"]),
   object[usemap]:not([tabindex^="-"])
-  `;var Z=()=>{let e=(0,p.useRef)(document.activeElement),t=(0,p.useRef)(null),o=(0,p.useCallback)(r=>{if(r.key!=="Tab"||!t.current)return;let n=Array.from(t.current.querySelectorAll(L));if(n.length===0)return;let u=n[0],s=n[n.length-1],{activeElement:l}=document;r.shiftKey&&l===u?(s.focus(),r.preventDefault()):!r.shiftKey&&l===s&&(u.focus(),r.preventDefault())},[]);return(0,p.useEffect)(()=>{let r=t.current;if(!r)return;let n=Array.from(r.querySelectorAll(L));return n[0]&&(n[0].focus(),console.log("Focusing first focusable element within the container.")),document.addEventListener("keydown",o),()=>{document.removeEventListener("keydown",o),e.current&&(document.activeElement===document.body||r.contains(document.activeElement))&&e.current.focus()}},[o]),t},O=Z;var ee=(...e)=>t=>{e.forEach(o=>{o!=null&&(typeof o=="function"?o(t):o.current=t)})},N=ee;var B=(e,t,o)=>{let u=0,s=0;switch(o){case"top-center":u=e.top-t.height-10,s=e.left+e.width/2-t.width/2;break;case"bottom-center":u=e.top+e.height+10,s=e.left+e.width/2-t.width/2;break;case"left-center":u=e.top+e.height/2-t.height/2,s=e.left-t.width-10;break;case"right-center":u=e.top+e.height/2-t.height/2,s=e.left+e.width+10;break}return u=Math.max(10,Math.min(u,window.innerHeight-t.height-10)),s=Math.max(10,Math.min(s,window.innerWidth-t.width-10)),{top:u,left:s}};var K={left:0,top:0,width:0,height:0},w=(0,i.createContext)({isShow:!1,setIsShow:()=>{throw new Error("PopoverContext setIsShow should be used under provider")},preferredPosition:"bottom-center",triggerRect:K,setTriggerRect:()=>{throw new Error("PopoverContext setTriggerRect should be used under provider")}});function m({children:e,preferredPosition:t="bottom-center"}){let[o,r]=(0,i.useState)(!1),[n,u]=(0,i.useState)(K),s={isShow:o,setIsShow:r,preferredPosition:t,triggerRect:n,setTriggerRect:u};return i.default.createElement(w.Provider,{value:s},e)}function te({children:e}){let{setIsShow:t,setTriggerRect:o}=(0,i.useContext)(w),r=(0,i.useRef)(null);return(0,i.cloneElement)(e,{onClick:s=>{let l=r.current;if(l==null)return;let f=l.getBoundingClientRect();o(f),t(T=>!T)},ref:r})}function oe({children:e}){let{isShow:t}=(0,i.useContext)(w);return t?i.default.createElement(re,null,e):null}function re({children:e}){let{triggerRect:t,preferredPosition:o,setIsShow:r}=(0,i.useContext)(w),n=(0,i.useRef)(null),[u,s]=(0,i.useState)({left:0,top:0});(0,i.useLayoutEffect)(()=>{let b=n.current;if(b==null)return;let g=b.getBoundingClientRect(),S=B(t,g,o);s(S)},[]);let l=O(),f=(0,i.useCallback)(()=>{r(!1)},[]),T=y(f),C=N(n,l,T);return i.default.createElement("dialog",{open:!0,ref:C,style:{position:"fixed",left:`${u.left}px`,top:`${u.top}px`,margin:0}},e)}m.Trigger=te;m.Content=oe;var ne=({children:e,...t})=>{let{addTour:o}=x();return(0,d.useEffect)(()=>{o(t)},[o,t]),d.default.createElement(m,{preferredPosition:"top-center"},d.default.createElement(m.Trigger,null,d.default.createElement("button",null,"hello")),d.default.createElement(m.Content,null,"This is the content",d.default.createElement("input",{type:"text"})))},R=ne;0&&(module.exports={Tour,TourProvider,useTourControls,useTourState});
+  `;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});

package.json

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

No alert changes

Improved metrics

Total package byte prevSize

21661

increased by32.52%

Lines of code

174

increased by46.22%

No dependency changes