primereact 9.3.1 → 9.5.0

package/tieredmenu/tieredmenu.esm.js

@@ -4,25 +4,11 @@ import { CSSTransition } from 'primereact/csstransition';
 import { useEventListener, useResizeListener, useMountEffect, useUpdateEffect, useMatchMedia, useOverlayListener, useUnmountEffect } from 'primereact/hooks';
 import { OverlayService } from 'primereact/overlayservice';
 import { Portal } from 'primereact/portal';
-import { ObjectUtils, classNames, DomHandler, IconUtils, UniqueComponentId, ZIndexUtils } from 'primereact/utils';
+import { classNames, mergeProps, DomHandler, IconUtils, ObjectUtils, UniqueComponentId, ZIndexUtils } from 'primereact/utils';
+import { ComponentBase } from 'primereact/componentbase';
 import { Ripple } from 'primereact/ripple';
 import { AngleRightIcon } from 'primereact/icons/angleright';
 
-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);
-}
-
 function _arrayWithHoles(arr) {
   if (Array.isArray(arr)) return arr;
 }
@@ -78,7 +64,7 @@ function _slicedToArray(arr, i) {
   return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
 }
 
-var TieredMenuBase = {
+var TieredMenuBase = ComponentBase.extend({
   defaultProps: {
     __TYPE: 'TieredMenu',
     id: null,
@@ -96,21 +82,65 @@ var TieredMenuBase = {
     onHide: null,
     submenuIcon: null,
     children: undefined
-  },
-  getProps: function getProps(props) {
-    return ObjectUtils.getMergedProps(props, TieredMenuBase.defaultProps);
-  },
-  getOtherProps: function getOtherProps(props) {
-    return ObjectUtils.getDiffProps(props, TieredMenuBase.defaultProps);
   }
-};
+});
+
+function _typeof(obj) {
+  "@babel/helpers - typeof";
+
+  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 _toPrimitive(input, hint) {
+  if (_typeof(input) !== "object" || input === null) return input;
+  var prim = input[Symbol.toPrimitive];
+  if (prim !== undefined) {
+    var res = prim.call(input, hint || "default");
+    if (_typeof(res) !== "object") return res;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return (hint === "string" ? String : Number)(input);
+}
 
+function _toPropertyKey(arg) {
+  var key = _toPrimitive(arg, "string");
+  return _typeof(key) === "symbol" ? key : String(key);
+}
+
+function _defineProperty(obj, key, value) {
+  key = _toPropertyKey(key);
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+  return obj;
+}
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var TieredMenuSub = /*#__PURE__*/React.memo(function (props) {
   var _React$useState = React.useState(null),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     activeItemState = _React$useState2[0],
     setActiveItemState = _React$useState2[1];
   var elementRef = React.useRef(null);
+  var getPTOptions = function getPTOptions(item, key) {
+    return props.ptm(key, {
+      context: {
+        active: activeItemState === item
+      }
+    });
+  };
   var _useEventListener = useEventListener({
       type: 'click',
       listener: function listener(event) {
@@ -251,11 +281,12 @@ var TieredMenuSub = /*#__PURE__*/React.memo(function (props) {
   }, [activeItemState]);
   var createSeparator = function createSeparator(index) {
     var key = 'separator_' + index;
-    return /*#__PURE__*/React.createElement("li", {
+    var separatorProps = mergeProps({
       key: key,
-      className: "p-menu-separator",
-      role: "separator"
-    });
+      className: 'p-menu-separator',
+      role: 'separator'
+    }, props.ptm('separator'));
+    return /*#__PURE__*/React.createElement("li", separatorProps);
   };
   var createSubmenu = function createSubmenu(item) {
     if (item.items) {
@@ -268,7 +299,8 @@ var TieredMenuSub = /*#__PURE__*/React.memo(function (props) {
         parentActive: item === activeItemState,
         isMobileMode: props.isMobileMode,
         onItemToggle: props.onItemToggle,
-        submenuIcon: props.submenuIcon
+        submenuIcon: props.submenuIcon,
+        ptm: props.ptm
       });
     }
     return null;
@@ -296,37 +328,39 @@ var TieredMenuSub = /*#__PURE__*/React.memo(function (props) {
       'p-disabled': disabled
     });
     var iconClassName = classNames('p-menuitem-icon', _icon);
-    var icon = IconUtils.getJSXIcon(_icon, {
-      className: 'p-menuitem-icon'
-    }, {
+    var iconProps = mergeProps({
+      className: iconClassName
+    }, getPTOptions(item, 'icon'));
+    var icon = IconUtils.getJSXIcon(_icon, _objectSpread({}, iconProps), {
       props: props.menuProps
     });
-    var label = _label && /*#__PURE__*/React.createElement("span", {
-      className: "p-menuitem-text"
-    }, _label);
+    var labelProps = mergeProps({
+      className: 'p-menuitem-text'
+    }, getPTOptions(item, 'label'));
+    var label = _label && /*#__PURE__*/React.createElement("span", labelProps, _label);
     var submenuIconClassName = 'p-submenu-icon';
-    var submenuIcon = item.items && IconUtils.getJSXIcon(props.submenuIcon || /*#__PURE__*/React.createElement(AngleRightIcon, {
+    var submenuIconProps = mergeProps({
       className: submenuIconClassName
-    }), {
-      className: submenuIconClassName
-    }, {
+    }, getPTOptions(item, 'submenuIcon'));
+    var submenuIcon = item.items && IconUtils.getJSXIcon(props.submenuIcon || /*#__PURE__*/React.createElement(AngleRightIcon, submenuIconProps), _objectSpread({}, submenuIconProps), {
       props: props.menuProps
     });
     var submenu = createSubmenu(item);
-    var content = /*#__PURE__*/React.createElement("a", {
+    var actionProps = mergeProps({
       href: url || '#',
       className: linkClassName,
       target: target,
-      role: "menuitem",
-      "aria-haspopup": items != null,
+      role: 'menuitem',
+      'aria-haspopup': items != null,
       onClick: function onClick(event) {
         return onItemClick(event, item);
       },
       onKeyDown: function onKeyDown(event) {
         return onItemKeyDown(event, item);
       },
-      "aria-disabled": disabled
-    }, icon, label, submenuIcon, /*#__PURE__*/React.createElement(Ripple, null));
+      'aria-disabled': disabled
+    }, getPTOptions(item, 'action'));
+    var content = /*#__PURE__*/React.createElement("a", actionProps, icon, label, submenuIcon, /*#__PURE__*/React.createElement(Ripple, null));
     if (template) {
       var defaultContentOptions = {
         onClick: function onClick(event) {
@@ -346,7 +380,7 @@ var TieredMenuSub = /*#__PURE__*/React.memo(function (props) {
       };
       content = ObjectUtils.getJSXElement(template, item, defaultContentOptions);
     }
-    return /*#__PURE__*/React.createElement("li", {
+    var menuitemProps = mergeProps({
       key: key,
       id: item.id,
       className: className,
@@ -354,8 +388,9 @@ var TieredMenuSub = /*#__PURE__*/React.memo(function (props) {
       onMouseEnter: function onMouseEnter(event) {
         return onItemMouseEnter(event, item);
       },
-      role: "none"
-    }, content, submenu);
+      role: 'none'
+    }, getPTOptions(item, 'menuitem'));
+    return /*#__PURE__*/React.createElement("li", menuitemProps, content, submenu);
   };
   var createItem = function createItem(item, index) {
     return item.separator ? createSeparator(index) : createMenuItem(item, index);
@@ -367,12 +402,13 @@ var TieredMenuSub = /*#__PURE__*/React.memo(function (props) {
     'p-submenu-list': !props.root
   });
   var submenu = createMenu();
-  return /*#__PURE__*/React.createElement("ul", {
+  var menuProps = mergeProps({
     ref: elementRef,
     className: className,
     role: props.root ? 'menubar' : 'menu',
-    "aria-orientation": "horizontal"
-  }, submenu);
+    'aria-orientation': 'horizontal'
+  }, props.ptm('menu'));
+  return /*#__PURE__*/React.createElement("ul", menuProps, submenu);
 });
 TieredMenuSub.displayName = 'TieredMenuSub';
 
@@ -386,6 +422,14 @@ var TieredMenu = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
     _React$useState4 = _slicedToArray(_React$useState3, 2),
     attributeSelectorState = _React$useState4[0],
     setAttributeSelectorState = _React$useState4[1];
+  var _TieredMenuBase$setMe = TieredMenuBase.setMetaData({
+      props: props,
+      state: {
+        visible: visibleState,
+        attributeSelector: attributeSelectorState
+      }
+    }),
+    ptm = _TieredMenuBase$setMe.ptm;
   var menuRef = React.useRef(null);
   var targetRef = React.useRef(null);
   var styleElementRef = React.useRef(null);
@@ -493,12 +537,19 @@ var TieredMenu = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
     };
   });
   var createElement = function createElement() {
-    var otherProps = TieredMenuBase.getOtherProps(props);
+    TieredMenuBase.getOtherProps(props);
     var className = classNames('p-tieredmenu p-component', {
       'p-tieredmenu-overlay': props.popup,
       'p-input-filled': PrimeReact.inputStyle === 'filled',
       'p-ripple-disabled': PrimeReact.ripple === false
     }, props.className);
+    var rootProps = mergeProps({
+      ref: menuRef,
+      id: props.id,
+      className: className,
+      style: props.style,
+      onClick: onPanelClick
+    }, TieredMenuBase.getOtherProps(props), ptm('root'));
     return /*#__PURE__*/React.createElement(CSSTransition, {
       nodeRef: menuRef,
       classNames: "p-connected-overlay",
@@ -513,14 +564,7 @@ var TieredMenu = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
       onEntered: onEntered,
       onExit: onExit,
       onExited: onExited
-    }, /*#__PURE__*/React.createElement("div", _extends({
-      ref: menuRef,
-      id: props.id,
-      className: className,
-      style: props.style
-    }, otherProps, {
-      onClick: onPanelClick
-    }), /*#__PURE__*/React.createElement(TieredMenuSub, {
+    }, /*#__PURE__*/React.createElement("div", rootProps, /*#__PURE__*/React.createElement(TieredMenuSub, {
       menuProps: props,
       model: props.model,
       root: true,
@@ -528,7 +572,8 @@ var TieredMenu = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
       onHide: hide,
       isMobileMode: isMobileMode,
       onItemToggle: onItemToggle,
-      submenuIcon: props.submenuIcon
+      submenuIcon: props.submenuIcon,
+      ptm: ptm
     })));
   };
   var element = createElement();

package/tieredmenu/tieredmenu.esm.min.js

@@ -1 +1 @@
-import*as e from"react";import n from"primereact/api";import{CSSTransition as t}from"primereact/csstransition";import{useEventListener as r,useResizeListener as o,useMountEffect as i,useUpdateEffect as u,useMatchMedia as l,useOverlayListener as a,useUnmountEffect as c}from"primereact/hooks";import{OverlayService as s}from"primereact/overlayservice";import{Portal as p}from"primereact/portal";import{ObjectUtils as m,classNames as f,DomHandler as d,IconUtils as b,UniqueComponentId as g,ZIndexUtils as h}from"primereact/utils";import{Ripple as v}from"primereact/ripple";import{AngleRightIcon as y}from"primereact/icons/angleright";function E(){return E=Object.assign?Object.assign.bind():function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e},E.apply(this,arguments)}function I(e){if(Array.isArray(e))return e}function w(e,n){var t=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=t){var r,o,i,u,l=[],a=!0,c=!1;try{if(i=(t=t.call(e)).next,0===n){if(Object(t)!==t)return;a=!1}else for(;!(a=(r=i.call(t)).done)&&(l.push(r.value),l.length!==n);a=!0);}catch(e){c=!0,o=e}finally{try{if(!a&&null!=t.return&&(u=t.return(),Object(u)!==u))return}finally{if(c)throw o}}return l}}function M(e,n){(null==n||n>e.length)&&(n=e.length);for(var t=0,r=new Array(n);t<n;t++)r[t]=e[t];return r}function S(e,n){if(e){if("string"==typeof e)return M(e,n);var t=Object.prototype.toString.call(e).slice(8,-1);return"Object"===t&&e.constructor&&(t=e.constructor.name),"Map"===t||"Set"===t?Array.from(e):"Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)?M(e,n):void 0}}function k(){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,n){return I(e)||w(e,n)||S(e,n)||k()}var N={defaultProps:{__TYPE:"TieredMenu",id:null,model:null,popup:!1,style:null,className:null,autoZIndex:!0,baseZIndex:0,breakpoint:void 0,scrollHeight:"400px",appendTo:null,transitionOptions:null,onShow:null,onHide:null,submenuIcon:null,children:void 0},getProps:function(e){return m.getMergedProps(e,N.defaultProps)},getOtherProps:function(e){return m.getDiffProps(e,N.defaultProps)}},P=e.memo((function(n){var t=x(e.useState(null),2),l=t[0],a=t[1],c=e.useRef(null),s=x(r({type:"click",listener:function(e){n.isMobileMode||!c.current||c.current.contains(e.target)||a(null)}}),1)[0],p=x(o({listener:function(){!n.isMobileMode&&a(null)}}),1)[0],g=function(){if(c.current){var e=c.current.parentElement,n=d.getOffset(e),t=d.getViewport(),r=c.current.offsetParent?c.current.offsetWidth:d.getHiddenElementOuterWidth(c.current),o=d.getOuterWidth(e.children[0]),i=parseInt(n.top,10)+c.current.offsetHeight-d.getWindowScrollTop();c.current.style.top=i>t.height?t.height-i+"px":"0px",parseInt(n.left,10)+o+r>t.width-d.calculateScrollbarWidth()&&d.addClass(c.current,"p-submenu-list-flipped")}},h=function(e,t){t.disabled||n.isMobileMode?e.preventDefault():n.root?(l||n.popup)&&a(t):a(t)},E=function(e,t){t.disabled?e.preventDefault():(t.url||e.preventDefault(),t.command&&t.command({originalEvent:e,item:t}),(n.root||n.isMobileMode)&&t.items&&a(l&&t===l?null:t),t.items||k(e))},I=function(e,t){var r=e.currentTarget.parentElement;switch(e.which){case 40:var o=M(r);o&&o.children[0].focus(),e.preventDefault();break;case 38:var i=S(r);i&&i.children[0].focus(),e.preventDefault();break;case 39:t.items&&(a(t),setTimeout((function(){r.children[1].children[0].children[0].focus()}),50)),e.preventDefault()}n.onKeyDown&&n.onKeyDown(e,r)},w=function(e,n){37===e.which&&(a(null),n.parentElement.previousElementSibling.focus())},M=function e(n){var t=n.nextElementSibling;return t?d.hasClass(t,"p-disabled")||!d.hasClass(t,"p-menuitem")?e(t):t:null},S=function e(n){var t=n.previousElementSibling;return t?d.hasClass(t,"p-disabled")||!d.hasClass(t,"p-menuitem")?e(t):t:null},k=function(e){n.isMobileMode&&!n.popup||(a(null),n.onLeafClick&&n.onLeafClick(e),n.onHide&&n.onHide(e))};i((function(){s(),p()})),u((function(){n.parentActive||a(null),n.root||!n.parentActive||n.isMobileMode||g()}),[n.parentActive]),u((function(){n.onItemToggle&&n.onItemToggle()}),[l]);var N=function(n){return e.createElement("li",{key:"separator_"+n,className:"p-menu-separator",role:"separator"})},T=function(t){return t.items?e.createElement(P,{menuProps:n.menuProps,model:t.items,onLeafClick:k,popup:n.popup,onKeyDown:w,parentActive:t===l,isMobileMode:n.isMobileMode,onItemToggle:n.onItemToggle,submenuIcon:n.submenuIcon}):null},O=function(t,r){if(!1===t.visible)return null;var o=t.style,i=t.disabled,u=t.icon,a=t.label,c=t.items,s=t.target,p=t.url,d=t.template,g=a+"_"+r,w=l===t,M=f("p-menuitem",{"p-menuitem-active":w},t.className),S=f("p-menuitem-link",{"p-disabled":i}),k=f("p-menuitem-icon",u),x=b.getJSXIcon(u,{className:"p-menuitem-icon"},{props:n.menuProps}),N=a&&e.createElement("span",{className:"p-menuitem-text"},a),P="p-submenu-icon",O=t.items&&b.getJSXIcon(n.submenuIcon||e.createElement(y,{className:P}),{className:P},{props:n.menuProps}),C=T(t),H=e.createElement("a",{href:p||"#",className:S,target:s,role:"menuitem","aria-haspopup":null!=c,onClick:function(e){return E(e,t)},onKeyDown:function(e){return I(e,t)},"aria-disabled":i},x,N,O,e.createElement(v,null));d&&(H=m.getJSXElement(d,t,{onClick:function(e){return E(e,t)},onKeyDown:function(e){return I(e,t)},className:S,labelClassName:"p-menuitem-text",iconClassName:k,submenuIconClassName:P,element:H,props:n,active:w,disabled:i}));return e.createElement("li",{key:g,id:t.id,className:M,style:o,onMouseEnter:function(e){return h(e,t)},role:"none"},H,C)},C=function(e,n){return e.separator?N(n):O(e,n)},H=f({"p-submenu-list":!n.root}),A=n.model?n.model.map(C):null;return e.createElement("ul",{ref:c,className:H,role:n.root?"menubar":"menu","aria-orientation":"horizontal"},A)}));P.displayName="TieredMenuSub";var T=e.memo(e.forwardRef((function(r,o){var m=N.getProps(r),b=x(e.useState(!m.popup),2),v=b[0],y=b[1],I=x(e.useState(null),2),w=I[0],M=I[1],S=e.useRef(null),k=e.useRef(null),T=e.useRef(null),O=l("screen and (max-width: ".concat(m.breakpoint,")"),!!m.breakpoint),C=x(a({target:k,overlay:S,listener:function(e,n){n.valid&&K(e)},when:v}),2),H=C[0],A=C[1],D=function(e){m.popup&&s.emit("overlay-click",{originalEvent:e,target:k.current})},j=function(e){m.popup&&(v?K(e):R(e))},R=function(e){k.current=e.currentTarget,y(!0),m.onShow&&m.onShow(e)},K=function(e){m.popup&&(k.current=e.currentTarget,y(!1),m.onHide&&m.onHide(e))},W=function(){m.popup&&O&&d.absolutePosition(S.current,k.current)},Z=function(){if(!T.current){T.current=d.createInlineStyle(n.nonce);var e="".concat(w),t="\n@media screen and (max-width: ".concat(m.breakpoint,") {\n    .p-tieredmenu[").concat(e,"] > ul {\n        max-height: ").concat(m.scrollHeight,";\n        overflow: ").concat(m.scrollHeight?"auto":"",";\n    }\n\n    .p-tieredmenu[").concat(e,"] .p-submenu-list {\n        position: relative;\n    }\n\n    .p-tieredmenu[").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-tieredmenu[").concat(e,"] .p-menuitem-active > .p-menuitem-link > .p-submenu-icon {\n        transform: rotate(-180deg);\n    }\n\n    .p-tieredmenu[").concat(e,'] .p-submenu-icon:before {\n        content: "\\e930";\n    }\n\n    ').concat(m.popup?"":".p-tieredmenu[".concat(e,"] { width: 100%; }"),"\n}\n");T.current.innerHTML=t}},L=function(){T.current=d.removeInlineStyle(T.current)},_=function(){m.autoZIndex&&h.set("menu",S.current,n.autoZIndex,m.baseZIndex||n.zIndex.menu),d.absolutePosition(S.current,k.current),w&&m.breakpoint&&(S.current.setAttribute(w,""),Z())},J=function(){H()},X=function(){k.current=null,A()},z=function(){h.clear(S.current),L()};i((function(){m.breakpoint&&!w&&M(g())})),u((function(){return w&&S.current&&(S.current.setAttribute(w,""),Z()),function(){L()}}),[w,m.breakpoint]),c((function(){h.clear(S.current)})),e.useImperativeHandle(o,(function(){return{props:m,toggle:j,show:R,hide:K,getElement:function(){return S.current}}}));var U,V,Y=(U=N.getOtherProps(m),V=f("p-tieredmenu p-component",{"p-tieredmenu-overlay":m.popup,"p-input-filled":"filled"===n.inputStyle,"p-ripple-disabled":!1===n.ripple},m.className),e.createElement(t,{nodeRef:S,classNames:"p-connected-overlay",in:v,timeout:{enter:120,exit:100},options:m.transitionOptions,unmountOnExit:!0,onEnter:_,onEntered:J,onExit:X,onExited:z},e.createElement("div",E({ref:S,id:m.id,className:V,style:m.style},U,{onClick:D}),e.createElement(P,{menuProps:m,model:m.model,root:!0,popup:m.popup,onHide:K,isMobileMode:O,onItemToggle:W,submenuIcon:m.submenuIcon}))));return m.popup?e.createElement(p,{element:Y,appendTo:m.appendTo}):Y})));T.displayName="TieredMenu";export{T as TieredMenu};
+import*as e from"react";import n from"primereact/api";import{CSSTransition as t}from"primereact/csstransition";import{useEventListener as r,useResizeListener as o,useMountEffect as i,useUpdateEffect as u,useMatchMedia as l,useOverlayListener as a,useUnmountEffect as c}from"primereact/hooks";import{OverlayService as p}from"primereact/overlayservice";import{Portal as s}from"primereact/portal";import{classNames as m,mergeProps as f,DomHandler as d,IconUtils as b,ObjectUtils as v,UniqueComponentId as y,ZIndexUtils as g}from"primereact/utils";import{ComponentBase as h}from"primereact/componentbase";import{Ripple as w}from"primereact/ripple";import{AngleRightIcon as E}from"primereact/icons/angleright";function S(e){if(Array.isArray(e))return e}function O(e,n){var t=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=t){var r,o,i,u,l=[],a=!0,c=!1;try{if(i=(t=t.call(e)).next,0===n){if(Object(t)!==t)return;a=!1}else for(;!(a=(r=i.call(t)).done)&&(l.push(r.value),l.length!==n);a=!0);}catch(e){c=!0,o=e}finally{try{if(!a&&null!=t.return&&(u=t.return(),Object(u)!==u))return}finally{if(c)throw o}}return l}}function I(e,n){(null==n||n>e.length)&&(n=e.length);for(var t=0,r=new Array(n);t<n;t++)r[t]=e[t];return r}function M(e,n){if(e){if("string"==typeof e)return I(e,n);var t=Object.prototype.toString.call(e).slice(8,-1);return"Object"===t&&e.constructor&&(t=e.constructor.name),"Map"===t||"Set"===t?Array.from(e):"Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)?I(e,n):void 0}}function x(){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 P(e,n){return S(e)||O(e,n)||M(e,n)||x()}var k=h.extend({defaultProps:{__TYPE:"TieredMenu",id:null,model:null,popup:!1,style:null,className:null,autoZIndex:!0,baseZIndex:0,breakpoint:void 0,scrollHeight:"400px",appendTo:null,transitionOptions:null,onShow:null,onHide:null,submenuIcon:null,children:void 0}});function T(e){return T="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},T(e)}function j(e,n){if("object"!==T(e)||null===e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var r=t.call(e,n||"default");if("object"!==T(r))return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===n?String:Number)(e)}function N(e){var n=j(e,"string");return"symbol"===T(n)?n:String(n)}function D(e,n,t){return(n=N(n))in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function C(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n&&(r=r.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,r)}return t}function H(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?C(Object(t),!0).forEach((function(n){D(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):C(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}var A=e.memo((function(n){var t=P(e.useState(null),2),l=t[0],a=t[1],c=e.useRef(null),p=function(e,t){return n.ptm(t,{context:{active:l===e}})},s=P(r({type:"click",listener:function(e){n.isMobileMode||!c.current||c.current.contains(e.target)||a(null)}}),1)[0],y=P(o({listener:function(){!n.isMobileMode&&a(null)}}),1)[0],g=function(){if(c.current){var e=c.current.parentElement,n=d.getOffset(e),t=d.getViewport(),r=c.current.offsetParent?c.current.offsetWidth:d.getHiddenElementOuterWidth(c.current),o=d.getOuterWidth(e.children[0]),i=parseInt(n.top,10)+c.current.offsetHeight-d.getWindowScrollTop();c.current.style.top=i>t.height?t.height-i+"px":"0px",parseInt(n.left,10)+o+r>t.width-d.calculateScrollbarWidth()&&d.addClass(c.current,"p-submenu-list-flipped")}},h=function(e,t){t.disabled||n.isMobileMode?e.preventDefault():n.root?(l||n.popup)&&a(t):a(t)},S=function(e,t){t.disabled?e.preventDefault():(t.url||e.preventDefault(),t.command&&t.command({originalEvent:e,item:t}),(n.root||n.isMobileMode)&&t.items&&a(l&&t===l?null:t),t.items||k(e))},O=function(e,t){var r=e.currentTarget.parentElement;switch(e.which){case 40:var o=M(r);o&&o.children[0].focus(),e.preventDefault();break;case 38:var i=x(r);i&&i.children[0].focus(),e.preventDefault();break;case 39:t.items&&(a(t),setTimeout((function(){r.children[1].children[0].children[0].focus()}),50)),e.preventDefault()}n.onKeyDown&&n.onKeyDown(e,r)},I=function(e,n){37===e.which&&(a(null),n.parentElement.previousElementSibling.focus())},M=function e(n){var t=n.nextElementSibling;return t?d.hasClass(t,"p-disabled")||!d.hasClass(t,"p-menuitem")?e(t):t:null},x=function e(n){var t=n.previousElementSibling;return t?d.hasClass(t,"p-disabled")||!d.hasClass(t,"p-menuitem")?e(t):t:null},k=function(e){n.isMobileMode&&!n.popup||(a(null),n.onLeafClick&&n.onLeafClick(e),n.onHide&&n.onHide(e))};i((function(){s(),y()})),u((function(){n.parentActive||a(null),n.root||!n.parentActive||n.isMobileMode||g()}),[n.parentActive]),u((function(){n.onItemToggle&&n.onItemToggle()}),[l]);var T=function(t){var r=f({key:"separator_"+t,className:"p-menu-separator",role:"separator"},n.ptm("separator"));return e.createElement("li",r)},j=function(t){return t.items?e.createElement(A,{menuProps:n.menuProps,model:t.items,onLeafClick:k,popup:n.popup,onKeyDown:I,parentActive:t===l,isMobileMode:n.isMobileMode,onItemToggle:n.onItemToggle,submenuIcon:n.submenuIcon,ptm:n.ptm}):null},N=function(t,r){if(!1===t.visible)return null;var o=t.style,i=t.disabled,u=t.icon,a=t.label,c=t.items,s=t.target,d=t.url,y=t.template,g=a+"_"+r,I=l===t,M=m("p-menuitem",{"p-menuitem-active":I},t.className),x=m("p-menuitem-link",{"p-disabled":i}),P=m("p-menuitem-icon",u),k=f({className:P},p(t,"icon")),T=b.getJSXIcon(u,H({},k),{props:n.menuProps}),N=f({className:"p-menuitem-text"},p(t,"label")),D=a&&e.createElement("span",N,a),C="p-submenu-icon",A=f({className:C},p(t,"submenuIcon")),R=t.items&&b.getJSXIcon(n.submenuIcon||e.createElement(E,A),H({},A),{props:n.menuProps}),K=j(t),W=f({href:d||"#",className:x,target:s,role:"menuitem","aria-haspopup":null!=c,onClick:function(e){return S(e,t)},onKeyDown:function(e){return O(e,t)},"aria-disabled":i},p(t,"action")),Z=e.createElement("a",W,T,D,R,e.createElement(w,null));y&&(Z=v.getJSXElement(y,t,{onClick:function(e){return S(e,t)},onKeyDown:function(e){return O(e,t)},className:x,labelClassName:"p-menuitem-text",iconClassName:P,submenuIconClassName:C,element:Z,props:n,active:I,disabled:i}));var L=f({key:g,id:t.id,className:M,style:o,onMouseEnter:function(e){return h(e,t)},role:"none"},p(t,"menuitem"));return e.createElement("li",L,Z,K)},D=function(e,n){return e.separator?T(n):N(e,n)},C=m({"p-submenu-list":!n.root}),R=n.model?n.model.map(D):null,K=f({ref:c,className:C,role:n.root?"menubar":"menu","aria-orientation":"horizontal"},n.ptm("menu"));return e.createElement("ul",K,R)}));A.displayName="TieredMenuSub";var R=e.memo(e.forwardRef((function(r,o){var b=k.getProps(r),v=P(e.useState(!b.popup),2),h=v[0],w=v[1],E=P(e.useState(null),2),S=E[0],O=E[1],I=k.setMetaData({props:b,state:{visible:h,attributeSelector:S}}).ptm,M=e.useRef(null),x=e.useRef(null),T=e.useRef(null),j=l("screen and (max-width: ".concat(b.breakpoint,")"),!!b.breakpoint),N=P(a({target:x,overlay:M,listener:function(e,n){n.valid&&W(e)},when:h}),2),D=N[0],C=N[1],H=function(e){b.popup&&p.emit("overlay-click",{originalEvent:e,target:x.current})},R=function(e){b.popup&&(h?W(e):K(e))},K=function(e){x.current=e.currentTarget,w(!0),b.onShow&&b.onShow(e)},W=function(e){b.popup&&(x.current=e.currentTarget,w(!1),b.onHide&&b.onHide(e))},Z=function(){b.popup&&j&&d.absolutePosition(M.current,x.current)},L=function(){if(!T.current){T.current=d.createInlineStyle(n.nonce);var e="".concat(S),t="\n@media screen and (max-width: ".concat(b.breakpoint,") {\n    .p-tieredmenu[").concat(e,"] > ul {\n        max-height: ").concat(b.scrollHeight,";\n        overflow: ").concat(b.scrollHeight?"auto":"",";\n    }\n\n    .p-tieredmenu[").concat(e,"] .p-submenu-list {\n        position: relative;\n    }\n\n    .p-tieredmenu[").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-tieredmenu[").concat(e,"] .p-menuitem-active > .p-menuitem-link > .p-submenu-icon {\n        transform: rotate(-180deg);\n    }\n\n    .p-tieredmenu[").concat(e,'] .p-submenu-icon:before {\n        content: "\\e930";\n    }\n\n    ').concat(b.popup?"":".p-tieredmenu[".concat(e,"] { width: 100%; }"),"\n}\n");T.current.innerHTML=t}},_=function(){T.current=d.removeInlineStyle(T.current)},J=function(){b.autoZIndex&&g.set("menu",M.current,n.autoZIndex,b.baseZIndex||n.zIndex.menu),d.absolutePosition(M.current,x.current),S&&b.breakpoint&&(M.current.setAttribute(S,""),L())},X=function(){D()},z=function(){x.current=null,C()},U=function(){g.clear(M.current),_()};i((function(){b.breakpoint&&!S&&O(y())})),u((function(){return S&&M.current&&(M.current.setAttribute(S,""),L()),function(){_()}}),[S,b.breakpoint]),c((function(){g.clear(M.current)})),e.useImperativeHandle(o,(function(){return{props:b,toggle:R,show:K,hide:W,getElement:function(){return M.current}}}));var V=function(){k.getOtherProps(b);var r=m("p-tieredmenu p-component",{"p-tieredmenu-overlay":b.popup,"p-input-filled":"filled"===n.inputStyle,"p-ripple-disabled":!1===n.ripple},b.className),o=f({ref:M,id:b.id,className:r,style:b.style,onClick:H},k.getOtherProps(b),I("root"));return e.createElement(t,{nodeRef:M,classNames:"p-connected-overlay",in:h,timeout:{enter:120,exit:100},options:b.transitionOptions,unmountOnExit:!0,onEnter:J,onEntered:X,onExit:z,onExited:U},e.createElement("div",o,e.createElement(A,{menuProps:b,model:b.model,root:!0,popup:b.popup,onHide:W,isMobileMode:j,onItemToggle:Z,submenuIcon:b.submenuIcon,ptm:I})))}();return b.popup?e.createElement(s,{element:V,appendTo:b.appendTo}):V})));R.displayName="TieredMenu";export{R as TieredMenu};

package/tieredmenu/tieredmenu.js

@@ -1,5 +1,5 @@
 this.primereact = this.primereact || {};
-this.primereact.tieredmenu = (function (exports, React, PrimeReact, csstransition, hooks, overlayservice, portal, utils, ripple, angleright) {
+this.primereact.tieredmenu = (function (exports, React, PrimeReact, csstransition, hooks, overlayservice, portal, utils, componentbase, ripple, angleright) {
   'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -25,21 +25,6 @@ this.primereact.tieredmenu = (function (exports, React, PrimeReact, csstransitio
   var React__namespace = /*#__PURE__*/_interopNamespace(React);
   var PrimeReact__default = /*#__PURE__*/_interopDefaultLegacy(PrimeReact);
 
-  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);
-  }
-
   function _arrayWithHoles(arr) {
     if (Array.isArray(arr)) return arr;
   }
@@ -95,7 +80,7 @@ this.primereact.tieredmenu = (function (exports, React, PrimeReact, csstransitio
     return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
   }
 
-  var TieredMenuBase = {
+  var TieredMenuBase = componentbase.ComponentBase.extend({
     defaultProps: {
       __TYPE: 'TieredMenu',
       id: null,
@@ -113,21 +98,65 @@ this.primereact.tieredmenu = (function (exports, React, PrimeReact, csstransitio
       onHide: null,
       submenuIcon: null,
       children: undefined
-    },
-    getProps: function getProps(props) {
-      return utils.ObjectUtils.getMergedProps(props, TieredMenuBase.defaultProps);
-    },
-    getOtherProps: function getOtherProps(props) {
-      return utils.ObjectUtils.getDiffProps(props, TieredMenuBase.defaultProps);
     }
-  };
+  });
+
+  function _typeof(obj) {
+    "@babel/helpers - typeof";
+
+    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 _toPrimitive(input, hint) {
+    if (_typeof(input) !== "object" || input === null) return input;
+    var prim = input[Symbol.toPrimitive];
+    if (prim !== undefined) {
+      var res = prim.call(input, hint || "default");
+      if (_typeof(res) !== "object") return res;
+      throw new TypeError("@@toPrimitive must return a primitive value.");
+    }
+    return (hint === "string" ? String : Number)(input);
+  }
 
+  function _toPropertyKey(arg) {
+    var key = _toPrimitive(arg, "string");
+    return _typeof(key) === "symbol" ? key : String(key);
+  }
+
+  function _defineProperty(obj, key, value) {
+    key = _toPropertyKey(key);
+    if (key in obj) {
+      Object.defineProperty(obj, key, {
+        value: value,
+        enumerable: true,
+        configurable: true,
+        writable: true
+      });
+    } else {
+      obj[key] = value;
+    }
+    return obj;
+  }
+
+  function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+  function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
   var TieredMenuSub = /*#__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];
     var elementRef = React__namespace.useRef(null);
+    var getPTOptions = function getPTOptions(item, key) {
+      return props.ptm(key, {
+        context: {
+          active: activeItemState === item
+        }
+      });
+    };
     var _useEventListener = hooks.useEventListener({
         type: 'click',
         listener: function listener(event) {
@@ -268,11 +297,12 @@ this.primereact.tieredmenu = (function (exports, React, PrimeReact, csstransitio
     }, [activeItemState]);
     var createSeparator = function createSeparator(index) {
       var key = 'separator_' + index;
-      return /*#__PURE__*/React__namespace.createElement("li", {
+      var separatorProps = utils.mergeProps({
         key: key,
-        className: "p-menu-separator",
-        role: "separator"
-      });
+        className: 'p-menu-separator',
+        role: 'separator'
+      }, props.ptm('separator'));
+      return /*#__PURE__*/React__namespace.createElement("li", separatorProps);
     };
     var createSubmenu = function createSubmenu(item) {
       if (item.items) {
@@ -285,7 +315,8 @@ this.primereact.tieredmenu = (function (exports, React, PrimeReact, csstransitio
           parentActive: item === activeItemState,
           isMobileMode: props.isMobileMode,
           onItemToggle: props.onItemToggle,
-          submenuIcon: props.submenuIcon
+          submenuIcon: props.submenuIcon,
+          ptm: props.ptm
         });
       }
       return null;
@@ -313,37 +344,39 @@ this.primereact.tieredmenu = (function (exports, React, PrimeReact, csstransitio
         'p-disabled': disabled
       });
       var iconClassName = utils.classNames('p-menuitem-icon', _icon);
-      var icon = utils.IconUtils.getJSXIcon(_icon, {
-        className: 'p-menuitem-icon'
-      }, {
+      var iconProps = utils.mergeProps({
+        className: iconClassName
+      }, getPTOptions(item, 'icon'));
+      var icon = utils.IconUtils.getJSXIcon(_icon, _objectSpread({}, iconProps), {
         props: props.menuProps
       });
-      var label = _label && /*#__PURE__*/React__namespace.createElement("span", {
-        className: "p-menuitem-text"
-      }, _label);
+      var labelProps = utils.mergeProps({
+        className: 'p-menuitem-text'
+      }, getPTOptions(item, 'label'));
+      var label = _label && /*#__PURE__*/React__namespace.createElement("span", labelProps, _label);
       var submenuIconClassName = 'p-submenu-icon';
-      var submenuIcon = item.items && utils.IconUtils.getJSXIcon(props.submenuIcon || /*#__PURE__*/React__namespace.createElement(angleright.AngleRightIcon, {
+      var submenuIconProps = utils.mergeProps({
         className: submenuIconClassName
-      }), {
-        className: submenuIconClassName
-      }, {
+      }, getPTOptions(item, 'submenuIcon'));
+      var submenuIcon = item.items && utils.IconUtils.getJSXIcon(props.submenuIcon || /*#__PURE__*/React__namespace.createElement(angleright.AngleRightIcon, submenuIconProps), _objectSpread({}, submenuIconProps), {
         props: props.menuProps
       });
       var submenu = createSubmenu(item);
-      var content = /*#__PURE__*/React__namespace.createElement("a", {
+      var actionProps = utils.mergeProps({
         href: url || '#',
         className: linkClassName,
         target: target,
-        role: "menuitem",
-        "aria-haspopup": items != null,
+        role: 'menuitem',
+        'aria-haspopup': items != null,
         onClick: function onClick(event) {
           return onItemClick(event, item);
         },
         onKeyDown: function onKeyDown(event) {
           return onItemKeyDown(event, item);
         },
-        "aria-disabled": disabled
-      }, icon, label, submenuIcon, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null));
+        'aria-disabled': disabled
+      }, getPTOptions(item, 'action'));
+      var content = /*#__PURE__*/React__namespace.createElement("a", actionProps, icon, label, submenuIcon, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null));
       if (template) {
         var defaultContentOptions = {
           onClick: function onClick(event) {
@@ -363,7 +396,7 @@ this.primereact.tieredmenu = (function (exports, React, PrimeReact, csstransitio
         };
         content = utils.ObjectUtils.getJSXElement(template, item, defaultContentOptions);
       }
-      return /*#__PURE__*/React__namespace.createElement("li", {
+      var menuitemProps = utils.mergeProps({
         key: key,
         id: item.id,
         className: className,
@@ -371,8 +404,9 @@ this.primereact.tieredmenu = (function (exports, React, PrimeReact, csstransitio
         onMouseEnter: function onMouseEnter(event) {
           return onItemMouseEnter(event, item);
         },
-        role: "none"
-      }, content, submenu);
+        role: 'none'
+      }, getPTOptions(item, 'menuitem'));
+      return /*#__PURE__*/React__namespace.createElement("li", menuitemProps, content, submenu);
     };
     var createItem = function createItem(item, index) {
       return item.separator ? createSeparator(index) : createMenuItem(item, index);
@@ -384,12 +418,13 @@ this.primereact.tieredmenu = (function (exports, React, PrimeReact, csstransitio
       'p-submenu-list': !props.root
     });
     var submenu = createMenu();
-    return /*#__PURE__*/React__namespace.createElement("ul", {
+    var menuProps = utils.mergeProps({
       ref: elementRef,
       className: className,
       role: props.root ? 'menubar' : 'menu',
-      "aria-orientation": "horizontal"
-    }, submenu);
+      'aria-orientation': 'horizontal'
+    }, props.ptm('menu'));
+    return /*#__PURE__*/React__namespace.createElement("ul", menuProps, submenu);
   });
   TieredMenuSub.displayName = 'TieredMenuSub';
 
@@ -403,6 +438,14 @@ this.primereact.tieredmenu = (function (exports, React, PrimeReact, csstransitio
       _React$useState4 = _slicedToArray(_React$useState3, 2),
       attributeSelectorState = _React$useState4[0],
       setAttributeSelectorState = _React$useState4[1];
+    var _TieredMenuBase$setMe = TieredMenuBase.setMetaData({
+        props: props,
+        state: {
+          visible: visibleState,
+          attributeSelector: attributeSelectorState
+        }
+      }),
+      ptm = _TieredMenuBase$setMe.ptm;
     var menuRef = React__namespace.useRef(null);
     var targetRef = React__namespace.useRef(null);
     var styleElementRef = React__namespace.useRef(null);
@@ -510,12 +553,19 @@ this.primereact.tieredmenu = (function (exports, React, PrimeReact, csstransitio
       };
     });
     var createElement = function createElement() {
-      var otherProps = TieredMenuBase.getOtherProps(props);
+      TieredMenuBase.getOtherProps(props);
       var className = utils.classNames('p-tieredmenu p-component', {
         'p-tieredmenu-overlay': props.popup,
         'p-input-filled': PrimeReact__default["default"].inputStyle === 'filled',
         'p-ripple-disabled': PrimeReact__default["default"].ripple === false
       }, props.className);
+      var rootProps = utils.mergeProps({
+        ref: menuRef,
+        id: props.id,
+        className: className,
+        style: props.style,
+        onClick: onPanelClick
+      }, TieredMenuBase.getOtherProps(props), ptm('root'));
       return /*#__PURE__*/React__namespace.createElement(csstransition.CSSTransition, {
         nodeRef: menuRef,
         classNames: "p-connected-overlay",
@@ -530,14 +580,7 @@ this.primereact.tieredmenu = (function (exports, React, PrimeReact, csstransitio
         onEntered: onEntered,
         onExit: onExit,
         onExited: onExited
-      }, /*#__PURE__*/React__namespace.createElement("div", _extends({
-        ref: menuRef,
-        id: props.id,
-        className: className,
-        style: props.style
-      }, otherProps, {
-        onClick: onPanelClick
-      }), /*#__PURE__*/React__namespace.createElement(TieredMenuSub, {
+      }, /*#__PURE__*/React__namespace.createElement("div", rootProps, /*#__PURE__*/React__namespace.createElement(TieredMenuSub, {
         menuProps: props,
         model: props.model,
         root: true,
@@ -545,7 +588,8 @@ this.primereact.tieredmenu = (function (exports, React, PrimeReact, csstransitio
         onHide: hide,
         isMobileMode: isMobileMode,
         onItemToggle: onItemToggle,
-        submenuIcon: props.submenuIcon
+        submenuIcon: props.submenuIcon,
+        ptm: ptm
       })));
     };
     var element = createElement();
@@ -562,4 +606,4 @@ this.primereact.tieredmenu = (function (exports, React, PrimeReact, csstransitio
 
   return exports;
 
-})({}, React, primereact.api, primereact.csstransition, primereact.hooks, primereact.overlayservice, primereact.portal, primereact.utils, primereact.ripple, primereact.icons.angleright);
+})({}, React, primereact.api, primereact.csstransition, primereact.hooks, primereact.overlayservice, primereact.portal, primereact.utils, primereact.componentbase, primereact.ripple, primereact.icons.angleright);