@storybook/addon-interactions 7.0.0-alpha.4 → 7.0.0-alpha.41

package/README.md

@@ -41,22 +41,25 @@ Interactions relies on "instrumented" versions of Jest and Testing Library, that
 `@storybook/testing-library` instead of their original package. You can then use these libraries in your `play` function.
 
 ```js
+import { Button } from './Button';
 import { expect } from '@storybook/jest';
 import { within, userEvent } from '@storybook/testing-library';
 
 export default {
   title: 'Button',
+  component: Button,
   argTypes: {
     onClick: { action: true },
   },
 };
 
-export const Demo = {
-  play: async ({ args, canvasElement }) => {
-    const canvas = within(canvasElement);
-    await userEvent.click(canvas.getByRole('button'));
-    await expect(args.onClick).toHaveBeenCalled();
-  },
+const Template = (args) => <Button {...args} />;
+
+export const Demo = Template.bind({});
+Demo.play = async ({ args, canvasElement }) => {
+  const canvas = within(canvasElement);
+  await userEvent.click(canvas.getByRole('button'));
+  await expect(args.onClick).toHaveBeenCalled();
 };
 ```
 

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+declare const _default: {};
+
+export { _default as default };

package/dist/index.js

@@ -0,0 +1 @@
+var f=Object.defineProperty;var o=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var r=Object.prototype.hasOwnProperty;var u=(t,e)=>{for(var d in e)f(t,d,{get:e[d],enumerable:!0})},x=(t,e,d,l)=>{if(e&&typeof e=="object"||typeof e=="function")for(let a of p(e))!r.call(t,a)&&a!==d&&f(t,a,{get:()=>e[a],enumerable:!(l=o(e,a))||l.enumerable});return t};var b=t=>x(f({},"__esModule",{value:!0}),t);var g={};u(g,{default:()=>c});module.exports=b(g);var c={};0&&(module.exports={});

package/dist/index.mjs

@@ -0,0 +1 @@
+var t={};export{t as default};

package/dist/manager.d.ts

@@ -0,0 +1 @@
+

package/dist/manager.js

@@ -0,0 +1,4 @@
+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 a of Xt(o))!Zt.call(t,a)&&a!==e&&pt(t,a,{get:()=>o[a],enumerable:!(r=Jt(o,a))||r.enumerable});return t};var T=(t,o,e)=>(e=t!=null?Vt(Yt(t)):{},Ut(o||!t||!t.__esModule?pt(e,"default",{value:t,enumerable:!0}):e,t));var H=require("@storybook/addons");var ot="storybook/interactions",dt=`${ot}/panel`;var U=T(require("global")),i=T(require("react")),q=require("@storybook/api"),O=require("@storybook/core-events"),x=require("@storybook/instrumenter");var C=T(require("react")),F=require("@storybook/components"),Z=require("@storybook/instrumenter"),$=require("@storybook/theming"),vt=require("polished");var c=T(require("react")),g=require("@storybook/components"),ft=require("@storybook/instrumenter"),E=require("@storybook/theming");var ut=T(require("react")),v=require("@storybook/instrumenter"),M=require("@storybook/theming"),qt=M.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:M.typography.fonts.base,textTransform:"uppercase",fontSize:M.typography.size.s1,letterSpacing:3,fontWeight:M.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=E.styled.div(({theme:t})=>({background:t.background.app,borderBottom:`1px solid ${t.appBorderColor}`,position:"sticky",top:0,zIndex:1})),Qt=E.styled.nav(({theme:t})=>({height:40,display:"flex",alignItems:"center",justifyContent:"space-between",paddingLeft:15})),to=(0,E.styled)(g.Button)(({theme:t})=>({borderRadius:4,padding:6,color:t.textMutedColor,"&:not(:disabled)":{"&:hover,&:focus-visible":{color:t.color.secondary}}})),j=(0,E.styled)(g.TooltipNote)(({theme:t})=>({fontFamily:t.typography.fonts.base})),W=(0,E.styled)(g.IconButton)(({theme:t})=>({color:t.textMutedColor,margin:"0 3px"})),oo=(0,E.styled)(g.Separator)({marginTop:0}),eo=(0,E.styled)(g.P)(({theme:t})=>({color:t.textMutedColor,justifyContent:"flex-end",textAlign:"right",whiteSpace:"nowrap",marginTop:"auto",marginBottom:1,paddingRight:15,fontSize:13})),mt=E.styled.div({display:"flex",alignItems:"center"}),no=(0,E.styled)(W)({marginLeft:9}),ro=(0,E.styled)(to)({marginLeft:9,marginRight:9,marginBottom:1,lineHeight:"12px"}),so=(0,E.styled)(W)(({theme:t,animating:o,disabled:e})=>({opacity:e?.5:1,svg:{animation:o&&`${t.animation.rotate360} 200ms ease-out`}})),yt=({controls:t,controlStates:o,status:e,storyFileName:r,onScrollToEnd:a,isRerunAnimating:l,setIsRerunAnimating:s})=>{let d=e===ft.CallStates.ERROR?"Scroll to error":"Scroll to end";return c.default.createElement(Kt,null,c.default.createElement(g.Bar,null,c.default.createElement(Qt,null,c.default.createElement(mt,null,c.default.createElement(gt,{status:e}),c.default.createElement(ro,{onClick:a,disabled:!a},d),c.default.createElement(oo,null),c.default.createElement(g.WithTooltip,{hasChrome:!1,tooltip:c.default.createElement(j,{note:"Go to start"})},c.default.createElement(no,{"aria-label":"Go to start",containsIcon:!0,onClick:t.start,disabled:!o.start},c.default.createElement(g.Icons,{icon:"rewind"}))),c.default.createElement(g.WithTooltip,{hasChrome:!1,tooltip:c.default.createElement(j,{note:"Go back"})},c.default.createElement(W,{"aria-label":"Go back",containsIcon:!0,onClick:t.back,disabled:!o.back},c.default.createElement(g.Icons,{icon:"playback"}))),c.default.createElement(g.WithTooltip,{hasChrome:!1,tooltip:c.default.createElement(j,{note:"Go forward"})},c.default.createElement(W,{"aria-label":"Go forward",containsIcon:!0,onClick:t.next,disabled:!o.next},c.default.createElement(g.Icons,{icon:"playnext"}))),c.default.createElement(g.WithTooltip,{hasChrome:!1,tooltip:c.default.createElement(j,{note:"Go to end"})},c.default.createElement(W,{"aria-label":"Go to end",containsIcon:!0,onClick:t.end,disabled:!o.end},c.default.createElement(g.Icons,{icon:"fastforward"}))),c.default.createElement(g.WithTooltip,{hasChrome:!1,tooltip:c.default.createElement(j,{note:"Rerun"})},c.default.createElement(so,{"aria-label":"Rerun",containsIcon:!0,onClick:t.rerun,onAnimationEnd:()=>s(!1),animating:l,disabled:l},c.default.createElement(g.Icons,{icon:"sync"})))),r&&c.default.createElement(mt,null,c.default.createElement(eo,null,r)))))};var y=T(require("react")),P=require("@storybook/components"),B=require("@storybook/instrumenter"),I=require("@storybook/theming"),Tt=require("polished");var u=T(require("react")),z=require("@storybook/theming");var Ct=require("@devtools-ds/object-inspector"),J=require("@storybook/theming"),n=T(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,...a})=>{switch(!0){case t===null:return n.default.createElement(po,{...a});case t===void 0:return n.default.createElement(uo,{...a});case Array.isArray(t):return n.default.createElement(yo,{...a,value:t,callsById:r});case typeof t=="string":return n.default.createElement(go,{...a,value:t});case typeof t=="number":return n.default.createElement(mo,{...a,value:t});case typeof t=="boolean":return n.default.createElement(fo,{...a,value:t});case Object.prototype.hasOwnProperty.call(t,"__date__"):return n.default.createElement(Io,{...a,...t.__date__});case Object.prototype.hasOwnProperty.call(t,"__error__"):return n.default.createElement(xo,{...a,...t.__error__});case Object.prototype.hasOwnProperty.call(t,"__regexp__"):return n.default.createElement(Eo,{...a,...t.__regexp__});case Object.prototype.hasOwnProperty.call(t,"__function__"):return n.default.createElement(ho,{...a,...t.__function__});case Object.prototype.hasOwnProperty.call(t,"__symbol__"):return n.default.createElement(_o,{...a,...t.__symbol__});case Object.prototype.hasOwnProperty.call(t,"__element__"):return n.default.createElement(So,{...a,...t.__element__});case Object.prototype.hasOwnProperty.call(t,"__class__"):return n.default.createElement(Co,{...a,...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,...a});default:return n.default.createElement(ko,{value:t,...a})}},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)},fo=({value:t,...o})=>{let e=b();return n.default.createElement("span",{style:{color:e.boolean},...o},String(t))},yo=({value:t,nested:o=!1,callsById:e})=>{let r=b();if(o)return n.default.createElement("span",{style:{color:r.base}},"[\u2026]");let a=t.slice(0,3).map(s=>n.default.createElement(N,{key:JSON.stringify(s),value:s,nested:!0,callsById:e})),l=St(a,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",a=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:a.base}},"{\u2026}");let l=St(Object.entries(o).slice(0,2).map(([s,d])=>n.default.createElement(n.Fragment,{key:s},n.default.createElement("span",{style:{color:a.objectkey}},s,": "),n.default.createElement(N,{value:d,nested:!0}))),n.default.createElement("span",null,", "));return Object.keys(o).length<=2?n.default.createElement("span",{style:{color:a.base}},"{ ",l," }"):n.default.createElement("span",{style:{color:a.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:a})=>{let l=t?`${t}:${o}`:o,s=b();return n.default.createElement("span",{style:{wordBreak:"keep-all"}},n.default.createElement("span",{key:`${l}_lt`,style:{color:s.muted}},"<"),n.default.createElement("span",{key:`${l}_tag`,style:{color:s.tag.name}},l),n.default.createElement("span",{key:`${l}_suffix`,style:{color:s.tag.suffix}},e?`#${e}`:r.reduce((d,f)=>`${d}.${f}`,"")),n.default.createElement("span",{key:`${l}_gt`,style:{color:s.muted}},">"),!e&&r.length===0&&a&&n.default.createElement(n.default.Fragment,null,n.default.createElement("span",{key:`${l}_text`},a),n.default.createElement("span",{key:`${l}_close_lt`,style:{color:s.muted}},"<"),n.default.createElement("span",{key:`${l}_close_tag`,style:{color:s.tag.name}},"/",l),n.default.createElement("span",{key:`${l}_close_gt`,style:{color:s.muted}},">")))},Io=({value:t})=>{let[o,e,r]=t.split(/[T.Z]/),a=b();return n.default.createElement("span",{style:{whiteSpace:"nowrap",color:a.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,s)=>{let d=l.__callId__;return[d?n.default.createElement(X,{key:`elem${s}`,call:o.get(d),callsById:o}):n.default.createElement("span",{key:`elem${s}`},l),n.default.createElement("wbr",{key:`wbr${s}`}),n.default.createElement("span",{key:`dot${s}`},".")]}),r=t.args.flatMap((l,s,d)=>{let f=n.default.createElement(N,{key:`node${s}`,value:l,callsById:o});return s<d.length-1?[f,n.default.createElement("span",{key:`comma${s}`},",\xA0"),n.default.createElement("wbr",{key:`wbr${s}`})]:[f]}),a=b();return n.default.createElement(n.default.Fragment,null,n.default.createElement("span",{style:{color:a.base}},e),n.default.createElement("span",{style:{color:a.method}},t.method),n.default.createElement("span",{style:{color:a.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""},et=t=>{try{return t==="undefined"?void 0:JSON.parse(t)}catch{return t}},Ao=z.styled.span(({theme:t})=>({color:t.base==="light"?t.color.positiveText:t.color.positive})),To=z.styled.span(({theme:t})=>({color:t.base==="light"?t.color.negativeText:t.color.negative})),nt=({value:t,parsed:o})=>o?u.default.createElement(N,{showObjectInspector:!0,value:t,style:{color:"#D43900"}}):u.default.createElement(To,null,t),rt=({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(`
+`);return u.default.createElement("pre",{style:{margin:0,padding:"8px 10px 8px 36px",fontSize:z.typography.size.s1}},o.flatMap((e,r)=>{if(e.startsWith("expect(")){let m=It(e,7),h=m&&7+m.length,S=m&&e.slice(h).match(/\.(to|last|nth)[A-Z]\w+\(/);if(S){let _=h+S.index+S[0].length,k=It(e,_);if(k)return["expect(",u.default.createElement(nt,{key:`received_${m}`,value:m}),e.slice(h,_),u.default.createElement(rt,{key:`expected_${k}`,value:k}),e.slice(_+k.length),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}`})];if(e.match(/^\s*\+ /))return[u.default.createElement(nt,{key:e+r,value:e}),u.default.createElement("br",{key:`br${r}`})];let[,a,l]=e.match(/^(Expected|Received): (.*)$/)||[];if(a&&l)return a==="Expected"?["Expected: ",u.default.createElement(rt,{key:e+r,value:et(l),parsed:!0}),u.default.createElement("br",{key:`br${r}`})]:["Received: ",u.default.createElement(nt,{key:e+r,value:et(l),parsed:!0}),u.default.createElement("br",{key:`br${r}`})];let[,s,d]=e.match(/(Expected number|Received number|Number) of calls: (\d+)$/i)||[];if(s&&d)return[`${s} of calls: `,u.default.createElement(N,{key:e+r,value:Number(d)}),u.default.createElement("br",{key:`br${r}`})];let[,f]=e.match(/^Received has value: (.+)$/)||[];return f?["Received has value: ",u.default.createElement(N,{key:e+r,value:et(f)}),u.default.createElement("br",{key:`br${r}`})]:[u.default.createElement("span",{key:e+r},e),u.default.createElement("br",{key:`br${r}`})]}))};var _t=T(require("react")),kt=require("@storybook/components"),A=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,Bo=(0,wt.styled)(kt.Icons)(({theme:t,status:o})=>{let e={[A.CallStates.DONE]:t.color.positive,[A.CallStates.ERROR]:t.color.negative,[A.CallStates.ACTIVE]:t.color.secondary,[A.CallStates.WAITING]:(0,At.transparentize)(.5,No[500])}[o];return{width:o===A.CallStates.WAITING?6:12,height:o===A.CallStates.WAITING?6:12,color:e,justifySelf:"center"}}),Y=({status:t,className:o})=>{let e={[A.CallStates.DONE]:"check",[A.CallStates.ERROR]:"stopalt",[A.CallStates.ACTIVE]:"play",[A.CallStates.WAITING]:"circle"}[t];return _t.default.createElement(Bo,{"data-testid":`icon-${t}`,status:t,icon:e,className:o})};var Po=I.styled.div(()=>({fontFamily:I.typography.fonts.mono,fontSize:I.typography.size.s1,overflowWrap:"break-word",inlineSize:"calc( 100% - 40px )"})),$o=(0,I.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:I.typography.fonts.base,fontSize:13,...o.status===B.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=I.styled.div(({theme:t,isInteractive:o})=>({display:"flex","&:hover":o?{}:{background:t.background.hoverable}})),Mo=(0,I.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===B.CallStates.ERROR?"default":"pointer","&:focus-visible":{outline:0,boxShadow:`inset 3px 0 0 0 ${e.status===B.CallStates.ERROR?t.color.warning:t.color.secondary}`,background:e.status===B.CallStates.ERROR?"transparent":t.background.hoverable},"& > div":{opacity:e.status===B.CallStates.WAITING?.5:1}})),Fo=I.styled.div({padding:6}),Lo=(0,I.styled)(P.IconButton)(({theme:t})=>({color:t.textMutedColor,margin:"0 3px"})),jo=(0,I.styled)(P.TooltipNote)(({theme:t})=>({fontFamily:t.typography.fonts.base})),Wo=(0,I.styled)("div")(({theme:t})=>({padding:"8px 10px 8px 36px",fontSize:I.typography.size.s1,color:t.color.defaultText,pre:{margin:0,padding:0}})),zo=({exception:t})=>{if(t.message.startsWith("expect("))return y.createElement(xt,{...t});let o=t.message.split(`
+
+`),e=o.length>1;return y.createElement(Wo,null,y.createElement("pre",null,o[0]),e&&y.createElement("p",null,"See the full stack trace in the browser console."))},Ot=({call:t,callsById:o,controls:e,controlStates:r,childCallIds:a,isHidden:l,isCollapsed:s,toggleCollapsed:d,pausedAt:f})=>{var _;let[m,h]=y.useState(!1),S=!r.goto||!t.interceptable||!!t.ancestors.length;return l?null:y.createElement($o,{call:t,pausedAt:f},y.createElement(Do,{isInteractive:S},y.createElement(Mo,{call:t,onClick:()=>e.goto(t.id),disabled:S,onMouseEnter:()=>r.goto&&h(!0),onMouseLeave:()=>r.goto&&h(!1)},y.createElement(Y,{status:m?B.CallStates.ACTIVE:t.status}),y.createElement(Po,{style:{marginLeft:6,marginBottom:1}},y.createElement(X,{call:t,callsById:o}))),y.createElement(Fo,null,(a==null?void 0:a.length)>0&&y.createElement(P.WithTooltip,{hasChrome:!1,tooltip:y.createElement(jo,{note:`${s?"Show":"Hide"} interactions`})},y.createElement(Lo,{containsIcon:!0,onClick:d},y.createElement(P.Icons,{icon:"listunordered"}))))),t.status===B.CallStates.ERROR&&((_=t.exception)==null?void 0:_.callId)===t.id&&y.createElement(zo,{exception:t.exception}))};var Ho=$.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=$.styled.div(({theme:t})=>({padding:15,fontSize:t.typography.size.s2-1,lineHeight:"19px"})),Go=$.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=$.styled.div({paddingBottom:4,fontWeight:"bold"}),Jo=$.styled.p({margin:0,padding:"0 0 20px"}),Xo=$.styled.pre(({theme:t})=>({margin:0,padding:0,fontSize:t.typography.size.s1-1})),Nt=C.memo(({calls:t,controls:o,controlStates:e,interactions:r,fileName:a,hasException:l,caughtException:s,isPlaying:d,pausedAt:f,onScrollToEnd:m,endRef:h,isRerunAnimating:S,setIsRerunAnimating:_,...k})=>{var R;return C.createElement(F.AddonPanel,{...k},C.createElement(Ho,{withException:!!s},e.debugger&&(r.length>0||l||S)&&C.createElement(yt,{controls:o,controlStates:e,status:d?Z.CallStates.ACTIVE:l?Z.CallStates.ERROR:Z.CallStates.DONE,storyFileName:a,onScrollToEnd:m,isRerunAnimating:S,setIsRerunAnimating:_}),C.createElement("div",null,r.map(w=>C.createElement(Ot,{key:w.id,call:w,callsById:t,controls:o,controlStates:e,childCallIds:w.childCallIds,isHidden:w.isHidden,isCollapsed:w.isCollapsed,toggleCollapsed:w.toggleCollapsed,pausedAt:f}))),s&&!((R=s.message)!=null&&R.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 ",a," to fix."),C.createElement(Xo,{"data-chromatic":"ignore"},s.stack||`${s.name}: ${s.message}`)),C.createElement("div",{ref:h}),!d&&!s&&r.length===0&&C.createElement(F.Placeholder,null,"No interactions found",C.createElement(F.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 Bt=require("@storybook/theming"),Pt=T(require("react-dom"));var $t=({children:t})=>{let o=global.document.getElementById("tabbutton-interactions");return o&&Pt.default.createPortal(t,o)},Dt=(0,Bt.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 a=new Map,l=new Map;return t.map(({callId:s,ancestors:d,status:f})=>{let m=!1;return d.forEach(h=>{e.has(h)&&(m=!0),l.set(h,(l.get(h)||[]).concat(s))}),{...o.get(s),status:f,isHidden:m}}).map(s=>{var f;let d=s.status===x.CallStates.ERROR&&((f=a.get(s.ancestors.slice(-1)[0]))==null?void 0:f.status)===x.CallStates.ACTIVE?x.CallStates.ACTIVE:s.status;return a.set(s.id,{...s,status:d}),{...s,status:d,childCallIds:l.get(s.id),isCollapsed:e.has(s.id),toggleCollapsed:()=>r(m=>(m.has(s.id)?m.delete(s.id):m.add(s.id),new Set(m)))}})},Ft=t=>{let[o,e]=i.useState(),[r,a]=i.useState(Yo),[l,s]=i.useState(),[d,f]=i.useState(!1),[m,h]=i.useState(!1),[S,_]=i.useState(!1),[k,R]=i.useState(),[w,st]=i.useState(new Set),[K,Q]=i.useState(),[G,at]=i.useState([]),[lt,Lt]=i.useState(),it=i.useRef([]),V=i.useRef(new Map),jt=({status:p,...L})=>V.current.set(L.id,L),tt=i.useRef();i.useEffect(()=>{let p;return U.default.window.IntersectionObserver&&(p=new U.default.window.IntersectionObserver(([L])=>R(L.isIntersecting?void 0:L.target),{root:U.default.window.document.querySelector("#panel-tab-content")}),tt.current&&p.observe(tt.current)),()=>p==null?void 0:p.disconnect()},[]);let D=(0,q.useChannel)({[x.EVENTS.CALL]:jt,[x.EVENTS.SYNC]:p=>{a(p.controlStates),s(p.pausedAt),at(Mt({log:p.logItems,calls:V.current,collapsed:w,setCollapsed:st})),it.current=p.logItems},[O.STORY_RENDER_PHASE_CHANGED]:p=>{e(p.storyId),h(p.newPhase==="playing"),s(void 0),p.newPhase==="rendering"&&(f(!1),Q(void 0))},[O.STORY_THREW_EXCEPTION]:()=>{f(!0)},[O.PLAY_FUNCTION_THREW_EXCEPTION]:p=>{(p==null?void 0:p.message)!==O.IGNORED_EXCEPTION.message?Q(p):Q(void 0)}},[w]);i.useEffect(()=>{at(Mt({log:it.current,calls:V.current,collapsed:w,setCollapsed:st}))},[w]),i.useEffect(()=>{m||S||Lt(G.filter(({method:p})=>p!=="step").length)},[G,m,S]);let Wt=i.useMemo(()=>({start:()=>D(x.EVENTS.START,{storyId:o}),back:()=>D(x.EVENTS.BACK,{storyId:o}),goto:p=>D(x.EVENTS.GOTO,{storyId:o,callId:p}),next:()=>D(x.EVENTS.NEXT,{storyId:o}),end:()=>D(x.EVENTS.END,{storyId:o}),rerun:()=>{_(!0),D(O.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||!!K||S,ct=!!K||G.some(p=>p.status===x.CallStates.ERROR);return d?i.createElement(i.Fragment,{key:"interactions"}):i.createElement(i.Fragment,{key:"interactions"},i.createElement($t,null,Gt&&(ct?i.createElement(Dt,{status:x.CallStates.ERROR}):` (${lt})`)),i.createElement(Nt,{calls:V.current,controls:Wt,controlStates:r,interactions:G,fileName:Ht,hasException:ct,caughtException:K,isPlaying:m,pausedAt:l,endRef:tt,onScrollToEnd:k&&Rt,isRerunAnimating:S,setIsRerunAnimating:_,...t}))};H.addons.register(ot,()=>{H.addons.add(dt,{type:H.types.PANEL,title:"Interactions",match:({viewMode:t})=>t==="story",render:Ft})});

package/dist/manager.mjs

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

package/dist/preset/checkActionsLoaded.d.ts

@@ -0,0 +1,3 @@
+declare const checkActionsLoaded: (configDir: string) => void;
+
+export { checkActionsLoaded };

package/dist/preset/checkActionsLoaded.js

@@ -0,0 +1 @@
+var c=Object.create;var t=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var l=Object.getPrototypeOf,p=Object.prototype.hasOwnProperty;var b=(o,e)=>{for(var n in e)t(o,n,{get:e[n],enumerable:!0})},d=(o,e,n,a)=>{if(e&&typeof e=="object"||typeof e=="function")for(let s of f(e))!p.call(o,s)&&s!==n&&t(o,s,{get:()=>e[s],enumerable:!(a=m(e,s))||a.enumerable});return o};var k=(o,e,n)=>(n=o!=null?c(l(o)):{},d(e||!o||!o.__esModule?t(n,"default",{value:o,enumerable:!0}):n,o)),h=o=>d(t({},"__esModule",{value:!0}),o);var A={};b(A,{checkActionsLoaded:()=>u});module.exports=h(A);var r=require("@storybook/core-common"),i=k(require("path")),u=o=>{(0,r.checkAddonOrder)({before:{name:"@storybook/addon-actions",inEssentials:!0},after:{name:"@storybook/addon-interactions",inEssentials:!1},configFile:i.default.isAbsolute(o)?i.default.join(o,"main"):i.default.join(process.cwd(),o,"main"),getConfig:e=>(0,r.serverRequire)(e)})};0&&(module.exports={checkActionsLoaded});

package/dist/preset/checkActionsLoaded.mjs

@@ -0,0 +1 @@
+import{checkAddonOrder as s,serverRequire as t}from"@storybook/core-common";import e from"path";var d=o=>{s({before:{name:"@storybook/addon-actions",inEssentials:!0},after:{name:"@storybook/addon-interactions",inEssentials:!1},configFile:e.isAbsolute(o)?e.join(o,"main"):e.join(process.cwd(),o,"main"),getConfig:n=>t(n)})};export{d as checkActionsLoaded};

package/dist/preset/preview.d.ts

@@ -0,0 +1,10 @@
+import * as _storybook_addons from '@storybook/addons';
+import { ArgsEnhancer, AnyFramework, StepLabel, PlayFunction, PlayFunctionContext } from '@storybook/csf';
+
+declare const argsEnhancers: ArgsEnhancer<AnyFramework, _storybook_addons.Args>[];
+declare const runStep: (label: StepLabel, play: PlayFunction, context: PlayFunctionContext) => void | Promise<void>;
+declare const parameters: {
+    throwPlayFunctionExceptions: boolean;
+};
+
+export { argsEnhancers, parameters, runStep };

package/dist/preset/preview.js

@@ -0,0 +1 @@
+var i=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var E=Object.getOwnPropertyNames;var h=Object.prototype.hasOwnProperty;var A=(n,t)=>{for(var e in t)i(n,e,{get:t[e],enumerable:!0})},g=(n,t,e,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of E(t))!h.call(n,o)&&o!==e&&i(n,o,{get:()=>t[o],enumerable:!(r=l(t,o))||r.enumerable});return n};var F=n=>g(i({},"__esModule",{value:!0}),n);var j={};A(j,{argsEnhancers:()=>_,parameters:()=>C,runStep:()=>w});module.exports=F(j);var u=require("@storybook/addons"),s=require("@storybook/core-events"),c=require("@storybook/instrumenter"),b=require("jest-mock"),f=new b.ModuleMocker(global),O=f.fn.bind(f),{action:P}=(0,c.instrument)({action:O},{retain:!0}),d=u.addons.getChannel(),y=new Set,p=[];d.on(s.FORCE_REMOUNT,()=>p.forEach(n=>{var t;return(t=n==null?void 0:n.mockClear)==null?void 0:t.call(n)}));d.on(s.STORY_RENDER_PHASE_CHANGED,({newPhase:n})=>{n==="loading"&&p.forEach(t=>{var e;return(e=t==null?void 0:t.mockClear)==null?void 0:e.call(t)})});var a=(n,t,e)=>{if(y.has(t))return t;y.add(t);try{if(Object.prototype.toString.call(t)==="[object Object]"){for(let[r,o]of Object.entries(t))t[r]=a(n,o,r);return t}if(Array.isArray(t))return t.map((r,o)=>a(n,r,`${e}[${o}]`));if(typeof t=="function"&&t.isAction){Object.defineProperty(t,"name",{value:e,writable:!1}),Object.defineProperty(t,"__storyId__",{value:n,writable:!1});let r=P(t);return p.push(r),r}}catch{}return t},S=({id:n,initialArgs:t})=>a(n,t),_=[S],{step:w}=(0,c.instrument)({step:(n,t,e)=>t(e)},{intercept:!0}),C={throwPlayFunctionExceptions:!1};0&&(module.exports={argsEnhancers,parameters,runStep});

package/dist/preset/preview.mjs

@@ -0,0 +1 @@
+import{addons as y}from"@storybook/addons";import{FORCE_REMOUNT as m,STORY_RENDER_PHASE_CHANGED as u}from"@storybook/core-events";import{instrument as p}from"@storybook/instrumenter";import{ModuleMocker as b}from"jest-mock";var i=new b(window),d=i.fn.bind(i),{action:l}=p({action:d},{retain:!0}),f=y.getChannel(),a=new Set,s=[];f.on(m,()=>s.forEach(n=>n?.mockClear?.()));f.on(u,({newPhase:n})=>{n==="loading"&&s.forEach(t=>t?.mockClear?.())});var c=(n,t,o)=>{if(a.has(t))return t;a.add(t);try{if(Object.prototype.toString.call(t)==="[object Object]"){for(let[e,r]of Object.entries(t))t[e]=c(n,r,e);return t}if(Array.isArray(t))return t.map((e,r)=>c(n,e,`${o}[${r}]`));if(typeof t=="function"&&t.isAction){Object.defineProperty(t,"name",{value:o,writable:!1}),Object.defineProperty(t,"__storyId__",{value:n,writable:!1});let e=l(t);return s.push(e),e}}catch{}return t},E=({id:n,initialArgs:t})=>c(n,t),P=[E],{step:S}=p({step:(n,t,o)=>t(o)},{intercept:!0}),_={throwPlayFunctionExceptions:!1};export{P as argsEnhancers,_ as parameters,S as runStep};

package/manager.js

@@ -1 +1 @@
-import './dist/esm/manager';
+import './dist/manager';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-interactions",
-  "version": "7.0.0-alpha.4",
+  "version": "7.0.0-alpha.41",
   "description": "Automate, test and debug user interactions",
   "keywords": [
     "storybook-addons",
@@ -21,9 +21,32 @@
     "url": "https://opencollective.com/storybook"
   },
   "license": "MIT",
-  "main": "dist/cjs/index.js",
-  "module": "dist/esm/index.js",
-  "types": "dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "require": "./dist/index.js",
+      "import": "./dist/index.mjs",
+      "types": "./dist/index.d.ts"
+    },
+    "./manager": {
+      "require": "./dist/manager.js",
+      "import": "./dist/manager.mjs",
+      "types": "./dist/manager.d.ts"
+    },
+    "./preview": {
+      "require": "./dist/preset/preview.js",
+      "import": "./dist/preset/preview.mjs",
+      "types": "./dist/preset/preview.d.ts"
+    },
+    "./register.js": {
+      "require": "./dist/manager.js",
+      "import": "./dist/manager.mjs",
+      "types": "./dist/manager.d.ts"
+    },
+    "./package.json": "./package.json"
+  },
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
   "files": [
     "dist/**/*",
     "README.md",
@@ -31,29 +54,31 @@
     "*.d.ts"
   ],
   "scripts": {
-    "prepare": "node ../../scripts/prepare.js"
+    "check": "../../../scripts/node_modules/.bin/tsc --noEmit",
+    "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
     "@devtools-ds/object-inspector": "^1.1.2",
-    "@storybook/addons": "7.0.0-alpha.4",
-    "@storybook/api": "7.0.0-alpha.4",
-    "@storybook/client-logger": "7.0.0-alpha.4",
-    "@storybook/components": "7.0.0-alpha.4",
-    "@storybook/core-common": "7.0.0-alpha.4",
-    "@storybook/core-events": "7.0.0-alpha.4",
-    "@storybook/csf": "0.0.2--canary.4566f4d.1",
-    "@storybook/instrumenter": "7.0.0-alpha.4",
-    "@storybook/theming": "7.0.0-alpha.4",
-    "core-js": "^3.8.2",
+    "@storybook/addons": "7.0.0-alpha.41",
+    "@storybook/api": "7.0.0-alpha.41",
+    "@storybook/client-logger": "7.0.0-alpha.41",
+    "@storybook/components": "7.0.0-alpha.41",
+    "@storybook/core-common": "7.0.0-alpha.41",
+    "@storybook/core-events": "7.0.0-alpha.41",
+    "@storybook/csf": "0.0.2--canary.49.258942b.0",
+    "@storybook/instrumenter": "7.0.0-alpha.41",
+    "@storybook/theming": "7.0.0-alpha.41",
     "global": "^4.4.0",
     "jest-mock": "^27.0.6",
     "polished": "^4.2.2",
     "ts-dedent": "^2.2.0"
   },
   "devDependencies": {
-    "@storybook/jest": "^0.0.5",
-    "@storybook/testing-library": "^0.0.12",
-    "formik": "^2.2.9"
+    "@storybook/jest": "^0.0.10",
+    "@storybook/testing-library": "0.0.14-next.0",
+    "@types/node": "^16.0.0",
+    "formik": "^2.2.9",
+    "typescript": "~4.6.3"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
@@ -70,7 +95,16 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "006ed54452dd7c37a8cbe91a84f5312182f7ca00",
+  "bundler": {
+    "entries": [
+      "./src/index.ts",
+      "./src/manager.tsx",
+      "./src/preset/preview.ts",
+      "./src/preset/checkActionsLoaded.ts"
+    ],
+    "platform": "node"
+  },
+  "gitHead": "7ec6f916eb875bd2e3cf3aa6b1afcd1fe25d1637",
   "storybook": {
     "displayName": "Interactions",
     "unsupportedFrameworks": [

package/preset.js

@@ -1,4 +1,4 @@
-const { checkActionsLoaded } = require('./dist/cjs/preset/checkActionsLoaded');
+const { checkActionsLoaded } = require('./dist/preset/checkActionsLoaded');
 
 function previewAnnotations(entry = [], options) {
   checkActionsLoaded(options.configDir);

package/preview.js

@@ -1 +1 @@
-export * from './dist/esm/preset/preview';
+export * from './dist/preset/preview';

package/LICENSE

@@ -1,21 +0,0 @@
-The MIT License (MIT)
-
-Copyright (c) 2017 Kadira Inc. <hello@kadira.io>
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in
-all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-THE SOFTWARE.

package/dist/cjs/Panel.js

@@ -1,228 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Panel = exports.AddonPanelPure = void 0;
-
-var _global = _interopRequireDefault(require("global"));
-
-var React = _interopRequireWildcard(require("react"));
-
-var _reactDom = _interopRequireDefault(require("react-dom"));
-
-var _api = require("@storybook/api");
-
-var _coreEvents = require("@storybook/core-events");
-
-var _components = require("@storybook/components");
-
-var _instrumenter = require("@storybook/instrumenter");
-
-var _theming = require("@storybook/theming");
-
-var _StatusIcon = require("./components/StatusIcon/StatusIcon");
-
-var _Subnav = require("./components/Subnav/Subnav");
-
-var _Interaction = require("./components/Interaction/Interaction");
-
-const _excluded = ["calls", "controls", "controlStates", "interactions", "fileName", "hasException", "isPlaying", "pausedAt", "onScrollToEnd", "endRef", "isRerunAnimating", "setIsRerunAnimating"],
-      _excluded2 = ["status"];
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
-const INITIAL_CONTROL_STATES = {
-  debugger: false,
-  start: false,
-  back: false,
-  goto: false,
-  next: false,
-  end: false
-};
-const TabIcon = (0, _theming.styled)(_StatusIcon.StatusIcon)({
-  marginLeft: 5
-});
-
-const TabStatus = ({
-  children
-}) => {
-  const container = _global.default.document.getElementById('tabbutton-interactions');
-
-  return container && /*#__PURE__*/_reactDom.default.createPortal(children, container);
-};
-
-const AddonPanelPure = /*#__PURE__*/React.memo(_ref => {
-  let {
-    calls,
-    controls,
-    controlStates,
-    interactions,
-    fileName,
-    hasException,
-    isPlaying,
-    pausedAt,
-    onScrollToEnd,
-    endRef,
-    isRerunAnimating,
-    setIsRerunAnimating
-  } = _ref,
-      panelProps = _objectWithoutPropertiesLoose(_ref, _excluded);
-
-  return /*#__PURE__*/React.createElement(_components.AddonPanel, panelProps, controlStates.debugger && interactions.length > 0 && /*#__PURE__*/React.createElement(_Subnav.Subnav, {
-    controls: controls,
-    controlStates: controlStates,
-    status: // eslint-disable-next-line no-nested-ternary
-    isPlaying ? _instrumenter.CallStates.ACTIVE : hasException ? _instrumenter.CallStates.ERROR : _instrumenter.CallStates.DONE,
-    storyFileName: fileName,
-    onScrollToEnd: onScrollToEnd,
-    isRerunAnimating: isRerunAnimating,
-    setIsRerunAnimating: setIsRerunAnimating
-  }), /*#__PURE__*/React.createElement("div", null, interactions.map(call => /*#__PURE__*/React.createElement(_Interaction.Interaction, {
-    key: call.id,
-    call: call,
-    callsById: calls,
-    controls: controls,
-    controlStates: controlStates,
-    childCallIds: call.childCallIds,
-    isCollapsed: call.isCollapsed,
-    toggleCollapsed: call.toggleCollapsed,
-    pausedAt: pausedAt
-  }))), /*#__PURE__*/React.createElement("div", {
-    ref: endRef
-  }), !isPlaying && interactions.length === 0 && /*#__PURE__*/React.createElement(_components.Placeholder, null, "No interactions found", /*#__PURE__*/React.createElement(_components.Link, {
-    href: "https://github.com/storybookjs/storybook/blob/next/addons/interactions/README.md",
-    target: "_blank",
-    withArrow: true
-  }, "Learn how to add interactions to your story")));
-});
-exports.AddonPanelPure = AddonPanelPure;
-
-const Panel = props => {
-  const [storyId, setStoryId] = React.useState();
-  const [controlStates, setControlStates] = React.useState(INITIAL_CONTROL_STATES);
-  const [pausedAt, setPausedAt] = React.useState();
-  const [isPlaying, setPlaying] = React.useState(false);
-  const [isRerunAnimating, setIsRerunAnimating] = React.useState(false);
-  const [scrollTarget, setScrollTarget] = React.useState();
-  const [collapsed, setCollapsed] = React.useState(new Set()); // Calls are tracked in a ref so we don't needlessly rerender.
-
-  const calls = React.useRef(new Map());
-
-  const setCall = _ref2 => {
-    let call = _objectWithoutPropertiesLoose(_ref2, _excluded2);
-
-    return calls.current.set(call.id, call);
-  };
-
-  const [log, setLog] = React.useState([]);
-  const childCallMap = new Map();
-  const interactions = log.filter(call => {
-    if (!call.parentId) return true;
-    childCallMap.set(call.parentId, (childCallMap.get(call.parentId) || []).concat(call.callId));
-    return !collapsed.has(call.parentId);
-  }).map(({
-    callId,
-    status
-  }) => Object.assign({}, calls.current.get(callId), {
-    status,
-    childCallIds: childCallMap.get(callId),
-    isCollapsed: collapsed.has(callId),
-    toggleCollapsed: () => setCollapsed(ids => {
-      if (ids.has(callId)) ids.delete(callId);else ids.add(callId);
-      return new Set(ids);
-    })
-  }));
-  const endRef = React.useRef();
-  React.useEffect(() => {
-    let observer;
-
-    if (_global.default.window.IntersectionObserver) {
-      observer = new _global.default.window.IntersectionObserver(([end]) => setScrollTarget(end.isIntersecting ? undefined : end.target), {
-        root: _global.default.window.document.querySelector('#panel-tab-content')
-      });
-      if (endRef.current) observer.observe(endRef.current);
-    }
-
-    return () => {
-      var _observer;
-
-      return (_observer = observer) === null || _observer === void 0 ? void 0 : _observer.disconnect();
-    };
-  }, []);
-  const emit = (0, _api.useChannel)({
-    [_instrumenter.EVENTS.CALL]: setCall,
-    [_instrumenter.EVENTS.SYNC]: payload => {
-      setControlStates(payload.controlStates);
-      setLog(payload.logItems);
-      setPausedAt(payload.pausedAt);
-    },
-    [_coreEvents.STORY_RENDER_PHASE_CHANGED]: event => {
-      setStoryId(event.storyId);
-      setPlaying(event.newPhase === 'playing');
-      setPausedAt(undefined);
-    }
-  }, []);
-  const controls = React.useMemo(() => ({
-    start: () => emit(_instrumenter.EVENTS.START, {
-      storyId
-    }),
-    back: () => emit(_instrumenter.EVENTS.BACK, {
-      storyId
-    }),
-    goto: callId => emit(_instrumenter.EVENTS.GOTO, {
-      storyId,
-      callId
-    }),
-    next: () => emit(_instrumenter.EVENTS.NEXT, {
-      storyId
-    }),
-    end: () => emit(_instrumenter.EVENTS.END, {
-      storyId
-    }),
-    rerun: () => {
-      setIsRerunAnimating(true);
-      emit(_coreEvents.FORCE_REMOUNT, {
-        storyId
-      });
-    }
-  }), [storyId]);
-  const storyFilePath = (0, _api.useParameter)('fileName', '');
-  const [fileName] = storyFilePath.toString().split('/').slice(-1);
-
-  const scrollToTarget = () => scrollTarget === null || scrollTarget === void 0 ? void 0 : scrollTarget.scrollIntoView({
-    behavior: 'smooth',
-    block: 'end'
-  });
-
-  const showStatus = log.length > 0 && !isPlaying;
-  const hasException = log.some(item => item.status === _instrumenter.CallStates.ERROR);
-  return /*#__PURE__*/React.createElement(React.Fragment, {
-    key: "interactions"
-  }, /*#__PURE__*/React.createElement(TabStatus, null, showStatus && (hasException ? /*#__PURE__*/React.createElement(TabIcon, {
-    status: _instrumenter.CallStates.ERROR
-  }) : ` (${interactions.length})`)), /*#__PURE__*/React.createElement(AddonPanelPure, _extends({
-    calls: calls.current,
-    controls: controls,
-    controlStates: controlStates,
-    interactions: interactions,
-    fileName: fileName,
-    hasException: hasException,
-    isPlaying: isPlaying,
-    pausedAt: pausedAt,
-    endRef: endRef,
-    onScrollToEnd: scrollTarget && scrollToTarget,
-    isRerunAnimating: isRerunAnimating,
-    setIsRerunAnimating: setIsRerunAnimating
-  }, props)));
-};
-
-exports.Panel = Panel;