primereact 8.7.2 → 9.0.0-beta.1

package/contextmenu/contextmenu.cjs.js

@@ -37,14 +37,12 @@ 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);
@@ -55,42 +53,40 @@ function _arrayWithHoles(arr) {
 }
 
 function _iterableToArrayLimit(arr, i) {
-  var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
-
-  if (_i == null) return;
-  var _arr = [];
-  var _n = true;
-  var _d = false;
-
-  var _s, _e;
-
-  try {
-    for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
-      _arr.push(_s.value);
-
-      if (i && _arr.length === i) break;
-    }
-  } catch (err) {
-    _d = true;
-    _e = err;
-  } finally {
+  var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"];
+  if (null != _i) {
+    var _s,
+      _e,
+      _x,
+      _r,
+      _arr = [],
+      _n = !0,
+      _d = !1;
     try {
-      if (!_n && _i["return"] != null) _i["return"]();
+      if (_x = (_i = _i.call(arr)).next, 0 === i) {
+        if (Object(_i) !== _i) return;
+        _n = !1;
+      } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0) {
+        ;
+      }
+    } catch (err) {
+      _d = !0, _e = err;
     } finally {
-      if (_d) throw _e;
+      try {
+        if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return;
+      } finally {
+        if (_d) throw _e;
+      }
     }
+    return _arr;
   }
-
-  return _arr;
 }
 
 function _arrayLikeToArray(arr, len) {
   if (len == null || len > arr.length) len = arr.length;
-
   for (var i = 0, arr2 = new Array(len); i < len; i++) {
     arr2[i] = arr[i];
   }
-
   return arr2;
 }
 
@@ -113,71 +109,63 @@ function _slicedToArray(arr, i) {
 
 var ContextMenuSub = /*#__PURE__*/React__namespace.memo(function (props) {
   var _React$useState = React__namespace.useState(null),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      activeItemState = _React$useState2[0],
-      setActiveItemState = _React$useState2[1];
-
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    activeItemState = _React$useState2[0],
+    setActiveItemState = _React$useState2[1];
   var submenuRef = React__namespace.useRef(null);
   var active = props.root || !props.resetMenu;
-
   if (props.resetMenu === true && activeItemState !== null) {
     setActiveItemState(null);
   }
-
   var onItemMouseEnter = function onItemMouseEnter(event, item) {
     if (item.disabled) {
       event.preventDefault();
       return;
     }
-
     setActiveItemState(item);
   };
-
   var onItemClick = function onItemClick(event, item) {
     if (item.disabled) {
       event.preventDefault();
       return;
     }
-
     if (!item.url) {
       event.preventDefault();
     }
-
     if (item.command) {
       item.command({
         originalEvent: event,
         item: item
       });
     }
-
     if (!item.items) {
       props.onLeafClick(event);
     }
   };
-
   var position = function position() {
     var parentItem = submenuRef.current.parentElement;
-    var containerOffset = utils.DomHandler.getOffset(submenuRef.current.parentElement);
+    var containerOffset = utils.DomHandler.getOffset(parentItem);
     var viewport = utils.DomHandler.getViewport();
     var sublistWidth = submenuRef.current.offsetParent ? submenuRef.current.offsetWidth : utils.DomHandler.getHiddenElementOuterWidth(submenuRef.current);
     var itemOuterWidth = utils.DomHandler.getOuterWidth(parentItem.children[0]);
-    submenuRef.current.style.top = '0px';
-
+    var top = parseInt(containerOffset.top, 10) + submenuRef.current.offsetHeight - utils.DomHandler.getWindowScrollTop();
+    if (top > viewport.height) {
+      submenuRef.current.style.top = viewport.height - top + 'px';
+    } else {
+      submenuRef.current.style.top = '0px';
+    }
     if (parseInt(containerOffset.left, 10) + itemOuterWidth + sublistWidth > viewport.width - utils.DomHandler.calculateScrollbarWidth()) {
       submenuRef.current.style.left = -1 * sublistWidth + 'px';
     } else {
       submenuRef.current.style.left = itemOuterWidth + 'px';
     }
   };
-
   var onEnter = function onEnter() {
     position();
   };
-
   hooks.useUpdateEffect(function () {
     active && position();
   });
-
   var createSeparator = function createSeparator(index) {
     return /*#__PURE__*/React__namespace.createElement("li", {
       key: 'separator_' + index,
@@ -185,7 +173,6 @@ var ContextMenuSub = /*#__PURE__*/React__namespace.memo(function (props) {
       role: "separator"
     });
   };
-
   var createSubmenu = function createSubmenu(item) {
     if (item.items) {
       return /*#__PURE__*/React__namespace.createElement(ContextMenuSub, {
@@ -195,15 +182,12 @@ var ContextMenuSub = /*#__PURE__*/React__namespace.memo(function (props) {
         onLeafClick: props.onLeafClick
       });
     }
-
     return null;
   };
-
   var createMenuItem = function createMenuItem(item, index) {
     if (item.visible === false) {
       return null;
     }
-
     var active = activeItemState === item;
     var key = item.label + '_' + index;
     var className = utils.classNames('p-menuitem', {
@@ -237,7 +221,6 @@ var ContextMenuSub = /*#__PURE__*/React__namespace.memo(function (props) {
       "aria-haspopup": item.items != null,
       "aria-disabled": item.disabled
     }, icon, label, submenuIcon, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null));
-
     if (item.template) {
       var defaultContentOptions = {
         onClick: function onClick(event) {
@@ -253,7 +236,6 @@ var ContextMenuSub = /*#__PURE__*/React__namespace.memo(function (props) {
       };
       content = utils.ObjectUtils.getJSXElement(item.template, item, defaultContentOptions);
     }
-
     return /*#__PURE__*/React__namespace.createElement("li", {
       key: key,
       role: "none",
@@ -265,15 +247,12 @@ var ContextMenuSub = /*#__PURE__*/React__namespace.memo(function (props) {
       }
     }, content, submenu);
   };
-
   var createItem = function createItem(item, index) {
     return item.separator ? createSeparator(index) : createMenuItem(item, index);
   };
-
   var createMenu = function createMenu() {
     return props.model ? props.model.map(createItem) : null;
   };
-
   var className = utils.classNames({
     'p-submenu-list': !props.root
   });
@@ -297,69 +276,59 @@ ContextMenuSub.displayName = 'ContextMenuSub';
 
 var ContextMenu = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.forwardRef(function (props, ref) {
   var _React$useState = React__namespace.useState(false),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      visibleState = _React$useState2[0],
-      setVisibleState = _React$useState2[1];
-
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    visibleState = _React$useState2[0],
+    setVisibleState = _React$useState2[1];
   var _React$useState3 = React__namespace.useState(false),
-      _React$useState4 = _slicedToArray(_React$useState3, 2),
-      reshowState = _React$useState4[0],
-      setReshowState = _React$useState4[1];
-
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    reshowState = _React$useState4[0],
+    setReshowState = _React$useState4[1];
   var _React$useState5 = React__namespace.useState(false),
-      _React$useState6 = _slicedToArray(_React$useState5, 2),
-      resetMenuState = _React$useState6[0],
-      setResetMenuState = _React$useState6[1];
-
+    _React$useState6 = _slicedToArray(_React$useState5, 2),
+    resetMenuState = _React$useState6[0],
+    setResetMenuState = _React$useState6[1];
   var menuRef = React__namespace.useRef(null);
   var currentEvent = React__namespace.useRef(null);
-
   var _useEventListener = hooks.useEventListener({
-    type: 'click',
-    listener: function listener(event) {
-      if (isOutsideClicked(event) && event.button !== 2) {
-        hide(event);
-        setResetMenuState(true);
+      type: 'click',
+      listener: function listener(event) {
+        if (isOutsideClicked(event) && event.button !== 2) {
+          hide(event);
+          setResetMenuState(true);
+        }
       }
-    }
-  }),
-      _useEventListener2 = _slicedToArray(_useEventListener, 2),
-      bindDocumentClickListener = _useEventListener2[0],
-      unbindDocumentClickListener = _useEventListener2[1];
-
+    }),
+    _useEventListener2 = _slicedToArray(_useEventListener, 2),
+    bindDocumentClickListener = _useEventListener2[0],
+    unbindDocumentClickListener = _useEventListener2[1];
   var _useEventListener3 = hooks.useEventListener({
-    type: 'contextmenu',
-    listener: function listener(event) {
-      show(event);
-    }
-  }),
-      _useEventListener4 = _slicedToArray(_useEventListener3, 1),
-      bindDocumentContextMenuListener = _useEventListener4[0];
-
+      type: 'contextmenu',
+      listener: function listener(event) {
+        show(event);
+      }
+    }),
+    _useEventListener4 = _slicedToArray(_useEventListener3, 1),
+    bindDocumentContextMenuListener = _useEventListener4[0];
   var _useResizeListener = hooks.useResizeListener({
-    listener: function listener(event) {
-      if (visibleState && !utils.DomHandler.isTouchDevice()) {
-        hide(event);
+      listener: function listener(event) {
+        if (visibleState && !utils.DomHandler.isTouchDevice()) {
+          hide(event);
+        }
       }
-    }
-  }),
-      _useResizeListener2 = _slicedToArray(_useResizeListener, 2),
-      bindDocumentResizeListener = _useResizeListener2[0],
-      unbindDocumentResizeListener = _useResizeListener2[1];
-
+    }),
+    _useResizeListener2 = _slicedToArray(_useResizeListener, 2),
+    bindDocumentResizeListener = _useResizeListener2[0],
+    unbindDocumentResizeListener = _useResizeListener2[1];
   var onMenuClick = function onMenuClick() {
     setResetMenuState(false);
   };
-
   var onMenuMouseEnter = function onMenuMouseEnter() {
     setResetMenuState(false);
   };
-
   var show = function show(event) {
     event.stopPropagation();
     event.preventDefault();
     currentEvent.current = event;
-
     if (visibleState) {
       setReshowState(true);
     } else {
@@ -367,87 +336,75 @@ var ContextMenu = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namesp
       props.onShow && props.onShow(currentEvent.current);
     }
   };
-
   var hide = function hide(event) {
     currentEvent.current = event;
     setVisibleState(false);
     setReshowState(false);
     props.onHide && props.onHide(currentEvent.current);
   };
-
   var onEnter = function onEnter() {
     if (props.autoZIndex) {
       utils.ZIndexUtils.set('menu', menuRef.current, PrimeReact__default["default"].autoZIndex, props.baseZIndex || PrimeReact__default["default"].zIndex['menu']);
     }
-
     position(currentEvent.current);
   };
-
   var onEntered = function onEntered() {
     bindDocumentListeners();
   };
-
   var onExit = function onExit() {
     unbindDocumentListeners();
     utils.ZIndexUtils.clear(menuRef.current);
   };
-
   var onExited = function onExited() {
     utils.ZIndexUtils.clear(menuRef.current);
   };
-
   var position = function position(event) {
     if (event) {
       var left = event.pageX + 1;
       var top = event.pageY + 1;
       var width = menuRef.current.offsetParent ? menuRef.current.offsetWidth : utils.DomHandler.getHiddenElementOuterWidth(menuRef.current);
       var height = menuRef.current.offsetParent ? menuRef.current.offsetHeight : utils.DomHandler.getHiddenElementOuterHeight(menuRef.current);
-      var viewport = utils.DomHandler.getViewport(); //flip
+      var viewport = utils.DomHandler.getViewport();
 
+      //flip
       if (left + width - document.body.scrollLeft > viewport.width) {
         left -= width;
-      } //flip
-
+      }
 
+      //flip
       if (top + height - document.body.scrollTop > viewport.height) {
         top -= height;
-      } //fit
-
+      }
 
+      //fit
       if (left < document.body.scrollLeft) {
         left = document.body.scrollLeft;
-      } //fit
-
+      }
 
+      //fit
       if (top < document.body.scrollTop) {
         top = document.body.scrollTop;
       }
-
       menuRef.current.style.left = left + 'px';
       menuRef.current.style.top = top + 'px';
     }
   };
-
   var onLeafClick = function onLeafClick(event) {
     setResetMenuState(true);
     hide(event);
     event.stopPropagation();
   };
-
   var isOutsideClicked = function isOutsideClicked(event) {
     return menuRef && menuRef.current && !(menuRef.current.isSameNode(event.target) || menuRef.current.contains(event.target));
   };
-
   var bindDocumentListeners = function bindDocumentListeners() {
     bindDocumentResizeListener();
     bindDocumentClickListener();
   };
-
   var unbindDocumentListeners = function unbindDocumentListeners() {
     unbindDocumentResizeListener();
     unbindDocumentClickListener();
   };
-
   hooks.useMountEffect(function () {
     if (props.global) {
       bindDocumentContextMenuListener();
@@ -475,10 +432,12 @@ var ContextMenu = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namesp
       }
     };
   });
-
   var createContextMenu = function createContextMenu() {
     var otherProps = utils.ObjectUtils.findDiffKeys(props, ContextMenu.defaultProps);
-    var className = utils.classNames('p-contextmenu p-component', props.className);
+    var className = utils.classNames('p-contextmenu p-component', props.className, {
+      'p-input-filled': PrimeReact__default["default"].inputStyle === 'filled',
+      'p-ripple-disabled': PrimeReact__default["default"].ripple === false
+    });
     return /*#__PURE__*/React__namespace.createElement(csstransition.CSSTransition, {
       nodeRef: menuRef,
       classNames: "p-contextmenu",
@@ -509,7 +468,6 @@ var ContextMenu = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namesp
       onLeafClick: onLeafClick
     })));
   };
-
   var element = createContextMenu();
   return /*#__PURE__*/React__namespace.createElement(portal.Portal, {
     element: element,

package/contextmenu/contextmenu.cjs.min.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("primereact/api"),n=require("primereact/csstransition"),r=require("primereact/hooks"),o=require("primereact/portal"),u=require("primereact/utils"),l=require("primereact/ripple");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function i(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(n){if("default"!==n){var r=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,r.get?r:{enumerable:!0,get:function(){return e[n]}})}})),t.default=e,Object.freeze(t)}var c=i(e),s=a(t);function m(){return m=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},m.apply(this,arguments)}function f(e){if(Array.isArray(e))return e}function p(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,o,u=[],l=!0,a=!1;try{for(n=n.call(e);!(l=(r=n.next()).done)&&(u.push(r.value),!t||u.length!==t);l=!0);}catch(e){a=!0,o=e}finally{try{l||null==n.return||n.return()}finally{if(a)throw o}}return u}}function d(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}function b(e,t){if(e){if("string"==typeof e)return d(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?d(e,t):void 0}}function y(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function v(e,t){return f(e)||p(e,t)||b(e,t)||y()}var E=c.memo((function(e){var t=v(c.useState(null),2),o=t[0],a=t[1],i=c.useRef(null),s=e.root||!e.resetMenu;!0===e.resetMenu&&null!==o&&a(null);var m=function(e,t){t.disabled?e.preventDefault():a(t)},f=function(t,n){n.disabled?t.preventDefault():(n.url||t.preventDefault(),n.command&&n.command({originalEvent:t,item:n}),n.items||e.onLeafClick(t))},p=function(){var e=i.current.parentElement,t=u.DomHandler.getOffset(i.current.parentElement),n=u.DomHandler.getViewport(),r=i.current.offsetParent?i.current.offsetWidth:u.DomHandler.getHiddenElementOuterWidth(i.current),o=u.DomHandler.getOuterWidth(e.children[0]);i.current.style.top="0px",i.current.style.left=parseInt(t.left,10)+o+r>n.width-u.DomHandler.calculateScrollbarWidth()?-1*r+"px":o+"px"};r.useUpdateEffect((function(){s&&p()}));var d=function(e){return c.createElement("li",{key:"separator_"+e,className:"p-menu-separator",role:"separator"})},b=function(t){return t.items?c.createElement(E,{menuProps:e.menuProps,model:t.items,resetMenu:t!==o,onLeafClick:e.onLeafClick}):null},y=function(t,n){if(!1===t.visible)return null;var r=o===t,a=t.label+"_"+n,i=u.classNames("p-menuitem",{"p-menuitem-active":r},t.className),s=u.classNames("p-menuitem-link",{"p-disabled":t.disabled}),p=u.classNames("p-menuitem-icon",t.icon),d="p-submenu-icon pi pi-angle-right",y=u.IconUtils.getJSXIcon(t.icon,{className:"p-menuitem-icon"},{props:e.menuProps}),v=t.label&&c.createElement("span",{className:"p-menuitem-text"},t.label),E=t.items&&c.createElement("span",{className:d}),g=b(t),h=c.createElement("a",{href:t.url||"#",className:s,target:t.target,onClick:function(e){return f(e,t)},role:"menuitem","aria-haspopup":null!=t.items,"aria-disabled":t.disabled},y,v,E,c.createElement(l.Ripple,null));t.template&&(h=u.ObjectUtils.getJSXElement(t.template,t,{onClick:function(e){return f(e,t)},className:s,labelClassName:"p-menuitem-text",iconClassName:p,submenuIconClassName:d,element:h,props:e,active:r}));return c.createElement("li",{key:a,role:"none",id:t.id,className:i,style:t.style,onMouseEnter:function(e){return m(e,t)}},h,g)},g=function(e,t){return e.separator?d(t):y(e,t)},h=u.classNames({"p-submenu-list":!e.root}),x=e.model?e.model.map(g):null;return c.createElement(n.CSSTransition,{nodeRef:i,classNames:"p-contextmenusub",in:s,timeout:{enter:0,exit:0},unmountOnExit:!0,onEnter:function(){p()}},c.createElement("ul",{ref:i,className:h},x))}));E.displayName="ContextMenuSub";var g=c.memo(c.forwardRef((function(e,t){var l=v(c.useState(!1),2),a=l[0],i=l[1],f=v(c.useState(!1),2),p=f[0],d=f[1],b=v(c.useState(!1),2),y=b[0],h=b[1],x=c.useRef(null),N=c.useRef(null),O=v(r.useEventListener({type:"click",listener:function(e){q(e)&&2!==e.button&&(k(e),h(!0))}}),2),S=O[0],H=O[1],I=v(r.useEventListener({type:"contextmenu",listener:function(e){M(e)}}),1)[0],C=v(r.useResizeListener({listener:function(e){a&&!u.DomHandler.isTouchDevice()&&k(e)}}),2),P=C[0],D=C[1],j=function(){h(!1)},w=function(){h(!1)},M=function(t){t.stopPropagation(),t.preventDefault(),N.current=t,a?d(!0):(i(!0),e.onShow&&e.onShow(N.current))},k=function(t){N.current=t,i(!1),d(!1),e.onHide&&e.onHide(N.current)},T=function(){e.autoZIndex&&u.ZIndexUtils.set("menu",x.current,s.default.autoZIndex,e.baseZIndex||s.default.zIndex.menu),R(N.current)},U=function(){A()},L=function(){W(),u.ZIndexUtils.clear(x.current)},Z=function(){u.ZIndexUtils.clear(x.current)},R=function(e){if(e){var t=e.pageX+1,n=e.pageY+1,r=x.current.offsetParent?x.current.offsetWidth:u.DomHandler.getHiddenElementOuterWidth(x.current),o=x.current.offsetParent?x.current.offsetHeight:u.DomHandler.getHiddenElementOuterHeight(x.current),l=u.DomHandler.getViewport();t+r-document.body.scrollLeft>l.width&&(t-=r),n+o-document.body.scrollTop>l.height&&(n-=o),t<document.body.scrollLeft&&(t=document.body.scrollLeft),n<document.body.scrollTop&&(n=document.body.scrollTop),x.current.style.left=t+"px",x.current.style.top=n+"px"}},_=function(e){h(!0),k(e),e.stopPropagation()},q=function(e){return x&&x.current&&!(x.current.isSameNode(e.target)||x.current.contains(e.target))},A=function(){P(),S()},W=function(){D(),H()};r.useMountEffect((function(){e.global&&I()})),r.useUpdateEffect((function(){a?(i(!1),d(!1),h(!0)):p||a||!y||M(N.current)}),[p]),r.useUnmountEffect((function(){u.ZIndexUtils.clear(x.current)})),c.useImperativeHandle(t,(function(){return{props:e,show:M,hide:k,getElement:function(){return x.current}}}));var z,X,J=(z=u.ObjectUtils.findDiffKeys(e,g.defaultProps),X=u.classNames("p-contextmenu p-component",e.className),c.createElement(n.CSSTransition,{nodeRef:x,classNames:"p-contextmenu",in:a,timeout:{enter:250,exit:0},options:e.transitionOptions,unmountOnExit:!0,onEnter:T,onEntered:U,onExit:L,onExited:Z},c.createElement("div",m({ref:x,id:e.id,className:X,style:e.style},z,{onClick:j,onMouseEnter:w}),c.createElement(E,{menuProps:e,model:e.model,root:!0,resetMenu:y,onLeafClick:_}))));return c.createElement(o.Portal,{element:J,appendTo:e.appendTo})})));g.displayName="ContextMenu",g.defaultProps={__TYPE:"ContextMenu",id:null,model:null,style:null,className:null,global:!1,autoZIndex:!0,baseZIndex:0,appendTo:null,transitionOptions:null,onShow:null,onHide:null},exports.ContextMenu=g;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("primereact/api"),n=require("primereact/csstransition"),r=require("primereact/hooks"),o=require("primereact/portal"),l=require("primereact/utils"),u=require("primereact/ripple");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function i(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(n){if("default"!==n){var r=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,r.get?r:{enumerable:!0,get:function(){return e[n]}})}})),t.default=e,Object.freeze(t)}var c=i(e),s=a(t);function m(){return m=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},m.apply(this,arguments)}function f(e){if(Array.isArray(e))return e}function p(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,o,l,u,a=[],i=!0,c=!1;try{if(l=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;i=!1}else for(;!(i=(r=l.call(n)).done)&&(a.push(r.value),a.length!==t);i=!0);}catch(e){c=!0,o=e}finally{try{if(!i&&null!=n.return&&(u=n.return(),Object(u)!==u))return}finally{if(c)throw o}}return a}}function d(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}function b(e,t){if(e){if("string"==typeof e)return d(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?d(e,t):void 0}}function y(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function g(e,t){return f(e)||p(e,t)||b(e,t)||y()}var h=c.memo((function(e){var t=g(c.useState(null),2),o=t[0],a=t[1],i=c.useRef(null),s=e.root||!e.resetMenu;!0===e.resetMenu&&null!==o&&a(null);var m=function(e,t){t.disabled?e.preventDefault():a(t)},f=function(t,n){n.disabled?t.preventDefault():(n.url||t.preventDefault(),n.command&&n.command({originalEvent:t,item:n}),n.items||e.onLeafClick(t))},p=function(){var e=i.current.parentElement,t=l.DomHandler.getOffset(e),n=l.DomHandler.getViewport(),r=i.current.offsetParent?i.current.offsetWidth:l.DomHandler.getHiddenElementOuterWidth(i.current),o=l.DomHandler.getOuterWidth(e.children[0]),u=parseInt(t.top,10)+i.current.offsetHeight-l.DomHandler.getWindowScrollTop();i.current.style.top=u>n.height?n.height-u+"px":"0px",i.current.style.left=parseInt(t.left,10)+o+r>n.width-l.DomHandler.calculateScrollbarWidth()?-1*r+"px":o+"px"};r.useUpdateEffect((function(){s&&p()}));var d=function(e){return c.createElement("li",{key:"separator_"+e,className:"p-menu-separator",role:"separator"})},b=function(t){return t.items?c.createElement(h,{menuProps:e.menuProps,model:t.items,resetMenu:t!==o,onLeafClick:e.onLeafClick}):null},y=function(t,n){if(!1===t.visible)return null;var r=o===t,a=t.label+"_"+n,i=l.classNames("p-menuitem",{"p-menuitem-active":r},t.className),s=l.classNames("p-menuitem-link",{"p-disabled":t.disabled}),p=l.classNames("p-menuitem-icon",t.icon),d="p-submenu-icon pi pi-angle-right",y=l.IconUtils.getJSXIcon(t.icon,{className:"p-menuitem-icon"},{props:e.menuProps}),g=t.label&&c.createElement("span",{className:"p-menuitem-text"},t.label),h=t.items&&c.createElement("span",{className:d}),v=b(t),E=c.createElement("a",{href:t.url||"#",className:s,target:t.target,onClick:function(e){return f(e,t)},role:"menuitem","aria-haspopup":null!=t.items,"aria-disabled":t.disabled},y,g,h,c.createElement(u.Ripple,null));t.template&&(E=l.ObjectUtils.getJSXElement(t.template,t,{onClick:function(e){return f(e,t)},className:s,labelClassName:"p-menuitem-text",iconClassName:p,submenuIconClassName:d,element:E,props:e,active:r}));return c.createElement("li",{key:a,role:"none",id:t.id,className:i,style:t.style,onMouseEnter:function(e){return m(e,t)}},E,v)},v=function(e,t){return e.separator?d(t):y(e,t)},E=l.classNames({"p-submenu-list":!e.root}),x=e.model?e.model.map(v):null;return c.createElement(n.CSSTransition,{nodeRef:i,classNames:"p-contextmenusub",in:s,timeout:{enter:0,exit:0},unmountOnExit:!0,onEnter:function(){p()}},c.createElement("ul",{ref:i,className:E},x))}));h.displayName="ContextMenuSub";var v=c.memo(c.forwardRef((function(e,t){var u=g(c.useState(!1),2),a=u[0],i=u[1],f=g(c.useState(!1),2),p=f[0],d=f[1],b=g(c.useState(!1),2),y=b[0],E=b[1],x=c.useRef(null),O=c.useRef(null),N=g(r.useEventListener({type:"click",listener:function(e){q(e)&&2!==e.button&&(k(e),E(!0))}}),2),S=N[0],H=N[1],I=g(r.useEventListener({type:"contextmenu",listener:function(e){M(e)}}),1)[0],j=g(r.useResizeListener({listener:function(e){a&&!l.DomHandler.isTouchDevice()&&k(e)}}),2),C=j[0],D=j[1],P=function(){E(!1)},w=function(){E(!1)},M=function(t){t.stopPropagation(),t.preventDefault(),O.current=t,a?d(!0):(i(!0),e.onShow&&e.onShow(O.current))},k=function(t){O.current=t,i(!1),d(!1),e.onHide&&e.onHide(O.current)},T=function(){e.autoZIndex&&l.ZIndexUtils.set("menu",x.current,s.default.autoZIndex,e.baseZIndex||s.default.zIndex.menu),R(O.current)},U=function(){W()},L=function(){A(),l.ZIndexUtils.clear(x.current)},Z=function(){l.ZIndexUtils.clear(x.current)},R=function(e){if(e){var t=e.pageX+1,n=e.pageY+1,r=x.current.offsetParent?x.current.offsetWidth:l.DomHandler.getHiddenElementOuterWidth(x.current),o=x.current.offsetParent?x.current.offsetHeight:l.DomHandler.getHiddenElementOuterHeight(x.current),u=l.DomHandler.getViewport();t+r-document.body.scrollLeft>u.width&&(t-=r),n+o-document.body.scrollTop>u.height&&(n-=o),t<document.body.scrollLeft&&(t=document.body.scrollLeft),n<document.body.scrollTop&&(n=document.body.scrollTop),x.current.style.left=t+"px",x.current.style.top=n+"px"}},_=function(e){E(!0),k(e),e.stopPropagation()},q=function(e){return x&&x.current&&!(x.current.isSameNode(e.target)||x.current.contains(e.target))},W=function(){C(),S()},A=function(){D(),H()};r.useMountEffect((function(){e.global&&I()})),r.useUpdateEffect((function(){a?(i(!1),d(!1),E(!0)):p||a||!y||M(O.current)}),[p]),r.useUnmountEffect((function(){l.ZIndexUtils.clear(x.current)})),c.useImperativeHandle(t,(function(){return{props:e,show:M,hide:k,getElement:function(){return x.current}}}));var z,X,J=(z=l.ObjectUtils.findDiffKeys(e,v.defaultProps),X=l.classNames("p-contextmenu p-component",e.className,{"p-input-filled":"filled"===s.default.inputStyle,"p-ripple-disabled":!1===s.default.ripple}),c.createElement(n.CSSTransition,{nodeRef:x,classNames:"p-contextmenu",in:a,timeout:{enter:250,exit:0},options:e.transitionOptions,unmountOnExit:!0,onEnter:T,onEntered:U,onExit:L,onExited:Z},c.createElement("div",m({ref:x,id:e.id,className:X,style:e.style},z,{onClick:P,onMouseEnter:w}),c.createElement(h,{menuProps:e,model:e.model,root:!0,resetMenu:y,onLeafClick:_}))));return c.createElement(o.Portal,{element:J,appendTo:e.appendTo})})));v.displayName="ContextMenu",v.defaultProps={__TYPE:"ContextMenu",id:null,model:null,style:null,className:null,global:!1,autoZIndex:!0,baseZIndex:0,appendTo:null,transitionOptions:null,onShow:null,onHide:null},exports.ContextMenu=v;

package/contextmenu/contextmenu.d.ts

@@ -1,23 +1,91 @@
+/**
+ *
+ * ContextMenu displays an overlay menu on right click of its target. Note that components like DataTable has special integration with ContextMenu. Refer to documentation of the individual documentation of the components having a special integration.
+ *
+ * [Live Demo](https://www.primefaces.org/primereact/contextmenu/)
+ *
+ * @module contextmenu
+ *
+ */
 import * as React from 'react';
 import { MenuItem } from '../menuitem';
 import { CSSTransitionProps } from '../csstransition';
 
-type ContextMenuAppendToType = 'self' | HTMLElement | undefined | null;
-
+/**
+ * Defines valid properties in ContextMenu component. In addition to these, all properties of HTMLDivElement can be used in this component.
+ * @group Properties
+ */
 export interface ContextMenuProps extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'ref'> {
-    model?: MenuItem[];
-    global?: boolean;
-    autoZIndex?: boolean;
-    baseZIndex?: number;
-    appendTo?: ContextMenuAppendToType;
-    transitionOptions?: CSSTransitionProps;
-    onShow?(e: React.SyntheticEvent): void;
-    onHide?(e: React.SyntheticEvent): void;
-    children?: React.ReactNode;
+    /**
+     * An array of menuitems.
+     */
+    model?: MenuItem[] | undefined;
+    /**
+     * Attaches the menu to document instead of a particular item.
+     * @defaultValue false
+     */
+    global?: boolean | undefined;
+    /**
+     * Whether to automatically manage layering.
+     * @defaultValue true
+     */
+    autoZIndex?: boolean | undefined;
+    /**
+     * Base zIndex value to use in layering.
+     * @defaultValue 0
+     */
+    baseZIndex?: number | undefined;
+    /**
+     * DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and 'self'. The self value is used to render a component where it is located.
+     * @defaultValue document.body
+     */
+    appendTo?: 'self' | HTMLElement | undefined | null;
+    /**
+     * The properties of CSSTransition can be customized, except for "nodeRef" and "in" properties.
+     */
+    transitionOptions?: CSSTransitionProps | undefined;
+    /**
+     * Callback to invoke when a popup menu is shown.
+     * @param {React.SyntheticEvent} event - Browser event.
+     */
+    onShow?(event: React.SyntheticEvent): void;
+    /**
+     * Callback to invoke when a popup menu is hidden.
+     * @param {React.SyntheticEvent} event - Browser event.
+     */
+    onHide?(event: React.SyntheticEvent): void;
+    /**
+     * Used to get the child elements of the component.
+     * @readonly
+     */
+    children?: React.ReactNode | undefined;
 }
 
+/**
+ * **PrimeReact - ContextMenu**
+ *
+ * _ContextMenu displays an overlay menu on right click of its target. Note that components like DataTable has special integration with ContextMenu. Refer to documentation of the individual documentation of the components having a special integration._
+ *
+ * [Live Demo](https://www.primefaces.org/primereact/contextmenu/)
+ * --- ---
+ * ![PrimeReact](https://www.primefaces.org/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
 export declare class ContextMenu extends React.Component<ContextMenuProps, any> {
+    /**
+     * Displays the popup menu.
+     * @param {React.SyntheticEvent} event - Browser event
+     */
     public show(event: React.SyntheticEvent): void;
+    /**
+     * Hides the popup menu.
+     * @param {React.SyntheticEvent} event - Browser event
+     */
     public hide(event: React.SyntheticEvent): void;
+    /**
+     * Used to get container element.
+     * @return {HTMLDivElement} Container element
+     */
     public getElement(): HTMLDivElement;
 }