@storybook/addon-actions/dist/decorator.js

Get UI feedback when an action is performed on an interactive element

"use strict";var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames;var __hasOwnProp=Object.prototype.hasOwnProperty;var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:!0})},__copyProps=(to,from,except,desc)=>{if(from&&typeof from=="object"||typeof from=="function")for(let key of __getOwnPropNames(from))!__hasOwnProp.call(to,key)&&key!==except&&__defProp(to,key,{get:()=>from[key],enumerable:!(desc=__getOwnPropDesc(from,key))||desc.enumerable});return to};var __toCommonJS=mod=>__copyProps(__defProp({},"__esModule",{value:!0}),mod);var decorator_exports={};__export(decorator_exports,{withActions:()=>withActions});module.exports=__toCommonJS(decorator_exports);var import_global=require("@storybook/global"),import_preview_api2=require("@storybook/preview-api");var import_uuid=require("uuid"),import_preview_api=require("@storybook/preview-api");var PARAM_KEY="actions",ADDON_ID="storybook/actions",PANEL_ID=`${ADDON_ID}/panel`,EVENT_ID=`${ADDON_ID}/action-event`,CLEAR_ID=`${ADDON_ID}/action-clear`;var config={depth:10,clearOnStoryChange:!0,limit:50};var findProto=(obj,callback)=>{let proto=Object.getPrototypeOf(obj);return!proto||callback(proto)?proto:findProto(proto,callback)},isReactSyntheticEvent=e=>Boolean(typeof e=="object"&&e&&findProto(e,proto=>/^Synthetic(?:Base)?Event$/.test(proto.constructor.name))&&typeof e.persist=="function"),serializeArg=a=>{if(isReactSyntheticEvent(a)){let e=Object.create(a.constructor.prototype,Object.getOwnPropertyDescriptors(a));e.persist();let viewDescriptor=Object.getOwnPropertyDescriptor(e,"view"),view=viewDescriptor==null?void 0:viewDescriptor.value;return typeof view=="object"&&(view==null?void 0:view.constructor.name)==="Window"&&Object.defineProperty(e,"view",{...viewDescriptor,value:Object.create(view.constructor.prototype)}),e}return a};function action(name,options={}){let actionOptions={...config,...options},handler=function(...args){let channel=import_preview_api.addons.getChannel(),id=(0,import_uuid.v4)(),minDepth=5,serializedArgs=args.map(serializeArg),normalizedArgs=args.length>1?serializedArgs:serializedArgs[0],actionDisplayToEmit={id,count:0,data:{name,args:normalizedArgs},options:{...actionOptions,maxDepth:minDepth+(actionOptions.depth||3),allowFunction:actionOptions.allowFunction||!1}};channel.emit(EVENT_ID,actionDisplayToEmit)};return handler.isAction=!0,handler}var actions=(...args)=>{let options=config,names=args;names.length===1&&Array.isArray(names[0])&&([names]=names),names.length!==1&&typeof names[names.length-1]!="string"&&(options={...config,...names.pop()});let namesObject=names[0];(names.length!==1||typeof namesObject=="string")&&(namesObject={},names.forEach(name=>{namesObject[name]=name}));let actionsObject={};return Object.keys(namesObject).forEach(name=>{actionsObject[name]=action(namesObject[name],options)}),actionsObject};var{document,Element}=import_global.global,delegateEventSplitter=/^(\S+)\s*(.*)$/,isIE=Element!=null&&!Element.prototype.matches,matchesMethod=isIE?"msMatchesSelector":"matches",hasMatchInAncestry=(element,selector)=>{if(element[matchesMethod](selector))return!0;let parent=element.parentElement;return parent?hasMatchInAncestry(parent,selector):!1},createHandlers=(actionsFn,...handles)=>{let actionsObject=actionsFn(...handles);return Object.entries(actionsObject).map(([key,action2])=>{let[_,eventName,selector]=key.match(delegateEventSplitter)||[];return{eventName,handler:e=>{(!selector||hasMatchInAncestry(e.target,selector))&&action2(e)}}})},applyEventHandlers=(actionsFn,...handles)=>{let root=document&&document.getElementById("storybook-root");(0,import_preview_api2.useEffect)(()=>{if(root!=null){let handlers=createHandlers(actionsFn,...handles);return handlers.forEach(({eventName,handler})=>root.addEventListener(eventName,handler)),()=>handlers.forEach(({eventName,handler})=>root.removeEventListener(eventName,handler))}},[root,actionsFn,handles])},withActions=(0,import_preview_api2.makeDecorator)({name:"withActions",parameterName:PARAM_KEY,skipIfNoParametersOrOptions:!0,wrapper:(getStory,context,{parameters})=>(parameters!=null&&parameters.handles&&applyEventHandlers(actions,...parameters.handles),getStory(context))});0&&(module.exports={withActions});