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

Built-in components for Flows React SDK

"use client"
"use strict";var ct=Object.create;var k=Object.defineProperty,mt=Object.defineProperties,ut=Object.getOwnPropertyDescriptor,dt=Object.getOwnPropertyDescriptors,ft=Object.getOwnPropertyNames,M=Object.getOwnPropertySymbols,yt=Object.getPrototypeOf,U=Object.prototype.hasOwnProperty,q=Object.prototype.propertyIsEnumerable;var X=(t,e,o)=>e in t?k(t,e,{enumerable:!0,configurable:!0,writable:!0,value:o}):t[e]=o,w=(t,e)=>{for(var o in e||(e={}))U.call(e,o)&&X(t,o,e[o]);if(M)for(var o of M(e))q.call(e,o)&&X(t,o,e[o]);return t},Q=(t,e)=>mt(t,dt(e));var N=(t,e)=>{var o={};for(var n in t)U.call(t,n)&&e.indexOf(n)<0&&(o[n]=t[n]);if(t!=null&&M)for(var n of M(t))e.indexOf(n)<0&&q.call(t,n)&&(o[n]=t[n]);return o};var gt=(t,e)=>{for(var o in e)k(t,o,{get:e[o],enumerable:!0})},V=(t,e,o,n)=>{if(e&&typeof e=="object"||typeof e=="function")for(let l of ft(e))!U.call(t,l)&&l!==o&&k(t,l,{get:()=>e[l],enumerable:!(n=ut(e,l))||n.enumerable});return t};var R=(t,e,o)=>(o=t!=null?ct(yt(t)):{},V(e||!t||!t.__esModule?k(o,"default",{value:t,enumerable:!0}):o,t)),pt=t=>V(k({},"__esModule",{value:!0}),t);var kt={};gt(kt,{Hint:()=>ht,Modal:()=>Tt,Tooltip:()=>Ft});module.exports=pt(kt);var d=require("@floating-ui/react-dom");var vt="#22262d",bt="#fff",W="%cFlows%c",Z=`color:${bt};background:${vt};padding:2px 4px;border-radius:4px`,L={error:(t,...e)=>{console.error(`${W} ${t}`,Z,"",...e)},warn:(t,...e)=>{console.warn(`${W} ${t}`,Z,"",...e)}};var b=require("react");var D=require("react");function I(t){let[e,o]=(0,D.useState)(t?document.querySelector(t):null);return(0,D.useEffect)(()=>{if(!t){o(null);return}let n=()=>{let r=document.querySelector(t);o(p=>p!==r?r:p)};n();let l=new MutationObserver(r=>{r.some(s=>s.addedNodes.length>0||s.removedNodes.length>0)&&n()});return l.observe(document.documentElement,{childList:!0,subtree:!0}),()=>{l.disconnect()}},[t]),e}var G=require("react/jsx-runtime");function E(t){return(0,G.jsx)("svg",Q(w({height:16,viewBox:"0 0 16 16",width:16,xmlns:"http://www.w3.org/2000/svg",fill:"currentColor"},t),{children:(0,G.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 K=R(require("classnames"));var z=require("react/jsx-runtime"),v=n=>{var l=n,{className:t,variant:e}=l,o=N(l,["className","variant"]);return(0,z.jsx)("p",w({className:(0,K.default)("flows_text",`flows_text_${e}`,t)},o))};var J=R(require("classnames"));var j=require("react/jsx-runtime"),P=o=>{var n=o,{className:t}=n,e=N(n,["className"]);return(0,j.jsx)("button",w({type:"button",className:(0,J.default)("flows_iconButton",t)},e))};var c=require("react/jsx-runtime"),Ct=300,wt=8,_t=4,tt=(t,e,o)=>(0,d.autoUpdate)(t,e,o,{animationFrame:!0}),et=t=>{var A,B;let[e,o]=(0,b.useState)(!1),n=(0,b.useCallback)(()=>{o(!0)},[]),l=I(t.targetElement),r=(0,d.useFloating)({placement:t.placement,elements:{reference:l},whileElementsMounted:tt,transform:!1}),p=r.refs.floating,s=(0,d.useFloating)({placement:"bottom",elements:{reference:r.refs.floating.current},whileElementsMounted:tt,transform:!1,middleware:[(0,d.flip)({fallbackPlacements:["top","bottom","left","right"]}),(0,d.shift)({crossAxis:!0,padding:wt}),(0,d.offset)(_t)]}),O=s.refs.floating,[H,_]=(0,b.useState)(!1),h=(0,b.useCallback)(()=>{_(!0),setTimeout(()=>{o(!1),_(!1)},Ct)},[]);return(0,b.useEffect)(()=>{let F=S=>{let T=S.target,i=O.current,x=p.current;if(!i||!T.isConnected)return;!i.contains(T)&&!(x!=null&&x.contains(T))&&h()};return window.addEventListener("click",F),()=>{window.removeEventListener("click",F)}},[h,p,O]),(0,b.useEffect)(()=>{t.targetElement||L.error("Cannot render Hint without target element")},[t.targetElement]),l?(0,c.jsxs)(c.Fragment,{children:[(0,c.jsx)("button",{ref:r.refs.setFloating,style:{left:r.x+((A=t.offsetX)!=null?A:0),top:r.y+((B=t.offsetY)!=null?B:0)},"aria-label":"Open hint",type:"button",className:"flows_hint_hotspot",onClick:e?h:n}),e?(0,c.jsxs)("div",{className:"flows_tooltip_tooltip flows_hint_tooltip","data-open":H?"false":"true",ref:s.refs.setFloating,style:{left:s.x,top:s.y},children:[(0,c.jsx)(v,{className:"flows_tooltip_title",variant:"title",children:t.title}),(0,c.jsx)(v,{variant:"body",className:"flows_tooltip_body",dangerouslySetInnerHTML:{__html:t.body}}),t.buttons?(0,c.jsx)("div",{className:"flows_tooltip_footer",children:t.buttons}):null,t.onClose?(0,c.jsx)(P,{"aria-label":"Close",className:"flows_tooltip_close",onClick:t.onClose,children:(0,c.jsx)(E,{})}):null]}):null]}):null};var ot=R(require("classnames"));var nt=require("react/jsx-runtime"),C=n=>{var l=n,{className:t,variant:e}=l,o=N(l,["className","variant"]);return(0,nt.jsx)("button",w({type:"button",className:(0,ot.default)("flows_button",`flows_button_${e}`,t)},o))};var y=require("react/jsx-runtime"),ht=t=>{let e=t.previous&&t.previousText&&(0,y.jsx)(C,{variant:"secondary",onClick:t.previous,children:t.previousText}),o=t.continueText&&(0,y.jsx)(C,{variant:"primary",onClick:t.continue,children:t.continueText}),n=o||e?(0,y.jsxs)(y.Fragment,{children:[e!=null?e:(0,y.jsx)("div",{"aria-hidden":!0}),o!=null?o:(0,y.jsx)("div",{"aria-hidden":!0})]}):null;return(0,y.jsx)(et,{title:t.title,body:t.body,targetElement:t.targetElement,offsetX:t.offsetX,offsetY:t.offsetY,placement:t.placement,onClose:t.showCloseButton?t.cancel:void 0,buttons:n},t.__flows.id)};var lt=R(require("classnames"));var a=require("react/jsx-runtime"),it=t=>(0,a.jsxs)(a.Fragment,{children:[t.overlay?(0,a.jsx)("div",{className:(0,lt.default)("flows_modal_overlay",t.onClose&&"flows_modal_clickable"),onClick:t.onClose,"aria-hidden":"true"}):null,(0,a.jsx)("div",{className:"flows_modal_wrapper",children:(0,a.jsxs)("div",{className:"flows_modal_modal",children:[(0,a.jsx)(v,{variant:"title",children:t.title}),(0,a.jsx)(v,{variant:"body",dangerouslySetInnerHTML:{__html:t.body}}),t.buttons?(0,a.jsx)("div",{className:"flows_modal_footer",children:t.buttons}):null,t.onClose?(0,a.jsx)(P,{"aria-label":"Close",className:"flows_modal_close",onClick:t.onClose,children:(0,a.jsx)(E,{})}):null]})})]});var $=require("react/jsx-runtime"),Tt=t=>{let e=[];return t.previous&&t.previousText&&e.push((0,$.jsx)(C,{variant:"secondary",onClick:t.previous,children:t.previousText},"previous")),t.continueText&&e.push((0,$.jsx)(C,{variant:"primary",onClick:t.continue,children:t.continueText},"continue")),(0,$.jsx)(it,{title:t.title,body:t.body,overlay:!t.hideOverlay,buttons:e.length?e:void 0,onClose:t.showCloseButton?t.cancel:void 0})};var f=require("react"),u=require("@floating-ui/react-dom"),Y=R(require("classnames"));var m=require("react/jsx-runtime"),xt=4,rt=6,Nt=xt+rt,Et=8,Pt=8,Bt=(t,e,o)=>(0,u.autoUpdate)(t,e,o,{animationFrame:!0}),at=t=>{var S,T;let e=(0,f.useRef)(null),o=(0,f.useRef)(null),n=(0,f.useRef)(null),l=I(t.targetElement),{refs:r,middlewareData:p,placement:s,x:O,y:H}=(0,u.useFloating)({placement:t.placement,elements:{reference:l},whileElementsMounted:Bt,middleware:[(0,u.flip)({fallbackPlacements:["top","bottom","left","right"]}),(0,u.shift)({crossAxis:!0,padding:Et}),(0,u.arrow)({element:o,padding:Pt}),(0,u.offset)(Nt)]}),[_,h]=(0,f.useState)(!1);(0,f.useEffect)(()=>{if(_)return;let i=r.floating.current;if(!i)return;let x=()=>{h(!0)};if(!(window.getComputedStyle(i).animationName!=="none")){h(!0);return}return i.addEventListener("animationend",x),()=>{i.removeEventListener("animationend",x)}},[_,r.floating]);let A=(0,f.useMemo)(()=>s.includes("top")?"bottom":s.includes("bottom")?"top":s.includes("left")?"right":"left",[s]);if((0,f.useEffect)(()=>{t.targetElement||L.error("Cannot render Tooltip without target element")},[t.targetElement]),!l)return null;r.floating.current&&(r.floating.current.style.left=`${O}px`,r.floating.current.style.top=`${H}px`);let B=(S=p.arrow)==null?void 0:S.x,F=(T=p.arrow)==null?void 0:T.y;if([o,e].forEach(i=>{i.current&&(i.current.style.left=B!=null?`${B}px`:"",i.current.style.top=F!=null?`${F}px`:"",i.current.style.right="",i.current.style.bottom="",i.current.style[A]=`${-rt}px`)}),n.current){let i=l.getBoundingClientRect();n.current.style.top=`${i.top}px`,n.current.style.left=`${i.left}px`,n.current.style.width=`${i.width}px`,n.current.style.height=`${i.height}px`}return(0,m.jsxs)("div",{className:"flows_tooltip_root",children:[t.overlay?(0,m.jsx)("div",{className:"flows_tooltip_overlay",ref:n}):null,(0,m.jsxs)("div",{className:"flows_tooltip_tooltip",ref:r.setFloating,"data-open":_?"true":"false",children:[(0,m.jsx)(v,{className:"flows_tooltip_title",variant:"title",children:t.title}),(0,m.jsx)(v,{variant:"body",className:"flows_tooltip_body",dangerouslySetInnerHTML:{__html:t.body}}),t.buttons?(0,m.jsx)("div",{className:"flows_tooltip_footer",children:t.buttons}):null,t.onClose?(0,m.jsx)(P,{"aria-label":"Close",className:"flows_tooltip_close",onClick:t.onClose,children:(0,m.jsx)(E,{})}):null,(0,m.jsx)("div",{className:(0,Y.default)("flows_tooltip_arrow","flows_tooltip_arrow-bottom"),ref:o}),(0,m.jsx)("div",{className:(0,Y.default)("flows_tooltip_arrow","flows_tooltip_arrow-top"),ref:e})]})]})};var g=require("react/jsx-runtime"),Ft=t=>{let e=t.previous&&t.previousText&&(0,g.jsx)(C,{variant:"secondary",onClick:t.previous,children:t.previousText}),o=t.continueText&&(0,g.jsx)(C,{variant:"primary",onClick:t.continue,children:t.continueText}),n=o||e?(0,g.jsxs)(g.Fragment,{children:[e!=null?e:(0,g.jsx)("div",{"aria-hidden":!0}),o!=null?o:(0,g.jsx)("div",{"aria-hidden":!0})]}):null;return(0,g.jsx)(at,{title:t.title,body:t.body,targetElement:t.targetElement,placement:t.placement,overlay:!t.hideOverlay,onClose:t.showCloseButton?t.cancel:void 0,buttons:n})};