@flows/react-components - npm Package Compare versions

Comparing version 1.1.0 to 1.2.0

dist/index.js

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

dist/tour.d.ts

@@ -0,4 +1,17 @@
+import { T as TourComponentProps, P as Placement } from './tooltip-BH43qtSr.js';
 import { FC } from 'react';
-import { T as TourComponentProps, P as Placement } from './tooltip-D14GWSJX.js';
 
+type HintProps = TourComponentProps<{
+    title: string;
+    body: string;
+    continueText?: string;
+    previousText?: string;
+    showCloseButton: boolean;
+    targetElement: string;
+    placement?: Placement;
+    offsetX?: number;
+    offsetY?: number;
+}>;
+declare const Hint: FC<HintProps>;
+
 type ModalProps = TourComponentProps<{
@@ -26,2 +39,2 @@ title: string;
 
-export { Modal, type ModalProps, Tooltip, type TooltipProps };
+export { Hint, type HintProps, Modal, type ModalProps, Tooltip, type TooltipProps };

dist/tour.js

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

package.json

 {
   "name": "@flows/react-components",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "Built-in components for Flows React SDK",
@@ -37,3 +37,3 @@ "keywords": [
     "tsup": "^8.4.0",
-    "typescript": "^5.8.2",
+    "typescript": "^5.8.3",
     "@flows/shared": "1.0.0",
@@ -40,0 +40,0 @@ "@flows/styles": "1.0.0"

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

46034

27.26%

Lines of code

219

29.59%

Worsened metrics

Number of medium supply chain risk alerts

1

Infinity%

No dependency changes