primereact 7.0.0-rc.2 → 7.2.0

package/contextmenu/contextmenu.cjs.js

@@ -3,11 +3,16 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var core = require('primereact/core');
+var utils = require('primereact/utils');
+var csstransition = require('primereact/csstransition');
+var ripple = require('primereact/ripple');
+var portal = require('primereact/portal');
+var PrimeReact = require('primereact/api');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var PrimeReact__default = /*#__PURE__*/_interopDefaultLegacy(PrimeReact);
 
 function _classCallCheck(instance, Constructor) {
   if (!(instance instanceof Constructor)) {
@@ -28,6 +33,9 @@ function _defineProperties(target, props) {
 function _createClass(Constructor, protoProps, staticProps) {
   if (protoProps) _defineProperties(Constructor.prototype, protoProps);
   if (staticProps) _defineProperties(Constructor, staticProps);
+  Object.defineProperty(Constructor, "prototype", {
+    writable: false
+  });
   return Constructor;
 }
 
@@ -60,23 +68,20 @@ function _inherits(subClass, superClass) {
       configurable: true
     }
   });
+  Object.defineProperty(subClass, "prototype", {
+    writable: false
+  });
   if (superClass) _setPrototypeOf(subClass, superClass);
 }
 
 function _typeof(obj) {
   "@babel/helpers - typeof";
 
-  if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
-    _typeof = function _typeof(obj) {
-      return typeof obj;
-    };
-  } else {
-    _typeof = function _typeof(obj) {
-      return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
-    };
-  }
-
-  return _typeof(obj);
+  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
+    return typeof obj;
+  } : function (obj) {
+    return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
+  }, _typeof(obj);
 }
 
 function _possibleConstructorReturn(self, call) {
@@ -130,7 +135,7 @@ var ContextMenuSub = /*#__PURE__*/function (_Component) {
       activeItem: null
     };
     _this.onEnter = _this.onEnter.bind(_assertThisInitialized(_this));
-    _this.submenuRef = /*#__PURE__*/React__default['default'].createRef();
+    _this.submenuRef = /*#__PURE__*/React__default["default"].createRef();
     return _this;
   }
 
@@ -173,13 +178,13 @@ var ContextMenuSub = /*#__PURE__*/function (_Component) {
     key: "position",
     value: function position() {
       var parentItem = this.submenuRef.current.parentElement;
-      var containerOffset = core.DomHandler.getOffset(this.submenuRef.current.parentElement);
-      var viewport = core.DomHandler.getViewport();
-      var sublistWidth = this.submenuRef.current.offsetParent ? this.submenuRef.current.offsetWidth : core.DomHandler.getHiddenElementOuterWidth(this.submenuRef.current);
-      var itemOuterWidth = core.DomHandler.getOuterWidth(parentItem.children[0]);
+      var containerOffset = utils.DomHandler.getOffset(this.submenuRef.current.parentElement);
+      var viewport = utils.DomHandler.getViewport();
+      var sublistWidth = this.submenuRef.current.offsetParent ? this.submenuRef.current.offsetWidth : utils.DomHandler.getHiddenElementOuterWidth(this.submenuRef.current);
+      var itemOuterWidth = utils.DomHandler.getOuterWidth(parentItem.children[0]);
       this.submenuRef.current.style.top = '0px';
 
-      if (parseInt(containerOffset.left, 10) + itemOuterWidth + sublistWidth > viewport.width - core.DomHandler.calculateScrollbarWidth()) {
+      if (parseInt(containerOffset.left, 10) + itemOuterWidth + sublistWidth > viewport.width - utils.DomHandler.calculateScrollbarWidth()) {
         this.submenuRef.current.style.left = -1 * sublistWidth + 'px';
       } else {
         this.submenuRef.current.style.left = itemOuterWidth + 'px';
@@ -205,7 +210,7 @@ var ContextMenuSub = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderSeparator",
     value: function renderSeparator(index) {
-      return /*#__PURE__*/React__default['default'].createElement("li", {
+      return /*#__PURE__*/React__default["default"].createElement("li", {
         key: 'separator_' + index,
         className: "p-menu-separator",
         role: "separator"
@@ -215,7 +220,7 @@ var ContextMenuSub = /*#__PURE__*/function (_Component) {
     key: "renderSubmenu",
     value: function renderSubmenu(item) {
       if (item.items) {
-        return /*#__PURE__*/React__default['default'].createElement(ContextMenuSub, {
+        return /*#__PURE__*/React__default["default"].createElement(ContextMenuSub, {
           model: item.items,
           resetMenu: item !== this.state.activeItem,
           onLeafClick: this.props.onLeafClick
@@ -230,25 +235,25 @@ var ContextMenuSub = /*#__PURE__*/function (_Component) {
       var _this2 = this;
 
       var active = this.state.activeItem === item;
-      var className = core.classNames('p-menuitem', {
+      var className = utils.classNames('p-menuitem', {
         'p-menuitem-active': active
       }, item.className);
-      var linkClassName = core.classNames('p-menuitem-link', {
+      var linkClassName = utils.classNames('p-menuitem-link', {
         'p-disabled': item.disabled
       });
-      var iconClassName = core.classNames('p-menuitem-icon', item.icon);
+      var iconClassName = utils.classNames('p-menuitem-icon', item.icon);
       var submenuIconClassName = 'p-submenu-icon pi pi-angle-right';
-      var icon = item.icon && /*#__PURE__*/React__default['default'].createElement("span", {
+      var icon = item.icon && /*#__PURE__*/React__default["default"].createElement("span", {
         className: iconClassName
       });
-      var label = item.label && /*#__PURE__*/React__default['default'].createElement("span", {
+      var label = item.label && /*#__PURE__*/React__default["default"].createElement("span", {
         className: "p-menuitem-text"
       }, item.label);
-      var submenuIcon = item.items && /*#__PURE__*/React__default['default'].createElement("span", {
+      var submenuIcon = item.items && /*#__PURE__*/React__default["default"].createElement("span", {
         className: submenuIconClassName
       });
       var submenu = this.renderSubmenu(item);
-      var content = /*#__PURE__*/React__default['default'].createElement("a", {
+      var content = /*#__PURE__*/React__default["default"].createElement("a", {
         href: item.url || '#',
         className: linkClassName,
         target: item.target,
@@ -258,7 +263,7 @@ var ContextMenuSub = /*#__PURE__*/function (_Component) {
         role: "menuitem",
         "aria-haspopup": item.items != null,
         "aria-disabled": item.disabled
-      }, icon, label, submenuIcon, /*#__PURE__*/React__default['default'].createElement(core.Ripple, null));
+      }, icon, label, submenuIcon, /*#__PURE__*/React__default["default"].createElement(ripple.Ripple, null));
 
       if (item.template) {
         var defaultContentOptions = {
@@ -273,10 +278,10 @@ var ContextMenuSub = /*#__PURE__*/function (_Component) {
           props: this.props,
           active: active
         };
-        content = core.ObjectUtils.getJSXElement(item.template, item, defaultContentOptions);
+        content = utils.ObjectUtils.getJSXElement(item.template, item, defaultContentOptions);
       }
 
-      return /*#__PURE__*/React__default['default'].createElement("li", {
+      return /*#__PURE__*/React__default["default"].createElement("li", {
         key: item.label + '_' + index,
         role: "none",
         className: className,
@@ -307,22 +312,22 @@ var ContextMenuSub = /*#__PURE__*/function (_Component) {
   }, {
     key: "render",
     value: function render() {
-      var className = core.classNames({
+      var className = utils.classNames({
         'p-submenu-list': !this.props.root
       });
       var submenu = this.renderMenu();
       var isActive = this.isActive();
-      return /*#__PURE__*/React__default['default'].createElement(core.CSSTransition, {
+      return /*#__PURE__*/React__default["default"].createElement(csstransition.CSSTransition, {
         nodeRef: this.submenuRef,
         classNames: "p-contextmenusub",
-        in: isActive,
+        "in": isActive,
         timeout: {
           enter: 0,
           exit: 0
         },
         unmountOnExit: true,
         onEnter: this.onEnter
-      }, /*#__PURE__*/React__default['default'].createElement("ul", {
+      }, /*#__PURE__*/React__default["default"].createElement("ul", {
         ref: this.submenuRef,
         className: className
       }, submenu));
@@ -374,7 +379,7 @@ var ContextMenu = /*#__PURE__*/function (_Component2) {
     _this4.onEntered = _this4.onEntered.bind(_assertThisInitialized(_this4));
     _this4.onExit = _this4.onExit.bind(_assertThisInitialized(_this4));
     _this4.onExited = _this4.onExited.bind(_assertThisInitialized(_this4));
-    _this4.menuRef = /*#__PURE__*/React__default['default'].createRef();
+    _this4.menuRef = /*#__PURE__*/React__default["default"].createRef();
     return _this4;
   }
 
@@ -419,27 +424,10 @@ var ContextMenu = /*#__PURE__*/function (_Component2) {
         });
       }
     }
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps, prevState) {
-      var _this6 = this;
-
-      if (this.state.visible && prevState.reshow !== this.state.reshow) {
-        var event = this.currentEvent;
-        this.setState({
-          visible: false,
-          reshow: false,
-          rePosition: false,
-          resetMenu: true
-        }, function () {
-          return _this6.show(event);
-        });
-      }
-    }
   }, {
     key: "hide",
     value: function hide(event) {
-      var _this7 = this;
+      var _this6 = this;
 
       if (!(event instanceof Event)) {
         event.persist();
@@ -450,8 +438,8 @@ var ContextMenu = /*#__PURE__*/function (_Component2) {
         visible: false,
         reshow: false
       }, function () {
-        if (_this7.props.onHide) {
-          _this7.props.onHide(_this7.currentEvent);
+        if (_this6.props.onHide) {
+          _this6.props.onHide(_this6.currentEvent);
         }
       });
     }
@@ -459,7 +447,7 @@ var ContextMenu = /*#__PURE__*/function (_Component2) {
     key: "onEnter",
     value: function onEnter() {
       if (this.props.autoZIndex) {
-        core.ZIndexUtils.set('menu', this.menuRef.current, this.props.baseZIndex);
+        utils.ZIndexUtils.set('menu', this.menuRef.current, PrimeReact__default["default"].autoZIndex, this.props.baseZIndex || PrimeReact__default["default"].zIndex['menu']);
       }
 
       this.position(this.currentEvent);
@@ -478,7 +466,7 @@ var ContextMenu = /*#__PURE__*/function (_Component2) {
   }, {
     key: "onExited",
     value: function onExited() {
-      core.ZIndexUtils.clear(this.menuRef.current);
+      utils.ZIndexUtils.clear(this.menuRef.current);
     }
   }, {
     key: "position",
@@ -486,9 +474,9 @@ var ContextMenu = /*#__PURE__*/function (_Component2) {
       if (event) {
         var left = event.pageX + 1;
         var top = event.pageY + 1;
-        var width = this.menuRef.current.offsetParent ? this.menuRef.current.offsetWidth : core.DomHandler.getHiddenElementOuterWidth(this.menuRef.current);
-        var height = this.menuRef.current.offsetParent ? this.menuRef.current.offsetHeight : core.DomHandler.getHiddenElementOuterHeight(this.menuRef.current);
-        var viewport = core.DomHandler.getViewport(); //flip
+        var width = this.menuRef.current.offsetParent ? this.menuRef.current.offsetWidth : utils.DomHandler.getHiddenElementOuterWidth(this.menuRef.current);
+        var height = this.menuRef.current.offsetParent ? this.menuRef.current.offsetHeight : utils.DomHandler.getHiddenElementOuterHeight(this.menuRef.current);
+        var viewport = utils.DomHandler.getViewport(); //flip
 
         if (left + width - document.body.scrollLeft > viewport.width) {
           left -= width;
@@ -542,14 +530,14 @@ var ContextMenu = /*#__PURE__*/function (_Component2) {
   }, {
     key: "bindDocumentClickListener",
     value: function bindDocumentClickListener() {
-      var _this8 = this;
+      var _this7 = this;
 
       if (!this.documentClickListener) {
         this.documentClickListener = function (event) {
-          if (_this8.isOutsideClicked(event) && event.button !== 2) {
-            _this8.hide(event);
+          if (_this7.isOutsideClicked(event) && event.button !== 2) {
+            _this7.hide(event);
 
-            _this8.setState({
+            _this7.setState({
               resetMenu: true
             });
           }
@@ -561,11 +549,11 @@ var ContextMenu = /*#__PURE__*/function (_Component2) {
   }, {
     key: "bindDocumentContextMenuListener",
     value: function bindDocumentContextMenuListener() {
-      var _this9 = this;
+      var _this8 = this;
 
       if (!this.documentContextMenuListener) {
         this.documentContextMenuListener = function (event) {
-          _this9.show(event);
+          _this8.show(event);
         };
 
         document.addEventListener('contextmenu', this.documentContextMenuListener);
@@ -574,12 +562,12 @@ var ContextMenu = /*#__PURE__*/function (_Component2) {
   }, {
     key: "bindDocumentResizeListener",
     value: function bindDocumentResizeListener() {
-      var _this10 = this;
+      var _this9 = this;
 
       if (!this.documentResizeListener) {
         this.documentResizeListener = function (event) {
-          if (_this10.state.visible && !core.DomHandler.isAndroid()) {
-            _this10.hide(event);
+          if (_this9.state.visible && !utils.DomHandler.isTouchDevice()) {
+            _this9.hide(event);
           }
         };
 
@@ -617,21 +605,38 @@ var ContextMenu = /*#__PURE__*/function (_Component2) {
         this.bindDocumentContextMenuListener();
       }
     }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps, prevState) {
+      var _this10 = this;
+
+      if (this.state.visible && (prevState.reshow !== this.state.reshow || prevProps.model !== this.props.model)) {
+        var event = this.currentEvent;
+        this.setState({
+          visible: false,
+          reshow: false,
+          rePosition: false,
+          resetMenu: true
+        }, function () {
+          return _this10.show(event);
+        });
+      }
+    }
   }, {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
       this.unbindDocumentListeners();
       this.unbindDocumentContextMenuListener();
-      core.ZIndexUtils.clear(this.menuRef.current);
+      utils.ZIndexUtils.clear(this.menuRef.current);
     }
   }, {
     key: "renderContextMenu",
     value: function renderContextMenu() {
-      var className = core.classNames('p-contextmenu p-component', this.props.className);
-      return /*#__PURE__*/React__default['default'].createElement(core.CSSTransition, {
+      var className = utils.classNames('p-contextmenu p-component', this.props.className);
+      return /*#__PURE__*/React__default["default"].createElement(csstransition.CSSTransition, {
         nodeRef: this.menuRef,
         classNames: "p-contextmenu",
-        in: this.state.visible,
+        "in": this.state.visible,
         timeout: {
           enter: 250,
           exit: 0
@@ -642,14 +647,14 @@ var ContextMenu = /*#__PURE__*/function (_Component2) {
         onEntered: this.onEntered,
         onExit: this.onExit,
         onExited: this.onExited
-      }, /*#__PURE__*/React__default['default'].createElement("div", {
+      }, /*#__PURE__*/React__default["default"].createElement("div", {
         ref: this.menuRef,
         id: this.props.id,
         className: className,
         style: this.props.style,
         onClick: this.onMenuClick,
         onMouseEnter: this.onMenuMouseEnter
-      }, /*#__PURE__*/React__default['default'].createElement(ContextMenuSub, {
+      }, /*#__PURE__*/React__default["default"].createElement(ContextMenuSub, {
         model: this.props.model,
         root: true,
         resetMenu: this.state.resetMenu,
@@ -660,7 +665,7 @@ var ContextMenu = /*#__PURE__*/function (_Component2) {
     key: "render",
     value: function render() {
       var element = this.renderContextMenu();
-      return /*#__PURE__*/React__default['default'].createElement(core.Portal, {
+      return /*#__PURE__*/React__default["default"].createElement(portal.Portal, {
         element: element,
         appendTo: this.props.appendTo
       });

package/contextmenu/contextmenu.cjs.min.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("primereact/core");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i=n(e);function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function o(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}function s(e,t,n){return t&&o(e.prototype,t),n&&o(e,n),e}function u(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function l(e,t){return(l=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function a(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&l(e,t)}function c(e){return(c="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function m(e,t){if(t&&("object"===c(t)||"function"==typeof t))return t;if(void 0!==t)throw new TypeError("Derived constructors may only return object or undefined");return u(e)}function f(e){return(f=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function d(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function p(e){var t=h();return function(){var n,i=f(e);if(t){var r=f(this).constructor;n=Reflect.construct(i,arguments,r)}else n=i.apply(this,arguments);return m(this,n)}}function h(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}var v=function(n){a(l,e.Component);var o=p(l);function l(e){var t;return r(this,l),(t=o.call(this,e)).state={activeItem:null},t.onEnter=t.onEnter.bind(u(t)),t.submenuRef=i.default.createRef(),t}return s(l,[{key:"onItemMouseEnter",value:function(e,t){t.disabled?e.preventDefault():this.setState({activeItem:t})}},{key:"onItemClick",value:function(e,t){t.disabled?e.preventDefault():(t.url||e.preventDefault(),t.command&&t.command({originalEvent:e,item:t}),t.items||this.props.onLeafClick(e))}},{key:"position",value:function(){var e=this.submenuRef.current.parentElement,n=t.DomHandler.getOffset(this.submenuRef.current.parentElement),i=t.DomHandler.getViewport(),r=this.submenuRef.current.offsetParent?this.submenuRef.current.offsetWidth:t.DomHandler.getHiddenElementOuterWidth(this.submenuRef.current),o=t.DomHandler.getOuterWidth(e.children[0]);this.submenuRef.current.style.top="0px",this.submenuRef.current.style.left=parseInt(n.left,10)+o+r>i.width-t.DomHandler.calculateScrollbarWidth()?-1*r+"px":o+"px"}},{key:"onEnter",value:function(){this.position()}},{key:"isActive",value:function(){return this.props.root||!this.props.resetMenu}},{key:"componentDidUpdate",value:function(){this.isActive()&&this.position()}},{key:"renderSeparator",value:function(e){return i.default.createElement("li",{key:"separator_"+e,className:"p-menu-separator",role:"separator"})}},{key:"renderSubmenu",value:function(e){return e.items?i.default.createElement(l,{model:e.items,resetMenu:e!==this.state.activeItem,onLeafClick:this.props.onLeafClick}):null}},{key:"renderMenuitem",value:function(e,n){var r=this,o=this.state.activeItem===e,s=t.classNames("p-menuitem",{"p-menuitem-active":o},e.className),u=t.classNames("p-menuitem-link",{"p-disabled":e.disabled}),l=t.classNames("p-menuitem-icon",e.icon),a="p-submenu-icon pi pi-angle-right",c=e.icon&&i.default.createElement("span",{className:l}),m=e.label&&i.default.createElement("span",{className:"p-menuitem-text"},e.label),f=e.items&&i.default.createElement("span",{className:a}),d=this.renderSubmenu(e),p=i.default.createElement("a",{href:e.url||"#",className:u,target:e.target,onClick:function(t){return r.onItemClick(t,e,n)},role:"menuitem","aria-haspopup":null!=e.items,"aria-disabled":e.disabled},c,m,f,i.default.createElement(t.Ripple,null));e.template&&(p=t.ObjectUtils.getJSXElement(e.template,e,{onClick:function(t){return r.onItemClick(t,e,n)},className:u,labelClassName:"p-menuitem-text",iconClassName:l,submenuIconClassName:a,element:p,props:this.props,active:o}));return i.default.createElement("li",{key:e.label+"_"+n,role:"none",className:s,style:e.style,onMouseEnter:function(t){return r.onItemMouseEnter(t,e)}},p,d)}},{key:"renderItem",value:function(e,t){return e.separator?this.renderSeparator(t):this.renderMenuitem(e,t)}},{key:"renderMenu",value:function(){var e=this;return this.props.model?this.props.model.map((function(t,n){return e.renderItem(t,n)})):null}},{key:"render",value:function(){var e=t.classNames({"p-submenu-list":!this.props.root}),n=this.renderMenu(),r=this.isActive();return i.default.createElement(t.CSSTransition,{nodeRef:this.submenuRef,classNames:"p-contextmenusub",in:r,timeout:{enter:0,exit:0},unmountOnExit:!0,onEnter:this.onEnter},i.default.createElement("ul",{ref:this.submenuRef,className:e},n))}}],[{key:"getDerivedStateFromProps",value:function(e,t){return!0===e.resetMenu?{activeItem:null}:null}}]),l}();d(v,"defaultProps",{model:null,root:!1,className:null,resetMenu:!1,onLeafClick:null});var b=function(n){a(l,e.Component);var o=p(l);function l(e){var t;return r(this,l),(t=o.call(this,e)).state={visible:!1,reshow:!1,resetMenu:!1},t.onMenuClick=t.onMenuClick.bind(u(t)),t.onLeafClick=t.onLeafClick.bind(u(t)),t.onMenuMouseEnter=t.onMenuMouseEnter.bind(u(t)),t.onEnter=t.onEnter.bind(u(t)),t.onEntered=t.onEntered.bind(u(t)),t.onExit=t.onExit.bind(u(t)),t.onExited=t.onExited.bind(u(t)),t.menuRef=i.default.createRef(),t}return s(l,[{key:"onMenuClick",value:function(){this.setState({resetMenu:!1})}},{key:"onMenuMouseEnter",value:function(){this.setState({resetMenu:!1})}},{key:"show",value:function(e){var t=this;e instanceof Event||e.persist(),e.stopPropagation(),e.preventDefault(),this.currentEvent=e,this.state.visible?this.setState({reshow:!0}):this.setState({visible:!0},(function(){t.props.onShow&&t.props.onShow(t.currentEvent)}))}},{key:"componentDidUpdate",value:function(e,t){var n=this;if(this.state.visible&&t.reshow!==this.state.reshow){var i=this.currentEvent;this.setState({visible:!1,reshow:!1,rePosition:!1,resetMenu:!0},(function(){return n.show(i)}))}}},{key:"hide",value:function(e){var t=this;e instanceof Event||e.persist(),this.currentEvent=e,this.setState({visible:!1,reshow:!1},(function(){t.props.onHide&&t.props.onHide(t.currentEvent)}))}},{key:"onEnter",value:function(){this.props.autoZIndex&&t.ZIndexUtils.set("menu",this.menuRef.current,this.props.baseZIndex),this.position(this.currentEvent)}},{key:"onEntered",value:function(){this.bindDocumentListeners()}},{key:"onExit",value:function(){this.currentEvent=null,this.unbindDocumentListeners()}},{key:"onExited",value:function(){t.ZIndexUtils.clear(this.menuRef.current)}},{key:"position",value:function(e){if(e){var n=e.pageX+1,i=e.pageY+1,r=this.menuRef.current.offsetParent?this.menuRef.current.offsetWidth:t.DomHandler.getHiddenElementOuterWidth(this.menuRef.current),o=this.menuRef.current.offsetParent?this.menuRef.current.offsetHeight:t.DomHandler.getHiddenElementOuterHeight(this.menuRef.current),s=t.DomHandler.getViewport();n+r-document.body.scrollLeft>s.width&&(n-=r),i+o-document.body.scrollTop>s.height&&(i-=o),n<document.body.scrollLeft&&(n=document.body.scrollLeft),i<document.body.scrollTop&&(i=document.body.scrollTop),this.menuRef.current.style.left=n+"px",this.menuRef.current.style.top=i+"px"}}},{key:"onLeafClick",value:function(e){this.setState({resetMenu:!0}),this.hide(e),e.stopPropagation()}},{key:"isOutsideClicked",value:function(e){return this.menuRef&&this.menuRef.current&&!(this.menuRef.current.isSameNode(e.target)||this.menuRef.current.contains(e.target))}},{key:"bindDocumentListeners",value:function(){this.bindDocumentResizeListener(),this.bindDocumentClickListener()}},{key:"unbindDocumentListeners",value:function(){this.unbindDocumentResizeListener(),this.unbindDocumentClickListener()}},{key:"bindDocumentClickListener",value:function(){var e=this;this.documentClickListener||(this.documentClickListener=function(t){e.isOutsideClicked(t)&&2!==t.button&&(e.hide(t),e.setState({resetMenu:!0}))},document.addEventListener("click",this.documentClickListener))}},{key:"bindDocumentContextMenuListener",value:function(){var e=this;this.documentContextMenuListener||(this.documentContextMenuListener=function(t){e.show(t)},document.addEventListener("contextmenu",this.documentContextMenuListener))}},{key:"bindDocumentResizeListener",value:function(){var e=this;this.documentResizeListener||(this.documentResizeListener=function(n){e.state.visible&&!t.DomHandler.isAndroid()&&e.hide(n)},window.addEventListener("resize",this.documentResizeListener))}},{key:"unbindDocumentClickListener",value:function(){this.documentClickListener&&(document.removeEventListener("click",this.documentClickListener),this.documentClickListener=null)}},{key:"unbindDocumentContextMenuListener",value:function(){this.documentContextMenuListener&&(document.removeEventListener("contextmenu",this.documentContextMenuListener),this.documentContextMenuListener=null)}},{key:"unbindDocumentResizeListener",value:function(){this.documentResizeListener&&(window.removeEventListener("resize",this.documentResizeListener),this.documentResizeListener=null)}},{key:"componentDidMount",value:function(){this.props.global&&this.bindDocumentContextMenuListener()}},{key:"componentWillUnmount",value:function(){this.unbindDocumentListeners(),this.unbindDocumentContextMenuListener(),t.ZIndexUtils.clear(this.menuRef.current)}},{key:"renderContextMenu",value:function(){var e=t.classNames("p-contextmenu p-component",this.props.className);return i.default.createElement(t.CSSTransition,{nodeRef:this.menuRef,classNames:"p-contextmenu",in:this.state.visible,timeout:{enter:250,exit:0},options:this.props.transitionOptions,unmountOnExit:!0,onEnter:this.onEnter,onEntered:this.onEntered,onExit:this.onExit,onExited:this.onExited},i.default.createElement("div",{ref:this.menuRef,id:this.props.id,className:e,style:this.props.style,onClick:this.onMenuClick,onMouseEnter:this.onMenuMouseEnter},i.default.createElement(v,{model:this.props.model,root:!0,resetMenu:this.state.resetMenu,onLeafClick:this.onLeafClick})))}},{key:"render",value:function(){var e=this.renderContextMenu();return i.default.createElement(t.Portal,{element:e,appendTo:this.props.appendTo})}}]),l}();d(b,"defaultProps",{id:null,model:null,style:null,className:null,global:!1,autoZIndex:!0,baseZIndex:0,appendTo:null,transitionOptions:null,onShow:null,onHide:null}),exports.ContextMenu=b;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("primereact/utils"),n=require("primereact/csstransition"),i=require("primereact/ripple"),r=require("primereact/portal"),o=require("primereact/api");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var s=u(e),l=u(o);function a(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function c(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}function m(e,t,n){return t&&c(e.prototype,t),n&&c(e,n),Object.defineProperty(e,"prototype",{writable:!1}),e}function f(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function d(e,t){return d=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e},d(e,t)}function p(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),Object.defineProperty(e,"prototype",{writable:!1}),t&&d(e,t)}function h(e){return h="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},h(e)}function v(e,t){if(t&&("object"===h(t)||"function"==typeof t))return t;if(void 0!==t)throw new TypeError("Derived constructors may only return object or undefined");return f(e)}function b(e){return b=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)},b(e)}function y(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function E(e){var t=k();return function(){var n,i=b(e);if(t){var r=b(this).constructor;n=Reflect.construct(i,arguments,r)}else n=i.apply(this,arguments);return v(this,n)}}function k(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}var L=function(r){p(u,e.Component);var o=E(u);function u(e){var t;return a(this,u),(t=o.call(this,e)).state={activeItem:null},t.onEnter=t.onEnter.bind(f(t)),t.submenuRef=s.default.createRef(),t}return m(u,[{key:"onItemMouseEnter",value:function(e,t){t.disabled?e.preventDefault():this.setState({activeItem:t})}},{key:"onItemClick",value:function(e,t){t.disabled?e.preventDefault():(t.url||e.preventDefault(),t.command&&t.command({originalEvent:e,item:t}),t.items||this.props.onLeafClick(e))}},{key:"position",value:function(){var e=this.submenuRef.current.parentElement,n=t.DomHandler.getOffset(this.submenuRef.current.parentElement),i=t.DomHandler.getViewport(),r=this.submenuRef.current.offsetParent?this.submenuRef.current.offsetWidth:t.DomHandler.getHiddenElementOuterWidth(this.submenuRef.current),o=t.DomHandler.getOuterWidth(e.children[0]);this.submenuRef.current.style.top="0px",this.submenuRef.current.style.left=parseInt(n.left,10)+o+r>i.width-t.DomHandler.calculateScrollbarWidth()?-1*r+"px":o+"px"}},{key:"onEnter",value:function(){this.position()}},{key:"isActive",value:function(){return this.props.root||!this.props.resetMenu}},{key:"componentDidUpdate",value:function(){this.isActive()&&this.position()}},{key:"renderSeparator",value:function(e){return s.default.createElement("li",{key:"separator_"+e,className:"p-menu-separator",role:"separator"})}},{key:"renderSubmenu",value:function(e){return e.items?s.default.createElement(u,{model:e.items,resetMenu:e!==this.state.activeItem,onLeafClick:this.props.onLeafClick}):null}},{key:"renderMenuitem",value:function(e,n){var r=this,o=this.state.activeItem===e,u=t.classNames("p-menuitem",{"p-menuitem-active":o},e.className),l=t.classNames("p-menuitem-link",{"p-disabled":e.disabled}),a=t.classNames("p-menuitem-icon",e.icon),c="p-submenu-icon pi pi-angle-right",m=e.icon&&s.default.createElement("span",{className:a}),f=e.label&&s.default.createElement("span",{className:"p-menuitem-text"},e.label),d=e.items&&s.default.createElement("span",{className:c}),p=this.renderSubmenu(e),h=s.default.createElement("a",{href:e.url||"#",className:l,target:e.target,onClick:function(t){return r.onItemClick(t,e,n)},role:"menuitem","aria-haspopup":null!=e.items,"aria-disabled":e.disabled},m,f,d,s.default.createElement(i.Ripple,null));e.template&&(h=t.ObjectUtils.getJSXElement(e.template,e,{onClick:function(t){return r.onItemClick(t,e,n)},className:l,labelClassName:"p-menuitem-text",iconClassName:a,submenuIconClassName:c,element:h,props:this.props,active:o}));return s.default.createElement("li",{key:e.label+"_"+n,role:"none",className:u,style:e.style,onMouseEnter:function(t){return r.onItemMouseEnter(t,e)}},h,p)}},{key:"renderItem",value:function(e,t){return e.separator?this.renderSeparator(t):this.renderMenuitem(e,t)}},{key:"renderMenu",value:function(){var e=this;return this.props.model?this.props.model.map((function(t,n){return e.renderItem(t,n)})):null}},{key:"render",value:function(){var e=t.classNames({"p-submenu-list":!this.props.root}),i=this.renderMenu(),r=this.isActive();return s.default.createElement(n.CSSTransition,{nodeRef:this.submenuRef,classNames:"p-contextmenusub",in:r,timeout:{enter:0,exit:0},unmountOnExit:!0,onEnter:this.onEnter},s.default.createElement("ul",{ref:this.submenuRef,className:e},i))}}],[{key:"getDerivedStateFromProps",value:function(e,t){return!0===e.resetMenu?{activeItem:null}:null}}]),u}();y(L,"defaultProps",{model:null,root:!1,className:null,resetMenu:!1,onLeafClick:null});var x=function(i){p(u,e.Component);var o=E(u);function u(e){var t;return a(this,u),(t=o.call(this,e)).state={visible:!1,reshow:!1,resetMenu:!1},t.onMenuClick=t.onMenuClick.bind(f(t)),t.onLeafClick=t.onLeafClick.bind(f(t)),t.onMenuMouseEnter=t.onMenuMouseEnter.bind(f(t)),t.onEnter=t.onEnter.bind(f(t)),t.onEntered=t.onEntered.bind(f(t)),t.onExit=t.onExit.bind(f(t)),t.onExited=t.onExited.bind(f(t)),t.menuRef=s.default.createRef(),t}return m(u,[{key:"onMenuClick",value:function(){this.setState({resetMenu:!1})}},{key:"onMenuMouseEnter",value:function(){this.setState({resetMenu:!1})}},{key:"show",value:function(e){var t=this;e instanceof Event||e.persist(),e.stopPropagation(),e.preventDefault(),this.currentEvent=e,this.state.visible?this.setState({reshow:!0}):this.setState({visible:!0},(function(){t.props.onShow&&t.props.onShow(t.currentEvent)}))}},{key:"hide",value:function(e){var t=this;e instanceof Event||e.persist(),this.currentEvent=e,this.setState({visible:!1,reshow:!1},(function(){t.props.onHide&&t.props.onHide(t.currentEvent)}))}},{key:"onEnter",value:function(){this.props.autoZIndex&&t.ZIndexUtils.set("menu",this.menuRef.current,l.default.autoZIndex,this.props.baseZIndex||l.default.zIndex.menu),this.position(this.currentEvent)}},{key:"onEntered",value:function(){this.bindDocumentListeners()}},{key:"onExit",value:function(){this.currentEvent=null,this.unbindDocumentListeners()}},{key:"onExited",value:function(){t.ZIndexUtils.clear(this.menuRef.current)}},{key:"position",value:function(e){if(e){var n=e.pageX+1,i=e.pageY+1,r=this.menuRef.current.offsetParent?this.menuRef.current.offsetWidth:t.DomHandler.getHiddenElementOuterWidth(this.menuRef.current),o=this.menuRef.current.offsetParent?this.menuRef.current.offsetHeight:t.DomHandler.getHiddenElementOuterHeight(this.menuRef.current),u=t.DomHandler.getViewport();n+r-document.body.scrollLeft>u.width&&(n-=r),i+o-document.body.scrollTop>u.height&&(i-=o),n<document.body.scrollLeft&&(n=document.body.scrollLeft),i<document.body.scrollTop&&(i=document.body.scrollTop),this.menuRef.current.style.left=n+"px",this.menuRef.current.style.top=i+"px"}}},{key:"onLeafClick",value:function(e){this.setState({resetMenu:!0}),this.hide(e),e.stopPropagation()}},{key:"isOutsideClicked",value:function(e){return this.menuRef&&this.menuRef.current&&!(this.menuRef.current.isSameNode(e.target)||this.menuRef.current.contains(e.target))}},{key:"bindDocumentListeners",value:function(){this.bindDocumentResizeListener(),this.bindDocumentClickListener()}},{key:"unbindDocumentListeners",value:function(){this.unbindDocumentResizeListener(),this.unbindDocumentClickListener()}},{key:"bindDocumentClickListener",value:function(){var e=this;this.documentClickListener||(this.documentClickListener=function(t){e.isOutsideClicked(t)&&2!==t.button&&(e.hide(t),e.setState({resetMenu:!0}))},document.addEventListener("click",this.documentClickListener))}},{key:"bindDocumentContextMenuListener",value:function(){var e=this;this.documentContextMenuListener||(this.documentContextMenuListener=function(t){e.show(t)},document.addEventListener("contextmenu",this.documentContextMenuListener))}},{key:"bindDocumentResizeListener",value:function(){var e=this;this.documentResizeListener||(this.documentResizeListener=function(n){e.state.visible&&!t.DomHandler.isTouchDevice()&&e.hide(n)},window.addEventListener("resize",this.documentResizeListener))}},{key:"unbindDocumentClickListener",value:function(){this.documentClickListener&&(document.removeEventListener("click",this.documentClickListener),this.documentClickListener=null)}},{key:"unbindDocumentContextMenuListener",value:function(){this.documentContextMenuListener&&(document.removeEventListener("contextmenu",this.documentContextMenuListener),this.documentContextMenuListener=null)}},{key:"unbindDocumentResizeListener",value:function(){this.documentResizeListener&&(window.removeEventListener("resize",this.documentResizeListener),this.documentResizeListener=null)}},{key:"componentDidMount",value:function(){this.props.global&&this.bindDocumentContextMenuListener()}},{key:"componentDidUpdate",value:function(e,t){var n=this;if(this.state.visible&&(t.reshow!==this.state.reshow||e.model!==this.props.model)){var i=this.currentEvent;this.setState({visible:!1,reshow:!1,rePosition:!1,resetMenu:!0},(function(){return n.show(i)}))}}},{key:"componentWillUnmount",value:function(){this.unbindDocumentListeners(),this.unbindDocumentContextMenuListener(),t.ZIndexUtils.clear(this.menuRef.current)}},{key:"renderContextMenu",value:function(){var e=t.classNames("p-contextmenu p-component",this.props.className);return s.default.createElement(n.CSSTransition,{nodeRef:this.menuRef,classNames:"p-contextmenu",in:this.state.visible,timeout:{enter:250,exit:0},options:this.props.transitionOptions,unmountOnExit:!0,onEnter:this.onEnter,onEntered:this.onEntered,onExit:this.onExit,onExited:this.onExited},s.default.createElement("div",{ref:this.menuRef,id:this.props.id,className:e,style:this.props.style,onClick:this.onMenuClick,onMouseEnter:this.onMenuMouseEnter},s.default.createElement(L,{model:this.props.model,root:!0,resetMenu:this.state.resetMenu,onLeafClick:this.onLeafClick})))}},{key:"render",value:function(){var e=this.renderContextMenu();return s.default.createElement(r.Portal,{element:e,appendTo:this.props.appendTo})}}]),u}();y(x,"defaultProps",{id:null,model:null,style:null,className:null,global:!1,autoZIndex:!0,baseZIndex:0,appendTo:null,transitionOptions:null,onShow:null,onHide:null}),exports.ContextMenu=x;

package/contextmenu/contextmenu.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { MenuItem } from '../menuitem';
+import { CSSTransitionProps } from '../csstransition';
 
 type ContextMenuAppendToType = 'self' | HTMLElement | undefined | null;
 
@@ -12,7 +13,7 @@ export interface ContextMenuProps {
     autoZIndex?: boolean;
     baseZIndex?: number;
     appendTo?: ContextMenuAppendToType;
-    transitionOptions?: object;
+    transitionOptions?: CSSTransitionProps;
     onShow?(e: React.SyntheticEvent): void;
     onHide?(e: React.SyntheticEvent): void;
 }

package/contextmenu/contextmenu.esm.js

@@ -1,5 +1,9 @@
 import React, { Component } from 'react';
-import { DomHandler, classNames, Ripple, ObjectUtils, CSSTransition, ZIndexUtils, Portal } from 'primereact/core';
+import { DomHandler, classNames, ObjectUtils, ZIndexUtils } from 'primereact/utils';
+import { CSSTransition } from 'primereact/csstransition';
+import { Ripple } from 'primereact/ripple';
+import { Portal } from 'primereact/portal';
+import PrimeReact from 'primereact/api';
 
 function _classCallCheck(instance, Constructor) {
   if (!(instance instanceof Constructor)) {
@@ -20,6 +24,9 @@ function _defineProperties(target, props) {
 function _createClass(Constructor, protoProps, staticProps) {
   if (protoProps) _defineProperties(Constructor.prototype, protoProps);
   if (staticProps) _defineProperties(Constructor, staticProps);
+  Object.defineProperty(Constructor, "prototype", {
+    writable: false
+  });
   return Constructor;
 }
 
@@ -52,23 +59,20 @@ function _inherits(subClass, superClass) {
       configurable: true
     }
   });
+  Object.defineProperty(subClass, "prototype", {
+    writable: false
+  });
   if (superClass) _setPrototypeOf(subClass, superClass);
 }
 
 function _typeof(obj) {
   "@babel/helpers - typeof";
 
-  if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
-    _typeof = function _typeof(obj) {
-      return typeof obj;
-    };
-  } else {
-    _typeof = function _typeof(obj) {
-      return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
-    };
-  }
-
-  return _typeof(obj);
+  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
+    return typeof obj;
+  } : function (obj) {
+    return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
+  }, _typeof(obj);
 }
 
 function _possibleConstructorReturn(self, call) {
@@ -307,7 +311,7 @@ var ContextMenuSub = /*#__PURE__*/function (_Component) {
       return /*#__PURE__*/React.createElement(CSSTransition, {
         nodeRef: this.submenuRef,
         classNames: "p-contextmenusub",
-        in: isActive,
+        "in": isActive,
         timeout: {
           enter: 0,
           exit: 0
@@ -411,27 +415,10 @@ var ContextMenu = /*#__PURE__*/function (_Component2) {
         });
       }
     }
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps, prevState) {
-      var _this6 = this;
-
-      if (this.state.visible && prevState.reshow !== this.state.reshow) {
-        var event = this.currentEvent;
-        this.setState({
-          visible: false,
-          reshow: false,
-          rePosition: false,
-          resetMenu: true
-        }, function () {
-          return _this6.show(event);
-        });
-      }
-    }
   }, {
     key: "hide",
     value: function hide(event) {
-      var _this7 = this;
+      var _this6 = this;
 
       if (!(event instanceof Event)) {
         event.persist();
@@ -442,8 +429,8 @@ var ContextMenu = /*#__PURE__*/function (_Component2) {
         visible: false,
         reshow: false
       }, function () {
-        if (_this7.props.onHide) {
-          _this7.props.onHide(_this7.currentEvent);
+        if (_this6.props.onHide) {
+          _this6.props.onHide(_this6.currentEvent);
         }
       });
     }
@@ -451,7 +438,7 @@ var ContextMenu = /*#__PURE__*/function (_Component2) {
     key: "onEnter",
     value: function onEnter() {
       if (this.props.autoZIndex) {
-        ZIndexUtils.set('menu', this.menuRef.current, this.props.baseZIndex);
+        ZIndexUtils.set('menu', this.menuRef.current, PrimeReact.autoZIndex, this.props.baseZIndex || PrimeReact.zIndex['menu']);
       }
 
       this.position(this.currentEvent);
@@ -534,14 +521,14 @@ var ContextMenu = /*#__PURE__*/function (_Component2) {
   }, {
     key: "bindDocumentClickListener",
     value: function bindDocumentClickListener() {
-      var _this8 = this;
+      var _this7 = this;
 
       if (!this.documentClickListener) {
         this.documentClickListener = function (event) {
-          if (_this8.isOutsideClicked(event) && event.button !== 2) {
-            _this8.hide(event);
+          if (_this7.isOutsideClicked(event) && event.button !== 2) {
+            _this7.hide(event);
 
-            _this8.setState({
+            _this7.setState({
               resetMenu: true
             });
           }
@@ -553,11 +540,11 @@ var ContextMenu = /*#__PURE__*/function (_Component2) {
   }, {
     key: "bindDocumentContextMenuListener",
     value: function bindDocumentContextMenuListener() {
-      var _this9 = this;
+      var _this8 = this;
 
       if (!this.documentContextMenuListener) {
         this.documentContextMenuListener = function (event) {
-          _this9.show(event);
+          _this8.show(event);
         };
 
         document.addEventListener('contextmenu', this.documentContextMenuListener);
@@ -566,12 +553,12 @@ var ContextMenu = /*#__PURE__*/function (_Component2) {
   }, {
     key: "bindDocumentResizeListener",
     value: function bindDocumentResizeListener() {
-      var _this10 = this;
+      var _this9 = this;
 
       if (!this.documentResizeListener) {
         this.documentResizeListener = function (event) {
-          if (_this10.state.visible && !DomHandler.isAndroid()) {
-            _this10.hide(event);
+          if (_this9.state.visible && !DomHandler.isTouchDevice()) {
+            _this9.hide(event);
           }
         };
 
@@ -609,6 +596,23 @@ var ContextMenu = /*#__PURE__*/function (_Component2) {
         this.bindDocumentContextMenuListener();
       }
     }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps, prevState) {
+      var _this10 = this;
+
+      if (this.state.visible && (prevState.reshow !== this.state.reshow || prevProps.model !== this.props.model)) {
+        var event = this.currentEvent;
+        this.setState({
+          visible: false,
+          reshow: false,
+          rePosition: false,
+          resetMenu: true
+        }, function () {
+          return _this10.show(event);
+        });
+      }
+    }
   }, {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
@@ -623,7 +627,7 @@ var ContextMenu = /*#__PURE__*/function (_Component2) {
       return /*#__PURE__*/React.createElement(CSSTransition, {
         nodeRef: this.menuRef,
         classNames: "p-contextmenu",
-        in: this.state.visible,
+        "in": this.state.visible,
         timeout: {
           enter: 250,
           exit: 0