@storybook/addon-interactions 7.0.0-alpha.52 → 7.0.0-alpha.54

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 e={};export{e as default};
1
+ var src_default={};export{src_default as default};
package/dist/manager.js CHANGED
@@ -1,4 +1,4 @@
1
- var Vt=Object.create;var pt=Object.defineProperty;var Jt=Object.getOwnPropertyDescriptor;var Xt=Object.getOwnPropertyNames;var Yt=Object.getPrototypeOf,Zt=Object.prototype.hasOwnProperty;var Ut=(t,o,e,r)=>{if(o&&typeof o=="object"||typeof o=="function")for(let s of Xt(o))!Zt.call(t,s)&&s!==e&&pt(t,s,{get:()=>o[s],enumerable:!(r=Jt(o,s))||r.enumerable});return t};var A=(t,o,e)=>(e=t!=null?Vt(Yt(t)):{},Ut(o||!t||!t.__esModule?pt(e,"default",{value:t,enumerable:!0}):e,t));var R=require("@storybook/addons");var et="storybook/interactions",dt=`${et}/panel`;var U=A(require("global")),i=A(require("react")),q=require("@storybook/api"),T=require("@storybook/core-events"),I=require("@storybook/instrumenter");var C=A(require("react")),L=require("@storybook/components"),Z=require("@storybook/instrumenter"),D=require("@storybook/theming"),vt=require("polished");var p=A(require("react")),g=require("@storybook/components"),yt=require("@storybook/instrumenter"),_=require("@storybook/theming");var ut=A(require("react")),v=require("@storybook/instrumenter"),F=require("@storybook/theming"),qt=F.styled.div(({theme:t,status:o})=>{let e={[v.CallStates.DONE]:t.color.positive,[v.CallStates.ERROR]:t.color.negative,[v.CallStates.ACTIVE]:t.color.warning,[v.CallStates.WAITING]:t.color.warning}[o];return{padding:"4px 6px 4px 8px;",borderRadius:"4px",backgroundColor:e,color:"white",fontFamily:F.typography.fonts.base,textTransform:"uppercase",fontSize:F.typography.size.s1,letterSpacing:3,fontWeight:F.typography.weight.bold,width:65,textAlign:"center"}}),gt=({status:t})=>{let o={[v.CallStates.DONE]:"Pass",[v.CallStates.ERROR]:"Fail",[v.CallStates.ACTIVE]:"Runs",[v.CallStates.WAITING]:"Runs"}[t];return ut.default.createElement(qt,{status:t},o)};var Kt=_.styled.div(({theme:t})=>({background:t.background.app,borderBottom:`1px solid ${t.appBorderColor}`,position:"sticky",top:0,zIndex:1})),Qt=_.styled.nav(({theme:t})=>({height:40,display:"flex",alignItems:"center",justifyContent:"space-between",paddingLeft:15})),to=(0,_.styled)(g.Button)(({theme:t})=>({borderRadius:4,padding:6,color:t.textMutedColor,"&:not(:disabled)":{"&:hover,&:focus-visible":{color:t.color.secondary}}})),W=(0,_.styled)(g.TooltipNote)(({theme:t})=>({fontFamily:t.typography.fonts.base})),z=(0,_.styled)(g.IconButton)(({theme:t})=>({color:t.textMutedColor,margin:"0 3px"})),oo=(0,_.styled)(g.Separator)({marginTop:0}),eo=(0,_.styled)(g.P)(({theme:t})=>({color:t.textMutedColor,justifyContent:"flex-end",textAlign:"right",whiteSpace:"nowrap",marginTop:"auto",marginBottom:1,paddingRight:15,fontSize:13})),mt=_.styled.div({display:"flex",alignItems:"center"}),no=(0,_.styled)(z)({marginLeft:9}),ro=(0,_.styled)(to)({marginLeft:9,marginRight:9,marginBottom:1,lineHeight:"12px"}),so=(0,_.styled)(z)(({theme:t,animating:o,disabled:e})=>({opacity:e?.5:1,svg:{animation:o&&`${t.animation.rotate360} 200ms ease-out`}})),ft=({controls:t,controlStates:o,status:e,storyFileName:r,onScrollToEnd:s,isRerunAnimating:l,setIsRerunAnimating:a})=>{let c=e===yt.CallStates.ERROR?"Scroll to error":"Scroll to end";return p.default.createElement(Kt,null,p.default.createElement(g.Bar,null,p.default.createElement(Qt,null,p.default.createElement(mt,null,p.default.createElement(gt,{status:e}),p.default.createElement(ro,{onClick:s,disabled:!s},c),p.default.createElement(oo,null),p.default.createElement(g.WithTooltip,{hasChrome:!1,tooltip:p.default.createElement(W,{note:"Go to start"})},p.default.createElement(no,{"aria-label":"Go to start",containsIcon:!0,onClick:t.start,disabled:!o.start},p.default.createElement(g.Icons,{icon:"rewind"}))),p.default.createElement(g.WithTooltip,{hasChrome:!1,tooltip:p.default.createElement(W,{note:"Go back"})},p.default.createElement(z,{"aria-label":"Go back",containsIcon:!0,onClick:t.back,disabled:!o.back},p.default.createElement(g.Icons,{icon:"playback"}))),p.default.createElement(g.WithTooltip,{hasChrome:!1,tooltip:p.default.createElement(W,{note:"Go forward"})},p.default.createElement(z,{"aria-label":"Go forward",containsIcon:!0,onClick:t.next,disabled:!o.next},p.default.createElement(g.Icons,{icon:"playnext"}))),p.default.createElement(g.WithTooltip,{hasChrome:!1,tooltip:p.default.createElement(W,{note:"Go to end"})},p.default.createElement(z,{"aria-label":"Go to end",containsIcon:!0,onClick:t.end,disabled:!o.end},p.default.createElement(g.Icons,{icon:"fastforward"}))),p.default.createElement(g.WithTooltip,{hasChrome:!1,tooltip:p.default.createElement(W,{note:"Rerun"})},p.default.createElement(so,{"aria-label":"Rerun",containsIcon:!0,onClick:t.rerun,onAnimationEnd:()=>a(!1),animating:l,disabled:l},p.default.createElement(g.Icons,{icon:"sync"})))),r&&p.default.createElement(mt,null,p.default.createElement(eo,null,r)))))};var f=A(require("react")),B=require("@storybook/components"),P=require("@storybook/instrumenter"),S=require("@storybook/theming"),Tt=require("polished");var u=A(require("react")),H=require("@storybook/theming");var Ct=require("@devtools-ds/object-inspector"),J=require("@storybook/theming"),n=A(require("react")),ao={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"},lo={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"},b=()=>{let{base:t}=(0,J.useTheme)();return t==="dark"?lo:ao},io=/[^A-Z0-9]/i,bt=/[\s.,…]+$/gm,ht=(t,o)=>{if(t.length<=o)return t;for(let e=o-1;e>=0;e-=1)if(io.test(t[e])&&e>10)return`${t.slice(0,e).replace(bt,"")}\u2026`;return`${t.slice(0,o).replace(bt,"")}\u2026`},co=t=>{try{return JSON.stringify(t,null,1)}catch{return String(t)}},St=(t,o)=>t.flatMap((e,r)=>r===t.length-1?[e]:[e,n.default.cloneElement(o,{key:`sep${r}`})]),N=({value:t,nested:o,showObjectInspector:e,callsById:r,...s})=>{switch(!0){case t===null:return n.default.createElement(po,{...s});case t===void 0:return n.default.createElement(uo,{...s});case Array.isArray(t):return n.default.createElement(fo,{...s,value:t,callsById:r});case typeof t=="string":return n.default.createElement(go,{...s,value:t});case typeof t=="number":return n.default.createElement(mo,{...s,value:t});case typeof t=="boolean":return n.default.createElement(yo,{...s,value:t});case Object.prototype.hasOwnProperty.call(t,"__date__"):return n.default.createElement(Io,{...s,...t.__date__});case Object.prototype.hasOwnProperty.call(t,"__error__"):return n.default.createElement(xo,{...s,...t.__error__});case Object.prototype.hasOwnProperty.call(t,"__regexp__"):return n.default.createElement(Eo,{...s,...t.__regexp__});case Object.prototype.hasOwnProperty.call(t,"__function__"):return n.default.createElement(ho,{...s,...t.__function__});case Object.prototype.hasOwnProperty.call(t,"__symbol__"):return n.default.createElement(_o,{...s,...t.__symbol__});case Object.prototype.hasOwnProperty.call(t,"__element__"):return n.default.createElement(So,{...s,...t.__element__});case Object.prototype.hasOwnProperty.call(t,"__class__"):return n.default.createElement(Co,{...s,...t.__class__});case Object.prototype.hasOwnProperty.call(t,"__callId__"):return n.default.createElement(X,{call:r.get(t.__callId__),callsById:r});case Object.prototype.toString.call(t)==="[object Object]":return n.default.createElement(bo,{value:t,showInspector:e,...s});default:return n.default.createElement(ko,{value:t,...s})}},po=t=>{let o=b();return n.default.createElement("span",{style:{color:o.nullish},...t},"null")},uo=t=>{let o=b();return n.default.createElement("span",{style:{color:o.nullish},...t},"undefined")},go=({value:t,...o})=>{let e=b();return n.default.createElement("span",{style:{color:e.string},...o},JSON.stringify(ht(t,50)))},mo=({value:t,...o})=>{let e=b();return n.default.createElement("span",{style:{color:e.number},...o},t)},yo=({value:t,...o})=>{let e=b();return n.default.createElement("span",{style:{color:e.boolean},...o},String(t))},fo=({value:t,nested:o=!1,callsById:e})=>{let r=b();if(o)return n.default.createElement("span",{style:{color:r.base}},"[\u2026]");let s=t.slice(0,3).map(a=>n.default.createElement(N,{key:JSON.stringify(a),value:a,nested:!0,callsById:e})),l=St(s,n.default.createElement("span",null,", "));return t.length<=3?n.default.createElement("span",{style:{color:r.base}},"[",l,"]"):n.default.createElement("span",{style:{color:r.base}},"(",t.length,") [",l,", \u2026]")},bo=({showInspector:t,value:o,nested:e=!1})=>{let r=(0,J.useTheme)().base==="dark",s=b();if(t)return n.default.createElement(n.default.Fragment,null,n.default.createElement(Ct.ObjectInspector,{id:"interactions-object-inspector",data:o,includePrototypes:!1,colorScheme:r?"dark":"light"}));if(e)return n.default.createElement("span",{style:{color:s.base}},"{\u2026}");let l=St(Object.entries(o).slice(0,2).map(([a,c])=>n.default.createElement(n.Fragment,{key:a},n.default.createElement("span",{style:{color:s.objectkey}},a,": "),n.default.createElement(N,{value:c,nested:!0}))),n.default.createElement("span",null,", "));return Object.keys(o).length<=2?n.default.createElement("span",{style:{color:s.base}},"{ ",l," }"):n.default.createElement("span",{style:{color:s.base}},"(",Object.keys(o).length,") ","{ ",l,", \u2026 }")},Co=({name:t})=>{let o=b();return n.default.createElement("span",{style:{color:o.instance}},t)},ho=({name:t})=>{let o=b();return t?n.default.createElement("span",{style:{color:o.function}},t):n.default.createElement("span",{style:{color:o.nullish,fontStyle:"italic"}},"anonymous")},So=({prefix:t,localName:o,id:e,classNames:r=[],innerText:s})=>{let l=t?`${t}:${o}`:o,a=b();return n.default.createElement("span",{style:{wordBreak:"keep-all"}},n.default.createElement("span",{key:`${l}_lt`,style:{color:a.muted}},"<"),n.default.createElement("span",{key:`${l}_tag`,style:{color:a.tag.name}},l),n.default.createElement("span",{key:`${l}_suffix`,style:{color:a.tag.suffix}},e?`#${e}`:r.reduce((c,y)=>`${c}.${y}`,"")),n.default.createElement("span",{key:`${l}_gt`,style:{color:a.muted}},">"),!e&&r.length===0&&s&&n.default.createElement(n.default.Fragment,null,n.default.createElement("span",{key:`${l}_text`},s),n.default.createElement("span",{key:`${l}_close_lt`,style:{color:a.muted}},"<"),n.default.createElement("span",{key:`${l}_close_tag`,style:{color:a.tag.name}},"/",l),n.default.createElement("span",{key:`${l}_close_gt`,style:{color:a.muted}},">")))},Io=({value:t})=>{let[o,e,r]=t.split(/[T.Z]/),s=b();return n.default.createElement("span",{style:{whiteSpace:"nowrap",color:s.date}},o,n.default.createElement("span",{style:{opacity:.7}},"T"),e==="00:00:00"?n.default.createElement("span",{style:{opacity:.7}},e):e,r==="000"?n.default.createElement("span",{style:{opacity:.7}},".",r):`.${r}`,n.default.createElement("span",{style:{opacity:.7}},"Z"))},xo=({name:t,message:o})=>{let e=b();return n.default.createElement("span",{style:{color:e.error.name}},t,o&&": ",o&&n.default.createElement("span",{style:{color:e.error.message},title:o.length>50?o:""},ht(o,50)))},Eo=({flags:t,source:o})=>{let e=b();return n.default.createElement("span",{style:{whiteSpace:"nowrap",color:e.regex.flags}},"/",n.default.createElement("span",{style:{color:e.regex.source}},o),"/",t)},_o=({description:t})=>{let o=b();return n.default.createElement("span",{style:{whiteSpace:"nowrap",color:o.instance}},"Symbol(",t&&n.default.createElement("span",{style:{color:o.meta}},'"',t,'"'),")")},ko=({value:t})=>{let o=b();return n.default.createElement("span",{style:{color:o.meta}},co(t))},wo=({label:t})=>{let o=b(),{typography:e}=(0,J.useTheme)();return n.default.createElement("span",{style:{color:o.base,fontFamily:e.fonts.base,fontSize:e.size.s2-1}},t)},X=({call:t,callsById:o})=>{if(!t)return null;if(t.method==="step"&&t.path.length===0)return n.default.createElement(wo,{label:t.args[0]});let e=t.path.flatMap((l,a)=>{let c=l.__callId__;return[c?n.default.createElement(X,{key:`elem${a}`,call:o.get(c),callsById:o}):n.default.createElement("span",{key:`elem${a}`},l),n.default.createElement("wbr",{key:`wbr${a}`}),n.default.createElement("span",{key:`dot${a}`},".")]}),r=t.args.flatMap((l,a,c)=>{let y=n.default.createElement(N,{key:`node${a}`,value:l,callsById:o});return a<c.length-1?[y,n.default.createElement("span",{key:`comma${a}`},",\xA0"),n.default.createElement("wbr",{key:`wbr${a}`})]:[y]}),s=b();return n.default.createElement(n.default.Fragment,null,n.default.createElement("span",{style:{color:s.base}},e),n.default.createElement("span",{style:{color:s.method}},t.method),n.default.createElement("span",{style:{color:s.base}},"(",n.default.createElement("wbr",null),r,n.default.createElement("wbr",null),")"))};var It=(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""},nt=t=>{try{return t==="undefined"?void 0:JSON.parse(t)}catch{return t}},Ao=H.styled.span(({theme:t})=>({color:t.base==="light"?t.color.positiveText:t.color.positive})),To=H.styled.span(({theme:t})=>({color:t.base==="light"?t.color.negativeText:t.color.negative})),rt=({value:t,parsed:o})=>o?u.default.createElement(N,{showObjectInspector:!0,value:t,style:{color:"#D43900"}}):u.default.createElement(To,null,t),st=({value:t,parsed:o})=>o?typeof t=="string"&&t.startsWith("called with")?u.default.createElement(u.default.Fragment,null,t):u.default.createElement(N,{showObjectInspector:!0,value:t,style:{color:"#16B242"}}):u.default.createElement(Ao,null,t),xt=({message:t})=>{let o=t.split(`
1
+ var Vt=Object.create;var pt=Object.defineProperty;var Jt=Object.getOwnPropertyDescriptor;var Xt=Object.getOwnPropertyNames;var Yt=Object.getPrototypeOf,Zt=Object.prototype.hasOwnProperty;var Ut=(t,o,e,r)=>{if(o&&typeof o=="object"||typeof o=="function")for(let s of Xt(o))!Zt.call(t,s)&&s!==e&&pt(t,s,{get:()=>o[s],enumerable:!(r=Jt(o,s))||r.enumerable});return t};var A=(t,o,e)=>(e=t!=null?Vt(Yt(t)):{},Ut(o||!t||!t.__esModule?pt(e,"default",{value:t,enumerable:!0}):e,t));var R=require("@storybook/manager-api");var et="storybook/interactions",dt=`${et}/panel`;var U=A(require("global")),i=A(require("react")),q=require("@storybook/manager-api"),T=require("@storybook/core-events"),I=require("@storybook/instrumenter");var C=A(require("react")),L=require("@storybook/components"),Z=require("@storybook/instrumenter"),D=require("@storybook/theming"),vt=require("polished");var p=A(require("react")),g=require("@storybook/components"),yt=require("@storybook/instrumenter"),_=require("@storybook/theming");var ut=A(require("react")),v=require("@storybook/instrumenter"),F=require("@storybook/theming"),qt=F.styled.div(({theme:t,status:o})=>{let e={[v.CallStates.DONE]:t.color.positive,[v.CallStates.ERROR]:t.color.negative,[v.CallStates.ACTIVE]:t.color.warning,[v.CallStates.WAITING]:t.color.warning}[o];return{padding:"4px 6px 4px 8px;",borderRadius:"4px",backgroundColor:e,color:"white",fontFamily:F.typography.fonts.base,textTransform:"uppercase",fontSize:F.typography.size.s1,letterSpacing:3,fontWeight:F.typography.weight.bold,width:65,textAlign:"center"}}),gt=({status:t})=>{let o={[v.CallStates.DONE]:"Pass",[v.CallStates.ERROR]:"Fail",[v.CallStates.ACTIVE]:"Runs",[v.CallStates.WAITING]:"Runs"}[t];return ut.default.createElement(qt,{status:t},o)};var Kt=_.styled.div(({theme:t})=>({background:t.background.app,borderBottom:`1px solid ${t.appBorderColor}`,position:"sticky",top:0,zIndex:1})),Qt=_.styled.nav(({theme:t})=>({height:40,display:"flex",alignItems:"center",justifyContent:"space-between",paddingLeft:15})),to=(0,_.styled)(g.Button)(({theme:t})=>({borderRadius:4,padding:6,color:t.textMutedColor,"&:not(:disabled)":{"&:hover,&:focus-visible":{color:t.color.secondary}}})),W=(0,_.styled)(g.TooltipNote)(({theme:t})=>({fontFamily:t.typography.fonts.base})),z=(0,_.styled)(g.IconButton)(({theme:t})=>({color:t.textMutedColor,margin:"0 3px"})),oo=(0,_.styled)(g.Separator)({marginTop:0}),eo=(0,_.styled)(g.P)(({theme:t})=>({color:t.textMutedColor,justifyContent:"flex-end",textAlign:"right",whiteSpace:"nowrap",marginTop:"auto",marginBottom:1,paddingRight:15,fontSize:13})),mt=_.styled.div({display:"flex",alignItems:"center"}),no=(0,_.styled)(z)({marginLeft:9}),ro=(0,_.styled)(to)({marginLeft:9,marginRight:9,marginBottom:1,lineHeight:"12px"}),so=(0,_.styled)(z)(({theme:t,animating:o,disabled:e})=>({opacity:e?.5:1,svg:{animation:o&&`${t.animation.rotate360} 200ms ease-out`}})),ft=({controls:t,controlStates:o,status:e,storyFileName:r,onScrollToEnd:s,isRerunAnimating:l,setIsRerunAnimating:a})=>{let c=e===yt.CallStates.ERROR?"Scroll to error":"Scroll to end";return p.default.createElement(Kt,null,p.default.createElement(g.Bar,null,p.default.createElement(Qt,null,p.default.createElement(mt,null,p.default.createElement(gt,{status:e}),p.default.createElement(ro,{onClick:s,disabled:!s},c),p.default.createElement(oo,null),p.default.createElement(g.WithTooltip,{hasChrome:!1,tooltip:p.default.createElement(W,{note:"Go to start"})},p.default.createElement(no,{"aria-label":"Go to start",containsIcon:!0,onClick:t.start,disabled:!o.start},p.default.createElement(g.Icons,{icon:"rewind"}))),p.default.createElement(g.WithTooltip,{hasChrome:!1,tooltip:p.default.createElement(W,{note:"Go back"})},p.default.createElement(z,{"aria-label":"Go back",containsIcon:!0,onClick:t.back,disabled:!o.back},p.default.createElement(g.Icons,{icon:"playback"}))),p.default.createElement(g.WithTooltip,{hasChrome:!1,tooltip:p.default.createElement(W,{note:"Go forward"})},p.default.createElement(z,{"aria-label":"Go forward",containsIcon:!0,onClick:t.next,disabled:!o.next},p.default.createElement(g.Icons,{icon:"playnext"}))),p.default.createElement(g.WithTooltip,{hasChrome:!1,tooltip:p.default.createElement(W,{note:"Go to end"})},p.default.createElement(z,{"aria-label":"Go to end",containsIcon:!0,onClick:t.end,disabled:!o.end},p.default.createElement(g.Icons,{icon:"fastforward"}))),p.default.createElement(g.WithTooltip,{hasChrome:!1,tooltip:p.default.createElement(W,{note:"Rerun"})},p.default.createElement(so,{"aria-label":"Rerun",containsIcon:!0,onClick:t.rerun,onAnimationEnd:()=>a(!1),animating:l,disabled:l},p.default.createElement(g.Icons,{icon:"sync"})))),r&&p.default.createElement(mt,null,p.default.createElement(eo,null,r)))))};var f=A(require("react")),B=require("@storybook/components"),P=require("@storybook/instrumenter"),S=require("@storybook/theming"),Tt=require("polished");var u=A(require("react")),H=require("@storybook/theming");var Ct=require("@devtools-ds/object-inspector"),J=require("@storybook/theming"),n=A(require("react")),ao={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"},lo={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"},b=()=>{let{base:t}=(0,J.useTheme)();return t==="dark"?lo:ao},io=/[^A-Z0-9]/i,bt=/[\s.,…]+$/gm,ht=(t,o)=>{if(t.length<=o)return t;for(let e=o-1;e>=0;e-=1)if(io.test(t[e])&&e>10)return`${t.slice(0,e).replace(bt,"")}\u2026`;return`${t.slice(0,o).replace(bt,"")}\u2026`},co=t=>{try{return JSON.stringify(t,null,1)}catch{return String(t)}},St=(t,o)=>t.flatMap((e,r)=>r===t.length-1?[e]:[e,n.default.cloneElement(o,{key:`sep${r}`})]),N=({value:t,nested:o,showObjectInspector:e,callsById:r,...s})=>{switch(!0){case t===null:return n.default.createElement(po,{...s});case t===void 0:return n.default.createElement(uo,{...s});case Array.isArray(t):return n.default.createElement(fo,{...s,value:t,callsById:r});case typeof t=="string":return n.default.createElement(go,{...s,value:t});case typeof t=="number":return n.default.createElement(mo,{...s,value:t});case typeof t=="boolean":return n.default.createElement(yo,{...s,value:t});case Object.prototype.hasOwnProperty.call(t,"__date__"):return n.default.createElement(Io,{...s,...t.__date__});case Object.prototype.hasOwnProperty.call(t,"__error__"):return n.default.createElement(xo,{...s,...t.__error__});case Object.prototype.hasOwnProperty.call(t,"__regexp__"):return n.default.createElement(Eo,{...s,...t.__regexp__});case Object.prototype.hasOwnProperty.call(t,"__function__"):return n.default.createElement(ho,{...s,...t.__function__});case Object.prototype.hasOwnProperty.call(t,"__symbol__"):return n.default.createElement(_o,{...s,...t.__symbol__});case Object.prototype.hasOwnProperty.call(t,"__element__"):return n.default.createElement(So,{...s,...t.__element__});case Object.prototype.hasOwnProperty.call(t,"__class__"):return n.default.createElement(Co,{...s,...t.__class__});case Object.prototype.hasOwnProperty.call(t,"__callId__"):return n.default.createElement(X,{call:r.get(t.__callId__),callsById:r});case Object.prototype.toString.call(t)==="[object Object]":return n.default.createElement(bo,{value:t,showInspector:e,...s});default:return n.default.createElement(ko,{value:t,...s})}},po=t=>{let o=b();return n.default.createElement("span",{style:{color:o.nullish},...t},"null")},uo=t=>{let o=b();return n.default.createElement("span",{style:{color:o.nullish},...t},"undefined")},go=({value:t,...o})=>{let e=b();return n.default.createElement("span",{style:{color:e.string},...o},JSON.stringify(ht(t,50)))},mo=({value:t,...o})=>{let e=b();return n.default.createElement("span",{style:{color:e.number},...o},t)},yo=({value:t,...o})=>{let e=b();return n.default.createElement("span",{style:{color:e.boolean},...o},String(t))},fo=({value:t,nested:o=!1,callsById:e})=>{let r=b();if(o)return n.default.createElement("span",{style:{color:r.base}},"[\u2026]");let s=t.slice(0,3).map(a=>n.default.createElement(N,{key:JSON.stringify(a),value:a,nested:!0,callsById:e})),l=St(s,n.default.createElement("span",null,", "));return t.length<=3?n.default.createElement("span",{style:{color:r.base}},"[",l,"]"):n.default.createElement("span",{style:{color:r.base}},"(",t.length,") [",l,", \u2026]")},bo=({showInspector:t,value:o,nested:e=!1})=>{let r=(0,J.useTheme)().base==="dark",s=b();if(t)return n.default.createElement(n.default.Fragment,null,n.default.createElement(Ct.ObjectInspector,{id:"interactions-object-inspector",data:o,includePrototypes:!1,colorScheme:r?"dark":"light"}));if(e)return n.default.createElement("span",{style:{color:s.base}},"{\u2026}");let l=St(Object.entries(o).slice(0,2).map(([a,c])=>n.default.createElement(n.Fragment,{key:a},n.default.createElement("span",{style:{color:s.objectkey}},a,": "),n.default.createElement(N,{value:c,nested:!0}))),n.default.createElement("span",null,", "));return Object.keys(o).length<=2?n.default.createElement("span",{style:{color:s.base}},"{ ",l," }"):n.default.createElement("span",{style:{color:s.base}},"(",Object.keys(o).length,") ","{ ",l,", \u2026 }")},Co=({name:t})=>{let o=b();return n.default.createElement("span",{style:{color:o.instance}},t)},ho=({name:t})=>{let o=b();return t?n.default.createElement("span",{style:{color:o.function}},t):n.default.createElement("span",{style:{color:o.nullish,fontStyle:"italic"}},"anonymous")},So=({prefix:t,localName:o,id:e,classNames:r=[],innerText:s})=>{let l=t?`${t}:${o}`:o,a=b();return n.default.createElement("span",{style:{wordBreak:"keep-all"}},n.default.createElement("span",{key:`${l}_lt`,style:{color:a.muted}},"<"),n.default.createElement("span",{key:`${l}_tag`,style:{color:a.tag.name}},l),n.default.createElement("span",{key:`${l}_suffix`,style:{color:a.tag.suffix}},e?`#${e}`:r.reduce((c,y)=>`${c}.${y}`,"")),n.default.createElement("span",{key:`${l}_gt`,style:{color:a.muted}},">"),!e&&r.length===0&&s&&n.default.createElement(n.default.Fragment,null,n.default.createElement("span",{key:`${l}_text`},s),n.default.createElement("span",{key:`${l}_close_lt`,style:{color:a.muted}},"<"),n.default.createElement("span",{key:`${l}_close_tag`,style:{color:a.tag.name}},"/",l),n.default.createElement("span",{key:`${l}_close_gt`,style:{color:a.muted}},">")))},Io=({value:t})=>{let[o,e,r]=t.split(/[T.Z]/),s=b();return n.default.createElement("span",{style:{whiteSpace:"nowrap",color:s.date}},o,n.default.createElement("span",{style:{opacity:.7}},"T"),e==="00:00:00"?n.default.createElement("span",{style:{opacity:.7}},e):e,r==="000"?n.default.createElement("span",{style:{opacity:.7}},".",r):`.${r}`,n.default.createElement("span",{style:{opacity:.7}},"Z"))},xo=({name:t,message:o})=>{let e=b();return n.default.createElement("span",{style:{color:e.error.name}},t,o&&": ",o&&n.default.createElement("span",{style:{color:e.error.message},title:o.length>50?o:""},ht(o,50)))},Eo=({flags:t,source:o})=>{let e=b();return n.default.createElement("span",{style:{whiteSpace:"nowrap",color:e.regex.flags}},"/",n.default.createElement("span",{style:{color:e.regex.source}},o),"/",t)},_o=({description:t})=>{let o=b();return n.default.createElement("span",{style:{whiteSpace:"nowrap",color:o.instance}},"Symbol(",t&&n.default.createElement("span",{style:{color:o.meta}},'"',t,'"'),")")},ko=({value:t})=>{let o=b();return n.default.createElement("span",{style:{color:o.meta}},co(t))},wo=({label:t})=>{let o=b(),{typography:e}=(0,J.useTheme)();return n.default.createElement("span",{style:{color:o.base,fontFamily:e.fonts.base,fontSize:e.size.s2-1}},t)},X=({call:t,callsById:o})=>{if(!t)return null;if(t.method==="step"&&t.path.length===0)return n.default.createElement(wo,{label:t.args[0]});let e=t.path.flatMap((l,a)=>{let c=l.__callId__;return[c?n.default.createElement(X,{key:`elem${a}`,call:o.get(c),callsById:o}):n.default.createElement("span",{key:`elem${a}`},l),n.default.createElement("wbr",{key:`wbr${a}`}),n.default.createElement("span",{key:`dot${a}`},".")]}),r=t.args.flatMap((l,a,c)=>{let y=n.default.createElement(N,{key:`node${a}`,value:l,callsById:o});return a<c.length-1?[y,n.default.createElement("span",{key:`comma${a}`},",\xA0"),n.default.createElement("wbr",{key:`wbr${a}`})]:[y]}),s=b();return n.default.createElement(n.default.Fragment,null,n.default.createElement("span",{style:{color:s.base}},e),n.default.createElement("span",{style:{color:s.method}},t.method),n.default.createElement("span",{style:{color:s.base}},"(",n.default.createElement("wbr",null),r,n.default.createElement("wbr",null),")"))};var It=(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""},nt=t=>{try{return t==="undefined"?void 0:JSON.parse(t)}catch{return t}},Ao=H.styled.span(({theme:t})=>({color:t.base==="light"?t.color.positiveText:t.color.positive})),To=H.styled.span(({theme:t})=>({color:t.base==="light"?t.color.negativeText:t.color.negative})),rt=({value:t,parsed:o})=>o?u.default.createElement(N,{showObjectInspector:!0,value:t,style:{color:"#D43900"}}):u.default.createElement(To,null,t),st=({value:t,parsed:o})=>o?typeof t=="string"&&t.startsWith("called with")?u.default.createElement(u.default.Fragment,null,t):u.default.createElement(N,{showObjectInspector:!0,value:t,style:{color:"#16B242"}}):u.default.createElement(Ao,null,t),xt=({message:t})=>{let o=t.split(`
2
2
  `);return u.default.createElement("pre",{style:{margin:0,padding:"8px 10px 8px 36px",fontSize:H.typography.size.s1}},o.flatMap((e,r)=>{if(e.startsWith("expect(")){let m=It(e,7),h=m&&7+m.length,x=m&&e.slice(h).match(/\.(to|last|nth)[A-Z]\w+\(/);if(x){let E=h+x.index+x[0].length,k=It(e,E);if(k)return["expect(",u.default.createElement(rt,{key:`received_${m}`,value:m}),e.slice(h,E),u.default.createElement(st,{key:`expected_${k}`,value:k}),e.slice(E+k.length),u.default.createElement("br",{key:`br${r}`})]}}if(e.match(/^\s*- /))return[u.default.createElement(st,{key:e+r,value:e}),u.default.createElement("br",{key:`br${r}`})];if(e.match(/^\s*\+ /))return[u.default.createElement(rt,{key:e+r,value:e}),u.default.createElement("br",{key:`br${r}`})];let[,s,l]=e.match(/^(Expected|Received): (.*)$/)||[];if(s&&l)return s==="Expected"?["Expected: ",u.default.createElement(st,{key:e+r,value:nt(l),parsed:!0}),u.default.createElement("br",{key:`br${r}`})]:["Received: ",u.default.createElement(rt,{key:e+r,value:nt(l),parsed:!0}),u.default.createElement("br",{key:`br${r}`})];let[,a,c]=e.match(/(Expected number|Received number|Number) of calls: (\d+)$/i)||[];if(a&&c)return[`${a} of calls: `,u.default.createElement(N,{key:e+r,value:Number(c)}),u.default.createElement("br",{key:`br${r}`})];let[,y]=e.match(/^Received has value: (.+)$/)||[];return y?["Received has value: ",u.default.createElement(N,{key:e+r,value:nt(y)}),u.default.createElement("br",{key:`br${r}`})]:[u.default.createElement("span",{key:e+r},e),u.default.createElement("br",{key:`br${r}`})]}))};var _t=A(require("react")),kt=require("@storybook/components"),w=require("@storybook/instrumenter"),wt=require("@storybook/theming"),At=require("polished");var Oo={pure:{gray:{500:"#CCCCCC"}}},vo={colors:Oo},Et=vo;var{colors:{pure:{gray:No}}}=Et,Po=(0,wt.styled)(kt.Icons)(({theme:t,status:o})=>{let e={[w.CallStates.DONE]:t.color.positive,[w.CallStates.ERROR]:t.color.negative,[w.CallStates.ACTIVE]:t.color.secondary,[w.CallStates.WAITING]:(0,At.transparentize)(.5,No[500])}[o];return{width:o===w.CallStates.WAITING?6:12,height:o===w.CallStates.WAITING?6:12,color:e,justifySelf:"center"}}),Y=({status:t,className:o})=>{let e={[w.CallStates.DONE]:"check",[w.CallStates.ERROR]:"stopalt",[w.CallStates.ACTIVE]:"play",[w.CallStates.WAITING]:"circle"}[t];return _t.default.createElement(Po,{"data-testid":`icon-${t}`,status:t,icon:e,className:o})};var Bo=S.styled.div(()=>({fontFamily:S.typography.fonts.mono,fontSize:S.typography.size.s1,overflowWrap:"break-word",inlineSize:"calc( 100% - 40px )"})),$o=(0,S.styled)("div",{shouldForwardProp:t=>!["call","pausedAt"].includes(t.toString())})(({theme:t,call:o})=>({position:"relative",display:"flex",flexDirection:"column",borderBottom:`1px solid ${t.appBorderColor}`,fontFamily:S.typography.fonts.base,fontSize:13,...o.status===P.CallStates.ERROR&&{backgroundColor:t.base==="dark"?(0,Tt.transparentize)(.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}`}}),Do=S.styled.div(({theme:t,isInteractive:o})=>({display:"flex","&:hover":o?{}:{background:t.background.hoverable}})),Mo=(0,S.styled)("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===P.CallStates.ERROR?"default":"pointer","&:focus-visible":{outline:0,boxShadow:`inset 3px 0 0 0 ${e.status===P.CallStates.ERROR?t.color.warning:t.color.secondary}`,background:e.status===P.CallStates.ERROR?"transparent":t.background.hoverable},"& > div":{opacity:e.status===P.CallStates.WAITING?.5:1}})),Fo=S.styled.div({padding:6}),Lo=(0,S.styled)(B.IconButton)(({theme:t})=>({color:t.textMutedColor,margin:"0 3px"})),jo=(0,S.styled)(B.TooltipNote)(({theme:t})=>({fontFamily:t.typography.fonts.base})),Wo=(0,S.styled)("div")(({theme:t})=>({padding:"8px 10px 8px 36px",fontSize:S.typography.size.s1,color:t.color.defaultText,pre:{margin:0,padding:0}})),zo=({exception:t})=>{if(t.message.startsWith("expect("))return f.createElement(xt,{...t});let o=t.message.split(`
3
3
 
4
4
  `),e=o.length>1;return f.createElement(Wo,null,f.createElement("pre",null,o[0]),e&&f.createElement("p",null,"See the full stack trace in the browser console."))},Ot=({call:t,callsById:o,controls:e,controlStates:r,childCallIds:s,isHidden:l,isCollapsed:a,toggleCollapsed:c,pausedAt:y})=>{var E;let[m,h]=f.useState(!1),x=!r.goto||!t.interceptable||!!t.ancestors.length;return l?null:f.createElement($o,{call:t,pausedAt:y},f.createElement(Do,{isInteractive:x},f.createElement(Mo,{call:t,onClick:()=>e.goto(t.id),disabled:x,onMouseEnter:()=>r.goto&&h(!0),onMouseLeave:()=>r.goto&&h(!1)},f.createElement(Y,{status:m?P.CallStates.ACTIVE:t.status}),f.createElement(Bo,{style:{marginLeft:6,marginBottom:1}},f.createElement(X,{call:t,callsById:o}))),f.createElement(Fo,null,(s==null?void 0:s.length)>0&&f.createElement(B.WithTooltip,{hasChrome:!1,tooltip:f.createElement(jo,{note:`${a?"Show":"Hide"} interactions`})},f.createElement(Lo,{containsIcon:!0,onClick:c},f.createElement(B.Icons,{icon:"listunordered"}))))),t.status===P.CallStates.ERROR&&((E=t.exception)==null?void 0:E.callId)===t.id&&f.createElement(zo,{exception:t.exception}))};var Ho=D.styled.div(({theme:t,withException:o})=>({minHeight:"100%",background:t.background.content,...o&&{backgroundColor:t.base==="dark"?(0,vt.transparentize)(.93,t.color.negative):t.background.warning}})),Ro=D.styled.div(({theme:t})=>({padding:15,fontSize:t.typography.size.s2-1,lineHeight:"19px"})),Go=D.styled.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})),Vo=D.styled.div({paddingBottom:4,fontWeight:"bold"}),Jo=D.styled.p({margin:0,padding:"0 0 20px"}),Xo=D.styled.pre(({theme:t})=>({margin:0,padding:0,fontSize:t.typography.size.s1-1})),Nt=C.memo(function({calls:o,controls:e,controlStates:r,interactions:s,fileName:l,hasException:a,caughtException:c,isPlaying:y,pausedAt:m,onScrollToEnd:h,endRef:x,isRerunAnimating:E,setIsRerunAnimating:k,...K}){var $;return C.createElement(L.AddonPanel,{...K},C.createElement(Ho,{withException:!!c},r.debugger&&(s.length>0||a||E)&&C.createElement(ft,{controls:e,controlStates:r,status:y?Z.CallStates.ACTIVE:a?Z.CallStates.ERROR:Z.CallStates.DONE,storyFileName:l,onScrollToEnd:h,isRerunAnimating:E,setIsRerunAnimating:k}),C.createElement("div",null,s.map(O=>C.createElement(Ot,{key:O.id,call:O,callsById:o,controls:e,controlStates:r,childCallIds:O.childCallIds,isHidden:O.isHidden,isCollapsed:O.isCollapsed,toggleCollapsed:O.toggleCollapsed,pausedAt:m}))),c&&!(($=c.message)!=null&&$.startsWith("ignoredException"))&&C.createElement(Ro,null,C.createElement(Vo,null,"Caught exception in ",C.createElement(Go,null,"play")," function"),C.createElement(Jo,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."),C.createElement(Xo,{"data-chromatic":"ignore"},c.stack||`${c.name}: ${c.message}`)),C.createElement("div",{ref:x}),!y&&!c&&s.length===0&&C.createElement(L.Placeholder,null,"No interactions found",C.createElement(L.Link,{href:"https://storybook.js.org/docs/react/writing-stories/play-function",target:"_blank",withArrow:!0},"Learn how to add interactions to your story"))))});var Pt=require("@storybook/theming"),Bt=A(require("react-dom"));var $t=({children:t})=>{let o=global.document.getElementById("tabbutton-interactions");return o&&Bt.default.createPortal(t,o)},Dt=(0,Pt.styled)(Y)({marginLeft:5});var Yo={debugger:!1,start:!1,back:!1,goto:!1,next:!1,end:!1},Mt=({log:t,calls:o,collapsed:e,setCollapsed:r})=>{let s=new Map,l=new Map;return t.map(({callId:a,ancestors:c,status:y})=>{let m=!1;return c.forEach(h=>{e.has(h)&&(m=!0),l.set(h,(l.get(h)||[]).concat(a))}),{...o.get(a),status:y,isHidden:m}}).map(a=>{var y;let c=a.status===I.CallStates.ERROR&&((y=s.get(a.ancestors.slice(-1)[0]))==null?void 0:y.status)===I.CallStates.ACTIVE?I.CallStates.ACTIVE:a.status;return s.set(a.id,{...a,status:c}),{...a,status:c,childCallIds:l.get(a.id),isCollapsed:e.has(a.id),toggleCollapsed:()=>r(m=>(m.has(a.id)?m.delete(a.id):m.add(a.id),new Set(m)))}})},Ft=t=>{let[o,e]=i.useState(),[r,s]=i.useState(Yo),[l,a]=i.useState(),[c,y]=i.useState(!1),[m,h]=i.useState(!1),[x,E]=i.useState(!1),[k,K]=i.useState(),[$,O]=i.useState(new Set),[Q,tt]=i.useState(),[G,at]=i.useState([]),[lt,Lt]=i.useState(),it=i.useRef([]),V=i.useRef(new Map),jt=({status:d,...j})=>V.current.set(j.id,j),ot=i.useRef();i.useEffect(()=>{let d;return U.default.window.IntersectionObserver&&(d=new U.default.window.IntersectionObserver(([j])=>K(j.isIntersecting?void 0:j.target),{root:U.default.window.document.querySelector("#panel-tab-content")}),ot.current&&d.observe(ot.current)),()=>d==null?void 0:d.disconnect()},[]);let M=(0,q.useChannel)({[I.EVENTS.CALL]:jt,[I.EVENTS.SYNC]:d=>{s(d.controlStates),a(d.pausedAt),at(Mt({log:d.logItems,calls:V.current,collapsed:$,setCollapsed:O})),it.current=d.logItems},[T.STORY_RENDER_PHASE_CHANGED]:d=>{e(d.storyId),h(d.newPhase==="playing"),a(void 0),d.newPhase==="rendering"&&(y(!1),tt(void 0))},[T.STORY_THREW_EXCEPTION]:()=>{y(!0)},[T.PLAY_FUNCTION_THREW_EXCEPTION]:d=>{(d==null?void 0:d.message)!==T.IGNORED_EXCEPTION.message?tt(d):tt(void 0)}},[$]);i.useEffect(()=>{at(Mt({log:it.current,calls:V.current,collapsed:$,setCollapsed:O}))},[$]),i.useEffect(()=>{m||x||Lt(G.filter(({method:d})=>d!=="step").length)},[G,m,x]);let Wt=i.useMemo(()=>({start:()=>M(I.EVENTS.START,{storyId:o}),back:()=>M(I.EVENTS.BACK,{storyId:o}),goto:d=>M(I.EVENTS.GOTO,{storyId:o,callId:d}),next:()=>M(I.EVENTS.NEXT,{storyId:o}),end:()=>M(I.EVENTS.END,{storyId:o}),rerun:()=>{E(!0),M(T.FORCE_REMOUNT,{storyId:o})}}),[o]),zt=(0,q.useParameter)("fileName",""),[Ht]=zt.toString().split("/").slice(-1),Rt=()=>k==null?void 0:k.scrollIntoView({behavior:"smooth",block:"end"}),Gt=lt>0||!!Q||x,ct=!!Q||G.some(d=>d.status===I.CallStates.ERROR);return c?i.createElement(i.Fragment,{key:"interactions"}):i.createElement(i.Fragment,{key:"interactions"},i.createElement($t,null,Gt&&(ct?i.createElement(Dt,{status:I.CallStates.ERROR}):` (${lt})`)),i.createElement(Nt,{calls:V.current,controls:Wt,controlStates:r,interactions:G,fileName:Ht,hasException:ct,caughtException:Q,isPlaying:m,pausedAt:l,endRef:ot,onScrollToEnd:k&&Rt,isRerunAnimating:x,setIsRerunAnimating:E,...t}))};R.addons.register(et,()=>{R.addons.add(dt,{type:R.types.PANEL,title:"Interactions",match:({viewMode:t})=>t==="story",render:Ft})});
package/dist/manager.mjs CHANGED
@@ -1,4 +1,4 @@
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(`
1
+ import{addons,types}from"@storybook/manager-api";var ADDON_ID="storybook/interactions",PANEL_ID=`${ADDON_ID}/panel`;import global2 from"global";import*as React8 from"react";import{useChannel,useParameter}from"@storybook/manager-api";import{FORCE_REMOUNT,IGNORED_EXCEPTION,STORY_RENDER_PHASE_CHANGED,STORY_THREW_EXCEPTION,PLAY_FUNCTION_THREW_EXCEPTION}from"@storybook/core-events";import{EVENTS,CallStates as CallStates6}from"@storybook/instrumenter";import*as React7 from"react";import{AddonPanel,Link,Placeholder}from"@storybook/components";import{CallStates as CallStates5}from"@storybook/instrumenter";import{styled as styled6}from"@storybook/theming";import{transparentize as transparentize3}from"polished";import React2 from"react";import{Button,IconButton,Icons,Separator,P,TooltipNote,WithTooltip,Bar}from"@storybook/components";import{CallStates as CallStates2}from"@storybook/instrumenter";import{styled as styled2}from"@storybook/theming";import React from"react";import{CallStates}from"@storybook/instrumenter";import{styled,typography}from"@storybook/theming";var StyledBadge=styled.div(({theme:theme2,status})=>{let backgroundColor={[CallStates.DONE]:theme2.color.positive,[CallStates.ERROR]:theme2.color.negative,[CallStates.ACTIVE]:theme2.color.warning,[CallStates.WAITING]:theme2.color.warning}[status];return{padding:"4px 6px 4px 8px;",borderRadius:"4px",backgroundColor,color:"white",fontFamily:typography.fonts.base,textTransform:"uppercase",fontSize:typography.size.s1,letterSpacing:3,fontWeight:typography.weight.bold,width:65,textAlign:"center"}}),StatusBadge=({status})=>{let badgeText={[CallStates.DONE]:"Pass",[CallStates.ERROR]:"Fail",[CallStates.ACTIVE]:"Runs",[CallStates.WAITING]:"Runs"}[status];return React.createElement(StyledBadge,{status},badgeText)};var SubnavWrapper=styled2.div(({theme:theme2})=>({background:theme2.background.app,borderBottom:`1px solid ${theme2.appBorderColor}`,position:"sticky",top:0,zIndex:1})),StyledSubnav=styled2.nav(({theme:theme2})=>({height:40,display:"flex",alignItems:"center",justifyContent:"space-between",paddingLeft:15})),StyledButton=styled2(Button)(({theme:theme2})=>({borderRadius:4,padding:6,color:theme2.textMutedColor,"&:not(:disabled)":{"&:hover,&:focus-visible":{color:theme2.color.secondary}}})),Note=styled2(TooltipNote)(({theme:theme2})=>({fontFamily:theme2.typography.fonts.base})),StyledIconButton=styled2(IconButton)(({theme:theme2})=>({color:theme2.textMutedColor,margin:"0 3px"})),StyledSeparator=styled2(Separator)({marginTop:0}),StyledLocation=styled2(P)(({theme:theme2})=>({color:theme2.textMutedColor,justifyContent:"flex-end",textAlign:"right",whiteSpace:"nowrap",marginTop:"auto",marginBottom:1,paddingRight:15,fontSize:13})),Group=styled2.div({display:"flex",alignItems:"center"}),RewindButton=styled2(StyledIconButton)({marginLeft:9}),JumpToEndButton=styled2(StyledButton)({marginLeft:9,marginRight:9,marginBottom:1,lineHeight:"12px"}),RerunButton=styled2(StyledIconButton)(({theme:theme2,animating,disabled})=>({opacity:disabled?.5:1,svg:{animation:animating&&`${theme2.animation.rotate360} 200ms ease-out`}})),Subnav=({controls,controlStates,status,storyFileName,onScrollToEnd,isRerunAnimating,setIsRerunAnimating})=>{let buttonText=status===CallStates2.ERROR?"Scroll to error":"Scroll to end";return React2.createElement(SubnavWrapper,null,React2.createElement(Bar,null,React2.createElement(StyledSubnav,null,React2.createElement(Group,null,React2.createElement(StatusBadge,{status}),React2.createElement(JumpToEndButton,{onClick:onScrollToEnd,disabled:!onScrollToEnd},buttonText),React2.createElement(StyledSeparator,null),React2.createElement(WithTooltip,{hasChrome:!1,tooltip:React2.createElement(Note,{note:"Go to start"})},React2.createElement(RewindButton,{"aria-label":"Go to start",containsIcon:!0,onClick:controls.start,disabled:!controlStates.start},React2.createElement(Icons,{icon:"rewind"}))),React2.createElement(WithTooltip,{hasChrome:!1,tooltip:React2.createElement(Note,{note:"Go back"})},React2.createElement(StyledIconButton,{"aria-label":"Go back",containsIcon:!0,onClick:controls.back,disabled:!controlStates.back},React2.createElement(Icons,{icon:"playback"}))),React2.createElement(WithTooltip,{hasChrome:!1,tooltip:React2.createElement(Note,{note:"Go forward"})},React2.createElement(StyledIconButton,{"aria-label":"Go forward",containsIcon:!0,onClick:controls.next,disabled:!controlStates.next},React2.createElement(Icons,{icon:"playnext"}))),React2.createElement(WithTooltip,{hasChrome:!1,tooltip:React2.createElement(Note,{note:"Go to end"})},React2.createElement(StyledIconButton,{"aria-label":"Go to end",containsIcon:!0,onClick:controls.end,disabled:!controlStates.end},React2.createElement(Icons,{icon:"fastforward"}))),React2.createElement(WithTooltip,{hasChrome:!1,tooltip:React2.createElement(Note,{note:"Rerun"})},React2.createElement(RerunButton,{"aria-label":"Rerun",containsIcon:!0,onClick:controls.rerun,onAnimationEnd:()=>setIsRerunAnimating(!1),animating:isRerunAnimating,disabled:isRerunAnimating},React2.createElement(Icons,{icon:"sync"})))),storyFileName&&React2.createElement(Group,null,React2.createElement(StyledLocation,null,storyFileName)))))};import*as React6 from"react";import{IconButton as IconButton2,Icons as Icons3,TooltipNote as TooltipNote2,WithTooltip as WithTooltip2}from"@storybook/components";import{CallStates as CallStates4}from"@storybook/instrumenter";import{styled as styled5,typography as typography3}from"@storybook/theming";import{transparentize as transparentize2}from"polished";import React4 from"react";import{styled as styled3,typography as typography2}from"@storybook/theming";import{ObjectInspector}from"@devtools-ds/object-inspector";import{useTheme}from"@storybook/theming";import React3,{Fragment}from"react";var colorsLight={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"},colorsDark={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"},useThemeColors=()=>{let{base}=useTheme();return base==="dark"?colorsDark:colorsLight},special=/[^A-Z0-9]/i,trimEnd=/[\s.,…]+$/gm,ellipsize=(string,maxlength)=>{if(string.length<=maxlength)return string;for(let i=maxlength-1;i>=0;i-=1)if(special.test(string[i])&&i>10)return`${string.slice(0,i).replace(trimEnd,"")}\u2026`;return`${string.slice(0,maxlength).replace(trimEnd,"")}\u2026`},stringify=value=>{try{return JSON.stringify(value,null,1)}catch{return String(value)}},interleave=(nodes,separator)=>nodes.flatMap((node,index)=>index===nodes.length-1?[node]:[node,React3.cloneElement(separator,{key:`sep${index}`})]),Node=({value,nested,showObjectInspector,callsById,...props})=>{switch(!0){case value===null:return React3.createElement(NullNode,{...props});case value===void 0:return React3.createElement(UndefinedNode,{...props});case Array.isArray(value):return React3.createElement(ArrayNode,{...props,value,callsById});case typeof value=="string":return React3.createElement(StringNode,{...props,value});case typeof value=="number":return React3.createElement(NumberNode,{...props,value});case typeof value=="boolean":return React3.createElement(BooleanNode,{...props,value});case Object.prototype.hasOwnProperty.call(value,"__date__"):return React3.createElement(DateNode,{...props,...value.__date__});case Object.prototype.hasOwnProperty.call(value,"__error__"):return React3.createElement(ErrorNode,{...props,...value.__error__});case Object.prototype.hasOwnProperty.call(value,"__regexp__"):return React3.createElement(RegExpNode,{...props,...value.__regexp__});case Object.prototype.hasOwnProperty.call(value,"__function__"):return React3.createElement(FunctionNode,{...props,...value.__function__});case Object.prototype.hasOwnProperty.call(value,"__symbol__"):return React3.createElement(SymbolNode,{...props,...value.__symbol__});case Object.prototype.hasOwnProperty.call(value,"__element__"):return React3.createElement(ElementNode,{...props,...value.__element__});case Object.prototype.hasOwnProperty.call(value,"__class__"):return React3.createElement(ClassNode,{...props,...value.__class__});case Object.prototype.hasOwnProperty.call(value,"__callId__"):return React3.createElement(MethodCall,{call:callsById.get(value.__callId__),callsById});case Object.prototype.toString.call(value)==="[object Object]":return React3.createElement(ObjectNode,{value,showInspector:showObjectInspector,...props});default:return React3.createElement(OtherNode,{value,...props})}},NullNode=props=>{let colors2=useThemeColors();return React3.createElement("span",{style:{color:colors2.nullish},...props},"null")},UndefinedNode=props=>{let colors2=useThemeColors();return React3.createElement("span",{style:{color:colors2.nullish},...props},"undefined")},StringNode=({value,...props})=>{let colors2=useThemeColors();return React3.createElement("span",{style:{color:colors2.string},...props},JSON.stringify(ellipsize(value,50)))},NumberNode=({value,...props})=>{let colors2=useThemeColors();return React3.createElement("span",{style:{color:colors2.number},...props},value)},BooleanNode=({value,...props})=>{let colors2=useThemeColors();return React3.createElement("span",{style:{color:colors2.boolean},...props},String(value))},ArrayNode=({value,nested=!1,callsById})=>{let colors2=useThemeColors();if(nested)return React3.createElement("span",{style:{color:colors2.base}},"[\u2026]");let nodes=value.slice(0,3).map(v=>React3.createElement(Node,{key:JSON.stringify(v),value:v,nested:!0,callsById})),nodelist=interleave(nodes,React3.createElement("span",null,", "));return value.length<=3?React3.createElement("span",{style:{color:colors2.base}},"[",nodelist,"]"):React3.createElement("span",{style:{color:colors2.base}},"(",value.length,") [",nodelist,", \u2026]")},ObjectNode=({showInspector,value,nested=!1})=>{let isDarkMode=useTheme().base==="dark",colors2=useThemeColors();if(showInspector)return React3.createElement(React3.Fragment,null,React3.createElement(ObjectInspector,{id:"interactions-object-inspector",data:value,includePrototypes:!1,colorScheme:isDarkMode?"dark":"light"}));if(nested)return React3.createElement("span",{style:{color:colors2.base}},"{\u2026}");let nodelist=interleave(Object.entries(value).slice(0,2).map(([k,v])=>React3.createElement(Fragment,{key:k},React3.createElement("span",{style:{color:colors2.objectkey}},k,": "),React3.createElement(Node,{value:v,nested:!0}))),React3.createElement("span",null,", "));return Object.keys(value).length<=2?React3.createElement("span",{style:{color:colors2.base}},"{ ",nodelist," }"):React3.createElement("span",{style:{color:colors2.base}},"(",Object.keys(value).length,") ","{ ",nodelist,", \u2026 }")},ClassNode=({name})=>{let colors2=useThemeColors();return React3.createElement("span",{style:{color:colors2.instance}},name)},FunctionNode=({name})=>{let colors2=useThemeColors();return name?React3.createElement("span",{style:{color:colors2.function}},name):React3.createElement("span",{style:{color:colors2.nullish,fontStyle:"italic"}},"anonymous")},ElementNode=({prefix,localName,id,classNames=[],innerText})=>{let name=prefix?`${prefix}:${localName}`:localName,colors2=useThemeColors();return React3.createElement("span",{style:{wordBreak:"keep-all"}},React3.createElement("span",{key:`${name}_lt`,style:{color:colors2.muted}},"<"),React3.createElement("span",{key:`${name}_tag`,style:{color:colors2.tag.name}},name),React3.createElement("span",{key:`${name}_suffix`,style:{color:colors2.tag.suffix}},id?`#${id}`:classNames.reduce((acc,className)=>`${acc}.${className}`,"")),React3.createElement("span",{key:`${name}_gt`,style:{color:colors2.muted}},">"),!id&&classNames.length===0&&innerText&&React3.createElement(React3.Fragment,null,React3.createElement("span",{key:`${name}_text`},innerText),React3.createElement("span",{key:`${name}_close_lt`,style:{color:colors2.muted}},"<"),React3.createElement("span",{key:`${name}_close_tag`,style:{color:colors2.tag.name}},"/",name),React3.createElement("span",{key:`${name}_close_gt`,style:{color:colors2.muted}},">")))},DateNode=({value})=>{let[date,time,ms]=value.split(/[T.Z]/),colors2=useThemeColors();return React3.createElement("span",{style:{whiteSpace:"nowrap",color:colors2.date}},date,React3.createElement("span",{style:{opacity:.7}},"T"),time==="00:00:00"?React3.createElement("span",{style:{opacity:.7}},time):time,ms==="000"?React3.createElement("span",{style:{opacity:.7}},".",ms):`.${ms}`,React3.createElement("span",{style:{opacity:.7}},"Z"))},ErrorNode=({name,message})=>{let colors2=useThemeColors();return React3.createElement("span",{style:{color:colors2.error.name}},name,message&&": ",message&&React3.createElement("span",{style:{color:colors2.error.message},title:message.length>50?message:""},ellipsize(message,50)))},RegExpNode=({flags,source})=>{let colors2=useThemeColors();return React3.createElement("span",{style:{whiteSpace:"nowrap",color:colors2.regex.flags}},"/",React3.createElement("span",{style:{color:colors2.regex.source}},source),"/",flags)},SymbolNode=({description})=>{let colors2=useThemeColors();return React3.createElement("span",{style:{whiteSpace:"nowrap",color:colors2.instance}},"Symbol(",description&&React3.createElement("span",{style:{color:colors2.meta}},'"',description,'"'),")")},OtherNode=({value})=>{let colors2=useThemeColors();return React3.createElement("span",{style:{color:colors2.meta}},stringify(value))},StepNode=({label})=>{let colors2=useThemeColors(),{typography:typography4}=useTheme();return React3.createElement("span",{style:{color:colors2.base,fontFamily:typography4.fonts.base,fontSize:typography4.size.s2-1}},label)},MethodCall=({call,callsById})=>{if(!call)return null;if(call.method==="step"&&call.path.length===0)return React3.createElement(StepNode,{label:call.args[0]});let path=call.path.flatMap((elem,index)=>{let callId=elem.__callId__;return[callId?React3.createElement(MethodCall,{key:`elem${index}`,call:callsById.get(callId),callsById}):React3.createElement("span",{key:`elem${index}`},elem),React3.createElement("wbr",{key:`wbr${index}`}),React3.createElement("span",{key:`dot${index}`},".")]}),args=call.args.flatMap((arg,index,array)=>{let node=React3.createElement(Node,{key:`node${index}`,value:arg,callsById});return index<array.length-1?[node,React3.createElement("span",{key:`comma${index}`},",\xA0"),React3.createElement("wbr",{key:`wbr${index}`})]:[node]}),colors2=useThemeColors();return React3.createElement(React3.Fragment,null,React3.createElement("span",{style:{color:colors2.base}},path),React3.createElement("span",{style:{color:colors2.method}},call.method),React3.createElement("span",{style:{color:colors2.base}},"(",React3.createElement("wbr",null),args,React3.createElement("wbr",null),")"))};var getParams=(line,fromIndex=0)=>{for(let i=fromIndex,depth=1;i<line.length;i+=1)if(line[i]==="("?depth+=1:line[i]===")"&&(depth-=1),depth===0)return line.slice(fromIndex,i);return""},parseValue=value=>{try{return value==="undefined"?void 0:JSON.parse(value)}catch{return value}},StyledExpected=styled3.span(({theme:theme2})=>({color:theme2.base==="light"?theme2.color.positiveText:theme2.color.positive})),StyledReceived=styled3.span(({theme:theme2})=>({color:theme2.base==="light"?theme2.color.negativeText:theme2.color.negative})),Received=({value,parsed})=>parsed?React4.createElement(Node,{showObjectInspector:!0,value,style:{color:"#D43900"}}):React4.createElement(StyledReceived,null,value),Expected=({value,parsed})=>parsed?typeof value=="string"&&value.startsWith("called with")?React4.createElement(React4.Fragment,null,value):React4.createElement(Node,{showObjectInspector:!0,value,style:{color:"#16B242"}}):React4.createElement(StyledExpected,null,value),MatcherResult=({message})=>{let lines=message.split(`
2
+ `);return React4.createElement("pre",{style:{margin:0,padding:"8px 10px 8px 36px",fontSize:typography2.size.s1}},lines.flatMap((line,index)=>{if(line.startsWith("expect(")){let received=getParams(line,7),remainderIndex=received&&7+received.length,matcher=received&&line.slice(remainderIndex).match(/\.(to|last|nth)[A-Z]\w+\(/);if(matcher){let expectedIndex=remainderIndex+matcher.index+matcher[0].length,expected=getParams(line,expectedIndex);if(expected)return["expect(",React4.createElement(Received,{key:`received_${received}`,value:received}),line.slice(remainderIndex,expectedIndex),React4.createElement(Expected,{key:`expected_${expected}`,value:expected}),line.slice(expectedIndex+expected.length),React4.createElement("br",{key:`br${index}`})]}}if(line.match(/^\s*- /))return[React4.createElement(Expected,{key:line+index,value:line}),React4.createElement("br",{key:`br${index}`})];if(line.match(/^\s*\+ /))return[React4.createElement(Received,{key:line+index,value:line}),React4.createElement("br",{key:`br${index}`})];let[,assertionLabel,assertionValue]=line.match(/^(Expected|Received): (.*)$/)||[];if(assertionLabel&&assertionValue)return assertionLabel==="Expected"?["Expected: ",React4.createElement(Expected,{key:line+index,value:parseValue(assertionValue),parsed:!0}),React4.createElement("br",{key:`br${index}`})]:["Received: ",React4.createElement(Received,{key:line+index,value:parseValue(assertionValue),parsed:!0}),React4.createElement("br",{key:`br${index}`})];let[,prefix,numberOfCalls]=line.match(/(Expected number|Received number|Number) of calls: (\d+)$/i)||[];if(prefix&&numberOfCalls)return[`${prefix} of calls: `,React4.createElement(Node,{key:line+index,value:Number(numberOfCalls)}),React4.createElement("br",{key:`br${index}`})];let[,receivedValue]=line.match(/^Received has value: (.+)$/)||[];return receivedValue?["Received has value: ",React4.createElement(Node,{key:line+index,value:parseValue(receivedValue)}),React4.createElement("br",{key:`br${index}`})]:[React4.createElement("span",{key:line+index},line),React4.createElement("br",{key:`br${index}`})]}))};import React5 from"react";import{Icons as Icons2}from"@storybook/components";import{CallStates as CallStates3}from"@storybook/instrumenter";import{styled as styled4}from"@storybook/theming";import{transparentize}from"polished";var colors={pure:{gray:{500:"#CCCCCC"}}},theme={colors},theme_default=theme;var{colors:{pure:{gray}}}=theme_default,StyledStatusIcon=styled4(Icons2)(({theme:theme2,status})=>{let color={[CallStates3.DONE]:theme2.color.positive,[CallStates3.ERROR]:theme2.color.negative,[CallStates3.ACTIVE]:theme2.color.secondary,[CallStates3.WAITING]:transparentize(.5,gray[500])}[status];return{width:status===CallStates3.WAITING?6:12,height:status===CallStates3.WAITING?6:12,color,justifySelf:"center"}}),StatusIcon=({status,className})=>{let icon={[CallStates3.DONE]:"check",[CallStates3.ERROR]:"stopalt",[CallStates3.ACTIVE]:"play",[CallStates3.WAITING]:"circle"}[status];return React5.createElement(StyledStatusIcon,{"data-testid":`icon-${status}`,status,icon,className})};var MethodCallWrapper=styled5.div(()=>({fontFamily:typography3.fonts.mono,fontSize:typography3.size.s1,overflowWrap:"break-word",inlineSize:"calc( 100% - 40px )"})),RowContainer=styled5("div",{shouldForwardProp:prop=>!["call","pausedAt"].includes(prop.toString())})(({theme:theme2,call})=>({position:"relative",display:"flex",flexDirection:"column",borderBottom:`1px solid ${theme2.appBorderColor}`,fontFamily:typography3.fonts.base,fontSize:13,...call.status===CallStates4.ERROR&&{backgroundColor:theme2.base==="dark"?transparentize2(.93,theme2.color.negative):theme2.background.warning},paddingLeft:call.ancestors.length*20}),({theme:theme2,call,pausedAt})=>pausedAt===call.id&&{"&::before":{content:'""',position:"absolute",top:-5,zIndex:1,borderTop:"4.5px solid transparent",borderLeft:`7px solid ${theme2.color.warning}`,borderBottom:"4.5px solid transparent"},"&::after":{content:'""',position:"absolute",top:-1,zIndex:1,width:"100%",borderTop:`1.5px solid ${theme2.color.warning}`}}),RowHeader=styled5.div(({theme:theme2,isInteractive})=>({display:"flex","&:hover":isInteractive?{}:{background:theme2.background.hoverable}})),RowLabel=styled5("button",{shouldForwardProp:prop=>!["call"].includes(prop.toString())})(({theme:theme2,disabled,call})=>({flex:1,display:"grid",background:"none",border:0,gridTemplateColumns:"15px 1fr",alignItems:"center",minHeight:40,margin:0,padding:"8px 15px",textAlign:"start",cursor:disabled||call.status===CallStates4.ERROR?"default":"pointer","&:focus-visible":{outline:0,boxShadow:`inset 3px 0 0 0 ${call.status===CallStates4.ERROR?theme2.color.warning:theme2.color.secondary}`,background:call.status===CallStates4.ERROR?"transparent":theme2.background.hoverable},"& > div":{opacity:call.status===CallStates4.WAITING?.5:1}})),RowActions=styled5.div({padding:6}),StyledIconButton2=styled5(IconButton2)(({theme:theme2})=>({color:theme2.textMutedColor,margin:"0 3px"})),Note2=styled5(TooltipNote2)(({theme:theme2})=>({fontFamily:theme2.typography.fonts.base})),RowMessage=styled5("div")(({theme:theme2})=>({padding:"8px 10px 8px 36px",fontSize:typography3.size.s1,color:theme2.color.defaultText,pre:{margin:0,padding:0}})),Exception=({exception})=>{if(exception.message.startsWith("expect("))return React6.createElement(MatcherResult,{...exception});let paragraphs=exception.message.split(`
3
3
 
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})});
4
+ `),more=paragraphs.length>1;return React6.createElement(RowMessage,null,React6.createElement("pre",null,paragraphs[0]),more&&React6.createElement("p",null,"See the full stack trace in the browser console."))},Interaction=({call,callsById,controls,controlStates,childCallIds,isHidden,isCollapsed,toggleCollapsed,pausedAt})=>{let[isHovered,setIsHovered]=React6.useState(!1),isInteractive=!controlStates.goto||!call.interceptable||!!call.ancestors.length;return isHidden?null:React6.createElement(RowContainer,{call,pausedAt},React6.createElement(RowHeader,{isInteractive},React6.createElement(RowLabel,{call,onClick:()=>controls.goto(call.id),disabled:isInteractive,onMouseEnter:()=>controlStates.goto&&setIsHovered(!0),onMouseLeave:()=>controlStates.goto&&setIsHovered(!1)},React6.createElement(StatusIcon,{status:isHovered?CallStates4.ACTIVE:call.status}),React6.createElement(MethodCallWrapper,{style:{marginLeft:6,marginBottom:1}},React6.createElement(MethodCall,{call,callsById}))),React6.createElement(RowActions,null,childCallIds?.length>0&&React6.createElement(WithTooltip2,{hasChrome:!1,tooltip:React6.createElement(Note2,{note:`${isCollapsed?"Show":"Hide"} interactions`})},React6.createElement(StyledIconButton2,{containsIcon:!0,onClick:toggleCollapsed},React6.createElement(Icons3,{icon:"listunordered"}))))),call.status===CallStates4.ERROR&&call.exception?.callId===call.id&&React6.createElement(Exception,{exception:call.exception}))};var Container=styled6.div(({theme:theme2,withException})=>({minHeight:"100%",background:theme2.background.content,...withException&&{backgroundColor:theme2.base==="dark"?transparentize3(.93,theme2.color.negative):theme2.background.warning}})),CaughtException=styled6.div(({theme:theme2})=>({padding:15,fontSize:theme2.typography.size.s2-1,lineHeight:"19px"})),CaughtExceptionCode=styled6.code(({theme:theme2})=>({margin:"0 1px",padding:3,fontSize:theme2.typography.size.s1-1,lineHeight:1,verticalAlign:"top",background:"rgba(0, 0, 0, 0.05)",border:`1px solid ${theme2.appBorderColor}`,borderRadius:3})),CaughtExceptionTitle=styled6.div({paddingBottom:4,fontWeight:"bold"}),CaughtExceptionDescription=styled6.p({margin:0,padding:"0 0 20px"}),CaughtExceptionStack=styled6.pre(({theme:theme2})=>({margin:0,padding:0,fontSize:theme2.typography.size.s1-1})),InteractionsPanel=React7.memo(function({calls,controls,controlStates,interactions,fileName,hasException,caughtException,isPlaying,pausedAt,onScrollToEnd,endRef,isRerunAnimating,setIsRerunAnimating,...panelProps}){return React7.createElement(AddonPanel,{...panelProps},React7.createElement(Container,{withException:!!caughtException},controlStates.debugger&&(interactions.length>0||hasException||isRerunAnimating)&&React7.createElement(Subnav,{controls,controlStates,status:isPlaying?CallStates5.ACTIVE:hasException?CallStates5.ERROR:CallStates5.DONE,storyFileName:fileName,onScrollToEnd,isRerunAnimating,setIsRerunAnimating}),React7.createElement("div",null,interactions.map(call=>React7.createElement(Interaction,{key:call.id,call,callsById:calls,controls,controlStates,childCallIds:call.childCallIds,isHidden:call.isHidden,isCollapsed:call.isCollapsed,toggleCollapsed:call.toggleCollapsed,pausedAt}))),caughtException&&!caughtException.message?.startsWith("ignoredException")&&React7.createElement(CaughtException,null,React7.createElement(CaughtExceptionTitle,null,"Caught exception in ",React7.createElement(CaughtExceptionCode,null,"play")," function"),React7.createElement(CaughtExceptionDescription,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 ",fileName," to fix."),React7.createElement(CaughtExceptionStack,{"data-chromatic":"ignore"},caughtException.stack||`${caughtException.name}: ${caughtException.message}`)),React7.createElement("div",{ref:endRef}),!isPlaying&&!caughtException&&interactions.length===0&&React7.createElement(Placeholder,null,"No interactions found",React7.createElement(Link,{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 styled7}from"@storybook/theming";import ReactDOM from"react-dom";var TabStatus=({children})=>{let container=global.document.getElementById("tabbutton-interactions");return container&&ReactDOM.createPortal(children,container)},TabIcon=styled7(StatusIcon)({marginLeft:5});var INITIAL_CONTROL_STATES={debugger:!1,start:!1,back:!1,goto:!1,next:!1,end:!1},getInteractions=({log,calls,collapsed,setCollapsed})=>{let callsById=new Map,childCallMap=new Map;return log.map(({callId,ancestors,status})=>{let isHidden=!1;return ancestors.forEach(ancestor=>{collapsed.has(ancestor)&&(isHidden=!0),childCallMap.set(ancestor,(childCallMap.get(ancestor)||[]).concat(callId))}),{...calls.get(callId),status,isHidden}}).map(call=>{let status=call.status===CallStates6.ERROR&&callsById.get(call.ancestors.slice(-1)[0])?.status===CallStates6.ACTIVE?CallStates6.ACTIVE:call.status;return callsById.set(call.id,{...call,status}),{...call,status,childCallIds:childCallMap.get(call.id),isCollapsed:collapsed.has(call.id),toggleCollapsed:()=>setCollapsed(ids=>(ids.has(call.id)?ids.delete(call.id):ids.add(call.id),new Set(ids)))}})},Panel=props=>{let[storyId,setStoryId]=React8.useState(),[controlStates,setControlStates]=React8.useState(INITIAL_CONTROL_STATES),[pausedAt,setPausedAt]=React8.useState(),[isErrored,setErrored]=React8.useState(!1),[isPlaying,setPlaying]=React8.useState(!1),[isRerunAnimating,setIsRerunAnimating]=React8.useState(!1),[scrollTarget,setScrollTarget]=React8.useState(),[collapsed,setCollapsed]=React8.useState(new Set),[caughtException,setCaughtException]=React8.useState(),[interactions,setInteractions]=React8.useState([]),[interactionsCount,setInteractionsCount]=React8.useState(),log=React8.useRef([]),calls=React8.useRef(new Map),setCall=({status,...call})=>calls.current.set(call.id,call),endRef=React8.useRef();React8.useEffect(()=>{let observer;return global2.window.IntersectionObserver&&(observer=new global2.window.IntersectionObserver(([end])=>setScrollTarget(end.isIntersecting?void 0:end.target),{root:global2.window.document.querySelector("#panel-tab-content")}),endRef.current&&observer.observe(endRef.current)),()=>observer?.disconnect()},[]);let emit=useChannel({[EVENTS.CALL]:setCall,[EVENTS.SYNC]:payload=>{setControlStates(payload.controlStates),setPausedAt(payload.pausedAt),setInteractions(getInteractions({log:payload.logItems,calls:calls.current,collapsed,setCollapsed})),log.current=payload.logItems},[STORY_RENDER_PHASE_CHANGED]:event=>{setStoryId(event.storyId),setPlaying(event.newPhase==="playing"),setPausedAt(void 0),event.newPhase==="rendering"&&(setErrored(!1),setCaughtException(void 0))},[STORY_THREW_EXCEPTION]:()=>{setErrored(!0)},[PLAY_FUNCTION_THREW_EXCEPTION]:e=>{e?.message!==IGNORED_EXCEPTION.message?setCaughtException(e):setCaughtException(void 0)}},[collapsed]);React8.useEffect(()=>{setInteractions(getInteractions({log:log.current,calls:calls.current,collapsed,setCollapsed}))},[collapsed]),React8.useEffect(()=>{isPlaying||isRerunAnimating||setInteractionsCount(interactions.filter(({method})=>method!=="step").length)},[interactions,isPlaying,isRerunAnimating]);let controls=React8.useMemo(()=>({start:()=>emit(EVENTS.START,{storyId}),back:()=>emit(EVENTS.BACK,{storyId}),goto:callId=>emit(EVENTS.GOTO,{storyId,callId}),next:()=>emit(EVENTS.NEXT,{storyId}),end:()=>emit(EVENTS.END,{storyId}),rerun:()=>{setIsRerunAnimating(!0),emit(FORCE_REMOUNT,{storyId})}}),[storyId]),storyFilePath=useParameter("fileName",""),[fileName]=storyFilePath.toString().split("/").slice(-1),scrollToTarget=()=>scrollTarget?.scrollIntoView({behavior:"smooth",block:"end"}),showStatus=interactionsCount>0||!!caughtException||isRerunAnimating,hasException=!!caughtException||interactions.some(v=>v.status===CallStates6.ERROR);return isErrored?React8.createElement(React8.Fragment,{key:"interactions"}):React8.createElement(React8.Fragment,{key:"interactions"},React8.createElement(TabStatus,null,showStatus&&(hasException?React8.createElement(TabIcon,{status:CallStates6.ERROR}):` (${interactionsCount})`)),React8.createElement(InteractionsPanel,{calls:calls.current,controls,controlStates,interactions,fileName,hasException,caughtException,isPlaying,pausedAt,endRef,onScrollToEnd:scrollTarget&&scrollToTarget,isRerunAnimating,setIsRerunAnimating,...props}))};addons.register(ADDON_ID,()=>{addons.add(PANEL_ID,{type:types.PANEL,title:"Interactions",match:({viewMode})=>viewMode==="story",render:Panel})});
@@ -1 +1 @@
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
+ import{checkAddonOrder,serverRequire}from"@storybook/core-common";import path from"path";var checkActionsLoaded=configDir=>{checkAddonOrder({before:{name:"@storybook/addon-actions",inEssentials:!0},after:{name:"@storybook/addon-interactions",inEssentials:!1},configFile:path.isAbsolute(configDir)?path.join(configDir,"main"):path.join(process.cwd(),configDir,"main"),getConfig:configFile=>serverRequire(configFile)})};export{checkActionsLoaded};
package/dist/preview.js CHANGED
@@ -1 +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 O=e=>A(i({},"__esModule",{value:!0}),e);var j={};g(j,{argsEnhancers:()=>C,parameters:()=>R,runStep:()=>F});module.exports=O(j);var u=require("@storybook/addons"),s=require("@storybook/core-events"),p=require("@storybook/instrumenter"),b=require("jest-mock"),f=new b.ModuleMocker(global),P=f.fn.bind(f),{action:S}=(0,p.instrument)({action:P},{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=S(t);return c.push(r),r}}catch{}return t},_=({id:e,initialArgs:t})=>a(e,t),C=[_],{step:F}=(0,p.instrument)({step:(e,t,n)=>t(n)},{intercept:!0}),R={throwPlayFunctionExceptions:!1};0&&(module.exports={argsEnhancers,parameters,runStep});
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 O=e=>A(i({},"__esModule",{value:!0}),e);var j={};g(j,{argsEnhancers:()=>C,parameters:()=>R,runStep:()=>F});module.exports=O(j);var u=require("@storybook/preview-api"),s=require("@storybook/core-events"),p=require("@storybook/instrumenter"),b=require("jest-mock"),f=new b.ModuleMocker(global),P=f.fn.bind(f),{action:S}=(0,p.instrument)({action:P},{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=S(t);return c.push(r),r}}catch{}return t},_=({id:e,initialArgs:t})=>a(e,t),C=[_],{step:F}=(0,p.instrument)({step:(e,t,n)=>t(n)},{intercept:!0}),R={throwPlayFunctionExceptions:!1};0&&(module.exports={argsEnhancers,parameters,runStep});
package/dist/preview.mjs CHANGED
@@ -1 +1 @@
1
- import{addons as y}from"@storybook/addons";import{FORCE_REMOUNT as u,STORY_RENDER_PHASE_CHANGED as m}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(u,()=>s.forEach(e=>e?.mockClear?.()));f.on(m,({newPhase:e})=>{e==="loading"&&s.forEach(t=>t?.mockClear?.())});var c=(e,t,r)=>{if(a.has(t))return t;a.add(t);try{if(Object.prototype.toString.call(t)==="[object Object]"){for(let[n,o]of Object.entries(t))t[n]=c(e,o,n);return t}if(Array.isArray(t))return t.map((n,o)=>c(e,n,`${r}[${o}]`));if(typeof t=="function"&&t.isAction){Object.defineProperty(t,"name",{value:r,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),P=[E],{step:S}=p({step:(e,t,r)=>t(r)},{intercept:!0}),_={throwPlayFunctionExceptions:!1};export{P as argsEnhancers,_ as parameters,S as runStep};
1
+ import{addons}from"@storybook/preview-api";import{FORCE_REMOUNT,STORY_RENDER_PHASE_CHANGED}from"@storybook/core-events";import{instrument}from"@storybook/instrumenter";import{ModuleMocker}from"jest-mock";var JestMock=new ModuleMocker(global),fn=JestMock.fn.bind(JestMock),{action}=instrument({action:fn},{retain:!0}),channel=addons.getChannel(),seen=new Set,spies=[];channel.on(FORCE_REMOUNT,()=>spies.forEach(mock=>mock?.mockClear?.()));channel.on(STORY_RENDER_PHASE_CHANGED,({newPhase})=>{newPhase==="loading"&&spies.forEach(mock=>mock?.mockClear?.())});var addSpies=(id,val,key)=>{if(seen.has(val))return val;seen.add(val);try{if(Object.prototype.toString.call(val)==="[object Object]"){for(let[k,v]of Object.entries(val))val[k]=addSpies(id,v,k);return val}if(Array.isArray(val))return val.map((item,index)=>addSpies(id,item,`${key}[${index}]`));if(typeof val=="function"&&val.isAction){Object.defineProperty(val,"name",{value:key,writable:!1}),Object.defineProperty(val,"__storyId__",{value:id,writable:!1});let spy=action(val);return spies.push(spy),spy}}catch{}return val},addActionsFromArgTypes=({id,initialArgs})=>addSpies(id,initialArgs),argsEnhancers=[addActionsFromArgTypes],{step:runStep}=instrument({step:(label,play,context)=>play(context)},{intercept:!0}),parameters={throwPlayFunctionExceptions:!1};export{argsEnhancers,parameters,runStep};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@storybook/addon-interactions",
3
- "version": "7.0.0-alpha.52",
3
+ "version": "7.0.0-alpha.54",
4
4
  "description": "Automate, test and debug user interactions",
5
5
  "keywords": [
6
6
  "storybook-addons",
@@ -72,15 +72,15 @@
72
72
  },
73
73
  "dependencies": {
74
74
  "@devtools-ds/object-inspector": "^1.1.2",
75
- "@storybook/addons": "7.0.0-alpha.52",
76
- "@storybook/api": "7.0.0-alpha.52",
77
- "@storybook/client-logger": "7.0.0-alpha.52",
78
- "@storybook/components": "7.0.0-alpha.52",
79
- "@storybook/core-common": "7.0.0-alpha.52",
80
- "@storybook/core-events": "7.0.0-alpha.52",
81
- "@storybook/instrumenter": "7.0.0-alpha.52",
82
- "@storybook/theming": "7.0.0-alpha.52",
83
- "@storybook/types": "7.0.0-alpha.52",
75
+ "@storybook/client-logger": "7.0.0-alpha.54",
76
+ "@storybook/components": "7.0.0-alpha.54",
77
+ "@storybook/core-common": "7.0.0-alpha.54",
78
+ "@storybook/core-events": "7.0.0-alpha.54",
79
+ "@storybook/instrumenter": "7.0.0-alpha.54",
80
+ "@storybook/manager-api": "7.0.0-alpha.54",
81
+ "@storybook/preview-api": "7.0.0-alpha.54",
82
+ "@storybook/theming": "7.0.0-alpha.54",
83
+ "@storybook/types": "7.0.0-alpha.54",
84
84
  "global": "^4.4.0",
85
85
  "jest-mock": "^27.0.6",
86
86
  "polished": "^4.2.2",
@@ -89,7 +89,7 @@
89
89
  "devDependencies": {
90
90
  "@storybook/jest": "^0.0.10",
91
91
  "@storybook/testing-library": "0.0.14-next.0",
92
- "@types/node": "^16.0.0 || ^18.0.0",
92
+ "@types/node": "^16.0.0",
93
93
  "formik": "^2.2.9",
94
94
  "typescript": "^4.9.3"
95
95
  },
@@ -117,7 +117,7 @@
117
117
  ],
118
118
  "platform": "node"
119
119
  },
120
- "gitHead": "d2494e3f51ce0f55bcb1ef693a6477c669fbe666",
120
+ "gitHead": "91177d4e27daec556a24ae6223c3cbe17a998d9b",
121
121
  "storybook": {
122
122
  "displayName": "Interactions",
123
123
  "unsupportedFrameworks": [