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