primereact 9.1.1 → 9.2.1

package/contextmenu/contextmenu.cjs.js

@@ -113,6 +113,8 @@ var ContextMenuBase = {
     global: false,
     autoZIndex: true,
     baseZIndex: 0,
+    breakpoint: undefined,
+    scrollHeight: '400px',
     appendTo: null,
     transitionOptions: null,
     onShow: null,
@@ -138,7 +140,7 @@ var ContextMenuSub = /*#__PURE__*/React__namespace.memo(function (props) {
     setActiveItemState(null);
   }
   var onItemMouseEnter = function onItemMouseEnter(event, item) {
-    if (item.disabled) {
+    if (item.disabled || props.isMobileMode) {
       event.preventDefault();
       return;
     }
@@ -158,26 +160,31 @@ var ContextMenuSub = /*#__PURE__*/React__namespace.memo(function (props) {
         item: item
       });
     }
+    if (props.isMobileMode && item.items) {
+      if (activeItemState && item === activeItemState) setActiveItemState(null);else setActiveItemState(item);
+    }
     if (!item.items) {
       props.onLeafClick(event);
     }
   };
   var position = function position() {
-    var parentItem = 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]);
-    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';
+    if (!props.isMobileMode) {
+      var parentItem = 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]);
+      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() {
@@ -199,7 +206,8 @@ var ContextMenuSub = /*#__PURE__*/React__namespace.memo(function (props) {
         menuProps: props.menuProps,
         model: item.items,
         resetMenu: item !== activeItemState,
-        onLeafClick: props.onLeafClick
+        onLeafClick: props.onLeafClick,
+        isMobileMode: props.isMobileMode
       });
     }
     return null;
@@ -308,8 +316,14 @@ var ContextMenu = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namesp
     _React$useState6 = _slicedToArray(_React$useState5, 2),
     resetMenuState = _React$useState6[0],
     setResetMenuState = _React$useState6[1];
+  var _React$useState7 = React__namespace.useState(null),
+    _React$useState8 = _slicedToArray(_React$useState7, 2),
+    attributeSelectorState = _React$useState8[0],
+    setAttributeSelectorState = _React$useState8[1];
   var menuRef = React__namespace.useRef(null);
   var currentEvent = React__namespace.useRef(null);
+  var styleElementRef = React__namespace.useRef(null);
+  var isMobileMode = hooks.useMatchMedia("screen and (max-width: ".concat(props.breakpoint, ")"), !!props.breakpoint);
   var _useEventListener = hooks.useEventListener({
       type: 'click',
       listener: function listener(event) {
@@ -340,6 +354,17 @@ var ContextMenu = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namesp
     _useResizeListener2 = _slicedToArray(_useResizeListener, 2),
     bindDocumentResizeListener = _useResizeListener2[0],
     unbindDocumentResizeListener = _useResizeListener2[1];
+  var createStyle = function createStyle() {
+    if (!styleElementRef.current) {
+      styleElementRef.current = utils.DomHandler.createInlineStyle(PrimeReact__default["default"].nonce);
+      var selector = "".concat(attributeSelectorState);
+      var innerHTML = "\n@media screen and (max-width: ".concat(props.breakpoint, ") {\n    .p-contextmenu[").concat(selector, "] > ul {\n        max-height: ").concat(props.scrollHeight, ";\n        overflow: ").concat(props.scrollHeight ? 'auto' : '', ";\n    }\n\n    .p-contextmenu[").concat(selector, "] .p-submenu-list {\n        position: relative;\n    }\n\n    .p-contextmenu[").concat(selector, "] .p-menuitem-active > .p-submenu-list {\n        left: 0 !important;\n        box-shadow: none;\n        border-radius: 0;\n        padding: 0 0 0 calc(var(--inline-spacing) * 2); /* @todo */\n    }\n\n    .p-contextmenu[").concat(selector, "] .p-menuitem-active > .p-menuitem-link > .p-submenu-icon {\n        transform: rotate(-180deg);\n    }\n\n    .p-contextmenu[").concat(selector, "] .p-submenu-icon:before {\n        content: \"\\e930\";\n    }\n}\n");
+      styleElementRef.current.innerHTML = innerHTML;
+    }
+  };
+  var destroyStyle = function destroyStyle() {
+    styleElementRef.current = utils.DomHandler.removeInlineStyle(styleElementRef.current);
+  };
   var onMenuClick = function onMenuClick() {
     setResetMenuState(false);
   };
@@ -368,6 +393,10 @@ var ContextMenu = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namesp
       utils.ZIndexUtils.set('menu', menuRef.current, PrimeReact__default["default"].autoZIndex, props.baseZIndex || PrimeReact__default["default"].zIndex['menu']);
     }
     position(currentEvent.current);
+    if (attributeSelectorState && props.breakpoint) {
+      menuRef.current.setAttribute(attributeSelectorState, '');
+      createStyle();
+    }
   };
   var onEntered = function onEntered() {
     bindDocumentListeners();
@@ -378,6 +407,7 @@ var ContextMenu = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namesp
   };
   var onExited = function onExited() {
     utils.ZIndexUtils.clear(menuRef.current);
+    destroyStyle();
   };
   var position = function position(event) {
     if (event) {
@@ -430,7 +460,19 @@ var ContextMenu = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namesp
     if (props.global) {
       bindDocumentContextMenuListener();
     }
+    if (props.breakpoint) {
+      !attributeSelectorState && setAttributeSelectorState(utils.UniqueComponentId());
+    }
   });
+  hooks.useUpdateEffect(function () {
+    if (attributeSelectorState && menuRef.current) {
+      menuRef.current.setAttribute(attributeSelectorState, '');
+      createStyle();
+    }
+    return function () {
+      destroyStyle();
+    };
+  }, [attributeSelectorState, props.breakpoint]);
   hooks.useUpdateEffect(function () {
     if (visibleState) {
       setVisibleState(false);
@@ -486,7 +528,8 @@ var ContextMenu = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namesp
       model: props.model,
       root: true,
       resetMenu: resetMenuState,
-      onLeafClick: onLeafClick
+      onLeafClick: onLeafClick,
+      isMobileMode: isMobileMode
     })));
   };
   var element = createContextMenu();

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"),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 f(){return f=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},f.apply(this,arguments)}function m(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 g(){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 y(e,t){return m(e)||p(e,t)||b(e,t)||g()}var h={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,children:void 0},getProps:function(e){return l.ObjectUtils.getMergedProps(e,h.defaultProps)},getOtherProps:function(e){return l.ObjectUtils.getDiffProps(e,h.defaultProps)}},v=c.memo((function(e){var t=y(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 f=function(e,t){t.disabled?e.preventDefault():a(t)},m=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(v,{menuProps:e.menuProps,model:t.items,resetMenu:t!==o,onLeafClick:e.onLeafClick}):null},g=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",g=l.IconUtils.getJSXIcon(t.icon,{className:"p-menuitem-icon"},{props:e.menuProps}),y=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 m(e,t)},role:"menuitem","aria-haspopup":null!=t.items,"aria-disabled":t.disabled},g,y,h,c.createElement(u.Ripple,null));t.template&&(E=l.ObjectUtils.getJSXElement(t.template,t,{onClick:function(e){return m(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 f(e,t)}},E,v)},h=function(e,t){return e.separator?d(t):g(e,t)},E=l.classNames({"p-submenu-list":!e.root}),x=e.model?e.model.map(h):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))}));v.displayName="ContextMenuSub";var E=c.memo(c.forwardRef((function(e,t){var u=h.getProps(e),a=y(c.useState(!1),2),i=a[0],m=a[1],p=y(c.useState(!1),2),d=p[0],b=p[1],g=y(c.useState(!1),2),E=g[0],x=g[1],O=c.useRef(null),N=c.useRef(null),P=y(r.useEventListener({type:"click",listener:function(e){W(e)&&2!==e.button&&(T(e),x(!0))}}),2),S=P[0],H=P[1],I=y(r.useEventListener({type:"contextmenu",listener:function(e){k(e)}}),1)[0],j=y(r.useResizeListener({listener:function(e){i&&!l.DomHandler.isTouchDevice()&&T(e)}}),2),C=j[0],D=j[1],w=function(){x(!1)},M=function(){x(!1)},k=function(e){e.stopPropagation(),e.preventDefault(),N.current=e,i?b(!0):(m(!0),u.onShow&&u.onShow(N.current))},T=function(e){N.current=e,m(!1),b(!1),u.onHide&&u.onHide(N.current)},U=function(){u.autoZIndex&&l.ZIndexUtils.set("menu",O.current,s.default.autoZIndex,u.baseZIndex||s.default.zIndex.menu),_(N.current)},L=function(){A()},Z=function(){z(),l.ZIndexUtils.clear(O.current)},R=function(){l.ZIndexUtils.clear(O.current)},_=function(e){if(e){var t=e.pageX+1,n=e.pageY+1,r=O.current.offsetParent?O.current.offsetWidth:l.DomHandler.getHiddenElementOuterWidth(O.current),o=O.current.offsetParent?O.current.offsetHeight:l.DomHandler.getHiddenElementOuterHeight(O.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),O.current.style.left=t+"px",O.current.style.top=n+"px"}},q=function(e){x(!0),T(e),e.stopPropagation()},W=function(e){return O&&O.current&&!(O.current.isSameNode(e.target)||O.current.contains(e.target))},A=function(){C(),S()},z=function(){D(),H()};r.useMountEffect((function(){u.global&&I()})),r.useUpdateEffect((function(){i?(m(!1),b(!1),x(!0)):d||i||!E||k(N.current)}),[d]),r.useUnmountEffect((function(){l.ZIndexUtils.clear(O.current)})),c.useImperativeHandle(t,(function(){return{props:u,show:k,hide:T,getElement:function(){return O.current}}}));var X,J,V=(X=h.getOtherProps(u),J=l.classNames("p-contextmenu p-component",u.className,{"p-input-filled":"filled"===s.default.inputStyle,"p-ripple-disabled":!1===s.default.ripple}),c.createElement(n.CSSTransition,{nodeRef:O,classNames:"p-contextmenu",in:i,timeout:{enter:250,exit:0},options:u.transitionOptions,unmountOnExit:!0,onEnter:U,onEntered:L,onExit:Z,onExited:R},c.createElement("div",f({ref:O,id:u.id,className:J,style:u.style},X,{onClick:w,onMouseEnter:M}),c.createElement(v,{menuProps:u,model:u.model,root:!0,resetMenu:E,onLeafClick:q}))));return c.createElement(o.Portal,{element:V,appendTo:u.appendTo})})));E.displayName="ContextMenu",exports.ContextMenu=E;
+"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"),i=require("primereact/utils"),u=require("primereact/ripple");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function a(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=a(e),s=l(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 p(e){if(Array.isArray(e))return e}function f(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,o,i,u,l=[],a=!0,c=!1;try{if(i=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;a=!1}else for(;!(a=(r=i.call(n)).done)&&(l.push(r.value),l.length!==t);a=!0);}catch(e){c=!0,o=e}finally{try{if(!a&&null!=n.return&&(u=n.return(),Object(u)!==u))return}finally{if(c)throw o}}return l}}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 g(){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 h(e,t){return p(e)||f(e,t)||b(e,t)||g()}var y={defaultProps:{__TYPE:"ContextMenu",id:null,model:null,style:null,className:null,global:!1,autoZIndex:!0,baseZIndex:0,breakpoint:void 0,scrollHeight:"400px",appendTo:null,transitionOptions:null,onShow:null,onHide:null,children:void 0},getProps:function(e){return i.ObjectUtils.getMergedProps(e,y.defaultProps)},getOtherProps:function(e){return i.ObjectUtils.getDiffProps(e,y.defaultProps)}},v=c.memo((function(e){var t=h(c.useState(null),2),o=t[0],l=t[1],a=c.useRef(null),s=e.root||!e.resetMenu;!0===e.resetMenu&&null!==o&&l(null);var m=function(t,n){n.disabled||e.isMobileMode?t.preventDefault():l(n)},p=function(t,n){n.disabled?t.preventDefault():(n.url||t.preventDefault(),n.command&&n.command({originalEvent:t,item:n}),e.isMobileMode&&n.items&&l(o&&n===o?null:n),n.items||e.onLeafClick(t))},f=function(){if(!e.isMobileMode){var t=a.current.parentElement,n=i.DomHandler.getOffset(t),r=i.DomHandler.getViewport(),o=a.current.offsetParent?a.current.offsetWidth:i.DomHandler.getHiddenElementOuterWidth(a.current),u=i.DomHandler.getOuterWidth(t.children[0]),l=parseInt(n.top,10)+a.current.offsetHeight-i.DomHandler.getWindowScrollTop();a.current.style.top=l>r.height?r.height-l+"px":"0px",a.current.style.left=parseInt(n.left,10)+u+o>r.width-i.DomHandler.calculateScrollbarWidth()?-1*o+"px":u+"px"}};r.useUpdateEffect((function(){s&&f()}));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(v,{menuProps:e.menuProps,model:t.items,resetMenu:t!==o,onLeafClick:e.onLeafClick,isMobileMode:e.isMobileMode}):null},g=function(t,n){if(!1===t.visible)return null;var r=o===t,l=t.label+"_"+n,a=i.classNames("p-menuitem",{"p-menuitem-active":r},t.className),s=i.classNames("p-menuitem-link",{"p-disabled":t.disabled}),f=i.classNames("p-menuitem-icon",t.icon),d="p-submenu-icon pi pi-angle-right",g=i.IconUtils.getJSXIcon(t.icon,{className:"p-menuitem-icon"},{props:e.menuProps}),h=t.label&&c.createElement("span",{className:"p-menuitem-text"},t.label),y=t.items&&c.createElement("span",{className:d}),v=b(t),x=c.createElement("a",{href:t.url||"#",className:s,target:t.target,onClick:function(e){return p(e,t)},role:"menuitem","aria-haspopup":null!=t.items,"aria-disabled":t.disabled},g,h,y,c.createElement(u.Ripple,null));t.template&&(x=i.ObjectUtils.getJSXElement(t.template,t,{onClick:function(e){return p(e,t)},className:s,labelClassName:"p-menuitem-text",iconClassName:f,submenuIconClassName:d,element:x,props:e,active:r}));return c.createElement("li",{key:l,role:"none",id:t.id,className:a,style:t.style,onMouseEnter:function(e){return m(e,t)}},x,v)},y=function(e,t){return e.separator?d(t):g(e,t)},x=i.classNames({"p-submenu-list":!e.root}),E=e.model?e.model.map(y):null;return c.createElement(n.CSSTransition,{nodeRef:a,classNames:"p-contextmenusub",in:s,timeout:{enter:0,exit:0},unmountOnExit:!0,onEnter:function(){f()}},c.createElement("ul",{ref:a,className:x},E))}));v.displayName="ContextMenuSub";var x=c.memo(c.forwardRef((function(e,t){var u=y.getProps(e),l=h(c.useState(!1),2),a=l[0],p=l[1],f=h(c.useState(!1),2),d=f[0],b=f[1],g=h(c.useState(!1),2),x=g[0],E=g[1],M=h(c.useState(null),2),O=M[0],H=M[1],S=c.useRef(null),N=c.useRef(null),P=c.useRef(null),I=r.useMatchMedia("screen and (max-width: ".concat(u.breakpoint,")"),!!u.breakpoint),k=h(r.useEventListener({type:"click",listener:function(e){$(e)&&2!==e.button&&(_(e),E(!0))}}),2),w=k[0],D=k[1],j=h(r.useEventListener({type:"contextmenu",listener:function(e){A(e)}}),1)[0],C=h(r.useResizeListener({listener:function(e){a&&!i.DomHandler.isTouchDevice()&&_(e)}}),2),U=C[0],T=C[1],L=function(){if(!P.current){P.current=i.DomHandler.createInlineStyle(s.default.nonce);var e="".concat(O),t="\n@media screen and (max-width: ".concat(u.breakpoint,") {\n    .p-contextmenu[").concat(e,"] > ul {\n        max-height: ").concat(u.scrollHeight,";\n        overflow: ").concat(u.scrollHeight?"auto":"",";\n    }\n\n    .p-contextmenu[").concat(e,"] .p-submenu-list {\n        position: relative;\n    }\n\n    .p-contextmenu[").concat(e,"] .p-menuitem-active > .p-submenu-list {\n        left: 0 !important;\n        box-shadow: none;\n        border-radius: 0;\n        padding: 0 0 0 calc(var(--inline-spacing) * 2); /* @todo */\n    }\n\n    .p-contextmenu[").concat(e,"] .p-menuitem-active > .p-menuitem-link > .p-submenu-icon {\n        transform: rotate(-180deg);\n    }\n\n    .p-contextmenu[").concat(e,'] .p-submenu-icon:before {\n        content: "\\e930";\n    }\n}\n');P.current.innerHTML=t}},R=function(){P.current=i.DomHandler.removeInlineStyle(P.current)},Z=function(){E(!1)},q=function(){E(!1)},A=function(e){e.stopPropagation(),e.preventDefault(),N.current=e,a?b(!0):(p(!0),u.onShow&&u.onShow(N.current))},_=function(e){N.current=e,p(!1),b(!1),u.onHide&&u.onHide(N.current)},W=function(){u.autoZIndex&&i.ZIndexUtils.set("menu",S.current,s.default.autoZIndex,u.baseZIndex||s.default.zIndex.menu),V(N.current),O&&u.breakpoint&&(S.current.setAttribute(O,""),L())},z=function(){B()},X=function(){F(),i.ZIndexUtils.clear(S.current)},J=function(){i.ZIndexUtils.clear(S.current),R()},V=function(e){if(e){var t=e.pageX+1,n=e.pageY+1,r=S.current.offsetParent?S.current.offsetWidth:i.DomHandler.getHiddenElementOuterWidth(S.current),o=S.current.offsetParent?S.current.offsetHeight:i.DomHandler.getHiddenElementOuterHeight(S.current),u=i.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),S.current.style.left=t+"px",S.current.style.top=n+"px"}},Y=function(e){E(!0),_(e),e.stopPropagation()},$=function(e){return S&&S.current&&!(S.current.isSameNode(e.target)||S.current.contains(e.target))},B=function(){U(),w()},F=function(){T(),D()};r.useMountEffect((function(){u.global&&j(),u.breakpoint&&!O&&H(i.UniqueComponentId())})),r.useUpdateEffect((function(){return O&&S.current&&(S.current.setAttribute(O,""),L()),function(){R()}}),[O,u.breakpoint]),r.useUpdateEffect((function(){a?(p(!1),b(!1),E(!0)):d||a||!x||A(N.current)}),[d]),r.useUnmountEffect((function(){i.ZIndexUtils.clear(S.current)})),c.useImperativeHandle(t,(function(){return{props:u,show:A,hide:_,getElement:function(){return S.current}}}));var G,K,Q=(G=y.getOtherProps(u),K=i.classNames("p-contextmenu p-component",u.className,{"p-input-filled":"filled"===s.default.inputStyle,"p-ripple-disabled":!1===s.default.ripple}),c.createElement(n.CSSTransition,{nodeRef:S,classNames:"p-contextmenu",in:a,timeout:{enter:250,exit:0},options:u.transitionOptions,unmountOnExit:!0,onEnter:W,onEntered:z,onExit:X,onExited:J},c.createElement("div",m({ref:S,id:u.id,className:K,style:u.style},G,{onClick:Z,onMouseEnter:q}),c.createElement(v,{menuProps:u,model:u.model,root:!0,resetMenu:x,onLeafClick:Y,isMobileMode:I}))));return c.createElement(o.Portal,{element:Q,appendTo:u.appendTo})})));x.displayName="ContextMenu",exports.ContextMenu=x;

package/contextmenu/contextmenu.d.ts

@@ -35,6 +35,15 @@ export interface ContextMenuProps extends Omit<React.DetailedHTMLProps<React.HTM
      * @defaultValue 0
      */
     baseZIndex?: number | undefined;
+    /**
+     * The breakpoint to define the maximum width boundary when responsiveness is enabled.
+     */
+    breakpoint?: string | undefined;
+    /**
+     * Maximum height of the options panel on responsive mode.
+     * @defaultValue 400px
+     */
+    scrollHeight?: string | 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

package/contextmenu/contextmenu.esm.js

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import PrimeReact from 'primereact/api';
 import { CSSTransition } from 'primereact/csstransition';
-import { useUpdateEffect, useEventListener, useResizeListener, useMountEffect, useUnmountEffect } from 'primereact/hooks';
+import { useUpdateEffect, useMatchMedia, useEventListener, useResizeListener, useMountEffect, useUnmountEffect } from 'primereact/hooks';
 import { Portal } from 'primereact/portal';
-import { ObjectUtils, classNames, DomHandler, IconUtils, ZIndexUtils } from 'primereact/utils';
+import { ObjectUtils, classNames, DomHandler, IconUtils, UniqueComponentId, ZIndexUtils } from 'primereact/utils';
 import { Ripple } from 'primereact/ripple';
 
 function _extends() {
@@ -86,6 +86,8 @@ var ContextMenuBase = {
     global: false,
     autoZIndex: true,
     baseZIndex: 0,
+    breakpoint: undefined,
+    scrollHeight: '400px',
     appendTo: null,
     transitionOptions: null,
     onShow: null,
@@ -111,7 +113,7 @@ var ContextMenuSub = /*#__PURE__*/React.memo(function (props) {
     setActiveItemState(null);
   }
   var onItemMouseEnter = function onItemMouseEnter(event, item) {
-    if (item.disabled) {
+    if (item.disabled || props.isMobileMode) {
       event.preventDefault();
       return;
     }
@@ -131,26 +133,31 @@ var ContextMenuSub = /*#__PURE__*/React.memo(function (props) {
         item: item
       });
     }
+    if (props.isMobileMode && item.items) {
+      if (activeItemState && item === activeItemState) setActiveItemState(null);else setActiveItemState(item);
+    }
     if (!item.items) {
       props.onLeafClick(event);
     }
   };
   var position = function position() {
-    var parentItem = submenuRef.current.parentElement;
-    var containerOffset = DomHandler.getOffset(parentItem);
-    var viewport = DomHandler.getViewport();
-    var sublistWidth = submenuRef.current.offsetParent ? submenuRef.current.offsetWidth : DomHandler.getHiddenElementOuterWidth(submenuRef.current);
-    var itemOuterWidth = DomHandler.getOuterWidth(parentItem.children[0]);
-    var top = parseInt(containerOffset.top, 10) + submenuRef.current.offsetHeight - 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 - DomHandler.calculateScrollbarWidth()) {
-      submenuRef.current.style.left = -1 * sublistWidth + 'px';
-    } else {
-      submenuRef.current.style.left = itemOuterWidth + 'px';
+    if (!props.isMobileMode) {
+      var parentItem = submenuRef.current.parentElement;
+      var containerOffset = DomHandler.getOffset(parentItem);
+      var viewport = DomHandler.getViewport();
+      var sublistWidth = submenuRef.current.offsetParent ? submenuRef.current.offsetWidth : DomHandler.getHiddenElementOuterWidth(submenuRef.current);
+      var itemOuterWidth = DomHandler.getOuterWidth(parentItem.children[0]);
+      var top = parseInt(containerOffset.top, 10) + submenuRef.current.offsetHeight - 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 - DomHandler.calculateScrollbarWidth()) {
+        submenuRef.current.style.left = -1 * sublistWidth + 'px';
+      } else {
+        submenuRef.current.style.left = itemOuterWidth + 'px';
+      }
     }
   };
   var onEnter = function onEnter() {
@@ -172,7 +179,8 @@ var ContextMenuSub = /*#__PURE__*/React.memo(function (props) {
         menuProps: props.menuProps,
         model: item.items,
         resetMenu: item !== activeItemState,
-        onLeafClick: props.onLeafClick
+        onLeafClick: props.onLeafClick,
+        isMobileMode: props.isMobileMode
       });
     }
     return null;
@@ -281,8 +289,14 @@ var ContextMenu = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
     _React$useState6 = _slicedToArray(_React$useState5, 2),
     resetMenuState = _React$useState6[0],
     setResetMenuState = _React$useState6[1];
+  var _React$useState7 = React.useState(null),
+    _React$useState8 = _slicedToArray(_React$useState7, 2),
+    attributeSelectorState = _React$useState8[0],
+    setAttributeSelectorState = _React$useState8[1];
   var menuRef = React.useRef(null);
   var currentEvent = React.useRef(null);
+  var styleElementRef = React.useRef(null);
+  var isMobileMode = useMatchMedia("screen and (max-width: ".concat(props.breakpoint, ")"), !!props.breakpoint);
   var _useEventListener = useEventListener({
       type: 'click',
       listener: function listener(event) {
@@ -313,6 +327,17 @@ var ContextMenu = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
     _useResizeListener2 = _slicedToArray(_useResizeListener, 2),
     bindDocumentResizeListener = _useResizeListener2[0],
     unbindDocumentResizeListener = _useResizeListener2[1];
+  var createStyle = function createStyle() {
+    if (!styleElementRef.current) {
+      styleElementRef.current = DomHandler.createInlineStyle(PrimeReact.nonce);
+      var selector = "".concat(attributeSelectorState);
+      var innerHTML = "\n@media screen and (max-width: ".concat(props.breakpoint, ") {\n    .p-contextmenu[").concat(selector, "] > ul {\n        max-height: ").concat(props.scrollHeight, ";\n        overflow: ").concat(props.scrollHeight ? 'auto' : '', ";\n    }\n\n    .p-contextmenu[").concat(selector, "] .p-submenu-list {\n        position: relative;\n    }\n\n    .p-contextmenu[").concat(selector, "] .p-menuitem-active > .p-submenu-list {\n        left: 0 !important;\n        box-shadow: none;\n        border-radius: 0;\n        padding: 0 0 0 calc(var(--inline-spacing) * 2); /* @todo */\n    }\n\n    .p-contextmenu[").concat(selector, "] .p-menuitem-active > .p-menuitem-link > .p-submenu-icon {\n        transform: rotate(-180deg);\n    }\n\n    .p-contextmenu[").concat(selector, "] .p-submenu-icon:before {\n        content: \"\\e930\";\n    }\n}\n");
+      styleElementRef.current.innerHTML = innerHTML;
+    }
+  };
+  var destroyStyle = function destroyStyle() {
+    styleElementRef.current = DomHandler.removeInlineStyle(styleElementRef.current);
+  };
   var onMenuClick = function onMenuClick() {
     setResetMenuState(false);
   };
@@ -341,6 +366,10 @@ var ContextMenu = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
       ZIndexUtils.set('menu', menuRef.current, PrimeReact.autoZIndex, props.baseZIndex || PrimeReact.zIndex['menu']);
     }
     position(currentEvent.current);
+    if (attributeSelectorState && props.breakpoint) {
+      menuRef.current.setAttribute(attributeSelectorState, '');
+      createStyle();
+    }
   };
   var onEntered = function onEntered() {
     bindDocumentListeners();
@@ -351,6 +380,7 @@ var ContextMenu = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
   };
   var onExited = function onExited() {
     ZIndexUtils.clear(menuRef.current);
+    destroyStyle();
   };
   var position = function position(event) {
     if (event) {
@@ -403,7 +433,19 @@ var ContextMenu = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
     if (props.global) {
       bindDocumentContextMenuListener();
     }
+    if (props.breakpoint) {
+      !attributeSelectorState && setAttributeSelectorState(UniqueComponentId());
+    }
   });
+  useUpdateEffect(function () {
+    if (attributeSelectorState && menuRef.current) {
+      menuRef.current.setAttribute(attributeSelectorState, '');
+      createStyle();
+    }
+    return function () {
+      destroyStyle();
+    };
+  }, [attributeSelectorState, props.breakpoint]);
   useUpdateEffect(function () {
     if (visibleState) {
       setVisibleState(false);
@@ -459,7 +501,8 @@ var ContextMenu = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
       model: props.model,
       root: true,
       resetMenu: resetMenuState,
-      onLeafClick: onLeafClick
+      onLeafClick: onLeafClick,
+      isMobileMode: isMobileMode
     })));
   };
   var element = createContextMenu();

package/contextmenu/contextmenu.esm.min.js

@@ -1 +1 @@
-import*as e from"react";import t from"primereact/api";import{CSSTransition as n}from"primereact/csstransition";import{useUpdateEffect as r,useEventListener as o,useResizeListener as l,useMountEffect as u,useUnmountEffect as i}from"primereact/hooks";import{Portal as a}from"primereact/portal";import{ObjectUtils as c,classNames as s,DomHandler as m,IconUtils as p,ZIndexUtils as f}from"primereact/utils";import{Ripple as d}from"primereact/ripple";function g(){return g=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},g.apply(this,arguments)}function b(e){if(Array.isArray(e))return e}function h(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,o,l,u,i=[],a=!0,c=!1;try{if(l=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;a=!1}else for(;!(a=(r=l.call(n)).done)&&(i.push(r.value),i.length!==t);a=!0);}catch(e){c=!0,o=e}finally{try{if(!a&&null!=n.return&&(u=n.return(),Object(u)!==u))return}finally{if(c)throw o}}return i}}function y(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 v(e,t){if(e){if("string"==typeof e)return y(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)?y(e,t):void 0}}function E(){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 x(e,t){return b(e)||h(e,t)||v(e,t)||E()}var N={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,children:void 0},getProps:function(e){return c.getMergedProps(e,N.defaultProps)},getOtherProps:function(e){return c.getDiffProps(e,N.defaultProps)}},P=e.memo((function(t){var o=x(e.useState(null),2),l=o[0],u=o[1],i=e.useRef(null),a=t.root||!t.resetMenu;!0===t.resetMenu&&null!==l&&u(null);var f=function(e,t){t.disabled?e.preventDefault():u(t)},g=function(e,n){n.disabled?e.preventDefault():(n.url||e.preventDefault(),n.command&&n.command({originalEvent:e,item:n}),n.items||t.onLeafClick(e))},b=function(){var e=i.current.parentElement,t=m.getOffset(e),n=m.getViewport(),r=i.current.offsetParent?i.current.offsetWidth:m.getHiddenElementOuterWidth(i.current),o=m.getOuterWidth(e.children[0]),l=parseInt(t.top,10)+i.current.offsetHeight-m.getWindowScrollTop();i.current.style.top=l>n.height?n.height-l+"px":"0px",i.current.style.left=parseInt(t.left,10)+o+r>n.width-m.calculateScrollbarWidth()?-1*r+"px":o+"px"};r((function(){a&&b()}));var h=function(t){return e.createElement("li",{key:"separator_"+t,className:"p-menu-separator",role:"separator"})},y=function(n){return n.items?e.createElement(P,{menuProps:t.menuProps,model:n.items,resetMenu:n!==l,onLeafClick:t.onLeafClick}):null},v=function(n,r){if(!1===n.visible)return null;var o=l===n,u=n.label+"_"+r,i=s("p-menuitem",{"p-menuitem-active":o},n.className),a=s("p-menuitem-link",{"p-disabled":n.disabled}),m=s("p-menuitem-icon",n.icon),b="p-submenu-icon pi pi-angle-right",h=p.getJSXIcon(n.icon,{className:"p-menuitem-icon"},{props:t.menuProps}),v=n.label&&e.createElement("span",{className:"p-menuitem-text"},n.label),E=n.items&&e.createElement("span",{className:b}),x=y(n),N=e.createElement("a",{href:n.url||"#",className:a,target:n.target,onClick:function(e){return g(e,n)},role:"menuitem","aria-haspopup":null!=n.items,"aria-disabled":n.disabled},h,v,E,e.createElement(d,null));n.template&&(N=c.getJSXElement(n.template,n,{onClick:function(e){return g(e,n)},className:a,labelClassName:"p-menuitem-text",iconClassName:m,submenuIconClassName:b,element:N,props:t,active:o}));return e.createElement("li",{key:u,role:"none",id:n.id,className:i,style:n.style,onMouseEnter:function(e){return f(e,n)}},N,x)},E=function(e,t){return e.separator?h(t):v(e,t)},N=s({"p-submenu-list":!t.root}),O=t.model?t.model.map(E):null;return e.createElement(n,{nodeRef:i,classNames:"p-contextmenusub",in:a,timeout:{enter:0,exit:0},unmountOnExit:!0,onEnter:function(){b()}},e.createElement("ul",{ref:i,className:N},O))}));P.displayName="ContextMenuSub";var O=e.memo(e.forwardRef((function(c,p){var d=N.getProps(c),b=x(e.useState(!1),2),h=b[0],y=b[1],v=x(e.useState(!1),2),E=v[0],O=v[1],S=x(e.useState(!1),2),w=S[0],C=S[1],I=e.useRef(null),k=e.useRef(null),M=x(o({type:"click",listener:function(e){$(e)&&2!==e.button&&(_(e),C(!0))}}),2),H=M[0],T=M[1],j=x(o({type:"contextmenu",listener:function(e){Z(e)}}),1)[0],L=x(l({listener:function(e){h&&!m.isTouchDevice()&&_(e)}}),2),W=L[0],A=L[1],D=function(){C(!1)},R=function(){C(!1)},Z=function(e){e.stopPropagation(),e.preventDefault(),k.current=e,h?O(!0):(y(!0),d.onShow&&d.onShow(k.current))},_=function(e){k.current=e,y(!1),O(!1),d.onHide&&d.onHide(k.current)},X=function(){d.autoZIndex&&f.set("menu",I.current,t.autoZIndex,d.baseZIndex||t.zIndex.menu),z(k.current)},J=function(){q()},V=function(){B(),f.clear(I.current)},Y=function(){f.clear(I.current)},z=function(e){if(e){var t=e.pageX+1,n=e.pageY+1,r=I.current.offsetParent?I.current.offsetWidth:m.getHiddenElementOuterWidth(I.current),o=I.current.offsetParent?I.current.offsetHeight:m.getHiddenElementOuterHeight(I.current),l=m.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),I.current.style.left=t+"px",I.current.style.top=n+"px"}},U=function(e){C(!0),_(e),e.stopPropagation()},$=function(e){return I&&I.current&&!(I.current.isSameNode(e.target)||I.current.contains(e.target))},q=function(){W(),H()},B=function(){A(),T()};u((function(){d.global&&j()})),r((function(){h?(y(!1),O(!1),C(!0)):E||h||!w||Z(k.current)}),[E]),i((function(){f.clear(I.current)})),e.useImperativeHandle(p,(function(){return{props:d,show:Z,hide:_,getElement:function(){return I.current}}}));var F,G,K=(F=N.getOtherProps(d),G=s("p-contextmenu p-component",d.className,{"p-input-filled":"filled"===t.inputStyle,"p-ripple-disabled":!1===t.ripple}),e.createElement(n,{nodeRef:I,classNames:"p-contextmenu",in:h,timeout:{enter:250,exit:0},options:d.transitionOptions,unmountOnExit:!0,onEnter:X,onEntered:J,onExit:V,onExited:Y},e.createElement("div",g({ref:I,id:d.id,className:G,style:d.style},F,{onClick:D,onMouseEnter:R}),e.createElement(P,{menuProps:d,model:d.model,root:!0,resetMenu:w,onLeafClick:U}))));return e.createElement(a,{element:K,appendTo:d.appendTo})})));O.displayName="ContextMenu";export{O as ContextMenu};
+import*as e from"react";import t from"primereact/api";import{CSSTransition as n}from"primereact/csstransition";import{useUpdateEffect as r,useMatchMedia as o,useEventListener as i,useResizeListener as u,useMountEffect as l,useUnmountEffect as a}from"primereact/hooks";import{Portal as c}from"primereact/portal";import{ObjectUtils as s,classNames as m,DomHandler as p,IconUtils as f,UniqueComponentId as d,ZIndexUtils as b}from"primereact/utils";import{Ripple as g}from"primereact/ripple";function h(){return h=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},h.apply(this,arguments)}function y(e){if(Array.isArray(e))return e}function v(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,o,i,u,l=[],a=!0,c=!1;try{if(i=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;a=!1}else for(;!(a=(r=i.call(n)).done)&&(l.push(r.value),l.length!==t);a=!0);}catch(e){c=!0,o=e}finally{try{if(!a&&null!=n.return&&(u=n.return(),Object(u)!==u))return}finally{if(c)throw o}}return l}}function x(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 E(e,t){if(e){if("string"==typeof e)return x(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)?x(e,t):void 0}}function M(){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 S(e,t){return y(e)||v(e,t)||E(e,t)||M()}var k={defaultProps:{__TYPE:"ContextMenu",id:null,model:null,style:null,className:null,global:!1,autoZIndex:!0,baseZIndex:0,breakpoint:void 0,scrollHeight:"400px",appendTo:null,transitionOptions:null,onShow:null,onHide:null,children:void 0},getProps:function(e){return s.getMergedProps(e,k.defaultProps)},getOtherProps:function(e){return s.getDiffProps(e,k.defaultProps)}},N=e.memo((function(t){var o=S(e.useState(null),2),i=o[0],u=o[1],l=e.useRef(null),a=t.root||!t.resetMenu;!0===t.resetMenu&&null!==i&&u(null);var c=function(e,n){n.disabled||t.isMobileMode?e.preventDefault():u(n)},d=function(e,n){n.disabled?e.preventDefault():(n.url||e.preventDefault(),n.command&&n.command({originalEvent:e,item:n}),t.isMobileMode&&n.items&&u(i&&n===i?null:n),n.items||t.onLeafClick(e))},b=function(){if(!t.isMobileMode){var e=l.current.parentElement,n=p.getOffset(e),r=p.getViewport(),o=l.current.offsetParent?l.current.offsetWidth:p.getHiddenElementOuterWidth(l.current),i=p.getOuterWidth(e.children[0]),u=parseInt(n.top,10)+l.current.offsetHeight-p.getWindowScrollTop();l.current.style.top=u>r.height?r.height-u+"px":"0px",l.current.style.left=parseInt(n.left,10)+i+o>r.width-p.calculateScrollbarWidth()?-1*o+"px":i+"px"}};r((function(){a&&b()}));var h=function(t){return e.createElement("li",{key:"separator_"+t,className:"p-menu-separator",role:"separator"})},y=function(n){return n.items?e.createElement(N,{menuProps:t.menuProps,model:n.items,resetMenu:n!==i,onLeafClick:t.onLeafClick,isMobileMode:t.isMobileMode}):null},v=function(n,r){if(!1===n.visible)return null;var o=i===n,u=n.label+"_"+r,l=m("p-menuitem",{"p-menuitem-active":o},n.className),a=m("p-menuitem-link",{"p-disabled":n.disabled}),p=m("p-menuitem-icon",n.icon),b="p-submenu-icon pi pi-angle-right",h=f.getJSXIcon(n.icon,{className:"p-menuitem-icon"},{props:t.menuProps}),v=n.label&&e.createElement("span",{className:"p-menuitem-text"},n.label),x=n.items&&e.createElement("span",{className:b}),E=y(n),M=e.createElement("a",{href:n.url||"#",className:a,target:n.target,onClick:function(e){return d(e,n)},role:"menuitem","aria-haspopup":null!=n.items,"aria-disabled":n.disabled},h,v,x,e.createElement(g,null));n.template&&(M=s.getJSXElement(n.template,n,{onClick:function(e){return d(e,n)},className:a,labelClassName:"p-menuitem-text",iconClassName:p,submenuIconClassName:b,element:M,props:t,active:o}));return e.createElement("li",{key:u,role:"none",id:n.id,className:l,style:n.style,onMouseEnter:function(e){return c(e,n)}},M,E)},x=function(e,t){return e.separator?h(t):v(e,t)},E=m({"p-submenu-list":!t.root}),M=t.model?t.model.map(x):null;return e.createElement(n,{nodeRef:l,classNames:"p-contextmenusub",in:a,timeout:{enter:0,exit:0},unmountOnExit:!0,onEnter:function(){b()}},e.createElement("ul",{ref:l,className:E},M))}));N.displayName="ContextMenuSub";var P=e.memo(e.forwardRef((function(s,f){var g=k.getProps(s),y=S(e.useState(!1),2),v=y[0],x=y[1],E=S(e.useState(!1),2),M=E[0],P=E[1],w=S(e.useState(!1),2),O=w[0],I=w[1],C=S(e.useState(null),2),H=C[0],T=C[1],j=e.useRef(null),A=e.useRef(null),L=e.useRef(null),R=o("screen and (max-width: ".concat(g.breakpoint,")"),!!g.breakpoint),W=S(i({type:"click",listener:function(e){ne(e)&&2!==e.button&&(B(e),I(!0))}}),2),D=W[0],Z=W[1],_=S(i({type:"contextmenu",listener:function(e){q(e)}}),1)[0],X=S(u({listener:function(e){v&&!p.isTouchDevice()&&B(e)}}),2),J=X[0],V=X[1],Y=function(){if(!L.current){L.current=p.createInlineStyle(t.nonce);var e="".concat(H),n="\n@media screen and (max-width: ".concat(g.breakpoint,") {\n    .p-contextmenu[").concat(e,"] > ul {\n        max-height: ").concat(g.scrollHeight,";\n        overflow: ").concat(g.scrollHeight?"auto":"",";\n    }\n\n    .p-contextmenu[").concat(e,"] .p-submenu-list {\n        position: relative;\n    }\n\n    .p-contextmenu[").concat(e,"] .p-menuitem-active > .p-submenu-list {\n        left: 0 !important;\n        box-shadow: none;\n        border-radius: 0;\n        padding: 0 0 0 calc(var(--inline-spacing) * 2); /* @todo */\n    }\n\n    .p-contextmenu[").concat(e,"] .p-menuitem-active > .p-menuitem-link > .p-submenu-icon {\n        transform: rotate(-180deg);\n    }\n\n    .p-contextmenu[").concat(e,'] .p-submenu-icon:before {\n        content: "\\e930";\n    }\n}\n');L.current.innerHTML=n}},z=function(){L.current=p.removeInlineStyle(L.current)},U=function(){I(!1)},$=function(){I(!1)},q=function(e){e.stopPropagation(),e.preventDefault(),A.current=e,v?P(!0):(x(!0),g.onShow&&g.onShow(A.current))},B=function(e){A.current=e,x(!1),P(!1),g.onHide&&g.onHide(A.current)},F=function(){g.autoZIndex&&b.set("menu",j.current,t.autoZIndex,g.baseZIndex||t.zIndex.menu),ee(A.current),H&&g.breakpoint&&(j.current.setAttribute(H,""),Y())},G=function(){re()},K=function(){oe(),b.clear(j.current)},Q=function(){b.clear(j.current),z()},ee=function(e){if(e){var t=e.pageX+1,n=e.pageY+1,r=j.current.offsetParent?j.current.offsetWidth:p.getHiddenElementOuterWidth(j.current),o=j.current.offsetParent?j.current.offsetHeight:p.getHiddenElementOuterHeight(j.current),i=p.getViewport();t+r-document.body.scrollLeft>i.width&&(t-=r),n+o-document.body.scrollTop>i.height&&(n-=o),t<document.body.scrollLeft&&(t=document.body.scrollLeft),n<document.body.scrollTop&&(n=document.body.scrollTop),j.current.style.left=t+"px",j.current.style.top=n+"px"}},te=function(e){I(!0),B(e),e.stopPropagation()},ne=function(e){return j&&j.current&&!(j.current.isSameNode(e.target)||j.current.contains(e.target))},re=function(){J(),D()},oe=function(){V(),Z()};l((function(){g.global&&_(),g.breakpoint&&!H&&T(d())})),r((function(){return H&&j.current&&(j.current.setAttribute(H,""),Y()),function(){z()}}),[H,g.breakpoint]),r((function(){v?(x(!1),P(!1),I(!0)):M||v||!O||q(A.current)}),[M]),a((function(){b.clear(j.current)})),e.useImperativeHandle(f,(function(){return{props:g,show:q,hide:B,getElement:function(){return j.current}}}));var ie,ue,le=(ie=k.getOtherProps(g),ue=m("p-contextmenu p-component",g.className,{"p-input-filled":"filled"===t.inputStyle,"p-ripple-disabled":!1===t.ripple}),e.createElement(n,{nodeRef:j,classNames:"p-contextmenu",in:v,timeout:{enter:250,exit:0},options:g.transitionOptions,unmountOnExit:!0,onEnter:F,onEntered:G,onExit:K,onExited:Q},e.createElement("div",h({ref:j,id:g.id,className:ue,style:g.style},ie,{onClick:U,onMouseEnter:$}),e.createElement(N,{menuProps:g,model:g.model,root:!0,resetMenu:O,onLeafClick:te,isMobileMode:R}))));return e.createElement(c,{element:le,appendTo:g.appendTo})})));P.displayName="ContextMenu";export{P as ContextMenu};

package/contextmenu/contextmenu.js

@@ -105,6 +105,8 @@ this.primereact.contextmenu = (function (exports, React, PrimeReact, csstransiti
       global: false,
       autoZIndex: true,
       baseZIndex: 0,
+      breakpoint: undefined,
+      scrollHeight: '400px',
       appendTo: null,
       transitionOptions: null,
       onShow: null,
@@ -130,7 +132,7 @@ this.primereact.contextmenu = (function (exports, React, PrimeReact, csstransiti
       setActiveItemState(null);
     }
     var onItemMouseEnter = function onItemMouseEnter(event, item) {
-      if (item.disabled) {
+      if (item.disabled || props.isMobileMode) {
         event.preventDefault();
         return;
       }
@@ -150,26 +152,31 @@ this.primereact.contextmenu = (function (exports, React, PrimeReact, csstransiti
           item: item
         });
       }
+      if (props.isMobileMode && item.items) {
+        if (activeItemState && item === activeItemState) setActiveItemState(null);else setActiveItemState(item);
+      }
       if (!item.items) {
         props.onLeafClick(event);
       }
     };
     var position = function position() {
-      var parentItem = 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]);
-      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';
+      if (!props.isMobileMode) {
+        var parentItem = 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]);
+        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() {
@@ -191,7 +198,8 @@ this.primereact.contextmenu = (function (exports, React, PrimeReact, csstransiti
           menuProps: props.menuProps,
           model: item.items,
           resetMenu: item !== activeItemState,
-          onLeafClick: props.onLeafClick
+          onLeafClick: props.onLeafClick,
+          isMobileMode: props.isMobileMode
         });
       }
       return null;
@@ -300,8 +308,14 @@ this.primereact.contextmenu = (function (exports, React, PrimeReact, csstransiti
       _React$useState6 = _slicedToArray(_React$useState5, 2),
       resetMenuState = _React$useState6[0],
       setResetMenuState = _React$useState6[1];
+    var _React$useState7 = React__namespace.useState(null),
+      _React$useState8 = _slicedToArray(_React$useState7, 2),
+      attributeSelectorState = _React$useState8[0],
+      setAttributeSelectorState = _React$useState8[1];
     var menuRef = React__namespace.useRef(null);
     var currentEvent = React__namespace.useRef(null);
+    var styleElementRef = React__namespace.useRef(null);
+    var isMobileMode = hooks.useMatchMedia("screen and (max-width: ".concat(props.breakpoint, ")"), !!props.breakpoint);
     var _useEventListener = hooks.useEventListener({
         type: 'click',
         listener: function listener(event) {
@@ -332,6 +346,17 @@ this.primereact.contextmenu = (function (exports, React, PrimeReact, csstransiti
       _useResizeListener2 = _slicedToArray(_useResizeListener, 2),
       bindDocumentResizeListener = _useResizeListener2[0],
       unbindDocumentResizeListener = _useResizeListener2[1];
+    var createStyle = function createStyle() {
+      if (!styleElementRef.current) {
+        styleElementRef.current = utils.DomHandler.createInlineStyle(PrimeReact__default["default"].nonce);
+        var selector = "".concat(attributeSelectorState);
+        var innerHTML = "\n@media screen and (max-width: ".concat(props.breakpoint, ") {\n    .p-contextmenu[").concat(selector, "] > ul {\n        max-height: ").concat(props.scrollHeight, ";\n        overflow: ").concat(props.scrollHeight ? 'auto' : '', ";\n    }\n\n    .p-contextmenu[").concat(selector, "] .p-submenu-list {\n        position: relative;\n    }\n\n    .p-contextmenu[").concat(selector, "] .p-menuitem-active > .p-submenu-list {\n        left: 0 !important;\n        box-shadow: none;\n        border-radius: 0;\n        padding: 0 0 0 calc(var(--inline-spacing) * 2); /* @todo */\n    }\n\n    .p-contextmenu[").concat(selector, "] .p-menuitem-active > .p-menuitem-link > .p-submenu-icon {\n        transform: rotate(-180deg);\n    }\n\n    .p-contextmenu[").concat(selector, "] .p-submenu-icon:before {\n        content: \"\\e930\";\n    }\n}\n");
+        styleElementRef.current.innerHTML = innerHTML;
+      }
+    };
+    var destroyStyle = function destroyStyle() {
+      styleElementRef.current = utils.DomHandler.removeInlineStyle(styleElementRef.current);
+    };
     var onMenuClick = function onMenuClick() {
       setResetMenuState(false);
     };
@@ -360,6 +385,10 @@ this.primereact.contextmenu = (function (exports, React, PrimeReact, csstransiti
         utils.ZIndexUtils.set('menu', menuRef.current, PrimeReact__default["default"].autoZIndex, props.baseZIndex || PrimeReact__default["default"].zIndex['menu']);
       }
       position(currentEvent.current);
+      if (attributeSelectorState && props.breakpoint) {
+        menuRef.current.setAttribute(attributeSelectorState, '');
+        createStyle();
+      }
     };
     var onEntered = function onEntered() {
       bindDocumentListeners();
@@ -370,6 +399,7 @@ this.primereact.contextmenu = (function (exports, React, PrimeReact, csstransiti
     };
     var onExited = function onExited() {
       utils.ZIndexUtils.clear(menuRef.current);
+      destroyStyle();
     };
     var position = function position(event) {
       if (event) {
@@ -422,7 +452,19 @@ this.primereact.contextmenu = (function (exports, React, PrimeReact, csstransiti
       if (props.global) {
         bindDocumentContextMenuListener();
       }
+      if (props.breakpoint) {
+        !attributeSelectorState && setAttributeSelectorState(utils.UniqueComponentId());
+      }
     });
+    hooks.useUpdateEffect(function () {
+      if (attributeSelectorState && menuRef.current) {
+        menuRef.current.setAttribute(attributeSelectorState, '');
+        createStyle();
+      }
+      return function () {
+        destroyStyle();
+      };
+    }, [attributeSelectorState, props.breakpoint]);
     hooks.useUpdateEffect(function () {
       if (visibleState) {
         setVisibleState(false);
@@ -478,7 +520,8 @@ this.primereact.contextmenu = (function (exports, React, PrimeReact, csstransiti
         model: props.model,
         root: true,
         resetMenu: resetMenuState,
-        onLeafClick: onLeafClick
+        onLeafClick: onLeafClick,
+        isMobileMode: isMobileMode
       })));
     };
     var element = createContextMenu();