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

Built-in components for Flows React SDK

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