userflow.js-self-hosted 0.1.1006519 → 0.1.1006534
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/BannerApp.js +1 -2
- package/BubbleToolbar.js +1 -2
- package/BuilderBar.js +1 -2
- package/ChecklistApp.js +1 -2
- package/ChecklistUI.js +1 -2
- package/ElementSelectionApp.js +1 -2
- package/FlowApp.js +1 -2
- package/FlowChrome.js +1 -2
- package/LauncherApp.js +1 -2
- package/NotificationsApp.js +1 -2
- package/ResourceCenterApp.js +1 -2
- package/ResourceCenterAssistantChat.js +1 -2
- package/StartConditionTestingApp.js +1 -2
- package/TrackerTestingApp.js +1 -2
- package/Trigger.js +1 -2
- package/bubble-frame.styl.js +1 -2
- package/client-context.js +1 -2
- package/flow-condition-types.js +1 -2
- package/flow-host.styl.js +1 -2
- package/hash.txt +1 -1
- package/logomark.js +1 -2
- package/package.json +1 -1
- package/stylesheets.js +1 -2
- package/ui.js +1 -2
- package/use-element-rect.js +1 -2
- package/use-selector-element-monitoring.js +1 -2
- package/use-window-resize.js +1 -2
- package/userflow.js +1 -2
- package/vendor.babel.runtime.js +1 -2
- package/vendor.date-fns.js +1 -2
- package/vendor.dompurify.js +1 -2
- package/vendor.fortawesome.pro-light-svg-icons.js +1 -2
- package/vendor.fortawesome.pro-regular-svg-icons.js +1 -2
- package/vendor.fortawesome.pro-solid-svg-icons.js +1 -2
- package/vendor.html-parse-stringify2.js +1 -2
- package/vendor.i18next.js +1 -2
- package/vendor.is-hotkey.js +1 -2
- package/vendor.marked.js +1 -2
- package/vendor.obj-str.js +1 -2
- package/vendor.object-assign.js +1 -2
- package/vendor.phoenix.js +1 -2
- package/vendor.react-dom.js +2 -3
- package/vendor.react-i18next.js +1 -2
- package/vendor.react.js +2 -3
- package/vendor.scheduler.js +2 -3
- package/vendor.uuid.js +1 -2
- package/vendor.void-elements.js +1 -2
package/BannerApp.js
CHANGED
|
@@ -1,2 +1 @@
|
|
|
1
|
-
|
|
2
|
-
//# sourceMappingURL=BannerApp.js.map
|
|
1
|
+
import{r as e}from"./vendor.react.js";import{I as t,E as s}from"./userflow.js";import{u as o,i as r}from"./client-context.js";import{o as n}from"./vendor.obj-str.js";import{u as a,a as l,D as i}from"./stylesheets.js";import{a as m}from"./vendor.fortawesome.pro-regular-svg-icons.js";import{S as d,b as c,R as u,B as f}from"./bubble-frame.styl.js";import{f as b,b as E}from"./flow-condition-types.js";import{w as j,f as p}from"./flow-host.styl.js";import{u as g}from"./use-selector-element-monitoring.js";import{r as w}from"./vendor.react-dom.js";import{F as y}from"./use-window-resize.js";import{u as v}from"./use-element-rect.js";import"./vendor.object-assign.js";import"./vendor.phoenix.js";import"./vendor.uuid.js";import"./vendor.i18next.js";import"./vendor.react-i18next.js";import"./vendor.babel.runtime.js";import"./vendor.fortawesome.pro-solid-svg-icons.js";import"./vendor.date-fns.js";import"./vendor.scheduler.js";const h=({session:h})=>{const L=o(),{version:S}=h,T=S.banner,k=a(S.theme),N=h.locale?h.locale.standardLocaleId:h.version.theme.languageId;e.useEffect((()=>{r.changeLanguage(N)}),[N]);const M=e.useMemo((()=>document.createElement("div")),[]),[R,x]=e.useState(!1),{loaded:A}=l(window,p,k),[B,_]=e.useState(!1),C=A&&B,[F,I]=e.useState(0),D=e.useCallback((()=>{_(!1),I((e=>e+1))}),[]),O=![t.BODY_FIRST,t.BODY_LAST].includes(T.embedMode),[$,W]=e.useState(null),Y=e.useCallback((({targetEl:e})=>{W(e)}),[]),z=e.useCallback((()=>{O&&console.warn(`Userflow.js: Could not find embed element for banner "${h.flow.name||h.flow.id}"`),W(null)}),[O,h.flow.name,h.flow.id]);g({selector:T.embedSelector,targetMoved:Y,targetLost:z});const P=e.useCallback((()=>{M.parentElement?.removeChild(M),x(!1),D()}),[M,D]);e.useLayoutEffect((()=>{let e=null,s=null;if(O){if(!$)return void P();if(T.overlay||T.sticky){s=T.embedMode===t.ELEMENT_BEFORE||T.embedMode===t.ELEMENT_AFTER?$.parentElement:$;"static"===window.getComputedStyle(s).position&&(e=s.style.position,s.style.position="relative")}}switch(T.embedMode){case t.BODY_FIRST:document.body.insertAdjacentElement("afterbegin",M);break;case t.BODY_LAST:document.body.insertAdjacentElement("beforeend",M);break;case t.ELEMENT_FIRST:$.insertAdjacentElement("afterbegin",M);break;case t.ELEMENT_LAST:$.insertAdjacentElement("beforeend",M);break;case t.ELEMENT_BEFORE:$.insertAdjacentElement("beforebegin",M);break;case t.ELEMENT_AFTER:$.insertAdjacentElement("afterend",M)}return x(!0),D(),()=>{s&&null!=e&&(s.style.position=e)}}),[P,M,O,$,T.overlay,T.sticky,T.embedMode,D]),e.useLayoutEffect((()=>P),[P]);const U=n({"userflowjs-banner":!0,[`userflowjs-banner--animate-${String(T.animate)}`]:!0,[`userflowjs-banner--embed-mode-${T.embedMode}`]:!0,[`userflowjs-banner--sticky-${String(T.sticky)}`]:!0,[`userflowjs-banner--overlay-${T.overlay}`]:!0});e.useLayoutEffect((()=>{M.className=U||""}),[M,U]);const q=T.zIndex||j(0);e.useLayoutEffect((()=>{M.style.zIndex=null==q?"":String(q),M.style.position=C?"":"absolute",M.style.visibility=C?"":"hidden"}),[M,q,C]);const{height:G,setEl:H}=v();return e.useLayoutEffect((()=>{M.style.setProperty("--userflowjs-banner-height",b(G+(T.marginTop||0)+(T.marginBottom||0))||"")}),[M,G,T.marginTop,T.marginBottom]),R?w.createPortal(e.createElement(d.Provider,{value:h},e.createElement(y,{key:F,className:"userflowjs-banner-frame",style:{maxWidth:b(T.maxWidth),marginTop:b(T.marginTop),marginRight:b(T.marginRight),marginBottom:b(T.marginBottom),marginLeft:b(T.marginLeft),borderRadius:b(T.borderRadius)},stylesheet:c,theme:k,onStylesheetsLoad:_,title:"Banner"},e.createElement("div",{ref:H,className:n({"userflowjs-banner-root":!0,[`userflowjs-banner-root--content-layout-${T.contentLayout}`]:!0,"userflowjs-theme-root":!0}),dir:r.dir()},e.createElement("div",{className:"userflowjs-banner-start-spacer"}),e.createElement("div",{className:"userflowjs-banner-inner",style:{maxWidth:b(T.maxContentWidth)}},e.createElement("div",{className:"userflowjs-banner-content"},e.createElement(u,{doc:T.content,lookupAttribute:E(h.data)})),T.buttons.length>0&&e.createElement("div",{className:"userflowjs-banner-buttons"},T.buttons.map((t=>e.createElement(f,{key:t.id,button:t}))))),S.closeDisabled?e.createElement("div",{className:"userflowjs-banner-start-spacer"}):e.createElement("button",{"data-testid":"userflow-banner-dismiss",className:"userflowjs-banner-close",onClick:()=>L.endFlow(h,{endReason:s.USER_CLOSED})},e.createElement(i,{icon:m}))))),M):null};export default h;export{h as BannerApp};
|
package/BubbleToolbar.js
CHANGED
|
@@ -1,2 +1 @@
|
|
|
1
|
-
|
|
2
|
-
//# sourceMappingURL=BubbleToolbar.js.map
|
|
1
|
+
import{A as e,B as t,d as o,a}from"./vendor.fortawesome.pro-regular-svg-icons.js";import{r as s}from"./vendor.react.js";import{D as r}from"./stylesheets.js";import{u as l}from"./vendor.react-i18next.js";const n=({draftMode:n,muted:i,toggleMuted:c,close:m,minimize:b})=>{const{t:u}=l();return s.createElement("div",{className:"userflowjs-bubble-toolbar"},n&&s.createElement("div",{className:"userflowjs-bubble-draft"},"string"==typeof n?n:"Preview"),c&&s.createElement("button",{className:"userflowjs-bubble-toolbar-button",onClick:c,"aria-label":i?"Unmute":"Mute"},i?s.createElement(r,{icon:e}):s.createElement(r,{icon:t})),b&&s.createElement("button",{"data-testid":"minimize-button",className:"userflowjs-bubble-toolbar-button",onClick:b,"aria-label":"Minimize checklist"},s.createElement(r,{icon:o})),m&&s.createElement("button",{"data-testid":"close-button",className:"userflowjs-bubble-toolbar-button",onClick:m,"aria-label":u("menu.close")},s.createElement(r,{icon:a})))};export{n as B};
|
package/BuilderBar.js
CHANGED
|
@@ -1,2 +1 @@
|
|
|
1
|
-
|
|
2
|
-
//# sourceMappingURL=BuilderBar.js.map
|
|
1
|
+
import{r as e}from"./vendor.react.js";import{u as t,F as r}from"./use-window-resize.js";import{S as s}from"./logomark.js";import{o}from"./vendor.obj-str.js";import{f as a,a as n}from"./vendor.fortawesome.pro-light-svg-icons.js";import{H as l}from"./userflow.js";import{a as i,D as m}from"./stylesheets.js";var u=new URL("builder-ui-host.css",import.meta.url).href,c=new URL("builder-ui-frame.css",import.meta.url).href;const d=e.forwardRef((({onReadyChange:d,children:f,buttons:p},b)=>{const{loaded:h}=i(window,u),[v,E]=e.useState(!1),g=h&&v,w=e.useRef(!1);e.useEffect((()=>{g&&!w.current&&d&&(w.current=!0,d(!0))}),[g,d]);const j=e.useRef(null),[y,R]=e.useState(null),[k,N]=e.useState((()=>"top"===l.getItem("builderBarPos")?"top":"bottom")),S=e.useCallback((e=>{N(e),l.setItem("builderBarPos",e)}),[]),B=e.useRef(0),C=e.useCallback((()=>{const e=j.current;if(!e||!y||!g)return;const t=y.clientHeight;t!==B.current&&(B.current=t,e.style.setProperty("height",t+"px","important"))}),[g,y]);return e.useLayoutEffect((()=>{C()})),t(C),e.useImperativeHandle(b,(()=>({getFrame:()=>j.current,getRootEl:()=>y})),[y]),e.createElement(e.Fragment,null,e.createElement(r,{className:o({"userflowjs-builder-bar":!0,"userflowjs-builder-bar--top":"top"===k}),style:{visibility:g?void 0:"hidden",animation:g?void 0:"none"},elRef:j,stylesheet:c,onStylesheetsLoad:E,title:"Builder bar"},g&&e.createElement("div",{className:"root",ref:R},e.createElement("div",{className:"logomark"},e.createElement(s,null)),e.createElement("div",{className:"main"},f),e.createElement("div",{className:"buttons"},p,e.createElement("button",{key:k,className:"btn btn--square btn--plain-on-dark",onClick:()=>S("top"===k?"bottom":"top")},e.createElement(m,{icon:"top"===k?a:n,size:20}))))))}));export{d as B};
|
package/ChecklistApp.js
CHANGED
|
@@ -1,2 +1 @@
|
|
|
1
|
-
|
|
2
|
-
//# sourceMappingURL=ChecklistApp.js.map
|
|
1
|
+
import{r as e}from"./vendor.react.js";import{N as t,D as s,L as o,j as i}from"./userflow.js";import{F as n}from"./FlowChrome.js";import{i as r,u as c}from"./client-context.js";import{f as l,w as a,C as u,S as m}from"./flow-host.styl.js";import{a as d,D as h,u as p}from"./stylesheets.js";import{F as f}from"./use-window-resize.js";import{o as k}from"./vendor.obj-str.js";import{z as b}from"./flow-condition-types.js";import{C as v}from"./vendor.fortawesome.pro-regular-svg-icons.js";import{u as j}from"./vendor.react-i18next.js";import{C as E}from"./ChecklistUI.js";import{B as x}from"./BubbleToolbar.js";import"./vendor.object-assign.js";import"./vendor.phoenix.js";import"./vendor.uuid.js";import"./bubble-frame.styl.js";import"./vendor.fortawesome.pro-solid-svg-icons.js";import"./logomark.js";import"./use-selector-element-monitoring.js";import"./vendor.i18next.js";import"./vendor.react-dom.js";import"./vendor.scheduler.js";import"./vendor.date-fns.js";import"./vendor.babel.runtime.js";var w=new URL("checklist-launcher-frame.css",import.meta.url).href;const g=({position:s,theme:o,onClick:i,onVisibleChange:n,buttonRef:r,text:c,uncompletedCount:m})=>{const p=s||"absolute",{i18n:E}=j(),x=E.dir(),{loaded:g}=d(window,l,o),[y,L]=e.useState(!1),C=g&&y;e.useEffect((()=>{n&&n(C)}),[n,C]);const F=e.useRef(null),I=e.useRef(0),[A,T]=e.useState(null);e.useLayoutEffect((()=>{const e=F.current;if(!e||!A)return;const t=A.clientWidth;t!==I.current&&(I.current=t,e.style.setProperty("width",b(t)+"px","important"),e.style.setProperty("height",o.checklistLauncherHeight+"px","important"))}));const R=o.checklistLauncherPlacement,N=R===t.TOP_LEFT||R===t.TOP_RIGHT,S=R===t.TOP_LEFT||R===t.BOTTOM_LEFT,P={zIndex:"fixed"===p?null!=o.checklistZIndex?o.checklistZIndex:a(u):1,top:N?o.checklistLauncherY+"px":void 0,bottom:N?void 0:o.checklistLauncherY+"px",["ltr"===x?"left":"right"]:S?o.checklistLauncherX+"px":void 0,["ltr"===x?"right":"left"]:S?void 0:o.checklistLauncherX+"px",height:o.checklistLauncherHeight+"px",borderRadius:o.checklistLauncherBorderRadius+"px",position:C?void 0:"absolute",visibility:C?void 0:"hidden",animation:C?void 0:"none"};return e.createElement(f,{elRef:F,testId:"checklist-launcher-app",className:k({"userflowjs-checklist-launcher":!0,[`userflowjs-checklist-launcher--position-${p}`]:!0}),style:P,stylesheet:w,theme:o,onStylesheetsLoad:L,title:"Checklist launcher"},e.createElement("button",{ref:r,className:"userflowjs-checklist-launcher-frame-root",onClick:i},e.createElement("div",{ref:T,className:"userflowjs-checklist-launcher-content"},e.createElement("div",{className:"userflowjs-checklist-launcher-text"},c||"Get Started"),e.createElement("div",{"data-testid":"checklist-launcher-uncompleted-count",className:"userflowjs-checklist-launcher-uncompleted-count"},0===m?e.createElement(h,{icon:v}):m,e.createElement("div",{className:"userflowjs-a11y-only"},"uncompleted tasks")))))},y=({session:t,checklistExpanded:s})=>{const{version:o}=t,i=o.checklist,n=t.locale?t.locale.standardLocaleId:t.version.theme.languageId;e.useEffect((()=>{r.changeLanguage(n)}),[n]);const[c,l]=e.useState(!1);return s?e.createElement(L,{session:t,initialAutoFocus:c,setInitialAutoFocus:l}):i.launcherEnabled?e.createElement(C,{session:t,initialAutoFocus:c,setInitialAutoFocus:l}):null},L=({session:t,initialAutoFocus:i,setInitialAutoFocus:r})=>{const l=c(),[a,u]=e.useState(null),{version:d}=t,h=d.checklist,f=p(d.theme),k=e.useMemo((()=>({...f,avatarType:s.NONE,bubblePlacement:f.checklistPlacement,bubbleX:f.checklistX,bubbleY:f.checklistY,bubbleWidth:f.checklistWidth})),[f]);return e.useEffect((()=>{const e=a?.ownerDocument.defaultView;if(!e)return;const t=e=>{"Escape"===e.key&&(r(!0),l.hideChecklist())};return e.addEventListener("keydown",t),()=>e.removeEventListener("keydown",t)}),[a,r,l]),e.createElement(m,null,e.createElement(n,{company:t.flow.company,theme:k,position:"fixed",stepAppearance:o.BUBBLE,zIndex:f.checklistZIndex,autoHide3pEnabled:!0,backgroundImageUrl:h.backgroundAsset&&h.backgroundAsset.assetUrl,bubbleFrameRootRef:u},e.createElement("div",{role:"dialog","aria-label":"Checklist"},e.createElement(E,{session:t,initialAutoFocus:i}),e.createElement(x,{draftMode:t.draftMode,minimize:e=>{r(0===e.detail),l.hideChecklist()}}))))},C=({session:t,initialAutoFocus:s,setInitialAutoFocus:o})=>{const n=c(),[r,l]=e.useState(!1),[a,u]=e.useState(null),{version:m}=t,d=m.checklist,h=p(m.theme);return e.useEffect((()=>{r&&a&&s&&a.focus()}),[n,a,r,s]),e.createElement(g,{position:"fixed",theme:h,onClick:e=>{o(0===e.detail),n.showChecklist()},onVisibleChange:l,buttonRef:u,text:d.launcherText,uncompletedCount:i(t)})};export default y;export{y as ChecklistApp};
|
package/ChecklistUI.js
CHANGED
|
@@ -1,2 +1 @@
|
|
|
1
|
-
|
|
2
|
-
//# sourceMappingURL=ChecklistUI.js.map
|
|
1
|
+
import{r as e}from"./vendor.react.js";import{E as t,H as s}from"./userflow.js";import{u as o}from"./client-context.js";import{u as l}from"./vendor.react-i18next.js";import{o as n}from"./vendor.obj-str.js";import{D as c}from"./stylesheets.js";import{f as a,l as r}from"./vendor.fortawesome.pro-solid-svg-icons.js";import{h as i,a as u,r as b,R as m}from"./bubble-frame.styl.js";import{b as d}from"./flow-condition-types.js";import{b as f,e as k}from"./vendor.fortawesome.pro-regular-svg-icons.js";const p=e.forwardRef((({elProps:t,onClick:s,onCheckmarkClick:o,completed:l,disabled:i,name:u,text:b,active:m,htmlAttributes:d,children:f},k)=>{const p=e.useRef(l);return e.createElement("button",{...t,ref:k,"data-testid":"bubble-task",tabIndex:s?0:-1,className:n({"userflowjs-bubble-task":!0,"userflowjs-bubble-task--completed":!!l,"userflowjs-bubble-task--just-completed":!p.current&&!!l,"userflowjs-bubble-task--disabled":!l&&!!i,"userflowjs-bubble-task--clickable":!!s,"userflowjs-bubble-task--active":!!m}),onClick:s,...d},e.createElement("div",{className:"userflowjs-bubble-task__checkmark",onClick:o},l&&e.createElement(c,{icon:a})),e.createElement("div",{className:"userflowjs-bubble-task__content"},e.createElement("div",{className:"userflowjs-bubble-task__name"},u),e.createElement("div",{className:"userflowjs-bubble-task__text"},b)),e.createElement("div",{className:"userflowjs-bubble-task__arrow"},!l&&e.createElement("div",{className:"userflowjs-rtl-mirrored"},e.createElement(c,{icon:r}))),f)})),w=({task:t,previousTasksCompleted:s})=>{const l=o(),{session:n}=F(),c=n.version.checklist,[a,r]=e.useState((()=>l.taskIsUnacked(t.cvid)));e.useEffect((()=>{if(!a)return;const e=window.setTimeout((()=>r(!1)),500);return()=>window.clearTimeout(e)}),[a]);const b=n.taskCompletions.some((({taskCvid:e})=>e===t.cvid)),m=!a&&b;e.useEffect((()=>{m&&l.ackCompletedTask(t.cvid)}),[l,m,t.cvid]);const f=c.completeInOrder&&!s,k=f||0===t.actions.length&&m?void 0:()=>{l.send({kind:"ClickChecklistTask",sessionId:n.id,taskCvid:t.cvid},{batch:!0}),t.actions.length>0&&(m||!t.completesOnClick)&&l.hideChecklist(),i(l,n,t.actions)};return e.createElement(p,{onClick:k,name:e.createElement(u,{doc:t.name,lookupAttribute:d(n.data)}),text:e.createElement(u,{doc:t.text,lookupAttribute:d(n.data)}),completed:m,disabled:f})},E=({completedCount:t,taskCount:s})=>{const o=0===s?0:Math.min(100,Math.round(t/s*100));return e.createElement("div",{className:"userflowjs-bubble-checklist-progress"},e.createElement("div",{className:"userflowjs-bubble-checklist-progress-bg"},e.createElement("div",{className:"userflowjs-bubble-checklist-progress-text"},o,"%")),e.createElement("div",{className:"userflowjs-bubble-checklist-progress-fill",style:{width:`${o}%`}},e.createElement("div",{className:"userflowjs-bubble-checklist-progress-text"},o,"%")))},v=()=>{const{t:a}=l(),r=o(),i=F(),{session:u}=i,{version:p}=u,v=p.checklist,{dispatch:j}=y(),C=u.taskCompletions.length,h=v.tasks.length,N=C===h;let x=!0,S=v.tasks,g=[],R=i.currentSectionName,_=!1;if(v.sectionsEnabled){let e=null;const t=Array.from(v.tasks).sort(((e,t)=>e.sectionName.localeCompare(t.sectionName)));for(const s of t)s.sectionName!==e&&(g.push(s.sectionName),e=s.sectionName);R&&g.includes(R)||(R=g[0]),S=t.filter((e=>e.sectionName===R)),_=S.some((e=>{const t=u.taskCompletions.some((({taskCvid:t})=>t===e.cvid));return e.blocksNextSection&&!t}))}const T=null==R?-1:g.indexOf(R),q=e=>{const t=T+e;if(t>=0&&t<=g.length-1){const e=g[t];s.setItem("currentChecklistSectionName:"+u.id,e),j({kind:"setCurrentSection",sectionName:e})}};return e.createElement(e.Fragment,null,!b(v.content)&&e.createElement("div",{className:"userflowjs-bubble-content"},e.createElement(m,{doc:v.content,lookupAttribute:d(u.data)})),e.createElement(E,{completedCount:C,taskCount:h}),v.sectionsEnabled&&e.createElement("div",{className:"userflowjs-bubble-section-name"},R||"First section"),e.createElement("div",{className:"userflowjs-bubble-tasks"},S.map((t=>{const s=x;return u.taskCompletions.some((({taskCvid:e})=>e===t.cvid))||(x=!1),e.createElement(w,{key:t.id,task:t,previousTasksCompleted:s})}))),v.sectionsEnabled&&e.createElement("div",{className:"userflowjs-bubble-section-buttons"},e.createElement("button",{className:"userflowjs-bubble-section-button",onClick:()=>q(-1),disabled:T<=0},e.createElement(c,{icon:f}),e.createElement("span",null,a("checklist.previousSection"))),e.createElement("button",{className:"userflowjs-bubble-section-button",onClick:()=>q(1),disabled:T>=g.length-1||_},e.createElement("span",null,a("checklist.nextSection")),e.createElement(c,{icon:k}))),!p.closeDisabled&&e.createElement("div",{className:"userflowjs-bubble-dismiss-row"},e.createElement("button",{className:n({"userflowjs-bubble-dismiss-button":!0,"userflowjs-bubble-dismiss-button--completed":N}),onClick:()=>N?r.endFlow(u,{endReason:t.USER_CLOSED}):j({kind:"showClose"})},a("checklistDismiss.button"))))},j=()=>{const{t:s}=l(),n=o(),{dispatch:c}=y(),{session:a}=F();return e.createElement("div",{role:"alert"},e.createElement("div",{className:"userflowjs-bubble-content"},e.createElement("p",null,e.createElement("b",null,s("checklistDismiss.title")))),e.createElement("div",{className:"userflowjs-bubble-buttons"},e.createElement("button",{className:"userflowjs-bubble-button userflowjs-bubble-button--primary",onClick:()=>n.endFlow(a,{endReason:t.USER_CLOSED})},e.createElement("div",{className:"userflowjs-bubble-button-text",role:"presentation"},s("checklistDismiss.yes"))),e.createElement("button",{className:"userflowjs-bubble-button userflowjs-bubble-button--default",onClick:()=>c({kind:"showFlow"})},e.createElement("div",{className:"userflowjs-bubble-button-text",role:"presentation"},s("checklistDismiss.cancel")))))};function C(e){const t=e?.querySelector(".userflowjs-bubble-task--clickable:not(.userflowjs-bubble-task--completed)")||e?.querySelector(".userflowjs-bubble-task--clickable")||e?.querySelector('button:not([tabIndex="-1"])');t&&"function"==typeof t.focus&&t.focus()}const h=({session:t,initialAutoFocus:l})=>{const n=o(),c=e.useRef(null),[a,r]=e.useReducer(x,void 0,(()=>({...N,session:t,currentSectionName:s.getItem("currentChecklistSectionName:"+t.id),autoFocusRequested:!!l}))),{session:i,contentType:u}=a;e.useEffect((()=>{i!==t&&r({kind:"updateSession",session:t})}),[i,t]);const b=e.useMemo((()=>({dispatch:r})),[r]);return e.useEffect((()=>{if(!a.autoFocusRequested)return;const e=c.current;e&&C(e),r({kind:"autoFocused"})}),[n,a.autoFocusRequested]),e.createElement(S.Provider,{value:b},e.createElement(g.Provider,{value:a},e.createElement("div",{ref:c},"close"===u?e.createElement(j,null):e.createElement(v,null))))},N={contentType:"flow"};function x(e,t){switch(t.kind){case"updateSession":return{...e,session:t.session};case"showFlow":return{...e,contentType:"flow",autoFocusRequested:!0};case"showClose":return{...e,contentType:"close",autoFocusRequested:!0};case"setCurrentSection":return{...e,currentSectionName:t.sectionName};case"autoFocused":return{...e,autoFocusRequested:!1}}}const S=e.createContext(null),g=e.createContext(null);function y(){return e.useContext(S)}function F(){return e.useContext(g)}export{h as C,C as f};
|
package/ElementSelectionApp.js
CHANGED
|
@@ -1,2 +1 @@
|
|
|
1
|
-
|
|
2
|
-
//# sourceMappingURL=ElementSelectionApp.js.map
|
|
1
|
+
import{r as e}from"./vendor.react.js";import{i as t}from"./vendor.is-hotkey.js";import{o as n}from"./vendor.obj-str.js";import{r as o,g as s,a,l as r,m as l,n as i,k as m,e as c,p as d,q as u,s as p}from"./flow-condition-types.js";import{a as v}from"./userflow.js";import{u as f}from"./client-context.js";import{u as g}from"./use-window-resize.js";import{B as w}from"./BuilderBar.js";import"./vendor.object-assign.js";import"./vendor.date-fns.js";import"./vendor.phoenix.js";import"./vendor.uuid.js";import"./vendor.i18next.js";import"./vendor.react-i18next.js";import"./vendor.babel.runtime.js";import"./vendor.react-dom.js";import"./vendor.scheduler.js";import"./stylesheets.js";import"./vendor.fortawesome.pro-regular-svg-icons.js";import"./vendor.fortawesome.pro-solid-svg-icons.js";import"./logomark.js";import"./vendor.fortawesome.pro-light-svg-icons.js";const h=t("alt+s"),b=t("escape"),y=t("u"),E=({state:t})=>{const{mode:c,elementType:d}=t,E=f(),L=e.useRef(null),[S,N]=e.useState(!1),M=e.useRef(null),[k,R]=e.useState(null),[D,F]=e.useState((()=>x())),T=e.useCallback((async(e,t)=>{if(e&&t){const n=L.current?.getFrame();n&&M.current&&(M.current.classList.add("userflowjs-element-selection-box--no-transition"),n.style.display="none",n.offsetWidth),m(),E.setSessionStorageState((e=>({...e,elementSelection:{...e.elementSelection,mode:"done"}})));const l=o(e),i=0,c=0,d=Math.round(s()),u=Math.round(a()),p=await E.getTargetEnv().captureScreenshot(i,c,d,u),v=e=>Math.round(e/r(1));t={...t,screenshotDataUrl:p,targetX1:v(l.left),targetY1:v(l.top-c),targetX2:v(l.right),targetY2:v(l.bottom-c),screenshotWidth:d,screenshotHeight:u}}E.setSessionStorageState((e=>({...e,activeApp:null,elementSelection:null}))),E.getTargetEnv().postBuilderMessage({kind:"userflow:selectElementResult",selectorData:t})}),[E]),A=e.useCallback((e=>E.setSessionStorageState((t=>({...t,elementSelection:{...t.elementSelection,mode:e}})))),[E]);return e.useEffect((()=>{if(!S||!L.current)return;const e=L.current.getFrame(),t=L.current.getRootEl();let n=t&&t.ownerDocument&&t.ownerDocument.defaultView;n===window&&(n=null);let f=null,g=null,w=null,E=null;const x=document.getElementById("userflow-ui"),N={capture:!0},k=()=>{window.cancelAnimationFrame(F);let e=null,t=null,n=null;if(g&&!x.contains(g)){let o=null,s=g;for(;s;){{const e=s.getBoundingClientRect();if(0===e.width&&0===e.height){s=j(s);continue}}if(o=u(s,{elementType:d}),o)break;s=j(s)}o?(t=o.el,e=o.selector):n=d===v.INPUT?"No text input found here":"Sorry, we can't select that element (yet!)"}w=t,f=e,R(n),C()};let F;const B=()=>{window.cancelAnimationFrame(F),F=window.requestAnimationFrame(k)},C=()=>{window.cancelAnimationFrame($);const e=M.current;if(!e)return;m();const t=r(s()),n=r(a());let l=n/2,i=t/2,c=n/2,d=t/2;let u=2,v=2,f=2,g=2;if(w){const e=o(w),s=window.getComputedStyle(w);l=Math.max(0,e.top),i=Math.max(0,t-e.right),c=Math.max(0,n-e.bottom),d=Math.max(0,e.left),u=Math.max(2,p(s.borderTopLeftRadius)),v=Math.max(2,p(s.borderTopRightRadius)),f=Math.max(2,p(s.borderBottomLeftRadius)),g=Math.max(2,p(s.borderBottomRightRadius)),E=w}else if(E){const e=o(E);l=Math.max(0,e.top+e.height/2),i=Math.max(0,t-e.right+e.width/2),c=Math.max(0,n-e.bottom+e.height/2),d=Math.max(0,e.left+e.width/2)}e.style.top=`${l}px`,e.style.right=`${i}px`,e.style.bottom=`${c}px`,e.style.left=`${d}px`,e.style.borderTopLeftRadius=`${u}px`,e.style.borderTopRightRadius=`${v}px`,e.style.borderBottomLeftRadius=`${f}px`,e.style.borderBottomRightRadius=`${g}px`,w?document.body.classList.remove("userflowjs-body-with-element-selection--none"):document.body.classList.add("userflowjs-body-with-element-selection--none")};let $;const P=()=>{window.cancelAnimationFrame($),$=window.requestAnimationFrame(C)},I=e=>{if(h(e))return e.preventDefault(),void("select"===c?A("navigate"):"navigate"===c&&A("select"));if(b(e)&&"select"===c)return e.preventDefault(),void T(null,null);if(y(e)&&w){const t=j(w);if(t)return e.preventDefault(),g=t,void k()}},U=e=>{const t=e.composedPath()[0];t&&t!==w&&"BODY"!==t.tagName&&"HTML"!==t.tagName&&(g=t,B())},Y=()=>{g=null,B()};e&&e.addEventListener("mouseenter",Y);const q=e=>{e.preventDefault(),e.stopPropagation()},V=e=>{q(e)},H=e=>{q(e)},O=e=>{if(q(e),D){const t=e.target;if(!w||!w.contains(t))return void U(e)}f&&(T(w,f),X())};n&&n.addEventListener("keydown",I),"select"===c&&(document.body.addEventListener("mouseleave",Y),document.body.classList.add("userflowjs-body-with-element-selection"));const W=l((e=>{const t=e.ownerDocument.defaultView;t&&(t.addEventListener("keydown",I,N),"select"===c&&(t.addEventListener("scroll",P,N),e.addEventListener("mousemove",U,N),e.addEventListener("mousedown",V,N),e.addEventListener("focus",H,N),e.addEventListener("click",O,N)))}),(e=>{const t=e.ownerDocument.defaultView;t&&(t.removeEventListener("keydown",I,N),"select"===c&&(t.removeEventListener("scroll",P,N),i(e)||e.removeEventListener("mousemove",U,N),e.removeEventListener("mousedown",V,N),e.removeEventListener("focus",H,N),e.removeEventListener("click",O,N)))})),X=()=>{window.cancelAnimationFrame(F),window.cancelAnimationFrame($),document.body.removeEventListener("mouseleave",Y),n&&n.removeEventListener("keydown",I),e&&e.removeEventListener("mouseenter",Y),document.body.classList.remove("userflowjs-body-with-element-selection"),document.body.classList.remove("userflowjs-body-with-element-selection--none"),W()};return X}),[D,E,c,S,d,T,A]),g((()=>F(x()))),e.createElement(e.Fragment,null,e.createElement(w,{ref:L,onReadyChange:N,buttons:e.createElement(e.Fragment,null,"navigate"===c?e.createElement("button",{key:"select",className:"btn btn--default",onMouseDown:e=>{e.preventDefault(),e.stopPropagation(),A("select")}},e.createElement("span",{className:"hidden-lg-up"},"Select here"),e.createElement("span",{className:"hidden-md-down"},"Select element here (Alt + S)")):"select"===c?e.createElement("button",{key:"navigate",className:"btn btn--default",onMouseDown:e=>{e.preventDefault(),e.stopPropagation(),A("navigate")}},e.createElement("span",{className:"hidden-lg-up"},"Navigate"),e.createElement("span",{className:"hidden-md-down"},"Navigate to another page (Alt + S)")):null,("select"===c||"navigate"===c)&&e.createElement("button",{className:"btn btn--secondary-on-dark",onClick:()=>T(null,null)},"Cancel"))},"navigate"===c?e.createElement("div",{className:"status"},"Navigate to the page the element appears on"):k?e.createElement("div",{className:"error"},k):e.createElement("div",{className:"status"},D?e.createElement(e.Fragment,null,"Tap"," ",d===v.INPUT?"a text input":"an element"," ","to focus. Tap again to select."):e.createElement(e.Fragment,null,"Click"," ",d===v.INPUT?"a text input":"an element"," ","to select it"))),S&&("select"===c||"done"===c)&&e.createElement("div",{className:n({"userflowjs-element-selection-box":!0}),ref:M}))};function j(e){const t=e.parentNode;if(!t)return null;if(i(t))return t.host;if(!c(t))return null;if("BODY"===t.tagName){const e=d(t);return e||null}return t}function x(){return window.navigator.userAgent.includes("Mobile")}export default E;export{E as ElementSelectionApp};
|
package/FlowApp.js
CHANGED
|
@@ -1,2 +1 @@
|
|
|
1
|
-
!function(){try{var e="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:{},t=(new Error).stack;t&&(e._sentryDebugIds=e._sentryDebugIds||{},e._sentryDebugIds[t]="b3e8407e-0e59-4a4d-8f6e-25e04741940f",e._sentryDebugIdIdentifier="sentry-dbid-b3e8407e-0e59-4a4d-8f6e-25e04741940f")}catch(o){}}();import{r as e}from"./vendor.react.js";import{E as t,V as o,J as n,b as s,K as r,H as l,L as a,x as i,D as c,M as u,U as d}from"./userflow.js";import{B as p}from"./BubbleToolbar.js";import{m,d as f,R as b,i as h,g as w,u as g,c as E,h as v,S as y}from"./bubble-frame.styl.js";import{b as k,z as j,a as T,t as S,r as R}from"./flow-condition-types.js";import{u as L,i as M}from"./client-context.js";import{F as x}from"./FlowChrome.js";import{u as F,r as C}from"./use-selector-element-monitoring.js";import{a as I,S as N}from"./flow-host.styl.js";import{m as D}from"./vendor.fortawesome.pro-solid-svg-icons.js";import{D as _,u as P}from"./stylesheets.js";import{T as B}from"./Trigger.js";import{u as q}from"./vendor.react-i18next.js";import"./vendor.object-assign.js";import"./vendor.phoenix.js";import"./vendor.uuid.js";import"./vendor.fortawesome.pro-regular-svg-icons.js";import"./vendor.obj-str.js";import"./vendor.date-fns.js";import"./vendor.i18next.js";import"./use-window-resize.js";import"./vendor.react-dom.js";import"./vendor.scheduler.js";import"./logomark.js";import"./vendor.babel.runtime.js";const A=()=>{const{t:o}=q(),n=L(),{dispatch:s,restart:r}=le(),{session:l,step:a}=ae(),i="userflowjs-bubble-button userflowjs-bubble-button--default userflowjs-bubble-menu__item";return e.createElement("div",{role:"dialog","aria-modal":ne(a)?"true":void 0,"aria-label":"Guide menu"},e.createElement("div",{className:"userflowjs-bubble-menu__title"},o("menu.title")),e.createElement("button",{className:i,onClick:()=>n.endFlow(l,{endReason:t.USER_CLOSED})},o("menu.close")),l.version.restartEnabled&&e.createElement("button",{className:i,onClick:r},o("menu.restart")),e.createElement("button",{className:i,onClick:()=>s({kind:"showFlow"})},o("menu.back")))},O=({progress:t})=>{const o={width:100*parseFloat(t||"0")+"%"};return e.createElement("div",{className:"userflowjs-bubble-progress"},e.createElement("div",{className:"userflowjs-bubble-progress__fill",style:o}))},V=({theme:s})=>{const r=L(),{session:l,step:a,muted:i,shouldLabelDialog:c}=ae(),{version:u}=l,{dispatch:d}=le(),h=u.steps[0],w=h&&h.id===a.id,g=w&&"1"===a.progress,E=e.useMemo((()=>a.content&&m(f(a.content),{buttons:a.buttons,questions:a.questions})),[a.content,a.buttons,a.questions]);return e.createElement("div",{key:a.id,role:"alertdialog","aria-modal":ne(a)?"true":void 0,"aria-label":c?"Guide":void 0},!g&&e.createElement(O,{progress:a.progress}),e.createElement("div",{id:"userflowjs-bubble-content",className:"userflowjs-bubble-content"},e.createElement(b,{doc:E,lookupAttribute:k(l.data),buttons:a.buttons,questions:a.questions})),e.createElement(p,{draftMode:l.draftMode,muted:i,toggleMuted:s.voiceType!==o.NONE?()=>d({kind:"toggleMuted"}):void 0,close:u.closeDisabled?void 0:()=>s.flowXButtonBehavior===n.DISMISS||w?r.endFlow(l,{endReason:t.USER_CLOSED}):d({kind:"showMenu"})}))};function U(e,t){if(!e)return"";"string"==typeof e&&(e=f(e));const o=[],n=/[.!?;,]$/;function s(){const e=(o[o.length-1]||"").trim();e&&!e.match(n)&&o.push(".")}function r(e){e.forEach((e=>function(e){if(h(e)){if(e.text&&!e.silent){const t=e.text.split("\n");t.forEach(((e,n)=>{o.push(e),n<t.length-1&&(s(),o.push("\n"))}))}}else switch(e.type){case"attribute":{const n=w(e,t);n&&o.push(n);break}default:r(e.children),["link"].includes(e.type)||(s(),o.push("\n\n"))}}(e)))}return r(e.children),o.join("").trim().replace(new RegExp(String.fromCharCode(160),"g")," ").replace(new RegExp(String.fromCharCode(8),"g"),"")}const z=({bubbleFrame:t,theme:n})=>{const s=L(),{dispatch:r}=le(),{muted:l,session:a,step:i}=ae(),c=s.getAudio();e.useEffect((()=>{const e=()=>{r({kind:"speechPlaying"})},t=()=>{r({kind:"speechStopped"})};return c.addEventListener("playing",e),c.addEventListener("ended",t),c.addEventListener("pause",t),()=>{c.removeEventListener("playing",e),c.removeEventListener("ended",t),c.removeEventListener("pause",t),c.pause(),c.src="",r({kind:"speechStopped"})}}),[r,c]),e.useEffect((()=>{if(s.audioReady)return;const e=t&&"IFRAME"===t.tagName?t.contentWindow:null;const o=()=>{window.removeEventListener("mousedown",n),e&&e.removeEventListener("mousedown",n)},n=()=>{o(),s.playAudio(null)};return window.addEventListener("mousedown",n),e&&e.addEventListener("mousedown",n),o}),[t,s]);const u=e.useRef(a),d=e.useRef(n),p=e.useRef(i);return e.useEffect((()=>{u.current=a,d.current=n,p.current=i}),[a,n,i]),e.useEffect((()=>{if(!s.audioReady||l)return void s.pauseAudio();let e=!1;return(async()=>{if(await new Promise((e=>setTimeout(e,1))),e)return;const t=await async function(e,t,n,s){if(n.voiceType===o.SYNTHETIC&&"string"==typeof n.syntheticVoice&&s.content){e.ensureIdentified();const o=k(t.data),r=U(s.content,o);return e.getStepSpeech(n.syntheticVoice,r)}if(n.voiceType===o.MANUAL&&s.speechAsset)return s.speechAsset.assetUrl;return null}(s,u.current,d.current,p.current);e||t&&s.playAudio(t)})(),()=>{e=!0}}),[l,s,i.id,n.voiceType,n.syntheticVoice]),null};const Y=e.forwardRef(((t,o)=>{const n=I();return e.createElement("div",{ref:o,className:"userflowjs-out-of-viewport-pointer",style:{zIndex:n+2}},e.createElement(_,{icon:D}))}));function G(e,t){const o=e.current;o&&(o.classList.toggle("userflowjs-out-of-viewport-pointer--visible",null!=t),t&&(o.style.left=t.left+"px",o.style.top=t.top+"px",o.classList.toggle("userflowjs-out-of-viewport-pointer--visible-up","up"===t.direction),o.classList.toggle("userflowjs-out-of-viewport-pointer--visible-down","down"===t.direction)))}const H=({theme:t})=>{const{step:o}=ae();return e.createElement(e.Fragment,null,o.beacons.map((o=>e.createElement(X,{key:o.id,beacon:o,theme:t}))))},X=({beacon:t,theme:o})=>{const{session:n}=ae(),s=I(),r=e.useRef(null),l=e.useRef(null),a=g(t.hiddenCondition),i=e.useMemo((()=>S(t.selector,n.data)),[t.selector,n.data]),c=e.useCallback((({targetRect:e,clipEl:n,viewportClipRect:s})=>{const a=function({beacon:e,beaconRef:t,clipEl:o,viewportClipRect:n,targetRect:s,theme:r}){if(!t.current)return null;if(0===s.width||0===s.height)return null;const l=r.beaconSize,a=r.beaconSize,i=R(o);let c=0,u=0;switch(e.placement){case"top-left":case"left":case"bottom-left":c=s.left;break;case"top":case"center":case"bottom":c=s.left+s.width/2;break;default:c=s.left+s.width}switch(e.placement){case"left":case"center":case"right":u=s.top+s.height/2;break;case"bottom-left":case"bottom":case"bottom-right":u=s.top+s.height;break;default:u=s.top}c-=l/2,u-=a/2,c+=e.offsetX,u+=e.offsetY,c=Math.max(c,i.left-(o===document.documentElement?0:o.scrollLeft)),u=Math.max(u,i.top-(o===document.documentElement?0:o.scrollTop));const d=c+l,p=u+a,m=Math.min(32,.5*a);let f;f=p<n.top+m?"up":u>n.bottom-m?"down":null;return{top:u,right:d,bottom:p,left:c,width:l,height:a,pointerSubjectPosition:{direction:f,left:c,width:l},visible:null==f}}({beacon:t,beaconRef:r,clipEl:n,viewportClipRect:s,targetRect:e,theme:o}),i=a&&function({subjectPosition:e,pointerRef:t,viewportClipRect:o}){const n=t.current;if(!n)return null;const s=n.getBoundingClientRect(),r=j(T());let l,a,i=e.direction;return null==i?null:("down"===i&&o.bottom<s.height/2?i="up":"up"===i&&o.top>r&&(i="down"),l=e.left+e.width/2-s.width/2,a="down"===i?o.bottom-s.height:o.top,{direction:i,left:l,top:a})}({subjectPosition:a.pointerSubjectPosition,pointerRef:l,viewportClipRect:s});C((()=>{K(r,a),G(l,i)}))}),[t]),u=e.useCallback((()=>{K(r,null),G(l,null)}),[]);return F({selector:a?null:i,targetMoved:c,targetLost:u}),e.createElement(e.Fragment,null,e.createElement("div",{ref:r,className:"userflowjs-beacon userflowjs-beacon--pulse userflowjs-beacon--for-flow userflowjs-fixed-widget",style:{zIndex:s+2}},e.createElement("div",{className:"userflowjs-beacon__ring"}),e.createElement("div",{className:"userflowjs-beacon__ring"})),e.createElement(Y,{ref:l}))};function K(e,t){const o=e.current;o&&(o.classList.toggle("userflowjs-fixed-widget--visible",null!=t),t&&(o.style.transform=`translate3d(${t.left}px, ${t.top}px, 0)`,o.style.visibility=t.visible?"visible":"hidden"))}const W=()=>{const{t:o}=q(),n=L(),{restart:l}=le(),{session:a,step:i}=ae(),c=i.theme||a.version.theme,u=i.selector,d=!u||u.type===s.AUTO&&!u.autoData,m=()=>n.endFlow(a,{endReason:t.USER_CLOSED});return e.createElement(e.Fragment,null,e.createElement(p,{draftMode:a.draftMode,close:m}),a.draftMode&&d?e.createElement("div",{className:"userflowjs-bubble-content"},e.createElement("div",{className:"userflowjs-bubble-alert p-like"},e.createElement("span",{className:"userflowjs-bubble-alert__label"},"Preview-only tip"),"No tooltip target selected yet. Please go back to the Builder and select a tooltip target in ",e.createElement("b",null,"Step ",i.idx+1)," of"," ",e.createElement("b",null,a.flow.name),".")):a.draftMode&&c.tooltipMissingBehavior===r.END?e.createElement("div",{className:"userflowjs-bubble-content"},e.createElement("div",{className:"userflowjs-bubble-alert p-like"},e.createElement("p",null,e.createElement("span",{className:"userflowjs-bubble-alert__label"},"Preview-only tip"),"The tooltip target element in ",e.createElement("b",null,"Step ",i.idx+1)," of"," ",e.createElement("b",null,a.flow.name)," was not found within"," ",c.tooltipMissingToleranceSeconds," ",1===parseFloat(c.tooltipMissingToleranceSeconds)?"second":"seconds","."),e.createElement("p",null,"For regular users, the flow will auto-dismiss when this happens."),e.createElement("p",null,"If you are on the right page, then try reselecting the element in the Builder."),e.createElement("p",null,"Read more in our"," ",e.createElement("a",{href:"https://userflow.com/docs/trouble/element-not-found",target:"_blank",rel:"noopener noreferrer"},"Element not found guide"),"."))):e.createElement(e.Fragment,null,e.createElement("div",{className:"userflowjs-bubble-content"},a.draftMode&&e.createElement("div",{className:"userflowjs-bubble-alert p-like"},e.createElement("span",{className:"userflowjs-bubble-alert__label"},"Preview-only tip"),"The tooltip target element in ",e.createElement("b",null,"Step ",i.idx+1)," of"," ",e.createElement("b",null,a.flow.name)," was not found on the page. If you are on the right page, then try reselecting the element in the Builder."),e.createElement("p",null,e.createElement("b",null,o("tooltipTargetMissing.line1"))),e.createElement("p",null,o("tooltipTargetMissing.line2"))),e.createElement("div",{className:"userflowjs-bubble-buttons"},e.createElement(E,{appearance:"primary",onClick:l,text:o("menu.restart")}),e.createElement(E,{appearance:"default",onClick:m,text:o("menu.close")}))))},$=({session:o,checklistSession:n,resourceCenterEmbedsChecklist:s})=>{const d=L(),[p,m]=e.useState(!1),[f,b]=e.useState(null),[h,w]=e.useReducer(Z,void 0,(()=>{const e=o,t=ee(e);return{...Q,session:e,step:t,muted:!!l.getItem("flowsMuted"),autoFocusRequested:oe(t)}})),{session:g,step:E,speechPlaying:k,contentType:j}=h,{version:T}=g,R=ne(E);let F=0;E.questions.some((e=>e.type===i.NPS))&&(F=420);const C=P(E.theme||T.theme),I=e.useMemo((()=>{let e=C.bubbleY;const t=n?.version.theme;return!s&&n&&t&&n.version.checklist?.launcherEnabled&&E.appearance===a.BUBBLE&&t.checklistLauncherPlacement===C.bubblePlacement&&(C.avatarType===c.NONE||t.checklistLauncherX<C.bubbleX+C.avatarSize)&&(e=Math.max(C.bubbleY,t.checklistLauncherY+t.checklistLauncherHeight+C.bubbleY)),{...C,bubbleWidth:Math.max(C.bubbleWidth,F),bubbleY:e}}),[s,n,E.appearance,C,F]);e.useEffect((()=>{g!==o&&w({kind:"updateSession",session:o});const e=e=>{e.session.id===g.id&&w({kind:"goToStep",stepId:e.step.id})};return d.on("gotostep",e),()=>{d.off("gotostep",e)}}),[d,g,o]);const D=e.useMemo((()=>({dispatch:w,restart:()=>{d.goToStep(g,te(g)),w({kind:"showFlow"})}})),[d,w,g]),_=e.useMemo((()=>E.selector&&S(E.selector,g.data)),[E.selector,g.data]),B=e.useCallback((()=>{v(d,g,E.actions)}),[d,g,E.actions]);e.useEffect((()=>{h.muted?l.setItem("flowsMuted","true"):l.removeItem("flowsMuted")}),[h.muted]);const q=g.locale?g.locale.standardLocaleId:I.languageId;e.useEffect((()=>{M.changeLanguage(q)}),[q]);const[O,U]=e.useState(!1),z=e.useCallback((e=>{U(e),e&&d.send({kind:"ReportTooltipTargetMissing",sessionId:g.id,stepId:E.id}),e&&I.tooltipMissingBehavior===r.END&&!g.draftMode&&d.endFlow(g,{endReason:t.TOOLTIP_TARGET_MISSING})}),[d,g,E.id,I.tooltipMissingBehavior]);return e.useEffect((()=>{if(!p||!h.autoFocusRequested)return;d.originalActiveElement||d.originalActiveElement===f?.ownerDocument.defaultView?.frameElement||(d.originalActiveElement=document.activeElement);let e=f?.querySelector('button:not([tabindex="-1"]):not(.userflowjs-bubble-toolbar-button), [tabindex]:not([tabindex="-1"]):not(.userflowjs-bubble-toolbar-button), input, textarea');if(e&&e.matches(".userflowjs-bubble-buttons button:not(.userflowjs-bubble-button--primary)")){const t=f?.querySelector(".userflowjs-bubble-buttons .userflowjs-bubble-button--primary");t&&(e=t)}e&&"function"==typeof e.focus&&e.focus({preventScroll:!0}),w({kind:"autoFocused"})}),[d,f,p,h.autoFocusRequested]),e.useEffect((()=>{const e=f?.ownerDocument.defaultView;if(!e)return;const t=()=>{w({kind:"focusOut"}),delete d.originalActiveElement},o=()=>{w({kind:"focusIn"})};return window.addEventListener("focusin",t),e.addEventListener("focusin",o),()=>{window.removeEventListener("focusin",t),e.removeEventListener("focusin",o)}}),[f,d]),e.useEffect((()=>{if(!R||!f)return;const e=f.ownerDocument.defaultView,o=e?e.document:document,n=e=>{if("Escape"!==e.key||T.closeDisabled){if("Tab"===e.key){const t=f.querySelectorAll('button:not([tabindex="-1"]), [tabindex]:not([tabindex="-1"]), input, textarea'),n=t[0],s=t[t.length-1],r=o.activeElement;e.shiftKey?r===n&&(e.preventDefault(),s.focus()):r===s&&(e.preventDefault(),n.focus())}}else d.endFlow(g,{endReason:t.USER_CLOSED})};return window.addEventListener("keydown",n),e?.addEventListener("keydown",n),()=>{window.removeEventListener("keydown",n),e?.removeEventListener("keydown",n)}}),[R,d,g,f,T.closeDisabled]),e.useEffect((()=>{if(h.scrollToTopRequested){if(f?.ownerDocument.defaultView?.frameElement){const e=f?.ownerDocument.body;e&&(e.scrollTop=0)}w({kind:"scrolledToTop"})}}),[h.scrollToTopRequested,f]),e.createElement(se.Provider,{value:D},e.createElement(re.Provider,{value:h},e.createElement(y.Provider,{value:g},e.createElement(N,null,e.createElement(x,{company:g.flow.company,theme:I,position:"fixed",stepKey:E.crossVersionId,stepAppearance:E.appearance,width:E.width,backgroundImageUrl:"flow"===j&&!O&&E.backgroundAsset?E.backgroundAsset.assetUrl:null,tooltipSelector:_,tooltipPlacement:E.tooltipPlacement,backdrop:E.backdrop,tooltipTargetBlocked:E.tooltipTargetBlocked,backdropPadding:E.backdropPadding,onTooltipTargetClick:B,onTooltipTargetMissingChange:z,onModalBackdropClick:E.appearance!==a.MODAL||I.modalBackdropOnclick!==u.DISMISS||T.closeDisabled?void 0:()=>d.endFlow(g,{endReason:t.USER_CLOSED}),speaking:k,minimizeOnAvatarClick:!0,autoHide3pEnabled:!0,onVisibleChange:m,bubbleFrameRootRef:b,rootChildren:t=>e.createElement(J,{...t,theme:I})},"menu"===j?e.createElement(A,null):O&&I.tooltipMissingBehavior!==r.BUBBLE?e.createElement(W,null):e.createElement(V,{theme:I}))))))},J=({visible:t,bubbleFrame:o,theme:n})=>{const s=ae(),{step:r}=s,l=s.session.currentStep&&s.session.currentStep.id,[a,i]=e.useState(!1),c=e.useRef(l);return e.useEffect((()=>{t?i(!0):c.current!==l&&i(!1),c.current=l}),[l,t]),e.createElement(e.Fragment,null,(t||a)&&"flow"===s.contentType&&e.createElement(e.Fragment,null,e.createElement(z,{bubbleFrame:o,theme:n}),e.createElement(H,{theme:n})),r.triggers.map((t=>e.createElement(B,{key:t.id,trigger:t}))))},Q={muted:!1,speechPlaying:!1,contentType:"flow",autoFocusRequested:!1,hasFocus:!1,scrollToTopRequested:!1,shouldLabelDialog:!0};function Z(e,t){switch(t.kind){case"updateSession":{let o;return o=t.session.id===e.session.id&&t.session.version.steps.find((({crossVersionId:t})=>t===e.step.crossVersionId))||ee(t.session),{...e,session:t.session,step:o}}case"goToStep":{const o=e.session.version.steps.find((e=>e.id===t.stepId));return o?{...e,step:o,contentType:"flow",autoFocusRequested:e.hasFocus||oe(o),scrollToTopRequested:!0,shouldLabelDialog:!e.hasFocus}:e}case"toggleMuted":return{...e,muted:!e.muted};case"speechPlaying":return{...e,speechPlaying:!0};case"speechStopped":return{...e,speechPlaying:!1};case"showFlow":return{...e,contentType:"flow",autoFocusRequested:!0,scrollToTopRequested:!0};case"showMenu":return{...e,contentType:"menu",autoFocusRequested:!0,scrollToTopRequested:!0};case"autoFocused":return{...e,autoFocusRequested:!1};case"focusIn":return{...e,hasFocus:!0};case"focusOut":return{...e,hasFocus:!1};case"scrolledToTop":return{...e,scrollToTopRequested:!1}}}function ee(e){const{currentStep:t}=e,{steps:o}=e.version;if(t){const e=o.find((({crossVersionId:e})=>e===t.crossVersionId));if(!e)throw new d("Session points to an unknown step: "+t.crossVersionId);return e}return te(e)}function te(e){const t=e.version.steps[0];if(!t)throw new d("Session has no current step and its version has no start step");return t}function oe(e){return ne(e)}function ne(e){return e.appearance===a.MODAL||e.appearance===a.BUBBLE&&e.backdrop||e.appearance===a.TOOLTIP&&e.tooltipTargetBlocked}const se=e.createContext(null),re=e.createContext(null);function le(){return e.useContext(se)}function ae(){return e.useContext(re)}export default $;export{$ as FlowApp,re as FlowStateContext,Q as initialFlowState,ne as isStepModal,le as useFlowDispatch,ae as useFlowState};
|
|
2
|
-
//# sourceMappingURL=FlowApp.js.map
|
|
1
|
+
import{r as e}from"./vendor.react.js";import{E as t,V as o,J as n,b as s,K as r,H as l,L as a,x as i,D as c,M as u,U as d}from"./userflow.js";import{B as p}from"./BubbleToolbar.js";import{m,d as f,R as b,i as h,g as w,u as g,c as E,h as v,S as y}from"./bubble-frame.styl.js";import{b as k,z as j,a as T,t as S,r as R}from"./flow-condition-types.js";import{u as L,i as M}from"./client-context.js";import{F as x}from"./FlowChrome.js";import{u as F,r as C}from"./use-selector-element-monitoring.js";import{a as I,S as N}from"./flow-host.styl.js";import{m as D}from"./vendor.fortawesome.pro-solid-svg-icons.js";import{D as P,u as B}from"./stylesheets.js";import{T as q}from"./Trigger.js";import{u as _}from"./vendor.react-i18next.js";import"./vendor.object-assign.js";import"./vendor.phoenix.js";import"./vendor.uuid.js";import"./vendor.fortawesome.pro-regular-svg-icons.js";import"./vendor.obj-str.js";import"./vendor.date-fns.js";import"./vendor.i18next.js";import"./use-window-resize.js";import"./vendor.react-dom.js";import"./vendor.scheduler.js";import"./logomark.js";import"./vendor.babel.runtime.js";const A=()=>{const{t:o}=_(),n=L(),{dispatch:s,restart:r}=le(),{session:l,step:a}=ae(),i="userflowjs-bubble-button userflowjs-bubble-button--default userflowjs-bubble-menu__item";return e.createElement("div",{role:"dialog","aria-modal":ne(a)?"true":void 0,"aria-label":"Guide menu"},e.createElement("div",{className:"userflowjs-bubble-menu__title"},o("menu.title")),e.createElement("button",{className:i,onClick:()=>n.endFlow(l,{endReason:t.USER_CLOSED})},o("menu.close")),l.version.restartEnabled&&e.createElement("button",{className:i,onClick:r},o("menu.restart")),e.createElement("button",{className:i,onClick:()=>s({kind:"showFlow"})},o("menu.back")))},O=({progress:t})=>{const o={width:100*parseFloat(t||"0")+"%"};return e.createElement("div",{className:"userflowjs-bubble-progress"},e.createElement("div",{className:"userflowjs-bubble-progress__fill",style:o}))},V=({theme:s})=>{const r=L(),{session:l,step:a,muted:i,shouldLabelDialog:c}=ae(),{version:u}=l,{dispatch:d}=le(),h=u.steps[0],w=h&&h.id===a.id,g=w&&"1"===a.progress,E=e.useMemo((()=>a.content&&m(f(a.content),{buttons:a.buttons,questions:a.questions})),[a.content,a.buttons,a.questions]);return e.createElement("div",{key:a.id,role:"alertdialog","aria-modal":ne(a)?"true":void 0,"aria-label":c?"Guide":void 0},!g&&e.createElement(O,{progress:a.progress}),e.createElement("div",{id:"userflowjs-bubble-content",className:"userflowjs-bubble-content"},e.createElement(b,{doc:E,lookupAttribute:k(l.data),buttons:a.buttons,questions:a.questions})),e.createElement(p,{draftMode:l.draftMode,muted:i,toggleMuted:s.voiceType!==o.NONE?()=>d({kind:"toggleMuted"}):void 0,close:u.closeDisabled?void 0:()=>s.flowXButtonBehavior===n.DISMISS||w?r.endFlow(l,{endReason:t.USER_CLOSED}):d({kind:"showMenu"})}))};function U(e,t){if(!e)return"";"string"==typeof e&&(e=f(e));const o=[],n=/[.!?;,]$/;function s(){const e=(o[o.length-1]||"").trim();e&&!e.match(n)&&o.push(".")}function r(e){e.forEach((e=>function(e){if(h(e)){if(e.text&&!e.silent){const t=e.text.split("\n");t.forEach(((e,n)=>{o.push(e),n<t.length-1&&(s(),o.push("\n"))}))}}else switch(e.type){case"attribute":{const n=w(e,t);n&&o.push(n);break}default:r(e.children),["link"].includes(e.type)||(s(),o.push("\n\n"))}}(e)))}return r(e.children),o.join("").trim().replace(new RegExp(String.fromCharCode(160),"g")," ").replace(new RegExp(String.fromCharCode(8),"g"),"")}const z=({bubbleFrame:t,theme:n})=>{const s=L(),{dispatch:r}=le(),{muted:l,session:a,step:i}=ae(),c=s.getAudio();e.useEffect((()=>{const e=()=>{r({kind:"speechPlaying"})},t=()=>{r({kind:"speechStopped"})};return c.addEventListener("playing",e),c.addEventListener("ended",t),c.addEventListener("pause",t),()=>{c.removeEventListener("playing",e),c.removeEventListener("ended",t),c.removeEventListener("pause",t),c.pause(),c.src="",r({kind:"speechStopped"})}}),[r,c]),e.useEffect((()=>{if(s.audioReady)return;const e=t&&"IFRAME"===t.tagName?t.contentWindow:null;const o=()=>{window.removeEventListener("mousedown",n),e&&e.removeEventListener("mousedown",n)},n=()=>{o(),s.playAudio(null)};return window.addEventListener("mousedown",n),e&&e.addEventListener("mousedown",n),o}),[t,s]);const u=e.useRef(a),d=e.useRef(n),p=e.useRef(i);return e.useEffect((()=>{u.current=a,d.current=n,p.current=i}),[a,n,i]),e.useEffect((()=>{if(!s.audioReady||l)return void s.pauseAudio();let e=!1;return(async()=>{if(await new Promise((e=>setTimeout(e,1))),e)return;const t=await async function(e,t,n,s){if(n.voiceType===o.SYNTHETIC&&"string"==typeof n.syntheticVoice&&s.content){e.ensureIdentified();const o=k(t.data),r=U(s.content,o);return e.getStepSpeech(n.syntheticVoice,r)}if(n.voiceType===o.MANUAL&&s.speechAsset)return s.speechAsset.assetUrl;return null}(s,u.current,d.current,p.current);e||t&&s.playAudio(t)})(),()=>{e=!0}}),[l,s,i.id,n.voiceType,n.syntheticVoice]),null};const Y=e.forwardRef(((t,o)=>{const n=I();return e.createElement("div",{ref:o,className:"userflowjs-out-of-viewport-pointer",style:{zIndex:n+2}},e.createElement(P,{icon:D}))}));function G(e,t){const o=e.current;o&&(o.classList.toggle("userflowjs-out-of-viewport-pointer--visible",null!=t),t&&(o.style.left=t.left+"px",o.style.top=t.top+"px",o.classList.toggle("userflowjs-out-of-viewport-pointer--visible-up","up"===t.direction),o.classList.toggle("userflowjs-out-of-viewport-pointer--visible-down","down"===t.direction)))}const H=({theme:t})=>{const{step:o}=ae();return e.createElement(e.Fragment,null,o.beacons.map((o=>e.createElement(X,{key:o.id,beacon:o,theme:t}))))},X=({beacon:t,theme:o})=>{const{session:n}=ae(),s=I(),r=e.useRef(null),l=e.useRef(null),a=g(t.hiddenCondition),i=e.useMemo((()=>S(t.selector,n.data)),[t.selector,n.data]),c=e.useCallback((({targetRect:e,clipEl:n,viewportClipRect:s})=>{const a=function({beacon:e,beaconRef:t,clipEl:o,viewportClipRect:n,targetRect:s,theme:r}){if(!t.current)return null;if(0===s.width||0===s.height)return null;const l=r.beaconSize,a=r.beaconSize,i=R(o);let c=0,u=0;switch(e.placement){case"top-left":case"left":case"bottom-left":c=s.left;break;case"top":case"center":case"bottom":c=s.left+s.width/2;break;default:c=s.left+s.width}switch(e.placement){case"left":case"center":case"right":u=s.top+s.height/2;break;case"bottom-left":case"bottom":case"bottom-right":u=s.top+s.height;break;default:u=s.top}c-=l/2,u-=a/2,c+=e.offsetX,u+=e.offsetY,c=Math.max(c,i.left-(o===document.documentElement?0:o.scrollLeft)),u=Math.max(u,i.top-(o===document.documentElement?0:o.scrollTop));const d=c+l,p=u+a,m=Math.min(32,.5*a);let f;f=p<n.top+m?"up":u>n.bottom-m?"down":null;return{top:u,right:d,bottom:p,left:c,width:l,height:a,pointerSubjectPosition:{direction:f,left:c,width:l},visible:null==f}}({beacon:t,beaconRef:r,clipEl:n,viewportClipRect:s,targetRect:e,theme:o}),i=a&&function({subjectPosition:e,pointerRef:t,viewportClipRect:o}){const n=t.current;if(!n)return null;const s=n.getBoundingClientRect(),r=j(T());let l,a,i=e.direction;return null==i?null:("down"===i&&o.bottom<s.height/2?i="up":"up"===i&&o.top>r&&(i="down"),l=e.left+e.width/2-s.width/2,a="down"===i?o.bottom-s.height:o.top,{direction:i,left:l,top:a})}({subjectPosition:a.pointerSubjectPosition,pointerRef:l,viewportClipRect:s});C((()=>{K(r,a),G(l,i)}))}),[t]),u=e.useCallback((()=>{K(r,null),G(l,null)}),[]);return F({selector:a?null:i,targetMoved:c,targetLost:u}),e.createElement(e.Fragment,null,e.createElement("div",{ref:r,className:"userflowjs-beacon userflowjs-beacon--pulse userflowjs-beacon--for-flow userflowjs-fixed-widget",style:{zIndex:s+2}},e.createElement("div",{className:"userflowjs-beacon__ring"}),e.createElement("div",{className:"userflowjs-beacon__ring"})),e.createElement(Y,{ref:l}))};function K(e,t){const o=e.current;o&&(o.classList.toggle("userflowjs-fixed-widget--visible",null!=t),t&&(o.style.transform=`translate3d(${t.left}px, ${t.top}px, 0)`,o.style.visibility=t.visible?"visible":"hidden"))}const W=()=>{const{t:o}=_(),n=L(),{restart:l}=le(),{session:a,step:i}=ae(),c=i.theme||a.version.theme,u=i.selector,d=!u||u.type===s.AUTO&&!u.autoData,m=()=>n.endFlow(a,{endReason:t.USER_CLOSED});return e.createElement(e.Fragment,null,e.createElement(p,{draftMode:a.draftMode,close:m}),a.draftMode&&d?e.createElement("div",{className:"userflowjs-bubble-content"},e.createElement("div",{className:"userflowjs-bubble-alert p-like"},e.createElement("span",{className:"userflowjs-bubble-alert__label"},"Preview-only tip"),"No tooltip target selected yet. Please go back to the Builder and select a tooltip target in ",e.createElement("b",null,"Step ",i.idx+1)," of"," ",e.createElement("b",null,a.flow.name),".")):a.draftMode&&c.tooltipMissingBehavior===r.END?e.createElement("div",{className:"userflowjs-bubble-content"},e.createElement("div",{className:"userflowjs-bubble-alert p-like"},e.createElement("p",null,e.createElement("span",{className:"userflowjs-bubble-alert__label"},"Preview-only tip"),"The tooltip target element in ",e.createElement("b",null,"Step ",i.idx+1)," of"," ",e.createElement("b",null,a.flow.name)," was not found within"," ",c.tooltipMissingToleranceSeconds," ",1===parseFloat(c.tooltipMissingToleranceSeconds)?"second":"seconds","."),e.createElement("p",null,"For regular users, the flow will auto-dismiss when this happens."),e.createElement("p",null,"If you are on the right page, then try reselecting the element in the Builder."),e.createElement("p",null,"Read more in our"," ",e.createElement("a",{href:"https://userflow.com/docs/trouble/element-not-found",target:"_blank",rel:"noopener noreferrer"},"Element not found guide"),"."))):e.createElement(e.Fragment,null,e.createElement("div",{className:"userflowjs-bubble-content"},a.draftMode&&e.createElement("div",{className:"userflowjs-bubble-alert p-like"},e.createElement("span",{className:"userflowjs-bubble-alert__label"},"Preview-only tip"),"The tooltip target element in ",e.createElement("b",null,"Step ",i.idx+1)," of"," ",e.createElement("b",null,a.flow.name)," was not found on the page. If you are on the right page, then try reselecting the element in the Builder."),e.createElement("p",null,e.createElement("b",null,o("tooltipTargetMissing.line1"))),e.createElement("p",null,o("tooltipTargetMissing.line2"))),e.createElement("div",{className:"userflowjs-bubble-buttons"},e.createElement(E,{appearance:"primary",onClick:l,text:o("menu.restart")}),e.createElement(E,{appearance:"default",onClick:m,text:o("menu.close")}))))},$=({session:o,checklistSession:n,resourceCenterEmbedsChecklist:s})=>{const d=L(),[p,m]=e.useState(!1),[f,b]=e.useState(null),[h,w]=e.useReducer(Z,void 0,(()=>{const e=o,t=ee(e);return{...Q,session:e,step:t,muted:!!l.getItem("flowsMuted"),autoFocusRequested:oe(t)}})),{session:g,step:E,speechPlaying:k,contentType:j}=h,{version:T}=g,R=ne(E);let F=0;E.questions.some((e=>e.type===i.NPS))&&(F=420);const C=B(E.theme||T.theme),I=e.useMemo((()=>{let e=C.bubbleY;const t=n?.version.theme;return!s&&n&&t&&n.version.checklist?.launcherEnabled&&E.appearance===a.BUBBLE&&t.checklistLauncherPlacement===C.bubblePlacement&&(C.avatarType===c.NONE||t.checklistLauncherX<C.bubbleX+C.avatarSize)&&(e=Math.max(C.bubbleY,t.checklistLauncherY+t.checklistLauncherHeight+C.bubbleY)),{...C,bubbleWidth:Math.max(C.bubbleWidth,F),bubbleY:e}}),[s,n,E.appearance,C,F]);e.useEffect((()=>{g!==o&&w({kind:"updateSession",session:o});const e=e=>{e.session.id===g.id&&w({kind:"goToStep",stepId:e.step.id})};return d.on("gotostep",e),()=>{d.off("gotostep",e)}}),[d,g,o]);const D=e.useMemo((()=>({dispatch:w,restart:()=>{d.goToStep(g,te(g)),w({kind:"showFlow"})}})),[d,w,g]),P=e.useMemo((()=>E.selector&&S(E.selector,g.data)),[E.selector,g.data]),q=e.useCallback((()=>{v(d,g,E.actions)}),[d,g,E.actions]);e.useEffect((()=>{h.muted?l.setItem("flowsMuted","true"):l.removeItem("flowsMuted")}),[h.muted]);const _=g.locale?g.locale.standardLocaleId:I.languageId;e.useEffect((()=>{M.changeLanguage(_)}),[_]);const[O,U]=e.useState(!1),z=e.useCallback((e=>{U(e),e&&d.send({kind:"ReportTooltipTargetMissing",sessionId:g.id,stepId:E.id}),e&&I.tooltipMissingBehavior===r.END&&!g.draftMode&&d.endFlow(g,{endReason:t.TOOLTIP_TARGET_MISSING})}),[d,g,E.id,I.tooltipMissingBehavior]);return e.useEffect((()=>{if(!p||!h.autoFocusRequested)return;d.originalActiveElement||d.originalActiveElement===f?.ownerDocument.defaultView?.frameElement||(d.originalActiveElement=document.activeElement);let e=f?.querySelector('button:not([tabindex="-1"]):not(.userflowjs-bubble-toolbar-button), [tabindex]:not([tabindex="-1"]):not(.userflowjs-bubble-toolbar-button), input, textarea');if(e&&e.matches(".userflowjs-bubble-buttons button:not(.userflowjs-bubble-button--primary)")){const t=f?.querySelector(".userflowjs-bubble-buttons .userflowjs-bubble-button--primary");t&&(e=t)}e&&"function"==typeof e.focus&&e.focus({preventScroll:!0}),w({kind:"autoFocused"})}),[d,f,p,h.autoFocusRequested]),e.useEffect((()=>{const e=f?.ownerDocument.defaultView;if(!e)return;const t=()=>{w({kind:"focusOut"}),delete d.originalActiveElement},o=()=>{w({kind:"focusIn"})};return window.addEventListener("focusin",t),e.addEventListener("focusin",o),()=>{window.removeEventListener("focusin",t),e.removeEventListener("focusin",o)}}),[f,d]),e.useEffect((()=>{if(!R||!f)return;const e=f.ownerDocument.defaultView,o=e?e.document:document,n=e=>{if("Escape"!==e.key||T.closeDisabled){if("Tab"===e.key){const t=f.querySelectorAll('button:not([tabindex="-1"]), [tabindex]:not([tabindex="-1"]), input, textarea'),n=t[0],s=t[t.length-1],r=o.activeElement;e.shiftKey?r===n&&(e.preventDefault(),s.focus()):r===s&&(e.preventDefault(),n.focus())}}else d.endFlow(g,{endReason:t.USER_CLOSED})};return window.addEventListener("keydown",n),e?.addEventListener("keydown",n),()=>{window.removeEventListener("keydown",n),e?.removeEventListener("keydown",n)}}),[R,d,g,f,T.closeDisabled]),e.useEffect((()=>{if(h.scrollToTopRequested){if(f?.ownerDocument.defaultView?.frameElement){const e=f?.ownerDocument.body;e&&(e.scrollTop=0)}w({kind:"scrolledToTop"})}}),[h.scrollToTopRequested,f]),e.createElement(se.Provider,{value:D},e.createElement(re.Provider,{value:h},e.createElement(y.Provider,{value:g},e.createElement(N,null,e.createElement(x,{company:g.flow.company,theme:I,position:"fixed",stepKey:E.crossVersionId,stepAppearance:E.appearance,width:E.width,backgroundImageUrl:"flow"===j&&!O&&E.backgroundAsset?E.backgroundAsset.assetUrl:null,tooltipSelector:P,tooltipPlacement:E.tooltipPlacement,backdrop:E.backdrop,tooltipTargetBlocked:E.tooltipTargetBlocked,backdropPadding:E.backdropPadding,onTooltipTargetClick:q,onTooltipTargetMissingChange:z,onModalBackdropClick:E.appearance!==a.MODAL||I.modalBackdropOnclick!==u.DISMISS||T.closeDisabled?void 0:()=>d.endFlow(g,{endReason:t.USER_CLOSED}),speaking:k,minimizeOnAvatarClick:!0,autoHide3pEnabled:!0,onVisibleChange:m,bubbleFrameRootRef:b,rootChildren:t=>e.createElement(J,{...t,theme:I})},"menu"===j?e.createElement(A,null):O&&I.tooltipMissingBehavior!==r.BUBBLE?e.createElement(W,null):e.createElement(V,{theme:I}))))))},J=({visible:t,bubbleFrame:o,theme:n})=>{const s=ae(),{step:r}=s,l=s.session.currentStep&&s.session.currentStep.id,[a,i]=e.useState(!1),c=e.useRef(l);return e.useEffect((()=>{t?i(!0):c.current!==l&&i(!1),c.current=l}),[l,t]),e.createElement(e.Fragment,null,(t||a)&&"flow"===s.contentType&&e.createElement(e.Fragment,null,e.createElement(z,{bubbleFrame:o,theme:n}),e.createElement(H,{theme:n})),r.triggers.map((t=>e.createElement(q,{key:t.id,trigger:t}))))},Q={muted:!1,speechPlaying:!1,contentType:"flow",autoFocusRequested:!1,hasFocus:!1,scrollToTopRequested:!1,shouldLabelDialog:!0};function Z(e,t){switch(t.kind){case"updateSession":{let o;return o=t.session.id===e.session.id&&t.session.version.steps.find((({crossVersionId:t})=>t===e.step.crossVersionId))||ee(t.session),{...e,session:t.session,step:o}}case"goToStep":{const o=e.session.version.steps.find((e=>e.id===t.stepId));return o?{...e,step:o,contentType:"flow",autoFocusRequested:e.hasFocus||oe(o),scrollToTopRequested:!0,shouldLabelDialog:!e.hasFocus}:e}case"toggleMuted":return{...e,muted:!e.muted};case"speechPlaying":return{...e,speechPlaying:!0};case"speechStopped":return{...e,speechPlaying:!1};case"showFlow":return{...e,contentType:"flow",autoFocusRequested:!0,scrollToTopRequested:!0};case"showMenu":return{...e,contentType:"menu",autoFocusRequested:!0,scrollToTopRequested:!0};case"autoFocused":return{...e,autoFocusRequested:!1};case"focusIn":return{...e,hasFocus:!0};case"focusOut":return{...e,hasFocus:!1};case"scrolledToTop":return{...e,scrollToTopRequested:!1}}}function ee(e){const{currentStep:t}=e,{steps:o}=e.version;if(t){const e=o.find((({crossVersionId:e})=>e===t.crossVersionId));if(!e)throw new d("Session points to an unknown step: "+t.crossVersionId);return e}return te(e)}function te(e){const t=e.version.steps[0];if(!t)throw new d("Session has no current step and its version has no start step");return t}function oe(e){return ne(e)}function ne(e){return e.appearance===a.MODAL||e.appearance===a.BUBBLE&&e.backdrop||e.appearance===a.TOOLTIP&&e.tooltipTargetBlocked}const se=e.createContext(null),re=e.createContext(null);function le(){return e.useContext(se)}function ae(){return e.useContext(re)}export default $;export{$ as FlowApp,re as FlowStateContext,Q as initialFlowState,ne as isStepModal,le as useFlowDispatch,ae as useFlowState};
|
package/FlowChrome.js
CHANGED
|
@@ -1,2 +1 @@
|
|
|
1
|
-
!function(){try{var t="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:{},e=(new Error).stack;e&&(t._sentryDebugIds=t._sentryDebugIds||{},t._sentryDebugIds[e]="4c3c8ea1-4ff0-4f7d-81f1-71d3efd3411e",t._sentryDebugIdIdentifier="sentry-dbid-4c3c8ea1-4ff0-4f7d-81f1-71d3efd3411e")}catch(o){}}();import{r as t}from"./vendor.react.js";import{u as e,F as o}from"./use-window-resize.js";import{c as a,L as l,D as r,b as i,N as s,z as n,O as c}from"./userflow.js";import{a as u,f as d}from"./flow-host.styl.js";import{b as p}from"./bubble-frame.styl.js";import{S as m}from"./logomark.js";import{o as f}from"./vendor.obj-str.js";import{u as b}from"./use-selector-element-monitoring.js";import{k as h,a as g,g as w,l as T,u as E,e as v,M as y,s as M,j as L}from"./flow-condition-types.js";import{a as k,g as j}from"./stylesheets.js";import{u as B}from"./vendor.react-i18next.js";var O=new URL("avatar-frame.css",import.meta.url).href;const R=({company:R,theme:H,position:C,absoluteWidth:S,absoluteHeight:D,stepKey:U,stepAppearance:F,width:W,backgroundImageUrl:z,tooltipSelector:A,allowMissingTooltipTarget:V,tooltipPlacement:G,backdrop:$,tooltipTargetBlocked:K,backdropPadding:Y,zIndex:X,onTooltipTargetClick:q,onTooltipTargetMissingChange:J,onModalBackdropClick:Q,onVisibleChange:Z,speaking:tt,noIframe:et,MadeWithUserflow:ot,minimizeOnAvatarClick:at,autoHide3pEnabled:lt,bubbleFrameRootRef:rt,frameWrapperHtmlAttributes:it,rootChildren:st,children:nt})=>{const ct=C||"absolute",ut=G||null,dt=Y||"0",pt=ot||I,mt=u(),ft="fixed"===ct?null!=X?X:mt+1:1,bt=ft-1,{i18n:ht}=B(),gt=ht.dir(),wt=t.useRef(null),Tt=t.useRef(null),Et=t.useRef(null),[vt,yt]=t.useState(null),Mt=t.useRef(null),Lt=t.useRef(null),kt=t.useRef(null),jt=t.useRef(null),Bt=t.useRef(null),Ot=t.useRef(null),Rt=t.useRef(null),Pt=t.useRef(null),It=t.useRef(null);t.useLayoutEffect((()=>{const t=wt.current.style;t.animation="none",t.visibility="hidden",t.position="absolute",t.top="-99999px",t.left="-99999px"}),[]);const{loaded:Nt}=k(window,d,H),[_t,xt]=t.useState(!1),[Ht,Ct]=t.useState(!1),St=Nt&&_t&&Ht;let[Dt,Ut]=t.useState(!1);F!==l.BUBBLE&&(at=!1,Dt=!1),t.useEffect((()=>{Ut(!1)}),[U]);const Ft=t.useRef({appearance:null,width:null,theme:H,bubbleFrameHeight:0,backdrop:!1,backdropPadding:"0",prevTooltipTargetParams:null,tooltipTargetParams:null,desiredTooltipPlacement:null,tooltipPlacement:null,lastReportedTooltipTargetMissing:!1,tooltipTargetMissing:!1,tooltipTargetMissingTimeout:void 0,stepKeyScrolledIntoView:void 0,targetScrolledIntoView:null}),[Wt,zt]=t.useState(null),At=null!=Wt&&St;t.useEffect((()=>{Z&&Z(At)}),[Z,At]);const Vt=t.useCallback((t=>{Ft.current.lastReportedTooltipTargetMissing!==t&&(Ft.current.lastReportedTooltipTargetMissing=t,J&&J(t))}),[J]),Gt=t.useCallback((({forceAppearanceLayout:t,forceUpdatePosition:e}={})=>{const o=wt.current,i=Tt.current,u=Et.current,d=Lt.current,p=Mt.current,m=kt.current,f=jt.current,b=Bt.current,v=Ot.current,y=Rt.current,k=Pt.current,j=It.current;if(!(o&&i&&u&&vt&&d&&p&&m&&f&&b&&v&&y&&k&&j))return;if(!St)return;const B=Ft.current,{tooltipTargetParams:O}=B;h();let R=F,P=!1;R!==l.TOOLTIP||V||O||(B.tooltipTargetMissing?(R=l.BUBBLE,P=!0):R=null);const I=R!==B.appearance,C=W!==B.width;if((t||I||C||H!==B.theme||$!=B.backdrop||dt!=B.backdropPadding||ut!==B.desiredTooltipPlacement)&&(B.appearance=R,B.width=W,B.theme=H,B.backdrop=$,B.backdropPadding=dt,B.desiredTooltipPlacement=ut,e=!0,function({layoutState:{appearance:t,theme:e,backdrop:o,tooltipTargetMissing:a},width:i,position:n,absoluteWidth:c,root:u,bubble:d,bubbleFrameRoot:p,avatar:m,avatarNotch:f,modalBackdrop:b,dir:h}){const g="absolute"===n?c||1024:T(w()),{avatarSize:E,bubblePlacement:v}=e;let y=e.bubbleWidth,M=null,L=null,k=`userflowjs-bubble-frame-root userflowjs-bubble-frame-root--appearance-${t?.toLowerCase()}`,j="hidden",B=null,O=null,R=null,P=null,I="userflowjs-bubble__avatar-notch",_="hidden",x=null,H=null,C=null,S=null,D="userflowjs-modal-backdrop";(t===l.MODAL||!a&&t===l.BUBBLE&&o)&&(D+=" userflowjs-modal-backdrop--visible");switch(t){case l.BUBBLE:if(e.avatarType!==r.NONE){j="",_="",v===s.TOP_LEFT||v===s.TOP_CENTER||v===s.TOP_RIGHT?(M=E+20,B=0,x=-40,I+=" userflowjs-bubble__avatar-notch--top"):(L=E+20,R=0,C=-40,I+=" userflowjs-bubble__avatar-notch--bottom");const t=v===s.TOP_LEFT||v===s.TOP_CENTER||v===s.BOTTOM_LEFT||v===s.BOTTOM_CENTER||v===s.CENTER;"ltr"===h&&t||"rtl"===h&&!t?(P=0,S=E,I+=" userflowjs-bubble__avatar-notch--left"):(O=0,H=E,I+=" userflowjs-bubble__avatar-notch--right")}break;case l.MODAL:y=e.modalWidth,e.avatarType!==r.NONE&&(j="",P=`calc(50% - ${E/2}px)`,B=-E/2);break;case l.TOOLTIP:y=e.tooltipWidth}null!=i&&(y=i);y=Math.min(y,g-32),u.classList.toggle("userflowjs-flow-chrome--position-absolute","absolute"===n),u.classList.toggle("userflowjs-flow-chrome--position-relative","relative"===n),u.classList.toggle("userflowjs-flow-chrome--position-fixed","fixed"===n),u.classList.toggle("userflowjs-flow-chrome--appearance-modal",t===l.MODAL);const U=null!=t&&t!==l.HIDDEN;u.style.position="",u.style.top="",u.style.left="",u.style.visibility=U?"":"hidden",u.style.animation=U?"":"none",N(d,"width",T(y)),N(d,"padding-top",M),N(d,"padding-bottom",L),p.className=k,N(m,"width",T(e.avatarSize)),N(m,"height",T(e.avatarSize)),m.style.visibility=j,N(m,"top",B),N(m,"right",O),N(m,"bottom",R),N(m,"left",P),f.className=I,f.style.visibility=_,N(f,"top",x),N(f,"right",H),N(f,"bottom",C),N(f,"left",S),b.className=D}({layoutState:B,width:W,position:ct,absoluteWidth:S,root:o,bubble:i,bubbleFrameRoot:vt,avatar:d,avatarNotch:p,modalBackdrop:j,dir:gt})),!et){const t=vt.offsetHeight,o=g()-2*(w()<800?0:16)-(H.avatarType===r.NONE?0:R===l.BUBBLE?20+H.avatarSize:R===l.MODAL?H.avatarSize/2:0),a=Math.min(t,o);if(R&&a!==B.bubbleFrameHeight){if(B.bubbleFrameHeight=a,N(u,"height",T(a)),E(u)&&u.contentDocument){u.contentDocument.documentElement.style.overflowY=t<=o?"hidden":"scroll"}e=!0}}if(e&&R){let t=I;if(R===l.TOOLTIP){(B.tooltipTargetParams&&B.tooltipTargetParams.targetEl)!==(B.prevTooltipTargetParams&&B.prevTooltipTargetParams.targetEl)&&(t=!0)}B.prevTooltipTargetParams=B.tooltipTargetParams,function({layoutState:t,animateIn:e,position:o,absoluteWidth:a,absoluteHeight:i,desiredTooltipPlacement:u,root:d,bubble:p,tooltipNotch:m,tooltipBackdrop:f,tooltipBlockTop:b,tooltipBlockRight:h,tooltipBlockBottom:E,tooltipBlockLeft:v,dir:y}){const{appearance:L,theme:k,tooltipTargetParams:j,backdrop:B,backdropPadding:O}=t,{bubblePlacement:R}=k,P=16,I=k.tooltipNotchSize,H=10,{width:C,height:S}=p.getBoundingClientRect(),D="absolute"===o?a||1024:T(w()),U="absolute"===o?i||768:T(g());let F=0,W=0,z="userflowjs-bubble__tooltip-notch",A="hidden",V=null,G=null,$=null,K=null,Y="userflowjs-tooltip-backdrop",X=null,q=null,J=null,Q=null,Z=null,tt=null,et=null,ot=null,at="userflowjs-tooltip-block userflowjs-tooltip-block--top",lt=null,rt=null,it="userflowjs-tooltip-block userflowjs-tooltip-block--right",st=null,nt=null,ct="userflowjs-tooltip-block userflowjs-tooltip-block--bottom",ut=null,dt=null,pt="userflowjs-tooltip-block userflowjs-tooltip-block--left",mt=null,ft=null;switch(L){case l.BUBBLE:F=R===s.TOP_LEFT||R===s.BOTTOM_LEFT?k.bubbleX:R===s.TOP_CENTER||R===s.CENTER||R===s.BOTTOM_CENTER?(D-C)/2:D-C-k.bubbleX,W=R===s.TOP_LEFT||R===s.TOP_CENTER||R===s.TOP_RIGHT?k.bubbleY:R===s.CENTER?(U-S)/2:U-S-k.bubbleY,"rtl"===y&&(F=D-F-C),F=Math.max(0,Math.min(D-C,F)),W=Math.max(0,Math.min(U-S,W));break;case l.MODAL:{let t=P;k.avatarType!==r.NONE&&(t+=k.avatarSize/2),F=P+(D-2*P-C)/2,W=t+(U-t-P-S)/2;break}case l.TOOLTIP:{let e;if(j){let{targetRect:a,viewportClipRect:l}=j;if("absolute"===o){const t=d.offsetParent.getBoundingClientRect();l={top:0,right:D,bottom:U,left:0},a={top:a.top-t.top,right:a.right-t.left,bottom:a.bottom-t.top,left:a.left-t.left,width:a.width,height:a.height}}let r=0;if(B){const{paddingTop:t,paddingRight:e,paddingBottom:o,paddingLeft:l}=function(t){if(!t||"0"===t)return{paddingTop:0,paddingRight:0,paddingBottom:0,paddingLeft:0};const e=t.trim().split(" ");if(1===e.length){const t=x(e[0]);return{paddingTop:t,paddingRight:t,paddingBottom:t,paddingLeft:t}}if(2===e.length){const t=x(e[0]),o=x(e[1]);return{paddingTop:t,paddingRight:o,paddingBottom:t,paddingLeft:o}}return{paddingTop:x(e[0]),paddingRight:x(e[1]),paddingBottom:x(e[2]),paddingLeft:x(e[3])}}(O);a={top:a.top-t,right:a.right+e,bottom:a.bottom+o,left:a.left-l,width:a.width+l+e,height:a.height+t+o},r=Math.min(t,e,o,l)}const i=a,s=k.backdropHighlightType==n.OUTSIDE?k.backdropHighlightSpread:0;if(B&&s&&(a={top:a.top-s,right:a.right+s,bottom:a.bottom+s,left:a.left-s,width:a.width+2*s,height:a.height+2*s}),e=function({targetRect:t,bubbleWidth:e,bubbleHeight:o,containerWidth:a,containerHeight:l,viewportClipRect:r,tooltipNotchSize:i,currentTooltipPlacement:s,desiredTooltipPlacement:n}){if(t.bottom<=r.top)return o+i<=l-r.top?c.BELOW:c.ABOVE;if(t.top>=r.bottom)return o+i<=r.bottom?c.ABOVE:c.BELOW;if(t.right<=r.left)return e+i<=a-r.left?c.RIGHT:c.LEFT;if(t.left>=r.right)return e+i<=r.right?c.LEFT:c.RIGHT;const u=s=>{const n=t.left+t.width/2,u=n>=r.left&&n<=r.right,d=t.top+t.height/2,p=d>=r.top&&d<=r.bottom;switch(s){case c.BELOW:return l-t.bottom>o+i&&u;case c.ABOVE:return t.top>o+i&&u;case c.RIGHT:return a-t.right>e+i&&p;case c.LEFT:return t.left>e+i&&p}};if(n&&u(n))return n;if(s&&u(s))return s;const d=[{placement:c.BELOW,dist:t.top},{placement:c.ABOVE,dist:l-t.bottom},{placement:c.RIGHT,dist:t.left},{placement:c.LEFT,dist:a-t.right}];d.sort(((t,e)=>t.dist-e.dist));for(const{placement:c}of d)if(u(c))return c;return c.BELOW}({targetRect:a,bubbleWidth:C,bubbleHeight:S,containerWidth:D,containerHeight:U,viewportClipRect:l,tooltipNotchSize:I,currentTooltipPlacement:t.tooltipPlacement,desiredTooltipPlacement:u}),e===c.BELOW||e===c.ABOVE?(F=a.left+a.width/2-C/2,F=Math.max(P,Math.min(D-C-P,F)),K=Math.max(H,Math.min(C-H-2*I,a.left+a.width/2-I-F)),e===c.BELOW?V=2*-I:$=2*-I):e===c.RIGHT?(F=a.right+I,F=Math.max(F,l.left+I),F=Math.min(F,l.right+I),F=Math.max(F,I),F=Math.min(F,D-C)):(F=a.left-I-C,F=Math.max(F,l.left-C-I),F=Math.min(F,l.right-C-I),F=Math.max(F,0),F=Math.min(F,D-C-I)),e===c.LEFT||e===c.RIGHT?(W=a.top+a.height/2-S/2,W=Math.max(P,Math.min(U-S-P,W)),V=Math.max(H,Math.min(S-H-2*I,a.top+a.height/2-I-W)),e===c.LEFT?G=2*-I:K=2*-I):e===c.BELOW?(W=a.bottom+I,W=Math.max(W,l.top+I),W=Math.min(W,l.bottom+I),W=Math.max(W,I),W=Math.min(W,U-S)):(W=a.top-I-S,W=Math.max(W,l.top-S-I),W=Math.min(W,l.bottom-S-I),W=Math.max(W,0),W=Math.min(W,U-S-I)),B){const t=window.getComputedStyle(j.targetEl);X=Math.max(0,i.top),q=Math.max(0,D-i.right),J=Math.max(0,U-i.bottom),Q=Math.max(0,i.left),Z=Math.max(0,M(t.borderTopLeftRadius)+r),tt=Math.max(0,M(t.borderTopRightRadius)+r),et=Math.max(0,M(t.borderBottomRightRadius)+r),ot=Math.max(0,M(t.borderBottomLeftRadius)+r),lt=Math.max(0,i.right),rt=Math.max(0,i.top),st=Math.max(0,i.right),nt=Math.max(0,i.bottom),ut=Math.max(0,i.left),dt=Math.max(0,i.bottom),mt=Math.max(0,i.left),ft=Math.max(0,i.top)}}else e=u||c.BELOW,e!==c.BELOW&&e!==c.ABOVE||(K=C/2-I,e===c.BELOW?V=2*-I:$=2*-I),e!==c.LEFT&&e!==c.RIGHT||(V=S/2-I,e===c.LEFT?G=2*-I:K=2*-I);t.tooltipPlacement=e,z+=` userflowjs-bubble__tooltip-notch--${e.toLowerCase()}`,A="",B&&(Y+=" userflowjs-tooltip-backdrop--visible",at+=" userflowjs-tooltip-block--visible",it+=" userflowjs-tooltip-block--visible",ct+=" userflowjs-tooltip-block--visible",pt+=" userflowjs-tooltip-block--visible");break}}p.style.transition="";let bt=F,ht=W;if(e&&(p.style.opacity="0",L===l.TOOLTIP)){const e=24;switch(t.tooltipPlacement){case c.BELOW:W+=e;break;case c.ABOVE:W-=e;break;case c.RIGHT:F+=e;break;case c.LEFT:F-=e}}"relative"!==o&&_(p,F,W);if(m.className=z,m.style.visibility=A,N(m,"top",V),N(m,"right",G),N(m,"bottom",$),N(m,"left",K),f.className=Y,N(f,"top",X),N(f,"right",q),N(f,"bottom",J),N(f,"left",Q),N(f,"border-top-left-radius",Z),N(f,"border-top-right-radius",tt),N(f,"border-bottom-right-radius",et),N(f,"border-bottom-left-radius",ot),b.className=at,N(b,"width",lt),N(b,"height",rt),h.className=it,N(h,"left",st),N(h,"height",nt),E.className=ct,N(E,"left",ut),N(E,"top",dt),v.className=pt,N(v,"width",mt),N(v,"top",ft),e){p.offsetWidth;const t="opacity 250ms linear";L===l.TOOLTIP?p.style.transition=`${t}, transform 500ms cubic-bezier(0.25, 0.8, 0.5, 1)`:p.style.transition=t,p.style.opacity="1","relative"!==o&&_(p,bt,ht)}}({layoutState:B,animateIn:t,position:ct,absoluteWidth:S,absoluteHeight:D,desiredTooltipPlacement:ut,root:o,bubble:i,tooltipNotch:m,tooltipBackdrop:f,tooltipBlockTop:b,tooltipBlockRight:v,tooltipBlockBottom:y,tooltipBlockLeft:k,dir:gt})}if(R===l.TOOLTIP){const t=O&&O.targetEl;t&&B.stepKeyScrolledIntoView!==U&&B.targetScrolledIntoView!==t&&(B.stepKeyScrolledIntoView=U,B.targetScrolledIntoView=t,function(t){if(a.customScrollIntoView)return void a.customScrollIntoView(t);const{scrollPadding:e}=a;if(e&&L(t)===document.scrollingElement){const o=e.top||0,a=e.right||0,l=e.bottom||0,r=e.left||0;let i=0,s=0;const n=t.getBoundingClientRect(),c=w(),u=g();if(n.top<o?i=n.top-o:n.bottom>u-l&&(i=n.bottom-u+l),n.left<r?s=n.left-r:n.right>c-a&&(s=n.right-c+a),0!=i||0!=s)return void window.scrollBy({top:i,left:s,behavior:"smooth"})}try{t.scrollIntoView({behavior:"smooth",block:"nearest"})}catch(o){console.warn("Userflow.js: scrollIntoView error (falling back to no options).",o),t.scrollIntoView()}}(t))}else B.stepKeyScrolledIntoView=void 0,B.targetScrolledIntoView=null;Vt(P),zt(R)}),[St,vt,U,F,W,H,ct,S,D,V,ut,$,dt,et,Vt,gt]),$t=t.useRef(Gt);$t.current=Gt;const Kt=t.useRef(!1);t.useEffect((()=>{const t=()=>{Kt.current=!0};return window.addEventListener("pagehide",t),()=>window.removeEventListener("pagehide",t)}),[]);const Yt=()=>{window.clearTimeout(Ft.current.tooltipTargetMissingTimeout),Ft.current.tooltipTargetMissingTimeout=void 0};t.useEffect((()=>Yt),[]);const Xt=t.useCallback((()=>{const t=Ft.current;if(t.tooltipTargetParams=null,V||(t.tooltipPlacement=null),F!==l.TOOLTIP)return Yt(),void(t.tooltipTargetMissing=!1);if(!V&&!t.tooltipTargetMissingTimeout){t.tooltipTargetMissing=!1;const e=!A||v(A)||A.type!==i.AUTO||A.autoData?1e3*parseFloat(H.tooltipMissingToleranceSeconds):1;t.tooltipTargetMissingTimeout=window.setTimeout((()=>{if(!Kt.current){if(A&&!v(A)){let t=A.autoData;if(A.autoData)try{t=JSON.parse(A.autoData)}catch(e){}console.warn("Userflow.js: Tooltip target not found on page.\n",{type:A.type,autoData:t,excludeText:A.excludeText,precision:A.precision,text:A.text,css:A.css})}Yt(),t.tooltipTargetMissing=!0,$t.current()}}),e)}$t.current()}),[F,V,A,H.tooltipMissingToleranceSeconds]),qt=t.useCallback((t=>{const e=Ft.current;Yt(),e.tooltipTargetParams&&e.tooltipTargetParams.targetEl!==t.targetEl&&(e.tooltipPlacement=null),e.tooltipTargetParams=t,Gt({forceUpdatePosition:!0})}),[Gt]);b({selector:F===l.TOOLTIP&&A||null,targetMoved:qt,targetLost:Xt,onTargetClick:q});const Jt=t.useCallback((()=>Gt({forceAppearanceLayout:!0})),[Gt]);e(Jt),t.useEffect((()=>{if(!vt||et||"function"!=typeof y)return;let t;const e=new y((()=>{t||(t=window.requestAnimationFrame((()=>{t=void 0,$t.current()})))}));return e.observe(vt,{childList:!0,attributes:!0,subtree:!0}),()=>{e.disconnect(),t&&window.cancelAnimationFrame(t)}}),[vt,et]),t.useLayoutEffect((()=>{$t.current()})),t.useLayoutEffect((()=>{"absolute"===ct&&Gt({forceAppearanceLayout:!0})}),[ct,S,D]);const Qt=t=>{t.preventDefault(),t.stopPropagation()};return function(e,o){const l=window.Intercom;t.useEffect((()=>{if(o&&e.autoHideIntercom&&"function"==typeof l&&!a.autoHide3pDisabled){try{l("update",{hide_default_launcher:!0})}catch(t){console.warn("Userflow.js: Error when hiding Intercom launcher",t)}return()=>{if(!a.autoHide3pDisabled)try{l("update",{hide_default_launcher:!1})}catch(t){console.warn("Userflow.js: Error when unhiding Intercom launcher",t)}}}}),[l,e.autoHideIntercom,o]);const r=window.$crisp;t.useEffect((()=>{if(o&&e.autoHideCrisp&&r&&!a.autoHide3pDisabled){try{r.push(["do","chat:hide"])}catch(t){console.warn("Userflow.js: Error when hiding Crisp Chat",t)}return()=>{if(!a.autoHide3pDisabled)try{r.push(["do","chat:show"])}catch(t){console.warn("Userflow.js: Error when unhiding Crisp Chat",t)}}}}),[r,e.autoHideCrisp,o]);const i=window.HubSpotConversations;t.useEffect((()=>{if(o&&e.autoHideHubspot&&i&&!a.autoHide3pDisabled){try{i.widget.remove()}catch(t){console.warn("Userflow.js: Error when hiding HubSpot Chat",t)}return()=>{if(!a.autoHide3pDisabled)try{i.widget.load()}catch(t){console.warn("Userflow.js: Error when unhiding HubSpot Chat",t)}}}}),[i,e.autoHideHubspot,o]);const s=window.drift;t.useEffect((()=>{if(o&&e.autoHideDrift&&s&&!a.autoHide3pDisabled){try{s.api.widget.hide()}catch(t){console.warn("Userflow.js: Error when hiding Drift Chat",t)}return()=>{if(!a.autoHide3pDisabled)try{s.api.widget.show()}catch(t){console.warn("Userflow.js: Error when unhiding Drift Chat",t)}}}}),[s,e.autoHideDrift,o])}(H,!!lt&&Wt===l.BUBBLE),t.createElement("div",{ref:wt,"data-testid":"flow-chrome",className:"userflowjs-flow-chrome userflowjs-theme-root",style:j(H),dir:gt},t.createElement("div",{className:"userflowjs-bubble",ref:Tt,style:{zIndex:ft}},t.createElement("div",{className:f({"userflowjs-bubble-outline":!0,[`userflowjs-bubble-outline--bubble-placement-${(H.bubblePlacement||"").toLowerCase().replace(/_/,"-")}`]:!0,"userflowjs-bubble-outline--minimizable":!!at,"userflowjs-bubble-outline--minimized":Dt})},t.createElement("div",{className:"userflowjs-bubble__frame-wrapper",...it},t.createElement(o,{className:"userflowjs-bubble__frame",elRef:Et,stylesheet:p,theme:H,onStylesheetsLoad:xt,noIframe:et,title:F.toLowerCase()},t.createElement("div",{className:"userflowjs-bubble-frame-root",ref:t=>{rt&&rt(t),yt(t)},style:z?{backgroundImage:`url("${encodeURI(z)}")`}:void 0},nt,R.flowBranding&&t.createElement("div",{className:"userflowjs-bubble-made-with-userflow"},t.createElement("div",{className:"userflowjs-bubble-made-with-userflow__absolute"},t.createElement(pt,{company:R},t.createElement(m,null),t.createElement("div",null,"Made with Userflow"))))))),t.createElement("div",{ref:Mt,className:"userflowjs-bubble__avatar-notch"})),t.createElement(o,{className:f({"userflowjs-bubble__avatar":!0,"userflowjs-bubble__avatar--minimizable":!!at,"userflowjs-bubble__avatar--speaking":!!tt}),elRef:Lt,stylesheet:O,theme:H,onStylesheetsLoad:Ct,noIframe:et,ariaHidden:!0,title:F.toLowerCase()},t.createElement("div",{className:f({"userflowjs-avatar-frame-root":!0,"userflowjs-avatar-frame-root--minimizable":!!at}),onClick:at?()=>Ut((t=>!t)):void 0},t.createElement(P,{theme:H}))),t.createElement("div",{ref:kt,className:"userflowjs-bubble__tooltip-notch"})),t.createElement("div",{ref:jt,className:"userflowjs-tooltip-backdrop",onMouseDown:Qt,style:{zIndex:bt,pointerEvents:K?void 0:"none"}}),t.createElement("div",{ref:Bt,className:"userflowjs-tooltip-block",onMouseDown:Qt,style:{zIndex:bt}}),t.createElement("div",{ref:Ot,className:"userflowjs-tooltip-block",onMouseDown:Qt,style:{zIndex:bt}}),t.createElement("div",{ref:Rt,className:"userflowjs-tooltip-block",onMouseDown:Qt,style:{zIndex:bt}}),t.createElement("div",{ref:Pt,className:"userflowjs-tooltip-block",onMouseDown:Qt,style:{zIndex:bt}}),t.createElement("div",{ref:It,className:"userflowjs-modal-backdrop",onMouseDown:Qt,onClick:Q,style:{zIndex:bt}}),st&&st({visible:At,bubbleFrame:Et.current}))},P=({theme:e})=>{const o="https://js.userflow.com/cartoon-avatars-no-bg/";let a;return a=e.avatarType===r.ASSET&&e.avatarAsset?e.avatarAsset.assetUrl:e.avatarType===r.CARTOON&&e.avatarName?o+e.avatarName+".svg?3":e.avatarType===r.URL&&e.avatarUrl?e.avatarUrl:o+"none.svg",t.createElement("img",{src:a,alt:""})},I=({company:e,children:o})=>t.createElement("a",{href:"https://userflow.com/?utm_source=made-with-userflow&utm_medium=link&utm_campaign=made-with-userflow-"+e.slug,target:"_blank",rel:"noopener noreferrer"},o);function N(t,e,o){null==o?t.style.removeProperty(e):t.style.setProperty(e,"number"==typeof o?o+"px":o,"important")}function _(t,e,o){e=Math.round(e),o=Math.round(o),t.style.transform=`translate3d(${e}px, ${o}px, 0px)`}function x(t){const e=parseInt(t,10);return isNaN(e)?0:e}export{R as F};
|
|
2
|
-
//# sourceMappingURL=FlowChrome.js.map
|
|
1
|
+
import{r as t}from"./vendor.react.js";import{u as e,F as o}from"./use-window-resize.js";import{c as a,L as l,D as r,b as i,N as s,z as n,O as c}from"./userflow.js";import{a as u,f as d}from"./flow-host.styl.js";import{b as p}from"./bubble-frame.styl.js";import{S as m}from"./logomark.js";import{o as b}from"./vendor.obj-str.js";import{u as f}from"./use-selector-element-monitoring.js";import{k as h,a as g,g as w,l as T,u as E,e as v,M as y,s as M,j as L}from"./flow-condition-types.js";import{a as j,g as k}from"./stylesheets.js";import{u as B}from"./vendor.react-i18next.js";var O=new URL("avatar-frame.css",import.meta.url).href;const R=({company:R,theme:H,position:C,absoluteWidth:S,absoluteHeight:D,stepKey:U,stepAppearance:F,width:W,backgroundImageUrl:z,tooltipSelector:A,allowMissingTooltipTarget:V,tooltipPlacement:G,backdrop:$,tooltipTargetBlocked:K,backdropPadding:Y,zIndex:X,onTooltipTargetClick:q,onTooltipTargetMissingChange:J,onModalBackdropClick:Q,onVisibleChange:Z,speaking:tt,noIframe:et,MadeWithUserflow:ot,minimizeOnAvatarClick:at,autoHide3pEnabled:lt,bubbleFrameRootRef:rt,frameWrapperHtmlAttributes:it,rootChildren:st,children:nt})=>{const ct=C||"absolute",ut=G||null,dt=Y||"0",pt=ot||N,mt=u(),bt="fixed"===ct?null!=X?X:mt+1:1,ft=bt-1,{i18n:ht}=B(),gt=ht.dir(),wt=t.useRef(null),Tt=t.useRef(null),Et=t.useRef(null),[vt,yt]=t.useState(null),Mt=t.useRef(null),Lt=t.useRef(null),jt=t.useRef(null),kt=t.useRef(null),Bt=t.useRef(null),Ot=t.useRef(null),Rt=t.useRef(null),Pt=t.useRef(null),Nt=t.useRef(null);t.useLayoutEffect((()=>{const t=wt.current.style;t.animation="none",t.visibility="hidden",t.position="absolute",t.top="-99999px",t.left="-99999px"}),[]);const{loaded:xt}=j(window,d,H),[It,_t]=t.useState(!1),[Ht,Ct]=t.useState(!1),St=xt&&It&&Ht;let[Dt,Ut]=t.useState(!1);F!==l.BUBBLE&&(at=!1,Dt=!1),t.useEffect((()=>{Ut(!1)}),[U]);const Ft=t.useRef({appearance:null,width:null,theme:H,bubbleFrameHeight:0,backdrop:!1,backdropPadding:"0",prevTooltipTargetParams:null,tooltipTargetParams:null,desiredTooltipPlacement:null,tooltipPlacement:null,lastReportedTooltipTargetMissing:!1,tooltipTargetMissing:!1,tooltipTargetMissingTimeout:void 0,stepKeyScrolledIntoView:void 0,targetScrolledIntoView:null}),[Wt,zt]=t.useState(null),At=null!=Wt&&St;t.useEffect((()=>{Z&&Z(At)}),[Z,At]);const Vt=t.useCallback((t=>{Ft.current.lastReportedTooltipTargetMissing!==t&&(Ft.current.lastReportedTooltipTargetMissing=t,J&&J(t))}),[J]),Gt=t.useCallback((({forceAppearanceLayout:t,forceUpdatePosition:e}={})=>{const o=wt.current,i=Tt.current,u=Et.current,d=Lt.current,p=Mt.current,m=jt.current,b=kt.current,f=Bt.current,v=Ot.current,y=Rt.current,j=Pt.current,k=Nt.current;if(!(o&&i&&u&&vt&&d&&p&&m&&b&&f&&v&&y&&j&&k))return;if(!St)return;const B=Ft.current,{tooltipTargetParams:O}=B;h();let R=F,P=!1;R!==l.TOOLTIP||V||O||(B.tooltipTargetMissing?(R=l.BUBBLE,P=!0):R=null);const N=R!==B.appearance,C=W!==B.width;if((t||N||C||H!==B.theme||$!=B.backdrop||dt!=B.backdropPadding||ut!==B.desiredTooltipPlacement)&&(B.appearance=R,B.width=W,B.theme=H,B.backdrop=$,B.backdropPadding=dt,B.desiredTooltipPlacement=ut,e=!0,function({layoutState:{appearance:t,theme:e,backdrop:o,tooltipTargetMissing:a},width:i,position:n,absoluteWidth:c,root:u,bubble:d,bubbleFrameRoot:p,avatar:m,avatarNotch:b,modalBackdrop:f,dir:h}){const g="absolute"===n?c||1024:T(w()),{avatarSize:E,bubblePlacement:v}=e;let y=e.bubbleWidth,M=null,L=null,j=`userflowjs-bubble-frame-root userflowjs-bubble-frame-root--appearance-${t?.toLowerCase()}`,k="hidden",B=null,O=null,R=null,P=null,N="userflowjs-bubble__avatar-notch",I="hidden",_=null,H=null,C=null,S=null,D="userflowjs-modal-backdrop";(t===l.MODAL||!a&&t===l.BUBBLE&&o)&&(D+=" userflowjs-modal-backdrop--visible");switch(t){case l.BUBBLE:if(e.avatarType!==r.NONE){k="",I="",v===s.TOP_LEFT||v===s.TOP_CENTER||v===s.TOP_RIGHT?(M=E+20,B=0,_=-40,N+=" userflowjs-bubble__avatar-notch--top"):(L=E+20,R=0,C=-40,N+=" userflowjs-bubble__avatar-notch--bottom");const t=v===s.TOP_LEFT||v===s.TOP_CENTER||v===s.BOTTOM_LEFT||v===s.BOTTOM_CENTER||v===s.CENTER;"ltr"===h&&t||"rtl"===h&&!t?(P=0,S=E,N+=" userflowjs-bubble__avatar-notch--left"):(O=0,H=E,N+=" userflowjs-bubble__avatar-notch--right")}break;case l.MODAL:y=e.modalWidth,e.avatarType!==r.NONE&&(k="",P=`calc(50% - ${E/2}px)`,B=-E/2);break;case l.TOOLTIP:y=e.tooltipWidth}null!=i&&(y=i);y=Math.min(y,g-32),u.classList.toggle("userflowjs-flow-chrome--position-absolute","absolute"===n),u.classList.toggle("userflowjs-flow-chrome--position-relative","relative"===n),u.classList.toggle("userflowjs-flow-chrome--position-fixed","fixed"===n),u.classList.toggle("userflowjs-flow-chrome--appearance-modal",t===l.MODAL);const U=null!=t&&t!==l.HIDDEN;u.style.position="",u.style.top="",u.style.left="",u.style.visibility=U?"":"hidden",u.style.animation=U?"":"none",x(d,"width",T(y)),x(d,"padding-top",M),x(d,"padding-bottom",L),p.className=j,x(m,"width",T(e.avatarSize)),x(m,"height",T(e.avatarSize)),m.style.visibility=k,x(m,"top",B),x(m,"right",O),x(m,"bottom",R),x(m,"left",P),b.className=N,b.style.visibility=I,x(b,"top",_),x(b,"right",H),x(b,"bottom",C),x(b,"left",S),f.className=D}({layoutState:B,width:W,position:ct,absoluteWidth:S,root:o,bubble:i,bubbleFrameRoot:vt,avatar:d,avatarNotch:p,modalBackdrop:k,dir:gt})),!et){const t=vt.offsetHeight,o=g()-2*(w()<800?0:16)-(H.avatarType===r.NONE?0:R===l.BUBBLE?20+H.avatarSize:R===l.MODAL?H.avatarSize/2:0),a=Math.min(t,o);if(R&&a!==B.bubbleFrameHeight){if(B.bubbleFrameHeight=a,x(u,"height",T(a)),E(u)&&u.contentDocument){u.contentDocument.documentElement.style.overflowY=t<=o?"hidden":"scroll"}e=!0}}if(e&&R){let t=N;if(R===l.TOOLTIP){(B.tooltipTargetParams&&B.tooltipTargetParams.targetEl)!==(B.prevTooltipTargetParams&&B.prevTooltipTargetParams.targetEl)&&(t=!0)}B.prevTooltipTargetParams=B.tooltipTargetParams,function({layoutState:t,animateIn:e,position:o,absoluteWidth:a,absoluteHeight:i,desiredTooltipPlacement:u,root:d,bubble:p,tooltipNotch:m,tooltipBackdrop:b,tooltipBlockTop:f,tooltipBlockRight:h,tooltipBlockBottom:E,tooltipBlockLeft:v,dir:y}){const{appearance:L,theme:j,tooltipTargetParams:k,backdrop:B,backdropPadding:O}=t,{bubblePlacement:R}=j,P=16,N=j.tooltipNotchSize,H=10,{width:C,height:S}=p.getBoundingClientRect(),D="absolute"===o?a||1024:T(w()),U="absolute"===o?i||768:T(g());let F=0,W=0,z="userflowjs-bubble__tooltip-notch",A="hidden",V=null,G=null,$=null,K=null,Y="userflowjs-tooltip-backdrop",X=null,q=null,J=null,Q=null,Z=null,tt=null,et=null,ot=null,at="userflowjs-tooltip-block userflowjs-tooltip-block--top",lt=null,rt=null,it="userflowjs-tooltip-block userflowjs-tooltip-block--right",st=null,nt=null,ct="userflowjs-tooltip-block userflowjs-tooltip-block--bottom",ut=null,dt=null,pt="userflowjs-tooltip-block userflowjs-tooltip-block--left",mt=null,bt=null;switch(L){case l.BUBBLE:F=R===s.TOP_LEFT||R===s.BOTTOM_LEFT?j.bubbleX:R===s.TOP_CENTER||R===s.CENTER||R===s.BOTTOM_CENTER?(D-C)/2:D-C-j.bubbleX,W=R===s.TOP_LEFT||R===s.TOP_CENTER||R===s.TOP_RIGHT?j.bubbleY:R===s.CENTER?(U-S)/2:U-S-j.bubbleY,"rtl"===y&&(F=D-F-C),F=Math.max(0,Math.min(D-C,F)),W=Math.max(0,Math.min(U-S,W));break;case l.MODAL:{let t=P;j.avatarType!==r.NONE&&(t+=j.avatarSize/2),F=P+(D-2*P-C)/2,W=t+(U-t-P-S)/2;break}case l.TOOLTIP:{let e;if(k){let{targetRect:a,viewportClipRect:l}=k;if("absolute"===o){const t=d.offsetParent.getBoundingClientRect();l={top:0,right:D,bottom:U,left:0},a={top:a.top-t.top,right:a.right-t.left,bottom:a.bottom-t.top,left:a.left-t.left,width:a.width,height:a.height}}let r=0;if(B){const{paddingTop:t,paddingRight:e,paddingBottom:o,paddingLeft:l}=function(t){if(!t||"0"===t)return{paddingTop:0,paddingRight:0,paddingBottom:0,paddingLeft:0};const e=t.trim().split(" ");if(1===e.length){const t=_(e[0]);return{paddingTop:t,paddingRight:t,paddingBottom:t,paddingLeft:t}}if(2===e.length){const t=_(e[0]),o=_(e[1]);return{paddingTop:t,paddingRight:o,paddingBottom:t,paddingLeft:o}}return{paddingTop:_(e[0]),paddingRight:_(e[1]),paddingBottom:_(e[2]),paddingLeft:_(e[3])}}(O);a={top:a.top-t,right:a.right+e,bottom:a.bottom+o,left:a.left-l,width:a.width+l+e,height:a.height+t+o},r=Math.min(t,e,o,l)}const i=a,s=j.backdropHighlightType==n.OUTSIDE?j.backdropHighlightSpread:0;if(B&&s&&(a={top:a.top-s,right:a.right+s,bottom:a.bottom+s,left:a.left-s,width:a.width+2*s,height:a.height+2*s}),e=function({targetRect:t,bubbleWidth:e,bubbleHeight:o,containerWidth:a,containerHeight:l,viewportClipRect:r,tooltipNotchSize:i,currentTooltipPlacement:s,desiredTooltipPlacement:n}){if(t.bottom<=r.top)return o+i<=l-r.top?c.BELOW:c.ABOVE;if(t.top>=r.bottom)return o+i<=r.bottom?c.ABOVE:c.BELOW;if(t.right<=r.left)return e+i<=a-r.left?c.RIGHT:c.LEFT;if(t.left>=r.right)return e+i<=r.right?c.LEFT:c.RIGHT;const u=s=>{const n=t.left+t.width/2,u=n>=r.left&&n<=r.right,d=t.top+t.height/2,p=d>=r.top&&d<=r.bottom;switch(s){case c.BELOW:return l-t.bottom>o+i&&u;case c.ABOVE:return t.top>o+i&&u;case c.RIGHT:return a-t.right>e+i&&p;case c.LEFT:return t.left>e+i&&p}};if(n&&u(n))return n;if(s&&u(s))return s;const d=[{placement:c.BELOW,dist:t.top},{placement:c.ABOVE,dist:l-t.bottom},{placement:c.RIGHT,dist:t.left},{placement:c.LEFT,dist:a-t.right}];d.sort(((t,e)=>t.dist-e.dist));for(const{placement:c}of d)if(u(c))return c;return c.BELOW}({targetRect:a,bubbleWidth:C,bubbleHeight:S,containerWidth:D,containerHeight:U,viewportClipRect:l,tooltipNotchSize:N,currentTooltipPlacement:t.tooltipPlacement,desiredTooltipPlacement:u}),e===c.BELOW||e===c.ABOVE?(F=a.left+a.width/2-C/2,F=Math.max(P,Math.min(D-C-P,F)),K=Math.max(H,Math.min(C-H-2*N,a.left+a.width/2-N-F)),e===c.BELOW?V=2*-N:$=2*-N):e===c.RIGHT?(F=a.right+N,F=Math.max(F,l.left+N),F=Math.min(F,l.right+N),F=Math.max(F,N),F=Math.min(F,D-C)):(F=a.left-N-C,F=Math.max(F,l.left-C-N),F=Math.min(F,l.right-C-N),F=Math.max(F,0),F=Math.min(F,D-C-N)),e===c.LEFT||e===c.RIGHT?(W=a.top+a.height/2-S/2,W=Math.max(P,Math.min(U-S-P,W)),V=Math.max(H,Math.min(S-H-2*N,a.top+a.height/2-N-W)),e===c.LEFT?G=2*-N:K=2*-N):e===c.BELOW?(W=a.bottom+N,W=Math.max(W,l.top+N),W=Math.min(W,l.bottom+N),W=Math.max(W,N),W=Math.min(W,U-S)):(W=a.top-N-S,W=Math.max(W,l.top-S-N),W=Math.min(W,l.bottom-S-N),W=Math.max(W,0),W=Math.min(W,U-S-N)),B){const t=window.getComputedStyle(k.targetEl);X=Math.max(0,i.top),q=Math.max(0,D-i.right),J=Math.max(0,U-i.bottom),Q=Math.max(0,i.left),Z=Math.max(0,M(t.borderTopLeftRadius)+r),tt=Math.max(0,M(t.borderTopRightRadius)+r),et=Math.max(0,M(t.borderBottomRightRadius)+r),ot=Math.max(0,M(t.borderBottomLeftRadius)+r),lt=Math.max(0,i.right),rt=Math.max(0,i.top),st=Math.max(0,i.right),nt=Math.max(0,i.bottom),ut=Math.max(0,i.left),dt=Math.max(0,i.bottom),mt=Math.max(0,i.left),bt=Math.max(0,i.top)}}else e=u||c.BELOW,e!==c.BELOW&&e!==c.ABOVE||(K=C/2-N,e===c.BELOW?V=2*-N:$=2*-N),e!==c.LEFT&&e!==c.RIGHT||(V=S/2-N,e===c.LEFT?G=2*-N:K=2*-N);t.tooltipPlacement=e,z+=` userflowjs-bubble__tooltip-notch--${e.toLowerCase()}`,A="",B&&(Y+=" userflowjs-tooltip-backdrop--visible",at+=" userflowjs-tooltip-block--visible",it+=" userflowjs-tooltip-block--visible",ct+=" userflowjs-tooltip-block--visible",pt+=" userflowjs-tooltip-block--visible");break}}p.style.transition="";let ft=F,ht=W;if(e&&(p.style.opacity="0",L===l.TOOLTIP)){const e=24;switch(t.tooltipPlacement){case c.BELOW:W+=e;break;case c.ABOVE:W-=e;break;case c.RIGHT:F+=e;break;case c.LEFT:F-=e}}"relative"!==o&&I(p,F,W);if(m.className=z,m.style.visibility=A,x(m,"top",V),x(m,"right",G),x(m,"bottom",$),x(m,"left",K),b.className=Y,x(b,"top",X),x(b,"right",q),x(b,"bottom",J),x(b,"left",Q),x(b,"border-top-left-radius",Z),x(b,"border-top-right-radius",tt),x(b,"border-bottom-right-radius",et),x(b,"border-bottom-left-radius",ot),f.className=at,x(f,"width",lt),x(f,"height",rt),h.className=it,x(h,"left",st),x(h,"height",nt),E.className=ct,x(E,"left",ut),x(E,"top",dt),v.className=pt,x(v,"width",mt),x(v,"top",bt),e){p.offsetWidth;const t="opacity 250ms linear";L===l.TOOLTIP?p.style.transition=`${t}, transform 500ms cubic-bezier(0.25, 0.8, 0.5, 1)`:p.style.transition=t,p.style.opacity="1","relative"!==o&&I(p,ft,ht)}}({layoutState:B,animateIn:t,position:ct,absoluteWidth:S,absoluteHeight:D,desiredTooltipPlacement:ut,root:o,bubble:i,tooltipNotch:m,tooltipBackdrop:b,tooltipBlockTop:f,tooltipBlockRight:v,tooltipBlockBottom:y,tooltipBlockLeft:j,dir:gt})}if(R===l.TOOLTIP){const t=O&&O.targetEl;t&&B.stepKeyScrolledIntoView!==U&&B.targetScrolledIntoView!==t&&(B.stepKeyScrolledIntoView=U,B.targetScrolledIntoView=t,function(t){if(a.customScrollIntoView)return void a.customScrollIntoView(t);const{scrollPadding:e}=a;if(e&&L(t)===document.scrollingElement){const o=e.top||0,a=e.right||0,l=e.bottom||0,r=e.left||0;let i=0,s=0;const n=t.getBoundingClientRect(),c=w(),u=g();if(n.top<o?i=n.top-o:n.bottom>u-l&&(i=n.bottom-u+l),n.left<r?s=n.left-r:n.right>c-a&&(s=n.right-c+a),0!=i||0!=s)return void window.scrollBy({top:i,left:s,behavior:"smooth"})}try{t.scrollIntoView({behavior:"smooth",block:"nearest"})}catch(o){console.warn("Userflow.js: scrollIntoView error (falling back to no options).",o),t.scrollIntoView()}}(t))}else B.stepKeyScrolledIntoView=void 0,B.targetScrolledIntoView=null;Vt(P),zt(R)}),[St,vt,U,F,W,H,ct,S,D,V,ut,$,dt,et,Vt,gt]),$t=t.useRef(Gt);$t.current=Gt;const Kt=t.useRef(!1);t.useEffect((()=>{const t=()=>{Kt.current=!0};return window.addEventListener("pagehide",t),()=>window.removeEventListener("pagehide",t)}),[]);const Yt=()=>{window.clearTimeout(Ft.current.tooltipTargetMissingTimeout),Ft.current.tooltipTargetMissingTimeout=void 0};t.useEffect((()=>Yt),[]);const Xt=t.useCallback((()=>{const t=Ft.current;if(t.tooltipTargetParams=null,V||(t.tooltipPlacement=null),F!==l.TOOLTIP)return Yt(),void(t.tooltipTargetMissing=!1);if(!V&&!t.tooltipTargetMissingTimeout){t.tooltipTargetMissing=!1;const e=!A||v(A)||A.type!==i.AUTO||A.autoData?1e3*parseFloat(H.tooltipMissingToleranceSeconds):1;t.tooltipTargetMissingTimeout=window.setTimeout((()=>{if(!Kt.current){if(A&&!v(A)){let t=A.autoData;if(A.autoData)try{t=JSON.parse(A.autoData)}catch(e){}console.warn("Userflow.js: Tooltip target not found on page.\n",{type:A.type,autoData:t,excludeText:A.excludeText,precision:A.precision,text:A.text,css:A.css})}Yt(),t.tooltipTargetMissing=!0,$t.current()}}),e)}$t.current()}),[F,V,A,H.tooltipMissingToleranceSeconds]),qt=t.useCallback((t=>{const e=Ft.current;Yt(),e.tooltipTargetParams&&e.tooltipTargetParams.targetEl!==t.targetEl&&(e.tooltipPlacement=null),e.tooltipTargetParams=t,Gt({forceUpdatePosition:!0})}),[Gt]);f({selector:F===l.TOOLTIP&&A||null,targetMoved:qt,targetLost:Xt,onTargetClick:q});const Jt=t.useCallback((()=>Gt({forceAppearanceLayout:!0})),[Gt]);e(Jt),t.useEffect((()=>{if(!vt||et||"function"!=typeof y)return;let t;const e=new y((()=>{t||(t=window.requestAnimationFrame((()=>{t=void 0,$t.current()})))}));return e.observe(vt,{childList:!0,attributes:!0,subtree:!0}),()=>{e.disconnect(),t&&window.cancelAnimationFrame(t)}}),[vt,et]),t.useLayoutEffect((()=>{$t.current()})),t.useLayoutEffect((()=>{"absolute"===ct&&Gt({forceAppearanceLayout:!0})}),[ct,S,D]);const Qt=t=>{t.preventDefault(),t.stopPropagation()};return function(e,o){const l=window.Intercom;t.useEffect((()=>{if(o&&e.autoHideIntercom&&"function"==typeof l&&!a.autoHide3pDisabled){try{l("update",{hide_default_launcher:!0})}catch(t){console.warn("Userflow.js: Error when hiding Intercom launcher",t)}return()=>{if(!a.autoHide3pDisabled)try{l("update",{hide_default_launcher:!1})}catch(t){console.warn("Userflow.js: Error when unhiding Intercom launcher",t)}}}}),[l,e.autoHideIntercom,o]);const r=window.$crisp;t.useEffect((()=>{if(o&&e.autoHideCrisp&&r&&!a.autoHide3pDisabled){try{r.push(["do","chat:hide"])}catch(t){console.warn("Userflow.js: Error when hiding Crisp Chat",t)}return()=>{if(!a.autoHide3pDisabled)try{r.push(["do","chat:show"])}catch(t){console.warn("Userflow.js: Error when unhiding Crisp Chat",t)}}}}),[r,e.autoHideCrisp,o]);const i=window.HubSpotConversations;t.useEffect((()=>{if(o&&e.autoHideHubspot&&i&&!a.autoHide3pDisabled){try{i.widget.remove()}catch(t){console.warn("Userflow.js: Error when hiding HubSpot Chat",t)}return()=>{if(!a.autoHide3pDisabled)try{i.widget.load()}catch(t){console.warn("Userflow.js: Error when unhiding HubSpot Chat",t)}}}}),[i,e.autoHideHubspot,o]);const s=window.drift;t.useEffect((()=>{if(o&&e.autoHideDrift&&s&&!a.autoHide3pDisabled){try{s.api.widget.hide()}catch(t){console.warn("Userflow.js: Error when hiding Drift Chat",t)}return()=>{if(!a.autoHide3pDisabled)try{s.api.widget.show()}catch(t){console.warn("Userflow.js: Error when unhiding Drift Chat",t)}}}}),[s,e.autoHideDrift,o])}(H,!!lt&&Wt===l.BUBBLE),t.createElement("div",{ref:wt,"data-testid":"flow-chrome",className:"userflowjs-flow-chrome userflowjs-theme-root",style:k(H),dir:gt},t.createElement("div",{className:"userflowjs-bubble",ref:Tt,style:{zIndex:bt}},t.createElement("div",{className:b({"userflowjs-bubble-outline":!0,[`userflowjs-bubble-outline--bubble-placement-${(H.bubblePlacement||"").toLowerCase().replace(/_/,"-")}`]:!0,"userflowjs-bubble-outline--minimizable":!!at,"userflowjs-bubble-outline--minimized":Dt})},t.createElement("div",{className:"userflowjs-bubble__frame-wrapper",...it},t.createElement(o,{className:"userflowjs-bubble__frame",elRef:Et,stylesheet:p,theme:H,onStylesheetsLoad:_t,noIframe:et,title:F.toLowerCase()},t.createElement("div",{className:"userflowjs-bubble-frame-root",ref:t=>{rt&&rt(t),yt(t)},style:z?{backgroundImage:`url("${encodeURI(z)}")`}:void 0},nt,R.flowBranding&&t.createElement("div",{className:"userflowjs-bubble-made-with-userflow"},t.createElement("div",{className:"userflowjs-bubble-made-with-userflow__absolute"},t.createElement(pt,{company:R},t.createElement(m,null),t.createElement("div",null,"Made with Userflow"))))))),t.createElement("div",{ref:Mt,className:"userflowjs-bubble__avatar-notch"})),t.createElement(o,{className:b({"userflowjs-bubble__avatar":!0,"userflowjs-bubble__avatar--minimizable":!!at,"userflowjs-bubble__avatar--speaking":!!tt}),elRef:Lt,stylesheet:O,theme:H,onStylesheetsLoad:Ct,noIframe:et,ariaHidden:!0,title:F.toLowerCase()},t.createElement("div",{className:b({"userflowjs-avatar-frame-root":!0,"userflowjs-avatar-frame-root--minimizable":!!at}),onClick:at?()=>Ut((t=>!t)):void 0},t.createElement(P,{theme:H}))),t.createElement("div",{ref:jt,className:"userflowjs-bubble__tooltip-notch"})),t.createElement("div",{ref:kt,className:"userflowjs-tooltip-backdrop",onMouseDown:Qt,style:{zIndex:ft,pointerEvents:K?void 0:"none"}}),t.createElement("div",{ref:Bt,className:"userflowjs-tooltip-block",onMouseDown:Qt,style:{zIndex:ft}}),t.createElement("div",{ref:Ot,className:"userflowjs-tooltip-block",onMouseDown:Qt,style:{zIndex:ft}}),t.createElement("div",{ref:Rt,className:"userflowjs-tooltip-block",onMouseDown:Qt,style:{zIndex:ft}}),t.createElement("div",{ref:Pt,className:"userflowjs-tooltip-block",onMouseDown:Qt,style:{zIndex:ft}}),t.createElement("div",{ref:Nt,className:"userflowjs-modal-backdrop",onMouseDown:Qt,onClick:Q,style:{zIndex:ft}}),st&&st({visible:At,bubbleFrame:Et.current}))},P=({theme:e})=>{const o="https://js.userflow.com/cartoon-avatars-no-bg/";let a;return a=e.avatarType===r.ASSET&&e.avatarAsset?e.avatarAsset.assetUrl:e.avatarType===r.CARTOON&&e.avatarName?o+e.avatarName+".svg?3":e.avatarType===r.URL&&e.avatarUrl?e.avatarUrl:o+"none.svg",t.createElement("img",{src:a,alt:""})},N=({company:e,children:o})=>t.createElement("a",{href:"https://userflow.com/?utm_source=made-with-userflow&utm_medium=link&utm_campaign=made-with-userflow-"+e.slug,target:"_blank",rel:"noopener noreferrer"},o);function x(t,e,o){null==o?t.style.removeProperty(e):t.style.setProperty(e,"number"==typeof o?o+"px":o,"important")}function I(t,e,o){e=Math.round(e),o=Math.round(o),t.style.transform=`translate3d(${e}px, ${o}px, 0px)`}function _(t){const e=parseInt(t,10);return isNaN(e)?0:e}export{R as F};
|
package/LauncherApp.js
CHANGED
|
@@ -1,2 +1 @@
|
|
|
1
|
-
|
|
2
|
-
//# sourceMappingURL=LauncherApp.js.map
|
|
1
|
+
import{r as e}from"./vendor.react.js";import{P as t,Q as r,W as o,L as s,X as n,Y as a,Z as c,O as i}from"./userflow.js";import{u as l,r as u}from"./use-selector-element-monitoring.js";import{m as E,d,S as p,R as m,h as T}from"./bubble-frame.styl.js";import{u as f,i as h}from"./client-context.js";import{o as w}from"./vendor.obj-str.js";import{a as g,c as C,g as v,D as R,u as b}from"./stylesheets.js";import{w as L,L as j,f as A,S as O}from"./flow-host.styl.js";import{F as N}from"./FlowChrome.js";import{B as _}from"./BubbleToolbar.js";import{b as k,r as I}from"./flow-condition-types.js";import{T as H}from"./Trigger.js";import"./vendor.object-assign.js";import"./vendor.phoenix.js";import"./vendor.uuid.js";import"./vendor.fortawesome.pro-solid-svg-icons.js";import"./vendor.react-i18next.js";import"./vendor.babel.runtime.js";import"./vendor.i18next.js";import"./vendor.fortawesome.pro-regular-svg-icons.js";import"./use-window-resize.js";import"./vendor.react-dom.js";import"./vendor.scheduler.js";import"./logomark.js";import"./vendor.date-fns.js";const x=e.forwardRef((({appearance:r,icon:o,buttonText:s,theme:n,noAnimation:a,noFixed:c,onClick:i,onMouseEnter:l,onMouseLeave:u,noPointerEvents:E,zIndex:d},p)=>{const{loaded:m}=g(window,A,n),T=n&&r===t.BUTTON?n:null,{loaded:f}=C(window,T),h={"userflowjs-launcher":!0,"userflowjs-launcher--activate-on-click":!!i,"userflowjs-fixed-widget":!c},b={ref:p,style:{...v(n),zIndex:d||L(j),pointerEvents:E?"none":void 0},onClick:i,onMouseEnter:l,onMouseLeave:u};if(!m||!f)return null;switch(r){case t.BEACON:return e.createElement("div",{className:w({...h,"userflowjs-beacon":!0,"userflowjs-beacon--pulse":!a,"userflowjs-beacon--pulse-still":!!a}),...b},e.createElement("div",{className:"userflowjs-beacon__ring"}),e.createElement("div",{className:"userflowjs-beacon__ring"}));case t.BUTTON:return e.createElement("div",{className:w({...h,"userflowjs-launcher--button":!0}),...b},s);case t.HIDDEN:return null;case t.ICON:return e.createElement("div",{className:w({...h,"userflowjs-launcher--icon":!0}),...b},e.createElement(R,{icon:o||"solid/info-circle",size:n.launcherIconSize}))}})),M=({session:w,active:g})=>{const C=f(),{version:v}=w,R=w.id,L=w.flow.id,j=w.version.launcher,[A,M]=e.useState(null),G=b(v.theme),U=w.locale?w.locale.standardLocaleId:G.languageId;e.useEffect((()=>{h.changeLanguage(U)}),[U]);const{activateOn:P}=j,y=j.activeWhileTooltipHover||j.buttons.length>0,B=j.hiddenWhileActive&&P!==r.LAUNCHER_HOVER,K=!g||!B,D=P===r.LAUNCHER_CLICK||P===r.TARGET_CLICK||P===r.LAUNCHER_TARGET_CLICK||y,F=e.useRef({}),S=e.useCallback((()=>{let e=null;const{targetEl:r,clipEl:s,viewportClipRect:n}=F.current,i=A;let l;i&&(r&&s&&n&&(e=function({targetEl:e,subjectEl:t,clipEl:r,viewportClipRect:s,position:n,subjectAnchor:i}){const l=I(e);if(0===l.width||0===l.height)return null;const u=t.getBoundingClientRect();let E=0,d=0,{side:p,align:m}=n;p===o.AUTO&&(p=o.TOP,m=a.END);switch(p){case o.TOP:d=l.top;break;case o.BOTTOM:d=l.bottom;break;case o.LEFT:E=l.left;break;case o.RIGHT:E=l.right}switch(p){case o.TOP:case o.BOTTOM:switch(m){case a.START:E=l.left;break;case a.CENTER:E=l.left+l.width/2;break;case a.END:E=l.right}break;case o.LEFT:case o.RIGHT:switch(m){case a.START:d=l.top;break;case a.CENTER:d=l.top+l.height/2;break;case a.END:d=l.bottom}}n.xUnit===c.PERCENT?E+=n.xOffset/100*l.width:E+=n.xOffset;n.yUnit===c.PERCENT?d+=n.yOffset/100*l.height:d+=n.yOffset;switch(i){case"center":E-=u.width/2,d-=u.height/2;break;case"side":switch(p){case o.TOP:d-=u.height;break;case o.LEFT:E-=u.width}switch(p){case o.TOP:case o.BOTTOM:switch(m){case a.CENTER:E-=u.width/2;break;case a.END:E-=u.width}break;case o.LEFT:case o.RIGHT:switch(m){case a.CENTER:d-=u.height/2;break;case a.END:d-=u.height}}}if(E+u.width<s.left||E>s.right)return null;if(d+u.height<s.top||d>s.bottom)return null;const T=I(r);return E=Math.max(E,T.left-r.scrollLeft),d=Math.max(d,T.top-r.scrollTop),E=Math.round(E),d=Math.round(d),{left:E,top:d}}({targetEl:r,subjectEl:i,clipEl:s,viewportClipRect:n,position:j.targetPosition,subjectAnchor:j.appearance===t.BEACON?"center":"side"})),u((()=>{!function(e,t){e.classList.toggle("userflowjs-fixed-widget--visible",null!=t),t&&(e.style.transform=`translate3d(${t.left}px, ${t.top}px, 0)`)}(i,e)}))),l=j.appearance===t.HIDDEN?!!r:!!e,!l||F.current.seenTriggered||R||(F.current.seenTriggered=!0,C.launcherSeen(L))}),[A,j,C,R,L]);e.useLayoutEffect((()=>{S()}),[S]);const z=e.useRef(!1),V=e.useRef(!1),W=e.useRef(!1),$=e.useRef(),Q=()=>{X();$.current=window.setTimeout((()=>Z.current()),250)},X=e.useCallback((()=>{window.clearTimeout($.current)}),[]),Y=()=>{if(P===r.LAUNCHER_CLICK||P===r.TARGET_CLICK||P===r.LAUNCHER_TARGET_CLICK)return;const e=P===r.LAUNCHER_HOVER||P===r.LAUNCHER_TARGET_HOVER,t=P===r.TARGET_HOVER||P===r.LAUNCHER_TARGET_HOVER;z.current&&(!B||!g)&&e||V.current&&t||W.current&&y?q():J()},Z=e.useRef(Y);Z.current=Y;const q=()=>{g||(X(),j.tooltipEnabled?C.activateLauncher(w):(C.activateLauncher(w),C.deactivateLauncher(w)),T(C,w,j.actions))},J=e.useCallback((()=>{g&&(X(),C.deactivateLauncher(w))}),[g,C,w,X]),ee=()=>{g?J():q()},te=e.useCallback((({targetEl:e,clipEl:t,viewportClipRect:r})=>{F.current.targetEl=e,F.current.clipEl=t,F.current.viewportClipRect=r,S()}),[S]),re=e.useCallback((()=>{F.current.targetEl=void 0,F.current.clipEl=void 0,S(),J()}),[S,J]);l({selector:j.targetSelector,targetMoved:te,targetLost:re,onTargetMouseEnter:()=>{V.current=!0,Q()},onTargetMouseLeave:()=>{V.current=!1,Q()},onTargetClick:P===r.TARGET_CLICK||P===r.LAUNCHER_TARGET_CLICK?ee:void 0}),e.useEffect((()=>{if(!g)return;const e=e=>{const t=e.target;A&&A.contains(t)||(P===r.TARGET_CLICK||P===r.LAUNCHER_TARGET_CLICK)&&F.current.targetEl&&F.current.targetEl.contains(t)||J()};return window.addEventListener("click",e,{capture:!0}),()=>window.removeEventListener("click",e,{capture:!0})}),[g,P,A,J]);const oe=function(e){switch(e.side){case o.AUTO:return null;case o.TOP:return i.ABOVE;case o.BOTTOM:return i.BELOW;case o.LEFT:return i.LEFT;case o.RIGHT:return i.RIGHT}}(j.tooltipPosition.side===o.AUTO?j.targetPosition:j.tooltipPosition),se=e.useMemo((()=>j.content&&E(d(j.content),{buttons:j.buttons})),[j.content,j.buttons]);return e.createElement(p.Provider,{value:w},K&&e.createElement(x,{ref:M,appearance:j.appearance,icon:j.icon,buttonText:j.buttonText,theme:G,onClick:P===r.LAUNCHER_CLICK||P===r.LAUNCHER_TARGET_CLICK?ee:void 0,onMouseEnter:()=>{z.current=!0,Q()},onMouseLeave:()=>{z.current=!1,Q()},noPointerEvents:P===r.TARGET_HOVER,zIndex:j.zIndex}),g&&e.createElement(O,null,e.createElement(N,{company:w.flow.company,theme:G,position:"fixed",stepAppearance:s.TOOLTIP,width:j.tooltipWidth,tooltipSelector:j.tooltipAnchor===n.TARGET?F.current.targetEl:A,tooltipPlacement:oe,frameWrapperHtmlAttributes:{onMouseEnter:()=>{W.current=!0,Q()},onMouseLeave:()=>{W.current=!1,Q()}},rootChildren:()=>e.createElement(e.Fragment,null,j.triggers.map((t=>e.createElement(H,{key:t.id,trigger:t}))))},e.createElement(_,{draftMode:w.draftMode,close:D?J:void 0}),e.createElement("div",{className:"userflowjs-bubble-content"},e.createElement(m,{doc:se,lookupAttribute:k(w.data),buttons:j.buttons})))))};export default M;export{M as LauncherApp};
|
package/NotificationsApp.js
CHANGED
|
@@ -1,2 +1 @@
|
|
|
1
|
-
|
|
2
|
-
//# sourceMappingURL=NotificationsApp.js.map
|
|
1
|
+
import{r as o}from"./vendor.react.js";import{u as t}from"./client-context.js";import{w as e,N as s,f as i}from"./flow-host.styl.js";import{a as n,D as r}from"./stylesheets.js";import{a}from"./vendor.fortawesome.pro-regular-svg-icons.js";import"./vendor.object-assign.js";import"./vendor.i18next.js";import"./vendor.react-i18next.js";import"./vendor.babel.runtime.js";import"./userflow.js";import"./vendor.phoenix.js";import"./vendor.uuid.js";import"./vendor.fortawesome.pro-solid-svg-icons.js";import"./flow-condition-types.js";import"./vendor.date-fns.js";const m=({notifications:t})=>{const{loaded:r}=n(window,i);return r?o.createElement("div",{className:"userflowjs-notifications",style:{zIndex:e(s)}},t.map((t=>o.createElement(l,{key:t.id,notification:t})))):null},l=({notification:e})=>{const s=t();return o.createElement("div",{className:"userflowjs-notifications__toast"},o.createElement("div",{className:"userflowjs-notifications__toast-content"},o.createElement("span",{className:"userflowjs-notifications__toast-label"},e.label),e.message),o.createElement("div",{className:"userflowjs-notifications__toast-dismiss",onClick:()=>s.dismissNotification(e.id)},o.createElement(r,{icon:a})))};export default m;export{m as NotificationsApp};
|