@vikadata/react-contexify - npm Package Compare versions

Comparing version 5.0.3 to 5.0.4

dist/components/Menu.d.ts

@@ -37,3 +37,3 @@ import React, { ReactNode } from 'react';
      */
-    onShown?: () => void;
+    onShown?: (propTrigger?: any) => void;
     /**
@@ -40,0 +40,0 @@ * Invoked after the menu has been hidden.

dist/react-contexify.cjs.development.js

@@ -583,3 +583,3 @@ 'use strict';
     if (didMount.current && state.visible !== wasVisible) {
-      state.visible ? onShown() : onHidden();
+      state.visible ? onShown(state.propsFromTrigger) : onHidden();
     } // wasWisible is a ref
@@ -586,0 +586,0 @@ // eslint-disable-next-line react-hooks/exhaustive-deps

dist/react-contexify.cjs.production.min.js

@@ -1,2 +0,2 @@
-"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var n=require("react"),t=e(n),i=e(require("clsx"));function r(){return(r=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var i in t)Object.prototype.hasOwnProperty.call(t,i)&&(e[i]=t[i])}return e}).apply(this,arguments)}function o(e,n){if(null==e)return{};var t,i,r={},o=Object.keys(e);for(i=0;i<o.length;i++)n.indexOf(t=o[i])>=0||(r[t]=e[t]);return r}var a=n.createContext({});function s(){return n.useContext(a)}var c=function(e){return t.createElement(a.Provider,{value:e.refTracker},e.children)};function l(){var e=new Map;return{on:function(n,t){var i;return e.has(n)?null==(i=e.get(n))||i.add(t):e.set(n,new Set([t])),this},off:function(n,t){return t?e.get(n).delete(t):e.delete(n),this},emit:function(n,t){if("production"!==process.env.NODE){var i=n;e.has(n)||0===i||console.error("It seems that the menu you are trying to display is not renderer or you have a menu id mismatch.","You used the menu id: "+n)}return e.has(n)&&e.get(n).forEach((function(e){e(t)})),this}}}var u=l();function d(){return n.useRef(new Map).current}var f={show:function(e){var n=e.id,t=e.event,i=e.props,r=e.position;t.preventDefault&&t.preventDefault(),u.emit(0).emit(n,{event:t.nativeEvent||t,props:i,position:r})},hideAll:function(){u.emit(0)}},v=function(){},m=function(e){var n,r=e.children,a=e.className,c=e.style,l=e.triggerEvent,u=e.data,d=e.propsFromTrigger,f=e.onClick,m=void 0===f?v:f,p=e.disabled,g=void 0!==p&&p,h=e.hidden,w=void 0!==h&&h,y=o(e,["children","className","style","triggerEvent","data","propsFromTrigger","onClick","disabled","hidden"]),x=s(),E={data:u,triggerEvent:l,props:d},_=b(g,E);if(b(w,E))return null;var k=i("react-contexify__item",a,((n={})["react-contexify__item--disabled"]=_,n));return t.createElement("div",Object.assign({},y,{className:k,style:c,onClick:function(e){E.event=e,_?e.stopPropagation():m(E)},onKeyDown:function(e){"Enter"===e.key&&(E.event=e,m(E))},ref:function(e){e&&!_&&x.set(e,{node:e,isSubmenu:!1})},tabIndex:-1,role:"menuitem","aria-disabled":_}),t.createElement("div",{className:"react-contexify__item__content"},r))},p=function(e){var a,l=e.arrow,u=void 0===l?"▶":l,f=e.children,v=e.disabled,m=void 0!==v&&v,p=e.hidden,g=void 0!==p&&p,h=e.label,y=e.className,x=e.triggerEvent,E=e.propsFromTrigger,_=e.style,k=o(e,["arrow","children","disabled","hidden","label","className","triggerEvent","propsFromTrigger","style"]),L=s(),T=d(),N=n.useRef(null),S=n.useState({left:"100%",top:0,bottom:"initial"}),R=S[0],A=S[1],C={triggerEvent:x,props:E},O=b(m,C),F=b(g,C);if(n.useEffect((function(){if(N.current){var e=window,n=e.innerWidth,t=e.innerHeight,i=N.current.getBoundingClientRect(),r={};i.right<n?(r.left="100%",r.right=void 0):(r.right="100%",r.left=void 0),i.bottom>t?(r.bottom=0,r.top="initial"):r.bottom="initial",A(r)}}),[]),F)return null;var j=i("react-contexify__item",y,((a={})["react-contexify__item--disabled"]=O,a)),D=r({},_,R);return t.createElement(c,{refTracker:T},t.createElement("div",Object.assign({},k,{className:j,ref:function(e){e&&!O&&L.set(e,{node:e,isSubmenu:!0,submenuRefTracker:T})},tabIndex:-1,role:"menuitem","aria-haspopup":!0,"aria-disabled":O}),t.createElement("div",{className:"react-contexify__item__content",onClick:function(e){e.stopPropagation()}},h,t.createElement("span",{className:"react-contexify__submenu-arrow"},u)),t.createElement("div",{className:"react-contexify react-contexify__submenu",ref:N,style:D},w(f,{propsFromTrigger:E,triggerEvent:x}))))};function g(e){return"function"==typeof e}function h(e){return"string"==typeof e}function w(e,t){return n.Children.map(n.Children.toArray(e).filter((function(e){return Boolean(e)})),(function(e){return n.isValidElement(e)?e.type!==m&&e.type!==p&&e.props.children?w(e.props.children,t):n.cloneElement(e,t):e}))}function b(e,n){return g(e)?e(n):e}function y(e,n){return g(n)?r({},e,n(e)):r({},e,n)}exports.Item=m,exports.Menu=function(e){var a,s,l,f=e.id,m=e.theme,p=e.style,g=e.className,b=e.children,x=e.animation,E=void 0===x?"scale":x,_=e.onHidden,k=void 0===_?v:_,L=e.onShown,T=void 0===L?v:L,N=o(e,["id","theme","style","className","children","animation","onHidden","onShown"]),S=n.useReducer(y,{x:0,y:0,visible:!1,triggerEvent:{},propsFromTrigger:null,willLeave:!1}),R=S[0],A=S[1],C=n.useRef(null),O=n.useRef(!1),F=(s=R.visible,l=n.useRef(),n.useEffect((function(){l.current=s}),[s]),l.current),j=d(),D=n.useState((function(){return function(){var e,n,t,i,r=new Map,o=!1;function a(){i[e].node.focus()}function s(){return-1!==e||(c(),!1)}function c(){e+1<i.length?e++:e+1===i.length&&(e=0),o&&l(),a()}function l(){if(s()&&!t){var c=r.get(n),l=c.isRoot,u=c.items,d=c.focusedIndex,f=c.parentNode;n.classList.remove("react-contexify__submenu--is-open"),i=u,n=f,l&&(t=!0,r.clear()),o||(e=d,a())}}return{init:function(n){i=n,e=-1,t=!0},moveDown:c,moveUp:function(){-1===e||0===e?e=i.length-1:e-1<i.length&&e--,o&&l(),a()},openSubmenu:function(){if(s()&&e>=0&&i[e].isSubmenu){var c=Array.from(i[e].submenuRefTracker.values()),l=i[e].node;return r.set(l,{isRoot:t,focusedIndex:e,parentNode:n||l,items:i}),l.classList.add("react-contexify__submenu--is-open"),n=l,c.length>0?(e=0,i=c):o=!0,t=!1,a(),!0}return!1},closeSubmenu:l}}()}))[0];function M(e){var n=e.event,t=e.props,i=e.position;n.stopPropagation();var r,o,a=i||(o={x:0,y:0},function(e){return"touchend"===e.type}(r=n)&&r.changedTouches&&r.changedTouches.length>0?(o.x=r.changedTouches[0].clientX,o.y=r.changedTouches[0].clientY):(o.x=r.clientX,o.y=r.clientY),(!o.x||o.x<0)&&(o.x=0),(!o.y||o.y<0)&&(o.y=0),o),s=a.x,c=a.y;setTimeout((function(){A({visible:!0,willLeave:!1,x:s,y:c,triggerEvent:n,propsFromTrigger:t})}),0)}function I(e){(void 0===e||2!==e.button&&!0!==e.ctrlKey||"contextmenu"===e.type)&&(function(e){return!(!e||!(h(e)||"exit"in e&&e.exit))}(E)?A((function(e){return{willLeave:e.visible}})):A((function(e){return{visible:!e.visible&&e.visible}})))}n.useEffect((function(){return O.current=!0,u.on(f,M).on(0,I),function(){u.off(f,M).off(0,I)}}),[f]),n.useEffect((function(){O.current&&R.visible!==F&&(R.visible?T():k())}),[R.visible,k,T]),n.useEffect((function(){R.visible?D.init(Array.from(j.values())):j.clear()}),[R.visible,D,j]),n.useEffect((function(){if(R.visible){var e=window,n=e.innerWidth,t=e.innerHeight,i=C.current,r=i.offsetWidth,o=i.offsetHeight,a=R.x,s=R.y;a+r>n&&(a-=a+r-n),s+o>t&&(s-=s+o-t),A({x:a,y:s})}}),[R.visible]),n.useEffect((function(){function e(e){switch(e.preventDefault(),e.key){case"Enter":D.openSubmenu()||I();break;case"Escape":I();break;case"ArrowUp":D.moveUp();break;case"ArrowDown":D.moveDown();break;case"ArrowRight":D.openSubmenu();break;case"ArrowLeft":D.closeSubmenu()}}return R.visible&&(window.addEventListener("resize",I),window.addEventListener("contextmenu",I),window.addEventListener("click",I),window.addEventListener("mousedown",I),window.addEventListener("scroll",I),window.addEventListener("keydown",e),window.addEventListener("blur",I)),function(){window.removeEventListener("resize",I),window.removeEventListener("contextmenu",I),window.removeEventListener("mousedown",I),window.removeEventListener("click",I),window.removeEventListener("scroll",I),window.removeEventListener("keydown",e),window.removeEventListener("blur",I)}}),[R.visible,D]);var P,H,U=R.visible,W=R.triggerEvent,Y=R.propsFromTrigger,q=R.x,z=R.y,B=R.willLeave,K=i("react-contexify",g,((a={})["react-contexify__theme--"+m]=m,a),E?h(E)?i(((P={})["react-contexify__will-enter--"+E]=E&&U&&!B,P["react-contexify__will-leave--"+E+" react-contexify__will-leave--'disabled'"]=E&&U&&B,P)):"enter"in E&&"exit"in E?i(((H={})["react-contexify__will-enter--"+E.enter]=E.enter&&U&&!B,H["react-contexify__will-leave--"+E.exit+" react-contexify__will-leave--'disabled'"]=E.exit&&U&&B,H)):null:null),X=r({},p,{left:q,top:z,opacity:1});return t.createElement(c,{refTracker:j},U&&t.createElement("div",Object.assign({},N,{className:K,onAnimationEnd:function(){R.willLeave&&R.visible&&A({visible:!1,willLeave:!1})},style:X,ref:C,role:"menu",id:f+""}),w(b,{propsFromTrigger:Y,triggerEvent:W})))},exports.Separator=function(){return t.createElement("div",{className:"react-contexify__separator"})},exports.Submenu=p,exports.animation={fade:"fade",flip:"flip",scale:"scale",slide:"slide"},exports.contextMenu=f,exports.theme={light:"light",dark:"dark"},exports.useContextMenu=function(e){return{show:function(n,t){f.show({id:(null==t?void 0:t.id)||(null==e?void 0:e.id),props:(null==t?void 0:t.props)||(null==e?void 0:e.props),event:n,position:null==t?void 0:t.position})},hideAll:function(){f.hideAll()}}};
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var n=require("react"),t=e(n),i=e(require("clsx"));function r(){return(r=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var i in t)Object.prototype.hasOwnProperty.call(t,i)&&(e[i]=t[i])}return e}).apply(this,arguments)}function o(e,n){if(null==e)return{};var t,i,r={},o=Object.keys(e);for(i=0;i<o.length;i++)n.indexOf(t=o[i])>=0||(r[t]=e[t]);return r}var a=n.createContext({});function s(){return n.useContext(a)}var c=function(e){return t.createElement(a.Provider,{value:e.refTracker},e.children)};function l(){var e=new Map;return{on:function(n,t){var i;return e.has(n)?null==(i=e.get(n))||i.add(t):e.set(n,new Set([t])),this},off:function(n,t){return t?e.get(n).delete(t):e.delete(n),this},emit:function(n,t){if("production"!==process.env.NODE){var i=n;e.has(n)||0===i||console.error("It seems that the menu you are trying to display is not renderer or you have a menu id mismatch.","You used the menu id: "+n)}return e.has(n)&&e.get(n).forEach((function(e){e(t)})),this}}}var u=l();function d(){return n.useRef(new Map).current}var f={show:function(e){var n=e.id,t=e.event,i=e.props,r=e.position;t.preventDefault&&t.preventDefault(),u.emit(0).emit(n,{event:t.nativeEvent||t,props:i,position:r})},hideAll:function(){u.emit(0)}},v=function(){},m=function(e){var n,r=e.children,a=e.className,c=e.style,l=e.triggerEvent,u=e.data,d=e.propsFromTrigger,f=e.onClick,m=void 0===f?v:f,p=e.disabled,g=void 0!==p&&p,h=e.hidden,w=void 0!==h&&h,y=o(e,["children","className","style","triggerEvent","data","propsFromTrigger","onClick","disabled","hidden"]),x=s(),E={data:u,triggerEvent:l,props:d},_=b(g,E);if(b(w,E))return null;var k=i("react-contexify__item",a,((n={})["react-contexify__item--disabled"]=_,n));return t.createElement("div",Object.assign({},y,{className:k,style:c,onClick:function(e){E.event=e,_?e.stopPropagation():m(E)},onKeyDown:function(e){"Enter"===e.key&&(E.event=e,m(E))},ref:function(e){e&&!_&&x.set(e,{node:e,isSubmenu:!1})},tabIndex:-1,role:"menuitem","aria-disabled":_}),t.createElement("div",{className:"react-contexify__item__content"},r))},p=function(e){var a,l=e.arrow,u=void 0===l?"▶":l,f=e.children,v=e.disabled,m=void 0!==v&&v,p=e.hidden,g=void 0!==p&&p,h=e.label,y=e.className,x=e.triggerEvent,E=e.propsFromTrigger,_=e.style,k=o(e,["arrow","children","disabled","hidden","label","className","triggerEvent","propsFromTrigger","style"]),L=s(),T=d(),N=n.useRef(null),S=n.useState({left:"100%",top:0,bottom:"initial"}),R=S[0],A=S[1],C={triggerEvent:x,props:E},F=b(m,C),O=b(g,C);if(n.useEffect((function(){if(N.current){var e=window,n=e.innerWidth,t=e.innerHeight,i=N.current.getBoundingClientRect(),r={};i.right<n?(r.left="100%",r.right=void 0):(r.right="100%",r.left=void 0),i.bottom>t?(r.bottom=0,r.top="initial"):r.bottom="initial",A(r)}}),[]),O)return null;var j=i("react-contexify__item",y,((a={})["react-contexify__item--disabled"]=F,a)),D=r({},_,R);return t.createElement(c,{refTracker:T},t.createElement("div",Object.assign({},k,{className:j,ref:function(e){e&&!F&&L.set(e,{node:e,isSubmenu:!0,submenuRefTracker:T})},tabIndex:-1,role:"menuitem","aria-haspopup":!0,"aria-disabled":F}),t.createElement("div",{className:"react-contexify__item__content",onClick:function(e){e.stopPropagation()}},h,t.createElement("span",{className:"react-contexify__submenu-arrow"},u)),t.createElement("div",{className:"react-contexify react-contexify__submenu",ref:N,style:D},w(f,{propsFromTrigger:E,triggerEvent:x}))))};function g(e){return"function"==typeof e}function h(e){return"string"==typeof e}function w(e,t){return n.Children.map(n.Children.toArray(e).filter((function(e){return Boolean(e)})),(function(e){return n.isValidElement(e)?e.type!==m&&e.type!==p&&e.props.children?w(e.props.children,t):n.cloneElement(e,t):e}))}function b(e,n){return g(e)?e(n):e}function y(e,n){return g(n)?r({},e,n(e)):r({},e,n)}exports.Item=m,exports.Menu=function(e){var a,s,l,f=e.id,m=e.theme,p=e.style,g=e.className,b=e.children,x=e.animation,E=void 0===x?"scale":x,_=e.onHidden,k=void 0===_?v:_,L=e.onShown,T=void 0===L?v:L,N=o(e,["id","theme","style","className","children","animation","onHidden","onShown"]),S=n.useReducer(y,{x:0,y:0,visible:!1,triggerEvent:{},propsFromTrigger:null,willLeave:!1}),R=S[0],A=S[1],C=n.useRef(null),F=n.useRef(!1),O=(s=R.visible,l=n.useRef(),n.useEffect((function(){l.current=s}),[s]),l.current),j=d(),D=n.useState((function(){return function(){var e,n,t,i,r=new Map,o=!1;function a(){i[e].node.focus()}function s(){return-1!==e||(c(),!1)}function c(){e+1<i.length?e++:e+1===i.length&&(e=0),o&&l(),a()}function l(){if(s()&&!t){var c=r.get(n),l=c.isRoot,u=c.items,d=c.focusedIndex,f=c.parentNode;n.classList.remove("react-contexify__submenu--is-open"),i=u,n=f,l&&(t=!0,r.clear()),o||(e=d,a())}}return{init:function(n){i=n,e=-1,t=!0},moveDown:c,moveUp:function(){-1===e||0===e?e=i.length-1:e-1<i.length&&e--,o&&l(),a()},openSubmenu:function(){if(s()&&e>=0&&i[e].isSubmenu){var c=Array.from(i[e].submenuRefTracker.values()),l=i[e].node;return r.set(l,{isRoot:t,focusedIndex:e,parentNode:n||l,items:i}),l.classList.add("react-contexify__submenu--is-open"),n=l,c.length>0?(e=0,i=c):o=!0,t=!1,a(),!0}return!1},closeSubmenu:l}}()}))[0];function M(e){var n=e.event,t=e.props,i=e.position;n.stopPropagation();var r,o,a=i||(o={x:0,y:0},function(e){return"touchend"===e.type}(r=n)&&r.changedTouches&&r.changedTouches.length>0?(o.x=r.changedTouches[0].clientX,o.y=r.changedTouches[0].clientY):(o.x=r.clientX,o.y=r.clientY),(!o.x||o.x<0)&&(o.x=0),(!o.y||o.y<0)&&(o.y=0),o),s=a.x,c=a.y;setTimeout((function(){A({visible:!0,willLeave:!1,x:s,y:c,triggerEvent:n,propsFromTrigger:t})}),0)}function I(e){(void 0===e||2!==e.button&&!0!==e.ctrlKey||"contextmenu"===e.type)&&(function(e){return!(!e||!(h(e)||"exit"in e&&e.exit))}(E)?A((function(e){return{willLeave:e.visible}})):A((function(e){return{visible:!e.visible&&e.visible}})))}n.useEffect((function(){return F.current=!0,u.on(f,M).on(0,I),function(){u.off(f,M).off(0,I)}}),[f]),n.useEffect((function(){F.current&&R.visible!==O&&(R.visible?T(R.propsFromTrigger):k())}),[R.visible,k,T]),n.useEffect((function(){R.visible?D.init(Array.from(j.values())):j.clear()}),[R.visible,D,j]),n.useEffect((function(){if(R.visible){var e=window,n=e.innerWidth,t=e.innerHeight,i=C.current,r=i.offsetWidth,o=i.offsetHeight,a=R.x,s=R.y;a+r>n&&(a-=a+r-n),s+o>t&&(s-=s+o-t),A({x:a,y:s})}}),[R.visible]),n.useEffect((function(){function e(e){switch(e.preventDefault(),e.key){case"Enter":D.openSubmenu()||I();break;case"Escape":I();break;case"ArrowUp":D.moveUp();break;case"ArrowDown":D.moveDown();break;case"ArrowRight":D.openSubmenu();break;case"ArrowLeft":D.closeSubmenu()}}return R.visible&&(window.addEventListener("resize",I),window.addEventListener("contextmenu",I),window.addEventListener("click",I),window.addEventListener("mousedown",I),window.addEventListener("scroll",I),window.addEventListener("keydown",e),window.addEventListener("blur",I)),function(){window.removeEventListener("resize",I),window.removeEventListener("contextmenu",I),window.removeEventListener("mousedown",I),window.removeEventListener("click",I),window.removeEventListener("scroll",I),window.removeEventListener("keydown",e),window.removeEventListener("blur",I)}}),[R.visible,D]);var P,H,U=R.visible,W=R.triggerEvent,Y=R.propsFromTrigger,q=R.x,z=R.y,B=R.willLeave,K=i("react-contexify",g,((a={})["react-contexify__theme--"+m]=m,a),E?h(E)?i(((P={})["react-contexify__will-enter--"+E]=E&&U&&!B,P["react-contexify__will-leave--"+E+" react-contexify__will-leave--'disabled'"]=E&&U&&B,P)):"enter"in E&&"exit"in E?i(((H={})["react-contexify__will-enter--"+E.enter]=E.enter&&U&&!B,H["react-contexify__will-leave--"+E.exit+" react-contexify__will-leave--'disabled'"]=E.exit&&U&&B,H)):null:null),X=r({},p,{left:q,top:z,opacity:1});return t.createElement(c,{refTracker:j},U&&t.createElement("div",Object.assign({},N,{className:K,onAnimationEnd:function(){R.willLeave&&R.visible&&A({visible:!1,willLeave:!1})},style:X,ref:C,role:"menu",id:f+""}),w(b,{propsFromTrigger:Y,triggerEvent:W})))},exports.Separator=function(){return t.createElement("div",{className:"react-contexify__separator"})},exports.Submenu=p,exports.animation={fade:"fade",flip:"flip",scale:"scale",slide:"slide"},exports.contextMenu=f,exports.theme={light:"light",dark:"dark"},exports.useContextMenu=function(e){return{show:function(n,t){f.show({id:(null==t?void 0:t.id)||(null==e?void 0:e.id),props:(null==t?void 0:t.props)||(null==e?void 0:e.props),event:n,position:null==t?void 0:t.position})},hideAll:function(){f.hideAll()}}};
 //# sourceMappingURL=react-contexify.cjs.production.min.js.map

dist/react-contexify.esm.js

@@ -576,3 +576,3 @@ import React, { useContext, createContext, useRef, useEffect, useState, Children, isValidElement, cloneElement, useReducer } from 'react';
     if (didMount.current && state.visible !== wasVisible) {
-      state.visible ? onShown() : onHidden();
+      state.visible ? onShown(state.propsFromTrigger) : onHidden();
     } // wasWisible is a ref
@@ -579,0 +579,0 @@ // eslint-disable-next-line react-hooks/exhaustive-deps

package.json

 {
-  "version": "5.0.3",
+  "version": "5.0.4",
   "license": "MIT",
@@ -4,0 +4,0 @@ "main": "dist/index.js",

No alert changes

Improved metrics

Total package byte prevSize

254841

increased by0.12%

No dependency changes