primereact 9.3.1 → 9.5.0

package/panel/panel.js

@@ -1,5 +1,5 @@
 this.primereact = this.primereact || {};
-this.primereact.panel = (function (exports, React, csstransition, hooks, minus, plus, ripple, utils) {
+this.primereact.panel = (function (exports, React, csstransition, hooks, minus, plus, ripple, utils, componentbase) {
   'use strict';
 
   function _interopNamespace(e) {
@@ -22,21 +22,6 @@ this.primereact.panel = (function (exports, React, csstransition, hooks, minus,
 
   var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
-  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;
   }
@@ -92,12 +77,14 @@ this.primereact.panel = (function (exports, React, csstransition, hooks, minus,
     return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
   }
 
-  var PanelBase = {
+  var PanelBase = componentbase.ComponentBase.extend({
     defaultProps: {
       __TYPE: 'Panel',
       id: null,
       header: null,
       headerTemplate: null,
+      footer: null,
+      footerTemplate: null,
       toggleable: null,
       style: null,
       className: null,
@@ -110,14 +97,8 @@ this.primereact.panel = (function (exports, React, csstransition, hooks, minus,
       onCollapse: null,
       onToggle: null,
       children: undefined
-    },
-    getProps: function getProps(props) {
-      return utils.ObjectUtils.getMergedProps(props, PanelBase.defaultProps);
-    },
-    getOtherProps: function getOtherProps(props) {
-      return utils.ObjectUtils.getDiffProps(props, PanelBase.defaultProps);
     }
-  };
+  });
 
   var Panel = /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref) {
     var props = PanelBase.getProps(inProps);
@@ -134,6 +115,14 @@ this.primereact.panel = (function (exports, React, csstransition, hooks, minus,
     var collapsed = props.toggleable ? props.onToggle ? props.collapsed : collapsedState : false;
     var headerId = idState + '_header';
     var contentId = idState + '_content';
+    var _PanelBase$setMetaDat = PanelBase.setMetaData({
+        props: props,
+        state: {
+          id: idState,
+          collapsed: collapsed
+        }
+      }),
+      ptm = _PanelBase$setMetaDat.ptm;
     var toggle = function toggle(event) {
       if (props.toggleable) {
         collapsed ? expand(event) : collapse(event);
@@ -180,19 +169,21 @@ this.primereact.panel = (function (exports, React, csstransition, hooks, minus,
     var createToggleIcon = function createToggleIcon() {
       if (props.toggleable) {
         var buttonId = idState + '_label';
-        var icon = collapsed ? props.expandIcon || /*#__PURE__*/React__namespace.createElement(plus.PlusIcon, null) : props.collapseIcon || /*#__PURE__*/React__namespace.createElement(minus.MinusIcon, null);
-        var toggleIcon = utils.IconUtils.getJSXIcon(icon, undefined, {
+        var togglerProps = utils.mergeProps({
+          className: 'p-panel-header-icon p-panel-toggler p-link',
+          onClick: toggle,
+          id: buttonId,
+          'aria-controls': contentId,
+          'aria-expanded': !collapsed,
+          role: 'tab'
+        }, ptm('toggler'));
+        var togglerIconProps = utils.mergeProps(ptm('togglericon'));
+        var icon = collapsed ? props.expandIcon || /*#__PURE__*/React__namespace.createElement(plus.PlusIcon, togglerIconProps) : props.collapseIcon || /*#__PURE__*/React__namespace.createElement(minus.MinusIcon, togglerIconProps);
+        var toggleIcon = utils.IconUtils.getJSXIcon(icon, togglerIconProps, {
           props: props,
           collapsed: collapsed
         });
-        return /*#__PURE__*/React__namespace.createElement("button", {
-          className: "p-panel-header-icon p-panel-toggler p-link",
-          onClick: toggle,
-          id: buttonId,
-          "aria-controls": contentId,
-          "aria-expanded": !collapsed,
-          role: "tab"
-        }, toggleIcon, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null));
+        return /*#__PURE__*/React__namespace.createElement("button", togglerProps, toggleIcon, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null));
       }
       return null;
     };
@@ -200,16 +191,19 @@ this.primereact.panel = (function (exports, React, csstransition, hooks, minus,
       var header = utils.ObjectUtils.getJSXElement(props.header, props);
       var icons = utils.ObjectUtils.getJSXElement(props.icons, props);
       var togglerElement = createToggleIcon();
-      var titleElement = /*#__PURE__*/React__namespace.createElement("span", {
-        className: "p-panel-title",
-        id: headerId
-      }, header);
-      var iconsElement = /*#__PURE__*/React__namespace.createElement("div", {
-        className: "p-panel-icons"
-      }, icons, togglerElement);
-      var content = /*#__PURE__*/React__namespace.createElement("div", {
-        className: "p-panel-header"
-      }, titleElement, iconsElement);
+      var titleProps = utils.mergeProps({
+        id: headerId,
+        className: 'p-panel-title'
+      }, ptm('title'));
+      var titleElement = /*#__PURE__*/React__namespace.createElement("span", titleProps, header);
+      var iconsProps = utils.mergeProps({
+        className: 'p-panel-icons'
+      }, ptm('icons'));
+      var iconsElement = /*#__PURE__*/React__namespace.createElement("div", iconsProps, icons, togglerElement);
+      var headerProps = utils.mergeProps({
+        className: 'p-panel-header'
+      }, ptm('header'));
+      var content = /*#__PURE__*/React__namespace.createElement("div", headerProps, titleElement, iconsElement);
       if (props.headerTemplate) {
         var defaultContentOptions = {
           className: 'p-panel-header',
@@ -231,6 +225,17 @@ this.primereact.panel = (function (exports, React, csstransition, hooks, minus,
       return null;
     };
     var createContent = function createContent() {
+      var toggleableContentProps = utils.mergeProps({
+        ref: contentRef,
+        className: 'p-toggleable-content',
+        'aria-hidden': collapsed,
+        role: 'region',
+        id: contentId,
+        'aria-labelledby': headerId
+      }, ptm('toggleablecontent'));
+      var contentProps = utils.mergeProps({
+        className: 'p-panel-content'
+      }, ptm('content'));
       return /*#__PURE__*/React__namespace.createElement(csstransition.CSSTransition, {
         nodeRef: contentRef,
         classNames: "p-toggleable-content",
@@ -241,29 +246,38 @@ this.primereact.panel = (function (exports, React, csstransition, hooks, minus,
         "in": !collapsed,
         unmountOnExit: true,
         options: props.transitionOptions
-      }, /*#__PURE__*/React__namespace.createElement("div", {
-        ref: contentRef,
-        className: "p-toggleable-content",
-        "aria-hidden": collapsed,
-        role: "region",
-        id: contentId,
-        "aria-labelledby": headerId
-      }, /*#__PURE__*/React__namespace.createElement("div", {
-        className: "p-panel-content"
-      }, props.children)));
+      }, /*#__PURE__*/React__namespace.createElement("div", toggleableContentProps, /*#__PURE__*/React__namespace.createElement("div", contentProps, props.children)));
     };
-    var otherProps = PanelBase.getOtherProps(props);
-    var className = utils.classNames('p-panel p-component', {
-      'p-panel-toggleable': props.toggleable
-    }, props.className);
+    var createFooter = function createFooter() {
+      var footer = utils.ObjectUtils.getJSXElement(props.footer, props);
+      var footerProps = utils.mergeProps({
+        className: 'p-panel-footer'
+      }, ptm('footer'));
+      var content = /*#__PURE__*/React__namespace.createElement("div", footerProps, footer);
+      if (props.footerTemplate) {
+        var defaultContentOptions = {
+          className: 'p-panel-footer',
+          element: content,
+          props: props
+        };
+        return utils.ObjectUtils.getJSXElement(props.footerTemplate, defaultContentOptions);
+      } else if (props.footer) {
+        return content;
+      }
+      return null;
+    };
+    var rootProps = utils.mergeProps({
+      id: idState,
+      ref: elementRef,
+      style: props.style,
+      className: utils.classNames('p-panel p-component', {
+        'p-panel-toggleable': props.toggleable
+      }, props.className)
+    }, PanelBase.getOtherProps(props), ptm('root'));
     var header = createHeader();
     var content = createContent();
-    return /*#__PURE__*/React__namespace.createElement("div", _extends({
-      id: props.id,
-      ref: elementRef,
-      className: className,
-      style: props.style
-    }, otherProps), header, content);
+    var footer = createFooter();
+    return /*#__PURE__*/React__namespace.createElement("div", rootProps, header, content, footer);
   });
   Panel.displayName = 'Panel';
 
@@ -273,4 +287,4 @@ this.primereact.panel = (function (exports, React, csstransition, hooks, minus,
 
   return exports;
 
-})({}, React, primereact.csstransition, primereact.hooks, primereact.icons.minus, primereact.icons.plus, primereact.ripple, primereact.utils);
+})({}, React, primereact.csstransition, primereact.hooks, primereact.icons.minus, primereact.icons.plus, primereact.ripple, primereact.utils, primereact.componentbase);

package/panel/panel.min.js

@@ -1 +1 @@
-this.primereact=this.primereact||{},this.primereact.panel=function(e,t,n,l,r,a,o,i){"use strict";function c(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(n){if("default"!==n){var l=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,l.get?l:{enumerable:!0,get:function(){return e[n]}})}})),t.default=e,Object.freeze(t)}var s=c(t);function u(){return u=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var l in n)Object.prototype.hasOwnProperty.call(n,l)&&(e[l]=n[l])}return e},u.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 l,r,a,o,i=[],c=!0,s=!1;try{if(a=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;c=!1}else for(;!(c=(l=a.call(n)).done)&&(i.push(l.value),i.length!==t);c=!0);}catch(e){s=!0,r=e}finally{try{if(!c&&null!=n.return&&(o=n.return(),Object(o)!==o))return}finally{if(s)throw r}}return i}}function d(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,l=new Array(t);n<t;n++)l[n]=e[n];return l}function g(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 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 b(e,t){return p(e)||f(e,t)||g(e,t)||m()}var h={defaultProps:{__TYPE:"Panel",id:null,header:null,headerTemplate:null,toggleable:null,style:null,className:null,collapsed:null,expandIcon:null,collapseIcon:null,icons:null,transitionOptions:null,onExpand:null,onCollapse:null,onToggle:null,children:void 0},getProps:function(e){return i.ObjectUtils.getMergedProps(e,h.defaultProps)},getOtherProps:function(e){return i.ObjectUtils.getDiffProps(e,h.defaultProps)}},v=s.forwardRef((function(e,t){var c=h.getProps(e),p=b(s.useState(c.id),2),f=p[0],d=p[1],g=b(s.useState(c.collapsed),2),m=g[0],v=g[1],y=s.useRef(t),E=s.useRef(null),O=!!c.toggleable&&(c.onToggle?c.collapsed:m),j=f+"_header",P=f+"_content",N=function(e){c.toggleable&&(O?I(e):S(e),c.onToggle&&c.onToggle({originalEvent:e,value:!O})),e.preventDefault()},I=function(e){c.onToggle||v(!1),c.onExpand&&c.onExpand(e)},S=function(e){c.onToggle||v(!0),c.onCollapse&&c.onCollapse(e)};s.useImperativeHandle(t,(function(){return{props:c,getElement:function(){return y.current},getContent:function(){return E.current}}})),s.useEffect((function(){i.ObjectUtils.combinedRefs(y,t)}),[y,t]),l.useMountEffect((function(){f||d(i.UniqueComponentId())}));var T=function(){if(c.toggleable){var e=f+"_label",t=i.IconUtils.getJSXIcon(O?c.expandIcon||s.createElement(a.PlusIcon,null):c.collapseIcon||s.createElement(r.MinusIcon,null),void 0,{props:c,collapsed:O});return s.createElement("button",{className:"p-panel-header-icon p-panel-toggler p-link",onClick:N,id:e,"aria-controls":P,"aria-expanded":!O,role:"tab"},t,s.createElement(o.Ripple,null))}return null},C=h.getOtherProps(c),x=i.classNames("p-panel p-component",{"p-panel-toggleable":c.toggleable},c.className),U=function(){var e=i.ObjectUtils.getJSXElement(c.header,c),t=i.ObjectUtils.getJSXElement(c.icons,c),n=T(),l=s.createElement("span",{className:"p-panel-title",id:j},e),r=s.createElement("div",{className:"p-panel-icons"},t,n),a=s.createElement("div",{className:"p-panel-header"},l,r);return c.headerTemplate?i.ObjectUtils.getJSXElement(c.headerTemplate,{className:"p-panel-header",titleClassName:"p-panel-title",iconsClassName:"p-panel-icons",togglerClassName:"p-panel-header-icon p-panel-toggler p-link",onTogglerClick:N,titleElement:l,iconsElement:r,togglerElement:n,element:a,props:c,collapsed:O}):c.header||c.toggleable?a:null}(),_=s.createElement(n.CSSTransition,{nodeRef:E,classNames:"p-toggleable-content",timeout:{enter:1e3,exit:450},in:!O,unmountOnExit:!0,options:c.transitionOptions},s.createElement("div",{ref:E,className:"p-toggleable-content","aria-hidden":O,role:"region",id:P,"aria-labelledby":j},s.createElement("div",{className:"p-panel-content"},c.children)));return s.createElement("div",u({id:c.id,ref:y,className:x,style:c.style},C),U,_)}));return v.displayName="Panel",e.Panel=v,Object.defineProperty(e,"__esModule",{value:!0}),e}({},React,primereact.csstransition,primereact.hooks,primereact.icons.minus,primereact.icons.plus,primereact.ripple,primereact.utils);
+this.primereact=this.primereact||{},this.primereact.panel=function(e,t,n,l,r,o,a,i,c){"use strict";function s(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(n){if("default"!==n){var l=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,l.get?l:{enumerable:!0,get:function(){return e[n]}})}})),t.default=e,Object.freeze(t)}var p=s(t);function u(e){if(Array.isArray(e))return e}function m(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var l,r,o,a,i=[],c=!0,s=!1;try{if(o=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;c=!1}else for(;!(c=(l=o.call(n)).done)&&(i.push(l.value),i.length!==t);c=!0);}catch(e){s=!0,r=e}finally{try{if(!c&&null!=n.return&&(a=n.return(),Object(a)!==a))return}finally{if(s)throw r}}return i}}function g(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,l=new Array(t);n<t;n++)l[n]=e[n];return l}function f(e,t){if(e){if("string"==typeof e)return g(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)?g(e,t):void 0}}function d(){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 b(e,t){return u(e)||m(e,t)||f(e,t)||d()}var E=c.ComponentBase.extend({defaultProps:{__TYPE:"Panel",id:null,header:null,headerTemplate:null,footer:null,footerTemplate:null,toggleable:null,style:null,className:null,collapsed:null,expandIcon:null,collapseIcon:null,icons:null,transitionOptions:null,onExpand:null,onCollapse:null,onToggle:null,children:void 0}}),h=p.forwardRef((function(e,t){var c=E.getProps(e),s=b(p.useState(c.id),2),u=s[0],m=s[1],g=b(p.useState(c.collapsed),2),f=g[0],d=g[1],h=p.useRef(t),v=p.useRef(null),y=!!c.toggleable&&(c.onToggle?c.collapsed:f),O=u+"_header",P=u+"_content",N=E.setMetaData({props:c,state:{id:u,collapsed:y}}).ptm,j=function(e){c.toggleable&&(y?T(e):S(e),c.onToggle&&c.onToggle({originalEvent:e,value:!y})),e.preventDefault()},T=function(e){c.onToggle||d(!1),c.onExpand&&c.onExpand(e)},S=function(e){c.onToggle||d(!0),c.onCollapse&&c.onCollapse(e)};p.useImperativeHandle(t,(function(){return{props:c,getElement:function(){return h.current},getContent:function(){return v.current}}})),p.useEffect((function(){i.ObjectUtils.combinedRefs(h,t)}),[h,t]),l.useMountEffect((function(){u||m(i.UniqueComponentId())}));var C,I,x=function(){if(c.toggleable){var e=i.mergeProps({className:"p-panel-header-icon p-panel-toggler p-link",onClick:j,id:u+"_label","aria-controls":P,"aria-expanded":!y,role:"tab"},N("toggler")),t=i.mergeProps(N("togglericon")),n=i.IconUtils.getJSXIcon(y?c.expandIcon||p.createElement(o.PlusIcon,t):c.collapseIcon||p.createElement(r.MinusIcon,t),t,{props:c,collapsed:y});return p.createElement("button",e,n,p.createElement(a.Ripple,null))}return null},U=i.mergeProps({id:u,ref:h,style:c.style,className:i.classNames("p-panel p-component",{"p-panel-toggleable":c.toggleable},c.className)},E.getOtherProps(c),N("root")),_=function(){var e=i.ObjectUtils.getJSXElement(c.header,c),t=i.ObjectUtils.getJSXElement(c.icons,c),n=x(),l=i.mergeProps({id:O,className:"p-panel-title"},N("title")),r=p.createElement("span",l,e),o=i.mergeProps({className:"p-panel-icons"},N("icons")),a=p.createElement("div",o,t,n),s=i.mergeProps({className:"p-panel-header"},N("header")),u=p.createElement("div",s,r,a);return c.headerTemplate?i.ObjectUtils.getJSXElement(c.headerTemplate,{className:"p-panel-header",titleClassName:"p-panel-title",iconsClassName:"p-panel-icons",togglerClassName:"p-panel-header-icon p-panel-toggler p-link",onTogglerClick:j,titleElement:r,iconsElement:a,togglerElement:n,element:u,props:c,collapsed:y}):c.header||c.toggleable?u:null}(),R=(C=i.mergeProps({ref:v,className:"p-toggleable-content","aria-hidden":y,role:"region",id:P,"aria-labelledby":O},N("toggleablecontent")),I=i.mergeProps({className:"p-panel-content"},N("content")),p.createElement(n.CSSTransition,{nodeRef:v,classNames:"p-toggleable-content",timeout:{enter:1e3,exit:450},in:!y,unmountOnExit:!0,options:c.transitionOptions},p.createElement("div",C,p.createElement("div",I,c.children)))),k=function(){var e=i.ObjectUtils.getJSXElement(c.footer,c),t=i.mergeProps({className:"p-panel-footer"},N("footer")),n=p.createElement("div",t,e);return c.footerTemplate?i.ObjectUtils.getJSXElement(c.footerTemplate,{className:"p-panel-footer",element:n,props:c}):c.footer?n:null}();return p.createElement("div",U,_,R,k)}));return h.displayName="Panel",e.Panel=h,Object.defineProperty(e,"__esModule",{value:!0}),e}({},React,primereact.csstransition,primereact.hooks,primereact.icons.minus,primereact.icons.plus,primereact.ripple,primereact.utils,primereact.componentbase);

package/panelmenu/panelmenu.cjs.js

@@ -5,9 +5,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var csstransition = require('primereact/csstransition');
 var hooks = require('primereact/hooks');
-var utils = require('primereact/utils');
-var chevronright = require('primereact/icons/chevronright');
 var chevrondown = require('primereact/icons/chevrondown');
+var chevronright = require('primereact/icons/chevronright');
+var utils = require('primereact/utils');
+var componentbase = require('primereact/componentbase');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -29,19 +30,45 @@ function _interopNamespace(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
-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 _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 _arrayLikeToArray(arr, len) {
@@ -115,7 +142,7 @@ function _slicedToArray(arr, i) {
   return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
 }
 
-var PanelMenuBase = {
+var PanelMenuBase = componentbase.ComponentBase.extend({
   defaultProps: {
     __TYPE: 'Panel',
     id: null,
@@ -126,20 +153,23 @@ var PanelMenuBase = {
     multiple: false,
     transitionOptions: null,
     children: undefined
-  },
-  getProps: function getProps(props) {
-    return utils.ObjectUtils.getMergedProps(props, PanelMenuBase.defaultProps);
-  },
-  getOtherProps: function getOtherProps(props) {
-    return utils.ObjectUtils.getDiffProps(props, PanelMenuBase.defaultProps);
   }
-};
+});
 
+function ownKeys$1(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$1(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var PanelMenuSub = /*#__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 getPTOptions = function getPTOptions(item, key) {
+    return props.ptm(key, {
+      context: {
+        active: isItemActive(item)
+      }
+    });
+  };
   var findActiveItem = function findActiveItem() {
     if (props.model) {
       if (props.multiple) {
@@ -195,16 +225,21 @@ var PanelMenuSub = /*#__PURE__*/React__namespace.memo(function (props) {
   });
   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"
-    });
+      className: 'p-menu-separator'
+    }, props.ptm('separator'));
+    return /*#__PURE__*/React__namespace.createElement("li", separatorProps);
   };
   var createSubmenu = function createSubmenu(item, active) {
     var className = utils.classNames('p-toggleable-content', {
       'p-toggleable-content-collapsed': !active
     });
     var submenuRef = /*#__PURE__*/React__namespace.createRef();
+    var toggleableContentProps = utils.mergeProps({
+      ref: submenuRef,
+      className: className
+    }, props.ptm('toggleableContent'));
     if (item.items) {
       return /*#__PURE__*/React__namespace.createElement(csstransition.CSSTransition, {
         nodeRef: submenuRef,
@@ -215,14 +250,12 @@ var PanelMenuSub = /*#__PURE__*/React__namespace.memo(function (props) {
         },
         "in": active,
         unmountOnExit: true
-      }, /*#__PURE__*/React__namespace.createElement("div", {
-        ref: submenuRef,
-        className: className
-      }, /*#__PURE__*/React__namespace.createElement(PanelMenuSub, {
+      }, /*#__PURE__*/React__namespace.createElement("div", toggleableContentProps, /*#__PURE__*/React__namespace.createElement(PanelMenuSub, {
         menuProps: props.menuProps,
         model: item.items,
         multiple: props.multiple,
-        submenuIcon: props.submenuIcon
+        submenuIcon: props.submenuIcon,
+        ptm: props.ptm
       })));
     }
     return null;
@@ -238,31 +271,33 @@ var PanelMenuSub = /*#__PURE__*/React__namespace.memo(function (props) {
       'p-disabled': item.disabled
     });
     var iconClassName = utils.classNames('p-menuitem-icon', item.icon);
-    var icon = utils.IconUtils.getJSXIcon(item.icon, {
-      className: 'p-menuitem-icon'
-    }, {
+    var iconProps = utils.mergeProps({
+      className: iconClassName
+    }, getPTOptions(item, 'icon'));
+    var icon = utils.IconUtils.getJSXIcon(item.icon, _objectSpread$1({}, iconProps), {
       props: props.menuProps
     });
-    var label = item.label && /*#__PURE__*/React__namespace.createElement("span", {
-      className: "p-menuitem-text"
-    }, item.label);
+    var labelProps = utils.mergeProps({
+      className: 'p-menuitem-text'
+    }, getPTOptions(item, 'label'));
+    var label = item.label && /*#__PURE__*/React__namespace.createElement("span", labelProps, item.label);
     var submenuIconClassName = 'p-panelmenu-icon';
-    var submenuIcon = item.items && utils.IconUtils.getJSXIcon(active ? props.submenuIcon || /*#__PURE__*/React__namespace.createElement(chevrondown.ChevronDownIcon, {
-      className: submenuIconClassName
-    }) : props.submenuIcon || /*#__PURE__*/React__namespace.createElement(chevronright.ChevronRightIcon, {
+    var submenuIconProps = utils.mergeProps({
       className: submenuIconClassName
-    }));
+    }, getPTOptions(item, 'submenuicon'));
+    var submenuIcon = item.items && utils.IconUtils.getJSXIcon(active ? props.submenuIcon || /*#__PURE__*/React__namespace.createElement(chevrondown.ChevronDownIcon, submenuIconProps) : props.submenuIcon || /*#__PURE__*/React__namespace.createElement(chevronright.ChevronRightIcon, submenuIconProps));
     var submenu = createSubmenu(item, active);
-    var content = /*#__PURE__*/React__namespace.createElement("a", {
+    var actionProps = utils.mergeProps({
       href: item.url || '#',
       className: linkClassName,
       target: item.target,
       onClick: function onClick(event) {
         return onItemClick(event, item);
       },
-      role: "menuitem",
-      "aria-disabled": item.disabled
-    }, submenuIcon, icon, label);
+      role: 'menuitem',
+      'aria-disabled': item.disabled
+    }, getPTOptions(item, 'action'));
+    var content = /*#__PURE__*/React__namespace.createElement("a", actionProps, submenuIcon, icon, label);
     if (item.template) {
       var defaultContentOptions = {
         onClick: function onClick(event) {
@@ -279,13 +314,14 @@ var PanelMenuSub = /*#__PURE__*/React__namespace.memo(function (props) {
       };
       content = utils.ObjectUtils.getJSXElement(item.template, item, defaultContentOptions);
     }
-    return /*#__PURE__*/React__namespace.createElement("li", {
+    var menuitemProps = utils.mergeProps({
       key: key,
       id: item.id,
       className: className,
       style: item.style,
-      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);
@@ -295,13 +331,16 @@ var PanelMenuSub = /*#__PURE__*/React__namespace.memo(function (props) {
   };
   var className = utils.classNames('p-submenu-list', props.className);
   var menu = createMenu();
-  return /*#__PURE__*/React__namespace.createElement("ul", {
+  var menuProps = utils.mergeProps({
     className: className,
-    role: "tree"
-  }, menu);
+    role: 'tree'
+  }, props.ptm('menu'));
+  return /*#__PURE__*/React__namespace.createElement("ul", menuProps, menu);
 });
 PanelMenuSub.displayName = 'PanelMenuSub';
 
+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 PanelMenu = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref) {
   var props = PanelMenuBase.getProps(inProps);
   var _React$useState = React__namespace.useState(props.id),
@@ -319,6 +358,15 @@ var PanelMenu = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespac
   var elementRef = React__namespace.useRef(null);
   var headerId = idState + '_header';
   var contentId = idState + '_content';
+  var _PanelMenuBase$setMet = PanelMenuBase.setMetaData({
+      props: props,
+      state: {
+        id: idState,
+        activeItem: activeItemState,
+        animationDisabled: animationDisabled
+      }
+    }),
+    ptm = _PanelMenuBase$setMet.ptm;
   var findActiveItem = function findActiveItem() {
     if (props.model) {
       if (props.multiple) {
@@ -369,6 +417,13 @@ var PanelMenu = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespac
   var isItemActive = function isItemActive(item) {
     return activeItemState && (props.multiple ? activeItemState.indexOf(item) > -1 : activeItemState === item);
   };
+  var getPTOptions = function getPTOptions(item, key) {
+    return ptm(key, {
+      context: {
+        active: isItemActive(item)
+      }
+    });
+  };
   React__namespace.useImperativeHandle(ref, function () {
     return {
       props: props,
@@ -402,35 +457,37 @@ var PanelMenu = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespac
       'p-disabled': item.disabled
     });
     var iconClassName = utils.classNames('p-menuitem-icon', item.icon);
-    var icon = utils.IconUtils.getJSXIcon(item.icon, {
-      className: 'p-menuitem-icon'
-    }, {
+    var headerIconProps = utils.mergeProps({
+      className: iconClassName
+    }, getPTOptions(item, 'headerIcon'));
+    var icon = utils.IconUtils.getJSXIcon(item.icon, _objectSpread({}, headerIconProps), {
       props: props
     });
     var submenuIconClassName = 'p-panelmenu-icon';
-    var submenuIcon = item.items && utils.IconUtils.getJSXIcon(active ? props.submenuIcon || /*#__PURE__*/React__namespace.createElement(chevrondown.ChevronDownIcon, {
-      className: submenuIconClassName
-    }) : props.submenuIcon || /*#__PURE__*/React__namespace.createElement(chevronright.ChevronRightIcon, {
+    var headerSubmenuIconProps = utils.mergeProps({
       className: submenuIconClassName
-    }));
-    var label = item.label && /*#__PURE__*/React__namespace.createElement("span", {
-      className: "p-menuitem-text"
-    }, item.label);
+    }, getPTOptions(item, 'headerSubmenuIcon'));
+    var submenuIcon = item.items && utils.IconUtils.getJSXIcon(active ? props.submenuIcon || /*#__PURE__*/React__namespace.createElement(chevrondown.ChevronDownIcon, headerSubmenuIconProps) : props.submenuIcon || /*#__PURE__*/React__namespace.createElement(chevronright.ChevronRightIcon, headerSubmenuIconProps));
+    var headerLabelProps = utils.mergeProps({
+      className: 'p-menuitem-text'
+    }, getPTOptions(item, 'headerLabel'));
+    var label = item.label && /*#__PURE__*/React__namespace.createElement("span", headerLabelProps, item.label);
     var contentWrapperClassName = utils.classNames('p-toggleable-content', {
       'p-toggleable-content-collapsed': !active
     });
     var menuContentRef = /*#__PURE__*/React__namespace.createRef();
-    var content = /*#__PURE__*/React__namespace.createElement("a", {
+    var headerActionProps = utils.mergeProps({
       href: item.url || '#',
-      className: "p-panelmenu-header-link",
+      className: 'p-panelmenu-header-link',
       onClick: function onClick(e) {
         return onItemClick(e, item);
       },
-      "aria-expanded": active,
+      'aria-expanded': active,
       id: headerId,
-      "aria-controls": contentId,
-      "aria-disabled": item.disabled
-    }, submenuIcon, icon, label);
+      'aria-controls': contentId,
+      'aria-disabled': item.disabled
+    }, getPTOptions(item, 'headerAction'));
+    var content = /*#__PURE__*/React__namespace.createElement("a", headerActionProps, submenuIcon, icon, label);
     if (item.template) {
       var defaultContentOptions = {
         onClick: function onClick(event) {
@@ -447,14 +504,26 @@ var PanelMenu = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespac
       };
       content = utils.ObjectUtils.getJSXElement(item.template, item, defaultContentOptions);
     }
-    return /*#__PURE__*/React__namespace.createElement("div", {
+    var panelProps = utils.mergeProps({
       key: key,
       className: className,
       style: item.style
-    }, /*#__PURE__*/React__namespace.createElement("div", {
+    }, getPTOptions(item, 'panel'));
+    var headerProps = utils.mergeProps({
       className: headerClassName,
       style: item.style
-    }, content), /*#__PURE__*/React__namespace.createElement(csstransition.CSSTransition, {
+    }, getPTOptions(item, 'header'));
+    var menuContentProps = utils.mergeProps({
+      className: 'p-panelmenu-content'
+    }, getPTOptions(item, 'menuContent'));
+    var headerToggleableContentProps = utils.mergeProps({
+      ref: menuContentRef,
+      className: contentWrapperClassName,
+      role: 'region',
+      id: contentId,
+      'aria-labelledby': headerId
+    }, getPTOptions(item, 'headerToggleableContent'));
+    return /*#__PURE__*/React__namespace.createElement("div", panelProps, /*#__PURE__*/React__namespace.createElement("div", headerProps, content), /*#__PURE__*/React__namespace.createElement(csstransition.CSSTransition, {
       nodeRef: menuContentRef,
       classNames: "p-toggleable-content",
       timeout: {
@@ -466,34 +535,27 @@ var PanelMenu = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespac
       "in": active,
       unmountOnExit: true,
       options: props.transitionOptions
-    }, /*#__PURE__*/React__namespace.createElement("div", {
-      ref: menuContentRef,
-      className: contentWrapperClassName,
-      role: "region",
-      id: contentId,
-      "aria-labelledby": headerId
-    }, /*#__PURE__*/React__namespace.createElement("div", {
-      className: "p-panelmenu-content"
-    }, /*#__PURE__*/React__namespace.createElement(PanelMenuSub, {
+    }, /*#__PURE__*/React__namespace.createElement("div", headerToggleableContentProps, /*#__PURE__*/React__namespace.createElement("div", menuContentProps, /*#__PURE__*/React__namespace.createElement(PanelMenuSub, {
       menuProps: props,
       model: item.items,
       className: "p-panelmenu-root-submenu",
       multiple: props.multiple,
-      submenuIcon: props.submenuIcon
+      submenuIcon: props.submenuIcon,
+      ptm: ptm
     })))));
   };
   var createPanels = function createPanels() {
     return props.model ? props.model.map(createPanel) : null;
   };
-  var otherProps = PanelMenuBase.getOtherProps(props);
   var className = utils.classNames('p-panelmenu p-component', props.className);
   var panels = createPanels();
-  return /*#__PURE__*/React__namespace.createElement("div", _extends({
+  var rootProps = utils.mergeProps({
     id: props.id,
     ref: elementRef,
     className: className,
     style: props.style
-  }, otherProps), panels);
+  }, PanelMenuBase.getOtherProps(props), ptm('root'));
+  return /*#__PURE__*/React__namespace.createElement("div", rootProps, panels);
 }));
 PanelMenu.displayName = 'PanelMenu';