@flows/react-components/dist/tour.js

Built-in components for Flows React SDK

"use client"
"use strict";var xt=Object.create;var M=Object.defineProperty,Rt=Object.defineProperties,Ft=Object.getOwnPropertyDescriptor,St=Object.getOwnPropertyDescriptors,Dt=Object.getOwnPropertyNames,L=Object.getOwnPropertySymbols,Mt=Object.getPrototypeOf,X=Object.prototype.hasOwnProperty,it=Object.prototype.propertyIsEnumerable;var nt=(t,o,e)=>o in t?M(t,o,{enumerable:!0,configurable:!0,writable:!0,value:e}):t[o]=e,T=(t,o)=>{for(var e in o||(o={}))X.call(o,e)&&nt(t,e,o[e]);if(L)for(var e of L(o))it.call(o,e)&&nt(t,e,o[e]);return t},st=(t,o)=>Rt(t,St(o));var F=(t,o)=>{var e={};for(var n in t)X.call(t,n)&&o.indexOf(n)<0&&(e[n]=t[n]);if(t!=null&&L)for(var n of L(t))o.indexOf(n)<0&&it.call(t,n)&&(e[n]=t[n]);return e};var kt=(t,o)=>{for(var e in o)M(t,e,{get:o[e],enumerable:!0})},rt=(t,o,e,n)=>{if(o&&typeof o=="object"||typeof o=="function")for(let i of Dt(o))!X.call(t,i)&&i!==e&&M(t,i,{get:()=>o[i],enumerable:!(n=Ft(o,i))||n.enumerable});return t};var $=(t,o,e)=>(e=t!=null?xt(Mt(t)):{},rt(o||!t||!t.__esModule?M(e,"default",{value:t,enumerable:!0}):e,t)),Ot=t=>rt(M({},"__esModule",{value:!0}),t);var io={};kt(io,{BasicsV2Card:()=>$t,BasicsV2Hint:()=>Wt,BasicsV2Modal:()=>Zt,BasicsV2Tooltip:()=>no});module.exports=Ot(io);var yt=$(require("dompurify"));var q=require("react/jsx-runtime");function N(t){return(0,q.jsx)("svg",st(T({height:16,viewBox:"0 0 16 16",width:16,xmlns:"http://www.w3.org/2000/svg",fill:"currentColor"},t),{children:(0,q.jsx)("path",{d:"M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"})}))}var ct=require("react");var lt=require("clsx");var W=require("react/jsx-runtime"),It=(t,o)=>{if(o==="_blank")return!1;try{let e=new URL(t);return!1}catch(e){return!0}},at=i=>{var s=i,{className:t,variant:o,size:e="default"}=s,n=F(s,["className","variant","size"]);let r=(0,lt.clsx)("flows_basicsV2_button",`flows_basicsV2_button_${o}`,`flows_basicsV2_button_size_${e}`,t),g=window.__flows_LinkComponent,_=n.href;if(g&&typeof g=="function"&&_&&It(_,n.target))return(0,W.jsx)(g,{href:_,className:r,onClick:n.onClick,children:n.children});let m=n.href?"a":"button";return(0,W.jsx)(m,T({type:m==="button"?"button":void 0,className:r},n))};var dt=require("react/jsx-runtime"),y=({action:t,variant:o,size:e,onClick:n,className:i})=>{let s=(0,ct.useCallback)(()=>{var r;n==null||n(),(r=t.callAction)==null||r.call(t)},[t,n]);return(0,dt.jsx)(at,{variant:o,size:e,href:t.url,target:t.openInNew?"_blank":void 0,onClick:s,className:i,children:t.label})};var ut=require("clsx");var mt=require("react/jsx-runtime"),E=e=>{var n=e,{className:t}=n,o=F(n,["className"]);return(0,mt.jsx)("button",T({type:"button",className:(0,ut.clsx)("flows_basicsV2_iconButton",t)},o))};var ft=require("clsx");var _t=require("react/jsx-runtime"),b=n=>{var i=n,{className:t,variant:o}=i,e=F(i,["className","variant"]);return(0,_t.jsx)("p",T({className:(0,ft.clsx)("flows_basicsV2_text",`flows_basicsV2_text_${o}`,t)},e))};var f=require("react/jsx-runtime"),bt=t=>{var n;let o=[];t.primaryButton&&o.push((0,f.jsx)(y,{action:t.primaryButton,variant:"primary"},"primary")),t.secondaryButton&&o.push((0,f.jsx)(y,{action:t.secondaryButton,variant:"secondary"},"secondary")),t.tour&&o.reverse();let e=(()=>{if(Number(t.width)!==0)return Number.isNaN(Number(t.width))?t.width:`${t.width}px`})();return(0,f.jsxs)("div",{className:"flows_basicsV2_card",style:{width:"100%",maxWidth:e},children:[(0,f.jsx)(b,{variant:"title",className:"flows_basicsV2_card_title",children:t.title}),(0,f.jsx)(b,{variant:"body",dangerouslySetInnerHTML:{__html:yt.default.sanitize(t.body,{FORCE_BODY:!0,ADD_ATTR:["target"]})}}),!t.tour&&o.length?(0,f.jsx)("div",{className:"flows_basicsV2_card_footer",children:(0,f.jsx)("div",{className:"flows_basicsV2_card_buttons",children:o})}):null,t.tour&&((n=t.dots)!=null?n:o.length)?(0,f.jsxs)("div",{className:"flows_basicsV2_card_footer",children:[t.dots,o.length?(0,f.jsx)("div",{className:"flows_basicsV2_card_buttons_wrapper",children:(0,f.jsx)("div",{className:"flows_basicsV2_card_buttons",children:o})}):null]}):null,t.onClose?(0,f.jsx)(E,{"aria-label":"Close",className:"flows_basicsV2_card_close",onClick:t.onClose,children:(0,f.jsx)(N,{})}):null]})};var pt=require("clsx"),wt=require("react"),Q=require("react/jsx-runtime"),V=({count:t,index:o})=>{let e=(0,wt.useMemo)(()=>Array(t).fill(null).map((n,i)=>i),[t]);return(0,Q.jsx)("div",{className:"flows_basicsV2_dots",children:e.map(n=>(0,Q.jsx)("div",{className:(0,pt.clsx)("flows_basicsV2_dots_dot",n===o&&"flows_basicsV2_dots_dot_active")},n))})};var Z=require("react/jsx-runtime"),Lt=t=>{var e,n;let o=t.hideProgress?null:(0,Z.jsx)(V,{count:(e=t.__flows.tourVisibleStepCount)!=null?e:0,index:(n=t.__flows.tourVisibleStepIndex)!=null?n:0});return(0,Z.jsx)(bt,{title:t.title,body:t.body,primaryButton:t.primaryButton,secondaryButton:t.secondaryButton,dots:o,onClose:t.dismissible?t.cancel:void 0,tour:!0,width:t.width})},$t=Lt;var v=require("@floating-ui/react-dom");var zt="#22262d",Ht="#fff",K="%cFlows%c",J=`color:${Ht};background:${zt};padding:2px 4px;border-radius:4px`,z={error:(t,...o)=>{console.error(`${K} ${t}`,J,"",...o)},warn:(t,...o)=>{console.warn(`${K} ${t}`,J,"",...o)},info:(t,...o)=>{console.info(`${K} ${t}`,J,"",...o)}};var p=require("react"),Ct=$(require("dompurify"));var H=require("react"),U=()=>{let[t,o]=(0,H.useState)(!0);return(0,H.useEffect)(()=>{o(!1)},[]),t};var Y=require("react"),Ut=t=>typeof window=="undefined"?null:document.querySelector(t);function G(t){let[o,e]=(0,Y.useState)(t?Ut(t):null);return(0,Y.useEffect)(()=>{if(!t){e(null);return}let n=()=>{let s=document.querySelector(t);e(r=>r!==s?s:r)};n();let i=new MutationObserver(s=>{s.some(g=>g.addedNodes.length>0||g.removedNodes.length>0)&&n()});return i.observe(document.documentElement,{childList:!0,subtree:!0}),()=>{i.disconnect()}},[t]),o}var a=require("react/jsx-runtime"),Yt=300,Gt=8,Xt=4,gt="data-flows-hint-target",vt=(t,o,e)=>(0,v.autoUpdate)(t,o,e,{animationFrame:!0}),ht=t=>{var S,D,h;let o=U(),[e,n]=(0,p.useState)(!1),[i,s]=(0,p.useState)(!1),r=(0,p.useRef)(null),g=(0,p.useCallback)(()=>{var B;n(!0),s(!1),window.clearTimeout((B=r.current)!=null?B:void 0),r.current=null},[]),_=(0,p.useCallback)(()=>{s(!0),r.current=window.setTimeout(()=>{n(!1),s(!1),r.current=null},Yt)},[]),m=G(t.targetElement),A=(0,v.useFloating)({placement:t.placement,elements:{reference:m},whileElementsMounted:vt,transform:!1}),x=A.refs.floating,C=(0,v.useFloating)({placement:"bottom",elements:{reference:A.refs.floating.current},whileElementsMounted:vt,transform:!1,middleware:[(0,v.flip)({fallbackPlacements:["top","bottom","left","right"]}),(0,v.shift)({crossAxis:!0,padding:Gt}),(0,v.offset)(Xt)]}),k=C.refs.floating;if((0,p.useEffect)(()=>{let B=O=>{let R=O.target,l=k.current,I=x.current;if(!l||!R.isConnected)return;!l.contains(R)&&!(I!=null&&I.contains(R))&&_()};return window.addEventListener("click",B),()=>{window.removeEventListener("click",B)}},[_,x,k]),(0,p.useEffect)(()=>(m==null||m.setAttribute(gt,"true"),()=>{m==null||m.removeAttribute(gt)}),[m]),(0,p.useEffect)(()=>{t.targetElement||z.error("Cannot render Hint without target element")},[t.targetElement]),!m||o)return null;let P=[];return t.secondaryButton&&P.push((0,a.jsx)(y,{action:t.secondaryButton,variant:"secondary"},"secondary")),t.primaryButton&&P.push((0,a.jsx)(y,{action:t.primaryButton,variant:"primary"},"primary")),(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)("button",{ref:A.refs.setFloating,style:{left:A.x+((S=t.offsetX)!=null?S:0),top:A.y+((D=t.offsetY)!=null?D:0)},"aria-label":"Open hint",type:"button",className:"flows_basicsV2_hint_hotspot",onClick:e&&!i?_:g}),e?(0,a.jsxs)("div",{className:"flows_basicsV2_tooltip_tooltip flows_basicsV2_hint_tooltip","data-open":i?"false":"true",ref:C.refs.setFloating,style:{left:C.x,top:C.y},children:[(0,a.jsx)(b,{className:"flows_basicsV2_tooltip_title",variant:"title",children:t.title}),(0,a.jsx)(b,{variant:"body",className:"flows_basicsV2_tooltip_body",dangerouslySetInnerHTML:{__html:Ct.default.sanitize(t.body,{FORCE_BODY:!0,ADD_ATTR:["target"]})}}),((h=t.dots)!=null?h:P.length)?(0,a.jsxs)("div",{className:"flows_basicsV2_tooltip_footer",children:[t.dots,P.length?(0,a.jsx)("div",{className:"flows_basicsV2_tooltip_buttons_wrapper",children:(0,a.jsx)("div",{className:"flows_basicsV2_tooltip_buttons",children:P})}):null]}):null,t.onClose?(0,a.jsx)(E,{"aria-label":"Close",className:"flows_basicsV2_tooltip_close",onClick:t.onClose,children:(0,a.jsx)(N,{})}):null]}):null]})};var j=require("react/jsx-runtime"),qt=t=>{var e,n;let o=t.hideProgress?null:(0,j.jsx)(V,{count:(e=t.__flows.tourVisibleStepCount)!=null?e:0,index:(n=t.__flows.tourVisibleStepIndex)!=null?n:0});return(0,j.jsx)(ht,{title:t.title,body:t.body,targetElement:t.targetElement,offsetX:t.offsetX,offsetY:t.offsetY,placement:t.placement,onClose:t.dismissible?t.cancel:void 0,primaryButton:t.primaryButton,secondaryButton:t.secondaryButton,dots:o},t.__flows.id)},Wt=qt;var Bt=require("clsx"),Tt=$(require("dompurify"));var c=require("react/jsx-runtime"),Nt=t=>{let o=t.position||"center",e=t.size||"small",n=[];return t.secondaryButton&&n.push((0,c.jsx)(y,{action:t.secondaryButton,variant:"secondary"},"secondary")),t.primaryButton&&n.push((0,c.jsx)(y,{action:t.primaryButton,variant:"primary"},"primary")),(0,c.jsxs)(c.Fragment,{children:[t.overlay?(0,c.jsx)("div",{className:"flows_basicsV2_modal_overlay",onClick:t.onClose,"aria-hidden":"true"}):null,(0,c.jsx)("div",{className:"flows_basicsV2_modal_wrapper",children:(0,c.jsxs)("div",{className:(0,Bt.clsx)("flows_basicsV2_modal_modal",`flows_basicsV2_modal_${o}`,`flows_basicsV2_modal_width_${e}`),children:[(0,c.jsx)(b,{className:"flows_basicsV2_modal_title",variant:"title",children:t.title}),(0,c.jsx)(b,{className:"flows_basicsV2_modal_body",variant:"body",dangerouslySetInnerHTML:{__html:Tt.default.sanitize(t.body,{FORCE_BODY:!0,ADD_ATTR:["target"]})}}),t.dots?(0,c.jsx)("div",{className:"flows_basicsV2_modal_dots",children:t.dots}):null,n.length?(0,c.jsx)("div",{className:"flows_basicsV2_modal_footer",children:n}):null,t.onClose?(0,c.jsx)(E,{"aria-label":"Close",className:"flows_basicsV2_modal_close",onClick:t.onClose,children:(0,c.jsx)(N,{})}):null]})})]})};var tt=require("react/jsx-runtime"),Qt=t=>{var e,n;let o=t.hideProgress?null:(0,tt.jsx)(V,{count:(e=t.__flows.tourVisibleStepCount)!=null?e:0,index:(n=t.__flows.tourVisibleStepIndex)!=null?n:0});return(0,tt.jsx)(Nt,{title:t.title,body:t.body,overlay:!t.hideOverlay,primaryButton:t.primaryButton,secondaryButton:t.secondaryButton,onClose:t.dismissible?t.cancel:void 0,position:t.position,size:t.size,dots:o})},Zt=Qt;var w=require("@floating-ui/react-dom");var ot=require("clsx"),u=require("react"),Vt=$(require("dompurify"));var d=require("react/jsx-runtime"),Kt=4,At=6,Jt=Kt+At,jt=8,to=8,Et="data-flows-tooltip-target",oo=(t,o,e)=>(0,w.autoUpdate)(t,o,e,{animationFrame:!0}),Pt=t=>{var B,O,R;let o=U(),e=(0,u.useRef)(null),n=(0,u.useRef)(null),i=(0,u.useRef)(null),s=G(t.targetElement),{refs:r,middlewareData:g,placement:_,x:m,y:A}=(0,w.useFloating)({placement:t.placement,elements:{reference:s},whileElementsMounted:oo,middleware:[(0,w.flip)({fallbackPlacements:["top","bottom","left","right"]}),(0,w.shift)({crossAxis:!0,padding:jt}),(0,w.arrow)({element:n,padding:to}),(0,w.offset)(Jt)]}),[x,C]=(0,u.useState)(!1);(0,u.useEffect)(()=>{s||C(!1)},[s]),(0,u.useEffect)(()=>{if(x)return;let l=r.floating.current;if(!l)return;window.getComputedStyle(l).animationName!=="none"||C(!0)},[x,r.floating]);let k=(0,u.useCallback)(()=>{C(!0)},[]),P=(0,u.useMemo)(()=>_.includes("top")?"bottom":_.includes("bottom")?"top":_.includes("left")?"right":"left",[_]);if((0,u.useEffect)(()=>(s==null||s.setAttribute(Et,"true"),()=>{s==null||s.removeAttribute(Et)}),[s]),(0,u.useEffect)(()=>{t.targetElement||z.error("Cannot render Tooltip without target element")},[t.targetElement]),!s||o)return null;r.floating.current&&(r.floating.current.style.left=`${m}px`,r.floating.current.style.top=`${A}px`);let S=(B=g.arrow)==null?void 0:B.x,D=(O=g.arrow)==null?void 0:O.y;if([n,e].forEach(l=>{l.current&&(l.current.style.left=S!=null?`${S}px`:"",l.current.style.top=D!=null?`${D}px`:"",l.current.style.right="",l.current.style.bottom="",l.current.style[P]=`${-At}px`)}),i.current){let l=s.getBoundingClientRect();i.current.style.top=`${l.top}px`,i.current.style.left=`${l.left}px`,i.current.style.width=`${l.width}px`,i.current.style.height=`${l.height}px`}let h=[];return t.secondaryButton&&h.push((0,d.jsx)(y,{action:t.secondaryButton,variant:"secondary"},"secondary")),t.primaryButton&&h.push((0,d.jsx)(y,{action:t.primaryButton,variant:"primary"},"primary")),(0,d.jsxs)("div",{className:"flows_basicsV2_tooltip_root",children:[t.overlay?(0,d.jsx)("div",{className:"flows_basicsV2_tooltip_overlay",ref:i}):null,(0,d.jsxs)("div",{className:"flows_basicsV2_tooltip_tooltip",ref:r.setFloating,"data-open":x?"true":"false",onAnimationEnd:k,children:[(0,d.jsx)(b,{className:"flows_basicsV2_tooltip_title",variant:"title",children:t.title}),(0,d.jsx)(b,{variant:"body",className:"flows_basicsV2_tooltip_body",dangerouslySetInnerHTML:{__html:Vt.default.sanitize(t.body,{FORCE_BODY:!0,ADD_ATTR:["target"]})}}),((R=t.dots)!=null?R:h.length)?(0,d.jsxs)("div",{className:"flows_basicsV2_tooltip_footer",children:[t.dots,h.length?(0,d.jsx)("div",{className:"flows_basicsV2_tooltip_buttons_wrapper",children:(0,d.jsx)("div",{className:"flows_basicsV2_tooltip_buttons",children:h})}):null]}):null,t.onClose?(0,d.jsx)(E,{"aria-label":"Close",className:"flows_basicsV2_tooltip_close",onClick:t.onClose,children:(0,d.jsx)(N,{})}):null,(0,d.jsx)("div",{className:(0,ot.clsx)("flows_basicsV2_tooltip_arrow","flows_basicsV2_tooltip_arrow-bottom"),ref:n}),(0,d.jsx)("div",{className:(0,ot.clsx)("flows_basicsV2_tooltip_arrow","flows_basicsV2_tooltip_arrow-top"),ref:e})]})]})};var et=require("react/jsx-runtime"),eo=t=>{var e,n;let o=t.hideProgress?null:(0,et.jsx)(V,{count:(e=t.__flows.tourVisibleStepCount)!=null?e:0,index:(n=t.__flows.tourVisibleStepIndex)!=null?n:0});return(0,et.jsx)(Pt,{title:t.title,body:t.body,targetElement:t.targetElement,placement:t.placement,overlay:!t.hideOverlay,onClose:t.dismissible?t.cancel:void 0,primaryButton:t.primaryButton,secondaryButton:t.secondaryButton,dots:o})},no=eo;