@storybook/addon-interactions 7.0.0-alpha.48 → 7.0.0-alpha.49

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/dist/index.mjs CHANGED
@@ -1 +1 @@
1
- var t={};export{t as default};
1
+ var e={};export{e as default};
package/dist/manager.mjs CHANGED
@@ -1,4 +1,4 @@
1
- import{addons as _t,types as pe}from"@storybook/addons";var Y="storybook/interactions",lt=`${Y}/panel`;import ot from"global";import*as i from"react";import{useChannel as ee,useParameter as ne}from"@storybook/api";import{FORCE_REMOUNT as re,IGNORED_EXCEPTION as se,STORY_RENDER_PHASE_CHANGED as ae,STORY_THREW_EXCEPTION as le,PLAY_FUNCTION_THREW_EXCEPTION as ie}from"@storybook/core-events";import{EVENTS as v,CallStates as L}from"@storybook/instrumenter";import*as b from"react";import{AddonPanel as Go,Link as Vo,Placeholder as Jo}from"@storybook/components";import{CallStates as tt}from"@storybook/instrumenter";import{styled as P}from"@storybook/theming";import{transparentize as Xo}from"polished";import p from"react";import{Button as Dt,IconButton as Mt,Icons as $,Separator as Ft,P as Lt,TooltipNote as jt,WithTooltip as D,Bar as Wt}from"@storybook/components";import{CallStates as zt}from"@storybook/instrumenter";import{styled as x}from"@storybook/theming";import Pt from"react";import{CallStates as w}from"@storybook/instrumenter";import{styled as Bt,typography as Z}from"@storybook/theming";var $t=Bt.div(({theme:t,status:o})=>{let e={[w.DONE]:t.color.positive,[w.ERROR]:t.color.negative,[w.ACTIVE]:t.color.warning,[w.WAITING]:t.color.warning}[o];return{padding:"4px 6px 4px 8px;",borderRadius:"4px",backgroundColor:e,color:"white",fontFamily:Z.fonts.base,textTransform:"uppercase",fontSize:Z.size.s1,letterSpacing:3,fontWeight:Z.weight.bold,width:65,textAlign:"center"}}),it=({status:t})=>{let o={[w.DONE]:"Pass",[w.ERROR]:"Fail",[w.ACTIVE]:"Runs",[w.WAITING]:"Runs"}[t];return Pt.createElement($t,{status:t},o)};var Ht=x.div(({theme:t})=>({background:t.background.app,borderBottom:`1px solid ${t.appBorderColor}`,position:"sticky",top:0,zIndex:1})),Rt=x.nav(({theme:t})=>({height:40,display:"flex",alignItems:"center",justifyContent:"space-between",paddingLeft:15})),Gt=x(Dt)(({theme:t})=>({borderRadius:4,padding:6,color:t.textMutedColor,"&:not(:disabled)":{"&:hover,&:focus-visible":{color:t.color.secondary}}})),M=x(jt)(({theme:t})=>({fontFamily:t.typography.fonts.base})),F=x(Mt)(({theme:t})=>({color:t.textMutedColor,margin:"0 3px"})),Vt=x(Ft)({marginTop:0}),Jt=x(Lt)(({theme:t})=>({color:t.textMutedColor,justifyContent:"flex-end",textAlign:"right",whiteSpace:"nowrap",marginTop:"auto",marginBottom:1,paddingRight:15,fontSize:13})),ct=x.div({display:"flex",alignItems:"center"}),Xt=x(F)({marginLeft:9}),Yt=x(Gt)({marginLeft:9,marginRight:9,marginBottom:1,lineHeight:"12px"}),Zt=x(F)(({theme:t,animating:o,disabled:e})=>({opacity:e?.5:1,svg:{animation:o&&`${t.animation.rotate360} 200ms ease-out`}})),pt=({controls:t,controlStates:o,status:e,storyFileName:r,onScrollToEnd:a,isRerunAnimating:l,setIsRerunAnimating:s})=>{let c=e===zt.ERROR?"Scroll to error":"Scroll to end";return p.createElement(Ht,null,p.createElement(Wt,null,p.createElement(Rt,null,p.createElement(ct,null,p.createElement(it,{status:e}),p.createElement(Yt,{onClick:a,disabled:!a},c),p.createElement(Vt,null),p.createElement(D,{hasChrome:!1,tooltip:p.createElement(M,{note:"Go to start"})},p.createElement(Xt,{"aria-label":"Go to start",containsIcon:!0,onClick:t.start,disabled:!o.start},p.createElement($,{icon:"rewind"}))),p.createElement(D,{hasChrome:!1,tooltip:p.createElement(M,{note:"Go back"})},p.createElement(F,{"aria-label":"Go back",containsIcon:!0,onClick:t.back,disabled:!o.back},p.createElement($,{icon:"playback"}))),p.createElement(D,{hasChrome:!1,tooltip:p.createElement(M,{note:"Go forward"})},p.createElement(F,{"aria-label":"Go forward",containsIcon:!0,onClick:t.next,disabled:!o.next},p.createElement($,{icon:"playnext"}))),p.createElement(D,{hasChrome:!1,tooltip:p.createElement(M,{note:"Go to end"})},p.createElement(F,{"aria-label":"Go to end",containsIcon:!0,onClick:t.end,disabled:!o.end},p.createElement($,{icon:"fastforward"}))),p.createElement(D,{hasChrome:!1,tooltip:p.createElement(M,{note:"Rerun"})},p.createElement(Zt,{"aria-label":"Rerun",containsIcon:!0,onClick:t.rerun,onAnimationEnd:()=>s(!1),animating:l,disabled:l},p.createElement($,{icon:"sync"})))),r&&p.createElement(ct,null,p.createElement(Jt,null,r)))))};import*as m from"react";import{IconButton as vo,Icons as No,TooltipNote as Po,WithTooltip as Bo}from"@storybook/components";import{CallStates as O}from"@storybook/instrumenter";import{styled as T,typography as R}from"@storybook/theming";import{transparentize as $o}from"polished";import d from"react";import{styled as yt,typography as ho}from"@storybook/theming";import{ObjectInspector as Ut}from"@devtools-ds/object-inspector";import{useTheme as U}from"@storybook/theming";import n,{Fragment as qt}from"react";var Kt={base:"#444",nullish:"#7D99AA",string:"#16B242",number:"#5D40D0",boolean:"#f41840",objectkey:"#698394",instance:"#A15C20",function:"#EA7509",muted:"#7D99AA",tag:{name:"#6F2CAC",suffix:"#1F99E5"},date:"#459D9C",error:{name:"#D43900",message:"#444"},regex:{source:"#A15C20",flags:"#EA7509"},meta:"#EA7509",method:"#0271B6"},Qt={base:"#eee",nullish:"#aaa",string:"#5FE584",number:"#6ba5ff",boolean:"#ff4191",objectkey:"#accfe6",instance:"#E3B551",function:"#E3B551",muted:"#aaa",tag:{name:"#f57bff",suffix:"#8EB5FF"},date:"#70D4D3",error:{name:"#f40",message:"#eee"},regex:{source:"#FAD483",flags:"#E3B551"},meta:"#FAD483",method:"#5EC1FF"},y=()=>{let{base:t}=U();return t==="dark"?Qt:Kt},to=/[^A-Z0-9]/i,dt=/[\s.,…]+$/gm,ut=(t,o)=>{if(t.length<=o)return t;for(let e=o-1;e>=0;e-=1)if(to.test(t[e])&&e>10)return`${t.slice(0,e).replace(dt,"")}\u2026`;return`${t.slice(0,o).replace(dt,"")}\u2026`},oo=t=>{try{return JSON.stringify(t,null,1)}catch{return String(t)}},gt=(t,o)=>t.flatMap((e,r)=>r===t.length-1?[e]:[e,n.cloneElement(o,{key:`sep${r}`})]),A=({value:t,nested:o,showObjectInspector:e,callsById:r,...a})=>{switch(!0){case t===null:return n.createElement(eo,{...a});case t===void 0:return n.createElement(no,{...a});case Array.isArray(t):return n.createElement(lo,{...a,value:t,callsById:r});case typeof t=="string":return n.createElement(ro,{...a,value:t});case typeof t=="number":return n.createElement(so,{...a,value:t});case typeof t=="boolean":return n.createElement(ao,{...a,value:t});case Object.prototype.hasOwnProperty.call(t,"__date__"):return n.createElement(go,{...a,...t.__date__});case Object.prototype.hasOwnProperty.call(t,"__error__"):return n.createElement(mo,{...a,...t.__error__});case Object.prototype.hasOwnProperty.call(t,"__regexp__"):return n.createElement(yo,{...a,...t.__regexp__});case Object.prototype.hasOwnProperty.call(t,"__function__"):return n.createElement(po,{...a,...t.__function__});case Object.prototype.hasOwnProperty.call(t,"__symbol__"):return n.createElement(fo,{...a,...t.__symbol__});case Object.prototype.hasOwnProperty.call(t,"__element__"):return n.createElement(uo,{...a,...t.__element__});case Object.prototype.hasOwnProperty.call(t,"__class__"):return n.createElement(co,{...a,...t.__class__});case Object.prototype.hasOwnProperty.call(t,"__callId__"):return n.createElement(z,{call:r.get(t.__callId__),callsById:r});case Object.prototype.toString.call(t)==="[object Object]":return n.createElement(io,{value:t,showInspector:e,...a});default:return n.createElement(bo,{value:t,...a})}},eo=t=>{let o=y();return n.createElement("span",{style:{color:o.nullish},...t},"null")},no=t=>{let o=y();return n.createElement("span",{style:{color:o.nullish},...t},"undefined")},ro=({value:t,...o})=>{let e=y();return n.createElement("span",{style:{color:e.string},...o},JSON.stringify(ut(t,50)))},so=({value:t,...o})=>{let e=y();return n.createElement("span",{style:{color:e.number},...o},t)},ao=({value:t,...o})=>{let e=y();return n.createElement("span",{style:{color:e.boolean},...o},String(t))},lo=({value:t,nested:o=!1,callsById:e})=>{let r=y();if(o)return n.createElement("span",{style:{color:r.base}},"[\u2026]");let a=t.slice(0,3).map(s=>n.createElement(A,{key:JSON.stringify(s),value:s,nested:!0,callsById:e})),l=gt(a,n.createElement("span",null,", "));return t.length<=3?n.createElement("span",{style:{color:r.base}},"[",l,"]"):n.createElement("span",{style:{color:r.base}},"(",t.length,") [",l,", \u2026]")},io=({showInspector:t,value:o,nested:e=!1})=>{let r=U().base==="dark",a=y();if(t)return n.createElement(n.Fragment,null,n.createElement(Ut,{id:"interactions-object-inspector",data:o,includePrototypes:!1,colorScheme:r?"dark":"light"}));if(e)return n.createElement("span",{style:{color:a.base}},"{\u2026}");let l=gt(Object.entries(o).slice(0,2).map(([s,c])=>n.createElement(qt,{key:s},n.createElement("span",{style:{color:a.objectkey}},s,": "),n.createElement(A,{value:c,nested:!0}))),n.createElement("span",null,", "));return Object.keys(o).length<=2?n.createElement("span",{style:{color:a.base}},"{ ",l," }"):n.createElement("span",{style:{color:a.base}},"(",Object.keys(o).length,") ","{ ",l,", \u2026 }")},co=({name:t})=>{let o=y();return n.createElement("span",{style:{color:o.instance}},t)},po=({name:t})=>{let o=y();return t?n.createElement("span",{style:{color:o.function}},t):n.createElement("span",{style:{color:o.nullish,fontStyle:"italic"}},"anonymous")},uo=({prefix:t,localName:o,id:e,classNames:r=[],innerText:a})=>{let l=t?`${t}:${o}`:o,s=y();return n.createElement("span",{style:{wordBreak:"keep-all"}},n.createElement("span",{key:`${l}_lt`,style:{color:s.muted}},"<"),n.createElement("span",{key:`${l}_tag`,style:{color:s.tag.name}},l),n.createElement("span",{key:`${l}_suffix`,style:{color:s.tag.suffix}},e?`#${e}`:r.reduce((c,u)=>`${c}.${u}`,"")),n.createElement("span",{key:`${l}_gt`,style:{color:s.muted}},">"),!e&&r.length===0&&a&&n.createElement(n.Fragment,null,n.createElement("span",{key:`${l}_text`},a),n.createElement("span",{key:`${l}_close_lt`,style:{color:s.muted}},"<"),n.createElement("span",{key:`${l}_close_tag`,style:{color:s.tag.name}},"/",l),n.createElement("span",{key:`${l}_close_gt`,style:{color:s.muted}},">")))},go=({value:t})=>{let[o,e,r]=t.split(/[T.Z]/),a=y();return n.createElement("span",{style:{whiteSpace:"nowrap",color:a.date}},o,n.createElement("span",{style:{opacity:.7}},"T"),e==="00:00:00"?n.createElement("span",{style:{opacity:.7}},e):e,r==="000"?n.createElement("span",{style:{opacity:.7}},".",r):`.${r}`,n.createElement("span",{style:{opacity:.7}},"Z"))},mo=({name:t,message:o})=>{let e=y();return n.createElement("span",{style:{color:e.error.name}},t,o&&": ",o&&n.createElement("span",{style:{color:e.error.message},title:o.length>50?o:""},ut(o,50)))},yo=({flags:t,source:o})=>{let e=y();return n.createElement("span",{style:{whiteSpace:"nowrap",color:e.regex.flags}},"/",n.createElement("span",{style:{color:e.regex.source}},o),"/",t)},fo=({description:t})=>{let o=y();return n.createElement("span",{style:{whiteSpace:"nowrap",color:o.instance}},"Symbol(",t&&n.createElement("span",{style:{color:o.meta}},'"',t,'"'),")")},bo=({value:t})=>{let o=y();return n.createElement("span",{style:{color:o.meta}},oo(t))},Co=({label:t})=>{let o=y(),{typography:e}=U();return n.createElement("span",{style:{color:o.base,fontFamily:e.fonts.base,fontSize:e.size.s2-1}},t)},z=({call:t,callsById:o})=>{if(!t)return null;if(t.method==="step"&&t.path.length===0)return n.createElement(Co,{label:t.args[0]});let e=t.path.flatMap((l,s)=>{let c=l.__callId__;return[c?n.createElement(z,{key:`elem${s}`,call:o.get(c),callsById:o}):n.createElement("span",{key:`elem${s}`},l),n.createElement("wbr",{key:`wbr${s}`}),n.createElement("span",{key:`dot${s}`},".")]}),r=t.args.flatMap((l,s,c)=>{let u=n.createElement(A,{key:`node${s}`,value:l,callsById:o});return s<c.length-1?[u,n.createElement("span",{key:`comma${s}`},",\xA0"),n.createElement("wbr",{key:`wbr${s}`})]:[u]}),a=y();return n.createElement(n.Fragment,null,n.createElement("span",{style:{color:a.base}},e),n.createElement("span",{style:{color:a.method}},t.method),n.createElement("span",{style:{color:a.base}},"(",n.createElement("wbr",null),r,n.createElement("wbr",null),")"))};var mt=(t,o=0)=>{for(let e=o,r=1;e<t.length;e+=1)if(t[e]==="("?r+=1:t[e]===")"&&(r-=1),r===0)return t.slice(o,e);return""},q=t=>{try{return t==="undefined"?void 0:JSON.parse(t)}catch{return t}},So=yt.span(({theme:t})=>({color:t.base==="light"?t.color.positiveText:t.color.positive})),Io=yt.span(({theme:t})=>({color:t.base==="light"?t.color.negativeText:t.color.negative})),K=({value:t,parsed:o})=>o?d.createElement(A,{showObjectInspector:!0,value:t,style:{color:"#D43900"}}):d.createElement(Io,null,t),Q=({value:t,parsed:o})=>o?typeof t=="string"&&t.startsWith("called with")?d.createElement(d.Fragment,null,t):d.createElement(A,{showObjectInspector:!0,value:t,style:{color:"#16B242"}}):d.createElement(So,null,t),ft=({message:t})=>{let o=t.split(`
2
- `);return d.createElement("pre",{style:{margin:0,padding:"8px 10px 8px 36px",fontSize:ho.size.s1}},o.flatMap((e,r)=>{if(e.startsWith("expect(")){let f=mt(e,7),C=f&&7+f.length,h=f&&e.slice(C).match(/\.(to|last|nth)[A-Z]\w+\(/);if(h){let _=C+h.index+h[0].length,k=mt(e,_);if(k)return["expect(",d.createElement(K,{key:`received_${f}`,value:f}),e.slice(C,_),d.createElement(Q,{key:`expected_${k}`,value:k}),e.slice(_+k.length),d.createElement("br",{key:`br${r}`})]}}if(e.match(/^\s*- /))return[d.createElement(Q,{key:e+r,value:e}),d.createElement("br",{key:`br${r}`})];if(e.match(/^\s*\+ /))return[d.createElement(K,{key:e+r,value:e}),d.createElement("br",{key:`br${r}`})];let[,a,l]=e.match(/^(Expected|Received): (.*)$/)||[];if(a&&l)return a==="Expected"?["Expected: ",d.createElement(Q,{key:e+r,value:q(l),parsed:!0}),d.createElement("br",{key:`br${r}`})]:["Received: ",d.createElement(K,{key:e+r,value:q(l),parsed:!0}),d.createElement("br",{key:`br${r}`})];let[,s,c]=e.match(/(Expected number|Received number|Number) of calls: (\d+)$/i)||[];if(s&&c)return[`${s} of calls: `,d.createElement(A,{key:e+r,value:Number(c)}),d.createElement("br",{key:`br${r}`})];let[,u]=e.match(/^Received has value: (.+)$/)||[];return u?["Received has value: ",d.createElement(A,{key:e+r,value:q(u)}),d.createElement("br",{key:`br${r}`})]:[d.createElement("span",{key:e+r},e),d.createElement("br",{key:`br${r}`})]}))};import _o from"react";import{Icons as ko}from"@storybook/components";import{CallStates as E}from"@storybook/instrumenter";import{styled as wo}from"@storybook/theming";import{transparentize as Ao}from"polished";var xo={pure:{gray:{500:"#CCCCCC"}}},Eo={colors:xo},bt=Eo;var{colors:{pure:{gray:To}}}=bt,Oo=wo(ko)(({theme:t,status:o})=>{let e={[E.DONE]:t.color.positive,[E.ERROR]:t.color.negative,[E.ACTIVE]:t.color.secondary,[E.WAITING]:Ao(.5,To[500])}[o];return{width:o===E.WAITING?6:12,height:o===E.WAITING?6:12,color:e,justifySelf:"center"}}),H=({status:t,className:o})=>{let e={[E.DONE]:"check",[E.ERROR]:"stopalt",[E.ACTIVE]:"play",[E.WAITING]:"circle"}[t];return _o.createElement(Oo,{"data-testid":`icon-${t}`,status:t,icon:e,className:o})};var Do=T.div(()=>({fontFamily:R.fonts.mono,fontSize:R.size.s1,overflowWrap:"break-word",inlineSize:"calc( 100% - 40px )"})),Mo=T("div",{shouldForwardProp:t=>!["call","pausedAt"].includes(t.toString())})(({theme:t,call:o})=>({position:"relative",display:"flex",flexDirection:"column",borderBottom:`1px solid ${t.appBorderColor}`,fontFamily:R.fonts.base,fontSize:13,...o.status===O.ERROR&&{backgroundColor:t.base==="dark"?$o(.93,t.color.negative):t.background.warning},paddingLeft:o.ancestors.length*20}),({theme:t,call:o,pausedAt:e})=>e===o.id&&{"&::before":{content:'""',position:"absolute",top:-5,zIndex:1,borderTop:"4.5px solid transparent",borderLeft:`7px solid ${t.color.warning}`,borderBottom:"4.5px solid transparent"},"&::after":{content:'""',position:"absolute",top:-1,zIndex:1,width:"100%",borderTop:`1.5px solid ${t.color.warning}`}}),Fo=T.div(({theme:t,isInteractive:o})=>({display:"flex","&:hover":o?{}:{background:t.background.hoverable}})),Lo=T("button",{shouldForwardProp:t=>!["call"].includes(t.toString())})(({theme:t,disabled:o,call:e})=>({flex:1,display:"grid",background:"none",border:0,gridTemplateColumns:"15px 1fr",alignItems:"center",minHeight:40,margin:0,padding:"8px 15px",textAlign:"start",cursor:o||e.status===O.ERROR?"default":"pointer","&:focus-visible":{outline:0,boxShadow:`inset 3px 0 0 0 ${e.status===O.ERROR?t.color.warning:t.color.secondary}`,background:e.status===O.ERROR?"transparent":t.background.hoverable},"& > div":{opacity:e.status===O.WAITING?.5:1}})),jo=T.div({padding:6}),Wo=T(vo)(({theme:t})=>({color:t.textMutedColor,margin:"0 3px"})),zo=T(Po)(({theme:t})=>({fontFamily:t.typography.fonts.base})),Ho=T("div")(({theme:t})=>({padding:"8px 10px 8px 36px",fontSize:R.size.s1,color:t.color.defaultText,pre:{margin:0,padding:0}})),Ro=({exception:t})=>{if(t.message.startsWith("expect("))return m.createElement(ft,{...t});let o=t.message.split(`
1
+ import{addons as Et,types as ce}from"@storybook/addons";var X="storybook/interactions",at=`${X}/panel`;import tt from"global";import*as i from"react";import{useChannel as oe,useParameter as ee}from"@storybook/api";import{FORCE_REMOUNT as ne,IGNORED_EXCEPTION as re,STORY_RENDER_PHASE_CHANGED as se,STORY_THREW_EXCEPTION as ae,PLAY_FUNCTION_THREW_EXCEPTION as le}from"@storybook/core-events";import{EVENTS as O,CallStates as F}from"@storybook/instrumenter";import*as b from"react";import{AddonPanel as Ro,Link as Go,Placeholder as Vo}from"@storybook/components";import{CallStates as Q}from"@storybook/instrumenter";import{styled as N}from"@storybook/theming";import{transparentize as Jo}from"polished";import p from"react";import{Button as $t,IconButton as Dt,Icons as B,Separator as Mt,P as Ft,TooltipNote as Lt,WithTooltip as $,Bar as jt}from"@storybook/components";import{CallStates as Wt}from"@storybook/instrumenter";import{styled as I}from"@storybook/theming";import Nt from"react";import{CallStates as k}from"@storybook/instrumenter";import{styled as Pt,typography as Y}from"@storybook/theming";var Bt=Pt.div(({theme:t,status:o})=>{let e={[k.DONE]:t.color.positive,[k.ERROR]:t.color.negative,[k.ACTIVE]:t.color.warning,[k.WAITING]:t.color.warning}[o];return{padding:"4px 6px 4px 8px;",borderRadius:"4px",backgroundColor:e,color:"white",fontFamily:Y.fonts.base,textTransform:"uppercase",fontSize:Y.size.s1,letterSpacing:3,fontWeight:Y.weight.bold,width:65,textAlign:"center"}}),lt=({status:t})=>{let o={[k.DONE]:"Pass",[k.ERROR]:"Fail",[k.ACTIVE]:"Runs",[k.WAITING]:"Runs"}[t];return Nt.createElement(Bt,{status:t},o)};var zt=I.div(({theme:t})=>({background:t.background.app,borderBottom:`1px solid ${t.appBorderColor}`,position:"sticky",top:0,zIndex:1})),Ht=I.nav(({theme:t})=>({height:40,display:"flex",alignItems:"center",justifyContent:"space-between",paddingLeft:15})),Rt=I($t)(({theme:t})=>({borderRadius:4,padding:6,color:t.textMutedColor,"&:not(:disabled)":{"&:hover,&:focus-visible":{color:t.color.secondary}}})),D=I(Lt)(({theme:t})=>({fontFamily:t.typography.fonts.base})),M=I(Dt)(({theme:t})=>({color:t.textMutedColor,margin:"0 3px"})),Gt=I(Mt)({marginTop:0}),Vt=I(Ft)(({theme:t})=>({color:t.textMutedColor,justifyContent:"flex-end",textAlign:"right",whiteSpace:"nowrap",marginTop:"auto",marginBottom:1,paddingRight:15,fontSize:13})),it=I.div({display:"flex",alignItems:"center"}),Jt=I(M)({marginLeft:9}),Xt=I(Rt)({marginLeft:9,marginRight:9,marginBottom:1,lineHeight:"12px"}),Yt=I(M)(({theme:t,animating:o,disabled:e})=>({opacity:e?.5:1,svg:{animation:o&&`${t.animation.rotate360} 200ms ease-out`}})),ct=({controls:t,controlStates:o,status:e,storyFileName:r,onScrollToEnd:a,isRerunAnimating:l,setIsRerunAnimating:s})=>{let c=e===Wt.ERROR?"Scroll to error":"Scroll to end";return p.createElement(zt,null,p.createElement(jt,null,p.createElement(Ht,null,p.createElement(it,null,p.createElement(lt,{status:e}),p.createElement(Xt,{onClick:a,disabled:!a},c),p.createElement(Gt,null),p.createElement($,{hasChrome:!1,tooltip:p.createElement(D,{note:"Go to start"})},p.createElement(Jt,{"aria-label":"Go to start",containsIcon:!0,onClick:t.start,disabled:!o.start},p.createElement(B,{icon:"rewind"}))),p.createElement($,{hasChrome:!1,tooltip:p.createElement(D,{note:"Go back"})},p.createElement(M,{"aria-label":"Go back",containsIcon:!0,onClick:t.back,disabled:!o.back},p.createElement(B,{icon:"playback"}))),p.createElement($,{hasChrome:!1,tooltip:p.createElement(D,{note:"Go forward"})},p.createElement(M,{"aria-label":"Go forward",containsIcon:!0,onClick:t.next,disabled:!o.next},p.createElement(B,{icon:"playnext"}))),p.createElement($,{hasChrome:!1,tooltip:p.createElement(D,{note:"Go to end"})},p.createElement(M,{"aria-label":"Go to end",containsIcon:!0,onClick:t.end,disabled:!o.end},p.createElement(B,{icon:"fastforward"}))),p.createElement($,{hasChrome:!1,tooltip:p.createElement(D,{note:"Rerun"})},p.createElement(Yt,{"aria-label":"Rerun",containsIcon:!0,onClick:t.rerun,onAnimationEnd:()=>s(!1),animating:l,disabled:l},p.createElement(B,{icon:"sync"})))),r&&p.createElement(it,null,p.createElement(Vt,null,r)))))};import*as m from"react";import{IconButton as Oo,Icons as vo,TooltipNote as No,WithTooltip as Po}from"@storybook/components";import{CallStates as T}from"@storybook/instrumenter";import{styled as A,typography as H}from"@storybook/theming";import{transparentize as Bo}from"polished";import d from"react";import{styled as mt,typography as Co}from"@storybook/theming";import{ObjectInspector as Zt}from"@devtools-ds/object-inspector";import{useTheme as Z}from"@storybook/theming";import n,{Fragment as Ut}from"react";var qt={base:"#444",nullish:"#7D99AA",string:"#16B242",number:"#5D40D0",boolean:"#f41840",objectkey:"#698394",instance:"#A15C20",function:"#EA7509",muted:"#7D99AA",tag:{name:"#6F2CAC",suffix:"#1F99E5"},date:"#459D9C",error:{name:"#D43900",message:"#444"},regex:{source:"#A15C20",flags:"#EA7509"},meta:"#EA7509",method:"#0271B6"},Kt={base:"#eee",nullish:"#aaa",string:"#5FE584",number:"#6ba5ff",boolean:"#ff4191",objectkey:"#accfe6",instance:"#E3B551",function:"#E3B551",muted:"#aaa",tag:{name:"#f57bff",suffix:"#8EB5FF"},date:"#70D4D3",error:{name:"#f40",message:"#eee"},regex:{source:"#FAD483",flags:"#E3B551"},meta:"#FAD483",method:"#5EC1FF"},y=()=>{let{base:t}=Z();return t==="dark"?Kt:qt},Qt=/[^A-Z0-9]/i,pt=/[\s.,…]+$/gm,dt=(t,o)=>{if(t.length<=o)return t;for(let e=o-1;e>=0;e-=1)if(Qt.test(t[e])&&e>10)return`${t.slice(0,e).replace(pt,"")}\u2026`;return`${t.slice(0,o).replace(pt,"")}\u2026`},to=t=>{try{return JSON.stringify(t,null,1)}catch{return String(t)}},ut=(t,o)=>t.flatMap((e,r)=>r===t.length-1?[e]:[e,n.cloneElement(o,{key:`sep${r}`})]),w=({value:t,nested:o,showObjectInspector:e,callsById:r,...a})=>{switch(!0){case t===null:return n.createElement(oo,{...a});case t===void 0:return n.createElement(eo,{...a});case Array.isArray(t):return n.createElement(ao,{...a,value:t,callsById:r});case typeof t=="string":return n.createElement(no,{...a,value:t});case typeof t=="number":return n.createElement(ro,{...a,value:t});case typeof t=="boolean":return n.createElement(so,{...a,value:t});case Object.prototype.hasOwnProperty.call(t,"__date__"):return n.createElement(uo,{...a,...t.__date__});case Object.prototype.hasOwnProperty.call(t,"__error__"):return n.createElement(go,{...a,...t.__error__});case Object.prototype.hasOwnProperty.call(t,"__regexp__"):return n.createElement(mo,{...a,...t.__regexp__});case Object.prototype.hasOwnProperty.call(t,"__function__"):return n.createElement(co,{...a,...t.__function__});case Object.prototype.hasOwnProperty.call(t,"__symbol__"):return n.createElement(yo,{...a,...t.__symbol__});case Object.prototype.hasOwnProperty.call(t,"__element__"):return n.createElement(po,{...a,...t.__element__});case Object.prototype.hasOwnProperty.call(t,"__class__"):return n.createElement(io,{...a,...t.__class__});case Object.prototype.hasOwnProperty.call(t,"__callId__"):return n.createElement(W,{call:r.get(t.__callId__),callsById:r});case Object.prototype.toString.call(t)==="[object Object]":return n.createElement(lo,{value:t,showInspector:e,...a});default:return n.createElement(fo,{value:t,...a})}},oo=t=>{let o=y();return n.createElement("span",{style:{color:o.nullish},...t},"null")},eo=t=>{let o=y();return n.createElement("span",{style:{color:o.nullish},...t},"undefined")},no=({value:t,...o})=>{let e=y();return n.createElement("span",{style:{color:e.string},...o},JSON.stringify(dt(t,50)))},ro=({value:t,...o})=>{let e=y();return n.createElement("span",{style:{color:e.number},...o},t)},so=({value:t,...o})=>{let e=y();return n.createElement("span",{style:{color:e.boolean},...o},String(t))},ao=({value:t,nested:o=!1,callsById:e})=>{let r=y();if(o)return n.createElement("span",{style:{color:r.base}},"[\u2026]");let a=t.slice(0,3).map(s=>n.createElement(w,{key:JSON.stringify(s),value:s,nested:!0,callsById:e})),l=ut(a,n.createElement("span",null,", "));return t.length<=3?n.createElement("span",{style:{color:r.base}},"[",l,"]"):n.createElement("span",{style:{color:r.base}},"(",t.length,") [",l,", \u2026]")},lo=({showInspector:t,value:o,nested:e=!1})=>{let r=Z().base==="dark",a=y();if(t)return n.createElement(n.Fragment,null,n.createElement(Zt,{id:"interactions-object-inspector",data:o,includePrototypes:!1,colorScheme:r?"dark":"light"}));if(e)return n.createElement("span",{style:{color:a.base}},"{\u2026}");let l=ut(Object.entries(o).slice(0,2).map(([s,c])=>n.createElement(Ut,{key:s},n.createElement("span",{style:{color:a.objectkey}},s,": "),n.createElement(w,{value:c,nested:!0}))),n.createElement("span",null,", "));return Object.keys(o).length<=2?n.createElement("span",{style:{color:a.base}},"{ ",l," }"):n.createElement("span",{style:{color:a.base}},"(",Object.keys(o).length,") ","{ ",l,", \u2026 }")},io=({name:t})=>{let o=y();return n.createElement("span",{style:{color:o.instance}},t)},co=({name:t})=>{let o=y();return t?n.createElement("span",{style:{color:o.function}},t):n.createElement("span",{style:{color:o.nullish,fontStyle:"italic"}},"anonymous")},po=({prefix:t,localName:o,id:e,classNames:r=[],innerText:a})=>{let l=t?`${t}:${o}`:o,s=y();return n.createElement("span",{style:{wordBreak:"keep-all"}},n.createElement("span",{key:`${l}_lt`,style:{color:s.muted}},"<"),n.createElement("span",{key:`${l}_tag`,style:{color:s.tag.name}},l),n.createElement("span",{key:`${l}_suffix`,style:{color:s.tag.suffix}},e?`#${e}`:r.reduce((c,u)=>`${c}.${u}`,"")),n.createElement("span",{key:`${l}_gt`,style:{color:s.muted}},">"),!e&&r.length===0&&a&&n.createElement(n.Fragment,null,n.createElement("span",{key:`${l}_text`},a),n.createElement("span",{key:`${l}_close_lt`,style:{color:s.muted}},"<"),n.createElement("span",{key:`${l}_close_tag`,style:{color:s.tag.name}},"/",l),n.createElement("span",{key:`${l}_close_gt`,style:{color:s.muted}},">")))},uo=({value:t})=>{let[o,e,r]=t.split(/[T.Z]/),a=y();return n.createElement("span",{style:{whiteSpace:"nowrap",color:a.date}},o,n.createElement("span",{style:{opacity:.7}},"T"),e==="00:00:00"?n.createElement("span",{style:{opacity:.7}},e):e,r==="000"?n.createElement("span",{style:{opacity:.7}},".",r):`.${r}`,n.createElement("span",{style:{opacity:.7}},"Z"))},go=({name:t,message:o})=>{let e=y();return n.createElement("span",{style:{color:e.error.name}},t,o&&": ",o&&n.createElement("span",{style:{color:e.error.message},title:o.length>50?o:""},dt(o,50)))},mo=({flags:t,source:o})=>{let e=y();return n.createElement("span",{style:{whiteSpace:"nowrap",color:e.regex.flags}},"/",n.createElement("span",{style:{color:e.regex.source}},o),"/",t)},yo=({description:t})=>{let o=y();return n.createElement("span",{style:{whiteSpace:"nowrap",color:o.instance}},"Symbol(",t&&n.createElement("span",{style:{color:o.meta}},'"',t,'"'),")")},fo=({value:t})=>{let o=y();return n.createElement("span",{style:{color:o.meta}},to(t))},bo=({label:t})=>{let o=y(),{typography:e}=Z();return n.createElement("span",{style:{color:o.base,fontFamily:e.fonts.base,fontSize:e.size.s2-1}},t)},W=({call:t,callsById:o})=>{if(!t)return null;if(t.method==="step"&&t.path.length===0)return n.createElement(bo,{label:t.args[0]});let e=t.path.flatMap((l,s)=>{let c=l.__callId__;return[c?n.createElement(W,{key:`elem${s}`,call:o.get(c),callsById:o}):n.createElement("span",{key:`elem${s}`},l),n.createElement("wbr",{key:`wbr${s}`}),n.createElement("span",{key:`dot${s}`},".")]}),r=t.args.flatMap((l,s,c)=>{let u=n.createElement(w,{key:`node${s}`,value:l,callsById:o});return s<c.length-1?[u,n.createElement("span",{key:`comma${s}`},",\xA0"),n.createElement("wbr",{key:`wbr${s}`})]:[u]}),a=y();return n.createElement(n.Fragment,null,n.createElement("span",{style:{color:a.base}},e),n.createElement("span",{style:{color:a.method}},t.method),n.createElement("span",{style:{color:a.base}},"(",n.createElement("wbr",null),r,n.createElement("wbr",null),")"))};var gt=(t,o=0)=>{for(let e=o,r=1;e<t.length;e+=1)if(t[e]==="("?r+=1:t[e]===")"&&(r-=1),r===0)return t.slice(o,e);return""},U=t=>{try{return t==="undefined"?void 0:JSON.parse(t)}catch{return t}},ho=mt.span(({theme:t})=>({color:t.base==="light"?t.color.positiveText:t.color.positive})),So=mt.span(({theme:t})=>({color:t.base==="light"?t.color.negativeText:t.color.negative})),q=({value:t,parsed:o})=>o?d.createElement(w,{showObjectInspector:!0,value:t,style:{color:"#D43900"}}):d.createElement(So,null,t),K=({value:t,parsed:o})=>o?typeof t=="string"&&t.startsWith("called with")?d.createElement(d.Fragment,null,t):d.createElement(w,{showObjectInspector:!0,value:t,style:{color:"#16B242"}}):d.createElement(ho,null,t),yt=({message:t})=>{let o=t.split(`
2
+ `);return d.createElement("pre",{style:{margin:0,padding:"8px 10px 8px 36px",fontSize:Co.size.s1}},o.flatMap((e,r)=>{if(e.startsWith("expect(")){let f=gt(e,7),C=f&&7+f.length,h=f&&e.slice(C).match(/\.(to|last|nth)[A-Z]\w+\(/);if(h){let E=C+h.index+h[0].length,_=gt(e,E);if(_)return["expect(",d.createElement(q,{key:`received_${f}`,value:f}),e.slice(C,E),d.createElement(K,{key:`expected_${_}`,value:_}),e.slice(E+_.length),d.createElement("br",{key:`br${r}`})]}}if(e.match(/^\s*- /))return[d.createElement(K,{key:e+r,value:e}),d.createElement("br",{key:`br${r}`})];if(e.match(/^\s*\+ /))return[d.createElement(q,{key:e+r,value:e}),d.createElement("br",{key:`br${r}`})];let[,a,l]=e.match(/^(Expected|Received): (.*)$/)||[];if(a&&l)return a==="Expected"?["Expected: ",d.createElement(K,{key:e+r,value:U(l),parsed:!0}),d.createElement("br",{key:`br${r}`})]:["Received: ",d.createElement(q,{key:e+r,value:U(l),parsed:!0}),d.createElement("br",{key:`br${r}`})];let[,s,c]=e.match(/(Expected number|Received number|Number) of calls: (\d+)$/i)||[];if(s&&c)return[`${s} of calls: `,d.createElement(w,{key:e+r,value:Number(c)}),d.createElement("br",{key:`br${r}`})];let[,u]=e.match(/^Received has value: (.+)$/)||[];return u?["Received has value: ",d.createElement(w,{key:e+r,value:U(u)}),d.createElement("br",{key:`br${r}`})]:[d.createElement("span",{key:e+r},e),d.createElement("br",{key:`br${r}`})]}))};import Eo from"react";import{Icons as _o}from"@storybook/components";import{CallStates as x}from"@storybook/instrumenter";import{styled as ko}from"@storybook/theming";import{transparentize as wo}from"polished";var Io={pure:{gray:{500:"#CCCCCC"}}},xo={colors:Io},ft=xo;var{colors:{pure:{gray:Ao}}}=ft,To=ko(_o)(({theme:t,status:o})=>{let e={[x.DONE]:t.color.positive,[x.ERROR]:t.color.negative,[x.ACTIVE]:t.color.secondary,[x.WAITING]:wo(.5,Ao[500])}[o];return{width:o===x.WAITING?6:12,height:o===x.WAITING?6:12,color:e,justifySelf:"center"}}),z=({status:t,className:o})=>{let e={[x.DONE]:"check",[x.ERROR]:"stopalt",[x.ACTIVE]:"play",[x.WAITING]:"circle"}[t];return Eo.createElement(To,{"data-testid":`icon-${t}`,status:t,icon:e,className:o})};var $o=A.div(()=>({fontFamily:H.fonts.mono,fontSize:H.size.s1,overflowWrap:"break-word",inlineSize:"calc( 100% - 40px )"})),Do=A("div",{shouldForwardProp:t=>!["call","pausedAt"].includes(t.toString())})(({theme:t,call:o})=>({position:"relative",display:"flex",flexDirection:"column",borderBottom:`1px solid ${t.appBorderColor}`,fontFamily:H.fonts.base,fontSize:13,...o.status===T.ERROR&&{backgroundColor:t.base==="dark"?Bo(.93,t.color.negative):t.background.warning},paddingLeft:o.ancestors.length*20}),({theme:t,call:o,pausedAt:e})=>e===o.id&&{"&::before":{content:'""',position:"absolute",top:-5,zIndex:1,borderTop:"4.5px solid transparent",borderLeft:`7px solid ${t.color.warning}`,borderBottom:"4.5px solid transparent"},"&::after":{content:'""',position:"absolute",top:-1,zIndex:1,width:"100%",borderTop:`1.5px solid ${t.color.warning}`}}),Mo=A.div(({theme:t,isInteractive:o})=>({display:"flex","&:hover":o?{}:{background:t.background.hoverable}})),Fo=A("button",{shouldForwardProp:t=>!["call"].includes(t.toString())})(({theme:t,disabled:o,call:e})=>({flex:1,display:"grid",background:"none",border:0,gridTemplateColumns:"15px 1fr",alignItems:"center",minHeight:40,margin:0,padding:"8px 15px",textAlign:"start",cursor:o||e.status===T.ERROR?"default":"pointer","&:focus-visible":{outline:0,boxShadow:`inset 3px 0 0 0 ${e.status===T.ERROR?t.color.warning:t.color.secondary}`,background:e.status===T.ERROR?"transparent":t.background.hoverable},"& > div":{opacity:e.status===T.WAITING?.5:1}})),Lo=A.div({padding:6}),jo=A(Oo)(({theme:t})=>({color:t.textMutedColor,margin:"0 3px"})),Wo=A(No)(({theme:t})=>({fontFamily:t.typography.fonts.base})),zo=A("div")(({theme:t})=>({padding:"8px 10px 8px 36px",fontSize:H.size.s1,color:t.color.defaultText,pre:{margin:0,padding:0}})),Ho=({exception:t})=>{if(t.message.startsWith("expect("))return m.createElement(yt,{...t});let o=t.message.split(`
3
3
 
4
- `),e=o.length>1;return m.createElement(Ho,null,m.createElement("pre",null,o[0]),e&&m.createElement("p",null,"See the full stack trace in the browser console."))},Ct=({call:t,callsById:o,controls:e,controlStates:r,childCallIds:a,isHidden:l,isCollapsed:s,toggleCollapsed:c,pausedAt:u})=>{let[f,C]=m.useState(!1),h=!r.goto||!t.interceptable||!!t.ancestors.length;return l?null:m.createElement(Mo,{call:t,pausedAt:u},m.createElement(Fo,{isInteractive:h},m.createElement(Lo,{call:t,onClick:()=>e.goto(t.id),disabled:h,onMouseEnter:()=>r.goto&&C(!0),onMouseLeave:()=>r.goto&&C(!1)},m.createElement(H,{status:f?O.ACTIVE:t.status}),m.createElement(Do,{style:{marginLeft:6,marginBottom:1}},m.createElement(z,{call:t,callsById:o}))),m.createElement(jo,null,a?.length>0&&m.createElement(Bo,{hasChrome:!1,tooltip:m.createElement(zo,{note:`${s?"Show":"Hide"} interactions`})},m.createElement(Wo,{containsIcon:!0,onClick:c},m.createElement(No,{icon:"listunordered"}))))),t.status===O.ERROR&&t.exception?.callId===t.id&&m.createElement(Ro,{exception:t.exception}))};var Yo=P.div(({theme:t,withException:o})=>({minHeight:"100%",background:t.background.content,...o&&{backgroundColor:t.base==="dark"?Xo(.93,t.color.negative):t.background.warning}})),Zo=P.div(({theme:t})=>({padding:15,fontSize:t.typography.size.s2-1,lineHeight:"19px"})),Uo=P.code(({theme:t})=>({margin:"0 1px",padding:3,fontSize:t.typography.size.s1-1,lineHeight:1,verticalAlign:"top",background:"rgba(0, 0, 0, 0.05)",border:`1px solid ${t.appBorderColor}`,borderRadius:3})),qo=P.div({paddingBottom:4,fontWeight:"bold"}),Ko=P.p({margin:0,padding:"0 0 20px"}),Qo=P.pre(({theme:t})=>({margin:0,padding:0,fontSize:t.typography.size.s1-1})),ht=b.memo(function({calls:o,controls:e,controlStates:r,interactions:a,fileName:l,hasException:s,caughtException:c,isPlaying:u,pausedAt:f,onScrollToEnd:C,endRef:h,isRerunAnimating:_,setIsRerunAnimating:k,...G}){return b.createElement(Go,{...G},b.createElement(Yo,{withException:!!c},r.debugger&&(a.length>0||s||_)&&b.createElement(pt,{controls:e,controlStates:r,status:u?tt.ACTIVE:s?tt.ERROR:tt.DONE,storyFileName:l,onScrollToEnd:C,isRerunAnimating:_,setIsRerunAnimating:k}),b.createElement("div",null,a.map(S=>b.createElement(Ct,{key:S.id,call:S,callsById:o,controls:e,controlStates:r,childCallIds:S.childCallIds,isHidden:S.isHidden,isCollapsed:S.isCollapsed,toggleCollapsed:S.toggleCollapsed,pausedAt:f}))),c&&!c.message?.startsWith("ignoredException")&&b.createElement(Zo,null,b.createElement(qo,null,"Caught exception in ",b.createElement(Uo,null,"play")," function"),b.createElement(Ko,null,"This story threw an error after it finished rendering which means your interactions couldn' t be run.Go to this story' s play function in ",l," to fix."),b.createElement(Qo,{"data-chromatic":"ignore"},c.stack||`${c.name}: ${c.message}`)),b.createElement("div",{ref:h}),!u&&!c&&a.length===0&&b.createElement(Jo,null,"No interactions found",b.createElement(Vo,{href:"https://storybook.js.org/docs/react/writing-stories/play-function",target:"_blank",withArrow:!0},"Learn how to add interactions to your story"))))});import{styled as te}from"@storybook/theming";import oe from"react-dom";var St=({children:t})=>{let o=window.document.getElementById("tabbutton-interactions");return o&&oe.createPortal(t,o)},It=te(H)({marginLeft:5});var ce={debugger:!1,start:!1,back:!1,goto:!1,next:!1,end:!1},xt=({log:t,calls:o,collapsed:e,setCollapsed:r})=>{let a=new Map,l=new Map;return t.map(({callId:s,ancestors:c,status:u})=>{let f=!1;return c.forEach(C=>{e.has(C)&&(f=!0),l.set(C,(l.get(C)||[]).concat(s))}),{...o.get(s),status:u,isHidden:f}}).map(s=>{let c=s.status===L.ERROR&&a.get(s.ancestors.slice(-1)[0])?.status===L.ACTIVE?L.ACTIVE:s.status;return a.set(s.id,{...s,status:c}),{...s,status:c,childCallIds:l.get(s.id),isCollapsed:e.has(s.id),toggleCollapsed:()=>r(u=>(u.has(s.id)?u.delete(s.id):u.add(s.id),new Set(u)))}})},Et=t=>{let[o,e]=i.useState(),[r,a]=i.useState(ce),[l,s]=i.useState(),[c,u]=i.useState(!1),[f,C]=i.useState(!1),[h,_]=i.useState(!1),[k,G]=i.useState(),[S,et]=i.useState(new Set),[V,J]=i.useState(),[j,nt]=i.useState([]),[rt,kt]=i.useState(),st=i.useRef([]),W=i.useRef(new Map),wt=({status:g,...B})=>W.current.set(B.id,B),X=i.useRef();i.useEffect(()=>{let g;return ot.window.IntersectionObserver&&(g=new ot.window.IntersectionObserver(([B])=>G(B.isIntersecting?void 0:B.target),{root:ot.window.document.querySelector("#panel-tab-content")}),X.current&&g.observe(X.current)),()=>g?.disconnect()},[]);let N=ee({[v.CALL]:wt,[v.SYNC]:g=>{a(g.controlStates),s(g.pausedAt),nt(xt({log:g.logItems,calls:W.current,collapsed:S,setCollapsed:et})),st.current=g.logItems},[ae]:g=>{e(g.storyId),C(g.newPhase==="playing"),s(void 0),g.newPhase==="rendering"&&(u(!1),J(void 0))},[le]:()=>{u(!0)},[ie]:g=>{g?.message!==se.message?J(g):J(void 0)}},[S]);i.useEffect(()=>{nt(xt({log:st.current,calls:W.current,collapsed:S,setCollapsed:et}))},[S]),i.useEffect(()=>{f||h||kt(j.filter(({method:g})=>g!=="step").length)},[j,f,h]);let At=i.useMemo(()=>({start:()=>N(v.START,{storyId:o}),back:()=>N(v.BACK,{storyId:o}),goto:g=>N(v.GOTO,{storyId:o,callId:g}),next:()=>N(v.NEXT,{storyId:o}),end:()=>N(v.END,{storyId:o}),rerun:()=>{_(!0),N(re,{storyId:o})}}),[o]),Tt=ne("fileName",""),[Ot]=Tt.toString().split("/").slice(-1),vt=()=>k?.scrollIntoView({behavior:"smooth",block:"end"}),Nt=rt>0||!!V||h,at=!!V||j.some(g=>g.status===L.ERROR);return c?i.createElement(i.Fragment,{key:"interactions"}):i.createElement(i.Fragment,{key:"interactions"},i.createElement(St,null,Nt&&(at?i.createElement(It,{status:L.ERROR}):` (${rt})`)),i.createElement(ht,{calls:W.current,controls:At,controlStates:r,interactions:j,fileName:Ot,hasException:at,caughtException:V,isPlaying:f,pausedAt:l,endRef:X,onScrollToEnd:k&&vt,isRerunAnimating:h,setIsRerunAnimating:_,...t}))};_t.register(Y,()=>{_t.add(lt,{type:pe.PANEL,title:"Interactions",match:({viewMode:t})=>t==="story",render:Et})});
4
+ `),e=o.length>1;return m.createElement(zo,null,m.createElement("pre",null,o[0]),e&&m.createElement("p",null,"See the full stack trace in the browser console."))},bt=({call:t,callsById:o,controls:e,controlStates:r,childCallIds:a,isHidden:l,isCollapsed:s,toggleCollapsed:c,pausedAt:u})=>{let[f,C]=m.useState(!1),h=!r.goto||!t.interceptable||!!t.ancestors.length;return l?null:m.createElement(Do,{call:t,pausedAt:u},m.createElement(Mo,{isInteractive:h},m.createElement(Fo,{call:t,onClick:()=>e.goto(t.id),disabled:h,onMouseEnter:()=>r.goto&&C(!0),onMouseLeave:()=>r.goto&&C(!1)},m.createElement(z,{status:f?T.ACTIVE:t.status}),m.createElement($o,{style:{marginLeft:6,marginBottom:1}},m.createElement(W,{call:t,callsById:o}))),m.createElement(Lo,null,a?.length>0&&m.createElement(Po,{hasChrome:!1,tooltip:m.createElement(Wo,{note:`${s?"Show":"Hide"} interactions`})},m.createElement(jo,{containsIcon:!0,onClick:c},m.createElement(vo,{icon:"listunordered"}))))),t.status===T.ERROR&&t.exception?.callId===t.id&&m.createElement(Ho,{exception:t.exception}))};var Xo=N.div(({theme:t,withException:o})=>({minHeight:"100%",background:t.background.content,...o&&{backgroundColor:t.base==="dark"?Jo(.93,t.color.negative):t.background.warning}})),Yo=N.div(({theme:t})=>({padding:15,fontSize:t.typography.size.s2-1,lineHeight:"19px"})),Zo=N.code(({theme:t})=>({margin:"0 1px",padding:3,fontSize:t.typography.size.s1-1,lineHeight:1,verticalAlign:"top",background:"rgba(0, 0, 0, 0.05)",border:`1px solid ${t.appBorderColor}`,borderRadius:3})),Uo=N.div({paddingBottom:4,fontWeight:"bold"}),qo=N.p({margin:0,padding:"0 0 20px"}),Ko=N.pre(({theme:t})=>({margin:0,padding:0,fontSize:t.typography.size.s1-1})),Ct=b.memo(function({calls:o,controls:e,controlStates:r,interactions:a,fileName:l,hasException:s,caughtException:c,isPlaying:u,pausedAt:f,onScrollToEnd:C,endRef:h,isRerunAnimating:E,setIsRerunAnimating:_,...R}){return b.createElement(Ro,{...R},b.createElement(Xo,{withException:!!c},r.debugger&&(a.length>0||s||E)&&b.createElement(ct,{controls:e,controlStates:r,status:u?Q.ACTIVE:s?Q.ERROR:Q.DONE,storyFileName:l,onScrollToEnd:C,isRerunAnimating:E,setIsRerunAnimating:_}),b.createElement("div",null,a.map(S=>b.createElement(bt,{key:S.id,call:S,callsById:o,controls:e,controlStates:r,childCallIds:S.childCallIds,isHidden:S.isHidden,isCollapsed:S.isCollapsed,toggleCollapsed:S.toggleCollapsed,pausedAt:f}))),c&&!c.message?.startsWith("ignoredException")&&b.createElement(Yo,null,b.createElement(Uo,null,"Caught exception in ",b.createElement(Zo,null,"play")," function"),b.createElement(qo,null,"This story threw an error after it finished rendering which means your interactions couldn' t be run.Go to this story' s play function in ",l," to fix."),b.createElement(Ko,{"data-chromatic":"ignore"},c.stack||`${c.name}: ${c.message}`)),b.createElement("div",{ref:h}),!u&&!c&&a.length===0&&b.createElement(Vo,null,"No interactions found",b.createElement(Go,{href:"https://storybook.js.org/docs/react/writing-stories/play-function",target:"_blank",withArrow:!0},"Learn how to add interactions to your story"))))});import{styled as Qo}from"@storybook/theming";import te from"react-dom";var ht=({children:t})=>{let o=global.document.getElementById("tabbutton-interactions");return o&&te.createPortal(t,o)},St=Qo(z)({marginLeft:5});var ie={debugger:!1,start:!1,back:!1,goto:!1,next:!1,end:!1},It=({log:t,calls:o,collapsed:e,setCollapsed:r})=>{let a=new Map,l=new Map;return t.map(({callId:s,ancestors:c,status:u})=>{let f=!1;return c.forEach(C=>{e.has(C)&&(f=!0),l.set(C,(l.get(C)||[]).concat(s))}),{...o.get(s),status:u,isHidden:f}}).map(s=>{let c=s.status===F.ERROR&&a.get(s.ancestors.slice(-1)[0])?.status===F.ACTIVE?F.ACTIVE:s.status;return a.set(s.id,{...s,status:c}),{...s,status:c,childCallIds:l.get(s.id),isCollapsed:e.has(s.id),toggleCollapsed:()=>r(u=>(u.has(s.id)?u.delete(s.id):u.add(s.id),new Set(u)))}})},xt=t=>{let[o,e]=i.useState(),[r,a]=i.useState(ie),[l,s]=i.useState(),[c,u]=i.useState(!1),[f,C]=i.useState(!1),[h,E]=i.useState(!1),[_,R]=i.useState(),[S,ot]=i.useState(new Set),[G,V]=i.useState(),[L,et]=i.useState([]),[nt,_t]=i.useState(),rt=i.useRef([]),j=i.useRef(new Map),kt=({status:g,...P})=>j.current.set(P.id,P),J=i.useRef();i.useEffect(()=>{let g;return tt.window.IntersectionObserver&&(g=new tt.window.IntersectionObserver(([P])=>R(P.isIntersecting?void 0:P.target),{root:tt.window.document.querySelector("#panel-tab-content")}),J.current&&g.observe(J.current)),()=>g?.disconnect()},[]);let v=oe({[O.CALL]:kt,[O.SYNC]:g=>{a(g.controlStates),s(g.pausedAt),et(It({log:g.logItems,calls:j.current,collapsed:S,setCollapsed:ot})),rt.current=g.logItems},[se]:g=>{e(g.storyId),C(g.newPhase==="playing"),s(void 0),g.newPhase==="rendering"&&(u(!1),V(void 0))},[ae]:()=>{u(!0)},[le]:g=>{g?.message!==re.message?V(g):V(void 0)}},[S]);i.useEffect(()=>{et(It({log:rt.current,calls:j.current,collapsed:S,setCollapsed:ot}))},[S]),i.useEffect(()=>{f||h||_t(L.filter(({method:g})=>g!=="step").length)},[L,f,h]);let wt=i.useMemo(()=>({start:()=>v(O.START,{storyId:o}),back:()=>v(O.BACK,{storyId:o}),goto:g=>v(O.GOTO,{storyId:o,callId:g}),next:()=>v(O.NEXT,{storyId:o}),end:()=>v(O.END,{storyId:o}),rerun:()=>{E(!0),v(ne,{storyId:o})}}),[o]),At=ee("fileName",""),[Tt]=At.toString().split("/").slice(-1),Ot=()=>_?.scrollIntoView({behavior:"smooth",block:"end"}),vt=nt>0||!!G||h,st=!!G||L.some(g=>g.status===F.ERROR);return c?i.createElement(i.Fragment,{key:"interactions"}):i.createElement(i.Fragment,{key:"interactions"},i.createElement(ht,null,vt&&(st?i.createElement(St,{status:F.ERROR}):` (${nt})`)),i.createElement(Ct,{calls:j.current,controls:wt,controlStates:r,interactions:L,fileName:Tt,hasException:st,caughtException:G,isPlaying:f,pausedAt:l,endRef:J,onScrollToEnd:_&&Ot,isRerunAnimating:h,setIsRerunAnimating:E,...t}))};Et.register(X,()=>{Et.add(at,{type:ce.PANEL,title:"Interactions",match:({viewMode:t})=>t==="story",render:xt})});
@@ -1 +1 @@
1
- import{checkAddonOrder as s,serverRequire as t}from"@storybook/core-common";import e from"path";var d=o=>{s({before:{name:"@storybook/addon-actions",inEssentials:!0},after:{name:"@storybook/addon-interactions",inEssentials:!1},configFile:e.isAbsolute(o)?e.join(o,"main"):e.join(process.cwd(),o,"main"),getConfig:n=>t(n)})};export{d as checkActionsLoaded};
1
+ import{checkAddonOrder as s,serverRequire as t}from"@storybook/core-common";import e from"path";var a=o=>{s({before:{name:"@storybook/addon-actions",inEssentials:!0},after:{name:"@storybook/addon-interactions",inEssentials:!1},configFile:e.isAbsolute(o)?e.join(o,"main"):e.join(process.cwd(),o,"main"),getConfig:n=>t(n)})};export{a as checkActionsLoaded};
@@ -1,7 +1,7 @@
1
1
  import * as _storybook_types from '@storybook/types';
2
- import { ArgsEnhancer, AnyFramework, StepLabel, PlayFunction, PlayFunctionContext } from '@storybook/types';
2
+ import { ArgsEnhancer, Framework, StepLabel, PlayFunction, PlayFunctionContext } from '@storybook/types';
3
3
 
4
- declare const argsEnhancers: ArgsEnhancer<AnyFramework, _storybook_types.Args>[];
4
+ declare const argsEnhancers: ArgsEnhancer<Framework, _storybook_types.Args>[];
5
5
  declare const runStep: (label: StepLabel, play: PlayFunction, context: PlayFunctionContext) => void | Promise<void>;
6
6
  declare const parameters: {
7
7
  throwPlayFunctionExceptions: boolean;
@@ -0,0 +1 @@
1
+ var i=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var E=Object.getOwnPropertyNames;var h=Object.prototype.hasOwnProperty;var g=(e,t)=>{for(var n in t)i(e,n,{get:t[n],enumerable:!0})},A=(e,t,n,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of E(t))!h.call(e,o)&&o!==n&&i(e,o,{get:()=>t[o],enumerable:!(r=l(t,o))||r.enumerable});return e};var F=e=>A(i({},"__esModule",{value:!0}),e);var j={};g(j,{argsEnhancers:()=>_,parameters:()=>C,runStep:()=>w});module.exports=F(j);var u=require("@storybook/addons"),s=require("@storybook/core-events"),p=require("@storybook/instrumenter"),b=require("jest-mock"),f=new b.ModuleMocker(global),O=f.fn.bind(f),{action:P}=(0,p.instrument)({action:O},{retain:!0}),d=u.addons.getChannel(),y=new Set,c=[];d.on(s.FORCE_REMOUNT,()=>c.forEach(e=>{var t;return(t=e==null?void 0:e.mockClear)==null?void 0:t.call(e)}));d.on(s.STORY_RENDER_PHASE_CHANGED,({newPhase:e})=>{e==="loading"&&c.forEach(t=>{var n;return(n=t==null?void 0:t.mockClear)==null?void 0:n.call(t)})});var a=(e,t,n)=>{if(y.has(t))return t;y.add(t);try{if(Object.prototype.toString.call(t)==="[object Object]"){for(let[r,o]of Object.entries(t))t[r]=a(e,o,r);return t}if(Array.isArray(t))return t.map((r,o)=>a(e,r,`${n}[${o}]`));if(typeof t=="function"&&t.isAction){Object.defineProperty(t,"name",{value:n,writable:!1}),Object.defineProperty(t,"__storyId__",{value:e,writable:!1});let r=P(t);return c.push(r),r}}catch{}return t},S=({id:e,initialArgs:t})=>a(e,t),_=[S],{step:w}=(0,p.instrument)({step:(e,t,n)=>t(n)},{intercept:!0}),C={throwPlayFunctionExceptions:!1};0&&(module.exports={argsEnhancers,parameters,runStep});
@@ -0,0 +1 @@
1
+ import{addons as y}from"@storybook/addons";import{FORCE_REMOUNT as m,STORY_RENDER_PHASE_CHANGED as u}from"@storybook/core-events";import{instrument as p}from"@storybook/instrumenter";import{ModuleMocker as b}from"jest-mock";var i=new b(global),d=i.fn.bind(i),{action:l}=p({action:d},{retain:!0}),f=y.getChannel(),a=new Set,s=[];f.on(m,()=>s.forEach(e=>e?.mockClear?.()));f.on(u,({newPhase:e})=>{e==="loading"&&s.forEach(t=>t?.mockClear?.())});var c=(e,t,o)=>{if(a.has(t))return t;a.add(t);try{if(Object.prototype.toString.call(t)==="[object Object]"){for(let[n,r]of Object.entries(t))t[n]=c(e,r,n);return t}if(Array.isArray(t))return t.map((n,r)=>c(e,n,`${o}[${r}]`));if(typeof t=="function"&&t.isAction){Object.defineProperty(t,"name",{value:o,writable:!1}),Object.defineProperty(t,"__storyId__",{value:e,writable:!1});let n=l(t);return s.push(n),n}}catch{}return t},E=({id:e,initialArgs:t})=>c(e,t),O=[E],{step:P}=p({step:(e,t,o)=>t(o)},{intercept:!0}),S={throwPlayFunctionExceptions:!1};export{O as argsEnhancers,S as parameters,P as runStep};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@storybook/addon-interactions",
3
- "version": "7.0.0-alpha.48",
3
+ "version": "7.0.0-alpha.49",
4
4
  "description": "Automate, test and debug user interactions",
5
5
  "keywords": [
6
6
  "storybook-addons",
@@ -33,9 +33,9 @@
33
33
  "types": "./dist/manager.d.ts"
34
34
  },
35
35
  "./preview": {
36
- "require": "./dist/preset/preview.js",
37
- "import": "./dist/preset/preview.mjs",
38
- "types": "./dist/preset/preview.d.ts"
36
+ "require": "./dist/preview.js",
37
+ "import": "./dist/preview.mjs",
38
+ "types": "./dist/preview.d.ts"
39
39
  },
40
40
  "./register.js": {
41
41
  "require": "./dist/manager.js",
@@ -47,6 +47,19 @@
47
47
  "main": "dist/index.js",
48
48
  "module": "dist/index.mjs",
49
49
  "types": "dist/index.d.ts",
50
+ "typesVersions": {
51
+ "*": {
52
+ "*": [
53
+ "dist/index.d.ts"
54
+ ],
55
+ "manager": [
56
+ "dist/manager.d.ts"
57
+ ],
58
+ "preview": [
59
+ "dist/preview.d.ts"
60
+ ]
61
+ }
62
+ },
50
63
  "files": [
51
64
  "dist/**/*",
52
65
  "README.md",
@@ -59,15 +72,15 @@
59
72
  },
60
73
  "dependencies": {
61
74
  "@devtools-ds/object-inspector": "^1.1.2",
62
- "@storybook/addons": "7.0.0-alpha.48",
63
- "@storybook/api": "7.0.0-alpha.48",
64
- "@storybook/client-logger": "7.0.0-alpha.48",
65
- "@storybook/components": "7.0.0-alpha.48",
66
- "@storybook/core-common": "7.0.0-alpha.48",
67
- "@storybook/core-events": "7.0.0-alpha.48",
68
- "@storybook/instrumenter": "7.0.0-alpha.48",
69
- "@storybook/theming": "7.0.0-alpha.48",
70
- "@storybook/types": "7.0.0-alpha.48",
75
+ "@storybook/addons": "7.0.0-alpha.49",
76
+ "@storybook/api": "7.0.0-alpha.49",
77
+ "@storybook/client-logger": "7.0.0-alpha.49",
78
+ "@storybook/components": "7.0.0-alpha.49",
79
+ "@storybook/core-common": "7.0.0-alpha.49",
80
+ "@storybook/core-events": "7.0.0-alpha.49",
81
+ "@storybook/instrumenter": "7.0.0-alpha.49",
82
+ "@storybook/theming": "7.0.0-alpha.49",
83
+ "@storybook/types": "7.0.0-alpha.49",
71
84
  "global": "^4.4.0",
72
85
  "jest-mock": "^27.0.6",
73
86
  "polished": "^4.2.2",
@@ -99,12 +112,12 @@
99
112
  "entries": [
100
113
  "./src/index.ts",
101
114
  "./src/manager.tsx",
102
- "./src/preset/preview.ts",
115
+ "./src/preview.ts",
103
116
  "./src/preset/checkActionsLoaded.ts"
104
117
  ],
105
118
  "platform": "node"
106
119
  },
107
- "gitHead": "b58a29b785462f8a8b711b6bb2d7223fd6dc17fd",
120
+ "gitHead": "d7eb433300cac55d3c7256c8181eb6fd7a47b4c8",
108
121
  "storybook": {
109
122
  "displayName": "Interactions",
110
123
  "unsupportedFrameworks": [
package/preview.js CHANGED
@@ -1 +1 @@
1
- export * from './dist/preset/preview';
1
+ export * from './dist/preview';
@@ -1 +0,0 @@
1
- var i=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var E=Object.getOwnPropertyNames;var h=Object.prototype.hasOwnProperty;var A=(n,t)=>{for(var e in t)i(n,e,{get:t[e],enumerable:!0})},g=(n,t,e,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of E(t))!h.call(n,o)&&o!==e&&i(n,o,{get:()=>t[o],enumerable:!(r=l(t,o))||r.enumerable});return n};var F=n=>g(i({},"__esModule",{value:!0}),n);var j={};A(j,{argsEnhancers:()=>_,parameters:()=>C,runStep:()=>w});module.exports=F(j);var u=require("@storybook/addons"),s=require("@storybook/core-events"),p=require("@storybook/instrumenter"),b=require("jest-mock"),f=new b.ModuleMocker(global),O=f.fn.bind(f),{action:P}=(0,p.instrument)({action:O},{retain:!0}),d=u.addons.getChannel(),y=new Set,c=[];d.on(s.FORCE_REMOUNT,()=>c.forEach(n=>{var t;return(t=n==null?void 0:n.mockClear)==null?void 0:t.call(n)}));d.on(s.STORY_RENDER_PHASE_CHANGED,({newPhase:n})=>{n==="loading"&&c.forEach(t=>{var e;return(e=t==null?void 0:t.mockClear)==null?void 0:e.call(t)})});var a=(n,t,e)=>{if(y.has(t))return t;y.add(t);try{if(Object.prototype.toString.call(t)==="[object Object]"){for(let[r,o]of Object.entries(t))t[r]=a(n,o,r);return t}if(Array.isArray(t))return t.map((r,o)=>a(n,r,`${e}[${o}]`));if(typeof t=="function"&&t.isAction){Object.defineProperty(t,"name",{value:e,writable:!1}),Object.defineProperty(t,"__storyId__",{value:n,writable:!1});let r=P(t);return c.push(r),r}}catch{}return t},S=({id:n,initialArgs:t})=>a(n,t),_=[S],{step:w}=(0,p.instrument)({step:(n,t,e)=>t(e)},{intercept:!0}),C={throwPlayFunctionExceptions:!1};0&&(module.exports={argsEnhancers,parameters,runStep});
@@ -1 +0,0 @@
1
- import{addons as y}from"@storybook/addons";import{FORCE_REMOUNT as m,STORY_RENDER_PHASE_CHANGED as u}from"@storybook/core-events";import{instrument as p}from"@storybook/instrumenter";import{ModuleMocker as b}from"jest-mock";var i=new b(window),d=i.fn.bind(i),{action:l}=p({action:d},{retain:!0}),f=y.getChannel(),a=new Set,s=[];f.on(m,()=>s.forEach(n=>n?.mockClear?.()));f.on(u,({newPhase:n})=>{n==="loading"&&s.forEach(t=>t?.mockClear?.())});var c=(n,t,o)=>{if(a.has(t))return t;a.add(t);try{if(Object.prototype.toString.call(t)==="[object Object]"){for(let[e,r]of Object.entries(t))t[e]=c(n,r,e);return t}if(Array.isArray(t))return t.map((e,r)=>c(n,e,`${o}[${r}]`));if(typeof t=="function"&&t.isAction){Object.defineProperty(t,"name",{value:o,writable:!1}),Object.defineProperty(t,"__storyId__",{value:n,writable:!1});let e=l(t);return s.push(e),e}}catch{}return t},E=({id:n,initialArgs:t})=>c(n,t),P=[E],{step:S}=p({step:(n,t,o)=>t(o)},{intercept:!0}),_={throwPlayFunctionExceptions:!1};export{P as argsEnhancers,_ as parameters,S as runStep};