@flows/react - npm Package Compare versions

Comparing version 1.5.0 to 1.6.0

dist/index.d.ts

@@ -11,2 +11,6 @@ import { FC, ReactNode } from 'react';
     key?: string;
+    /**
+     * Id of the workflow this block belongs to.
+     */
+    workflowId: string;
 }
@@ -117,3 +121,12 @@ type ComponentProps<T extends Record<string, any> = any> = {
 declare const resetWorkflowProgress: (workflowId: string) => Promise<void>;
+/**
+ * Start a workflow from a manual start block. The workflow will only start if:
+ * - Workflow is published in the current environment
+ * - Workflow has a manual start block with a matching block key
+ * - The current user can access the workflow based on the frequency setting
+ * - The current user matches the start block's user property conditions
+ * @param blockKey - block key of the manual start block
+ */
+declare const startWorkflow: (blockKey: string) => Promise<void>;
 
-export { type ActiveBlock, type ComponentProps, type FlowsProperties, FlowsProvider, FlowsSlot, type FlowsSlotProps, type TourComponentProps, resetAllWorkflowsProgress, resetWorkflowProgress, useCurrentFloatingBlocks, useCurrentSlotBlocks };
+export { type ActiveBlock, type ComponentProps, type FlowsProperties, FlowsProvider, FlowsSlot, type FlowsSlotProps, type TourComponentProps, resetAllWorkflowsProgress, resetWorkflowProgress, startWorkflow, useCurrentFloatingBlocks, useCurrentSlotBlocks };

dist/index.js

 "use client"
-"use strict";var D=Object.defineProperty,It=Object.defineProperties,At=Object.getOwnPropertyDescriptor,Ft=Object.getOwnPropertyDescriptors,$t=Object.getOwnPropertyNames,ot=Object.getOwnPropertySymbols;var rt=Object.prototype.hasOwnProperty,Mt=Object.prototype.propertyIsEnumerable;var nt=(t,e,o)=>e in t?D(t,e,{enumerable:!0,configurable:!0,writable:!0,value:o}):t[e]=o,d=(t,e)=>{for(var o in e||(e={}))rt.call(e,o)&&nt(t,o,e[o]);if(ot)for(var o of ot(e))Mt.call(e,o)&&nt(t,o,e[o]);return t},b=(t,e)=>It(t,Ft(e));var _t=(t,e)=>{for(var o in e)D(t,o,{get:e[o],enumerable:!0})},Dt=(t,e,o,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let s of $t(e))!rt.call(t,s)&&s!==o&&D(t,s,{get:()=>e[s],enumerable:!(r=At(e,s))||r.enumerable});return t};var Nt=t=>Dt(D({},"__esModule",{value:!0}),t);var Gt={};_t(Gt,{FlowsProvider:()=>Et,FlowsSlot:()=>qt,resetAllWorkflowsProgress:()=>jt,resetWorkflowProgress:()=>Kt,useCurrentFloatingBlocks:()=>L,useCurrentSlotBlocks:()=>U});module.exports=Nt(Gt);var N=require("react"),Vt=()=>{},j=(0,N.createContext)({blocks:[],components:{},tourComponents:{},runningTours:[],removeBlock:Vt}),w=()=>(0,N.useContext)(j);var E=require("react");var st=(t,{body:e,method:o,version:r})=>fetch(t,{method:o,headers:{"Content-Type":"application/json","x-flows-version":r},body:e?JSON.stringify(e):void 0}).then(async s=>{var n;let i=await s.text(),c=i?JSON.parse(i):void 0;if(!s.ok){let u=c;throw new Error((n=u==null?void 0:u.message)!=null?n:s.statusText)}return c}),V=(t,e)=>({getBlocks:o=>st(`${t}/v2/sdk/blocks`,{method:"POST",body:o,version:e}),sendEvent:o=>st(`${t}/v2/sdk/events`,{method:"POST",body:o,version:e})});var it=({block:t,exitNodeCb:e,removeBlock:o})=>{let r=({properties:c,parentKey:n})=>{var p;let u=d({},c);return Object.entries(c).forEach(([l,f])=>{Array.isArray(f)&&(u[l]=f.map((a,m)=>typeof a=="object"?r({properties:a,parentKey:[n,l,m].filter(k=>k!==void 0).join(".")}):a))}),delete u.f__exit_nodes,(p=c.f__exit_nodes)==null||p.forEach(l=>{let f=()=>e([n,l].filter(a=>a!==void 0).join("."));u[l]=f}),u},s=r({properties:t.data}),i=t.exitNodes.reduce((c,n)=>{let u=()=>(o(t.id),e(n));return c[n]=u,c},{});return d(d({__flows:{key:t.key}},s),i)};var Ot="#22262d",Lt="#fff",ct="%cFlows%c",ut=`color:${Lt};background:${Ot};padding:2px 4px;border-radius:4px`,T={error:(t,...e)=>{console.error(`${ct} ${t}`,ut,"",...e)},warn:(t,...e)=>{console.warn(`${ct} ${t}`,ut,"",...e)}};var K=(t,e)=>e?Array.isArray(e)?e.some(o=>K(t,o)):typeof t!="string"?!1:new RegExp(e).test(t):!0,G=(t,e)=>e===void 0?!0:Array.isArray(e)?e.some(o=>G(t,o)):t===e,z=(t,e)=>e===void 0?!0:Array.isArray(e)?e.every(o=>z(t,o)):t!==e;var J=(t,e)=>e?Array.isArray(e)?e.some(o=>J(t,o)):typeof t!="string"?!1:t.includes(e):!0,X=(t,e)=>e?Array.isArray(e)?e.every(o=>X(t,o)):typeof t!="string"?!1:!t.includes(e):!0;var R=({operator:t,pathname:e,value:o})=>t==="eq"?G(e,o):t==="ne"?z(e,o):t==="contains"?J(e,o):t==="notContains"?X(e,o):t==="regex"?K(e,o):!0,pt=({eventTarget:t,value:e})=>e?Array.from(document.querySelectorAll(e)).some(o=>o.contains(t)):!1;var $=()=>window.location.pathname+window.location.search;var x={};var lt="@flows/react",mt="1.5.0";var O=`${lt}@${mt}`;var P=async t=>{let{apiUrl:e,environment:o,organizationId:r,userId:s}=x;!e||!o||!r||!s||await V(e,O).sendEvent(b(d({},t),{environment:o,organizationId:r,userId:s}))};var ft=({blocks:t,removeBlock:e})=>{let[o,r]=(0,E.useState)([]);return(0,E.useEffect)(()=>{r(i=>{let c=t.filter(p=>p.type==="tour"),n=new Map(i.map(p=>[p.blockId,p]));return c.map(p=>{var a,m;let l=n.get(p.id),f=(m=(a=l==null?void 0:l.currentBlockIndex)!=null?a:p.currentTourIndex)!=null?m:0;return{blockId:p.id,currentBlockIndex:f}})})},[t]),(0,E.useMemo)(()=>{let i=(n,u)=>{r(p=>p.map(l=>l.blockId===n?u(l):l))},c=(n,u)=>{i(n,p=>b(d({},p),{currentBlockIndex:u}))};return o.map(({blockId:n,currentBlockIndex:u})=>{var B,_,tt;let p=t.find(y=>y.id===n);if(!p)return;let l=(B=p.tourBlocks)==null?void 0:B[u],f=u===((tt=(_=p.tourBlocks)==null?void 0:_.length)!=null?tt:0)-1,a=y=>{P({name:"tour-update",blockId:n,properties:{currentTourIndex:y}})};return{block:p,currentBlockIndex:u,activeStep:l,continue:()=>{if(f)e(n),P({name:"transition",propertyKey:"complete",blockId:n});else{let y=u+1;c(n,y),a(y)}},previous:()=>{var et;let y=u===0?u:u-1;for(;y>0&&p.tourBlocks&&!((et=p.tourBlocks.at(y))!=null&&et.componentType);)y-=1;c(n,y),a(y)},cancel:()=>{e(n),P({name:"transition",blockId:n,propertyKey:"cancel"})}}}).filter(n=>!!n)},[t,e,o])};var v=require("react");var g=require("react"),dt=({url:t,onMessage:e,onOpen:o})=>{let[r,s]=(0,g.useState)(),i=(0,g.useRef)(void 0),[c,n]=(0,g.useState)(0),u=(0,g.useRef)(o);(0,g.useEffect)(()=>{u.current=o},[o]);let p=(0,g.useRef)(e);(0,g.useEffect)(()=>{p.current=e},[e]);let l=(0,g.useCallback)(a=>{p.current(a)},[]),f=(0,g.useCallback)(()=>{i.current&&(i.current(),i.current=void 0);let a=new WebSocket(t);s(a);let m=()=>{var B;(B=u.current)==null||B.call(u),n(0)},k=()=>{s(void 0),n(B=>B+1)};a.addEventListener("open",m),a.addEventListener("close",k),a.addEventListener("message",l);let h=()=>{a.removeEventListener("open",m),a.removeEventListener("close",k),a.removeEventListener("message",l),a.readyState===WebSocket.CONNECTING?a.addEventListener("open",()=>{a.close()}):a.close(),s(void 0)};return i.current=h,h},[l,t]);(0,g.useEffect)(()=>{let a=f();return()=>{a()}},[f]),(0,g.useEffect)(()=>{if(r)return;let a=setTimeout(()=>{f()},Math.min(1e3*2**c,1e4));return()=>{clearTimeout(a)}},[c,r,f]),(0,g.useEffect)(()=>()=>{i.current&&i.current()},[])};var kt=({apiUrl:t,environment:e,organizationId:o,userId:r,userProperties:s})=>{let[i,c]=(0,v.useState)([]),n=(0,v.useMemo)(()=>({environment:e,organizationId:o,userId:r}),[e,o,r]),u=(0,v.useRef)(s);(0,v.useEffect)(()=>{u.current=s},[s]);let p=(0,v.useCallback)(()=>{V(t,O).getBlocks(b(d({},n),{userProperties:u.current})).then(m=>{c(m.blocks)}).catch(m=>{T.error("Failed to load blocks",m)})},[t,n]),l=(0,v.useMemo)(()=>`${t.replace("https://","wss://").replace("http://","ws://")}/ws/sdk/block-updates?${new URLSearchParams(n).toString()}`,[t,n]),f=(0,v.useCallback)(m=>{let k=JSON.parse(m.data),h=new Set([...k.exitedBlockIds,...k.updatedBlocks.map(B=>B.id)]);c(B=>[...B.filter(_=>!h.has(_.id)),...k.updatedBlocks])},[]);dt({url:l,onMessage:f,onOpen:p}),(0,v.useEffect)(()=>{i.forEach(m=>{var k;gt(m),(k=m.tourBlocks)==null||k.forEach(h=>{gt(h)})})},[i]);let a=(0,v.useCallback)(m=>{c(k=>k.filter(h=>h.id!==m))},[]);return{blocks:i,removeBlock:a}},gt=t=>{t.slottable&&!t.slotId&&T.error(`Encountered workflow block "${t.componentType}" that is slottable but has no slotId`)};var C=require("react"),Bt=require("react/jsx-runtime"),Ut=200,Wt=()=>{let[t,e]=(0,C.useState)(),o=(0,C.useRef)(t);return(0,C.useEffect)(()=>{o.current=t},[t]),(0,C.useEffect)(()=>{let r=window.setInterval(()=>{let s=$();o.current!==s&&e(s)},Ut);return()=>{clearInterval(r)}}),t},vt=(0,C.createContext)(void 0),M=()=>{if((0,C.useContext)(vt)!==void 0)return $()},yt=({children:t})=>{let e=Wt();return(0,Bt.jsx)(vt.Provider,{value:e,children:t})};var S=require("react");var wt=require("react");var Ct=()=>{let{runningTours:t}=w(),e=M(),[o]=(0,wt.useState)(new Map),r=(0,S.useMemo)(()=>t.filter(s=>{var i;return!!((i=s.activeStep)!=null&&i.tourWait)}),[t]);return(0,S.useEffect)(()=>{r.forEach(s=>{var c,n,u;let i=(c=s.activeStep)==null?void 0:c.tourWait;(i==null?void 0:i.interaction)==="navigation"&&R({pathname:e,operator:(n=i.page)==null?void 0:n.operator,value:(u=i.page)==null?void 0:u.value})&&s.continue()})},[e,r]),(0,S.useEffect)(()=>{let s=i=>{let c=i.target;if(!c||!(c instanceof Element))return;let n=$();r.forEach(u=>{var l,f,a;let p=(l=u.activeStep)==null?void 0:l.tourWait;if((p==null?void 0:p.interaction)==="click"){let m=R({pathname:n,operator:(f=p.page)==null?void 0:f.operator,value:(a=p.page)==null?void 0:a.value});pt({eventTarget:c,value:p.element})&&m&&u.continue()}})};return addEventListener("click",s),()=>{removeEventListener("click",s)}},[e,r]),(0,S.useEffect)(()=>{t.forEach(s=>{let i=s.activeStep,c=o.get(s.block.id);c&&c.stepId!==(i==null?void 0:i.id)&&(clearTimeout(c.timeoutId),o.delete(s.block.id))})},[t,o]),(0,S.useEffect)(()=>{r.forEach(s=>{let i=s.activeStep,c=i==null?void 0:i.tourWait;if(i&&(c==null?void 0:c.interaction)==="delay"&&c.ms!==void 0&&!o.has(s.block.id)){let n=window.setTimeout(()=>{s.continue(),o.delete(s.block.id)},c.ms);o.set(s.block.id,{timeoutId:n,stepId:i.id})}})},[r,o]),null};var I=require("react");var H=({block:t,removeBlock:e})=>{if(!t.componentType)return[];let o=it({block:t,removeBlock:e,exitNodeCb:r=>P({name:"transition",blockId:t.id,propertyKey:r})});return{id:t.id,type:"component",component:t.componentType,props:o}},Q=t=>{let e=t.activeStep;if(!(e!=null&&e.componentType))return[];let o=t.currentBlockIndex===0;return{id:e.id,type:"tour-component",component:e.componentType,props:b(d({__flows:{key:e.key}},e.data),{continue:t.continue,previous:o?void 0:t.previous,cancel:t.cancel})}};var Y=t=>t==null?void 0:t.slotId;var Pt=()=>{let{blocks:t}=w(),e=M();return(0,I.useMemo)(()=>t.filter(o=>R({pathname:e,operator:o.page_targeting_operator,value:o.page_targeting_values})),[t,e])},bt=()=>{let{runningTours:t}=w(),e=M();return(0,I.useMemo)(()=>t.filter(o=>{let r=o.activeStep;return r&&R({pathname:e,operator:r.page_targeting_operator,value:r.page_targeting_values})}),[e,t])},L=()=>{let t=Pt(),e=bt(),{removeBlock:o}=w(),r=(0,I.useMemo)(()=>t.filter(i=>!i.slottable).flatMap(i=>H({block:i,removeBlock:o})),[o,t]),s=(0,I.useMemo)(()=>e.filter(i=>{let c=i.activeStep;return c&&!c.slottable}).flatMap(Q),[e]);return[...r,...s]},Tt=t=>"type"in t,ht=t=>{var e,o,r;return Tt(t)?(e=t.slotIndex)!=null?e:0:(r=(o=t.activeStep)==null?void 0:o.slotIndex)!=null?r:0},U=t=>{let e=Pt(),o=bt(),{removeBlock:r}=w();return(0,I.useMemo)(()=>{let i=e.filter(n=>n.slottable&&Y(n)===t),c=o.filter(n=>{var u;return((u=n.activeStep)==null?void 0:u.slottable)&&Y(n.activeStep)===t});return[...i,...c].sort((n,u)=>ht(n)-ht(u)).flatMap(n=>Tt(n)?H({block:n,removeBlock:r}):Q(n))},[r,t,e,o])};var xt=require("react/jsx-runtime"),W=({block:t})=>{let{components:e}=w(),o=e[t.component];return o?(0,xt.jsx)(o,d({},t.props)):(T.error(`Component not found for workflow block "${t.component}"`),null)};var St=require("react/jsx-runtime"),q=({block:t})=>{let{tourComponents:e}=w(),o=e[t.component];return o?(0,St.jsx)(o,d({},t.props)):(T.error(`Tour Component not found for tour block "${t.component}"`),null)};var A=require("react/jsx-runtime"),Rt=()=>{let t=L();return(0,A.jsx)(A.Fragment,{children:t.map(e=>e.type==="component"?(0,A.jsx)(W,{block:e},e.id):e.type==="tour-component"?(0,A.jsx)(q,{block:e},e.id):null)})};var F=require("react/jsx-runtime"),Et=({children:t,apiUrl:e="https://api.flows-cloud.com",environment:o,organizationId:r,userId:s,components:i,tourComponents:c,userProperties:n})=>{x.apiUrl=e,x.environment=o,x.organizationId=r,x.userId=s;let{blocks:u,removeBlock:p}=kt({apiUrl:e,environment:o,organizationId:r,userId:s,userProperties:n}),l=ft({blocks:u,removeBlock:p});return(0,F.jsx)(yt,{children:(0,F.jsxs)(j.Provider,{value:{blocks:u,components:i,runningTours:l,tourComponents:c,removeBlock:p},children:[t,(0,F.jsx)(Rt,{}),(0,F.jsx)(Ct,{})]})})};var Z=require("react/jsx-runtime"),qt=({id:t,placeholder:e})=>{let o=U(t);return o.length?o.map(r=>r.type==="component"?(0,Z.jsx)(W,{block:r},r.id):r.type==="tour-component"?(0,Z.jsx)(q,{block:r},r.id):null):e!=null?e:null};var jt=()=>P({name:"reset-progress"}),Kt=t=>P({name:"reset-progress",workflowId:t});
+"use strict";var D=Object.defineProperty,Et=Object.defineProperties,At=Object.getOwnPropertyDescriptor,Ft=Object.getOwnPropertyDescriptors,$t=Object.getOwnPropertyNames,ot=Object.getOwnPropertySymbols;var rt=Object.prototype.hasOwnProperty,Mt=Object.prototype.propertyIsEnumerable;var nt=(t,e,o)=>e in t?D(t,e,{enumerable:!0,configurable:!0,writable:!0,value:o}):t[e]=o,d=(t,e)=>{for(var o in e||(e={}))rt.call(e,o)&&nt(t,o,e[o]);if(ot)for(var o of ot(e))Mt.call(e,o)&&nt(t,o,e[o]);return t},b=(t,e)=>Et(t,Ft(e));var _t=(t,e)=>{for(var o in e)D(t,o,{get:e[o],enumerable:!0})},Dt=(t,e,o,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let s of $t(e))!rt.call(t,s)&&s!==o&&D(t,s,{get:()=>e[s],enumerable:!(r=At(e,s))||r.enumerable});return t};var Nt=t=>Dt(D({},"__esModule",{value:!0}),t);var zt={};_t(zt,{FlowsProvider:()=>Rt,FlowsSlot:()=>qt,resetAllWorkflowsProgress:()=>jt,resetWorkflowProgress:()=>Kt,startWorkflow:()=>Gt,useCurrentFloatingBlocks:()=>L,useCurrentSlotBlocks:()=>W});module.exports=Nt(zt);var N=require("react"),Vt=()=>{},j=(0,N.createContext)({blocks:[],components:{},tourComponents:{},runningTours:[],removeBlock:Vt}),B=()=>(0,N.useContext)(j);var R=require("react");var st=(t,{body:e,method:o,version:r})=>fetch(t,{method:o,headers:{"Content-Type":"application/json","x-flows-version":r},body:e?JSON.stringify(e):void 0}).then(async s=>{var n;let i=await s.text(),c=i?JSON.parse(i):void 0;if(!s.ok){let u=c;throw new Error((n=u==null?void 0:u.message)!=null?n:s.statusText)}return c}),V=(t,e)=>({getBlocks:o=>st(`${t}/v2/sdk/blocks`,{method:"POST",body:o,version:e}),sendEvent:o=>st(`${t}/v2/sdk/events`,{method:"POST",body:o,version:e})});var it=({block:t,exitNodeCb:e,removeBlock:o})=>{let r=({properties:c,parentKey:n})=>{var p;let u=d({},c);return Object.entries(c).forEach(([l,f])=>{Array.isArray(f)&&(u[l]=f.map((a,m)=>typeof a=="object"?r({properties:a,parentKey:[n,l,m].filter(k=>k!==void 0).join(".")}):a))}),delete u.f__exit_nodes,(p=c.f__exit_nodes)==null||p.forEach(l=>{let f=()=>e([n,l].filter(a=>a!==void 0).join("."));u[l]=f}),u},s=r({properties:t.data}),i=t.exitNodes.reduce((c,n)=>{let u=()=>(o(t.id),e(n));return c[n]=u,c},{});return d(d({__flows:{key:t.key,workflowId:t.workflowId}},s),i)};var Ot="#22262d",Lt="#fff",ct="%cFlows%c",ut=`color:${Lt};background:${Ot};padding:2px 4px;border-radius:4px`,T={error:(t,...e)=>{console.error(`${ct} ${t}`,ut,"",...e)},warn:(t,...e)=>{console.warn(`${ct} ${t}`,ut,"",...e)}};var K=(t,e)=>e?Array.isArray(e)?e.some(o=>K(t,o)):typeof t!="string"?!1:new RegExp(e).test(t):!0,G=(t,e)=>e===void 0?!0:Array.isArray(e)?e.some(o=>G(t,o)):t===e,z=(t,e)=>e===void 0?!0:Array.isArray(e)?e.every(o=>z(t,o)):t!==e;var J=(t,e)=>e?Array.isArray(e)?e.some(o=>J(t,o)):typeof t!="string"?!1:t.includes(e):!0,X=(t,e)=>e?Array.isArray(e)?e.every(o=>X(t,o)):typeof t!="string"?!1:!t.includes(e):!0;var I=({operator:t,pathname:e,value:o})=>t==="eq"?G(e,o):t==="ne"?z(e,o):t==="contains"?J(e,o):t==="notContains"?X(e,o):t==="regex"?K(e,o):!0,pt=({eventTarget:t,value:e})=>e?Array.from(document.querySelectorAll(e)).some(o=>o.contains(t)):!1;var $=()=>window.location.pathname+window.location.search;var x={};var lt="@flows/react",mt="1.6.0";var O=`${lt}@${mt}`;var h=async t=>{let{apiUrl:e,environment:o,organizationId:r,userId:s}=x;!e||!o||!r||!s||await V(e,O).sendEvent(b(d({},t),{environment:o,organizationId:r,userId:s}))};var ft=({blocks:t,removeBlock:e})=>{let[o,r]=(0,R.useState)([]);return(0,R.useEffect)(()=>{r(i=>{let c=t.filter(p=>p.type==="tour"),n=new Map(i.map(p=>[p.blockId,p]));return c.map(p=>{var a,m;let l=n.get(p.id),f=(m=(a=l==null?void 0:l.currentBlockIndex)!=null?a:p.currentTourIndex)!=null?m:0;return{blockId:p.id,currentBlockIndex:f}})})},[t]),(0,R.useMemo)(()=>{let i=(n,u)=>{r(p=>p.map(l=>l.blockId===n?u(l):l))},c=(n,u)=>{i(n,p=>b(d({},p),{currentBlockIndex:u}))};return o.map(({blockId:n,currentBlockIndex:u})=>{var w,_,tt;let p=t.find(y=>y.id===n);if(!p)return;let l=(w=p.tourBlocks)==null?void 0:w[u],f=u===((tt=(_=p.tourBlocks)==null?void 0:_.length)!=null?tt:0)-1,a=y=>{h({name:"tour-update",blockId:n,properties:{currentTourIndex:y}})};return{block:p,currentBlockIndex:u,activeStep:l,continue:()=>{if(f)e(n),h({name:"transition",propertyKey:"complete",blockId:n});else{let y=u+1;c(n,y),a(y)}},previous:()=>{var et;let y=u===0?u:u-1;for(;y>0&&p.tourBlocks&&!((et=p.tourBlocks.at(y))!=null&&et.componentType);)y-=1;c(n,y),a(y)},cancel:()=>{e(n),h({name:"transition",blockId:n,propertyKey:"cancel"})}}}).filter(n=>!!n)},[t,e,o])};var v=require("react");var g=require("react"),dt=({url:t,onMessage:e,onOpen:o})=>{let[r,s]=(0,g.useState)(),i=(0,g.useRef)(void 0),[c,n]=(0,g.useState)(0),u=(0,g.useRef)(o);(0,g.useEffect)(()=>{u.current=o},[o]);let p=(0,g.useRef)(e);(0,g.useEffect)(()=>{p.current=e},[e]);let l=(0,g.useCallback)(a=>{p.current(a)},[]),f=(0,g.useCallback)(()=>{i.current&&(i.current(),i.current=void 0);let a=new WebSocket(t);s(a);let m=()=>{var w;(w=u.current)==null||w.call(u),n(0)},k=()=>{s(void 0),n(w=>w+1)};a.addEventListener("open",m),a.addEventListener("close",k),a.addEventListener("message",l);let P=()=>{a.removeEventListener("open",m),a.removeEventListener("close",k),a.removeEventListener("message",l),a.readyState===WebSocket.CONNECTING?a.addEventListener("open",()=>{a.close()}):a.close(),s(void 0)};return i.current=P,P},[l,t]);(0,g.useEffect)(()=>{let a=f();return()=>{a()}},[f]),(0,g.useEffect)(()=>{if(r)return;let a=setTimeout(()=>{f()},Math.min(1e3*2**c,1e4));return()=>{clearTimeout(a)}},[c,r,f]),(0,g.useEffect)(()=>()=>{i.current&&i.current()},[])};var kt=({apiUrl:t,environment:e,organizationId:o,userId:r,userProperties:s})=>{let[i,c]=(0,v.useState)([]),n=(0,v.useMemo)(()=>({environment:e,organizationId:o,userId:r}),[e,o,r]),u=(0,v.useRef)(s);(0,v.useEffect)(()=>{u.current=s},[s]);let p=(0,v.useCallback)(()=>{V(t,O).getBlocks(b(d({},n),{userProperties:u.current})).then(m=>{c(m.blocks)}).catch(m=>{T.error("Failed to load blocks",m)})},[t,n]),l=(0,v.useMemo)(()=>`${t.replace("https://","wss://").replace("http://","ws://")}/ws/sdk/block-updates?${new URLSearchParams(n).toString()}`,[t,n]),f=(0,v.useCallback)(m=>{let k=JSON.parse(m.data),P=new Set([...k.exitedBlockIds,...k.updatedBlocks.map(w=>w.id)]);c(w=>[...w.filter(_=>!P.has(_.id)),...k.updatedBlocks])},[]);dt({url:l,onMessage:f,onOpen:p}),(0,v.useEffect)(()=>{i.forEach(m=>{var k;gt(m),(k=m.tourBlocks)==null||k.forEach(P=>{gt(P)})})},[i]);let a=(0,v.useCallback)(m=>{c(k=>k.filter(P=>P.id!==m))},[]);return{blocks:i,removeBlock:a}},gt=t=>{t.slottable&&!t.slotId&&T.error(`Encountered workflow block "${t.componentType}" that is slottable but has no slotId`)};var C=require("react"),wt=require("react/jsx-runtime"),Wt=200,Ut=()=>{let[t,e]=(0,C.useState)(),o=(0,C.useRef)(t);return(0,C.useEffect)(()=>{o.current=t},[t]),(0,C.useEffect)(()=>{let r=window.setInterval(()=>{let s=$();o.current!==s&&e(s)},Wt);return()=>{clearInterval(r)}}),t},vt=(0,C.createContext)(void 0),M=()=>{if((0,C.useContext)(vt)!==void 0)return $()},yt=({children:t})=>{let e=Ut();return(0,wt.jsx)(vt.Provider,{value:e,children:t})};var S=require("react");var Bt=require("react");var Ct=()=>{let{runningTours:t}=B(),e=M(),[o]=(0,Bt.useState)(new Map),r=(0,S.useMemo)(()=>t.filter(s=>{var i;return!!((i=s.activeStep)!=null&&i.tourWait)}),[t]);return(0,S.useEffect)(()=>{r.forEach(s=>{var c,n,u;let i=(c=s.activeStep)==null?void 0:c.tourWait;(i==null?void 0:i.interaction)==="navigation"&&I({pathname:e,operator:(n=i.page)==null?void 0:n.operator,value:(u=i.page)==null?void 0:u.value})&&s.continue()})},[e,r]),(0,S.useEffect)(()=>{let s=i=>{let c=i.target;if(!c||!(c instanceof Element))return;let n=$();r.forEach(u=>{var l,f,a;let p=(l=u.activeStep)==null?void 0:l.tourWait;if((p==null?void 0:p.interaction)==="click"){let m=I({pathname:n,operator:(f=p.page)==null?void 0:f.operator,value:(a=p.page)==null?void 0:a.value});pt({eventTarget:c,value:p.element})&&m&&u.continue()}})};return addEventListener("click",s),()=>{removeEventListener("click",s)}},[e,r]),(0,S.useEffect)(()=>{t.forEach(s=>{let i=s.activeStep,c=o.get(s.block.id);c&&c.stepId!==(i==null?void 0:i.id)&&(clearTimeout(c.timeoutId),o.delete(s.block.id))})},[t,o]),(0,S.useEffect)(()=>{r.forEach(s=>{let i=s.activeStep,c=i==null?void 0:i.tourWait;if(i&&(c==null?void 0:c.interaction)==="delay"&&c.ms!==void 0&&!o.has(s.block.id)){let n=window.setTimeout(()=>{s.continue(),o.delete(s.block.id)},c.ms);o.set(s.block.id,{timeoutId:n,stepId:i.id})}})},[r,o]),null};var E=require("react");var H=({block:t,removeBlock:e})=>{if(!t.componentType)return[];let o=it({block:t,removeBlock:e,exitNodeCb:r=>h({name:"transition",blockId:t.id,propertyKey:r})});return{id:t.id,type:"component",component:t.componentType,props:o}},Q=t=>{let e=t.activeStep;if(!(e!=null&&e.componentType))return[];let o=t.currentBlockIndex===0;return{id:e.id,type:"tour-component",component:e.componentType,props:b(d({__flows:{key:e.key,workflowId:e.workflowId}},e.data),{continue:t.continue,previous:o?void 0:t.previous,cancel:t.cancel})}};var Y=t=>t==null?void 0:t.slotId;var Pt=()=>{let{blocks:t}=B(),e=M();return(0,E.useMemo)(()=>t.filter(o=>I({pathname:e,operator:o.page_targeting_operator,value:o.page_targeting_values})),[t,e])},bt=()=>{let{runningTours:t}=B(),e=M();return(0,E.useMemo)(()=>t.filter(o=>{let r=o.activeStep;return r&&I({pathname:e,operator:r.page_targeting_operator,value:r.page_targeting_values})}),[e,t])},L=()=>{let t=Pt(),e=bt(),{removeBlock:o}=B(),r=(0,E.useMemo)(()=>t.filter(i=>!i.slottable).flatMap(i=>H({block:i,removeBlock:o})),[o,t]),s=(0,E.useMemo)(()=>e.filter(i=>{let c=i.activeStep;return c&&!c.slottable}).flatMap(Q),[e]);return[...r,...s]},Tt=t=>"type"in t,ht=t=>{var e,o,r;return Tt(t)?(e=t.slotIndex)!=null?e:0:(r=(o=t.activeStep)==null?void 0:o.slotIndex)!=null?r:0},W=t=>{let e=Pt(),o=bt(),{removeBlock:r}=B();return(0,E.useMemo)(()=>{let i=e.filter(n=>n.slottable&&Y(n)===t),c=o.filter(n=>{var u;return((u=n.activeStep)==null?void 0:u.slottable)&&Y(n.activeStep)===t});return[...i,...c].sort((n,u)=>ht(n)-ht(u)).flatMap(n=>Tt(n)?H({block:n,removeBlock:r}):Q(n))},[r,t,e,o])};var xt=require("react/jsx-runtime"),U=({block:t})=>{let{components:e}=B(),o=e[t.component];return o?(0,xt.jsx)(o,d({},t.props)):(T.error(`Component not found for workflow block "${t.component}"`),null)};var St=require("react/jsx-runtime"),q=({block:t})=>{let{tourComponents:e}=B(),o=e[t.component];return o?(0,St.jsx)(o,d({},t.props)):(T.error(`Tour Component not found for tour block "${t.component}"`),null)};var A=require("react/jsx-runtime"),It=()=>{let t=L();return(0,A.jsx)(A.Fragment,{children:t.map(e=>e.type==="component"?(0,A.jsx)(U,{block:e},e.id):e.type==="tour-component"?(0,A.jsx)(q,{block:e},e.id):null)})};var F=require("react/jsx-runtime"),Rt=({children:t,apiUrl:e="https://api.flows-cloud.com",environment:o,organizationId:r,userId:s,components:i,tourComponents:c,userProperties:n})=>{x.apiUrl=e,x.environment=o,x.organizationId=r,x.userId=s;let{blocks:u,removeBlock:p}=kt({apiUrl:e,environment:o,organizationId:r,userId:s,userProperties:n}),l=ft({blocks:u,removeBlock:p});return(0,F.jsx)(yt,{children:(0,F.jsxs)(j.Provider,{value:{blocks:u,components:i,runningTours:l,tourComponents:c,removeBlock:p},children:[t,(0,F.jsx)(It,{}),(0,F.jsx)(Ct,{})]})})};var Z=require("react/jsx-runtime"),qt=({id:t,placeholder:e})=>{let o=W(t);return o.length?o.map(r=>r.type==="component"?(0,Z.jsx)(U,{block:r},r.id):r.type==="tour-component"?(0,Z.jsx)(q,{block:r},r.id):null):e!=null?e:null};var jt=()=>h({name:"reset-progress"}),Kt=t=>h({name:"reset-progress",workflowId:t}),Gt=t=>h({name:"workflow-start",blockKey:t});

package.json

 {
   "name": "@flows/react",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "description": "Flows React SDK – Build native product growth experiences, your way",
@@ -5,0 +5,0 @@ "keywords": [

No alert changes

Improved metrics

Total package byte prevSize

34408

4.22%

Lines of code

210

6.6%

No dependency changes