UNPKG

@flows/react-components

Version:

Built-in components for Flows React SDK

3 lines (2 loc) 12.5 kB
"use client" import{a as c,b as _,c as p,d,e as I,f as R,g as F,h as O}from"./chunk-L5UHJ6SK.mjs";import{jsx as it}from"react/jsx-runtime";var ot=t=>it(I,{title:t.title,body:t.body,primaryButton:t.primaryButton,secondaryButton:t.secondaryButton,onClose:t.dismissible?t.close:void 0,width:t.width,tour:!1}),wt=ot;import{useCallback as b,useEffect as x,useMemo as dt,useRef as J,useState as V}from"react";import Q from"dompurify";import{jsx as S}from"react/jsx-runtime";function P(t){return S("svg",_(c({height:16,viewBox:"0 0 16 16",width:16,xmlns:"http://www.w3.org/2000/svg",fill:"currentColor"},t),{children:S("path",{d:"M12.78 5.22a.749.749 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.06 0L3.22 6.28a.749.749 0 1 1 1.06-1.06L8 8.939l3.72-3.719a.749.749 0 0 1 1.06 0Z"})}))}import{jsx as H}from"react/jsx-runtime";function D(t){return H("svg",_(c({height:16,viewBox:"0 0 16 16",width:16,xmlns:"http://www.w3.org/2000/svg",fill:"currentColor"},t),{children:H("path",{d:"M4.00467 9.90936C4.47969 9.92404 4.9358 10.091 5.30545 10.384L5.4578 10.5178L5.46756 10.5265C6.29333 11.3419 6.28038 12.6477 5.57303 13.4846L5.57205 13.4836C5.26637 13.8467 4.84929 14.1108 4.45389 14.3039C4.04925 14.5015 3.61374 14.6515 3.2244 14.7629C2.83297 14.8748 2.47214 14.9523 2.20975 15.0021C2.07819 15.0271 1.96974 15.0457 1.89334 15.0578C1.8551 15.0639 1.82398 15.0683 1.80252 15.0715C1.79197 15.073 1.78323 15.0745 1.77713 15.0754C1.77436 15.0758 1.7703 15.0764 1.7703 15.0764H1.76639C1.53476 15.1073 1.30175 15.0287 1.13651 14.8635C0.971325 14.6982 0.892655 14.4652 0.923617 14.2336V14.2297C0.923617 14.2297 0.924208 14.2256 0.924593 14.2228C0.925447 14.2167 0.926954 14.2081 0.928499 14.1974C0.931608 14.1761 0.936144 14.1456 0.942171 14.1076C0.954274 14.0313 0.972854 13.9228 0.997835 13.7912C1.04767 13.5287 1.12506 13.1673 1.23709 12.7756C1.34847 12.3862 1.49842 11.9507 1.69608 11.5461C1.88948 11.1501 2.15347 10.7317 2.51737 10.426C2.93255 10.0763 3.46219 9.89261 4.00467 9.90936ZM7.24979 13.3332V10.3107L5.68924 8.75018H2.66678C2.44443 8.75018 2.23311 8.65134 2.09061 8.48065C1.94833 8.31007 1.88893 8.08496 1.9285 7.86639L1.92948 7.86444V7.86248C1.92948 7.86248 1.92996 7.85829 1.93045 7.85565C1.93149 7.85016 1.93354 7.84239 1.93534 7.83319C1.93893 7.8148 1.94422 7.78896 1.95096 7.75702C1.96448 7.69294 1.98444 7.60246 2.01151 7.49334C2.06543 7.276 2.14805 6.9771 2.26541 6.6535C2.48216 6.05594 2.8822 5.17898 3.5828 4.71014L3.58377 4.70916C3.99623 4.43419 4.47689 4.3224 4.90702 4.28241C5.34364 4.24183 5.78587 4.2703 6.16776 4.31952C6.49492 4.36168 6.79235 4.42332 7.02616 4.47772C7.83659 3.34782 8.8913 2.41097 10.114 1.73846C11.5097 0.970905 13.0789 0.573308 14.6717 0.583188C15.0839 0.585868 15.4167 0.920942 15.4168 1.33319C15.4168 3.21468 14.8889 6.4889 11.5222 8.97869C11.5764 9.21178 11.6385 9.50719 11.6805 9.83221C11.7297 10.2141 11.7581 10.6564 11.7176 11.093C11.6776 11.5231 11.5658 12.0037 11.2908 12.4162L11.2898 12.4172C10.821 13.1178 9.94404 13.5178 9.34647 13.7346C9.02285 13.8519 8.72396 13.9345 8.50662 13.9885C8.39735 14.0156 8.30705 14.0365 8.24295 14.05C8.21095 14.0567 8.18517 14.061 8.16678 14.0646C8.15758 14.0664 8.1498 14.0685 8.14432 14.0695C8.14175 14.07 8.13748 14.0705 8.13748 14.0705L8.13553 14.0715H8.13358C7.91497 14.111 7.68988 14.0517 7.51932 13.9094C7.34863 13.7669 7.24979 13.5555 7.24979 13.3332ZM3.95877 11.4084C3.78547 11.403 3.61572 11.4617 3.48319 11.5734L3.48221 11.5744C3.34634 11.6886 3.19393 11.8968 3.04373 12.2043C2.89768 12.5033 2.77642 12.8488 2.67948 13.1877C2.66228 13.2478 2.64802 13.308 2.6326 13.3664C2.69123 13.3509 2.7519 13.3378 2.81229 13.3205C3.15122 13.2235 3.49663 13.1023 3.79569 12.9562C4.10322 12.806 4.31135 12.6536 4.42557 12.5178L4.42752 12.5158C4.66586 12.2337 4.64014 11.822 4.41483 11.5969C4.29036 11.4812 4.12877 11.4137 3.95877 11.4084ZM10.1609 9.83026C9.70217 10.0789 9.23126 10.3043 8.74979 10.506V12.3517C8.7776 12.3421 8.80651 12.3346 8.83475 12.3244C9.40878 12.1162 9.86586 11.8491 10.0437 11.5832C10.1284 11.4556 10.196 11.2495 10.2234 10.9543C10.2503 10.6648 10.2339 10.3409 10.1931 10.0246C10.1846 9.95836 10.171 9.89361 10.1609 9.83026ZM13.8787 2.11737C12.8142 2.21762 11.7784 2.53498 10.8367 3.05291C9.66522 3.69722 8.67847 4.6313 7.96952 5.76483L7.96463 5.77069C7.54695 6.42306 7.18496 7.1093 6.88162 7.82147L8.17948 9.11932C8.9013 8.81632 9.59725 8.45463 10.2596 8.03631C12.9928 6.19872 13.7245 3.81048 13.8787 2.11737ZM5.04569 5.77655C4.74999 5.80406 4.54329 5.87135 4.4158 5.95623L4.41678 5.95721C4.15104 6.13531 3.88367 6.59151 3.67557 7.16522C3.66529 7.19356 3.65692 7.22227 3.64725 7.25018H5.49588C5.70028 6.76879 5.92833 6.29797 6.18045 5.84002C6.11394 5.82931 6.04609 5.81581 5.97635 5.80682C5.6599 5.76604 5.33532 5.74963 5.04569 5.77655Z"})}))}import{useEffect as nt,useRef as st}from"react";function A(t){let o=st(t);return nt(()=>{o.current=t},[t]),o.current}import{useCallback as T,useEffect as lt,useRef as at}from"react";import Z from"dompurify";import{jsx as z}from"react/jsx-runtime";function G(t){return z("svg",_(c({height:16,viewBox:"0 0 16 16",width:16,xmlns:"http://www.w3.org/2000/svg",fill:"currentColor"},t),{children:z("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M12.03 5.22032C12.1705 5.36094 12.2494 5.55157 12.2494 5.75032C12.2494 5.94907 12.1705 6.13969 12.03 6.28032L7.53003 10.7803C7.38941 10.9208 7.19878 10.9997 7.00003 10.9997C6.80128 10.9997 6.61066 10.9208 6.47003 10.7803L4.22003 8.53032C4.14634 8.46165 4.08724 8.37885 4.04625 8.28685C4.00526 8.19486 3.98322 8.09554 3.98144 7.99484C3.97966 7.89414 3.99819 7.79411 4.03591 7.70072C4.07363 7.60733 4.12977 7.5225 4.20099 7.45128C4.27221 7.38006 4.35705 7.32391 4.45043 7.28619C4.54382 7.24847 4.64385 7.22995 4.74455 7.23172C4.84526 7.2335 4.94457 7.25554 5.03657 7.29654C5.12857 7.33753 5.21137 7.39663 5.28003 7.47032L7.00003 9.19032L10.97 5.22032C11.1107 5.07987 11.3013 5.00098 11.5 5.00098C11.6988 5.00098 11.8894 5.07987 12.03 5.22032Z"})}))}import{jsx as a,jsxs as B}from"react/jsx-runtime";var Y=t=>{var i;return t.triggers.length===1&&((i=t.triggers.at(0))==null?void 0:i.type)==="manual"},$=t=>{var u;let{onNonManualButtonClick:o,toggleExpanded:i}=t,s=T(()=>{i(t.index)},[t.index,i]),r=at(null);lt(()=>{r.current&&r.current.style.setProperty("--flows-content-height",`${r.current.scrollHeight}px`)},[]);let m=T(()=>{Y(t.completed)||o()},[o,t.completed]),h=T(()=>{Y(t.completed)&&t.completed.setValue(!0),m()},[m,t.completed]);return B("div",{className:"flows_basicsV2_floating_checklist_item","data-expanded":t.expanded?"true":"false",children:[B("button",{type:"button",className:"flows_basicsV2_floating_checklist_item_expand_button",onClick:s,"data-expanded":t.expanded?"true":"false",children:[a(rt,{completed:t.completed.value}),a("span",{className:"flows_basicsV2_floating_checklist_item_title",dangerouslySetInnerHTML:{__html:Z.sanitize(t.title,{FORCE_BODY:!0,ADD_ATTR:["target"]})}}),a(P,{className:"flows_basicsV2_floating_checklist_item_chevron","data-expanded":t.expanded?"true":"false","aria-hidden":"true"})]}),a("div",{className:"flows_basicsV2_floating_checklist_item_content",ref:r,"data-expanded":t.expanded?"true":"false",children:B("div",{className:"flows_basicsV2_floating_checklist_item_content_inner",children:[t.description?a(d,{variant:"body",dangerouslySetInnerHTML:{__html:Z.sanitize(t.description,{FORCE_BODY:!0,ADD_ATTR:["target"]})}}):null,((u=t.primaryButton)!=null?u:t.secondaryButton)?B("div",{className:"flows_basicsV2_floating_checklist_item_buttons",children:[t.primaryButton?a(p,{onClick:h,action:t.primaryButton,variant:"primary",size:"small"}):null,t.secondaryButton?a(p,{action:t.secondaryButton,onClick:o,variant:"secondary",size:"small"}):null]}):null]})})]})},rt=({completed:t})=>t?a("div",{className:"flows_basicsV2_floating_checklist_item_indicator flows_basicsV2_floating_checklist_item_indicator_completed",children:a(G,{})}):a("div",{className:"flows_basicsV2_floating_checklist_item_indicator"});import{clsx as ct}from"clsx";import{jsx as X}from"react/jsx-runtime";var K=({max:t,value:o,className:i})=>{let s=o/t*100||0;return X("div",{className:ct("flows_basicsV2_progress",i),"aria-valuemin":0,"aria-valuemax":t,"aria-valuenow":o,role:"progressbar",children:X("div",{className:"flows_basicsV2_progress_indicator",style:{width:`${s}%`}})})};import{jsx as mt,jsxs as U}from"react/jsx-runtime";var q=t=>U("div",{className:"flows_basicsV2_floating_checklist_progress",children:[U("p",{className:"flows_basicsV2_floating_checklist_progress_text",children:[t.completedItems," / ",t.totalItems]}),mt(K,{max:t.totalItems,value:t.completedItems})]});import{jsx as n,jsxs as g}from"react/jsx-runtime";var ut=300,Ct=t=>{let o=t.position||"bottom-right",i=`floating-checklist-open-${t.__flows.id}`,[s,r]=V(!1),[m,h]=V(!1),[u,L]=V(null),W=b(e=>{L(l=>l===e?null:e)},[]),[v,j]=V(!0);x(()=>{if(!v)return;j(!1);let e=window.sessionStorage.getItem(i);r(e!==null?e==="true":t.defaultOpen)},[v,t.defaultOpen,i]),x(()=>{v||window.sessionStorage.setItem(i,String(s))},[s,v,i]);let C=A(t.items);x(()=>{C!==void 0&&t.items.forEach((e,l)=>{let y=C.at(l);y&&!y.completed.value&&e.completed.value&&u===l&&L(null)})},[u,C,t.items]);let M=dt(()=>t.items.filter(e=>e.completed.value),[t.items]),N=t.items.length===M.length,f=J(null),k=b(()=>{var e;window.clearTimeout((e=f.current)!=null?e:void 0),f.current=null,h(!0),f.current=window.setTimeout(()=>{r(!1),h(!1),f.current=null},ut)},[]),w=b(()=>{var e;window.clearTimeout((e=f.current)!=null?e:void 0),f.current=null,h(!1),r(!0)},[]),tt=b(()=>{s&&!m?k():w()},[m,s,k,w]),E=J(null),et=b(()=>{var e;t.hideOnClick&&(k(),(e=E.current)==null||e.focus())},[k,t.hideOnClick]);return x(()=>{!t.openOnItemCompleted||C===void 0||t.items.forEach((e,l)=>{let y=C.at(l);y&&!y.completed.value&&e.completed.value&&w()})},[w,C,t.items,t.openOnItemCompleted]),g("div",{className:"flows_basicsV2_floating_checklist","data-position":o,children:[g("button",{type:"button",className:"flows_basicsV2_floating_checklist_widget_button",onClick:tt,ref:E,children:[n(D,{"aria-hidden":"true"}),t.widgetTitle,n(P,{className:"flows_basicsV2_floating_checklist_widget_button_chevron","data-open":s&&!m?"true":"false","aria-hidden":"true"})]}),s?g("div",{className:"flows_basicsV2_floating_checklist_popover","data-open":m?"false":"true",children:[g("div",{className:"flows_basicsV2_floating_checklist_header",children:[t.popupTitle?n(d,{variant:"title",className:"flows_basicsV2_floating_checklist_title",dangerouslySetInnerHTML:{__html:Q.sanitize(t.popupTitle,{FORCE_BODY:!0,ADD_ATTR:["target"]})}}):null,t.popupDescription?n(d,{variant:"body",dangerouslySetInnerHTML:{__html:Q.sanitize(t.popupDescription,{FORCE_BODY:!0,ADD_ATTR:["target"]})}}):null]}),n(q,{completedItems:M.length,totalItems:t.items.length}),!N&&g("div",{className:"flows_basicsV2_floating_checklist_items",children:[t.items.map((e,l)=>n($,c({index:l,expanded:u===l,toggleExpanded:W,onNonManualButtonClick:et},e),l)),t.skipButton?n("div",{className:"flows_basicsV2_floating_checklist_skip_button",children:n(p,{variant:"text",action:t.skipButton})}):null]}),N?n("div",{className:"flows_basicsV2_floating_checklist_completed",children:g("div",{className:"flows_basicsV2_floating_checklist_completed_inner",children:[n(d,{variant:"title",className:"flows_basicsV2_floating_checklist_completed_title",children:t.completedTitle}),n(d,{variant:"body",className:"flows_basicsV2_floating_checklist_completed_description",children:t.completedDescription}),t.completedButton?n(p,{variant:"primary",size:"small",action:t.completedButton,className:"flows_basicsV2_floating_checklist_completed_button"}):null]})}):null]}):null]})},le=Ct;import{jsx as _t}from"react/jsx-runtime";var ft=t=>_t(R,{title:t.title,body:t.body,targetElement:t.targetElement,offsetX:t.offsetX,offsetY:t.offsetY,placement:t.placement,onClose:t.dismissible?t.close:void 0,primaryButton:t.primaryButton,secondaryButton:t.secondaryButton}),de=ft;import{jsx as gt}from"react/jsx-runtime";var pt=t=>gt(F,{title:t.title,body:t.body,primaryButton:t.primaryButton,secondaryButton:t.secondaryButton,overlay:!t.hideOverlay,onClose:t.dismissible?t.close:void 0,position:t.position,size:t.size}),_e=pt;import{jsx as yt}from"react/jsx-runtime";var ht=t=>yt(O,{title:t.title,body:t.body,targetElement:t.targetElement,placement:t.placement,overlay:!t.hideOverlay,onClose:t.dismissible?t.close:void 0,primaryButton:t.primaryButton,secondaryButton:t.secondaryButton}),ye=ht;export{wt as BasicsV2Card,le as BasicsV2FloatingChecklist,de as BasicsV2Hint,_e as BasicsV2Modal,ye as BasicsV2Tooltip};